minerva-design 1.2.0 → 1.3.0

package/dist/charts/engine/types.d.cts

@@ -8,30 +8,51 @@ export type ChartRendererPreference = "auto" | ChartRendererKind;
 /** Scale of an axis */
 export type ChartAxisType = "linear" | "time" | "category";
 /** How a series is drawn */
-export type ChartSeriesType = "line" | "area" | "bar" | "scatter";
+export type ChartSeriesType = "line" | "area" | "bar" | "scatter" | "candlestick" | "heatmap";
+/** Shape of a line (and of the edge of an area) between its points */
+export type ChartCurve = "linear" | "smooth" | "step";
 /** X value of a datum: a number, a `Date` (time axis) or a category name */
 export type ChartXValue = number | Date | string;
 /** One datum written as an object */
 export interface ChartPointDatum {
     /** X value; the datum index when omitted */
     x?: ChartXValue;
-    /** Y value; `null` leaves a gap */
-    y: number | null;
+    /**
+     * Y value; `null` leaves a gap. Candlesticks: the close. Heatmaps: the
+     * row (a number, or a category name of a `category` y axis)
+     */
+    y: number | string | null;
     /** Diameter of the dot in CSS pixels (scatter) */
     size?: number;
-    /** Color of the dot (scatter); any CSS color */
+    /** Color of the dot or bar (scatter, bar); any CSS color */
     color?: string;
     /** Text drawn next to the dot (scatter with `showLabels`) and shown in the tooltip */
     label?: string;
+    /** Candlestick: opening value */
+    open?: number;
+    /** Candlestick: highest value */
+    high?: number;
+    /** Candlestick: lowest value */
+    low?: number;
+    /** Heatmap: value of the cell, mapped to `colorScale` */
+    value?: number | null;
 }
 /** Column-oriented data: the fastest form for large data sets (typed arrays are used as is) */
 export interface ChartColumnData {
     /** X values; the index when omitted */
     x?: ArrayLike<number> | readonly ChartXValue[];
-    /** Y values (`NaN` / `null` leave a gap) */
-    y: ArrayLike<number> | readonly (number | null)[];
+    /** Y values (`NaN` / `null` leave a gap); candlesticks: the closes; heatmaps: the rows */
+    y: ArrayLike<number> | readonly (number | string | null)[];
     /** Per-point diameters in CSS pixels (scatter) */
     size?: ArrayLike<number>;
+    /** Candlestick: opening values */
+    open?: ArrayLike<number>;
+    /** Candlestick: highest values */
+    high?: ArrayLike<number>;
+    /** Candlestick: lowest values */
+    low?: ArrayLike<number>;
+    /** Heatmap: values of the cells */
+    value?: ArrayLike<number> | readonly (number | null)[];
 }
 /**
  * Data of a series: y values only (`[3, 5, 2]`, typed arrays included),
@@ -65,17 +86,45 @@ export interface ChartSeries {
     pointSize?: number;
     /** Fill opacity (area, scatter), 0-1 */
     opacity?: number;
-    /** Bars with the same stack id are stacked */
+    /**
+     * Series with the same stack id are stacked (bars, areas and lines; see
+     * `stackMode` for 100% stacks)
+     */
     stack?: string;
     /** Hides the series (it stays in the legend) */
     hidden?: boolean;
-    /** Draws the `label` of each point next to it (scatter) */
+    /**
+     * Draws the `label` of each point next to it (scatter) or the value above
+     * each bar (bar)
+     */
     showLabels?: boolean;
