@leavepulse/ui 0.77.2 → 0.78.0

package/dist/components/LpChart.vue.js

@@ -1,18 +1,25 @@
-import { defineComponent, ref, computed, onMounted, watch, shallowRef, openBlock, createElementBlock, mergeProps, unref, createBlock, createCommentVNode, createElementVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, createVNode, withCtx, normalizeStyle, createSlots, withDirectives, vShow, createTextVNode } from "vue";
+import { defineComponent, ref, computed, onMounted, shallowRef, watch, nextTick, useId, openBlock, createElementBlock, mergeProps, unref, createBlock, createCommentVNode, createElementVNode, toDisplayString, renderSlot, Fragment, renderList, normalizeClass, createVNode, withCtx, normalizeStyle, createSlots, withDirectives, vShow, createTextVNode } from "vue";
+import { clamp } from "../composables/clamp.js";
 import { Motion } from "motion-v";
+import { useChartSync } from "../composables/useChartSync.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
+import { easeTravel } from "../composables/easing.js";
+import { usePrefersReducedMotion } from "../composables/useReducedMotion.js";
+import { startPointerDrag } from "../composables/pointerDrag.js";
+import { nodeWindow } from "../composables/realm.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useReveal } from "../composables/useReveal.js";
 import { useTween, lerp, mixValues, resample } from "../composables/useTween.js";
 import { normalise, pointCount, resolveLabels, extent, axisTicks, fitScale, plotHeight, plotWidth, xLabelIndices, xAt, yAt, areaPath, linePath, barPath, markerIndex, chartSummary, niceScale, nearestIndex, formatTick } from "./chart.js";
+import { _ as _sfc_main$8 } from "../chunks/ChartRangeSelector-HO0sMMz6.js";
+import { clampRange, chartView, sourceOf, slotOf, ZOOM_STEP, zoomRange } from "./chartWindow.js";
 import { PANEL_SURFACE } from "./dropdown.js";
 import { _ as _sfc_main$2 } from "../chunks/LegendSwatch-BhRjrtzv.js";
-import { _ as _sfc_main$3 } from "../chunks/LpContextMenu-rx2tCjwk.js";
-import { _ as _sfc_main$6 } from "../chunks/LpEmptyState-EQHiRYhG.js";
-import { _ as _sfc_main$7 } from "../chunks/LpShift-CCq7dofl.js";
+import { _ as _sfc_main$3 } from "../chunks/LpContextMenu--eMGIql6.js";
+import { _ as _sfc_main$6 } from "../chunks/LpEmptyState-DurPF001.js";
+import { _ as _sfc_main$7 } from "../chunks/LpShift-DAgS_d2x.js";
 import { _ as _sfc_main$5 } from "../chunks/LpSkeleton-BB6XIV-w.js";
-import { _ as _sfc_main$4 } from "../chunks/LpSwap-C96c0LWh.js";
+import { _ as _sfc_main$4 } from "../chunks/LpSwap-M7nFeW3C.js";
 import { sampleValues, skeletonHeights, skeletonWave } from "./chartSkeleton.js";
 import { _ as _sfc_main$1 } from "../chunks/HintSampleTag-BV8AZXZh.js";
 import { useSample } from "../composables/useSample.js";
@@ -82,33 +89,38 @@ const _hoisted_30 = ["x", "y"];
 const _hoisted_31 = ["x1", "x2", "y1", "y2"];
 const _hoisted_32 = ["x", "y", "width", "height"];
 const _hoisted_33 = ["x", "y", "width", "height", "fill"];
-const _hoisted_34 = ["clip-path"];
-const _hoisted_35 = ["d", "fill", "opacity"];
-const _hoisted_36 = ["d", "fill"];
-const _hoisted_37 = ["d", "stroke", "stroke-dasharray"];
-const _hoisted_38 = ["cx", "cy", "fill"];
-const _hoisted_39 = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray"];
-const _hoisted_40 = ["x", "y", "fill"];
-const _hoisted_41 = ["x1", "x2", "y1", "y2", "stroke"];
+const _hoisted_34 = ["x", "y", "fill"];
+const _hoisted_35 = ["x", "y", "width", "height", "fill"];
+const _hoisted_36 = ["clip-path"];
+const _hoisted_37 = ["d", "fill", "opacity"];
+const _hoisted_38 = ["d", "fill"];
+const _hoisted_39 = ["d", "stroke", "stroke-dasharray"];
+const _hoisted_40 = ["cx", "cy", "fill"];
+const _hoisted_41 = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray"];
 const _hoisted_42 = ["x", "y", "fill"];
