@apipass/design-system 5.9.0 → 6.2.0

package/dist/lib/ui/components/charts/PieChart/PieChart.js

@@ -0,0 +1,178 @@
+import { jsxs as h, Fragment as ie, jsx as a } from "react/jsx-runtime";
+import { clsx as oe } from "../../../../vendor/clsx/dist/clsx.js";
+import { useState as O, useMemo as k, useCallback as ne, useEffect as L, useLayoutEffect as ce } from "react";
+import { ChartLegend as se } from "../ChartLegend/ChartLegend.js";
+import { useChartLegend as le } from "../ChartLegend/use-chart-legend.js";
+import { CHART_NEUTRAL_COLOR_TOKEN as ae } from "../chart-palette.js";
+import { formatShare as M } from "../chart-share.js";
+import { useChartInstance as de } from "../useChartInstance.js";
+import { buildPieChartOption as ue } from "./pie-chart-option.js";
+import { displayNameOf as fe, buildPieSlices as he, findSlice as R, totalOf as me, findParentSlice as pe } from "./pie-chart-slices.js";
+/* empty css              */
+const _e = {
+  others: "Others",
+  total: "Total",
+  backToPrevious: (e) => `Back from ${e}`
+}, Se = 200, be = ["percent"], ve = [];
+function Ne(e, i, c) {
+  if (!e || i.length === 0) return;
+  const s = i.includes("percent"), m = i.includes("value");
+  return s && m ? `${c(e.value)} (${M(e.share)})` : m ? c(e.value) : M(e.share);
+}
+function ge(e) {
+  const [i, c] = O(0);
+  return ce(() => {
+    if (!e) return;
+    const s = new ResizeObserver(
+      () => c(Math.min(e.clientWidth, e.clientHeight))
+    );
+    return s.observe(e), () => s.disconnect();
+  }, [e]), i;
+}
+function Me({
+  data: e,
+  shape: i = "donut",
+  labelContent: c = be,
+  showTotal: s = "auto",
+  total: m,
+  valueFormatter: p,
+  legend: $ = "inline",
+  legendPosition: D = "bottom",
+  legendValues: U = ve,
+  onSeriesColorChange: x,
+  onFocusChange: _,
+  legendLabels: j,
+  labels: H,
+  className: V,
+  ...w
+}) {
+  const { containerRef: z, chart: l, theme: o, resolveSeriesColor: G } = de(), n = { ..._e, ...H }, [u, K] = O(null), [W, X] = O(null), Z = ge(W), q = k(
+    () => e.map((t) => ({
+      id: t.id,
+      name: fe(t, n.others),
+      colorToken: t.colorToken ?? (t.isOthers ? ae : void 0)
+    })),
+    [e, n.others]
+  ), {
+    items: J,
+    colorsBySeriesId: E,
+    colorTokensBySeriesId: Q,
+    hiddenSeriesIds: C,
+    toggleSeries: Y
+  } = le(
+    q,
+    (o == null ? void 0 : o.seriesColors) ?? [],
+    G
+  ), d = k(
+    () => he({
+      nodes: e.filter((t) => !C.has(t.id)),
+      colorsByRootId: E,
+      fallbackColor: (o == null ? void 0 : o.neutralColor) ?? "#9ca3af",
+      othersName: n.others
+    }),
+    [e, C, E, o, n.others]
+  ), r = k(
+    () => u === null ? void 0 : R(d, u),
+    [d, u]
+  ), S = r ? r.children : d, f = ne(
+    (t) => {
+      K(t), _ == null || _(t);
+    },
+    [_]
+  );
+  L(() => {
+    u !== null && !r && f(null);
+  }, [u, r, f]), L(() => {
+    !l || !o || l.setOption(
+      ue({ slices: S, shape: i, labelContent: c, theme: o, valueFormatter: p }),
+      { notMerge: !0 }
+    );
+  }, [l, o, S, i, c, p]), L(() => {
+    if (!l) return;
+    function t(g) {
+      var B;
+      const A = (B = g.data) == null ? void 0 : B.id;
+      if (typeof A != "string") return;
+      const T = R(S, A);
+      T && T.children.length > 0 && f(T.id);
+    }
+    return l.on("click", t), () => {
+      l.off("click", t);
+    };
+  }, [l, S, f]);
+  function b(t) {
+    return p ? p(t) : String(t);
+  }
+  const F = J.map((t) => ({
+    ...t,
+    detail: Ne(
+      d.find((g) => g.id === t.id),
+      U,
+      b
+    )
+  })), v = s === "on" || s === "auto" && Z >= Se, N = r ? r.value : m ?? me(d), I = r ? pe(d, r.id) : void 0, ee = $ !== "none" && e.length > 0, P = /* @__PURE__ */ h(ie, { children: [
+    /* @__PURE__ */ a("span", { className: "pie-chart__total-value", children: b(N) }),
+    /* @__PURE__ */ a("span", { className: "pie-chart__total-caption", children: r ? r.name : n.total })
+  ] });
+  function y() {
+    f(I ? I.id : null);
+  }
+  function te() {
+    return r ? /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: "pie-chart__center pie-chart__center--button",
+        "aria-label": n.backToPrevious(r.name),
+        onClick: y,
+        children: v && P
+      }
+    ) : v && /* @__PURE__ */ a("div", { className: "pie-chart__center", children: P });
+  }
+  function re() {
+    return r ? /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        className: "pie-chart__footer pie-chart__footer--button",
+        "aria-label": n.backToPrevious(r.name),
+        onClick: y,
+        children: [
+          r.name,
+          v && `: ${b(N)}`
+        ]
+      }
+    ) : v && /* @__PURE__ */ a("div", { className: "pie-chart__footer", children: `${n.total}: ${b(N)}` });
+  }
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: oe("pie-chart", `pie-chart--legend-${D}`, V),
+      ...w,
+      children: [
+        ee && /* @__PURE__ */ a(
+          se,
+          {
+            className: "pie-chart__legend",
+            items: F,
+            onToggle: Y,
+            onColorChange: x,
+            colorTokensBySeriesId: Q,
+            labels: j
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: "pie-chart__body", children: [
+          /* @__PURE__ */ h("div", { ref: X, className: "pie-chart__stage", children: [
+            /* @__PURE__ */ a("div", { ref: z, className: "pie-chart__canvas" }),
+            i === "donut" && te()
+          ] }),
+          i === "pie" && re()
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Me as PieChart
+};
+//# sourceMappingURL=PieChart.js.map

package/dist/lib/ui/components/charts/PieChart/PieChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.js","sources":["../../../../../../src/ui/components/charts/PieChart/PieChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  ChartLegend,\n  type ChartLegendItem,\n  type ChartLegendLabels,\n} from \"../ChartLegend/ChartLegend\";\nimport {\n  useChartLegend,\n  type ChartLegendSeries,\n  type ChartLegendState,\n} from \"../ChartLegend/use-chart-legend\";\nimport { CHART_NEUTRAL_COLOR_TOKEN } from \"../chart-palette\";\nimport { formatShare } from \"../chart-share\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildPieChartOption,\n  type PieChartLabelContent,\n  type PieChartShape,\n} from \"./pie-chart-option\";\nimport {\n  buildPieSlices,\n  displayNameOf,\n  findParentSlice,\n  findSlice,\n  totalOf,\n  type PieChartNode,\n  type PieSlice,\n} from \"./pie-chart-slices\";\nimport \"./pie-chart.css\";\n\nexport type { PieChartNode } from \"./pie-chart-slices\";\nexport type { PieChartLabelContent, PieChartShape } from \"./pie-chart-option\";\n\nexport type PieChartLegendMode = \"inline\" | \"none\";\n\nexport type PieChartLegendPosition = \"bottom\" | \"right\" | \"top\" | \"left\";\n\nexport type PieChartLegendValue = \"percent\" | \"value\";\n\nexport type PieChartShowTotal = \"auto\" | \"on\" | \"off\";\n\nexport interface PieChartLabels {\n  others: string;\n  total: string;\n  backToPrevious: (categoryName: string) => string;\n}\n\nconst DEFAULT_LABELS: PieChartLabels = {\n  others: \"Others\",\n  total: \"Total\",\n  backToPrevious: (categoryName: string) => `Back from ${categoryName}`,\n};\n\nconst MIN_SIZE_FOR_AUTO_TOTAL_PX: number = 200;\n\nconst DEFAULT_LABEL_CONTENT: PieChartLabelContent[] = [\"percent\"];\n\nconst NO_LEGEND_VALUES: PieChartLegendValue[] = [];\n\nexport type PieChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  data: PieChartNode[];\n  shape?: PieChartShape;\n  labelContent?: PieChartLabelContent[];\n  showTotal?: PieChartShowTotal;\n  total?: number;\n  valueFormatter?: (value: number) => string;\n  legend?: PieChartLegendMode;\n  legendPosition?: PieChartLegendPosition;\n  legendValues?: PieChartLegendValue[];\n  onSeriesColorChange?: (seriesId: string, colorToken: string | null) => void;\n  onFocusChange?: (focusedNodeId: string | null) => void;\n  legendLabels?: Partial<ChartLegendLabels>;\n  labels?: Partial<PieChartLabels>;\n};\n\nfunction legendDetail(\n  slice: PieSlice | undefined,\n  legendValues: PieChartLegendValue[],\n  formatValue: (value: number) => string,\n): string | undefined {\n  if (!slice || legendValues.length === 0) return undefined;\n  const hasPercent: boolean = legendValues.includes(\"percent\");\n  const hasValue: boolean = legendValues.includes(\"value\");\n  if (hasPercent && hasValue) return `${formatValue(slice.value)} (${formatShare(slice.share)})`;\n  return hasValue ? formatValue(slice.value) : formatShare(slice.share);\n}\n\nfunction useMinSide(element: HTMLElement | null): number {\n  const [minSide, setMinSide] = useState<number>(0);\n\n  useLayoutEffect(() => {\n    if (!element) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() =>\n      setMinSide(Math.min(element.clientWidth, element.clientHeight)),\n    );\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [element]);\n\n  return minSide;\n}\n\nexport function PieChart({\n  data,\n  shape = \"donut\",\n  labelContent = DEFAULT_LABEL_CONTENT,\n  showTotal = \"auto\",\n  total,\n  valueFormatter,\n  legend = \"inline\",\n  legendPosition = \"bottom\",\n  legendValues = NO_LEGEND_VALUES,\n  onSeriesColorChange,\n  onFocusChange,\n  legendLabels,\n  labels,\n  className,\n  ...props\n}: PieChartProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const resolvedLabels: PieChartLabels = { ...DEFAULT_LABELS, ...labels };\n  const [focusedNodeId, setFocusedNodeId] = useState<string | null>(null);\n  const [stageElement, setStageElement] = useState<HTMLDivElement | null>(null);\n  const stageMinSide: number = useMinSide(stageElement);\n\n  const legendSeries: ChartLegendSeries[] = useMemo(\n    () =>\n      data.map((node: PieChartNode) => ({\n        id: node.id,\n        name: displayNameOf(node, resolvedLabels.others),\n        colorToken: node.colorToken ?? (node.isOthers ? CHART_NEUTRAL_COLOR_TOKEN : undefined),\n      })),\n    [data, resolvedLabels.others],\n  );\n\n  const {\n    items,\n    colorsBySeriesId,\n    colorTokensBySeriesId,\n    hiddenSeriesIds,\n    toggleSeries,\n  }: ChartLegendState = useChartLegend(\n    legendSeries,\n    theme?.seriesColors ?? [],\n    resolveSeriesColor,\n  );\n\n  const visibleSlices: PieSlice[] = useMemo(\n    () =>\n      buildPieSlices({\n        nodes: data.filter((node: PieChartNode) => !hiddenSeriesIds.has(node.id)),\n        colorsByRootId: colorsBySeriesId,\n        fallbackColor: theme?.neutralColor ?? \"#9ca3af\",\n        othersName: resolvedLabels.others,\n      }),\n    [data, hiddenSeriesIds, colorsBySeriesId, theme, resolvedLabels.others],\n  );\n\n  const focusedSlice: PieSlice | undefined = useMemo(\n    () => (focusedNodeId === null ? undefined : findSlice(visibleSlices, focusedNodeId)),\n    [visibleSlices, focusedNodeId],\n  );\n\n  const drawnSlices: PieSlice[] = focusedSlice ? focusedSlice.children : visibleSlices;\n\n  const updateFocus = useCallback(\n    (nextFocusedNodeId: string | null): void => {\n      setFocusedNodeId(nextFocusedNodeId);\n      onFocusChange?.(nextFocusedNodeId);\n    },\n    [onFocusChange],\n  );\n\n  useEffect(() => {\n    if (focusedNodeId !== null && !focusedSlice) updateFocus(null);\n  }, [focusedNodeId, focusedSlice, updateFocus]);\n\n  useEffect(() => {\n    if (!chart || !theme) return;\n    chart.setOption(\n      buildPieChartOption({ slices: drawnSlices, shape, labelContent, theme, valueFormatter }),\n      { notMerge: true },\n    );\n  }, [chart, theme, drawnSlices, shape, labelContent, valueFormatter]);\n\n  useEffect(() => {\n    if (!chart) return undefined;\n\n    function drillIntoClickedSlice(params: { data?: unknown }): void {\n      const clickedId: unknown = (params.data as { id?: unknown } | null | undefined)?.id;\n      if (typeof clickedId !== \"string\") return;\n      const clickedSlice: PieSlice | undefined = findSlice(drawnSlices, clickedId);\n      if (clickedSlice && clickedSlice.children.length > 0) updateFocus(clickedSlice.id);\n    }\n\n    chart.on(\"click\", drillIntoClickedSlice);\n    return () => {\n      chart.off(\"click\", drillIntoClickedSlice);\n    };\n  }, [chart, drawnSlices, updateFocus]);\n\n  function formatValue(value: number): string {\n    return valueFormatter ? valueFormatter(value) : String(value);\n  }\n\n  const legendItems: ChartLegendItem[] = items.map((item: ChartLegendItem) => ({\n    ...item,\n    detail: legendDetail(\n      visibleSlices.find((slice: PieSlice) => slice.id === item.id),\n      legendValues,\n      formatValue,\n    ),\n  }));\n\n  const isTotalVisible: boolean =\n    showTotal === \"on\" || (showTotal === \"auto\" && stageMinSide >= MIN_SIZE_FOR_AUTO_TOTAL_PX);\n  const centerTotal: number = focusedSlice ? focusedSlice.value : (total ?? totalOf(visibleSlices));\n  const parentOfFocusedSlice: PieSlice | undefined = focusedSlice\n    ? findParentSlice(visibleSlices, focusedSlice.id)\n    : undefined;\n  const isLegendVisible: boolean = legend !== \"none\" && data.length > 0;\n\n  const centerContent = (\n    <>\n      <span className=\"pie-chart__total-value\">{formatValue(centerTotal)}</span>\n      <span className=\"pie-chart__total-caption\">\n        {focusedSlice ? focusedSlice.name : resolvedLabels.total}\n      </span>\n    </>\n  );\n\n  function goBack(): void {\n    updateFocus(parentOfFocusedSlice ? parentOfFocusedSlice.id : null);\n  }\n\n  function renderDonutCenter() {\n    if (focusedSlice) {\n      return (\n        <button\n          type=\"button\"\n          className=\"pie-chart__center pie-chart__center--button\"\n          aria-label={resolvedLabels.backToPrevious(focusedSlice.name)}\n          onClick={goBack}\n        >\n          {isTotalVisible && centerContent}\n        </button>\n      );\n    }\n    return isTotalVisible && <div className=\"pie-chart__center\">{centerContent}</div>;\n  }\n\n  function renderPieFooter() {\n    if (focusedSlice) {\n      return (\n        <button\n          type=\"button\"\n          className=\"pie-chart__footer pie-chart__footer--button\"\n          aria-label={resolvedLabels.backToPrevious(focusedSlice.name)}\n          onClick={goBack}\n        >\n          {focusedSlice.name}\n          {isTotalVisible && `: ${formatValue(centerTotal)}`}\n        </button>\n      );\n    }\n    return (\n      isTotalVisible && (\n        <div className=\"pie-chart__footer\">{`${resolvedLabels.total}: ${formatValue(centerTotal)}`}</div>\n      )\n    );\n  }\n\n  return (\n    <div\n      className={clsx(\"pie-chart\", `pie-chart--legend-${legendPosition}`, className)}\n      {...props}\n    >\n      {isLegendVisible && (\n        <ChartLegend\n          className=\"pie-chart__legend\"\n          items={legendItems}\n          onToggle={toggleSeries}\n          onColorChange={onSeriesColorChange}\n          colorTokensBySeriesId={colorTokensBySeriesId}\n          labels={legendLabels}\n        />\n      )}\n      <div className=\"pie-chart__body\">\n        <div ref={setStageElement} className=\"pie-chart__stage\">\n          <div ref={containerRef} className=\"pie-chart__canvas\" />\n          {shape === \"donut\" && renderDonutCenter()}\n        </div>\n        {shape === \"pie\" && renderPieFooter()}\n      </div>\n    </div>\n  );\n}\n"],"names":["DEFAULT_LABELS","categoryName","MIN_SIZE_FOR_AUTO_TOTAL_PX","DEFAULT_LABEL_CONTENT","NO_LEGEND_VALUES","legendDetail","slice","legendValues","formatValue","hasPercent","hasValue","formatShare","useMinSide","element","minSide","setMinSide","useState","useLayoutEffect","observer","PieChart","data","shape","labelContent","showTotal","total","valueFormatter","legend","legendPosition","onSeriesColorChange","onFocusChange","legendLabels","labels","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","resolvedLabels","focusedNodeId","setFocusedNodeId","stageElement","setStageElement","stageMinSide","legendSeries","useMemo","node","displayNameOf","CHART_NEUTRAL_COLOR_TOKEN","items","colorsBySeriesId","colorTokensBySeriesId","hiddenSeriesIds","toggleSeries","useChartLegend","visibleSlices","buildPieSlices","focusedSlice","findSlice","drawnSlices","updateFocus","useCallback","nextFocusedNodeId","useEffect","buildPieChartOption","drillIntoClickedSlice","params","clickedId","_a","clickedSlice","value","legendItems","item","isTotalVisible","centerTotal","totalOf","parentOfFocusedSlice","findParentSlice","isLegendVisible","centerContent","jsxs","Fragment","jsx","goBack","renderDonutCenter","renderPieFooter","clsx","ChartLegend"],"mappings":";;;;;;;;;;;AAuDA,MAAMA,KAAiC;AAAA,EACrC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,gBAAgB,CAACC,MAAyB,aAAaA,CAAY;AACrE,GAEMC,KAAqC,KAErCC,KAAgD,CAAC,SAAS,GAE1DC,KAA0C,CAAA;AAkBhD,SAASC,GACPC,GACAC,GACAC,GACoB;AACpB,MAAI,CAACF,KAASC,EAAa,WAAW,EAAG;AACzC,QAAME,IAAsBF,EAAa,SAAS,SAAS,GACrDG,IAAoBH,EAAa,SAAS,OAAO;AACvD,SAAIE,KAAcC,IAAiB,GAAGF,EAAYF,EAAM,KAAK,CAAC,KAAKK,EAAYL,EAAM,KAAK,CAAC,MACpFI,IAAWF,EAAYF,EAAM,KAAK,IAAIK,EAAYL,EAAM,KAAK;AACtE;AAEA,SAASM,GAAWC,GAAqC;AACvD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAiB,CAAC;AAEhD,SAAAC,GAAgB,MAAM;AACpB,QAAI,CAACJ,EAAS;AACd,UAAMK,IAA2B,IAAI;AAAA,MAAe,MAClDH,EAAW,KAAK,IAAIF,EAAQ,aAAaA,EAAQ,YAAY,CAAC;AAAA,IAAA;AAEhE,WAAAK,EAAS,QAAQL,CAAO,GACjB,MAAMK,EAAS,WAAA;AAAA,EACxB,GAAG,CAACL,CAAO,CAAC,GAELC;AACT;AAEO,SAASK,GAAS;AAAA,EACvB,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,cAAAC,IAAenB;AAAA,EACf,WAAAoB,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAAC,IAAiB;AAAA,EACjB,cAAApB,IAAeH;AAAA,EACf,qBAAAwB;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,GAAA,GACpEC,IAAiC,EAAE,GAAGvC,IAAgB,GAAG+B,EAAA,GACzD,CAACS,GAAeC,CAAgB,IAAIzB,EAAwB,IAAI,GAChE,CAAC0B,GAAcC,CAAe,IAAI3B,EAAgC,IAAI,GACtE4B,IAAuBhC,GAAW8B,CAAY,GAE9CG,IAAoCC;AAAA,IACxC,MACE1B,EAAK,IAAI,CAAC2B,OAAwB;AAAA,MAChC,IAAIA,EAAK;AAAA,MACT,MAAMC,GAAcD,GAAMR,EAAe,MAAM;AAAA,MAC/C,YAAYQ,EAAK,eAAeA,EAAK,WAAWE,KAA4B;AAAA,IAAA,EAC5E;AAAA,IACJ,CAAC7B,GAAMmB,EAAe,MAAM;AAAA,EAAA,GAGxB;AAAA,IACJ,OAAAW;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IACoBC;AAAA,IACpBV;AAAA,KACAT,KAAA,gBAAAA,EAAO,iBAAgB,CAAA;AAAA,IACvBC;AAAA,EAAA,GAGImB,IAA4BV;AAAA,IAChC,MACEW,GAAe;AAAA,MACb,OAAOrC,EAAK,OAAO,CAAC2B,MAAuB,CAACM,EAAgB,IAAIN,EAAK,EAAE,CAAC;AAAA,MACxE,gBAAgBI;AAAA,MAChB,gBAAef,KAAA,gBAAAA,EAAO,iBAAgB;AAAA,MACtC,YAAYG,EAAe;AAAA,IAAA,CAC5B;AAAA,IACH,CAACnB,GAAMiC,GAAiBF,GAAkBf,GAAOG,EAAe,MAAM;AAAA,EAAA,GAGlEmB,IAAqCZ;AAAA,IACzC,MAAON,MAAkB,OAAO,SAAYmB,EAAUH,GAAehB,CAAa;AAAA,IAClF,CAACgB,GAAehB,CAAa;AAAA,EAAA,GAGzBoB,IAA0BF,IAAeA,EAAa,WAAWF,GAEjEK,IAAcC;AAAA,IAClB,CAACC,MAA2C;AAC1C,MAAAtB,EAAiBsB,CAAiB,GAClClC,KAAA,QAAAA,EAAgBkC;AAAA,IAClB;AAAA,IACA,CAAClC,CAAa;AAAA,EAAA;AAGhB,EAAAmC,EAAU,MAAM;AACd,IAAIxB,MAAkB,QAAQ,CAACkB,OAA0B,IAAI;AAAA,EAC/D,GAAG,CAAClB,GAAekB,GAAcG,CAAW,CAAC,GAE7CG,EAAU,MAAM;AACd,IAAI,CAAC7B,KAAS,CAACC,KACfD,EAAM;AAAA,MACJ8B,GAAoB,EAAE,QAAQL,GAAa,OAAAvC,GAAO,cAAAC,GAAc,OAAAc,GAAO,gBAAAX,GAAgB;AAAA,MACvF,EAAE,UAAU,GAAA;AAAA,IAAK;AAAA,EAErB,GAAG,CAACU,GAAOC,GAAOwB,GAAavC,GAAOC,GAAcG,CAAc,CAAC,GAEnEuC,EAAU,MAAM;AACd,QAAI,CAAC7B,EAAO;AAEZ,aAAS+B,EAAsBC,GAAkC;;AAC/D,YAAMC,KAAsBC,IAAAF,EAAO,SAAP,gBAAAE,EAAqD;AACjF,UAAI,OAAOD,KAAc,SAAU;AACnC,YAAME,IAAqCX,EAAUC,GAAaQ,CAAS;AAC3E,MAAIE,KAAgBA,EAAa,SAAS,SAAS,KAAGT,EAAYS,EAAa,EAAE;AAAA,IACnF;AAEA,WAAAnC,EAAM,GAAG,SAAS+B,CAAqB,GAChC,MAAM;AACX,MAAA/B,EAAM,IAAI,SAAS+B,CAAqB;AAAA,IAC1C;AAAA,EACF,GAAG,CAAC/B,GAAOyB,GAAaC,CAAW,CAAC;AAEpC,WAASrD,EAAY+D,GAAuB;AAC1C,WAAO9C,IAAiBA,EAAe8C,CAAK,IAAI,OAAOA,CAAK;AAAA,EAC9D;AAEA,QAAMC,IAAiCtB,EAAM,IAAI,CAACuB,OAA2B;AAAA,IAC3E,GAAGA;AAAA,IACH,QAAQpE;AAAA,MACNmD,EAAc,KAAK,CAAClD,MAAoBA,EAAM,OAAOmE,EAAK,EAAE;AAAA,MAC5DlE;AAAA,MACAC;AAAA,IAAA;AAAA,EACF,EACA,GAEIkE,IACJnD,MAAc,QAASA,MAAc,UAAUqB,KAAgB1C,IAC3DyE,IAAsBjB,IAAeA,EAAa,QAASlC,KAASoD,GAAQpB,CAAa,GACzFqB,IAA6CnB,IAC/CoB,GAAgBtB,GAAeE,EAAa,EAAE,IAC9C,QACEqB,KAA2BrD,MAAW,UAAUN,EAAK,SAAS,GAE9D4D,IACJ,gBAAAC,EAAAC,IAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAA3E,EAAYmE,CAAW,GAAE;AAAA,IACnE,gBAAAQ,EAAC,UAAK,WAAU,4BACb,cAAezB,EAAa,OAAOnB,EAAe,MAAA,CACrD;AAAA,EAAA,GACF;AAGF,WAAS6C,IAAe;AACtB,IAAAvB,EAAYgB,IAAuBA,EAAqB,KAAK,IAAI;AAAA,EACnE;AAEA,WAASQ,KAAoB;AAC3B,WAAI3B,IAEA,gBAAAyB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAY5C,EAAe,eAAemB,EAAa,IAAI;AAAA,QAC3D,SAAS0B;AAAA,QAER,UAAAV,KAAkBM;AAAA,MAAA;AAAA,IAAA,IAIlBN,KAAkB,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAAH,GAAc;AAAA,EAC7E;AAEA,WAASM,KAAkB;AACzB,WAAI5B,IAEA,gBAAAuB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,cAAY1C,EAAe,eAAemB,EAAa,IAAI;AAAA,QAC3D,SAAS0B;AAAA,QAER,UAAA;AAAA,UAAA1B,EAAa;AAAA,UACbgB,KAAkB,KAAKlE,EAAYmE,CAAW,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAKpDD,KACE,gBAAAS,EAAC,OAAA,EAAI,WAAU,qBAAqB,UAAA,GAAG5C,EAAe,KAAK,KAAK/B,EAAYmE,CAAW,CAAC,IAAG;AAAA,EAGjG;AAEA,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWM,GAAK,aAAa,qBAAqB5D,CAAc,IAAIK,CAAS;AAAA,MAC5E,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAA8C,MACC,gBAAAI;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAOhB;AAAA,YACP,UAAUlB;AAAA,YACV,eAAe1B;AAAA,YACf,uBAAAwB;AAAA,YACA,QAAQtB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGZ,gBAAAmD,EAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKtC,GAAiB,WAAU,oBACnC,UAAA;AAAA,YAAA,gBAAAwC,EAAC,OAAA,EAAI,KAAKjD,GAAc,WAAU,qBAAoB;AAAA,YACrDb,MAAU,WAAWgE,GAAA;AAAA,UAAkB,GAC1C;AAAA,UACChE,MAAU,SAASiE,GAAA;AAAA,QAAgB,EAAA,CACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/lib/ui/components/charts/PieChart/pie-chart-option.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../chart-label-color.cjs"),u=require("../chart-share.cjs"),p=require("./pie-chart-slices.cjs"),a=40,S=85,_=8,h=32,m=92,g=" > ",R=10,b=2;function d(e,t){return e.valueFormatter?e.valueFormatter(t):String(t)}function c(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function L(e,t){const o=[];return e.labelContent.includes("name")&&o.push(t.name),e.labelContent.includes("percent")&&o.push(u.formatShare(t.share)),e.labelContent.includes("value")&&o.push(d(e,t.value)),o.join(" ")}function v(e,t){const o=c(t.path.join(g)),r=c(d(e,t.value));return`<div>${o}</div><div><b>${r}</b> · ${u.formatShare(t.share)}</div>`}function s(e,t,o){return{id:t.id,name:t.name,value:t.value,itemStyle:{color:t.color},label:{color:E.labelColorOnFill(t.color)},labelText:L(e,t),tooltip:v(e,t),children:o?t.children.map(r=>s(e,r,!0)):void 0}}function T(e){const{theme:t}=e;return{trigger:"item",backgroundColor:t.tooltipBackgroundColor,borderColor:t.tooltipBorderColor,textStyle:{color:t.labelColor},formatter:o=>o.data.tooltip}}function n(e){return e.data.labelText}function f(e){return e.shape==="pie"?0:a}function I(e){return e.shape==="pie"?["0%",`${S}%`]:[`${a}%`,`${a+h}%`]}function y(e){const t=e.labelContent.length>0;return e.shape==="pie"?{show:t,position:"inside",formatter:n}:{show:t,position:"outside",color:e.theme.labelColor,formatter:n}}function A(e){const t=e.shape==="pie";return{type:"pie",radius:I(e),data:e.slices.map(o=>{const{label:r,...l}=s(e,o,!1);return t?{...l,label:r}:l}),itemStyle:{borderColor:e.theme.tooltipBackgroundColor,borderWidth:b},label:y(e),minShowLabelAngle:t?_:0,labelLine:{show:!t&&e.labelContent.length>0},labelLayout:{hideOverlap:!0},emphasis:{scale:!1}}}function N(e,t){const o=f(e),r=(m-o)/t,l=e.shape==="pie"?r:Math.min(h,r),C=Array.from({length:t},($,i)=>({r0:`${o+l*i}%`,r:`${o+l*(i+1)}%`}));return[{},...C]}function P(e){const t=e.labelContent.length>0;return{type:"sunburst",nodeClick:!1,sort:null,radius:[`${f(e)}%`,`${m}%`],data:e.slices.map(o=>s(e,o,!0)),levels:N(e,p.sliceDepth(e.slices)),itemStyle:{borderColor:e.theme.tooltipBackgroundColor,borderWidth:b},label:{show:t,rotate:"radial",minAngle:R,formatter:n},emphasis:{focus:"none"}}}function D(e){return e.some(t=>t.children.length>0)}function O(e){const{theme:t}=e;return{animation:!1,textStyle:{fontFamily:t.fontFamily,color:t.labelColor},tooltip:T(e),series:[D(e.slices)?P(e):A(e)]}}exports.buildPieChartOption=O;
+//# sourceMappingURL=pie-chart-option.cjs.map

package/dist/lib/ui/components/charts/PieChart/pie-chart-option.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart-option.cjs","sources":["../../../../../../src/ui/components/charts/PieChart/pie-chart-option.ts"],"sourcesContent":["import { labelColorOnFill } from \"../chart-label-color\";\nimport { formatShare } from \"../chart-share\";\nimport type { ChartTheme } from \"../chart-theme\";\nimport type { PieSlice } from \"./pie-chart-slices\";\nimport { sliceDepth } from \"./pie-chart-slices\";\n\nexport type PieChartLabelContent = \"name\" | \"percent\" | \"value\";\n\nexport type PieChartShape = \"donut\" | \"pie\";\n\nexport interface PieChartOptionInput {\n  slices: PieSlice[];\n  shape: PieChartShape;\n  labelContent: PieChartLabelContent[];\n  theme: ChartTheme;\n  valueFormatter?: (value: number) => string;\n}\n\nconst DONUT_HOLE_RADIUS_PERCENT: number = 40;\n\nconst FULL_PIE_OUTER_RADIUS_PERCENT: number = 85;\n\nconst MIN_INSIDE_LABEL_ANGLE_DEGREES: number = 8;\n\nconst RING_THICKNESS_PERCENT: number = 32;\n\nconst OUTER_RADIUS_LIMIT_PERCENT: number = 92;\n\nconst PATH_SEPARATOR: string = \" > \";\n\nconst MIN_LABELED_ANGLE_DEGREES: number = 10;\n\nconst RING_BORDER_WIDTH_PX: number = 2;\n\nfunction formatValue(input: PieChartOptionInput, value: number): string {\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction labelText(input: PieChartOptionInput, slice: PieSlice): string {\n  const parts: string[] = [];\n  if (input.labelContent.includes(\"name\")) parts.push(slice.name);\n  if (input.labelContent.includes(\"percent\")) parts.push(formatShare(slice.share));\n  if (input.labelContent.includes(\"value\")) parts.push(formatValue(input, slice.value));\n  return parts.join(\" \");\n}\n\nfunction tooltipHtml(input: PieChartOptionInput, slice: PieSlice): string {\n  const path: string = escapeHtml(slice.path.join(PATH_SEPARATOR));\n  const value: string = escapeHtml(formatValue(input, slice.value));\n  return `<div>${path}</div><div><b>${value}</b> · ${formatShare(slice.share)}</div>`;\n}\n\ninterface DataItem {\n  id: string;\n  name: string;\n  value: number;\n  itemStyle: { color: string };\n  label?: { color: string };\n  labelText: string;\n  tooltip: string;\n  children?: DataItem[];\n}\n\nfunction toDataItem(input: PieChartOptionInput, slice: PieSlice, withChildren: boolean): DataItem {\n  return {\n    id: slice.id,\n    name: slice.name,\n    value: slice.value,\n    itemStyle: { color: slice.color },\n    label: { color: labelColorOnFill(slice.color) },\n    labelText: labelText(input, slice),\n    tooltip: tooltipHtml(input, slice),\n    children: withChildren\n      ? slice.children.map((child: PieSlice) => toDataItem(input, child, true))\n      : undefined,\n  };\n}\n\nfunction tooltipOption(input: PieChartOptionInput): Record<string, unknown> {\n  const { theme } = input;\n  return {\n    trigger: \"item\",\n    backgroundColor: theme.tooltipBackgroundColor,\n    borderColor: theme.tooltipBorderColor,\n    textStyle: { color: theme.labelColor },\n    formatter: (params: { data: DataItem }) => params.data.tooltip,\n  };\n}\n\nfunction labelFormatter(params: { data: DataItem }): string {\n  return params.data.labelText;\n}\n\nfunction holeRadiusPercent(input: PieChartOptionInput): number {\n  return input.shape === \"pie\" ? 0 : DONUT_HOLE_RADIUS_PERCENT;\n}\n\nfunction pieRadius(input: PieChartOptionInput): [string, string] {\n  if (input.shape === \"pie\") return [\"0%\", `${FULL_PIE_OUTER_RADIUS_PERCENT}%`];\n  return [\n    `${DONUT_HOLE_RADIUS_PERCENT}%`,\n    `${DONUT_HOLE_RADIUS_PERCENT + RING_THICKNESS_PERCENT}%`,\n  ];\n}\n\nfunction pieLabel(input: PieChartOptionInput): Record<string, unknown> {\n  const show: boolean = input.labelContent.length > 0;\n  if (input.shape === \"pie\") {\n    return { show, position: \"inside\", formatter: labelFormatter };\n  }\n  return { show, position: \"outside\", color: input.theme.labelColor, formatter: labelFormatter };\n}\n\nfunction pieSeries(input: PieChartOptionInput): Record<string, unknown> {\n  const isFullPie: boolean = input.shape === \"pie\";\n  return {\n    type: \"pie\",\n    radius: pieRadius(input),\n    data: input.slices.map((slice: PieSlice) => {\n      const { label: fillLabel, ...item } = toDataItem(input, slice, false);\n      return isFullPie ? { ...item, label: fillLabel } : item;\n    }),\n    itemStyle: { borderColor: input.theme.tooltipBackgroundColor, borderWidth: RING_BORDER_WIDTH_PX },\n    label: pieLabel(input),\n    minShowLabelAngle: isFullPie ? MIN_INSIDE_LABEL_ANGLE_DEGREES : 0,\n    labelLine: { show: !isFullPie && input.labelContent.length > 0 },\n    labelLayout: { hideOverlap: true },\n    emphasis: { scale: false },\n  };\n}\n\nfunction sunburstLevels(input: PieChartOptionInput, depth: number): Array<Record<string, unknown>> {\n  const hole: number = holeRadiusPercent(input);\n  const evenThickness: number = (OUTER_RADIUS_LIMIT_PERCENT - hole) / depth;\n  const thickness: number =\n    input.shape === \"pie\" ? evenThickness : Math.min(RING_THICKNESS_PERCENT, evenThickness);\n  const rings: Array<Record<string, unknown>> = Array.from(\n    { length: depth },\n    (_unused, ringIndex: number) => ({\n      r0: `${hole + thickness * ringIndex}%`,\n      r: `${hole + thickness * (ringIndex + 1)}%`,\n    }),\n  );\n  return [{}, ...rings];\n}\n\nfunction sunburstSeries(input: PieChartOptionInput): Record<string, unknown> {\n  const hasLabels: boolean = input.labelContent.length > 0;\n  return {\n    type: \"sunburst\",\n    nodeClick: false,\n    sort: null,\n    radius: [`${holeRadiusPercent(input)}%`, `${OUTER_RADIUS_LIMIT_PERCENT}%`],\n    data: input.slices.map((slice: PieSlice) => toDataItem(input, slice, true)),\n    levels: sunburstLevels(input, sliceDepth(input.slices)),\n    itemStyle: { borderColor: input.theme.tooltipBackgroundColor, borderWidth: RING_BORDER_WIDTH_PX },\n    label: {\n      show: hasLabels,\n      rotate: \"radial\",\n      minAngle: MIN_LABELED_ANGLE_DEGREES,\n      formatter: labelFormatter,\n    },\n    emphasis: { focus: \"none\" },\n  };\n}\n\nfunction isHierarchical(slices: PieSlice[]): boolean {\n  return slices.some((slice: PieSlice) => slice.children.length > 0);\n}\n\nexport function buildPieChartOption(input: PieChartOptionInput): Record<string, unknown> {\n  const { theme } = input;\n  return {\n    animation: false,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    tooltip: tooltipOption(input),\n    series: [isHierarchical(input.slices) ? sunburstSeries(input) : pieSeries(input)],\n  };\n}\n"],"names":["DONUT_HOLE_RADIUS_PERCENT","FULL_PIE_OUTER_RADIUS_PERCENT","MIN_INSIDE_LABEL_ANGLE_DEGREES","RING_THICKNESS_PERCENT","OUTER_RADIUS_LIMIT_PERCENT","PATH_SEPARATOR","MIN_LABELED_ANGLE_DEGREES","RING_BORDER_WIDTH_PX","formatValue","input","value","escapeHtml","text","labelText","slice","parts","formatShare","tooltipHtml","path","toDataItem","withChildren","labelColorOnFill","child","tooltipOption","theme","params","labelFormatter","holeRadiusPercent","pieRadius","pieLabel","show","pieSeries","isFullPie","fillLabel","item","sunburstLevels","depth","hole","evenThickness","thickness","rings","_unused","ringIndex","sunburstSeries","hasLabels","sliceDepth","isHierarchical","slices","buildPieChartOption"],"mappings":"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"}

