@iyulab/u-widgets 0.9.1 → 0.10.0

package/dist/u-widgets-charts.js

@@ -1,82 +1,87 @@
-import { css as P, LitElement as T, nothing as E, html as R } from "lit";
+import { css as E, LitElement as P, nothing as T, html as R } from "lit";
 import { property as $, customElement as B } from "lit/decorators.js";
-import { a as W, f as q, t as G } from "./tokens-SjA7YdRs.js";
+import { a as W, f as q } from "./format-DiXp3HTj.js";
+import { t as G } from "./tokens-byMop3gk.js";
 import * as O from "echarts/core";
 import { BarChart as H, LineChart as U, PieChart as Y, ScatterChart as J, RadarChart as Q, HeatmapChart as X, BoxplotChart as Z, FunnelChart as K, TreemapChart as ee } from "echarts/charts";
-import { GridComponent as te, TooltipComponent as re, LegendComponent as ie, RadarComponent as se, MarkLineComponent as ne, VisualMapComponent as ae } from "echarts/components";
-import { CanvasRenderer as oe } from "echarts/renderers";
-function M(e, i) {
-  for (const r of i) {
-    const t = e[r.field];
+import { GridComponent as te, TooltipComponent as re, LegendComponent as ie, RadarComponent as se, MarkLineComponent as ne, VisualMapComponent as oe } from "echarts/components";
+import { CanvasRenderer as ae } from "echarts/renderers";
+function M(e, r) {
+  for (const i of r) {
+    const t = e[i.field];
     if (t == null) continue;
     const n = Number(t);
     if (Number.isNaN(n)) continue;
-    const s = r.above === void 0 || n > r.above, u = r.below === void 0 || n < r.below;
-    if (s && u) return r;
+    const s = i.above === void 0 || n > i.above, f = i.below === void 0 || n < i.below;
+    if (s && f) return i;
   }
 }
 function le(e) {
-  const i = e.widget, r = e.data, t = e.mapping ? W(e.mapping) : void 0, n = e.options ?? {};
-  if (!r) return {};
+  const r = e.widget, i = e.data, t = e.mapping ? W(e.mapping) : void 0, n = e.options ?? {};
+  if (!i) return {};
   let s;
-  switch (i) {
+  switch (r) {
     case "chart.bar":
-      s = N(r, t, "bar", n);
+      s = N(i, t, "bar", n);
       break;
     case "chart.line":
-      s = N(r, t, "line", n);
+      s = N(i, t, "line", n);
       break;
     case "chart.area":
-      s = N(r, t, "line", { ...n, _area: !0 });
+      s = N(i, t, "line", { ...n, _area: !0 });
       break;
     case "chart.pie":
-      s = ue(r, t, n);
+      s = ue(i, t, n);
       break;
     case "chart.scatter":
-      s = ce(r, t, n);
+      s = ce(i, t, n);
       break;
     case "chart.radar":
-      s = fe(r, t);
+      s = fe(i, t);
       break;
     case "chart.heatmap":
-      s = ye(r, t, n);
+      s = ye(i, t, n);
       break;
     case "chart.box":
-      s = he(r, t);
+      s = he(i, t);
       break;
     case "chart.funnel":
-      s = me(r, t);
+      s = me(i, t);
       break;
     case "chart.waterfall":
-      s = de(r, t);
+      s = de(i, t);
       break;
     case "chart.treemap":
-      s = be(r);
+      s = pe(i);
       break;
     case "chart.histogram":
-      s = pe(r, t, n);
+      s = be(i, t, n);
       break;
     default:
       return {};
   }
-  n.legend === !1 && s.legend && (s.legend = { ...s.legend, show: !1 }), n.grid === !1 && (s.xAxis && typeof s.xAxis == "object" && !Array.isArray(s.xAxis) && (s.xAxis = { ...s.xAxis, splitLine: { show: !1 } }), s.yAxis && typeof s.yAxis == "object" && !Array.isArray(s.yAxis) && (s.yAxis = { ...s.yAxis, splitLine: { show: !1 } })), n.animate === !1 && (s.animation = !1), Array.isArray(n.colors) && n.colors.length > 0 && (s.color = n.colors);
-  const u = n.locale;
-  L(s, "xAxis", n.xFormat, u), L(s, "yAxis", n.yFormat, u);
+  if (n.legend === !1 && s.legend && (s.legend = { ...s.legend, show: !1 }), n.grid === !1) {
+    const y = (u) => !u || typeof u != "object" ? u : Array.isArray(u) ? u.map(y) : { ...u, splitLine: { show: !1 } };
+    s.xAxis && (s.xAxis = y(s.xAxis)), s.yAxis && (s.yAxis = y(s.yAxis));
+  }
+  n.animate === !1 && (s.animation = !1), Array.isArray(n.colors) && n.colors.length > 0 && (s.color = n.colors);
+  const f = n.locale;
+  z(s, "xAxis", n.xFormat, f), z(s, "yAxis", n.yFormat, f);
   const h = n.echarts;
   return h && typeof h == "object" && (s = V(s, h)), s;
 }
-function N(e, i, r, t) {
+function N(e, r, i, t) {
   if (!Array.isArray(e)) return {};
-  const n = i?.x ?? C(e), s = i?.y ?? [_(e)].filter(Boolean);
+  const n = r?.x ?? C(e), s = r?.y ?? [_(e)].filter(Boolean);
   if (!n || s.length === 0) return {};
-  const u = e.map((a) => String(a[n] ?? "")), h = !!t.horizontal, d = Array.isArray(t.series) ? t.series : [], m = t.conditionalStyles, f = s.map((a, l) => {
+  const f = e.map((o) => String(o[n] ?? "")), h = !!t.horizontal, y = Array.isArray(t.series) ? t.series : [], u = t.conditionalStyles, m = s.map((o, l) => {
     const c = {
-      name: a,
-      type: r,
-      data: e.map((p) => {
-        const w = p[a] ?? null;
-        if (m?.length) {
-          const v = M(p, m);
+      name: o,
+      type: i,
+      data: e.map((b) => {
+        const w = b[o] ?? null;
+        if (u?.length) {
+          const v = M(b, u);
           if (v) {
             const F = { value: w, itemStyle: { color: v.color } };
             return v.symbol && (F.symbol = v.symbol), v.symbolSize && (F.symbolSize = v.symbolSize), F;
@@ -86,156 +91,156 @@ function N(e, i, r, t) {
       })
     };
     t._area && (c.areaStyle = {}), t.smooth && (c.smooth = !0), t.step && (c.step = t.step === !0 ? "end" : t.step);
-    const o = d[l];
-    return o && (o.color && (c.itemStyle = { color: o.color }, c.lineStyle = { ...c.lineStyle ?? {}, color: o.color }), o.lineStyle && (c.lineStyle = { ...c.lineStyle ?? {}, ...o.lineStyle }), o.symbol !== void 0 && (c.symbol = o.symbol), o.label && (c.name = o.label), o.type && (c.type = o.type), o.yAxisIndex !== void 0 && (c.yAxisIndex = o.yAxisIndex)), c;
-  }), x = { type: "category", data: u }, g = { type: "value" };
-  t.histogram && (x.axisTick = { alignWithLabel: !0 }, f.forEach((a) => {
-    a.barCategoryGap = "0%";
+    const a = y[l];
+    return a && (a.color && (c.itemStyle = { color: a.color }, c.lineStyle = { ...c.lineStyle ?? {}, color: a.color }), a.lineStyle && (c.lineStyle = { ...c.lineStyle ?? {}, ...a.lineStyle }), a.symbol !== void 0 && (c.symbol = a.symbol), a.label && (c.name = a.label), a.type && (c.type = a.type), a.yAxisIndex !== void 0 && (c.yAxisIndex = a.yAxisIndex)), c;
+  }), g = { type: "category", data: f }, x = { type: "value" };
+  t.histogram && (g.axisTick = { alignWithLabel: !0 }, m.forEach((o) => {
+    o.barCategoryGap = "0%";
   }));
-  const A = !h && f.some((a) => a.yAxisIndex >= 1);
-  let y;
+  const A = !h && m.some((o) => o.yAxisIndex >= 1);
+  let d;
   if (A) {
-    const a = Array.isArray(t.yAxis) && t.yAxis.length >= 2 ? t.yAxis[1] : { type: "value" };
-    y = [g, a];
+    const o = Array.isArray(t.yAxis) && t.yAxis.length >= 2 ? t.yAxis[1] : { type: "value" };
+    d = [x, o];
   } else
-    y = h ? x : g;
-  const b = {
-    xAxis: h ? g : x,
-    yAxis: y,
-    series: f,
+    d = h ? g : x;
+  const p = {
+    xAxis: h ? x : g,
+    yAxis: d,
+    series: m,
     tooltip: { trigger: "axis" }
   };
   if (s.length > 1) {
-    const a = f.map((l) => l.name);
-    b.legend = { data: a };
+    const o = m.map((l) => l.name);
+    p.legend = { data: o };
   }
-  t.stack && b.series.forEach((a) => {
-    a.stack = "total";
+  t.stack && p.series.forEach((o) => {
+    o.stack = "total";
   });
   const S = t.referenceLines;
-  return Array.isArray(S) && S.length > 0 && f.length > 0 && (f[0].markLine = {
+  return Array.isArray(S) && S.length > 0 && m.length > 0 && (m[0].markLine = {
     silent: !0,
     symbol: "none",
-    data: S.map((a) => {
+    data: S.map((o) => {
       const l = {};
-      a.axis === "x" ? l.xAxis = a.value : l.yAxis = a.value, a.label && (l.name = a.label);
+      o.axis === "x" ? l.xAxis = o.value : l.yAxis = o.value, o.label && (l.name = o.label);
       const c = {};
-      return a.color && (c.color = a.color), a.style && (c.type = a.style), Object.keys(c).length > 0 && (l.lineStyle = c), a.label && (l.label = { formatter: a.label, position: "end" }), l;
+      return o.color && (c.color = o.color), o.style && (c.type = o.style), Object.keys(c).length > 0 && (l.lineStyle = c), o.label && (l.label = { formatter: o.label, position: "end" }), l;
     })
-  }), b;
+  }), p;
 }
-function ce(e, i, r) {
+function ce(e, r, i) {
   if (!Array.isArray(e)) return {};
-  const t = I(e), n = i?.x ?? t[0], s = (i?.y ?? [t[1]])[0], u = i?.color, h = i?.size, d = i?.opacity;
+  const t = I(e), n = r?.x ?? t[0], s = (r?.y ?? [t[1]])[0], f = r?.color, h = r?.size, y = r?.opacity;
   if (!n || !s) return {};
-  const m = {
+  const u = {
     xAxis: { type: "value" },
     yAxis: { type: "value" },
     tooltip: { trigger: "item" }
   };
-  let f = 1 / 0, x = -1 / 0;
-  if (d)
-    for (const a of e) {
-      const l = Number(a[d] ?? 0);
-      l < f && (f = l), l > x && (x = l);
+  let m = 1 / 0, g = -1 / 0;
+  if (y)
+    for (const o of e) {
+      const l = Number(o[y] ?? 0);
+      l < m && (m = l), l > g && (g = l);
     }
-  const g = x - f || 1, A = r.conditionalStyles, y = (a) => {
-    const l = [Number(a[n] ?? 0), Number(a[s] ?? 0)];
-    if (h && l.push(Number(a[h] ?? 0)), A?.length) {
-      const c = M(a, A);
+  const x = g - m || 1, A = i.conditionalStyles, d = (o) => {
+    const l = [Number(o[n] ?? 0), Number(o[s] ?? 0)];
+    if (h && l.push(Number(o[h] ?? 0)), A?.length) {
+      const c = M(o, A);
       if (c) {
-        const o = { color: c.color };
-        if (d) {
-          const w = Number(a[d] ?? 0);
-          o.opacity = Math.round((0.1 + 0.9 * ((w - f) / g)) * 100) / 100;
+        const a = { color: c.color };
+        if (y) {
+          const w = Number(o[y] ?? 0);
+          a.opacity = Math.round((0.1 + 0.9 * ((w - m) / x)) * 100) / 100;
         }
-        const p = { value: l, itemStyle: o };
-        return c.symbol && (p.symbol = c.symbol), c.symbolSize && (p.symbolSize = c.symbolSize), p;
+        const b = { value: l, itemStyle: a };
+        return c.symbol && (b.symbol = c.symbol), c.symbolSize && (b.symbolSize = c.symbolSize), b;
       }
     }
-    if (d) {
-      const o = 0.1 + 0.9 * ((Number(a[d] ?? 0) - f) / g);
-      return { value: l, itemStyle: { opacity: Math.round(o * 100) / 100 } };
+    if (y) {
+      const a = 0.1 + 0.9 * ((Number(o[y] ?? 0) - m) / x);
+      return { value: l, itemStyle: { opacity: Math.round(a * 100) / 100 } };
     }
     return l;
-  }, b = h ? (a) => {
-    const c = (Array.isArray(a) ? a : a.value)[2] ?? 0;
+  }, p = h ? (o) => {
+    const c = (Array.isArray(o) ? o : o.value)[2] ?? 0;
     return Math.max(4, Math.min(60, Math.sqrt(c) * 4));
   } : void 0;
-  if (u) {
-    const a = /* @__PURE__ */ new Map();
+  if (f) {
+    const o = /* @__PURE__ */ new Map();
     for (const c of e) {
-      const o = String(c[u] ?? "unknown");
-      a.has(o) || a.set(o, []), a.get(o).push(y(c));
+      const a = String(c[f] ?? "unknown");
+      o.has(a) || o.set(a, []), o.get(a).push(d(c));
     }
     const l = [];
-    for (const [c, o] of a) {
-      const p = { name: c, type: "scatter", data: o };
-      b && (p.symbolSize = b), l.push(p);
+    for (const [c, a] of o) {
+      const b = { name: c, type: "scatter", data: a };
+      p && (b.symbolSize = p), l.push(b);
     }
-    m.series = l, m.legend = { data: Array.from(a.keys()) };
+    u.series = l, u.legend = { data: Array.from(o.keys()) };
   } else {
-    const l = { type: "scatter", data: e.map((c) => y(c)) };
-    b && (l.symbolSize = b), m.series = [l];
+    const l = { type: "scatter", data: e.map((c) => d(c)) };
+    p && (l.symbolSize = p), u.series = [l];
   }
-  const S = r.referenceLines;
+  const S = i.referenceLines;
   if (Array.isArray(S) && S.length > 0) {
-    const a = m.series[0];
-    a.markLine = {
+    const o = u.series[0];
+    o.markLine = {
       silent: !0,
       symbol: "none",
       data: S.map((l) => {
         const c = {};
         l.axis === "x" ? c.xAxis = l.value : c.yAxis = l.value, l.label && (c.name = l.label);
-        const o = {};
-        return l.color && (o.color = l.color), l.style && (o.type = l.style), Object.keys(o).length > 0 && (c.lineStyle = o), l.label && (c.label = { formatter: l.label, position: "end" }), c;
+        const a = {};
+        return l.color && (a.color = l.color), l.style && (a.type = l.style), Object.keys(a).length > 0 && (c.lineStyle = a), l.label && (c.label = { formatter: l.label, position: "end" }), c;
       })
     };
   }
-  return m;
+  return u;
 }
-function ue(e, i, r) {
+function ue(e, r, i) {
   if (!Array.isArray(e)) return {};
-  const t = i?.label ?? C(e), n = i?.value ?? _(e);
+  const t = r?.label ?? C(e), n = r?.value ?? _(e);
   if (!t || !n) return {};
-  const s = e.map((f) => ({
-    name: String(f[t] ?? ""),
-    value: Number(f[n] ?? 0)
+  const s = e.map((m) => ({
+    name: String(m[t] ?? ""),
+    value: Number(m[n] ?? 0)
   })), h = {
     type: "pie",
-    radius: r.donut ? ["40%", "70%"] : "50%",
+    radius: i.donut ? ["40%", "70%"] : "50%",
     data: s,
     label: { overflow: "truncate", width: 80 }
   };
-  r.showLabel === !1 && (h.label = { show: !1 });
-  const d = {
+  i.showLabel === !1 && (h.label = { show: !1 });
+  const y = {
     tooltip: { trigger: "item" },
     legend: { orient: "vertical", left: "left" },
     series: [h]
-  }, m = r.center;
-  if (r.donut && m && (m.label || m.value)) {
-    const f = [];
-    m.label && f.push({
+  }, u = i.center;
+  if (i.donut && u && (u.label || u.value)) {
+    const m = [];
+    u.label && m.push({
       type: "text",
-      top: m.value ? -16 : 0,
-      style: { text: m.label, fontSize: 13, fill: "#999", textAlign: "center" }
-    }), m.value && f.push({
+      top: u.value ? -16 : 0,
+      style: { text: u.label, fontSize: 13, fill: "#999", textAlign: "center" }
+    }), u.value && m.push({
       type: "text",
-      top: m.label ? 8 : 0,
-      style: { text: m.value, fontSize: 20, fontWeight: "bold", fill: "#333", textAlign: "center" }
-    }), d.graphic = [{ type: "group", left: "center", top: "middle", children: f }];
+      top: u.label ? 8 : 0,
+      style: { text: u.value, fontSize: 20, fontWeight: "bold", fill: "#333", textAlign: "center" }
+    }), y.graphic = [{ type: "group", left: "center", top: "middle", children: m }];
   }
-  return d;
+  return y;
 }
-function fe(e, i, r) {
+function fe(e, r, i) {
   if (!Array.isArray(e)) return {};
-  const t = i?.axis ?? C(e), n = i?.y ?? I(e);
+  const t = r?.axis ?? C(e), n = r?.y ?? I(e);
   if (!t || n.length === 0) return {};
   const s = e.map((h) => ({
     name: String(h[t] ?? "")
-  })), u = n.map((h) => ({
+  })), f = n.map((h) => ({
     name: h,
-    value: e.map((d) => Number(d[h] ?? 0))
+    value: e.map((y) => Number(y[h] ?? 0))
   }));
   return {
     tooltip: {},
@@ -244,38 +249,38 @@ function fe(e, i, r) {
     series: [
       {
         type: "radar",
-        data: u
+        data: f
       }
     ]
   };
 }
-function ye(e, i, r) {
+function ye(e, r, i) {
   if (!Array.isArray(e)) return {};
-  const t = e[0] ?? {}, n = Object.keys(t), s = n.filter((o) => typeof t[o] == "string"), u = n.filter((o) => typeof t[o] == "number"), h = i?.x ?? s[0], d = i?.y?.[0] ?? s.find((o) => o !== h), m = i?.value ?? u[0];
-  if (!h || !d || !m) return {};
-  const f = [], x = [], g = /* @__PURE__ */ new Set(), A = /* @__PURE__ */ new Set();
-  for (const o of e) {
-    const p = String(o[h] ?? ""), w = String(o[d] ?? "");
-    g.has(p) || (g.add(p), f.push(p)), A.has(w) || (A.add(w), x.push(w));
+  const t = e[0] ?? {}, n = Object.keys(t), s = n.filter((a) => typeof t[a] == "string"), f = n.filter((a) => typeof t[a] == "number"), h = r?.x ?? s[0], y = r?.y?.[0] ?? s.find((a) => a !== h), u = r?.value ?? f[0];
+  if (!h || !y || !u) return {};
+  const m = [], g = [], x = /* @__PURE__ */ new Set(), A = /* @__PURE__ */ new Set();
+  for (const a of e) {
+    const b = String(a[h] ?? ""), w = String(a[y] ?? "");
+    x.has(b) || (x.add(b), m.push(b)), A.has(w) || (A.add(w), g.push(w));
   }
-  const y = /* @__PURE__ */ new Map();
-  f.forEach((o, p) => y.set(o, p));
-  const b = /* @__PURE__ */ new Map();
-  x.forEach((o, p) => b.set(o, p));
+  const d = /* @__PURE__ */ new Map();
+  m.forEach((a, b) => d.set(a, b));
+  const p = /* @__PURE__ */ new Map();
+  g.forEach((a, b) => p.set(a, b));
   const S = [];
-  let a = 1 / 0, l = -1 / 0;
-  for (const o of e) {
-    const p = y.get(String(o[h] ?? "")) ?? 0, w = b.get(String(o[d] ?? "")) ?? 0, v = o[m] != null ? Number(o[m]) : null;
-    S.push([p, w, v]), v != null && (v < a && (a = v), v > l && (l = v));
+  let o = 1 / 0, l = -1 / 0;
+  for (const a of e) {
+    const b = d.get(String(a[h] ?? "")) ?? 0, w = p.get(String(a[y] ?? "")) ?? 0, v = a[u] != null ? Number(a[u]) : null;
+    S.push([b, w, v]), v != null && (v < o && (o = v), v > l && (l = v));
   }
-  isFinite(a) || (a = 0, l = 1);
-  const c = r.colorRange ?? ["#313695", "#4575b4", "#74add1", "#abd9e9", "#fee090", "#fdae61", "#f46d43", "#d73027"];
+  isFinite(o) || (o = 0, l = 1);
+  const c = i.colorRange ?? ["#313695", "#4575b4", "#74add1", "#abd9e9", "#fee090", "#fdae61", "#f46d43", "#d73027"];
   return {
-    xAxis: { type: "category", data: f, splitArea: { show: !0 } },
-    yAxis: { type: "category", data: x, splitArea: { show: !0 } },
+    xAxis: { type: "category", data: m, splitArea: { show: !0 } },
+    yAxis: { type: "category", data: g, splitArea: { show: !0 } },
     visualMap: {
-      min: r.min != null ? Number(r.min) : a,
-      max: r.max != null ? Number(r.max) : l,
+      min: i.min != null ? Number(i.min) : o,
+      max: i.max != null ? Number(i.max) : l,
       calculable: !0,
       orient: "horizontal",
       left: "center",
@@ -284,58 +289,58 @@ function ye(e, i, r) {
     },
     tooltip: {
       trigger: "item",
-      formatter: (o) => {
-        const p = o.data;
-        return p ? `${f[p[0]]} × ${x[p[1]]}: ${p[2] != null ? p[2] : "-"}` : "";
+      formatter: (a) => {
+        const b = a.data;
+        return b ? `${m[b[0]]} × ${g[b[1]]}: ${b[2] != null ? b[2] : "-"}` : "";
       }
     },
     grid: { bottom: 60 },
     series: [{
       type: "heatmap",
       data: S,
-      label: { show: r.showLabel !== !1 }
+      label: { show: i.showLabel !== !1 }
     }]
   };
 }
-function he(e, i, r) {
+function he(e, r, i) {
   if (!Array.isArray(e) || e.length === 0) return {};
-  const t = e[0] ?? {}, n = Object.keys(t), s = n.filter((g) => typeof t[g] == "string"), u = n.filter((g) => typeof t[g] == "number"), h = i?.x ?? s[0];
-  let d;
-  if (i?.y && i.y.length >= 5)
-    d = i.y.slice(0, 5);
+  const t = e[0] ?? {}, n = Object.keys(t), s = n.filter((x) => typeof t[x] == "string"), f = n.filter((x) => typeof t[x] == "number"), h = r?.x ?? s[0];
+  let y;
+  if (r?.y && r.y.length >= 5)
+    y = r.y.slice(0, 5);
   else {
-    const A = ["min", "q1", "median", "q3", "max"].filter((y) => u.includes(y));
-    d = A.length === 5 ? A : u.slice(0, 5);
+    const A = ["min", "q1", "median", "q3", "max"].filter((d) => f.includes(d));
+    y = A.length === 5 ? A : f.slice(0, 5);
   }
-  if (d.length < 5) return {};
-  const m = h ? e.map((g) => String(g[h] ?? "")) : void 0, f = e.map(
-    (g) => d.map((A) => Number(g[A] ?? 0))
-  ), x = {
+  if (y.length < 5) return {};
+  const u = h ? e.map((x) => String(x[h] ?? "")) : void 0, m = e.map(
+    (x) => y.map((A) => Number(x[A] ?? 0))
+  ), g = {
     tooltip: { trigger: "item" },
     series: [{
       type: "boxplot",
-      data: f
+      data: m
     }]
   };
-  return m ? (x.xAxis = { type: "category", data: m }, x.yAxis = { type: "value" }) : (x.xAxis = { type: "category" }, x.yAxis = { type: "value" }), x;
+  return u ? (g.xAxis = { type: "category", data: u }, g.yAxis = { type: "value" }) : (g.xAxis = { type: "category" }, g.yAxis = { type: "value" }), g;
 }
 function C(e) {
   if (e.length === 0) return;
-  const i = e[0];
-  return Object.keys(i).find((r) => typeof i[r] == "string");
+  const r = e[0];
+  return Object.keys(r).find((i) => typeof r[i] == "string");
 }
 function _(e) {
   if (e.length === 0) return;
-  const i = e[0];
-  return Object.keys(i).find((r) => typeof i[r] == "number");
+  const r = e[0];
+  return Object.keys(r).find((i) => typeof r[i] == "number");
 }
-function me(e, i, r) {
+function me(e, r, i) {
   if (!Array.isArray(e)) return {};
-  const t = i?.label ?? C(e), n = i?.value ?? _(e);
+  const t = r?.label ?? C(e), n = r?.value ?? _(e);
   if (!t || !n) return {};
-  const s = e.map((u) => ({
-    name: String(u[t] ?? ""),
-    value: Number(u[n] ?? 0)
+  const s = e.map((f) => ({
+    name: String(f[t] ?? ""),
+    value: Number(f[n] ?? 0)
   }));
   return {
     tooltip: { trigger: "item", formatter: "{b}: {c} ({d}%)" },
@@ -349,19 +354,19 @@ function me(e, i, r) {
     }]
   };
 }
-function de(e, i, r) {
+function de(e, r, i) {
   if (!Array.isArray(e)) return {};
-  const t = e, n = i?.x ?? C(t), s = (i?.y ?? [_(t)])[0];
+  const t = e, n = r?.x ?? C(t), s = (r?.y ?? [_(t)])[0];
   if (!n || !s) return {};
-  const u = [], h = [], d = [], m = [];
-  let f = 0;
-  for (const x of t) {
-    const g = String(x[n] ?? ""), A = Number(x[s] ?? 0);
-    u.push(g), A >= 0 ? (h.push(f), d.push(A), m.push(null)) : (h.push(f + A), d.push(null), m.push(Math.abs(A))), f += A;
+  const f = [], h = [], y = [], u = [];
+  let m = 0;
+  for (const g of t) {
+    const x = String(g[n] ?? ""), A = Number(g[s] ?? 0);
+    f.push(x), A >= 0 ? (h.push(m), y.push(A), u.push(null)) : (h.push(m + A), y.push(null), u.push(Math.abs(A))), m += A;
   }
   return {
     tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
-    xAxis: { type: "category", data: u },
+    xAxis: { type: "category", data: f },
     yAxis: { type: "value" },
     series: [
       {
@@ -376,25 +381,25 @@ function de(e, i, r) {
         name: "Positive",
         type: "bar",
         stack: "waterfall",
-        data: d
+        data: y
       },
       {
         name: "Negative",
         type: "bar",
         stack: "waterfall",
-        data: m
+        data: u
       }
     ]
   };
 }
-function be(e, i) {
+function pe(e, r) {
   if (!Array.isArray(e)) return {};
-  const r = e.map((t) => j(t));
+  const i = e.map((t) => j(t));
   return {
     tooltip: { trigger: "item" },
     series: [{
       type: "treemap",
-      data: r,
+      data: i,
       leafDepth: 1,
       roam: !1,
       label: { show: !0, formatter: "{b}" }
@@ -402,80 +407,80 @@ function be(e, i) {
   };
 }
 function j(e) {
-  const i = {
+  const r = {
     name: String(e.name ?? ""),
     value: Number(e.value ?? 0)
   };
-  return Array.isArray(e.children) && (i.children = e.children.map((r) => j(r))), i;
+  return Array.isArray(e.children) && (r.children = e.children.map((i) => j(i))), r;
 }
-function pe(e, i, r) {
+function be(e, r, i) {
   let t;
   if (!Array.isArray(e) || e.length === 0) return {};
   if (typeof e[0] == "number")
     t = e;
   else {
-    const y = i?.value ?? _(e);
-    if (!y) return {};
-    t = e.map((b) => Number(b[y] ?? 0));
+    const d = r?.value ?? _(e);
+    if (!d) return {};
+    t = e.map((p) => Number(p[d] ?? 0));
   }
   if (t.length === 0) return {};
-  const n = typeof r.bins == "number" ? r.bins : Math.ceil(Math.log2(t.length) + 1), s = Math.min(...t), d = (Math.max(...t) - s) / n || 1, m = new Array(n).fill(0), f = [];
-  for (let y = 0; y < n; y++) {
-    const b = s + y * d, S = s + (y + 1) * d, a = (l) => Number.isInteger(l) ? String(l) : l.toFixed(1);
-    f.push(`${a(b)}–${a(S)}`);
+  const n = typeof i.bins == "number" ? i.bins : Math.ceil(Math.log2(t.length) + 1), s = Math.min(...t), y = (Math.max(...t) - s) / n || 1, u = new Array(n).fill(0), m = [];
+  for (let d = 0; d < n; d++) {
+    const p = s + d * y, S = s + (d + 1) * y, o = (l) => Number.isInteger(l) ? String(l) : l.toFixed(1);
+    m.push(`${o(p)}–${o(S)}`);
   }
-  for (const y of t) {
-    let b = Math.floor((y - s) / d);
-    b >= n && (b = n - 1), m[b]++;
+  for (const d of t) {
+    let p = Math.floor((d - s) / y);
+    p >= n && (p = n - 1), u[p]++;
   }
-  const x = {
+  const g = {
     type: "bar",
-    data: m,
+    data: u,
     barCategoryGap: "0%"
-  }, g = {
-    xAxis: { type: "category", data: f, axisTick: { alignWithLabel: !0 } },
+  }, x = {
+    xAxis: { type: "category", data: m, axisTick: { alignWithLabel: !0 } },
     yAxis: { type: "value" },
-    series: [x],
+    series: [g],
     tooltip: { trigger: "axis" }
-  }, A = r.referenceLines;
-  return Array.isArray(A) && A.length > 0 && (x.markLine = {
+  }, A = i.referenceLines;
+  return Array.isArray(A) && A.length > 0 && (g.markLine = {
     silent: !0,
     symbol: "none",
-    data: A.map((y) => {
-      const b = {};
-      y.axis === "x" ? b.xAxis = y.value : b.yAxis = y.value, y.label && (b.name = y.label);
+    data: A.map((d) => {
+      const p = {};
+      d.axis === "x" ? p.xAxis = d.value : p.yAxis = d.value, d.label && (p.name = d.label);
       const S = {};
-      return y.color && (S.color = y.color), y.style && (S.type = y.style), Object.keys(S).length > 0 && (b.lineStyle = S), y.label && (b.label = { formatter: y.label, position: "end" }), b;
+      return d.color && (S.color = d.color), d.style && (S.type = d.style), Object.keys(S).length > 0 && (p.lineStyle = S), d.label && (p.label = { formatter: d.label, position: "end" }), p;
     })
-  }), g;
+  }), x;
 }
 function I(e) {
   if (e.length === 0) return [];
-  const i = e[0];
-  return Object.keys(i).filter((r) => typeof i[r] == "number");
+  const r = e[0];
+  return Object.keys(r).filter((i) => typeof r[i] == "number");
 }
-function V(e, i) {
-  const r = { ...e };
-  for (const t of Object.keys(i)) {
-    const n = e[t], s = i[t];
-    z(n) && z(s) ? r[t] = V(n, s) : r[t] = s;
+function V(e, r) {
+  const i = { ...e };
+  for (const t of Object.keys(r)) {
+    const n = e[t], s = r[t];
+    L(n) && L(s) ? i[t] = V(n, s) : i[t] = s;
   }
-  return r;
+  return i;
 }
-function z(e) {
+function L(e) {
   return e != null && typeof e == "object" && !Array.isArray(e);
 }
-function xe(e, i) {
-  return (r) => {
+function ge(e, r) {
+  return (i) => {
     let t;
     if (e.type) {
       const n = e.type === "currency" && e.currency ? `currency:${e.currency}` : e.type;
-      t = q(r, n, i), e.type === "percent" && (t = typeof r == "number" ? new Intl.NumberFormat(i, { maximumFractionDigits: e.decimals ?? 2 }).format(r) + "%" : String(r) + "%");
+      t = q(i, n, r), e.type === "percent" && (t = typeof i == "number" ? new Intl.NumberFormat(r, { maximumFractionDigits: e.decimals ?? 2 }).format(i) + "%" : String(i) + "%");
     } else
-      t = String(r);
+      t = String(i);
     if (e.decimals !== void 0 && e.type === "number") {
-      const n = Number(r);
-      isNaN(n) || (t = new Intl.NumberFormat(i, {
+      const n = Number(i);
+      isNaN(n) || (t = new Intl.NumberFormat(r, {
         minimumFractionDigits: e.decimals,
         maximumFractionDigits: e.decimals
       }).format(n));
@@ -483,20 +488,20 @@ function xe(e, i) {
     return e.prefix && (t = e.prefix + t), e.suffix && (t = t + e.suffix), t;
   };
 }
-function L(e, i, r, t) {
-  if (!r || !e[i]) return;
-  const n = xe(r, t), s = e[i];
+function z(e, r, i, t) {
+  if (!i || !e[r]) return;
+  const n = ge(i, t), s = e[r];
   if (Array.isArray(s))
-    e[i] = s.map((u) => u.type === "value" ? { ...u, axisLabel: { ...u.axisLabel ?? {}, formatter: n } } : u);
-  else if (z(s)) {
-    const u = s;
-    e[i] = { ...u, axisLabel: { ...u.axisLabel ?? {}, formatter: n } };
+    e[r] = s.map((f) => f.type === "value" ? { ...f, axisLabel: { ...f.axisLabel ?? {}, formatter: n } } : f);
+  else if (L(s)) {
+    const f = s;
+    e[r] = { ...f, axisLabel: { ...f.axisLabel ?? {}, formatter: n } };
   }
 }
-var ge = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, D = (e, i, r, t) => {
-  for (var n = t > 1 ? void 0 : t ? Ae(i, r) : i, s = e.length - 1, u; s >= 0; s--)
-    (u = e[s]) && (n = (t ? u(i, r, n) : u(n)) || n);
-  return t && n && ge(i, r, n), n;
+var xe = Object.defineProperty, Ae = Object.getOwnPropertyDescriptor, D = (e, r, i, t) => {
+  for (var n = t > 1 ? void 0 : t ? Ae(r, i) : r, s = e.length - 1, f; s >= 0; s--)
+    (f = e[s]) && (n = (t ? f(r, i, n) : f(n)) || n);
+  return t && n && xe(r, i, n), n;
 };
 O.use([
   H,
@@ -513,15 +518,15 @@ O.use([
   ie,
   se,
   ne,
-  ae,
-  oe
+  oe,
+  ae
 ]);
-let k = class extends T {
+let k = class extends P {
   constructor() {
     super(...arguments), this.spec = null, this._chart = null, this._container = null, this._resizeObserver = null;
   }
   render() {
-    if (!this.spec) return E;
+    if (!this.spec) return T;
     const e = this.spec.title ?? `${this.spec.widget} chart`;
     return R`<div class="chart-container" part="chart" role="img" aria-label=${e}></div>`;
   }
@@ -543,7 +548,7 @@ let k = class extends T {
   }
   _onChartClick(e) {
     if (!this.spec) return;
-    const i = {
+    const r = {
       type: "select",
       widget: this.spec.widget,
       id: this.spec.id,
@@ -556,7 +561,7 @@ let k = class extends T {
     };
     this.dispatchEvent(
       new CustomEvent("u-widget-internal", {
-        detail: i,
+        detail: r,
         bubbles: !0,
         composed: !0
       })
@@ -568,38 +573,41 @@ let k = class extends T {
     if (!(Array.isArray(
       this.spec.options?.colors
     ) && this.spec.options.colors.length > 0)) {
-      const r = this._readThemeColors();
-      r.length > 0 && (e.color = r);
+      const t = this._readThemeColors();
+      t.length > 0 && (e.color = t);
     }
-    this._readCSSVar("--u-widget-bg") && (e.backgroundColor = "transparent"), this._applyThemeStyle(e), this._chart.setOption(e, !0);
+    !!!this.spec.options?.echarts?.backgroundColor && this._readCSSVar("--u-widget-bg") && (e.backgroundColor = "transparent"), this._applyThemeStyle(e), this._chart.setOption(e, !0);
   }
   _applyThemeStyle(e) {
-    const i = this._readCSSVar("--u-widget-text"), r = this._readCSSVar("--u-widget-text-secondary"), t = this._readCSSVar("--u-widget-border");
-    if (!i) return;
-    e.textStyle = { ...e.textStyle, color: i };
+    const r = this._readCSSVar("--u-widget-text"), i = this._readCSSVar("--u-widget-text-secondary"), t = this._readCSSVar("--u-widget-border");
+    if (!r) return;
+    e.textStyle = { ...e.textStyle, color: r };
     const n = (s) => {
       if (!s || typeof s != "object") return s;
       if (Array.isArray(s)) return s.map(n);
-      const u = s;
+      const f = s, h = f.axisLine ?? {}, y = h.lineStyle ?? {}, u = f.splitLine ?? {}, m = u.lineStyle ?? {};
       return {
-        ...u,
-        axisLabel: { ...u.axisLabel ?? {}, color: r || i },
-        axisLine: { lineStyle: { color: t || r } },
-        splitLine: { lineStyle: { color: t } }
+        ...f,
+        axisLabel: { ...f.axisLabel ?? {}, color: i || r },
+        axisLine: { ...h, lineStyle: { ...y, color: t || i } },
+        splitLine: { ...u, lineStyle: { ...m, color: t } }
       };
     };
-    e.xAxis && (e.xAxis = n(e.xAxis)), e.yAxis && (e.yAxis = n(e.yAxis)), e.legend && typeof e.legend == "object" && (e.legend = { ...e.legend, textStyle: { color: i } });
+    if (e.xAxis && (e.xAxis = n(e.xAxis)), e.yAxis && (e.yAxis = n(e.yAxis)), e.legend && typeof e.legend == "object") {
+      const s = e.legend;
+      e.legend = { ...s, textStyle: { ...s.textStyle ?? {}, color: r } };
+    }
   }
   _readThemeColors() {
     const e = [];
-    for (let i = 1; i <= 10; i++) {
-      const r = this._readCSSVar(`--u-widget-chart-color-${i}`);
-      if (r) e.push(r);
+    for (let r = 1; r <= 10; r++) {
+      const i = this._readCSSVar(`--u-widget-chart-color-${r}`);
+      if (i) e.push(i);
       else break;
     }
     if (e.length === 0) {
-      const i = this._readCSSVar("--u-widget-primary");
-      i && e.push(i);
+      const r = this._readCSSVar("--u-widget-primary");
+      r && e.push(r);
     }
     return e;
   }
@@ -616,7 +624,7 @@ let k = class extends T {
 };
 k.styles = [
   G,
-  P`
+  E`
       :host {
         display: block;
         container: uw-chart / inline-size;