@k2b/ui 0.51.0 → 0.52.0

package/dist/browser/charts/core/svg-scatter.js

@@ -0,0 +1,114 @@
+// Ported SVG algorithm, kept verbatim; separate module for per-kind frame loading.
+
+import { chartDatumSvg, collectAxisValues, collectSeriesLegend, computeAxisScale, computeDomain, computePlotArea, DEFAULT_HEIGHT, DEFAULT_MARKERS, DEFAULT_WIDTH, emptyChart, fmt, isOnAxis, linearRegression, mapRange, markerPath, normalizePadding, pickMapper, pointValues, renderErrorBars, renderHeader, renderLegend, renderReferenceLines, renderXAxisNumeric, renderYAxis, svgRoot } from "./svg-common";
+/**
+ * Render a scatter plot. Each series produces a group of circles, one per
+ * data point, classed `stdlib-chart-series-N` so series colors stay
+ * consistent across charts.
+ *
+ * Non-finite x or y values are filtered out. An empty `series` (or one with
+ * no finite points) renders an empty-state SVG with a "no data" label.
+ *
+ * @example
+ * charts.scatter({ series: [{ data: [{x:1,y:2},{x:2,y:5},{x:3,y:3}] }] });
+ *
+ * @example
+ * charts.scatter({
+ *   series: [
+ *     { label: "Group A", data: [...] },
+ *     { label: "Group B", data: [...] },
+ *   ],
+ *   xAxis: { label: "Time (s)" },
+ *   yAxis: { label: "Value", format: v => `${v}k` },
+ * });
+ */
+export const scatter = opts => {
+  const width = opts.width ?? DEFAULT_WIDTH;
+  const height = opts.height ?? DEFAULT_HEIGHT;
+  const padding = normalizePadding(opts.padding);
+  const header = renderHeader(width, opts.title, opts.subtitle);
+  const legendItems = collectSeriesLegend(opts);
+  const legendHeight = legendItems.length > 0 ? 20 : 0;
+  const finitePoints = opts.series.flatMap(s => s.data).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y));
+  if (finitePoints.length === 0) return emptyChart(width, height, opts.className);
+  const area = computePlotArea(width, height, padding, !!opts.xAxis?.label, !!opts.yAxis?.label, header.height, legendHeight);
+  const xAxis = computeAxisScale(collectAxisValues(opts.series, "x"), opts.xAxis);
+  const yAxis = computeAxisScale(collectAxisValues(opts.series, "y"), opts.yAxis);
+  const xMap = pickMapper(xAxis.scale);
+  const yMap = pickMapper(yAxis.scale);
+
+  // Size dimension: if any point has a finite `size`, normalize across all
+  // points to the configured pixel range; points without size fall back to
+  // the midpoint so they remain visible.
+  const sizes = finitePoints.map(p => p.size).filter(s => typeof s === "number" && Number.isFinite(s));
+  const sizeRange = opts.sizeRange ?? [3, 12];
+  const useSizes = sizes.length > 0;
+  const sizeDomain = useSizes ? computeDomain(sizes) : [0, 1];
+  const fallbackR = (sizeRange[0] + sizeRange[1]) / 2;
+  const body = [];
+  body.push(renderYAxis(yAxis, area, opts.yAxis));
+  body.push(renderXAxisNumeric(xAxis, area, height - legendHeight, opts.xAxis));
+
+  // Error bars render under the points so the points sit on top of the bar
+  // intersections — easier to read.
+  body.push(renderErrorBars(opts.series, xAxis, yAxis, area));
+  opts.series.forEach((s, i) => {
+    const cls = `stdlib-chart-series-${i % 8}`;
+    const shape = s.marker ?? (opts.autoVariant ? DEFAULT_MARKERS[i % DEFAULT_MARKERS.length] : "circle");
+    const elements = s.data.map((p, index) => ({
+      p,
+      index
+    })).filter(({
+      p
+    }) => isOnAxis(xAxis, p.x) && isOnAxis(yAxis, p.y)).map(({
+      p,
+      index
+    }) => {
+      const cx = xMap(p.x, xAxis.domain, [area.x0, area.x1]);
+      const cy = yMap(p.y, yAxis.domain, [area.y1, area.y0]);
+      const r = useSizes ? typeof p.size === "number" && Number.isFinite(p.size) ? mapRange(p.size, sizeDomain, sizeRange) : fallbackR : 3;
+      const datum = {
+        index,
+        seriesIndex: i,
+        role: "point",
+        label: s.label,
+        anchor: [cx, cy],
+        values: pointValues(p, opts.xAxis, opts.yAxis)
+      };
+      if (shape === "circle") {
+        return chartDatumSvg(`<circle class="stdlib-chart-point" cx="${fmt(cx)}" cy="${fmt(cy)}" r="${fmt(r)}"/>`, datum, opts.inspect);
+      }
+      return chartDatumSvg(`<path class="stdlib-chart-point" d="${markerPath(shape, cx, cy, r)}"/>`, datum, opts.inspect);
+    }).join("");
+    if (elements) body.push(`<g class="${cls}">${elements}</g>`);
+  });
+
+  // Optional trend line (across all series). Renders after data so it's visible.
+  if (opts.trendline) {
+    const reg = linearRegression(finitePoints);
+    if (reg !== null) {
+      const x0 = xAxis.domain[0];
+      const x1 = xAxis.domain[1];
+      const y0 = reg.slope * x0 + reg.intercept;
+      const y1 = reg.slope * x1 + reg.intercept;
+      // Clip to plot area in pixel space (visible portion of the regression).
+      const px0 = xMap(x0, xAxis.domain, [area.x0, area.x1]);
+      const px1 = xMap(x1, xAxis.domain, [area.x0, area.x1]);
+      const py0 = yMap(y0, yAxis.domain, [area.y1, area.y0]);
+      const py1 = yMap(y1, yAxis.domain, [area.y1, area.y0]);
+      body.push(`<line class="stdlib-chart-trendline" x1="${fmt(px0)}" y1="${fmt(py0)}" x2="${fmt(px1)}" y2="${fmt(py1)}"/>`);
+    }
+  }
+
+  // References render AFTER data so labels stay on top (z-order matters in SVG).
+  if (opts.references && opts.references.length > 0) {
+    body.push(renderReferenceLines(opts.references, xAxis, yAxis, area));
+  }
+  const legend = renderLegend(legendItems, width, height - legendHeight);
+  return svgRoot({
+    width,
+    height,
+    className: opts.className
+  }, header.svg + body.join("") + legend.svg);
+};
+//# sourceMappingURL=svg-scatter.js.map