package/dist/lib/ui/components/charts/PieChart/pie-chart-option.js

@@ -0,0 +1,118 @@
+import { labelColorOnFill as E } from "../chart-label-color.js";
+import { formatShare as u } from "../chart-share.js";
+import { sliceDepth as C } from "./pie-chart-slices.js";
+const a = 40, _ = 85, g = 8, m = 32, h = 92, R = " > ", S = 10, d = 2;
+function f(e, o) {
+  return e.valueFormatter ? e.valueFormatter(o) : String(o);
+}
+function c(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function L(e, o) {
+  const t = [];
+  return e.labelContent.includes("name") && t.push(o.name), e.labelContent.includes("percent") && t.push(u(o.share)), e.labelContent.includes("value") && t.push(f(e, o.value)), t.join(" ");
+}
+function v(e, o) {
+  const t = c(o.path.join(R)), r = c(f(e, o.value));
+  return `<div>${t}</div><div><b>${r}</b> · ${u(o.share)}</div>`;
+}
+function s(e, o, t) {
+  return {
+    id: o.id,
+    name: o.name,
+    value: o.value,
+    itemStyle: { color: o.color },
+    label: { color: E(o.color) },
+    labelText: L(e, o),
+    tooltip: v(e, o),
+    children: t ? o.children.map((r) => s(e, r, !0)) : void 0
+  };
+}
+function T(e) {
+  const { theme: o } = e;
+  return {
+    trigger: "item",
+    backgroundColor: o.tooltipBackgroundColor,
+    borderColor: o.tooltipBorderColor,
+    textStyle: { color: o.labelColor },
+    formatter: (t) => t.data.tooltip
+  };
+}
+function n(e) {
+  return e.data.labelText;
+}
+function b(e) {
+  return e.shape === "pie" ? 0 : a;
+}
+function I(e) {
+  return e.shape === "pie" ? ["0%", `${_}%`] : [
+    `${a}%`,
+    `${a + m}%`
+  ];
+}
+function A(e) {
+  const o = e.labelContent.length > 0;
+  return e.shape === "pie" ? { show: o, position: "inside", formatter: n } : { show: o, position: "outside", color: e.theme.labelColor, formatter: n };
+}
+function N(e) {
+  const o = e.shape === "pie";
+  return {
+    type: "pie",
+    radius: I(e),
+    data: e.slices.map((t) => {
+      const { label: r, ...l } = s(e, t, !1);
+      return o ? { ...l, label: r } : l;
+    }),
+    itemStyle: { borderColor: e.theme.tooltipBackgroundColor, borderWidth: d },
+    label: A(e),
+    minShowLabelAngle: o ? g : 0,
+    labelLine: { show: !o && e.labelContent.length > 0 },
+    labelLayout: { hideOverlap: !0 },
+    emphasis: { scale: !1 }
+  };
+}
+function D(e, o) {
+  const t = b(e), r = (h - t) / o, l = e.shape === "pie" ? r : Math.min(m, r), p = Array.from(
+    { length: o },
+    (O, i) => ({
+      r0: `${t + l * i}%`,
+      r: `${t + l * (i + 1)}%`
+    })
+  );
+  return [{}, ...p];
+}
+function y(e) {
+  const o = e.labelContent.length > 0;
+  return {
+    type: "sunburst",
+    nodeClick: !1,
+    sort: null,
+    radius: [`${b(e)}%`, `${h}%`],
+    data: e.slices.map((t) => s(e, t, !0)),
+    levels: D(e, C(e.slices)),
+    itemStyle: { borderColor: e.theme.tooltipBackgroundColor, borderWidth: d },
+    label: {
+      show: o,
+      rotate: "radial",
+      minAngle: S,
+      formatter: n
+    },
+    emphasis: { focus: "none" }
+  };
+}
+function P(e) {
+  return e.some((o) => o.children.length > 0);
+}
+function B(e) {
+  const { theme: o } = e;
+  return {
+    animation: !1,
+    textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
+    tooltip: T(e),
+    series: [P(e.slices) ? y(e) : N(e)]
+  };
+}
+export {
+  B as buildPieChartOption
+};
+//# sourceMappingURL=pie-chart-option.js.map

package/dist/lib/ui/components/charts/PieChart/pie-chart-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart-option.js","sources":["../../../../../../src/ui/components/charts/PieChart/pie-chart-option.ts"],"sourcesContent":["import { labelColorOnFill } from \"../chart-label-color\";\nimport { formatShare } from \"../chart-share\";\nimport type { ChartTheme } from \"../chart-theme\";\nimport type { PieSlice } from \"./pie-chart-slices\";\nimport { sliceDepth } from \"./pie-chart-slices\";\n\nexport type PieChartLabelContent = \"name\" | \"percent\" | \"value\";\n\nexport type PieChartShape = \"donut\" | \"pie\";\n\nexport interface PieChartOptionInput {\n  slices: PieSlice[];\n  shape: PieChartShape;\n  labelContent: PieChartLabelContent[];\n  theme: ChartTheme;\n  valueFormatter?: (value: number) => string;\n}\n\nconst DONUT_HOLE_RADIUS_PERCENT: number = 40;\n\nconst FULL_PIE_OUTER_RADIUS_PERCENT: number = 85;\n\nconst MIN_INSIDE_LABEL_ANGLE_DEGREES: number = 8;\n\nconst RING_THICKNESS_PERCENT: number = 32;\n\nconst OUTER_RADIUS_LIMIT_PERCENT: number = 92;\n\nconst PATH_SEPARATOR: string = \" > \";\n\nconst MIN_LABELED_ANGLE_DEGREES: number = 10;\n\nconst RING_BORDER_WIDTH_PX: number = 2;\n\nfunction formatValue(input: PieChartOptionInput, value: number): string {\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, \"&amp;\")\n    .replace(/</g, \"&lt;\")\n    .replace(/>/g, \"&gt;\")\n    .replace(/\"/g, \"&quot;\");\n}\n\nfunction labelText(input: PieChartOptionInput, slice: PieSlice): string {\n  const parts: string[] = [];\n  if (input.labelContent.includes(\"name\")) parts.push(slice.name);\n  if (input.labelContent.includes(\"percent\")) parts.push(formatShare(slice.share));\n  if (input.labelContent.includes(\"value\")) parts.push(formatValue(input, slice.value));\n  return parts.join(\" \");\n}\n\nfunction tooltipHtml(input: PieChartOptionInput, slice: PieSlice): string {\n  const path: string = escapeHtml(slice.path.join(PATH_SEPARATOR));\n  const value: string = escapeHtml(formatValue(input, slice.value));\n  return `<div>${path}</div><div><b>${value}</b> · ${formatShare(slice.share)}</div>`;\n}\n\ninterface DataItem {\n  id: string;\n  name: string;\n  value: number;\n  itemStyle: { color: string };\n  label?: { color: string };\n  labelText: string;\n  tooltip: string;\n  children?: DataItem[];\n}\n\nfunction toDataItem(input: PieChartOptionInput, slice: PieSlice, withChildren: boolean): DataItem {\n  return {\n    id: slice.id,\n    name: slice.name,\n    value: slice.value,\n    itemStyle: { color: slice.color },\n    label: { color: labelColorOnFill(slice.color) },\n    labelText: labelText(input, slice),\n    tooltip: tooltipHtml(input, slice),\n    children: withChildren\n      ? slice.children.map((child: PieSlice) => toDataItem(input, child, true))\n      : undefined,\n  };\n}\n\nfunction tooltipOption(input: PieChartOptionInput): Record<string, unknown> {\n  const { theme } = input;\n  return {\n    trigger: \"item\",\n    backgroundColor: theme.tooltipBackgroundColor,\n    borderColor: theme.tooltipBorderColor,\n    textStyle: { color: theme.labelColor },\n    formatter: (params: { data: DataItem }) => params.data.tooltip,\n  };\n}\n\nfunction labelFormatter(params: { data: DataItem }): string {\n  return params.data.labelText;\n}\n\nfunction holeRadiusPercent(input: PieChartOptionInput): number {\n  return input.shape === \"pie\" ? 0 : DONUT_HOLE_RADIUS_PERCENT;\n}\n\nfunction pieRadius(input: PieChartOptionInput): [string, string] {\n  if (input.shape === \"pie\") return [\"0%\", `${FULL_PIE_OUTER_RADIUS_PERCENT}%`];\n  return [\n    `${DONUT_HOLE_RADIUS_PERCENT}%`,\n    `${DONUT_HOLE_RADIUS_PERCENT + RING_THICKNESS_PERCENT}%`,\n  ];\n}\n\nfunction pieLabel(input: PieChartOptionInput): Record<string, unknown> {\n  const show: boolean = input.labelContent.length > 0;\n  if (input.shape === \"pie\") {\n    return { show, position: \"inside\", formatter: labelFormatter };\n  }\n  return { show, position: \"outside\", color: input.theme.labelColor, formatter: labelFormatter };\n}\n\nfunction pieSeries(input: PieChartOptionInput): Record<string, unknown> {\n  const isFullPie: boolean = input.shape === \"pie\";\n  return {\n    type: \"pie\",\n    radius: pieRadius(input),\n    data: input.slices.map((slice: PieSlice) => {\n      const { label: fillLabel, ...item } = toDataItem(input, slice, false);\n      return isFullPie ? { ...item, label: fillLabel } : item;\n    }),\n    itemStyle: { borderColor: input.theme.tooltipBackgroundColor, borderWidth: RING_BORDER_WIDTH_PX },\n    label: pieLabel(input),\n    minShowLabelAngle: isFullPie ? MIN_INSIDE_LABEL_ANGLE_DEGREES : 0,\n    labelLine: { show: !isFullPie && input.labelContent.length > 0 },\n    labelLayout: { hideOverlap: true },\n    emphasis: { scale: false },\n  };\n}\n\nfunction sunburstLevels(input: PieChartOptionInput, depth: number): Array<Record<string, unknown>> {\n  const hole: number = holeRadiusPercent(input);\n  const evenThickness: number = (OUTER_RADIUS_LIMIT_PERCENT - hole) / depth;\n  const thickness: number =\n    input.shape === \"pie\" ? evenThickness : Math.min(RING_THICKNESS_PERCENT, evenThickness);\n  const rings: Array<Record<string, unknown>> = Array.from(\n    { length: depth },\n    (_unused, ringIndex: number) => ({\n      r0: `${hole + thickness * ringIndex}%`,\n      r: `${hole + thickness * (ringIndex + 1)}%`,\n    }),\n  );\n  return [{}, ...rings];\n}\n\nfunction sunburstSeries(input: PieChartOptionInput): Record<string, unknown> {\n  const hasLabels: boolean = input.labelContent.length > 0;\n  return {\n    type: \"sunburst\",\n    nodeClick: false,\n    sort: null,\n    radius: [`${holeRadiusPercent(input)}%`, `${OUTER_RADIUS_LIMIT_PERCENT}%`],\n    data: input.slices.map((slice: PieSlice) => toDataItem(input, slice, true)),\n    levels: sunburstLevels(input, sliceDepth(input.slices)),\n    itemStyle: { borderColor: input.theme.tooltipBackgroundColor, borderWidth: RING_BORDER_WIDTH_PX },\n    label: {\n      show: hasLabels,\n      rotate: \"radial\",\n      minAngle: MIN_LABELED_ANGLE_DEGREES,\n      formatter: labelFormatter,\n    },\n    emphasis: { focus: \"none\" },\n  };\n}\n\nfunction isHierarchical(slices: PieSlice[]): boolean {\n  return slices.some((slice: PieSlice) => slice.children.length > 0);\n}\n\nexport function buildPieChartOption(input: PieChartOptionInput): Record<string, unknown> {\n  const { theme } = input;\n  return {\n    animation: false,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    tooltip: tooltipOption(input),\n    series: [isHierarchical(input.slices) ? sunburstSeries(input) : pieSeries(input)],\n  };\n}\n"],"names":["DONUT_HOLE_RADIUS_PERCENT","FULL_PIE_OUTER_RADIUS_PERCENT","MIN_INSIDE_LABEL_ANGLE_DEGREES","RING_THICKNESS_PERCENT","OUTER_RADIUS_LIMIT_PERCENT","PATH_SEPARATOR","MIN_LABELED_ANGLE_DEGREES","RING_BORDER_WIDTH_PX","formatValue","input","value","escapeHtml","text","labelText","slice","parts","formatShare","tooltipHtml","path","toDataItem","withChildren","labelColorOnFill","child","tooltipOption","theme","params","labelFormatter","holeRadiusPercent","pieRadius","pieLabel","show","pieSeries","isFullPie","fillLabel","item","sunburstLevels","depth","hole","evenThickness","thickness","rings","_unused","ringIndex","sunburstSeries","hasLabels","sliceDepth","isHierarchical","slices","buildPieChartOption"],"mappings":"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"}

