@leavepulse/ui 0.24.1 → 0.26.0

package/dist/chunks/LpChart-tNXs1ttr.js

@@ -0,0 +1,671 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, shallowRef, watch, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, Fragment, renderList, normalizeClass, normalizeStyle, createVNode, withCtx, unref, withDirectives, vShow, createBlock, createTextVNode } from "vue";
+import { Motion } from "motion-v";
+import { usePillTransition } from "../composables/usePillTransition.js";
+import { useReveal } from "../composables/useReveal.js";
+import { normalise, pointCount, resolveLabels, extent, axisTicks, niceScale, yAt, plotWidth, xAt, areaPath, linePath, barPath, plotHeight, nearestIndex, formatTick } from "../components/chart.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-D0mzXqA7.js";
+import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex items-start justify-between gap-3"
+};
+const _hoisted_2 = { class: "flex flex-col gap-0.5" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm font-medium text-ink"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "text-xs text-muted"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "flex flex-wrap items-center gap-x-4 gap-y-1.5"
+};
+const _hoisted_6 = ["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 = {
+  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_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_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 CARD_W = 150;
+const CARD_GAP = 14;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpChart",
+  props: {
+    series: {},
+    labels: {},
+    type: { default: "line" },
+    height: { default: 240 },
+    title: {},
+    subtitle: {},
+    smooth: { default: 0.9 },
+    showPoints: { type: Boolean },
+    showGrid: { type: Boolean, default: true },
+    showXAxis: { type: Boolean, default: true },
+    showYAxis: { type: Boolean, default: true },
+    showLegend: { type: Boolean, default: true },
+    yTicks: { default: 4 },
+    includeZero: { type: Boolean },
+    unit: {},
+    rightUnit: {},
+    formatValue: {},
+    formatRightValue: {},
+    stacked: { type: Boolean },
+    animate: { type: Boolean, default: true },
+    emptyLabel: { default: "No data" },
+    menuItems: {}
+  },
+  emits: ["pointClick", "pointContextMenu"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    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);
+    onMounted(() => {
+      revealAnchor.value = root.value;
+      if (!root.value || typeof ResizeObserver === "undefined") return;
+      ro = new ResizeObserver(([entry]) => {
+        width.value = entry.contentRect.width;
+      });
+      ro.observe(root.value);
+      width.value = root.value.clientWidth;
+    });
+    onBeforeUnmount(() => {
+      ro?.disconnect();
+      ro = null;
+    });
+    const hidden = ref(/* @__PURE__ */ new Set());
+    const toggleSeries = (name) => {
+      const next = new Set(hidden.value);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      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 count = computed(() => pointCount(allSeries.value));
+    const labels = computed(() => resolveLabels(props.series, props.labels, count.value));
+    const banded = computed(() => props.type === "bar");
+    const hasData = computed(
+      () => allSeries.value.some((s) => s.values.some((v) => v != null))
+    );
+    const zeroBased = computed(() => props.includeZero || props.type === "bar");
+    const stackTotals = computed(() => {
+      if (!(props.type === "bar" && props.stacked)) return null;
+      const pos = [];
+      const neg = [];
+      for (let i = 0; i < count.value; i++) {
+        let p = 0;
+        let n = 0;
+        for (const s of visible.value) {
+          const v = s.values[i];
+          if (v == null) continue;
+          if (v >= 0) p += v;
+          else n += v;
+        }
+        pos.push(p);
+        neg.push(n);
+      }
+      return { pos, neg };
+    });
+    const onRight = computed(() => visible.value.filter((s) => s.axis === "right"));
+    const onLeft = computed(() => {
+      const left = visible.value.filter((s) => s.axis === "left");
+      return left.length || !onRight.value.length ? left : visible.value;
+    });
+    const hasRightAxis = computed(() => onRight.value.length > 0 && onLeft.value !== visible.value);
+    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 scale = computed(() => scaleFor(onLeft.value));
+    const rightScale = computed(() => {
+      if (!hasRightAxis.value) return null;
+      const raw = extent(onRight.value, zeroBased.value);
+      const steps = Math.max(1, axisTicks(scale.value.min, scale.value.max, scale.value.step).length - 1);
+      const nice = niceScale(raw.min, raw.max, steps);
+      return { min: nice.min, max: nice.min + nice.step * steps, step: nice.step };
+    });
+    const fmtWith = (v, unit, f) => `${f ? f(v) : formatTick(v)}${unit ?? ""}`;
+    const fmt = (v) => fmtWith(v, props.unit, props.formatValue);
+    const fmtRight = (v) => fmtWith(v, props.rightUnit ?? props.unit, props.formatRightValue ?? props.formatValue);
+    const fmtSeries = (s, v) => s.axis === "right" && hasRightAxis.value ? fmtRight(v) : fmt(v);
+    const scaleOf = (s) => s.axis === "right" && rightScale.value ? rightScale.value : scale.value;
+    const yLabels = computed(
+      () => axisTicks(scale.value.min, scale.value.max, scale.value.step).map(fmt)
+    );
+    const rightLabels = computed(
+      () => rightScale.value ? axisTicks(rightScale.value.min, rightScale.value.max, rightScale.value.step).map(fmtRight) : []
+    );
+    const gutter = (labels2) => 12 + Math.max(...labels2.map((l) => l.length), 1) * 7;
+    const box = computed(() => ({
+      width: width.value,
+      height: props.height,
+      left: props.showYAxis ? gutter(yLabels.value) : 8,
+      right: props.showYAxis && rightLabels.value.length ? gutter(rightLabels.value) : 12,
+      top: 10,
+      bottom: props.showXAxis ? 26 : 8
+    }));
+    const geo = computed(() => ({
+      min: scale.value.min,
+      max: scale.value.max,
+      box: box.value,
+      count: count.value,
+      banded: banded.value
+    }));
+    const geoOf = (s) => ({ ...geo.value, ...scaleOf(s) });
+    const gridLines = computed(() => {
+      const left = axisTicks(scale.value.min, scale.value.max, scale.value.step);
+      const right = rightScale.value ? axisTicks(rightScale.value.min, rightScale.value.max, rightScale.value.step) : [];
+      return left.map((v, i) => ({
+        v,
+        y: yAt(v, scale.value.min, scale.value.max, box.value),
+        label: fmt(v),
+        rightLabel: right[i] != null ? fmtRight(right[i]) : ""
+      }));
+    });
+    const xLabelStride = computed(() => {
+      const w = plotWidth(box.value);
+      if (w <= 0 || count.value === 0) return 1;
+      const longest = Math.max(...labels.value.map((l) => l.length), 1);
+      return Math.max(1, Math.ceil(count.value * (longest * 6.5 + 16) / w));
+    });
+    const xLabels = computed(
+      () => labels.value.map((label, i) => ({ label, i, x: xAt(i, count.value, box.value, banded.value) })).filter(({ i }) => i % xLabelStride.value === 0 || i === count.value - 1)
+    );
+    const baseY = computed(
+      () => yAt(
+        Math.max(scale.value.min, Math.min(scale.value.max, 0)),
+        scale.value.min,
+        scale.value.max,
+        box.value
+      )
+    );
+    const lines = computed(
+      () => visible.value.map((s) => {
+        const g = geoOf(s);
+        return {
+          ...s,
+          d: linePath(s.values, g, props.smooth),
+          fill: props.type === "area" ? areaPath(s.values, g, props.smooth) : "",
+          /* 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,
+          scale: scaleOf(s)
+        };
+      })
+    );
+    const bars = computed(() => {
+      if (props.type !== "bar" || count.value === 0 || plotWidth(box.value) <= 0) return [];
+      const band = plotWidth(box.value) / count.value;
+      const inner = Math.min(band * 0.6, props.stacked ? 46 : 30 * (visible.value.length || 1));
+      const n = visible.value.length || 1;
+      const slot = props.stacked ? inner : inner / n;
+      const out = [];
+      const posTop = new Array(count.value).fill(0);
+      const negTop = new Array(count.value).fill(0);
+      visible.value.forEach((s, si) => {
+        for (let i = 0; i < count.value; i++) {
+          const v = s.values[i];
+          if (v == null) continue;
+          const centre = xAt(i, count.value, box.value, true);
+          const x = props.stacked ? centre - inner / 2 : centre - inner / 2 + si * slot;
+          let y;
+          let h;
+          if (props.stacked) {
+            const prev = v >= 0 ? posTop[i] : negTop[i];
+            const from = yAt(prev, scale.value.min, scale.value.max, box.value);
+            const to = yAt(prev + v, scale.value.min, scale.value.max, box.value);
+            y = Math.min(from, to);
+            h = Math.abs(to - from);
+            if (v >= 0) posTop[i] += v;
+            else negTop[i] += v;
+          } 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);
+            y = Math.min(top, base);
+            h = Math.abs(top - base);
+          }
+          out.push({
+            key: `${s.name}-${i}`,
+            x,
+            y,
+            w: Math.max(1, slot - (props.stacked ? 0 : 2)),
+            h: Math.max(v === 0 ? 0 : 1, h),
+            color: s.color,
+            index: i,
+            /* A standalone bar rounds only the end it grows toward: a negative one
+               hangs off the baseline, so its square end is the top. */
+            roundTop: props.stacked || v >= 0,
+            roundBottom: props.stacked || v < 0,
+            d: ""
+          });
+        }
+      });
+      if (props.stacked) {
+        const columns = /* @__PURE__ */ new Map();
+        for (const b of out) {
+          const col = columns.get(b.index) ?? [];
+          col.push(b);
+          columns.set(b.index, col);
+        }
+        for (const col of columns.values()) {
+          const top = Math.min(...col.map((b) => b.y));
+          const bottom = Math.max(...col.map((b) => b.y + b.h));
+          for (const b of col) {
+            b.roundTop = b.y === top;
+            b.roundBottom = b.y + b.h === bottom;
+          }
+        }
+      }
+      for (const b of out) {
+        b.d = barPath(b.x, b.y, b.w, b.h, 4, { top: b.roundTop, bottom: b.roundBottom });
+      }
+      return out;
+    });
+    const active = ref(-1);
+    const pointer = ref({ x: 0, y: 0 });
+    const onMove = (e) => {
+      const el = e.currentTarget;
+      const rect = el.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      pointer.value = { x, y: e.clientY - rect.top };
+      active.value = nearestIndex(x, geo.value);
+    };
+    const onLeave = () => {
+      active.value = -1;
+    };
+    const pointEvent = (originalEvent) => ({
+      index: active.value,
+      label: labels.value[active.value] ?? "",
+      values: allSeries.value.map((s) => s.values[active.value] ?? null),
+      originalEvent
+    });
+    const onClick = (e) => {
+      if (active.value < 0) return;
+      emit("pointClick", pointEvent(e));
+    };
+    const menuPoint = ref(null);
+    const menuEntries = computed(
+      () => props.menuItems && menuPoint.value ? props.menuItems(menuPoint.value) : []
+    );
+    const onContextMenu = (e) => {
+      const rect = e.currentTarget.getBoundingClientRect();
+      active.value = nearestIndex(e.clientX - rect.left, geo.value);
+      if (active.value < 0) return;
+      menuPoint.value = pointEvent(e);
+      emit("pointContextMenu", menuPoint.value);
+    };
+    const activeX = computed(
+      () => active.value < 0 ? 0 : xAt(active.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 }) => {
+        const sc = scaleOf(s);
+        return {
+          color: s.color,
+          name: s.name,
+          value: v,
+          y: yAt(v, sc.min, sc.max, box.value)
+        };
+      });
+    });
+    const tooltipRows = computed(
+      () => active.value < 0 ? [] : visible.value.map((s) => ({
+        name: s.name,
+        color: s.color,
+        text: s.values[active.value] == null ? "—" : fmtSeries(s, s.values[active.value])
+      }))
+    );
+    const tooltipTarget = computed(() => {
+      const flip = activeX.value > box.value.width - CARD_W;
+      const y = Math.min(
+        Math.max(pointer.value.y, box.value.top + 8),
+        box.value.top + plotHeight(box.value) - 8
+      );
+      return {
+        x: flip ? activeX.value - CARD_GAP : activeX.value + CARD_GAP,
+        y,
+        flip
+      };
+    });
+    const floatTransition = usePillTransition("float");
+    const revealKey = shallowRef(0);
+    watch(
+      () => [props.series, props.type],
+      () => {
+        revealKey.value++;
+      },
+      { deep: true }
+    );
+    const clipId = `lp-chart-${Math.random().toString(36).slice(2, 9)}`;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: "flex w-full flex-col gap-3"
+      }, [
+        __props.title || __props.subtitle || _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            __props.title ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+            __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
+          ]),
+          renderSlot(_ctx.$slots, "actions")
+        ])) : createCommentVNode("", true),
+        __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,
+              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)
+            }, [
+              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)
+            ], 10, _hoisted_6);
+          }), 128))
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$1, {
+          items: menuEntries.value,
+          always: !!__props.menuItems
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", {
+              class: "group/plot relative",
+              style: normalizeStyle({ height: `${__props.height}px` })
+            }, [
+              !hasData.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                createVNode(_sfc_main$2, {
+                  name: "lucide:chart-no-axes-column",
+                  size: 18
+                }),
+                createElementVNode("span", _hoisted_10, toDisplayString(__props.emptyLabel), 1)
+              ])) : width.value > 0 ? (openBlock(), createElementBlock("svg", {
+                key: 1,
+                width: width.value,
+                height: __props.height,
+                class: "overflow-visible touch-none select-none",
+                onPointermove: onMove,
+                onPointerleave: onLeave,
+                onClick,
+                onContextmenu: onContextMenu
+              }, [
+                createElementVNode("defs", null, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s) => {
+                    return openBlock(), createElementBlock("linearGradient", {
+                      id: `${clipId}-g-${s.name}`,
+                      key: s.name,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1"
+                    }, [
+                      createElementVNode("stop", {
+                        offset: "0%",
+                        "stop-color": s.color,
+                        "stop-opacity": "0.28"
+                      }, null, 8, _hoisted_13),
+                      createElementVNode("stop", {
+                        offset: "100%",
+                        "stop-color": s.color,
+                        "stop-opacity": "0.02"
+                      }, null, 8, _hoisted_14)
+                    ], 8, _hoisted_12);
+                  }), 128)),
+                  createElementVNode("clipPath", {
+                    id: `${clipId}-reveal`
+                  }, [
+                    (openBlock(), createElementBlock("rect", {
+                      key: revealKey.value,
+                      x: box.value.left,
+                      y: 0,
+                      height: __props.height,
+                      width: __props.animate ? 0 : unref(plotWidth)(box.value)
+                    }, [
+                      drawing.value ? (openBlock(), createElementBlock("animate", {
+                        key: 0,
+                        attributeName: "width",
+                        from: 0,
+                        to: unref(plotWidth)(box.value),
+                        dur: "0.95s",
+                        fill: "freeze",
+                        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)
+                ]),
+                __props.showGrid || __props.showYAxis ? (openBlock(), createElementBlock("g", _hoisted_18, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(gridLines.value, (g) => {
+                    return openBlock(), createElementBlock(Fragment, {
+                      key: g.v
+                    }, [
+                      __props.showGrid ? (openBlock(), createElementBlock("line", {
+                        key: 0,
+                        x1: box.value.left,
+                        x2: box.value.width - box.value.right,
+                        y1: g.y,
+                        y2: g.y,
+                        stroke: "var(--color-line)",
+                        "stroke-width": "1"
+                      }, null, 8, _hoisted_19)) : createCommentVNode("", true),
+                      __props.showYAxis ? (openBlock(), createElementBlock("text", {
+                        key: 1,
+                        x: box.value.left - 8,
+                        y: g.y,
+                        "text-anchor": "end",
+                        "dominant-baseline": "middle",
+                        class: "fill-[var(--color-muted)] text-[10px] tabular-nums"
+                      }, toDisplayString(g.label), 9, _hoisted_20)) : createCommentVNode("", true),
+                      __props.showYAxis && g.rightLabel ? (openBlock(), createElementBlock("text", {
+                        key: 2,
+                        x: box.value.width - box.value.right + 8,
+                        y: g.y,
+                        "text-anchor": "start",
+                        "dominant-baseline": "middle",
+                        class: "fill-[var(--color-muted)] text-[10px] tabular-nums"
+                      }, toDisplayString(g.rightLabel), 9, _hoisted_21)) : createCommentVNode("", true)
+                    ], 64);
+                  }), 128))
+                ])) : createCommentVNode("", true),
+                scale.value.min < 0 && scale.value.max > 0 ? (openBlock(), createElementBlock("line", {
+                  key: 1,
+                  x1: box.value.left,
+                  x2: box.value.width - box.value.right,
+                  y1: baseY.value,
+                  y2: baseY.value,
+                  stroke: "var(--color-line-strong)",
+                  "stroke-width": "1"
+                }, null, 8, _hoisted_22)) : createCommentVNode("", true),
+                active.value >= 0 && banded.value ? (openBlock(), createElementBlock("rect", {
+                  key: 2,
+                  x: activeX.value - unref(plotWidth)(box.value) / count.value / 2,
+                  y: box.value.top,
+                  width: unref(plotWidth)(box.value) / count.value,
+                  height: unref(plotHeight)(box.value),
+                  fill: "var(--color-surface-soft)",
+                  opacity: "0.5"
+                }, null, 8, _hoisted_23)) : createCommentVNode("", true),
+                createElementVNode("g", {
+                  "clip-path": `url(#${clipId}-reveal)`
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(bars.value, (b) => {
+                    return openBlock(), createElementBlock("path", {
+                      key: b.key,
+                      d: b.d,
+                      fill: b.color,
+                      class: "transition-opacity duration-fast",
+                      opacity: active.value < 0 || active.value === b.index ? 1 : 0.45
+                    }, null, 8, _hoisted_25);
+                  }), 128)),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s) => {
+                    return withDirectives((openBlock(), createElementBlock("path", {
+                      key: `f-${s.name}`,
+                      d: s.fill,
+                      fill: `url(#${clipId}-g-${s.name})`
+                    }, null, 8, _hoisted_26)), [
+                      [vShow, __props.type === "area"]
+                    ]);
+                  }), 128)),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(lines.value, (s) => {
+                    return withDirectives((openBlock(), createElementBlock("path", {
+                      key: `l-${s.name}`,
+                      d: s.d,
+                      fill: "none",
+                      stroke: s.color,
+                      "stroke-width": "2",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-dasharray": s.dashed ? "5 4" : void 0
+                    }, null, 8, _hoisted_27)), [
+                      [vShow, __props.type !== "bar"]
+                    ]);
+                  }), 128)),
+                  __props.type !== "bar" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(lines.value, (s) => {
+                    return openBlock(), createElementBlock(Fragment, {
+                      key: `p-${s.name}`
+                    }, [
+                      s.points ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(s.values, (v, i) => {
+                        return withDirectives((openBlock(), createElementBlock("circle", {
+                          key: i,
+                          cx: unref(xAt)(i, count.value, box.value, banded.value),
+                          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)), [
+                          [vShow, v != null]
+                        ]);
+                      }), 128)) : createCommentVNode("", true)
+                    ], 64);
+                  }), 128)) : createCommentVNode("", true)
+                ], 8, _hoisted_24),
+                active.value >= 0 && __props.type !== "bar" ? (openBlock(), createElementBlock("g", _hoisted_29, [
+                  createElementVNode("line", {
+                    x1: activeX.value,
+                    x2: activeX.value,
+                    y1: box.value.top,
+                    y2: box.value.top + unref(plotHeight)(box.value),
+                    stroke: "var(--color-line-strong)",
+                    "stroke-width": "1",
+                    "stroke-dasharray": "3 3"
+                  }, null, 8, _hoisted_30),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(activePoints.value, (p) => {
+                    return openBlock(), createElementBlock("circle", {
+                      key: p.name,
+                      cx: activeX.value,
+                      cy: p.y,
+                      r: "4",
+                      fill: p.color,
+                      stroke: "var(--color-surface)",
+                      "stroke-width": "2"
+                    }, null, 8, _hoisted_31);
+                  }), 128))
+                ])) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(xLabels.value, (l) => {
+                  return withDirectives((openBlock(), createElementBlock("text", {
+                    key: l.i,
+                    x: l.x,
+                    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)), [
+                    [vShow, __props.showXAxis]
+                  ]);
+                }), 128))
+              ], 40, _hoisted_11)) : createCommentVNode("", true),
+              active.value >= 0 && hasData.value ? (openBlock(), createBlock(unref(Motion), {
+                key: 2,
+                as: "div",
+                class: "pointer-events-none absolute left-0 top-0 z-(--z-tooltip) min-w-32 rounded-control border border-line bg-surface-overlay px-2.5 py-2 shadow-panel backdrop-blur group-data-[state=open]/plot:hidden",
+                initial: { opacity: 0, scale: 0.96 },
+                animate: {
+                  opacity: 1,
+                  scale: 1,
+                  x: tooltipTarget.value.flip ? `calc(${tooltipTarget.value.x}px - 100%)` : `${tooltipTarget.value.x}px`,
+                  y: `calc(${tooltipTarget.value.y}px - 50%)`
+                },
+                transition: unref(floatTransition)
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, { axis: "both" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_33, toDisplayString(labels.value[active.value]), 1),
+                      createElementVNode("div", _hoisted_34, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(tooltipRows.value, (r) => {
+                          return openBlock(), createElementBlock("div", {
+                            key: r.name,
+                            class: "flex items-center justify-between gap-3 text-xs"
+                          }, [
+                            createElementVNode("span", _hoisted_35, [
+                              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)
+                          ]);
+                        }), 128))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["animate", "transition"])) : createCommentVNode("", true)
+            ], 4)
+          ]),
+          _: 1
+        }, 8, ["items", "always"])
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};