minerva-design 1.1.0 → 1.3.0

package/dist/charts/react/shapes.js

@@ -0,0 +1,242 @@
+"use client";
+import { createShapeChart as e } from "../engine/shapes/chart.js";
+import { useEffect as t, useImperativeHandle as n, useMemo as r, useRef as i, useState as a } from "react";
+import { createPortal as o, flushSync as s } from "react-dom";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/react/shapes.tsx
+var u = (e, t) => e === void 0 ? t : typeof e == "number" ? `${e}px` : e, d = ({ palette: e, legend: t, tooltip: n, format: i, percentFormat: a, hidden: o, animation: s, padding: c, ariaLabel: l }) => {
+	let u = o ? o.join(",") : null, d = r(() => u === null ? void 0 : u ? u.split(",").map(Number) : [], [u]);
+	return r(() => ({
+		palette: e,
+		legend: t,
+		tooltip: n,
+		format: i,
+		percentFormat: a,
+		hidden: d,
+		animation: s,
+		padding: c,
+		ariaLabel: l
+	}), [
+		e,
+		t,
+		n,
+		i,
+		a,
+		d,
+		s,
+		c,
+		l
+	]);
+};
+function f({ options: d, height: f, width: p, className: m, style: h, handleRef: g, renderTooltip: _, ...v }) {
+	let y = i(null), b = i(null), x = i(v), S = i(_), [C, w] = a(null), T = r(() => typeof document > "u" ? null : document.createElement("div"), []), E = !!_, D = r(() => {
+		if (!E || !T || d.tooltip === !1) return d;
+		let e = typeof d.tooltip == "object" ? d.tooltip : {};
+		return {
+			...d,
+			tooltip: {
+				...e,
+				render: (e) => S.current ? (s(() => w(e)), T) : null
+			}
+		};
+	}, [
+		d,
+		E,
+		T
+	]), O = i(D);
+	return t(() => {
+		x.current = v, S.current = _;
+	}), t(() => {
+		let t = y.current;
+		if (!t) return;
+		let n = e(t, O.current);
+		b.current = n;
+		let r = [
+			n.on("hover", (e) => x.current.onHover?.(e)),
+			n.on("click", (e) => x.current.onClick?.(e)),
+			n.on("toggle", (e) => x.current.onToggle?.(e))
+		];
+		return () => {
+			r.forEach((e) => e()), n.destroy(), b.current = null;
+		};
+	}, []), t(() => {
+		O.current !== D && (O.current = D, b.current?.setOptions(D));
+	}, [D]), n(g, () => ({ getInstance: () => b.current }), []), /* @__PURE__ */ l("div", {
+		className: m,
+		style: {
+			position: "relative",
+			width: u(p, "100%"),
+			height: u(f, "320px"),
+			...h
+		},
+		children: [/* @__PURE__ */ c("div", {
+			ref: y,
+			style: {
+				position: "absolute",
+				inset: 0
+			}
+		}), T && C && _ && o(_(C), T)]
+	});
+}
+function p(e) {
+	return /* @__PURE__ */ c(h, {
+		...e,
+		defaultInner: 0
+	});
+}
+function m(e) {
+	return /* @__PURE__ */ c(h, {
+		...e,
+		defaultInner: .62
+	});
+}
+function h(e) {
+	let { data: t, innerRadius: n, startAngle: i, padAngle: a, cornerRadius: o, rose: s, labels: l, labelContent: u, centerValue: f, centerLabel: p, defaultInner: m } = e, h = d(e), g = r(() => ({
+		...h,
+		type: "pie",
+		data: t,
+		innerRadius: n ?? m,
+		startAngle: i,
+		padAngle: a,
+		cornerRadius: o,
+		rose: s,
+		labels: l,
+		labelContent: u,
+		centerValue: f,
+		centerLabel: p
+	}), [
+		h,
+		t,
+		n,
+		m,
+		i,
+		a,
+		o,
+		s,
+		l,
+		u,
+		f,
+		p
+	]);
+	return /* @__PURE__ */ c(b, {
+		props: e,
+		options: g,
+		defaultHeight: 320
+	});
+}
+function g(e) {
+	let { indicators: t, series: n, shape: i, levels: a, dots: o } = e, s = d(e), l = r(() => ({
+		...s,
+		type: "radar",
+		indicators: t,
+		series: n,
+		shape: i,
+		levels: a,
+		dots: o
+	}), [
+		s,
+		t,
+		n,
+		i,
+		a,
+		o
+	]);
+	return /* @__PURE__ */ c(b, {
+		props: e,
+		options: l,
+		defaultHeight: 320
+	});
+}
+function _(e) {
+	let { value: t, min: n, max: i, label: a, sweep: o, thickness: s, bands: l, color: u, needle: f, ticks: p } = e, m = d(e), h = r(() => ({
+		...m,
+		type: "gauge",
+		value: t,
+		min: n,
+		max: i,
+		label: a,
+		sweep: o,
+		thickness: s,
+		bands: l,
+		color: u,
+		needle: f,
+		ticks: p
+	}), [
+		m,
+		t,
+		n,
+		i,
+		a,
+		o,
+		s,
+		l,
+		u,
+		f,
+		p
+	]);
+	return /* @__PURE__ */ c(b, {
+		props: e,
+		options: h,
+		defaultHeight: 240
+	});
+}
+function v(e) {
+	let { data: t, sort: n, gap: i, conversion: a, shape: o } = e, s = d(e), l = r(() => ({
+		...s,
+		type: "funnel",
+		data: t,
+		sort: n,
+		gap: i,
+		conversion: a,
+		shape: o
+	}), [
+		s,
+		t,
+		n,
+		i,
+		a,
+		o
+	]);
+	return /* @__PURE__ */ c(b, {
+		props: e,
+		options: l,
+		defaultHeight: 320
+	});
+}
+function y(e) {
+	let { data: t, gap: n, headers: i } = e, a = d(e), o = r(() => ({
+		...a,
+		type: "treemap",
+		data: t,
+		gap: n,
+		headers: i
+	}), [
+		a,
+		t,
+		n,
+		i
+	]);
+	return /* @__PURE__ */ c(b, {
+		props: e,
+		options: o,
+		defaultHeight: 320
+	});
+}
+function b({ props: e, options: t, defaultHeight: n }) {
+	return /* @__PURE__ */ c(f, {
+		options: t,
+		height: e.height ?? n,
+		width: e.width,
+		className: e.className,
+		style: e.style,
+		handleRef: e.ref,
+		onHover: e.onHover,
+		onClick: e.onClick,
+		onToggle: e.onToggle,
+		renderTooltip: e.renderTooltip
+	});
+}
+//#endregion
+export { m as DonutChart, v as FunnelChart, _ as GaugeChart, p as PieChart, g as RadarChart, y as TreemapChart };
+
+//# sourceMappingURL=shapes.js.map

