kanto-ds 1.0.0 → 1.1.0

package/dist/components/data/kt-chart/kt-chart.js

@@ -1,21 +1,591 @@
-import { css as F, nothing as h, svg as l, html as c } from "lit";
-import { query as M, state as g, property as p } from "lit/decorators.js";
-import { K as f, d as A } from "../../../chunks/kt-element-CcMLO5e8.js";
-import { u as C, e as y } from "../../../chunks/events-Bjl5Zmmq.js";
-var P = Object.defineProperty, n = (b, e, t, o) => {
-  for (var i = void 0, s = b.length - 1, r; s >= 0; s--)
-    (r = b[s]) && (i = r(e, t, i) || i);
-  return i && P(e, t, i), i;
+import { svg as b, nothing as A, css as gt, html as G } from "lit";
+import { query as vt, state as tt, property as B } from "lit/decorators.js";
+import { classMap as kt } from "lit/directives/class-map.js";
+import { K as rt, d as wt } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { u as Mt, e as nt } from "../../../chunks/events-Bjl5Zmmq.js";
+function At(s) {
+  const t = Math.floor(Math.log10(s)), e = s / 10 ** t;
+  return (e < 1.5 ? 1 : e < 3 ? 2 : e < 7 ? 5 : 10) * 10 ** t;
+}
+function at(s, t, e) {
+  if (t === s) {
+    const c = Math.abs(s) || 1;
+    s -= c, t += c;
+  }
+  const a = At((t - s) / Math.max(1, e - 1)), o = Math.max(0, -Math.floor(Math.log10(a))), i = (c) => Number(c.toFixed(o)) || 0, n = i(Math.floor(s / a) * a), r = i(Math.ceil(t / a) * a), h = [];
+  for (let c = 0; n + c * a <= r + a / 2; c += 1)
+    h.push(i(n + c * a));
+  return { min: n, max: r, step: a, values: h };
+}
+function St(s, t, { includeZero: e }) {
+  const a = t.flat();
+  for (const r of s) {
+    const h = Math.max(0, ...r.map((c) => c.length));
+    for (let c = 0; c < h; c += 1) {
+      let l = 0, d = 0;
+      for (const u of r) {
+        const m = u[c] ?? 0;
+        m >= 0 ? l += m : d += m;
+      }
+      a.push(l, d);
+    }
+  }
+  const o = a.filter(Number.isFinite);
+  if (o.length === 0) return { lo: 0, hi: 1 };
+  let i = Math.min(...o), n = Math.max(...o);
+  return e && (i = Math.min(i, 0), n = Math.max(n, 0)), { lo: i, hi: n };
+}
+function Y(s, t, e, a) {
+  const o = at(a.min ?? s, a.max ?? t, e), i = a.min ?? o.min, n = a.max ?? o.max;
+  return n <= i ? o : {
+    min: i,
+    max: n,
+    step: o.step,
+    values: o.values.filter((r) => r >= i && r <= n)
+  };
+}
+function I(s, t, e, a) {
+  return e + (s - t.min) / (t.max - t.min) * (a - e);
+}
+function F(s, t) {
+  return Math.min(6, Math.max(3, Math.round(s / t)));
+}
+const U = Math.PI * 2, R = (s) => Math.round(s * 100) / 100 || 0, P = ([s, t]) => `${R(s)},${R(t)}`;
+function H(s, t = !0) {
+  return s.map((e, a) => `${a === 0 && t ? "M" : "L"}${P(e)}`).join(" ");
+}
+function Lt(s) {
+  const t = s.length;
+  if (t < 3) return [];
+  const e = s.slice(0, -1).map(([o, i], n) => {
+    const [r, h] = s[n + 1];
+    return r === o ? 0 : (h - i) / (r - o);
+  }), a = s.map((o, i) => {
+    if (i === 0) return e[0];
+    if (i === t - 1) return e[t - 2];
+    const n = e[i - 1], r = e[i];
+    return n * r <= 0 ? 0 : (n + r) / 2;
+  });
+  return e.forEach((o, i) => {
+    if (o === 0) {
+      a[i] = 0, a[i + 1] = 0;
+      return;
+    }
+    const n = a[i] / o, r = a[i + 1] / o, h = n * n + r * r;
+    if (h > 9) {
+      const c = 3 / Math.sqrt(h);
+      a[i] = c * n * o, a[i + 1] = c * r * o;
+    }
+  }), e.map((o, i) => {
+    const n = s[i], r = s[i + 1], h = (r[0] - n[0]) / 3;
+    return {
+      from: n,
+      c1: [n[0] + h, n[1] + a[i] * h],
+      c2: [r[0] - h, r[1] - a[i + 1] * h],
+      to: r
+    };
+  });
+}
+function Pt(s, t = !0) {
+  return s.length < 3 ? H(s, t) : [
+    t ? `M${P(s[0])}` : `L${P(s[0])}`,
+    ...Lt(s).map(({ c1: a, c2: o, to: i }) => `C${P(a)} ${P(o)} ${P(i)}`)
+  ].join(" ");
+}
+function T(s, t, e, a) {
+  return [s + e * Math.sin(a), t - e * Math.cos(a)];
+}
+function Ct(s, t, e, a, o, i) {
+  const n = i - o;
+  if (n <= 0 || a <= 0) return "";
+  if (n >= U - 1e-6) {
+    const l = (d, u) => {
+      const m = T(s, t, d, 0), y = T(s, t, d, Math.PI), k = `A${R(d)},${R(d)} 0 1 ${u}`;
+      return `M${P(m)} ${k} ${P(y)} ${k} ${P(m)} Z`;
+    };
+    return e > 0 ? `${l(a, 1)} ${l(e, 0)}` : l(a, 1);
+  }
+  const r = n > Math.PI ? 1 : 0, h = `A${R(a)},${R(a)} 0 ${r} 1 ${P(T(s, t, a, i))}`;
+  if (e <= 0)
+    return `M${P([s, t])} L${P(T(s, t, a, o))} ${h} Z`;
+  const c = `A${R(e)},${R(e)} 0 ${r} 0 ${P(T(s, t, e, o))}`;
+  return `M${P(T(s, t, a, o))} ${h} L${P(T(s, t, e, i))} ${c} Z`;
+}
+function lt(s, t, e, a, o, i) {
+  const r = Math.max(
+    0,
+    i === "top" || i === "bottom" ? Math.min(o, e / 2, a) : Math.min(o, a / 2, e)
+  ), [h, c, l, d] = [s, t, s + e, t + a], u = (y) => `A${R(r)},${R(r)} 0 0 1 ${P(y)}`, m = (y) => `L${P(y)}`;
+  if (i === "none" || r === 0)
+    return `M${P([h, c])} ${m([l, c])} ${m([l, d])} ${m([h, d])} Z`;
+  switch (i) {
+    case "top":
+      return `M${P([h, d])} ${m([h, c + r])} ${u([h + r, c])} ${m([l - r, c])} ${u([l, c + r])} ${m([l, d])} Z`;
+    case "bottom":
+      return `M${P([h, c])} ${m([l, c])} ${m([l, d - r])} ${u([l - r, d])} ${m([h + r, d])} ${u([h, d - r])} Z`;
+    case "right":
+      return `M${P([h, c])} ${m([l - r, c])} ${u([l, c + r])} ${m([l, d - r])} ${u([l - r, d])} ${m([h, d])} Z`;
+    case "left":
+      return `M${P([l, c])} ${m([l, d])} ${m([h + r, d])} ${u([h, d - r])} ${m([h, c + r])} ${u([h + r, c])} Z`;
+  }
+}
+const D = { top: 12, right: 8, bottom: 24 }, W = 12, ct = { vertical: 48, horizontal: 96 }, N = (s) => s?.values ?? [];
+function Ot(s) {
+  const { series: t, hidden: e, labels: a, measure: o, format: i, noAxis: n, width: r, height: h } = s, c = t.map((v) => v.type ?? s.type), l = t.map((v, O) => O).filter((v) => !e.has(v)), d = l.map((v) => c[v]), u = Math.max(a.length, 0, ...t.map((v) => N(v).length)), m = d.length > 0 ? d.includes("bar") : s.type === "bar", y = s.horizontal && m && (d.length === 0 || d.every((v) => v === "bar")), k = (v) => l.filter((O) => c[O] === v).map((O) => N(t[O])), f = s.stacked ? [k("bar"), k("area")].filter((v) => v.length) : [], g = s.stacked ? k("line") : l.map((v) => N(t[v])), $ = d.length > 0 ? d.some((v) => v !== "line") : s.type !== "line", { lo: _, hi: w } = St(f, g, { includeZero: $ }), p = { min: s.min, max: s.max };
+  if (!y) {
+    const v = Math.max(0, h - D.top - D.bottom), O = Y(_, w, F(v, ct.vertical), p), K = n ? 0 : Math.max(0, ...O.values.map((yt) => o(i(yt)))), it = n ? 4 : Math.ceil(K) + W;
+    return {
+      box: {
+        x: it,
+        y: D.top,
+        width: Math.max(0, r - it - D.right),
+        height: v
+      },
+      ticks: O,
+      count: u,
+      horizontal: y,
+      banded: m,
+      marks: c,
+      visible: l
+    };
+  }
+  const x = Math.max(0, ...a.map(o)), M = Math.ceil(Math.min(x, r * 0.4)) + W, L = Math.max(0, r - M - D.right), z = Y(_, w, F(L, ct.horizontal), p), E = n ? D.right : Math.max(D.right, o(i(z.max)) / 2);
+  return {
+    box: {
+      x: M,
+      y: D.top,
+      width: Math.max(0, r - M - E),
+      height: Math.max(0, h - D.top - (n ? 4 : D.bottom))
+    },
+    ticks: z,
+    count: u,
+    horizontal: y,
+    banded: m,
+    marks: c,
+    visible: l
+  };
+}
+function X(s, t) {
+  const { box: e, count: a, horizontal: o, banded: i } = s, n = o ? e.y : e.x, r = o ? e.height : e.width;
+  return i ? n + (t + 0.5) * r / Math.max(1, a) : a <= 1 ? n + r / 2 : n + t / (a - 1) * r;
+}
+function V(s, t) {
+  const { box: e, ticks: a, horizontal: o } = s;
+  return o ? I(t, a, e.x, e.x + e.width) : I(t, a, e.y + e.height, e.y);
+}
+function _t(s, t, e) {
+  const { box: a, count: o, horizontal: i, banded: n } = s;
+  if (o === 0) return -1;
+  const r = i ? e - a.y : t - a.x, h = i ? a.height : a.width;
+  if (h <= 0) return -1;
+  const c = n ? Math.floor(r / (h / o)) : Math.round(r / h * (o - 1));
+  return Math.min(Math.max(c, 0), o - 1);
+}
+const zt = 0.64, et = 2, ht = 4, dt = { grouped: 40, stacked: 48 }, Gt = 12;
+function ut(s, t) {
+  for (let e = s.length - 1; e >= 0; e -= 1)
+    if (t(s[e])) return e;
+  return -1;
+}
+function Bt(s, t, e) {
+  if (e(s) <= t) return s;
+  let a = s;
+  for (; a.length > 1 && e(`${a}…`) > t; ) a = a.slice(0, -1);
+  return `${a}…`;
+}
+function Tt(s) {
+  const { layout: t, noGrid: e, noAxis: a, format: o } = s, { box: i, ticks: n, horizontal: r } = t, h = e ? A : n.values.map((d) => {
+    const u = V(t, d);
+    return r ? b`<line class="grid" x1=${u} y1=${i.y} x2=${u} y2=${i.y + i.height} />` : b`<line class="grid" x1=${i.x} y1=${u} x2=${i.x + i.width} y2=${u} />`;
+  }), c = n.min < 0 && n.max > 0 ? (() => {
+    const d = V(t, 0);
+    return r ? b`<line class="baseline" x1=${d} y1=${i.y} x2=${d} y2=${i.y + i.height} />` : b`<line class="baseline" x1=${i.x} y1=${d} x2=${i.x + i.width} y2=${d} />`;
+  })() : A, l = a ? A : n.values.map((d) => {
+    const u = V(t, d);
+    return r ? b`<text class="tick-label" x=${u} y=${i.y + i.height + 16} text-anchor="middle">${o(d)}</text>` : b`<text class="tick-label" x=${i.x - 8} y=${u} text-anchor="end" dominant-baseline="middle">${o(d)}</text>`;
+  });
+  return b`${h}${c}${l}`;
+}
+function Et(s) {
+  const { layout: t, labels: e, measure: a } = s, { box: o, count: i, horizontal: n, banded: r } = t;
+  if (n) {
+    const l = Math.max(1, Math.ceil(i / Math.max(1, Math.floor(o.height / 18))));
+    return b`${e.map(
+      (d, u) => u % l === 0 ? b`<text
+            class="axis-label"
+            x=${o.x - 8}
+            y=${X(t, u)}
+            text-anchor="end"
+            dominant-baseline="middle"
+          >${Bt(d, o.x - W, a)}</text>` : A
+    )}`;
+  }
+  const h = Math.max(0, ...e.map(a)) + W, c = Math.max(1, Math.ceil(i / Math.max(1, Math.floor(o.width / h))));
+  return b`${e.map((l, d) => {
+    if (d % c !== 0) return A;
+    const u = r || i <= 1 ? "middle" : d === 0 ? "start" : d === i - 1 ? "end" : "middle";
+    return b`<text
+      class="axis-label"
+      x=${X(t, d)}
+      y=${o.y + o.height + 16}
+      text-anchor=${u}
+    >${l}</text>`;
+  })}`;
+}
+function Dt(s, t, e) {
+  return t.map((a, o) => [
+    X(s.layout, o),
+    V(s.layout, a + (e?.[o] ?? 0))
+  ]);
+}
+function st(s, t, e = !0) {
+  return s.smooth ? Pt(t, e) : H(t, e);
+}
+function Rt(s) {
+  const { layout: t, series: e, colorOf: a, active: o, idPrefix: i, stacked: n, smooth: r } = s, { box: h, count: c, visible: l, marks: d } = t, u = V(t, Math.min(Math.max(0, t.ticks.min), t.ticks.max)), m = new Array(c).fill(0), y = [], k = [];
+  for (const g of l) {
+    const $ = d[g];
+    if ($ === "bar") continue;
+    const _ = N(e[g]);
+    if (_.length === 0) continue;
+    const w = a(g), x = $ === "area" && n ? [...m] : void 0, M = Dt(s, _, x);
+    if ($ === "area") {
+      const L = `${i}-fill-${g}`, z = x ? _.map((v, O) => [X(t, O), V(t, x[O])]) : [
+        [M.at(-1)[0], u],
+        [M[0][0], u]
+      ], E = x ? st(s, [...z].reverse(), !1) : H(z, !1);
+      y.push(b`
+        <defs>
+          <linearGradient id=${L} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color=${w} stop-opacity="0.28" />
+            <stop offset="100%" stop-color=${w} stop-opacity="0.02" />
+          </linearGradient>
+        </defs>
+        <path class="area" d=${`${st(s, M)} ${E} Z`} fill=${`url(#${L})`} />`), x && _.forEach((v, O) => m[O] = x[O] + v);
+    }
+    if (k.push(
+      b`<path class="line" d=${st(s, M)} stroke=${w} pathLength="1" />`
+    ), c <= Gt && !r && k.push(
+      b`${M.map(([L, z]) => b`<circle class="point" cx=${L} cy=${z} r="3" fill=${w} />`)}`
+    ), o >= 0 && M[o]) {
+      const [L, z] = M[o];
+      k.push(b`<circle class="marker" cx=${L} cy=${z} r="5" fill=${w} />`);
+    }
+  }
+  const f = o >= 0 && !t.banded ? b`<line class="crosshair"
+          x1=${X(t, o)} y1=${h.y}
+          x2=${X(t, o)} y2=${h.y + h.height} />` : A;
+  return b`${y}${f}${k}`;
+}
+function mt(s, t) {
+  const { layout: e, active: a, colorOf: o } = s, { from: i, to: n, offset: r, thickness: h, outer: c, series: l, index: d } = t, u = n < i;
+  let m = V(e, i), y = V(e, n);
+  const k = 0.5, f = Math.sign(y - m) || 1;
+  i !== 0 && (m += k * f), c || (y -= k * f), Math.abs(y - m) < 1 && (y = m + f);
+  const g = Math.min(m, y), $ = Math.abs(y - m), _ = c ? e.horizontal ? u ? "left" : "right" : u ? "bottom" : "top" : "none", w = e.horizontal ? lt(g, r, $, h, ht, _) : lt(r, g, h, $, ht, _);
+  return b`<path
+    class=${`bar${u ? " negative" : ""}${e.horizontal ? " sideways" : ""}`}
+    d=${w}
+    fill=${o(l)}
+    data-series=${l}
+    data-index=${d}
+    opacity=${a === -1 || a === d ? 1 : 0.45}
+  />`;
+}
+function Vt(s) {
+  const { layout: t, series: e } = s, { box: a, count: o, horizontal: i, visible: n, marks: r } = t, h = n.filter((u) => r[u] === "bar");
+  if (h.length === 0 || o === 0) return A;
+  const l = (i ? a.height : a.width) / o * zt, d = [];
+  for (let u = 0; u < o; u += 1) {
+    const m = X(t, u);
+    if (s.stacked) {
+      const f = Math.max(2, Math.min(dt.stacked, l)), g = h.map((x) => N(e[x])[u] ?? 0), $ = ut(g, (x) => x > 0), _ = ut(g, (x) => x < 0);
+      let w = 0, p = 0;
+      g.forEach((x, M) => {
+        if (x === 0) return;
+        const L = x > 0 ? w : p, z = L + x;
+        x > 0 ? w = z : p = z, d.push(
+          mt(s, {
+            from: L,
+            to: z,
+            offset: m - f / 2,
+            thickness: f,
+            outer: M === (x > 0 ? $ : _),
+            series: h[M],
+            index: u
+          })
+        );
+      });
+      continue;
+    }
+    const y = Math.max(
+      2,
+      Math.min(dt.grouped, (l - et * (h.length - 1)) / h.length)
+    ), k = y * h.length + et * (h.length - 1);
+    h.forEach((f, g) => {
+      const $ = N(e[f])[u];
+      $ === void 0 || $ === 0 || d.push(
+        mt(s, {
+          from: 0,
+          to: $,
+          offset: m - k / 2 + g * (y + et),
+          thickness: y,
+          outer: !0,
+          series: f,
+          index: u
+        })
+      );
+    });
+  }
+  return b`${d}`;
+}
+function It(s) {
+  return b`
+    ${Tt(s)}
+    ${Vt(s)}
+    ${Rt(s)}
+    ${Et(s)}`;
+}
+function Xt(s) {
+  const { layout: t, series: e, active: a, stacked: o } = s, i = (c) => N(e[c])[a] ?? 0;
+  let n = t.ticks.min;
+  for (const c of ["bar", "area", "line"]) {
+    const l = t.visible.filter((u) => t.marks[u] === c).map(i);
+    if (l.length === 0) continue;
+    const d = o && c !== "line" ? l.filter((u) => u > 0).reduce((u, m) => u + m, 0) : Math.max(...l);
+    n = Math.max(n, d);
+  }
+  const r = X(t, a), h = V(t, Math.min(n, t.ticks.max));
+  return t.horizontal ? { x: h, y: r } : { x: r, y: h };
+}
+const Z = { top: 16, right: 16, bottom: 24 }, Nt = 12, Zt = 24, ft = 3, Ut = 4, Ht = 24, j = (s) => s?.points ?? [];
+function jt(s) {
+  return s.series.flatMap((t, e) => s.hidden.has(e) ? [] : j(t));
+}
+function pt(s) {
+  return s.length === 0 ? [0, 1] : [Math.min(...s), Math.max(...s)];
+}
+function Kt(s) {
+  const { width: t, height: e, measure: a, format: o, formatX: i, noAxis: n } = s, r = jt(s), h = Math.max(0, e - Z.top - Z.bottom), [c, l] = pt(r.map(($) => $.y)), d = Y(c, l, F(h, 48), { min: s.min, max: s.max }), u = n ? 0 : Math.max(0, ...d.values.map(($) => a(o($)))), m = n ? 4 : Math.ceil(u) + Nt, [y, k] = pt(r.map(($) => $.x)), f = Y(y, k, F(Math.max(0, t - m - Z.right), 96), {
+    min: null,
+    max: null
+  }), g = n ? Z.right : Math.max(Z.right, a(i(f.max)) / 2);
+  return {
+    box: {
+      x: m,
+      y: Z.top,
+      width: Math.max(0, t - m - g),
+      height: h
+    },
+    x: f,
+    y: d,
+    maxR: s.bubble ? Math.max(0, ...r.map(($) => $.r ?? 0)) : 0
+  };
+}
+function J(s, t) {
+  const { box: e } = s;
+  return [
+    I(t.x, s.x, e.x, e.x + e.width),
+    I(t.y, s.y, e.y + e.height, e.y)
+  ];
+}
+function qt(s, t) {
+  return s === void 0 || t <= 0 || s <= 0 ? ft : Math.max(ft, Zt * Math.sqrt(s / t));
+}
+function ot(s, t, e) {
+  return s.bubble ? qt(e.r, t.maxR) : Ut;
+}
+function Yt(s, t, e, a) {
+  let o = null, i = 1 / 0;
+  return s.series.forEach((n, r) => {
+    s.hidden.has(r) || j(n).forEach((h, c) => {
+      const [l, d] = J(t, h), u = Math.hypot(l - e, d - a), m = Math.max(Ht, ot(s, t, h) + 4);
+      u <= m && u < i && (o = { series: r, index: c }, i = u);
+    });
+  }), o;
+}
+function bt(s) {
+  const t = j(s);
+  return t.map((e, a) => a).sort((e, a) => t[e].x - t[a].x);
+}
+function Ft(s) {
+  const { layout: t, noGrid: e, noAxis: a, format: o, formatX: i, bubble: n, colorOf: r, active: h, activeSeries: c } = s, { box: l } = t, d = e ? A : b`
+      ${t.y.values.map((f) => {
+    const g = I(f, t.y, l.y + l.height, l.y);
+    return b`<line class="grid" x1=${l.x} y1=${g} x2=${l.x + l.width} y2=${g} />`;
+  })}
+      ${t.x.values.map((f) => {
+    const g = I(f, t.x, l.x, l.x + l.width);
+    return b`<line class="grid" x1=${g} y1=${l.y} x2=${g} y2=${l.y + l.height} />`;
+  })}`, u = a ? A : b`
+      ${t.y.values.map(
+    (f) => b`<text class="tick-label" x=${l.x - 8} y=${I(f, t.y, l.y + l.height, l.y)}
+            text-anchor="end" dominant-baseline="middle">${o(f)}</text>`
+  )}
+      ${t.x.values.map(
+    (f) => b`<text class="tick-label" x=${I(f, t.x, l.x, l.x + l.width)}
+            y=${l.y + l.height + 16} text-anchor="middle">${i(f)}</text>`
+  )}`, y = s.series.flatMap(
+    (f, g) => s.hidden.has(g) ? [] : j(f).map(($, _) => ({
+      point: $,
+      index: _,
+      seriesIndex: g,
+      radius: ot(s, t, $)
+    }))
+  ).sort((f, g) => g.radius - f.radius).map(({ point: f, index: g, seriesIndex: $, radius: _ }) => {
+    const [w, p] = J(t, f), x = r($);
+    return b`<circle
+      class="dot"
+      cx=${w}
+      cy=${p}
+      r=${_}
+      fill=${x}
+      fill-opacity=${n ? 0.55 : 0.85}
+      stroke=${n ? x : "var(--surface-card)"}
+      stroke-width=${n ? 1.5 : 2}
+      data-series=${$}
+      data-index=${g}
+    />`;
+  }), k = (() => {
+    const f = j(s.series[c])[h];
+    if (!f || s.hidden.has(c)) return A;
+    const [g, $] = J(t, f);
+    return b`<circle class="focus-ring" cx=${g} cy=${$}
+      r=${ot(s, t, f) + 4} fill="none" stroke=${r(c)} stroke-width="2" />`;
+  })();
+  return b`${d}${u}${y}${k}`;
+}
+const Wt = 8, Jt = 0.62, xt = 4, Q = 12;
+function Qt(s) {
+  const { width: t, height: e, kind: a, series: o, hidden: i, labels: n, measure: r } = s, h = t / 2, c = e / 2;
+  if (a === "radar") {
+    const w = o.flatMap(
+      (v, O) => i.has(O) ? [] : v.values ?? []
+    ), p = Math.min(0, ...w), x = Math.max(0, ...w), M = at(p, x === p ? p + 1 : x, xt), L = Math.min(Math.max(0, ...n.map(r)), t * 0.25) + Q, z = Math.max(0, Math.min(h - L, c - Q * 2)), E = Math.max(n.length, ...o.map((v) => v.values?.length ?? 0));
+    return {
+      cx: h,
+      cy: c,
+      outer: z,
+      inner: 0,
+      slices: Array.from({ length: E }, (v, O) => {
+        const K = O * U / Math.max(1, E);
+        return { index: O, value: 0, start: K, end: K, outer: z };
+      }),
+      ticks: M,
+      total: 0
+    };
+  }
+  const l = o[0]?.values ?? [], d = Math.max(n.length, l.length), u = (w) => i.has(w) ? 0 : Math.max(0, l[w] ?? 0), m = Array.from({ length: d }, (w, p) => u(p)).reduce(
+    (w, p) => w + p,
+    0
+  ), y = Math.max(0, Math.min(t, e) / 2 - Wt), k = Math.max(0, ...Array.from({ length: d }, (w, p) => u(p))), f = at(0, k || 1, xt), g = Array.from({ length: d }, (w, p) => p).filter(
+    (w) => !i.has(w)
+  ).length;
+  let $ = 0;
+  const _ = Array.from({ length: d }, (w, p) => {
+    const x = u(p), M = $;
+    return a === "polar-area" ? (i.has(p) || ($ += U / Math.max(1, g)), { index: p, value: x, start: M, end: $, outer: y * Math.sqrt(x / f.max) }) : ($ += m > 0 ? x / m * U : 0, { index: p, value: x, start: M, end: $, outer: y });
+  });
+  return { cx: h, cy: c, outer: y, inner: a === "doughnut" ? y * Jt : 0, slices: _, ticks: f, total: m };
+}
+function te(s, t, e, a) {
+  const o = e - s.cx, i = a - s.cy, n = Math.hypot(o, i);
+  let r = Math.atan2(o, -i);
+  if (r < 0 && (r += U), t === "radar") {
+    const c = s.slices.length;
+    return c === 0 || n > s.outer + Q * 2 ? -1 : Math.round(r / (U / c)) % c;
+  }
+  return n > s.outer || n < s.inner ? -1 : s.slices.find(
+    ({ start: c, end: l }) => l > c && r >= c && r < l
+  )?.index ?? -1;
+}
+function ee(s, t) {
+  const e = s.slices[t];
+  if (!e) return [s.cx, s.cy];
+  const a = (e.start + e.end) / 2, o = s.inner > 0 ? (s.inner + e.outer) / 2 : e.outer * 0.6;
+  return T(s.cx, s.cy, o, a);
+}
+function q(s, t) {
+  const { ticks: e, outer: a } = s;
+  return (t - e.min) / (e.max - e.min) * a;
+}
+function se(s) {
+  const { layout: t, active: e, sliceColor: a, kind: o, noGrid: i, format: n, centerLabel: r } = s, { cx: h, cy: c, inner: l, ticks: d } = t, u = o === "polar-area" && !i ? d.values.filter((f) => f > 0).map(
+    (f) => b`<circle class="grid" cx=${h} cy=${c} r=${t.outer * Math.sqrt(f / d.max)} fill="none" />`
+  ) : A, m = t.slices.filter((f) => f.end > f.start && f.outer > 0), y = m.map(
+    (f) => b`<path
+      class="slice"
+      d=${Ct(h, c, l, f.outer, f.start, f.end)}
+      fill=${a(f.index)}
+      fill-rule="evenodd"
+      stroke="var(--surface-card)"
+      stroke-width=${m.length > 1 ? 2 : 0}
+      stroke-linejoin="round"
+      data-index=${f.index}
+      opacity=${e === -1 || e === f.index ? 1 : 0.45}
+    />`
+  ), k = o === "doughnut" ? b`
+        <text class="center-value" x=${h} y=${c} text-anchor="middle" dominant-baseline="middle">${n(t.total)}</text>
+        ${l > 36 ? b`<text class="center-label" x=${h} y=${c + 20} text-anchor="middle" dominant-baseline="middle">${r}</text>` : A}` : A;
+  return b`${u}${y}${k}`;
+}
+function ae(s) {
+  const { layout: t, series: e, hidden: a, labels: o, colorOf: i, active: n, noGrid: r, noAxis: h, format: c } = s, { cx: l, cy: d, outer: u, ticks: m, slices: y } = t, k = y.map((p) => p.start), f = r ? A : b`
+      ${m.values.filter((p) => p > m.min).map((p) => {
+    const x = q(t, p);
+    return b`<path class="grid" fill="none" d=${`${H(k.map((M) => T(l, d, x, M)))} Z`} />`;
+  })}
+      ${k.map((p) => {
+    const [x, M] = T(l, d, u, p);
+    return b`<line class="grid" x1=${l} y1=${d} x2=${x} y2=${M} />`;
+  })}`, g = h ? A : m.values.filter((p) => p > m.min).map(
+    (p) => b`<text class="tick-label ring-label" x=${l + 4} y=${d - q(t, p) + 3} dominant-baseline="hanging">${c(p)}</text>`
+  ), $ = k.map((p, x) => {
+    const M = Math.sin(p), L = Math.cos(p), z = M > 0.1 ? "start" : M < -0.1 ? "end" : "middle", [E, v] = T(l, d, u + (Math.abs(L) > 0.5 ? 8 : Q), p), O = L > 0.5 ? "auto" : L < -0.5 ? "hanging" : "middle";
+    return b`<text class="axis-label" x=${E} y=${v} text-anchor=${z} dominant-baseline=${O}>${o[x] ?? ""}</text>`;
+  }), _ = e.map((p, x) => {
+    if (a.has(x)) return A;
+    const M = i(x), L = k.map(
+      (E, v) => T(l, d, q(t, p.values?.[v] ?? m.min), E)
+    ), z = n >= 0 && L[n] ? b`<circle class="marker" cx=${L[n][0]} cy=${L[n][1]} r="5" fill=${M} />` : A;
+    return b`
+      <path class="radar" d=${`${H(L)} Z`} stroke=${M} fill=${M} />
+      ${z}`;
+  }), w = n >= 0 && k[n] !== void 0 ? (() => {
+    const [p, x] = T(l, d, u, k[n]);
+    return b`<line class="crosshair" x1=${l} y1=${d} x2=${p} y2=${x} />`;
+  })() : A;
+  return b`${f}${w}${_}${g}${$}`;
+}
+function oe(s) {
+  return s.kind === "radar" ? ae(s) : se(s);
+}
+var ie = Object.defineProperty, C = (s, t, e, a) => {
+  for (var o = void 0, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (o = n(t, e, o) || o);
+  return o && ie(t, e, o), o;
 };
-const u = { top: 12, right: 4, bottom: 22, left: 4 }, G = 8;
-class a extends f {
+const $t = 8;
+class S extends rt {
   constructor() {
-    super(...arguments), this.tableId = C("kt-chart-table"), this.box = { width: 0, height: 0 }, this.active = -1, this.type = "area", this.series = [], this.labels = [], this.height = 200, this.format = (e) => String(e), this.noGrid = !1, this.showTable = !1, this.smooth = !1, this.label = "";
+    super(...arguments), this.tableId = Mt("kt-chart-table"), this.box = { width: 0, height: 0 }, this.active = -1, this.activeSeries = -1, this.hiddenSeries = /* @__PURE__ */ new Set(), this.type = "area", this.series = [], this.labels = [], this.height = 200, this.format = (t) => String(t), this.formatX = (t) => String(t), this.noGrid = !1, this.noAxis = !1, this.showTable = !1, this.smooth = !1, this.stacked = !1, this.horizontal = !1, this.min = null, this.max = null, this.centerLabel = "Total", this.totalLabel = "Total", this.label = "", this.colorOf = (t) => {
+      const e = this.series[t];
+      return e?.color ? e.color : this.series.length === 1 ? "var(--color-primary-base)" : `var(--chart-series-${t % $t + 1})`;
+    }, this.measure = (t) => {
+      if (this.measureContext === void 0)
+        try {
+          const e = document.createElement("canvas").getContext("2d"), a = getComputedStyle(this).getPropertyValue("--font-family-body").trim();
+          e && (e.font = `12px ${a || "sans-serif"}`), this.measureContext = e;
+        } catch {
+          this.measureContext = null;
+        }
+      return this.measureContext ? this.measureContext.measureText(t).width : t.length * 6.5;
+    }, this.sliceColor = (t) => `var(--chart-series-${t % $t + 1})`;
   }
   static {
     this.styles = [
-      f.styles,
-      F`
+      rt.styles,
+      gt`
       :host {
         display: block;
         position: relative;
@@ -30,6 +600,12 @@ class a extends f {
         display: block;
         width: 100%;
         overflow: visible;
+        border-radius: var(--border-radius);
+      }
+
+      svg:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 4px;
       }
 
       /* Recessive: the data is the loud part. */
@@ -39,10 +615,27 @@ class a extends f {
         opacity: 0.6;
       }
 
-      .axis-label {
+      .baseline {
+        stroke: var(--chart-axis);
+        stroke-width: 1;
+        opacity: 0.5;
+      }
+
+      .axis-label,
+      .tick-label {
         fill: var(--chart-axis);
         font: var(--font-normal-small);
         font-family: var(--font-family-body);
+        font-variant-numeric: tabular-nums;
+      }
+
+      /* Ring values sit on top of the marks; a halo of the surface keeps them
+         readable without boxing them in. */
+      .ring-label {
+        paint-order: stroke;
+        stroke: var(--surface-card);
+        stroke-width: 2px;
+        stroke-linejoin: round;
       }
 
       .line {
@@ -52,11 +645,89 @@ class a extends f {
         stroke-linejoin: round;
       }
 
+      .point,
       .marker {
         stroke: var(--surface-card);
         stroke-width: 2;
       }
 
+      .bar,
+      .slice {
+        transition: opacity var(--duration-fast) var(--easing-standard);
+      }
+
+      /* One entrance, when a mark first appears: bars grow from the baseline,
+         lines draw along their length, everything else fades in. Nothing
+         moves on hover, and the reduced-motion block in the token layer
+         zeroes the duration. Backwards fill, so the animation never holds a
+         value past its end — the dimming on hover stays in charge. */
+      .bar {
+        transform-box: fill-box;
+        transform-origin: 50% 100%;
+        animation: kt-chart-grow-y var(--duration-normal) var(--easing-standard) backwards;
+      }
+      .bar.negative {
+        transform-origin: 50% 0;
+      }
+      .bar.sideways {
+        transform-origin: 0 50%;
+        animation-name: kt-chart-grow-x;
+      }
+      .bar.sideways.negative {
+        transform-origin: 100% 50%;
+      }
+
+      .line {
+        stroke-dasharray: 1;
+        animation: kt-chart-draw var(--duration-normal) var(--easing-standard) backwards;
+      }
+
+      .area,
+      .point,
+      .dot,
+      .slice,
+      .radar {
+        animation: kt-chart-fade var(--duration-normal) var(--easing-standard) backwards;
+      }
+
+      @keyframes kt-chart-grow-y {
+        from {
+          transform: scaleY(0);
+        }
+      }
+      @keyframes kt-chart-grow-x {
+        from {
+          transform: scaleX(0);
+        }
+      }
+      @keyframes kt-chart-draw {
+        from {
+          stroke-dashoffset: 1;
+        }
+      }
+      @keyframes kt-chart-fade {
+        from {
+          opacity: 0;
+        }
+      }
+
+      .radar {
+        stroke-width: 2;
+        stroke-linejoin: round;
+        fill-opacity: 0.16;
+      }
+
+      .center-value {
+        fill: var(--text-body);
+        font: var(--font-title-h6);
+        font-variant-numeric: tabular-nums;
+      }
+
+      .center-label {
+        fill: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
       .crosshair {
         stroke: var(--chart-axis);
         stroke-width: 1;
@@ -77,8 +748,17 @@ class a extends f {
         border-radius: var(--border-radius);
         box-shadow: var(--shadow-toast);
         pointer-events: none;
+      }
+
+      .tooltip.above {
         transform: translate(-50%, calc(-100% - 12px));
       }
+      .tooltip.right {
+        transform: translate(12px, -50%);
+      }
+      .tooltip.left {
+        transform: translate(calc(-100% - 12px), -50%);
+      }
 
       .tooltip-row {
         display: flex;
@@ -88,24 +768,46 @@ class a extends f {
       }
 
       .swatch {
+        flex: none;
         width: 8px;
         height: 8px;
+        background: var(--swatch);
         border-radius: 2px;
       }
 
+      .swatch.hollow {
+        background: none;
+        box-shadow: inset 0 0 0 var(--border-width) var(--swatch);
+      }
+
       .tooltip-name {
         flex: 1;
         opacity: 0.75;
       }
 
+      .tooltip-subtitle {
+        margin-top: -2px;
+        opacity: 0.75;
+      }
+
       .tooltip-value {
         font-variant-numeric: tabular-nums;
       }
 
+      .tooltip-total {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        margin-top: 2px;
+        padding-top: 4px;
+        border-top: var(--border-width) solid color-mix(in srgb, currentColor 20%, transparent);
+        font-variant-numeric: tabular-nums;
+      }
+
       .legend {
         display: flex;
         flex-wrap: wrap;
-        gap: 14px;
+        gap: 4px 14px;
         margin-top: 10px;
       }
 
@@ -113,8 +815,27 @@ class a extends f {
         display: inline-flex;
         align-items: center;
         gap: 6px;
+        padding: 2px 0;
         color: var(--text-muted);
         font: var(--font-normal-small);
+        background: none;
+        border: none;
+        border-radius: var(--border-radius);
+        cursor: pointer;
+      }
+
+      .legend-item:hover {
+        color: var(--text-body);
+      }
+
+      .legend-item[aria-pressed='false'] {
+        text-decoration: line-through;
+        opacity: 0.6;
+      }
+
+      .legend-item:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
       }
 
       /* Present for assistive technology and for anyone who needs the
@@ -161,8 +882,8 @@ class a extends f {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.observer = new ResizeObserver(([e]) => {
-      e && (this.box = { width: e.contentRect.width, height: this.height });
+    super.connectedCallback(), this.observer = new ResizeObserver(([t]) => {
+      t && (this.box = { width: t.contentRect.width, height: this.height });
     });
   }
   firstUpdated() {
@@ -171,236 +892,502 @@ class a extends f {
   disconnectedCallback() {
     super.disconnectedCallback(), this.observer?.disconnect();
   }
-  colorFor(e, t) {
-    return t.color ? t.color : this.series.length === 1 ? "var(--color-primary-base)" : `var(--chart-series-${e % G + 1})`;
+  willUpdate(t) {
+    (t.has("series") || t.has("type") || t.has("labels")) && (this.hiddenSeries.size > 0 && (this.hiddenSeries = /* @__PURE__ */ new Set()), this.active >= this.pointCount && (this.active = -1, this.activeSeries = -1));
+  }
+  /* ------------------------------------------------------------- helpers */
+  get family() {
+    return this.type === "scatter" || this.type === "bubble" ? "point" : this.type === "pie" || this.type === "doughnut" || this.type === "polar-area" || this.type === "radar" ? "radial" : "cartesian";
   }
   get pointCount() {
-    return Math.max(0, ...this.series.map((e) => e.values.length));
+    return Math.max(this.labels.length, 0, ...this.series.map((t) => t.values?.length ?? 0));
   }
-  get bounds() {
-    const e = this.series.flatMap((i) => [...i.values]);
-    if (e.length === 0) return { min: 0, max: 1 };
-    const t = Math.max(...e, 0), o = Math.min(...e, 0);
-    return { min: o, max: t === o ? o + 1 : t };
+  get cartesianView() {
+    const t = {
+      width: this.box.width,
+      height: this.height,
+      series: this.series,
+      hidden: this.hiddenSeries,
+      labels: this.labels,
+      type: this.family === "cartesian" ? this.type : "line",
+      stacked: this.stacked,
+      horizontal: this.horizontal,
+      min: this.min,
+      max: this.max,
+      noAxis: this.noAxis,
+      measure: this.measure,
+      format: this.format
+    };
+    return {
+      ...t,
+      layout: Ot(t),
+      active: this.active,
+      smooth: this.smooth,
+      noGrid: this.noGrid,
+      colorOf: this.colorOf,
+      idPrefix: this.tableId
+    };
   }
-  get plotArea() {
+  get pointView() {
+    const t = {
+      width: this.box.width,
+      height: this.height,
+      series: this.series,
+      hidden: this.hiddenSeries,
+      bubble: this.type === "bubble",
+      min: this.min,
+      max: this.max,
+      noAxis: this.noAxis,
+      measure: this.measure,
+      format: this.format,
+      formatX: this.formatX
+    };
     return {
-      x: u.left,
-      y: u.top,
-      width: Math.max(0, this.box.width - u.left - u.right),
-      height: Math.max(0, this.height - u.top - u.bottom)
+      ...t,
+      layout: Kt(t),
+      active: this.active,
+      activeSeries: this.activeSeries,
+      noGrid: this.noGrid,
+      colorOf: this.colorOf
     };
   }
-  xFor(e) {
-    const t = this.plotArea, o = this.pointCount;
-    return o <= 1 ? t.x + t.width / 2 : t.x + e / (o - 1) * t.width;
+  /** Pie, doughnut and polar area: one series, whose slices are the labels. */
+  get sliced() {
+    return this.type === "pie" || this.type === "doughnut" || this.type === "polar-area";
   }
-  yFor(e) {
-    const t = this.plotArea, { min: o, max: i } = this.bounds;
-    return t.y + t.height - (e - o) / (i - o) * t.height;
+  get radialView() {
+    const t = {
+      width: this.box.width,
+      height: this.height,
+      kind: this.type,
+      series: this.series,
+      hidden: this.hiddenSeries,
+      labels: this.labels,
+      measure: this.measure
+    };
+    return {
+      ...t,
+      layout: Qt(t),
+      active: this.active,
+      noGrid: this.noGrid,
+      noAxis: this.noAxis,
+      centerLabel: this.centerLabel,
+      format: this.format,
+      colorOf: this.colorOf,
+      sliceColor: this.sliceColor
+    };
+  }
+  /** Whether there is anything to draw. */
+  get hasData() {
+    return this.family === "point" ? this.series.some((t) => (t.points?.length ?? 0) > 0) : this.pointCount > 0;
+  }
+  setActive(t, e = -1) {
+    t === this.active && e === this.activeSeries || (this.active = t, this.activeSeries = e, nt(this, "kt-point-hover", { index: t, series: e }));
+  }
+  /* --------------------------------------------------------- interaction */
+  onPointerMove(t) {
+    if (this.box.width !== 0) {
+      if (this.family === "cartesian") {
+        const e = _t(this.cartesianView.layout, t.offsetX, t.offsetY);
+        this.setActive(e);
+      } else if (this.family === "radial") {
+        const e = this.radialView;
+        this.setActive(te(e.layout, e.kind, t.offsetX, t.offsetY));
+      } else if (this.family === "point") {
+        const e = this.pointView, a = Yt(e, e.layout, t.offsetX, t.offsetY);
+        this.setActive(a?.index ?? -1, a?.series ?? -1);
+      }
+    }
+  }
+  onPointerLeave() {
+    this.setActive(-1);
+  }
+  /** How many positions the keyboard walks through, in order. */
+  get stops() {
+    const t = Array.from({ length: this.pointCount }, (e, a) => a);
+    return this.sliced ? t.filter((e) => !this.hiddenSeries.has(e)) : t;
   }
   /**
-   * A monotone cubic path — it never overshoots the samples, which a plain
-   * cardinal spline happily does, inventing peaks that are not in the data.
+   * Arrows walk the points, Home and End jump to the ends, Escape lets go.
+   * Every move emits `kt-point-hover` and opens the tooltip, which is a live
+   * region, so a keyboard user hears what a pointer user sees.
    */
-  pathFor(e) {
-    const t = e.map((i, s) => [this.xFor(s), this.yFor(i)]);
-    if (t.length === 0) return "";
-    if (t.length === 1 || !this.smooth)
-      return t.map(([i, s], r) => `${r === 0 ? "M" : "L"}${i},${s}`).join(" ");
-    let o = `M${t[0][0]},${t[0][1]}`;
-    for (let i = 0; i < t.length - 1; i += 1) {
-      const [s, r] = t[i], [d, v] = t[i + 1], x = (d - s) / 3;
-      o += ` C${s + x},${r} ${d - x},${v} ${d},${v}`;
+  onKeyDown(t) {
+    if (this.family === "point") {
+      this.onPointKeyDown(t);
+      return;
+    }
+    const e = this.stops;
+    if (e.length === 0) return;
+    const a = e.indexOf(this.active), o = e.length - 1, i = {
+      ArrowRight: a < 0 ? 0 : Math.min(a + 1, o),
+      ArrowDown: a < 0 ? 0 : Math.min(a + 1, o),
+      ArrowLeft: a < 0 ? 0 : Math.max(a - 1, 0),
+      ArrowUp: a < 0 ? 0 : Math.max(a - 1, 0),
+      Home: 0,
+      End: o
+    };
+    if (t.key === "Escape") {
+      this.setActive(-1);
+      return;
     }
-    return o;
+    const n = i[t.key];
+    n !== void 0 && (t.preventDefault(), this.setActive(e[n]));
   }
-  onPointerMove(e) {
-    const t = this.plotArea, o = this.pointCount;
-    if (o === 0 || t.width === 0) return;
-    const i = e.offsetX - t.x, s = Math.round(i / t.width * (o - 1)), r = Math.min(Math.max(s, 0), o - 1);
-    r !== this.active && (this.active = r, y(this, "kt-point-hover", { index: r }));
+  /**
+   * Scatter and bubble: left and right walk the current series in x order,
+   * up and down move to the neighbouring visible series.
+   */
+  onPointKeyDown(t) {
+    const e = this.series.map((c, l) => ({ index: l, count: c.points?.length ?? 0 })).filter(({ index: c, count: l }) => l > 0 && !this.hiddenSeries.has(c)).map(({ index: c }) => c);
+    if (e.length === 0) return;
+    if (t.key === "Escape") {
+      this.setActive(-1);
+      return;
+    }
+    const a = e.indexOf(this.activeSeries), o = a < 0 ? e[0] : this.activeSeries, i = bt(this.series[o]), n = a < 0 ? -1 : i.indexOf(this.active), r = i.length - 1, h = (c) => {
+      const l = e[Math.min(Math.max((a < 0 ? 0 : a) + c, 0), e.length - 1)];
+      this.setActive(bt(this.series[l])[0], l);
+    };
+    switch (t.key) {
+      case "ArrowRight":
+        this.setActive(i[n < 0 ? 0 : Math.min(n + 1, r)], o);
+        break;
+      case "ArrowLeft":
+        this.setActive(i[n < 0 ? 0 : Math.max(n - 1, 0)], o);
+        break;
+      case "ArrowDown":
+        h(a < 0 ? 0 : 1);
+        break;
+      case "ArrowUp":
+        h(a < 0 ? 0 : -1);
+        break;
+      case "Home":
+        this.setActive(i[0], o);
+        break;
+      case "End":
+        this.setActive(i[r], o);
+        break;
+      default:
+        return;
+    }
+    t.preventDefault();
   }
-  onPointerLeave() {
-    this.active !== -1 && (this.active = -1, y(this, "kt-point-hover", { index: -1 }));
-  }
-  renderGrid() {
-    if (this.noGrid) return h;
-    const e = this.plotArea;
-    return l`${[0, 0.25, 0.5, 0.75, 1].map((t) => {
-      const o = e.y + e.height * t;
-      return l`<line class="grid" x1=${e.x} y1=${o} x2=${e.x + e.width} y2=${o} />`;
-    })}`;
-  }
-  renderBars() {
-    const e = this.plotArea, t = this.pointCount, o = this.series.length, i = t > 0 ? e.width / t : 0, s = Math.max(2, i / o - 2), r = this.yFor(Math.max(0, this.bounds.min));
-    return l`${this.series.map(
-      (d, v) => d.values.map((x, m) => {
-        const $ = this.yFor(x), w = e.x + m * i + (i - s * o) / 2 + v * s, k = Math.max(1, r - $);
-        return l`<rect
-          x=${w} y=${$} width=${s} height=${k}
-          rx="4" ry="4"
-          fill=${this.colorFor(v, d)}
-          opacity=${this.active === -1 || this.active === m ? 1 : 0.45}
-        />`;
-      })
-    )}`;
+  toggle(t) {
+    const e = !this.hiddenSeries.has(t);
+    if (nt(this, "kt-series-toggle", { series: t, hidden: e }).defaultPrevented) return;
+    const a = new Set(this.hiddenSeries);
+    e ? a.add(t) : a.delete(t), this.hiddenSeries = a, this.setActive(-1);
   }
-  renderLines() {
-    const e = this.plotArea;
-    return l`${this.series.map((t, o) => {
-      const i = this.colorFor(o, t), s = this.pathFor(t.values), r = `${this.tableId}-fill-${o}`;
-      return l`
-        ${this.type === "area" ? l`
-              <defs>
-                <linearGradient id=${r} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stop-color=${i} stop-opacity="0.28" />
-                  <stop offset="100%" stop-color=${i} stop-opacity="0.02" />
-                </linearGradient>
-              </defs>
-              <path
-                d=${`${s} L${this.xFor(t.values.length - 1)},${e.y + e.height} L${this.xFor(0)},${e.y + e.height} Z`}
-                fill=${`url(#${r})`}
-              />` : h}
-        <path class="line" d=${s} stroke=${i} />
-        ${this.active >= 0 && t.values[this.active] !== void 0 ? l`<circle
-                class="marker"
-                cx=${this.xFor(this.active)}
-                cy=${this.yFor(t.values[this.active])}
-                r="5"
-                fill=${i}
-              />` : h}`;
-    })}`;
-  }
-  renderAxis() {
-    const e = this.plotArea, t = this.pointCount, o = Math.max(1, Math.ceil(t / Math.max(1, Math.floor(e.width / 56))));
-    return l`${this.labels.map(
-      (i, s) => s % o === 0 ? l`<text
-            class="axis-label"
-            x=${this.xFor(s)}
-            y=${e.y + e.height + 16}
-            text-anchor="middle"
-          >${i}</text>` : h
-    )}`;
+  /* ----------------------------------------------------------- rendering */
+  renderMarks() {
+    return this.family === "cartesian" ? It(this.cartesianView) : this.family === "point" ? Ft(this.pointView) : oe(this.radialView);
+  }
+  get tooltip() {
+    if (this.active < 0 || this.box.width === 0) return null;
+    if (this.family === "cartesian") {
+      const t = this.cartesianView, e = t.layout.visible.map((r) => ({
+        color: this.colorOf(r),
+        name: this.series[r].name,
+        value: this.format(this.series[r].values?.[this.active] ?? 0)
+      })), { x: a, y: o } = Xt(t), i = t.layout.visible.filter(
+        (r) => this.stacked && t.layout.marks[r] !== "line"
+      ), n = i.length > 1 ? this.format(
+        i.reduce(
+          (r, h) => r + (this.series[h].values?.[this.active] ?? 0),
+          0
+        )
+      ) : void 0;
+      return {
+        title: this.labels[this.active] ?? `#${this.active + 1}`,
+        rows: e,
+        ...n === void 0 ? {} : { total: n },
+        x: a,
+        y: o,
+        side: t.layout.horizontal ? "right" : "above"
+      };
+    }
+    if (this.sliced) {
+      const t = this.radialView.layout, e = this.series[0]?.values?.[this.active] ?? 0, a = t.total > 0 ? Math.round(Math.max(0, e) / t.total * 100) : 0, [o, i] = ee(t, this.active);
+      return {
+        title: this.labels[this.active] ?? `#${this.active + 1}`,
+        rows: [
+          {
+            color: this.sliceColor(this.active),
+            name: this.series[0]?.name ?? "",
+            value: `${this.format(e)} (${a}%)`
+          }
+        ],
+        x: o,
+        y: i,
+        side: "above"
+      };
+    }
+    if (this.type === "radar") {
+      const t = this.radialView.layout, e = this.series.map((r, h) => h).filter((r) => !this.hiddenSeries.has(r)), a = Math.max(
+        t.ticks.min,
+        ...e.map((r) => this.series[r].values?.[this.active] ?? t.ticks.min)
+      ), o = t.slices[this.active]?.start ?? 0, [i, n] = T(t.cx, t.cy, q(t, a), o);
+      return {
+        title: this.labels[this.active] ?? `#${this.active + 1}`,
+        rows: e.map((r) => ({
+          color: this.colorOf(r),
+          name: this.series[r].name,
+          value: this.format(this.series[r].values?.[this.active] ?? 0)
+        })),
+        x: i,
+        y: n,
+        side: "above"
+      };
+    }
+    if (this.family === "point") {
+      const t = this.series[this.activeSeries], e = t?.points?.[this.active];
+      if (!t || !e) return null;
+      const [a, o] = J(this.pointView.layout, e), i = this.colorOf(this.activeSeries), n = [
+        { color: i, name: "x", value: this.formatX(e.x) },
+        { color: i, name: "y", value: this.format(e.y) }
+      ];
+      return this.type === "bubble" && e.r !== void 0 && n.push({ color: i, name: "r", value: String(e.r) }), {
+        title: e.label ?? t.name,
+        ...e.label ? { subtitle: t.name } : {},
+        rows: n,
+        x: a,
+        y: o,
+        side: "above"
+      };
+    }
+    return null;
   }
   renderTooltip() {
-    return this.active < 0 || this.box.width === 0 ? h : c`<div
-      class="tooltip"
-      style=${`left:${this.xFor(this.active)}px;top:${this.plotArea.y + this.plotArea.height}px`}
-      role="status"
-    >
-      <strong>${this.labels[this.active] ?? `#${this.active + 1}`}</strong>
-      ${this.series.map(
-      (e, t) => c`<span class="tooltip-row">
-            <span class="swatch" style=${`background:${this.colorFor(t, e)}`}></span>
-            <span class="tooltip-name">${e.name}</span>
-            <span class="tooltip-value">${this.format(e.values[this.active] ?? 0)}</span>
+    const t = this.tooltip;
+    if (!t) return A;
+    const e = 36 + t.rows.length * 20 + (t.total ? 24 : 0), a = 20;
+    let o = t.side, i = t.x, n = t.y;
+    return o === "above" && t.y - e < 0 && (o = "right", i = t.x + a), o === "right" && i + 180 > this.box.width && (o = "left", i = t.x - (t.side === "above" ? a : 0)), o === "above" ? i = Math.min(Math.max(i, 72), Math.max(72, this.box.width - 72)) : n = Math.min(
+      Math.max(n, e / 2),
+      Math.max(e / 2, this.height - e / 2)
+    ), G`<div class=${`tooltip ${o}`} style=${`left:${i}px;top:${n}px`} role="status">
+      <strong>${t.title}</strong>
+      ${t.subtitle ? G`<span class="tooltip-subtitle">${t.subtitle}</span>` : A}
+      ${t.rows.map(
+      (r) => G`<span class="tooltip-row">
+            <span class="swatch" style=${`--swatch:${r.color}`}></span>
+            <span class="tooltip-name">${r.name}</span>
+            <span class="tooltip-value">${r.value}</span>
           </span>`
     )}
+      ${t.total ? G`<span class="tooltip-total"
+              ><span>${this.totalLabel}</span><span>${t.total}</span></span
+            >` : A}
+    </div>`;
+  }
+  renderLegend() {
+    const t = this.sliced ? Array.from({ length: this.pointCount }, (e, a) => ({
+      name: this.labels[a] ?? `#${a + 1}`,
+      color: this.sliceColor(a)
+    })) : this.series.map((e, a) => ({ name: e.name, color: this.colorOf(a) }));
+    return t.length === 0 || !this.sliced && t.length < 2 ? A : G`<div part="legend" class="legend">
+      ${t.map((e, a) => {
+      const o = this.hiddenSeries.has(a);
+      return G`<button
+          type="button"
+          class="legend-item"
+          aria-pressed=${o ? "false" : "true"}
+          @click=${() => this.toggle(a)}
+        >
+          <span
+            class=${kt({ swatch: !0, hollow: o })}
+            style=${`--swatch:${e.color}`}
+          ></span>
+          ${e.name}
+        </button>`;
+    })}
+    </div>`;
+  }
+  renderPointTable() {
+    const t = this.type === "bubble";
+    return G`<div part="table" class="table" id=${this.tableId}>
+      <table>
+        <caption>
+          ${this.label || "Chart data"}
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">Series</th>
+            <th scope="col">Point</th>
+            <th scope="col">x</th>
+            <th scope="col">y</th>
+            ${t ? G`<th scope="col">r</th>` : A}
+          </tr>
+        </thead>
+        <tbody>
+          ${this.series.flatMap(
+      (e) => (e.points ?? []).map(
+        (a, o) => G`<tr>
+                  <th scope="row">${e.name}</th>
+                  <td>${a.label ?? `#${o + 1}`}</td>
+                  <td>${this.formatX(a.x)}</td>
+                  <td>${this.format(a.y)}</td>
+                  ${t ? G`<td>${a.r ?? ""}</td>` : A}
+                </tr>`
+      )
+    )}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  renderSliceTable() {
+    const t = this.series[0]?.values ?? [], e = t.reduce((a, o) => a + Math.max(0, o), 0);
+    return G`<div part="table" class="table" id=${this.tableId}>
+      <table>
+        <caption>
+          ${this.label || "Chart data"}
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">Slice</th>
+            <th scope="col">${this.series[0]?.name ?? "Value"}</th>
+            <th scope="col">Share</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${Array.from({ length: this.pointCount }, (a, o) => {
+      const i = t[o] ?? 0, n = e > 0 ? Math.round(Math.max(0, i) / e * 100) : 0;
+      return G`<tr>
+              <th scope="row">${this.labels[o] ?? `#${o + 1}`}</th>
+              <td>${this.format(i)}</td>
+              <td>${n}%</td>
+            </tr>`;
+    })}
+        </tbody>
+      </table>
+    </div>`;
+  }
+  renderTable() {
+    if (this.family === "point") return this.renderPointTable();
+    if (this.sliced) return this.renderSliceTable();
+    const t = this.family === "cartesian" && this.stacked && this.series.length > 1, e = (a) => this.series.reduce(
+      (o, i) => o + (i.type === "line" ? 0 : i.values?.[a] ?? 0),
+      0
+    );
+    return G`<div part="table" class="table" id=${this.tableId}>
+      <table>
+        <caption>
+          ${this.label || "Chart data"}
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">Point</th>
+            ${this.series.map((a) => G`<th scope="col">${a.name}</th>`)}
+            ${t ? G`<th scope="col">${this.totalLabel}</th>` : A}
+          </tr>
+        </thead>
+        <tbody>
+          ${Array.from(
+      { length: this.pointCount },
+      (a, o) => G`<tr>
+                <th scope="row">${this.labels[o] ?? `#${o + 1}`}</th>
+                ${this.series.map(
+        (i) => G`<td>${this.format(i.values?.[o] ?? 0)}</td>`
+      )}
+                ${t ? G`<td>${this.format(e(o))}</td>` : A}
+              </tr>`
+    )}
+        </tbody>
+      </table>
     </div>`;
   }
   render() {
-    const e = this.plotArea, t = this.box.width > 0 && this.pointCount > 0;
-    return c`<div class="plot" style=${`height:${this.height}px`}>
+    const t = this.box.width > 0 && this.hasData;
+    return G`<div class="plot" style=${`height:${this.height}px`}>
         <svg
           part="svg"
           width=${this.box.width}
           height=${this.height}
           role="img"
-          aria-label=${this.label || h}
+          aria-label=${this.label || A}
           aria-describedby=${this.tableId}
+          tabindex="0"
           @pointermove=${this.onPointerMove}
           @pointerleave=${this.onPointerLeave}
+          @keydown=${this.onKeyDown}
+          @blur=${this.onPointerLeave}
         >
-          ${t ? this.renderGrid() : h}
-          ${t && this.type === "bar" ? this.renderBars() : h}
-          ${t && this.type !== "bar" ? this.renderLines() : h}
-          ${t && this.active >= 0 && this.type !== "bar" ? l`<line
-              class="crosshair"
-              x1=${this.xFor(this.active)} y1=${e.y}
-              x2=${this.xFor(this.active)} y2=${e.y + e.height}
-            />` : h}
-          ${t ? this.renderAxis() : h}
+          ${t ? this.renderMarks() : A}
         </svg>
         ${this.renderTooltip()}
       </div>
-
-      ${this.series.length > 1 ? c`<div part="legend" class="legend">
-              ${this.series.map(
-      (o, i) => c`<span class="legend-item">
-                    <span
-                      class="swatch"
-                      style=${`background:${this.colorFor(i, o)}`}
-                    ></span>
-                    ${o.name}
-                  </span>`
-    )}
-            </div>` : h}
-
-      <div part="table" class="table" id=${this.tableId}>
-        <table>
-          <caption>
-            ${this.label || "Chart data"}
-          </caption>
-          <thead>
-            <tr>
-              <th scope="col">Point</th>
-              ${this.series.map((o) => c`<th scope="col">${o.name}</th>`)}
-            </tr>
-          </thead>
-          <tbody>
-            ${Array.from(
-      { length: this.pointCount },
-      (o, i) => c`<tr>
-                  <th scope="row">${this.labels[i] ?? `#${i + 1}`}</th>
-                  ${this.series.map(
-        (s) => c`<td>${this.format(s.values[i] ?? 0)}</td>`
-      )}
-                </tr>`
-    )}
-          </tbody>
-        </table>
-      </div>`;
-  }
-}
-n([
-  M(".plot")
-], a.prototype, "plot");
-n([
-  g()
-], a.prototype, "box");
-n([
-  g()
-], a.prototype, "active");
-n([
-  p({ type: String, reflect: !0 })
-], a.prototype, "type");
-n([
-  p({ attribute: !1 })
-], a.prototype, "series");
-n([
-  p({ attribute: !1 })
-], a.prototype, "labels");
-n([
-  p({ type: Number })
-], a.prototype, "height");
-n([
-  p({ attribute: !1 })
-], a.prototype, "format");
-n([
-  p({ type: Boolean, attribute: "no-grid" })
-], a.prototype, "noGrid");
-n([
-  p({ type: Boolean, reflect: !0, attribute: "show-table" })
-], a.prototype, "showTable");
-n([
-  p({ type: Boolean })
-], a.prototype, "smooth");
-n([
-  p({ type: String })
-], a.prototype, "label");
-A("kt-chart", a);
+      ${this.renderLegend()} ${this.renderTable()}`;
+  }
+}
+C([
+  vt(".plot")
+], S.prototype, "plot");
+C([
+  tt()
+], S.prototype, "box");
+C([
+  tt()
+], S.prototype, "active");
+C([
+  tt()
+], S.prototype, "activeSeries");
+C([
+  tt()
+], S.prototype, "hiddenSeries");
+C([
+  B({ type: String, reflect: !0 })
+], S.prototype, "type");
+C([
+  B({ attribute: !1 })
+], S.prototype, "series");
+C([
+  B({ attribute: !1 })
+], S.prototype, "labels");
+C([
+  B({ type: Number })
+], S.prototype, "height");
+C([
+  B({ attribute: !1 })
+], S.prototype, "format");
+C([
+  B({ attribute: !1 })
+], S.prototype, "formatX");
+C([
+  B({ type: Boolean, attribute: "no-grid" })
+], S.prototype, "noGrid");
+C([
+  B({ type: Boolean, attribute: "no-axis" })
+], S.prototype, "noAxis");
+C([
+  B({ type: Boolean, reflect: !0, attribute: "show-table" })
+], S.prototype, "showTable");
+C([
+  B({ type: Boolean })
+], S.prototype, "smooth");
+C([
+  B({ type: Boolean })
+], S.prototype, "stacked");
+C([
+  B({ type: Boolean })
+], S.prototype, "horizontal");
+C([
+  B({ type: Number })
+], S.prototype, "min");
+C([
+  B({ type: Number })
+], S.prototype, "max");
+C([
+  B({ type: String, attribute: "center-label" })
+], S.prototype, "centerLabel");
+C([
+  B({ type: String, attribute: "total-label" })
+], S.prototype, "totalLabel");
+C([
+  B({ type: String })
+], S.prototype, "label");
+wt("kt-chart", S);
 export {
-  a as KtChart
+  S as KtChart
 };
 //# sourceMappingURL=kt-chart.js.map