@k2b/ui 0.49.0 → 0.50.0

package/dist/browser/content/Chart.js

@@ -19,26 +19,28 @@ var _tmpl$ = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
   _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chart__controls><!$><!/><!$><!/><!$><!/>`),
   _tmpl$4 = /*#__PURE__*/_$template(`<div data-interactive=true role=group tabindex=0><!$><!/><div class=k2b-chart__svg></div><span class=k2b-chart__anchor aria-hidden=true></span><span role=tooltip popover=manual data-instant=true class="k2b-tooltip k2b-chart__tooltip"></span><!$><!/>`),
   _tmpl$5 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-chart__legend-item><svg viewBox="0 0 10 10"width=10 height=10 aria-hidden=true><rect x=1 y=1 width=8 height=8 rx=2></rect></svg><span>`);
-import { charts } from "@k2b/stdlib";
-import { createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, splitProps, untrack } from "solid-js";
+  _tmpl$6 = /*#__PURE__*/_$template(`<b data-chart-legend-value>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-chart__legend-item><svg viewBox="0 0 10 10"width=10 height=10 aria-hidden=true><rect x=1 y=1 width=8 height=8 rx=2 stroke=none></rect></svg><span></span><!$><!/>`);
+import { createEffect, createMemo, createSignal, createUniqueId, For, mergeProps, onCleanup, onMount, Show, splitProps, untrack } from "solid-js";
 import { isServer } from "solid-js/web";
 import { IconButton } from "../actions/Button";
+import { calendarLayout } from "../charts/core/calendar";
+import { chartKinds } from "../charts/core/registry";
+import { chartRenderHeight, preservesAspectRatio, renderChartSvg } from "../charts/core/render";
 import { suppressTextSelection } from "../internal/text-selection";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
-import { barChartLayout, renderBarChartSvg } from "./chart-bar";
+import { calendarInspectionNavigation, mountCalendarScroll } from "./chart-calendar";
 import { createChartInspection } from "./chart-inspection";
 import { closeChartInspectionOnOutside } from "./chart-inspection-core";
-import { lineGapsSvg } from "./chart-line-gaps";
 import { DEFAULT_MAP_VIEWPORT, normalizeMapViewport, panMapViewport, zoomMapViewport } from "./chart-map-viewport";
-import { useChartMessages } from "./chart-messages";
-import { panStateTimelineViewport, renderStateTimelineSvg, stateTimelineDomain, stateTimelineHeight, zoomStateTimelineViewport } from "./chart-state-timeline";
-import { responsiveChartSvg, responsiveMapSvg, selectedChartSvg } from "./chart-svg";
+import { resolveChartMessages, useChartMessages } from "./chart-messages";
+import { panStateTimelineViewport, stateTimelineDomain, stateTimelineHeight, zoomStateTimelineViewport } from "./chart-state-timeline";
+import { selectedChartSvg } from "./chart-svg";
 import { useViewportMessages } from "./viewport-messages";
 
 /**
- * Chart — minimal Solid wrapper around `stdlib.charts`.
+ * Chart — Solid interaction and sizing around the portable UI chart core.
  *
  * **Live-update story.** `charts.<kind>(opts)` returns an SVG string;
  * Solid's `innerHTML` is reactive, so any time a prop (signal, store
@@ -56,15 +58,15 @@ import { useViewportMessages } from "./viewport-messages";
  * from the row count and legend via `stateTimelineHeight()`.
  *
  * **Why so thin.** The props are a discriminated union over each
- * stdlib chart function — `kind: "line"` brings in exactly the params
+ * registered core chart renderer — `kind: "line"` brings in exactly the params
  * `charts.line` expects, `kind: "bar"` brings in `charts.bar`'s, etc.
- * Options stay aligned with stdlib without renaming. Every chart provides
+ * Options stay aligned with the core renderer without renaming. Every chart provides
  * renderer-owned inspection, tooltips and optional selection by default.
  * `interactive` adds bounded pan / zoom and reset controls to maps and state timelines.
- * If stdlib gains a new option, it's automatically available at every
+ * When a core renderer gains an option, it is automatically available at every
  * callsite.
  *
- * **Theming.** stdlib charts use `currentColor` for axes / ticks /
+ * **Theming.** The core renderers use `currentColor` for axes / ticks /
  * tick labels — set the wrapping element's `color` and everything
  * inherits. Series colors come from `--stdlib-chart-c1..c8` CSS
  * custom properties; override on the parent for per-chart palettes.
@@ -82,7 +84,7 @@ import { useViewportMessages } from "./viewport-messages";
  * ```
  */
 
