@fundar/data-chart-telling 0.0.29 → 0.0.31

package/dist/plots/pyramid/buildPyramidBarMarkers.js

@@ -1,23 +1,34 @@
 import { resolveAccessor } from '../utils/accessors';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { isGapValue, resolveGapAreaStyle } from '../utils/gaps';
+const GAP_KINDS = ['start', 'middle', 'end'];
 /**
  * Every `'bar'` marker for one PyramidPlot render — reuses `BarMarkerConfig`
  * directly, always horizontal (category on y, signed magnitude on x) and
  * with no insets. Emits no `role: 'hitArea'` markers, since PyramidPlot's
- * hover matches nearest points rather than hit-testing category bands.
+ * hover matches nearest points rather than hit-testing category bands. A
+ * row whose value is missing and *not* filled by a `styles.gaps` zone is
+ * skipped entirely; a filled one gets one additional, distinctly-styled
+ * marker per zone kind, at its interpolated value.
  */
 export function buildPyramidBarMarkers(args) {
-    const { groupedSeries, valueFor, colorFor, disabledFillFor } = args;
+    const { groupedSeries, valueFor, signFor, colorFor, disabledFillFor, gapFillMaps } = args;
+    const gapDefaults = getConfiguration().pyramid.gap;
     const markers = [];
     for (const group of groupedSeries) {
         const getCategory = resolveAccessor(group.series.x);
+        const getMagnitude = resolveAccessor(group.series.y);
         const defaultColor = colorFor(group.series);
         const disabledFill = disabledFillFor(group.series.name);
         for (const seg of group.visualSegments) {
+            const realData = seg.data.filter((d) => !isGapValue(getMagnitude(d)));
+            if (realData.length === 0)
+                continue;
             markers.push({
                 type: 'bar',
                 role: 'segment',
                 isHorizontal: true,
-                data: seg.data,
+                data: realData,
                 y: getCategory,
                 x1: 0,
                 x2: (d) => valueFor(group.series, d),
@@ -27,6 +38,35 @@ export function buildPyramidBarMarkers(args) {
                 },
             });
         }
+        const fillMap = gapFillMaps.get(group.series.name) ?? new Map();
+        for (const kind of GAP_KINDS) {
+            const filledRows = group.series.data.filter((d) => fillMap.get(d)?.kind === kind);
+            if (filledRows.length === 0)
+                continue;
+            const base = resolveGapAreaStyle(fillMap.get(filledRows[0]).style, defaultColor, gapDefaults);
+            // svelteplot shallow-clones each row before invoking a mark's own
+            // geometry accessors, so a `fillMap.get(d)` lookup inside `x2` would
+            // see a clone, not the original key — tag the resolved value onto the
+            // row as a plain field instead, which survives that clone.
+            const taggedData = filledRows.map((d) => ({
+                ...d,
+                __gapValue: signFor(group.series, Math.abs(fillMap.get(d).value)),
+            }));
+            markers.push({
+                type: 'bar',
+                role: 'segment',
+                isHorizontal: true,
+                data: taggedData,
+                y: getCategory,
+                x1: 0,
+                x2: (d) => d.__gapValue,
+                style: {
+                    ...base,
+                    fill: disabledFill?.fill ?? base.fill,
+                    fillOpacity: disabledFill?.fillOpacity ?? base.fillOpacity,
+                },
+            });
+        }
     }
     return markers;
 }

package/dist/plots/scatter/Plot.svelte