+    /**
+     * Shape of the line between the points: straight, smooth (monotone, never
+     * overshoots the data) or steps (line / area)
+     * @default "linear"
+     */
+    curve?: ChartCurve;
+    /** Candlestick: color of the rising candles (close >= open); `--success-color` by default */
+    upColor?: string;
+    /** Candlestick: color of the falling candles; `--danger-color` by default */
+    downColor?: string;
+    /**
+     * Heatmap: colors from the lowest to the highest value (two or more)
+     * @default a ramp from the background to the series color
+     */
+    colorScale?: readonly string[];
+    /** Heatmap: values mapped to the ends of `colorScale`; the data range by default */
+    valueRange?: readonly [number, number];
+    /** Bar / heatmap: corner radius in CSS pixels (bars: 3, heatmap cells: 2) */
+    radius?: number;
+    /** Formats the values of this series in the tooltip (the y axis format by default) */
+    format?: (value: number) => string;
 }
 /** Options of an axis */
 export interface ChartAxisOptions {
     /**
-     * Scale of the axis: `linear` numbers, `time` timestamps / dates, `category` names
+     * Scale of the axis: `linear` numbers, `time` timestamps / dates, `category`
+     * names (x axis, and y axis of heatmaps)
      * @default "linear"
      */
     type?: ChartAxisType;
@@ -255,6 +304,12 @@ export interface ChartOptions {
     palette?: readonly string[];
     /** Accessible name of the chart */
     ariaLabel?: string;
+    /**
+     * `percent` scales every stack to 100% at each x (the axis shows percents,
+     * the tooltip the actual values)
+     * @default "normal"
+     */
+    stackMode?: "normal" | "percent";
 }
 /** A point under the pointer */
 export interface ChartHoverItem {
@@ -268,6 +323,12 @@ export interface ChartHoverItem {
     /** Resolved color of the point */
     color: string;
     label?: string;
+    /** Candlestick: open / high / low (`y` is the close) */
+    open?: number;
+    high?: number;
+    low?: number;
+    /** Heatmap: value of the cell */
+    value?: number;
 }
 /** Hover / click payload */
 export interface ChartHoverEvent {

package/dist/charts/engine/types.d.ts

@@ -8,30 +8,51 @@ export type ChartRendererPreference = "auto" | ChartRendererKind;
 /** Scale of an axis */
 export type ChartAxisType = "linear" | "time" | "category";
 /** How a series is drawn */
-export type ChartSeriesType = "line" | "area" | "bar" | "scatter";
+export type ChartSeriesType = "line" | "area" | "bar" | "scatter" | "candlestick" | "heatmap";
+/** Shape of a line (and of the edge of an area) between its points */
+export type ChartCurve = "linear" | "smooth" | "step";
 /** X value of a datum: a number, a `Date` (time axis) or a category name */
 export type ChartXValue = number | Date | string;
 /** One datum written as an object */
 export interface ChartPointDatum {
     /** X value; the datum index when omitted */
     x?: ChartXValue;
-    /** Y value; `null` leaves a gap */
-    y: number | null;
+    /**
+     * Y value; `null` leaves a gap. Candlesticks: the close. Heatmaps: the
+     * row (a number, or a category name of a `category` y axis)
+     */
+    y: number | string | null;
     /** Diameter of the dot in CSS pixels (scatter) */
     size?: number;
-    /** Color of the dot (scatter); any CSS color */
+    /** Color of the dot or bar (scatter, bar); any CSS color */
     color?: string;
     /** Text drawn next to the dot (scatter with `showLabels`) and shown in the tooltip */
     label?: string;
+    /** Candlestick: opening value */
+    open?: number;
+    /** Candlestick: highest value */
+    high?: number;
+    /** Candlestick: lowest value */
+    low?: number;
+    /** Heatmap: value of the cell, mapped to `colorScale` */
+    value?: number | null;
 }
 /** Column-oriented data: the fastest form for large data sets (typed arrays are used as is) */
 export interface ChartColumnData {
     /** X values; the index when omitted */
     x?: ArrayLike<number> | readonly ChartXValue[];
-    /** Y values (`NaN` / `null` leave a gap) */
-    y: ArrayLike<number> | readonly (number | null)[];
+    /** Y values (`NaN` / `null` leave a gap); candlesticks: the closes; heatmaps: the rows */
+    y: ArrayLike<number> | readonly (number | string | null)[];
     /** Per-point diameters in CSS pixels (scatter) */
     size?: ArrayLike<number>;
+    /** Candlestick: opening values */
+    open?: ArrayLike<number>;
+    /** Candlestick: highest values */
+    high?: ArrayLike<number>;
+    /** Candlestick: lowest values */
+    low?: ArrayLike<number>;
+    /** Heatmap: values of the cells */
+    value?: ArrayLike<number> | readonly (number | null)[];
 }
 /**
  * Data of a series: y values only (`[3, 5, 2]`, typed arrays included),
@@ -65,17 +86,45 @@ export interface ChartSeries {
     pointSize?: number;
     /** Fill opacity (area, scatter), 0-1 */
     opacity?: number;
-    /** Bars with the same stack id are stacked */
+    /**
+     * Series with the same stack id are stacked (bars, areas and lines; see
+     * `stackMode` for 100% stacks)
+     */
     stack?: string;
     /** Hides the series (it stays in the legend) */
     hidden?: boolean;
-    /** Draws the `label` of each point next to it (scatter) */
+    /**
+     * Draws the `label` of each point next to it (scatter) or the value above
+     * each bar (bar)
+     */
     showLabels?: boolean;
+    /**
+     * Shape of the line between the points: straight, smooth (monotone, never
+     * overshoots the data) or steps (line / area)
+     * @default "linear"
+     */
+    curve?: ChartCurve;
+    /** Candlestick: color of the rising candles (close >= open); `--success-color` by default */
+    upColor?: string;
+    /** Candlestick: color of the falling candles; `--danger-color` by default */
+    downColor?: string;
+    /**
+     * Heatmap: colors from the lowest to the highest value (two or more)
+     * @default a ramp from the background to the series color
+     */
+    colorScale?: readonly string[];
+    /** Heatmap: values mapped to the ends of `colorScale`; the data range by default */
+    valueRange?: readonly [number, number];
+    /** Bar / heatmap: corner radius in CSS pixels (bars: 3, heatmap cells: 2) */
+    radius?: number;
+    /** Formats the values of this series in the tooltip (the y axis format by default) */
+    format?: (value: number) => string;
 }
 /** Options of an axis */
 export interface ChartAxisOptions {
     /**
-     * Scale of the axis: `linear` numbers, `time` timestamps / dates, `category` names
+     * Scale of the axis: `linear` numbers, `time` timestamps / dates, `category`
+     * names (x axis, and y axis of heatmaps)
      * @default "linear"
      */
     type?: ChartAxisType;
@@ -255,6 +304,12 @@ export interface ChartOptions {
     palette?: readonly string[];
     /** Accessible name of the chart */
     ariaLabel?: string;
+    /**
+     * `percent` scales every stack to 100% at each x (the axis shows percents,
+     * the tooltip the actual values)
+     * @default "normal"
+     */
+    stackMode?: "normal" | "percent";
 }
 /** A point under the pointer */
 export interface ChartHoverItem {
@@ -268,6 +323,12 @@ export interface ChartHoverItem {
     /** Resolved color of the point */
     color: string;
     label?: string;
+    /** Candlestick: open / high / low (`y` is the close) */
+    open?: number;
+    high?: number;
+    low?: number;
+    /** Heatmap: value of the cell */
+    value?: number;
 }
 /** Hover / click payload */
 export interface ChartHoverEvent {

package/dist/charts/index.cjs

@@ -1 +1 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./engine/format.cjs"),t=require("./engine/chart.cjs"),n=require("./react/Chart.cjs"),r=require("./engine/presets.cjs"),i=require("./react/charts.cjs"),a=require("./engine/controller.cjs"),o=require("./engine/canvas.cjs");require("./core.cjs"),exports.BarChart=i.BarChart,exports.Chart=n.Chart,exports.LineChart=i.LineChart,exports.QuadrantChart=i.QuadrantChart,exports.ScatterChart=i.ScatterChart,exports.createCanvasChart=o.createCanvasChart,exports.createChart=t.createChart,exports.createChartController=a.createChartController,exports.formatCompact=e.formatCompact,exports.quadrantCenter=r.quadrantCenter,exports.quadrantChartOptions=r.quadrantChartOptions,exports.quadrantOf=r.quadrantOf,exports.scenePrimitives=a.scenePrimitives;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./engine/format.cjs"),t=require("./engine/chart.cjs"),n=require("./react/Chart.cjs"),r=require("./engine/presets.cjs"),i=require("./react/charts.cjs"),a=require("./engine/shapes/chart.cjs"),o=require("./react/shapes.cjs"),s=require("./engine/shapes/canvas.cjs"),c=require("./engine/controller.cjs"),l=require("./engine/canvas.cjs");require("./core.cjs"),exports.AreaChart=i.AreaChart,exports.BarChart=i.BarChart,exports.CandlestickChart=i.CandlestickChart,exports.Chart=n.Chart,exports.DonutChart=o.DonutChart,exports.FunnelChart=o.FunnelChart,exports.GaugeChart=o.GaugeChart,exports.HeatmapChart=i.HeatmapChart,exports.LineChart=i.LineChart,exports.PieChart=o.PieChart,exports.QuadrantChart=i.QuadrantChart,exports.RadarChart=o.RadarChart,exports.ScatterChart=i.ScatterChart,exports.Sparkline=i.Sparkline,exports.TreemapChart=o.TreemapChart,exports.createCanvasChart=l.createCanvasChart,exports.createCanvasShapeChart=s.createCanvasShapeChart,exports.createChart=t.createChart,exports.createChartController=c.createChartController,exports.createShapeChart=a.createShapeChart,exports.formatCompact=e.formatCompact,exports.heatmapChartOptions=r.heatmapChartOptions,exports.quadrantCenter=r.quadrantCenter,exports.quadrantChartOptions=r.quadrantChartOptions,exports.quadrantOf=r.quadrantOf,exports.scenePrimitives=c.scenePrimitives,exports.sparklineOptions=r.sparklineOptions;

package/dist/charts/index.d.cts

@@ -1,4 +1,6 @@
 export { Chart } from './react/Chart.cjs';
-export { BarChart, LineChart, QuadrantChart, ScatterChart, } from './react/charts.cjs';
-export type { BarChartProps, ChartCommonProps, ChartHandle, ChartProps, LineChartProps, QuadrantChartProps, QuadrantDropTarget, ScatterChartProps, } from './react/types.cjs';
+export { AreaChart, BarChart, CandlestickChart, HeatmapChart, LineChart, QuadrantChart, ScatterChart, Sparkline, } from './react/charts.cjs';
+export { DonutChart, FunnelChart, GaugeChart, PieChart, RadarChart, TreemapChart, } from './react/shapes.cjs';
+export type { AreaChartProps, BarChartProps, CandlestickChartProps, ChartCommonProps, ChartHandle, ChartProps, HeatmapChartProps, LineChartProps, QuadrantChartProps, QuadrantDropTarget, ScatterChartProps, SparklineProps, } from './react/types.cjs';
+export type { DonutChartProps, FunnelChartProps, GaugeChartProps, PieChartProps, RadarChartProps, ShapeChartCommonProps, ShapeChartHandle, TreemapChartProps, } from './react/shapes.cjs';
 export * from './core.cjs';

package/dist/charts/index.d.ts

@@ -1,4 +1,6 @@
 export { Chart } from './react/Chart.js';
-export { BarChart, LineChart, QuadrantChart, ScatterChart, } from './react/charts.js';
-export type { BarChartProps, ChartCommonProps, ChartHandle, ChartProps, LineChartProps, QuadrantChartProps, QuadrantDropTarget, ScatterChartProps, } from './react/types.js';
+export { AreaChart, BarChart, CandlestickChart, HeatmapChart, LineChart, QuadrantChart, ScatterChart, Sparkline, } from './react/charts.js';
+export { DonutChart, FunnelChart, GaugeChart, PieChart, RadarChart, TreemapChart, } from './react/shapes.js';
+export type { AreaChartProps, BarChartProps, CandlestickChartProps, ChartCommonProps, ChartHandle, ChartProps, HeatmapChartProps, LineChartProps, QuadrantChartProps, QuadrantDropTarget, ScatterChartProps, SparklineProps, } from './react/types.js';
+export type { DonutChartProps, FunnelChartProps, GaugeChartProps, PieChartProps, RadarChartProps, ShapeChartCommonProps, ShapeChartHandle, TreemapChartProps, } from './react/shapes.js';
 export * from './core.js';

package/dist/charts/index.js

@@ -2,9 +2,12 @@
 import { formatCompact as e } from "./engine/format.js";
 import { createChart as t } from "./engine/chart.js";
 import { Chart as n } from "./react/Chart.js";
-import { quadrantCenter as r, quadrantChartOptions as i, quadrantOf as a } from "./engine/presets.js";
-import { BarChart as o, LineChart as s, QuadrantChart as c, ScatterChart as l } from "./react/charts.js";
-import { createChartController as u, scenePrimitives as d } from "./engine/controller.js";
-import { createCanvasChart as f } from "./engine/canvas.js";
+import { heatmapChartOptions as r, quadrantCenter as i, quadrantChartOptions as a, quadrantOf as o, sparklineOptions as s } from "./engine/presets.js";
+import { AreaChart as c, BarChart as l, CandlestickChart as u, HeatmapChart as d, LineChart as f, QuadrantChart as p, ScatterChart as m, Sparkline as h } from "./react/charts.js";
+import { createShapeChart as g } from "./engine/shapes/chart.js";
+import { DonutChart as _, FunnelChart as v, GaugeChart as y, PieChart as b, RadarChart as x, TreemapChart as S } from "./react/shapes.js";
+import { createCanvasShapeChart as C } from "./engine/shapes/canvas.js";
+import { createChartController as w, scenePrimitives as T } from "./engine/controller.js";
+import { createCanvasChart as E } from "./engine/canvas.js";
 import "./core.js";
-export { o as BarChart, n as Chart, s as LineChart, c as QuadrantChart, l as ScatterChart, f as createCanvasChart, t as createChart, u as createChartController, e as formatCompact, r as quadrantCenter, i as quadrantChartOptions, a as quadrantOf, d as scenePrimitives };
+export { c as AreaChart, l as BarChart, u as CandlestickChart, n as Chart, _ as DonutChart, v as FunnelChart, y as GaugeChart, d as HeatmapChart, f as LineChart, b as PieChart, p as QuadrantChart, x as RadarChart, m as ScatterChart, h as Sparkline, S as TreemapChart, E as createCanvasChart, C as createCanvasShapeChart, t as createChart, w as createChartController, g as createShapeChart, e as formatCompact, r as heatmapChartOptions, i as quadrantCenter, a as quadrantChartOptions, o as quadrantOf, T as scenePrimitives, s as sparklineOptions };

package/dist/charts/react/Chart.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../engine/chart.cjs");let t=require("react"),n=require("react-dom"),r=require("react/jsx-runtime");var i=(e,t)=>e===void 0?t:typeof e==`number`?`${e}px`:e,a=e=>({series:e.series,xAxis:e.xAxis,yAxis:e.yAxis,renderer:e.renderer,legend:e.legend,tooltip:e.tooltip,crosshair:e.crosshair,annotations:e.annotations,interaction:e.interaction,padding:e.padding,palette:e.palette,ariaLabel:e.ariaLabel});function o({options:a,height:o,width:s,className:c,style:l,handleRef:u,renderTooltip:d,overlay:f,...p}){let m=(0,t.useRef)(null),h=(0,t.useRef)(null),g=(0,t.useRef)(p),_=(0,t.useRef)(d),[v,y]=(0,t.useState)(null),[b,x]=(0,t.useState)(null),S=(0,t.useMemo)(()=>typeof document>`u`?null:document.createElement(`div`),[]),C=(0,t.useMemo)(()=>{if(!d||!S||a.tooltip===!1)return a;let e=typeof a.tooltip==`object`?a.tooltip:{};return{...a,tooltip:{...e,render:e=>_.current?((0,n.flushSync)(()=>y(e)),S):null}}},[a,d,S]),w=(0,t.useRef)(C);return(0,t.useEffect)(()=>{g.current=p,_.current=d}),(0,t.useEffect)(()=>{let t=m.current;if(!t)return;let n=e.createChart(t,w.current);h.current=n;let r=[n.on(`hover`,e=>g.current.onHover?.(e)),n.on(`click`,e=>g.current.onPointClick?.(e)),n.on(`plotClick`,e=>g.current.onPlotClick?.(e)),n.on(`zoom`,e=>g.current.onZoom?.(e)),n.on(`renderer`,e=>g.current.onRendererChange?.(e)),n.on(`drag`,e=>g.current.onDrag?.(e)),n.on(`drop`,e=>g.current.onDrop?.(e)),n.on(`layout`,e=>x(e))];return()=>{r.forEach(e=>e()),n.destroy(),h.current=null}},[]),(0,t.useEffect)(()=>{w.current!==C&&(w.current=C,h.current?.setOptions(C))},[C]),(0,t.useImperativeHandle)(u,()=>({resetZoom:()=>h.current?.resetZoom(),getView:()=>h.current?.getView()??null,setView:e=>h.current?.setView(e),getRenderer:()=>h.current?.getRenderer()??null,getInstance:()=>h.current}),[]),(0,r.jsxs)(`div`,{className:c,style:{position:`relative`,width:i(s,`100%`),height:i(o,`320px`),...l},children:[(0,r.jsx)(`div`,{ref:m,style:{position:`absolute`,inset:0}}),f&&b&&(0,r.jsx)(`div`,{className:`minerva-chart-overlay`,style:{position:`absolute`,left:b.x,top:b.y,width:b.width,height:b.height,pointerEvents:`none`},children:f(b)}),S&&v&&d&&(0,n.createPortal)(d(v),S)]})}function s(e){let{height:t,width:n,className:i,style:s,ref:c,onHover:l,onPointClick:u,onPlotClick:d,onZoom:f,onRendererChange:p,renderTooltip:m}=e;return(0,r.jsx)(o,{options:a(e),height:t,width:n,className:i,style:s,handleRef:c,onHover:l,onPointClick:u,onPlotClick:d,onZoom:f,onRendererChange:p,renderTooltip:m})}exports.Chart=s,exports.ChartBase=o,exports.engineOptions=a;
+"use client";const e=require("../engine/chart.cjs");let t=require("react"),n=require("react-dom"),r=require("react/jsx-runtime");var i=(e,t)=>e===void 0?t:typeof e==`number`?`${e}px`:e,a=e=>({series:e.series,xAxis:e.xAxis,yAxis:e.yAxis,renderer:e.renderer,legend:e.legend,tooltip:e.tooltip,crosshair:e.crosshair,annotations:e.annotations,interaction:e.interaction,padding:e.padding,palette:e.palette,ariaLabel:e.ariaLabel,stackMode:e.stackMode}),o=e=>{if(typeof e!=`object`||!e)return!1;let t=Object.getPrototypeOf(e);return t===Object.prototype||t===null},s=(e,t)=>{let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>e[n]===t[n]&&Object.prototype.hasOwnProperty.call(t,n))},c=(e,t)=>e===t?!0:Array.isArray(e)&&Array.isArray(t)?e.length===t.length&&e.every((e,n)=>e===t[n]):o(e)&&o(t)&&s(e,t),l=(e,t)=>{if(e===t)return!0;let n=Object.keys(e);return n.length===Object.keys(t).length&&n.every(n=>{if(!Object.prototype.hasOwnProperty.call(t,n))return!1;if(n!==`series`)return c(e[n],t[n]);let r=e.series,i=t.series;return r===i||r.length===i.length&&r.every((e,t)=>e===i[t]||s(e,i[t]))})},u=(e,t)=>!!e&&e.x===t.x&&e.xLabel===t.xLabel&&e.items.length===t.items.length&&e.items.every((e,n)=>s(e,t.items[n]));function d({options:a,height:o,width:s,className:c,style:d,handleRef:f,renderTooltip:p,overlay:m,...h}){let g=(0,t.useRef)(null),_=(0,t.useRef)(null),v=(0,t.useRef)(h),y=(0,t.useRef)(p),b=(0,t.useRef)(null),[x,S]=(0,t.useState)(null),[C,w]=(0,t.useState)(null),T=(0,t.useMemo)(()=>typeof document>`u`?null:document.createElement(`div`),[]),[E,D]=(0,t.useState)(a);E!==a&&!l(E,a)&&D(a);let O=!!p,k=(0,t.useMemo)(()=>{if(!O||!T||E.tooltip===!1)return E;let e=typeof E.tooltip==`object`?E.tooltip:{};return{...E,tooltip:{...e,render:e=>y.current?(u(b.current,e)||(b.current=e,(0,n.flushSync)(()=>S(e))),T):null}}},[E,O,T]),A=(0,t.useRef)(k);return(0,t.useEffect)(()=>{v.current=h,y.current=p}),(0,t.useEffect)(()=>{let t=g.current;if(!t)return;let n=e.createChart(t,A.current);_.current=n;let r=[n.on(`hover`,e=>v.current.onHover?.(e)),n.on(`click`,e=>v.current.onPointClick?.(e)),n.on(`plotClick`,e=>v.current.onPlotClick?.(e)),n.on(`zoom`,e=>v.current.onZoom?.(e)),n.on(`renderer`,e=>v.current.onRendererChange?.(e)),n.on(`drag`,e=>v.current.onDrag?.(e)),n.on(`drop`,e=>v.current.onDrop?.(e)),n.on(`layout`,e=>w(e))];return()=>{r.forEach(e=>e()),n.destroy(),_.current=null}},[]),(0,t.useEffect)(()=>{A.current!==k&&(A.current=k,_.current?.setOptions(k))},[k]),(0,t.useImperativeHandle)(f,()=>({resetZoom:()=>_.current?.resetZoom(),getView:()=>_.current?.getView()??null,setView:e=>_.current?.setView(e),getRenderer:()=>_.current?.getRenderer()??null,getInstance:()=>_.current}),[]),(0,r.jsxs)(`div`,{className:c,style:{position:`relative`,width:i(s,`100%`),height:i(o,`320px`),...d},children:[(0,r.jsx)(`div`,{ref:g,style:{position:`absolute`,inset:0}}),m&&C&&(0,r.jsx)(`div`,{className:`minerva-chart-overlay`,style:{position:`absolute`,left:C.x,top:C.y,width:C.width,height:C.height,pointerEvents:`none`},children:m(C)}),T&&x&&p&&(0,n.createPortal)(p(x),T)]})}function f(e){let{height:t,width:n,className:i,style:o,ref:s,onHover:c,onPointClick:l,onPlotClick:u,onZoom:f,onRendererChange:p,renderTooltip:m}=e;return(0,r.jsx)(d,{options:a(e),height:t,width:n,className:i,style:o,handleRef:s,onHover:c,onPointClick:l,onPlotClick:u,onZoom:f,onRendererChange:p,renderTooltip:m})}exports.Chart=f,exports.ChartBase=d,exports.engineOptions=a,exports.sameOptions=l;
 //# sourceMappingURL=Chart.cjs.map

package/dist/charts/react/Chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.cjs","names":["useRef","useState","useMemo","createChart","createPortal","require_chart","react","react_dom","react_jsx_runtime","size","value","fallback","engineOptions","props","ChartBase","handlers","containerRef","chartRef","handlersRef","tooltipRef","renderTooltip","tipEvent","setTipEvent","plot","setPlot","tipHost","resolved","options","base","event","optionsRef","container","chart","offs","v","r","rect","off","handleRef","view","width","height","style","overlay","Chart","ref"],"sources":["../../../../charts/src/react/Chart.tsx"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { createPortal, flushSync } from \"react-dom\";\nimport { createChart } from \"../engine/chart\";\nimport type {\n  ChartDragEvent,\n  ChartHoverEvent,\n  ChartInstance,\n  ChartOptions,\n  ChartPlotClickEvent,\n  ChartRect,\n  ChartRendererKind,\n  ChartView,\n} from \"../engine/types\";\nimport type { ChartCommonProps, ChartProps } from \"./types\";\n\ninterface Handlers {\n  onHover?: (event: ChartHoverEvent | null) => void;\n  onPointClick?: (event: ChartHoverEvent) => void;\n  onPlotClick?: (event: ChartPlotClickEvent) => void;\n  onZoom?: (view: ChartView) => void;\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n  onDrag?: (event: ChartDragEvent) => void;\n  onDrop?: (event: ChartDragEvent) => void;\n}\n\nconst size = (value: number | string | undefined, fallback: string) =>\n  value === undefined\n    ? fallback\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\n/** Engine options of the common props */\nexport const engineOptions = (\n  props: Pick<\n    ChartCommonProps,\n    | \"xAxis\"\n    | \"yAxis\"\n    | \"renderer\"\n    | \"legend\"\n    | \"tooltip\"\n    | \"crosshair\"\n    | \"annotations\"\n    | \"interaction\"\n    | \"padding\"\n    | \"palette\"\n    | \"ariaLabel\"\n  > &\n    Pick<ChartOptions, \"series\">,\n): ChartOptions => ({\n  series: props.series,\n  xAxis: props.xAxis,\n  yAxis: props.yAxis,\n  renderer: props.renderer,\n  legend: props.legend,\n  tooltip: props.tooltip,\n  crosshair: props.crosshair,\n  annotations: props.annotations,\n  interaction: props.interaction,\n  padding: props.padding,\n  palette: props.palette,\n  ariaLabel: props.ariaLabel,\n});\n\ninterface ChartBaseProps extends Handlers {\n  options: ChartOptions;\n  height?: number | string;\n  width?: number | string;\n  className?: string;\n  style?: CSSProperties;\n  handleRef?: ChartCommonProps[\"ref\"];\n  /** React content of the tooltip (replaces the engine's content) */\n  renderTooltip?: (event: ChartHoverEvent) => ReactNode;\n  /** React content placed over the chart, given the plot area */\n  overlay?: (plot: ChartRect) => ReactNode;\n}\n\n/** Mounts the engine in a sized <div> and forwards option / handler changes */\nexport function ChartBase({\n  options,\n  height,\n  width,\n  className,\n  style,\n  handleRef,\n  renderTooltip,\n  overlay,\n  ...handlers\n}: ChartBaseProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const chartRef = useRef<ChartInstance | null>(null);\n  const handlersRef = useRef<Handlers>(handlers);\n  const tooltipRef = useRef(renderTooltip);\n  const [tipEvent, setTipEvent] = useState<ChartHoverEvent | null>(null);\n  const [plot, setPlot] = useState<ChartRect | null>(null);\n  const tipHost = useMemo(\n    () =>\n      typeof document === \"undefined\" ? null : document.createElement(\"div\"),\n    [],\n  );\n\n  const resolved = useMemo((): ChartOptions => {\n    if (!renderTooltip || !tipHost || options.tooltip === false) return options;\n    const base = typeof options.tooltip === \"object\" ? options.tooltip : {};\n    return {\n      ...options,\n      tooltip: {\n        ...base,\n        render: (event) => {\n          if (!tooltipRef.current) return null;\n          // render synchronously so the engine measures the final size\n          flushSync(() => setTipEvent(event));\n          return tipHost;\n        },\n      },\n    };\n  }, [options, renderTooltip, tipHost]);\n  const optionsRef = useRef(resolved);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n    tooltipRef.current = renderTooltip;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const chart = createChart(container, optionsRef.current);\n    chartRef.current = chart;\n    const offs = [\n      chart.on(\"hover\", (e) => handlersRef.current.onHover?.(e)),\n      chart.on(\"click\", (e) => handlersRef.current.onPointClick?.(e)),\n      chart.on(\"plotClick\", (e) => handlersRef.current.onPlotClick?.(e)),\n      chart.on(\"zoom\", (v) => handlersRef.current.onZoom?.(v)),\n      chart.on(\"renderer\", (r) => handlersRef.current.onRendererChange?.(r)),\n      chart.on(\"drag\", (e) => handlersRef.current.onDrag?.(e)),\n      chart.on(\"drop\", (e) => handlersRef.current.onDrop?.(e)),\n      chart.on(\"layout\", (rect) => setPlot(rect)),\n    ];\n    return () => {\n      offs.forEach((off) => off());\n      chart.destroy();\n      chartRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (optionsRef.current === resolved) return;\n    optionsRef.current = resolved;\n    chartRef.current?.setOptions(resolved);\n  }, [resolved]);\n\n  useImperativeHandle(\n    handleRef,\n    () => ({\n      resetZoom: () => chartRef.current?.resetZoom(),\n      getView: () => chartRef.current?.getView() ?? null,\n      setView: (view) => chartRef.current?.setView(view),\n      getRenderer: () => chartRef.current?.getRenderer() ?? null,\n      getInstance: () => chartRef.current,\n    }),\n    [],\n  );\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        width: size(width, \"100%\"),\n        height: size(height, \"320px\"),\n        ...style,\n      }}\n    >\n      <div ref={containerRef} style={{ position: \"absolute\", inset: 0 }} />\n      {overlay && plot && (\n        <div\n          className=\"minerva-chart-overlay\"\n          style={{\n            position: \"absolute\",\n            left: plot.x,\n            top: plot.y,\n            width: plot.width,\n            height: plot.height,\n            pointerEvents: \"none\",\n          }}\n        >\n          {overlay(plot)}\n        </div>\n      )}\n      {tipHost &&\n        tipEvent &&\n        renderTooltip &&\n        createPortal(renderTooltip(tipEvent), tipHost)}\n    </div>\n  );\n}\n\n/**\n * GPU chart (WebGPU, then WebGL2, then Canvas2D) mixing line, area, bar and\n * scatter series; zoomable, keyboard accessible and themed by the Minerva\n * CSS variables.\n */\nexport function Chart(props: ChartProps) {\n  const {\n    height,\n    width,\n    className,\n    style,\n    ref,\n    onHover,\n    onPointClick,\n    onPlotClick,\n    onZoom,\n    onRendererChange,\n    renderTooltip,\n  } = props;\n  return (\n    <ChartBase\n      options={engineOptions(props)}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      handleRef={ref}\n      onHover={onHover}\n      onPointClick={onPointClick}\n      onPlotClick={onPlotClick}\n      onZoom={onZoom}\n      onRendererChange={onRendererChange}\n      renderTooltip={renderTooltip}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Chart.cjs","names":["useRef","useState","useMemo","createChart","createPortal","require_chart","react","react_dom","react_jsx_runtime","size","value","fallback","engineOptions","props","isPlainObject","proto","shallowEqual","keys","a","b","key","sameValue","v","i","sameOptions","sa","sb","s","sameTooltipEvent","item","ChartBase","handlers","containerRef","chartRef","handlersRef","tooltipRef","renderTooltip","tipEventRef","tipEvent","setTipEvent","plot","setPlot","tipHost","stable","setStable","options","hasTooltip","resolved","base","event","optionsRef","container","chart","offs","r","rect","off","handleRef","view","width","height","style","overlay","Chart","ref"],"sources":["../../../../charts/src/react/Chart.tsx"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\nimport { createPortal, flushSync } from \"react-dom\";\nimport { createChart } from \"../engine/chart\";\nimport type {\n  ChartDragEvent,\n  ChartHoverEvent,\n  ChartInstance,\n  ChartOptions,\n  ChartPlotClickEvent,\n  ChartRect,\n  ChartRendererKind,\n  ChartView,\n} from \"../engine/types\";\nimport type { ChartCommonProps, ChartProps } from \"./types\";\n\ninterface Handlers {\n  onHover?: (event: ChartHoverEvent | null) => void;\n  onPointClick?: (event: ChartHoverEvent) => void;\n  onPlotClick?: (event: ChartPlotClickEvent) => void;\n  onZoom?: (view: ChartView) => void;\n  onRendererChange?: (renderer: ChartRendererKind) => void;\n  onDrag?: (event: ChartDragEvent) => void;\n  onDrop?: (event: ChartDragEvent) => void;\n}\n\nconst size = (value: number | string | undefined, fallback: string) =>\n  value === undefined\n    ? fallback\n    : typeof value === \"number\"\n      ? `${value}px`\n      : value;\n\n/** Engine options of the common props */\nexport const engineOptions = (\n  props: Pick<\n    ChartCommonProps,\n    | \"xAxis\"\n    | \"yAxis\"\n    | \"renderer\"\n    | \"legend\"\n    | \"tooltip\"\n    | \"crosshair\"\n    | \"annotations\"\n    | \"interaction\"\n    | \"padding\"\n    | \"palette\"\n    | \"ariaLabel\"\n  > &\n    Pick<ChartOptions, \"series\" | \"stackMode\">,\n): ChartOptions => ({\n  series: props.series,\n  xAxis: props.xAxis,\n  yAxis: props.yAxis,\n  renderer: props.renderer,\n  legend: props.legend,\n  tooltip: props.tooltip,\n  crosshair: props.crosshair,\n  annotations: props.annotations,\n  interaction: props.interaction,\n  padding: props.padding,\n  palette: props.palette,\n  ariaLabel: props.ariaLabel,\n  stackMode: props.stackMode,\n});\n\ninterface ChartBaseProps extends Handlers {\n  options: ChartOptions;\n  height?: number | string;\n  width?: number | string;\n  className?: string;\n  style?: CSSProperties;\n  handleRef?: ChartCommonProps[\"ref\"];\n  /** React content of the tooltip (replaces the engine's content) */\n  renderTooltip?: (event: ChartHoverEvent) => ReactNode;\n  /** React content placed over the chart, given the plot area */\n  overlay?: (plot: ChartRect) => ReactNode;\n}\n\nconst isPlainObject = (value: unknown): value is Record<string, unknown> => {\n  if (typeof value !== \"object\" || value === null) return false;\n  const proto = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n};\n\n/** Same keys with identical values */\nconst shallowEqual = (\n  a: Record<string, unknown>,\n  b: Record<string, unknown>,\n): boolean => {\n  const keys = Object.keys(a);\n  if (keys.length !== Object.keys(b).length) return false;\n  return keys.every(\n    (key) => a[key] === b[key] && Object.prototype.hasOwnProperty.call(b, key),\n  );\n};\n\n/**\n * Identical values, or plain arrays / objects whose items are identical\n * (`[\"#f00\"]`, `{ title: \"x\" }` written inline)\n */\nconst sameValue = (a: unknown, b: unknown): boolean => {\n  if (a === b) return true;\n  if (Array.isArray(a) && Array.isArray(b))\n    return a.length === b.length && a.every((v, i) => v === b[i]);\n  return isPlainObject(a) && isPlainObject(b) && shallowEqual(a, b);\n};\n\n/**\n * Whether `b` describes the same chart as `a`: top-level options compared by\n * identity (or one level deep for inline arrays / objects), series compared\n * one by one, each series shallowly (inline `series={[{ name, data }]}`\n * with a stable `data` stays equal). Data is never compared by content.\n */\nexport const sameOptions = (a: ChartOptions, b: ChartOptions): boolean => {\n  if (a === b) return true;\n  const keys = Object.keys(a) as (keyof ChartOptions)[];\n  if (keys.length !== Object.keys(b).length) return false;\n  return keys.every((key) => {\n    if (!Object.prototype.hasOwnProperty.call(b, key)) return false;\n    if (key !== \"series\") return sameValue(a[key], b[key]);\n    const sa = a.series;\n    const sb = b.series;\n    return (\n      sa === sb ||\n      (sa.length === sb.length &&\n        sa.every(\n          (s, i) =>\n            s === sb[i] ||\n            shallowEqual(\n              s as unknown as Record<string, unknown>,\n              sb[i] as unknown as Record<string, unknown>,\n            ),\n        ))\n    );\n  });\n};\n\n/** Same hovered points with the same values (same tooltip content) */\nconst sameTooltipEvent = (\n  a: ChartHoverEvent | null,\n  b: ChartHoverEvent,\n): boolean =>\n  !!a &&\n  a.x === b.x &&\n  a.xLabel === b.xLabel &&\n  a.items.length === b.items.length &&\n  a.items.every((item, i) =>\n    shallowEqual(\n      item as unknown as Record<string, unknown>,\n      b.items[i] as unknown as Record<string, unknown>,\n    ),\n  );\n\n/** Mounts the engine in a sized <div> and forwards option / handler changes */\nexport function ChartBase({\n  options,\n  height,\n  width,\n  className,\n  style,\n  handleRef,\n  renderTooltip,\n  overlay,\n  ...handlers\n}: ChartBaseProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const chartRef = useRef<ChartInstance | null>(null);\n  const handlersRef = useRef<Handlers>(handlers);\n  const tooltipRef = useRef(renderTooltip);\n  const tipEventRef = useRef<ChartHoverEvent | null>(null);\n  const [tipEvent, setTipEvent] = useState<ChartHoverEvent | null>(null);\n  const [plot, setPlot] = useState<ChartRect | null>(null);\n  const tipHost = useMemo(\n    () =>\n      typeof document === \"undefined\" ? null : document.createElement(\"div\"),\n    [],\n  );\n\n  // Parents pass a new options object on every render: keep the previous\n  // one while it describes the same chart, so the engine isn't rebuilt\n  // (state derived during render, the pattern React documents for it)\n  const [stable, setStable] = useState(options);\n  if (stable !== options && !sameOptions(stable, options)) setStable(options);\n  // the render callback reads the latest `renderTooltip` through a ref: only\n  // its presence matters here (inline callbacks change on every render)\n  const hasTooltip = !!renderTooltip;\n\n  const resolved = useMemo((): ChartOptions => {\n    if (!hasTooltip || !tipHost || stable.tooltip === false) return stable;\n    const base = typeof stable.tooltip === \"object\" ? stable.tooltip : {};\n    return {\n      ...stable,\n      tooltip: {\n        ...base,\n        render: (event) => {\n          if (!tooltipRef.current) return null;\n          // render synchronously so the engine measures the final size;\n          // pointer moves over the same points keep the rendered content\n          if (!sameTooltipEvent(tipEventRef.current, event)) {\n            tipEventRef.current = event;\n            flushSync(() => setTipEvent(event));\n          }\n          return tipHost;\n        },\n      },\n    };\n  }, [stable, hasTooltip, tipHost]);\n  const optionsRef = useRef(resolved);\n\n  useEffect(() => {\n    handlersRef.current = handlers;\n    tooltipRef.current = renderTooltip;\n  });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const chart = createChart(container, optionsRef.current);\n    chartRef.current = chart;\n    const offs = [\n      chart.on(\"hover\", (e) => handlersRef.current.onHover?.(e)),\n      chart.on(\"click\", (e) => handlersRef.current.onPointClick?.(e)),\n      chart.on(\"plotClick\", (e) => handlersRef.current.onPlotClick?.(e)),\n      chart.on(\"zoom\", (v) => handlersRef.current.onZoom?.(v)),\n      chart.on(\"renderer\", (r) => handlersRef.current.onRendererChange?.(r)),\n      chart.on(\"drag\", (e) => handlersRef.current.onDrag?.(e)),\n      chart.on(\"drop\", (e) => handlersRef.current.onDrop?.(e)),\n      chart.on(\"layout\", (rect) => setPlot(rect)),\n    ];\n    return () => {\n      offs.forEach((off) => off());\n      chart.destroy();\n      chartRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (optionsRef.current === resolved) return;\n    optionsRef.current = resolved;\n    chartRef.current?.setOptions(resolved);\n  }, [resolved]);\n\n  useImperativeHandle(\n    handleRef,\n    () => ({\n      resetZoom: () => chartRef.current?.resetZoom(),\n      getView: () => chartRef.current?.getView() ?? null,\n      setView: (view) => chartRef.current?.setView(view),\n      getRenderer: () => chartRef.current?.getRenderer() ?? null,\n      getInstance: () => chartRef.current,\n    }),\n    [],\n  );\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"relative\",\n        width: size(width, \"100%\"),\n        height: size(height, \"320px\"),\n        ...style,\n      }}\n    >\n      <div ref={containerRef} style={{ position: \"absolute\", inset: 0 }} />\n      {overlay && plot && (\n        <div\n          className=\"minerva-chart-overlay\"\n          style={{\n            position: \"absolute\",\n            left: plot.x,\n            top: plot.y,\n            width: plot.width,\n            height: plot.height,\n            pointerEvents: \"none\",\n          }}\n        >\n          {overlay(plot)}\n        </div>\n      )}\n      {tipHost &&\n        tipEvent &&\n        renderTooltip &&\n        createPortal(renderTooltip(tipEvent), tipHost)}\n    </div>\n  );\n}\n\n/**\n * GPU chart (WebGPU, then WebGL2, then Canvas2D) mixing line, area, bar and\n * scatter series; zoomable, keyboard accessible and themed by the Minerva\n * CSS variables.\n */\nexport function Chart(props: ChartProps) {\n  const {\n    height,\n    width,\n    className,\n    style,\n    ref,\n    onHover,\n    onPointClick,\n    onPlotClick,\n    onZoom,\n    onRendererChange,\n    renderTooltip,\n  } = props;\n  return (\n    <ChartBase\n      options={engineOptions(props)}\n      height={height}\n      width={width}\n      className={className}\n      style={style}\n      handleRef={ref}\n      onHover={onHover}\n      onPointClick={onPointClick}\n      onPlotClick={onPlotClick}\n      onZoom={onZoom}\n      onRendererChange={onRendererChange}\n      renderTooltip={renderTooltip}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/charts/react/Chart.d.cts

@@ -11,7 +11,7 @@ interface Handlers {
     onDrop?: (event: ChartDragEvent) => void;
 }
 /** Engine options of the common props */
-export declare const engineOptions: (props: Pick<ChartCommonProps, "xAxis" | "yAxis" | "renderer" | "legend" | "tooltip" | "crosshair" | "annotations" | "interaction" | "padding" | "palette" | "ariaLabel"> & Pick<ChartOptions, "series">) => ChartOptions;
+export declare const engineOptions: (props: Pick<ChartCommonProps, "xAxis" | "yAxis" | "renderer" | "legend" | "tooltip" | "crosshair" | "annotations" | "interaction" | "padding" | "palette" | "ariaLabel"> & Pick<ChartOptions, "series" | "stackMode">) => ChartOptions;
 interface ChartBaseProps extends Handlers {
     options: ChartOptions;
     height?: number | string;
@@ -24,6 +24,13 @@ interface ChartBaseProps extends Handlers {
     /** React content placed over the chart, given the plot area */
     overlay?: (plot: ChartRect) => ReactNode;
 }
+/**
+ * Whether `b` describes the same chart as `a`: top-level options compared by
+ * identity (or one level deep for inline arrays / objects), series compared
+ * one by one, each series shallowly (inline `series={[{ name, data }]}`
+ * with a stable `data` stays equal). Data is never compared by content.
+ */
+export declare const sameOptions: (a: ChartOptions, b: ChartOptions) => boolean;
 /** Mounts the engine in a sized <div> and forwards option / handler changes */
 export declare function ChartBase({ options, height, width, className, style, handleRef, renderTooltip, overlay, ...handlers }: ChartBaseProps): import('react').JSX.Element;
 /**

package/dist/charts/react/Chart.d.ts

@@ -11,7 +11,7 @@ interface Handlers {
     onDrop?: (event: ChartDragEvent) => void;
 }
 /** Engine options of the common props */
-export declare const engineOptions: (props: Pick<ChartCommonProps, "xAxis" | "yAxis" | "renderer" | "legend" | "tooltip" | "crosshair" | "annotations" | "interaction" | "padding" | "palette" | "ariaLabel"> & Pick<ChartOptions, "series">) => ChartOptions;
+export declare const engineOptions: (props: Pick<ChartCommonProps, "xAxis" | "yAxis" | "renderer" | "legend" | "tooltip" | "crosshair" | "annotations" | "interaction" | "padding" | "palette" | "ariaLabel"> & Pick<ChartOptions, "series" | "stackMode">) => ChartOptions;
 interface ChartBaseProps extends Handlers {
     options: ChartOptions;
     height?: number | string;
@@ -24,6 +24,13 @@ interface ChartBaseProps extends Handlers {
     /** React content placed over the chart, given the plot area */
     overlay?: (plot: ChartRect) => ReactNode;
 }
+/**
+ * Whether `b` describes the same chart as `a`: top-level options compared by
+ * identity (or one level deep for inline arrays / objects), series compared
+ * one by one, each series shallowly (inline `series={[{ name, data }]}`
+ * with a stable `data` stays equal). Data is never compared by content.
+ */
+export declare const sameOptions: (a: ChartOptions, b: ChartOptions) => boolean;
 /** Mounts the engine in a sized <div> and forwards option / handler changes */
 export declare function ChartBase({ options, height, width, className, style, handleRef, renderTooltip, overlay, ...handlers }: ChartBaseProps): import('react').JSX.Element;
 /**

package/dist/charts/react/Chart.js

@@ -16,87 +16,106 @@ var u = (e, t) => e === void 0 ? t : typeof e == "number" ? `${e}px` : e, d = (e
 	interaction: e.interaction,
 	padding: e.padding,
 	palette: e.palette,
-	ariaLabel: e.ariaLabel
-});
-function f({ options: d, height: f, width: p, className: m, style: h, handleRef: g, renderTooltip: _, overlay: v, ...y }) {
-	let b = i(null), x = i(null), S = i(y), C = i(_), [w, T] = a(null), [E, D] = a(null), O = r(() => typeof document > "u" ? null : document.createElement("div"), []), k = r(() => {
-		if (!_ || !O || d.tooltip === !1) return d;
-		let e = typeof d.tooltip == "object" ? d.tooltip : {};
+	ariaLabel: e.ariaLabel,
+	stackMode: e.stackMode
+}), f = (e) => {
+	if (typeof e != "object" || !e) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}, p = (e, t) => {
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => e[n] === t[n] && Object.prototype.hasOwnProperty.call(t, n));
+}, m = (e, t) => e === t ? !0 : Array.isArray(e) && Array.isArray(t) ? e.length === t.length && e.every((e, n) => e === t[n]) : f(e) && f(t) && p(e, t), h = (e, t) => {
+	if (e === t) return !0;
+	let n = Object.keys(e);
+	return n.length === Object.keys(t).length && n.every((n) => {
+		if (!Object.prototype.hasOwnProperty.call(t, n)) return !1;
+		if (n !== "series") return m(e[n], t[n]);
+		let r = e.series, i = t.series;
+		return r === i || r.length === i.length && r.every((e, t) => e === i[t] || p(e, i[t]));
+	});
+}, g = (e, t) => !!e && e.x === t.x && e.xLabel === t.xLabel && e.items.length === t.items.length && e.items.every((e, n) => p(e, t.items[n]));
+function _({ options: d, height: f, width: p, className: m, style: _, handleRef: v, renderTooltip: y, overlay: b, ...x }) {
+	let S = i(null), C = i(null), w = i(x), T = i(y), E = i(null), [D, O] = a(null), [k, A] = a(null), j = r(() => typeof document > "u" ? null : document.createElement("div"), []), [M, N] = a(d);
+	M !== d && !h(M, d) && N(d);
+	let P = !!y, F = r(() => {
+		if (!P || !j || M.tooltip === !1) return M;
+		let e = typeof M.tooltip == "object" ? M.tooltip : {};
 		return {
-			...d,
+			...M,
 			tooltip: {
 				...e,
-				render: (e) => C.current ? (s(() => T(e)), O) : null
+				render: (e) => T.current ? (g(E.current, e) || (E.current = e, s(() => O(e))), j) : null
 			}
 		};
 	}, [
-		d,
-		_,
-		O
-	]), A = i(k);
+		M,
+		P,
+		j
+	]), I = i(F);
 	return t(() => {
-		S.current = y, C.current = _;
+		w.current = x, T.current = y;
 	}), t(() => {
-		let t = b.current;
+		let t = S.current;
 		if (!t) return;
-		let n = e(t, A.current);
-		x.current = n;
+		let n = e(t, I.current);
+		C.current = n;
 		let r = [
-			n.on("hover", (e) => S.current.onHover?.(e)),
-			n.on("click", (e) => S.current.onPointClick?.(e)),
-			n.on("plotClick", (e) => S.current.onPlotClick?.(e)),
-			n.on("zoom", (e) => S.current.onZoom?.(e)),
-			n.on("renderer", (e) => S.current.onRendererChange?.(e)),
-			n.on("drag", (e) => S.current.onDrag?.(e)),
-			n.on("drop", (e) => S.current.onDrop?.(e)),
-			n.on("layout", (e) => D(e))
+			n.on("hover", (e) => w.current.onHover?.(e)),
+			n.on("click", (e) => w.current.onPointClick?.(e)),
+			n.on("plotClick", (e) => w.current.onPlotClick?.(e)),
+			n.on("zoom", (e) => w.current.onZoom?.(e)),
+			n.on("renderer", (e) => w.current.onRendererChange?.(e)),
+			n.on("drag", (e) => w.current.onDrag?.(e)),
+			n.on("drop", (e) => w.current.onDrop?.(e)),
+			n.on("layout", (e) => A(e))
 		];
 		return () => {
-			r.forEach((e) => e()), n.destroy(), x.current = null;
+			r.forEach((e) => e()), n.destroy(), C.current = null;
 		};
 	}, []), t(() => {
-		A.current !== k && (A.current = k, x.current?.setOptions(k));
-	}, [k]), n(g, () => ({
-		resetZoom: () => x.current?.resetZoom(),
-		getView: () => x.current?.getView() ?? null,
-		setView: (e) => x.current?.setView(e),
-		getRenderer: () => x.current?.getRenderer() ?? null,
-		getInstance: () => x.current
+		I.current !== F && (I.current = F, C.current?.setOptions(F));
+	}, [F]), n(v, () => ({
+		resetZoom: () => C.current?.resetZoom(),
+		getView: () => C.current?.getView() ?? null,
+		setView: (e) => C.current?.setView(e),
+		getRenderer: () => C.current?.getRenderer() ?? null,
+		getInstance: () => C.current
 	}), []), /* @__PURE__ */ l("div", {
 		className: m,
 		style: {
 			position: "relative",
 			width: u(p, "100%"),
 			height: u(f, "320px"),
-			...h
+			..._
 		},
 		children: [
 			/* @__PURE__ */ c("div", {
-				ref: b,
+				ref: S,
 				style: {
 					position: "absolute",
 					inset: 0
 				}
 			}),
-			v && E && /* @__PURE__ */ c("div", {
+			b && k && /* @__PURE__ */ c("div", {
 				className: "minerva-chart-overlay",
 				style: {
 					position: "absolute",
-					left: E.x,
-					top: E.y,
-					width: E.width,
-					height: E.height,
+					left: k.x,
+					top: k.y,
+					width: k.width,
+					height: k.height,
 					pointerEvents: "none"
 				},
-				children: v(E)
+				children: b(k)
 			}),
-			O && w && _ && o(_(w), O)
+			j && D && y && o(y(D), j)
 		]
 	});
 }
-function p(e) {
-	let { height: t, width: n, className: r, style: i, ref: a, onHover: o, onPointClick: s, onPlotClick: l, onZoom: u, onRendererChange: p, renderTooltip: m } = e;
-	return /* @__PURE__ */ c(f, {
+function v(e) {
+	let { height: t, width: n, className: r, style: i, ref: a, onHover: o, onPointClick: s, onPlotClick: l, onZoom: u, onRendererChange: f, renderTooltip: p } = e;
+	return /* @__PURE__ */ c(_, {
 		options: d(e),
 		height: t,
 		width: n,
@@ -107,11 +126,11 @@ function p(e) {
 		onPointClick: s,
 		onPlotClick: l,
 		onZoom: u,
-		onRendererChange: p,
-		renderTooltip: m
+		onRendererChange: f,
+		renderTooltip: p
 	});
 }
 //#endregion
-export { p as Chart, f as ChartBase, d as engineOptions };
+export { v as Chart, _ as ChartBase, d as engineOptions, h as sameOptions };
 
 //# sourceMappingURL=Chart.js.map