@pushwoosh/kit-charts 0.0.1

package/core/Chart/PlotDecorations.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_FONT_SIZE, textHeight } from '../layout/measure-text';
+import { crisp, PLOT_LABEL_GAP } from '../layout/metrics';
+import { DEFAULT_AXIS_COLOR, DEFAULT_MUTED_TEXT_COLOR, DEFAULT_SURFACE_COLOR } from '../model/palette';
+import { ABOVE_SERIES_Z_INDEX } from '../types/options';
+const DASH = {
+  solid: undefined,
+  dash: '4 4',
+  dot: '1 3'
+};
+const inLayer = (zIndex, layer) => (zIndex ?? 0) >= ABOVE_SERIES_Z_INDEX ? layer === 'over' : layer === 'under';
+/**
+ * A band scale has no position for a value between two categories, so a
+ * decoration on one addresses a category by name and covers its whole slot.
+ */
+function project(scale, value, edge) {
+  if (scale.kind === 'band') {
+    const at = scale.map(String(value));
+    if (!Number.isFinite(at)) {
+      return null;
+    }
+    return edge === 'start' ? at : at + scale.bandwidth();
+  }
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return null;
+  }
+  const at = scale.map(numeric);
+  return typeof at === 'number' ? at : null;
+}
+const textProps = style => ({
+  fill: (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_MUTED_TEXT_COLOR,
+  fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
+  fontSize: (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE,
+  fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight
+});
+const ANCHOR = {
+  left: 'start',
+  center: 'middle',
+  right: 'end'
+};
+function PlotLabel({
+  label,
+  plot,
+  span,
+  along
+}) {
+  if (!(label !== null && label !== void 0 && label.text)) {
+    return null;
+  }
+  const [low, high] = span[0] <= span[1] ? span : [span[1], span[0]];
+  const align = label.align ?? (along === 'x' ? 'center' : 'left');
+  const verticalAlign = label.verticalAlign ?? (along === 'x' ? 'top' : 'middle');
+  const acrossLow = along === 'x' ? plot.y : plot.x;
+  const acrossHigh = along === 'x' ? plot.y + plot.height : plot.x + plot.width;
+  const alongAt = {
+    left: low,
+    center: (low + high) / 2,
+    right: high
+  }[align];
+  const acrossAt = {
+    top: acrossLow + PLOT_LABEL_GAP + textHeight(label.style),
+    middle: (acrossLow + acrossHigh) / 2,
+    bottom: acrossHigh - PLOT_LABEL_GAP
+  }[verticalAlign];
+  const x = (along === 'x' ? alongAt : acrossAt) + (label.x ?? 0);
+  const y = (along === 'x' ? acrossAt : alongAt) + (label.y ?? 0);
+  const rotation = label.rotation ?? 0;
+  return _jsx("text", {
+    x: x,
+    y: y,
+    textAnchor: along === 'x' ? ANCHOR[align] : 'start',
+    transform: rotation === 0 ? undefined : `rotate(${rotation} ${x} ${y})`,
+    ...textProps(label.style),
+    children: label.text
+  });
+}
+/**
+ * Plot bands and plot lines for one axis. They are drawn outside the axis
+ * component because a `zIndex` may put them over the series, which the axis
+ * itself never is.
+ */
+export function PlotDecorations({
+  plot,
+  axis,
+  along,
+  layer
+}) {
+  const {
+    options,
+    scale
+  } = axis;
+  if (options.visible === false) {
+    return null;
+  }
+  const bands = (options.plotBands ?? []).filter(band => inLayer(band.zIndex, layer));
+  const lines = (options.plotLines ?? []).filter(line => inLayer(line.zIndex, layer));
+  if (!bands.length && !lines.length) {
+    return null;
+  }
+  const band = (options_, index) => {
+    const from = project(scale, options_.from, 'start');
+    const to = project(scale, options_.to, 'end');
+    if (from === null || to === null) {
+      return null;
+    }
+    const [low, high] = from <= to ? [from, to] : [to, from];
+    const box = along === 'x' ? {
+      x: low,
+      y: plot.y,
+      width: high - low,
+      height: plot.height
+    } : {
+      x: plot.x,
+      y: low,
+      width: plot.width,
+      height: high - low
+    };
+    return _jsxs("g", {
+      children: [_jsx("rect", {
+        ...box,
+        fill: options_.color ?? DEFAULT_SURFACE_COLOR,
+        stroke: options_.borderWidth ? options_.borderColor ?? DEFAULT_AXIS_COLOR : undefined,
+        strokeWidth: options_.borderWidth ?? 0
+      }), _jsx(PlotLabel, {
+        label: options_.label,
+        plot: plot,
+        span: [low, high],
+        along: along
+      })]
+    }, `band-${index}`);
+  };
+  const rule = (options_, index) => {
+    // A line on a category sits in the middle of its slot, not on its edge.
+    const start = project(scale, options_.value, 'start');
+    const end = project(scale, options_.value, 'end');
+    if (start === null || end === null) {
+      return null;
+    }
+    const at = (start + end) / 2;
+    const width = options_.width ?? 1;
+    const on = crisp(at, width);
+    const ends = along === 'x' ? {
+      x1: on,
+      x2: on,
+      y1: plot.y,
+      y2: plot.y + plot.height
+    } : {
+      x1: plot.x,
+      x2: plot.x + plot.width,
+      y1: on,
+      y2: on
+    };
+    return _jsxs("g", {
+      children: [_jsx("line", {
+        ...ends,
+        stroke: options_.color ?? DEFAULT_AXIS_COLOR,
+        strokeWidth: width,
+        strokeDasharray: DASH[options_.dashStyle ?? 'solid']
+      }), _jsx(PlotLabel, {
+        label: options_.label,
+        plot: plot,
+        span: [at, at],
+        along: along
+      })]
+    }, `line-${index}`);
+  };
+  return _jsxs("g", {
+    "aria-hidden": true,
+    children: [bands.map(band), lines.map(rule)]
+  });
+}

package/core/Chart/StackLabels.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+import { type ChartModel } from '../model/build-model';
+export interface StackLabelsProps {
+    model: ChartModel;
+}
+export declare function StackLabels({ model }: StackLabelsProps): ReactElement | null;

package/core/Chart/StackLabels.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { projectX } from '../geometry/path';
+import { DEFAULT_FONT_SIZE } from '../layout/measure-text';
+import { VALUE_LABEL_GAP } from '../layout/metrics';
+import { DEFAULT_TEXT_COLOR } from '../model/palette';
+function collectTotals(model, axisIndex) {
+  const totals = new Map();
+  model.series.forEach(series => {
+    var _model$yAxes$axisInde;
+    if ((series.options.yAxis ?? 0) !== axisIndex) {
+      return;
+    }
+    const stacked = model.stacks.get(series.index);
+    if (!stacked) {
+      return;
+    }
+    const yScale = (_model$yAxes$axisInde = model.yAxes[axisIndex]) === null || _model$yAxes$axisInde === void 0 ? void 0 : _model$yAxes$axisInde.scale;
+    if (!yScale || yScale.kind === 'band' || yScale.kind === 'color') {
+      return;
+    }
+    series.points.forEach((point, pointIndex) => {
+      const cumulative = stacked[pointIndex];
+      if (!cumulative) {
+        return;
+      }
+      const key = String(point.x);
+      const px = projectX(model.xAxis.scale, point);
+      const py = yScale.map(cumulative.to);
+      const existing = totals.get(key);
+      if (!Number.isFinite(px) || !Number.isFinite(py)) {
+        return;
+      }
+      if (!existing || py < existing.py) {
+        totals.set(key, {
+          key,
+          px,
+          py,
+          value: cumulative.total
+        });
+      }
+    });
+  });
+  return [...totals.values()];
+}
+export function StackLabels({
+  model
+}) {
+  const labels = model.yAxes.flatMap((axis, axisIndex) => {
+    const options = axis.options.stackLabels;
+    if (!(options !== null && options !== void 0 && options.enabled)) {
+      return [];
+    }
+    const style = options.style;
+    return collectTotals(model, axisIndex).map(total => {
+      const content = options.formatter ? options.formatter({
+        x: total.key,
+        y: total.value,
+        value: total.value,
+        pointIndex: -1,
+        seriesIndex: -1,
+        seriesName: '',
+        meta: undefined
+      }) : model.numberFormat(total.value);
+      if (content === null || content === undefined || content === '') {
+        return null;
+      }
+      return _jsx("text", {
+        x: total.px,
+        y: total.py - VALUE_LABEL_GAP,
+        textAnchor: "middle",
+        fill: (style === null || style === void 0 ? void 0 : style.color) ?? DEFAULT_TEXT_COLOR,
+        fontFamily: style === null || style === void 0 ? void 0 : style.fontFamily,
+        fontSize: (style === null || style === void 0 ? void 0 : style.fontSize) ?? DEFAULT_FONT_SIZE,
+        fontWeight: (style === null || style === void 0 ? void 0 : style.fontWeight) ?? '600',
+        children: content
+      }, `sl-${axis.id}-${total.key}`);
+    });
+  });
+  if (!labels.length) {
+    return null;
+  }
+  return _jsx("g", {
+    children: labels
+  });
+}

package/core/Chart/Titles.d.ts

@@ -0,0 +1,6 @@
+import { type ReactElement } from 'react';
+import { type TitleEntry } from '../layout/title-layout';
+export interface TitlesProps {
+    entries: readonly TitleEntry[];
+}
+export declare function Titles({ entries }: TitlesProps): ReactElement | null;

package/core/Chart/Titles.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HintIcon } from './Chart.styles';
+import { Hinted } from './Hinted';
+import { DEFAULT_FONT_SIZE } from '../layout/measure-text';
+import { HINT_ICON_RADIUS, HINT_ICON_SIZE } from '../layout/metrics';
+import { DEFAULT_MUTED_TEXT_COLOR, DEFAULT_TEXT_COLOR } from '../model/palette';
+const WEIGHT = {
+  title: '600',
+  subtitle: '400',
+  caption: '400'
+};
+const COLOR = {
+  title: DEFAULT_TEXT_COLOR,
+  subtitle: DEFAULT_MUTED_TEXT_COLOR,
+  caption: DEFAULT_MUTED_TEXT_COLOR
+};
+const HINT_FONT_SIZE = '11px';
+const HINT_BASELINE_SHIFT = 4;
+/** The `i` beside a title: its explanation opens in the same callout as a point's. */
+function Hint({
+  hint
+}) {
+  return _jsx(Hinted, {
+    text: hint.text,
+    children: _jsxs(HintIcon, {
+      children: [_jsx("rect", {
+        x: hint.x - HINT_ICON_SIZE / 2,
+        y: hint.y - HINT_ICON_SIZE / 2,
+        width: HINT_ICON_SIZE,
+        height: HINT_ICON_SIZE,
+        rx: HINT_ICON_RADIUS
+      }), _jsx("text", {
+        x: hint.x,
+        y: hint.y + HINT_BASELINE_SHIFT,
+        textAnchor: "middle",
+        fontSize: HINT_FONT_SIZE,
+        children: "i"
+      })]
+    })
+  });
+}
+export function Titles({
+  entries
+}) {
+  if (!entries.length) {
+    return null;
+  }
+  return _jsx("g", {
+    children: entries.map(entry => {
+      var _entry$style, _entry$style2, _entry$style3;
+      return _jsxs("g", {
+        children: [_jsx("text", {
+          x: entry.x,
+          y: entry.y,
+          textAnchor: entry.anchor,
+          fill: ((_entry$style = entry.style) === null || _entry$style === void 0 ? void 0 : _entry$style.color) ?? COLOR[entry.key],
+          fontFamily: (_entry$style2 = entry.style) === null || _entry$style2 === void 0 ? void 0 : _entry$style2.fontFamily,
+          fontSize: entry.fontSize ?? DEFAULT_FONT_SIZE,
+          fontWeight: ((_entry$style3 = entry.style) === null || _entry$style3 === void 0 ? void 0 : _entry$style3.fontWeight) ?? WEIGHT[entry.key],
+          children: entry.text
+        }), entry.hint ? _jsx(Hint, {
+          hint: entry.hint
+        }) : null]
+      }, entry.key);
+    })
+  });
+}

package/core/Chart/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type Point } from '../types/geometry';
+import { type TooltipOptions } from '../types/options';
+interface TooltipProps {
+    /** Anchor the callout points at, in viewport coordinates. */
+    at: Point;
+    /** Pointer position, used when the tooltip follows the cursor instead. */
+    pointer: Point;
+    options: TooltipOptions | undefined;
+    children: ReactNode;
+}
+export declare function Tooltip({ at, options, pointer, children, }: TooltipProps): ReactElement | null;
+export {};

