@pushwoosh/kit-charts 0.0.1

package/core/Chart/Chart.styles.d.ts

@@ -0,0 +1,109 @@
+export interface ContainerProps {
+    $width: string;
+    $height: string;
+    $autoHeight: boolean;
+    $background: string | undefined;
+    $fontFamily: string;
+    $fontSize: string;
+}
+export declare const Container: import("styled-components").StyledComponent<"div", any, ContainerProps, never>;
+export declare const ScrollBox: import("styled-components").StyledComponent<"div", any, {
+    $scrolls: boolean;
+}, never>;
+/**
+ * The y axes of a horizontally scrolling chart, drawn in their own layer over
+ * the scroll box so the plot slides under them instead of taking them with it —
+ * a row-label column is useless once it has scrolled off. Highcharts does the
+ * same with a second, fixed SVG.
+ */
+export declare const PinnedAxes: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const Canvas: import("styled-components").StyledComponent<"svg", any, {
+    $clickable?: boolean;
+}, never>;
+/**
+ * One series. Hiding it never drops it from the tree, so the change can play: the
+ * geometry transitions carry every shape to where the renderer put it — collapsed
+ * onto its own baseline, or rescaled by the axis the remaining series left behind —
+ * and the opacity mops up the rest. `d` is animatable in Chromium; the attribute
+ * transitions cover columns, cells and markers everywhere.
+ */
+export declare const SeriesLayer: import("styled-components").StyledComponent<"g", any, {
+    $hidden: boolean;
+    $collapse: boolean;
+    $selfAnimated: boolean;
+    /** Opacity while another series is hovered, from `states.inactive`. */
+    $inactive?: number;
+    /** `series.animation`; the chart clock unless this series asked for its own. */
+    $motionMs: number;
+    $cursor: string;
+}, never>;
+export declare const LegendItemBox: import("styled-components").StyledComponent<"g", any, {
+    $off: boolean;
+    $interactive: boolean;
+    $hoverColor?: string;
+    $hoverWeight?: string;
+}, never>;
+/** The hint badge beside a title: a light square with a blue glyph, as in the CP. */
+export declare const HintIcon: import("styled-components").StyledComponent<"g", any, {}, never>;
+export declare const Centred: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface TooltipBoxProps {
+    $x: number;
+    $y: number;
+    $padding: number;
+    $radius: number;
+    $borderColor: string;
+    $background: string;
+    $color: string;
+    $fontFamily: string;
+    $fontSize: string;
+    $whiteSpace: string;
+    $shadow: string;
+}
+export declare const TooltipBox: import("styled-components").StyledComponent<"div", any, TooltipBoxProps, never>;
+export interface TailProps {
+    $left: number;
+    $size: number;
+    $color: string;
+    $below: boolean;
+}
+/** The callout beak, drawn as a CSS triangle so it inherits the box colour. */
+export declare const Tail: import("styled-components").StyledComponent<"span", any, TailProps, never>;
+export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TooltipSwatch: import("styled-components").StyledComponent<"span", any, {
+    $color: string;
+    $round?: boolean;
+}, never>;
+export declare const TooltipName: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TooltipValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DEFAULTS: {
+    fontFamily: string;
+    fontSize: string;
+    border: string;
+    surface: string;
+    text: string;
+    tooltipSurface: string;
+    tooltipText: string;
+};
+/**
+ * The table layout of the tooltip. A heading row plus one row per series, so a
+ * count and its share line up in columns instead of running together on one line.
+ */
+export declare const TooltipTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export declare const TooltipHeadCell: import("styled-components").StyledComponent<"th", any, {
+    $align: "left" | "right";
+}, never>;
+export declare const TooltipCell: import("styled-components").StyledComponent<"td", any, {
+    $align: "left" | "right";
+    $muted?: boolean;
+}, never>;
+export declare const TooltipSeriesCell: import("styled-components").StyledComponent<"td", any, {}, never>;
+/** Keeps the swatch on the baseline of the series name inside a table cell. */
+export declare const TooltipSeriesInner: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** Separates the header line from the table under it. */
+export declare const TooltipDivider: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;
+/** The rectangle dragged out over the plot before the zoom is applied. */
+export declare const ZoomBand: import("styled-components").StyledComponent<"rect", any, {}, never>;
+export declare const ResetZoom: import("styled-components").StyledComponent<"button", any, {}, never>;

