@ktnpm_devops/react-component 0.14.0 → 0.16.0

package/dist/index98.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index98.cjs","sources":["../src/charts/StackedBarChartCard/buildChartOptions.ts"],"sourcesContent":["import type { ChartSeriesPoint } from '../../types/chart.types';\nimport { CHART_COLORS } from '../../constants';\n\n/** Aggregated series data for chart rendering. */\nexport interface AggregatedChartData {\n  categories: string[];\n  series: { name: string; values: number[] }[];\n}\n\n/** Aggregate data points by category and subCategory, applying limits. */\nexport function aggregateData(\n  data: ChartSeriesPoint[],\n  maxCats: number,\n  maxSubs: number,\n  showOthers: boolean,\n): AggregatedChartData {\n  const categoryMap = new Map<string, Map<string, number>>();\n\n  for (const point of data) {\n    const cat = point.category ?? 'Unknown';\n    const sub = point.subCategory ?? 'Default';\n    if (!categoryMap.has(cat)) {\n      categoryMap.set(cat, new Map());\n    }\n    const subMap = categoryMap.get(cat)!;\n    subMap.set(sub, (subMap.get(sub) ?? 0) + point.value);\n  }\n\n  const sortedCategories = [...categoryMap.entries()]\n    .map(([cat, subMap]) => {\n      let total = 0;\n      for (const v of subMap.values()) total += v;\n      return { cat, subMap, total };\n    })\n    .sort((a, b) => b.total - a.total);\n\n  const topCategories = sortedCategories.slice(0, maxCats);\n  const overflowCategories = sortedCategories.slice(maxCats);\n\n  if (showOthers && overflowCategories.length > 0) {\n    const othersMap = new Map<string, number>();\n    for (const { subMap } of overflowCategories) {\n      for (const [sub, val] of subMap) {\n        othersMap.set(sub, (othersMap.get(sub) ?? 0) + val);\n      }\n    }\n    let othersTotal = 0;\n    for (const v of othersMap.values()) othersTotal += v;\n    topCategories.push({ cat: 'Others', subMap: othersMap, total: othersTotal });\n  }\n\n  const allSubCategories = new Set<string>();\n  for (const { subMap } of topCategories) {\n    for (const sub of subMap.keys()) {\n      allSubCategories.add(sub);\n    }\n  }\n\n  const sortedSubs = [...allSubCategories];\n  const limitedSubs = sortedSubs.slice(0, maxSubs);\n  const hasOverflowSubs = sortedSubs.length > maxSubs;\n\n  const categories = topCategories.map((entry) => entry.cat);\n\n  const series = limitedSubs.map((sub) => ({\n    name: sub,\n    values: topCategories.map((entry) => entry.subMap.get(sub) ?? 0),\n  }));\n\n  if (hasOverflowSubs && showOthers) {\n    const overflowSubs = sortedSubs.slice(maxSubs);\n    series.push({\n      name: 'Other subcategories',\n      values: topCategories.map((entry) => {\n        let sum = 0;\n        for (const sub of overflowSubs) {\n          sum += entry.subMap.get(sub) ?? 0;\n        }\n        return sum;\n      }),\n    });\n  }\n\n  return { categories, series };\n}\n\n/** Build ECharts option for stacked bar chart. */\nexport function buildBarOption(\n  categories: string[],\n  series: { name: string; values: number[] }[],\n  invertAxis: boolean,\n  hideLegend: boolean,\n  enableScroll: boolean,\n) {\n  const categoryAxis = { type: 'category' as const, data: categories };\n  const valueAxis = { type: 'value' as const };\n\n  const dataZoom = enableScroll\n    ? [{ type: 'slider' as const, show: true, ...(invertAxis ? { yAxisIndex: 0 } : { xAxisIndex: 0 }) }]\n    : [];\n\n  return {\n    tooltip: { trigger: 'axis' as const, axisPointer: { type: 'shadow' as const } },\n    legend: { show: !hideLegend, bottom: 0, type: 'scroll' as const },\n    grid: { left: '3%', right: '4%', top: '3%', bottom: hideLegend ? '3%' : '12%', containLabel: true },\n    xAxis: invertAxis ? valueAxis : categoryAxis,\n    yAxis: invertAxis ? categoryAxis : valueAxis,\n    dataZoom,\n    series: series.map((s, i) => ({\n      name: s.name,\n      type: 'bar' as const,\n      stack: 'total',\n      emphasis: { focus: 'series' as const },\n      data: s.values,\n      itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n    })),\n  };\n}\n\n/** Build ECharts option for pie chart. */\nexport function buildPieOption(\n  categories: string[],\n  series: { name: string; values: number[] }[],\n  hideLegend: boolean,\n) {\n  const pieData = categories.map((cat, catIdx) => {\n    let total = 0;\n    for (const s of series) {\n      total += s.values[catIdx] ?? 0;\n    }\n    return { name: cat, value: total };\n  });\n\n  return {\n    tooltip: { trigger: 'item' as const },\n    legend: { show: !hideLegend, bottom: 0, type: 'scroll' as const },\n    series: [\n      {\n        type: 'pie' as const,\n        radius: ['30%', '65%'],\n        center: ['50%', '45%'],\n        data: pieData.map((d, i) => ({\n          ...d,\n          itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n        })),\n        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.3)' } },\n        label: { show: true, formatter: '{b}: {d}%' },\n      },\n    ],\n  };\n}\n\n/** Build ECharts option for sunburst chart. */\nexport function buildSunburstOption(\n  categories: string[],\n  series: { name: string; values: number[] }[],\n) {\n  const sunburstData = categories.map((cat, catIdx) => {\n    const children = series\n      .map((s, sIdx) => ({\n        name: s.name,\n        value: s.values[catIdx] ?? 0,\n        itemStyle: { color: CHART_COLORS[(catIdx * series.length + sIdx) % CHART_COLORS.length] },\n      }))\n      .filter((child) => child.value > 0);\n\n    return { name: cat, children };\n  });\n\n  return {\n    tooltip: { trigger: 'item' as const },\n    series: [\n      {\n        type: 'sunburst' as const,\n        data: sunburstData,\n        radius: ['15%', '80%'],\n        label: { rotate: 'radial' as const, fontSize: 10 },\n        itemStyle: { borderRadius: 4, borderWidth: 1 },\n        emphasis: { focus: 'ancestor' as const },\n      },\n    ],\n  };\n}\n"],"names":["CHART_COLORS"],"mappings":"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"}
+{"version":3,"file":"index98.cjs","sources":["../src/charts/GroupedBarChartCard/buildGroupedBarOption.ts"],"sourcesContent":["import type { GroupedBarPivot } from './pivotGroupedBars';\nimport { CHART_COLORS, GROUPED_BAR } from '../../constants';\n\nexport interface GroupedBarOptionConfig {\n  seriesColors?: Readonly<Record<string, string>>;\n  invertAxis: boolean;\n  hideLegend: boolean;\n  integerValues: boolean;\n  valueLabel?: string;\n  /** Tooltip text for a gap. */\n  noValueText: string;\n}\n\nconst { GRID_MARGIN, AXIS_NAME_GAP } = GROUPED_BAR;\n\n/** Category and series names come from consumer data and land in the tooltip's HTML. */\nconst escapeHtml = (value: string) =>\n  value.replace(/[&<>\"]/g, (char) => `&#${char.charCodeAt(0)};`);\n\n/** Pinned colour first, else the palette by first-seen position. */\nconst colorFor = (name: string, index: number, seriesColors?: Readonly<Record<string, string>>) =>\n  seriesColors?.[name] ?? CHART_COLORS[index % CHART_COLORS.length];\n\nconst markerFor = (color: string) => {\n  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = GROUPED_BAR;\n  return `<span style=\"display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};\"></span>`;\n};\n\n/**\n * The tooltip is built from the pivot rather than from echarts' params, so every\n * series is listed in series order and a gap reads as `noValueText`, never `-`.\n */\nconst buildTooltipFormatter =\n  (pivot: GroupedBarPivot, colors: string[], noValueText: string) => (params: unknown) => {\n    const first = (Array.isArray(params) ? params[0] : params) as\n      | { dataIndex?: number }\n      | undefined;\n    const index = first?.dataIndex;\n    if (index == null || index >= pivot.categories.length) return '';\n\n    const lines = [escapeHtml(pivot.categories[index])];\n    pivot.series.forEach((s, i) => {\n      const value = s.values[index];\n      const text = value == null ? escapeHtml(noValueText) : String(value);\n      lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);\n    });\n\n    return lines.join('<br/>');\n  };\n\nconst buildGrid = (config: GroupedBarOptionConfig) => {\n  const named = Boolean(config.valueLabel);\n  return {\n    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),\n    right: GRID_MARGIN.RIGHT,\n    top: GRID_MARGIN.TOP,\n    // Room for a horizontal value-axis name and the legend, each only when drawn.\n    bottom:\n      GRID_MARGIN.BASE +\n      (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) +\n      (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),\n    containLabel: true,\n  };\n};\n\nexport const buildGroupedBarOption = (pivot: GroupedBarPivot, config: GroupedBarOptionConfig) => {\n  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));\n\n  const categoryAxis = {\n    type: 'category' as const,\n    data: pivot.categories,\n    // Horizontal bars read top-down, so the first category goes on top.\n    inverse: config.invertAxis,\n  };\n  const valueAxis = {\n    type: 'value' as const,\n    name: config.valueLabel,\n    nameLocation: 'middle' as const,\n    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,\n    // Without this a vertical axis name is drawn horizontally and eats the plot's width.\n    nameRotate: config.invertAxis ? 0 : 90,\n    minInterval: config.integerValues ? 1 : undefined,\n  };\n\n  return {\n    tooltip: {\n      trigger: 'axis' as const,\n      axisPointer: { type: 'shadow' as const },\n      formatter: buildTooltipFormatter(pivot, colors, config.noValueText),\n    },\n    legend: { show: !config.hideLegend, bottom: 0, type: 'scroll' as const },\n    grid: buildGrid(config),\n    xAxis: config.invertAxis ? valueAxis : categoryAxis,\n    yAxis: config.invertAxis ? categoryAxis : valueAxis,\n    series: pivot.series.map((s, i) => ({\n      name: s.name,\n      type: 'bar' as const,\n      data: s.values,\n      barMinHeight: GROUPED_BAR.MIN_BAR_HEIGHT,\n      itemStyle: { color: colors[i] },\n      emphasis: { focus: 'series' as const },\n    })),\n  };\n};\n"],"names":["GROUPED_BAR","CHART_COLORS"],"mappings":";;;AAaA,MAAM,EAAE,aAAa,cAAA,IAAkBA,UAAAA;AAGvC,MAAM,aAAa,CAAC,UAClB,MAAM,QAAQ,WAAW,CAAC,SAAS,KAAK,KAAK,WAAW,CAAC,CAAC,GAAG;AAG/D,MAAM,WAAW,CAAC,MAAc,OAAe,kBAC7C,6CAAe,UAASC,UAAAA,aAAa,QAAQA,UAAAA,aAAa,MAAM;AAElE,MAAM,YAAY,CAAC,UAAkB;AACnC,QAAM,EAAE,qBAAqB,MAAM,oBAAoB,QAAQD,UAAAA;AAC/D,SAAO,kDAAkD,GAAG,8BAA8B,IAAI,aAAa,IAAI,uBAAuB,WAAW,KAAK,CAAC;AACzJ;AAMA,MAAM,wBACJ,CAAC,OAAwB,QAAkB,gBAAwB,CAAC,WAAoB;AACtF,QAAM,QAAS,MAAM,QAAQ,MAAM,IAAI,OAAO,CAAC,IAAI;AAGnD,QAAM,QAAQ,+BAAO;AACrB,MAAI,SAAS,QAAQ,SAAS,MAAM,WAAW,OAAQ,QAAO;AAE9D,QAAM,QAAQ,CAAC,WAAW,MAAM,WAAW,KAAK,CAAC,CAAC;AAClD,QAAM,OAAO,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,QAAQ,EAAE,OAAO,KAAK;AAC5B,UAAM,OAAO,SAAS,OAAO,WAAW,WAAW,IAAI,OAAO,KAAK;AACnE,UAAM,KAAK,GAAG,UAAU,OAAO,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAAA,EACpE,CAAC;AAED,SAAO,MAAM,KAAK,OAAO;AAC3B;AAEF,MAAM,YAAY,CAAC,WAAmC;AACpD,QAAM,QAAQ,QAAQ,OAAO,UAAU;AACvC,SAAO;AAAA,IACL,MAAM,YAAY,QAAQ,SAAS,CAAC,OAAO,aAAa,YAAY,eAAe;AAAA,IACnF,OAAO,YAAY;AAAA,IACnB,KAAK,YAAY;AAAA;AAAA,IAEjB,QACE,YAAY,QACX,SAAS,OAAO,aAAa,YAAY,eAAe,MACxD,OAAO,aAAa,IAAI,YAAY;AAAA,IACvC,cAAc;AAAA,EAAA;AAElB;AAEO,MAAM,wBAAwB,CAAC,OAAwB,WAAmC;AAC/F,QAAM,SAAS,MAAM,OAAO,IAAI,CAAC,GAAG,MAAM,SAAS,EAAE,MAAM,GAAG,OAAO,YAAY,CAAC;AAElF,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,MAAM,MAAM;AAAA;AAAA,IAEZ,SAAS,OAAO;AAAA,EAAA;AAElB,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,MAAM,OAAO;AAAA,IACb,cAAc;AAAA,IACd,SAAS,OAAO,aAAa,cAAc,IAAI,cAAc;AAAA;AAAA,IAE7D,YAAY,OAAO,aAAa,IAAI;AAAA,IACpC,aAAa,OAAO,gBAAgB,IAAI;AAAA,EAAA;AAG1C,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,SAAA;AAAA,MACrB,WAAW,sBAAsB,OAAO,QAAQ,OAAO,WAAW;AAAA,IAAA;AAAA,IAEpE,QAAQ,EAAE,MAAM,CAAC,OAAO,YAAY,QAAQ,GAAG,MAAM,SAAA;AAAA,IACrD,MAAM,UAAU,MAAM;AAAA,IACtB,OAAO,OAAO,aAAa,YAAY;AAAA,IACvC,OAAO,OAAO,aAAa,eAAe;AAAA,IAC1C,QAAQ,MAAM,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MAClC,MAAM,EAAE;AAAA,MACR,MAAM;AAAA,MACN,MAAM,EAAE;AAAA,MACR,cAAcA,UAAAA,YAAY;AAAA,MAC1B,WAAW,EAAE,OAAO,OAAO,CAAC,EAAA;AAAA,MAC5B,UAAU,EAAE,OAAO,SAAA;AAAA,IAAkB,EACrC;AAAA,EAAA;AAEN;;"}

package/dist/index98.js

@@ -1,136 +1,72 @@
-import { CHART_COLORS } from "./index71.js";
-function aggregateData(data, maxCats, maxSubs, showOthers) {
-  const categoryMap = /* @__PURE__ */ new Map();
-  for (const point of data) {
-    const cat = point.category ?? "Unknown";
-    const sub = point.subCategory ?? "Default";
-    if (!categoryMap.has(cat)) {
-      categoryMap.set(cat, /* @__PURE__ */ new Map());
-    }
-    const subMap = categoryMap.get(cat);
-    subMap.set(sub, (subMap.get(sub) ?? 0) + point.value);
-  }
-  const sortedCategories = [...categoryMap.entries()].map(([cat, subMap]) => {
-    let total = 0;
-    for (const v of subMap.values()) total += v;
-    return { cat, subMap, total };
-  }).sort((a, b) => b.total - a.total);
-  const topCategories = sortedCategories.slice(0, maxCats);
-  const overflowCategories = sortedCategories.slice(maxCats);
-  if (showOthers && overflowCategories.length > 0) {
-    const othersMap = /* @__PURE__ */ new Map();
-    for (const { subMap } of overflowCategories) {
-      for (const [sub, val] of subMap) {
-        othersMap.set(sub, (othersMap.get(sub) ?? 0) + val);
-      }
-    }
-    let othersTotal = 0;
-    for (const v of othersMap.values()) othersTotal += v;
-    topCategories.push({ cat: "Others", subMap: othersMap, total: othersTotal });
-  }
-  const allSubCategories = /* @__PURE__ */ new Set();
-  for (const { subMap } of topCategories) {
-    for (const sub of subMap.keys()) {
-      allSubCategories.add(sub);
-    }
-  }
-  const sortedSubs = [...allSubCategories];
-  const limitedSubs = sortedSubs.slice(0, maxSubs);
-  const hasOverflowSubs = sortedSubs.length > maxSubs;
-  const categories = topCategories.map((entry) => entry.cat);
-  const series = limitedSubs.map((sub) => ({
-    name: sub,
-    values: topCategories.map((entry) => entry.subMap.get(sub) ?? 0)
-  }));
-  if (hasOverflowSubs && showOthers) {
-    const overflowSubs = sortedSubs.slice(maxSubs);
-    series.push({
-      name: "Other subcategories",
-      values: topCategories.map((entry) => {
-        let sum = 0;
-        for (const sub of overflowSubs) {
-          sum += entry.subMap.get(sub) ?? 0;
-        }
-        return sum;
-      })
-    });
-  }
-  return { categories, series };
-}
-function buildBarOption(categories, series, invertAxis, hideLegend, enableScroll) {
-  const categoryAxis = { type: "category", data: categories };
-  const valueAxis = { type: "value" };
-  const dataZoom = enableScroll ? [{ type: "slider", show: true, ...invertAxis ? { yAxisIndex: 0 } : { xAxisIndex: 0 } }] : [];
+import { GROUPED_BAR, CHART_COLORS } from "./index63.js";
+const { GRID_MARGIN, AXIS_NAME_GAP } = GROUPED_BAR;
+const escapeHtml = (value) => value.replace(/[&<>"]/g, (char) => `&#${char.charCodeAt(0)};`);
+const colorFor = (name, index, seriesColors) => (seriesColors == null ? void 0 : seriesColors[name]) ?? CHART_COLORS[index % CHART_COLORS.length];
+const markerFor = (color) => {
+  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = GROUPED_BAR;
+  return `<span style="display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};"></span>`;
+};
+const buildTooltipFormatter = (pivot, colors, noValueText) => (params) => {
+  const first = Array.isArray(params) ? params[0] : params;
+  const index = first == null ? void 0 : first.dataIndex;
+  if (index == null || index >= pivot.categories.length) return "";
+  const lines = [escapeHtml(pivot.categories[index])];
+  pivot.series.forEach((s, i) => {
+    const value = s.values[index];
+    const text = value == null ? escapeHtml(noValueText) : String(value);
+    lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);
+  });
+  return lines.join("<br/>");
+};
+const buildGrid = (config) => {
+  const named = Boolean(config.valueLabel);
+  return {
+    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),
+    right: GRID_MARGIN.RIGHT,
+    top: GRID_MARGIN.TOP,
+    // Room for a horizontal value-axis name and the legend, each only when drawn.
+    bottom: GRID_MARGIN.BASE + (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) + (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),
+    containLabel: true
+  };
+};
+const buildGroupedBarOption = (pivot, config) => {
+  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));
+  const categoryAxis = {
+    type: "category",
+    data: pivot.categories,
+    // Horizontal bars read top-down, so the first category goes on top.
+    inverse: config.invertAxis
+  };
+  const valueAxis = {
+    type: "value",
+    name: config.valueLabel,
+    nameLocation: "middle",
+    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,
+    // Without this a vertical axis name is drawn horizontally and eats the plot's width.
+    nameRotate: config.invertAxis ? 0 : 90,
+    minInterval: config.integerValues ? 1 : void 0
+  };
   return {
-    tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
-    legend: { show: !hideLegend, bottom: 0, type: "scroll" },
-    grid: { left: "3%", right: "4%", top: "3%", bottom: hideLegend ? "3%" : "12%", containLabel: true },
-    xAxis: invertAxis ? valueAxis : categoryAxis,
-    yAxis: invertAxis ? categoryAxis : valueAxis,
-    dataZoom,
-    series: series.map((s, i) => ({
+    tooltip: {
+      trigger: "axis",
+      axisPointer: { type: "shadow" },
+      formatter: buildTooltipFormatter(pivot, colors, config.noValueText)
+    },
+    legend: { show: !config.hideLegend, bottom: 0, type: "scroll" },
+    grid: buildGrid(config),
+    xAxis: config.invertAxis ? valueAxis : categoryAxis,
+    yAxis: config.invertAxis ? categoryAxis : valueAxis,
+    series: pivot.series.map((s, i) => ({
       name: s.name,
       type: "bar",
-      stack: "total",
-      emphasis: { focus: "series" },
       data: s.values,
-      itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] }
+      barMinHeight: GROUPED_BAR.MIN_BAR_HEIGHT,
+      itemStyle: { color: colors[i] },
+      emphasis: { focus: "series" }
     }))
   };
-}
-function buildPieOption(categories, series, hideLegend) {
-  const pieData = categories.map((cat, catIdx) => {
-    let total = 0;
-    for (const s of series) {
-      total += s.values[catIdx] ?? 0;
-    }
-    return { name: cat, value: total };
-  });
-  return {
-    tooltip: { trigger: "item" },
-    legend: { show: !hideLegend, bottom: 0, type: "scroll" },
-    series: [
-      {
-        type: "pie",
-        radius: ["30%", "65%"],
-        center: ["50%", "45%"],
-        data: pieData.map((d, i) => ({
-          ...d,
-          itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] }
-        })),
-        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0,0,0,0.3)" } },
-        label: { show: true, formatter: "{b}: {d}%" }
-      }
-    ]
-  };
-}
-function buildSunburstOption(categories, series) {
-  const sunburstData = categories.map((cat, catIdx) => {
-    const children = series.map((s, sIdx) => ({
-      name: s.name,
-      value: s.values[catIdx] ?? 0,
-      itemStyle: { color: CHART_COLORS[(catIdx * series.length + sIdx) % CHART_COLORS.length] }
-    })).filter((child) => child.value > 0);
-    return { name: cat, children };
-  });
-  return {
-    tooltip: { trigger: "item" },
-    series: [
-      {
-        type: "sunburst",
-        data: sunburstData,
-        radius: ["15%", "80%"],
-        label: { rotate: "radial", fontSize: 10 },
-        itemStyle: { borderRadius: 4, borderWidth: 1 },
-        emphasis: { focus: "ancestor" }
-      }
-    ]
-  };
-}
+};
 export {
-  aggregateData,
-  buildBarOption,
-  buildPieOption,
-  buildSunburstOption
+  buildGroupedBarOption
 };
 //# sourceMappingURL=index98.js.map

