@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/layout/timeline/TimelineTime.d.ts

@@ -0,0 +1,18 @@
+import type { TimeValue, TimelineStep } from '../../types/layout/timeline';
+/** Reads a timeline's values (numbers, `Date`s, ISO or `dateFormat` strings) as numeric steps, and back. */
+export declare class TimelineTime {
+    #private;
+    readonly dateFormat?: string | undefined;
+    /** @param dateFormat How a non-ISO date string reads, e.g. `'DD/MM/YYYY'`. */
+    constructor(dateFormat?: string | undefined);
+    /** A value as its step, or `undefined` when it reads as none. */
+    toTime(value: unknown): TimeValue | undefined;
+    /** A step as authors see it: a `Date` when `temporal`, else the number. */
+    static toStep(value: TimeValue, temporal: boolean): TimelineStep;
+    /** Whether `values` hold dates rather than plain numbers. */
+    isTemporal(values: unknown[]): boolean;
+    /** A step written back in the same form as `like`, for interpolated rows. */
+    toValueLike(time: TimeValue, like: unknown): unknown;
+    /** A date label as precise as the steps need: year, month, day or time. */
+    static dateLabel(steps: TimeValue[], locale?: string): (time: TimeValue) => string;
+}

package/dist/layout/timeline/TimelineTime.js