package/dist/lib/ui/components/charts/PieChart/pie-chart-slices.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("../chart-color-tone.cjs"),O=.22;function S(e){return e!==null&&Number.isFinite(e)&&e>0}function N(e){return e.reduce((r,t)=>r+(t.value??0),0)}function P(e){return e.filter(r=>S(r.value))}function s(e,r){return e.name===""?r:e.name}function y(e,r,t){return r===void 0?t.colorsByRootId[e.id]??t.fallbackColor:e.isOthers?t.fallbackColor:v.lightenColor(r,O)}function a(e,r,t,n){const l=P(e),m=N(l);return l.map(i=>{const b=i.isOthers===!0,o=s(i,n.othersName),c=[...r,o],u=y(i,t,n);return{id:i.id,name:o,value:i.value,share:i.value/m,path:c,color:u,isOthers:b,children:a(i.children??[],c,u,n)}})}function T(e){return a(e.nodes,[],void 0,e)}function f(e,r){for(const t of e){if(t.id===r)return t;const n=f(t.children,r);if(n)return n}}function d(e,r){for(const t of e){if(t.children.some(l=>l.id===r))return t;const n=d(t.children,r);if(n)return n}}function h(e){return e.length===0?0:1+Math.max(...e.map(r=>h(r.children)))}function g(e){return e.reduce((r,t)=>r+t.value,0)}exports.buildPieSlices=T;exports.displayNameOf=s;exports.findParentSlice=d;exports.findSlice=f;exports.sliceDepth=h;exports.totalOf=g;
+//# sourceMappingURL=pie-chart-slices.cjs.map

