You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
960 B
33 lines
960 B
<script lang="ts">
|
|
/** A scatter mark — one circle per row at the series value. */
|
|
import { getChartContext } from './context';
|
|
import type { ChartScatterProps } from './types';
|
|
|
|
let { series, color, radius }: ChartScatterProps = $props();
|
|
const ctx = getChartContext();
|
|
|
|
const key = $derived(series ?? ctx.series[0]);
|
|
const index = $derived(key ? Math.max(0, ctx.series.indexOf(key)) : 0);
|
|
const fill = $derived(ctx.color(color ?? index));
|
|
|
|
const points = $derived.by(() => {
|
|
if (!key) return [];
|
|
return ctx.data
|
|
.map((row) => ({ cx: ctx.px(row), cy: ctx.py(Number(row[key])) }))
|
|
.filter((p) => Number.isFinite(p.cx) && Number.isFinite(p.cy));
|
|
});
|
|
</script>
|
|
|
|
<!-- Radius comes from --chart-point-radius (chart.css); `radius` overrides. -->
|
|
<g data-chart-scatter>
|
|
{#each points as p}
|
|
<circle
|
|
data-chart-point
|
|
cx={p.cx}
|
|
cy={p.cy}
|
|
fill={fill}
|
|
style={radius !== undefined ? `r: ${radius}px` : undefined}
|
|
/>
|
|
{/each}
|
|
</g>
|