-const _hoisted_43 = { key: 3 };
-const _hoisted_44 = ["x1", "x2", "y1", "y2"];
+const _hoisted_43 = ["x1", "x2", "y1", "y2", "stroke"];
+const _hoisted_44 = ["x", "y", "fill"];
 const _hoisted_45 = ["cx", "cy", "fill"];
-const _hoisted_46 = ["x", "y"];
-const _hoisted_47 = { class: "mb-1 text-[11px] font-medium text-muted-strong" };
-const _hoisted_48 = { class: "flex flex-col gap-1" };
-const _hoisted_49 = { class: "flex items-center gap-1.5 text-muted" };
-const _hoisted_50 = { class: "font-mono tabular-nums text-ink" };
-const _hoisted_51 = {
+const _hoisted_46 = ["x", "y", "text-anchor", "fill"];
+const _hoisted_47 = ["x", "y", "width", "height"];
+const _hoisted_48 = { key: 4 };
+const _hoisted_49 = ["x1", "x2", "y1", "y2"];
+const _hoisted_50 = ["cx", "cy", "fill"];
+const _hoisted_51 = ["x", "y"];
+const _hoisted_52 = { class: "mb-1 text-[11px] font-medium text-muted-strong" };
+const _hoisted_53 = { class: "flex flex-col gap-1" };
+const _hoisted_54 = { class: "flex items-center gap-1.5 text-muted" };
+const _hoisted_55 = { class: "font-mono tabular-nums text-ink" };
+const _hoisted_56 = {
   class: "sr-only",
   "aria-live": "polite"
 };
-const _hoisted_52 = {
-  key: 3,
+const _hoisted_57 = {
+  key: 4,
   class: "sr-only"
 };
-const _hoisted_53 = { key: 0 };
-const _hoisted_54 = { scope: "row" };
+const _hoisted_58 = { key: 0 };
+const _hoisted_59 = { scope: "row" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -141,29 +153,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     loading: { type: Boolean },
     thresholds: { default: () => [] },
     markers: { default: () => [] },
+    bands: { default: () => [] },
+    annotations: { default: () => [] },
+    range: { default: void 0 },
+    rangeSelector: { type: Boolean },
+    zoomable: { type: Boolean },
+    downsample: { type: [String, Boolean] },
+    maxPoints: {},
+    syncGroup: {},
     ariaLabel: {},
     dataTable: { type: Boolean, default: false },
     text: {},
     menuItems: {}
   },
-  emits: ["pointClick", "pointContextMenu"],
+  emits: ["pointClick", "pointContextMenu", "update:range"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const strings = useLabels(
       "chart",
-      { empty: "No data", loading: "Loading", rightAxis: "Measured on the right axis", point: "Point", xColumn: "Label" },
+      {
+        empty: "No data",
+        loading: "Loading",
+        rightAxis: "Measured on the right axis",
+        point: "Point",
+        xColumn: "Label",
+        rangeStart: "Start of the range",
+        rangeEnd: "End of the range",
+        resetZoom: "Show all"
+      },
       () => props.text
     );
     const emit = __emit;
     const root = ref(null);
     const width = ref(0);
     const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animate });
-    const reduced = ref(false);
+    const reduced = usePrefersReducedMotion();
     const still = computed(() => !props.animate || reduced.value);
     const drawing = computed(() => !still.value && revealed.value);
     onMounted(() => {
       revealAnchor.value = root.value;
-      reduced.value = prefersReducedMotion();
     });
     useResizeObserver(root, (entry, el) => width.value = entry ? entry.contentRect.width : el.clientWidth, {
       immediate: true
@@ -173,7 +201,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const next = new Set(hidden.value);
       if (next.has(id)) next.delete(id);
       else next.add(id);
-      if (next.size < source.value.length) hidden.value = next;
+      if (allSeries.value.some((s) => !next.has(s.id))) hidden.value = next;
     };
     const SAMPLE_POINTS = 12;
     const sampling = useSample(
@@ -187,21 +215,56 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const series = props.series.length ? props.series : [{ name: "", data: [] }];
       return series.map((s, i) => ({ ...s, data: sampleValues(count2, i) }));
     });
-    const allSeries = computed(
+    const fullSeries = computed(
       () => normalise(source.value).map((s, i) => ({ ...s, id: `${i}:${s.name}` }))
     );
+    const fullCount = computed(() => pointCount(fullSeries.value));
+    const fullLabels = computed(() => resolveLabels(source.value, props.labels, fullCount.value));
+    const ownRange = shallowRef(null);
+    const range = computed(() => clampRange(props.range === void 0 ? ownRange.value : props.range, fullCount.value));
+    const view = computed(
+      () => chartView(
+        fullSeries.value.map((s) => s.values),
+        fullCount.value,
+        range.value,
+        props.type === "bar" ? false : props.downsample,
+        props.maxPoints ?? Math.floor(width.value)
+      )
+    );
+    const narrowed = computed(() => range.value !== null || view.value.indices !== null);
+    const allSeries = computed(
+      () => narrowed.value ? fullSeries.value.map((s, i) => ({ ...s, values: view.value.values[i] })) : fullSeries.value
+    );
+    function setRange(next) {
+      ownRange.value = next;
+      emit("update:range", next);
+    }
+    let rangeMoving = false;
+    watch(
+      () => `${range.value?.start}:${range.value?.end}`,
+      () => {
+        rangeMoving = true;
+        void nextTick(() => rangeMoving = false);
+      },
+      { flush: "sync" }
+    );
     const visible = computed(() => allSeries.value.filter((s) => !hidden.value.has(s.id)));
     const seeded = /* @__PURE__ */ new Set();
     watch(
       () => props.series.map((s, i) => [`${i}:${s.name}`, !!s.hidden]),
       (entries) => {
-        let next = null;
+        if (!entries.length) return;
+        const ids = new Set(entries.map(([id]) => id));
+        for (const id of seeded) if (!ids.has(id)) seeded.delete(id);
+        const kept = [...hidden.value].filter((id) => ids.has(id));
+        const next = new Set(kept);
         for (const [id, off] of entries) {
           if (seeded.has(id)) continue;
           seeded.add(id);
-          if (off) (next ??= new Set(hidden.value)).add(id);
+          if (off) next.add(id);
         }
-        if (next && next.size < entries.length) hidden.value = next;
+        const allowed = next.size < entries.length ? next : new Set(kept);
+        if (allowed.size !== hidden.value.size || [...allowed].some((id) => !hidden.value.has(id))) hidden.value = allowed;
       },
       { immediate: true }
     );
@@ -209,7 +272,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const settle = {
       duration: SETTLE_MS,
       ease: easeTravel,
-      enabled: () => props.animate
+      enabled: () => props.animate && !rangeMoving
     };
     const presenceTargets = computed(
       () => new Map(allSeries.value.map((s) => [s.id, hidden.value.has(s.id) ? 0 : 1]))
@@ -254,7 +317,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
        * itself in on its own entrance — a morph from readings nobody saw would
        * only muddy it.
        */
-      enabled: () => props.animate && revealed.value && !!svgEl.value
+      enabled: () => props.animate && !rangeMoving && revealed.value && !!svgEl.value
     });
     const drawnById = computed(() => {
       const out = /* @__PURE__ */ new Map();
@@ -262,10 +325,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return out;
     });
     const count = computed(() => pointCount(allSeries.value));
-    const labels = computed(() => resolveLabels(source.value, props.labels, count.value));
+    const labels = computed(
+      () => narrowed.value ? Array.from({ length: count.value }, (_, slot) => fullLabels.value[sourceOf(view.value, slot)] ?? "") : fullLabels.value
+    );
     const banded = computed(() => props.type === "bar");
     const hasData = computed(
-      () => allSeries.value.some((s) => s.values.some((v) => v != null))
+      () => fullSeries.value.some((s) => s.values.some((v) => v != null))
     );
     const ready = computed(() => hasData.value && !props.loading);
     const plotState = computed(() => props.loading ? "loading" : hasData.value ? "plot" : "empty");
@@ -431,23 +496,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const baseY = computed(
       () => yAt(
-        Math.max(scale.value.min, Math.min(scale.value.max, 0)),
+        clamp(0, scale.value.min, scale.value.max),
         scale.value.min,
         scale.value.max,
         box.value
       )
     );
+    const curve = computed(() => view.value.indices ? 0 : props.smooth);
     const lines = computed(
       () => drawnSeries.value.map((s) => {
         const g = geoOf(s);
         const p = presenceOf(s.id) * s.enter;
-        const base = Math.min(Math.max(0, g.min), g.max);
+        const base = clamp(0, g.min, g.max);
         const values = p === 1 ? s.values : s.values.map((v) => v == null ? null : base + (v - base) * p);
         return {
           ...s,
           values,
-          d: linePath(values, g, props.smooth),
-          fill: props.type === "area" ? areaPath(values, g, props.smooth) : "",
+          d: linePath(values, g, curve.value),
+          fill: props.type === "area" ? areaPath(values, g, curve.value) : "",
           /* A dashed series is a reference level (a budget, a target), not a
              measurement — dotting it implies readings that aren't there. */
           points: props.showPoints && !s.dashed,
@@ -488,7 +554,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           } else {
             const sc = scaleOf(s);
             const top = yAt(v, sc.min, sc.max, box.value);
-            const base = yAt(Math.max(sc.min, Math.min(sc.max, 0)), sc.min, sc.max, box.value);
+            const base = yAt(clamp(0, sc.min, sc.max), sc.min, sc.max, box.value);
             y = Math.min(top, base);
             h = Math.abs(top - base);
           }
@@ -531,6 +597,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const active = ref(-1);
     const pointer = ref({ x: 0, y: 0 });
+    const { peerLabel, publish } = useChartSync(() => props.syncGroup);
+    const labelIndex = computed(() => props.syncGroup ? new Map(fullLabels.value.map((label, i) => [label, i])) : null);
+    const peerSlot = computed(() => {
+      const source2 = peerLabel.value == null ? void 0 : labelIndex.value?.get(peerLabel.value);
+      return source2 === void 0 ? -1 : slotOf(view.value, source2);
+    });
+    const crosshair = computed(() => active.value >= 0 ? active.value : peerSlot.value);
+    watch(active, (slot) => publish(slot >= 0 ? labels.value[slot] ?? null : null));
+    const SELECT_SLOP = 4;
+    let swallowClick = false;
+    const selection = ref(null);
+    const onPointerDown = (e) => {
+      if (!props.zoomable || e.button !== 0) return;
+      const el = e.currentTarget;
+      const offset = (ev) => ev.clientX - el.getBoundingClientRect().left;
+      const pressedAt = offset(e);
+      startPointerDrag(e, {
+        move(ev) {
+          const x = offset(ev);
+          if (Math.abs(x - pressedAt) > SELECT_SLOP) selection.value = { from: pressedAt, to: x };
+        },
+        end(completed) {
+          const picked = selection.value;
+          selection.value = null;
+          if (!completed || !picked) return;
+          swallowClick = true;
+          const ends = [picked.from, picked.to].map((x) => sourceOf(view.value, nearestIndex(x, geo.value)));
+          setRange(clampRange({ start: ends[0], end: ends[1] }, fullCount.value));
+        }
+      });
+    };
     const onMove = (e) => {
       keyboard.value = false;
       const el = e.currentTarget;
@@ -539,16 +636,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       pointer.value = { x, y: e.clientY - rect.top };
       active.value = nearestIndex(x, geo.value);
     };
+    const selectionBox = computed(() => {
+      if (!selection.value) return null;
+      const right = box.value.width - box.value.right;
+      const [from, to] = [selection.value.from, selection.value.to].map((x) => clamp(x, box.value.left, right));
+      return { x: Math.min(from, to), width: Math.abs(to - from) };
+    });
+    function zoomBy(factor, anchor) {
+      setRange(zoomRange(range.value, fullCount.value, anchor, factor));
+    }
+    const onWheel = (e) => {
+      if (!props.zoomable || !e.ctrlKey || !ready.value) return;
+      e.preventDefault();
+      const rect = e.currentTarget.getBoundingClientRect();
+      const plot = plotWidth(box.value) || 1;
+      zoomBy(e.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP, (e.clientX - rect.left - box.value.left) / plot);
+    };
+    const resetZoom = () => {
+      if (range.value) setRange(null);
+    };
     const onLeave = () => {
       active.value = -1;
     };
     const pointEvent = (originalEvent) => ({
-      index: active.value,
+      index: sourceOf(view.value, active.value),
       label: labels.value[active.value] ?? "",
       values: allSeries.value.map((s) => s.values[active.value] ?? null),
       originalEvent
     });
     const onClick = (e) => {
+      if (swallowClick) {
+        swallowClick = false;
+        return;
+      }
       const rect = e.currentTarget.getBoundingClientRect();
       active.value = nearestIndex(e.clientX - rect.left, geo.value);
       if (active.value < 0) return;
@@ -566,13 +686,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("pointContextMenu", menuPoint.value);
     };
     const activeX = computed(
-      () => active.value < 0 ? 0 : xAt(active.value, count.value, box.value, banded.value)
+      () => crosshair.value < 0 ? 0 : xAt(crosshair.value, count.value, box.value, banded.value)
     );
     const activePoints = computed(() => {
-      if (active.value < 0) return [];
-      return visible.value.map((s) => ({ s, v: s.values[active.value] })).filter((r) => r.v != null).map(({ s, v }) => {
+      if (crosshair.value < 0) return [];
+      return visible.value.map((s) => ({ s, v: s.values[crosshair.value] })).filter((r) => r.v != null).map(({ s, v }) => {
         const sc = scaleOf(s);
-        const at = drawnById.value.get(s.id)?.values[active.value] ?? v;
+        const at = drawnById.value.get(s.id)?.values[crosshair.value] ?? v;
         return {
           color: s.color,
           id: s.id,
@@ -612,7 +732,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         revealKey.value++;
       }
     );
-    const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`;
+    const clipId = `lp-chart-${useId()}`;
     const gradientId = (name, index) => `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
     const thresholdMarks = computed(
       () => props.thresholds.flatMap((t, i) => {
@@ -635,7 +755,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const markerMarks = computed(
       () => props.markers.flatMap((m, i) => {
-        const index = markerIndex(m.at, labels.value, count.value);
+        const index = slotOf(view.value, markerIndex(m.at, fullLabels.value, fullCount.value));
         if (index < 0 || width.value <= 0) return [];
         return [
           {
@@ -647,6 +767,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ];
       })
     );
+    const xOfSource = (source2) => {
+      if (source2 < view.value.start) return box.value.left;
+      if (source2 > view.value.end) return box.value.width - box.value.right;
+      return xAt(slotOf(view.value, source2), count.value, box.value, banded.value);
+    };
+    const bandMarks = computed(
+      () => props.bands.flatMap((b, i) => {
+        const ends = [markerIndex(b.from, fullLabels.value, fullCount.value), markerIndex(b.to, fullLabels.value, fullCount.value)];
+        if (ends.some((end) => end < 0) || width.value <= 0) return [];
+        const from = Math.min(...ends);
+        const to = Math.max(...ends);
+        if (to < view.value.start || from > view.value.end) return [];
+        const x = xOfSource(from);
+        return [{ key: i, x, width: xOfSource(to) - x, label: b.label, color: b.color ?? "var(--color-line-strong)" }];
+      })
+    );
+    const annotationMarks = computed(
+      () => props.annotations.flatMap((a, i) => {
+        const source2 = markerIndex(a.at, fullLabels.value, fullCount.value);
+        const slot = slotOf(view.value, source2);
+        const lead = fullSeries.value.find((s) => !hidden.value.has(s.id) && s.values[source2] != null);
+        const value = a.value ?? lead?.values[source2];
+        if (slot < 0 || value == null || width.value <= 0) return [];
+        const sc = (a.value == null ? lead?.axis : a.axis) === "right" && rightScale.value ? rightScale.value : scale.value;
+        const x = xAt(slot, count.value, box.value, banded.value);
+        return [
+          {
+            key: i,
+            x,
+            y: yAt(value, sc.min, sc.max, box.value),
+            label: a.label,
+            color: a.color ?? "var(--color-ink)",
+            anchor: x > box.value.width - CARD_W ? "end" : "start"
+          }
+        ];
+      })
+    );
     const summary = computed(
       () => props.ariaLabel ?? chartSummary(visible.value, labels.value, fmtSeries, props.title)
     );
@@ -672,11 +829,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         case " ":
           if (active.value < 0) return;
           e.preventDefault();
-          emit("pointClick", pointEvent(new MouseEvent("click")));
+          emit("pointClick", pointEvent(new (nodeWindow(e.target)).MouseEvent("click")));
           return;
         case "Escape":
           active.value = -1;
           return;
+        case "+":
+        case "=":
+        case "-":
+          if (!props.zoomable) return;
+          e.preventDefault();
+          zoomBy(e.key === "-" ? 1 / ZOOM_STEP : ZOOM_STEP, active.value < 0 ? 0.5 : active.value / last);
+          return;
+        case "0":
+          if (!props.zoomable) return;
+          e.preventDefault();
+          resetZoom();
+          return;
         default:
           return;
       }
@@ -698,20 +867,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const svgEl = ref(null);
     function exportCsv(options = {}) {
-      const rows = labels.value.map((label, i) => ({ label, i }));
+      const rows = fullLabels.value.map((label, i) => ({ label, i }));
       const csv = toCsv(rows, [
         { key: "label", label: strings.value.xColumn },
-        ...allSeries.value.map((s) => ({ key: s.id, label: s.name, value: (r) => s.values[r.i] }))
+        ...fullSeries.value.map((s) => ({ key: s.id, label: s.name, value: (r) => s.values[r.i] }))
       ], options);
       if (options.download !== false) {
-        downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.csv`, csv, "text/csv;charset=utf-8");
+        downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.csv`, csv, "text/csv;charset=utf-8", svgEl.value?.ownerDocument);
       }
       return csv;
     }
     async function exportPng(options = {}) {
       const svg = svgEl.value;
-      if (!svg || typeof document === "undefined") return null;
-      const style = getComputedStyle(root.value ?? svg);
+      if (!svg) return null;
+      const style = nodeWindow(svg).getComputedStyle(root.value ?? svg);
       const font = style.fontFamily;
       const ink = style.getPropertyValue("--color-ink").trim() || style.color;
       const muted = style.getPropertyValue("--color-muted-strong").trim() || style.color;
@@ -747,7 +916,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return y ? y + 8 : 0;
         }
       });
-      if (options.download !== false) downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.png`, blob);
+      if (options.download !== false) downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.png`, blob, void 0, svgEl.value?.ownerDocument);
       return blob;
     }
     __expose({ exportCsv, exportPng });
@@ -896,9 +1065,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     height: __props.height,
                     class: "block overflow-visible touch-none select-none",
                     "aria-hidden": "true",
+                    onPointerdown: onPointerDown,
                     onPointermove: onMove,
                     onPointerleave: onLeave,
                     onClick,
+                    onDblclick: _cache[0] || (_cache[0] = ($event) => __props.zoomable && resetZoom()),
+                    onWheel,
                     onContextmenu: onContextMenu
                   }, [
                     createElementVNode("defs", null, [
@@ -998,6 +1170,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       fill: "var(--color-surface-soft)",
                       opacity: "0.5"
                     }, null, 8, _hoisted_32)) : createCommentVNode("", true),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(bandMarks.value, (b) => {
+                      return openBlock(), createElementBlock("g", {
+                        key: `x-band-${b.key}`
+                      }, [
+                        createElementVNode("rect", {
+                          x: b.x,
+                          y: box.value.top,
+                          width: b.width,
+                          height: unref(plotHeight)(box.value),
+                          fill: b.color,
+                          opacity: "0.1"
+                        }, null, 8, _hoisted_33),
+                        b.label ? (openBlock(), createElementBlock("text", {
+                          key: 0,
+                          x: b.x + 4,
+                          y: box.value.top + 9,
+                          class: "text-[10px]",
+                          fill: b.color
+                        }, toDisplayString(b.label), 9, _hoisted_34)) : createCommentVNode("", true)
+                      ]);
+                    }), 128)),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(thresholdMarks.value.filter((m) => m.height > 0), (t) => {
                       return openBlock(), createElementBlock("rect", {
                         key: `band-${t.key}`,
@@ -1007,7 +1200,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         height: t.height,
                         fill: t.color,
                         opacity: "0.08"
-                      }, null, 8, _hoisted_33);
+                      }, null, 8, _hoisted_35);
                     }), 128)),
                     createElementVNode("g", {
                       "clip-path": `url(#${clipId}-reveal)`
@@ -1019,7 +1212,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           fill: b.color,
                           class: "transition-opacity duration-fast",
                           opacity: active.value < 0 || active.value === b.index ? 1 : 0.45
-                        }, null, 8, _hoisted_35);
+                        }, null, 8, _hoisted_37);
                       }), 128)),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s, i) => {
                         return openBlock(), createElementBlock("g", {
@@ -1029,7 +1222,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           withDirectives(createElementVNode("path", {
                             d: s.fill,
                             fill: `url(#${gradientId(s.name, i)})`
-                          }, null, 8, _hoisted_36), [
+                          }, null, 8, _hoisted_38), [
                             [vShow, __props.type === "area"]
                           ]),
                           withDirectives(createElementVNode("path", {
@@ -1040,7 +1233,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             "stroke-linecap": "round",
                             "stroke-linejoin": "round",
                             "stroke-dasharray": s.dashed ? "5 4" : void 0
-                          }, null, 8, _hoisted_37), [
+                          }, null, 8, _hoisted_39), [
                             [vShow, __props.type !== "bar"]
                           ]),
                           __props.type !== "bar" && s.points ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(s.values, (v, j) => {
@@ -1050,13 +1243,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               cy: v == null ? 0 : unref(yAt)(v, s.scale.min, s.scale.max, box.value),
                               r: "2.5",
                               fill: s.color
-                            }, null, 8, _hoisted_38)), [
+                            }, null, 8, _hoisted_40)), [
                               [vShow, v != null]
                             ]);
                           }), 128)) : createCommentVNode("", true)
                         ], 4);
                       }), 128))