package/dist/lib/ui/components/charts/PieChart/pie-chart-slices.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart-slices.cjs","sources":["../../../../../../src/ui/components/charts/PieChart/pie-chart-slices.ts"],"sourcesContent":["import { lightenColor } from \"../chart-color-tone\";\n\nexport interface PieChartNode {\n  id: string;\n  name: string;\n  value: number | null;\n  // Nome de token, nunca hex, e só do primeiro nível: os filhos herdam o tom do pai.\n  colorToken?: string;\n  isOthers?: boolean;\n  children?: PieChartNode[];\n}\n\nexport interface PieSlice {\n  id: string;\n  name: string;\n  value: number;\n  share: number;\n  path: string[];\n  color: string;\n  isOthers: boolean;\n  children: PieSlice[];\n}\n\nexport interface BuildPieSlicesInput {\n  nodes: PieChartNode[];\n  colorsByRootId: Record<string, string>;\n  fallbackColor: string;\n  othersName: string;\n}\n\nconst CHILD_LIGHTEN_STEP: number = 0.22;\n\nfunction isDrawableValue(value: number | null): value is number {\n  return value !== null && Number.isFinite(value) && value > 0;\n}\n\nfunction sumValues(nodes: PieChartNode[]): number {\n  return nodes.reduce((total: number, node: PieChartNode) => total + (node.value ?? 0), 0);\n}\n\nfunction drawableNodes(nodes: PieChartNode[]): PieChartNode[] {\n  return nodes.filter((node: PieChartNode) => isDrawableValue(node.value));\n}\n\nexport function displayNameOf(node: PieChartNode, othersName: string): string {\n  return node.name === \"\" ? othersName : node.name;\n}\n\nfunction colorOf(\n  node: PieChartNode,\n  parentColor: string | undefined,\n  input: BuildPieSlicesInput,\n): string {\n  if (parentColor === undefined) return input.colorsByRootId[node.id] ?? input.fallbackColor;\n  if (node.isOthers) return input.fallbackColor;\n  return lightenColor(parentColor, CHILD_LIGHTEN_STEP);\n}\n\nfunction buildLevel(\n  nodes: PieChartNode[],\n  parentPath: string[],\n  parentColor: string | undefined,\n  input: BuildPieSlicesInput,\n): PieSlice[] {\n  const drawable: PieChartNode[] = drawableNodes(nodes);\n  const levelTotal: number = sumValues(drawable);\n  return drawable.map((node: PieChartNode): PieSlice => {\n    const isOthers: boolean = node.isOthers === true;\n    const name: string = displayNameOf(node, input.othersName);\n    const path: string[] = [...parentPath, name];\n    const color: string = colorOf(node, parentColor, input);\n    return {\n      id: node.id,\n      name,\n      value: node.value as number,\n      share: (node.value as number) / levelTotal,\n      path,\n      color,\n      isOthers,\n      children: buildLevel(node.children ?? [], path, color, input),\n    };\n  });\n}\n\nexport function buildPieSlices(input: BuildPieSlicesInput): PieSlice[] {\n  return buildLevel(input.nodes, [], undefined, input);\n}\n\nexport function findSlice(slices: PieSlice[], id: string): PieSlice | undefined {\n  for (const slice of slices) {\n    if (slice.id === id) return slice;\n    const nested: PieSlice | undefined = findSlice(slice.children, id);\n    if (nested) return nested;\n  }\n  return undefined;\n}\n\nexport function findParentSlice(slices: PieSlice[], id: string): PieSlice | undefined {\n  for (const slice of slices) {\n    if (slice.children.some((child: PieSlice) => child.id === id)) return slice;\n    const nested: PieSlice | undefined = findParentSlice(slice.children, id);\n    if (nested) return nested;\n  }\n  return undefined;\n}\n\nexport function sliceDepth(slices: PieSlice[]): number {\n  if (slices.length === 0) return 0;\n  return 1 + Math.max(...slices.map((slice: PieSlice) => sliceDepth(slice.children)));\n}\n\nexport function totalOf(slices: PieSlice[]): number {\n  return slices.reduce((total: number, slice: PieSlice) => total + slice.value, 0);\n}\n"],"names":["CHILD_LIGHTEN_STEP","isDrawableValue","value","sumValues","nodes","total","node","drawableNodes","displayNameOf","othersName","colorOf","parentColor","input","lightenColor","buildLevel","parentPath","drawable","levelTotal","isOthers","name","path","color","buildPieSlices","findSlice","slices","id","slice","nested","findParentSlice","child","sliceDepth","totalOf"],"mappings":"2HA8BMA,EAA6B,IAEnC,SAASC,EAAgBC,EAAuC,CAC9D,OAAOA,IAAU,MAAQ,OAAO,SAASA,CAAK,GAAKA,EAAQ,CAC7D,CAEA,SAASC,EAAUC,EAA+B,CAChD,OAAOA,EAAM,OAAO,CAACC,EAAeC,IAAuBD,GAASC,EAAK,OAAS,GAAI,CAAC,CACzF,CAEA,SAASC,EAAcH,EAAuC,CAC5D,OAAOA,EAAM,OAAQE,GAAuBL,EAAgBK,EAAK,KAAK,CAAC,CACzE,CAEO,SAASE,EAAcF,EAAoBG,EAA4B,CAC5E,OAAOH,EAAK,OAAS,GAAKG,EAAaH,EAAK,IAC9C,CAEA,SAASI,EACPJ,EACAK,EACAC,EACQ,CACR,OAAID,IAAgB,OAAkBC,EAAM,eAAeN,EAAK,EAAE,GAAKM,EAAM,cACzEN,EAAK,SAAiBM,EAAM,cACzBC,EAAAA,aAAaF,EAAaX,CAAkB,CACrD,CAEA,SAASc,EACPV,EACAW,EACAJ,EACAC,EACY,CACZ,MAAMI,EAA2BT,EAAcH,CAAK,EAC9Ca,EAAqBd,EAAUa,CAAQ,EAC7C,OAAOA,EAAS,IAAKV,GAAiC,CACpD,MAAMY,EAAoBZ,EAAK,WAAa,GACtCa,EAAeX,EAAcF,EAAMM,EAAM,UAAU,EACnDQ,EAAiB,CAAC,GAAGL,EAAYI,CAAI,EACrCE,EAAgBX,EAAQJ,EAAMK,EAAaC,CAAK,EACtD,MAAO,CACL,GAAIN,EAAK,GACT,KAAAa,EACA,MAAOb,EAAK,MACZ,MAAQA,EAAK,MAAmBW,EAChC,KAAAG,EACA,MAAAC,EACA,SAAAH,EACA,SAAUJ,EAAWR,EAAK,UAAY,CAAA,EAAIc,EAAMC,EAAOT,CAAK,CAAA,CAEhE,CAAC,CACH,CAEO,SAASU,EAAeV,EAAwC,CACrE,OAAOE,EAAWF,EAAM,MAAO,CAAA,EAAI,OAAWA,CAAK,CACrD,CAEO,SAASW,EAAUC,EAAoBC,EAAkC,CAC9E,UAAWC,KAASF,EAAQ,CAC1B,GAAIE,EAAM,KAAOD,EAAI,OAAOC,EAC5B,MAAMC,EAA+BJ,EAAUG,EAAM,SAAUD,CAAE,EACjE,GAAIE,EAAQ,OAAOA,CACrB,CAEF,CAEO,SAASC,EAAgBJ,EAAoBC,EAAkC,CACpF,UAAWC,KAASF,EAAQ,CAC1B,GAAIE,EAAM,SAAS,KAAMG,GAAoBA,EAAM,KAAOJ,CAAE,EAAG,OAAOC,EACtE,MAAMC,EAA+BC,EAAgBF,EAAM,SAAUD,CAAE,EACvE,GAAIE,EAAQ,OAAOA,CACrB,CAEF,CAEO,SAASG,EAAWN,EAA4B,CACrD,OAAIA,EAAO,SAAW,EAAU,EACzB,EAAI,KAAK,IAAI,GAAGA,EAAO,IAAKE,GAAoBI,EAAWJ,EAAM,QAAQ,CAAC,CAAC,CACpF,CAEO,SAASK,EAAQP,EAA4B,CAClD,OAAOA,EAAO,OAAO,CAACnB,EAAeqB,IAAoBrB,EAAQqB,EAAM,MAAO,CAAC,CACjF"}

