@fundar/data-chart-telling 0.0.27 → 0.0.29

package/dist/configuration/config.svelte.js

@@ -73,6 +73,10 @@ export const DEFAULT_CONFIG = {
     line: {
         strokeWidth: 3,
         dotRadius: 4,
+        gap: {
+            stroke: { strokeOpacity: 0.6, strokeDasharray: '4 4' },
+            dots: {},
+        },
         valueLabels: {
             elbowGap: 10,
             laneStep: 7,

package/dist/configuration/themes/index.d.ts

@@ -84,6 +84,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -242,6 +262,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -400,6 +440,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;
@@ -558,6 +618,26 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            gap?: {
+                stroke?: {
+                    stroke?: string | undefined;
+                    strokeWidth?: number | undefined;
+                    strokeOpacity?: number | undefined;
+                    strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                    strokeLinecap?: import("../..").LineCap | undefined;
+                    strokeLinejoin?: import("../..").LineJoin | undefined;
+                } | undefined;
+                dots?: {
+                    dotRadius?: number | undefined;
+                    dotFill?: string | undefined;
+                    dotFillOpacity?: number | undefined;
+                    dotSymbol?: import("../..").SymbolType | undefined;
+                    dotStroke?: string | undefined;
+                    dotStrokeWidth?: number | undefined;
+                    dotStrokeOpacity?: number | undefined;
+                    dotStrokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                } | undefined;
+            } | undefined;
             valueLabels?: {
                 elbowGap?: number | undefined;
                 laneStep?: number | undefined;

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -41,7 +41,9 @@
     children: Snippet;
   } = $props();
 
-  const resolvedProjection = $derived(resolveProjection(coordinates?.projection, data));
+  const resolvedProjection = $derived(
+    coordinates ? resolveProjection(coordinates.projection, data) : undefined,
+  );
 
   const zoomEnabled = $derived(coordinates?.zoom !== false && coordinates?.zoom != null);
   const zoomConfig = $derived(typeof coordinates?.zoom === 'object' ? coordinates.zoom : undefined);

package/dist/plots/bar/buildBarMarkers.js

@@ -21,27 +21,35 @@ export function buildBarMarkers(args) {
         if (barLayout.layout === 'stacked') {
             const stackedBaselineFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex);
             const stackedTopFn = (d) => barLayout.stackedBaseline(xFn(d), seriesIndex) + Number(yFn(d));
-            const marker = {
-                type: 'bar',
-                role: 'segment',
-                isHorizontal,
-                data: group.series.data,
-                style: {
-                    fill: disabledFill?.fill ?? defaultColor,
-                    fillOpacity: disabledFill?.fillOpacity ?? 1,
-                },
-            };
-            if (isHorizontal) {
-                marker.y = xFn;
-                marker.x1 = stackedBaselineFn;
-                marker.x2 = stackedTopFn;
-            }
-            else {
-                marker.x = xFn;
-                marker.y1 = stackedBaselineFn;
-                marker.y2 = stackedTopFn;
+            // Mirrors the grouped/overlap branch below: a series-scoped `segments`
+            // catch-all style (e.g. an explicit `fill`) must win over the
+            // index-derived `defaultColor`, same as it already does there. Stacked
+            // bars were previously drawn straight from `group.series.data`, which
+            // skipped `group.visualSegments` entirely and silently dropped any such
+            // override.
+            for (const seg of group.visualSegments) {
+                const marker = {
+                    type: 'bar',
+                    role: 'segment',
+                    isHorizontal,
+                    data: seg.data,
+                    style: {
+                        fill: disabledFill?.fill ?? seg.style.fill ?? defaultColor,
+                        fillOpacity: disabledFill?.fillOpacity ?? seg.style.fillOpacity ?? 1,
+                    },
+                };
+                if (isHorizontal) {
+                    marker.y = xFn;
+                    marker.x1 = stackedBaselineFn;
+                    marker.x2 = stackedTopFn;
+                }
+                else {
+                    marker.x = xFn;
+                    marker.y1 = stackedBaselineFn;
+                    marker.y2 = stackedTopFn;
+                }
+                segmentMarkers.push(marker);
             }
-            segmentMarkers.push(marker);
             return;
         }
         for (const seg of group.visualSegments) {

package/dist/plots/line/Plot.svelte

@@ -9,6 +9,8 @@
   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';
@@ -20,6 +22,7 @@
   import type { BasePlotStylesConfig } from '../../types/layout/styles';
   import type { LineSegmentStyle } from '../../types/plots/segments/common';
   import type { LineMarkersConfig } from '../../types/markers/line';
+  import type { GapsConfig } from '../../types/plots/props';
   import type { LegendDisabledStyle } from '../../types/layout/legend';
 
   type Props = BasePlotProps<
@@ -29,7 +32,10 @@
     LineSegmentStyle,
     LineMarkersConfig,
     AxisBasedScalesConfig<TData>
-  >;
+  > & {
+    /** Fills leading/internal/trailing missing-data holes with an interpolated, distinctly-styled bridge, resolved per series like `segments` — see {@link GapsConfig}. */
+    gaps?: GapsConfig<LineSegmentStyle>;
+  };
 
   let {
     width,
@@ -42,6 +48,7 @@
     styles = {},
     segments = {},
     markers = [],
+    gaps = {},
     scales = {},
     margins,
     tooltip = undefined,
@@ -80,27 +87,36 @@
   const flat = $derived(resolvedSeries.flatMap((s) => s.data));
   // A legend-disabled series is dimmed on the mark itself, but never surfaces
   // in hover/tooltip — its points are simply absent from the candidate list.
+  // A gap row (see `gaps`) is excluded the same way — it carries no real
+  // value to hover.
   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.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),
-      }));
+      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),
+        }));
     }),
   );
 
