@leavepulse/ui 0.43.4 → 0.45.0

package/dist/components/LpChart.vue.js

@@ -1,13 +1,15 @@
 import { defineComponent, ref, computed, onMounted, onBeforeUnmount, watch, shallowRef, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, normalizeClass, normalizeStyle, createVNode, withCtx, withDirectives, vShow, createBlock, createTextVNode } from "vue";
 import { Motion } from "motion-v";
+import { useLabels } from "../composables/useLpConfig.js";
 import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { useReveal } from "../composables/useReveal.js";
-import { normalise, pointCount, resolveLabels, extent, axisTicks, niceScale, plotHeight, plotWidth, xAt, yAt, areaPath, linePath, barPath, nearestIndex, formatTick } from "./chart.js";
-import { _ as _sfc_main$1 } from "../chunks/LpContextMenu-CwW1QXe_.js";
-import { _ as _sfc_main$2 } from "../chunks/LpIcon-CCnX5_2j.js";
+import { normalise, pointCount, resolveLabels, extent, axisTicks, plotHeight, plotWidth, xAt, yAt, areaPath, linePath, barPath, markerIndex, chartSummary, niceScale, nearestIndex, formatTick } from "./chart.js";
+import { _ as _sfc_main$1 } from "../chunks/LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$2 } from "../chunks/LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$3 } from "../chunks/LpShift-DXNsauQZ.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { toCsv, downloadFile, fileStem, svgToPng, backgroundOf, resolveCssColor } from "./exportData.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpChart-CzgCGaAA.css';const _hoisted_1 = {
   key: 0,
@@ -26,44 +28,56 @@ const _hoisted_5 = {
   key: 1,
   class: "flex flex-wrap items-center gap-x-4 gap-y-1.5"
 };
-const _hoisted_6 = ["onClick"];
+const _hoisted_6 = ["aria-pressed", "onClick"];
 const _hoisted_7 = { class: "text-muted-strong group-hover:text-ink" };