package/dist/lib/ui/components/charts/PieChart/pie-chart-slices.js

@@ -0,0 +1,65 @@
+import { lightenColor as d } from "../chart-color-tone.js";
+const h = 0.22;
+function m(r) {
+  return r !== null && Number.isFinite(r) && r > 0;
+}
+function v(r) {
+  return r.reduce((e, n) => e + (n.value ?? 0), 0);
+}
+function b(r) {
+  return r.filter((e) => m(e.value));
+}
+function O(r, e) {
+  return r.name === "" ? e : r.name;
+}
+function N(r, e, n) {
+  return e === void 0 ? n.colorsByRootId[r.id] ?? n.fallbackColor : r.isOthers ? n.fallbackColor : d(e, h);
+}
+function s(r, e, n, t) {
+  const o = b(r), f = v(o);
+  return o.map((i) => {
+    const a = i.isOthers === !0, l = O(i, t.othersName), c = [...e, l], u = N(i, n, t);
+    return {
+      id: i.id,
+      name: l,
+      value: i.value,
+      share: i.value / f,
+      path: c,
+      color: u,
+      isOthers: a,
+      children: s(i.children ?? [], c, u, t)
+    };
+  });
+}
+function I(r) {
+  return s(r.nodes, [], void 0, r);
+}
+function S(r, e) {
+  for (const n of r) {
+    if (n.id === e) return n;
+    const t = S(n.children, e);
+    if (t) return t;
+  }
+}
+function w(r, e) {
+  for (const n of r) {
+    if (n.children.some((o) => o.id === e)) return n;
+    const t = w(n.children, e);
+    if (t) return t;
+  }
+}
+function C(r) {
+  return r.length === 0 ? 0 : 1 + Math.max(...r.map((e) => C(e.children)));
+}
+function L(r) {
+  return r.reduce((e, n) => e + n.value, 0);
+}
+export {
+  I as buildPieSlices,
+  O as displayNameOf,
+  w as findParentSlice,
+  S as findSlice,
+  C as sliceDepth,
+  L as totalOf
+};
+//# sourceMappingURL=pie-chart-slices.js.map

