@carto/ps-react-ui 4.17.3 → 4.18.0

package/dist/widgets-v2/pie.js

@@ -1,8 +1,8 @@
-import * as N from "echarts";
-import { g as O, d as D, i as P, c as $, f as T, n as F } from "../option-builders-DPeoyQaM.js";
-import { jsx as x, jsxs as A } from "react/jsx-runtime";
-import { c as z } from "react/compiler-runtime";
-import { Skeleton as I, Box as w } from "@mui/material";
+import * as _ from "echarts";
+import { g as E, d as $, i as P, c as z, f as M, n as N } from "../option-builders-DPeoyQaM.js";
+import { jsx as x, jsxs as j } from "react/jsx-runtime";
+import { c as H } from "react/compiler-runtime";
+import { Skeleton as L, Box as I } from "@mui/material";
 import "../widget-store-Bw5zRUGg.js";
 import "zustand/shallow";
 import "@mui/icons-material";
@@ -15,23 +15,23 @@ import "@dnd-kit/core";
 import "@dnd-kit/sortable";
 import "@dnd-kit/utilities";
 import "react-dom";
-import { m as E, r as M } from "../resolve-theme-color-BdojIw0K.js";
+import { m as V, r as B } from "../resolve-theme-color-BdojIw0K.js";
 import "../widget-context-DTGO0Yta.js";
 import "zustand";
 import "zustand/vanilla";
 import "zustand/middleware";
 import "zustand/react/shallow";