-                    ], 8, _hoisted_34),
+                    ], 8, _hoisted_36),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(thresholdMarks.value, (t) => {
                       return openBlock(), createElementBlock("g", {
                         key: `t-${t.key}`
@@ -1069,7 +1262,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           stroke: t.color,
                           "stroke-width": "1",
                           "stroke-dasharray": t.solid ? void 0 : "4 3"
-                        }, null, 8, _hoisted_39),
+                        }, null, 8, _hoisted_41),
                         t.label ? (openBlock(), createElementBlock("text", {
                           key: 0,
                           x: box.value.width - box.value.right - 4,
@@ -1077,7 +1270,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           "text-anchor": "end",
                           class: "text-[10px]",
                           fill: t.color
-                        }, toDisplayString(t.label), 9, _hoisted_40)) : createCommentVNode("", true)
+                        }, toDisplayString(t.label), 9, _hoisted_42)) : createCommentVNode("", true)
                       ]);
                     }), 128)),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(markerMarks.value, (m) => {
@@ -1092,17 +1285,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           stroke: m.color,
                           "stroke-width": "1",
                           "stroke-dasharray": "2 3"
-                        }, null, 8, _hoisted_41),
+                        }, null, 8, _hoisted_43),
                         m.label ? (openBlock(), createElementBlock("text", {
                           key: 0,
                           x: m.x + 4,
                           y: box.value.top + 9,
                           class: "text-[10px]",
                           fill: m.color
-                        }, toDisplayString(m.label), 9, _hoisted_42)) : createCommentVNode("", true)
+                        }, toDisplayString(m.label), 9, _hoisted_44)) : createCommentVNode("", true)
+                      ]);
+                    }), 128)),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(annotationMarks.value, (a) => {
+                      return openBlock(), createElementBlock("g", {
+                        key: `a-${a.key}`
+                      }, [
+                        createElementVNode("circle", {
+                          cx: a.x,
+                          cy: a.y,
+                          r: "3.5",
+                          fill: a.color,
+                          stroke: "var(--color-surface)",
+                          "stroke-width": "1.5"
+                        }, null, 8, _hoisted_45),
+                        createElementVNode("text", {
+                          x: a.anchor === "end" ? a.x - 6 : a.x + 6,
+                          y: a.y - 6,
+                          "text-anchor": a.anchor,
+                          class: "text-[10px]",
+                          fill: a.color
+                        }, toDisplayString(a.label), 9, _hoisted_46)
                       ]);
                     }), 128)),