package/core/Chart/Chart.styles.js

@@ -0,0 +1,227 @@
+import styled, { css } from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { HOVER_MS, MOTION_EASING, MOTION_MS } from '../animation/motion';
+import { DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE } from '../layout/measure-text';
+import { DEFAULT_GRID_COLOR, DEFAULT_MUTED_TEXT_COLOR, DEFAULT_SURFACE_COLOR, DEFAULT_TEXT_COLOR, DEFAULT_TOOLTIP_SURFACE_COLOR, DEFAULT_TOOLTIP_TEXT_COLOR } from '../model/palette';
+const MIN_HEIGHT = '160px';
+const TOOLTIP_MAX_WIDTH = '360px';
+const TOOLTIP_Z_INDEX = 2147483000;
+export const Container = styled.div.withConfig({
+  displayName: "Container",
+  componentId: "sc-1pit1b9-0"
+})(["position:relative;width:", ";height:", ";min-width:0;overflow:hidden;min-height:", ";background:", ";font-family:", ";font-size:", ";"], ({
+  $width
+}) => $width, ({
+  $height
+}) => $height, ({
+  $autoHeight
+}) => $autoHeight ? MIN_HEIGHT : 'auto', ({
+  $background
+}) => $background ?? 'transparent', ({
+  $fontFamily
+}) => $fontFamily, ({
+  $fontSize
+}) => $fontSize);
+export const ScrollBox = styled.div.withConfig({
+  displayName: "ScrollBox",
+  componentId: "sc-1pit1b9-1"
+})(["", ""], ({
+  $scrolls
+}) => $scrolls ? css(["overflow-x:auto;overflow-y:hidden;"]) : '');
+/**
+ * The y axes of a horizontally scrolling chart, drawn in their own layer over
+ * the scroll box so the plot slides under them instead of taking them with it —
+ * a row-label column is useless once it has scrolled off. Highcharts does the
+ * same with a second, fixed SVG.
+ */
+export const PinnedAxes = styled.svg.withConfig({
+  displayName: "PinnedAxes",
+  componentId: "sc-1pit1b9-2"
+})(["position:absolute;top:0;left:0;pointer-events:none;"]);
+export const Canvas = styled.svg.withConfig({
+  displayName: "Canvas",
+  componentId: "sc-1pit1b9-3"
+})(["display:block;touch-action:none;cursor:", ";"], ({
+  $clickable
+}) => $clickable ? 'pointer' : 'default');
+/**
+ * One series. Hiding it never drops it from the tree, so the change can play: the
+ * geometry transitions carry every shape to where the renderer put it — collapsed
+ * onto its own baseline, or rescaled by the axis the remaining series left behind —
+ * and the opacity mops up the rest. `d` is animatable in Chromium; the attribute
+ * transitions cover columns, cells and markers everywhere.
+ */
+export const SeriesLayer = styled.g.withConfig({
+  displayName: "SeriesLayer",
+  componentId: "sc-1pit1b9-4"
+})(["opacity:", ";pointer-events:", ";cursor:", ";transition:opacity ", "ms ", ";", " @media (prefers-reduced-motion:reduce){transition:none;path,rect,circle,text{transition:none;}}"], ({
+  $hidden,
+  $inactive
+}) => {
+  if ($hidden) {
+    return 0;
+  }
+  return $inactive ?? 1;
+}, ({
+  $hidden
+}) => $hidden ? 'none' : 'auto', ({
+  $cursor
+}) => $cursor, ({
+  $motionMs
+}) => $motionMs, MOTION_EASING, ({
+  $selfAnimated,
+  $motionMs
+}) => $selfAnimated ? '' : css(["path,rect,circle,text{transition:d ", "ms ", ",x ", "ms ", ",y ", "ms ", ",width ", "ms ", ",height ", "ms ", ",cx ", "ms ", ",cy ", "ms ", ",opacity ", "ms ", ";}"], $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING, $motionMs, MOTION_EASING));
+export const LegendItemBox = styled.g.withConfig({
+  displayName: "LegendItemBox",
+  componentId: "sc-1pit1b9-5"
+})(["cursor:", ";opacity:", ";transition:opacity ", "ms ", ";&:hover{opacity:", ";", "}&:focus{outline:none;}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
+  $interactive
+}) => $interactive ? 'pointer' : 'default', ({
+  $off
+}) => $off ? 0.4 : 1, MOTION_MS, MOTION_EASING, ({
+  $off,
+  $interactive
+}) => {
+  if (!$interactive) {
+    return $off ? 0.4 : 1;
+  }
+  return $off ? 0.6 : 0.75;
+}, ({
+  $hoverColor,
+  $hoverWeight
+}) => $hoverColor || $hoverWeight ? css(["text{", " ", "}"], $hoverColor ? `fill: ${$hoverColor};` : '', $hoverWeight ? `font-weight: ${$hoverWeight};` : '') : '', Color.PRIMARY);
+/** The hint badge beside a title: a light square with a blue glyph, as in the CP. */
+export const HintIcon = styled.g.withConfig({
+  displayName: "HintIcon",
+  componentId: "sc-1pit1b9-6"
+})(["cursor:help;rect{fill:", ";transition:fill ", "ms ", ";}text{fill:", ";font-weight:700;transition:fill ", "ms ", ";}&:hover rect,&:focus-visible rect{fill:", ";}&:hover text,&:focus-visible text{fill:", ";}&:focus{outline:none;}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], Color.BRIGHT_LIGHT, HOVER_MS, MOTION_EASING, Color.PRIMARY, HOVER_MS, MOTION_EASING, Color.PRIMARY, DEFAULT_SURFACE_COLOR, Color.PRIMARY);
+export const Centred = styled.div.withConfig({
+  displayName: "Centred",
+  componentId: "sc-1pit1b9-7"
+})(["display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:", ";color:", ";"], DEFAULT_FONT_SIZE, DEFAULT_MUTED_TEXT_COLOR);
+export const TooltipBox = styled.div.withConfig({
+  displayName: "TooltipBox",
+  componentId: "sc-1pit1b9-8"
+})(["position:fixed;z-index:", ";top:", ";left:", ";max-width:", ";padding:", ";border:1px solid ", ";border-radius:", ";background:", ";box-shadow:", ";font-family:", ";font-size:", ";line-height:1.45;color:", ";white-space:", ";pointer-events:none;"], TOOLTIP_Z_INDEX, ({
+  $y
+}) => `${$y}px`, ({
+  $x
+}) => `${$x}px`, TOOLTIP_MAX_WIDTH, ({
+  $padding
+}) => `${$padding}px`, ({
+  $borderColor
+}) => $borderColor, ({
+  $radius
+}) => `${$radius}px`, ({
+  $background
+}) => $background, ({
+  $shadow
+}) => $shadow, ({
+  $fontFamily
+}) => $fontFamily, ({
+  $fontSize
+}) => $fontSize, ({
+  $color
+}) => $color, ({
+  $whiteSpace
+}) => $whiteSpace);
+/** The callout beak, drawn as a CSS triangle so it inherits the box colour. */
+export const Tail = styled.span.withConfig({
+  displayName: "Tail",
+  componentId: "sc-1pit1b9-9"
+})(["position:absolute;", " left:", ";width:0;height:0;border-right:", " solid transparent;border-left:", " solid transparent;", ""], ({
+  $below,
+  $size
+}) => $below ? `top: -${$size}px;` : `bottom: -${$size}px;`, ({
+  $left,
+  $size
+}) => `${$left - $size}px`, ({
+  $size
+}) => `${$size}px`, ({
+  $size
+}) => `${$size}px`, ({
+  $below,
+  $size,
+  $color
+}) => $below ? `border-bottom: ${$size}px solid ${$color};` : `border-top: ${$size}px solid ${$color};`);
+export const TooltipTitle = styled.div.withConfig({
+  displayName: "TooltipTitle",
+  componentId: "sc-1pit1b9-10"
+})(["margin:0 0 4px;font-weight:600;"]);
+export const TooltipRow = styled.div.withConfig({
+  displayName: "TooltipRow",
+  componentId: "sc-1pit1b9-11"
+})(["display:flex;align-items:center;gap:6px;"]);
+export const TooltipSwatch = styled.span.withConfig({
+  displayName: "TooltipSwatch",
+  componentId: "sc-1pit1b9-12"
+})(["display:inline-block;flex:0 0 auto;width:8px;height:8px;border-radius:", ";background:", ";"], ({
+  $round
+}) => $round ? '50%' : '2px', ({
+  $color
+}) => $color);
+export const TooltipName = styled.span.withConfig({
+  displayName: "TooltipName",
+  componentId: "sc-1pit1b9-13"
+})(["opacity:0.7;"]);
+export const TooltipValue = styled.span.withConfig({
+  displayName: "TooltipValue",
+  componentId: "sc-1pit1b9-14"
+})(["margin-left:auto;font-weight:600;"]);
+export const DEFAULTS = {
+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontSize: DEFAULT_FONT_SIZE,
+  border: DEFAULT_GRID_COLOR,
+  surface: DEFAULT_SURFACE_COLOR,
+  text: DEFAULT_TEXT_COLOR,
+  tooltipSurface: DEFAULT_TOOLTIP_SURFACE_COLOR,
+  tooltipText: DEFAULT_TOOLTIP_TEXT_COLOR
+};
+/**
+ * The table layout of the tooltip. A heading row plus one row per series, so a
+ * count and its share line up in columns instead of running together on one line.
+ */
+export const TooltipTable = styled.table.withConfig({
+  displayName: "TooltipTable",
+  componentId: "sc-1pit1b9-15"
+})(["border-collapse:collapse;width:100%;"]);
+export const TooltipHeadCell = styled.th.withConfig({
+  displayName: "TooltipHeadCell",
+  componentId: "sc-1pit1b9-16"
+})(["padding:0 0 6px;text-align:", ";font-weight:400;white-space:nowrap;opacity:0.6;&:not(:first-child){padding-left:16px;}"], ({
+  $align
+}) => $align);
+export const TooltipCell = styled.td.withConfig({
+  displayName: "TooltipCell",
+  componentId: "sc-1pit1b9-17"
+})(["padding:3px 0 0;text-align:", ";white-space:nowrap;opacity:", ";&:not(:first-child){padding-left:16px;}"], ({
+  $align
+}) => $align, ({
+  $muted
+}) => $muted ? 0.6 : 1);
+export const TooltipSeriesCell = styled.td.withConfig({
+  displayName: "TooltipSeriesCell",
+  componentId: "sc-1pit1b9-18"
+})(["padding:3px 0 0;white-space:nowrap;"]);
+/** Keeps the swatch on the baseline of the series name inside a table cell. */
+export const TooltipSeriesInner = styled.span.withConfig({
+  displayName: "TooltipSeriesInner",
+  componentId: "sc-1pit1b9-19"
+})(["display:inline-flex;align-items:center;gap:6px;"]);
+/** Separates the header line from the table under it. */
+export const TooltipDivider = styled.div.withConfig({
+  displayName: "TooltipDivider",
+  componentId: "sc-1pit1b9-20"
+})(["height:1px;margin:8px 0;background:", ";opacity:0.5;"], ({
+  $color
+}) => $color);
+/** The rectangle dragged out over the plot before the zoom is applied. */
+export const ZoomBand = styled.rect.withConfig({
+  displayName: "ZoomBand",
+  componentId: "sc-1pit1b9-21"
+})(["fill:", ";fill-opacity:0.12;pointer-events:none;"], Color.PRIMARY);
+export const ResetZoom = styled.button.withConfig({
+  displayName: "ResetZoom",
+  componentId: "sc-1pit1b9-22"
+})(["position:absolute;top:8px;right:8px;padding:4px 10px;border:1px solid ", ";border-radius:4px;background:", ";font-family:inherit;font-size:", ";color:", ";cursor:pointer;&:hover{border-color:", ";color:", ";}&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], DEFAULT_GRID_COLOR, DEFAULT_SURFACE_COLOR, DEFAULT_FONT_SIZE, DEFAULT_TEXT_COLOR, Color.PRIMARY, Color.PRIMARY, Color.PRIMARY);

package/core/Chart/ChartErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback: ReactNode;
+}
+interface State {
+    failed: boolean;
+}
+export declare class ChartErrorBoundary extends Component<Props, State> {
+    constructor(props: Props);
+    static getDerivedStateFromError(): State;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/core/Chart/ChartErrorBoundary.js

@@ -0,0 +1,27 @@
+import { Component } from 'react';
+export class ChartErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      failed: false
+    };
+  }
+  static getDerivedStateFromError() {
+    return {
+      failed: true
+    };
+  }
+  componentDidCatch(error, info) {
+    console.error('[kit-charts] Chart failed to render.', error, info.componentStack);
+  }
+  render() {
+    const {
+      failed
+    } = this.state;
+    const {
+      children,
+      fallback
+    } = this.props;
+    return failed ? fallback : children;
+  }
+}

package/core/Chart/Hinted.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, type ReactNode } from 'react';
+export interface HintedProps {
+    text: string;
+    children: ReactNode;
+}
+/**
+ * Anything that explains itself on hover or focus: the `i` beside a title, an
+ * axis label that needs a sentence. The explanation opens in the same callout a
+ * point uses, and Escape closes it.
+ */
+export declare function Hinted({ text, children }: HintedProps): ReactElement;