@@ -0,0 +1,117 @@
+/** The `dateFormat` tokens and the UTC date part each reads or writes. */
+const TOKENS = {
+    YYYY: { group: '(\\d{4})', get: (date) => date.getUTCFullYear(), width: 4 },
+    MM: { group: '(\\d{1,2})', get: (date) => date.getUTCMonth() + 1, width: 2 },
+    DD: { group: '(\\d{1,2})', get: (date) => date.getUTCDate(), width: 2 },
+    HH: { group: '(\\d{1,2})', get: (date) => date.getUTCHours(), width: 2 },
+    mm: { group: '(\\d{1,2})', get: (date) => date.getUTCMinutes(), width: 2 },
+    ss: { group: '(\\d{1,2})', get: (date) => date.getUTCSeconds(), width: 2 }
+};
+const TOKEN_PATTERN = /YYYY|MM|DD|HH|mm|ss/g;
+/** An ISO 8601 date, from a bare year to a full date-time. */
+const ISO_DATE = /^\d{4}(-\d{2}(-\d{2}([T ]\d{2}:\d{2}(:\d{2}(\.\d+)?)?(Z|[+-]\d{2}:?\d{2})?)?)?)?$/;
+const DAY = 24 * 60 * 60 * 1000;
+/** Reads a timeline's values (numbers, `Date`s, ISO or `dateFormat` strings) as numeric steps, and back. */
+export class TimelineTime {
+    dateFormat;
+    /** @param dateFormat How a non-ISO date string reads, e.g. `'DD/MM/YYYY'`. */
+    constructor(dateFormat) {
+        this.dateFormat = dateFormat;
+    }
+    /** A value as its step, or `undefined` when it reads as none. */
+    toTime(value) {
+        if (typeof value === 'number')
+            return Number.isFinite(value) ? value : undefined;
+        if (value instanceof Date) {
+            const time = value.getTime();
+            return Number.isFinite(time) ? time : undefined;
+        }
+        if (typeof value !== 'string')
+            return undefined;
+        const text = value.trim();
+        if (this.dateFormat) {
+            const parsed = TimelineTime.#parse(text, this.dateFormat);
+            if (parsed !== undefined)
+                return parsed;
+        }
+        if (text !== '' && Number.isFinite(Number(text)) && !ISO_DATE.test(text))
+            return Number(text);
+        if (ISO_DATE.test(text)) {
+            // A bare year stays a year, like a number.
+            if (/^\d{4}$/.test(text))
+                return Number(text);
+            const time = Date.parse(/^\d{4}-\d{2}$/.test(text) ? `${text}-01` : text);
+            return Number.isFinite(time) ? time : undefined;
+        }
+        return undefined;
+    }
+    /** A step as authors see it: a `Date` when `temporal`, else the number. */
+    static toStep(value, temporal) {
+        return temporal ? new Date(value) : value;
+    }
+    /** Whether `values` hold dates rather than plain numbers. */
+    isTemporal(values) {
+        return values.some((value) => {
+            if (value instanceof Date)
+                return true;
+            if (typeof value !== 'string')
+                return false;
+            const text = value.trim();
+            return !/^-?\d+(\.\d+)?$/.test(text) && this.toTime(text) !== undefined;
+        });
+    }
+    /** A step written back in the same form as `like`, for interpolated rows. */
+    toValueLike(time, like) {
+        if (like instanceof Date)
+            return new Date(time);
+        if (typeof like !== 'string')
+            return time;
+        const text = like.trim();
+        if (this.dateFormat && TimelineTime.#parse(text, this.dateFormat) !== undefined) {
+            return TimelineTime.#write(new Date(time), this.dateFormat);
+        }
+        if (ISO_DATE.test(text) && !/^\d{4}$/.test(text)) {
+            return new Date(time).toISOString().slice(0, text.length);
+        }
+        return String(time);
+    }
+    /** A date label as precise as the steps need: year, month, day or time. */
+    static dateLabel(steps, locale) {
+        const dates = steps.map((time) => new Date(time));
+        const options = dates.every((d) => d.getUTCMonth() === 0 && d.getUTCDate() === 1 && d.getTime() % DAY === 0)
+            ? { year: 'numeric' }
+            : dates.every((d) => d.getUTCDate() === 1 && d.getTime() % DAY === 0)
+                ? { month: 'short', year: 'numeric' }
+                : dates.every((d) => d.getTime() % DAY === 0)
+                    ? { day: 'numeric', month: 'short', year: 'numeric' }
+                    : { dateStyle: 'medium', timeStyle: 'short' };
+        const format = new Intl.DateTimeFormat(locale, { ...options, timeZone: 'UTC' });
+        return (time) => format.format(new Date(time));
+    }
+    /** `text` read through `format`, or `undefined` when it does not match. */
+    static #parse(text, format) {
+        const order = [];
+        const pattern = format
+            .split(TOKEN_PATTERN)
+            .map((literal) => literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+        const tokens = format.match(TOKEN_PATTERN) ?? [];
+        let source = pattern[0];
+        tokens.forEach((token, index) => {
+            order.push(token);
+            source += TOKENS[token].group + pattern[index + 1];
+        });
+        const match = new RegExp(`^${source}$`).exec(text);
+        if (!match || !order.length)
+            return undefined;
+        const parts = { YYYY: 1970, MM: 1, DD: 1, HH: 0, mm: 0, ss: 0 };
+        order.forEach((token, index) => (parts[token] = Number(match[index + 1])));
+        return Date.UTC(parts.YYYY, parts.MM - 1, parts.DD, parts.HH, parts.mm, parts.ss);
+    }
+    /** `date` written through `format`. */
+    static #write(date, format) {
+        return format.replace(TOKEN_PATTERN, (token) => {
+            const { get, width } = TOKENS[token];
+            return String(get(date)).padStart(width, '0');
+        });
+    }
+}

package/dist/layout/tooltip/Tooltip.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { resolveTooltipPlacement } from './resolveTooltipPlacement';
-  import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import { TooltipState } from './TooltipState.svelte';
+	import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
 
