minerva-design 1.2.0 → 1.3.0

package/dist/charts/engine/shapes/treemap.js

@@ -0,0 +1,213 @@
+import { mix as e, toCss as t } from "../color.js";
+import { font as n } from "../overlay.js";
+import { clamp as r, ellipsize as i, emptyLayout as a, finite as o, positive as s, readableFill as c, relativeLuminance as l, resolveWith as u, sum as d, textOn as f, uniqueKeys as p } from "./scene.js";
+//#region src/engine/shapes/treemap.ts
+var m = 20, h = (e, t) => {
+	let n = e.map(() => ({
+		x: t.x,
+		y: t.y,
+		width: 0,
+		height: 0
+	})), r = d(e.map((e) => Math.max(0, e)));
+	if (r <= 0 || t.width <= 0 || t.height <= 0) return n;
+	let i = t.width * t.height / r, a = e.map((e) => Math.max(0, e) * i), { x: o, y: s, width: c, height: l } = t, u = (e, t, n, r) => {
+		let i = e * e, a = r * r;
+		return Math.max(a * n / i, i / (a * t));
+	}, f = (e, t) => {
+		if (c >= l) {
+			let r = l > 0 ? Math.min(c, t / l) : 0, i = s;
+			for (let t of e) {
+				let e = r > 0 ? a[t] / r : 0;
+				n[t] = {
+					x: o,
+					y: i,
+					width: r,
+					height: e
+				}, i += e;
+			}
+			o += r, c = Math.max(0, c - r);
+		} else {
+			let r = c > 0 ? Math.min(l, t / c) : 0, i = o;
+			for (let t of e) {
+				let e = r > 0 ? a[t] / r : 0;
+				n[t] = {
+					x: i,
+					y: s,
+					width: e,
+					height: r
+				}, i += e;
+			}
+			s += r, l = Math.max(0, l - r);
+		}
+	}, p = [], m = 0, h = Infinity, g = 0;
+	return a.forEach((e, t) => {
+		if (!(e <= 0)) {
+			if (p.length) {
+				let t = Math.min(c, l);
+				u(m + e, Math.min(h, e), Math.max(g, e), t) > u(m, h, g, t) && (f(p, m), p = [], m = 0, h = Infinity, g = 0);
+			}
+			p.push(t), m += e, h = Math.min(h, e), g = Math.max(g, e);
+		}
+	}), p.length && f(p, m), n;
+}, g = (e, t) => {
+	let n = 0, r = (e, i, a, o) => {
+		let c = p(e.map((e) => e.name));
+		return e.map((e, l) => {
+			let u = a.length ? o : l, f = `${i}/${c[l]}`, p = [...a, e.name];
+			if (e.children?.length) {
+				let t = r(e.children, f, p, u);
+				return {
+					node: e,
+					key: f,
+					path: p,
+					top: u,
+					leaf: -1,
+					target: d(t.map((e) => e.target)),
+					children: t
+				};
+			}
+			return {
+				node: e,
+				key: f,
+				path: p,
+				top: u,
+				leaf: n++,
+				target: t.has(u) ? 0 : s(e.value),
+				children: []
+			};
+		});
+	};
+	return r(e.data, "", [], 0);
+}, _ = (e, t, n) => {
+	let r = (e) => e.forEach((e) => {
+		e.children.length ? r(e.children) : n.set(e.key, e.target);
+	});
+	r(g(e, t));
+}, v = (e, t) => ({
+	x: e.x + t,
+	y: e.y + t,
+	width: Math.max(0, e.width - 2 * t),
+	height: Math.max(0, e.height - 2 * t)
+}), y = (s, p) => {
+	let { theme: _, area: y, measure: b, hidden: x } = p, S = g(s, x), C = d(S.map((e) => e.target)), w = /* @__PURE__ */ new Map(), T = (e) => {
+		let t = e.children.length ? d(e.children.map(T)) : Math.max(0, p.value(e.key, e.target));
+		return w.set(e, t), t;
+	}, E = d(S.map(T));
+	if (C <= 0 && E <= 1e-9) return a(p);
+	let D = Math.max(0, o(s.gap, 2)), O = s.headers !== !1, k = n(_, 12, 500), A = n(_, 11), j = n(_, 11, 600), M = [], N = [], P = l(_.background) < .2, F = (n, r, a) => {
+		let o = n.filter((e) => (w.get(e) ?? 0) > 1e-9).sort((e, t) => (w.get(t) ?? 0) - (w.get(e) ?? 0)), s = h(o.map((e) => w.get(e) ?? 0), r), l = Math.min(.14, .5 / Math.max(1, o.length - 1));
+		o.forEach((n, r) => {
+			let o = v(s[r], D / 2);
+			if (o.width < 1 || o.height < 1) return;
+			let d = a ? n.node.color ? u(_, n.node.color, a) : e(a, _.background, r * l) : p.color(n.node.color, n.top);
+			if (n.children.length) {
+				let e = o;
+				if (O && o.height > 34 && o.width > 36) {
+					M.push({
+						kind: "rect",
+						x: o.x,
+						y: o.y,
+						width: o.width,
+						height: o.height,
+						radius: 4,
+						fill: t(d, .14)
+					});
+					let r = i(n.node.name, o.width - 12, j, b);
+					r && M.push({
+						kind: "text",
+						x: o.x + 6,
+						y: o.y + m / 2 + 1,
+						text: r,
+						font: j,
+						color: t(_.text, .85),
+						align: "left",
+						baseline: "middle"
+					}), e = {
+						x: o.x + 2,
+						y: o.y + m,
+						width: o.width - 4,
+						height: o.height - m - 2
+					};
+				}
+				F(n.children, e, d);
+				return;
+			}
+			let h = c(P ? e(d, _.background, .18) : d), g = t(h);
+			if (M.push({
+				kind: "rect",
+				x: o.x,
+				y: o.y,
+				width: o.width,
+				height: o.height,
+				radius: Math.min(4, o.width / 2, o.height / 2),
+				fill: g,
+				hit: n.leaf,
+				brighten: !0
+			}), o.width >= 36 && o.height >= 22) {
+				let e = f(h), t = i(n.node.name, o.width - 12, k, b);
+				t && M.push({
+					kind: "text",
+					x: o.x + 6,
+					y: o.y + 6,
+					text: t,
+					font: k,
+					color: e,
+					align: "left",
+					baseline: "top",
+					hit: n.leaf
+				});
+				let r = p.format(n.target);
+				t && o.height >= 38 && b(r, A) <= o.width - 12 && M.push({
+					kind: "text",
+					x: o.x + 6,
+					y: o.y + 22,
+					text: r,
+					font: A,
+					color: e,
+					align: "left",
+					baseline: "top",
+					hit: n.leaf
+				});
+			}
+			if (n.target > 0) {
+				let e = C > 0 ? n.target / C : 0;
+				N.push({
+					index: n.leaf,
+					name: n.node.name,
+					value: n.target,
+					percent: e,
+					share: p.percent(e),
+					color: g,
+					path: n.path,
+					x: o.x + o.width / 2,
+					y: o.y + o.height / 2,
+					rows: [{
+						name: "Value",
+						value: p.format(n.target)
+					}, {
+						name: "Share",
+						value: p.percent(e)
+					}]
+				});
+			}
+		});
+	};
+	F(S, y, null), N.sort((e, t) => e.index - t.index);
+	let I = r(p.enter, 0, 1);
+	return {
+		nodes: M,
+		items: N,
+		dim: .55,
+		empty: !1,
+		...I < 1 ? { enter: {
+			alpha: I,
+			scale: .94 + .06 * I,
+			cx: y.x + y.width / 2,
+			cy: y.y + y.height / 2
+		} } : {}
+	};
+};
+//#endregion
+export { y as layoutTreemap, h as squarify, _ as treemapValues };
+
+//# sourceMappingURL=treemap.js.map