package/core/Chart/Hinted.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { Tooltip } from './Tooltip';
+import { HINT_PADDING } from '../layout/metrics';
+const HINT_TEXT_FONT_SIZE = '14px';
+/**
+ * Anything that explains itself on hover or focus: the `i` beside a title, an
+ * axis label that needs a sentence. The explanation opens in the same callout a
+ * point uses, and Escape closes it.
+ */
+export function Hinted({
+  text,
+  children
+}) {
+  const ref = useRef(null);
+  const [at, setAt] = useState(null);
+  const open = useCallback(() => {
+    var _ref$current;
+    const box = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect();
+    if (box) {
+      setAt({
+        x: box.left + box.width / 2,
+        y: box.top
+      });
+    }
+  }, []);
+  const close = useCallback(() => setAt(null), []);
+  const onKeyDown = useCallback(event => {
+    if (event.key === 'Escape') {
+      close();
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      open();
+    }
+  }, [close, open]);
+  return _jsxs(_Fragment, {
+    children: [_jsx("g", {
+      ref: ref,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": text,
+      onPointerEnter: open,
+      onPointerLeave: close,
+      onFocus: open,
+      onBlur: close,
+      onKeyDown: onKeyDown,
+      children: children
+    }), at ? _jsx(Tooltip, {
+      at: at,
+      pointer: at,
+      options: {
+        padding: HINT_PADDING,
+        style: {
+          whiteSpace: 'normal',
+          fontSize: HINT_TEXT_FONT_SIZE
+        }
+      },
+      children: text
+    }) : null]
+  });
+}