-  // Last data point per series, with its palette index for colour.
+  // Last *real* data point per series (skipping any trailing gap row), with
+  // its palette index for colour.
   const lastPoints = $derived(
     resolvedSeries
-      .map((s, idx) => ({ series: s, lastRow: s.data[s.data.length - 1], seriesIndex: idx }))
-      .filter(({ lastRow }) => lastRow !== undefined),
+      .map((s, idx) => {
+        const sy = resolveAccessor(s.y);
+        const lastRow = [...s.data].reverse().find((d) => !isGapValue(sy(d)));
+        return { series: s, lastRow, seriesIndex: idx };
+      })
+      .filter((p): p is { series: Series<TData>; lastRow: TData; seriesIndex: number } => p.lastRow !== undefined),
   );
 
   const hover = $derived({
@@ -120,6 +136,14 @@
     }),
   );
 
+  const gapMarkers = $derived(
+    buildGapMarkers<TData>({
+      seriesList: resolvedSeries,
+      gaps,
+      colorFor: (seriesIndex) => paletteColor(seriesIndex, cfg.palette),
+    }),
+  );
+
   const scopedGroups = $derived(
     buildScopedMarkerGroups<TData, Series<TData>, LineSegmentStyle>({
       groupedSeries,
@@ -150,7 +174,7 @@
   {scales}
   margins={labelMargin.resolvedMargins}
   xTickRotate={scales?.x?.tickRotate}
-  markers={[...lineMarkers, ...markers]}
+  markers={[...gapMarkers, ...lineMarkers, ...markers]}
   seriesData={resolvedSeries}
   {scopedGroups}
 >

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

@@ -4,8 +4,12 @@ import type { SeriesProps, DataProps } from '../../types/plots/data/common';
 import type { BasePlotStylesConfig } from '../../types/layout/styles';
 import type { LineSegmentStyle } from '../../types/plots/segments/common';
 import type { LineMarkersConfig } from '../../types/markers/line';
+import type { GapsConfig } from '../../types/plots/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<SeriesProps<TData> | DataProps<TData>, TData, BasePlotStylesConfig, LineSegmentStyle, LineMarkersConfig, AxisBasedScalesConfig<TData>> & {
+        /** Fills leading/internal/trailing missing-data holes with an interpolated, distinctly-styled bridge, resolved per series like `segments` — see {@link GapsConfig}. */
+        gaps?: GapsConfig<LineSegmentStyle>;
+    };
     exports: {};
     bindings: "";
     slots: {};

package/dist/plots/line/buildGapMarkers.d.ts

@@ -0,0 +1,21 @@
+import type { Series } from '../../types/plots/data/common';
+import type { GapsConfig } from '../../types/plots/props';
+import type { LineSegmentStyle } from '../../types/plots/segments/common';
+import type { LineMarkerConfig, DotMarkerConfig } from '../../types/markers/common';
+/**
+ * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
+ * detected, configured gap run across every series — the interpolated
+ * bridge drawn over a missing-data hole. `gaps` is resolved per series the
+ * same way `segments` is (a named entry, falling back to `'default'` at
+ * zone granularity — see `resolveGapsForSeries`). Defaults to the series'
+ * own colour with `cfg.line.gap`'s stroke/dot styling (dashed and slightly
+ * muted out of the box), so a gap-fill reads as estimated rather than real
+ * data unless a zone or the global configuration overrides it. Dots (when
+ * requested) are drawn only at a run's two endpoints, not along every
+ * sampled bridge point.
+ */
+export declare function buildGapMarkers<TData extends Record<string, unknown>>(args: {
+    seriesList: Series<TData>[];
+    gaps: GapsConfig<LineSegmentStyle>;
+    colorFor: (seriesIndex: number) => string;
+}): (LineMarkerConfig | DotMarkerConfig)[];

package/dist/plots/line/buildGapMarkers.js

@@ -0,0 +1,68 @@
+import { resolveGapRuns, resolveGapsForSeries } from '../utils/gaps';
+import { getConfiguration } from '../../configuration/config.svelte';
+const gx = (p) => p.x;
+const gy = (p) => p.y;
+/**
+ * One `'line'` (+ `'dot'`, when its zone sets `style.dots`) marker per
+ * detected, configured gap run across every series — the interpolated
+ * bridge drawn over a missing-data hole. `gaps` is resolved per series the
+ * same way `segments` is (a named entry, falling back to `'default'` at
+ * zone granularity — see `resolveGapsForSeries`). Defaults to the series'
+ * own colour with `cfg.line.gap`'s stroke/dot styling (dashed and slightly
+ * muted out of the box), so a gap-fill reads as estimated rather than real
+ * data unless a zone or the global configuration overrides it. Dots (when
+ * requested) are drawn only at a run's two endpoints, not along every
+ * sampled bridge point.
+ */
+export function buildGapMarkers(args) {
+    const { seriesList, gaps, colorFor } = args;
+    const cfg = getConfiguration();
+    const gapDefaults = cfg.line.gap;
+    const markers = [];
+    seriesList.forEach((series, seriesIndex) => {
+        const zones = resolveGapsForSeries(gaps, series.name);
+        const runs = resolveGapRuns(series, zones);
+        if (runs.length === 0)
+            return;
+        const defaultColor = colorFor(seriesIndex);
+        for (const run of runs) {
+            const strokeStyle = run.zone.style?.stroke;
+            const dotStyle = run.zone.style?.dots;
+            markers.push({
+                type: 'line',
+                data: run.points,
+                x: gx,
+                y: gy,
+                style: {
+                    stroke: strokeStyle?.stroke ?? defaultColor,
+                    strokeWidth: strokeStyle?.strokeWidth ?? gapDefaults.stroke.strokeWidth ?? cfg.line.strokeWidth,
+                    strokeOpacity: strokeStyle?.strokeOpacity ?? gapDefaults.stroke.strokeOpacity,
+                    strokeDasharray: strokeStyle?.strokeDasharray ?? gapDefaults.stroke.strokeDasharray,
+                    strokeLinejoin: strokeStyle?.strokeLinejoin ?? gapDefaults.stroke.strokeLinejoin,
+                    strokeLinecap: strokeStyle?.strokeLinecap ?? gapDefaults.stroke.strokeLinecap,
+                },
+            });
+            if (!dotStyle)
+                continue;
+            const dotDefaults = gapDefaults.dots;
+            const endpoints = [run.points[0], run.points[run.points.length - 1]];
+            markers.push({
+                type: 'dot',
+                data: endpoints,
+                x: gx,
+                y: gy,
+                style: {
+                    dotRadius: dotStyle.dotRadius ?? dotDefaults.dotRadius ?? cfg.line.dotRadius,
+                    dotFill: dotStyle.dotFill ?? strokeStyle?.stroke ?? dotDefaults.dotFill ?? defaultColor,
+                    dotSymbol: dotStyle.dotSymbol ?? dotDefaults.dotSymbol ?? 'circle',
+                    dotStroke: dotStyle.dotStroke ?? strokeStyle?.stroke ?? dotDefaults.dotStroke ?? defaultColor,
+                    dotStrokeWidth: dotStyle.dotStrokeWidth ?? dotDefaults.dotStrokeWidth ?? 1,
+                    dotFillOpacity: dotStyle.dotFillOpacity ?? dotDefaults.dotFillOpacity ?? 1,
+                    dotStrokeOpacity: dotStyle.dotStrokeOpacity ?? dotDefaults.dotStrokeOpacity ?? 1,
+                    dotStrokeDasharray: dotStyle.dotStrokeDasharray ?? dotDefaults.dotStrokeDasharray,
+                },
+            });
+        }
+    });
+    return markers;
+}

package/dist/plots/utils/gaps.d.ts

@@ -0,0 +1,32 @@
+import type { Series } from '../../types/plots/data/common';
+import type { GapZonesConfig, GapZoneConfig } from '../../types/plots/gaps';
+/**
+ * Resolves one series' zone config out of `LinePlot`'s full `gaps` prop: a
+ * named entry (keyed by the series' own `name`) applies only to that
+ * series; `'default'` fills in whichever zone the named entry itself leaves
+ * unset. Unlike `segments`' own specific/default resolution (which
+ * concatenates two rule lists), this merges at zone granularity — there's
+ * no list to concatenate, just three independent slots.
+ */
+export declare function resolveGapsForSeries<TStyle>(gaps: Record<string, GapZonesConfig<TStyle>>, seriesName: string): GapZonesConfig<TStyle>;
+/** A point sampled along a gap-fill bridge, already resolved to plot data-space numbers. */
+export type GapPoint = {
+    x: number;
+    y: number;
+};
+export type GapRun<TStyle> = {
+    kind: 'start' | 'middle' | 'end';
+    zone: GapZoneConfig<TStyle>;
+    points: GapPoint[];
+};
+/** A row counts as a gap when its resolved value is `null`, `undefined`, or `NaN`. */
+export declare function isGapValue(v: unknown): boolean;
+/**
+ * Detects a series' missing-data runs (see {@link GapZonesConfig}'s doc
+ * comment for what counts as missing) and, for every run whose zone is
+ * configured, builds the eased bridge points that visually fill it. Rows
+ * are sorted by `x` first, so an out-of-order series is handled the same as
+ * a sorted one. A series with no valid (non-missing) rows at all produces
+ * no runs — there's nothing to bridge from or to.
+ */
+export declare function resolveGapRuns<T extends Record<string, unknown>, TStyle>(series: Series<T>, gaps: GapZonesConfig<TStyle>): GapRun<TStyle>[];

package/dist/plots/utils/gaps.js

@@ -0,0 +1,89 @@
+import { resolveAccessor } from './accessors';
+import { resolveEasing } from '../../utils/interpolate';
+const DEFAULT_KEY = 'default';
+/**
+ * Resolves one series' zone config out of `LinePlot`'s full `gaps` prop: a
+ * named entry (keyed by the series' own `name`) applies only to that
+ * series; `'default'` fills in whichever zone the named entry itself leaves
+ * unset. Unlike `segments`' own specific/default resolution (which
+ * concatenates two rule lists), this merges at zone granularity — there's
+ * no list to concatenate, just three independent slots.
+ */
+export function resolveGapsForSeries(gaps, seriesName) {
+    const specific = gaps[seriesName];
+    const defaults = gaps[DEFAULT_KEY];
+    if (!specific)
+        return defaults ?? {};
+    if (!defaults)
+        return specific;
+    return {
+        start: specific.start ?? defaults.start,
+        middle: specific.middle ?? defaults.middle,
+        end: specific.end ?? defaults.end,
+    };
+}
+const BRIDGE_STEPS = 24;
+/** A row counts as a gap when its resolved value is `null`, `undefined`, or `NaN`. */
+export function isGapValue(v) {
+    return v === null || v === undefined || (typeof v === 'number' && Number.isNaN(v));
+}
+/** Samples `BRIDGE_STEPS + 1` points between two endpoints, x moving linearly and y eased by the zone's `interpolate`. */
+function buildBridge(from, to, zone) {
+    const ease = resolveEasing(zone.interpolate);
+    const points = [];
+    for (let i = 0; i <= BRIDGE_STEPS; i++) {
+        const t = i / BRIDGE_STEPS;
+        points.push({ x: from.x + (to.x - from.x) * t, y: from.y + (to.y - from.y) * ease(t) });
+    }
+    return points;
+}
+/**
+ * Detects a series' missing-data runs (see {@link GapZonesConfig}'s doc
+ * comment for what counts as missing) and, for every run whose zone is
+ * configured, builds the eased bridge points that visually fill it. Rows
+ * are sorted by `x` first, so an out-of-order series is handled the same as
+ * a sorted one. A series with no valid (non-missing) rows at all produces
+ * no runs — there's nothing to bridge from or to.
+ */
+export function resolveGapRuns(series, gaps) {
+    if (!gaps.start && !gaps.middle && !gaps.end)
+        return [];
+    const xFn = resolveAccessor(series.x);
+    const yFn = resolveAccessor(series.y);
+    const sorted = [...series.data].sort((a, b) => Number(xFn(a)) - Number(xFn(b)));
+    const pt = (row) => ({ x: Number(xFn(row)), y: Number(yFn(row)) });
+    const validIdx = sorted.reduce((acc, row, idx) => {
+        if (!isGapValue(yFn(row)))
+            acc.push(idx);
+        return acc;
+    }, []);
+    if (validIdx.length === 0)
+        return [];
+    const runs = [];
+    const firstValid = validIdx[0];
+    if (firstValid > 0 && gaps.start) {
+        const to = pt(sorted[firstValid]);
+        const from = { x: Number(gaps.start.x), y: gaps.start.y != null ? Number(gaps.start.y) : to.y };
+        runs.push({ kind: 'start', zone: gaps.start, points: buildBridge(from, to, gaps.start) });
+    }
+    if (gaps.middle) {
+        for (let k = 0; k < validIdx.length - 1; k++) {
+            const a = validIdx[k];
+            const b = validIdx[k + 1];
+            if (b - a > 1) {
+                runs.push({
+                    kind: 'middle',
+                    zone: gaps.middle,
+                    points: buildBridge(pt(sorted[a]), pt(sorted[b]), gaps.middle),
+                });
+            }
+        }
+    }
+    const lastValid = validIdx[validIdx.length - 1];
+    if (lastValid < sorted.length - 1 && gaps.end) {
+        const from = pt(sorted[lastValid]);
+        const to = { x: Number(gaps.end.x), y: gaps.end.y != null ? Number(gaps.end.y) : from.y };
+        runs.push({ kind: 'end', zone: gaps.end, points: buildBridge(from, to, gaps.end) });
+    }
+    return runs;
+}

package/dist/types/configuration/styling.d.ts

@@ -83,6 +83,15 @@ export type ChartConfig = {
     line: {
         strokeWidth: number;
         dotRadius: number;
+        /**
+         * Default gap-fill bridge styling (`LinePlot`'s `gaps` prop) — the
+         * fallback merged under whatever a gap zone's own `style` sets, the
+         * same way `hover.rule`/`hover.dot` back every hover marker's style.
+         */
+        gap: {
+            stroke: StrokeStyle;
+            dots: DotStyle;
+        };
         /**
          * End-of-line value-label declutter geometry and connector styling —
          * `LinePlot`-specific, since only line charts spread colliding

package/dist/types/plots/gaps.d.ts

@@ -0,0 +1,39 @@
+import type { EasingName } from '../charts/interpolate';
+import type { AxisValue } from '../layout/scales';
+/**
+ * How one gap zone bridges its hole: `interpolate` eases the synthetic
+ * segment's value between its two endpoints (defaults to `'linear'`, a
+ * straight line); `style` is the per-mark shape drawn for it
+ * ({@link LineSegmentStyle} for `LinePlot`), independent of that plot
+ * kind's own default marker style unless the caller repeats it.
+ */
+export type GapZoneConfig<TStyle> = {
+    interpolate?: EasingName;
+    style?: TStyle;
+};
+/**
+ * A leading/trailing gap has only one real boundary — `x` (required to opt
+ * in) is the domain value the synthetic segment extends to, and `y` is the
+ * value it reaches there (defaults to holding the nearest real point's
+ * value, i.e. a flat extrapolation). Omitting the zone entirely leaves that
+ * end of the series unfilled — extrapolating without an explicit target
+ * would imply data that doesn't exist.
+ */
+export type OpenGapZoneConfig<TStyle> = GapZoneConfig<TStyle> & {
+    x: AxisValue;
+    y?: AxisValue;
+};
+/**
+ * One series' gap-fill config: `start` (before its first real point),
+ * `middle` (any internal run of missing rows, bounded by real data on both
+ * sides) and `end` (after its last real point). A row counts as missing
+ * when its resolved value is `null`, `undefined`, or `NaN` — the same
+ * convention svelteplot's own `Line` mark already uses to break the line
+ * there. See {@link GapsConfig} (`types/plots/props.ts`) for how this is
+ * keyed per series on `LinePlot`'s own `gaps` prop.
+ */
+export type GapZonesConfig<TStyle> = {
+    start?: OpenGapZoneConfig<TStyle>;
+    middle?: GapZoneConfig<TStyle>;
+    end?: OpenGapZoneConfig<TStyle>;
+};

package/dist/types/plots/gaps.js

@@ -0,0 +1 @@
+export {};

package/dist/types/plots/props.d.ts

@@ -1,5 +1,6 @@
 import type { HoverPoint, HoverStrategy, TooltipOptions } from '../layout/tooltip';
 import type { Segment } from './segments/config';
+import type { GapZonesConfig } from './gaps';
 import type { AxisBasedScalesConfig } from '../layout/scales';
 import type { GeoScalesConfig } from '../layout/coordinates';
 /** The `styles` prop accepted by every plot kind — its own
@@ -14,6 +15,14 @@ export type MarkersConfig<TMarker> = TMarker[];
  * area-specific segments merge on top and win on conflict.
  */
 export type SegmentsConfig<TStyle> = Record<string, Segment<TStyle>[]>;
+/**
+ * The `gaps` prop `LinePlot` accepts — series name (or `'default'` for all
+ * series) to that series' {@link GapZonesConfig}. Mirrors `SegmentsConfig`'s
+ * series-keyed shape: a named entry applies only to that series; `'default'`
+ * fills in whichever of its zones (`start`/`middle`/`end`) the named entry
+ * itself leaves unset, at zone granularity rather than a merged style.
+ */
+export type GapsConfig<TStyle> = Record<string, GapZonesConfig<TStyle>>;
 /**
  * Partial margin override — unset sides fall back to the theme (itself
  * `'auto'` by default). `'auto'` fits the side to its rendered content; a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "files": [
     "dist"