package/dist/charts/engine/shapes/treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"treemap.js","names":["HEADER","squarify","out","values","rect","total","sum","v","scale","areas","w","h","worst","s2","s","side2","side","max","min","place","cw","yy","y","i","row","hh","rh","xx","x","ww","rowSum","rowMin","rowMax","a","build","leafCount","walk","keys","uniqueKeys","nodes","nd","t","parentPath","top","j","key","parentKey","path","node","children","ch","hidden","positive","o","treemapValues","visit","b","shrink","r","d","layoutTreemap","c","tree","rootTotal","shown","measureShown","shownTotal","emptyLayout","gap","finite","headers","nameFont","font","theme","valueFont","headerFont","items","dark","relativeLuminance","level","sorted","list","rects","step","cell","color","parentColor","resolveWith","mix","content","toCss","title","ellipsize","measure","fill","readableFill","css","ink","textOn","name","value","percent","area","enter","clamp"],"sources":["../../../../../charts/src/engine/shapes/treemap.ts"],"sourcesContent":["// Treemap layout: squarified rectangles, parent headers, a palette color per\n// top-level node and lighter shades for its children.\n\nimport { mix, toCss, type Rgba } from \"../color\";\nimport { font } from \"../overlay\";\nimport {\n  clamp,\n  ellipsize,\n  emptyLayout,\n  finite,\n  positive,\n  readableFill,\n  relativeLuminance,\n  resolveWith,\n  sum,\n  textOn,\n  uniqueKeys,\n  type LayoutContext,\n  type LayoutResult,\n  type ShapeItem,\n  type ShapeNode,\n  type ShapeRect,\n} from \"./scene\";\nimport type { TreemapChartOptions, TreemapNode } from \"./types\";\n\nconst HEADER = 20;\n\n/**\n * Squarified treemap (Bruls et al.): rectangles of areas proportional to\n * `values` (best sorted descending) filling `rect`, with aspect ratios close to 1.\n */\nexport const squarify = (\n  values: readonly number[],\n  rect: ShapeRect,\n): ShapeRect[] => {\n  const out: ShapeRect[] = values.map(() => ({\n    x: rect.x,\n    y: rect.y,\n    width: 0,\n    height: 0,\n  }));\n  const total = sum(values.map((v) => Math.max(0, v)));\n  if (total <= 0 || rect.width <= 0 || rect.height <= 0) return out;\n  const scale = (rect.width * rect.height) / total;\n  const areas = values.map((v) => Math.max(0, v) * scale);\n  let { x, y, width: w, height: h } = rect;\n\n  const worst = (s: number, min: number, max: number, side: number) => {\n    const s2 = s * s;\n    const side2 = side * side;\n    return Math.max((side2 * max) / s2, s2 / (side2 * min));\n  };\n  const place = (row: number[], s: number) => {\n    if (w >= h) {\n      const cw = h > 0 ? Math.min(w, s / h) : 0;\n      let yy = y;\n      for (const i of row) {\n        const hh = cw > 0 ? areas[i] / cw : 0;\n        out[i] = { x, y: yy, width: cw, height: hh };\n        yy += hh;\n      }\n      x += cw;\n      w = Math.max(0, w - cw);\n    } else {\n      const rh = w > 0 ? Math.min(h, s / w) : 0;\n      let xx = x;\n      for (const i of row) {\n        const ww = rh > 0 ? areas[i] / rh : 0;\n        out[i] = { x: xx, y, width: ww, height: rh };\n        xx += ww;\n      }\n      y += rh;\n      h = Math.max(0, h - rh);\n    }\n  };\n\n  let row: number[] = [];\n  let rowSum = 0;\n  let rowMin = Infinity;\n  let rowMax = 0;\n  areas.forEach((a, i) => {\n    if (a <= 0) return;\n    if (row.length) {\n      const side = Math.min(w, h);\n      const next = worst(\n        rowSum + a,\n        Math.min(rowMin, a),\n        Math.max(rowMax, a),\n        side,\n      );\n      if (next > worst(rowSum, rowMin, rowMax, side)) {\n        place(row, rowSum);\n        row = [];\n        rowSum = 0;\n        rowMin = Infinity;\n        rowMax = 0;\n      }\n    }\n    row.push(i);\n    rowSum += a;\n    rowMin = Math.min(rowMin, a);\n    rowMax = Math.max(rowMax, a);\n  });\n  if (row.length) place(row, rowSum);\n  return out;\n};\n\ninterface Built {\n  node: TreemapNode;\n  key: string;\n  path: string[];\n  top: number;\n  /** Index in the flattened leaves (leaves only) */\n  leaf: number;\n  target: number;\n  children: Built[];\n}\n\n/** Tree with the target values; hidden top-level nodes count 0 */\nconst build = (\n  o: TreemapChartOptions,\n  hidden: ReadonlySet<number>,\n): Built[] => {\n  let leafCount = 0;\n  const walk = (\n    nodes: readonly TreemapNode[],\n    parentKey: string,\n    parentPath: string[],\n    top: number,\n  ): Built[] => {\n    const keys = uniqueKeys(nodes.map((nd) => nd.name));\n    return nodes.map((node, j) => {\n      const t = parentPath.length ? top : j;\n      const key = `${parentKey}/${keys[j]}`;\n      const path = [...parentPath, node.name];\n      if (node.children?.length) {\n        const children = walk(node.children, key, path, t);\n        return {\n          node,\n          key,\n          path,\n          top: t,\n          leaf: -1,\n          target: sum(children.map((ch) => ch.target)),\n          children,\n        };\n      }\n      return {\n        node,\n        key,\n        path,\n        top: t,\n        leaf: leafCount++,\n        target: hidden.has(t) ? 0 : positive(node.value),\n        children: [],\n      };\n    });\n  };\n  return walk(o.data, \"\", [], 0);\n};\n\nexport const treemapValues = (\n  o: TreemapChartOptions,\n  hidden: ReadonlySet<number>,\n  out: Map<string, number>,\n) => {\n  const visit = (nodes: Built[]) =>\n    nodes.forEach((b) => {\n      if (b.children.length) visit(b.children);\n      else out.set(b.key, b.target);\n    });\n  visit(build(o, hidden));\n};\n\n/** Leaves in the flattened order (the hover / click `index`) */\nexport const treemapLeaves = (data: readonly TreemapNode[]) => {\n  const leaves: { node: TreemapNode; path: string[] }[] = [];\n  const visit = (nodes: readonly TreemapNode[], path: string[]) =>\n    nodes.forEach((node) => {\n      const p = [...path, node.name];\n      if (node.children?.length) visit(node.children, p);\n      else leaves.push({ node, path: p });\n    });\n  visit(data, []);\n  return leaves;\n};\n\nconst shrink = (r: ShapeRect, d: number): ShapeRect => ({\n  x: r.x + d,\n  y: r.y + d,\n  width: Math.max(0, r.width - 2 * d),\n  height: Math.max(0, r.height - 2 * d),\n});\n\nexport const layoutTreemap = (\n  o: TreemapChartOptions,\n  c: LayoutContext,\n): LayoutResult => {\n  const { theme, area, measure, hidden } = c;\n  const tree = build(o, hidden);\n  const rootTotal = sum(tree.map((b) => b.target));\n  // displayed (animated) values\n  const shown = new Map<Built, number>();\n  const measureShown = (b: Built): number => {\n    const v = b.children.length\n      ? sum(b.children.map(measureShown))\n      : Math.max(0, c.value(b.key, b.target));\n    shown.set(b, v);\n    return v;\n  };\n  const shownTotal = sum(tree.map(measureShown));\n  if (rootTotal <= 0 && shownTotal <= 1e-9) return emptyLayout(c);\n\n  const gap = Math.max(0, finite(o.gap, 2));\n  const headers = o.headers !== false;\n  const nameFont = font(theme, 12, 500);\n  const valueFont = font(theme, 11);\n  const headerFont = font(theme, 11, 600);\n  const nodes: ShapeNode[] = [];\n  const items: ShapeItem[] = [];\n  // dark themes: fills slightly toward the background so that labels read well\n  const dark = relativeLuminance(theme.background) < 0.2;\n\n  const level = (list: Built[], rect: ShapeRect, parentColor: Rgba | null) => {\n    const sorted = list\n      .filter((b) => (shown.get(b) ?? 0) > 1e-9)\n      .sort((a, b) => (shown.get(b) ?? 0) - (shown.get(a) ?? 0));\n    const rects = squarify(\n      sorted.map((b) => shown.get(b) ?? 0),\n      rect,\n    );\n    const step = Math.min(0.14, 0.5 / Math.max(1, sorted.length - 1));\n    sorted.forEach((b, j) => {\n      const cell = shrink(rects[j], gap / 2);\n      if (cell.width < 1 || cell.height < 1) return;\n      const color = parentColor\n        ? b.node.color\n          ? resolveWith(theme, b.node.color, parentColor)\n          : mix(parentColor, theme.background, j * step)\n        : c.color(b.node.color, b.top);\n      if (b.children.length) {\n        let content = cell;\n        if (headers && cell.height > HEADER + 14 && cell.width > 36) {\n          nodes.push({\n            kind: \"rect\",\n            x: cell.x,\n            y: cell.y,\n            width: cell.width,\n            height: cell.height,\n            radius: 4,\n            fill: toCss(color, 0.14),\n          });\n          const title = ellipsize(\n            b.node.name,\n            cell.width - 12,\n            headerFont,\n            measure,\n          );\n          if (title)\n            nodes.push({\n              kind: \"text\",\n              x: cell.x + 6,\n              y: cell.y + HEADER / 2 + 1,\n              text: title,\n              font: headerFont,\n              color: toCss(theme.text, 0.85),\n              align: \"left\",\n              baseline: \"middle\",\n            });\n          content = {\n            x: cell.x + 2,\n            y: cell.y + HEADER,\n            width: cell.width - 4,\n            height: cell.height - HEADER - 2,\n          };\n        }\n        level(b.children, content, color);\n        return;\n      }\n      const fill = readableFill(\n        dark ? mix(color, theme.background, 0.18) : color,\n      );\n      const css = toCss(fill);\n      nodes.push({\n        kind: \"rect\",\n        x: cell.x,\n        y: cell.y,\n        width: cell.width,\n        height: cell.height,\n        radius: Math.min(4, cell.width / 2, cell.height / 2),\n        fill: css,\n        hit: b.leaf,\n        brighten: true,\n      });\n      if (cell.width >= 36 && cell.height >= 22) {\n        const ink = textOn(fill);\n        const name = ellipsize(b.node.name, cell.width - 12, nameFont, measure);\n        if (name)\n          nodes.push({\n            kind: \"text\",\n            x: cell.x + 6,\n            y: cell.y + 6,\n            text: name,\n            font: nameFont,\n            color: ink,\n            align: \"left\",\n            baseline: \"top\",\n            hit: b.leaf,\n          });\n        const value = c.format(b.target);\n        if (\n          name &&\n          cell.height >= 38 &&\n          measure(value, valueFont) <= cell.width - 12\n        )\n          nodes.push({\n            kind: \"text\",\n            x: cell.x + 6,\n            y: cell.y + 22,\n            text: value,\n            font: valueFont,\n            color: ink,\n            align: \"left\",\n            baseline: \"top\",\n            hit: b.leaf,\n          });\n      }\n      if (b.target > 0) {\n        const percent = rootTotal > 0 ? b.target / rootTotal : 0;\n        items.push({\n          index: b.leaf,\n          name: b.node.name,\n          value: b.target,\n          percent,\n          share: c.percent(percent),\n          color: css,\n          path: b.path,\n          x: cell.x + cell.width / 2,\n          y: cell.y + cell.height / 2,\n          rows: [\n            { name: \"Value\", value: c.format(b.target) },\n            { name: \"Share\", value: c.percent(percent) },\n          ],\n        });\n      }\n    });\n  };\n  level(tree, area, null);\n  items.sort((a, b) => a.index - b.index);\n\n  const enter = clamp(c.enter, 0, 1);\n  return {\n    nodes,\n    items,\n    dim: 0.55,\n    empty: false,\n    ...(enter < 1\n      ? {\n          enter: {\n            alpha: enter,\n            scale: 0.94 + 0.06 * enter,\n            cx: area.x + area.width / 2,\n            cy: area.y + area.height / 2,\n          },\n        }\n      : {}),\n  };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,292 @@
+import { ChartPadding } from '../types.cjs';
+/** Kind of shape chart */
+export type ShapeChartType = "pie" | "radar" | "gauge" | "funnel" | "treemap";
+/** A named value (pie slice, funnel stage) */
+export interface ShapeDatum {
+    /** Name shown in the legend, the labels and the tooltip */
+    name: string;
+    /** Value (negative values count as 0) */
+    value: number;
+    /** Color (any CSS color, `var(--x)` included); the palette when omitted */
+    color?: string;
+}
+/** Legend of a shape chart */
+export interface ShapeLegendOptions {
+    /**
+     * Legend position
+     * @default "bottom"
+     */
+    position?: "top" | "bottom";
+    /**
+     * Clicking an item hides / shows its slice, stage or series
+     * @default true
+     */
+    toggle?: boolean;
+}
+/** What the pointer is over */
+export interface ShapeHoverEvent {
+    /** Index of the slice / stage / series / leaf (treemap: in the flattened leaves) */
+    index: number;
+    /** Radar: index of the indicator closest to the pointer */
+    indicator?: number;
+    name: string;
+    value: number;
+    /** Share of the total, 0-1 (pie: of the visible total, funnel: of the first stage, treemap: of the root, gauge: of the range) */
+    percent: number;
+    /** Resolved CSS color of the mark */
+    color: string;
+    /** Treemap: names from the root to the leaf */
+    path?: string[];
+}
+/** Tooltip of a shape chart */
+export interface ShapeTooltipOptions {
+    /** Renders the tooltip content (a string is set as text) */
+    render?: (event: ShapeHoverEvent) => string | Node | null;
+}
+/** Options shared by every shape chart */
+export interface ShapeChartCommonOptions {
+    /** Colors of the marks without `color` (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    palette?: readonly string[];
+    /** Legend; shown by default for pie, funnel and multi-series radar charts */
+    legend?: boolean | ShapeLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | ShapeTooltipOptions;
+    /** Formats the values (labels, tooltip); compact numbers (1.2k, 3.4M) by default */
+    format?: (value: number) => string;
+    /**
+     * Formats the shares (labels, conversion rates, tooltip); `share` is 0-1
+     * @default one decimal, e.g. "40.0%"
+     */
+    percentFormat?: (share: number) => string;
+    /**
+     * Indexes of the hidden slices / stages / radar series / top-level treemap
+     * nodes. When set, the chart is controlled: this list wins over the legend
+     * state, and legend clicks (or `toggle()`) only emit the `toggle` event,
+     * whose `hiddenIndexes` should be passed back here.
+     */
+    hidden?: readonly number[];
+    /**
+     * Entry / update animation (skipped when the user prefers reduced motion)
+     * @default true
+     */
+    animation?: boolean;
+    /** Space around the drawing, in CSS pixels */
+    padding?: ChartPadding;
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+}
+/** Pie / donut chart */
+export interface PieChartOptions extends ShapeChartCommonOptions {
+    type: "pie";
+    data: readonly ShapeDatum[];
+    /**
+     * Inner radius as a fraction of the outer radius: 0 = pie, 0.6 = donut
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * Angle of the first slice, degrees clockwise from 12 o'clock
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Gap between the slices, in pixels
+     * @default 1 (pie), 2 (donut)
+     */
+    padAngle?: number;
+    /**
+     * Corner radius of the slices, in pixels
+     * @default 0 (pie), 4 (donut)
+     */
+    cornerRadius?: number;
+    /**
+     * Nightingale rose: the radius (instead of the angle) shows the value
+     * @default false
+     */
+    rose?: boolean;
+    /**
+     * Slice labels: `outside` with leader lines, `inside` the slices, or none
+     * @default "outside" (up to 12 slices), "none" otherwise
+     */
+    labels?: "outside" | "inside" | "none";
+    /** What a label shows: name, value, percent (combinable) */
+    labelContent?: readonly ("name" | "value" | "percent")[];
+    /** Big text in the hole of a donut (e.g. the total) */
+    centerValue?: string;
+    /** Small text under `centerValue` */
+    centerLabel?: string;
+}
+/** An axis of a radar chart */
+export interface RadarIndicator {
+    name: string;
+    /** Value at the rim; the largest value of the series when omitted */
+    max?: number;
+    /**
+     * Value at the center
+     * @default 0
+     */
+    min?: number;
+}
+/** A polygon of a radar chart */
+export interface RadarSeries {
+    name?: string;
+    /** One value per indicator */
+    values: readonly number[];
+    color?: string;
+    /**
+     * Fill opacity, 0-1
+     * @default 0.18
+     */
+    opacity?: number;
+}
+/** Radar (spider) chart */
+export interface RadarChartOptions extends ShapeChartCommonOptions {
+    type: "radar";
+    indicators: readonly RadarIndicator[];
+    series: readonly RadarSeries[];
+    /**
+     * Grid shape
+     * @default "polygon"
+     */
+    shape?: "polygon" | "circle";
+    /**
+     * Number of grid rings
+     * @default 4
+     */
+    levels?: number;
+    /**
+     * Dots on the vertices
+     * @default true
+     */
+    dots?: boolean;
+}
+/** A colored range of a gauge */
+export interface GaugeBand {
+    /** Upper bound of the band (the previous band's bound, or `min`, is the lower one) */
+    to: number;
+    color: string;
+}
+/** Gauge (speedometer) chart */
+export interface GaugeChartOptions extends ShapeChartCommonOptions {
+    type: "gauge";
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** Caption under the value */
+    label?: string;
+    /**
+     * Total angle of the arc, degrees
+     * @default 240
+     */
+    sweep?: number;
+    /**
+     * Thickness of the arc as a fraction of the radius
+     * @default 0.16
+     */
+    thickness?: number;
+    /** Colored ranges of the track; the value arc takes the color of its band */
+    bands?: readonly GaugeBand[];
+    /** Color of the value arc (when there are no bands); the first palette color by default */
+    color?: string;
+    /**
+     * Draws a needle in addition to the value arc
+     * @default false
+     */
+    needle?: boolean;
+    /**
+     * Tick labels at the ends (and at the band bounds)
+     * @default true
+     */
+    ticks?: boolean;
+}
+/** Funnel chart */
+export interface FunnelChartOptions extends ShapeChartCommonOptions {
+    type: "funnel";
+    data: readonly ShapeDatum[];
+    /**
+     * Order of the stages
+     * @default "none" (data order)
+     */
+    sort?: "descending" | "ascending" | "none";
+    /**
+     * Vertical gap between the stages, in pixels
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * Shows the conversion rate from the previous stage
+     * @default true
+     */
+    conversion?: boolean;
+    /**
+     * Shape of the stages: trapezoids that narrow to the next stage, or centered bars
+     * @default "trapezoid"
+     */
+    shape?: "trapezoid" | "bar";
+}
+/** A node of a treemap: leaves carry a value, parents sum their children */
+export interface TreemapNode {
+    name: string;
+    value?: number;
+    color?: string;
+    children?: readonly TreemapNode[];
+}
+/** Treemap chart */
+export interface TreemapChartOptions extends ShapeChartCommonOptions {
+    type: "treemap";
+    data: readonly TreemapNode[];
+    /**
+     * Gap between the cells, in pixels
+     * @default 2
+     */
+    gap?: number;
+    /**
+     * Draws the names of the parents above their children
+     * @default true
+     */
+    headers?: boolean;
+}
+/** Options of a shape chart, by `type` */
+export type ShapeChartOptions = PieChartOptions | RadarChartOptions | GaugeChartOptions | FunnelChartOptions | TreemapChartOptions;
+/** A legend item was clicked (or `toggle()` was called) */
+export interface ShapeToggleEvent {
+    /** Index of the slice / stage / radar series / top-level treemap node */
+    index: number;
+    /** Whether that entry is (or, in a controlled chart, would be) hidden */
+    hidden: boolean;
+    /** Every hidden index after the toggle, ascending */
+    hiddenIndexes: number[];
+}
+/** Events of a shape chart */
+export interface ShapeChartEventMap {
+    hover: ShapeHoverEvent | null;
+    click: ShapeHoverEvent;
+    /**
+     * Legend click or `toggle()` call. Uncontrolled charts emit it after
+     * hiding / showing the entry; with the `hidden` option nothing changes
+     * until the new `hiddenIndexes` are passed back.
+     */
+    toggle: ShapeToggleEvent;
+}
+/** Shape chart created by `createShapeChart` */
+export interface ShapeChartInstance {
+    /** Replaces the options (animates from the previous values) */
+    setOptions(options: ShapeChartOptions): void;
+    /** Measures the container again (a ResizeObserver does it automatically) */
+    resize(): void;
+    /** Reads the CSS variables again (theme changes on `<html>` / `<body>` are detected automatically) */
+    refreshTheme(): void;
+    /**
+     * Hides / shows a slice, stage, radar series or top-level treemap node by
+     * index and emits `toggle` (with the `hidden` option: only emits `toggle`)
+     */
+    toggle(index: number): void;
+    /** Indexes of the hidden entries, ascending */
+    getHidden(): number[];
+    /** Subscribes to an event; returns the unsubscribe function */
+    on<K extends keyof ShapeChartEventMap>(type: K, listener: (event: ShapeChartEventMap[K]) => void): () => void;
+    /** Removes the DOM */
+    destroy(): void;
+}