package/dist/index98.js.map

@@ -1 +1 @@
-{"version":3,"file":"index98.js","sources":["../src/charts/StackedBarChartCard/buildChartOptions.ts"],"sourcesContent":["import type { ChartSeriesPoint } from '../../types/chart.types';\nimport { CHART_COLORS } from '../../constants';\n\n/** Aggregated series data for chart rendering. */\nexport interface AggregatedChartData {\n  categories: string[];\n  series: { name: string; values: number[] }[];\n}\n\n/** Aggregate data points by category and subCategory, applying limits. */\nexport function aggregateData(\n  data: ChartSeriesPoint[],\n  maxCats: number,\n  maxSubs: number,\n  showOthers: boolean,\n): AggregatedChartData {\n  const categoryMap = new Map<string, Map<string, number>>();\n\n  for (const point of data) {\n    const cat = point.category ?? 'Unknown';\n    const sub = point.subCategory ?? 'Default';\n    if (!categoryMap.has(cat)) {\n      categoryMap.set(cat, new Map());\n    }\n    const subMap = categoryMap.get(cat)!;\n    subMap.set(sub, (subMap.get(sub) ?? 0) + point.value);\n  }\n\n  const sortedCategories = [...categoryMap.entries()]\n    .map(([cat, subMap]) => {\n      let total = 0;\n      for (const v of subMap.values()) total += v;\n      return { cat, subMap, total };\n    })\n    .sort((a, b) => b.total - a.total);\n\n  const topCategories = sortedCategories.slice(0, maxCats);\n  const overflowCategories = sortedCategories.slice(maxCats);\n\n  if (showOthers && overflowCategories.length > 0) {\n    const othersMap = new Map<string, number>();\n    for (const { subMap } of overflowCategories) {\n      for (const [sub, val] of subMap) {\n        othersMap.set(sub, (othersMap.get(sub) ?? 0) + val);\n      }\n    }\n    let othersTotal = 0;\n    for (const v of othersMap.values()) othersTotal += v;\n    topCategories.push({ cat: 'Others', subMap: othersMap, total: othersTotal });\n  }\n\n  const allSubCategories = new Set<string>();\n  for (const { subMap } of topCategories) {\n    for (const sub of subMap.keys()) {\n      allSubCategories.add(sub);\n    }\n  }\n\n  const sortedSubs = [...allSubCategories];\n  const limitedSubs = sortedSubs.slice(0, maxSubs);\n  const hasOverflowSubs = sortedSubs.length > maxSubs;\n\n  const categories = topCategories.map((entry) => entry.cat);\n\n  const series = limitedSubs.map((sub) => ({\n    name: sub,\n    values: topCategories.map((entry) => entry.subMap.get(sub) ?? 0),\n  }));\n\n  if (hasOverflowSubs && showOthers) {\n    const overflowSubs = sortedSubs.slice(maxSubs);\n    series.push({\n      name: 'Other subcategories',\n      values: topCategories.map((entry) => {\n        let sum = 0;\n        for (const sub of overflowSubs) {\n          sum += entry.subMap.get(sub) ?? 0;\n        }\n        return sum;\n      }),\n    });\n  }\n\n  return { categories, series };\n}\n\n/** Build ECharts option for stacked bar chart. */\nexport function buildBarOption(\n  categories: string[],\n  series: { name: string; values: number[] }[],\n  invertAxis: boolean,\n  hideLegend: boolean,\n  enableScroll: boolean,\n) {\n  const categoryAxis = { type: 'category' as const, data: categories };\n  const valueAxis = { type: 'value' as const };\n\n  const dataZoom = enableScroll\n    ? [{ type: 'slider' as const, show: true, ...(invertAxis ? { yAxisIndex: 0 } : { xAxisIndex: 0 }) }]\n    : [];\n\n  return {\n    tooltip: { trigger: 'axis' as const, axisPointer: { type: 'shadow' as const } },\n    legend: { show: !hideLegend, bottom: 0, type: 'scroll' as const },\n    grid: { left: '3%', right: '4%', top: '3%', bottom: hideLegend ? '3%' : '12%', containLabel: true },\n    xAxis: invertAxis ? valueAxis : categoryAxis,\n    yAxis: invertAxis ? categoryAxis : valueAxis,\n    dataZoom,\n    series: series.map((s, i) => ({\n      name: s.name,\n      type: 'bar' as const,\n      stack: 'total',\n      emphasis: { focus: 'series' as const },\n      data: s.values,\n      itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n    })),\n  };\n}\n\n/** Build ECharts option for pie chart. */\nexport function buildPieOption(\n  categories: string[],\n  series: { name: string; values: number[] }[],\n  hideLegend: boolean,\n) {\n  const pieData = categories.map((cat, catIdx) => {\n    let total = 0;\n    for (const s of series) {\n      total += s.values[catIdx] ?? 0;\n    }\n    return { name: cat, value: total };\n  });\n\n  return {\n    tooltip: { trigger: 'item' as const },\n    legend: { show: !hideLegend, bottom: 0, type: 'scroll' as const },\n    series: [\n      {\n        type: 'pie' as const,\n        radius: ['30%', '65%'],\n        center: ['50%', '45%'],\n        data: pieData.map((d, i) => ({\n          ...d,\n          itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n        })),\n        emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0,0,0,0.3)' } },\n        label: { show: true, formatter: '{b}: {d}%' },\n      },\n    ],\n  };\n}\n\n/** Build ECharts option for sunburst chart. */\nexport function buildSunburstOption(\n  categories: string[],\n  series: { name: string; values: number[] }[],\n) {\n  const sunburstData = categories.map((cat, catIdx) => {\n    const children = series\n      .map((s, sIdx) => ({\n        name: s.name,\n        value: s.values[catIdx] ?? 0,\n        itemStyle: { color: CHART_COLORS[(catIdx * series.length + sIdx) % CHART_COLORS.length] },\n      }))\n      .filter((child) => child.value > 0);\n\n    return { name: cat, children };\n  });\n\n  return {\n    tooltip: { trigger: 'item' as const },\n    series: [\n      {\n        type: 'sunburst' as const,\n        data: sunburstData,\n        radius: ['15%', '80%'],\n        label: { rotate: 'radial' as const, fontSize: 10 },\n        itemStyle: { borderRadius: 4, borderWidth: 1 },\n        emphasis: { focus: 'ancestor' as const },\n      },\n    ],\n  };\n}\n"],"names":[],"mappings":";AAUO,SAAS,cACd,MACA,SACA,SACA,YACqB;AACrB,QAAM,kCAAkB,IAAA;AAExB,aAAW,SAAS,MAAM;AACxB,UAAM,MAAM,MAAM,YAAY;AAC9B,UAAM,MAAM,MAAM,eAAe;AACjC,QAAI,CAAC,YAAY,IAAI,GAAG,GAAG;AACzB,kBAAY,IAAI,KAAK,oBAAI,IAAA,CAAK;AAAA,IAChC;AACA,UAAM,SAAS,YAAY,IAAI,GAAG;AAClC,WAAO,IAAI,MAAM,OAAO,IAAI,GAAG,KAAK,KAAK,MAAM,KAAK;AAAA,EACtD;AAEA,QAAM,mBAAmB,CAAC,GAAG,YAAY,QAAA,CAAS,EAC/C,IAAI,CAAC,CAAC,KAAK,MAAM,MAAM;AACtB,QAAI,QAAQ;AACZ,eAAW,KAAK,OAAO,OAAA,EAAU,UAAS;AAC1C,WAAO,EAAE,KAAK,QAAQ,MAAA;AAAA,EACxB,CAAC,EACA,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAEnC,QAAM,gBAAgB,iBAAiB,MAAM,GAAG,OAAO;AACvD,QAAM,qBAAqB,iBAAiB,MAAM,OAAO;AAEzD,MAAI,cAAc,mBAAmB,SAAS,GAAG;AAC/C,UAAM,gCAAgB,IAAA;AACtB,eAAW,EAAE,OAAA,KAAY,oBAAoB;AAC3C,iBAAW,CAAC,KAAK,GAAG,KAAK,QAAQ;AAC/B,kBAAU,IAAI,MAAM,UAAU,IAAI,GAAG,KAAK,KAAK,GAAG;AAAA,MACpD;AAAA,IACF;AACA,QAAI,cAAc;AAClB,eAAW,KAAK,UAAU,OAAA,EAAU,gBAAe;AACnD,kBAAc,KAAK,EAAE,KAAK,UAAU,QAAQ,WAAW,OAAO,aAAa;AAAA,EAC7E;AAEA,QAAM,uCAAuB,IAAA;AAC7B,aAAW,EAAE,OAAA,KAAY,eAAe;AACtC,eAAW,OAAO,OAAO,QAAQ;AAC/B,uBAAiB,IAAI,GAAG;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,GAAG,gBAAgB;AACvC,QAAM,cAAc,WAAW,MAAM,GAAG,OAAO;AAC/C,QAAM,kBAAkB,WAAW,SAAS;AAE5C,QAAM,aAAa,cAAc,IAAI,CAAC,UAAU,MAAM,GAAG;AAEzD,QAAM,SAAS,YAAY,IAAI,CAAC,SAAS;AAAA,IACvC,MAAM;AAAA,IACN,QAAQ,cAAc,IAAI,CAAC,UAAU,MAAM,OAAO,IAAI,GAAG,KAAK,CAAC;AAAA,EAAA,EAC/D;AAEF,MAAI,mBAAmB,YAAY;AACjC,UAAM,eAAe,WAAW,MAAM,OAAO;AAC7C,WAAO,KAAK;AAAA,MACV,MAAM;AAAA,MACN,QAAQ,cAAc,IAAI,CAAC,UAAU;AACnC,YAAI,MAAM;AACV,mBAAW,OAAO,cAAc;AAC9B,iBAAO,MAAM,OAAO,IAAI,GAAG,KAAK;AAAA,QAClC;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IAAA,CACF;AAAA,EACH;AAEA,SAAO,EAAE,YAAY,OAAA;AACvB;AAGO,SAAS,eACd,YACA,QACA,YACA,YACA,cACA;AACA,QAAM,eAAe,EAAE,MAAM,YAAqB,MAAM,WAAA;AACxD,QAAM,YAAY,EAAE,MAAM,QAAA;AAE1B,QAAM,WAAW,eACb,CAAC,EAAE,MAAM,UAAmB,MAAM,MAAM,GAAI,aAAa,EAAE,YAAY,MAAM,EAAE,YAAY,IAAE,CAAI,IACjG,CAAA;AAEJ,SAAO;AAAA,IACL,SAAS,EAAE,SAAS,QAAiB,aAAa,EAAE,MAAM,WAAkB;AAAA,IAC5E,QAAQ,EAAE,MAAM,CAAC,YAAY,QAAQ,GAAG,MAAM,SAAA;AAAA,IAC9C,MAAM,EAAE,MAAM,MAAM,OAAO,MAAM,KAAK,MAAM,QAAQ,aAAa,OAAO,OAAO,cAAc,KAAA;AAAA,IAC7F,OAAO,aAAa,YAAY;AAAA,IAChC,OAAO,aAAa,eAAe;AAAA,IACnC;AAAA,IACA,QAAQ,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MAC5B,MAAM,EAAE;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAU,EAAE,OAAO,SAAA;AAAA,MACnB,MAAM,EAAE;AAAA,MACR,WAAW,EAAE,OAAO,aAAa,IAAI,aAAa,MAAM,EAAA;AAAA,IAAE,EAC1D;AAAA,EAAA;AAEN;AAGO,SAAS,eACd,YACA,QACA,YACA;AACA,QAAM,UAAU,WAAW,IAAI,CAAC,KAAK,WAAW;AAC9C,QAAI,QAAQ;AACZ,eAAW,KAAK,QAAQ;AACtB,eAAS,EAAE,OAAO,MAAM,KAAK;AAAA,IAC/B;AACA,WAAO,EAAE,MAAM,KAAK,OAAO,MAAA;AAAA,EAC7B,CAAC;AAED,SAAO;AAAA,IACL,SAAS,EAAE,SAAS,OAAA;AAAA,IACpB,QAAQ,EAAE,MAAM,CAAC,YAAY,QAAQ,GAAG,MAAM,SAAA;AAAA,IAC9C,QAAQ;AAAA,MACN;AAAA,QACE,MAAM;AAAA,QACN,QAAQ,CAAC,OAAO,KAAK;AAAA,QACrB,QAAQ,CAAC,OAAO,KAAK;AAAA,QACrB,MAAM,QAAQ,IAAI,CAAC,GAAG,OAAO;AAAA,UAC3B,GAAG;AAAA,UACH,WAAW,EAAE,OAAO,aAAa,IAAI,aAAa,MAAM,EAAA;AAAA,QAAE,EAC1D;AAAA,QACF,UAAU,EAAE,WAAW,EAAE,YAAY,IAAI,eAAe,GAAG,aAAa,oBAAkB;AAAA,QAC1F,OAAO,EAAE,MAAM,MAAM,WAAW,YAAA;AAAA,MAAY;AAAA,IAC9C;AAAA,EACF;AAEJ;AAGO,SAAS,oBACd,YACA,QACA;AACA,QAAM,eAAe,WAAW,IAAI,CAAC,KAAK,WAAW;AACnD,UAAM,WAAW,OACd,IAAI,CAAC,GAAG,UAAU;AAAA,MACjB,MAAM,EAAE;AAAA,MACR,OAAO,EAAE,OAAO,MAAM,KAAK;AAAA,MAC3B,WAAW,EAAE,OAAO,cAAc,SAAS,OAAO,SAAS,QAAQ,aAAa,MAAM,EAAA;AAAA,IAAE,EACxF,EACD,OAAO,CAAC,UAAU,MAAM,QAAQ,CAAC;AAEpC,WAAO,EAAE,MAAM,KAAK,SAAA;AAAA,EACtB,CAAC;AAED,SAAO;AAAA,IACL,SAAS,EAAE,SAAS,OAAA;AAAA,IACpB,QAAQ;AAAA,MACN;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ,CAAC,OAAO,KAAK;AAAA,QACrB,OAAO,EAAE,QAAQ,UAAmB,UAAU,GAAA;AAAA,QAC9C,WAAW,EAAE,cAAc,GAAG,aAAa,EAAA;AAAA,QAC3C,UAAU,EAAE,OAAO,WAAA;AAAA,MAAoB;AAAA,IACzC;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"index98.js","sources":["../src/charts/GroupedBarChartCard/buildGroupedBarOption.ts"],"sourcesContent":["import type { GroupedBarPivot } from './pivotGroupedBars';\nimport { CHART_COLORS, GROUPED_BAR } from '../../constants';\n\nexport interface GroupedBarOptionConfig {\n  seriesColors?: Readonly<Record<string, string>>;\n  invertAxis: boolean;\n  hideLegend: boolean;\n  integerValues: boolean;\n  valueLabel?: string;\n  /** Tooltip text for a gap. */\n  noValueText: string;\n}\n\nconst { GRID_MARGIN, AXIS_NAME_GAP } = GROUPED_BAR;\n\n/** Category and series names come from consumer data and land in the tooltip's HTML. */\nconst escapeHtml = (value: string) =>\n  value.replace(/[&<>\"]/g, (char) => `&#${char.charCodeAt(0)};`);\n\n/** Pinned colour first, else the palette by first-seen position. */\nconst colorFor = (name: string, index: number, seriesColors?: Readonly<Record<string, string>>) =>\n  seriesColors?.[name] ?? CHART_COLORS[index % CHART_COLORS.length];\n\nconst markerFor = (color: string) => {\n  const { TOOLTIP_MARKER_SIZE: size, TOOLTIP_MARKER_GAP: gap } = GROUPED_BAR;\n  return `<span style=\"display:inline-block;margin-right:${gap}px;border-radius:50%;width:${size}px;height:${size}px;background-color:${escapeHtml(color)};\"></span>`;\n};\n\n/**\n * The tooltip is built from the pivot rather than from echarts' params, so every\n * series is listed in series order and a gap reads as `noValueText`, never `-`.\n */\nconst buildTooltipFormatter =\n  (pivot: GroupedBarPivot, colors: string[], noValueText: string) => (params: unknown) => {\n    const first = (Array.isArray(params) ? params[0] : params) as\n      | { dataIndex?: number }\n      | undefined;\n    const index = first?.dataIndex;\n    if (index == null || index >= pivot.categories.length) return '';\n\n    const lines = [escapeHtml(pivot.categories[index])];\n    pivot.series.forEach((s, i) => {\n      const value = s.values[index];\n      const text = value == null ? escapeHtml(noValueText) : String(value);\n      lines.push(`${markerFor(colors[i])}${escapeHtml(s.name)}: ${text}`);\n    });\n\n    return lines.join('<br/>');\n  };\n\nconst buildGrid = (config: GroupedBarOptionConfig) => {\n  const named = Boolean(config.valueLabel);\n  return {\n    left: GRID_MARGIN.BASE + (named && !config.invertAxis ? GRID_MARGIN.VALUE_NAME_Y : 0),\n    right: GRID_MARGIN.RIGHT,\n    top: GRID_MARGIN.TOP,\n    // Room for a horizontal value-axis name and the legend, each only when drawn.\n    bottom:\n      GRID_MARGIN.BASE +\n      (named && config.invertAxis ? GRID_MARGIN.VALUE_NAME_X : 0) +\n      (config.hideLegend ? 0 : GRID_MARGIN.LEGEND),\n    containLabel: true,\n  };\n};\n\nexport const buildGroupedBarOption = (pivot: GroupedBarPivot, config: GroupedBarOptionConfig) => {\n  const colors = pivot.series.map((s, i) => colorFor(s.name, i, config.seriesColors));\n\n  const categoryAxis = {\n    type: 'category' as const,\n    data: pivot.categories,\n    // Horizontal bars read top-down, so the first category goes on top.\n    inverse: config.invertAxis,\n  };\n  const valueAxis = {\n    type: 'value' as const,\n    name: config.valueLabel,\n    nameLocation: 'middle' as const,\n    nameGap: config.invertAxis ? AXIS_NAME_GAP.X : AXIS_NAME_GAP.Y,\n    // Without this a vertical axis name is drawn horizontally and eats the plot's width.\n    nameRotate: config.invertAxis ? 0 : 90,\n    minInterval: config.integerValues ? 1 : undefined,\n  };\n\n  return {\n    tooltip: {\n      trigger: 'axis' as const,\n      axisPointer: { type: 'shadow' as const },\n      formatter: buildTooltipFormatter(pivot, colors, config.noValueText),\n    },\n    legend: { show: !config.hideLegend, bottom: 0, type: 'scroll' as const },\n    grid: buildGrid(config),\n    xAxis: config.invertAxis ? valueAxis : categoryAxis,\n    yAxis: config.invertAxis ? categoryAxis : valueAxis,\n    series: pivot.series.map((s, i) => ({\n      name: s.name,\n      type: 'bar' as const,\n      data: s.values,\n      barMinHeight: GROUPED_BAR.MIN_BAR_HEIGHT,\n      itemStyle: { color: colors[i] },\n      emphasis: { focus: 'series' as const },\n    })),\n  };\n};\n"],"names":[],"mappings":";AAaA,MAAM,EAAE,aAAa,cAAA,IAAkB;AAGvC,MAAM,aAAa,CAAC,UAClB,MAAM,QAAQ,WAAW,CAAC,SAAS,KAAK,KAAK,WAAW,CAAC,CAAC,GAAG;AAG/D,MAAM,WAAW,CAAC,MAAc,OAAe,kBAC7C,6CAAe,UAAS,aAAa,QAAQ,aAAa,MAAM;AAElE,MAAM,YAAY,CAAC,UAAkB;AACnC,QAAM,EAAE,qBAAqB,MAAM,oBAAoB,QAAQ;AAC/D,SAAO,kDAAkD,GAAG,8BAA8B,IAAI,aAAa,IAAI,uBAAuB,WAAW,KAAK,CAAC;AACzJ;AAMA,MAAM,wBACJ,CAAC,OAAwB,QAAkB,gBAAwB,CAAC,WAAoB;AACtF,QAAM,QAAS,MAAM,QAAQ,MAAM,IAAI,OAAO,CAAC,IAAI;AAGnD,QAAM,QAAQ,+BAAO;AACrB,MAAI,SAAS,QAAQ,SAAS,MAAM,WAAW,OAAQ,QAAO;AAE9D,QAAM,QAAQ,CAAC,WAAW,MAAM,WAAW,KAAK,CAAC,CAAC;AAClD,QAAM,OAAO,QAAQ,CAAC,GAAG,MAAM;AAC7B,UAAM,QAAQ,EAAE,OAAO,KAAK;AAC5B,UAAM,OAAO,SAAS,OAAO,WAAW,WAAW,IAAI,OAAO,KAAK;AACnE,UAAM,KAAK,GAAG,UAAU,OAAO,CAAC,CAAC,CAAC,GAAG,WAAW,EAAE,IAAI,CAAC,KAAK,IAAI,EAAE;AAAA,EACpE,CAAC;AAED,SAAO,MAAM,KAAK,OAAO;AAC3B;AAEF,MAAM,YAAY,CAAC,WAAmC;AACpD,QAAM,QAAQ,QAAQ,OAAO,UAAU;AACvC,SAAO;AAAA,IACL,MAAM,YAAY,QAAQ,SAAS,CAAC,OAAO,aAAa,YAAY,eAAe;AAAA,IACnF,OAAO,YAAY;AAAA,IACnB,KAAK,YAAY;AAAA;AAAA,IAEjB,QACE,YAAY,QACX,SAAS,OAAO,aAAa,YAAY,eAAe,MACxD,OAAO,aAAa,IAAI,YAAY;AAAA,IACvC,cAAc;AAAA,EAAA;AAElB;AAEO,MAAM,wBAAwB,CAAC,OAAwB,WAAmC;AAC/F,QAAM,SAAS,MAAM,OAAO,IAAI,CAAC,GAAG,MAAM,SAAS,EAAE,MAAM,GAAG,OAAO,YAAY,CAAC;AAElF,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,MAAM,MAAM;AAAA;AAAA,IAEZ,SAAS,OAAO;AAAA,EAAA;AAElB,QAAM,YAAY;AAAA,IAChB,MAAM;AAAA,IACN,MAAM,OAAO;AAAA,IACb,cAAc;AAAA,IACd,SAAS,OAAO,aAAa,cAAc,IAAI,cAAc;AAAA;AAAA,IAE7D,YAAY,OAAO,aAAa,IAAI;AAAA,IACpC,aAAa,OAAO,gBAAgB,IAAI;AAAA,EAAA;AAG1C,SAAO;AAAA,IACL,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa,EAAE,MAAM,SAAA;AAAA,MACrB,WAAW,sBAAsB,OAAO,QAAQ,OAAO,WAAW;AAAA,IAAA;AAAA,IAEpE,QAAQ,EAAE,MAAM,CAAC,OAAO,YAAY,QAAQ,GAAG,MAAM,SAAA;AAAA,IACrD,MAAM,UAAU,MAAM;AAAA,IACtB,OAAO,OAAO,aAAa,YAAY;AAAA,IACvC,OAAO,OAAO,aAAa,eAAe;AAAA,IAC1C,QAAQ,MAAM,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MAClC,MAAM,EAAE;AAAA,MACR,MAAM;AAAA,MACN,MAAM,EAAE;AAAA,MACR,cAAc,YAAY;AAAA,MAC1B,WAAW,EAAE,OAAO,OAAO,CAAC,EAAA;AAAA,MAC5B,UAAU,EAAE,OAAO,SAAA;AAAA,IAAkB,EACrC;AAAA,EAAA;AAEN;"}

package/dist/index99.cjs

@@ -1,48 +1,10 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "krc-root-U8B4Y";
-const header = "krc-header-dy6xQ";
-const headerLeft = "krc-headerLeft-80jJu";
-const title = "krc-title--e-Ci";
-const subtitle = "krc-subtitle-63ixC";
-const headerRight = "krc-headerRight-3Vuls";
-const toolbar = "krc-toolbar-h6ALf";
-const chartTypeToggle = "krc-chartTypeToggle-6DRWb";
-const active = "krc-active-Un9q0";
-const chartContainer = "krc-chartContainer-2Oz2N";
-const loading = "krc-loading-hTkxl";
-const error = "krc-error--F7yO";
-const retryButton = "krc-retryButton-w0SS7";
-const empty = "krc-empty-HWTS-";
-const styles = {
-  root,
-  header,
-  headerLeft,
-  title,
-  subtitle,
-  headerRight,
-  toolbar,
-  chartTypeToggle,
-  active,
-  chartContainer,
-  loading,
-  error,
-  retryButton,
-  empty
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_LABELS = {
+  loading: "Loading chart...",
+  empty: "No data available.",
+  retry: "Retry",
+  noValue: "No data"
 };
-exports.active = active;
-exports.chartContainer = chartContainer;
-exports.chartTypeToggle = chartTypeToggle;
-exports.default = styles;
-exports.empty = empty;
-exports.error = error;
-exports.header = header;
-exports.headerLeft = headerLeft;
-exports.headerRight = headerRight;
-exports.loading = loading;
-exports.retryButton = retryButton;
-exports.root = root;
-exports.subtitle = subtitle;
-exports.title = title;
-exports.toolbar = toolbar;
+exports.DEFAULT_LABELS = DEFAULT_LABELS;
 //# sourceMappingURL=index99.cjs.map

package/dist/index99.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index99.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index99.cjs","sources":["../src/charts/GroupedBarChartCard/defaultLabels.ts"],"sourcesContent":["import type { GroupedBarChartLabels } from './GroupedBarChartCard.types';\n\n/** English defaults, matching the texts of the other chart cards. */\nexport const DEFAULT_LABELS: GroupedBarChartLabels = {\n  loading: 'Loading chart...',\n  empty: 'No data available.',\n  retry: 'Retry',\n  noValue: 'No data',\n};\n"],"names":[],"mappings":";;AAGO,MAAM,iBAAwC;AAAA,EACnD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;;"}

package/dist/index99.js

@@ -1,48 +1,10 @@
-const root = "krc-root-U8B4Y";
-const header = "krc-header-dy6xQ";
-const headerLeft = "krc-headerLeft-80jJu";
-const title = "krc-title--e-Ci";
-const subtitle = "krc-subtitle-63ixC";
-const headerRight = "krc-headerRight-3Vuls";
-const toolbar = "krc-toolbar-h6ALf";
-const chartTypeToggle = "krc-chartTypeToggle-6DRWb";
-const active = "krc-active-Un9q0";
-const chartContainer = "krc-chartContainer-2Oz2N";
-const loading = "krc-loading-hTkxl";
-const error = "krc-error--F7yO";
-const retryButton = "krc-retryButton-w0SS7";
-const empty = "krc-empty-HWTS-";
-const styles = {
-  root,
-  header,
-  headerLeft,
-  title,
-  subtitle,
-  headerRight,
-  toolbar,
-  chartTypeToggle,
-  active,
-  chartContainer,
-  loading,
-  error,
-  retryButton,
-  empty
+const DEFAULT_LABELS = {
+  loading: "Loading chart...",
+  empty: "No data available.",
+  retry: "Retry",
+  noValue: "No data"
 };
 export {
-  active,
-  chartContainer,
-  chartTypeToggle,
-  styles as default,
-  empty,
-  error,
-  header,
-  headerLeft,
-  headerRight,
-  loading,
-  retryButton,
-  root,
-  subtitle,
-  title,
-  toolbar
+  DEFAULT_LABELS
 };
 //# sourceMappingURL=index99.js.map

package/dist/index99.js.map

@@ -1 +1 @@
-{"version":3,"file":"index99.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index99.js","sources":["../src/charts/GroupedBarChartCard/defaultLabels.ts"],"sourcesContent":["import type { GroupedBarChartLabels } from './GroupedBarChartCard.types';\n\n/** English defaults, matching the texts of the other chart cards. */\nexport const DEFAULT_LABELS: GroupedBarChartLabels = {\n  loading: 'Loading chart...',\n  empty: 'No data available.',\n  retry: 'Retry',\n  noValue: 'No data',\n};\n"],"names":[],"mappings":"AAGO,MAAM,iBAAwC;AAAA,EACnD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/style.css

@@ -1787,6 +1787,117 @@
   border: 0;
   clip-path: inset(50%);
 }
+/* Column flex so the chart takes the height the card is given: the container
+   grows when the consumer sizes the card, and falls back to its own height
+   when the card is left to size itself. */
+.krc-root-ij8wB {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-subtle);
+  overflow: hidden;
+}
+
+.krc-header-poY0R {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+.krc-headerText-ShzOl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  min-width: 0;
+}
+
+.krc-title-H3VpM {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.krc-subtitle-n6tgG {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  line-height: 1.4;
+}
+
+.krc-headerActions-WY-hn {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.krc-toolbar-lMVmb {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-xs) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+/* An explicit height (not just a minimum) is what lets the echarts wrapper
+   resolve its own `height: 100%`; `flex: 1` then lets it take any extra space
+   the card was given. */
+.krc-chartContainer-nlbUx {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  height: 18.75rem;
+  min-height: 18.75rem;
+  padding: var(--spacing-sm);
+}
+
+.krc-loading-xub77,
+.krc-empty-vJ4UM {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-height: 18.75rem;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+}
+
+.krc-error-d-7n5 {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  min-height: 18.75rem;
+  color: var(--danger-color);
+  font-size: var(--font-size-sm);
+}
+
+.krc-retryButton-LT8qy {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--accent-color-contrast);
+  background: var(--accent-color);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.krc-retryButton-LT8qy:hover {
+  background: var(--accent-color-strong);
+}
+
+.krc-retryButton-LT8qy:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
 .krc-wrap-JRsc1 {
   overflow: auto;
   border: var(--border-width) solid var(--border-color);
@@ -1806,13 +1917,28 @@
   white-space: nowrap;
 }
 
+/* The whole header is pinned, so one or two header rows always move together. */
+.krc-root-k9ocd thead {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
 .krc-colh-Fi0Kr {
   background: var(--surface-alt);
   font-weight: 700;
   color: var(--text-secondary);
-  position: sticky;
-  top: 0;
-  z-index: 1;
+}
+
+.krc-group-rVQPU {
+  background: var(--surface-alt);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-secondary);
+}
+
+/* On <colgroup>: with collapsed borders it is painted for the full height of the table. */
+.krc-groupStart-bu8S4 {
+  border-left: var(--border-width-md) solid var(--border-color);
 }
 
 .krc-rowh-bTG4G {
@@ -1831,9 +1957,8 @@
   font-weight: 700;
   color: var(--text-secondary);
   position: sticky;
-  top: 0;
   left: 0;
-  z-index: 2;
+  z-index: 1;
 }
 
 .krc-cell-i0lDG {