@fundar/data-chart-telling 0.0.39 → 0.0.41

package/dist/plots/line/Plot.svelte

@@ -1,187 +1,232 @@
-<script
-  lang="ts"
-  generics="TData extends Record<string, unknown>"
->
-  import { resolveAccessor } from '../utils/accessors';
-  import { getConfiguration } from '../../configuration/config.svelte';
-  import { paletteColor } from '../../utils/color';
-  import { buildSeries } from '../../utils/grouping';
-  import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
-  import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
-  import { buildLineMarkers } from './buildLineMarkers';
-  import { buildGapMarkers } from './buildGapMarkers';
-  import { isGapValue } from '../utils/gaps';
-  import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
-  import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
-  import ValueLabels from './ValueLabels.svelte';
-  import { hasHoverMarker, resolveHoverStrategy, resolveHoverSync } from '../../layout/tooltip/utils';
-  import { buildGroupedSeries, validateSegments, buildScopedMarkerGroups } from '../utils/segments';
-  import type { BasePlotProps } from '../../types/plots/props';
-  import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
-  import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
-  import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
-  import type { LineSegmentStyle } from '../../types/plots/segments/common';
-  import type { LineMarkersConfig } from '../../types/markers/line';
-  import type { LegendDisabledStyle } from '../../types/layout/legend';
-
-  type Props = BasePlotProps<
-    SeriesProps<TData> | DataProps<TData>,
-    TData,
-    GapsAwarePlotStylesConfig<LineSegmentStyle>,
-    LineSegmentStyle,
-    LineMarkersConfig,
-    AxisBasedScalesConfig<TData>
-  >;
-
-  let {
-    width,
-    height,
-    series,
-    data,
-    x,
-    y,
-    z,
-    styles = {},
-    segments = {},
-    markers = [],
-    scales = {},
-    margins,
-    tooltip = undefined,
-  }: Props = $props();
-
-  // Fills missing-data gaps with an interpolated, distinctly-styled bridge,
-  // resolved per series.
-  const gaps = $derived(styles.gaps ?? {});
-
-  const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
-  const legendInteraction = $derived(getLegendInteraction());
-
-  $effect(() => { validateSegments(segments); });
-
-  const groupedSeries = $derived(
-    buildGroupedSeries<Series<TData>, LineSegmentStyle>(resolvedSeries, segments),
-  );
-
-  const cfg = $derived(getConfiguration());
-  const showVals = $derived(styles.values?.show ?? false);
-  const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
-
-  // Dims every other series like a legend toggle when a value label is
-  // hovered, local to this `<Plot>` instance.
-  let hoverIsolatedSeries = $state<string | null>(null);
-
-  function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
-    return (
-      legendInteraction?.disabledSeries.get(name) ??
-      (hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
-        ? { opacity: cfg.legend.disabledOpacity }
-        : undefined)
-    );
-  }
-
-  const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
-  const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
-  const flat = $derived(resolvedSeries.flatMap((s) => s.data));
-  // Legend-disabled series and gap rows are excluded from hover candidates.
-  const hoverPoints = $derived(
-    resolvedSeries.flatMap((s, idx) => {
-      if (legendInteraction?.disabledSeries.has(s.name)) return [];
-      const sx = resolveAccessor(s.x);
-      const sy = resolveAccessor(s.y);
-      return s.data
-        .filter((d) => !isGapValue(sy(d)))
-        .map((d) => ({
-          x: sx(d) as AxisValue,
-          y: Number(sy(d)),
-          row: d,
-          label: String(sy(d)),
-          series: s.name,
-          color: paletteColor(idx, cfg.palette),
-        }));
-    }),
-  );
-
-  const hover = $derived({
-    active: tooltip != null || hasHoverMarker(markers),
-    points: hoverPoints,
-    label: (r: TData) => String(yAcc(r)),
-    strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'x'),
-    sync: resolveHoverSync(tooltip?.sync, markers),
-    tooltip,
-  });
-
-  const lineMarkers = $derived(
-    buildLineMarkers({
-      groupedSeries,
-      disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
-      disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name)),
-    }),
-  );
-
-  const gapMarkers = $derived(
-    buildGapMarkers<TData>({
-      seriesList: resolvedSeries,
-      gaps,
-      colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette),
-    }),
-  );
-
-  const scopedGroups = $derived(
-    buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
-      groupedSeries,
-      segments,
-      colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
-      segmentColorFor: (style, defaultColor) => style?.stroke?.stroke ?? defaultColor,
-    }),
-  );
-
-  const lastPoints = $derived(
-    resolvedSeries
-      .map((s, idx) => {
-        const sy = resolveAccessor(s.y);
-        const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
-        if (lastRow === undefined) return undefined;
-        const group = scopedGroups.find((g) => g.name === s.name);
-        const matchedSeg = group?.segments.find((seg) => seg.match(lastRow));
-        const color =
-          matchedSeg?.color ?? group?.segments[0]?.color ?? group?.color ?? paletteColor(idx, cfg.palette);
-        return { series: s, lastRow, color };
-      })
-      .filter((p): p is { series: Series<TData>; lastRow: TData; color: string } => p !== undefined),
-  );
-
-  // Grows the plot's margin to fit value labels that overflow the content box.
-  const labelMargin = createLabelMarginTracker(() => margins);
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import { resolveAccessor } from '../utils/accessors';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import { paletteColor } from '../../utils/color';
+	import { buildSeries } from '../../utils/grouping';
+	import { getLegendInteraction } from '../../layout/legend/interaction.svelte';
+	import { disabledStrokeOverride, disabledDotsOverride } from '../utils/legendDisabled';
+	import { buildLineMarkers } from './buildLineMarkers';
+	import { buildGapMarkers } from './buildGapMarkers';
+	import { isGapValue } from '../utils/gaps';
+	import { createLabelMarginTracker } from '../utils/labelOverflow.svelte';
+	import BasePlotLayout from '../../layout/plot/BasePlotLayout.svelte';
+	import ValueLabels from './ValueLabels.svelte';
+	import {
+		hasHoverMarker,
+		resolveHoverStrategy,
+		resolveHoverSync
+	} from '../../layout/tooltip/utils';
+	import {
+		buildGroupedSeries,
+		validateSegments,
+		buildScopedMarkerGroups
+	} from '../utils/segments';
+	import type { BasePlotProps, MarginConfig } from '../../types/plots/props';
+	import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
+	import type { Series, SeriesProps, DataProps } from '../../types/plots/data/common';
+	import type { GapsAwarePlotStylesConfig } from '../../types/layout/styles';
+	import type { LineSegmentStyle } from '../../types/plots/segments/common';
+	import type { LineMarkersConfig } from '../../types/markers/line';
+	import type { LegendDisabledStyle } from '../../types/layout/legend';
+
+	type Props = BasePlotProps<
+		SeriesProps<TData> | DataProps<TData>,
+		TData,
+		GapsAwarePlotStylesConfig<LineSegmentStyle>,
+		LineSegmentStyle,
+		LineMarkersConfig,
+		AxisBasedScalesConfig<TData>
+	>;
+
+	let {
+		width,
+		height,
+		series,
+		data,
+		x,
+		y,
+		z,
+		styles = {},
+		segments = {},
+		markers = [],
+		scales = {},
+		margins = $bindable(),
+		tooltip = undefined
+	}: Props = $props();
+
+	// Fills missing-data gaps with an interpolated, distinctly-styled bridge,
+	// resolved per series.
+	const gaps = $derived(styles.gaps ?? {});
+
+	const resolvedSeries = $derived(series ?? buildSeries(data!, x!, y!, z));
+	const legendInteraction = $derived(getLegendInteraction());
+
+	$effect(() => {
+		validateSegments(segments);
+	});
+
+	const groupedSeries = $derived(
+		buildGroupedSeries<Series<TData>, LineSegmentStyle>(resolvedSeries, segments)
+	);
+
+	const cfg = $derived(getConfiguration());
+	const showVals = $derived(styles.values?.show ?? false);
+	const hoverIsolate = $derived(styles.values?.hoverIsolate ?? false);
+
+	// Dims every other series like a legend toggle when a value label is
+	// hovered, local to this `<Plot>` instance.
+	let hoverIsolatedSeries = $state<string | null>(null);
+
+	function effectiveDisabledFor(name: string): LegendDisabledStyle | undefined {
+		return (
+			legendInteraction?.disabledSeries.get(name) ??
+			(hoverIsolate && hoverIsolatedSeries && hoverIsolatedSeries !== name
+				? { opacity: cfg.legend.disabledOpacity }
+				: undefined)
+		);
+	}
+
+	const xAcc = $derived(resolveAccessor(resolvedSeries[0]?.x ?? ((d: TData) => d)));
+	const yAcc = $derived(resolveAccessor(resolvedSeries[0]?.y ?? ((d: TData) => d)));
+	const flat = $derived(resolvedSeries.flatMap((s) => s.data));
+	// Legend-disabled series and gap rows are excluded from hover candidates.
+	const hoverPoints = $derived(
+		resolvedSeries.flatMap((s, idx) => {
+			if (legendInteraction?.disabledSeries.has(s.name)) return [];
+			const sx = resolveAccessor(s.x);
+			const sy = resolveAccessor(s.y);
+			return s.data
+				.filter((d) => !isGapValue(sy(d)))
+				.map((d) => ({
+					x: sx(d) as AxisValue,
+					y: Number(sy(d)),
+					row: d,
+					label: String(sy(d)),
+					series: s.name,
+					color: paletteColor(idx, cfg.palette)
+				}));
+		})
+	);
+
+	const hover = $derived({
+		active: tooltip != null || hasHoverMarker(markers),
+		points: hoverPoints,
+		label: (r: TData) => String(yAcc(r)),
+		strategy: resolveHoverStrategy(tooltip?.strategy, markers, 'x'),
+		sync: resolveHoverSync(tooltip?.sync, markers),
+		tooltip
+	});
+
+	const lineMarkers = $derived(
+		buildLineMarkers({
+			groupedSeries,
+			disabledStrokeFor: (name) => disabledStrokeOverride(effectiveDisabledFor(name)),
+			disabledDotsFor: (name) => disabledDotsOverride(effectiveDisabledFor(name))
+		})
+	);
+
+	const gapMarkers = $derived(
+		buildGapMarkers<TData>({
+			seriesList: resolvedSeries,
+			gaps,
+			colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette)
+		})
+	);
+
+	const scopedGroups = $derived(
+		buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
+			groupedSeries,
+			segments,
+			colorFor: (_series, seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+			segmentColorFor: (style, defaultColor) => style?.stroke?.stroke ?? defaultColor
+		})
+	);
+
+	const lastPoints = $derived(
+		resolvedSeries
+			.map((s, idx) => {
+				const sy = resolveAccessor(s.y);
+				const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
+				if (lastRow === undefined) return undefined;
+				const group = scopedGroups.find((g) => g.name === s.name);
+				const matchedSeg = group?.segments.find((seg) => seg.match(lastRow));
+				const color =
+					matchedSeg?.color ??
+					group?.segments[0]?.color ??
+					group?.color ??
+					paletteColor(idx, cfg.palette);
+				return { series: s, lastRow, color };
+			})
+			.filter((p): p is { series: Series<TData>; lastRow: TData; color: string } => p !== undefined)
+	);
+
+	// Grows the plot's margin to fit value labels that overflow the content
+	// box. Resets on `resolvedSeries` (e.g. a timeline scrubber revealing a
+	// different slice of rows) so overflow measured against an earlier frame's
+	// labels doesn't linger and inflate the margin once that frame is gone —
+	// see `createLabelMarginTracker`'s own doc comment.
+	const labelMargin = createLabelMarginTracker(
+		() => margins,
+		() => resolvedSeries
+	);
+
+	// Writes the resolved margin back into the bindable `margins` prop once it
+	// settles, so a caller binding it (`bind:margins`) can capture and reuse a
+	// fixed margin later. `lastWritten` is a plain variable (not `$state`) so
+	// the effect only depends on `resolvedMargins`, never on `margins` itself.
+	let lastWritten: MarginConfig | undefined;
+	$effect(() => {
+		const next = labelMargin.resolvedMargins;
+		if (!next) return;
+		const changed =
+			!lastWritten ||
+			next.top !== lastWritten.top ||
+			next.right !== lastWritten.right ||
+			next.bottom !== lastWritten.bottom ||
+			next.left !== lastWritten.left;
+		if (changed) {
+			lastWritten = { top: next.top, right: next.right, bottom: next.bottom, left: next.left };
+			margins = next;
+		}
+	});
 </script>
 
 <BasePlotLayout