package/dist/browser/charts/core/svg-scatter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["charts/core/svg-scatter.ts"],"sourcesContent":["// Ported SVG algorithm, kept verbatim; separate module for per-kind frame loading.\n\nimport {\n  chartDatumSvg,\n  collectAxisValues,\n  collectSeriesLegend,\n  computeAxisScale,\n  computeDomain,\n  computePlotArea,\n  DEFAULT_HEIGHT,\n  DEFAULT_MARKERS,\n  DEFAULT_WIDTH,\n  emptyChart,\n  fmt,\n  isOnAxis,\n  linearRegression,\n  mapRange,\n  markerPath,\n  normalizePadding,\n  pickMapper,\n  pointValues,\n  renderErrorBars,\n  renderHeader,\n  renderLegend,\n  renderReferenceLines,\n  renderXAxisNumeric,\n  renderYAxis,\n  type ScatterOptions,\n  svgRoot,\n} from \"./svg-common\";\nimport type { ChartDatum } from \"./types\";\n/**\n * Render a scatter plot. Each series produces a group of circles, one per\n * data point, classed `stdlib-chart-series-N` so series colors stay\n * consistent across charts.\n *\n * Non-finite x or y values are filtered out. An empty `series` (or one with\n * no finite points) renders an empty-state SVG with a \"no data\" label.\n *\n * @example\n * charts.scatter({ series: [{ data: [{x:1,y:2},{x:2,y:5},{x:3,y:3}] }] });\n *\n * @example\n * charts.scatter({\n *   series: [\n *     { label: \"Group A\", data: [...] },\n *     { label: \"Group B\", data: [...] },\n *   ],\n *   xAxis: { label: \"Time (s)\" },\n *   yAxis: { label: \"Value\", format: v => `${v}k` },\n * });\n */\nexport const scatter = (opts: ScatterOptions): string => {\n  const width = opts.width ?? DEFAULT_WIDTH;\n  const height = opts.height ?? DEFAULT_HEIGHT;\n  const padding = normalizePadding(opts.padding);\n  const header = renderHeader(width, opts.title, opts.subtitle);\n  const legendItems = collectSeriesLegend(opts);\n  const legendHeight = legendItems.length > 0 ? 20 : 0;\n\n  const finitePoints = opts.series.flatMap((s) => s.data).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y));\n  if (finitePoints.length === 0) return emptyChart(width, height, opts.className);\n\n  const area = computePlotArea(width, height, padding, !!opts.xAxis?.label, !!opts.yAxis?.label, header.height, legendHeight);\n\n  const xAxis = computeAxisScale(collectAxisValues(opts.series, \"x\"), opts.xAxis);\n  const yAxis = computeAxisScale(collectAxisValues(opts.series, \"y\"), opts.yAxis);\n  const xMap = pickMapper(xAxis.scale);\n  const yMap = pickMapper(yAxis.scale);\n\n  // Size dimension: if any point has a finite `size`, normalize across all\n  // points to the configured pixel range; points without size fall back to\n  // the midpoint so they remain visible.\n  const sizes = finitePoints.map((p) => p.size).filter((s): s is number => typeof s === \"number\" && Number.isFinite(s));\n  const sizeRange = opts.sizeRange ?? [3, 12];\n  const useSizes = sizes.length > 0;\n  const sizeDomain = useSizes ? computeDomain(sizes) : ([0, 1] as [number, number]);\n  const fallbackR = (sizeRange[0] + sizeRange[1]) / 2;\n\n  const body: string[] = [];\n  body.push(renderYAxis(yAxis, area, opts.yAxis));\n  body.push(renderXAxisNumeric(xAxis, area, height - legendHeight, opts.xAxis));\n\n  // Error bars render under the points so the points sit on top of the bar\n  // intersections — easier to read.\n  body.push(renderErrorBars(opts.series, xAxis, yAxis, area));\n\n  opts.series.forEach((s, i) => {\n    const cls = `stdlib-chart-series-${i % 8}`;\n    const shape = s.marker ?? (opts.autoVariant ? DEFAULT_MARKERS[i % DEFAULT_MARKERS.length]! : \"circle\");\n    const elements = s.data\n      .map((p, index) => ({ p, index }))\n      .filter(({ p }) => isOnAxis(xAxis, p.x) && isOnAxis(yAxis, p.y))\n      .map(({ p, index }) => {\n        const cx = xMap(p.x, xAxis.domain, [area.x0, area.x1]);\n        const cy = yMap(p.y, yAxis.domain, [area.y1, area.y0]);\n        const r = useSizes\n          ? typeof p.size === \"number\" && Number.isFinite(p.size)\n            ? mapRange(p.size, sizeDomain, sizeRange)\n            : fallbackR\n          : 3;\n        const datum: ChartDatum = {\n          index,\n          seriesIndex: i,\n          role: \"point\",\n          label: s.label,\n          anchor: [cx, cy],\n          values: pointValues(p, opts.xAxis, opts.yAxis),\n        };\n        if (shape === \"circle\") {\n          return chartDatumSvg(`<circle class=\"stdlib-chart-point\" cx=\"${fmt(cx)}\" cy=\"${fmt(cy)}\" r=\"${fmt(r)}\"/>`, datum, opts.inspect);\n        }\n        return chartDatumSvg(`<path class=\"stdlib-chart-point\" d=\"${markerPath(shape, cx, cy, r)}\"/>`, datum, opts.inspect);\n      })\n      .join(\"\");\n    if (elements) body.push(`<g class=\"${cls}\">${elements}</g>`);\n  });\n\n  // Optional trend line (across all series). Renders after data so it's visible.\n  if (opts.trendline) {\n    const reg = linearRegression(finitePoints);\n    if (reg !== null) {\n      const x0 = xAxis.domain[0];\n      const x1 = xAxis.domain[1];\n      const y0 = reg.slope * x0 + reg.intercept;\n      const y1 = reg.slope * x1 + reg.intercept;\n      // Clip to plot area in pixel space (visible portion of the regression).\n      const px0 = xMap(x0, xAxis.domain, [area.x0, area.x1]);\n      const px1 = xMap(x1, xAxis.domain, [area.x0, area.x1]);\n      const py0 = yMap(y0, yAxis.domain, [area.y1, area.y0]);\n      const py1 = yMap(y1, yAxis.domain, [area.y1, area.y0]);\n      body.push(`<line class=\"stdlib-chart-trendline\" x1=\"${fmt(px0)}\" y1=\"${fmt(py0)}\" x2=\"${fmt(px1)}\" y2=\"${fmt(py1)}\"/>`);\n    }\n  }\n\n  // References render AFTER data so labels stay on top (z-order matters in SVG).\n  if (opts.references && opts.references.length > 0) {\n    body.push(renderReferenceLines(opts.references, xAxis, yAxis, area));\n  }\n\n  const legend = renderLegend(legendItems, width, height - legendHeight);\n  return svgRoot({ width, height, className: opts.className }, header.svg + body.join(\"\") + legend.svg);\n};\n"],"mappings":"AAAA;;AAEA,SACE,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,cAAc,EACd,eAAe,EACf,aAAa,EACb,UAAU,EACV,GAAG,EACH,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,WAAW,EAEX,OAAO,QACF,cAAc;AAErB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAM,OAAO,GAAI,IAAoB,IAAa;EACvD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,aAAa;EACzC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,cAAc;EAC5C,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC;EAC9C,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC;EAC7D,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC;EAC7C,MAAM,YAAY,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC;EAEpD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAE,CAAC,IAAK,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAE,CAAC,IAAK,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACnH,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,OAAO,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC;EAE/E,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;EAE3H,MAAM,KAAK,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;EAC/E,MAAM,KAAK,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;EAC/E,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;EACpC,MAAM,IAAI,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC;;EAEpC;EACA;EACA;EACA,MAAM,KAAK,GAAG,YAAY,CAAC,GAAG,CAAE,CAAC,IAAK,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAE,CAAC,IAAkB,OAAO,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;EACrH,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EAC3C,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;EACjC,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,GAAI,CAAC,CAAC,EAAE,CAAC,CAAsB;EACjF,MAAM,SAAS,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;EAEnD,MAAM,IAAc,GAAG,EAAE;EACzB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAC/C,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;;EAE7E;EACA;EACA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;EAE3D,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK;IAC5B,MAAM,GAAG,GAAG,uBAAuB,CAAC,GAAG,CAAC,EAAE;IAC1C,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,GAAG,eAAe,CAAC,MAAM,CAAC,GAAI,QAAQ,CAAC;IACtG,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CACpB,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAAM;MAAE,CAAC;MAAE;IAAM,CAAC,CAAC,CAAC,CACjC,MAAM,CAAC,CAAC;MAAE;IAAE,CAAC,KAAK,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC/D,GAAG,CAAC,CAAC;MAAE,CAAC;MAAE;IAAM,CAAC,KAAK;MACrB,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;MACtD,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;MACtD,MAAM,CAAC,GAAG,QAAQ,GACd,OAAO,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GACnD,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,GACvC,SAAS,GACX,CAAC;MACL,MAAM,KAAiB,GAAG;QACxB,KAAK;QACL,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;QAChB,MAAM,EAAE,WAAW,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK;MAC/C,CAAC;MACD,IAAI,KAAK,KAAK,QAAQ,EAAE;QACtB,OAAO,aAAa,CAAC,0CAA0C,GAAG,CAAC,EAAE,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;MACjI;MACA,OAAO,aAAa,CAAC,uCAAuC,UAAU,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;IACrH,CAAC,CAAC,CACD,IAAI,CAAC,EAAE,CAAC;IACX,IAAI,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,KAAK,QAAQ,MAAM,CAAC;EAC9D,CAAC,CAAC;;EAEF;EACA,IAAI,IAAI,CAAC,SAAS,EAAE;IAClB,MAAM,GAAG,GAAG,gBAAgB,CAAC,YAAY,CAAC;IAC1C,IAAI,GAAG,KAAK,IAAI,EAAE;MAChB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;MAC1B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;MAC1B,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,GAAG,EAAE,GAAG,GAAG,CAAC,SAAS;MACzC,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,GAAG,EAAE,GAAG,GAAG,CAAC,SAAS;MACzC;MACA,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;MACtD,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;MACtD,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;MACtD,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;MACtD,IAAI,CAAC,IAAI,CAAC,4CAA4C,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;IACzH;EACF;;EAEA;EACA,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;IACjD,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;EACtE;EAEA,MAAM,MAAM,GAAG,YAAY,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,YAAY,CAAC;EACtE,OAAO,OAAO,CAAC;IAAE,KAAK;IAAE,MAAM;IAAE,SAAS,EAAE,IAAI,CAAC;EAAU,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC;AACvG,CAAC","ignoreList":[]}