package/dist/charts/react/shapes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shapes.js","names":["size","value","fallback","useCommonOptions","hiddenKey","hidden","stableHidden","useMemo","palette","legend","tooltip","format","percentFormat","animation","padding","ariaLabel","ShapeChartBase","handlers","containerRef","useRef","chartRef","handlersRef","tooltipRef","renderTooltip","tipEvent","setTipEvent","useState","tipHost","customTooltip","resolved","options","base","flushSync","event","optionsRef","useEffect","container","chart","createShapeChart","offs","off","useImperativeHandle","handleRef","width","height","style","createPortal","PieChart","PieBase","props","DonutChart","common","innerRadius","defaultInner","data","startAngle","padAngle","cornerRadius","rose","labels","labelContent","centerValue","centerLabel","ShapeHost","RadarChart","indicators","series","shape","levels","dots","GaugeChart","min","max","label","sweep","thickness","bands","color","needle","ticks","FunnelChart","sort","gap","conversion","TreemapChart","headers","defaultHeight"],"sources":["../../../../charts/src/react/shapes.tsx"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal, flushSync } from \"react-dom\";\nimport type { ChartPadding } from \"../engine/types\";\nimport { createShapeChart } from \"../engine/shapes/chart\";\nimport type {\n  FunnelChartOptions,\n  GaugeBand,\n  GaugeChartOptions,\n  PieChartOptions,\n  RadarChartOptions,\n  RadarIndicator,\n  RadarSeries,\n  ShapeChartCommonOptions,\n  ShapeChartInstance,\n  ShapeChartOptions,\n  ShapeDatum,\n  ShapeHoverEvent,\n  ShapeLegendOptions,\n  ShapeToggleEvent,\n  ShapeTooltipOptions,\n  TreemapChartOptions,\n  TreemapNode,\n} from \"../engine/shapes/types\";\n\n/** Imperative handle of the shape chart components (`ref`) */\nexport interface ShapeChartHandle {\n  /** The underlying engine instance (minerva-design/charts/core) */\n  getInstance(): ShapeChartInstance | null;\n}\n\n/** Props shared by PieChart, DonutChart, RadarChart, GaugeChart, FunnelChart and TreemapChart */\nexport interface ShapeChartCommonProps {\n  /**\n   * Height of the chart (the legend included); numbers are pixels\n   * @default 320 (GaugeChart: 240)\n   */\n  height?: number | string;\n  /**\n   * Width of the chart; numbers are pixels\n   * @default \"100%\"\n   */\n  width?: number | string;\n  /** Colors of the marks without `color` (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */\n  palette?: readonly string[];\n  /**\n   * Legend; clicking an item hides / shows its slice, stage or series\n   * @default shown for pie, donut, funnel and multi-series radar charts\n   */\n  legend?: boolean | ShapeLegendOptions;\n  /**\n   * Tooltip; `false` disables it\n   * @default true\n   */\n  tooltip?: boolean | ShapeTooltipOptions;\n  /**\n   * Formats the values of the labels and the tooltip\n   * @default compact numbers (1.2k, 3.4M)\n   */\n  format?: (value: number) => string;\n  /**\n   * Formats the shares (labels, conversion rates, tooltip); `share` is 0-1\n   * @default one decimal, e.g. \"40.0%\"\n   */\n  percentFormat?: (share: number) => string;\n  /**\n   * Hidden slices / stages / radar series / top-level treemap nodes, by\n   * index. Makes the visibility controlled: legend clicks then only call\n   * `onToggle`, whose `hiddenIndexes` should be stored and passed back.\n   * Leave undefined to let the legend hide / show entries by itself.\n   */\n  hidden?: readonly number[];\n  /**\n   * Called when a legend item is clicked (or the instance's `toggle()` is\n   * called), with the toggled index and every hidden index after the toggle\n   */\n  onToggle?: (event: ShapeToggleEvent) => void;\n  /**\n   * Entry and update animations (skipped when the user prefers reduced motion)\n   * @default true\n   */\n  animation?: boolean;\n  /**\n   * Space around the drawing, in pixels\n   * @default 8 on every side\n   */\n  padding?: ChartPadding;\n  /**\n   * Accessible name of the chart\n   * @default the chart type, e.g. \"Donut chart\"\n   */\n  ariaLabel?: string;\n  /** Called when the hovered (or keyboard-focused) mark changes */\n  onHover?: (event: ShapeHoverEvent | null) => void;\n  /** Called when a mark is clicked, tapped or activated with Enter */\n  onClick?: (event: ShapeHoverEvent) => void;\n  /** React content of the tooltip (replaces the default content) */\n  renderTooltip?: (event: ShapeHoverEvent) => ReactNode;\n  /** Additional class name of the root element */\n  className?: string;\n  /** Inline styles of the root element */\n  style?: CSSProperties;\n  /** Imperative handle */\n  ref?: Ref<ShapeChartHandle>;\n}\n\n/** Props of PieChart */\nexport interface PieChartProps extends ShapeChartCommonProps {\n  /** Slices: a name, a value (negative values count as 0) and an optional color */\n  data: readonly ShapeDatum[];\n  /**\n   * Inner radius as a fraction of the outer radius: 0 = pie, 0.6 = donut\n   * @default 0\n   */\n  innerRadius?: number;\n  /**\n   * Angle of the first slice, degrees clockwise from 12 o'clock\n   * @default 0\n   */\n  startAngle?: number;\n  /**\n   * Gap between the slices, in pixels\n   * @default 1 (pie), 2 (donut)\n   */\n  padAngle?: number;\n  /**\n   * Corner radius of the slices, in pixels\n   * @default 0 (pie), 4 (donut)\n   */\n  cornerRadius?: number;\n  /**\n   * Nightingale rose: the radius (instead of the angle) shows the value\n   * @default false\n   */\n  rose?: boolean;\n  /**\n   * Slice labels: `outside` with leader lines, `inside` the slices, or none\n   * @default \"outside\" (up to 12 slices), \"none\" otherwise\n   */\n  labels?: \"outside\" | \"inside\" | \"none\";\n  /**\n   * What a label shows: name, value, percent (combinable)\n   * @default [\"name\", \"percent\"]\n   */\n  labelContent?: readonly (\"name\" | \"value\" | \"percent\")[];\n  /** Big text in the hole of a donut (e.g. the total) */\n  centerValue?: string;\n  /** Small text under `centerValue` */\n  centerLabel?: string;\n}\n\n/** Props of DonutChart: a PieChart with a hole */\nexport interface DonutChartProps extends PieChartProps {\n  /**\n   * Inner radius as a fraction of the outer radius\n   * @default 0.62\n   */\n  innerRadius?: number;\n}\n\n/** Props of RadarChart */\nexport interface RadarChartProps extends ShapeChartCommonProps {\n  /** Axes of the chart, clockwise from 12 o'clock */\n  indicators: readonly RadarIndicator[];\n  /** Polygons: one value per indicator */\n  series: readonly RadarSeries[];\n  /**\n   * Grid shape\n   * @default \"polygon\"\n   */\n  shape?: \"polygon\" | \"circle\";\n  /**\n   * Number of grid rings\n   * @default 4\n   */\n  levels?: number;\n  /**\n   * Dots on the vertices\n   * @default true\n   */\n  dots?: boolean;\n}\n\n/** Props of GaugeChart */\nexport interface GaugeChartProps extends ShapeChartCommonProps {\n  /** Value shown by the arc (clamped to `min` - `max` for the drawing) */\n  value: number;\n  /**\n   * Value at the start of the arc\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Value at the end of the arc\n   * @default 100\n   */\n  max?: number;\n  /** Caption under the value */\n  label?: string;\n  /**\n   * Total angle of the arc, degrees\n   * @default 240\n   */\n  sweep?: number;\n  /**\n   * Thickness of the arc as a fraction of the radius\n   * @default 0.16\n   */\n  thickness?: number;\n  /** Colored ranges of the track; the value arc takes the color of its band */\n  bands?: readonly GaugeBand[];\n  /**\n   * Color of the value arc (when there are no bands)\n   * @default the first palette color\n   */\n  color?: string;\n  /**\n   * Draws a needle in addition to the value arc\n   * @default false\n   */\n  needle?: boolean;\n  /**\n   * Tick labels at the ends (and at the band bounds)\n   * @default true\n   */\n  ticks?: boolean;\n}\n\n/** Props of FunnelChart */\nexport interface FunnelChartProps extends ShapeChartCommonProps {\n  /** Stages: a name, a value and an optional color */\n  data: readonly ShapeDatum[];\n  /**\n   * Order of the stages\n   * @default \"none\" (data order)\n   */\n  sort?: \"descending\" | \"ascending\" | \"none\";\n  /**\n   * Vertical gap between the stages, in pixels\n   * @default 4\n   */\n  gap?: number;\n  /**\n   * Shows the conversion rate from the previous stage\n   * @default true\n   */\n  conversion?: boolean;\n  /**\n   * Shape of the stages: trapezoids that narrow to the next stage, or centered bars\n   * @default \"trapezoid\"\n   */\n  shape?: \"trapezoid\" | \"bar\";\n}\n\n/** Props of TreemapChart */\nexport interface TreemapChartProps extends ShapeChartCommonProps {\n  /** Nodes: leaves carry a value, parents sum their children */\n  data: readonly TreemapNode[];\n  /**\n   * Gap between the cells, in pixels\n   * @default 2\n   */\n  gap?: number;\n  /**\n   * Draws the names of the parents above their children\n   * @default true\n   */\n  headers?: boolean;\n}\n\ninterface Handlers {\n  onHover?: (event: ShapeHoverEvent | null) => void;\n  onClick?: (event: ShapeHoverEvent) => void;\n  onToggle?: (event: ShapeToggleEvent) => void;\n}\n\ninterface ShapeChartBaseProps extends Handlers {\n  options: ShapeChartOptions;\n  height: number | string;\n  width?: number | string;\n  className?: string;\n  style?: CSSProperties;\n  handleRef?: Ref<ShapeChartHandle>;\n  renderTooltip?: (event: ShapeHoverEvent) => ReactNode;\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 shared by every type, stable while the props are equal */\nconst useCommonOptions = ({\n  palette,\n  legend,\n  tooltip,\n  format,\n  percentFormat,\n  hidden,\n  animation,\n  padding,\n  ariaLabel,\n}: ShapeChartCommonProps): ShapeChartCommonOptions => {\n  // a new array with the same indexes keeps the options (and the animation)\n  const hiddenKey = hidden ? hidden.join(\",\") : null;\n  const stableHidden = useMemo(\n    () =>\n      hiddenKey === null\n        ? undefined\n        : hiddenKey\n          ? hiddenKey.split(\",\").map(Number)\n          : [],\n    [hiddenKey],\n  );\n  return useMemo(\n    () => ({\n      palette,\n      legend,\n      tooltip,\n      format,\n      percentFormat,\n      hidden: stableHidden,\n      animation,\n      padding,\n      ariaLabel,\n    }),\n    [\n      palette,\n      legend,\n      tooltip,\n      format,\n      percentFormat,\n      stableHidden,\n      animation,\n      padding,\n      ariaLabel,\n    ],\n  );\n};\n\n/** Mounts the engine in a sized <div> and forwards option / handler changes */\nfunction ShapeChartBase({\n  options,\n  height,\n  width,\n  className,\n  style,\n  handleRef,\n  renderTooltip,\n  ...handlers\n}: ShapeChartBaseProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const chartRef = useRef<ShapeChartInstance | null>(null);\n  const handlersRef = useRef<Handlers>(handlers);\n  const tooltipRef = useRef(renderTooltip);\n  const [tipEvent, setTipEvent] = useState<ShapeHoverEvent | null>(null);\n  const tipHost = useMemo(\n    () =>\n      typeof document === \"undefined\" ? null : document.createElement(\"div\"),\n    [],\n  );\n  const customTooltip = !!renderTooltip;\n\n  const resolved = useMemo((): ShapeChartOptions => {\n    if (!customTooltip || !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, customTooltip, 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 = createShapeChart(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.onClick?.(e)),\n      chart.on(\"toggle\", (e) => handlersRef.current.onToggle?.(e)),\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    () => ({ getInstance: () => chartRef.current }),\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      {tipHost &&\n        tipEvent &&\n        renderTooltip &&\n        createPortal(renderTooltip(tipEvent), tipHost)}\n    </div>\n  );\n}\n\n/**\n * Pie chart (or a donut with `innerRadius`, or a Nightingale rose with\n * `rose`): slices with gaps, outside labels with leader lines, legend toggles.\n */\nexport function PieChart(props: PieChartProps) {\n  return <PieBase {...props} defaultInner={0} />;\n}\n\n/** Donut chart: a PieChart with a hole and optional center texts */\nexport function DonutChart(props: DonutChartProps) {\n  return <PieBase {...props} defaultInner={0.62} />;\n}\n\nfunction PieBase(props: PieChartProps & { defaultInner: number }) {\n  const {\n    data,\n    innerRadius,\n    startAngle,\n    padAngle,\n    cornerRadius,\n    rose,\n    labels,\n    labelContent,\n    centerValue,\n    centerLabel,\n    defaultInner,\n  } = props;\n  const common = useCommonOptions(props);\n  const options = useMemo(\n    (): PieChartOptions => ({\n      ...common,\n      type: \"pie\",\n      data,\n      innerRadius: innerRadius ?? defaultInner,\n      startAngle,\n      padAngle,\n      cornerRadius,\n      rose,\n      labels,\n      labelContent,\n      centerValue,\n      centerLabel,\n    }),\n    [\n      common,\n      data,\n      innerRadius,\n      defaultInner,\n      startAngle,\n      padAngle,\n      cornerRadius,\n      rose,\n      labels,\n      labelContent,\n      centerValue,\n      centerLabel,\n    ],\n  );\n  return <ShapeHost props={props} options={options} defaultHeight={320} />;\n}\n\n/** Radar (spider) chart comparing series over several indicators */\nexport function RadarChart(props: RadarChartProps) {\n  const { indicators, series, shape, levels, dots } = props;\n  const common = useCommonOptions(props);\n  const options = useMemo(\n    (): RadarChartOptions => ({\n      ...common,\n      type: \"radar\",\n      indicators,\n      series,\n      shape,\n      levels,\n      dots,\n    }),\n    [common, indicators, series, shape, levels, dots],\n  );\n  return <ShapeHost props={props} options={options} defaultHeight={320} />;\n}\n\n/** Gauge (speedometer) showing one value on an arc, with colored bands */\nexport function GaugeChart(props: GaugeChartProps) {\n  const {\n    value,\n    min,\n    max,\n    label,\n    sweep,\n    thickness,\n    bands,\n    color,\n    needle,\n    ticks,\n  } = props;\n  const common = useCommonOptions(props);\n  const options = useMemo(\n    (): GaugeChartOptions => ({\n      ...common,\n      type: \"gauge\",\n      value,\n      min,\n      max,\n      label,\n      sweep,\n      thickness,\n      bands,\n      color,\n      needle,\n      ticks,\n    }),\n    [\n      common,\n      value,\n      min,\n      max,\n      label,\n      sweep,\n      thickness,\n      bands,\n      color,\n      needle,\n      ticks,\n    ],\n  );\n  return <ShapeHost props={props} options={options} defaultHeight={240} />;\n}\n\n/** Funnel chart of the stages of a process, with conversion rates */\nexport function FunnelChart(props: FunnelChartProps) {\n  const { data, sort, gap, conversion, shape } = props;\n  const common = useCommonOptions(props);\n  const options = useMemo(\n    (): FunnelChartOptions => ({\n      ...common,\n      type: \"funnel\",\n      data,\n      sort,\n      gap,\n      conversion,\n      shape,\n    }),\n    [common, data, sort, gap, conversion, shape],\n  );\n  return <ShapeHost props={props} options={options} defaultHeight={320} />;\n}\n\n/** Treemap: nested rectangles of areas proportional to the values */\nexport function TreemapChart(props: TreemapChartProps) {\n  const { data, gap, headers } = props;\n  const common = useCommonOptions(props);\n  const options = useMemo(\n    (): TreemapChartOptions => ({\n      ...common,\n      type: \"treemap\",\n      data,\n      gap,\n      headers,\n    }),\n    [common, data, gap, headers],\n  );\n  return <ShapeHost props={props} options={options} defaultHeight={320} />;\n}\n\nfunction ShapeHost({\n  props,\n  options,\n  defaultHeight,\n}: {\n  props: ShapeChartCommonProps;\n  options: ShapeChartOptions;\n  defaultHeight: number;\n}) {\n  return (\n    <ShapeChartBase\n      options={options}\n      height={props.height ?? defaultHeight}\n      width={props.width}\n      className={props.className}\n      style={props.style}\n      handleRef={props.ref}\n      onHover={props.onHover}\n      onClick={props.onClick}\n      onToggle={props.onToggle}\n      renderTooltip={props.renderTooltip}\n    />\n  );\n}\n"],"mappings":"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"}

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

