@apipass/design-system 6.1.0 → 6.2.0

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

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

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

@@ -1 +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 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\nconst PERCENT_LABEL: Intl.NumberFormat = new Intl.NumberFormat(undefined, {\n  style: \"percent\",\n  maximumFractionDigits: 1,\n});\n\nexport function formatShare(share: number): string {\n  return PERCENT_LABEL.format(share);\n}\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","PERCENT_LABEL","formatShare","share","formatValue","input","value","escapeHtml","text","labelText","slice","parts","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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"}
+{"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/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":";;;;;;;AAwBA,MAAMA,IAA+C,CAAC,OAAO,GAEvDC,IAA8BC,EAA0B,CAAC;AAE/D,SAASC,IAAgC;AACvC,SAAO,OAAO,WAAW,kCAAkC,EAAE;AAC/D;AAEA,SAASC,EAAmBC,GAAsBC,GAAmC;AACnF,QAAMC,IAA0B,IAAI,IAAIF,EAAM,IAAI,CAACG,MAAsBA,EAAK,EAAE,CAAC,GAC3EC,IAAyBH,EAAc,OAAO,CAACI,MAAeH,EAAW,IAAIG,CAAE,CAAC,GAChFC,IAAmBN,EACtB,IAAI,CAACG,MAAsBA,EAAK,EAAE,EAClC,OAAO,CAACE,MAAe,CAACD,EAAa,SAASC,CAAE,CAAC;AACpD,SAAO,CAAC,GAAGD,GAAc,GAAGE,CAAM;AACpC;AAEO,SAASC,EAAQ;AAAA,EACtB,OAAAP;AAAA,EACA,MAAAQ,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAAC,IAAef;AAAA,EACf,gBAAAgB;AAAA,EACA,YAAAC,IAAahB;AAAA,EACb,WAAAiB;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,EAAA,GACpEC,IAAcC,EAAgB,EAAK,GACnCC,IAAmBD,EAAiB,EAAE,GACtC,CAACE,GAAgBC,CAAiB,IAAIC,EAAiB,CAAC;AAE9D,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAgCZ,EAAa;AACnD,QAAI,CAACY,EAAQ;AACb,UAAMC,IAA2B,IAAI,eAAe,MAAMJ,EAAkBG,EAAO,YAAY,CAAC;AAChG,WAAAC,EAAS,QAAQD,CAAM,GAChB,MAAMC,EAAS,WAAA;AAAA,EACxB,GAAG,CAACb,CAAY,CAAC;AAEjB,QAAMc,IAA4BN,IAAiB,GAC7CO,IAAyBC,EAAkBR,GAAgBvB,EAAM,MAAM,GAEvEgC,IAAyCC,EAAQ,MAAM;AAC3D,UAAMC,IAAmChB,EAAmBN,CAAU,GAChEuB,IAAmC,CAAA;AACzC,WAAAnC,EAAM,QAAQ,CAACG,MAAsB;AACnC,YAAMiC,KACHjC,EAAK,aAAae,EAAmBf,EAAK,UAAU,IAAI,WAAc+B;AACzE,MAAIE,KAAOD,EAAQ,KAAK,CAAChC,EAAK,IAAIiC,CAAK,CAAC;AAAA,IAC1C,CAAC,GACM,OAAO,YAAYD,CAAO;AAAA,EAEnC,GAAG,CAACnC,GAAOY,GAAYK,GAAOC,CAAkB,CAAC;AAEjD,SAAAQ,EAAU,MAAM;AACd,QAAI,CAACV,KAAS,CAACC,KAAS,CAACY,EAAkB;AAC3C,UAAMQ,IAAmBjB,EAAY,WAAW,CAACtB,EAAA;AACjD,IAAAwB,EAAiB,UAAUvB,EAAmBC,GAAOsB,EAAiB,OAAO;AAC7E,UAAMgB,IAAsC,IAAI;AAAA,MAC9CtC,EAAM,IAAI,CAACG,MAAsB,CAACA,EAAK,IAAIA,CAAI,CAAC;AAAA,IAAA,GAE5CoC,IAA6BjB,EAAiB,QAAQ;AAAA,MAC1D,CAACjB,MAAeiC,EAAU,IAAIjC,CAAE;AAAA,IAAA;AAElC,IAAAW,EAAM;AAAA,MACJwB,EAAmB;AAAA,QACjB,OAAOD;AAAA,QACP,MAAA/B;AAAA,QACA,OAAAC;AAAA,QACA,cAAAC;AAAA,QACA,OAAAO;AAAA,QACA,gBAAAe;AAAA,QACA,SAAAK;AAAA,QACA,gBAAAP;AAAA,QACA,gBAAAnB;AAAA,MAAA,CACD;AAAA,MACD,EAAE,cAAc,CAAC,UAAU,OAAO,EAAA;AAAA,IAAE,GAEtCS,EAAY,UAAU;AAAA,EACxB,GAAG;AAAA,IACDJ;AAAA,IACAC;AAAA,IACAjB;AAAA,IACAQ;AAAA,IACAC;AAAA,IACAC;AAAA,IACAsB;AAAA,IACAH;AAAA,IACAC;AAAA,IACAnB;AAAA,EAAA,CACD,GAGC,gBAAA8B,EAAC,OAAA,EAAI,WAAWC,EAAK,YAAY7B,CAAS,GAAI,GAAGC,GAC/C,4BAAC,OAAA,EAAI,KAAKC,GAAc,WAAU,oBAAmB,GACvD;AAEJ;"}

package/dist/lib/ui/components/charts/TopList/top-list-option.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../chart-share.cjs");require("echarts/charts");require("echarts/components");const L=require("echarts/core");require("echarts/renderers");function M(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const B=M(L),h="–",b=160,E=12,O=88,w=56,c=16,C=20,p=4,S=8,T=800,f=12,V=14,N=1e-9,X=/[{}|]/g,k="top-list-values";function u(e){return e.value??0}function v(e){const t=Math.max(...e.map(u));return t>0?t:1}function U(e){const t=[...new Set(e.map(u))].sort((o,r)=>o-r),n=t.slice(1).map((o,r)=>o-t[r]);return n.length>0?Math.min(...n):1/0}function F(e){const t=v(e)*N,n=U(e)/(e.length+1);return Math.min(t,n)}function y(e){const t=F(e);return new Map(e.map((n,o)=>[n.id,u(n)+t*(e.length-o)]))}function m(e,t){const n=y(e),o=t==="desc"?-1:1,r=[...e].sort((a,i)=>o*(n.get(a.id)-n.get(i.id)));return new Map(r.map((a,i)=>[a.id,i+1]))}function A(e,t){return t??e.reduce((n,o)=>n+u(o),0)}function x(e,t){return t===0?0:u(e)/t}function g(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function D(e){return e.replace(X," ")}function H(e,t){const n=`${f}px ${t.fontFamily}`;return D(B.format.truncateText(e,b,n,"…"))}function I(e,t){return t===null?h:e.valueFormatter?e.valueFormatter(t):String(t)}function W(e,t){return e.value===null?h:_.formatShare(x(e,t))}function $(e){const t=[];return e.includes("value")&&t.push(O),e.includes("percent")&&t.push(w),t.length===0?0:t.reduce((n,o)=>n+o,0)+S}function j(e,t,n){const o=[];return e.valueDisplay.includes("value")&&o.push(`{value|${D(I(e,t.value))}}`),e.valueDisplay.includes("percent")&&o.push(`{percent|${W(t,n)}}`),o.join("")}function q(e,t){const n=(e-2*c)/t;return Math.max(1,Math.ceil(V/n))}function P(e,t){return e===void 0||(e-1)%t===0}function G(e,t){const{items:n,sort:o,theme:r}=e,a=m(n,o),i=e.labeledRowStep;return{type:"category",data:n.map(l=>l.id),inverse:o==="desc",animationDuration:0,animationDurationUpdate:e.animate?T:0,axisLine:{show:!1},axisTick:{show:!1},axisLabel:{color:r.labelColor,fontSize:f,interval:0,align:"right",margin:E,formatter:l=>{if(!P(a.get(l),i))return"";const d=t.get(l);return d?H(d.name,r):""}}}}function z(e,t,n){return o=>{const r=t.get(o.name);if(!r)return"";const a=r.value===null?"":` · ${_.formatShare(x(r,n))}`,i=g(I(e,r.value));return`<div>${g(r.name)}</div><div><b>${i}</b>${a}</div>`}}function K(e,t,n){const{theme:o}=e,r=m(e.items,e.sort),a=e.labeledRowStep;return{show:e.valueDisplay.length>0,position:"right",distance:S,fontSize:f,formatter:i=>{if(!P(r.get(i.name),a))return"";const l=t.get(i.name);return l?j(e,l,n):""},rich:{value:{color:o.labelColor,fontWeight:600,padding:[0,8,0,0]},percent:{color:o.labelColor}}}}function Y(e){const{items:t,theme:n,colorsByItemId:o}=e,r=new Map(t.map(s=>[s.id,s])),a=A(t,e.total),i=v(t),l=y(t),d=$(e.valueDisplay),R=n.seriesColors[0];return{animation:!0,animationDuration:0,animationDurationUpdate:e.animate?T:0,animationEasing:"linear",animationEasingUpdate:"linear",textStyle:{fontFamily:n.fontFamily,color:n.labelColor},grid:{top:c,bottom:c,left:c+b+E,right:c+d,containLabel:!1},tooltip:{trigger:"item",backgroundColor:n.tooltipBackgroundColor,borderColor:n.tooltipBorderColor,textStyle:{color:n.labelColor},formatter:z(e,r,a)},xAxis:{type:"value",min:0,max:i,show:!1},yAxis:G(e,r),series:[{id:k,type:"bar",realtimeSort:!0,barMaxWidth:C,itemStyle:{borderRadius:[0,p,p,0]},data:t.map(s=>({id:s.id,name:s.id,value:[l.get(s.id),s.id],itemStyle:{color:o[s.id]??R}})),encode:{x:0,y:1},label:K(e,r,a)}]}}exports.buildTopListOption=Y;exports.labeledRowStepFor=q;exports.rankById=m;exports.resolveTotal=A;
+//# sourceMappingURL=top-list-option.cjs.map

package/dist/lib/ui/components/charts/TopList/top-list-option.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"top-list-option.cjs","sources":["../../../../../../src/ui/components/charts/TopList/top-list-option.ts"],"sourcesContent":["import { formatShare } from \"../chart-share\";\nimport { echarts } from \"../echarts-modules\";\nimport type { ChartTheme } from \"../chart-theme\";\n\nexport interface TopListItem {\n  id: string;\n  name: string;\n  value: number | null;\n  colorToken?: string;\n}\n\nexport type TopListSort = \"desc\" | \"asc\";\n\nexport type TopListValueDisplay = \"value\" | \"percent\";\n\nexport interface TopListOptionInput {\n  items: TopListItem[];\n  sort: TopListSort;\n  total?: number;\n  valueDisplay: TopListValueDisplay[];\n  theme: ChartTheme;\n  colorsByItemId: Record<string, string>;\n  animate: boolean;\n  labeledRowStep: number;\n  valueFormatter?: (value: number) => string;\n}\n\nconst EMPTY_VALUE_TEXT: string = \"–\";\n\nconst NAME_MAX_WIDTH_PX: number = 160;\n\nconst NAME_TO_BAR_GAP_PX: number = 12;\n\nconst VALUE_COLUMN_WIDTH_PX: number = 88;\n\nconst PERCENT_COLUMN_WIDTH_PX: number = 56;\n\nconst GRID_PADDING_PX: number = 16;\n\nconst BAR_MAX_WIDTH_PX: number = 20;\n\nconst BAR_RADIUS_PX: number = 4;\n\nconst BAR_END_LABEL_DISTANCE_PX: number = 8;\n\nconst UPDATE_ANIMATION_MS: number = 800;\n\nconst LABEL_FONT_SIZE_PX: number = 12;\n\nconst MIN_LABELED_ROW_HEIGHT_PX: number = 14;\n\nconst TIE_BREAK_RELATIVE_STEP: number = 1e-9;\n\nconst RICH_TEXT_RESERVED: RegExp = /[{}|]/g;\n\nconst VALUE_SERIES_ID: string = \"top-list-values\";\n\n\nfunction valueOf(item: TopListItem): number {\n  return item.value ?? 0;\n}\n\nfunction maxValueOf(items: TopListItem[]): number {\n  const maxValue: number = Math.max(...items.map(valueOf));\n  return maxValue > 0 ? maxValue : 1;\n}\n\nfunction smallestGapBetweenDistinctValues(items: TopListItem[]): number {\n  const distinctValues: number[] = [...new Set(items.map(valueOf))].sort(\n    (first: number, second: number) => first - second,\n  );\n  const gaps: number[] = distinctValues\n    .slice(1)\n    .map((value: number, index: number) => value - distinctValues[index]);\n  return gaps.length > 0 ? Math.min(...gaps) : Infinity;\n}\n\nfunction tieBreakStepOf(items: TopListItem[]): number {\n  const relativeStep: number = maxValueOf(items) * TIE_BREAK_RELATIVE_STEP;\n  const stepThatKeepsDistinctValuesApart: number =\n    smallestGapBetweenDistinctValues(items) / (items.length + 1);\n  return Math.min(relativeStep, stepThatKeepsDistinctValuesApart);\n}\n\nfunction plottedValuesById(items: TopListItem[]): Map<string, number> {\n  const tieBreakStep: number = tieBreakStepOf(items);\n  return new Map(\n    items.map((item: TopListItem, position: number) => [\n      item.id,\n      valueOf(item) + tieBreakStep * (items.length - position),\n    ]),\n  );\n}\n\nexport function rankById(items: TopListItem[], sort: TopListSort): Map<string, number> {\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const direction: number = sort === \"desc\" ? -1 : 1;\n  const ranked: TopListItem[] = [...items].sort(\n    (first: TopListItem, second: TopListItem) =>\n      direction * ((plottedValues.get(first.id) as number) - (plottedValues.get(second.id) as number)),\n  );\n  return new Map(ranked.map((item: TopListItem, index: number) => [item.id, index + 1]));\n}\n\nexport function resolveTotal(items: TopListItem[], total?: number): number {\n  return total ?? items.reduce((sum: number, item: TopListItem) => sum + valueOf(item), 0);\n}\n\nfunction shareOf(item: TopListItem, total: number): number {\n  return total === 0 ? 0 : valueOf(item) / total;\n}\n\nfunction escapeHtml(text: string): string {\n  return text.replace(/&/g, \"&amp;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n}\n\nfunction plainRichText(text: string): string {\n  return text.replace(RICH_TEXT_RESERVED, \" \");\n}\n\nfunction truncatedName(name: string, theme: ChartTheme): string {\n  const font: string = `${LABEL_FONT_SIZE_PX}px ${theme.fontFamily}`;\n  return plainRichText(echarts.format.truncateText(name, NAME_MAX_WIDTH_PX, font, \"…\"));\n}\n\nfunction formatValueText(input: TopListOptionInput, value: number | null): string {\n  if (value === null) return EMPTY_VALUE_TEXT;\n  return input.valueFormatter ? input.valueFormatter(value) : String(value);\n}\n\nfunction formatShareText(item: TopListItem, total: number): string {\n  return item.value === null ? EMPTY_VALUE_TEXT : formatShare(shareOf(item, total));\n}\n\nfunction barEndLabelWidthPx(valueDisplay: TopListValueDisplay[]): number {\n  const widths: number[] = [];\n  if (valueDisplay.includes(\"value\")) widths.push(VALUE_COLUMN_WIDTH_PX);\n  if (valueDisplay.includes(\"percent\")) widths.push(PERCENT_COLUMN_WIDTH_PX);\n  if (widths.length === 0) return 0;\n  return widths.reduce((sum: number, width: number) => sum + width, 0) + BAR_END_LABEL_DISTANCE_PX;\n}\n\nfunction barEndLabelText(input: TopListOptionInput, item: TopListItem, total: number): string {\n  const parts: string[] = [];\n  if (input.valueDisplay.includes(\"value\")) {\n    parts.push(`{value|${plainRichText(formatValueText(input, item.value))}}`);\n  }\n  if (input.valueDisplay.includes(\"percent\")) {\n    parts.push(`{percent|${formatShareText(item, total)}}`);\n  }\n  return parts.join(\"\");\n}\n\nexport function labeledRowStepFor(canvasHeightPx: number, itemCount: number): number {\n  const rowHeightPx: number = (canvasHeightPx - 2 * GRID_PADDING_PX) / itemCount;\n  return Math.max(1, Math.ceil(MIN_LABELED_ROW_HEIGHT_PX / rowHeightPx));\n}\n\nfunction isRowLabeled(rank: number | undefined, step: number): boolean {\n  return rank === undefined || (rank - 1) % step === 0;\n}\n\nfunction categoryAxis(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n): Record<string, unknown> {\n  const { items, sort, theme } = input;\n  const ranks: Map<string, number> = rankById(items, sort);\n  const step: number = input.labeledRowStep;\n  return {\n    type: \"category\",\n    data: items.map((item: TopListItem) => item.id),\n    inverse: sort === \"desc\",\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    axisLine: { show: false },\n    axisTick: { show: false },\n    axisLabel: {\n      color: theme.labelColor,\n      fontSize: LABEL_FONT_SIZE_PX,\n      interval: 0,\n      align: \"right\",\n      margin: NAME_TO_BAR_GAP_PX,\n      formatter: (id: string) => {\n        if (!isRowLabeled(ranks.get(id), step)) return \"\";\n        const item: TopListItem | undefined = itemsById.get(id);\n        return item ? truncatedName(item.name, theme) : \"\";\n      },\n    },\n  };\n}\n\nfunction tooltipFormatter(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): (params: { name: string }) => string {\n  return (params: { name: string }) => {\n    const item: TopListItem | undefined = itemsById.get(params.name);\n    if (!item) return \"\";\n    const share: string = item.value === null ? \"\" : ` · ${formatShare(shareOf(item, total))}`;\n    const value: string = escapeHtml(formatValueText(input, item.value));\n    return `<div>${escapeHtml(item.name)}</div><div><b>${value}</b>${share}</div>`;\n  };\n}\n\nfunction barEndLabel(\n  input: TopListOptionInput,\n  itemsById: Map<string, TopListItem>,\n  total: number,\n): Record<string, unknown> {\n  const { theme } = input;\n  const ranks: Map<string, number> = rankById(input.items, input.sort);\n  const step: number = input.labeledRowStep;\n  return {\n    show: input.valueDisplay.length > 0,\n    position: \"right\",\n    distance: BAR_END_LABEL_DISTANCE_PX,\n    fontSize: LABEL_FONT_SIZE_PX,\n    formatter: (params: { name: string }) => {\n      if (!isRowLabeled(ranks.get(params.name), step)) return \"\";\n      const item: TopListItem | undefined = itemsById.get(params.name);\n      return item ? barEndLabelText(input, item, total) : \"\";\n    },\n    rich: {\n      value: { color: theme.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },\n      percent: { color: theme.labelColor },\n    },\n  };\n}\n\nexport function buildTopListOption(input: TopListOptionInput): Record<string, unknown> {\n  const { items, theme, colorsByItemId } = input;\n  const itemsById: Map<string, TopListItem> = new Map(\n    items.map((item: TopListItem) => [item.id, item]),\n  );\n  const total: number = resolveTotal(items, input.total);\n  const maxValue: number = maxValueOf(items);\n  const plottedValues: Map<string, number> = plottedValuesById(items);\n  const reservedRightPx: number = barEndLabelWidthPx(input.valueDisplay);\n  const fallbackColor: string = theme.seriesColors[0];\n  \n  return {\n    animation: true,\n    animationDuration: 0,\n    animationDurationUpdate: input.animate ? UPDATE_ANIMATION_MS : 0,\n    animationEasing: \"linear\",\n    animationEasingUpdate: \"linear\",\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      top: GRID_PADDING_PX,\n      bottom: GRID_PADDING_PX,\n      left: GRID_PADDING_PX + NAME_MAX_WIDTH_PX + NAME_TO_BAR_GAP_PX,\n      right: GRID_PADDING_PX + reservedRightPx,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"item\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      formatter: tooltipFormatter(input, itemsById, total),\n    },\n    xAxis: { type: \"value\", min: 0, max: maxValue, show: false },\n    yAxis: categoryAxis(input, itemsById),\n    series: [\n      {\n        id: VALUE_SERIES_ID,\n        type: \"bar\",\n        realtimeSort: true,\n        barMaxWidth: BAR_MAX_WIDTH_PX,\n        itemStyle: { borderRadius: [0, BAR_RADIUS_PX, BAR_RADIUS_PX, 0] },\n        data: items.map((item: TopListItem) => ({\n          id: item.id,\n          name: item.id,\n          value: [plottedValues.get(item.id) as number, item.id],\n          itemStyle: { color: colorsByItemId[item.id] ?? fallbackColor },\n        })),\n        encode: { x: 0, y: 1 },\n        label: barEndLabel(input, itemsById, total),\n      },\n    ],\n  };\n}\n"],"names":["EMPTY_VALUE_TEXT","NAME_MAX_WIDTH_PX","NAME_TO_BAR_GAP_PX","VALUE_COLUMN_WIDTH_PX","PERCENT_COLUMN_WIDTH_PX","GRID_PADDING_PX","BAR_MAX_WIDTH_PX","BAR_RADIUS_PX","BAR_END_LABEL_DISTANCE_PX","UPDATE_ANIMATION_MS","LABEL_FONT_SIZE_PX","MIN_LABELED_ROW_HEIGHT_PX","TIE_BREAK_RELATIVE_STEP","RICH_TEXT_RESERVED","VALUE_SERIES_ID","valueOf","item","maxValueOf","items","maxValue","smallestGapBetweenDistinctValues","distinctValues","first","second","gaps","value","index","tieBreakStepOf","relativeStep","stepThatKeepsDistinctValuesApart","plottedValuesById","tieBreakStep","position","rankById","sort","plottedValues","direction","ranked","resolveTotal","total","sum","shareOf","escapeHtml","text","plainRichText","truncatedName","name","theme","font","echarts","formatValueText","input","formatShareText","formatShare","barEndLabelWidthPx","valueDisplay","widths","width","barEndLabelText","parts","labeledRowStepFor","canvasHeightPx","itemCount","rowHeightPx","isRowLabeled","rank","step","categoryAxis","itemsById","ranks","id","tooltipFormatter","params","share","barEndLabel","buildTopListOption","colorsByItemId","reservedRightPx","fallbackColor"],"mappings":"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"}

