@squirkle-ui/charts 0.0.0-stage → 0.1.0

package/dist/vue3/index.mjs

@@ -0,0 +1,975 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, toDisplayString, Fragment, renderList, createElementVNode, normalizeStyle, createTextVNode, renderSlot, ref, onMounted, onBeforeUnmount, computed, withCtx, withDirectives, vShow, mergeProps } from "vue";
+import { SqShape, colorValue } from "@squirkle-ui/ui";
+import { niceTicks } from "@squirkle-ui/core";
+const _sfc_main$4 = defineComponent({
+  name: "SqChartFrame",
+  components: { SqShape },
+  props: {
+    title: { type: String, default: void 0 },
+    subtitle: { type: String, default: void 0 },
+    flat: Boolean,
+    legend: { type: Array, default: () => [] },
+    table: { type: Object, default: () => ({ head: [], rows: [] }) }
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$4 = {
+  key: 1,
+  class: "sq-chart__caption"
+};
+const _hoisted_2$4 = {
+  key: 0,
+  class: "sq-chart__title"
+};
+const _hoisted_3$4 = {
+  key: 1,
+  class: "sq-chart__subtitle"
+};
+const _hoisted_4$4 = {
+  key: 2,
+  class: "sq-chart__legend",
+  role: "list"
+};
+const _hoisted_5$3 = { class: "sq-sr-only" };
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_SqShape = resolveComponent("SqShape");
+  return openBlock(), createElementBlock(
+    "figure",
+    {
+      class: normalizeClass(["sq-chart sq-surface", { "sq-chart--flat": _ctx.flat }])
+    },
+    [
+      !_ctx.flat ? (openBlock(), createBlock(_component_SqShape, { key: 0 })) : createCommentVNode("v-if", true),
+      _ctx.title || _ctx.subtitle ? (openBlock(), createElementBlock("figcaption", _hoisted_1$4, [
+        _ctx.title ? (openBlock(), createElementBlock(
+          "div",
+          _hoisted_2$4,
+          toDisplayString(_ctx.title),
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true),
+        _ctx.subtitle ? (openBlock(), createElementBlock(
+          "div",
+          _hoisted_3$4,
+          toDisplayString(_ctx.subtitle),
+          1
+          /* TEXT */
+        )) : createCommentVNode("v-if", true)
+      ])) : createCommentVNode("v-if", true),
+      _ctx.legend.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_4$4, [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.legend, (l, i) => {
+            return openBlock(), createElementBlock("span", {
+              key: l.name,
+              class: "sq-chart__legend-item",
+              role: "listitem"
+            }, [
+              createElementVNode(
+                "span",
+                {
+                  class: "sq-chart__swatch",
+                  style: normalizeStyle({ background: l.color })
+                },
+                null,
+                4
+                /* STYLE */
+              ),
+              createTextVNode(
+                toDisplayString(l.name),
+                1
+                /* TEXT */
+              )
+            ]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ])) : createCommentVNode("v-if", true),
+      renderSlot(_ctx.$slots, "default"),
+      createElementVNode("table", _hoisted_5$3, [
+        createElementVNode(
+          "caption",
+          null,
+          toDisplayString(_ctx.title || "Chart data"),
+          1
+          /* TEXT */
+        ),
+        createElementVNode("thead", null, [
+          createElementVNode("tr", null, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.table.head, (h) => {
+                return openBlock(), createElementBlock(
+                  "th",
+                  { key: h },
+                  toDisplayString(h),
+                  1
+                  /* TEXT */
+                );
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ])
+        ]),
+        createElementVNode("tbody", null, [
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.table.rows, (r, i) => {
+              return openBlock(), createElementBlock("tr", { key: i }, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(r, (c, j) => {
+                    return openBlock(), createElementBlock(
+                      "td",
+                      { key: j },
+                      toDisplayString(c),
+                      1
+                      /* TEXT */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const ChartFrame = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const seriesColor = (i, override) => override ?? `var(--sq-series-${i % 8 + 1})`;
+function useSize(el, fallbackHeight) {
+  const width = ref(600);
+  const height = ref(fallbackHeight);
+  let ro;
+  onMounted(() => {
+    const measure = () => {
+      if (!el.value) return;
+      width.value = el.value.clientWidth || 600;
+      height.value = el.value.clientHeight || fallbackHeight;
+    };
+    measure();
+    if (typeof ResizeObserver !== "undefined" && el.value) {
+      ro = new ResizeObserver(measure);
+      ro.observe(el.value);
+    }
+  });
+  onBeforeUnmount(() => ro?.disconnect());
+  return { width, height };
+}
+function linearScale(d0, d1, r0, r1) {
+  const k = d1 === d0 ? 0 : (r1 - r0) / (d1 - d0);
+  return (v) => r0 + (v - d0) * k;
+}
+function yDomain(values, zero = true) {
+  let min = Math.min(...values);
+  let max = Math.max(...values);
+  if (zero) {
+    min = Math.min(0, min);
+    max = Math.max(0, max);
+  }
+  if (!isFinite(min) || !isFinite(max)) return { ticks: [0, 1], min: 0, max: 1 };
+  if (min === max) max = min + 1;
+  const ticks = niceTicks(min, max, 5);
+  return { ticks, min: ticks[0], max: ticks[ticks.length - 1] };
+}
+function smoothPath(pts) {
+  if (pts.length < 2) return pts.length ? `M${pts[0][0]},${pts[0][1]}` : "";
+  const n = pts.length;
+  const dx = [];
+  const m = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx.push(pts[i + 1][0] - pts[i][0]);
+    m.push((pts[i + 1][1] - pts[i][1]) / (dx[i] || 1));
+  }
+  const t = [m[0]];
+  for (let i = 1; i < n - 1; i++) t.push(m[i - 1] * m[i] <= 0 ? 0 : 3 * (dx[i - 1] + dx[i]) / ((2 * dx[i] + dx[i - 1]) / m[i - 1] + (dx[i] + 2 * dx[i - 1]) / m[i]));
+  t.push(m[n - 2]);
+  let d = `M${pts[0][0]},${pts[0][1]}`;
+  for (let i = 0; i < n - 1; i++) {
+    const h = dx[i] / 3;
+    d += ` C${pts[i][0] + h},${pts[i][1] + t[i] * h} ${pts[i + 1][0] - h},${pts[i + 1][1] - t[i + 1] * h} ${pts[i + 1][0]},${pts[i + 1][1]}`;
+  }
+  return d;
+}
+const compact = (v, locale = "en-US") => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 1 }).format(v);
+function barPath(x, y, w, h, r, horizontal = false, negative = false) {
+  if (w <= 0 || h <= 0) return "";
+  const rr = Math.min(r, (horizontal ? h : w) / 2, horizontal ? w : h);
+  const k = rr * 0.45;
+  if (horizontal) {
+    if (negative) return `M${x + w},${y} H${x + rr} C${x + rr - k},${y} ${x},${y + rr - k} ${x},${y + rr} V${y + h - rr} C${x},${y + h - rr + k} ${x + rr - k},${y + h} ${x + rr},${y + h} H${x + w} Z`;
+    return `M${x},${y} H${x + w - rr} C${x + w - rr + k},${y} ${x + w},${y + rr - k} ${x + w},${y + rr} V${y + h - rr} C${x + w},${y + h - rr + k} ${x + w - rr + k},${y + h} ${x + w - rr},${y + h} H${x} Z`;
+  }
+  if (negative) return `M${x},${y} H${x + w} V${y + h - rr} C${x + w},${y + h - rr + k} ${x + w - rr + k},${y + h} ${x + w - rr},${y + h} H${x + rr} C${x + rr - k},${y + h} ${x},${y + h - rr + k} ${x},${y + h - rr} Z`;
+  return `M${x},${y + h} V${y + rr} C${x},${y + rr - k} ${x + rr - k},${y} ${x + rr},${y} H${x + w - rr} C${x + w - rr + k},${y} ${x + w},${y + rr - k} ${x + w},${y + rr} V${y + h} Z`;
+}
+const _sfc_main$3 = defineComponent({
+  name: "SqLineChart",
+  components: { ChartFrame },
+  props: {
+    labels: { type: Array, default: () => [] },
+    series: { type: Array, default: () => [] },
+    title: { type: String, default: void 0 },
+    subtitle: { type: String, default: void 0 },
+    height: { type: Number, default: 260 },
+    area: Boolean,
+    smooth: { type: Boolean, default: true },
+    points: Boolean,
+    /** Start y at zero (recommended for areas). */
+    zero: { type: Boolean, default: true },
+    flat: Boolean,
+    format: { type: Function, default: void 0 }
+  },
+  setup(props) {
+    const box = ref(null);
+    const { width: w } = useSize(box, props.height);
+    const pad = { t: 12, r: 16, b: 26, l: 44 };
+    const hover = ref(-1);
+    const y = computed(() => yDomain(props.series.flatMap((s) => s.data.filter((v) => v != null)), props.zero || props.area));
+    const sy = computed(() => linearScale(y.value.min, y.value.max, props.height - pad.b, pad.t));
+    const sx = computed(() => {
+      const n = Math.max(1, props.labels.length - 1);
+      return (i) => pad.l + (w.value - pad.l - pad.r) * i / n;
+    });
+    const colorOf = (i) => seriesColor(i, props.series[i]?.color);
+    const fmt = (v) => props.format ? props.format(v) : compact(v);
+    const fmtCell = (v) => v == null ? "–" : fmt(v);
+    const paths = computed(
+      () => props.series.map((s, i) => {
+        const pts = s.data.map((v, k) => [sx.value(k), v == null ? null : sy.value(v)]);
+        const valid = pts.filter((p) => p[1] != null);
+        const line = props.smooth ? smoothPath(valid) : valid.map((p, k) => `${k ? "L" : "M"}${p[0]},${p[1]}`).join(" ");
+        const base = sy.value(Math.max(y.value.min, 0));
+        const area = valid.length ? `${line} L${valid[valid.length - 1][0]},${base} L${valid[0][0]},${base} Z` : "";
+        return { name: s.name, color: colorOf(i), pts, line, area };
+      })
+    );
+    const showLabel = (i) => {
+      const n = props.labels.length;
+      const every = Math.ceil(n / Math.max(2, Math.floor((w.value - pad.l) / 64)));
+      return i % every === 0 || i === n - 1;
+    };
+    const onMove = (e) => {
+      const r = box.value.getBoundingClientRect();
+      const n = props.labels.length;
+      if (!n) return;
+      const i = Math.round((e.clientX - r.left - pad.l) / (w.value - pad.l - pad.r) * (n - 1));
+      hover.value = Math.max(0, Math.min(n - 1, i));
+    };
+    const tipStyle = computed(() => {
+      const x = sx.value(hover.value);
+      return x > w.value / 2 ? { right: `${w.value - x + 12}px`, top: "8px" } : { left: `${x + 12}px`, top: "8px" };
+    });
+    const legend = computed(() => props.series.map((s, i) => ({ name: s.name, color: colorOf(i) })));
+    const table = computed(() => ({ head: ["", ...props.series.map((s) => s.name)], rows: props.labels.map((l, k) => [l, ...props.series.map((s) => s.data[k] ?? "")]) }));
+    return { fmtCell, box, w, pad, hover, y, sy, sx, paths, colorOf, fmt, showLabel, onMove, tipStyle, legend, table };
+  }
+});
+const _hoisted_1$3 = ["width", "height", "aria-label"];
+const _hoisted_2$3 = { class: "sq-chart__grid" };
+const _hoisted_3$3 = ["x1", "x2", "y1", "y2"];
+const _hoisted_4$3 = { class: "sq-chart__axis" };
+const _hoisted_5$2 = ["x", "y"];
+const _hoisted_6 = ["x", "y"];
+const _hoisted_7 = ["d", "fill"];
+const _hoisted_8 = ["d", "stroke"];
+const _hoisted_9 = ["x1", "x2", "y1", "y2"];
+const _hoisted_10 = { key: 1 };
+const _hoisted_11 = ["cx", "cy", "fill"];
+const _hoisted_12 = { key: 2 };
+const _hoisted_13 = ["cx", "cy", "fill"];
+const _hoisted_14 = { class: "sq-chart__tooltip-title" };
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ChartFrame = resolveComponent("ChartFrame");
+  return openBlock(), createBlock(_component_ChartFrame, {
+    title: _ctx.title,
+    subtitle: _ctx.subtitle,
+    flat: _ctx.flat,
+    legend: _ctx.legend,
+    table: _ctx.table
+  }, {
+    default: withCtx(() => [
+      createElementVNode(
+        "div",
+        {
+          ref: "box",
+          class: "sq-chart__plot",
+          style: normalizeStyle({ height: _ctx.height + "px" }),
+          onPointermove: _cache[0] || (_cache[0] = (...args) => _ctx.onMove && _ctx.onMove(...args)),
+          onPointerleave: _cache[1] || (_cache[1] = ($event) => _ctx.hover = -1)
+        },
+        [
+          (openBlock(), createElementBlock("svg", {
+            width: _ctx.w,
+            height: _ctx.height,
+            role: "img",
+            "aria-label": _ctx.title || "Line chart"
+          }, [
+            createElementVNode("g", _hoisted_2$3, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.y.ticks, (t) => {
+                  return openBlock(), createElementBlock("line", {
+                    key: "g" + t,
+                    x1: _ctx.pad.l,
+                    x2: _ctx.w - _ctx.pad.r,
+                    y1: _ctx.sy(t),
+                    y2: _ctx.sy(t)
+                  }, null, 8, _hoisted_3$3);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            createElementVNode("g", _hoisted_4$3, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.y.ticks, (t) => {
+                  return openBlock(), createElementBlock("text", {
+                    key: "y" + t,
+                    x: _ctx.pad.l - 8,
+                    y: _ctx.sy(t),
+                    "text-anchor": "end",
+                    "dominant-baseline": "middle"
+                  }, toDisplayString(_ctx.fmt(t)), 9, _hoisted_5$2);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.labels, (l, i) => {
+                  return withDirectives((openBlock(), createElementBlock("text", {
+                    key: "x" + i,
+                    x: _ctx.sx(i),
+                    y: _ctx.height - 6,
+                    "text-anchor": "middle"
+                  }, toDisplayString(l), 9, _hoisted_6)), [
+                    [vShow, _ctx.showLabel(i)]
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.paths, (s, si) => {
+                return openBlock(), createElementBlock("g", {
+                  key: s.name
+                }, [
+                  _ctx.area ? (openBlock(), createElementBlock("path", {
+                    key: 0,
+                    d: s.area,
+                    fill: s.color,
+                    class: "sq-chart__area"
+                  }, null, 8, _hoisted_7)) : createCommentVNode("v-if", true),
+                  createElementVNode("path", {
+                    d: s.line,
+                    stroke: s.color,
+                    class: "sq-chart__line"
+                  }, null, 8, _hoisted_8)
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )),
+            _ctx.hover >= 0 ? (openBlock(), createElementBlock("line", {
+              key: 0,
+              class: "sq-chart__crosshair",
+              x1: _ctx.sx(_ctx.hover),
+              x2: _ctx.sx(_ctx.hover),
+              y1: _ctx.pad.t,
+              y2: _ctx.height - _ctx.pad.b
+            }, null, 8, _hoisted_9)) : createCommentVNode("v-if", true),
+            _ctx.hover >= 0 ? (openBlock(), createElementBlock("g", _hoisted_10, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.paths, (s) => {
+                  return withDirectives((openBlock(), createElementBlock("circle", {
+                    key: "p" + s.name,
+                    cx: _ctx.sx(_ctx.hover),
+                    cy: s.pts[_ctx.hover] ? s.pts[_ctx.hover][1] ?? 0 : 0,
+                    r: "4.5",
+                    fill: s.color,
+                    class: "sq-chart__dot"
+                  }, null, 8, _hoisted_11)), [
+                    [vShow, s.pts[_ctx.hover] && s.pts[_ctx.hover][1] != null]
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : createCommentVNode("v-if", true),
+            _ctx.points && _ctx.hover < 0 ? (openBlock(), createElementBlock("g", _hoisted_12, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.paths, (s) => {
+                  return openBlock(), createElementBlock("g", {
+                    key: "pp" + s.name
+                  }, [
+                    (openBlock(true), createElementBlock(
+                      Fragment,
+                      null,
+                      renderList(s.pts, (p, i) => {
+                        return withDirectives((openBlock(), createElementBlock("circle", {
+                          key: i,
+                          cx: p[0],
+                          cy: p[1] ?? 0,
+                          r: "4",
+                          fill: s.color,
+                          class: "sq-chart__dot"
+                        }, null, 8, _hoisted_13)), [
+                          [vShow, p[1] != null]
+                        ]);
+                      }),
+                      128
+                      /* KEYED_FRAGMENT */
+                    ))
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])) : createCommentVNode("v-if", true)
+          ], 8, _hoisted_1$3)),
+          _ctx.hover >= 0 ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: "sq-chart__tooltip sq-squircle",
+              style: normalizeStyle(_ctx.tipStyle)
+            },
+            [
+              createElementVNode(
+                "div",
+                _hoisted_14,
+                toDisplayString(_ctx.labels[_ctx.hover]),
+                1
+                /* TEXT */
+              ),
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.series, (s, i) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: s.name,
+                    class: "sq-chart__tooltip-row"
+                  }, [
+                    createElementVNode(
+                      "span",
+                      {
+                        class: "sq-chart__swatch",
+                        style: normalizeStyle({ background: _ctx.colorOf(i) })
+                      },
+                      null,
+                      4
+                      /* STYLE */
+                    ),
+                    createTextVNode(
+                      toDisplayString(s.name),
+                      1
+                      /* TEXT */
+                    ),
+                    createElementVNode(
+                      "b",
+                      null,
+                      toDisplayString(_ctx.fmtCell(s.data[_ctx.hover])),
+                      1
+                      /* TEXT */
+                    )
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ],
+            4
+            /* STYLE */
+          )) : createCommentVNode("v-if", true)
+        ],
+        36
+        /* STYLE, NEED_HYDRATION */
+      )
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["title", "subtitle", "flat", "legend", "table"]);
+}
+const SqLineChart = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = defineComponent({
+  name: "SqBarChart",
+  components: { ChartFrame },
+  props: {
+    labels: { type: Array, default: () => [] },
+    series: { type: Array, default: () => [] },
+    title: { type: String, default: void 0 },
+    subtitle: { type: String, default: void 0 },
+    height: { type: Number, default: 260 },
+    stacked: Boolean,
+    horizontal: Boolean,
+    radius: { type: Number, default: 6 },
+    flat: Boolean,
+    format: { type: Function, default: void 0 }
+  },
+  setup(props) {
+    const box = ref(null);
+    const { width: w } = useSize(box, props.height);
+    const pad = computed(() => props.horizontal ? { t: 8, r: 16, b: 24, l: 84 } : { t: 12, r: 16, b: 26, l: 44 });
+    const hover = ref(null);
+    const colorOf = (i) => seriesColor(i, props.series[i]?.color);
+    const fmt = (v) => props.format ? props.format(v) : compact(v);
+    const fmtCell = (v) => v == null ? "–" : fmt(v);
+    const y = computed(() => {
+      const vals = props.stacked ? props.labels.flatMap((_, k) => {
+        let pos = 0;
+        let neg = 0;
+        for (const s of props.series) {
+          const v = s.data[k] ?? 0;
+          v >= 0 ? pos += v : neg += v;
+        }
+        return [pos, neg];
+      }) : props.series.flatMap((s) => s.data.filter((v) => v != null));
+      return yDomain(vals, true);
+    });
+    const sv = computed(() => props.horizontal ? linearScale(y.value.min, y.value.max, pad.value.l, w.value - pad.value.r) : linearScale(y.value.min, y.value.max, props.height - pad.value.b, pad.value.t));
+    const band = computed(() => {
+      const n = Math.max(1, props.labels.length);
+      const len = props.horizontal ? props.height - pad.value.t - pad.value.b : w.value - pad.value.l - pad.value.r;
+      const step = len / n;
+      return { step, inner: step * 0.72, start: props.horizontal ? pad.value.t : pad.value.l };
+    });
+    const bars = computed(() => {
+      const out = [];
+      const gap = 2;
+      const zero = sv.value(0);
+      props.labels.forEach((_, k) => {
+        const c0 = band.value.start + band.value.step * k + (band.value.step - band.value.inner) / 2;
+        let pos = 0;
+        let neg = 0;
+        const n = props.series.length;
+        props.series.forEach((s, i) => {
+          const v = s.data[k];
+          if (v == null) return;
+          let a;
+          let b;
+          let c;
+          let thick;
+          if (props.stacked) {
+            const from = v >= 0 ? pos : neg;
+            const to = from + v;
+            v >= 0 ? pos = to : neg = to;
+            a = sv.value(from);
+            b = sv.value(to);
+            c = c0;
+            thick = band.value.inner;
+          } else {
+            a = zero;
+            b = sv.value(v);
+            thick = Math.max(1, (band.value.inner - gap * (n - 1)) / n);
+            c = c0 + i * (thick + gap);
+          }
+          const lo = Math.min(a, b);
+          const len = Math.abs(b - a) - (props.stacked ? gap : 0);
+          const top = props.stacked ? props.series.slice(i + 1).every((x) => (x.data[k] ?? 0) === 0 || Math.sign(x.data[k] ?? 0) !== Math.sign(v)) : true;
+          const r = top ? props.radius : 0;
+          const d = props.horizontal ? barPath(v >= 0 ? lo : lo + (props.stacked ? gap : 0), c, Math.max(0, len), thick, r, true, v < 0) : barPath(c, v >= 0 ? lo + (props.stacked ? gap : 0) : lo, thick, Math.max(0, len), r, false, v < 0);
+          out.push({ key: `${k}-${i}`, d, color: colorOf(i), cat: k, cx: props.horizontal ? Math.max(a, b) : c + thick / 2, cy: props.horizontal ? c : Math.min(a, b) });
+        });
+      });
+      return out;
+    });
+    const gridLine = (t) => props.horizontal ? { x1: sv.value(t), x2: sv.value(t), y1: pad.value.t, y2: props.height - pad.value.b } : { x1: pad.value.l, x2: w.value - pad.value.r, y1: sv.value(t), y2: sv.value(t) };
+    const valueTick = (t) => props.horizontal ? { x: sv.value(t), y: props.height - 6, "text-anchor": "middle" } : { x: pad.value.l - 8, y: sv.value(t), "text-anchor": "end", "dominant-baseline": "middle" };
+    const catTick = (i) => {
+      const mid = band.value.start + band.value.step * (i + 0.5);
+      return props.horizontal ? { x: pad.value.l - 8, y: mid, "text-anchor": "end", "dominant-baseline": "middle" } : { x: mid, y: props.height - 6, "text-anchor": "middle" };
+    };
+    const tipStyle = computed(() => {
+      const h = hover.value;
+      if (!h) return {};
+      return h.x > w.value / 2 ? { right: `${w.value - h.x + 10}px`, top: `${Math.max(4, h.y - 10)}px` } : { left: `${h.x + 10}px`, top: `${Math.max(4, h.y - 10)}px` };
+    });
+    const legend = computed(() => props.series.map((s, i) => ({ name: s.name, color: colorOf(i) })));
+    const table = computed(() => ({ head: ["", ...props.series.map((s) => s.name)], rows: props.labels.map((l, k) => [l, ...props.series.map((s) => s.data[k] ?? "")]) }));
+    return { fmtCell, box, w, hover, y, bars, gridLine, valueTick, catTick, colorOf, fmt, tipStyle, legend, table };
+  }
+});
+const _hoisted_1$2 = ["width", "height", "aria-label"];
+const _hoisted_2$2 = { class: "sq-chart__grid" };
+const _hoisted_3$2 = { class: "sq-chart__axis" };
+const _hoisted_4$2 = ["d", "fill", "onPointerenter"];
+const _hoisted_5$1 = { class: "sq-chart__tooltip-title" };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ChartFrame = resolveComponent("ChartFrame");
+  return openBlock(), createBlock(_component_ChartFrame, {
+    title: _ctx.title,
+    subtitle: _ctx.subtitle,
+    flat: _ctx.flat,
+    legend: _ctx.legend,
+    table: _ctx.table
+  }, {
+    default: withCtx(() => [
+      createElementVNode(
+        "div",
+        {
+          ref: "box",
+          class: "sq-chart__plot",
+          style: normalizeStyle({ height: _ctx.height + "px" }),
+          onPointerleave: _cache[0] || (_cache[0] = ($event) => _ctx.hover = null)
+        },
+        [
+          (openBlock(), createElementBlock("svg", {
+            width: _ctx.w,
+            height: _ctx.height,
+            role: "img",
+            "aria-label": _ctx.title || "Bar chart"
+          }, [
+            createElementVNode("g", _hoisted_2$2, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.y.ticks, (t) => {
+                  return openBlock(), createElementBlock(
+                    "line",
+                    mergeProps({
+                      key: "g" + t
+                    }, { ref_for: true }, _ctx.gridLine(t)),
+                    null,
+                    16
+                    /* FULL_PROPS */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            createElementVNode("g", _hoisted_3$2, [
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.y.ticks, (t) => {
+                  return openBlock(), createElementBlock(
+                    "text",
+                    mergeProps({
+                      key: "y" + t
+                    }, { ref_for: true }, _ctx.valueTick(t)),
+                    toDisplayString(_ctx.fmt(t)),
+                    17
+                    /* TEXT, FULL_PROPS */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.labels, (l, i) => {
+                  return openBlock(), createElementBlock(
+                    "text",
+                    mergeProps({
+                      key: "x" + i
+                    }, { ref_for: true }, _ctx.catTick(i)),
+                    toDisplayString(l),
+                    17
+                    /* TEXT, FULL_PROPS */
+                  );
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.bars, (b) => {
+                return openBlock(), createElementBlock("path", {
+                  key: b.key,
+                  d: b.d,
+                  fill: b.color,
+                  class: normalizeClass(["sq-chart__bar", { "sq-chart__bar--dim": _ctx.hover && _ctx.hover.cat !== b.cat }]),
+                  onPointerenter: ($event) => _ctx.hover = { cat: b.cat, x: b.cx, y: b.cy }
+                }, null, 42, _hoisted_4$2);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ], 8, _hoisted_1$2)),
+          _ctx.hover ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: "sq-chart__tooltip sq-squircle",
+              style: normalizeStyle(_ctx.tipStyle)
+            },
+            [
+              createElementVNode(
+                "div",
+                _hoisted_5$1,
+                toDisplayString(_ctx.labels[_ctx.hover.cat]),
+                1
+                /* TEXT */
+              ),
+              (openBlock(true), createElementBlock(
+                Fragment,
+                null,
+                renderList(_ctx.series, (s, i) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: s.name,
+                    class: "sq-chart__tooltip-row"
+                  }, [
+                    createElementVNode(
+                      "span",
+                      {
+                        class: "sq-chart__swatch",
+                        style: normalizeStyle({ background: _ctx.colorOf(i) })
+                      },
+                      null,
+                      4
+                      /* STYLE */
+                    ),
+                    createTextVNode(
+                      toDisplayString(s.name),
+                      1
+                      /* TEXT */
+                    ),
+                    createElementVNode(
+                      "b",
+                      null,
+                      toDisplayString(_ctx.fmtCell(s.data[_ctx.hover.cat])),
+                      1
+                      /* TEXT */
+                    )
+                  ]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ],
+            4
+            /* STYLE */
+          )) : createCommentVNode("v-if", true)
+        ],
+        36
+        /* STYLE, NEED_HYDRATION */
+      )
+    ]),
+    _: 1
+    /* STABLE */
+  }, 8, ["title", "subtitle", "flat", "legend", "table"]);
+}
+const SqBarChart = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = defineComponent({
+  name: "SqDonutChart",
+  components: { ChartFrame },
+  props: {
+    data: { type: Array, default: () => [] },
+    title: { type: String, default: void 0 },
+    subtitle: { type: String, default: void 0 },
+    size: { type: Number, default: 220 },
+    /** Ring thickness as a fraction of the radius; 1 = pie. */
+    thickness: { type: Number, default: 0.34 },
+    totalLabel: { type: String, default: "Total" },
+    flat: Boolean,
+    format: { type: Function, default: void 0 }
+  },
+  setup(props) {
+    const hover = ref(-1);
+    const total = computed(() => props.data.reduce((s, d) => s + Math.max(0, d.value), 0));
+    const fmt = (v) => props.format ? props.format(v) : compact(v);
+    const arcs = computed(() => {
+      const c = props.size / 2;
+      const R = c - 4;
+      const r = R * (1 - props.thickness);
+      const gap = props.data.length > 1 ? 2 / R : 0;
+      let a0 = -Math.PI / 2;
+      return props.data.map((d, i) => {
+        const sweep = total.value ? Math.max(0, d.value) / total.value * Math.PI * 2 : 0;
+        const s = a0 + gap / 2;
+        const e = a0 + sweep - gap / 2;
+        a0 += sweep;
+        const large = e - s > Math.PI ? 1 : 0;
+        const p = (rad, ang) => `${c + rad * Math.cos(ang)},${c + rad * Math.sin(ang)}`;
+        const dPath = e <= s ? "" : r > 0 ? `M${p(R, s)} A${R},${R} 0 ${large} 1 ${p(R, e)} L${p(r, e)} A${r},${r} 0 ${large} 0 ${p(r, s)} Z` : `M${c},${c} L${p(R, s)} A${R},${R} 0 ${large} 1 ${p(R, e)} Z`;
+        return { label: d.label, color: seriesColor(i, d.color), d: dPath };
+      });
+    });
+    const legend = computed(() => props.data.map((d, i) => ({ name: `${d.label} · ${total.value ? Math.round(d.value / total.value * 100) : 0}%`, color: seriesColor(i, d.color) })));
+    const table = computed(() => ({ head: ["Label", "Value"], rows: props.data.map((d) => [d.label, d.value]) }));
+    return { hover, total, fmt, arcs, legend, table };
+  }
+});
+const _hoisted_1$1 = ["width", "height", "viewBox", "aria-label"];
+const _hoisted_2$1 = ["d", "fill", "onPointerenter"];
+const _hoisted_3$1 = { class: "sq-chart__donut-center" };
+const _hoisted_4$1 = { class: "sq-chart__donut-value" };
+const _hoisted_5 = { class: "sq-chart__donut-label" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ChartFrame = resolveComponent("ChartFrame");
+  return openBlock(), createBlock(_component_ChartFrame, {
+    title: _ctx.title,
+    subtitle: _ctx.subtitle,
+    flat: _ctx.flat,
+    legend: _ctx.legend,
+    table: _ctx.table
+  }, {
+    default: withCtx(() => [
+      createElementVNode(
+        "div",
+        {
+          class: "sq-chart__donut",
+          style: normalizeStyle({ height: _ctx.size + "px" })
+        },
+        [
+          (openBlock(), createElementBlock("svg", {
+            width: _ctx.size,
+            height: _ctx.size,
+            viewBox: `0 0 ${_ctx.size} ${_ctx.size}`,
+            role: "img",
+            "aria-label": _ctx.title || "Donut chart",
+            onPointerleave: _cache[0] || (_cache[0] = ($event) => _ctx.hover = -1)
+          }, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.arcs, (a, i) => {
+                return openBlock(), createElementBlock("path", {
+                  key: a.label,
+                  d: a.d,
+                  fill: a.color,
+                  class: normalizeClass(["sq-chart__arc", { "sq-chart__arc--dim": _ctx.hover >= 0 && _ctx.hover !== i }]),
+                  onPointerenter: ($event) => _ctx.hover = i
+                }, null, 42, _hoisted_2$1);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ], 40, _hoisted_1$1)),
+          createElementVNode("div", _hoisted_3$1, [
+            renderSlot(_ctx.$slots, "center", {
+              hover: _ctx.hover >= 0 ? _ctx.data[_ctx.hover] : null,
+              total: _ctx.total
+            }, () => [
+              createElementVNode(
+                "div",
+                _hoisted_4$1,
+                toDisplayString(_ctx.hover >= 0 ? _ctx.fmt(_ctx.data[_ctx.hover].value) : _ctx.fmt(_ctx.total)),
+                1
+                /* TEXT */
+              ),
+              createElementVNode(
+                "div",
+                _hoisted_5,
+                toDisplayString(_ctx.hover >= 0 ? _ctx.data[_ctx.hover].label : _ctx.totalLabel),
+                1
+                /* TEXT */
+              )
+            ])
+          ])
+        ],
+        4
+        /* STYLE */
+      )
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["title", "subtitle", "flat", "legend", "table"]);
+}
+const SqDonutChart = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = defineComponent({
+  name: "SqSparkline",
+  props: {
+    data: { type: Array, default: () => [] },
+    width: { type: Number, default: 120 },
+    height: { type: Number, default: 32 },
+    color: { type: String, default: "primary" },
+    fill: Boolean,
+    label: { type: String, default: "Trend" }
+  },
+  setup(props) {
+    const pts = computed(() => {
+      const d = props.data;
+      if (!d.length) return [];
+      const min = Math.min(...d);
+      const max = Math.max(...d);
+      const span = max - min || 1;
+      return d.map((v, i) => [3 + (props.width - 6) * i / Math.max(1, d.length - 1), 3 + (props.height - 6) * (1 - (v - min) / span)]);
+    });
+    const lineD = computed(() => smoothPath(pts.value));
+    const areaD = computed(() => pts.value.length ? `${lineD.value} L${pts.value[pts.value.length - 1][0]},${props.height} L${pts.value[0][0]},${props.height} Z` : "");
+    return { pts, lineD, areaD, stroke: computed(() => colorValue(props.color)) };
+  }
+});
+const _hoisted_1 = ["width", "height", "viewBox", "aria-label"];
+const _hoisted_2 = ["d", "fill"];
+const _hoisted_3 = ["d", "stroke"];
+const _hoisted_4 = ["cx", "cy", "fill"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", {
+    ref: "el",
+    class: "sq-sparkline",
+    width: _ctx.width,
+    height: _ctx.height,
+    viewBox: `0 0 ${_ctx.width} ${_ctx.height}`,
+    role: "img",
+    "aria-label": _ctx.label
+  }, [
+    _ctx.fill ? (openBlock(), createElementBlock("path", {
+      key: 0,
+      d: _ctx.areaD,
+      fill: _ctx.stroke,
+      class: "sq-sparkline__area"
+    }, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
+    createElementVNode("path", {
+      d: _ctx.lineD,
+      stroke: _ctx.stroke,
+      class: "sq-sparkline__line"
+    }, null, 8, _hoisted_3),
+    _ctx.pts.length ? (openBlock(), createElementBlock("circle", {
+      key: 1,
+      cx: _ctx.pts[_ctx.pts.length - 1][0],
+      cy: _ctx.pts[_ctx.pts.length - 1][1],
+      r: "2.5",
+      fill: _ctx.stroke
+    }, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)
+  ], 8, _hoisted_1);
+}
+const SqSparkline = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const componentNames = ["SqLineChart", "SqBarChart", "SqDonutChart", "SqSparkline"];
+export {
+  SqBarChart,
+  SqDonutChart,
+  SqLineChart,
+  SqSparkline,
+  barPath,
+  componentNames,
+  seriesColor,
+  smoothPath
+};
+//# sourceMappingURL=index.mjs.map