-/** All chart kinds shipped by `stdlib.charts`. */
+/** All registered chart kinds. */
 
 /**
  * Per-kind props: `kind` discriminator + the exact options that
@@ -92,80 +94,14 @@ import { useViewportMessages } from "./viewport-messages";
  * get full type safety.
  */
 
-/** Pure renderer options: component layout, events and inspection are configured elsewhere. */
+export { chartRenderHeight, renderChartSvg } from "../charts/core/render";
 
-/** Keep the fixed 28-unit bar-gauge rows inside the shared SSR/browser coordinate space. */
-export const chartRenderHeight = props => {
-  if (props.kind === "stateTimeline") return stateTimelineHeight(props.rows.length, props.legend !== false);
-  if (props.kind === "bar") return barChartLayout(props).height;
-  if (props.kind === "barGauge") return Math.max(280, (props.title || props.subtitle ? 42 : 16) + props.data.length * 28 + 14);
-  return 280;
-};
-
-/**
- * Internal — strips wrapper-only keys from props and forwards the
- * rest (plus logical size) to `charts[kind]`. The `any` is the
- * price for dispatching one function call across 14 different option
- * types; an explicit per-kind switch would type it but balloon the
- * component for no runtime benefit.
- */
-export const renderChartSvg = (props, width, height, mapViewport, timelineViewport) => {
-  const {
-    kind,
-    class: _class,
-    style: _style,
-    labels: _labels,
-    interactive: _interactive,
-    onSelect: _onSelect,
-    selected: _selected,
-    tooltip: _tooltip,
-    cursor: _cursor,
-    zoomFocus: _zoomFocus,
-    legendPlacement: _legendPlacement,
-    ...opts
-  } = props;
-  if (kind === "stateTimeline") {
-    return responsiveChartSvg(renderStateTimelineSvg({
-      ...opts,
-      width,
-      height,
-      viewport: timelineViewport,
-      interactive: true
-    }));
-  }
-  if (kind === "bar") return responsiveChartSvg(renderBarChartSvg({
-    ...opts,
-    width,
-    height,
-    inspect: true
-  }));
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let svg = charts[kind]({
-    ...opts,
-    ...(props.kind === "line" && props.legend && props.legendPlacement === "top-start" ? {
-      legend: false
-    } : {}),
-    ...(kind === "map" ? {
-      viewport: DEFAULT_MAP_VIEWPORT
-    } : {}),
-    width,
-    height,
-    inspect: true
-  });
-  if (props.kind === "line" && props.maxGap !== undefined) {
-    if (props.area || props.errorBand) throw new Error("Chart maxGap does not support area or errorBand fills");
-    svg = lineGapsSvg(svg, props.maxGap, props);
-  }
-  if (props.kind === "map") return responsiveMapSvg(svg, width, height, normalizeMapViewport(mapViewport ?? props.viewport));
-  return preservesAspectRatio(kind) ? svg : responsiveChartSvg(svg);
-};
-const preservesAspectRatio = kind => kind === "map" || kind === "pie" || kind === "donut" || kind === "gauge";
-
-/** Empty-data short-circuit. Kept per-kind because stdlib's payload
+/** Empty-data short-circuit. Kept per-kind because each renderer's payload
  *  key differs (series vs data vs groups). We're conservative: only
  *  block on truly empty inputs; partially-filled series get rendered
- *  as-is and stdlib handles the gaps. */
+ *  as-is and the core handles the gaps. */
 const isEmpty = props => {
+  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);
   }
@@ -183,8 +119,8 @@ const isEmpty = props => {
   }
   return false;
 };
