@fundar/data-chart-telling 0.0.64 → 1.0.0

package/dist/layout/plot/Core.svelte

@@ -0,0 +1,61 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { PlotInteraction } from '../interaction/PlotInteraction.svelte';
+	import BasePlotLayout from '../base/BasePlotLayout.svelte';
+	import { validateSegments } from '../../plots/utils/segments';
+	import type { Pipeline } from '../../phases/Pipeline';
+	import type { SegmentsConfig, MarginConfig } from '../../types/plots/props';
+	import type { FacetStageState } from '../../types/phases';
+
+	/**
+	 * What every axis plot kind renders for one slice of its rows: its props
+	 * run through the plot's `pipeline`, and the state that comes out drawn by
+	 * `BasePlotLayout`. It sits under the plot's `Figure`, which provides the
+	 * legend's toggles and the hover its phases read.
+	 */
+	type Props = {
+		width: number;
+		height: number;
+		styles?: object;
+		segments?: SegmentsConfig<never>;
+		markers?: { type: string }[];
+		scales?: object;
+		margins?: MarginConfig;
+		panelState?: FacetStageState;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		pipeline?: Pipeline<any, any>;
+		data?: TData[];
+		[prop: string]: unknown;
+	};
+
+	let {
+		width,
+		height,
+		styles = {},
+		segments = {},
+		markers = [],
+		scales = {},
+		margins = $bindable(),
+		panelState,
+		pipeline,
+		...rest
+	}: Props = $props();
+
+	$effect(() => {
+		validateSegments(segments as never);
+	});
+
+	const cfg = $derived(getConfiguration());
+	const interaction = PlotInteraction.current(() => cfg);
+	const ctx = $derived({ cfg, interaction, range: interaction.legend?.range });
+
+	const plotState = $derived(
+		pipeline!.run(
+			{ ...rest, width, height, styles, segments, markers, scales, margins },
+			ctx,
+			panelState
+		)
+	);
+</script>
+
+<BasePlotLayout {width} {height} state={plotState} bind:margins />

package/dist/layout/plot/Core.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { Pipeline } from '../../phases/Pipeline';
+import type { SegmentsConfig, MarginConfig } from '../../types/plots/props';
+import type { FacetStageState } from '../../types/phases';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        [prop: string]: unknown;
+        width: number;
+        height: number;
+        styles?: object;
+        segments?: SegmentsConfig<never>;
+        markers?: {
+            type: string;
+        }[];
+        scales?: object;
+        margins?: MarginConfig;
+        panelState?: FacetStageState;
+        pipeline?: Pipeline<any, any>;
+        data?: TData[];
+    };
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Core: $$IsomorphicComponent;
+type Core<TData extends Record<string, unknown>> = InstanceType<typeof Core<TData>>;
+export default Core;

package/dist/layout/plot/PanelRun.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+	import { LegendState } from '../legend/LegendState.svelte';
+	import type { Snippet } from 'svelte';
+	import type { FacetStageState } from '../../types/phases';
+
+	/**
+	 * Runs a plot's data phases once over `rows`, for every facet panel, under
+	 * the legend in scope, and hands the result to `children`. `frame` is the
+	 * same run over the same rows without the legend: reused while the legend
+	 * omits no series, since only omitting one changes the data phases.
+	 */
+	let {
+		rows,
+		run,
+		frame,
+		children
+	}: {
+		rows: TRow[];
+		run: (rows: TRow[], legend: LegendState | null) => FacetStageState;
+		frame?: FacetStageState;
+		children: Snippet<[FacetStageState]>;
+	} = $props();
+
+	const legend = LegendState.current();
+	const state = $derived(frame && !legend?.omits ? frame : run(rows, legend));
+</script>
+
+{@render children(state)}

package/dist/{charts/heatmap/Chart.svelte.d.ts → layout/plot/PanelRun.svelte.d.ts}