-  /**
-   * Presentational tooltip positioned at `(x, y)` within a `position: relative`
-   * parent. It is styled entirely from the `--dct-tooltip-*` variables that
-   * {@link ChartContainer} stamps from the config, so it themes for free. Plots
-   * that implement hovering can render this with their own content snippet.
-   *
-   * Placement is boundary-aware: it prefers sitting `anchorX`/`anchorY` of the
-   * point (default: to the right and below — clear of the cursor so the
-   * tooltip never covers what's being hovered), falling back toward the
-   * opposite side (via the centered position) when the preferred side would
-   * overflow the `bounds` box — see `resolveTooltipPlacement`.
-   */
-  let {
-    x,
-    y,
-    visible = true,
-    background,
-    color,
-    bounds,
-    plain = false,
-    anchorX = 'right',
-    anchorY = 'bottom',
-    children,
-  }: {
-    x: number;
-    y: number;
-    visible?: boolean;
-    background?: string;
-    color?: string;
-    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
-    bounds?: { width: number; height: number };
-    /**
-     * Drops the default dark box (background/padding/border) so a custom
-     * `content` snippet fully owns its own look. Set whenever the caller
-     * supplies `content` — the drop shadow and border radius still apply,
-     * so a custom card can match its own corners via `--dct-tooltip-radius`.
-     */
-    plain?: boolean;
-    /** Preferred horizontal anchor relative to the cursor. Defaults to `'right'`. */
-    anchorX?: TooltipAnchorX;
-    /** Preferred vertical anchor relative to the cursor. Defaults to `'bottom'`. */
-    anchorY?: TooltipAnchorY;
-    children: Snippet;
-  } = $props();
+	/**
+	 * A plot's floating tooltip at `(x, y)`, inside a `position: relative`
+	 * parent and themed by the `--dct-tooltip-*` variables. It reads the rows
+	 * the hover matched: its own `content` snippet, given every row as matched,
+	 * or each row's `format` text, one per line, in `sort`'s order. It sits at `anchorX`/`anchorY` of the
+	 * point (default right and below) and moves over where it would leave its
+	 * plot's box - or `bounds`, when given. See {@link TooltipState}.
+	 */
+	let {
+		visible,
+		x,
+		y,
+		rows,
+		format,
+		sort,
+		content,
+		bounds,
+		anchorX = 'right',
+		anchorY = 'bottom',
+		background,
+		color
+	}: {
+		visible: boolean;
+		x: number;
+		y: number;
+		/** Every row the hover matched. */
+		rows: TRow[];
+		format: (row: TRow) => string;
+		/** The order the `format` text reads the rows in. Unset, as matched. */
+		sort?: (a: TRow, b: TRow) => number;
+		/** Custom tooltip body, given every row; replaces the `format` text and the default box. */
+		content?: Snippet<[{ rows: TRow[] }]>;
+		/** Box the tooltip must stay within. Defaults to its plot's box. */
+		bounds?: { width: number; height: number };
+		/** Preferred horizontal side of the point. Defaults to `'right'`. */
+		anchorX?: TooltipAnchorX;
+		/** Preferred vertical side of the point. Defaults to `'bottom'`. */
+		anchorY?: TooltipAnchorY;
+		background?: string;
+		color?: string;
+	} = $props();
 
