@k2b/ui 0.1.0-rc.0

package/dist/browser/content/Chart.js

@@ -0,0 +1,680 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-chart__anchor aria-hidden=true>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span role=tooltip popover=manual class=k2b-tooltip>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-chart__controls><button type=button class="k2b-button k2b-icon-button"data-variant=secondary><i class="ti ti-plus"aria-hidden=true></i></button><button type=button class="k2b-button k2b-icon-button"data-variant=secondary><i class="ti ti-minus"aria-hidden=true></i></button><button type=button class="k2b-button k2b-icon-button"data-variant=secondary><i class="ti ti-focus-centered"aria-hidden=true>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div role=group><div class=k2b-chart__svg></div><!$><!/><!$><!/>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<div>`);
+import { charts } from "@k2b/stdlib";
+import { createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, Show } from "solid-js";
+import { positionTooltipSurface } from "../feedback/tooltip-position";
+import { useUiMessages } from "../intl/messages";
+import { DEFAULT_MAP_VIEWPORT, normalizeMapViewport, panMapViewport, zoomMapViewport } from "./chart-map-viewport";
+import { panStateTimelineViewport, renderStateTimelineSvg, stateTimelineDomain, stateTimelineHeight, zoomStateTimelineViewport } from "./chart-state-timeline";
+
+/**
+ * Chart — minimal Solid wrapper around `stdlib.charts`.
+ *
+ * **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.** stdlib emits `<svg viewBox="0 0 W H">` with no width/
+ * height attributes, so the SVG would otherwise fall back to the
+ * browser's replaced-element default (300×150) and either overflow
+ * or look squished. We measure the wrapping `<div>` with a
+ * ResizeObserver and pass the actual pixel dimensions to stdlib —
+ * the viewBox matches the container, no aspect distortion, no
+ * letterboxing. Sizing the wrapper itself is the caller's job
+ * (`style={{ height: "14rem" }}`, an app class, a flex child, …).
+ * On SSR (no observer)
+ * the chart renders at stdlib's default size; the first client-side
+ * frame re-measures and re-renders.
+ *
+ * One documented exception: `kind: "stateTimeline"` derives its own
+ * initial height from the row count and legend via
+ * `stateTimelineHeight()`, because a timeline's height is a function of
+ * how many rows it has rather than of the layout around it. Every other
+ * kind starts at 280px until the observer reports the real box. Layout
+ * code that sizes charts uniformly must account for this.
+ *
+ * **Why so thin.** The props are a discriminated union over each
+ * stdlib chart function — `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. Shared interactive
+ * layers add bounded pan / zoom controls to maps and state timelines, plus
+ * nearest-point hover and keyboard inspection for line charts.
+ * If stdlib gains a new option, it's automatically available at every
+ * callsite.
+ *
+ * **Theming.** stdlib charts 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 chart kinds shipped by `stdlib.charts`. */
+
+/**
+ * Per-kind props: `kind` discriminator + the exact options that
+ * `charts.<kind>` accepts, **minus** `width` / `height` (the wrapper
+ * owns those — they're derived from container measurement). Solid's
+ * component model handles discriminated unions natively, so callsites
+ * get full type safety.
+ */
+
+/**
+ * Internal — strips wrapper-only keys from props and forwards the
+ * rest (plus measured size) to `charts[kind]`. The `any` is the
+ * price for dispatching one function call across 8 different option
+ * types; an explicit per-kind switch would type it but balloon the
+ * component for no runtime benefit.
+ */
+const renderSvg = (props, width, height, mapViewport, timelineViewport) => {
+  const {
+    kind,
+    class: _class,
+    style: _style,
+    labels: _labels,
+    interactive: _interactive,
+    ...opts
+  } = props;
+  if (kind === "stateTimeline") {
+    return renderStateTimelineSvg({
+      ...opts,
+      width,
+      height,
+      viewport: timelineViewport
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return charts[kind]({
+    ...opts,
+    ...(kind === "map" && mapViewport ? {
+      viewport: mapViewport
+    } : {}),
+    width,
+    height
+  });
+};
+
+/** Empty-data short-circuit. Kept per-kind because stdlib'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. */
+const isEmpty = props => {
+  if (props.kind === "line" || props.kind === "scatter") {
+    return !props.series?.length || props.series.every(s => !s.data.length);
+  }
+  if (props.kind === "bar" || 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;
+};
+const Chart = props => {
+  const messages = useUiMessages();
+  let containerRef;
+  let chartTooltipRef;
+  let lineAnchorRef;
+  let chartTooltipTriggerRef;
+  // Initial size matches stdlib's chart-function defaults so the SSR
+  // render is sensible. The observer updates this on the first
+  // client-side frame; the SVG re-renders reactively via innerHTML.
+  const initialHeight = props.kind === "stateTimeline" ? stateTimelineHeight(props.rows.length, props.legend !== false) : 280;
+  const [size, setSize] = createSignal({
+    width: 480,
+    height: initialHeight
+  });
+  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 [linePointIndex, setLinePointIndex] = createSignal(0);
+  const [lineInspectionActive, setLineInspectionActive] = createSignal(false);
+  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 interactiveLine = () => props.kind === "line" && props.interactive === true;
+  const interactive = () => interactiveMap() || interactiveTimeline() || interactiveLine();
+  const draggable = () => interactiveMap() || interactiveTimeline();
+  const labels = () => props.labels ?? {};
+  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 rect = viewportElement?.getBoundingClientRect();
+    if (rect && rect.width > 0 && rect.height > 0) {
+      return {
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    return size();
+  };
+  const zoom = delta => {
+    if (interactiveMap()) {
+      setMapViewport(current => zoomMapViewport(current, delta));
+    } else if (interactiveTimeline()) {
+      updateTimelineViewport(current => zoomStateTimelineViewport(current, timelineFullDomain(), delta));
+    }
+  };
+  const reset = () => {
+    if (interactiveMap() && props.kind === "map") {
+      setMapViewport(normalizeMapViewport(props.viewport));
+    }
+    if (interactiveTimeline()) {
+      timelineViewportLocallyChanged = false;
+      setTimelineViewport(timelineFullDomain());
+    }
+  };
+  const handlePointerDown = event => {
+    if (!draggable() || event.button !== 0 || event.target.closest("button, a")) {
+      return;
+    }
+    closeChartTooltip();
+    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;
+    if (interactiveLine()) {
+      showLineTooltip(sample.clientX, sample.clientY);
+      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 => {
+    if (!interactiveLine() && 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 => {
+    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 (!interactive()) return;
+    if (interactiveLine()) {
+      const values = lineXValues();
+      if (values.length === 0) return;
+      if (event.key === "Escape") {
+        closeChartTooltip();
+        return;
+      }
+      const next = event.key === "Home" ? 0 : event.key === "End" ? values.length - 1 : event.key === "ArrowLeft" ? Math.max(0, linePointIndex() - 1) : event.key === "ArrowRight" ? Math.min(values.length - 1, linePointIndex() + 1) : null;
+      if (next === null) return;
+      event.preventDefault();
+      showLinePoint(next);
+      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 closeChartTooltip = () => {
+    if (interactiveLine()) {
+      if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
+      pointerFrame = undefined;
+      pendingPointer = undefined;
+    }
+    chartTooltipTriggerRef?.removeAttribute("aria-describedby");
+    chartTooltipTriggerRef = undefined;
+    setLineInspectionActive(false);
+    if (!chartTooltipRef) return;
+    try {
+      if (chartTooltipRef.matches(":popover-open")) chartTooltipRef.hidePopover();
+    } catch {
+      // A disconnect can race with the Popover API.
+    }
+  };
+  const showTimelineTooltip = target => {
+    if (!interactiveTimeline() || !chartTooltipRef) return;
+    const trigger = target?.closest("[data-chart-tooltip]");
+    const content = trigger?.dataset.chartTooltip;
+    if (!trigger || !content) return;
+    chartTooltipTriggerRef?.removeAttribute("aria-describedby");
+    chartTooltipTriggerRef = trigger;
+    trigger.setAttribute("aria-describedby", chartTooltipId);
+    chartTooltipRef.textContent = content;
+    try {
+      if (!chartTooltipRef.matches(":popover-open")) chartTooltipRef.showPopover();
+      positionTooltipSurface(chartTooltipRef, trigger);
+    } catch {
+      // SVG <title> remains as the fallback on browsers without Popover.
+    }
+  };
+  const lineInspection = createMemo(() => {
+    if (props.kind !== "line") {
+      return {
+        values: [],
+        series: []
+      };
+    }
+    const values = new Set();
+    const series = props.series.map(entry => {
+      const points = new Map();
+      for (const point of entry.data) {
+        if (!Number.isFinite(point.x)) continue;
+        values.add(point.x);
+        if (Number.isFinite(point.y) && !points.has(point.x)) points.set(point.x, point);
+      }
+      return {
+        label: entry.label ?? labels().series ?? messages().series,
+        points
+      };
+    });
+    return {
+      values: [...values].sort((left, right) => left - right),
+      series
+    };
+  });
+  const lineXValues = () => lineInspection().values;
+  const linePlotBounds = () => {
+    if (props.kind !== "line") return {
+      left: 0,
+      right: size().width
+    };
+    const padding = props.padding;
+    const left = (typeof padding === "number" ? padding : padding?.left) ?? 40;
+    const rightInset = (typeof padding === "number" ? padding : padding?.right) ?? 16;
+    return {
+      left: left + (props.yAxis?.label ? 14 : 0),
+      right: Math.max(left + 1, size().width - rightInset)
+    };
+  };
+  const showLinePoint = (index, pointerY) => {
+    if (props.kind !== "line" || !chartTooltipRef || !lineAnchorRef) return;
+    const inspection = lineInspection();
+    const values = inspection.values;
+    const pointIndex = Math.min(values.length - 1, Math.max(0, index));
+    const x = values[pointIndex];
+    if (x === undefined) return;
+    const points = inspection.series.map(series => {
+      const point = series.points.get(x);
+      return point ? {
+        label: series.label,
+        point
+      } : null;
+    }).filter(entry => entry !== null);
+    if (points.length === 0) return;
+    const xFormat = props.xAxis?.format ?? String;
+    const yFormat = props.yAxis?.format ?? String;
+    chartTooltipRef.textContent = [xFormat(x), ...points.map(entry => `${entry.label}: ${yFormat(entry.point.y)}`)].join(" · ");
+    const [min, max] = [values[0] ?? x, values.at(-1) ?? x];
+    const bounds = linePlotBounds();
+    const ratio = max === min ? 0.5 : (x - min) / (max - min);
+    lineAnchorRef.style.left = `${bounds.left + ratio * (bounds.right - bounds.left)}px`;
+    lineAnchorRef.style.top = `${Math.min(size().height - 8, Math.max(8, pointerY ?? 24))}px`;
+    setLinePointIndex(pointIndex);
+    setLineInspectionActive(true);
+    try {
+      if (!chartTooltipRef.matches(":popover-open")) chartTooltipRef.showPopover();
+      positionTooltipSurface(chartTooltipRef, lineAnchorRef);
+    } catch {
+      // The chart remains readable on browsers without Popover support.
+    }
+  };
+  const showLineTooltip = (clientX, clientY) => {
+    const values = lineXValues();
+    if (values.length === 0) return;
+    const rect = containerRef?.getBoundingClientRect();
+    if (!rect) return;
+    const bounds = linePlotBounds();
+    const localX = clientX - rect.left;
+    const ratio = Math.min(1, Math.max(0, (localX - bounds.left) / Math.max(1, bounds.right - bounds.left)));
+    const target = (values[0] ?? 0) + ratio * ((values.at(-1) ?? 0) - (values[0] ?? 0));
+    let low = 0;
+    let high = values.length - 1;
+    while (low < high) {
+      const middle = Math.floor((low + high) / 2);
+      if (values[middle] < target) low = middle + 1;else high = middle;
+    }
+    const previous = Math.max(0, low - 1);
+    const index = Math.abs(values[previous] - target) <= Math.abs(values[low] - target) ? previous : low;
+    showLinePoint(index, clientY - rect.top);
+  };
+  onCleanup(() => {
+    if (pointerFrame !== undefined) cancelAnimationFrame(pointerFrame);
+    pointerFrame = undefined;
+    pendingPointer = undefined;
+  });
+  onMount(() => {
+    if (!containerRef) return;
+    // Seed immediately from layout — avoids one wasted re-render in
+    // the case where the container already has its final size at
+    // mount time (the common case for dashboard widgets).
+    const rect = containerRef.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      setSize({
+        width: Math.round(rect.width),
+        height: Math.round(rect.height)
+      });
+    }
+    const ro = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) return;
+      const {
+        width,
+        height
+      } = entry.contentRect;
+      // Floor to integer pixels; sub-pixel jitter would trigger an
+      // SVG re-render on every scroll/zoom otherwise.
+      if (width > 0 && height > 0) {
+        setSize(prev => {
+          const w = Math.round(width);
+          const h = Math.round(height);
+          return prev.width === w && prev.height === h ? prev : {
+            width: w,
+            height: h
+          };
+        });
+      }
+    });
+    ro.observe(containerRef);
+    window.addEventListener("scroll", closeChartTooltip, true);
+    window.addEventListener("resize", closeChartTooltip);
+    onCleanup(() => {
+      ro.disconnect();
+      window.removeEventListener("scroll", closeChartTooltip, true);
+      window.removeEventListener("resize", closeChartTooltip);
+    });
+  });
+  const chartStyle = () => props.style ?? (props.kind === "stateTimeline" ? {
+    height: `${stateTimelineHeight(props.rows.length, props.legend !== false)}px`
+  } : undefined);
+  return _$createComponent(Show, {
+    get when() {
+      return !isEmpty(props);
+    },
+    get fallback() {
+      return (() => {
+        var _el$11 = _$getNextElement(_tmpl$5);
+        var _ref$4 = containerRef;
+        typeof _ref$4 === "function" ? _$use(_ref$4, _el$11) : containerRef = _el$11;
+        _$insert(_el$11, () => labels().empty ?? messages().noData);
+        _$effect(_p$ => {
+          var _v$15 = `k2b-chart k2b-chart__empty ${props.class ?? ""}`,
+            _v$16 = chartStyle();
+          _v$15 !== _p$.e && _$className(_el$11, _p$.e = _v$15);
+          _p$.t = _$style(_el$11, _v$16, _p$.t);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
+        return _el$11;
+      })();
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$4),
+        _el$2 = _el$.firstChild,
+        _el$9 = _el$2.nextSibling,
+        [_el$0, _co$] = _$getNextMarker(_el$9.nextSibling),
+        _el$1 = _el$0.nextSibling,
+        [_el$10, _co$2] = _$getNextMarker(_el$1.nextSibling);
+      _el$.$$keydown = handleKeyDown;
+      _el$.addEventListener("wheel", handleWheel);
+      _el$.$$focusout = closeChartTooltip;
+      _el$.$$focusin = event => {
+        if (interactiveLine()) showLinePoint(lineXValues().length - 1);else showTimelineTooltip(event.target);
+      };
+      _el$.addEventListener("pointerleave", closeChartTooltip);
+      _el$.$$pointerout = event => {
+        const trigger = event.target.closest("[data-chart-tooltip]");
+        if (trigger && !trigger.contains(event.relatedTarget)) closeChartTooltip();
+      };
+      _el$.$$pointerover = event => showTimelineTooltip(event.target);
+      _el$.addEventListener("pointercancel", stopDragging);
+      _el$.$$pointerup = stopDragging;
+      _el$.$$pointermove = handlePointerMove;
+      _el$.$$pointerdown = handlePointerDown;
+      var _ref$ = containerRef;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$) : containerRef = _el$;
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return interactiveTimeline() || interactiveLine();
+        },
+        get children() {
+          return [(() => {
+            var _el$3 = _$getNextElement(_tmpl$);
+            var _ref$2 = lineAnchorRef;
+            typeof _ref$2 === "function" ? _$use(_ref$2, _el$3) : lineAnchorRef = _el$3;
+            return _el$3;
+          })(), (() => {
+            var _el$4 = _$getNextElement(_tmpl$2);
+            var _ref$3 = chartTooltipRef;
+            typeof _ref$3 === "function" ? _$use(_ref$3, _el$4) : chartTooltipRef = _el$4;
+            _$setAttribute(_el$4, "id", chartTooltipId);
+            return _el$4;
+          })()];
+        }
+      }), _el$0, _co$);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return draggable();
+        },
+        get children() {
+          var _el$5 = _$getNextElement(_tmpl$3),
+            _el$6 = _el$5.firstChild,
+            _el$7 = _el$6.nextSibling,
+            _el$8 = _el$7.nextSibling;
+          _el$6.$$click = () => zoom(1);
+          _el$7.$$click = () => zoom(-1);
+          _el$8.$$click = reset;
+          _$effect(_p$ => {
+            var _v$ = labels().zoomIn ?? messages().zoomIn,
+              _v$2 = `${labels().zoomIn ?? messages().zoomIn} (+)`,
+              _v$3 = labels().zoomOut ?? messages().zoomOut,
+              _v$4 = `${labels().zoomOut ?? messages().zoomOut} (-)`,
+              _v$5 = interactiveMap() ? labels().resetMap ?? messages().resetMapView : labels().resetTimeline ?? messages().resetTimelineView,
+              _v$6 = `${interactiveMap() ? labels().resetMap ?? messages().resetMapView : labels().resetTimeline ?? messages().resetTimelineView} (0)`;
+            _v$ !== _p$.e && _$setAttribute(_el$6, "aria-label", _p$.e = _v$);
+            _v$2 !== _p$.t && _$setAttribute(_el$6, "title", _p$.t = _v$2);
+            _v$3 !== _p$.a && _$setAttribute(_el$7, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && _$setAttribute(_el$7, "title", _p$.o = _v$4);
+            _v$5 !== _p$.i && _$setAttribute(_el$8, "aria-label", _p$.i = _v$5);
+            _v$6 !== _p$.n && _$setAttribute(_el$8, "title", _p$.n = _v$6);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined
+          });
+          _$runHydrationEvents();
+          return _el$5;
+        }
+      }), _el$10, _co$2);
+      _$effect(_p$ => {
+        var _v$7 = `k2b-chart ${props.class ?? ""}`,
+          _v$8 = props.kind,
+          _v$9 = draggable() ? dragging() ? "active" : "idle" : undefined,
+          _v$0 = !draggable() && interactiveLine() ? "true" : undefined,
+          _v$1 = interactive() ? "true" : undefined,
+          _v$10 = chartStyle(),
+          _v$11 = interactiveLine() && lineInspectionActive() ? chartTooltipId : undefined,
+          _v$12 = interactiveMap() ? labels().interactiveMap ?? messages().interactiveMap : interactiveTimeline() ? labels().interactiveTimeline ?? messages().interactiveTimeline : interactiveLine() ? labels().interactiveLine ?? messages().interactiveLineChart : undefined,
+          _v$13 = interactive() ? 0 : undefined,
+          _v$14 = renderSvg(props, size().width, size().height, interactiveMap() ? mapViewport() : undefined, interactiveTimeline() ? timelineViewport() : undefined);
+        _v$7 !== _p$.e && _$className(_el$, _p$.e = _v$7);
+        _v$8 !== _p$.t && _$setAttribute(_el$, "data-chart-kind", _p$.t = _v$8);
+        _v$9 !== _p$.a && _$setAttribute(_el$, "data-drag", _p$.a = _v$9);
+        _v$0 !== _p$.o && _$setAttribute(_el$, "data-crosshair", _p$.o = _v$0);
+        _v$1 !== _p$.i && _$setAttribute(_el$, "data-interactive", _p$.i = _v$1);
+        _p$.n = _$style(_el$, _v$10, _p$.n);
+        _v$11 !== _p$.s && _$setAttribute(_el$, "aria-describedby", _p$.s = _v$11);
+        _v$12 !== _p$.h && _$setAttribute(_el$, "aria-label", _p$.h = _v$12);
+        _v$13 !== _p$.r && _$setAttribute(_el$, "tabindex", _p$.r = _v$13);
+        _v$14 !== _p$.d && _$setProperty(_el$2, "innerHTML", _p$.d = _v$14);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined,
+        s: undefined,
+        h: undefined,
+        r: undefined,
+        d: undefined
+      });
+      _$runHydrationEvents();
+      return _el$;
+    }
+  });
+};
+export default Chart;
+_$delegateEvents(["pointerdown", "pointermove", "pointerup", "pointerover", "pointerout", "focusin", "focusout", "keydown", "click"]);
+//# sourceMappingURL=Chart.js.map