@fundar/data-chart-telling 1.18.0 → 1.19.0

package/dist/plots/evolution/slope/markers.d.ts

@@ -1,6 +1,7 @@
-import type { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import type { EdgeBox } from '../../../types/layout/box';
-import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
+import type { MarkerLabelConfig } from '../../../types/markers/labels/common';
 import type { SlopePlotState, SlopePlotEnv } from '../../../types/plots/evolution/slope/state';
 /**
  * SlopePlot's "markers" phase: each series' line, with a dot on every point
@@ -11,6 +12,6 @@ export declare function buildMarks<TData extends Record<string, unknown>>(state:
  * SlopePlot's value labels: the series' first points labelled before them and
  * its last ones after, each end spread apart where its labels would overlap.
  */
-export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: SlopePlotState<TData>): TextMarkerConfig[];
+export declare function buildValueLabels<TData extends Record<string, unknown>>(labels: ValueLabels, state: SlopePlotState<TData>, env: SlopePlotEnv): MarkerLabelConfig[];
 /** Where SlopePlot's labels are expected to sit: past the points at both ends. */
 export declare function buildReach<TData extends Record<string, unknown>>(labels: ValueLabels, state: SlopePlotState<TData>): EdgeBox[];

package/dist/plots/evolution/slope/markers.js

@@ -1,9 +1,10 @@
 import { getConfiguration } from '../../../configuration/config.svelte';
 import { buildLineMarkers } from '../line/markers';
 import { ProcessedPositions } from '../../../phases/transforms/ProcessedPositions';
-/** The anchor of the labels at the plot's start: the mirror of the end's, so `'start'` always reads outward. */
-function startAnchor(anchor) {
-    return anchor === 'start' ? 'end' : anchor === 'end' ? 'start' : anchor;
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+/** The side of the labels at the plot's start: the mirror of the end's, so `'after'` always reads outward. */
+function startSide(side) {
+    return side === 'after' ? 'before' : side === 'before' ? 'after' : side;
 }
 /** The value a position is told apart by: a date by its time. */
 const keyOf = (value) => (value instanceof Date ? value.getTime() : value);
@@ -24,13 +25,17 @@ export function buildMarks(state, env) {
             }
         }))
     }));
-    return buildLineMarkers({
+    const lines = buildLineMarkers({
         groupedSeries: groups,
         colorFor: state.colorForSeries,
         disabledStrokeFor: (name) => env.interaction?.strokeFor(name),
         disabledDotsFor: (name) => env.interaction?.dotsFor(name),
         curve: state.styles?.curve
     });
+    const labels = state.valueLabels?.show
+        ? buildValueLabels(state.valueLabels, state, env)
+        : undefined;
+    return ValueLabels.onMarkers(lines, 'line', labels);
 }
 /** The rows labelled at the plot's first position and at its last, each series' own. */
 function labelledEnds(state) {
@@ -52,25 +57,27 @@ function labelledEnds(state) {
  * SlopePlot's value labels: the series' first points labelled before them and
  * its last ones after, each end spread apart where its labels would overlap.
  */
-export function buildValueLabels(labels, state) {
+export function buildValueLabels(labels, state, env) {
     if (!state.processedData)
         return [];
+    if (labels.layout === 'path')
+        return labels.alongSeries(state, env);
     const { start, end } = labelledEnds(state);
     return [
-        ...labels.atSeriesEnds(state, {
+        ...labels.atSeriesEnds(state, env, {
             rows: start,
-            anchor: startAnchor(labels.anchor),
+            side: startSide(labels.side),
             lane: true,
             flip: false
         }),
-        ...labels.atSeriesEnds(state, { rows: end, lane: true })
+        ...labels.atSeriesEnds(state, env, { rows: end, lane: true })
     ];
 }
 /** Where SlopePlot's labels are expected to sit: past the points at both ends. */
 export function buildReach(labels, state) {
     // Labels before the first position reach the left edge, those after the last one the right.
     const before = labels
-        .reachAtSeriesEnds(state, startAnchor(labels.anchor))
+        .reachAtSeriesEnds(state, startSide(labels.side))
         .map(({ box, edges }) => ({ box, edges: edges.filter((edge) => edge !== 'right') }));
     const after = labels
         .reachAtSeriesEnds(state)

package/dist/plots/evolution/sparkline/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildSparklineDefaults } from './defaults';
 	import type {
 		SparklinePlotProps,
@@ -28,7 +28,7 @@
 	}: SparklinePlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as SparklinePlotCoreProps<TData>}
 	defaults={buildSparklineDefaults}
 	bind:margins

package/dist/plots/evolution/sparkline/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { SparklinePlotProps } from '../../../types/plots/evolution/sparkline/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: SparklinePlotProps<TData>;

package/dist/plots/evolution/sparkline/defaults.js

@@ -19,7 +19,7 @@ export function buildSparklineDefaults() {
                 format: (value, number) => number(value)
             }
         },
-        markers: { marks: buildMarks, valueLabels: line.markers.valueLabels },
+        markers: { marks: buildMarks },
         // Small and bare: a dot on the hovered point, and nothing else.
         hover: { ...line.hover, marker: () => ({ back: [], front: [HoverDefaults.dot()] }) }
     };

package/dist/plots/evolution/sparkline/markers.js

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { getConfiguration } from '../../../configuration/config.svelte';
 import { buildLineMarkers } from '../line/markers';
 import { resolveAccessor } from '../../../utils/accessors';
@@ -52,5 +53,6 @@ export function buildMarks(state, env) {
             }
         ];
     });