-                    active.value >= 0 && __props.type !== "bar" ? (openBlock(), createElementBlock("g", _hoisted_43, [
+                    selectionBox.value ? (openBlock(), createElementBlock("rect", {
+                      key: 3,
+                      "data-lp-chart-selection": "",
+                      x: selectionBox.value.x,
+                      y: box.value.top,
+                      width: selectionBox.value.width,
+                      height: unref(plotHeight)(box.value),
+                      fill: "var(--color-brand)",
+                      opacity: "0.15"
+                    }, null, 8, _hoisted_47)) : createCommentVNode("", true),
+                    crosshair.value >= 0 && __props.type !== "bar" ? (openBlock(), createElementBlock("g", _hoisted_48, [
                       createElementVNode("line", {
                         x1: activeX.value,
                         x2: activeX.value,
@@ -1111,7 +1335,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         stroke: "var(--color-line-strong)",
                         "stroke-width": "1",
                         "stroke-dasharray": "3 3"
-                      }, null, 8, _hoisted_44),
+                      }, null, 8, _hoisted_49),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(activePoints.value, (p) => {
                         return openBlock(), createElementBlock("circle", {
                           key: p.id,
@@ -1121,7 +1345,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           fill: p.color,
                           stroke: "var(--color-surface)",
                           "stroke-width": "2"
-                        }, null, 8, _hoisted_45);
+                        }, null, 8, _hoisted_50);
                       }), 128))
                     ])) : createCommentVNode("", true),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(xLabels.value, (l) => {
@@ -1131,7 +1355,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         y: __props.height - 8,
                         "text-anchor": "middle",
                         class: normalizeClass(["fill-[var(--color-muted)] text-[10px]", active.value === l.i ? "fill-[var(--color-ink)]" : ""])
-                      }, toDisplayString(l.label), 11, _hoisted_46)), [
+                      }, toDisplayString(l.label), 11, _hoisted_51)), [
                         [vShow, __props.showXAxis]
                       ]);
                     }), 128))