package/core/Chart/Tooltip.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { DEFAULTS, Tail, TooltipBox } from './Chart.styles';
+import { TOOLTIP_CURSOR_OFFSET, TOOLTIP_PADDING, TOOLTIP_RADIUS, TOOLTIP_TAIL, VIEWPORT_MARGIN } from '../layout/metrics';
+const SHADOW_COLOR = 'rgba(0, 0, 0, 0.12)';
+const DEFAULT_SHADOW = `0 2px 8px ${SHADOW_COLOR}`;
+export function Tooltip({
+  at,
+  options,
+  pointer,
+  children
+}) {
+  var _options$style, _options$style2, _options$style3, _options$style4;
+  const ref = useRef(null);
+  const callout = ((options === null || options === void 0 ? void 0 : options.shape) ?? 'callout') === 'callout' && !(options !== null && options !== void 0 && options.followPointer);
+  const target = options !== null && options !== void 0 && options.followPointer ? pointer : at;
+  const [placement, setPlacement] = useState({
+    x: target.x + TOOLTIP_CURSOR_OFFSET,
+    y: target.y + TOOLTIP_CURSOR_OFFSET,
+    tailX: null,
+    below: true
+  });
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return;
+    }
+    const {
+      width,
+      height
+    } = node.getBoundingClientRect();
+    const limitX = value => Math.min(Math.max(VIEWPORT_MARGIN, value), Math.max(VIEWPORT_MARGIN, window.innerWidth - width - VIEWPORT_MARGIN));
+    if (!callout) {
+      const flipX = target.x + TOOLTIP_CURSOR_OFFSET + width > window.innerWidth - VIEWPORT_MARGIN;
+      const flipY = target.y + TOOLTIP_CURSOR_OFFSET + height > window.innerHeight - VIEWPORT_MARGIN;
+      setPlacement({
+        x: limitX(flipX ? target.x - TOOLTIP_CURSOR_OFFSET - width : target.x + TOOLTIP_CURSOR_OFFSET),
+        y: Math.max(VIEWPORT_MARGIN, flipY ? target.y - TOOLTIP_CURSOR_OFFSET - height : target.y + TOOLTIP_CURSOR_OFFSET),
+        tailX: null,
+        below: !flipY
+      });
+      return;
+    }
+    // Sit above the point with the tail pointing down at it, and flip under the
+    // point when there is no room. The box may be nudged sideways to stay on
+    // screen, so the tail keeps its own offset and still points at the anchor.
+    const below = target.y - height - TOOLTIP_TAIL < VIEWPORT_MARGIN;
+    const x = limitX(target.x - width / 2);
+    setPlacement({
+      x,
+      y: below ? target.y + TOOLTIP_TAIL : target.y - height - TOOLTIP_TAIL,
+      tailX: Math.min(Math.max(TOOLTIP_TAIL * 2, target.x - x), Math.max(TOOLTIP_TAIL * 2, width - TOOLTIP_TAIL * 2)),
+      below
+    });
+  }, [target.x, target.y, callout, children]);
+  if (typeof document === 'undefined') {
+    return null;
+  }
+  const shadow = options === null || options === void 0 ? void 0 : options.shadow;
+  // A table needs room and columns; the dark hint chrome reads badly at that size,
+  // so the tabular tooltip is a light card unless the caller says otherwise.
+  const tabular = Boolean(options === null || options === void 0 ? void 0 : options.table);
+  const background = (options === null || options === void 0 ? void 0 : options.backgroundColor) ?? (tabular ? DEFAULTS.surface : DEFAULTS.tooltipSurface);
+  const color = (options === null || options === void 0 || (_options$style = options.style) === null || _options$style === void 0 ? void 0 : _options$style.color) ?? (tabular ? DEFAULTS.text : DEFAULTS.tooltipText);
+  return createPortal(_jsxs(TooltipBox, {
+    ref: ref,
+    role: "tooltip",
+    "$x": placement.x,
+    "$y": placement.y,
+    "$padding": (options === null || options === void 0 ? void 0 : options.padding) ?? TOOLTIP_PADDING,
+    "$radius": (options === null || options === void 0 ? void 0 : options.borderRadius) ?? TOOLTIP_RADIUS,
+    "$borderColor": (options === null || options === void 0 ? void 0 : options.borderColor) ?? (tabular ? DEFAULTS.border : 'transparent'),
+    "$background": background,
+    "$color": color,
+    "$fontFamily": (options === null || options === void 0 || (_options$style2 = options.style) === null || _options$style2 === void 0 ? void 0 : _options$style2.fontFamily) ?? DEFAULTS.fontFamily,
+    "$fontSize": (options === null || options === void 0 || (_options$style3 = options.style) === null || _options$style3 === void 0 ? void 0 : _options$style3.fontSize) ?? DEFAULTS.fontSize,
+    "$whiteSpace": (options === null || options === void 0 || (_options$style4 = options.style) === null || _options$style4 === void 0 ? void 0 : _options$style4.whiteSpace) ?? 'nowrap',
+    "$shadow": shadow ? `${shadow.offsetX ?? 0}px ${shadow.offsetY ?? 2}px ${shadow.width ?? 8}px ` + `${shadow.color ?? SHADOW_COLOR}` : DEFAULT_SHADOW,
+    children: [children, placement.tailX === null ? null : _jsx(Tail, {
+      "$left": placement.tailX,
+      "$size": TOOLTIP_TAIL,
+      "$color": background,
+      "$below": placement.below
+    })]
+  }), document.body);
+}