-  {width}
-  {height}
-  {styles}
-  data={flat}
-  getX={xAcc}
-  getY={(d) => Number(yAcc(d))}
-  {hover}
-  {scales}
-  {...labelMargin.plotProps}
-  xTickRotate={scales?.x?.tickRotate}
-  markers={[...gapMarkers, ...lineMarkers, ...markers]}
-  seriesData={resolvedSeries}
-  {scopedGroups}
+	{width}
+	{height}
+	{styles}
+	data={flat}
+	getX={xAcc}
+	getY={(d) => Number(yAcc(d))}
+	{hover}
+	{scales}
+	{...labelMargin.plotProps}
+	xTickRotate={scales?.x?.tickRotate}
+	markers={[...gapMarkers, ...lineMarkers, ...markers]}
+	seriesData={resolvedSeries}
+	{scopedGroups}
 >
-  {#snippet children({ numericMargins })}
-    {#if showVals}
-      <ValueLabels
-        {lastPoints}
-        values={styles.values}
-        {width}
-        {height}
-        {numericMargins}
-        onOverflow={labelMargin.report}
-        disabledFor={effectiveDisabledFor}
-        onHoverSeries={hoverIsolate ? (name) => { hoverIsolatedSeries = name; } : undefined}
-        onHoverEnd={hoverIsolate ? () => { hoverIsolatedSeries = null; } : undefined}
-      />
-    {/if}
-  {/snippet}
+	{#snippet children({ numericMargins })}
+		{#if showVals}
+			<ValueLabels
+				{lastPoints}
+				values={styles.values}
+				{width}
+				{height}
+				{numericMargins}
+				onOverflow={labelMargin.report}
+				disabledFor={effectiveDisabledFor}
+				onHoverSeries={hoverIsolate
+					? (name) => {
+							hoverIsolatedSeries = name;
+						}
+					: undefined}
+				onHoverEnd={hoverIsolate
+					? () => {
+							hoverIsolatedSeries = null;
+						}
+					: undefined}
+			/>
+		{/if}
+	{/snippet}
 </BasePlotLayout>

package/dist/plots/line/Plot.svelte.d.ts

@@ -7,7 +7,7 @@ import type { LineMarkersConfig } from '../../types/markers/line';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, GapsAwarePlotStylesConfig<LineSegmentStyle>, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
-    bindings: "";
+    bindings: "margins";
     slots: {};
     events: {};
 };
@@ -15,7 +15,7 @@ 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(): "";
+    bindings(): "margins";
     exports(): {};
 }
 interface $$IsomorphicComponent {