@@ -1155,21 +1379,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createVNode(_sfc_main$7, { axis: "both" }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_47, toDisplayString(labels.value[active.value]), 1),
-                      createElementVNode("div", _hoisted_48, [
+                      createElementVNode("div", _hoisted_52, toDisplayString(labels.value[active.value]), 1),
+                      createElementVNode("div", _hoisted_53, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(tooltipRows.value, (r) => {
                           return openBlock(), createElementBlock("div", {
                             key: r.id,
                             class: "flex items-center justify-between gap-3 text-xs"
                           }, [
-                            createElementVNode("span", _hoisted_49, [
+                            createElementVNode("span", _hoisted_54, [
                               createElementVNode("span", {
                                 class: "size-1.5 shrink-0 rounded-full",
                                 style: normalizeStyle({ backgroundColor: r.color })
                               }, null, 4),
                               createTextVNode(" " + toDisplayString(r.name), 1)
                             ]),
-                            createElementVNode("span", _hoisted_50, toDisplayString(r.text), 1)
+                            createElementVNode("span", _hoisted_55, toDisplayString(r.text), 1)
                           ]);
                         }), 128))
                       ])
@@ -1179,18 +1403,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 8, ["class", "animate", "transition"])) : createCommentVNode("", true),
-              createElementVNode("span", _hoisted_51, toDisplayString(readout.value), 1)
+              __props.zoomable && range.value && ready.value ? (openBlock(), createElementBlock("button", {
+                key: 1,
+                type: "button",
+                class: "absolute right-1 top-1 rounded-inner bg-surface-raised px-2 py-0.5 text-[11px] text-muted-strong outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                onClick: resetZoom
+              }, toDisplayString(unref(strings).resetZoom), 1)) : createCommentVNode("", true),
+              createElementVNode("span", _hoisted_56, toDisplayString(readout.value), 1)
             ], 44, _hoisted_10)
           ]),
           _: 3
         }, 8, ["items", "always"]),