package/dist/browser/charts/core/treemap.js

@@ -0,0 +1,138 @@
+import { chartDatumSvg, escapeXml, renderHeader, svgRoot } from "./svg";
+export function treemapLayout(spec, size = {
+  width: spec.width ?? 480,
+  height: spec.height ?? 280
+}) {
+  const width = spec.displayWidth ?? size.width,
+    height = size.height;
+  const data = spec.data.map((d, index) => {
+    if (!Number.isFinite(d.value) || d.value < 0) throw new RangeError("Treemap values must be finite and nonnegative.");
+    if (!spec.groups.includes(d.group)) throw new RangeError("Treemap groups must contain every item group.");
+    return {
+      ...d,
+      index
+    };
+  });
+  const total = data.reduce((s, d) => s + d.value, 0);
+  if (!Number.isFinite(total)) throw new RangeError("Treemap total must be finite.");
+  const header = renderHeader(width, spec.title, spec.subtitle);
+  const legend = [];
+  let lx = 0,
+    lr = 0;
+  if (spec.legend !== false) spec.groups.forEach((label, index) => {
+    const itemWidth = Math.min(width, label.length * 12 + 28);
+    if (lx && lx + itemWidth > width) {
+      lx = 0;
+      lr++;
+    }
+    legend.push({
+      label,
+      index,
+      x: lx,
+      row: lr
+    });
+    lx += itemWidth;
+  });
+  const legendHeight = legend.length ? (lr + 1) * 20 + 4 : 0,
+    plotHeight = Math.max(0, height - header.height - legendHeight);
+  const entries = data.filter(d => d.value > 0).sort((a, b) => b.value - a.value).map(d => ({
+    ...d,
+    area: d.value / (total || 1) * width * plotHeight
+  })).filter(d => d.area > 0);
+  const cells = [];
+  let x = 0,
+    y = header.height,
+    w = width,
+    h = plotHeight;
+  const worst = (areas, side) => {
+    if (!areas.length || side <= 0) return Infinity;
+    const sum = areas.reduce((s, a) => s + a, 0),
+      lo = Math.min(...areas),
+      hi = Math.max(...areas);
+    return Math.max(side * side * hi / (sum * sum), sum * sum / (side * side * lo));
+  };
+  let offset = 0;
+  while (offset < entries.length) {
+    if (w <= 0 || h <= 0) break;
+    const row = [entries[offset++]];
+    const side = Math.min(w, h);
+    while (offset < entries.length && worst(row.map(c => c.area), side) >= worst([...row.map(c => c.area), entries[offset].area], side)) row.push(entries[offset++]);
+    const sum = row.reduce((s, c) => s + c.area, 0);
+    const vertical = w >= h;
+    const thickness = Math.min(vertical ? w : h, sum / (vertical ? h : w));
+    let pos = vertical ? y : x;
+    for (const d of row) {
+      const length = d.area / thickness;
+      cells.push({
+        ...d,
+        x: vertical ? x : pos,
+        y: vertical ? pos : y,
+        width: vertical ? thickness : length,
+        height: vertical ? length : thickness
+      });
+      pos += length;
+    }
+    if (vertical) {
+      x += thickness;
+      w = Math.max(0, w - thickness);
+    } else {
+      y += thickness;
+      h = Math.max(0, h - thickness);
+    }
+  }
+  for (const d of data.filter(d => !cells.some(c => c.index === d.index))) cells.push({
+    ...d,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  return {
+    width,
+    height,
+    total,
+    cells,
+    header,
+    legend,
+    legendTop: height - legendHeight,
+    plotHeight
+  };
+}
+export function renderTreemapSvg(spec) {
+  const scene = treemapLayout(spec);
+  const number = spec.format ?? new Intl.NumberFormat(spec.locale ?? "en", {
+    maximumSignificantDigits: 15
+  }).format;
+  const percent = new Intl.NumberFormat(spec.locale ?? "en", {
+    style: "percent",
+    maximumFractionDigits: 1
+  });
+  const body = scene.header.svg.replace(/<text class="stdlib-chart-title"/g, '<text fill="var(--k2b-text,#27272a)" font-size="14" class="stdlib-chart-title"').replace(/<text class="stdlib-chart-subtitle"/g, '<text fill="var(--k2b-text-muted,#45454e)" font-size="11" class="stdlib-chart-subtitle"') + scene.cells.map(c => {
+    const group = spec.groups.indexOf(c.group) % 8 + 1;
+    const color = `var(--stdlib-chart-c${group},${["#3b82f6", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16", "#f97316"][group - 1]})`;
+    const text = c.width * (spec.displayWidth ?? 296) / scene.width > Math.max(56, Math.max(c.label.length * 12, number(c.value).length * 11) + 16) && c.height * Math.min(1, 180 / scene.height) > 48 ? `<text data-treemap-name="true" style="translate:0 calc((var(--k2b-chart-inverse-y,1) - 1) * 18px)" x="${c.x + 8}" y="${c.y + 18}" font-size="12" font-weight="600" fill="var(--k2b-text,#27272a)">${escapeXml(c.label)}</text><text data-treemap-value="true" style="translate:0 calc((var(--k2b-chart-inverse-y,1) - 1) * 38px)" x="${c.x + 8}" y="${c.y + 38}" font-size="11" font-weight="400" fill="var(--k2b-text-muted,#45454e)">${escapeXml(number(c.value))}</text>` : "";
+    return chartDatumSvg(`<rect class="k2b-chart-treemap-cell" x="${c.x + 1}" y="${c.y + 1}" width="${Math.max(0, c.width - 2)}" height="${Math.max(0, c.height - 2)}" rx="4" fill="color-mix(in srgb,${color} 55%,var(--k2b-surface,#fff))" stroke="none"/>${text}`, {
+      role: "item",
+      index: c.index,
+      label: c.label,
+      anchor: [c.x + c.width / 2, c.y + c.height / 2],
+      values: [{
+        key: "group",
+        value: c.group
+      }, {
+        key: "value",
+        value: c.value,
+        formatted: number(c.value)
+      }, {
+        key: "percent",
+        value: scene.total ? c.value / scene.total * 100 : 0,
+        formatted: scene.total ? percent.format(c.value / scene.total) : "–"
+      }]
+    }, spec.inspect);
+  }).join("") + scene.legend.map(item => `<rect x="${item.x}" y="${scene.legendTop + item.row * 20 + 6}" width="8" height="8" rx="2" fill="var(--stdlib-chart-c${item.index % 8 + 1},${["#3b82f6", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16", "#f97316"][item.index % 8]})"/><text x="${item.x + 13}" y="${scene.legendTop + item.row * 20 + 14}" font-size="11" fill="var(--k2b-text-muted,#45454e)">${escapeXml(item.label.slice(0, Math.floor((scene.width - 28) / 12)))}</text>`).join("");
+  return svgRoot({
+    ...scene,
+    className: spec.className
+  }, body);
+}
+//# sourceMappingURL=treemap.js.map

package/dist/browser/charts/core/treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["charts/core/treemap.ts"],"sourcesContent":["import { type ChartOptions, chartDatumSvg, escapeXml, renderHeader, svgRoot } from \"./svg\";\nexport type TreemapOptions = ChartOptions & {\n  groups: string[];\n  legend?: boolean;\n  data: { label: string; group: string; value: number }[];\n  locale?: string;\n  format?: (value: number) => string;\n  displayWidth?: number;\n};\nexport function treemapLayout(spec: TreemapOptions, size = { width: spec.width ?? 480, height: spec.height ?? 280 }) {\n  const width = spec.displayWidth ?? size.width,\n    height = size.height;\n  const data = spec.data.map((d, index) => {\n    if (!Number.isFinite(d.value) || d.value < 0) throw new RangeError(\"Treemap values must be finite and nonnegative.\");\n    if (!spec.groups.includes(d.group)) throw new RangeError(\"Treemap groups must contain every item group.\");\n    return { ...d, index };\n  });\n  const total = data.reduce((s, d) => s + d.value, 0);\n  if (!Number.isFinite(total)) throw new RangeError(\"Treemap total must be finite.\");\n  const header = renderHeader(width, spec.title, spec.subtitle);\n  const legend: { label: string; x: number; row: number; index: number }[] = [];\n  let lx = 0,\n    lr = 0;\n  if (spec.legend !== false)\n    spec.groups.forEach((label, index) => {\n      const itemWidth = Math.min(width, label.length * 12 + 28);\n      if (lx && lx + itemWidth > width) {\n        lx = 0;\n        lr++;\n      }\n      legend.push({ label, index, x: lx, row: lr });\n      lx += itemWidth;\n    });\n  const legendHeight = legend.length ? (lr + 1) * 20 + 4 : 0,\n    plotHeight = Math.max(0, height - header.height - legendHeight);\n  const entries = data\n    .filter((d) => d.value > 0)\n    .sort((a, b) => b.value - a.value)\n    .map((d) => ({ ...d, area: (d.value / (total || 1)) * width * plotHeight }))\n    .filter((d) => d.area > 0);\n  const cells: ((typeof data)[number] & { x: number; y: number; width: number; height: number })[] = [];\n  let x = 0,\n    y = header.height,\n    w = width,\n    h = plotHeight;\n  const worst = (areas: number[], side: number) => {\n    if (!areas.length || side <= 0) return Infinity;\n    const sum = areas.reduce((s, a) => s + a, 0),\n      lo = Math.min(...areas),\n      hi = Math.max(...areas);\n    return Math.max((side * side * hi) / (sum * sum), (sum * sum) / (side * side * lo));\n  };\n  let offset = 0;\n  while (offset < entries.length) {\n    if (w <= 0 || h <= 0) break;\n    const row = [entries[offset++]!];\n    const side = Math.min(w, h);\n    while (\n      offset < entries.length &&\n      worst(\n        row.map((c) => c.area),\n        side,\n      ) >= worst([...row.map((c) => c.area), entries[offset]!.area], side)\n    )\n      row.push(entries[offset++]!);\n    const sum = row.reduce((s, c) => s + c.area, 0);\n    const vertical = w >= h;\n    const thickness = Math.min(vertical ? w : h, sum / (vertical ? h : w));\n    let pos = vertical ? y : x;\n    for (const d of row) {\n      const length = d.area / thickness;\n      cells.push({\n        ...d,\n        x: vertical ? x : pos,\n        y: vertical ? pos : y,\n        width: vertical ? thickness : length,\n        height: vertical ? length : thickness,\n      });\n      pos += length;\n    }\n    if (vertical) {\n      x += thickness;\n      w = Math.max(0, w - thickness);\n    } else {\n      y += thickness;\n      h = Math.max(0, h - thickness);\n    }\n  }\n  for (const d of data.filter((d) => !cells.some((c) => c.index === d.index))) cells.push({ ...d, x: 0, y: 0, width: 0, height: 0 });\n  return { width, height, total, cells, header, legend, legendTop: height - legendHeight, plotHeight };\n}\nexport function renderTreemapSvg(spec: TreemapOptions): string {\n  const scene = treemapLayout(spec);\n  const number = spec.format ?? new Intl.NumberFormat(spec.locale ?? \"en\", { maximumSignificantDigits: 15 }).format;\n  const percent = new Intl.NumberFormat(spec.locale ?? \"en\", { style: \"percent\", maximumFractionDigits: 1 });\n  const body =\n    scene.header.svg\n      .replace(/<text class=\"stdlib-chart-title\"/g, '<text fill=\"var(--k2b-text,#27272a)\" font-size=\"14\" class=\"stdlib-chart-title\"')\n      .replace(\n        /<text class=\"stdlib-chart-subtitle\"/g,\n        '<text fill=\"var(--k2b-text-muted,#45454e)\" font-size=\"11\" class=\"stdlib-chart-subtitle\"',\n      ) +\n    scene.cells\n      .map((c) => {\n        const group = (spec.groups.indexOf(c.group) % 8) + 1;\n        const color = `var(--stdlib-chart-c${group},${[\"#3b82f6\", \"#10b981\", \"#f59e0b\", \"#8b5cf6\", \"#ec4899\", \"#06b6d4\", \"#84cc16\", \"#f97316\"][group - 1]})`;\n        const text =\n          (c.width * (spec.displayWidth ?? 296)) / scene.width >\n            Math.max(56, Math.max(c.label.length * 12, number(c.value).length * 11) + 16) && c.height * Math.min(1, 180 / scene.height) > 48\n            ? `<text data-treemap-name=\"true\" style=\"translate:0 calc((var(--k2b-chart-inverse-y,1) - 1) * 18px)\" x=\"${c.x + 8}\" y=\"${c.y + 18}\" font-size=\"12\" font-weight=\"600\" fill=\"var(--k2b-text,#27272a)\">${escapeXml(c.label)}</text><text data-treemap-value=\"true\" style=\"translate:0 calc((var(--k2b-chart-inverse-y,1) - 1) * 38px)\" x=\"${c.x + 8}\" y=\"${c.y + 38}\" font-size=\"11\" font-weight=\"400\" fill=\"var(--k2b-text-muted,#45454e)\">${escapeXml(number(c.value))}</text>`\n            : \"\";\n        return chartDatumSvg(\n          `<rect class=\"k2b-chart-treemap-cell\" x=\"${c.x + 1}\" y=\"${c.y + 1}\" width=\"${Math.max(0, c.width - 2)}\" height=\"${Math.max(0, c.height - 2)}\" rx=\"4\" fill=\"color-mix(in srgb,${color} 55%,var(--k2b-surface,#fff))\" stroke=\"none\"/>${text}`,\n          {\n            role: \"item\",\n            index: c.index,\n            label: c.label,\n            anchor: [c.x + c.width / 2, c.y + c.height / 2],\n            values: [\n              { key: \"group\", value: c.group },\n              { key: \"value\", value: c.value, formatted: number(c.value) },\n              {\n                key: \"percent\",\n                value: scene.total ? (c.value / scene.total) * 100 : 0,\n                formatted: scene.total ? percent.format(c.value / scene.total) : \"–\",\n              },\n            ],\n          },\n          spec.inspect,\n        );\n      })\n      .join(\"\") +\n    scene.legend\n      .map(\n        (item) =>\n          `<rect x=\"${item.x}\" y=\"${scene.legendTop + item.row * 20 + 6}\" width=\"8\" height=\"8\" rx=\"2\" fill=\"var(--stdlib-chart-c${(item.index % 8) + 1},${[\"#3b82f6\", \"#10b981\", \"#f59e0b\", \"#8b5cf6\", \"#ec4899\", \"#06b6d4\", \"#84cc16\", \"#f97316\"][item.index % 8]})\"/><text x=\"${item.x + 13}\" y=\"${scene.legendTop + item.row * 20 + 14}\" font-size=\"11\" fill=\"var(--k2b-text-muted,#45454e)\">${escapeXml(item.label.slice(0, Math.floor((scene.width - 28) / 12)))}</text>`,\n      )\n      .join(\"\");\n  return svgRoot({ ...scene, className: spec.className }, body);\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/charts/description.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["charts/description.ts"],"sourcesContent":["/** JSON number formatting. Functions belong to the rendering host, never the saved description. */\nexport type ChartNumberFormat = {\n  style?: \"number\" | \"percent\" | \"currency\";\n  currency?: string;\n  unit?: string;\n  decimals?: number;\n  compact?: boolean;\n};\nexport type ChartDateFormat = { date: \"day\" | \"minute\" | \"second\" };\nexport type ChartFormat = ChartNumberFormat | ChartDateFormat;\nexport type ChartLimits = { maxSeries: number; maxValues: number; maxMarks: number };\nexport type ChartDescriptionAxis = {\n  label?: string;\n  domain?: number[];\n  ticks?: number;\n  scale?: \"linear\" | \"log\";\n  format?: ChartFormat;\n};\ntype Reference = {\n  value: number | string;\n  axis?: \"x\" | \"y\";\n  label?: string;\n  style?: \"solid\" | \"dashed\" | \"dotted\";\n  tone?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n};\ntype Threshold = { value: number; label?: string };\ntype Series<N> = { label?: string; data: { x: N | string; y: N }[]; role?: \"reference\" };\ntype Common = { title: string; subtitle?: string; tooltip?: { label?: string; format?: ChartNumberFormat } };\ntype Variants<N> =\n  | {\n      kind: \"waterfall\";\n      start: { label: string; value: number };\n      steps: { label: string; value: number }[];\n      end: { label: string };\n      format?: ChartNumberFormat;\n    }\n  | {\n      kind: \"area\";\n      layout: \"stacked\";\n      normalize?: boolean;\n      x: (number | string)[];\n      series: { label: string; data: (number | null)[] }[];\n      legend?: boolean;\n      format?: ChartNumberFormat;\n    }\n  | {\n      kind: \"bar\";\n      data: { label: string; value: N }[];\n      x?: string[];\n      series?: { label: string; data: (number | null)[] }[];\n      layout?: \"columns\" | \"rows\" | \"grouped\" | \"stacked\";\n      normalize?: boolean;\n      compare?: { label: string; data: (number | null)[] };\n      xAxis?: Pick<ChartDescriptionAxis, \"label\"> & { ordered?: boolean };\n      yAxis?: ChartDescriptionAxis;\n      colorByBar?: boolean;\n      showValues?: boolean;\n      legend?: boolean;\n      references?: Reference[];\n    }\n  | {\n      kind: \"hbar\";\n      series: string[];\n      rows: { group?: string; label: string; values: (number | null)[] }[];\n      legend?: boolean;\n      format?: ChartNumberFormat;\n    }\n  | {\n      kind: \"line\";\n      series: (Series<N> & { style?: \"solid\" | \"dashed\" | \"dotted\" })[];\n      xAxis?: ChartDescriptionAxis;\n      yAxis?: ChartDescriptionAxis;\n      legend?: boolean;\n      area?: boolean;\n      smooth?: boolean;\n      references?: Reference[];\n    }\n  | {\n      kind: \"scatter\";\n      series: Series<N>[];\n      xAxis?: ChartDescriptionAxis;\n      yAxis?: ChartDescriptionAxis;\n      legend?: boolean;\n      references?: Reference[];\n    }\n  | { kind: \"pie\" | \"donut\"; data: { label: string; value: N }[]; legend?: boolean; showLabels?: boolean; format?: ChartNumberFormat }\n  | { kind: \"histogram\"; data: N[]; bins?: number | number[]; references?: Reference[] }\n  | {\n      kind: \"gauge\";\n      value: N;\n      min?: number;\n      max?: number;\n      label?: string;\n      unit?: string;\n      format?: ChartNumberFormat;\n      thresholds?: Threshold[];\n    }\n  | { kind: \"sparkline\"; data: N[]; area?: boolean }\n  | { kind: \"boxplot\"; data: { label: string; values: N[] }[]; yAxis?: ChartDescriptionAxis; references?: Reference[] }\n  | {\n      kind: \"heatmap\";\n      layout: \"calendar\";\n      data: [string, N | null][];\n      scale: \"sequential\" | \"diverging\";\n      label?: string;\n      format?: ChartNumberFormat;\n      locale?: string;\n    }\n  | {\n      kind: \"heatmap\";\n      layout?: undefined;\n      data: { x: string; y: string; value: N }[];\n      format?: ChartNumberFormat;\n      showValues?: boolean;\n      min?: number;\n      max?: number;\n    }\n  | {\n      kind: \"barGauge\";\n      data: { label: string; value: N; min?: number; max?: number }[];\n      min?: number;\n      max?: number;\n      unit?: string;\n      format?: ChartNumberFormat;\n      thresholds?: Threshold[];\n    }\n  | { kind: \"stat\"; value: N; format?: ChartNumberFormat; unit?: string; delta?: N; better?: \"up\" | \"down\"; sparkline?: N[] };\n\n/** Portable chart node. Dates are ISO text and missing observations are null, never zero. */\nexport type ChartDescription = Common &\n  (\n    | Exclude<Variants<number | null>, { kind: \"bar\" }>\n    // Aligned series omit flat data; the validator supplies an empty array.\n    | (Omit<Extract<Variants<number | null>, { kind: \"bar\" }>, \"data\"> & { data?: { label: string; value: number | null }[] })\n  );\n/** Validated renderer input. The portable validator normalizes null gaps to non-finite numbers for drawing. */\nexport type ChartInput = Common &\n  (\n    | Exclude<Variants<number>, { kind: \"stat\" }>\n    | (Omit<Extract<Variants<number>, { kind: \"stat\" }>, \"delta\"> & { delta: number | undefined })\n  );\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["charts/description.ts"],"sourcesContent":["/** JSON number formatting. Functions belong to the rendering host, never the saved description. */\nexport type ChartNumberFormat = {\n  style?: \"number\" | \"percent\" | \"currency\";\n  currency?: string;\n  unit?: string;\n  decimals?: number;\n  compact?: boolean;\n};\nexport type ChartDateFormat = { date: \"day\" | \"minute\" | \"second\" };\nexport type ChartFormat = ChartNumberFormat | ChartDateFormat;\nexport type ChartLimits = { maxSeries: number; maxValues: number; maxMarks: number };\nexport type ChartDescriptionAxis = {\n  label?: string;\n  domain?: number[];\n  ticks?: number;\n  scale?: \"linear\" | \"log\";\n  format?: ChartFormat;\n};\ntype Reference = {\n  value: number | string;\n  axis?: \"x\" | \"y\";\n  label?: string;\n  style?: \"solid\" | \"dashed\" | \"dotted\";\n  tone?: \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n};\ntype Threshold = { value: number; label?: string };\ntype Series<N> = { label?: string; data: { x: N | string; y: N }[]; role?: \"reference\" };\ntype Common = { title: string; subtitle?: string; tooltip?: { label?: string; format?: ChartNumberFormat } };\ntype Variants<N> =\n  | {\n      kind: \"waterfall\";\n      start: { label: string; value: number };\n      steps: { label: string; value: number }[];\n      end: { label: string };\n      format?: ChartNumberFormat;\n    }\n  | {\n      kind: \"area\";\n      layout: \"stacked\";\n      normalize?: boolean;\n      x: (number | string)[];\n      series: { label: string; data: (number | null)[] }[];\n      legend?: boolean;\n      format?: ChartNumberFormat;\n    }\n  | {\n      kind: \"bar\";\n      data: { label: string; value: N }[];\n      x?: string[];\n      series?: { label: string; data: (number | null)[] }[];\n      layout?: \"columns\" | \"rows\" | \"grouped\" | \"stacked\";\n      normalize?: boolean;\n      share?: boolean;\n      limit?: number;\n      tone?: \"in\" | \"out\";\n      format?: ChartNumberFormat;\n      compare?: { label: string; data: (number | null)[] };\n      xAxis?: Pick<ChartDescriptionAxis, \"label\"> & { ordered?: boolean };\n      yAxis?: ChartDescriptionAxis;\n      colorByBar?: boolean;\n      showValues?: boolean;\n      legend?: boolean;\n      references?: Reference[];\n    }\n  | { kind: \"funnel\"; data: { label: string; value: number | null }[]; format?: ChartNumberFormat }\n  | {\n      kind: \"hbar\";\n      series: string[];\n      rows: { group?: string; label: string; values: (number | null)[] }[];\n      legend?: boolean;\n      format?: ChartNumberFormat;\n    }\n  | {\n      kind: \"line\";\n      series: (Series<N> & { style?: \"solid\" | \"dashed\" | \"dotted\" })[];\n      xAxis?: ChartDescriptionAxis;\n      yAxis?: ChartDescriptionAxis;\n      legend?: boolean;\n      area?: boolean;\n      smooth?: boolean;\n      references?: Reference[];\n    }\n  | {\n      kind: \"scatter\";\n      series: Series<N>[];\n      xAxis?: ChartDescriptionAxis;\n      yAxis?: ChartDescriptionAxis;\n      legend?: boolean;\n      references?: Reference[];\n    }\n  | { kind: \"pie\" | \"donut\"; data: { label: string; value: N }[]; legend?: boolean; showLabels?: boolean; format?: ChartNumberFormat }\n  | { kind: \"histogram\"; data: N[]; bins?: number | number[]; references?: Reference[] }\n  | {\n      kind: \"gauge\";\n      value: N;\n      min?: number;\n      max?: number;\n      label?: string;\n      unit?: string;\n      format?: ChartNumberFormat;\n      thresholds?: Threshold[];\n    }\n  | { kind: \"sparkline\"; data: N[]; area?: boolean }\n  | { kind: \"boxplot\"; data: { label: string; values: N[] }[]; yAxis?: ChartDescriptionAxis; references?: Reference[] }\n  | {\n      kind: \"heatmap\";\n      layout: \"calendar\";\n      data: [string, N | null][];\n      scale: \"sequential\" | \"diverging\";\n      label?: string;\n      format?: ChartNumberFormat;\n      locale?: string;\n    }\n  | {\n      kind: \"heatmap\";\n      layout?: undefined;\n      data: { x: string; y: string; value: N }[];\n      format?: ChartNumberFormat;\n      showValues?: boolean;\n      min?: number;\n      max?: number;\n    }\n  | {\n      kind: \"barGauge\";\n      data: { label: string; value: N; min?: number; max?: number }[];\n      min?: number;\n      max?: number;\n      unit?: string;\n      format?: ChartNumberFormat;\n      thresholds?: Threshold[];\n    }\n  | { kind: \"stat\"; value: N; format?: ChartNumberFormat; unit?: string; delta?: N; better?: \"up\" | \"down\"; sparkline?: N[] }\n  | {\n      kind: \"treemap\";\n      groups: string[];\n      data: { label: string; group: string; value: number }[];\n      legend?: boolean;\n      format?: ChartNumberFormat;\n      locale?: string;\n    }\n  | {\n      kind: \"pareto\";\n      labels: [string, string];\n      data: { label: string; value: number; prev: number }[];\n      format?: ChartNumberFormat;\n      locale?: string;\n    }\n  | {\n      kind: \"bubble\";\n      groups: string[];\n      data: { label: string; group: string; x: number; y: number; size?: number }[];\n      xLabel: string;\n      yLabel: string;\n      sizeLabel?: string;\n      averages?: boolean;\n      legend?: boolean;\n      xFormat?: ChartNumberFormat;\n      yFormat?: ChartNumberFormat;\n      format?: ChartNumberFormat;\n      locale?: string;\n    }\n  | {\n      kind: \"radar\";\n      axes: string[];\n      max: number;\n      unit?: string;\n      series: { label: string; data: number[] }[];\n      format?: ChartNumberFormat;\n      legend?: boolean;\n      locale?: string;\n    };\n\n/** Portable chart node. Dates are ISO text and missing observations are null, never zero. */\nexport type ChartDescription = Common &\n  (\n    | Exclude<Variants<number | null>, { kind: \"bar\" }>\n    // Aligned series omit flat data; the validator supplies an empty array.\n    | (Omit<Extract<Variants<number | null>, { kind: \"bar\" }>, \"data\"> & { data?: { label: string; value: number | null }[] })\n  );\n/** Validated renderer input. The portable validator normalizes null gaps to non-finite numbers for drawing. */\nexport type ChartInput = Common &\n  (\n    | Exclude<Variants<number>, { kind: \"stat\" }>\n    | (Omit<Extract<Variants<number>, { kind: \"stat\" }>, \"delta\"> & { delta: number | undefined })\n  );\n"],"mappings":"","ignoreList":[]}

package/dist/browser/content/ChartRoot.js

@@ -98,10 +98,14 @@ import { useViewportMessages } from "./viewport-messages";
  *  block on truly empty inputs; partially-filled series get rendered
  *  as-is and the core handles the gaps. */
 const isEmpty = props => {
+  if (props.kind === "treemap" || props.kind === "pareto") return !props.data.length;
+  if (props.kind === "bubble") return !props.data.length;
+  if (props.kind === "radar") return !props.series.length;
   if (props.kind === "area") return !props.x.length || !props.series.length || props.x.every((_, i) => props.series.some(s => s.data[i] === null) || props.normalize && props.series.every(s => s.data[i] === 0));
   if (props.kind === "line" || props.kind === "scatter") {
     return !props.series?.length || props.series.every(s => !s.data.length);
   }
+  if (props.kind === "funnel") return !props.data.length;
   if (props.kind === "hbar") return !props.rows.length;
   if (props.kind === "bar") return props.series ? !props.x?.length || !props.series.some(s => s.data.some(v => v !== null && Number.isFinite(v))) : !props.data?.length;
   if (props.kind === "donut" || props.kind === "pie") {
@@ -119,7 +123,12 @@ const isEmpty = props => {
   return false;
 };
 export const renderChartRoot = (props, renderChartSvg) => {
-  const [, drawingProps] = splitProps(props, ["class", "style", "labels", "interactive", "selected", "onSelect", "tooltip", "cursor"]);
+  const drawingProps = () => {
+    // Pareto's labels name its two measures; other kinds use labels only for host controls.
+    if (props.kind === "pareto") return props;
+    const [, drawing] = splitProps(props, ["class", "style", "labels", "interactive", "selected", "onSelect", "tooltip", "cursor"]);
+    return drawing;
+  };
   const messages = useUiMessages();
   const chartMessages = useChartMessages();
   const viewportMessages = useViewportMessages();
@@ -169,7 +178,7 @@ export const renderChartRoot = (props, renderChartSvg) => {
   const interactiveMap = () => props.kind === "map" && props.interactive === true;
   const interactiveTimeline = () => props.kind === "stateTimeline" && props.interactive === true;
   const draggable = () => interactiveMap() || interactiveTimeline();
-  const labels = () => props.labels ?? {};
+  const labels = () => props.kind === "pareto" ? {} : props.labels ?? {};
   const accessibleName = () => {
     const override = props.kind === "map" ? labels().interactiveMap : props.kind === "stateTimeline" ? labels().interactiveTimeline : props.kind === "line" ? labels().interactiveLine : labels().interactiveChart;
     const title = "title" in props && typeof props.title === "string" && props.title.trim() ? props.title : undefined;
@@ -370,7 +379,7 @@ export const renderChartRoot = (props, renderChartSvg) => {
     select: selection => props.onSelect?.(selection),
     format: selection => {
       if (props.tooltip) return props.tooltip(selection);
-      const fields = props.kind === "heatmap" && props.layout === "calendar" ? resolveChartMessages(props.locale ?? locale()).chartFields : chartMessages().chartFields;
+      const fields = props.kind === "bubble" || props.kind === "radar" || props.kind === "treemap" || props.kind === "pareto" || props.kind === "heatmap" && props.layout === "calendar" ? resolveChartMessages(props.locale ?? locale()).chartFields : chartMessages().chartFields;
       if (selection.kind === "area" && props.kind === "area") {
         const amount = selection.datum.values.find(f => f.key === "value");
         const share = selection.datum.values.find(f => f.key === "percent");
@@ -388,7 +397,11 @@ export const renderChartRoot = (props, renderChartSvg) => {
       return {
         title: selection.datum.label ?? (selection.datum.seriesIndex !== undefined ? `${labels().series ?? chartMessages().series} ${selection.datum.seriesIndex + 1}` : undefined),
         rows: selection.datum.values.filter(field => selection.kind !== "waterfall" || field.key !== "before").map(field => ({
-          label: props.kind === "heatmap" && props.layout === "calendar" && field.key === "value" && props.label ? props.label : selection.kind === "line" && field.key === "y" ? selection.datum.label ?? labels().series ?? chartMessages().series : (props.kind === "bar" || props.kind === "hbar") && field.key.startsWith("series:") ? (props.kind === "hbar" ? props.series[Number(field.key.slice(7))] : props.series?.[Number(field.key.slice(7))]?.label) ?? fields({
+          label: props.kind === "bubble" && field.key === "x" ? props.xLabel : props.kind === "bubble" && field.key === "y" ? props.yLabel : props.kind === "bubble" && field.key === "size" ? props.sizeLabel ?? fields({
+            key: "size"
+          }) : props.kind === "radar" && field.key.startsWith("series:") ? props.series[Number(field.key.slice(7))]?.label ?? fields({
+            key: "series"
+          }) : props.kind === "pareto" && (field.key === "value" || field.key === "previous") ? props.labels[field.key === "value" ? 0 : 1] : props.kind === "heatmap" && props.layout === "calendar" && field.key === "value" && props.label ? props.label : selection.kind === "line" && field.key === "y" ? selection.datum.label ?? labels().series ?? chartMessages().series : (props.kind === "bar" || props.kind === "hbar") && field.key.startsWith("series:") ? (props.kind === "hbar" ? props.series[Number(field.key.slice(7))] : props.series?.[Number(field.key.slice(7))]?.label) ?? fields({
             key: field.key
           }) : props.kind === "bar" && field.key === "previous" ? props.compare?.label ?? fields({
             key: field.key
@@ -401,12 +414,12 @@ export const renderChartRoot = (props, renderChartSvg) => {
     }
   });
   const closeChartTooltip = () => inspection.close();
-  const svgMarkup = createMemo(() => renderChartSvg(props.kind === "heatmap" && props.layout === "calendar" ? {
+  const svgMarkup = createMemo(() => renderChartSvg(props.kind === "bubble" || props.kind === "radar" || props.kind === "treemap" || props.kind === "pareto" || props.kind === "heatmap" && props.layout === "calendar" ? {
     ...props,
     locale: props.locale ?? locale()
   } : {
-    ...drawingProps,
-    ...(props.kind === "bar" || props.kind === "hbar" ? {
+    ...drawingProps(),
+    ...(props.kind === "bar" || props.kind === "hbar" || props.kind === "funnel" ? {
       locale: locale()
     } : {})
   }, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined, locale()));
@@ -428,6 +441,7 @@ export const renderChartRoot = (props, renderChartSvg) => {
     onCleanup(closeChartInspectionOnOutside({
       container: () => containerRef,
       tooltip: () => chartTooltipRef,
+      scroll: inspection.scroll,
       close: closeChartTooltip,
       keepScroll: () => props.kind === "heatmap" && props.layout === "calendar"
     }));