-    return [...lines, ...dots];
+    const labels = state.valueLabels?.show ? state.valueLabels.forSeries(state, env) : undefined;
+    return [...ValueLabels.onMarkers(lines, 'line', labels), ...dots];
 }

package/dist/plots/generic/Plot.svelte

@@ -0,0 +1,42 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+	import AbstractPlot from '../../layout/plot/AbstractPlot.svelte';
+	import { buildGenericDefaults } from './defaults';
+	import type { GenericPlotProps, GenericPlotCoreProps } from '../../types/plots/generic/props';
+
+	/**
+	 * A plot of no kind: no shapes or defaults of its own, only its `markers`. `data` and the channels
+	 * are optional; markers without their own take them, and its `segments`, `transforms`, `styles`,
+	 * chrome, `timeline` and `facet` work as on any plot.
+	 * `margins` is bindable: it reports the margin the plot settled on.
+	 */
+	let {
+		title,
+		subtitle,
+		caption,
+		header,
+		footer,
+		legend,
+		order,
+		timeline,
+		facet,
+		tooltip,
+		margins = $bindable(),
+		...core
+	}: GenericPlotProps<TData> = $props();
+</script>
+
+<AbstractPlot
+	core={core as GenericPlotCoreProps<TData>}
+	defaults={buildGenericDefaults}
+	bind:margins
+	{title}
+	{subtitle}
+	{caption}
+	{header}
+	{footer}
+	{legend}
+	{order}
+	{timeline}
+	{facet}
+	{tooltip}
+/>

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

@@ -0,0 +1,25 @@
+import type { GenericPlotProps } from '../../types/plots/generic/props';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: GenericPlotProps<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 Plot: $$IsomorphicComponent;
+type Plot<TData extends Record<string, unknown>> = InstanceType<typeof Plot<TData>>;
+export default Plot;

package/dist/plots/generic/defaults.d.ts

@@ -0,0 +1,4 @@
+import type { AxisPlotDefaults } from '../../types/phases';
+import type { GenericPlotState, GenericPlotEnv } from '../../types/plots/generic/state';
+/** The plot with no kind: it draws only its `markers`. */
+export declare function buildGenericDefaults<TData extends Record<string, unknown>>(): AxisPlotDefaults<GenericPlotState<TData>, GenericPlotEnv>;

package/dist/plots/generic/defaults.js

@@ -0,0 +1,7 @@
+/** The plot with no kind: it draws only its `markers`. */
+export function buildGenericDefaults() {
+    return {
+        data: { segments: { color: (style) => style?.fill } },
+        markers: { marks: () => [] }
+    };
+}

package/dist/plots/map/geo/Plot.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TProps extends Record<string, unknown>">
 	import Core from './Core.svelte';
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { merge } from '../../../utils/merge';
 	import { buildGeoDefaults } from './defaults';
 	import { buildGeoSlicing } from './slices';