@@ -20,7 +20,7 @@
   import type { AxisValue, AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { Series } from '../../types/plots/data/common';
   import type { ScatterDataProps } from '../../types/plots/data/scatter';
-  import type { BasePlotStylesConfig } from '../../types/layout/styles';
+  import type { AxisBasedStylesConfig } from '../../types/layout/styles';
   import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
   import type { AxisBasedMarkersConfig } from '../../types/markers/common';
   import type { LegendDisabledStyle } from '../../types/layout/legend';
@@ -36,7 +36,7 @@
   type Props = BasePlotProps<
     ScatterDataProps<TData>,
     TData,
-    BasePlotStylesConfig,
+    AxisBasedStylesConfig,
     ScatterSegmentStyle,
     AxisBasedMarkersConfig,
     AxisBasedScalesConfig<TData>

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

@@ -1,10 +1,10 @@
 import type { BasePlotProps } from '../../types/plots/props';
 import type { AxisBasedScalesConfig } from '../../types/layout/scales';
 import type { ScatterDataProps } from '../../types/plots/data/scatter';
-import type { BasePlotStylesConfig } from '../../types/layout/styles';
+import type { AxisBasedStylesConfig } from '../../types/layout/styles';
 import type { AxisBasedMarkersConfig } from '../../types/markers/common';
 declare function $$render<TData extends Record<string, unknown>>(): {
-    props: BasePlotProps<ScatterDataProps<TData>, TData, BasePlotStylesConfig, import("../..").DotStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
+    props: BasePlotProps<ScatterDataProps<TData>, TData, AxisBasedStylesConfig, import("../..").DotStyle, AxisBasedMarkersConfig, AxisBasedScalesConfig<TData>>;
     exports: {};
     bindings: "";
     slots: {};

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

@@ -1,5 +1,6 @@
 import type { Series } from '../../types/plots/data/common';
 import type { GapZonesConfig, GapZoneConfig } from '../../types/plots/gaps';
+import type { AreaStyle } from '../../types/plots/styling';
 /**
  * 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
@@ -30,3 +31,22 @@ export declare function isGapValue(v: unknown): boolean;
  * 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>[];
+/** One gap row's resolved fill — the interpolated value to render instead of the missing one, and which zone produced it. */
+export type DiscreteGapFill<TStyle> = {
+    value: number;
+    kind: 'start' | 'middle' | 'end';
+    style?: TStyle;
+};
+/**
+ * Bar/pyramid analog of `resolveGapRuns`: a category axis has no continuous
+ * bridge to sample, so this returns one interpolated value per *individual*
+ * gap row instead. Runs are detected by `series.data`'s own array order
+ * (not a numeric `x` sort like `resolveGapRuns` — a category axis is often
+ * nominal, so there's no meaningful numeric ordering to sort by). Keyed by
+ * row object reference rather than category, since a series' `y` accessor
+ * may be an arbitrary function — there's no general way to write the
+ * interpolated value back onto a row, so callers look it up here instead.
+ */
+export declare function resolveDiscreteGapFills<T extends Record<string, unknown>, TStyle>(series: Series<T>, gaps: GapZonesConfig<TStyle>): Map<T, DiscreteGapFill<TStyle>>;
+/** Field-by-field style fallback for a discrete gap-fill marker — mirrors how `buildGapMarkers.ts` merges a line gap zone's style under `cfg.line.gap`. */
+export declare function resolveGapAreaStyle(zoneStyle: AreaStyle | undefined, defaultColor: string, gapDefaults: AreaStyle): AreaStyle;

package/dist/plots/utils/gaps.js

@@ -87,3 +87,70 @@ export function resolveGapRuns(series, gaps) {
     }
     return runs;
 }
+/**
+ * Bar/pyramid analog of `resolveGapRuns`: a category axis has no continuous
+ * bridge to sample, so this returns one interpolated value per *individual*
+ * gap row instead. Runs are detected by `series.data`'s own array order
+ * (not a numeric `x` sort like `resolveGapRuns` — a category axis is often
+ * nominal, so there's no meaningful numeric ordering to sort by). Keyed by
+ * row object reference rather than category, since a series' `y` accessor
+ * may be an arbitrary function — there's no general way to write the
+ * interpolated value back onto a row, so callers look it up here instead.
+ */
+export function resolveDiscreteGapFills(series, gaps) {
+    const result = new Map();
+    if (!gaps.start && !gaps.middle && !gaps.end)
+        return result;
+    const yFn = resolveAccessor(series.y);
+    const rows = series.data;
+    const valueAt = (i) => Number(yFn(rows[i]));
+    const validIdx = rows.reduce((acc, row, i) => {
+        if (!isGapValue(yFn(row)))
+            acc.push(i);
+        return acc;
+    }, []);
+    if (validIdx.length === 0)
+        return result;
+    function fillRun(indices, from, to, zone, kind) {
+        const ease = resolveEasing(zone.interpolate);
+        const span = indices.length + 1;
+        indices.forEach((idx, i) => {
+            const t = (i + 1) / span;
+            result.set(rows[idx], { value: from + (to - from) * ease(t), kind, style: zone.style });
+        });
+    }
+    const firstValid = validIdx[0];
+    if (firstValid > 0 && gaps.start) {
+        const to = valueAt(firstValid);
+        const from = gaps.start.y != null ? Number(gaps.start.y) : to;
+        fillRun(Array.from({ length: firstValid }, (_, i) => i), from, to, gaps.start, '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) {
+                fillRun(Array.from({ length: b - a - 1 }, (_, i) => a + 1 + i), valueAt(a), valueAt(b), gaps.middle, 'middle');
+            }
+        }
+    }
+    const lastValid = validIdx[validIdx.length - 1];
+    if (lastValid < rows.length - 1 && gaps.end) {
+        const from = valueAt(lastValid);
+        const to = gaps.end.y != null ? Number(gaps.end.y) : from;
+        fillRun(Array.from({ length: rows.length - 1 - lastValid }, (_, i) => lastValid + 1 + i), from, to, gaps.end, 'end');
+    }
+    return result;
+}
+/** Field-by-field style fallback for a discrete gap-fill marker — mirrors how `buildGapMarkers.ts` merges a line gap zone's style under `cfg.line.gap`. */
+export function resolveGapAreaStyle(zoneStyle, defaultColor, gapDefaults) {
+    return {
+        fill: zoneStyle?.fill ?? gapDefaults.fill ?? defaultColor,
+        fillOpacity: zoneStyle?.fillOpacity ?? gapDefaults.fillOpacity ?? 1,
+        stroke: zoneStyle?.stroke ?? gapDefaults.stroke,
+        strokeWidth: zoneStyle?.strokeWidth ?? gapDefaults.strokeWidth,
+        strokeOpacity: zoneStyle?.strokeOpacity ?? gapDefaults.strokeOpacity,
+        strokeDasharray: zoneStyle?.strokeDasharray ?? gapDefaults.strokeDasharray,
+        borderRadius: zoneStyle?.borderRadius ?? gapDefaults.borderRadius,
+    };
+}