package/core/Chart/useSize.d.ts

@@ -0,0 +1,5 @@
+import { type Size } from '../types/geometry';
+export declare function useSize<T extends HTMLElement>(): [
+    React.RefObject<T>,
+    Size
+];

package/core/Chart/useSize.js

@@ -0,0 +1,45 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+const ZERO = {
+  width: 0,
+  height: 0
+};
+export function useSize() {
+  const ref = useRef(null);
+  const [size, setSize] = useState(ZERO);
+  const frame = useRef(0);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return undefined;
+    }
+    // Whole pixels only. Browser zoom sizes a box in fractions of a css pixel, and
+    // comparing rounded sizes while storing the fraction left the canvas at its old
+    // width whenever the box moved by less than half a pixel — drawn narrower than
+    // its box, with the right edge shaved off by the container's overflow.
+    const apply = () => {
+      const {
+        width,
+        height
+      } = node.getBoundingClientRect();
+      const next = {
+        width: Math.floor(width),
+        height: Math.floor(height)
+      };
+      setSize(current => current.width === next.width && current.height === next.height ? current : next);
+    };
+    apply();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame.current);
+      frame.current = requestAnimationFrame(apply);
+    });
+    observer.observe(node);
+    return () => {
+      cancelAnimationFrame(frame.current);
+      observer.disconnect();
+    };
+  }, []);
+  return [ref, size];
+}