package/core/Chart/Legend.d.ts

@@ -0,0 +1,15 @@
+import { type ReactElement } from 'react';
+import { type Rect, type Size, type Spacing } from '../types/geometry';
+import { type LegendOptions } from '../types/options';
+import { type LegendItem } from '../types/renderer';
+interface LegendProps {
+    items: readonly LegendItem[];
+    options: LegendOptions | undefined;
+    plot: Rect;
+    size: Size;
+    spacing: Spacing;
+    renderLabel: (item: LegendItem) => React.ReactNode;
+    onToggle?: (item: LegendItem) => void;
+}
+export declare function Legend({ items, options, plot, size, spacing, renderLabel, onToggle, }: LegendProps): ReactElement | null;
+export {};

package/core/Chart/Legend.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LegendItemBox } from './Chart.styles';
+import { layoutLegend } from '../layout/legend-layout';
+import { measureText, DEFAULT_FONT_SIZE } from '../layout/measure-text';
+import { TEXT_BASELINE_SHIFT } from '../layout/metrics';
+import { DEFAULT_TEXT_COLOR } from '../model/palette';
+/** Clickable area around an item, so the pointer target is not the glyph alone. */
+const HIT_PADDING = 4;
+export function Legend({
+  items,
+  options,
+  plot,
+  size,
+  spacing,
+  renderLabel,
+  onToggle
+}) {
+  if (!items.length || (options === null || options === void 0 ? void 0 : options.enabled) === false) {
+    return null;
+  }
+  const style = options === null || options === void 0 ? void 0 : options.itemStyle;
+  const symbolSize = (options === null || options === void 0 ? void 0 : options.symbolHeight) ?? 8;
+  const symbolRadius = (options === null || options === void 0 ? void 0 : options.symbolRadius) ?? 2;
+  const symbolPadding = (options === null || options === void 0 ? void 0 : options.symbolPadding) ?? 6;
+  const {
+    positions,
+    metrics
+  } = layoutLegend(items, options, plot, size, spacing);
+  const interactive = Boolean(onToggle);
+  const activate = item => () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(item);
+  const onKeyDown = item => event => {
+    if (event.key !== 'Enter' && event.key !== ' ') {
+      return;
+    }
+    event.preventDefault();
+    onToggle === null || onToggle === void 0 || onToggle(item);
+  };
+  return _jsx("g", {
+    children: items.map((item, index) => {
+      var _options$itemHoverSty, _options$itemHoverSty2;
+      const {
+        x,
+        y
+      } = positions[index];
+      const labelX = x + symbolSize + symbolPadding;
+      const width = symbolSize + symbolPadding + measureText(item.label, style);
+      return _jsxs(LegendItemBox, {
+        "$off": !item.visible,
+        "$interactive": interactive,
+        "$hoverColor": options === null || options === void 0 || (_options$itemHoverSty = options.itemHoverStyle) === null || _options$itemHoverSty === void 0 ? void 0 : _options$itemHoverSty.color,
+        "$hoverWeight": options === null || options === void 0 || (_options$itemHoverSty2 = options.itemHoverStyle) === null || _options$itemHoverSty2 === void 0 ? void 0 : _options$itemHoverSty2.fontWeight,
+        role: interactive ? 'button' : undefined,
+        tabIndex: interactive ? 0 : undefined,
+        "aria-pressed": interactive ? item.visible : undefined,
+        "aria-label": interactive ? item.label : undefined,
+        onClick: interactive ? activate(item) : undefined,
+        onKeyDown: interactive ? onKeyDown(item) : undefined,
+        children: [interactive ? _jsx("rect", {
+          x: x - HIT_PADDING,
+          y: y - metrics.rowHeight / 2 - HIT_PADDING,
+          width: width + HIT_PADDING * 2,
+          height: metrics.rowHeight + HIT_PADDING * 2,
+          fill: "transparent"
+        }) : null, item.symbol === 'line' ? _jsx("line", {
+          x1: x,
+          x2: x + symbolSize,
+          y1: y,
+          y2: y,
+          stroke: item.color,
+          strokeWidth: 2,
+          strokeLinecap: "round"
+        }) : _jsx("rect", {
+          x: x,
+          y: y - symbolSize / 2,
+          width: (options === null || options === void 0 ? void 0 : options.symbolWidth) ?? symbolSize,
+          height: symbolSize,
+          rx: item.symbol === 'circle' ? symbolSize / 2 : symbolRadius,
+          fill: item.color
+        }), _jsx("text", {
+          x: labelX,
+          y: y + TEXT_BASELINE_SHIFT,
+          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,
+          textDecoration: item.visible ? undefined : 'line-through',
+          children: renderLabel(item)
+        })]
+      }, `legend-${item.seriesIndex}-${item.label}`);
+    })
+  });
+}

package/core/Chart/PlotDecorations.d.ts

@@ -0,0 +1,17 @@
+import { type ReactElement } from 'react';
+import { type AxisModel } from '../model/build-model';
+import { type Rect } from '../types/geometry';
+export type PlotLayer = 'under' | 'over';
+interface DecorationsProps {
+    plot: Rect;
+    axis: AxisModel;
+    along: 'x' | 'y';
+    layer: PlotLayer;
+}
+/**
+ * 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 declare function PlotDecorations({ plot, axis, along, layer, }: DecorationsProps): ReactElement | null;
+export {};