@@ -1,5 +1,7 @@
-import { CSSProperties, Ref } from 'react';
-import { ChartAnnotation, ChartAxisOptions, ChartHoverEvent, ChartInstance, ChartLegendOptions, ChartInteractionOptions, ChartPadding, ChartRendererKind, ChartRendererPreference, ChartSeries, ChartTooltipOptions, ChartView } from '../engine/types.cjs';
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { ChartAnnotation, ChartAxisOptions, ChartCurve, ChartHoverEvent, ChartInstance, ChartLegendOptions, ChartInteractionOptions, ChartPadding, ChartPlotClickEvent, ChartRendererKind, ChartRendererPreference, ChartSeries, ChartTooltipOptions, ChartView } from '../engine/types.cjs';
+import { HeatmapConfig, QuadrantConfig, QuadrantCorner, QuadrantPoint, SparklineConfig } from '../engine/presets.cjs';
+export type { HeatmapCell, HeatmapConfig, QuadrantAxisLabels, QuadrantConfig, QuadrantCorner, QuadrantPoint, QuadrantRegion, QuadrantRegions, SparklineConfig, } from '../engine/presets.cjs';
 /** Imperative handle of the chart components (`ref`) */
 export interface ChartHandle {
     /** Shows the whole data range */
@@ -57,6 +59,10 @@ export interface ChartCommonProps {
     onHover?: (event: ChartHoverEvent | null) => void;
     /** Called when a point (or bar) is clicked */
     onPointClick?: (event: ChartHoverEvent) => void;
+    /** Called when the plot area is clicked where there is no point */
+    onPlotClick?: (event: ChartPlotClickEvent) => void;
+    /** React content of the tooltip (replaces the default content) */
+    renderTooltip?: (event: ChartHoverEvent) => ReactNode;
     /** Called when the user zooms or pans */
     onZoom?: (view: ChartView) => void;
     /** Called with the backend once it is ready (and when it falls back after a GPU loss) */
@@ -68,10 +74,15 @@ export interface ChartCommonProps {
     /** Imperative handle */
     ref?: Ref<ChartHandle>;
 }
-/** Props of Chart: any mix of line, area, bar and scatter series */
+/** Props of Chart: any mix of line, area, bar, scatter, candlestick and heatmap series */
 export interface ChartProps extends ChartCommonProps {
     /** Data series; each sets its own `type` */
     series: readonly ChartSeries[];
+    /**
+     * `percent` scales every stack to 100% at each x
+     * @default "normal"
+     */
+    stackMode?: "normal" | "percent";
 }
 /** Props of LineChart */
 export interface LineChartProps extends ChartCommonProps {
@@ -82,6 +93,41 @@ export interface LineChartProps extends ChartCommonProps {
      * @default false
      */
     area?: boolean;
+    /**
+     * Shape of the lines: straight, smooth (monotone) or steps
+     * @default "linear"
+     */
+    curve?: ChartCurve;
+    /**
+     * Stacks the series on top of each other
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * Scales the stacks to 100% (with `stacked`)
+     * @default false
+     */
+    percent?: boolean;
+}
+/** Props of AreaChart */
+export interface AreaChartProps extends ChartCommonProps {
+    /** Series drawn as areas unless they set a `type` */
+    series: readonly ChartSeries[];
+    /**
+     * Shape of the edges: straight, smooth (monotone) or steps
+     * @default "smooth"
+     */
+    curve?: ChartCurve;
+    /**
+     * Stacks the areas on top of each other
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * Scales the stacks to 100% (implies `stacked`)
+     * @default false
+     */
+    percent?: boolean;
 }
 /** Props of BarChart */
 export interface BarChartProps extends ChartCommonProps {
@@ -92,77 +138,68 @@ export interface BarChartProps extends ChartCommonProps {
      * @default false
      */
     stacked?: boolean;
+    /**
+     * Scales the stacks to 100% (implies `stacked`)
+     * @default false
+     */
+    percent?: boolean;
+    /**
+     * Writes the value above every bar
+     * @default false
+     */
+    labels?: boolean;
+}
+/** Props of CandlestickChart */
+export interface CandlestickChartProps extends ChartCommonProps {
+    /**
+     * Series drawn as candles unless they set a `type` (e.g. a moving average
+     * `line`); data points carry `open`, `high`, `low` and `y` (the close)
+     */
+    series: readonly ChartSeries[];
+}
+/** Props of HeatmapChart */
+export interface HeatmapChartProps extends Omit<ChartCommonProps, "crosshair">, HeatmapConfig {
+}
+/** Props of Sparkline */
+export interface SparklineProps extends Pick<ChartCommonProps, "width" | "renderer" | "tooltip" | "palette" | "ariaLabel" | "onHover" | "renderTooltip" | "className" | "style" | "ref">, SparklineConfig {
+    /**
+     * Height of the sparkline; numbers are pixels
+     * @default 48
+     */
+    height?: number | string;
 }
 /** Props of ScatterChart */
 export interface ScatterChartProps extends ChartCommonProps {
     /** Series drawn as dots unless they set a `type` */
     series: readonly ChartSeries[];
 }
-/** A point of a QuadrantChart */
-export interface QuadrantPoint {
-    /** Position on the horizontal axis */
+/** Where a dragged QuadrantChart point was dropped */
+export interface QuadrantDropTarget {
+    /** Data coordinates of the drop */
     x: number;
-    /** Position on the vertical axis */
     y: number;
-    /** Text drawn next to the dot and shown in the tooltip */
-    label?: string;
-    /** Dot color (any CSS color); the color of its quadrant by default */
-    color?: string;
-    /** Dot diameter in pixels */
-    size?: number;
-}
-/** Title and color of a quadrant */
-export interface QuadrantRegion {
-    /** Title drawn in the outer corner of the quadrant */
-    label?: string;
-    /** Background tint and default dot color (any CSS color) */
-    color?: string;
-}
-/** The four quadrants of a QuadrantChart */
-export interface QuadrantRegions {
-    topLeft?: QuadrantRegion;
-    topRight?: QuadrantRegion;
-    bottomLeft?: QuadrantRegion;
-    bottomRight?: QuadrantRegion;
+    /** Quadrant of the drop, as seen on screen */
+    quadrant: QuadrantCorner;
 }
 /** Props of QuadrantChart */
-export interface QuadrantChartProps extends Omit<ChartCommonProps, "onPointClick" | "xAxis" | "yAxis"> {
-    /** Points to place */
-    points: readonly QuadrantPoint[];
-    /**
-     * Range of the horizontal axis
-     * @default [0, 10]
-     */
-    xDomain?: [number, number];
-    /**
-     * Range of the vertical axis
-     * @default [0, 10]
-     */
-    yDomain?: [number, number];
-    /** X value of the vertical divider (the middle of `xDomain` by default) */
-    xSplit?: number;
-    /** Y value of the horizontal divider (the middle of `yDomain` by default) */
-    ySplit?: number;
-    /** Titles and colors of the quadrants */
-    quadrants?: QuadrantRegions;
-    /** Title of the horizontal axis */
-    xLabel?: string;
-    /** Title of the vertical axis */
-    yLabel?: string;
-    /** Reverses the horizontal axis (e.g. "urgent" on the left) */
-    reverseX?: boolean;
-    /**
-     * Draws the labels next to the dots (overlapping labels are skipped)
-     * @default true
+export interface QuadrantChartProps extends Omit<ChartCommonProps, "onPointClick" | "onPlotClick" | "renderTooltip" | "xAxis" | "yAxis">, QuadrantConfig {
+    /** Called with the clicked point and its index */
+    onPointClick?: (point: QuadrantPoint, index: number) => void;
+    /** Called when the empty area of a quadrant is clicked */
+    onQuadrantClick?: (quadrant: QuadrantCorner, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * Called when a dragged point is released; the dots become draggable
+     * when it is set (the chart does not move them: update `points`)
      */
-    showLabels?: boolean;
+    onPointDrop?: (point: QuadrantPoint, index: number, target: QuadrantDropTarget) => void;
+    /** React content of the tooltip of a point */
+    renderTooltip?: (point: QuadrantPoint, index: number) => ReactNode;
     /**
-     * Dot diameter in pixels
-     * @default 12
+     * React content placed over each quadrant (e.g. an add button); the
+     * content receives pointer events, the rest of the quadrant does not
      */
-    pointSize?: number;
-    /** Name of the points in the tooltip */
-    name?: string;
-    /** Called with the clicked point and its index */
-    onPointClick?: (point: QuadrantPoint, index: number) => void;
+    quadrantContent?: Partial<Record<QuadrantCorner, ReactNode>>;
 }