-        __props.dataTable && ready.value ? (openBlock(), createElementBlock("div", _hoisted_52, [
+        __props.rangeSelector && ready.value && width.value > 0 ? (openBlock(), createBlock(_sfc_main$8, {
+          key: 3,
+          values: fullSeries.value.find((s) => s.values.some((v) => v != null))?.values ?? [],
+          count: fullCount.value,
+          range: range.value,
+          width: width.value,
+          labels: fullLabels.value,
+          "start-label": unref(strings).rangeStart,
+          "end-label": unref(strings).rangeEnd,
+          onChange: setRange
+        }, null, 8, ["values", "count", "range", "width", "labels", "start-label", "end-label"])) : createCommentVNode("", true),
+        __props.dataTable && ready.value ? (openBlock(), createElementBlock("div", _hoisted_57, [
           createElementVNode("table", null, [
-            __props.title ? (openBlock(), createElementBlock("caption", _hoisted_53, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+            __props.title ? (openBlock(), createElementBlock("caption", _hoisted_58, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
             createElementVNode("thead", null, [
               createElementVNode("tr", null, [
-                _cache[0] || (_cache[0] = createElementVNode("th", { scope: "col" }, null, -1)),
-                (openBlock(true), createElementBlock(Fragment, null, renderList(allSeries.value, (s) => {
+                _cache[1] || (_cache[1] = createElementVNode("th", { scope: "col" }, null, -1)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(fullSeries.value, (s) => {
                   return openBlock(), createElementBlock("th", {
                     key: s.id,
                     scope: "col"
@@ -1199,10 +1440,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createElementVNode("tbody", null, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(labels.value, (label, i) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(fullLabels.value, (label, i) => {
                 return openBlock(), createElementBlock("tr", { key: i }, [
-                  createElementVNode("th", _hoisted_54, toDisplayString(label), 1),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(allSeries.value, (s) => {
+                  createElementVNode("th", _hoisted_59, toDisplayString(label), 1),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(fullSeries.value, (s) => {
                     return openBlock(), createElementBlock("td", {
                       key: s.id
                     }, toDisplayString(s.values[i] == null ? "—" : fmtSeries(s, s.values[i])), 1);
@@ -1216,7 +1457,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-21ad716e"]]);
+const LpChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-39ed90d7"]]);
 export {
   LpChart as default
 };