@k2b/ui 0.50.0 → 0.51.0

package/dist/browser/content/ChartRoot.js

@@ -0,0 +1,632 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div class=k2b-chart__legend role=group tabindex=0>`),
+  _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(`<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, 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 { chartRenderHeight, preservesAspectRatio } from "../charts/core/render-size";
+import { suppressTextSelection } from "../internal/text-selection";
+import { useLocale } from "../intl/locale";
+import { useUiMessages } from "../intl/messages";
+import { calendarInspectionNavigation, mountCalendarScroll } from "./chart-calendar";
+import { createChartInspection } from "./chart-inspection";
+import { closeChartInspectionOnOutside } from "./chart-inspection-core";
+import { DEFAULT_MAP_VIEWPORT, normalizeMapViewport, panMapViewport, zoomMapViewport } from "./chart-map-viewport";
+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 — 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
+ * slice, derived value) changes, the SVG re-renders. No manual
+ * subscription, no imperative DOM patching. Trade-off: every change
+ * is a full SVG re-build, not a diff — fine for dashboard cadences
+ * (poll, websocket, store updates). Don't use this for 60fps streaming.
+ *
+ * **Sizing.** The server and browser render the same logical viewBox. CSS
+ * fits Cartesian plots to the container and preserves text/marker sizes;
+ * maps fit the whole world and zoom uniformly across the full plot; pies, donuts and gauges retain
+ * their aspect ratio. No measurement
+ * or hydration redraw is needed. The caller sizes the wrapper, for example
+ * `style={{ height: "14rem" }}`. State timelines derive their default height
+ * from the row count and legend via `stateTimelineHeight()`.
+ *
+ * **Why so thin.** The props are a discriminated union over each
+ * 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 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.
+ * When a core renderer gains an option, it is automatically available at every
+ * callsite.
+ *
+ * **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.
+ *
+ * ```tsx
+ * <Chart kind="line" style={{ height: "12rem" }}
+ *        series={[{ data: points() }]}
+ *        yAxis={{ format: v => `€${v}k` }} />
+ *
+ * <Chart kind="donut" style={{ height: "12rem" }} data={slices()} />
+ *
+ * <Chart kind="sparkline" style={{ width: "6rem", height: "1.5rem" }} data={trend()} />
+ *
+ * <Chart kind="map" style={{ height: "16rem" }} series={locations()} interactive />
+ * ```
+ */
+
+/** All registered chart kinds. */
+
+/**
+ * Per-kind props: `kind` discriminator + the exact options that
+ * `charts.<kind>` accepts, **minus** `width` / `height` (the wrapper
+ * owns those — CSS fits a stable coordinate space to the box). Solid's
+ * component model handles discriminated unions natively, so callsites
+ * get full type safety.
+ */
+
+/** 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 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);
+  }
+  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") {
+    return !props.data?.length;
+  }
+  if (props.kind === "histogram" || props.kind === "sparkline") {
+    return !props.data?.length;
+  }
+  if (props.kind === "boxplot") {
+    return !props.groups?.length;
+  }
+  if (props.kind === "stateTimeline") {
+    return !props.rows?.length || props.rows.every(row => !row.intervals.length);
+  }
+  return false;
+};
+export const renderChartRoot = (props, renderChartSvg) => {
+  const [, drawingProps] = splitProps(props, ["class", "style", "labels", "interactive", "selected", "onSelect", "tooltip", "cursor"]);
+  const messages = useUiMessages();
+  const chartMessages = useChartMessages();
+  const viewportMessages = useViewportMessages();
+  const locale = useLocale();
+  let containerRef;
+  let chartTooltipRef;
+  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: calendar()?.width ?? 480,
+    height: chartRenderHeight(props)
+  });
+  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);
+  const initialTimelineViewport = props.kind === "stateTimeline" ? stateTimelineDomain(props.rows, props.domain) : [0, 1];
+  const [timelineViewport, setTimelineViewport] = createSignal(initialTimelineViewport);
+  const [dragging, setDragging] = createSignal(false);
+  const chartTooltipId = `k2b-chart-tooltip-${createUniqueId()}`;
+  let timelineViewportLocallyChanged = false;
+  let drag;
+  let timelineDrag;
+  let pointerFrame;
+  let pendingPointer;
+  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 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;
+    const valueLabel = (props.kind === "stat" || props.kind === "gauge") && props.label?.trim() ? props.label : undefined;
+    const fallback = props.kind === "map" ? chartMessages().interactiveMap : props.kind === "stateTimeline" ? chartMessages().interactiveTimeline : props.kind === "line" ? chartMessages().interactiveLineChart : chartMessages().interactiveChart;
+    return override ?? title ?? valueLabel ?? fallback;
+  };
+  const timelineFullDomain = () => props.kind === "stateTimeline" ? stateTimelineDomain(props.rows, props.domain) : [0, 1];
+  createEffect(() => {
+    if (props.kind === "map") {
+      setMapViewport(normalizeMapViewport(props.viewport));
+    }
+  });
+  createEffect(() => {
+    if (props.kind === "stateTimeline" && !timelineViewportLocallyChanged) {
+      setTimelineViewport(timelineFullDomain());
+    }
+  });
+  const updateTimelineViewport = update => {
+    timelineViewportLocallyChanged = true;
+    setTimelineViewport(update);
+  };
+  const mapDimensions = () => {
+    const viewportElement = containerRef?.querySelector(".stdlib-chart-map-viewport");
+    const matrix = viewportElement?.getScreenCTM?.();
+    const box = viewportElement?.viewBox?.baseVal;
+    if (matrix && box?.width && box.height) {
+      return {
+        width: box.width * Math.hypot(matrix.a, matrix.b),
+        height: box.height * Math.hypot(matrix.c, matrix.d)
+      };
+    }
+    const rect = viewportElement?.getBoundingClientRect();
+    if (rect && rect.width > 0 && rect.height > 0) {
+      return {
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    return dimensions();
+  };
+  const zoom = delta => {
+    closeChartTooltip();
+    if (interactiveMap()) {
+      setMapViewport(current => zoomMapViewport(current, delta, props.kind === "map" ? props.zoomFocus : undefined));
+    } else if (interactiveTimeline()) {
+      updateTimelineViewport(current => zoomStateTimelineViewport(current, timelineFullDomain(), delta));
+    }
+  };
+  const reset = () => {
+    closeChartTooltip();
+    if (interactiveMap() && props.kind === "map") {
+      setMapViewport(normalizeMapViewport(props.viewport));
+    }
+    if (interactiveTimeline()) {
+      timelineViewportLocallyChanged = false;
+      setTimelineViewport(timelineFullDomain());
+    }
+  };
+  const handlePointerDown = event => {
+    inspection.down(event);
+    if (!draggable() || event.button !== 0 || event.target.closest("button, a")) {
+      return;
+    }
+    closeChartTooltip();
+    // The pointer's own pointerup or pointercancel ends the hold.
+    suppressTextSelection(event.pointerId);
+    if (interactiveTimeline()) {
+      timelineDrag = {
+        pointerId: event.pointerId,
+        x: event.clientX,
+        width: Math.max(1, event.currentTarget.getBoundingClientRect().width),
+        viewport: timelineViewport()
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setDragging(true);
+      return;
+    }
+    const dimensions = mapDimensions();
+    drag = {
+      pointerId: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      width: dimensions.width,
+      height: dimensions.height,
+      viewport: mapViewport()
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  };
+  const flushPointerMove = () => {
+    if (pointerFrame !== undefined) {
+      cancelAnimationFrame(pointerFrame);
+      pointerFrame = undefined;
+    }
+    const sample = pendingPointer;
+    pendingPointer = undefined;
+    if (!sample) return;
+    const start = timelineDrag ?? drag;
+    if (start && Math.hypot(sample.clientX - start.x, sample.clientY - ("y" in start ? start.y : sample.clientY)) <= 6) return;
+    const activeTimelineDrag = timelineDrag;
+    if (activeTimelineDrag?.pointerId === sample.pointerId) {
+      updateTimelineViewport(() => panStateTimelineViewport(activeTimelineDrag.viewport, timelineFullDomain(), sample.clientX - activeTimelineDrag.x, activeTimelineDrag.width));
+      return;
+    }
+    if (!drag || drag.pointerId !== sample.pointerId) return;
+    setMapViewport(panMapViewport(drag.viewport, sample.clientX - drag.x, sample.clientY - drag.y, drag.width, drag.height));
+  };
+  const handlePointerMove = event => {
+    inspection.move(event);
+    if (timelineDrag?.pointerId !== event.pointerId && drag?.pointerId !== event.pointerId) return;
+    pendingPointer = {
+      pointerId: event.pointerId,
+      clientX: event.clientX,
+      clientY: event.clientY
+    };
+    if (pointerFrame !== undefined) return;
+    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)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      timelineDrag = undefined;
+      setDragging(false);
+      return;
+    }
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    drag = undefined;
+    setDragging(false);
+  };
+  const handleWheel = event => {
+    if (interactiveMap() && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      zoom(event.deltaY < 0 ? 1 : -1);
+      return;
+    }
+    if (!interactiveTimeline()) return;
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault();
+      const rect = event.currentTarget.getBoundingClientRect();
+      const anchor = rect.width > 0 ? (event.clientX - rect.left) / rect.width : 0.5;
+      updateTimelineViewport(current => zoomStateTimelineViewport(current, timelineFullDomain(), event.deltaY < 0 ? 1 : -1, anchor));
+    } else if (event.shiftKey) {
+      event.preventDefault();
+      updateTimelineViewport(current => panStateTimelineViewport(current, timelineFullDomain(), -event.deltaY, event.currentTarget.getBoundingClientRect().width));
+    }
+  };
+  const handleKeyDown = event => {
+    if (inspection.key(event)) return;
+    if (!draggable() || event.target !== containerRef) return;
+    if (event.key === "+" || event.key === "=") {
+      event.preventDefault();
+      zoom(1);
+      return;
+    }
+    if (event.key === "-" || event.key === "_") {
+      event.preventDefault();
+      zoom(-1);
+      return;
+    }
+    if (event.key === "0" || event.key === "Home") {
+      event.preventDefault();
+      reset();
+      return;
+    }
+    if (interactiveTimeline() && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+      event.preventDefault();
+      updateTimelineViewport(current => panStateTimelineViewport(current, timelineFullDomain(), event.key === "ArrowLeft" ? 80 : -80, event.currentTarget.getBoundingClientRect().width));
+      return;
+    }
+    const delta = {
+      ArrowLeft: [40, 0],
+      ArrowRight: [-40, 0],
+      ArrowUp: [0, 40],
+      ArrowDown: [0, -40]
+    }[event.key];
+    if (!delta) return;
+    event.preventDefault();
+    const dimensions = mapDimensions();
+    setMapViewport(current => panMapViewport(current, delta[0], delta[1], dimensions.width, dimensions.height));
+  };
+  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 = 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.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({
+            key: field.key
+          }) : props.kind === "bar" && field.key === "previous" ? props.compare?.label ?? fields({
+            key: field.key
+          }) : 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)
+        }))
+      };
+    }
+  });
+  const closeChartTooltip = () => inspection.close();
+  const svgMarkup = createMemo(() => renderChartSvg(props.kind === "heatmap" && props.layout === "calendar" ? {
+    ...props,
+    locale: props.locale ?? locale()
+  } : {
+    ...drawingProps,
+    ...(props.kind === "bar" || props.kind === "hbar" ? {
+      locale: locale()
+    } : {})
+  }, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined, locale()));
+  createEffect(() => {
+    svgMarkup();
+    inspection.invalidate();
+    untrack(() => inspection.selectDatum(props.selected));
+  });
+  createEffect(() => inspection.selectDatum(props.selected));
+  onCleanup(() => {
+    inspection.close();
+    if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
+    pointerFrame = undefined;
+    pendingPointer = undefined;
+  });
+  onMount(() => {
+    if (!containerRef) return;
+    if (props.kind === "heatmap" && props.layout === "calendar") onCleanup(mountCalendarScroll(containerRef));
+    onCleanup(closeChartInspectionOnOutside({
+      container: () => containerRef,
+      tooltip: () => chartTooltipRef,
+      close: closeChartTooltip,
+      keepScroll: () => props.kind === "heatmap" && props.layout === "calendar"
+    }));
+  });
+  const chartStyle = () => props.style ?? (props.kind === "stateTimeline" ? {
+    height: `${stateTimelineHeight(props.rows.length, props.legend !== false)}px`
+  } : undefined);
+  const control = (label, shortcut, icon, action) => _$createComponent(IconButton, {
+    variant: "secondary",
+    label: label,
+    tooltip: `${label} (${shortcut})`,
+    onClick: action,
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$);
+      _$className(_el$, `ti ${icon}`);
+      return _el$;
+    }
+  });
+  return _$createComponent(Show, {
+    get when() {
+      return !isEmpty(props);
+    },
+    get fallback() {
+      return (() => {
+        var _el$16 = _$getNextElement(_tmpl$5);
+        var _ref$4 = containerRef;
+        typeof _ref$4 === "function" ? _$use(_ref$4, _el$16) : containerRef = _el$16;
+        _$insert(_el$16, () => labels().empty ?? messages().noData);
+        _$effect(_p$ => {
+          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,
+          t: undefined
+        });
+        return _el$16;
+      })();
+    },
+    get children() {
+      var _el$2 = _$getNextElement(_tmpl$4),
+        _el$12 = _el$2.firstChild,
+        [_el$13, _co$4] = _$getNextMarker(_el$12.nextSibling),
+        _el$4 = _el$13.nextSibling,
+        _el$5 = _el$4.nextSibling,
+        _el$6 = _el$5.nextSibling,
+        _el$14 = _el$6.nextSibling,
+        [_el$15, _co$5] = _$getNextMarker(_el$14.nextSibling);
+      _el$2.$$keydown = handleKeyDown;
+      _el$2.addEventListener("wheel", handleWheel);
+      _el$2.$$focusout = closeChartTooltip;
+      _$addEventListener(_el$2, "focusin", inspection.focus, true);
+      _$addEventListener(_el$2, "pointerleave", inspection.leave);
+      _$addEventListener(_el$2, "click", inspection.click, true);
+      _el$2.addEventListener("pointercancel", stopDragging);
+      _el$2.$$pointerup = stopDragging;
+      _el$2.$$pointermove = handlePointerMove;
+      _el$2.$$pointerdown = handlePointerDown;
+      var _ref$ = containerRef;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$2) : containerRef = _el$2;
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return topLegend();
+        },
+        get children() {
+          var _el$3 = _$getNextElement(_tmpl$2);
+          _$insert(_el$3, _$createComponent(For, {
+            get each() {
+              return legendSeries();
+            },
+            children: (series, index) => (() => {
+              var _el$17 = _$getNextElement(_tmpl$7),
+                _el$18 = _el$17.firstChild,
+                _el$19 = _el$18.firstChild,
+                _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 : `${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$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,
+                a: undefined
+              });
+              return _el$17;
+            })()
+          }));
+          _$effect(() => _$setAttribute(_el$3, "aria-label", chartMessages().chartLegend));
+          return _el$3;
+        }
+      }), _el$13, _co$4);
+      var _ref$2 = lineAnchorRef;
+      typeof _ref$2 === "function" ? _$use(_ref$2, _el$5) : lineAnchorRef = _el$5;
+      var _ref$3 = chartTooltipRef;
+      typeof _ref$3 === "function" ? _$use(_ref$3, _el$6) : chartTooltipRef = _el$6;
+      _$setAttribute(_el$6, "id", chartTooltipId);
+      _$insert(_el$2, _$createComponent(Show, {
+        get when() {
+          return draggable();
+        },
+        get children() {
+          var _el$7 = _$getNextElement(_tmpl$3),
+            _el$8 = _el$7.firstChild,
+            [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+            _el$0 = _el$9.nextSibling,
+            [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling),
+            _el$10 = _el$1.nextSibling,
+            [_el$11, _co$3] = _$getNextMarker(_el$10.nextSibling);
+          _$insert(_el$7, () => control(labels().zoomIn ?? viewportMessages().zoomIn, "+", "ti-plus", () => zoom(1)), _el$9, _co$);
+          _$insert(_el$7, () => control(labels().zoomOut ?? viewportMessages().zoomOut, "-", "ti-minus", () => zoom(-1)), _el$1, _co$2);
+          _$insert(_el$7, () => control(interactiveMap() ? labels().resetMap ?? chartMessages().resetMapView : labels().resetTimeline ?? chartMessages().resetTimelineView, "0", "ti-focus-centered", reset), _el$11, _co$3);
+          return _el$7;
+        }
+      }), _el$15, _co$5);
+      _$effect(_p$ => {
+        var _v$ = `k2b-chart ${props.class ?? ""}`,
+          _v$2 = props.kind,
+          _v$3 = topLegend() ? "top-start" : undefined,
+          _v$4 = draggable() ? dragging() ? "active" : "idle" : undefined,
+          _v$5 = !draggable() && props.kind === "line" ? "true" : undefined,
+          _v$6 = chartStyle(),
+          _v$7 = accessibleName(),
+          _v$8 = accessibleName() !== chartMessages().interactiveChart ? chartMessages().interactiveChart : undefined,
+          _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);
+        _v$4 !== _p$.o && _$setAttribute(_el$2, "data-drag", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute(_el$2, "data-crosshair", _p$.i = _v$5);
+        _p$.n = _$style(_el$2, _v$6, _p$.n);
+        _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, "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,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined,
+        h: undefined,
+        r: undefined,
+        d: undefined,
+        l: undefined,
+        u: undefined,
+        c: undefined,
+        w: undefined
+      });
+      _$runHydrationEvents();
+      return _el$2;
+    }
+  });
+};
+_$delegateEvents(["pointerdown", "pointermove", "pointerup", "click", "focusin", "focusout", "keydown"]);
+//# sourceMappingURL=ChartRoot.js.map