package/dist/lib/ui/components/charts/PieChart/pie-chart-slices.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pie-chart-slices.js","sources":["../../../../../../src/ui/components/charts/PieChart/pie-chart-slices.ts"],"sourcesContent":["import { lightenColor } from \"../chart-color-tone\";\n\nexport interface PieChartNode {\n  id: string;\n  name: string;\n  value: number | null;\n  // Nome de token, nunca hex, e só do primeiro nível: os filhos herdam o tom do pai.\n  colorToken?: string;\n  isOthers?: boolean;\n  children?: PieChartNode[];\n}\n\nexport interface PieSlice {\n  id: string;\n  name: string;\n  value: number;\n  share: number;\n  path: string[];\n  color: string;\n  isOthers: boolean;\n  children: PieSlice[];\n}\n\nexport interface BuildPieSlicesInput {\n  nodes: PieChartNode[];\n  colorsByRootId: Record<string, string>;\n  fallbackColor: string;\n  othersName: string;\n}\n\nconst CHILD_LIGHTEN_STEP: number = 0.22;\n\nfunction isDrawableValue(value: number | null): value is number {\n  return value !== null && Number.isFinite(value) && value > 0;\n}\n\nfunction sumValues(nodes: PieChartNode[]): number {\n  return nodes.reduce((total: number, node: PieChartNode) => total + (node.value ?? 0), 0);\n}\n\nfunction drawableNodes(nodes: PieChartNode[]): PieChartNode[] {\n  return nodes.filter((node: PieChartNode) => isDrawableValue(node.value));\n}\n\nexport function displayNameOf(node: PieChartNode, othersName: string): string {\n  return node.name === \"\" ? othersName : node.name;\n}\n\nfunction colorOf(\n  node: PieChartNode,\n  parentColor: string | undefined,\n  input: BuildPieSlicesInput,\n): string {\n  if (parentColor === undefined) return input.colorsByRootId[node.id] ?? input.fallbackColor;\n  if (node.isOthers) return input.fallbackColor;\n  return lightenColor(parentColor, CHILD_LIGHTEN_STEP);\n}\n\nfunction buildLevel(\n  nodes: PieChartNode[],\n  parentPath: string[],\n  parentColor: string | undefined,\n  input: BuildPieSlicesInput,\n): PieSlice[] {\n  const drawable: PieChartNode[] = drawableNodes(nodes);\n  const levelTotal: number = sumValues(drawable);\n  return drawable.map((node: PieChartNode): PieSlice => {\n    const isOthers: boolean = node.isOthers === true;\n    const name: string = displayNameOf(node, input.othersName);\n    const path: string[] = [...parentPath, name];\n    const color: string = colorOf(node, parentColor, input);\n    return {\n      id: node.id,\n      name,\n      value: node.value as number,\n      share: (node.value as number) / levelTotal,\n      path,\n      color,\n      isOthers,\n      children: buildLevel(node.children ?? [], path, color, input),\n    };\n  });\n}\n\nexport function buildPieSlices(input: BuildPieSlicesInput): PieSlice[] {\n  return buildLevel(input.nodes, [], undefined, input);\n}\n\nexport function findSlice(slices: PieSlice[], id: string): PieSlice | undefined {\n  for (const slice of slices) {\n    if (slice.id === id) return slice;\n    const nested: PieSlice | undefined = findSlice(slice.children, id);\n    if (nested) return nested;\n  }\n  return undefined;\n}\n\nexport function findParentSlice(slices: PieSlice[], id: string): PieSlice | undefined {\n  for (const slice of slices) {\n    if (slice.children.some((child: PieSlice) => child.id === id)) return slice;\n    const nested: PieSlice | undefined = findParentSlice(slice.children, id);\n    if (nested) return nested;\n  }\n  return undefined;\n}\n\nexport function sliceDepth(slices: PieSlice[]): number {\n  if (slices.length === 0) return 0;\n  return 1 + Math.max(...slices.map((slice: PieSlice) => sliceDepth(slice.children)));\n}\n\nexport function totalOf(slices: PieSlice[]): number {\n  return slices.reduce((total: number, slice: PieSlice) => total + slice.value, 0);\n}\n"],"names":["CHILD_LIGHTEN_STEP","isDrawableValue","value","sumValues","nodes","total","node","drawableNodes","displayNameOf","othersName","colorOf","parentColor","input","lightenColor","buildLevel","parentPath","drawable","levelTotal","isOthers","name","path","color","buildPieSlices","findSlice","slices","id","slice","nested","findParentSlice","child","sliceDepth","totalOf"],"mappings":";AA8BA,MAAMA,IAA6B;AAEnC,SAASC,EAAgBC,GAAuC;AAC9D,SAAOA,MAAU,QAAQ,OAAO,SAASA,CAAK,KAAKA,IAAQ;AAC7D;AAEA,SAASC,EAAUC,GAA+B;AAChD,SAAOA,EAAM,OAAO,CAACC,GAAeC,MAAuBD,KAASC,EAAK,SAAS,IAAI,CAAC;AACzF;AAEA,SAASC,EAAcH,GAAuC;AAC5D,SAAOA,EAAM,OAAO,CAACE,MAAuBL,EAAgBK,EAAK,KAAK,CAAC;AACzE;AAEO,SAASE,EAAcF,GAAoBG,GAA4B;AAC5E,SAAOH,EAAK,SAAS,KAAKG,IAAaH,EAAK;AAC9C;AAEA,SAASI,EACPJ,GACAK,GACAC,GACQ;AACR,SAAID,MAAgB,SAAkBC,EAAM,eAAeN,EAAK,EAAE,KAAKM,EAAM,gBACzEN,EAAK,WAAiBM,EAAM,gBACzBC,EAAaF,GAAaX,CAAkB;AACrD;AAEA,SAASc,EACPV,GACAW,GACAJ,GACAC,GACY;AACZ,QAAMI,IAA2BT,EAAcH,CAAK,GAC9Ca,IAAqBd,EAAUa,CAAQ;AAC7C,SAAOA,EAAS,IAAI,CAACV,MAAiC;AACpD,UAAMY,IAAoBZ,EAAK,aAAa,IACtCa,IAAeX,EAAcF,GAAMM,EAAM,UAAU,GACnDQ,IAAiB,CAAC,GAAGL,GAAYI,CAAI,GACrCE,IAAgBX,EAAQJ,GAAMK,GAAaC,CAAK;AACtD,WAAO;AAAA,MACL,IAAIN,EAAK;AAAA,MACT,MAAAa;AAAA,MACA,OAAOb,EAAK;AAAA,MACZ,OAAQA,EAAK,QAAmBW;AAAA,MAChC,MAAAG;AAAA,MACA,OAAAC;AAAA,MACA,UAAAH;AAAA,MACA,UAAUJ,EAAWR,EAAK,YAAY,CAAA,GAAIc,GAAMC,GAAOT,CAAK;AAAA,IAAA;AAAA,EAEhE,CAAC;AACH;AAEO,SAASU,EAAeV,GAAwC;AACrE,SAAOE,EAAWF,EAAM,OAAO,CAAA,GAAI,QAAWA,CAAK;AACrD;AAEO,SAASW,EAAUC,GAAoBC,GAAkC;AAC9E,aAAWC,KAASF,GAAQ;AAC1B,QAAIE,EAAM,OAAOD,EAAI,QAAOC;AAC5B,UAAMC,IAA+BJ,EAAUG,EAAM,UAAUD,CAAE;AACjE,QAAIE,EAAQ,QAAOA;AAAA,EACrB;AAEF;AAEO,SAASC,EAAgBJ,GAAoBC,GAAkC;AACpF,aAAWC,KAASF,GAAQ;AAC1B,QAAIE,EAAM,SAAS,KAAK,CAACG,MAAoBA,EAAM,OAAOJ,CAAE,EAAG,QAAOC;AACtE,UAAMC,IAA+BC,EAAgBF,EAAM,UAAUD,CAAE;AACvE,QAAIE,EAAQ,QAAOA;AAAA,EACrB;AAEF;AAEO,SAASG,EAAWN,GAA4B;AACrD,SAAIA,EAAO,WAAW,IAAU,IACzB,IAAI,KAAK,IAAI,GAAGA,EAAO,IAAI,CAACE,MAAoBI,EAAWJ,EAAM,QAAQ,CAAC,CAAC;AACpF;AAEO,SAASK,EAAQP,GAA4B;AAClD,SAAOA,EAAO,OAAO,CAACnB,GAAeqB,MAAoBrB,IAAQqB,EAAM,OAAO,CAAC;AACjF;"}