@@ -1,8 +1,12 @@
-import type { Accessor } from '../../types/plots/data/common';
-import type { ChartProps } from '../../types/charts/props';
+import { LegendState } from '../legend/LegendState.svelte';
+import type { Snippet } from 'svelte';
+import type { FacetStageState } from '../../types/phases';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, import("../..").AreaStyle> & {
-        z: Accessor<TRow, number>;
+    props: {
+        rows: TRow[];
+        run: (rows: TRow[], legend: LegendState | null) => FacetStageState;
+        frame?: FacetStageState;
+        children: Snippet<[FacetStageState]>;
     };
     exports: {};
     bindings: "";
@@ -23,6 +27,6 @@ interface $$IsomorphicComponent {
     <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const Chart: $$IsomorphicComponent;
-type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
-export default Chart;
+declare const PanelRun: $$IsomorphicComponent;
+type PanelRun<TRow extends Record<string, unknown>> = InstanceType<typeof PanelRun<TRow>>;
+export default PanelRun;

package/dist/layout/plot/Plot.svelte

@@ -0,0 +1,284 @@
+<script
+	lang="ts"
+	generics="TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase"
+>
+	import type { Component } from 'svelte';
+	import Figure from '../figure/Figure.svelte';
+	import TimelineLayout from '../timeline/TimelineLayout.svelte';
+	import FacetLayout from '../facet/FacetLayout.svelte';
+	import HoverScope from '../hover/HoverScope.svelte';
+	import PanelRun from './PanelRun.svelte';
+	import GenericCore from './Core.svelte';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { TimelineState } from '../timeline/TimelineState.svelte';
+	import { HoverState } from '../hover/HoverState.svelte';
+	import { HoverSettings } from '../hover/HoverSettings';
+	import { Interpolation } from '../../utils/Interpolation';
+	import { FacetPhase } from '../../phases/facet/FacetPhase';
+	import { merge } from '../../utils/merge';
+	import { Pipeline } from '../../phases/Pipeline';
+	import { Slice } from './Slice';
+	import type { TooltipProp } from '../../types/layout/tooltip';
+	import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
+	import type { PlotCellContext, PlotCellSnippet, PlotCoreBase } from '../../types/layout/plot';
+	import type { FacetCellContext, FacetConfig } from '../../types/layout/facet';
+	import type { TimelineConfig, TimeValue } from '../../types/layout/timeline';
+	import type { LegendState } from '../legend/LegendState.svelte';
+	import type { AxisPlotDefaults, DataRunState, FacetStageState } from '../../types/phases';
+
+	/**
+	 * Renders a plot's core from its `core` props, inside the plot's
+	 * {@link Figure} (its box, stores and chrome): once, or once per slice of
+	 * its `timeline` and `facet`. `slice` builds the core's props for one
+	 * slice; by default it swaps in the slice's rows, box, margins and shared
+	 * scales. The core is the generic one, which runs the kind's pipeline; a
+	 * kind with its own rendering (a map) passes its `Core`. The `cell`
+	 * snippet draws each slice instead -
+	 * anything that takes `{ data, width, height }`. `defaults` builds the
+	 * kind's defaults - or its own pipeline - once per plot: the {@link Pipeline}
+	 * every core it renders runs, and the plot's hover and timeline defaults. `margins` is
+	 * bindable: an unsliced core reports the margin it settled on. The plot's
+	 * box is its own `width`/`height` or, drawn straight inside a
+	 * `PlotComposer`, a cell (`area`, `inset`).
+	 */
+	let {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Core = GenericCore as Component<any, Record<string, never>, 'margins'>,
+		core,
+		defaults,
+		slice,
+		cell,
+		margins = $bindable(),
+		tooltip,
+		data,
+		width,
+		height,
+		markers,
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet
+	}: PlotChromeConfig & {
+		// A generic plot core can't be typed against `core`'s own row type.
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Core?: Component<any, Record<string, never>, 'margins'>;
+		core?: TCore;
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		defaults?: () => AxisPlotDefaults<any, any> | Pipeline<any, any>;
+		slice?: (cell: PlotCellContext<TRow, TScales>) => TCore;
+		cell?: PlotCellSnippet<TRow, TScales>;
+		margins?: MarginConfig;
+		tooltip?: TooltipProp<TRow>;
+		/** The rows `timeline` and `facet` slice. Defaults to `core.data`. */
+		data?: TRow[];
+		width?: number;
+		height?: number;
+		markers?: { type: string }[];
+		timeline?: TimelineConfig<TRow>;
+		facet?: FacetConfig<TRow>;
+	} = $props();
+
+	const cfg = $derived(getConfiguration());
+	// The kind's pipeline, built once per plot: every core it renders runs it.
+	const pipeline = $derived(defaults ? Pipeline.of(defaults()) : undefined);
+	const hoverSettings = $derived(
+		new HoverSettings(
+			tooltip,
+			markers ?? core?.markers,
+			pipeline?.hoverStrategy(core ?? {}, cfg) ?? 'x'
+		)
+	);
+	const tooltipConfig = $derived(hoverSettings.tooltip);
+	const rows = $derived(data ?? (core?.data as TRow[] | undefined));
+
+	// Inside a composer with a timeline, that one drives every panel; otherwise
+	// this plot has one of its own, which its figure draws when it's a player.
+	const outerTimeline = TimelineState.current();
+	const sharedTimeline = outerTimeline?.enabled ? outerTimeline : null;
+	const ownTimeline = sharedTimeline ? null : new TimelineState(() => timeline);
+	ownTimeline?.watch();
+	const timelineState = sharedTimeline ?? ownTimeline;
+	const parentScope = HoverState.scope();
+	const scopeOf = (facetValue: string) => {
+		const parent = parentScope();
+		return parent ? `${parent}/${facetValue}` : facetValue;
+	};
+
+	// How the rows divide into slices: timeline steps and facet panels.
+	const slicing = $derived(new Slice({ rows, timeline, facet, filterMode: pipeline?.filterMode }));
+	// A boolean, so a timeline step re-slicing the same rows invalidates nothing downstream.
+	const sliced = $derived(slicing.sliced);
+	$effect(() => {
+		for (const problem of slicing.problems) console.warn(`Plot: ${problem}`);
+	});
+
+	// With a facet, the kind's data phases run once over every panel (`dataRun`),
+	// and each panel's core runs only the phases after them. The run over every
+	// row, without the legend (the frame), also gives the domains that facets
+	// and timeline steps share.
+	const dataRun = $derived.by(() => {
+		const run = pipeline;
+		if (!sliced || !run?.facets) return undefined;
+		return (r: TRow[], f: FacetConfig<TRow> | undefined, legend: LegendState | null) =>
+			run.runData(core ?? {}, r, f as never, legend, cfg);
+	});
+	// Kept while its inputs are the same objects: a timeline step re-reads them without changing them.
+	let frame: { inputs: unknown[]; state: DataRunState | undefined } | undefined;
+	const frameState = $derived.by(() => {
+		const inputs = [dataRun, facet, rows];
+		if (frame?.inputs.every((input, i) => input === inputs[i])) return frame.state;
+		const state = dataRun && rows ? dataRun(rows, facet, null) : undefined;
+		frame = { inputs, state };
+		return state;
+	});
+	// The domains slices share, from the frame's "sharedScales" phase, keyed by facet panel.
+	const sharedScales = $derived(frameState?.sharedScales);
+
+	const timelineInterpolation = $derived.by(() => {
+		if (!timeline) return undefined;
+		const tween = pipeline?.interpolation<TRow>((core ?? {}) as { data?: TRow[] }, cfg);
+		if (tween) return Interpolation.buildTimeline(timeline.interpolate, tween);
+		return typeof timeline.interpolate === 'object' ? timeline.interpolate : undefined;
+	});
+
+	/** A core's props without `margins`, for a core that binds them instead. */
+	function withoutMargins<T extends object>(props: T): Omit<T, 'margins'> {
+		const rest = { ...props } as T & { margins?: unknown };
+		delete rest.margins;
+		return rest;
+	}
+
+	function buildSliceProps(ctx: PlotCellContext<TRow, TScales>) {
+		return {
+			...core,
+			...(ctx.data ? { data: ctx.data } : {}),
+			width: ctx.width,
+			height: ctx.height,
+			margins: ctx.margins ?? margins,
+			scales: merge(ctx.scales, core?.scales as TScales | undefined),
+			tooltip: ctx.tooltip,
+			...(ctx.panel ? { panelState: ctx.panel } : {})
+		};
+	}
+</script>
+
+<!-- One slice: the kind's core with the slice's rows, box and scales, or the author's own `cell`. -->
+{#snippet sliceCell(ctx: PlotCellContext<TRow, TScales>)}
+	{#if cell}
+		{@render cell(ctx)}
+	{:else if Core && sliced}
+		<Core {...(slice ?? buildSliceProps)(ctx)} {pipeline} />
+	{:else if Core}
+		<Core {...withoutMargins((slice ?? buildSliceProps)(ctx))} bind:margins {pipeline} />
+	{/if}
+{/snippet}
+
+{#snippet facetCell(
+	place: FacetCellContext<TRow>,
+	time: TimeValue | undefined,
+	panels: FacetStageState | undefined
+)}
+	<HoverScope id={scopeOf(place.facetValue)}>
+		{@render sliceCell({
+			data: place.data,
+			width: place.width,
+			height: place.height,
+			margins: place.margins,
+			tooltip: tooltipConfig,
+			scales: slicing.facetScales<TScales>(sharedScales, place),
+			panel: panels ? FacetPhase.buildPanelState(panels, slicing.panelKey(place) ?? '') : undefined,
+			keep: slicing.keep({ time, facet: place })
+		})}
+	</HoverScope>
+{/snippet}
+
+{#snippet facetGrid(
+	stepRows: TRow[],
+	w: number,
+	h: number,
+	time: TimeValue | undefined,
+	panels: FacetStageState | undefined
+)}
+	<FacetLayout data={stepRows} {...slicing.layout} width={w} height={h}>
+		{#snippet cell(place)}
+			{@render facetCell(place, time, panels)}
+		{/snippet}
+	</FacetLayout>
+{/snippet}
+
+{#snippet facetBody(
+	stepRows: TRow[] | undefined,
+	w: number,
+	h: number,
+	time: TimeValue | undefined
+)}
+	{#if facet && stepRows && dataRun}
+		<PanelRun
+			rows={stepRows}
+			run={(r, legendInteraction) => dataRun(r, facet, legendInteraction)}
+			frame={stepRows === rows ? frameState : undefined}
+		>
+			{#snippet children(panels)}
+				{@render facetGrid(stepRows, w, h, time, panels)}
+			{/snippet}
+		</PanelRun>
+	{:else if facet && stepRows}
+		{@render facetGrid(stepRows, w, h, time, undefined)}
+	{:else}
+		{@render sliceCell({
+			data: stepRows,
+			width: w,
+			height: h,
+			tooltip: tooltipConfig,
+			scales: slicing.timelineScales<TScales>(sharedScales),
+			keep: slicing.keep({ time })
+		})}
+	{/if}
+{/snippet}
+
+{#snippet body({ width: w, height: h }: { width: number; height: number })}
+	{#if timeline && rows}
+		<TimelineLayout
+			data={rows}
+			accessor={timeline.accessor}
+			progress={timelineState?.progress ?? timeline.progress ?? 0}
+			values={sharedTimeline ? sharedTimeline.steps : timeline.values}
+			onsteps={ownTimeline ? (found) => ownTimeline.setSteps(found) : undefined}
+			orientation={timeline.orientation}
+			show={false}
+			filterMode={slicing.filterMode}
+			interpolate={timelineInterpolation}
+			width={w}
+			height={h}
+		>
+			{#snippet child({ data: stepRows, width: tw, height: th, selectedValue })}
+				{@render facetBody(stepRows, tw, th, selectedValue)}
+			{/snippet}
+		</TimelineLayout>
+	{:else}
+		{@render facetBody(rows, w, h, undefined)}
+	{/if}
+{/snippet}
+
+<Figure
+	width={width ?? core?.width}
+	height={height ?? core?.height}
+	area={core?.area}
+	inset={core?.inset}
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	hoverStrategy={hoverSettings.strategy}
+	hoverSync={hoverSettings.sync}
+	timelineState={ownTimeline}
+	{body}
+/>

package/dist/layout/plot/Plot.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Component } from 'svelte';
+import { Pipeline } from '../../phases/Pipeline';
+import type { TooltipProp } from '../../types/layout/tooltip';
+import type { MarginConfig, PlotChromeConfig } from '../../types/plots/props';
+import type { PlotCellContext, PlotCellSnippet, PlotCoreBase } from '../../types/layout/plot';
+import type { FacetConfig } from '../../types/layout/facet';
+import type { TimelineConfig } from '../../types/layout/timeline';
+import type { AxisPlotDefaults } from '../../types/phases';
+declare function $$render<TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase>(): {
+    props: PlotChromeConfig & {
+        Core?: Component<any, Record<string, never>, "margins">;
+        core?: TCore;
+        defaults?: () => AxisPlotDefaults<any, any> | Pipeline<any, any>;
+        slice?: (cell: PlotCellContext<TRow, TScales>) => TCore;
+        cell?: PlotCellSnippet<TRow, TScales>;
+        margins?: MarginConfig;
+        tooltip?: TooltipProp<TRow>;
+        /** The rows `timeline` and `facet` slice. Defaults to `core.data`. */
+        data?: TRow[];
+        width?: number;
+        height?: number;
+        markers?: {
+            type: string;
+        }[];
+        timeline?: TimelineConfig<TRow>;
+        facet?: FacetConfig<TRow>;
+    };
+    exports: {};
+    bindings: "margins";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase> {
+    props(): ReturnType<typeof $$render<TRow, TScales, TCore>>['props'];
+    events(): ReturnType<typeof $$render<TRow, TScales, TCore>>['events'];
+    slots(): ReturnType<typeof $$render<TRow, TScales, TCore>>['slots'];
+    bindings(): "margins";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow, TScales, TCore>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow, TScales, TCore>['props']>, ReturnType<__sveltets_Render<TRow, TScales, TCore>['events']>, ReturnType<__sveltets_Render<TRow, TScales, TCore>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow, TScales, TCore>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow, TScales, TCore>['exports']>;
+    <TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase>(internal: unknown, props: ReturnType<__sveltets_Render<TRow, TScales, TCore>['props']> & {}): ReturnType<__sveltets_Render<TRow, TScales, TCore>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const Plot: $$IsomorphicComponent;
+type Plot<TRow extends Record<string, unknown>, TScales extends object, TCore extends PlotCoreBase> = InstanceType<typeof Plot<TRow, TScales, TCore>>;
+export default Plot;

package/dist/layout/plot/PlotContext.d.ts

@@ -0,0 +1,41 @@
+import type { PlotHover } from '../hover/PlotHover.svelte';
+import type { LegendState } from '../legend/LegendState.svelte';
+import type { TimelineState } from '../timeline/TimelineState.svelte';
+import type { PlotMargins } from '../margins/PlotMargins.svelte';
+import type { PlotAxes } from '../../phases/data/PlotAxes';
+/** What a plot's context is built from; the functions are read reactively. */
+export type PlotContextParts<T extends Record<string, unknown>> = {
+    hover: PlotHover<T>;
+    legend: LegendState | null;
+    timeline: TimelineState | null;
+    margins: PlotMargins;
+    scales: () => object | undefined;
+    axes: () => PlotAxes | undefined;
+    data: () => T[];
+    size: () => {
+        width: number;
+        height: number;
+    };
+};
+/**
+ * Everything one plot is, gathered where what draws inside it can reach it:
+ * its hover, its figure's legend and timeline, its margins, scales, axes, rows and box. The
+ * mutable side; {@link PublicPlotContext} is what a user gets to read.
+ */
+export declare class PlotContext<T extends Record<string, unknown> = Record<string, unknown>> {
+    #private;
+    readonly hover: PlotHover<T>;
+    readonly legend: LegendState | null;
+    readonly timeline: TimelineState | null;
+    readonly margins: PlotMargins;
+    constructor(parts: PlotContextParts<T>);
+    /** The enclosing plot's context, or `null` outside one. Call during component init. */
+    static current(): PlotContext | null;
+    /** A new context for everything drawn below. Call during component init. */
+    static provide<T extends Record<string, unknown>>(parts: PlotContextParts<T>): PlotContext<T>;
+    get scales(): object | undefined;
+    get axes(): PlotAxes | undefined;
+    get data(): T[];
+    get width(): number;
+    get height(): number;
+}

package/dist/layout/plot/PlotContext.js

@@ -0,0 +1,46 @@
+import { getContext, setContext } from 'svelte';
+const PLOT_CONTEXT_KEY = Symbol('dct-plot-context');
+/**
+ * Everything one plot is, gathered where what draws inside it can reach it:
+ * its hover, its figure's legend and timeline, its margins, scales, axes, rows and box. The
+ * mutable side; {@link PublicPlotContext} is what a user gets to read.
+ */
+export class PlotContext {
+    hover;
+    legend;
+    timeline;
+    margins;
+    #parts;
+    constructor(parts) {
+        this.#parts = parts;
+        this.hover = parts.hover;
+        this.legend = parts.legend;
+        this.timeline = parts.timeline;
+        this.margins = parts.margins;
+    }
+    /** The enclosing plot's context, or `null` outside one. Call during component init. */
+    static current() {
+        return getContext(PLOT_CONTEXT_KEY) ?? null;
+    }
+    /** A new context for everything drawn below. Call during component init. */
+    static provide(parts) {
+        const context = new PlotContext(parts);
+        setContext(PLOT_CONTEXT_KEY, context);
+        return context;
+    }
+    get scales() {
+        return this.#parts.scales();
+    }
+    get axes() {
+        return this.#parts.axes();
+    }
+    get data() {
+        return this.#parts.data();
+    }
+    get width() {
+        return this.#parts.size().width;
+    }
+    get height() {
+        return this.#parts.size().height;
+    }
+}