package/core/animation/motion.d.ts

@@ -0,0 +1,20 @@
+/**
+ * One clock for the whole chart.
+ *
+ * Anything that answers the same gesture has to take the same time and the same
+ * curve, whatever draws it: a column shrinking through a CSS transition, a pie
+ * easing its angles frame by frame, a legend entry dimming. Two mechanisms are
+ * unavoidable — a browser cannot interpolate an arc correctly — but the numbers
+ * behind them must come from here, or the chart answers a single click at three
+ * different speeds.
+ */
+/** Everything that moves or leaves in response to a click on the chart. */
+export declare const MOTION_MS = 320;
+/** Hover feedback is an affordance, not chart motion: it may be quicker. */
+export declare const HOVER_MS = 140;
+/**
+ * Fast out, gentle in. The CSS curve and the function below are the same easing
+ * written twice — keep them in step.
+ */
+export declare const MOTION_EASING = "cubic-bezier(0.33, 1, 0.68, 1)";
+export declare const easeOutCubic: (t: number) => number;

package/core/animation/motion.js

@@ -0,0 +1,20 @@
+/**
+ * One clock for the whole chart.
+ *
+ * Anything that answers the same gesture has to take the same time and the same
+ * curve, whatever draws it: a column shrinking through a CSS transition, a pie
+ * easing its angles frame by frame, a legend entry dimming. Two mechanisms are
+ * unavoidable — a browser cannot interpolate an arc correctly — but the numbers
+ * behind them must come from here, or the chart answers a single click at three
+ * different speeds.
+ */
+/** Everything that moves or leaves in response to a click on the chart. */
+export const MOTION_MS = 320;
+/** Hover feedback is an affordance, not chart motion: it may be quicker. */
+export const HOVER_MS = 140;
+/**
+ * Fast out, gentle in. The CSS curve and the function below are the same easing
+ * written twice — keep them in step.
+ */
+export const MOTION_EASING = 'cubic-bezier(0.33, 1, 0.68, 1)';
+export const easeOutCubic = t => 1 - (1 - t) ** 3;