package/dist/lib/ui/components/charts/TopList/TopList.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),w=require("../../../../vendor/clsx/dist/clsx.cjs"),c=require("react"),C=require("../chart-palette.cjs"),_=require("../useChartInstance.cjs"),g=require("./top-list-option.cjs");;/* empty css               */const x=["value"],q=C.CHART_SERIES_COLOR_TOKENS[0];function M(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}function A(t,u){const a=new Set(t.map(e=>e.id)),o=u.filter(e=>a.has(e)),d=t.map(e=>e.id).filter(e=>!o.includes(e));return[...o,...d]}function j({items:t,sort:u="desc",total:a,valueDisplay:o=x,valueFormatter:d,colorToken:e=q,className:L,...T}){const{containerRef:f,chart:p,theme:l,resolveSeriesColor:h}=_.useChartInstance(),R=c.useRef(!1),v=c.useRef([]),[O,m]=c.useState(0);c.useEffect(()=>{const r=f.current;if(!r)return;const s=new ResizeObserver(()=>m(r.clientHeight));return s.observe(r),()=>s.disconnect()},[f]);const S=O>0,E=g.labeledRowStepFor(O,t.length),I=c.useMemo(()=>{const r=h(e),s=[];return t.forEach(i=>{const n=(i.colorToken?h(i.colorToken):void 0)??r;n&&s.push([i.id,n])}),Object.fromEntries(s)},[t,e,l,h]);return c.useEffect(()=>{if(!p||!l||!S)return;const r=R.current&&!M();v.current=A(t,v.current);const s=new Map(t.map(n=>[n.id,n])),i=v.current.map(n=>s.get(n));p.setOption(g.buildTopListOption({items:i,sort:u,total:a,valueDisplay:o,theme:l,colorsByItemId:I,animate:r,labeledRowStep:E,valueFormatter:d}),{replaceMerge:["series","yAxis"]}),R.current=!0},[p,l,t,u,a,o,I,S,E,d]),b.jsx("div",{className:w.clsx("top-list",L),...T,children:b.jsx("div",{ref:f,className:"top-list__canvas"})})}exports.TopList=j;
+//# sourceMappingURL=TopList.cjs.map

package/dist/lib/ui/components/charts/TopList/TopList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopList.cjs","sources":["../../../../../../src/ui/components/charts/TopList/TopList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTopListOption,\n  labeledRowStepFor,\n  type TopListItem,\n  type TopListSort,\n  type TopListValueDisplay,\n} from \"./top-list-option\";\nimport \"./top-list.css\";\n\nexport type { TopListItem, TopListSort, TopListValueDisplay } from \"./top-list-option\";\n\nexport type TopListProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  items: TopListItem[];\n  sort?: TopListSort;\n  total?: number;\n  valueDisplay?: TopListValueDisplay[];\n  valueFormatter?: (value: number) => string;\n  colorToken?: string;\n};\n\nconst DEFAULT_VALUE_DISPLAY: TopListValueDisplay[] = [\"value\"];\n\nconst DEFAULT_COLOR_TOKEN: string = CHART_SERIES_COLOR_TOKENS[0];\n\nfunction prefersReducedMotion(): boolean {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction keepFirstSeenOrder(items: TopListItem[], previousOrder: string[]): string[] {\n  const currentIds: Set<string> = new Set(items.map((item: TopListItem) => item.id));\n  const survivingIds: string[] = previousOrder.filter((id: string) => currentIds.has(id));\n  const newIds: string[] = items\n    .map((item: TopListItem) => item.id)\n    .filter((id: string) => !survivingIds.includes(id));\n  return [...survivingIds, ...newIds];\n}\n\nexport function TopList({\n  items,\n  sort = \"desc\",\n  total,\n  valueDisplay = DEFAULT_VALUE_DISPLAY,\n  valueFormatter,\n  colorToken = DEFAULT_COLOR_TOKEN,\n  className,\n  ...props\n}: TopListProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const hasDrawnRef = useRef<boolean>(false);\n  const categoryOrderRef = useRef<string[]>([]);\n  const [canvasHeightPx, setCanvasHeightPx] = useState<number>(0);\n\n  useEffect(() => {\n    const canvas: HTMLDivElement | null = containerRef.current;\n    if (!canvas) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() => setCanvasHeightPx(canvas.clientHeight));\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  const isCanvasMeasured: boolean = canvasHeightPx > 0;\n  const labeledRowStep: number = labeledRowStepFor(canvasHeightPx, items.length);\n\n  const colorsByItemId: Record<string, string> = useMemo(() => {\n    const defaultColor: string | undefined = resolveSeriesColor(colorToken);\n    const entries: Array<[string, string]> = [];\n    items.forEach((item: TopListItem) => {\n      const color: string | undefined =\n        (item.colorToken ? resolveSeriesColor(item.colorToken) : undefined) ?? defaultColor;\n      if (color) entries.push([item.id, color]);\n    });\n    return Object.fromEntries(entries);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, colorToken, theme, resolveSeriesColor]);\n\n  useEffect(() => {\n    if (!chart || !theme || !isCanvasMeasured) return;\n    const animate: boolean = hasDrawnRef.current && !prefersReducedMotion();\n    categoryOrderRef.current = keepFirstSeenOrder(items, categoryOrderRef.current);\n    const itemsById: Map<string, TopListItem> = new Map(\n      items.map((item: TopListItem) => [item.id, item]),\n    );\n    const stableItems: TopListItem[] = categoryOrderRef.current.map(\n      (id: string) => itemsById.get(id) as TopListItem,\n    );\n    chart.setOption(\n      buildTopListOption({\n        items: stableItems,\n        sort,\n        total,\n        valueDisplay,\n        theme,\n        colorsByItemId,\n        animate,\n        labeledRowStep,\n        valueFormatter,\n      }),\n      { replaceMerge: [\"series\", \"yAxis\"] },\n    );\n    hasDrawnRef.current = true;\n  }, [\n    chart,\n    theme,\n    items,\n    sort,\n    total,\n    valueDisplay,\n    colorsByItemId,\n    isCanvasMeasured,\n    labeledRowStep,\n    valueFormatter,\n  ]);\n\n  return (\n    <div className={clsx(\"top-list\", className)} {...props}>\n      <div ref={containerRef} className=\"top-list__canvas\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_VALUE_DISPLAY","DEFAULT_COLOR_TOKEN","CHART_SERIES_COLOR_TOKENS","prefersReducedMotion","keepFirstSeenOrder","items","previousOrder","currentIds","item","survivingIds","id","newIds","TopList","sort","total","valueDisplay","valueFormatter","colorToken","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","hasDrawnRef","useRef","categoryOrderRef","canvasHeightPx","setCanvasHeightPx","useState","useEffect","canvas","observer","isCanvasMeasured","labeledRowStep","labeledRowStepFor","colorsByItemId","useMemo","defaultColor","entries","color","animate","itemsById","stableItems","buildTopListOption","jsx","clsx"],"mappings":"mUAwBA,MAAMA,EAA+C,CAAC,OAAO,EAEvDC,EAA8BC,EAAAA,0BAA0B,CAAC,EAE/D,SAASC,GAAgC,CACvC,OAAO,OAAO,WAAW,kCAAkC,EAAE,OAC/D,CAEA,SAASC,EAAmBC,EAAsBC,EAAmC,CACnF,MAAMC,EAA0B,IAAI,IAAIF,EAAM,IAAKG,GAAsBA,EAAK,EAAE,CAAC,EAC3EC,EAAyBH,EAAc,OAAQI,GAAeH,EAAW,IAAIG,CAAE,CAAC,EAChFC,EAAmBN,EACtB,IAAKG,GAAsBA,EAAK,EAAE,EAClC,OAAQE,GAAe,CAACD,EAAa,SAASC,CAAE,CAAC,EACpD,MAAO,CAAC,GAAGD,EAAc,GAAGE,CAAM,CACpC,CAEO,SAASC,EAAQ,CACtB,MAAAP,EACA,KAAAQ,EAAO,OACP,MAAAC,EACA,aAAAC,EAAef,EACf,eAAAgB,EACA,WAAAC,EAAahB,EACb,UAAAiB,EACA,GAAGC,CACL,EAAiB,CACf,KAAM,CAAE,aAAAC,EAAc,MAAAC,EAAO,MAAAC,EAAO,mBAAAC,CAAA,EAAsCC,EAAAA,iBAAA,EACpEC,EAAcC,EAAAA,OAAgB,EAAK,EACnCC,EAAmBD,EAAAA,OAAiB,EAAE,EACtC,CAACE,EAAgBC,CAAiB,EAAIC,EAAAA,SAAiB,CAAC,EAE9DC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAgCZ,EAAa,QACnD,GAAI,CAACY,EAAQ,OACb,MAAMC,EAA2B,IAAI,eAAe,IAAMJ,EAAkBG,EAAO,YAAY,CAAC,EAChG,OAAAC,EAAS,QAAQD,CAAM,EAChB,IAAMC,EAAS,WAAA,CACxB,EAAG,CAACb,CAAY,CAAC,EAEjB,MAAMc,EAA4BN,EAAiB,EAC7CO,EAAyBC,EAAAA,kBAAkBR,EAAgBvB,EAAM,MAAM,EAEvEgC,EAAyCC,EAAAA,QAAQ,IAAM,CAC3D,MAAMC,EAAmChB,EAAmBN,CAAU,EAChEuB,EAAmC,CAAA,EACzC,OAAAnC,EAAM,QAASG,GAAsB,CACnC,MAAMiC,GACHjC,EAAK,WAAae,EAAmBf,EAAK,UAAU,EAAI,SAAc+B,EACrEE,GAAOD,EAAQ,KAAK,CAAChC,EAAK,GAAIiC,CAAK,CAAC,CAC1C,CAAC,EACM,OAAO,YAAYD,CAAO,CAEnC,EAAG,CAACnC,EAAOY,EAAYK,EAAOC,CAAkB,CAAC,EAEjDQ,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACV,GAAS,CAACC,GAAS,CAACY,EAAkB,OAC3C,MAAMQ,EAAmBjB,EAAY,SAAW,CAACtB,EAAA,EACjDwB,EAAiB,QAAUvB,EAAmBC,EAAOsB,EAAiB,OAAO,EAC7E,MAAMgB,EAAsC,IAAI,IAC9CtC,EAAM,IAAKG,GAAsB,CAACA,EAAK,GAAIA,CAAI,CAAC,CAAA,EAE5CoC,EAA6BjB,EAAiB,QAAQ,IACzDjB,GAAeiC,EAAU,IAAIjC,CAAE,CAAA,EAElCW,EAAM,UACJwB,qBAAmB,CACjB,MAAOD,EACP,KAAA/B,EACA,MAAAC,EACA,aAAAC,EACA,MAAAO,EACA,eAAAe,EACA,QAAAK,EACA,eAAAP,EACA,eAAAnB,CAAA,CACD,EACD,CAAE,aAAc,CAAC,SAAU,OAAO,CAAA,CAAE,EAEtCS,EAAY,QAAU,EACxB,EAAG,CACDJ,EACAC,EACAjB,EACAQ,EACAC,EACAC,EACAsB,EACAH,EACAC,EACAnB,CAAA,CACD,EAGC8B,EAAAA,IAAC,MAAA,CAAI,UAAWC,EAAAA,KAAK,WAAY7B,CAAS,EAAI,GAAGC,EAC/C,eAAC,MAAA,CAAI,IAAKC,EAAc,UAAU,mBAAmB,EACvD,CAEJ"}

