@editora/ui-core 0.1.19 → 0.1.21

package/dist/chart.esm.js

@@ -1,4 +1,4 @@
-import { E as Y } from "./ElementBase-909688f3.mjs";
+import { E as Y } from "./ElementBase-YlTLMsGk.mjs";
 const V = 180, Z = `
   :host {
     --ui-chart-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
@@ -622,7 +622,7 @@ const V = 180, Z = `
   "var(--ui-color-info, #0891b2)",
   "var(--ui-color-accent, #7c3aed)"
 ];
-function u(p) {
+function c(p) {
   return p.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 function M(p, t, e) {
@@ -631,31 +631,30 @@ function M(p, t, e) {
 function J(p, t, e) {
   if (p)
     try {
-      const r = JSON.parse(p);
-      if (Array.isArray(r))
-        return r.map((n, o) => {
-          if (typeof n == "number")
-            return Number.isFinite(n) ? { label: String(o + 1), value: n } : null;
-          if (n && typeof n == "object") {
-            const i = Number(n.value);
-            if (!Number.isFinite(i))
-              return null;
-            const c = n.label, d = n.tone;
+      const i = JSON.parse(p);
+      if (Array.isArray(i))
+        return i.map((o, s) => {
+          if (typeof o == "number")
+            return Number.isFinite(o) ? { label: String(s + 1), value: o } : null;
+          if (o && typeof o == "object") {
+            const n = Number(o.value);
+            if (!Number.isFinite(n)) return null;
+            const d = o.label, u = o.tone;
             return {
-              label: typeof c == "string" && c.trim() ? c.trim() : String(o + 1),
-              value: i,
-              tone: typeof d == "string" && d.trim() ? d.trim() : void 0
+              label: typeof d == "string" && d.trim() ? d.trim() : String(s + 1),
+              value: n,
+              tone: typeof u == "string" && u.trim() ? u.trim() : void 0
             };
           }
           return null;
-        }).filter((n) => !!n);
+        }).filter((o) => !!o);
     } catch {
       return [];
     }
-  const a = (t || "").split(",").map((r) => Number(r.trim())).filter((r) => Number.isFinite(r)), s = (e || "").split(",").map((r) => r.trim()).filter(Boolean);
-  return a.map((r, n) => ({
-    label: s[n] || String(n + 1),
-    value: r
+  const a = (t || "").split(",").map((i) => Number(i.trim())).filter((i) => Number.isFinite(i)), r = (e || "").split(",").map((i) => i.trim()).filter(Boolean);
+  return a.map((i, o) => ({
+    label: r[o] || String(o + 1),
+    value: i
   }));
 }
 function G(p) {
@@ -664,37 +663,33 @@ function G(p) {
       return Number.isFinite(t) ? { label: String(e + 1), value: t } : null;
     if (t && typeof t == "object") {
       const a = Number(t.value);
-      if (!Number.isFinite(a))
-        return null;
-      const s = t.label, r = t.tone;
+      if (!Number.isFinite(a)) return null;
+      const r = t.label, i = t.tone;
       return {
-        label: typeof s == "string" && s.trim() ? s.trim() : String(e + 1),
+        label: typeof r == "string" && r.trim() ? r.trim() : String(e + 1),
         value: a,
-        tone: typeof r == "string" && r.trim() ? r.trim() : void 0
+        tone: typeof i == "string" && i.trim() ? i.trim() : void 0
       };
     }
     return null;
   }).filter((t) => !!t) : [];
 }
 function Q(p) {
-  if (!p)
-    return [];
+  if (!p) return [];
   try {
     const t = JSON.parse(p);
-    return Array.isArray(t) ? t.map((a, s) => {
-      if (!a || typeof a != "object")
-        return null;
-      const r = a.name, n = G(a.data);
-      if (!n.length)
-        return null;
-      const o = a.tone, i = a.dash, c = Number(a.strokeWidth), d = Number(a.opacity), T = a.fill;
+    return Array.isArray(t) ? t.map((a, r) => {
+      if (!a || typeof a != "object") return null;
+      const i = a.name, o = G(a.data);
+      if (!o.length) return null;
+      const s = a.tone, n = a.dash, d = Number(a.strokeWidth), u = Number(a.opacity), T = a.fill;
       return {
-        name: typeof r == "string" && r.trim() ? r.trim() : `Series ${s + 1}`,
-        data: n,
-        tone: typeof o == "string" && o.trim() ? o.trim() : void 0,
-        dash: typeof i == "string" && i.trim() ? i.trim() : void 0,
-        strokeWidth: Number.isFinite(c) && c > 0 ? c : void 0,
-        opacity: Number.isFinite(d) && d > 0 ? d : void 0,
+        name: typeof i == "string" && i.trim() ? i.trim() : `Series ${r + 1}`,
+        data: o,
+        tone: typeof s == "string" && s.trim() ? s.trim() : void 0,
+        dash: typeof n == "string" && n.trim() ? n.trim() : void 0,
+        strokeWidth: Number.isFinite(d) && d > 0 ? d : void 0,
+        opacity: Number.isFinite(u) && u > 0 ? u : void 0,
         fill: typeof T == "boolean" ? T : void 0
       };
     }).filter((a) => !!a) : [];
@@ -703,51 +698,47 @@ function Q(p) {
   }
 }
 function tt(p) {
-  const t = p.map((a, s) => {
-    var r;
-    return {
-      label: ((r = a.label) == null ? void 0 : r.trim()) || String(s + 1),
-      value: Number(a.value),
-      tone: typeof a.tone == "string" && a.tone.trim() ? a.tone.trim() : void 0
-    };
-  }).filter((a) => Number.isFinite(a.value));
-  if (t.length <= V)
-    return { points: t, truncated: 0 };
+  const t = p.map((a, r) => ({
+    label: a.label?.trim() || String(r + 1),
+    value: Number(a.value),
+    tone: typeof a.tone == "string" && a.tone.trim() ? a.tone.trim() : void 0
+  })).filter((a) => Number.isFinite(a.value));
+  if (t.length <= V) return { points: t, truncated: 0 };
   const e = t.length - V;
   return { points: t.slice(t.length - V), truncated: e };
 }
 function et(p, t) {
-  const a = (p.length ? p : t.length ? [{ name: "Series 1", data: t }] : []).map((i) => {
-    const c = tt(i.data);
+  const a = (p.length ? p : t.length ? [{ name: "Series 1", data: t }] : []).map((n) => {
+    const d = tt(n.data);
     return {
-      name: i.name,
-      data: c.points,
-      tone: i.tone,
-      fill: i.fill,
-      dash: i.dash,
-      strokeWidth: i.strokeWidth,
-      opacity: i.opacity,
-      truncated: c.truncated
+      name: n.name,
+      data: d.points,
+      tone: n.tone,
+      fill: n.fill,
+      dash: n.dash,
+      strokeWidth: n.strokeWidth,
+      opacity: n.opacity,
+      truncated: d.truncated
     };
-  }).filter((i) => i.data.length > 0), s = /* @__PURE__ */ new Set();
-  a.forEach((i) => {
-    i.data.forEach((c) => s.add(c.label));
+  }).filter((n) => n.data.length > 0), r = /* @__PURE__ */ new Set();
+  a.forEach((n) => {
+    n.data.forEach((d) => r.add(d.label));
   });
-  let r = Array.from(s), n = a.reduce((i, c) => Math.max(i, c.truncated), 0);
-  r.length > V && (n += r.length - V, r = r.slice(r.length - V));
-  const o = a.map((i) => {
-    const c = new Set(r);
+  let i = Array.from(r), o = a.reduce((n, d) => Math.max(n, d.truncated), 0);
+  i.length > V && (o += i.length - V, i = i.slice(i.length - V));
+  const s = a.map((n) => {
+    const d = new Set(i);
     return {
-      name: i.name,
-      data: i.data.filter((d) => c.has(d.label)),
-      tone: i.tone,
-      fill: i.fill,
-      dash: i.dash,
-      strokeWidth: i.strokeWidth,
-      opacity: i.opacity
+      name: n.name,
+      data: n.data.filter((u) => d.has(u.label)),
+      tone: n.tone,
+      fill: n.fill,
+      dash: n.dash,
+      strokeWidth: n.strokeWidth,
+      opacity: n.opacity
     };
   });
-  return { labels: r, series: o, truncated: n };
+  return { labels: i, series: s, truncated: o };
 }
 function K(p) {
   return p === "loading" ? "Updating" : p === "error" ? "Issue" : p === "success" ? "Stable" : "Live";
@@ -825,34 +816,34 @@ class it extends Y {
     return this.getAttribute("value-suffix") || "";
   }
   _resolveStats(t) {
-    const e = t.map((d) => d.value), a = e.reduce((d, T) => d + T, 0), s = e.length ? a / e.length : 0, r = e.length ? Math.min(...e) : 0, n = e.length ? Math.max(...e) : 0, o = e.length > 1 ? e[e.length - 1] - e[0] : 0, i = e[0] || 0, c = i !== 0 ? o / Math.abs(i) * 100 : null;
-    return { total: a, average: s, min: r, max: n, delta: o, deltaPct: c };
+    const e = t.map((u) => u.value), a = e.reduce((u, T) => u + T, 0), r = e.length ? a / e.length : 0, i = e.length ? Math.min(...e) : 0, o = e.length ? Math.max(...e) : 0, s = e.length > 1 ? e[e.length - 1] - e[0] : 0, n = e[0] || 0, d = n !== 0 ? s / Math.abs(n) * 100 : null;
+    return { total: a, average: r, min: i, max: o, delta: s, deltaPct: d };
   }
   _valueDomain(t, e) {
-    const a = !!(e != null && e.includeZero), s = (e == null ? void 0 : e.fitPadding) ?? 0.14, r = t.map((d) => d.value);
-    let n = Math.min(...r), o = Math.max(...r);
-    a && (n = Math.min(0, n), o = Math.max(0, o));
-    let i = o - n;
-    if (i <= 0) {
-      const d = Math.max(Math.abs(o) * 0.12, 1);
-      n -= d, o += d, i = o - n;
+    const a = !!e?.includeZero, r = e?.fitPadding ?? 0.14, i = t.map((u) => u.value);
+    let o = Math.min(...i), s = Math.max(...i);
+    a && (o = Math.min(0, o), s = Math.max(0, s));
+    let n = s - o;
+    if (n <= 0) {
+      const u = Math.max(Math.abs(s) * 0.12, 1);
+      o -= u, s += u, n = s - o;
     } else {
-      const d = i * s;
-      a ? (n -= d * 0.25, o += d) : (n -= d, o += d), i = o - n;
+      const u = n * r;
+      a ? (o -= u * 0.25, s += u) : (o -= u, s += u), n = s - o;
     }
-    const c = n <= 0 && o >= 0;
-    return { min: n, max: o, span: i, zeroInDomain: c };
+    const d = o <= 0 && s >= 0;
+    return { min: o, max: s, span: n, zeroInDomain: d };
   }
   _formatValue(t, e) {
-    const a = this._valuePrefix(), s = this._valueSuffix();
+    const a = this._valuePrefix(), r = this._valueSuffix();
     try {
-      const r = new Intl.NumberFormat(void 0, {
+      const i = new Intl.NumberFormat(void 0, {
         maximumFractionDigits: Math.abs(t) >= 100 ? 0 : 1,
         ...e
       }).format(t);
-      return `${a}${r}${s}`;
+      return `${a}${i}${r}`;
     } catch {
-      return `${a}${t.toFixed(Math.abs(t) >= 100 ? 0 : 1)}${s}`;
+      return `${a}${t.toFixed(Math.abs(t) >= 100 ? 0 : 1)}${r}`;
     }
   }
   _seriesTone(t, e) {
@@ -862,52 +853,49 @@ class it extends Y {
     return t.tone || a || q[e % q.length] || "var(--ui-chart-accent)";
   }
   _seriesValueDetails(t, e, a) {
-    const s = t[a];
-    return e.map((r, n) => {
-      const o = r.data.find((i) => i.label === s) || null;
+    const r = t[a];
+    return e.map((i, o) => {
+      const s = i.data.find((n) => n.label === r) || null;
       return {
-        series: r.name,
-        value: (o == null ? void 0 : o.value) ?? null,
-        tone: (o == null ? void 0 : o.tone) || this._seriesTone(r, n)
+        series: i.name,
+        value: s?.value ?? null,
+        tone: s?.tone || this._seriesTone(i, o)
       };
     });
   }
-  _pointDetail(t, e, a, s) {
-    const r = this._primarySeries(e);
-    if (!r)
-      return null;
-    const n = e.labels[t];
-    if (!n)
-      return null;
-    const o = r.data.find((d) => d.label === n) || r.data[t];
-    if (!o)
-      return null;
-    const i = this._resolveStats(r.data), c = this._seriesValueDetails(e.labels, e.series, t);
+  _pointDetail(t, e, a, r) {
+    const i = this._primarySeries(e);
+    if (!i) return null;
+    const o = e.labels[t];
+    if (!o) return null;
+    const s = i.data.find((u) => u.label === o) || i.data[t];
+    if (!s) return null;
+    const n = this._resolveStats(i.data), d = this._seriesValueDetails(e.labels, e.series, t);
     return {
       index: t,
-      label: n,
-      value: o.value,
-      tone: o.tone || this._seriesTone(r, 0),
-      series: r.name,
-      seriesValues: c,
+      label: o,
+      value: s.value,
+      tone: s.tone || this._seriesTone(i, 0),
+      series: i.name,
+      seriesValues: d,
       type: a,
-      total: i.total,
-      min: i.min,
-      max: i.max,
-      source: s
+      total: n.total,
+      min: n.min,
+      max: n.max,
+      source: r
     };
   }
   _emitPointSelect(t, e, a) {
-    const s = this._pointDetail(t, e, this._type(), a);
-    s && (this.dispatchEvent(
+    const r = this._pointDetail(t, e, this._type(), a);
+    r && (this.dispatchEvent(
       new CustomEvent("point-select", {
-        detail: s,
+        detail: r,
         bubbles: !0,
         composed: !0
       })
     ), this.dispatchEvent(
       new CustomEvent("ui-point-select", {
-        detail: s,
+        detail: r,
         bubbles: !0,
         composed: !0
       })
@@ -915,8 +903,7 @@ class it extends Y {
   }
   _indexFromTarget(t) {
     const e = t instanceof Element ? t.closest("[data-point-index]") : null;
-    if (!e)
-      return null;
+    if (!e) return null;
     const a = Number(e.getAttribute("data-point-index"));
     return !Number.isInteger(a) || a < 0 ? null : a;
   }
@@ -935,8 +922,7 @@ class it extends Y {
       }
   }
   _onPointerOver(t) {
-    if (!this._isInteractive() || this._activePinned)
-      return;
+    if (!this._isInteractive() || this._activePinned) return;
     const e = this._indexFromTarget(t.target);
     e == null || this._activeIndex === e || (this._activeIndex = e, this.requestRender());
   }
@@ -944,40 +930,34 @@ class it extends Y {
     !this._isInteractive() || this._activePinned || this._activeIndex == null || (this._activeIndex = null, this.requestRender());
   }
   _onFocusIn(t) {
-    if (!this._isInteractive())
-      return;
+    if (!this._isInteractive()) return;
     const e = this._indexFromTarget(t.target);
     e == null || this._activeIndex === e || (this._activeIndex = e, this.requestRender());
   }
   _onClick(t) {
-    if (!this._isInteractive())
-      return;
+    if (!this._isInteractive()) return;
     const e = this._data();
-    if (!e.labels.length || !e.series.length)
-      return;
+    if (!e.labels.length || !e.series.length) return;
     const a = this._indexFromTarget(t.target);
-    if (a == null || a >= e.labels.length)
-      return;
-    const s = !(this._activePinned && this._activeIndex === a);
-    this._activeIndex = a, this._activePinned = s, this.requestRender(), this._emitPointSelect(a, e, "pointer");
+    if (a == null || a >= e.labels.length) return;
+    const r = !(this._activePinned && this._activeIndex === a);
+    this._activeIndex = a, this._activePinned = r, this.requestRender(), this._emitPointSelect(a, e, "pointer");
   }
   _onKeyDown(t) {
-    if (!this._isInteractive())
-      return;
+    if (!this._isInteractive()) return;
     const e = this._data();
-    if (!e.labels.length || !e.series.length)
-      return;
-    const s = this._indexFromTarget(t.target) ?? this._activeIndex ?? 0;
+    if (!e.labels.length || !e.series.length) return;
+    const r = this._indexFromTarget(t.target) ?? this._activeIndex ?? 0;
     if (t.key === "ArrowRight" || t.key === "ArrowDown") {
       t.preventDefault();
-      const n = M(s + 1, 0, e.labels.length - 1);
-      this._setActiveIndex(n, !0), this._focusIndex(n);
+      const o = M(r + 1, 0, e.labels.length - 1);
+      this._setActiveIndex(o, !0), this._focusIndex(o);
       return;
     }
     if (t.key === "ArrowLeft" || t.key === "ArrowUp") {
       t.preventDefault();
-      const n = M(s - 1, 0, e.labels.length - 1);
-      this._setActiveIndex(n, !0), this._focusIndex(n);
+      const o = M(r - 1, 0, e.labels.length - 1);
+      this._setActiveIndex(o, !0), this._focusIndex(o);
       return;
     }
     if (t.key === "Home") {
@@ -986,27 +966,24 @@ class it extends Y {
     }
     if (t.key === "End") {
       t.preventDefault();
-      const n = e.labels.length - 1;
-      this._setActiveIndex(n, !0), this._focusIndex(n);
+      const o = e.labels.length - 1;
+      this._setActiveIndex(o, !0), this._focusIndex(o);
       return;
     }
     if (t.key === "Escape") {
-      if (!this._activePinned && this._activeIndex == null)
-        return;
+      if (!this._activePinned && this._activeIndex == null) return;
       t.preventDefault(), this._setActiveIndex(null, !1);
       return;
     }
-    if (t.key !== "Enter" && t.key !== " ")
-      return;
+    if (t.key !== "Enter" && t.key !== " ") return;
     t.preventDefault();
-    const r = M(s, 0, e.labels.length - 1);
-    this._setActiveIndex(r, !0), this._emitPointSelect(r, e, "keyboard");
+    const i = M(r, 0, e.labels.length - 1);
+    this._setActiveIndex(i, !0), this._emitPointSelect(i, e, "keyboard");
   }
   _axisXLabels(t) {
-    if (t.length <= 8)
-      return t.map(() => "visible");
+    if (t.length <= 8) return t.map(() => "visible");
     const e = Math.max(1, Math.ceil(t.length / 6));
-    return t.map((a, s) => s === 0 || s === t.length - 1 || s % e === 0 ? "visible" : "hidden");
+    return t.map((a, r) => r === 0 || r === t.length - 1 || r % e === 0 ? "visible" : "hidden");
   }
   _buildCartesianTicks(t, e) {
     return [1, 0.75, 0.5, 0.25, 0].map((a) => this._formatValue(t + (e - t) * a));
@@ -1014,7 +991,7 @@ class it extends Y {
   _plotCartesian(t, e, a) {
     const $ = t.labels, P = t.series, w = e === "bar", b = P.flatMap((g) => g.data.map((x) => x.value)), y = this._valueDomain(b.map((g, x) => ({ label: String(x), value: g })), { includeZero: w }), F = y.min, l = y.max, v = y.span, f = $.length > 1 ? 208 / ($.length - 1) : 0, S = y.zeroInDomain ? 0 : F, h = 6 + (l - S) / v * 48, k = [0, 0.25, 0.5, 0.75, 1].map((g) => {
       const x = 6 + 48 * g, I = y.zeroInDomain && Math.abs(x - h) < 0.5;
-      return `<line x1="8" y1="${x.toFixed(2)}" x2="${(8 + 208).toFixed(2)}" y2="${x.toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="${I ? "0.75" : "0.45"}" />`;
+      return `<line x1="8" y1="${x.toFixed(2)}" x2="${216 .toFixed(2)}" y2="${x.toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="${I ? "0.75" : "0.45"}" />`;
     }).join(""), L = P.map((g) => new Map(g.data.map((x) => [x.label, x]))), j = $.map((g, x) => {
       const I = 8 + f * x, D = L.map((z) => z.get(g)).filter((z) => !!z).map((z) => 6 + (l - z.value) / v * 48), C = D.length ? Math.min(...D) : 6 + 48 / 2;
       return {
@@ -1023,22 +1000,21 @@ class it extends Y {
       };
     }), E = $.map((g, x) => {
       const I = j[x];
-      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${x}" data-active="${a === x ? "true" : "false"}" style="--x:${I.xPct.toFixed(3)};--y:${I.yPct.toFixed(3)};" aria-label="${u(g)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
+      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${x}" data-active="${a === x ? "true" : "false"}" style="--x:${I.xPct.toFixed(3)};--y:${I.yPct.toFixed(3)};" aria-label="${c(g)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
     }).join("");
     if (e === "bar") {
       const g = 208 / Math.max(1, $.length), x = M(g * 0.82, 6, 22), I = x / Math.max(1, P.length), D = P.map((C, z) => {
         const N = this._seriesTone(C, z);
         return $.map((O, H) => {
           const W = L[z].get(O);
-          if (!W)
-            return "";
+          if (!W) return "";
           const m = 8 + H * g + (g - x) / 2 + I * z, _ = 6 + (l - W.value) / v * 48, A = Math.min(_, h), R = Math.max(1, Math.abs(h - _)), B = a === H, X = a == null || B ? C.opacity ?? 1 : 0.72;
-          return `<rect x="${m.toFixed(2)}" y="${A.toFixed(2)}" width="${Math.max(2, I - 1).toFixed(2)}" height="${R.toFixed(2)}" rx="1.4" fill="${N}" opacity="${X}" />`;
+          return `<rect x="${m.toFixed(2)}" y="${A.toFixed(2)}" width="${Math.max(2, I - 1).toFixed(2)}" height="${R.toFixed(2)}" rx="1.4" fill="${c(N)}" opacity="${X}" />`;
         }).join("");
       }).join("");
       return {
         svg: `
-          <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${u(this._ariaLabel())}" preserveAspectRatio="none">
+          <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="none">
             <g class="plot-grid">${k}</g>
             ${D}
           </svg>
@@ -1062,21 +1038,19 @@ class it extends Y {
         z.push({ x: m.x, y: m.y, point: m.point, index: m.index });
       }), z.length && C.push(z);
       const N = (m) => m.map((_, A) => A === 0 ? `M${_.x.toFixed(2)} ${_.y.toFixed(2)}` : e === "step" ? `H${_.x.toFixed(2)} V${_.y.toFixed(2)}` : `L${_.x.toFixed(2)} ${_.y.toFixed(2)}`).join(" "), O = e === "area" ? C.map((m) => {
-        if (!(typeof g.fill == "boolean" ? g.fill : x === 0))
-          return "";
+        if (!(typeof g.fill == "boolean" ? g.fill : x === 0)) return "";
         const A = N(m), R = m[0], B = m[m.length - 1];
         return `<path d="${A} L ${B.x.toFixed(2)} ${h.toFixed(2)} L ${R.x.toFixed(2)} ${h.toFixed(2)} Z" fill="color-mix(in srgb, ${I} 18%, transparent)" opacity="${g.opacity ?? (x === 0 ? 1 : 0.65)}" />`;
-      }).join("") : "", H = e === "scatter" ? "" : C.map((m) => `<path d="${N(m)}" fill="none" stroke="${I}" stroke-width="${(g.strokeWidth || (x === 0 ? 1.9 : 1.55)).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" ${g.dash ? `stroke-dasharray="${u(g.dash)}"` : ""} opacity="${g.opacity ?? 1}" />`).join(""), W = D.map((m) => {
-        if (!m.point || m.y == null)
-          return "";
+      }).join("") : "", H = e === "scatter" ? "" : C.map((m) => `<path d="${N(m)}" fill="none" stroke="${c(I)}" stroke-width="${(g.strokeWidth || (x === 0 ? 1.9 : 1.55)).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" ${g.dash ? `stroke-dasharray="${c(g.dash)}"` : ""} opacity="${g.opacity ?? 1}" />`).join(""), W = D.map((m) => {
+        if (!m.point || m.y == null) return "";
         const _ = a === m.index, A = _ ? 2.35 : 1.6, R = a == null || _ ? g.opacity ?? 1 : 0.72;
-        return `<circle cx="${m.x.toFixed(2)}" cy="${m.y.toFixed(2)}" r="${A.toFixed(2)}" fill="${this._pointTone(m.point, m.index, I)}" opacity="${R}" />`;
+        return `<circle cx="${m.x.toFixed(2)}" cy="${m.y.toFixed(2)}" r="${A.toFixed(2)}" fill="${c(this._pointTone(m.point, m.index, I))}" opacity="${R}" />`;
       }).join("");
       return `${O}${H}${W}`;
     }).join("");
     return {
       svg: `
-        <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${u(this._ariaLabel())}" preserveAspectRatio="none">
+        <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="none">
           <g class="plot-grid">${k}</g>
           ${U}
         </svg>
@@ -1087,19 +1061,19 @@ class it extends Y {
     };
   }
   _plotRadial(t, e) {
-    const i = t.map((l) => l.value), c = Math.min(...i), d = Math.max(...i), T = Math.max(1, d - c), $ = t.map((l, v) => {
-      const f = -Math.PI / 2 + Math.PI * 2 * v / t.length, h = 10 + (l.value - c) / T * (28 - 10), k = 32 + Math.cos(f) * h, L = 32 + Math.sin(f) * h;
+    const n = t.map((l) => l.value), d = Math.min(...n), u = Math.max(...n), T = Math.max(1, u - d), $ = t.map((l, v) => {
+      const f = -Math.PI / 2 + Math.PI * 2 * v / t.length, h = 10 + (l.value - d) / T * 18, k = 32 + Math.cos(f) * h, L = 32 + Math.sin(f) * h;
       return { x: k, y: L, point: l, index: v, angle: f };
-    }), P = $.map((l, v) => `${v === 0 ? "M" : "L"}${l.x.toFixed(2)} ${l.y.toFixed(2)}`).join(" ") + " Z", w = [0.25, 0.5, 0.75, 1].map((l) => `<circle cx="32" cy="32" r="${(10 + l * (28 - 10)).toFixed(2)}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), b = $.map((l) => `<line x1="32" y1="32" x2="${(32 + Math.cos(l.angle) * 28).toFixed(2)}" y2="${(32 + Math.sin(l.angle) * 28).toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), y = $.map((l) => {
+    }), P = $.map((l, v) => `${v === 0 ? "M" : "L"}${l.x.toFixed(2)} ${l.y.toFixed(2)}`).join(" ") + " Z", w = [0.25, 0.5, 0.75, 1].map((l) => `<circle cx="32" cy="32" r="${(10 + l * 18).toFixed(2)}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), b = $.map((l) => `<line x1="32" y1="32" x2="${(32 + Math.cos(l.angle) * 28).toFixed(2)}" y2="${(32 + Math.sin(l.angle) * 28).toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""), y = $.map((l) => {
       const v = this._pointTone(l.point, l.index), f = e === l.index;
-      return `<circle cx="${l.x.toFixed(2)}" cy="${l.y.toFixed(2)}" r="${f ? "2.35" : "1.85"}" fill="${v}" opacity="${e == null || f ? "1" : "0.74"}" />`;
+      return `<circle cx="${l.x.toFixed(2)}" cy="${l.y.toFixed(2)}" r="${f ? "2.35" : "1.85"}" fill="${c(v)}" opacity="${e == null || f ? "1" : "0.74"}" />`;
     }).join(""), F = $.map((l) => {
       const v = M(l.x / 64 * 100, 0, 100).toFixed(3), f = M(l.y / 64 * 100, 0, 100).toFixed(3), S = e === l.index, h = `${l.point.label}: ${this._formatValue(l.point.value)}`;
-      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${l.index}" data-active="${S ? "true" : "false"}" style="--x:${v};--y:${f};" aria-label="${u(h)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
+      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${l.index}" data-active="${S ? "true" : "false"}" style="--x:${v};--y:${f};" aria-label="${c(h)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
     }).join("");
     return {
       svg: `
-        <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${u(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
+        <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
           ${w}
           ${b}
           <path d="${P}" fill="color-mix(in srgb, var(--ui-chart-accent) 16%, transparent)" stroke="var(--ui-chart-accent)" stroke-width="1.2" />
@@ -1115,49 +1089,49 @@ class it extends Y {
     };
   }
   _plotDonut(t, e) {
-    const a = t.reduce((w, b) => w + Math.max(0, b.value), 0), s = Math.max(1, a), r = 18, n = 7, o = 32, i = 32, c = 2 * Math.PI * r;
-    let d = 0;
+    const a = t.reduce((w, b) => w + Math.max(0, b.value), 0), r = Math.max(1, a), i = 18, o = 7, s = 32, n = 32, d = 2 * Math.PI * i;
+    let u = 0;
     const T = t.map((w, b) => {
-      const l = Math.max(0, w.value) / s * c, v = this._pointTone(w, b), f = e === b, S = e == null || f ? "1" : "0.7", h = `
+      const l = Math.max(0, w.value) / r * d, v = this._pointTone(w, b), f = e === b, S = e == null || f ? "1" : "0.7", h = `
           <circle
-            cx="${o}"
-            cy="${i}"
-            r="${r}"
+            cx="${s}"
+            cy="${n}"
+            r="${i}"
             fill="none"
-            stroke="${v}"
-            stroke-width="${f ? n + 0.8 : n}"
-            stroke-dasharray="${l.toFixed(3)} ${(c - l).toFixed(3)}"
-            stroke-dashoffset="${(-d).toFixed(3)}"
-            transform="rotate(-90 ${o} ${i})"
+            stroke="${c(v)}"
+            stroke-width="${f ? o + 0.8 : o}"
+            stroke-dasharray="${l.toFixed(3)} ${(d - l).toFixed(3)}"
+            stroke-dashoffset="${(-u).toFixed(3)}"
+            transform="rotate(-90 ${s} ${n})"
             stroke-linecap="round"
             opacity="${S}"
           />
         `;
-      return d += l, h;
+      return u += l, h;
     }).join("");
     let $ = 0;
     const P = t.map((w, b) => {
-      const y = Math.max(0, w.value), l = y / s * Math.PI * 2, v = -Math.PI / 2 + $ + l / 2, f = o + Math.cos(v) * (r + 6), S = i + Math.sin(v) * (r + 6);
+      const y = Math.max(0, w.value), l = y / r * Math.PI * 2, v = -Math.PI / 2 + $ + l / 2, f = s + Math.cos(v) * (i + 6), S = n + Math.sin(v) * (i + 6);
       $ += l;
-      const h = M(f / 64 * 100, 0, 100).toFixed(3), k = M(S / 64 * 100, 0, 100).toFixed(3), L = e === b, j = s > 0 ? y / s * 100 : 0, E = `${w.label}: ${this._formatValue(w.value)} (${this._formatValue(j, { maximumFractionDigits: 1 })}%)`;
-      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${b}" data-active="${L ? "true" : "false"}" style="--x:${h};--y:${k};" aria-label="${u(E)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
+      const h = M(f / 64 * 100, 0, 100).toFixed(3), k = M(S / 64 * 100, 0, 100).toFixed(3), L = e === b, j = r > 0 ? y / r * 100 : 0, E = `${w.label}: ${this._formatValue(w.value)} (${this._formatValue(j, { maximumFractionDigits: 1 })}%)`;
+      return `<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${b}" data-active="${L ? "true" : "false"}" style="--x:${h};--y:${k};" aria-label="${c(E)}" ${this._isInteractive() ? "" : "disabled"}></button>`;
     }).join("");
     return {
       svg: `
-        <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${u(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
-          <circle cx="${o}" cy="${i}" r="${r}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="${n}" />
+        <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
+          <circle cx="${s}" cy="${n}" r="${i}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="${o}" />
           ${T}
-          <text x="${o}" y="30" text-anchor="middle" font-size="4.5" fill="var(--ui-chart-muted)">Total</text>
-          <text x="${o}" y="36" text-anchor="middle" font-size="6" font-weight="700" fill="var(--ui-chart-text)">${u(this._formatValue(a))}</text>
+          <text x="${s}" y="30" text-anchor="middle" font-size="4.5" fill="var(--ui-chart-muted)">Total</text>
+          <text x="${s}" y="36" text-anchor="middle" font-size="6" font-weight="700" fill="var(--ui-chart-text)">${c(this._formatValue(a))}</text>
         </svg>
       `,
       hits: P,
       anchors: t.map((w, b) => {
         let y = 0;
         for (let F = 0; F <= b; F += 1) {
-          const f = Math.max(0, t[F].value) / s * Math.PI * 2;
+          const f = Math.max(0, t[F].value) / r * Math.PI * 2;
           if (F === b) {
-            const S = -Math.PI / 2 + y + f / 2, h = o + Math.cos(S) * (r + 6), k = i + Math.sin(S) * (r + 6);
+            const S = -Math.PI / 2 + y + f / 2, h = s + Math.cos(S) * (i + 6), k = n + Math.sin(S) * (i + 6);
             return {
               xPct: M(h / 64 * 100, 0, 100),
               yPct: M(k / 64 * 100, 0, 100)
@@ -1171,8 +1145,8 @@ class it extends Y {
     };
   }
   _plot(t, e, a) {
-    const s = this._primarySeries(t);
-    return s ? e === "donut" ? this._plotDonut(s.data, a) : e === "radial" ? this._plotRadial(s.data, a) : this._plotCartesian(t, e, a) : { svg: "", hits: "", anchors: [], yTicks: [] };
+    const r = this._primarySeries(t);
+    return r ? e === "donut" ? this._plotDonut(r.data, a) : e === "radial" ? this._plotRadial(r.data, a) : this._plotCartesian(t, e, a) : { svg: "", hits: "", anchors: [], yTicks: [] };
   }
   _ariaLabel() {
     const t = this.getAttribute("title") || "Chart";
@@ -1186,25 +1160,22 @@ class it extends Y {
   }
   _tooltipMarkup(t, e) {
     const a = this._activeIndex;
-    if (a == null || !e.anchors[a])
-      return "";
-    const s = t.labels[a];
-    if (!s)
-      return "";
-    const r = this._seriesValueDetails(t.labels, t.series, a).filter((o) => o.value != null);
-    if (!r.length)
-      return "";
-    const n = e.anchors[a];
+    if (a == null || !e.anchors[a]) return "";
+    const r = t.labels[a];
+    if (!r) return "";
+    const i = this._seriesValueDetails(t.labels, t.series, a).filter((s) => s.value != null);
+    if (!i.length) return "";
+    const o = e.anchors[a];
     return `
-      <div class="tooltip" part="tooltip" style="--x:${n.xPct.toFixed(3)};--y:${n.yPct.toFixed(3)};">
-        <div class="tooltip-title">${u(s)}</div>
+      <div class="tooltip" part="tooltip" style="--x:${o.xPct.toFixed(3)};--y:${o.yPct.toFixed(3)};">
+        <div class="tooltip-title">${c(r)}</div>
         <div class="tooltip-list">
-          ${r.map(
-      (o) => `
+          ${i.map(
+      (s) => `
                 <div class="tooltip-row">
-                  <span class="tooltip-dot" style="--dot:${o.tone || "var(--ui-chart-accent)"};"></span>
-                  <span class="tooltip-series">${u(o.series)}</span>
-                  <span class="tooltip-value">${u(this._formatValue(o.value || 0))}</span>
+                  <span class="tooltip-dot" style="--dot:${c(s.tone || "var(--ui-chart-accent)")};"></span>
+                  <span class="tooltip-series">${c(s.series)}</span>
+                  <span class="tooltip-value">${c(this._formatValue(s.value || 0))}</span>
                 </div>
               `
     ).join("")}
@@ -1213,46 +1184,44 @@ class it extends Y {
     `;
   }
   _activeInsight(t) {
-    var o;
     const e = this._primarySeries(t);
-    if (!e)
-      return "";
+    if (!e) return "";
     const a = this._activeIndex;
     if (a == null || !t.labels[a]) {
-      const i = this._resolveStats(e.data), c = i.delta > 0 ? "up" : i.delta < 0 ? "down" : "flat", d = `${i.delta >= 0 ? "+" : ""}${this._formatValue(i.delta)}${i.deltaPct == null ? "" : ` (${i.deltaPct >= 0 ? "+" : ""}${this._formatValue(i.deltaPct, { maximumFractionDigits: 1 })}%)`}`;
+      const s = this._resolveStats(e.data), n = s.delta > 0 ? "up" : s.delta < 0 ? "down" : "flat", d = `${s.delta >= 0 ? "+" : ""}${this._formatValue(s.delta)}${s.deltaPct == null ? "" : ` (${s.deltaPct >= 0 ? "+" : ""}${this._formatValue(s.deltaPct, { maximumFractionDigits: 1 })}%)`}`;
       return `
         <div class="insight" part="insight">
-          <span>Range <strong>${this._formatValue(i.min)}</strong> to <strong>${this._formatValue(i.max)}</strong></span>
-          <strong data-tone="${c}">${u(d)}</strong>
+          <span>Range <strong>${this._formatValue(s.min)}</strong> to <strong>${this._formatValue(s.max)}</strong></span>
+          <strong data-tone="${n}">${c(d)}</strong>
         </div>
       `;
     }
-    const s = t.labels[a], r = this._seriesValueDetails(t.labels, t.series, a).filter((i) => i.value != null), n = r.reduce((i, c) => i + (c.value || 0), 0);
+    const r = t.labels[a], i = this._seriesValueDetails(t.labels, t.series, a).filter((s) => s.value != null), o = i.reduce((s, n) => s + (n.value || 0), 0);
     return `
       <div class="insight" part="insight">
-        <span>Selected <strong>${u(s)}</strong></span>
-        <strong>${u(this._formatValue(t.series.length > 1 ? n : ((o = r[0]) == null ? void 0 : o.value) || 0))}</strong>
+        <span>Selected <strong>${c(r)}</strong></span>
+        <strong>${c(this._formatValue(t.series.length > 1 ? o : i[0]?.value || 0))}</strong>
       </div>
     `;
   }
   render() {
-    const t = this._data(), e = this._primarySeries(t), a = this._type(), s = this._state(), r = this._isDisabled(), n = this._isInteractive(), o = (this.getAttribute("title") || "").trim(), i = (this.getAttribute("subtitle") || "").trim(), c = this._showLegend(), d = this._showSummary(), T = this._hasToolbarSlot(), $ = this._hasSlot("title"), P = this._hasSlot("subtitle"), w = $ || P || !!o || !!i || s !== "idle";
+    const t = this._data(), e = this._primarySeries(t), a = this._type(), r = this._state(), i = this._isDisabled(), o = this._isInteractive(), s = (this.getAttribute("title") || "").trim(), n = (this.getAttribute("subtitle") || "").trim(), d = this._showLegend(), u = this._showSummary(), T = this._hasToolbarSlot(), $ = this._hasSlot("title"), P = this._hasSlot("subtitle"), w = $ || P || !!s || !!n || r !== "idle";
     if (!e || !t.labels.length) {
-      const h = s === "error" ? "Chart data failed to load" : "No series data available";
+      const h = r === "error" ? "Chart data failed to load" : "No series data available";
       this.setContent(`
         <style>${Z}</style>
-        <section class="frame" part="frame" data-state="${s}" data-disabled="${r ? "true" : "false"}" aria-disabled="${r ? "true" : "false"}">
+        <section class="frame" part="frame" data-state="${r}" data-disabled="${i ? "true" : "false"}" aria-disabled="${i ? "true" : "false"}">
           <div class="toolbar" part="toolbar" ${T ? "" : "hidden"}>
             <slot name="header"></slot>
           </div>
           <header class="header" part="header" ${w ? "" : "hidden"}>
             <div class="meta">
-              ${$ ? '<slot class="title-slot" name="title"></slot>' : o ? `<h3 class="title" part="title">${u(o)}</h3>` : ""}
-              ${P ? '<slot class="subtitle-slot" name="subtitle"></slot>' : i ? `<p class="subtitle" part="subtitle">${u(i)}</p>` : ""}
+              ${$ ? '<slot class="title-slot" name="title"></slot>' : s ? `<h3 class="title" part="title">${c(s)}</h3>` : ""}
+              ${P ? '<slot class="subtitle-slot" name="subtitle"></slot>' : n ? `<p class="subtitle" part="subtitle">${c(n)}</p>` : ""}
             </div>
-            <span class="status-pill" data-state="${s}">${K(s)}</span>
+            <span class="status-pill" data-state="${r}">${K(r)}</span>
           </header>
-          <div class="empty" part="empty">${u(h)}</div>
+          <div class="empty" part="empty">${c(h)}</div>
         </section>
       `);
       return;
@@ -1260,9 +1229,9 @@ class it extends Y {
     this._activeIndex != null && (this._activeIndex < 0 || this._activeIndex >= t.labels.length) && (this._activeIndex = null, this._activePinned = !1);
     const b = this._resolveStats(e.data), y = this._plot(t, a, this._activeIndex), F = this._axisXLabels(t.labels), l = t.series.length > 1 ? t.series.map(
       (h, k) => `
-              <div class="legend-item" aria-label="${u(h.name)}">
-                <span class="legend-dot" style="--dot:${this._seriesTone(h, k)};"></span>
-                <span>${u(h.name)}</span>
+              <div class="legend-item" aria-label="${c(h.name)}">
+                <span class="legend-dot" style="--dot:${c(this._seriesTone(h, k))};"></span>
+                <span>${c(h.name)}</span>
               </div>
             `
     ).join("") : e.data.map((h, k) => {
@@ -1274,24 +1243,24 @@ class it extends Y {
                 data-role="legend-item"
                 data-point-index="${k}"
                 data-active="${L ? "true" : "false"}"
-                aria-label="${u(E)}"
-                ${n ? "" : "disabled"}
+                aria-label="${c(E)}"
+                ${o ? "" : "disabled"}
               >
-                <span class="legend-dot" style="--dot:${j};"></span>
-                <span>${u(h.label)}</span>
+                <span class="legend-dot" style="--dot:${c(j)};"></span>
+                <span>${c(h.label)}</span>
               </button>
             `;
-    }).join(""), v = b.delta > 0 ? "up" : b.delta < 0 ? "down" : "flat", f = `${b.delta >= 0 ? "+" : ""}${this._formatValue(b.delta)}`, S = s === "error" ? '<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>' : s === "success" ? '<div class="message" part="message" data-tone="success">Data pipeline healthy. All metrics are up to date.</div>' : "";
+    }).join(""), v = b.delta > 0 ? "up" : b.delta < 0 ? "down" : "flat", f = `${b.delta >= 0 ? "+" : ""}${this._formatValue(b.delta)}`, S = r === "error" ? '<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>' : r === "success" ? '<div class="message" part="message" data-tone="success">Data pipeline healthy. All metrics are up to date.</div>' : "";
     this.setContent(`
       <style>${Z}</style>
       <section
         class="frame"
         part="frame"
-        data-state="${s}"
-        data-disabled="${r ? "true" : "false"}"
-        aria-disabled="${r ? "true" : "false"}"
+        data-state="${r}"
+        data-disabled="${i ? "true" : "false"}"
+        aria-disabled="${i ? "true" : "false"}"
       >
-        <div class="sr-only" aria-live="polite">${u(o)} ${u(K(s))}</div>
+        <div class="sr-only" aria-live="polite">${c(s)} ${c(K(r))}</div>
 
         <div class="toolbar" part="toolbar" ${T ? "" : "hidden"}>
           <slot name="header"></slot>
@@ -1299,29 +1268,29 @@ class it extends Y {
 
         <header class="header" part="header" ${w ? "" : "hidden"}>
           <div class="meta">
-            ${$ ? '<slot class="title-slot" name="title"></slot>' : o ? `<h3 class="title" part="title">${u(o)}</h3>` : ""}
-            ${P ? '<slot class="subtitle-slot" name="subtitle"></slot>' : i ? `<p class="subtitle" part="subtitle">${u(i)}</p>` : ""}
+            ${$ ? '<slot class="title-slot" name="title"></slot>' : s ? `<h3 class="title" part="title">${c(s)}</h3>` : ""}
+            ${P ? '<slot class="subtitle-slot" name="subtitle"></slot>' : n ? `<p class="subtitle" part="subtitle">${c(n)}</p>` : ""}
           </div>
-          <span class="status-pill" data-state="${s}">${K(s)}</span>
+          <span class="status-pill" data-state="${r}">${K(r)}</span>
         </header>
 
-        ${d ? `
+        ${u ? `
           <section class="summary" part="summary">
             <div class="metric" part="metric">
               <span class="metric-label">Total</span>
-              <span class="metric-value">${u(this._formatValue(b.total))}</span>
+              <span class="metric-value">${c(this._formatValue(b.total))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Average</span>
-              <span class="metric-value">${u(this._formatValue(b.average))}</span>
+              <span class="metric-value">${c(this._formatValue(b.average))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Peak</span>
-              <span class="metric-value">${u(this._formatValue(b.max))}</span>
+              <span class="metric-value">${c(this._formatValue(b.max))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Delta</span>
-              <span class="metric-value" data-tone="${v}">${u(f)}</span>
+              <span class="metric-value" data-tone="${v}">${c(f)}</span>
             </div>
           </section>
         ` : ""}
@@ -1330,19 +1299,19 @@ class it extends Y {
           <div class="plot-body">
             ${a === "donut" || a === "radial" ? "" : `
               <div class="axis-y" part="axis-y">
-                ${y.yTicks.map((h) => `<span>${u(h)}</span>`).join("")}
+                ${y.yTicks.map((h) => `<span>${c(h)}</span>`).join("")}
               </div>
             `}
             <div class="plot-stage">
               ${y.svg}
               <div class="plot-hit-layer" part="plot-hits">${y.hits}</div>
               ${this._tooltipMarkup(t, y)}
-              ${s === "loading" ? '<div class="loading-overlay" part="loading-overlay" aria-hidden="true"></div>' : ""}
+              ${r === "loading" ? '<div class="loading-overlay" part="loading-overlay" aria-hidden="true"></div>' : ""}
             </div>
             ${a === "donut" || a === "radial" ? "" : `
               <div class="axis-x" part="axis-x">
                 ${t.labels.map(
-      (h, k) => `<span class="axis-x-label" data-hidden="${F[k] === "hidden" ? "true" : "false"}">${u(h)}</span>`
+      (h, k) => `<span class="axis-x-label" data-hidden="${F[k] === "hidden" ? "true" : "false"}">${c(h)}</span>`
     ).join("")}
               </div>
             `}
@@ -1351,7 +1320,7 @@ class it extends Y {
 
         ${this._activeInsight(t)}
 
-        ${c ? `<section class="legend" part="legend">${l}</section>` : ""}
+        ${d ? `<section class="legend" part="legend">${l}</section>` : ""}
 
         ${t.truncated > 0 ? `<div class="message" part="message">Showing last ${t.truncated + t.labels.length} records (truncated to ${V}).</div>` : ""}