-const _hoisted_8 = {
-  key: 0,
-  class: "text-[10px] text-muted",
-  title: "Measured on the right axis"
-};
-const _hoisted_9 = {
+const _hoisted_8 = ["title"];
+const _hoisted_9 = ["tabindex", "role", "aria-label"];
+const _hoisted_10 = {
   key: 0,
   class: "flex size-full flex-col items-center justify-center gap-2 rounded-control border border-dashed border-line text-muted"
 };
-const _hoisted_10 = { class: "text-xs" };
-const _hoisted_11 = ["width", "height"];
-const _hoisted_12 = ["id"];
-const _hoisted_13 = ["stop-color"];
+const _hoisted_11 = { class: "text-xs" };
+const _hoisted_12 = ["width", "height"];
+const _hoisted_13 = ["id"];
 const _hoisted_14 = ["stop-color"];
-const _hoisted_15 = ["id"];
-const _hoisted_16 = ["x", "height", "width"];
-const _hoisted_17 = ["to"];
-const _hoisted_18 = { key: 0 };
-const _hoisted_19 = ["x1", "x2", "y1", "y2"];
-const _hoisted_20 = ["x", "y"];
+const _hoisted_15 = ["stop-color"];
+const _hoisted_16 = ["id"];
+const _hoisted_17 = ["x", "height", "width"];
+const _hoisted_18 = ["to"];
+const _hoisted_19 = { key: 0 };
+const _hoisted_20 = ["x1", "x2", "y1", "y2"];
 const _hoisted_21 = ["x", "y"];
-const _hoisted_22 = ["x1", "x2", "y1", "y2"];
-const _hoisted_23 = ["x", "y", "width", "height"];
-const _hoisted_24 = ["clip-path"];
-const _hoisted_25 = ["d", "fill", "opacity"];
-const _hoisted_26 = ["d", "fill"];
-const _hoisted_27 = ["d", "stroke", "stroke-dasharray"];
-const _hoisted_28 = ["cx", "cy", "fill"];
-const _hoisted_29 = { key: 3 };
-const _hoisted_30 = ["x1", "x2", "y1", "y2"];
-const _hoisted_31 = ["cx", "cy", "fill"];
-const _hoisted_32 = ["x", "y"];
-const _hoisted_33 = { class: "mb-1 text-[11px] font-medium text-muted-strong" };
-const _hoisted_34 = { class: "flex flex-col gap-1" };
-const _hoisted_35 = { class: "flex items-center gap-1.5 text-muted" };
-const _hoisted_36 = { class: "font-mono tabular-nums text-ink" };
+const _hoisted_22 = ["x", "y"];
+const _hoisted_23 = ["x1", "x2", "y1", "y2"];
+const _hoisted_24 = ["x", "y", "width", "height"];
+const _hoisted_25 = ["x", "y", "width", "height", "fill"];
+const _hoisted_26 = ["clip-path"];
+const _hoisted_27 = ["d", "fill", "opacity"];
+const _hoisted_28 = ["d", "fill"];
+const _hoisted_29 = ["d", "stroke", "stroke-dasharray"];
+const _hoisted_30 = ["cx", "cy", "fill"];
+const _hoisted_31 = ["x1", "x2", "y1", "y2", "stroke", "stroke-dasharray"];
+const _hoisted_32 = ["x", "y", "fill"];
+const _hoisted_33 = ["x1", "x2", "y1", "y2", "stroke"];
+const _hoisted_34 = ["x", "y", "fill"];
+const _hoisted_35 = { key: 3 };
+const _hoisted_36 = ["x1", "x2", "y1", "y2"];
+const _hoisted_37 = ["cx", "cy", "fill"];
+const _hoisted_38 = ["x", "y"];
+const _hoisted_39 = { class: "mb-1 text-[11px] font-medium text-muted-strong" };
+const _hoisted_40 = { class: "flex flex-col gap-1" };
+const _hoisted_41 = { class: "flex items-center gap-1.5 text-muted" };
+const _hoisted_42 = { class: "font-mono tabular-nums text-ink" };
+const _hoisted_43 = {
+  class: "sr-only",
+  "aria-live": "polite"
+};
+const _hoisted_44 = {
+  key: 2,
+  class: "sr-only"
+};
+const _hoisted_45 = { key: 0 };
+const _hoisted_46 = { scope: "row" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -89,20 +103,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     formatRightValue: {},
     stacked: { type: Boolean },
     animate: { type: Boolean, default: true },
-    emptyLabel: { default: "No data" },
+    emptyLabel: {},
+    thresholds: { default: () => [] },
+    markers: { default: () => [] },
+    ariaLabel: {},
+    dataTable: { type: Boolean, default: false },
+    text: {},
     menuItems: {}
   },
   emits: ["pointClick", "pointContextMenu"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const strings = useLabels(
+      "chart",
+      { empty: "No data", rightAxis: "Measured on the right axis", point: "Point", xColumn: "Label" },
+      () => props.text
+    );
     const emit = __emit;
     const root = ref(null);
     const width = ref(0);
     let ro = null;
     const { el: revealAnchor, revealed } = useReveal({ immediate: () => !props.animate });
-    const drawing = computed(() => props.animate && revealed.value);
+    const reduced = ref(false);
+    const still = computed(() => !props.animate || reduced.value);
+    const drawing = computed(() => !still.value && revealed.value);
     onMounted(() => {
       revealAnchor.value = root.value;
+      reduced.value = prefersReducedMotion();
       if (!root.value || typeof ResizeObserver === "undefined") return;
       ro = new ResizeObserver(([entry]) => {
         width.value = entry.contentRect.width;
@@ -119,31 +146,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (gutterFrame) cancelAnimationFrame(gutterFrame);
     });
     const hidden = ref(/* @__PURE__ */ new Set());
-    const toggleSeries = (name) => {
+    const toggleSeries = (id) => {
       const next = new Set(hidden.value);
-      if (next.has(name)) next.delete(name);
-      else next.add(name);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
       if (next.size < props.series.length) hidden.value = next;
     };
-    const allSeries = computed(() => normalise(props.series));
-    const visible = computed(() => allSeries.value.filter((s) => !hidden.value.has(s.name)));
+    const allSeries = computed(
+      () => normalise(props.series).map((s, i) => ({ ...s, id: `${i}:${s.name}` }))
+    );
+    const visible = computed(() => allSeries.value.filter((s) => !hidden.value.has(s.id)));
     const SETTLE_MS = 260;
     const presence = ref(/* @__PURE__ */ new Map());
     let presenceFrame;
-    const presenceOf = (name) => presence.value.get(name) ?? 1;
+    const presenceOf = (id) => presence.value.get(id) ?? 1;
     watch(
       // A string, not the Set: `hidden` is replaced wholesale on every toggle, and a
       // watcher handed the object itself compares the new reference to the old one
       // and sees a change it cannot describe — or, with a stale copy in the array,
       // no change at all. The names that are currently off say it exactly.
-      () => allSeries.value.map((s) => `${s.name}:${hidden.value.has(s.name) ? 0 : 1}`).join(","),
+      () => allSeries.value.map((s) => `${s.id}:${hidden.value.has(s.id) ? 0 : 1}`).join(","),
       () => {
-        const targets = new Map(allSeries.value.map((s) => [s.name, hidden.value.has(s.name) ? 0 : 1]));
+        const targets = new Map(allSeries.value.map((s) => [s.id, hidden.value.has(s.id) ? 0 : 1]));
         if (!props.animate || prefersReducedMotion()) {
           presence.value = targets;
           return;
         }
-        const from = new Map(allSeries.value.map((s) => [s.name, presenceOf(s.name)]));
+        const from = new Map(allSeries.value.map((s) => [s.id, presenceOf(s.id)]));
         if ([...targets].every(([name, to]) => from.get(name) === to)) return;
         const start = performance.now();
         if (presenceFrame) cancelAnimationFrame(presenceFrame);
@@ -196,10 +225,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasRightAxis = computed(
       () => declaredRight.value.length > 0 && declaredLeft.value.length > 0
     );
+    const withThresholds = (raw, axis) => {
+      let { min, max } = raw;
+      for (const t of props.thresholds) {
+        if ((t.axis ?? "left") !== axis) continue;
+        for (const v of [t.value, t.to]) {
+          if (v == null || !Number.isFinite(v)) continue;
+          min = Math.min(min, v);
+          max = Math.max(max, v);
+        }
+      }
+      return { min, max };
+    };
     const scaleFor = (members) => {
       const totals = stackTotals.value;
       const raw = totals ? { min: Math.min(0, ...totals.neg), max: Math.max(0, ...totals.pos) } : extent(members, zeroBased.value);
-      return niceScale(raw.min, raw.max, props.yTicks);
+      const wide = hasData.value ? withThresholds(raw, "left") : raw;
+      return niceScale(wide.min, wide.max, props.yTicks);
     };
     const targetScale = computed(
       () => scaleFor(onLeft.value.length ? onLeft.value : declaredLeft.value)
@@ -231,7 +273,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const targetRightScale = computed(() => {
       if (!hasRightAxis.value) return null;
       const members = onRight.value.length ? onRight.value : declaredRight.value;
-      const raw = extent(members, zeroBased.value);
+      const raw = withThresholds(extent(members, zeroBased.value), "right");
       const steps = Math.max(
         1,
         axisTicks(targetScale.value.min, targetScale.value.max, targetScale.value.step).length - 1
@@ -364,7 +406,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const lines = computed(
       () => allSeries.value.map((s) => {
         const g = geoOf(s);
-        const p = presenceOf(s.name);
+        const p = presenceOf(s.id);
         const base = Math.min(Math.max(0, g.min), g.max);
         const values = p === 1 ? s.values : s.values.map((v) => v == null ? null : base + (v - base) * p);
         return {
@@ -415,7 +457,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             h = Math.abs(top - base);
           }
           out.push({
-            key: `${s.name}-${i}`,
+            key: `${s.id}-${i}`,
             x,
             y,
             w: Math.max(1, slot - (props.stacked ? 0 : 2)),
@@ -454,6 +496,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const active = ref(-1);
     const pointer = ref({ x: 0, y: 0 });
     const onMove = (e) => {
+      keyboard.value = false;
       const el = e.currentTarget;
       const rect = el.getBoundingClientRect();
       const x = e.clientX - rect.left;
@@ -470,6 +513,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       originalEvent
     });
     const onClick = (e) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      active.value = nearestIndex(e.clientX - rect.left, geo.value);
       if (active.value < 0) return;
       emit("pointClick", pointEvent(e));
     };
@@ -493,6 +538,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const sc = scaleOf(s);
         return {
           color: s.color,
+          id: s.id,
           name: s.name,
           value: v,
           y: yAt(v, sc.min, sc.max, box.value)
@@ -501,6 +547,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const tooltipRows = computed(
       () => active.value < 0 ? [] : visible.value.map((s) => ({
+        id: s.id,
         name: s.name,
         color: s.color,
         text: s.values[active.value] == null ? "—" : fmtSeries(s, s.values[active.value])
@@ -523,14 +570,150 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const floatTransition = usePillTransition("float");
     const revealKey = shallowRef(0);
     watch(
-      () => [props.series, props.type],
+      () => `${props.type}|${count.value}|${allSeries.value.map((s) => s.id).join(",")}`,
       () => {
         revealKey.value++;
-      },
-      { deep: true }
+      }
     );
     const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`;
     const gradientId = (name, index) => `${clipId}-g-${index}-${name.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+    const thresholdMarks = computed(
+      () => props.thresholds.flatMap((t, i) => {
+        if (!Number.isFinite(t.value) || width.value <= 0) return [];
+        const sc = t.axis === "right" && rightScale.value ? rightScale.value : scale.value;
+        const y = yAt(t.value, sc.min, sc.max, box.value);
+        const to = t.to != null && Number.isFinite(t.to) ? yAt(t.to, sc.min, sc.max, box.value) : null;
+        return [
+          {
+            key: i,
+            y,
+            top: to == null ? y : Math.min(y, to),
+            height: to == null ? 0 : Math.abs(to - y),
+            label: t.label,
+            color: t.color ?? "var(--color-line-strong)",
+            solid: !!t.solid
+          }
+        ];
+      })
+    );
+    const markerMarks = computed(
+      () => props.markers.flatMap((m, i) => {
+        const index = markerIndex(m.at, labels.value, count.value);
+        if (index < 0 || width.value <= 0) return [];
+        return [
+          {
+            key: i,
+            x: xAt(index, count.value, box.value, banded.value),
+            label: m.label,
+            color: m.color ?? "var(--color-line-strong)"
+          }
+        ];
+      })
+    );
+    const summary = computed(
+      () => props.ariaLabel ?? chartSummary(visible.value, labels.value, fmtSeries, props.title)
+    );
+    const keyboard = ref(false);
+    const onKeydown = (e) => {
+      if (!count.value || !hasData.value) return;
+      const last = count.value - 1;
+      let next;
+      switch (e.key) {
+        case "ArrowRight":
+          next = active.value < 0 ? 0 : Math.min(last, active.value + 1);
+          break;
+        case "ArrowLeft":
+          next = active.value < 0 ? last : Math.max(0, active.value - 1);
+          break;
+        case "Home":
+          next = 0;
+          break;
+        case "End":
+          next = last;
+          break;
+        case "Enter":
+        case " ":
+          if (active.value < 0) return;
+          e.preventDefault();
+          emit("pointClick", pointEvent(new MouseEvent("click")));
+          return;
+        case "Escape":
+          active.value = -1;
+          return;
+        default:
+          return;
+      }
+      e.preventDefault();
+      keyboard.value = true;
+      active.value = next;
+      const first = activePoints.value[0];
+      pointer.value = {
+        x: activeX.value,
+        y: first ? first.y : box.value.top + plotHeight(box.value) / 2
+      };
+    };
+    const onBlur = () => {
+      if (keyboard.value) active.value = -1;
+      keyboard.value = false;
+    };
+    const readout = computed(
+      () => keyboard.value && active.value >= 0 ? `${labels.value[active.value] ?? `${strings.value.point} ${active.value + 1}`}: ${tooltipRows.value.map((r) => `${r.name} ${r.text}`).join(", ")}` : ""
+    );
+    const svgEl = ref(null);
+    function exportCsv(options = {}) {
+      const rows = labels.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] }))
+      ], options);
+      if (options.download !== false) {
+        downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.csv`, csv, "text/csv;charset=utf-8");
+      }
+      return csv;
+    }
+    async function exportPng(options = {}) {
+      const svg = svgEl.value;
+      if (!svg || typeof document === "undefined") return null;
+      const style = 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;
+      const legend = props.showLegend && allSeries.value.length > 1 ? visible.value : [];
+      const blob = await svgToPng(svg, {
+        scale: options.scale,
+        padding: 16,
+        background: options.background ?? backgroundOf(root.value),
+        header: (ctx) => {
+          let y = 0;
+          if (props.title) {
+            ctx.font = `500 14px ${font}`;
+            ctx.fillStyle = ink;
+            ctx.textBaseline = "top";
+            ctx.fillText(props.title, 0, y);
+            y += 22;
+          }
+          if (legend.length) {
+            ctx.font = `12px ${font}`;
+            ctx.textBaseline = "middle";
+            let x = 0;
+            for (const s of legend) {
+              ctx.fillStyle = resolveCssColor(s.color, root.value ?? svg);
+              ctx.beginPath();
+              ctx.arc(x + 4, y + 8, 4, 0, Math.PI * 2);
+              ctx.fill();
+              ctx.fillStyle = muted;
+              ctx.fillText(s.name, x + 14, y + 8);
+              x += 14 + ctx.measureText(s.name).width + 16;
+            }
+            y += 24;
+          }
+          return y ? y + 8 : 0;
+        }
+      });
+      if (options.download !== false) downloadFile(`${fileStem(options.filename ?? props.title, "chart")}.png`, blob);
+      return blob;
+    }
+    __expose({ exportCsv, exportPng });
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex w-full flex-col gap-3"
     );
@@ -550,17 +733,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         __props.showLegend && allSeries.value.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_5, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(allSeries.value, (s) => {
             return openBlock(), createElementBlock("button", {
-              key: s.name,
+              key: s.id,
               type: "button",
-              class: normalizeClass(["group flex cursor-pointer items-center gap-1.5 rounded-md text-xs outline-none transition-opacity duration-fast focus-visible:ring-2 focus-visible:ring-ring", hidden.value.has(s.name) ? "opacity-40" : ""]),
-              onClick: ($event) => toggleSeries(s.name)
+              class: normalizeClass(["group flex cursor-pointer items-center gap-1.5 rounded-md text-xs outline-none transition-opacity duration-fast focus-visible:ring-2 focus-visible:ring-ring", hidden.value.has(s.id) ? "opacity-40" : ""]),
+              "aria-pressed": !hidden.value.has(s.id),
+              onClick: ($event) => toggleSeries(s.id)
             }, [
               createElementVNode("span", {
                 class: "size-2 shrink-0 rounded-full transition-transform duration-fast group-hover:scale-125",
                 style: normalizeStyle({ backgroundColor: s.color })
               }, null, 4),
               createElementVNode("span", _hoisted_7, toDisplayString(s.name), 1),
-              hasRightAxis.value && s.axis === "right" ? (openBlock(), createElementBlock("span", _hoisted_8, " ↗ ")) : createCommentVNode("", true)
+              hasRightAxis.value && s.axis === "right" ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                class: "text-[10px] text-muted",
+                title: unref(strings).rightAxis
+              }, " ↗ ", 8, _hoisted_8)) : createCommentVNode("", true)
             ], 10, _hoisted_6);
           }), 128))
         ])) : createCommentVNode("", true),
@@ -570,20 +758,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }, {
           default: withCtx(() => [
             createElementVNode("div", {
-              class: "group/plot relative",
-              style: normalizeStyle({ height: `${__props.height}px` })
+              class: "group/plot relative rounded-control outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              style: normalizeStyle({ height: `${__props.height}px` }),
+              tabindex: hasData.value ? 0 : void 0,
+              role: hasData.value ? "group" : void 0,
+              "aria-roledescription": "chart",
+              "aria-label": hasData.value ? summary.value : void 0,
+              onKeydown,
+              onBlur
             }, [
-              !hasData.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
+              !hasData.value ? (openBlock(), createElementBlock("div", _hoisted_10, [
                 createVNode(_sfc_main$2, {
                   name: "lucide:chart-no-axes-column",
                   size: 18
                 }),
-                createElementVNode("span", _hoisted_10, toDisplayString(__props.emptyLabel), 1)
+                createElementVNode("span", _hoisted_11, toDisplayString(__props.emptyLabel ?? unref(strings).empty), 1)
               ])) : width.value > 0 ? (openBlock(), createElementBlock("svg", {
                 key: 1,
+                ref_key: "svgEl",
+                ref: svgEl,
                 width: width.value,
                 height: __props.height,
                 class: "overflow-visible touch-none select-none",
+                "aria-hidden": "true",
                 onPointermove: onMove,
                 onPointerleave: onLeave,
                 onClick,
@@ -593,7 +790,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s, i) => {
                     return openBlock(), createElementBlock("linearGradient", {
                       id: gradientId(s.name, i),
-                      key: s.name,
+                      key: s.id,
                       x1: "0",
                       y1: "0",
                       x2: "0",
@@ -603,13 +800,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         offset: "0%",
                         "stop-color": s.color,
                         "stop-opacity": "0.28"
-                      }, null, 8, _hoisted_13),
+                      }, null, 8, _hoisted_14),
                       createElementVNode("stop", {
                         offset: "100%",
                         "stop-color": s.color,
                         "stop-opacity": "0.02"
-                      }, null, 8, _hoisted_14)
-                    ], 8, _hoisted_12);
+                      }, null, 8, _hoisted_15)
+                    ], 8, _hoisted_13);
                   }), 128)),
                   createElementVNode("clipPath", {
                     id: `${clipId}-reveal`
@@ -619,7 +816,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       x: box.value.left,
                       y: 0,
                       height: __props.height,
-                      width: __props.animate ? 0 : unref(plotWidth)(box.value)
+                      width: still.value ? unref(plotWidth)(box.value) : 0
                     }, [
                       drawing.value ? (openBlock(), createElementBlock("animate", {
                         key: 0,
@@ -631,11 +828,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         calcMode: "spline",
                         keySplines: "0.2 0.25 0.5 0.85",
                         keyTimes: "0;1"
-                      }, null, 8, _hoisted_17)) : createCommentVNode("", true)
-                    ], 8, _hoisted_16))
-                  ], 8, _hoisted_15)
+                      }, null, 8, _hoisted_18)) : createCommentVNode("", true)
+                    ], 8, _hoisted_17))
+                  ], 8, _hoisted_16)
                 ]),
-                __props.showGrid || __props.showYAxis ? (openBlock(), createElementBlock("g", _hoisted_18, [
+                __props.showGrid || __props.showYAxis ? (openBlock(), createElementBlock("g", _hoisted_19, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(gridLines.value, (g) => {
                     return openBlock(), createElementBlock(Fragment, {
                       key: g.key
@@ -648,7 +845,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         y2: g.y,
                         stroke: "var(--color-line)",
                         "stroke-width": "1"
-                      }, null, 8, _hoisted_19)) : createCommentVNode("", true),
+                      }, null, 8, _hoisted_20)) : createCommentVNode("", true),
                       __props.showYAxis ? (openBlock(), createElementBlock("text", {
                         key: 1,
                         x: box.value.left - 8,
@@ -656,7 +853,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "text-anchor": "end",
                         "dominant-baseline": "middle",
                         class: "fill-[var(--color-muted)] text-[10px] tabular-nums"
-                      }, toDisplayString(g.label), 9, _hoisted_20)) : createCommentVNode("", true),
+                      }, toDisplayString(g.label), 9, _hoisted_21)) : createCommentVNode("", true),
                       __props.showYAxis && g.rightLabel ? (openBlock(), createElementBlock("text", {
                         key: 2,
                         x: box.value.width - box.value.right + 8,
@@ -664,7 +861,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "text-anchor": "start",
                         "dominant-baseline": "middle",
                         class: "fill-[var(--color-muted)] text-[10px] tabular-nums"
-                      }, toDisplayString(g.rightLabel), 9, _hoisted_21)) : createCommentVNode("", true)
+                      }, toDisplayString(g.rightLabel), 9, _hoisted_22)) : createCommentVNode("", true)
                     ], 64);
                   }), 128))
                 ])) : createCommentVNode("", true),
@@ -676,7 +873,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   y2: baseY.value,
                   stroke: "var(--color-line-strong)",
                   "stroke-width": "1"
-                }, null, 8, _hoisted_22)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_23)) : createCommentVNode("", true),
                 active.value >= 0 && banded.value ? (openBlock(), createElementBlock("rect", {
                   key: 2,
                   x: activeX.value - unref(plotWidth)(box.value) / count.value / 2,
@@ -685,7 +882,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   height: unref(plotHeight)(box.value),
                   fill: "var(--color-surface-soft)",
                   opacity: "0.5"
-                }, null, 8, _hoisted_23)) : createCommentVNode("", true),
+                }, null, 8, _hoisted_24)) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(thresholdMarks.value.filter((m) => m.height > 0), (t) => {
+                  return openBlock(), createElementBlock("rect", {
+                    key: `band-${t.key}`,
+                    x: box.value.left,
+                    y: t.top,
+                    width: unref(plotWidth)(box.value),
+                    height: t.height,
+                    fill: t.color,
+                    opacity: "0.08"
+                  }, null, 8, _hoisted_25);
+                }), 128)),
                 createElementVNode("g", {
                   "clip-path": `url(#${clipId}-reveal)`
                 }, [
@@ -696,17 +904,17 @@ 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_25);
+                    }, null, 8, _hoisted_27);
                   }), 128)),
                   (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s, i) => {
                     return openBlock(), createElementBlock("g", {
-                      key: `s-${s.name}`,
+                      key: `s-${s.id}`,
                       style: normalizeStyle({ opacity: s.alpha })
                     }, [
                       withDirectives(createElementVNode("path", {
                         d: s.fill,
                         fill: `url(#${gradientId(s.name, i)})`
-                      }, null, 8, _hoisted_26), [
+                      }, null, 8, _hoisted_28), [
                         [vShow, __props.type === "area"]
                       ]),
                       withDirectives(createElementVNode("path", {
@@ -717,7 +925,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         "stroke-linecap": "round",
                         "stroke-linejoin": "round",
                         "stroke-dasharray": s.dashed ? "5 4" : void 0
-                      }, null, 8, _hoisted_27), [
+                      }, null, 8, _hoisted_29), [
                         [vShow, __props.type !== "bar"]
                       ]),
                       __props.type !== "bar" && s.points ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(s.values, (v, j) => {
@@ -727,14 +935,59 @@ 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_28)), [
+                        }, null, 8, _hoisted_30)), [
                           [vShow, v != null]
                         ]);
                       }), 128)) : createCommentVNode("", true)
                     ], 4);
                   }), 128))