package/dist/lib/ui/components/charts/TopList/TopList.js

@@ -0,0 +1,79 @@
+import { jsx as I } from "react/jsx-runtime";
+import { clsx as C } from "../../../../vendor/clsx/dist/clsx.js";
+import { useRef as S, useState as L, useEffect as w, useMemo as T } from "react";
+import { CHART_SERIES_COLOR_TOKENS as x } from "../chart-palette.js";
+import { useChartInstance as A } from "../useChartInstance.js";
+import { labeledRowStepFor as M, buildTopListOption as H } from "./top-list-option.js";
+/* empty css             */
+const N = ["value"], y = x[0];
+function D() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function F(r, i) {
+  const a = new Set(r.map((e) => e.id)), s = i.filter((e) => a.has(e)), d = r.map((e) => e.id).filter((e) => !s.includes(e));
+  return [...s, ...d];
+}
+function V({
+  items: r,
+  sort: i = "desc",
+  total: a,
+  valueDisplay: s = N,
+  valueFormatter: d,
+  colorToken: e = y,
+  className: _,
+  ...b
+}) {
+  const { containerRef: f, chart: p, theme: u, resolveSeriesColor: l } = A(), h = S(!1), m = S([]), [v, g] = L(0);
+  w(() => {
+    const t = f.current;
+    if (!t) return;
+    const n = new ResizeObserver(() => g(t.clientHeight));
+    return n.observe(t), () => n.disconnect();
+  }, [f]);
+  const O = v > 0, R = M(v, r.length), E = T(() => {
+    const t = l(e), n = [];
+    return r.forEach((c) => {
+      const o = (c.colorToken ? l(c.colorToken) : void 0) ?? t;
+      o && n.push([c.id, o]);
+    }), Object.fromEntries(n);
+  }, [r, e, u, l]);
+  return w(() => {
+    if (!p || !u || !O) return;
+    const t = h.current && !D();
+    m.current = F(r, m.current);
+    const n = new Map(
+      r.map((o) => [o.id, o])
+    ), c = m.current.map(
+      (o) => n.get(o)
+    );
+    p.setOption(
+      H({
+        items: c,
+        sort: i,
+        total: a,
+        valueDisplay: s,
+        theme: u,
+        colorsByItemId: E,
+        animate: t,
+        labeledRowStep: R,
+        valueFormatter: d
+      }),
+      { replaceMerge: ["series", "yAxis"] }
+    ), h.current = !0;
+  }, [
+    p,
+    u,
+    r,
+    i,
+    a,
+    s,
+    E,
+    O,
+    R,
+    d
+  ]), /* @__PURE__ */ I("div", { className: C("top-list", _), ...b, children: /* @__PURE__ */ I("div", { ref: f, className: "top-list__canvas" }) });
+}
+export {
+  V as TopList
+};
+//# sourceMappingURL=TopList.js.map

package/dist/lib/ui/components/charts/TopList/TopList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopList.js","sources":["../../../../../../src/ui/components/charts/TopList/TopList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { CHART_SERIES_COLOR_TOKENS } from \"../chart-palette\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTopListOption,\n  labeledRowStepFor,\n  type TopListItem,\n  type TopListSort,\n  type TopListValueDisplay,\n} from \"./top-list-option\";\nimport \"./top-list.css\";\n\nexport type { TopListItem, TopListSort, TopListValueDisplay } from \"./top-list-option\";\n\nexport type TopListProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  items: TopListItem[];\n  sort?: TopListSort;\n  total?: number;\n  valueDisplay?: TopListValueDisplay[];\n  valueFormatter?: (value: number) => string;\n  colorToken?: string;\n};\n\nconst DEFAULT_VALUE_DISPLAY: TopListValueDisplay[] = [\"value\"];\n\nconst DEFAULT_COLOR_TOKEN: string = CHART_SERIES_COLOR_TOKENS[0];\n\nfunction prefersReducedMotion(): boolean {\n  return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction keepFirstSeenOrder(items: TopListItem[], previousOrder: string[]): string[] {\n  const currentIds: Set<string> = new Set(items.map((item: TopListItem) => item.id));\n  const survivingIds: string[] = previousOrder.filter((id: string) => currentIds.has(id));\n  const newIds: string[] = items\n    .map((item: TopListItem) => item.id)\n    .filter((id: string) => !survivingIds.includes(id));\n  return [...survivingIds, ...newIds];\n}\n\nexport function TopList({\n  items,\n  sort = \"desc\",\n  total,\n  valueDisplay = DEFAULT_VALUE_DISPLAY,\n  valueFormatter,\n  colorToken = DEFAULT_COLOR_TOKEN,\n  className,\n  ...props\n}: TopListProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n  const hasDrawnRef = useRef<boolean>(false);\n  const categoryOrderRef = useRef<string[]>([]);\n  const [canvasHeightPx, setCanvasHeightPx] = useState<number>(0);\n\n  useEffect(() => {\n    const canvas: HTMLDivElement | null = containerRef.current;\n    if (!canvas) return undefined;\n    const observer: ResizeObserver = new ResizeObserver(() => setCanvasHeightPx(canvas.clientHeight));\n    observer.observe(canvas);\n    return () => observer.disconnect();\n  }, [containerRef]);\n\n  const isCanvasMeasured: boolean = canvasHeightPx > 0;\n  const labeledRowStep: number = labeledRowStepFor(canvasHeightPx, items.length);\n\n  const colorsByItemId: Record<string, string> = useMemo(() => {\n    const defaultColor: string | undefined = resolveSeriesColor(colorToken);\n    const entries: Array<[string, string]> = [];\n    items.forEach((item: TopListItem) => {\n      const color: string | undefined =\n        (item.colorToken ? resolveSeriesColor(item.colorToken) : undefined) ?? defaultColor;\n      if (color) entries.push([item.id, color]);\n    });\n    return Object.fromEntries(entries);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [items, colorToken, theme, resolveSeriesColor]);\n\n  useEffect(() => {\n    if (!chart || !theme || !isCanvasMeasured) return;\n    const animate: boolean = hasDrawnRef.current && !prefersReducedMotion();\n    categoryOrderRef.current = keepFirstSeenOrder(items, categoryOrderRef.current);\n    const itemsById: Map<string, TopListItem> = new Map(\n      items.map((item: TopListItem) => [item.id, item]),\n    );\n    const stableItems: TopListItem[] = categoryOrderRef.current.map(\n      (id: string) => itemsById.get(id) as TopListItem,\n    );\n    chart.setOption(\n      buildTopListOption({\n        items: stableItems,\n        sort,\n        total,\n        valueDisplay,\n        theme,\n        colorsByItemId,\n        animate,\n        labeledRowStep,\n        valueFormatter,\n      }),\n      { replaceMerge: [\"series\", \"yAxis\"] },\n    );\n    hasDrawnRef.current = true;\n  }, [\n    chart,\n    theme,\n    items,\n    sort,\n    total,\n    valueDisplay,\n    colorsByItemId,\n    isCanvasMeasured,\n    labeledRowStep,\n    valueFormatter,\n  ]);\n\n  return (\n    <div className={clsx(\"top-list\", className)} {...props}>\n      <div ref={containerRef} className=\"top-list__canvas\" />\n    </div>\n  );\n}\n"],"names":["DEFAULT_VALUE_DISPLAY","DEFAULT_COLOR_TOKEN","CHART_SERIES_COLOR_TOKENS","prefersReducedMotion","keepFirstSeenOrder","items","previousOrder","currentIds","item","survivingIds","id","newIds","TopList","sort","total","valueDisplay","valueFormatter","colorToken","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","hasDrawnRef","useRef","categoryOrderRef","canvasHeightPx","setCanvasHeightPx","useState","useEffect","canvas","observer","isCanvasMeasured","labeledRowStep","labeledRowStepFor","colorsByItemId","useMemo","defaultColor","entries","color","animate","itemsById","stableItems","buildTopListOption","jsx","clsx"],"mappings":"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"}