-  let boxWidth = $state(0);
-  let boxHeight = $state(0);
-
-  const placement = $derived(
-    resolveTooltipPlacement({ x, y, boxWidth, boxHeight, bounds, anchorX, anchorY }),
-  );
+	const tooltip = new TooltipState({
+		point: () => ({ x, y }),
+		anchor: () => ({ x: anchorX, y: anchorY }),
+		bounds: () => bounds
+	});
 </script>
 
 {#if visible}
-  <div
-    class="dct-tooltip"
-    class:dct-tooltip--plain={plain}
-    bind:clientWidth={boxWidth}
-    bind:clientHeight={boxHeight}
-    style:left="{placement.left}px"
-    style:top="{placement.top}px"
-    style:background={background}
-    style:color={color}
-  >
-    {@render children()}
-  </div>
+	<div
+		class="dct-tooltip"
+		class:dct-tooltip--plain={!!content}
+		bind:clientWidth={tooltip.width}
+		bind:clientHeight={tooltip.height}
+		style:left="{tooltip.box.left}px"
+		style:top="{tooltip.box.top}px"
+		style:background
+		style:color
+	>
+		{#if content}
+			{@render content({ rows })}
+		{:else}
+			{TooltipState.text(rows, format, sort)}
+		{/if}
+	</div>
 {/if}
 
 <style>
-  .dct-tooltip {
-    position: absolute;
-    z-index: 10;
-    pointer-events: none;
-    background: var(--dct-tooltip-bg, #111827);
-    color: var(--dct-tooltip-color, #fff);
-    font-size: var(--dct-tooltip-size, 0.8125rem);
-    padding: var(--dct-tooltip-pad, 0.5rem 0.75rem);
-    border-radius: var(--dct-tooltip-radius, 0.375rem);
-    border: var(--dct-tooltip-border, none);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
-    white-space: pre-line;
-    line-height: 1.35;
-  }
+	.dct-tooltip {
+		position: absolute;
+		z-index: 10;
+		pointer-events: none;
+		background: var(--dct-tooltip-bg, #111827);
+		color: var(--dct-tooltip-color, #fff);
+		font-size: var(--dct-tooltip-size, 0.8125rem);
+		padding: var(--dct-tooltip-pad, 0.5rem 0.75rem);
+		border-radius: var(--dct-tooltip-radius, 0.375rem);
+		border: var(--dct-tooltip-border, none);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+		white-space: pre-line;
+		line-height: 1.35;
+	}
 
-  .dct-tooltip--plain {
-    background: transparent;
-    padding: 0;
-    border: none;
-  }
+	.dct-tooltip--plain {
+		background: transparent;
+		padding: 0;
+		border: none;
+	}
 </style>

package/dist/layout/tooltip/Tooltip.svelte.d.ts

@@ -1,29 +1,50 @@
 import type { Snippet } from 'svelte';
 import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
-type $$ComponentProps = {
-    x: number;
-    y: number;
-    visible?: boolean;
-    background?: string;
-    color?: string;
-    /** Box the tooltip must stay within — usually the hosting plot's width/height. */
-    bounds?: {
-        width: number;
-        height: number;
+declare function $$render<TRow extends Record<string, unknown>>(): {
+    props: {
+        visible: boolean;
+        x: number;
+        y: number;
+        /** Every row the hover matched. */
+        rows: TRow[];
+        format: (row: TRow) => string;
+        /** The order the `format` text reads the rows in. Unset, as matched. */
+        sort?: (a: TRow, b: TRow) => number;
+        /** Custom tooltip body, given every row; replaces the `format` text and the default box. */
+        content?: Snippet<[{
+            rows: TRow[];
+        }]>;
+        /** Box the tooltip must stay within. Defaults to its plot's box. */
+        bounds?: {
+            width: number;
+            height: number;
+        };
+        /** Preferred horizontal side of the point. Defaults to `'right'`. */
+        anchorX?: TooltipAnchorX;
+        /** Preferred vertical side of the point. Defaults to `'bottom'`. */
+        anchorY?: TooltipAnchorY;
+        background?: string;
+        color?: string;
     };
-    /**
-     * Drops the default dark box (background/padding/border) so a custom
-     * `content` snippet fully owns its own look. Set whenever the caller
-     * supplies `content` — the drop shadow and border radius still apply,
-     * so a custom card can match its own corners via `--dct-tooltip-radius`.
-     */
-    plain?: boolean;
-    /** Preferred horizontal anchor relative to the cursor. Defaults to `'right'`. */
-    anchorX?: TooltipAnchorX;
-    /** Preferred vertical anchor relative to the cursor. Defaults to `'bottom'`. */
-    anchorY?: TooltipAnchorY;
-    children: Snippet;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
-declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
-type Tooltip = ReturnType<typeof Tooltip>;
+declare class __sveltets_Render<TRow extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <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 Tooltip: $$IsomorphicComponent;
+type Tooltip<TRow extends Record<string, unknown>> = InstanceType<typeof Tooltip<TRow>>;
 export default Tooltip;

package/dist/layout/tooltip/TooltipState.svelte.d.ts

@@ -0,0 +1,67 @@
+import { Box } from '../margins/Box';
+import type { PlotAxes } from '../../phases/data/PlotAxes';
+import type { ProcessedData, ProcessedRow } from '../../types/phases';
+import type { TooltipAnchorX, TooltipAnchorY } from '../../types/layout/tooltip';
+import type { Series } from '../../types/plots/data/common';
+/** What a tooltip is shown from, each read reactively. */
+export type TooltipInputs = {
+    /** The point it sits beside. */
+    point: () => {
+        x: number;
+        y: number;
+    };
+    /** The side of the point it prefers, per axis. */
+    anchor: () => {
+        x: TooltipAnchorX;
+        y: TooltipAnchorY;
+    };
+    /** The box it must stay within. Unset, its plot's. */
+    bounds: () => {
+        width: number;
+        height: number;
+    } | undefined;
+};
+/**
+ * One tooltip: how big it rendered (`width`, `height`, bound to its element),
+ * where that puts it (`box`) - beside its point on its preferred side, moving
+ * over where it would leave its plot's box, as the plot's {@link PlotMargins}
+ * places it - and how its rows read. Its statics are the text a plot's
+ * default tooltip reads. Create it during component init.
+ */
+export declare class TooltipState {
+    #private;
+    width: number;
+    height: number;
+    constructor(inputs: TooltipInputs);
+    /** Where the tooltip sits. */
+    readonly box: Box;
+    /** The text `rows` read as through `format`, one line each, in `sort`'s order when given. */
+    static text<TRow>(rows: TRow[], format: (row: TRow) => string, sort?: (a: TRow, b: TRow) => number): string;
+    /**
+     * Orders rows from the highest value `valueOf` reads to the lowest. A row
+     * without a numeric value goes after every one with, and rows that tie keep
+     * the order the hover matched them in.
+     */
+    static descending<TRow>(valueOf: (row: TRow) => unknown): (a: TRow, b: TRow) => number;
+    /** A value as plain text: a date as a locale date, anything else as itself. */
+    static value(value: unknown): string;
+    /**
+     * How a hovered row reads by default, on every plot: its series, when the
+     * plot groups its rows; then where it sits - `category: value` when one
+     * axis is a band of categories (the row's own value, as its series reads
+     * it), else `x: y` as the transforms left them; then the value its color
+     * shows, when that is a number (a heatmap's cells).
+     */
+    static default(state: {
+        processedData?: ProcessedData;
+        resolvedSeries?: Series<Record<string, unknown>>[];
+        channels?: {
+            grouping?: unknown;
+            color?: {
+                accessor: (row: never) => unknown;
+                source?: unknown;
+            };
+        };
+        axes?: PlotAxes;
+    }): (row: ProcessedRow) => string;
+}

package/dist/layout/tooltip/TooltipState.svelte.js

@@ -0,0 +1,126 @@
+import { Box } from '../margins/Box';
+import { PlotMargins } from '../margins/PlotMargins.svelte';
+import { resolveAccessor } from '../../plots/utils/accessors';
+import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+import { ValueLabels } from '../styles/ValueLabels';
+/** A tooltip anchor as the side of the point the tooltip sits on. */
+const SIDES = {
+    left: 'before',
+    top: 'before',
+    middle: 'middle',
+    right: 'after',
+    bottom: 'after'
+};
+const STACKS = { x: 'stackX', y: 'stackY' };
+/**
+ * One tooltip: how big it rendered (`width`, `height`, bound to its element),
+ * where that puts it (`box`) - beside its point on its preferred side, moving
+ * over where it would leave its plot's box, as the plot's {@link PlotMargins}
+ * places it - and how its rows read. Its statics are the text a plot's
+ * default tooltip reads. Create it during component init.
+ */
+export class TooltipState {
+    width = $state(0);
+    height = $state(0);
+    #inputs;
+    #plotMargins = PlotMargins.current();
+    constructor(inputs) {
+        this.#inputs = inputs;
+    }
+    /** Where the tooltip sits. */
+    box = $derived.by(() => {
+        const size = Box.size(this.width, this.height);
+        const { x, y } = this.#inputs.anchor();
+        const anchor = { x: SIDES[x], y: SIDES[y] };
+        const point = this.#inputs.point();
+        const bounds = this.#inputs.bounds();
+        if (bounds)
+            return size.placeNear(point, anchor, Box.size(bounds.width, bounds.height));
+        return (this.#plotMargins?.place(size, point, anchor) ??
+            size.placeNear(point, anchor, Box.size(Infinity, Infinity)));
+    });
+    /** The text `rows` read as through `format`, one line each, in `sort`'s order when given. */
+    static text(rows, format, sort) {
+        return (sort ? [...rows].sort(sort) : rows).map(format).join('\n');
+    }
+    /**
+     * Orders rows from the highest value `valueOf` reads to the lowest. A row
+     * without a numeric value goes after every one with, and rows that tie keep
+     * the order the hover matched them in.
+     */
+    static descending(valueOf) {
+        const numberOf = (row) => {
+            const value = valueOf(row);
+            return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+        };
+        return (a, b) => {
+            const left = numberOf(a);
+            const right = numberOf(b);
+            if (left === undefined || right === undefined) {
+                return (left === undefined ? 1 : 0) - (right === undefined ? 1 : 0);
+            }
+            return right - left;
+        };
+    }
+    /** A value as plain text: a date as a locale date, anything else as itself. */
+    static value(value) {
+        return value instanceof Date ? value.toLocaleDateString() : String(value);
+    }
+    /**
+     * How a hovered row reads by default, on every plot: its series, when the
+     * plot groups its rows; then where it sits - `category: value` when one
+     * axis is a band of categories (the row's own value, as its series reads
+     * it), else `x: y` as the transforms left them; then the value its color
+     * shows, when that is a number (a heatmap's cells).
+     */
+    static default(state) {
+        const processed = state.processedData;
+        if (!processed)
+            return () => '';
+        const x = TooltipState.#axisText(processed, 'x');
+        const y = TooltipState.#axisText(processed, 'y');
+        const bandX = state.axes?.bands.includes('x') ?? false;
+        const bandY = state.axes?.bands.includes('y') ?? false;
+        const valueOf = ValueLabels.valueOf(state);
+        const position = bandX && !bandY
+            ? (row) => `${x(row)}: ${TooltipState.value(valueOf(row))}`
+            : bandY && !bandX
+                ? (row) => `${y(row)}: ${TooltipState.value(valueOf(row))}`
+                : (row) => `${x(row)}: ${y(row)}`;
+        const grouped = state.channels?.grouping !== undefined;
+        const color = state.channels?.color;
+        const colorName = typeof color?.source === 'string' ? color.source : 'color';
+        return (row) => {
+            const lines = grouped ? [String(row[SERIES_KEY])] : [];
+            lines.push(position(row));
+            const shown = color?.accessor(row);
+            if (typeof shown === 'number' && Number.isFinite(shown)) {
+                lines.push(`${colorName}: ${TooltipState.value(shown)}`);
+            }
+            return lines.join('\n');
+        };
+    }
+    /**
+     * How one axis reads on a processed row: its own channel, else the range
+     * the transforms gave it - a stack's own share (`2 - 1`), any other span as `1-2`.
+     */
+    static #axisText(processed, axis) {
+        const { channels, transforms } = processed;
+        const read = (channel) => resolveAccessor(channel);
+        const point = channels[axis];
+        if (point !== undefined) {
+            const value = read(point);
+            return (row) => TooltipState.value(value(row));
+        }
+        const low = channels[`${axis}1`];
+        const high = channels[`${axis}2`];
+        if (low === undefined || high === undefined)
+            return () => '';
+        const from = read(low);
+        const to = read(high);
+        if (transforms.some((t) => t.type === STACKS[axis])) {
+            return (row) => TooltipState.value(Number(to(row)) - Number(from(row)));
+        }
+        return (row) => `${TooltipState.value(from(row))}-${TooltipState.value(to(row))}`;
+    }
+}