@@ -87,7 +87,7 @@
 	}
 </script>
 
-<Plot
+<AbstractPlot
 	{Core}
 	core={core as GeoPlotCoreProps<TProps>}
 	defaults={buildGeoDefaults}

package/dist/plots/map/geo/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { GeoPlotProps } from '../../../types/plots/map/geo/props';
 declare function $$render<TProps extends Record<string, unknown>>(): {
     props: GeoPlotProps<TProps>;

package/dist/plots/part-of-a-whole/treemap/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildTreemapDefaults } from './defaults';
 	import type {
 		TreemapPlotProps,
@@ -30,7 +30,7 @@
 	}: TreemapPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as TreemapPlotCoreProps<TData>}
 	defaults={buildTreemapDefaults}
 	bind:margins

package/dist/plots/part-of-a-whole/treemap/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { TreemapPlotProps } from '../../../types/plots/part-of-a-whole/treemap/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: TreemapPlotProps<TData>;

package/dist/plots/part-of-a-whole/treemap/defaults.js

@@ -87,7 +87,7 @@ function buildMarks(state, env) {
     };
     /** The label of a series' tiles: the name over the share, fitted - or the share alone where the name does not fit. */
     const labelOf = (labels) => {
-        const shape = labels.shapeLabel(env, (row) => `${contextOf(row).name}
+        const shape = labels.label(env, (row) => `${contextOf(row).name}
 ${shareText(row)}`, { fontSize: look.fontSize });
         return {
             ...shape,
@@ -155,7 +155,7 @@ export function buildTreemapDefaults() {
             }),
             fit: () => ({ x: { domain: [0, 1], fitted: true }, y: { domain: [0, 1], fitted: true } })
         },
-        styles: { values: { show: true } },
+        styles: { values: { show: true, layout: 'box' } },
         markers: { marks: buildMarks },
         hover: {
             strategy: 'punctual',

package/dist/plots/ranking/bar/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildBarDefaults } from './defaults';
 	import type { BarPlotProps, BarPlotCoreProps } from '../../../types/plots/ranking/bar/props';
 
@@ -24,7 +24,7 @@
 	}: BarPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as BarPlotCoreProps<TData>}
 	defaults={buildBarDefaults}
 	bind:margins

package/dist/plots/ranking/bar/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { BarPlotProps } from '../../../types/plots/ranking/bar/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: BarPlotProps<TData>;

package/dist/plots/ranking/bar/defaults.js

@@ -59,17 +59,27 @@ export function buildBarDefaults() {
             }),
             fit: (state) => fitValueDomain(state)
         },
+        transforms: { labels: {} },
         styles: {
             values: {
+                layout: (state) => ProcessedPositions.span(state.processedData, PlotAxes.valueOf(state))
+                    .stacked
+                    ? 'box'
+                    : 'path',
+                layouts: {
+                    path: { edge: 'tip', side: 'outside' },
+                    box: { anchor: 'middle' },
+                    point: { anchor: 'top', side: 'above' }
+                },
                 // An `'outside'` label sits past its bar's end, which the tallest bar takes to the edge.
                 reach: (labels, state) => {
-                    if (labels.anchor !== 'outside')
+                    if (!labels.pastTip)
                         return [];
                     const axis = PlotAxes.valueOf(state);
                     if (ProcessedPositions.span(state.processedData, axis).stacked)
                         return [];
                     if (!state.axes?.isHorizontal) {
-                        const offset = labels.offset('y');
+                        const offset = labels.offset();
                         const boxes = [
                             labels.edgeBox('0', { x: 'middle', y: 'before' }, { y: -offset }, ['top'])
                         ];
@@ -82,7 +92,7 @@ export function buildBarDefaults() {
                         return boxes;
                     }
                     // A bar below zero reaches out to the left, with its label turned that way.
-                    const offset = labels.offset('x');
+                    const offset = labels.offset();
                     return labels
                         .extremes(state.resolvedSeries ?? [], PlotAxes.valueOf(state), 'both')
                         .map(({ series, value }) => value < 0

package/dist/plots/ranking/bar/markers.js

@@ -4,7 +4,6 @@ import { GAP_KIND, GAP_VALUE, SERIES_ID_KEY } from '../../../phases/transforms/T
 import { seriesIdOf } from '../../../utils/grouping';
 import { resolveGapAreaStyle } from '../../utils/gaps';
 import { PlotAxes } from '../../../phases/data/PlotAxes';
-import { ValueLabels } from '../../../layout/styles/ValueLabels';
 const GAP_KINDS = ['start', 'middle', 'end'];
 /**
  * Where a bar plot's bars sit, read off the state its phases leave: each
@@ -89,21 +88,14 @@ export function buildMarks(state, env) {
     // which stays a field key whenever the plot has no transforms.
     const valueOf = (channel) => (geometry.stacked || channel === undefined ? top : channel);
     const gapValue = valueOf(channels[valueAxis]);
-    // What each bar writes in itself: its value, anchored along the bar by `anchor` - past its tip
-    // (`'outside'`), just inside it (`'start'`), at its base (`'end'`) or in the middle. A stacked bar's
-    // label is always in the middle of its segment.
-    const labels = state.valueLabels?.show ? state.valueLabels : undefined;
-    const valueRead = ValueLabels.valueOf(state);
-    const turns = !!labels && !geometry.stacked && ValueLabels.followsSign(labels.anchor);
-    const labelAnchor = (negative) => ValueLabels.boxAnchor(labels?.anchor ?? 'outside', {
-        isHorizontal,
-        negative,
-        stacked: geometry.stacked
-    });
-    const labelFor = (name, slice, negative) => labels && {
-        ...labels.shapeLabel(env, (d) => labels.format(Number(valueRead(d)), d, name), {
+    // What each bar writes about itself: its value, in the layout of `styles.values` - by default past its tip, or
+    // in the middle of a stacked bar's segment.
+    const labels = state.valueLabels?.show && state.valueLabels.writes('value') ? state.valueLabels : undefined;
+    const labelFor = (name, slice) => labels && {
+        ...labels.label(env, (d) => labels.text(d), {
             fill: 'currentColor',
-            ...labelAnchor(negative)
+            labelled: state.labelled,
+            seriesColor: () => colorForSeries(name)
         }),
         bandSlice: slice
     };
@@ -155,18 +147,9 @@ export function buildMarks(state, env) {
             };
             const real = seg.data.filter(isReal);
             const value = valueOf(group.series[valueAxis]);
-            // A label past the tip turns with the sign of its value, so the bars below zero are a marker of their own.
-            const parts = turns
-                ? [false, true].map((negative) => ({
-                    negative,
-                    rows: real.filter((row) => Number(valueRead(row)) < 0 === negative)
-                }))
-                : [{ negative: false, rows: real }];
-            for (const { negative, rows } of parts) {
-                const marker = makeMarker(rows, slice, value, styles, labelFor(name, slice, negative));
-                if (marker)
-                    segmentMarkers.push(marker);
-            }
+            const marker = makeMarker(real, slice, value, styles, labelFor(name, slice));
+            if (marker)
+                segmentMarkers.push(marker);
         }
         const id = seriesIdOf(group.series);
         const fills = [...(gapFillMaps.get(id)?.values() ?? [])];

package/dist/plots/ranking/bullet/Plot.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TData extends Record<string, unknown>">
-	import Plot from '../../../layout/plot/Plot.svelte';
+	import AbstractPlot from '../../../layout/plot/AbstractPlot.svelte';
 	import { buildBulletDefaults } from './defaults';
 	import type { BulletPlotProps, BulletPlotCoreProps } from '../../../types/plots/ranking/bullet/props';
 
@@ -25,7 +25,7 @@
 	}: BulletPlotProps<TData> = $props();
 </script>
 
-<Plot
+<AbstractPlot
 	core={core as BulletPlotCoreProps<TData>}
 	defaults={buildBulletDefaults}
 	bind:margins

package/dist/plots/ranking/bullet/Plot.svelte.d.ts

@@ -1,4 +1,3 @@
-import Plot from '../../../layout/plot/Plot.svelte';
 import type { BulletPlotProps } from '../../../types/plots/ranking/bullet/props';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: BulletPlotProps<TData>;

package/dist/plots/ranking/bullet/defaults.js

@@ -1,3 +1,5 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
+import { RowNumbers } from '../../utils/RowNumbers';
 import { buildBarDefaults, fitValueDomain } from '../bar/defaults';
 import { buildMarks, buildReach } from './markers';
 /**
@@ -19,6 +21,24 @@ export function buildBulletDefaults() {
             }),
             fit: (state, env) => fitValueDomain(state, buildReach(state, env))
         },
+        // Each bar's target and range bounds, for its tooltip, hover and value labels to read.
+        context: (state) => ((row) => ({
+            target: RowNumbers.of(state.target, row),
+            ranges: (state.ranges ?? [])
+                .map((range) => RowNumbers.of(range, row))
+                .filter((bound) => bound !== undefined)
+                .sort((a, b) => a - b)
+        })),
+        styles: {
+            ...bar.styles,
+            values: {
+                ...bar.styles?.values,
+                parts: {
+                    placements: (state) => ValueLabels.besideBand(state, ['target', 'ranges']),
+                    default: ['value']
+                }
+            }
+        },
         markers: { ...bar.markers, marks: buildMarks }
     };
 }

package/dist/plots/ranking/bullet/markers.js

@@ -1,3 +1,4 @@
+import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import { buildMarks as buildBarMarks, buildBarGeometry } from '../bar/markers';
 import { GAP_VALUE } from '../../../phases/transforms/TransformsPhase';
 import { RowNumbers } from '../../utils/RowNumbers';
@@ -85,5 +86,10 @@ export function buildMarks(state, env) {
                 }
             }
         ];
-    return [...ranges, ...bars, ...ticks];
+    // Its other parts `styles.values` labels - the target, the range bounds - beside the band; the bars write the value.
+    const geometry = buildBarGeometry(state, env.cfg.bar.seriesPadding);
+    const labels = state.valueLabels?.show
+        ? state.valueLabels.partMarkers(env, (state.processedData?.data ?? []).filter((row) => row[GAP_VALUE] === undefined && geometry.spanOf(row) !== undefined), ValueLabels.bandPoint(state, geometry.categoryOf), { skip: ['value'] })
+        : [];
+    return [...ranges, ...bars, ...ticks, ...labels];
 }

package/dist/plots/ranking/cleveland/ClevelandMarkers.d.ts

@@ -1,6 +1,6 @@
 import { ValueLabels } from '../../../layout/styles/ValueLabels';
 import type { ClevelandPlotState, ClevelandPlotEnv, ClevelandOptions } from '../../../types/plots/ranking/cleveland/state';
-import type { AxisBasedMarkersConfig, TextMarkerConfig } from '../../../types/markers/common';
+import type { AxisBasedMarkersConfig } from '../../../types/markers/common';
 import type { EdgeBox } from '../../../types/layout/box';
 /**
  * The marks of the Cleveland family of plots, which differ only by their
@@ -8,7 +8,7 @@ import type { EdgeBox } from '../../../types/layout/box';
  * highest value (from the baseline, for a lollipop) with a dot at each value.
  * A category with one dot gets a stem in that dot's series color, restyled by
  * the segment its dot belongs to; a category with several gets one neutral
- * connector. The "markers" phase takes its `marks`, `valueLabels` and `reach`.
+ * connector. The "markers" phase takes its `marks` and `reach`.
  */
 export declare class ClevelandMarkers {
     #private;
@@ -17,13 +17,6 @@ export declare class ClevelandMarkers {
     static resetWarnings(): void;
     /** The plot's connectors, then its dots, which draw on top of them. */
     marks: <TData extends Record<string, unknown>>(state: ClevelandPlotState<TData>, env: ClevelandPlotEnv) => AxisBasedMarkersConfig[];
-    /**
-     * The value labels of the dots `styles.values.of` picks, one `'text'` marker
-     * per place a dot can hold in its range - past the top end (above, or right
-     * of it), past the bottom end (below, or left of it) and, for the dots
-     * between, beside it - and per series, when they take their series' color.
-     */
-    valueLabels: <TData extends Record<string, unknown>>(labels: ValueLabels, state: ClevelandPlotState<TData>, env: ClevelandPlotEnv) => TextMarkerConfig[];
     /**
      * Room for the labels past the dots at the end of the value axis, so the
      * farthest one fits inside the figure instead of crossing its edge. Only the