package/dist/plots/utils/labelOverflow.svelte.d.ts

@@ -48,4 +48,13 @@ export declare function createLabelMarginTracker(margins: () => MarginConfig | u
         bottom: number | "auto";
         left: number | "auto";
     }> | undefined;
+    readonly plotProps: {
+        margins: Partial<{
+            top: number | "auto";
+            right: number | "auto";
+            bottom: number | "auto";
+            left: number | "auto";
+        }> | undefined;
+        marginRemountKey: string;
+    };
 };

package/dist/plots/utils/labelOverflow.svelte.js

@@ -109,8 +109,19 @@ export function createLabelMarginTracker(margins) {
             out.bottom = measured.bottom;
         return out;
     });
+    // Bundles `resolvedMargins` with a remount key derived from `measured`,
+    // ready to spread straight onto `<BasePlotLayout>` as its `margins`/
+    // `marginRemountKey` props (see that prop's doc comment for *why* a
+    // remount key is needed here at all) — keeps the caller from re-deriving
+    // the same key by hand, and from having to know it's `measured` that key
+    // must track.
+    const plotProps = $derived.by(() => ({
+        margins: resolvedMargins,
+        marginRemountKey: JSON.stringify(measured),
+    }));
     return {
         report,
         get resolvedMargins() { return resolvedMargins; },
+        get plotProps() { return plotProps; },
     };
 }

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { AxisValue, AxisBasedScalesConfig } from '../layout/scales';
 import type { Accessor } from '../plots/data/common';
-import type { BasePlotStylesConfig } from '../layout/styles';
+import type { AxisBasedStylesConfig, GapsAwarePlotStylesConfig } from '../layout/styles';
 import type { SegmentsConfig, MarginConfig } from '../plots/props';
 import type { AxisBasedMarkersConfig } from '../markers/common';
 import type { TooltipProp } from '../layout/tooltip';
@@ -30,7 +30,7 @@ export type ChartProps<TRow extends Record<string, unknown>, TSegmentStyle exten
     x: Accessor<TRow, AxisValue>;
     y: Accessor<TRow, AxisValue>;
     z?: Accessor<TRow, unknown>;
-    styles?: BasePlotStylesConfig;
+    styles?: AxisBasedStylesConfig;
     segments?: SegmentsConfig<TSegmentStyle>;
     markers?: AxisBasedMarkersConfig[];
     scales?: AxisBasedScalesConfig<TRow>;
@@ -39,3 +39,12 @@ export type ChartProps<TRow extends Record<string, unknown>, TSegmentStyle exten
     timeline?: TimelineConfig<TRow>;
     tooltip?: TooltipProp<TRow>;
 };
