kanto-ds 1.3.0 → 1.5.1

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

@@ -1,9 +1,9 @@
 import { svg as b, nothing as A, css as vt, html as G } from "lit";
 import { query as kt, state as et, property as B } from "lit/decorators.js";
 import { classMap as wt } from "lit/directives/class-map.js";
-import { K as nt, d as Mt } from "../../../chunks/kt-element-mdd5cXZX.js";
-import { u as At, e as lt } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as I } from "../../../chunks/index-fzPIgxe2.js";
+import { K as nt, d as Mt } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { u as At, e as lt } from "../../../chunks/events-r51msXNf.js";
+import { s as E } from "../../../chunks/index-STEEvEP7.js";
 function St(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;
@@ -51,7 +51,7 @@ function X(s, t, e, a) {
 function W(s, t) {
   return Math.min(6, Math.max(3, Math.round(s / t)));
 }
-const H = Math.PI * 2, R = (s) => Math.round(s * 100) / 100 || 0, P = ([s, t]) => `${R(s)},${R(t)}`;
+const H = Math.PI * 2, V = (s) => Math.round(s * 100) / 100 || 0, P = ([s, t]) => `${V(s)},${V(t)}`;
 function j(s, t = !0) {
   return s.map((e, a) => `${a === 0 && t ? "M" : "L"}${P(e)}`).join(" ");
 }
@@ -93,7 +93,7 @@ function Ct(s, t = !0) {
     ...Pt(s).map(({ c1: a, c2: o, to: i }) => `C${P(a)} ${P(o)} ${P(i)}`)
   ].join(" ");
 }
-function E(s, t, e, a) {
+function D(s, t, e, a) {
   return [s + e * Math.sin(a), t - e * Math.cos(a)];
 }
 function Ot(s, t, e, a, o, i) {
@@ -101,22 +101,22 @@ function Ot(s, t, e, a, o, i) {
   if (n <= 0 || a <= 0) return "";
   if (n >= H - 1e-6) {
     const l = (d, u) => {
-      const m = E(s, t, d, 0), y = E(s, t, d, Math.PI), k = `A${R(d)},${R(d)} 0 1 ${u}`;
+      const m = D(s, t, d, 0), y = D(s, t, d, Math.PI), k = `A${V(d)},${V(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(E(s, t, a, i))}`;
+  const r = n > Math.PI ? 1 : 0, h = `A${V(a)},${V(a)} 0 ${r} 1 ${P(D(s, t, a, i))}`;
   if (e <= 0)
-    return `M${P([s, t])} L${P(E(s, t, a, o))} ${h} Z`;
-  const c = `A${R(e)},${R(e)} 0 ${r} 0 ${P(E(s, t, e, o))}`;
-  return `M${P(E(s, t, a, o))} ${h} L${P(E(s, t, e, i))} ${c} Z`;
+    return `M${P([s, t])} L${P(D(s, t, a, o))} ${h} Z`;
+  const c = `A${V(e)},${V(e)} 0 ${r} 0 ${P(D(s, t, e, o))}`;
+  return `M${P(D(s, t, a, o))} ${h} L${P(D(s, t, e, i))} ${c} Z`;
 }
 function ct(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)}`;
+  ), [h, c, l, d] = [s, t, s + e, t + a], u = (y) => `A${V(r)},${V(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) {
@@ -130,16 +130,16 @@ function ct(s, t, e, a, o, i) {
       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 }, J = 12, ht = { vertical: 48, horizontal: 96 }, Z = (s) => s?.values ?? [];
+const R = { top: 12, right: 8, bottom: 24 }, J = 12, ht = { vertical: 48, horizontal: 96 }, Z = (s) => s?.values ?? [];
 function _t(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) => Z(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) => Z(t[O])), f = s.stacked ? [k("bar"), k("area")].filter((v) => v.length) : [], g = s.stacked ? k("line") : l.map((v) => Z(t[v])), x = d.length > 0 ? d.some((v) => v !== "line") : s.type !== "line", { lo: _, hi: w } = Lt(f, g, { includeZero: x }), p = { min: s.min, max: s.max };
   if (!y) {
-    const v = Math.max(0, h - D.top - D.bottom), O = F(_, w, W(v, ht.vertical), p), q = n ? 0 : Math.max(0, ...O.values.map((gt) => o(i(gt)))), rt = n ? 4 : Math.ceil(q) + J;
+    const v = Math.max(0, h - R.top - R.bottom), O = F(_, w, W(v, ht.vertical), p), q = n ? 0 : Math.max(0, ...O.values.map((gt) => o(i(gt)))), rt = n ? 4 : Math.ceil(q) + J;
     return {
       box: {
         x: rt,
-        y: D.top,
-        width: Math.max(0, r - rt - D.right),
+        y: R.top,
+        width: Math.max(0, r - rt - R.right),
         height: v
       },
       ticks: O,
@@ -150,13 +150,13 @@ function _t(s) {
       visible: l
     };
   }
-  const $ = Math.max(0, ...a.map(o)), M = Math.ceil(Math.min($, r * 0.4)) + J, L = Math.max(0, r - M - D.right), z = F(_, w, W(L, ht.horizontal), p), T = n ? D.right : Math.max(D.right, o(i(z.max)) / 2);
+  const $ = Math.max(0, ...a.map(o)), M = Math.ceil(Math.min($, r * 0.4)) + J, L = Math.max(0, r - M - R.right), z = F(_, w, W(L, ht.horizontal), p), T = n ? R.right : Math.max(R.right, o(i(z.max)) / 2);
   return {
     box: {
       x: M,
-      y: D.top,
+      y: R.top,
       width: Math.max(0, r - M - T),
-      height: Math.max(0, h - D.top - (n ? 4 : D.bottom))
+      height: Math.max(0, h - R.top - (n ? 4 : R.bottom))
     },
     ticks: z,
     count: u,
@@ -170,7 +170,7 @@ function N(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) {
+function I(s, t) {
   const { box: e, ticks: a, horizontal: o } = s;
   return o ? X(t, a, e.x, e.x + e.width) : X(t, a, e.y + e.height, e.y);
 }
@@ -188,26 +188,26 @@ function mt(s, t) {
     if (t(s[e])) return e;
   return -1;
 }
-function Et(s, t, e) {
+function Dt(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) {
+function Et(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);
+    const u = I(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);
+    const d = I(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);
+    const u = I(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 Dt(s) {
+function Tt(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))));
@@ -218,7 +218,7 @@ function Dt(s) {
             y=${N(t, u)}
             text-anchor="end"
             dominant-baseline="middle"
-          >${Et(d, o.x - J, a)}</text>` : A
+          >${Dt(d, o.x - J, a)}</text>` : A
     )}`;
   }
   const h = Math.max(0, ...e.map(a)) + J, c = Math.max(1, Math.ceil(i / Math.max(1, Math.floor(o.width / h))));
@@ -236,14 +236,14 @@ function Dt(s) {
 function Rt(s, t, e) {
   return t.map((a, o) => [
     N(s.layout, o),
-    V(s.layout, a + (e?.[o] ?? 0))
+    I(s.layout, a + (e?.[o] ?? 0))
   ]);
 }
 function at(s, t, e = !0) {
   return s.smooth ? Ct(t, e) : j(t, e);
 }
 function Vt(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 = [];
+  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 = I(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 x = d[g];
     if (x === "bar") continue;
@@ -251,7 +251,7 @@ function Vt(s) {
     if (_.length === 0) continue;
     const w = a(g), $ = x === "area" && n ? [...m] : void 0, M = Rt(s, _, $);
     if (x === "area") {
-      const L = `${i}-fill-${g}`, z = $ ? _.map((v, O) => [N(t, O), V(t, $[O])]) : [
+      const L = `${i}-fill-${g}`, z = $ ? _.map((v, O) => [N(t, O), I(t, $[O])]) : [
         [M.at(-1)[0], u],
         [M[0][0], u]
       ], T = $ ? at(s, [...z].reverse(), !1) : j(z, !1);
@@ -280,7 +280,7 @@ function Vt(s) {
 }
 function ft(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);
+  let m = I(e, i), y = I(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), x = Math.abs(y - m), _ = c ? e.horizontal ? u ? "left" : "right" : u ? "bottom" : "top" : "none", w = e.horizontal ? ct(g, r, x, h, dt, _) : ct(r, g, h, x, dt, _);
@@ -342,10 +342,10 @@ function It(s) {
 }
 function Xt(s) {
   return b`
-    ${Tt(s)}
+    ${Et(s)}
     ${It(s)}
     ${Vt(s)}
-    ${Dt(s)}`;
+    ${Tt(s)}`;
 }
 function Nt(s) {
   const { layout: t, series: e, active: a, stacked: o } = s, i = (c) => Z(e[c])[a] ?? 0;
@@ -356,7 +356,7 @@ function Nt(s) {
     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 = N(t, a), h = V(t, Math.min(n, t.ticks.max));
+  const r = N(t, a), h = I(t, Math.min(n, t.ticks.max));
   return t.horizontal ? { x: h, y: r } : { x: r, y: h };
 }
 const U = { top: 16, right: 16, bottom: 24 }, Zt = 12, Ut = 24, pt = 3, Ht = 4, jt = 24, K = (s) => s?.points ?? [];
@@ -504,7 +504,7 @@ function se(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 E(s.cx, s.cy, o, a);
+  return D(s.cx, s.cy, o, a);
 }
 function Y(s, t) {
   const { ticks: e, outer: a } = s;
@@ -534,26 +534,26 @@ function oe(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 $ = Y(t, p);
-    return b`<path class="grid" fill="none" d=${`${j(k.map((M) => E(l, d, $, M)))} Z`} />`;
+    return b`<path class="grid" fill="none" d=${`${j(k.map((M) => D(l, d, $, M)))} Z`} />`;
   })}
       ${k.map((p) => {
-    const [$, M] = E(l, d, u, p);
+    const [$, M] = D(l, d, u, p);
     return b`<line class="grid" x1=${l} y1=${d} x2=${$} 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 - Y(t, p) + 3} dominant-baseline="hanging">${c(p)}</text>`
   ), x = k.map((p, $) => {
-    const M = Math.sin(p), L = Math.cos(p), z = M > 0.1 ? "start" : M < -0.1 ? "end" : "middle", [T, v] = E(l, d, u + (Math.abs(L) > 0.5 ? 8 : tt), p), O = L > 0.5 ? "auto" : L < -0.5 ? "hanging" : "middle";
+    const M = Math.sin(p), L = Math.cos(p), z = M > 0.1 ? "start" : M < -0.1 ? "end" : "middle", [T, v] = D(l, d, u + (Math.abs(L) > 0.5 ? 8 : tt), p), O = L > 0.5 ? "auto" : L < -0.5 ? "hanging" : "middle";
     return b`<text class="axis-label" x=${T} y=${v} text-anchor=${z} dominant-baseline=${O}>${o[$] ?? ""}</text>`;
   }), _ = e.map((p, $) => {
     if (a.has($)) return A;
     const M = i($), L = k.map(
-      (T, v) => E(l, d, Y(t, p.values?.[v] ?? m.min), T)
+      (T, v) => D(l, d, Y(t, p.values?.[v] ?? m.min), T)
     ), 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=${`${j(L)} Z`} stroke=${M} fill=${M} />
       ${z}`;
   }), w = n >= 0 && k[n] !== void 0 ? (() => {
-    const [p, $] = E(l, d, u, k[n]);
+    const [p, $] = D(l, d, u, k[n]);
     return b`<line class="crosshair" x1=${l} y1=${d} x2=${p} y2=${$} />`;
   })() : A;
   return b`${f}${w}${_}${g}${x}`;
@@ -972,7 +972,7 @@ class S extends nt {
       active: this.active,
       noGrid: this.noGrid,
       noAxis: this.noAxis,
-      centerLabel: this.centerLabel ?? I().total,
+      centerLabel: this.centerLabel ?? E().total,
       format: this.format,
       colorOf: this.colorOf,
       sliceColor: this.sliceColor
@@ -1128,7 +1128,7 @@ class S extends nt {
       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] = E(t.cx, t.cy, Y(t, a), o);
+      ), o = t.slices[this.active]?.start ?? 0, [i, n] = D(t.cx, t.cy, Y(t, a), o);
       return {
         title: this.labels[this.active] ?? `#${this.active + 1}`,
         rows: e.map((r) => ({
@@ -1178,7 +1178,7 @@ class S extends nt {
           </span>`
     )}
       ${t.total ? G`<span class="tooltip-total"
-              ><span>${this.totalLabel ?? I().total}</span><span>${t.total}</span></span
+              ><span>${this.totalLabel ?? E().total}</span><span>${t.total}</span></span
             >` : A}
     </div>`;
   }
@@ -1210,12 +1210,12 @@ class S extends nt {
     return G`<div part="table" class="table" id=${this.tableId}>
       <table>
         <caption>
-          ${this.label || "Chart data"}
+          ${this.label || E().chartData}
         </caption>
         <thead>
           <tr>
-            <th scope="col">${I().chartSeries}</th>
-            <th scope="col">${I().chartPoint}</th>
+            <th scope="col">${E().chartSeries}</th>
+            <th scope="col">${E().chartPoint}</th>
             <th scope="col">x</th>
             <th scope="col">y</th>
             ${t ? G`<th scope="col">r</th>` : A}
@@ -1242,13 +1242,13 @@ class S extends nt {
     return G`<div part="table" class="table" id=${this.tableId}>
       <table>
         <caption>
-          ${this.label || "Chart data"}
+          ${this.label || E().chartData}
         </caption>
         <thead>
           <tr>
-            <th scope="col">${I().chartSlice}</th>
-            <th scope="col">${this.series[0]?.name ?? "Value"}</th>
-            <th scope="col">${I().chartShare}</th>
+            <th scope="col">${E().chartSlice}</th>
+            <th scope="col">${this.series[0]?.name ?? E().chartValue}</th>
+            <th scope="col">${E().chartShare}</th>
           </tr>
         </thead>
         <tbody>
@@ -1274,13 +1274,13 @@ class S extends nt {
     return G`<div part="table" class="table" id=${this.tableId}>
       <table>
         <caption>
-          ${this.label || "Chart data"}
+          ${this.label || E().chartData}
         </caption>
         <thead>
           <tr>
-            <th scope="col">${I().chartPoint}</th>
+            <th scope="col">${E().chartPoint}</th>
             ${this.series.map((a) => G`<th scope="col">${a.name}</th>`)}
-            ${t ? G`<th scope="col">${this.totalLabel ?? I().total}</th>` : A}
+            ${t ? G`<th scope="col">${this.totalLabel ?? E().total}</th>` : A}
           </tr>
         </thead>
         <tbody>