package/core/animation/useTweenedNumbers.d.ts

@@ -0,0 +1 @@
+export declare function useTweenedNumbers(target: readonly number[], duration?: number): readonly number[];

package/core/animation/useTweenedNumbers.js

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react';
+import { easeOutCubic, MOTION_MS } from './motion';
+/**
+ * Eases a vector of numbers towards its target over time, a frame at a time.
+ *
+ * Shapes that are generated from numbers — the angles and radii of a pie, say —
+ * must be animated through those numbers, never by interpolating the path they
+ * produce: a browser blends a path command by command, which bends an arc out of
+ * shape and flips its large-arc flag halfway through. Tweening the inputs and
+ * regenerating the shape each frame is what D3's `arcTween` and Highcharts'
+ * animator both do, and it is the only way the result stays a real arc.
+ */
+const prefersReducedMotion = () => typeof window !== 'undefined' && typeof window.matchMedia === 'function' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+const same = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+export function useTweenedNumbers(target, duration = MOTION_MS) {
+  const [values, setValues] = useState(target);
+  const current = useRef(target);
+  const key = target.join(',');
+  useEffect(() => {
+    const from = current.current;
+    // A different number of shapes has nothing to tween between, and neither has a
+    // browser that cannot schedule frames or a viewer who asked for less motion.
+    const jump = from.length !== target.length || duration <= 0 || typeof requestAnimationFrame !== 'function' || prefersReducedMotion();
+    if (jump) {
+      current.current = target;
+      setValues(target);
+      return undefined;
+    }
+    if (same(from, target)) {
+      return undefined;
+    }
+    let frame = 0;
+    let started = 0;
+    const step = now => {
+      started = started || now;
+      const progress = Math.min(1, (now - started) / duration);
+      const eased = easeOutCubic(progress);
+      const next = from.map((value, index) => value + (target[index] - value) * eased);
+      current.current = progress < 1 ? next : target;
+      setValues(current.current);
+      if (progress < 1) {
+        frame = requestAnimationFrame(step);
+      }
+    };
+    frame = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(frame);
+    // `key` stands in for the target vector; the values themselves are read above.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, duration]);
+  return values;
+}

package/core/data/points.d.ts

@@ -0,0 +1,14 @@
+import { type SeriesData } from '../types/options';
+export interface NormalizedPoint {
+    x: number | string;
+    band?: string;
+    y: number | null;
+    value: number | null;
+    name: string | undefined;
+    color: string | undefined;
+    meta: unknown;
+    index: number;
+}
+/** What a hit or a tooltip should show for the point's x: its category, else its x. */
+export declare const pointKey: (point: NormalizedPoint) => number | string;
+export declare function normalizePoints(data: SeriesData | undefined, seriesName?: string): NormalizedPoint[];

package/core/data/points.js

@@ -0,0 +1,73 @@
+function toValue(raw, context) {
+  if (raw === null || raw === undefined) {
+    return null;
+  }
+  const value = Number(raw);
+  if (!Number.isFinite(value)) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(`[kit-charts] Non-finite value in ${context}: ${String(raw)} — treated as a gap.`);
+    }
+    return null;
+  }
+  return value;
+}
+const isPointObject = point => typeof point === 'object' && point !== null && !Array.isArray(point);
+/** What a hit or a tooltip should show for the point's x: its category, else its x. */
+export const pointKey = point => point.band ?? point.name ?? point.x;
+export function normalizePoints(data, seriesName = 'series') {
+  if (!(data !== null && data !== void 0 && data.length)) {
+    return [];
+  }
+  return data.map((point, index) => {
+    const context = `${seriesName}[${index}]`;
+    if (point === null || typeof point === 'number') {
+      const y = toValue(point, context);
+      return {
+        x: index,
+        y,
+        value: y,
+        name: undefined,
+        color: undefined,
+        meta: undefined,
+        index
+      };
+    }
+    if (Array.isArray(point)) {
+      const [x, second, third] = point;
+      const y = toValue(second, context);
+      const value = third === undefined ? y : toValue(third, context);
+      return {
+        x: typeof x === 'string' ? x : toValue(x, context) ?? index,
+        y,
+        value,
+        name: typeof x === 'string' ? x : undefined,
+        color: undefined,
+        meta: undefined,
+        index
+      };
+    }
+    if (isPointObject(point)) {
+      const y = toValue(point.y, context);
+      const value = point.value === undefined ? y : toValue(point.value, context);
+      const x = point.x ?? point.name ?? index;
+      return {
+        x: typeof x === 'string' ? x : toValue(x, context) ?? index,
+        y,
+        value,
+        name: point.name,
+        color: point.color,
+        meta: point.meta,
+        index
+      };
+    }
+    return {
+      x: index,
+      y: null,
+      value: null,
+      name: undefined,
+      color: undefined,
+      meta: undefined,
+      index
+    };
+  });
+}