@pushwoosh/kit-charts 0.0.1

package/core/Chart/Chart.js

@@ -0,0 +1,616 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Grid, XAxis, YAxis } from './Axes';
+import { Canvas, Centred, Container, PinnedAxes, ResetZoom, ScrollBox, SeriesLayer, TooltipCell, TooltipDivider, TooltipHeadCell, TooltipName, TooltipRow, TooltipSeriesCell, TooltipSeriesInner, TooltipSwatch, TooltipTable, TooltipTitle, TooltipValue, ZoomBand } from './Chart.styles';
+import { ChartErrorBoundary } from './ChartErrorBoundary';
+import { Legend } from './Legend';
+import { PlotDecorations } from './PlotDecorations';
+import { StackLabels } from './StackLabels';
+import { Titles } from './Titles';
+import { Tooltip } from './Tooltip';
+import { useSize } from './useSize';
+import { MOTION_MS } from '../animation/motion';
+import { formatTime } from '../format/time';
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from '../layout/measure-text';
+import { buildChartModel, hiddenKey, isContinuous } from '../model/build-model';
+import { DEFAULT_GRID_COLOR, DEFAULT_SURFACE_COLOR, DEFAULT_TEXT_COLOR } from '../model/palette';
+import { resolveRenderers } from '../registry/registry';
+/** Series switched off through their options; the legend takes over from there. */
+const hiddenByOptions = options => {
+  const off = new Set();
+  (options.series ?? []).forEach((series, index) => {
+    if (series.visible === false) {
+      off.add(hiddenKey(index));
+    }
+  });
+  return off;
+};
+const seriesIdentity = options => (options.series ?? []).map(series => `${series.type}:${series.name ?? ''}`).join('|');
+const toCssSize = (value, fallback) => {
+  if (value === null || value === undefined) {
+    return fallback;
+  }
+  return typeof value === 'number' ? `${value}px` : value;
+};
+function defaultTooltip(ctx, formatX, formatValue) {
+  return _jsxs("div", {
+    children: [_jsx(TooltipTitle, {
+      children: formatX(ctx.x)
+    }), ctx.points.map(point => _jsxs(TooltipRow, {
+      children: [_jsx(TooltipSwatch, {
+        "$color": point.color
+      }), _jsx(TooltipName, {
+        children: point.seriesName
+      }), _jsx(TooltipValue, {
+        children: formatValue(point.value ?? point.y)
+      })]
+    }, `${point.seriesIndex}-${point.index}`))]
+  });
+}
+function tableTooltip(ctx, table, formatX) {
+  const heading = table.header ? table.header(ctx) : formatX(ctx.x);
+  const columns = table.columns.map(column => ({
+    column,
+    title: typeof column.title === 'function' ? column.title(ctx) : column.title
+  })).filter(({
+    title
+  }) => title !== null);
+  const headed = table.seriesTitle !== undefined || columns.some(({
+    title
+  }) => title !== undefined);
+  return _jsxs("div", {
+    children: [heading === null || heading === undefined || heading === '' ? null : _jsxs(_Fragment, {
+      children: [_jsx(TooltipTitle, {
+        children: heading
+      }), _jsx(TooltipDivider, {
+        "$color": DEFAULT_GRID_COLOR
+      })]
+    }), _jsxs(TooltipTable, {
+      children: [headed ? _jsx("thead", {
+        children: _jsxs("tr", {
+          children: [_jsx(TooltipHeadCell, {
+            "$align": "left",
+            children: table.seriesTitle ?? ''
+          }), columns.map(({
+            column,
+            title
+          }, index) => _jsx(TooltipHeadCell
+          // eslint-disable-next-line react/no-array-index-key
+          , {
+            "$align": column.align ?? 'right',
+            children: title ?? ''
+          }, `head-${index}`))]
+        })
+      }) : null, _jsx("tbody", {
+        children: ctx.points.map(point => _jsxs("tr", {
+          children: [_jsx(TooltipSeriesCell, {
+            children: _jsxs(TooltipSeriesInner, {
+              children: [_jsx(TooltipSwatch, {
+                "$color": point.color,
+                "$round": true
+              }), point.seriesName]
+            })
+          }), columns.map(({
+            column
+          }, index) => _jsx(TooltipCell
+          // eslint-disable-next-line react/no-array-index-key
+          , {
+            "$align": column.align ?? 'right',
+            "$muted": index > 0,
+            children: column.cell(point)
+          }, `cell-${index}`))]
+        }, `${point.seriesIndex}-${point.index}`))
+      })]
+    })]
+  });
+}
+/** Shorter than this and the drag was a click, not a selection. */
+const ZOOM_MIN_DRAG = 6;
+function ChartBody({
+  options,
+  renderers,
+  isLoading = false,
+  empty,
+  loading,
+  className,
+  containerProps,
+  toggleSeries = true,
+  onSeriesToggle,
+  onPointClick
+}) {
+  var _options$chart, _options$chart2, _options$tooltip4, _options$tooltip7, _options$tooltip8, _options$title2, _options$tooltip1, _options$tooltip10, _options$chart3, _options$chart4, _options$chart5, _options$chart6, _options$chart7, _options$chart8, _options$chart9, _options$title3, _options$chart0, _options$chart1, _options$chart10;
+  const [container, size] = useSize();
+  const [hover, setHover] = useState(null);
+  const [zoom, setZoom] = useState(null);
+  const [drag, setDrag] = useState(null);
+  const [hidden, setHidden] = useState(() => hiddenByOptions(options));
+  const identity = seriesIdentity(options);
+  // A different set of series is a different chart: start from its own options
+  // again rather than carrying the previous chart's switched-off indices over.
+  useEffect(() => {
+    setHidden(hiddenByOptions(options));
+    setZoom(null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [identity]);
+  const toggle = useCallback(item => {
+    // A tooltip captured before the toggle would keep quoting what just went away.
+    setHover(null);
+    const key = hiddenKey(item.seriesIndex, item.pointIndex);
+    setHidden(current => {
+      const next = new Set(current);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      onSeriesToggle === null || onSeriesToggle === void 0 || onSeriesToggle(item.seriesIndex, !next.has(key), item.pointIndex);
+      return next;
+    });
+  }, [onSeriesToggle]);
+  const registry = useMemo(() => resolveRenderers(renderers), [renderers]);
+  // A scrollable plot area draws at its minimum size and scrolls inside the box.
+  const scrollable = (_options$chart = options.chart) === null || _options$chart === void 0 ? void 0 : _options$chart.scrollablePlotArea;
+  const canvas = useMemo(() => ({
+    width: Math.max(size.width, (scrollable === null || scrollable === void 0 ? void 0 : scrollable.minWidth) ?? 0),
+    height: Math.max(size.height, (scrollable === null || scrollable === void 0 ? void 0 : scrollable.minHeight) ?? 0)
+  }), [size, scrollable === null || scrollable === void 0 ? void 0 : scrollable.minWidth, scrollable === null || scrollable === void 0 ? void 0 : scrollable.minHeight]);
+  // A zoom is an override on the first x axis, not a second source of truth: the
+  // model is still built from the options, so everything downstream is unaware.
+  const zoomed = useMemo(() => {
+    if (!zoom) {
+      return options;
+    }
+    const axes = options.xAxis;
+    const [first, ...rest] = Array.isArray(axes) ? axes : [axes ?? {}];
+    return {
+      ...options,
+      xAxis: [{
+        ...first,
+        min: zoom[0],
+        max: zoom[1]
+      }, ...rest]
+    };
+  }, [options, zoom]);
+  const built = useMemo(() => canvas.width && canvas.height ? buildChartModel({
+    options: zoomed,
+    size: canvas,
+    renderers: registry,
+    hidden
+  }) : null, [zoomed, canvas, registry, hidden]);
+  const anyShown = (built === null || built === void 0 ? void 0 : built.series.some(series => !series.hidden)) ?? false;
+  const lastShown = useRef(null);
+  useEffect(() => {
+    if (built && anyShown) {
+      lastShown.current = built;
+    }
+  }, [built, anyShown]);
+  // Switching off the last series must not reshape the axes under it: the plot
+  // holds the geometry of the last state that had something on show, so the series
+  // fades out where it stood instead of jumping to a rescaled axis first.
+  const model = useMemo(() => {
+    if (anyShown || !built) {
+      return built;
+    }
+    const frozen = lastShown.current;
+    if (!frozen) {
+      return built;
+    }
+    return {
+      ...frozen,
+      series: frozen.series.map(series => ({
+        ...series,
+        hidden: true
+      })),
+      legend: built.legend,
+      titles: built.titles
+    };
+  }, [built, anyShown]);
+  const contextFor = useCallback(series => {
+    if (!model) {
+      return null;
+    }
+    const yModel = model.yAxes[Math.min(series.options.yAxis ?? 0, model.yAxes.length - 1)];
+    if (!yModel || yModel.scale.kind === 'color') {
+      return null;
+    }
+    const hit = hover === null || hover === void 0 ? void 0 : hover.hits.find(candidate => candidate.seriesIndex === series.index);
+    return {
+      series: series.options,
+      seriesIndex: series.index,
+      points: series.points,
+      plot: model.plot,
+      scales: {
+        x: model.xAxis.scale,
+        y: yModel.scale,
+        color: model.colorScale
+      },
+      color: series.color,
+      colors: model.colors,
+      stacked: model.stacks.get(series.index),
+      slot: model.slots.get(series.index),
+      hovered: hit ? {
+        seriesIndex: series.index,
+        pointIndex: hit.pointIndex
+      } : undefined,
+      hidden: series.hidden,
+      hiddenPoints: series.hiddenPoints,
+      animate: true,
+      numberFormat: model.numberFormat
+    };
+  }, [model, hover]);
+  const hitsAt = useCallback(event => {
+    if (!model) {
+      return null;
+    }
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const local = {
+      x: event.clientX - bounds.left,
+      y: event.clientY - bounds.top
+    };
+    const hits = model.series.flatMap(series => {
+      if (series.hidden) {
+        return [];
+      }
+      const ctx = contextFor(series);
+      return ctx ? series.renderer.hitTest(ctx, local) ?? [] : [];
+    });
+    return {
+      hits,
+      bounds
+    };
+  }, [model, contextFor]);
+  const handlePointerMove = useCallback(event => {
+    var _options$tooltip, _options$tooltip2;
+    if (!model || ((_options$tooltip = options.tooltip) === null || _options$tooltip === void 0 ? void 0 : _options$tooltip.enabled) === false) {
+      return;
+    }
+    // While a zoom is being dragged out, a tooltip is in the way of the thing
+    // the reader is actually doing.
+    if (drag) {
+      setHover(null);
+      return;
+    }
+    const found = hitsAt(event);
+    if (!found) {
+      return;
+    }
+    const {
+      hits,
+      bounds
+    } = found;
+    if (!hits.length) {
+      setHover(null);
+      return;
+    }
+    const shared = ((_options$tooltip2 = options.tooltip) === null || _options$tooltip2 === void 0 ? void 0 : _options$tooltip2.shared) ?? false;
+    const nearest = hits.reduce((best, hit) => hit.distance < best.distance ? hit : best);
+    const selected = shared ? hits.filter(hit => String(hit.x) === String(nearest.x)) : [nearest];
+    const highest = selected.reduce((best, hit) => hit.anchor.y < best.anchor.y ? hit : best, selected[0]);
+    setHover({
+      hits: selected,
+      pointer: {
+        x: event.clientX,
+        y: event.clientY
+      },
+      anchor: {
+        x: bounds.left + highest.anchor.x,
+        y: bounds.top + highest.anchor.y
+      }
+    });
+  }, [model, hitsAt, options.tooltip, drag]);
+  const handlePointerLeave = useCallback(() => setHover(null), []);
+  const zooms = ((_options$chart2 = options.chart) === null || _options$chart2 === void 0 ? void 0 : _options$chart2.zoomType) === 'x' && model !== null && isContinuous(model.xAxis.scale);
+  const localX = event => event.clientX - event.currentTarget.getBoundingClientRect().left;
+  const startDrag = useCallback(event => {
+    if (!zooms || !model) {
+      return;
+    }
+    const x = localX(event);
+    if (x < model.plot.x || x > model.plot.x + model.plot.width) {
+      return;
+    }
+    setDrag({
+      from: x,
+      to: x
+    });
+  }, [zooms, model]);
+  const extendDrag = useCallback(event => {
+    if (!drag || !model) {
+      return;
+    }
+    const x = Math.min(Math.max(localX(event), model.plot.x), model.plot.x + model.plot.width);
+    setDrag({
+      from: drag.from,
+      to: x
+    });
+  }, [drag, model]);
+  const endDrag = useCallback(() => {
+    if (!drag || !model || !isContinuous(model.xAxis.scale)) {
+      setDrag(null);
+      return;
+    }
+    const [low, high] = drag.from <= drag.to ? [drag.from, drag.to] : [drag.to, drag.from];
+    setDrag(null);
+    // A click is a drag of nothing; zooming to a point would empty the chart.
+    if (high - low < ZOOM_MIN_DRAG) {
+      return;
+    }
+    const scale = model.xAxis.scale;
+    setZoom([scale.invert(low), scale.invert(high)]);
+  }, [drag, model]);
+  // Released outside the chart, the drag still ends: bound to the window rather
+  // than the canvas, or letting go past the edge leaves the band stuck on screen.
+  useEffect(() => {
+    if (!drag) {
+      return undefined;
+    }
+    window.addEventListener('pointerup', endDrag);
+    return () => window.removeEventListener('pointerup', endDrag);
+  }, [drag, endDrag]);
+  const resetZoom = useCallback(() => {
+    setZoom(null);
+    setHover(null);
+  }, []);
+  const handleClick = useCallback(event => {
+    var _hitsAt, _series$points$neares;
+    if (!onPointClick || !model) {
+      return;
+    }
+    const hits = ((_hitsAt = hitsAt(event)) === null || _hitsAt === void 0 ? void 0 : _hitsAt.hits) ?? [];
+    if (!hits.length) {
+      return;
+    }
+    const nearest = hits.reduce((best, hit) => hit.distance < best.distance ? hit : best);
+    const series = model.series.find(item => item.index === nearest.seriesIndex);
+    onPointClick({
+      seriesIndex: nearest.seriesIndex,
+      seriesName: (series === null || series === void 0 ? void 0 : series.options.name) ?? `Series ${nearest.seriesIndex + 1}`,
+      pointIndex: nearest.pointIndex,
+      x: nearest.x,
+      y: nearest.y,
+      value: nearest.value,
+      color: (series === null || series === void 0 ? void 0 : series.color) ?? DEFAULT_TEXT_COLOR,
+      meta: series === null || series === void 0 || (_series$points$neares = series.points[nearest.pointIndex]) === null || _series$points$neares === void 0 ? void 0 : _series$points$neares.meta
+    }, event);
+  }, [onPointClick, model, hitsAt]);
+  const formatX = useCallback(value => {
+    var _options$tooltip3;
+    if (typeof value !== 'number') {
+      return String(value);
+    }
+    const pattern = ((_options$tooltip3 = options.tooltip) === null || _options$tooltip3 === void 0 ? void 0 : _options$tooltip3.dateFormat) ?? (model && isContinuous(model.xAxis.scale) && model.xAxis.scale.kind === 'time' ? '%b %d, %Y' : undefined);
+    return pattern ? formatTime(pattern, value) : String(value);
+  }, [(_options$tooltip4 = options.tooltip) === null || _options$tooltip4 === void 0 ? void 0 : _options$tooltip4.dateFormat, model]);
+  const formatValue = useCallback(value => {
+    var _options$tooltip5, _options$tooltip6;
+    if (value === null) {
+      return '—';
+    }
+    const text = model ? model.numberFormat(value) : String(value);
+    return `${((_options$tooltip5 = options.tooltip) === null || _options$tooltip5 === void 0 ? void 0 : _options$tooltip5.valuePrefix) ?? ''}${text}${((_options$tooltip6 = options.tooltip) === null || _options$tooltip6 === void 0 ? void 0 : _options$tooltip6.valueSuffix) ?? ''}`;
+  }, [(_options$tooltip7 = options.tooltip) === null || _options$tooltip7 === void 0 ? void 0 : _options$tooltip7.valuePrefix, (_options$tooltip8 = options.tooltip) === null || _options$tooltip8 === void 0 ? void 0 : _options$tooltip8.valueSuffix, model]);
+  const tooltipContent = useMemo(() => {
+    var _points$, _options$title, _options$tooltip9, _options$tooltip0;
+    if (!hover || !model) {
+      return null;
+    }
+    const shown = hover.hits.filter(hit => {
+      const series = model.series.find(item => item.index === hit.seriesIndex);
+      return series ? !series.hidden : false;
+    });
+    if (!shown.length) {
+      return null;
+    }
+    const points = shown.map(hit => {
+      const series = model.series.find(item => item.index === hit.seriesIndex);
+      const neighbours = (series === null || series === void 0 ? void 0 : series.points) ?? [];
+      const previous = neighbours[hit.pointIndex - 1];
+      const next = neighbours[hit.pointIndex + 1];
+      return {
+        seriesIndex: hit.seriesIndex,
+        seriesName: (series === null || series === void 0 ? void 0 : series.options.name) ?? `Series ${hit.seriesIndex + 1}`,
+        color: (series === null || series === void 0 ? void 0 : series.color) ?? DEFAULT_TEXT_COLOR,
+        x: hit.x,
+        y: hit.y,
+        value: hit.value,
+        index: hit.pointIndex,
+        meta: series === null || series === void 0 ? void 0 : series.options.meta,
+        prev: previous ? {
+          x: previous.x,
+          y: previous.y,
+          index: previous.index
+        } : undefined,
+        next: next ? {
+          x: next.x,
+          y: next.y,
+          index: next.index
+        } : undefined
+      };
+    });
+    const ctx = {
+      x: ((_points$ = points[0]) === null || _points$ === void 0 ? void 0 : _points$.x) ?? 0,
+      points,
+      chart: {
+        title: ((_options$title = options.title) === null || _options$title === void 0 ? void 0 : _options$title.text) ?? undefined,
+        meta: options.meta
+      }
+    };
+    const formatter = (_options$tooltip9 = options.tooltip) === null || _options$tooltip9 === void 0 ? void 0 : _options$tooltip9.formatter;
+    if (formatter) {
+      return formatter(ctx);
+    }
+    const table = (_options$tooltip0 = options.tooltip) === null || _options$tooltip0 === void 0 ? void 0 : _options$tooltip0.table;
+    return table ? tableTooltip(ctx, table, formatX) : defaultTooltip(ctx, formatX, formatValue);
+  }, [hover, model, (_options$title2 = options.title) === null || _options$title2 === void 0 ? void 0 : _options$title2.text, options.meta, (_options$tooltip1 = options.tooltip) === null || _options$tooltip1 === void 0 ? void 0 : _options$tooltip1.formatter, (_options$tooltip10 = options.tooltip) === null || _options$tooltip10 === void 0 ? void 0 : _options$tooltip10.table, formatX, formatValue]);
+  const hasData = (model === null || model === void 0 ? void 0 : model.series.some(series => series.points.some(point => point.y !== null))) ?? false;
+  const plotBorderWidth = ((_options$chart3 = options.chart) === null || _options$chart3 === void 0 ? void 0 : _options$chart3.plotBorderWidth) ?? 0;
+  const scrolls = canvas.width > size.width || canvas.height > size.height;
+  // Only horizontal scrolling pins anything, and only a left-hand y axis: that is
+  // the one whose labels the plot would otherwise slide out from under. A right-hand
+  // axis and a vertically scrolling chart both stay in the scrolling canvas.
+  const pinsAxes = canvas.width > size.width && !((model === null || model === void 0 ? void 0 : model.axisless) ?? true);
+  const isPinned = axis => pinsAxes && axis.options.opposite !== true;
+  // Highcharts dims the series a hover is not on. Ours only does it when asked:
+  // switching it on by default would restyle every chart already drawn.
+  const inactiveOpacity = series => {
+    var _series$options$state;
+    const opacity = (_series$options$state = series.options.states) === null || _series$options$state === void 0 || (_series$options$state = _series$options$state.inactive) === null || _series$options$state === void 0 ? void 0 : _series$options$state.opacity;
+    if (opacity === undefined || !(hover !== null && hover !== void 0 && hover.hits.length)) {
+      return undefined;
+    }
+    return hover.hits.some(hit => hit.seriesIndex === series.index) ? undefined : opacity;
+  };
+  // `animation: false` is a zero-length transition rather than a separate code
+  // path, so nothing downstream has to know a series opted out.
+  const motionOf = series => {
+    const animation = series.options.animation;
+    if (animation === false) {
+      return 0;
+    }
+    return (animation === null || animation === void 0 ? void 0 : animation.duration) ?? MOTION_MS;
+  };
+  const decorations = layer => {
+    if (!model || model.axisless) {
+      return null;
+    }
+    return _jsxs(_Fragment, {
+      children: [_jsx(PlotDecorations, {
+        plot: model.plot,
+        axis: model.xAxis,
+        along: "x",
+        layer: layer
+      }), model.yAxes.map(axis => _jsx(PlotDecorations, {
+        plot: model.plot,
+        axis: axis,
+        along: "y",
+        layer: layer
+      }, `${axis.id}-${layer}`))]
+    });
+  };
+  return _jsxs(Container, {
+    ...containerProps,
+    ref: container,
+    className: className,
+    "$width": toCssSize((_options$chart4 = options.chart) === null || _options$chart4 === void 0 ? void 0 : _options$chart4.width, '100%'),
+    "$height": toCssSize((_options$chart5 = options.chart) === null || _options$chart5 === void 0 ? void 0 : _options$chart5.height, '100%'),
+    "$autoHeight": ((_options$chart6 = options.chart) === null || _options$chart6 === void 0 ? void 0 : _options$chart6.height) === undefined,
+    "$background": (_options$chart7 = options.chart) === null || _options$chart7 === void 0 ? void 0 : _options$chart7.backgroundColor,
+    "$fontFamily": ((_options$chart8 = options.chart) === null || _options$chart8 === void 0 || (_options$chart8 = _options$chart8.style) === null || _options$chart8 === void 0 ? void 0 : _options$chart8.fontFamily) ?? DEFAULT_FONT_FAMILY,
+    "$fontSize": ((_options$chart9 = options.chart) === null || _options$chart9 === void 0 || (_options$chart9 = _options$chart9.style) === null || _options$chart9 === void 0 ? void 0 : _options$chart9.fontSize) ?? DEFAULT_FONT_SIZE,
+    children: [isLoading ? _jsx(Centred, {
+      children: loading ?? 'Loading…'
+    }) : null, !isLoading && model && !hasData ? _jsx(Centred, {
+      children: empty ?? 'No data'
+    }) : null, !isLoading && model && hasData ? _jsx(ScrollBox, {
+      "$scrolls": scrolls,
+      children: _jsxs(Canvas, {
+        width: canvas.width,
+        height: canvas.height,
+        role: "img",
+        "aria-label": ((_options$title3 = options.title) === null || _options$title3 === void 0 ? void 0 : _options$title3.text) ?? 'Chart',
+        onPointerMove: event => {
+          extendDrag(event);
+          handlePointerMove(event);
+        },
+        onPointerLeave: handlePointerLeave,
+        onPointerDown: zooms ? startDrag : undefined,
+        onClick: onPointClick ? handleClick : undefined,
+        "$clickable": Boolean(onPointClick),
+        children: [_jsx(Titles, {
+          entries: model.titles
+        }), model.axisless ? null : _jsx(Grid, {
+          plot: model.plot,
+          yAxis: model.yAxes[0]
+        }), model.axisless ? null : model.yAxes.filter(axis => !isPinned(axis)).map(axis => _jsx(YAxis, {
+          plot: model.plot,
+          axis: axis
+        }, axis.id)), model.axisless ? null : _jsx(XAxis, {
+          plot: model.plot,
+          axis: model.xAxis
+        }), decorations('under'), plotBorderWidth > 0 ? _jsx("rect", {
+          x: model.plot.x,
+          y: model.plot.y,
+          width: model.plot.width,
+          height: model.plot.height,
+          fill: "none",
+          stroke: ((_options$chart0 = options.chart) === null || _options$chart0 === void 0 ? void 0 : _options$chart0.plotBorderColor) ?? DEFAULT_GRID_COLOR,
+          strokeWidth: plotBorderWidth
+        }) : null, model.series.map(series => {
+          const ctx = contextFor(series);
+          return ctx ? _jsx(SeriesLayer, {
+            "data-series-index": series.index,
+            "$hidden": series.hidden,
+            "$collapse": series.renderer.exit === 'collapse',
+            "$selfAnimated": series.renderer.animatesGeometry === true,
+            "$inactive": inactiveOpacity(series),
+            "$motionMs": motionOf(series),
+            "$cursor": series.options.cursor ?? 'default',
+            "aria-hidden": series.hidden,
+            children: series.renderer.render(ctx)
+          }, `series-${series.index}`) : null;
+        }), decorations('over'), drag ? _jsx(ZoomBand, {
+          x: Math.min(drag.from, drag.to),
+          y: model.plot.y,
+          width: Math.abs(drag.to - drag.from),
+          height: model.plot.height
+        }) : null, _jsx(StackLabels, {
+          model: model
+        }), _jsx(Legend, {
+          items: model.legend,
+          options: options.legend,
+          plot: model.plot,
+          size: canvas,
+          spacing: model.spacing,
+          onToggle: toggleSeries ? toggle : undefined,
+          renderLabel: item => {
+            var _options$legend, _model$series$find;
+            const formatter = (_options$legend = options.legend) === null || _options$legend === void 0 ? void 0 : _options$legend.labelFormatter;
+            if (!formatter) {
+              return item.label;
+            }
+            return formatter({
+              seriesIndex: item.seriesIndex,
+              name: item.label,
+              color: item.color,
+              visible: item.visible,
+              meta: (_model$series$find = model.series.find(s => s.index === item.seriesIndex)) === null || _model$series$find === void 0 ? void 0 : _model$series$find.options.meta
+            });
+          }
+        })]
+      })
+    }) : null, !isLoading && model && hasData && pinsAxes ? _jsxs(PinnedAxes, {
+      width: model.plot.x + 1,
+      height: canvas.height,
+      "aria-hidden": true,
+      children: [_jsx("rect", {
+        x: 0,
+        y: 0,
+        width: model.plot.x,
+        height: canvas.height,
+        fill: ((_options$chart1 = options.chart) === null || _options$chart1 === void 0 ? void 0 : _options$chart1.backgroundColor) ?? DEFAULT_SURFACE_COLOR
+      }), model.yAxes.filter(isPinned).map(axis => _jsx(YAxis, {
+        plot: model.plot,
+        axis: axis
+      }, axis.id))]
+    }) : null, zoom ? _jsx(ResetZoom, {
+      type: "button",
+      onClick: resetZoom,
+      children: ((_options$chart10 = options.chart) === null || _options$chart10 === void 0 ? void 0 : _options$chart10.resetZoomText) ?? 'Reset zoom'
+    }) : null, hover && tooltipContent ? _jsx(Tooltip, {
+      at: hover.anchor,
+      pointer: hover.pointer,
+      options: options.tooltip,
+      children: tooltipContent
+    }) : null]
+  });
+}
+export function Chart(props) {
+  return _jsx(ChartErrorBoundary, {
+    fallback: _jsx(Centred, {
+      children: "Chart failed to render"
+    }),
+    children: _jsx(ChartBody, {
+      ...props
+    })
+  });
+}