-const Chart = props => {
-  const [, drawingProps] = splitProps(props, ["selected", "onSelect", "tooltip", "cursor"]);
+const ChartRoot = props => {
+  const [, drawingProps] = splitProps(props, ["class", "style", "labels", "interactive", "selected", "onSelect", "tooltip", "cursor"]);
   const messages = useUiMessages();
   const chartMessages = useChartMessages();
   const viewportMessages = useViewportMessages();
@@ -194,12 +130,31 @@ const Chart = props => {
   let lineAnchorRef;
   // One deterministic coordinate space on the server and client. CSS fits the
   // SVG to its box; hydration must never replace it with measured geometry.
+  const calendar = () => props.kind === "heatmap" && props.layout === "calendar" ? calendarLayout({
+    ...props,
+    locale: props.locale ?? locale()
+  }) : undefined;
   const size = () => ({
-    width: 480,
+    width: calendar()?.width ?? 480,
     height: chartRenderHeight(props)
   });
-  const topLegend = () => props.kind === "line" && props.legend === true && props.legendPlacement === "top-start";
-  const legendSeries = () => props.kind === "line" ? props.series : [];
+  const topLegend = () => props.kind === "area" ? props.legend !== false : props.kind === "line" && props.legend === true && props.legendPlacement === "top-start";
+  const legendSeries = () => props.kind === "line" || props.kind === "area" ? props.series : [];
+  const legendValue = index => {
+    if (props.kind !== "area") return "";
+    const last = props.x.length - 1;
+    const amount = props.series[index]?.data[last];
+    const values = props.series.map(s => s.data[last]);
+    const total = values.reduce((sum, value) => sum + (value ?? 0), 0);
+    if (amount == null || values.some(v => v == null) || props.normalize && total === 0) return "—";
+    return props.normalize ? new Intl.NumberFormat(locale(), {
+      style: "percent",
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    }).format(amount / total) : props.format?.(amount) ?? new Intl.NumberFormat(locale(), {
+      maximumFractionDigits: 2
+    }).format(amount);
+  };
   const dimensions = () => containerRef?.getBoundingClientRect() ?? size();
   const initialMapViewport = props.kind === "map" ? normalizeMapViewport(props.viewport) : DEFAULT_MAP_VIEWPORT;
   const [mapViewport, setMapViewport] = createSignal(initialMapViewport);
@@ -336,6 +291,7 @@ const Chart = props => {
     pointerFrame = requestAnimationFrame(flushPointerMove);
   };
   const stopDragging = event => {
+    inspection.up();
     if (pendingPointer?.pointerId === event.pointerId) flushPointerMove();
     if (timelineDrag?.pointerId === event.pointerId) {
       if (event.currentTarget.hasPointerCapture(event.pointerId)) {
@@ -405,22 +361,35 @@ const Chart = props => {
   };
   const inspection = createChartInspection({
     container: () => containerRef,
+    locale,
     cursor: () => props.cursor,
     tooltip: () => chartTooltipRef,
     anchor: () => lineAnchorRef,
     kind: () => props.kind,
+    nav: () => props.kind === "heatmap" && props.layout === "calendar" ? calendarInspectionNavigation : undefined,
     enabled: () => !isEmpty(props),
     select: selection => props.onSelect?.(selection),
     format: selection => {
       if (props.tooltip) return props.tooltip(selection);
-      const fields = chartMessages().chartFields;
+      const fields = 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");
+        return {
+          title: selection.datum.values.find(f => f.key === "x")?.formatted ?? "",
+          rows: [{
+            label: selection.datum.label ?? chartMessages().series,
+            value: `${share ? `${share.formatted} · ` : ""}${amount.formatted}`
+          }]
+        };
+      }
       const format = new Intl.NumberFormat(locale(), {
         maximumFractionDigits: 6
       });
       return {
         title: selection.datum.label ?? (selection.datum.seriesIndex !== undefined ? `${labels().series ?? chartMessages().series} ${selection.datum.seriesIndex + 1}` : undefined),
         rows: selection.datum.values.map(field => ({
-          label: selection.kind === "line" && field.key === "y" ? selection.datum.label ?? labels().series ?? chartMessages().series : fields({
+          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 : fields({
             key: field.key
           }),
           value: field.formatted ?? (field.key === "upperInclusive" ? field.value === "true" ? messages().yes : messages().no : typeof field.value === "number" ? `${format.format(field.value)}${field.key === "percent" ? "%" : ""}` : field.value)
@@ -429,7 +398,10 @@ const Chart = props => {
     }
   });
   const closeChartTooltip = () => inspection.close();
-  const svgMarkup = createMemo(() => renderChartSvg(drawingProps, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined));
+  const svgMarkup = createMemo(() => renderChartSvg(props.kind === "heatmap" && props.layout === "calendar" ? {
+    ...props,
+    locale: props.locale ?? locale()
+  } : drawingProps, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined, locale()));
   createEffect(() => {
     svgMarkup();
     inspection.invalidate();
@@ -444,10 +416,12 @@ const Chart = props => {
   });
   onMount(() => {
     if (!containerRef) return;
+    if (props.kind === "heatmap" && props.layout === "calendar") onCleanup(mountCalendarScroll(containerRef));
     onCleanup(closeChartInspectionOnOutside({
       container: () => containerRef,
       tooltip: () => chartTooltipRef,
-      close: closeChartTooltip
+      close: closeChartTooltip,
+      keepScroll: () => props.kind === "heatmap" && props.layout === "calendar"
     }));
   });
   const chartStyle = () => props.style ?? (props.kind === "stateTimeline" ? {
@@ -475,10 +449,10 @@ const Chart = props => {
         typeof _ref$4 === "function" ? _$use(_ref$4, _el$16) : containerRef = _el$16;
         _$insert(_el$16, () => labels().empty ?? messages().noData);
         _$effect(_p$ => {
-          var _v$12 = `k2b-chart k2b-chart__empty ${props.class ?? ""}`,
-            _v$13 = chartStyle();
-          _v$12 !== _p$.e && _$className(_el$16, _p$.e = _v$12);
-          _p$.t = _$style(_el$16, _v$13, _p$.t);
+          var _v$13 = `k2b-chart k2b-chart__empty ${props.class ?? ""}`,
+            _v$14 = chartStyle();
+          _v$13 !== _p$.e && _$className(_el$16, _p$.e = _v$13);
+          _p$.t = _$style(_el$16, _v$14, _p$.t);
           return _p$;
         }, {
           e: undefined,
@@ -519,23 +493,51 @@ const Chart = props => {
               return legendSeries();
             },
             children: (series, index) => (() => {
-              var _el$17 = _$getNextElement(_tmpl$6),
+              var _el$17 = _$getNextElement(_tmpl$7),
                 _el$18 = _el$17.firstChild,
                 _el$19 = _el$18.firstChild,
-                _el$20 = _el$18.nextSibling;
+                _el$20 = _el$18.nextSibling,
+                _el$22 = _el$20.nextSibling,
+                [_el$23, _co$6] = _$getNextMarker(_el$22.nextSibling);
               _$insert(_el$20, (() => {
                 var _c$ = _$memo(() => !!(series.label && series.label.length > 0));
-                return () => _c$() ? series.label : `Series ${index() + 1}`;
+                return () => _c$() ? series.label : `${chartMessages().series} ${index() + 1}`;
               })());
+              _$insert(_el$17, _$createComponent(Show, {
+                get when() {
+                  return props.kind === "area";
+                },
+                get children() {
+                  var _el$21 = _$getNextElement(_tmpl$6);
+                  _$insert(_el$21, () => legendValue(index()));
+                  _$effect(_p$ => {
+                    var _v$15 = index(),
+                      _v$16 = props.kind === "area" && props.normalize ? "percent" : "value",
+                      _v$17 = legendValue(index());
+                    _v$15 !== _p$.e && _$setAttribute(_el$21, "data-series-index", _p$.e = _v$15);
+                    _v$16 !== _p$.t && _$setAttribute(_el$21, "data-field", _p$.t = _v$16);
+                    _v$17 !== _p$.a && _$setAttribute(_el$21, "data-default", _p$.a = _v$17);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined,
+                    a: undefined
+                  });
+                  return _el$21;
+                }
+              }), _el$23, _co$6);
               _$effect(_p$ => {
-                var _v$14 = `stdlib-chart k2b-chart__legend-swatch ${props.kind === "line" ? props.className ?? "" : ""}`,
-                  _v$15 = `stdlib-chart-series-${index() % 8}`;
-                _v$14 !== _p$.e && _$setAttribute(_el$18, "class", _p$.e = _v$14);
-                _v$15 !== _p$.t && _$setAttribute(_el$19, "class", _p$.t = _v$15);
+                var _v$18 = `stdlib-chart k2b-chart__legend-swatch ${props.kind === "line" ? props.className ?? "" : ""}`,
+                  _v$19 = `stdlib-chart-series-${index() % 8}`,
+                  _v$20 = `var(--stdlib-chart-c${index() % 8 + 1}, ${["#2563eb", "#16a34a", "#d97706", "#dc2626", "#a855f7", "#0891b2", "#db2777", "#65a30d"][index() % 8]})`;
+                _v$18 !== _p$.e && _$setAttribute(_el$18, "class", _p$.e = _v$18);
+                _v$19 !== _p$.t && _$setAttribute(_el$19, "class", _p$.t = _v$19);
+                _v$20 !== _p$.a && _$setAttribute(_el$19, "fill", _p$.a = _v$20);
                 return _p$;
               }, {
                 e: undefined,
-                t: undefined
+                t: undefined,
+                a: undefined
               });
               return _el$17;
             })()
@@ -576,11 +578,12 @@ const Chart = props => {
           _v$6 = chartStyle(),
           _v$7 = accessibleName(),
           _v$8 = accessibleName() !== chartMessages().interactiveChart ? chartMessages().interactiveChart : undefined,
-          _v$9 = !preservesAspectRatio(props.kind) ? "true" : undefined,
-          _v$0 = `${size().width}px`,
-          _v$1 = `${size().height}px`,
-          _v$10 = `${size().width} / ${size().height}`,
-          _v$11 = isServer ? selectedChartSvg(svgMarkup(), props.selected) : svgMarkup();
+          _v$9 = !calendar() && !preservesAspectRatio(props.kind) ? "true" : undefined,
+          _v$0 = calendar() ? `${calendar().minWidth}px` : undefined,
+          _v$1 = `${size().width}px`,
+          _v$10 = `${size().height}px`,
+          _v$11 = `${size().width} / ${size().height}`,
+          _v$12 = isServer ? selectedChartSvg(svgMarkup(), props.selected) : svgMarkup();
         _v$ !== _p$.e && _$className(_el$2, _p$.e = _v$);
         _v$2 !== _p$.t && _$setAttribute(_el$2, "data-chart-kind", _p$.t = _v$2);
         _v$3 !== _p$.a && _$setAttribute(_el$2, "data-legend-placement", _p$.a = _v$3);
@@ -590,10 +593,11 @@ const Chart = props => {
         _v$7 !== _p$.s && _$setAttribute(_el$2, "aria-label", _p$.s = _v$7);
         _v$8 !== _p$.h && _$setAttribute(_el$2, "aria-description", _p$.h = _v$8);
         _v$9 !== _p$.r && _$setAttribute(_el$4, "data-stretch", _p$.r = _v$9);
-        _v$0 !== _p$.d && _$setStyleProperty(_el$4, "--k2b-chart-width", _p$.d = _v$0);
-        _v$1 !== _p$.l && _$setStyleProperty(_el$4, "--k2b-chart-height", _p$.l = _v$1);
-        _v$10 !== _p$.u && _$setStyleProperty(_el$4, "aspect-ratio", _p$.u = _v$10);
-        _v$11 !== _p$.c && _$setProperty(_el$4, "innerHTML", _p$.c = _v$11);
+        _v$0 !== _p$.d && _$setStyleProperty(_el$4, "min-width", _p$.d = _v$0);
+        _v$1 !== _p$.l && _$setStyleProperty(_el$4, "--k2b-chart-width", _p$.l = _v$1);
+        _v$10 !== _p$.u && _$setStyleProperty(_el$4, "--k2b-chart-height", _p$.u = _v$10);
+        _v$11 !== _p$.c && _$setStyleProperty(_el$4, "aspect-ratio", _p$.c = _v$11);
+        _v$12 !== _p$.w && _$setProperty(_el$4, "innerHTML", _p$.w = _v$12);
         return _p$;
       }, {
         e: undefined,
@@ -608,13 +612,28 @@ const Chart = props => {
         d: undefined,
         l: undefined,
         u: undefined,
-        c: undefined
+        c: undefined,
+        w: undefined
       });
       _$runHydrationEvents();
       return _el$2;
     }
   });
 };
+// Add a renderer to charts/core/registry.ts; its key defines the namespace member and discriminator.
+// Both entry styles share ChartRoot, preserving the same owner, markup and reactive props.
+const chartComponent = kind => props =>
+// Public namespace types correlate each discriminator with its options.
+ChartRoot(mergeProps(props, {
+  kind
+}));
+const components = Object.fromEntries(Object.entries(chartKinds).map(([name, kind]) => [name, chartComponent(kind)]));
+const Chart = Object.assign(ChartRoot, components, {
+  Calendar: props => ChartRoot(mergeProps(props, {
+    kind: "heatmap",
+    layout: "calendar"
+  }))
+});
 export default Chart;
 _$delegateEvents(["pointerdown", "pointermove", "pointerup", "click", "focusin", "focusout", "keydown"]);
 //# sourceMappingURL=Chart.js.map