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.
31 lines
1.0 KiB
31 lines
1.0 KiB
<script lang="ts">
|
|
/**
|
|
* Cartesian grid lines — horizontal (y) by default, vertical (x) optional.
|
|
* Exposed as both `Chart.Grid` and `Chart.CartesianGrid`.
|
|
*/
|
|
import { getChartContext } from './context';
|
|
import type { ChartGridProps } from './types';
|
|
|
|
let { ticks = 5, x = false, y = true }: ChartGridProps = $props();
|
|
const ctx = getChartContext();
|
|
|
|
const yLines = $derived(y ? ctx.yScale.ticks(ticks).map((t) => ctx.yScale(t)) : []);
|
|
const xLines = $derived.by(() => {
|
|
if (!x) return [];
|
|
if (ctx.xKind === 'band' || ctx.xKind === 'point') {
|
|
return (ctx.xScale.domain as readonly string[]).map((category) => ctx.categoryX(category));
|
|
}
|
|
const scale = ctx.xScale as { ticks(count: number): number[] };
|
|
return scale.ticks(ticks).map((v) => (ctx.xScale as (value: number) => number)(v));
|
|
});
|
|
</script>
|
|
|
|
<g data-chart-grid>
|
|
{#each yLines as gy}
|
|
<line data-chart-grid-line x1={0} x2={ctx.plot.width} y1={gy} y2={gy} />
|
|
{/each}
|
|
{#each xLines as gx}
|
|
<line data-chart-grid-line x1={gx} x2={gx} y1={0} y2={ctx.plot.height} />
|
|
{/each}
|
|
</g>
|