-import { b as V } from "../png-item-9dNbB37T.js";
-import { b as B } from "../csv-item-hH_Gt7ur.js";
-const R = ["58%", "74%"];
-function H({
+import { b as R } from "../png-item-9dNbB37T.js";
+import { b as W } from "../csv-item-hH_Gt7ur.js";
+const G = ["58%", "74%"];
+function U({
   theme: e,
   formatter: r,
   labelFormatter: t
 }) {
   return {
     legend: {
-      ...D({
+      ...$({
         hasLegend: !0,
         labelFormatter: t
       }),
@@ -44,7 +44,14 @@ function H({
       // 3–6 category case.
       left: "center",
       type: "scroll",
-      itemGap: 16
+      itemGap: 16,
+      // The legend is presentational only here — the pie has its own
+      // click-to-select affordance on the slices themselves, so legend
+      // clicks toggling series visibility would be a second, redundant/
+      // conflicting interaction model. Hover-highlight is disabled per
+      // series via `legendHoverLink` (ECharts has no legend-level knob
+      // for it).
+      selectedMode: !1
     },
     tooltip: {
       // Pie uses item-trigger (no axis); the rest of the styling mirrors
@@ -60,8 +67,8 @@ function H({
         fontSize: 11,
         fontFamily: e.typography.caption.fontFamily
       },
-      position: O(e),
-      formatter: _(r, t)
+      position: E(e),
+      formatter: D(r, t)
     },
     // V1 used `qualitative.bold` only (no `secondary.main` prefix) because
     // pie slices are categorical — each slice deserves a distinct palette
@@ -75,6 +82,7 @@ function H({
       colorBy: "data",
       avoidLabelOverlap: !0,
       selectedOffset: 0,
+      legendHoverLink: !1,
       emphasis: {
         disabled: !0
       },
@@ -101,59 +109,66 @@ function H({
     }]
   };
 }
-function ve(e) {
+function we(e) {
   const {
     theme: r,
     formatter: t,
     labelFormatter: a,
     optionsOverride: o,
     series: n
-  } = e, c = e.radius ?? R, u = e.selection, g = u && u.length > 0 ? new Set(u) : null;
-  return (d, f, b) => {
+  } = e, u = e.radius ?? G, c = e.selection, y = c == null || c.length === 0 ? null : new Set(c);
+  return (d, p, b) => {
     if (d == null) {
-      const h = H({
+      const h = U({
         theme: r,
         formatter: t,
         labelFormatter: a
       });
-      return o ? E(h, o) : h;
+      return o ? V(h, o) : h;
     }
-    const p = Array.isArray(f) ? f : [];
-    return p.length === 0 ? {
+    const g = Array.isArray(p) ? p : [];
+    return g.length === 0 ? {
       ...d,
       dataset: [],
       series: []
-    } : p.length > 1 ? G(d, p, r, n, b, g) : W(d, p, c, n, b, g);
+    } : g.length > 1 ? q(d, g, r, n, b, y) : Z(d, g, u, n, b, y);
   };
 }
-function W(e, r, t, a, o, n) {
-  const c = Array.isArray(e.series) ? e.series : [], u = c[0] ?? {}, g = typeof e.tooltip == "object" && !Array.isArray(e.tooltip) ? e.tooltip : {}, d = typeof e.legend == "object" && !Array.isArray(e.legend) ? e.legend : {}, f = o?.formatter, b = o?.labelFormatter, p = Array.isArray(e.color) ? e.color : [], h = (i) => (p.length > 0 ? p[i.dataIndex % p.length] : void 0) ?? i.color, C = (i) => {
-    const l = h(i);
-    if (!n) return l;
-    const m = i.value?.name ?? i.name;
-    return m != null && n.has(m) ? l : N.color.modifyAlpha(l, 0.15);
-  }, s = (i) => {
+function Z(e, r, t, a, o, n) {
+  const u = Array.isArray(e.series) ? e.series : [], c = u[0] ?? {}, y = typeof e.tooltip == "object" && !Array.isArray(e.tooltip) ? e.tooltip : {}, d = typeof e.legend == "object" && !Array.isArray(e.legend) ? e.legend : {}, p = o?.formatter, b = o?.labelFormatter, g = Array.isArray(e.color) ? e.color : [], h = (i) => (g.length > 0 ? g[i.dataIndex % g.length] : void 0) ?? i.color, k = (i) => {
+    const s = h(i);
+    if (!n) return s;
+    const f = i.value?.name ?? i.name;
+    return f != null && n.has(f) ? s : _.color.modifyAlpha(s, 0.15);
+  }, l = r[0] ?? [];
+  let m, S = -1 / 0;
+  for (const i of l)
+    n && !n.has(i.name) || typeof i.value == "number" && i.value > S && (S = i.value, m = i.name);
+  const A = (i) => {
     const {
-      name: l
-    } = i, y = i.encode?.value?.[0];
-    if (y === void 0) return "";
-    const m = Object.values(i.data ?? {}).at(y), S = typeof m == "number" ? f ? f(m) : String(m) : typeof m == "string" ? m : "", j = String(b ? b(l ?? "") : l ?? "");
-    return `{c|${S}}
+      name: s
+    } = i;
+    if (s == null || s !== m) return "";
+    const w = i.encode?.value?.[0];
+    if (w === void 0) return "";
+    const f = Object.values(i.data ?? {}).at(w), C = typeof f == "number" ? p ? p(f) : String(f) : typeof f == "string" ? f : "", F = String(b ? b(s ?? "") : s ?? "");
+    return `{c|${C}}
 
-{b|${j}}`;
+{b|${F}}`;
   };
   return {
     ...e,
     dataset: r.map((i) => ({
       source: i
     })),
-    series: r.map((i, l) => {
-      const y = c[l] ?? u, m = typeof y == "object" ? y : {}, S = m.label ?? {}, j = m.itemStyle ?? {};
+    series: r.map((i, s) => {
+      const w = u[s] ?? c, f = typeof w == "object" ? w : {}, C = f.label ?? {}, F = f.itemStyle ?? {};
       return {
-        ...m,
+        ...f,
         type: "pie",
-        datasetIndex: l,
-        name: a?.[l]?.name ?? `Series ${l + 1}`,
+        legendHoverLink: !1,
+        datasetIndex: s,
+        name: a?.[s]?.name ?? `Series ${s + 1}`,
         radius: [...t],
         // Lift the donut up so the bottom-anchored legend has the
         // vertical real estate to wrap to multiple rows for long
@@ -166,67 +181,83 @@ function W(e, r, t, a, o, n) {
           value: "value"
         },
         label: {
-          ...S,
-          formatter: s
+          ...C,
+          formatter: A
         },
         itemStyle: {
-          ...j,
-          color: C
+          ...F,
+          color: k
         }
       };
     }),
     // Legend always shows for pie (mirrors v1) — slice names drive the
     // entries, so even a single donut benefits from a category list.
+    //
+    // Exclusion is conveyed purely via `colorFn`/`labelTextFormatter`
+    // dimming above, never via the legend's `selected` map: for a pie
+    // series, ECharts treats `legend.selected[name] = false` as "remove
+    // this data point," which recomputes every remaining slice's angle —
+    // the excluded slice disappears instead of rendering dimmed. Forcing
+    // every name to `true` on every render also overrides ECharts' own
+    // internal toggle state from a native legend click (which flips a
+    // name to `false` and hides it before our `legendselectchanged`
+    // handler gets a chance to react), so a legend click never leaves a
+    // slice structurally removed — only the color/label dimming reflects
+    // exclusion, and it stays in sync with the slice itself since both
+    // read `selectionSet` on the same render.
     legend: {
       ...d,
-      show: !0
+      show: !0,
+      selectedMode: !1,
+      selected: Object.fromEntries((r[0] ?? []).map((i) => [String(i.name), !0]))
     },
     tooltip: {
-      ...g,
-      formatter: _(f, b)
+      ...y,
+      formatter: D(p, b)
     }
   };
 }
-function G(e, r, t, a, o, n) {
-  const c = typeof e.tooltip == "object" && !Array.isArray(e.tooltip) ? e.tooltip : {}, u = typeof e.legend == "object" && !Array.isArray(e.legend) ? e.legend : {}, g = typeof e.grid == "object" && !Array.isArray(e.grid) ? e.grid : {}, d = o?.formatter, f = o?.labelFormatter, {
+function q(e, r, t, a, o, n) {
+  const u = typeof e.tooltip == "object" && !Array.isArray(e.tooltip) ? e.tooltip : {}, c = typeof e.legend == "object" && !Array.isArray(e.legend) ? e.legend : {}, y = typeof e.grid == "object" && !Array.isArray(e.grid) ? e.grid : {}, d = o?.formatter, p = o?.labelFormatter, {
     niceMinVal: b,
-    niceMaxVal: p
-  } = Z(r), h = Array.isArray(e.color) ? e.color : [], C = (s) => {
-    const i = s.seriesIndex ?? 0, y = (h.length > 0 ? h[i % h.length] : void 0) ?? s.color;
-    if (!n) return y;
-    const S = s.value?.name ?? s.name;
-    return S != null && n.has(S) ? y : N.color.modifyAlpha(y, 0.15);
+    niceMaxVal: g
+  } = K(r), h = Array.isArray(e.color) ? e.color : [], k = (l) => {
+    const m = l.seriesIndex ?? 0, A = (h.length > 0 ? h[m % h.length] : void 0) ?? l.color;
+    if (!n) return A;
+    const s = l.value?.name ?? l.name;
+    return s != null && n.has(s) ? A : _.color.modifyAlpha(A, 0.15);
   };
   return {
     ...e,
-    dataset: r.map((s) => ({
-      source: s
+    dataset: r.map((l) => ({
+      source: l
     })),
     grid: {
-      ...g,
-      ...$(!0, t),
+      ...y,
+      ...z(!0, t),
       right: parseInt(t.spacing(4)),
       containLabel: !0
     },
     // Drop pie-specific structural keys that shouldn't render in the
     // bar fallback. ECharts ignores undefined keys, so this is a clean
     // override.
-    series: r.map((s, i) => {
-      const l = M(t, a?.[i]?.color);
+    series: r.map((l, m) => {
+      const S = B(t, a?.[m]?.color);
       return {
-        datasetIndex: i,
+        datasetIndex: m,
         type: "bar",
-        name: a?.[i]?.name ?? `Series ${i + 1}`,
+        name: a?.[m]?.name ?? `Series ${m + 1}`,
         barMaxWidth: 100,
+        legendHoverLink: !1,
         emphasis: {
           focus: "series"
         },
         ...P(d, "x"),
         itemStyle: {
-          color: C
+          color: k
         },
-        ...l ? {
-          color: l
+        ...S ? {
+          color: S
         } : {}
       };
     }),
@@ -235,7 +266,7 @@ function G(e, r, t, a, o, n) {
       // Closures over the pre-computed nice bounds — ECharts calls them
       // once per render to resolve the axis extents.
       min: () => b,
-      max: () => p,
+      max: () => g,
       axisLine: {
         show: !1
       },
@@ -262,7 +293,7 @@ function G(e, r, t, a, o, n) {
         margin: parseInt(t.spacing(1)),
         showMaxLabel: !0,
         showMinLabel: !0,
-        formatter: (s) => s !== p && s !== b || s === 0 ? "" : d ? d(s) : String(s)
+        formatter: (l) => l !== g && l !== b || l === 0 ? "" : d ? d(l) : String(l)
       }
     },
     yAxis: {
@@ -275,55 +306,63 @@ function G(e, r, t, a, o, n) {
       },
       axisLabel: {
         padding: [parseInt(t.spacing(0.5)), 0, 0, 0],
-        ...f && {
-          formatter: (s) => String(f(s))
+        ...p && {
+          formatter: (l) => String(p(l))
         }
       }
     },
+    // Mirrors the donut branch's `selected` reset above — `selectedMode:
+    // false` blocks the native legend click that would otherwise undo an
+    // ECharts-internal toggle, so without forcing every entry back to
+    // `true` here a prior native toggle (from before `selectedMode` took
+    // effect, or a stale `keepAlive` instance) would stay hidden forever
+    // with no way to restore it.
     legend: {
-      ...u,
-      show: !0
+      ...c,
+      show: !0,
+      selectedMode: !1,
+      selected: Object.fromEntries(r.map((l, m) => [a?.[m]?.name ?? `Series ${m + 1}`, !0]))
     },
     tooltip: {
-      ...c,
+      ...u,
       trigger: "axis",
-      formatter: U(d, f)
+      formatter: J(d, p)
     }
   };
 }
-function U(e, r) {
-  return T((t) => {
-    const a = t.encode?.x?.at(0), o = a !== void 0 ? t.dimensionNames?.[a] : void 0, n = t.value && typeof t.value == "object" && !Array.isArray(t.value) ? t.value : void 0, c = o && n ? n[o] : void 0, u = typeof c == "number" && e ? e(c) : c ?? "", g = typeof t.marker == "string" ? t.marker : "", d = t.seriesName ? `${t.seriesName}: ` : "";
+function J(e, r) {
+  return M((t) => {
+    const a = t.encode?.x?.at(0), o = a !== void 0 ? t.dimensionNames?.[a] : void 0, n = t.value && typeof t.value == "object" && !Array.isArray(t.value) ? t.value : void 0, u = o && n ? n[o] : void 0, c = typeof u == "number" && e ? e(u) : u ?? "", y = typeof t.marker == "string" ? t.marker : "", d = t.seriesName ? `${t.seriesName}: ` : "";
     return {
       name: String(r ? r(t.name ?? "") : t.name ?? ""),
       seriesName: d,
-      marker: g,
-      value: u
+      marker: y,
+      value: c
     };
   });
 }
-function Z(e) {
+function K(e) {
   let r = 0, t = -1 / 0;
   for (const a of e)
     for (const o of a)
       typeof o?.value != "number" || !Number.isFinite(o.value) || (o.value < r && (r = o.value), o.value > t && (t = o.value));
   return {
-    niceMinVal: r < 0 ? F(r) : 0,
-    niceMaxVal: t <= 0 ? 1 : F(t)
+    niceMinVal: r < 0 ? N(r) : 0,
+    niceMaxVal: t <= 0 ? 1 : N(t)
   };
 }
-function _(e, r) {
-  return T((t) => {
-    const a = t.encode?.value?.at(0) ?? 1, n = (t.value && typeof t.value == "object" && !Array.isArray(t.value) ? Object.values(t.value) : [])[a], c = typeof n == "number" && e ? e(n) : n ?? "", u = typeof t.marker == "string" ? t.marker : "", g = t.seriesName ? `${t.seriesName}: ` : "";
+function D(e, r) {
+  return M((t) => {
+    const a = t.encode?.value?.at(0) ?? 1, n = (t.value && typeof t.value == "object" && !Array.isArray(t.value) ? Object.values(t.value) : [])[a], u = typeof n == "number" && e ? e(n) : n ?? "", c = typeof t.marker == "string" ? t.marker : "", y = t.seriesName ? `${t.seriesName}: ` : "";
     return {
       name: String(r ? r(t.name ?? "") : t.name ?? ""),
-      seriesName: g,
-      marker: u,
-      value: c
+      seriesName: y,
+      marker: c,
+      value: u
     };
   });
 }
-const L = 160, k = 96, v = {
+const O = 160, T = 96, v = {
   root: {
     display: "flex",
     flexDirection: "column",
@@ -342,14 +381,14 @@ const L = 160, k = 96, v = {
     justifyContent: "center"
   },
   ring: {
-    width: L,
-    height: L
+    width: O,
+    height: O
   },
   hole: {
     position: "absolute",
     zIndex: 1,
-    width: k,
-    height: k,
+    width: T,
+    height: T,
     borderRadius: "50%",
     bgcolor: "background.paper"
   },
@@ -379,55 +418,55 @@ const L = 160, k = 96, v = {
     }) => e(1.5)
   }
 };
-function xe(e) {
-  const r = z(4);
+function Ie(e) {
+  const r = H(4);
   let t, a;
-  r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ x(I, { variant: "circular", sx: v.ring }), a = /* @__PURE__ */ x(w, { sx: v.hole }), r[0] = t, r[1] = a) : (t = r[0], a = r[1]);
+  r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ x(L, { variant: "circular", sx: v.ring }), a = /* @__PURE__ */ x(I, { sx: v.hole }), r[0] = t, r[1] = a) : (t = r[0], a = r[1]);
   let o;
-  r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ A(w, { sx: v.donut, children: [
+  r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ j(I, { sx: v.donut, children: [
     t,
     a,
-    /* @__PURE__ */ A(w, { sx: v.label, children: [
-      /* @__PURE__ */ x(I, { width: 56, height: 18 }),
-      /* @__PURE__ */ x(I, { width: 36, height: 8 })
+    /* @__PURE__ */ j(I, { sx: v.label, children: [
+      /* @__PURE__ */ x(L, { width: 56, height: 18 }),
+      /* @__PURE__ */ x(L, { width: 36, height: 8 })
     ] })
   ] }), r[2] = o) : o = r[2];
   let n;
-  return r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ A(w, { sx: v.root, children: [
+  return r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ j(I, { sx: v.root, children: [
     o,
-    /* @__PURE__ */ x(w, { sx: v.legend, children: [0, 1].map(q) })
+    /* @__PURE__ */ x(I, { sx: v.legend, children: [0, 1].map(Q) })
   ] }), r[3] = n) : n = r[3], n;
 }
-function q(e) {
-  return /* @__PURE__ */ A(w, { sx: v.legendItem, children: [
-    /* @__PURE__ */ x(I, { variant: "circular", width: 8, height: 8 }),
-    /* @__PURE__ */ x(I, { width: 48, height: 8 })
+function Q(e) {
+  return /* @__PURE__ */ j(I, { sx: v.legendItem, children: [
+    /* @__PURE__ */ x(L, { variant: "circular", width: 8, height: 8 }),
+    /* @__PURE__ */ x(L, { width: 48, height: 8 })
   ] }, `legend-${e}`);
 }
-function Se(e) {
+function Ae(e) {
   const r = [];
-  return e.getCaptureEl && r.push(V({
+  return e.getCaptureEl && r.push(R({
     filename: e.filename,
     getCaptureEl: e.getCaptureEl,
     pixelRatio: e.pngPixelRatio,
     backgroundColor: e.pngBackgroundColor
-  })), r.push(B({
+  })), r.push(W({
     filename: e.filename,
     getRows: () => {
       const t = e.getData(), a = [["series", "name", "value"]];
       for (const [o, n] of t.entries()) {
-        const c = e.seriesNames?.[o] ?? `series_${o + 1}`;
-        for (const u of n)
-          a.push([c, u.name, u.value]);
+        const u = e.seriesNames?.[o] ?? `series_${o + 1}`;
+        for (const c of n)
+          a.push([u, c.name, c.value]);
       }
       return a;
     }
   })), r;
 }
 export {
-  xe as PieSkeleton,
-  Se as createPieDownloadConfig,
-  ve as createPieOptionFactory,
-  H as pieOptions
+  Ie as PieSkeleton,
+  Ae as createPieDownloadConfig,
+  we as createPieOptionFactory,
+  U as pieOptions
 };
 //# sourceMappingURL=pie.js.map