-                ], 8, _hoisted_24),
-                active.value >= 0 && __props.type !== "bar" ? (openBlock(), createElementBlock("g", _hoisted_29, [
+                ], 8, _hoisted_26),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(thresholdMarks.value, (t) => {
+                  return openBlock(), createElementBlock("g", {
+                    key: `t-${t.key}`
+                  }, [
+                    createElementVNode("line", {
+                      x1: box.value.left,
+                      x2: box.value.width - box.value.right,
+                      y1: t.y,
+                      y2: t.y,
+                      stroke: t.color,
+                      "stroke-width": "1",
+                      "stroke-dasharray": t.solid ? void 0 : "4 3"
+                    }, null, 8, _hoisted_31),
+                    t.label ? (openBlock(), createElementBlock("text", {
+                      key: 0,
+                      x: box.value.width - box.value.right - 4,
+                      y: t.top - 4,
+                      "text-anchor": "end",
+                      class: "text-[10px]",
+                      fill: t.color
+                    }, toDisplayString(t.label), 9, _hoisted_32)) : createCommentVNode("", true)
+                  ]);
+                }), 128)),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(markerMarks.value, (m) => {
+                  return openBlock(), createElementBlock("g", {
+                    key: `m-${m.key}`
+                  }, [
+                    createElementVNode("line", {
+                      x1: m.x,
+                      x2: m.x,
+                      y1: box.value.top,
+                      y2: box.value.top + unref(plotHeight)(box.value),
+                      stroke: m.color,
+                      "stroke-width": "1",
+                      "stroke-dasharray": "2 3"
+                    }, null, 8, _hoisted_33),
+                    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_34)) : createCommentVNode("", true)
+                  ]);
+                }), 128)),
+                active.value >= 0 && __props.type !== "bar" ? (openBlock(), createElementBlock("g", _hoisted_35, [
                   createElementVNode("line", {
                     x1: activeX.value,
                     x2: activeX.value,
@@ -743,17 +996,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     stroke: "var(--color-line-strong)",
                     "stroke-width": "1",
                     "stroke-dasharray": "3 3"
-                  }, null, 8, _hoisted_30),
+                  }, null, 8, _hoisted_36),
                   (openBlock(true), createElementBlock(Fragment, null, renderList(activePoints.value, (p) => {
                     return openBlock(), createElementBlock("circle", {
-                      key: p.name,
+                      key: p.id,
                       cx: activeX.value,
                       cy: p.y,
                       r: "4",
                       fill: p.color,
                       stroke: "var(--color-surface)",
                       "stroke-width": "2"
-                    }, null, 8, _hoisted_31);
+                    }, null, 8, _hoisted_37);
                   }), 128))
                 ])) : createCommentVNode("", true),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(xLabels.value, (l) => {
@@ -763,11 +1016,11 @@ 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_32)), [
+                  }, toDisplayString(l.label), 11, _hoisted_38)), [
                     [vShow, __props.showXAxis]
                   ]);
                 }), 128))