+/**
+ * `ChartProps` for the chart kinds with gap-fill (`BarChart`/`LineChart`/
+ * `PyramidChart`) — identical shape, but `styles` accepts
+ * `GapsAwarePlotStylesConfig<TSegmentStyle>` (adds `styles.gaps`) instead of
+ * the plain `AxisBasedStylesConfig` every other chart kind uses.
+ */
+export type GapsAwareChartProps<TRow extends Record<string, unknown>, TSegmentStyle extends object = object> = Omit<ChartProps<TRow, TSegmentStyle>, 'styles'> & {
+    styles?: GapsAwarePlotStylesConfig<TSegmentStyle>;
+};

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

@@ -84,7 +84,7 @@ export type ChartConfig = {
         strokeWidth: number;
         dotRadius: number;
         /**
-         * Default gap-fill bridge styling (`LinePlot`'s `gaps` prop) — the
+         * Default gap-fill bridge styling (`LinePlot`'s `styles.gaps`) — 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.
          */
@@ -110,6 +110,16 @@ export type ChartConfig = {
             connectorWidth: number;
         };
     };
+    /** Default bar-mark styling. */
+    bar: {
+        /** Default gap-fill styling (`BarPlot`'s `styles.gaps`) — the fallback merged under whatever a gap zone's own `style` sets. */
+        gap: AreaStyle;
+    };
+    /** Default pyramid-bar styling. */
+    pyramid: {
+        /** Default gap-fill styling (`PyramidPlot`'s `styles.gaps`) — the fallback merged under whatever a gap zone's own `style` sets. */
+        gap: AreaStyle;
+    };
     /** Default scatter point geometry. */
     scatter: {
         dotRadius: number;

package/dist/types/layout/facet.d.ts

@@ -6,6 +6,7 @@ export type Responsive<T> = T | {
 };
 export type FacetColumns = Responsive<number>;
 export type FacetMode = 'grid' | 'carousel' | 'paginated';
+export type FacetNavLayout = 'overlay' | 'below';
 export type FacetCellContext<TRow extends Record<string, unknown>> = {
     facetValue: string;
     data: TRow[];
@@ -35,6 +36,7 @@ export type FacetConfig<TRow extends Record<string, unknown>> = {
     mode?: Responsive<FacetMode>;
     visible?: number;
     pageSize?: number;
+    navLayout?: FacetNavLayout;
     formatIndicator?: (current: number, total: number) => string;
     indicator?: FacetIndicatorSnippet;
     navButton?: FacetNavSnippet;

package/dist/types/layout/styles.d.ts

@@ -1,6 +1,7 @@
 import type { ValueAnchor } from '../plots/constants';
 import type { FontStyle, StrokeStyle, AreaStyle } from '../plots/styling';
 import type { GeoFeature } from '../plots/data/geo';
+import type { GapsConfig } from '../plots/gaps';
 /**
  * Controls if and how value labels are rendered on a plot. The high-level
  * `anchor` sets sensible defaults for placement; `fontStyle` (`dx`, `dy`,
@@ -47,16 +48,34 @@ export type FrameStyle = AreaStyle & {
 };
 /** Author-facing `styles.frame` prop — see {@link FrameStyle}. */
 export type FrameProp = boolean | FrameStyle;
+/**
+ * The fields every plot kind's own `styles` shape shares, regardless of
+ * whether it's built on axes ({@link AxisBasedStylesConfig}) or geometry
+ * ({@link GeoStylesConfig}) — the true common parent of the two, unlike the
+ * name `AxisBasedStylesConfig` might suggest before this split existed.
+ */
+export type BasePlotStylesConfig = {
+    /** Decorative border around the plot's content box — see {@link FrameStyle}. Available on every plot kind. */
+    frame?: FrameProp;
+};
 /**
  * Top-level rendering style overrides shared by the non-geo plot kinds.
  * Passed as the `styles` prop. Each plot reads only the fields it cares
  * about.
  */
-export type BasePlotStylesConfig = {
+export type AxisBasedStylesConfig = BasePlotStylesConfig & {
     values?: ValuesStyle;
     colors?: ColorsStyle;
-    /** Decorative border around the plot's content box — see {@link FrameStyle}. Available on every plot kind. */
-    frame?: FrameProp;
+};
+/**
+ * `AxisBasedStylesConfig` extended with `gaps` — the interpolated
+ * missing-data bridge fill available to plot kinds with an inherent
+ * category/sequence ordering (`LinePlot`, `BarPlot`, `PyramidPlot`).
+ * Resolved per series like `segments`, at zone granularity — see
+ * {@link GapsConfig}.
+ */
+export type GapsAwarePlotStylesConfig<TSegmentStyle extends object> = AxisBasedStylesConfig & {
+    gaps?: GapsConfig<TSegmentStyle>;
 };
 export type GeoTileLayerConfig = {
     /** XYZ tile URL template, e.g. `'https://tile.openstreetmap.org/{z}/{x}/{y}.png'`. */
@@ -69,12 +88,13 @@ export type GeoTileLayerConfig = {
     tileSize?: number;
 };
 /**
- * `styles` prop for GeoPlot — the geo analog of `BasePlotStylesConfig`.
- * Unlike the other plot kinds, GeoPlot's styling needs (base map, choropleth
- * ramp, tile background, click handling) are unlike anything x/y plots need,
- * so this is its own type rather than a reuse of `BasePlotStylesConfig`.
+ * `styles` prop for GeoPlot — the geo analog of `AxisBasedStylesConfig`,
+ * sharing only {@link BasePlotStylesConfig}'s common ground with it. Unlike
+ * the other plot kinds, GeoPlot's styling needs (base map, choropleth ramp,
+ * tile background, click handling) are unlike anything x/y plots need, so
+ * this is its own type rather than a reuse of `AxisBasedStylesConfig`.
  */
-export type GeoStylesConfig<TProps extends Record<string, unknown> = Record<string, unknown>> = {
+export type GeoStylesConfig<TProps extends Record<string, unknown> = Record<string, unknown>> = BasePlotStylesConfig & {
     /** Base map fill, used when a feature isn't styled by `segments` or the choropleth ramp. */
     fill?: string;
     fillOpacity?: number;
@@ -86,8 +106,6 @@ export type GeoStylesConfig<TProps extends Record<string, unknown> = Record<stri
     tileLayer?: GeoTileLayerConfig;
     /** Fired when a base-map feature is clicked. */
     onFeatureClick?: (feature: GeoFeature<TProps>, event: Event) => void;
-    /** Decorative border around the plot's content box — see {@link FrameStyle}. Available on every plot kind. */
-    frame?: FrameProp;
 };
 /**
  * `GeoTileLayerConfig`, plus `features` — never author-facing (the public
@@ -103,7 +121,7 @@ type GeoTileLayerConfigWithFeatures = GeoTileLayerConfig & {
 };
 /**
  * The minimal slice of a plot kind's own `styles` prop `StylesLayout` reads —
- * every concrete `styles` type ({@link BasePlotStylesConfig},
+ * every concrete `styles` type ({@link AxisBasedStylesConfig},
  * {@link GeoStylesConfig}) structurally satisfies this whether or not it
  * declares `tileLayer` at all (a missing optional field type-checks fine).
  */

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

@@ -18,6 +18,11 @@ export type GapZoneConfig<TStyle> = {
  * 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.
+ *
+ * On `LinePlot`, `x`'s value is the actual spatial target the bridge draws
+ * out to (its axis is continuous). On `BarPlot`/`PyramidPlot`, each gap row
+ * already has its own real category, so `x`'s *presence* is only the opt-in
+ * gate — its value isn't read; `y` is what drives the fill.
  */
 export type OpenGapZoneConfig<TStyle> = GapZoneConfig<TStyle> & {
     x: AxisValue;
@@ -29,11 +34,21 @@ export type OpenGapZoneConfig<TStyle> = GapZoneConfig<TStyle> & {
  * 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.
+ * there. See {@link GapsConfig} for how this is keyed per series on a
+ * gap-aware plot kind's `styles.gaps`.
  */
 export type GapZonesConfig<TStyle> = {
     start?: OpenGapZoneConfig<TStyle>;
     middle?: GapZoneConfig<TStyle>;
     end?: OpenGapZoneConfig<TStyle>;
 };
+/**
+ * The `gaps` field a gap-aware plot kind's `styles` accepts (see
+ * {@link GapsAwarePlotStylesConfig}, `types/layout/styles.ts`) — 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>>;

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

@@ -1,10 +1,9 @@
 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
- * styles shape ({@link BasePlotStylesConfig}, `GeoStylesConfig`, …). */
+ * styles shape ({@link AxisBasedStylesConfig}, `GeoStylesConfig`, …). */
 export type StylesConfig<TStyles extends object> = TStyles;
 /** The `markers` prop accepted by every plot kind — a list of that kind's own marker union. */
 export type MarkersConfig<TMarker> = TMarker[];
@@ -15,14 +14,6 @@ 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.29",
+  "version": "0.0.31",
   "type": "module",
   "files": [
     "dist"