package/dist/lib/ui/components/charts/TopList/top-list-option.js

@@ -0,0 +1,178 @@
+import { formatShare as _ } from "../chart-share.js";
+import "echarts/charts";
+import "echarts/components";
+import * as L from "echarts/core";
+import "echarts/renderers";
+const g = "–", h = 160, E = 12, M = 88, P = 56, c = 16, B = 20, f = 4, b = 8, T = 800, m = 12, C = 14, w = 1e-9, V = /[{}|]/g, X = "top-list-values";
+function u(t) {
+  return t.value ?? 0;
+}
+function v(t) {
+  const e = Math.max(...t.map(u));
+  return e > 0 ? e : 1;
+}
+function N(t) {
+  const e = [...new Set(t.map(u))].sort(
+    (o, a) => o - a
+  ), n = e.slice(1).map((o, a) => o - e[a]);
+  return n.length > 0 ? Math.min(...n) : 1 / 0;
+}
+function O(t) {
+  const e = v(t) * w, n = N(t) / (t.length + 1);
+  return Math.min(e, n);
+}
+function x(t) {
+  const e = O(t);
+  return new Map(
+    t.map((n, o) => [
+      n.id,
+      u(n) + e * (t.length - o)
+    ])
+  );
+}
+function A(t, e) {
+  const n = x(t), o = e === "desc" ? -1 : 1, a = [...t].sort(
+    (r, i) => o * (n.get(r.id) - n.get(i.id))
+  );
+  return new Map(a.map((r, i) => [r.id, i + 1]));
+}
+function U(t, e) {
+  return e ?? t.reduce((n, o) => n + u(o), 0);
+}
+function S(t, e) {
+  return e === 0 ? 0 : u(t) / e;
+}
+function p(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function I(t) {
+  return t.replace(V, " ");
+}
+function k(t, e) {
+  const n = `${m}px ${e.fontFamily}`;
+  return I(L.format.truncateText(t, h, n, "…"));
+}
+function D(t, e) {
+  return e === null ? g : t.valueFormatter ? t.valueFormatter(e) : String(e);
+}
+function H(t, e) {
+  return t.value === null ? g : _(S(t, e));
+}
+function F(t) {
+  const e = [];
+  return t.includes("value") && e.push(M), t.includes("percent") && e.push(P), e.length === 0 ? 0 : e.reduce((n, o) => n + o, 0) + b;
+}
+function W(t, e, n) {
+  const o = [];
+  return t.valueDisplay.includes("value") && o.push(`{value|${I(D(t, e.value))}}`), t.valueDisplay.includes("percent") && o.push(`{percent|${H(e, n)}}`), o.join("");
+}
+function q(t, e) {
+  const n = (t - 2 * c) / e;
+  return Math.max(1, Math.ceil(C / n));
+}
+function y(t, e) {
+  return t === void 0 || (t - 1) % e === 0;
+}
+function $(t, e) {
+  const { items: n, sort: o, theme: a } = t, r = A(n, o), i = t.labeledRowStep;
+  return {
+    type: "category",
+    data: n.map((l) => l.id),
+    inverse: o === "desc",
+    animationDuration: 0,
+    animationDurationUpdate: t.animate ? T : 0,
+    axisLine: { show: !1 },
+    axisTick: { show: !1 },
+    axisLabel: {
+      color: a.labelColor,
+      fontSize: m,
+      interval: 0,
+      align: "right",
+      margin: E,
+      formatter: (l) => {
+        if (!y(r.get(l), i)) return "";
+        const d = e.get(l);
+        return d ? k(d.name, a) : "";
+      }
+    }
+  };
+}
+function G(t, e, n) {
+  return (o) => {
+    const a = e.get(o.name);
+    if (!a) return "";
+    const r = a.value === null ? "" : ` · ${_(S(a, n))}`, i = p(D(t, a.value));
+    return `<div>${p(a.name)}</div><div><b>${i}</b>${r}</div>`;
+  };
+}
+function z(t, e, n) {
+  const { theme: o } = t, a = A(t.items, t.sort), r = t.labeledRowStep;
+  return {
+    show: t.valueDisplay.length > 0,
+    position: "right",
+    distance: b,
+    fontSize: m,
+    formatter: (i) => {
+      if (!y(a.get(i.name), r)) return "";
+      const l = e.get(i.name);
+      return l ? W(t, l, n) : "";
+    },
+    rich: {
+      value: { color: o.labelColor, fontWeight: 600, padding: [0, 8, 0, 0] },
+      percent: { color: o.labelColor }
+    }
+  };
+}
+function J(t) {
+  const { items: e, theme: n, colorsByItemId: o } = t, a = new Map(
+    e.map((s) => [s.id, s])
+  ), r = U(e, t.total), i = v(e), l = x(e), d = F(t.valueDisplay), R = n.seriesColors[0];
+  return {
+    animation: !0,
+    animationDuration: 0,
+    animationDurationUpdate: t.animate ? T : 0,
+    animationEasing: "linear",
+    animationEasingUpdate: "linear",
+    textStyle: { fontFamily: n.fontFamily, color: n.labelColor },
+    grid: {
+      top: c,
+      bottom: c,
+      left: c + h + E,
+      right: c + d,
+      containLabel: !1
+    },
+    tooltip: {
+      trigger: "item",
+      backgroundColor: n.tooltipBackgroundColor,
+      borderColor: n.tooltipBorderColor,
+      textStyle: { color: n.labelColor },
+      formatter: G(t, a, r)
+    },
+    xAxis: { type: "value", min: 0, max: i, show: !1 },
+    yAxis: $(t, a),
+    series: [
+      {
+        id: X,
+        type: "bar",
+        realtimeSort: !0,
+        barMaxWidth: B,
+        itemStyle: { borderRadius: [0, f, f, 0] },
+        data: e.map((s) => ({
+          id: s.id,
+          name: s.id,
+          value: [l.get(s.id), s.id],
+          itemStyle: { color: o[s.id] ?? R }
+        })),
+        encode: { x: 0, y: 1 },
+        label: z(t, a, r)
+      }
+    ]
+  };
+}
+export {
+  J as buildTopListOption,
+  q as labeledRowStepFor,
+  A as rankById,
+  U as resolveTotal
+};
+//# sourceMappingURL=top-list-option.js.map