-              ], 40, _hoisted_11)) : createCommentVNode("", true),
+              ], 40, _hoisted_12)) : createCommentVNode("", true),
               active.value >= 0 && hasData.value ? (openBlock(), createBlock(unref(Motion), {
                 key: 2,
                 as: "div",
@@ -784,21 +1037,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 default: withCtx(() => [
                   createVNode(_sfc_main$3, { axis: "both" }, {
                     default: withCtx(() => [
-                      createElementVNode("div", _hoisted_33, toDisplayString(labels.value[active.value]), 1),
-                      createElementVNode("div", _hoisted_34, [
+                      createElementVNode("div", _hoisted_39, toDisplayString(labels.value[active.value]), 1),
+                      createElementVNode("div", _hoisted_40, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(tooltipRows.value, (r) => {
                           return openBlock(), createElementBlock("div", {
-                            key: r.name,
+                            key: r.id,
                             class: "flex items-center justify-between gap-3 text-xs"
                           }, [
-                            createElementVNode("span", _hoisted_35, [
+                            createElementVNode("span", _hoisted_41, [
                               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_36, toDisplayString(r.text), 1)
+                            createElementVNode("span", _hoisted_42, toDisplayString(r.text), 1)
                           ]);
                         }), 128))
                       ])
@@ -807,16 +1060,43 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })
                 ]),
                 _: 1
-              }, 8, ["animate", "transition"])) : createCommentVNode("", true)
-            ], 4)
+              }, 8, ["animate", "transition"])) : createCommentVNode("", true),
+              createElementVNode("span", _hoisted_43, toDisplayString(readout.value), 1)
+            ], 44, _hoisted_9)
           ]),
           _: 1
-        }, 8, ["items", "always"])
+        }, 8, ["items", "always"]),
+        __props.dataTable && hasData.value ? (openBlock(), createElementBlock("table", _hoisted_44, [
+          __props.title ? (openBlock(), createElementBlock("caption", _hoisted_45, 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) => {
+                return openBlock(), createElementBlock("th", {
+                  key: s.id,
+                  scope: "col"
+                }, toDisplayString(s.name), 1);
+              }), 128))
+            ])
+          ]),
+          createElementVNode("tbody", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(labels.value, (label, i) => {
+              return openBlock(), createElementBlock("tr", { key: i }, [
+                createElementVNode("th", _hoisted_46, toDisplayString(label), 1),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(allSeries.value, (s) => {
+                  return openBlock(), createElementBlock("td", {
+                    key: s.id
+                  }, toDisplayString(s.values[i] == null ? "—" : fmtSeries(s, s.values[i])), 1);
+                }), 128))
+              ]);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true)
       ], 16);
     };
   }
 });
-const LpChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a2e477eb"]]);
+const LpChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1c25e280"]]);
 export {
   LpChart as default
 };