@ktnpm_devops/react-component 0.14.0 → 0.16.0

package/dist/index51.cjs

@@ -2,108 +2,67 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const ReactECharts = require("echarts-for-react");
-const clsx = require("./index58.cjs");
-const constants = require("./index71.cjs");
-const buildChartOptions = require("./index98.cjs");
-const StackedBarChartCard_module = require("./index99.cjs");
-const CHART_TYPE_LABELS = {
-  bar: "Bar",
-  pie: "Pie",
-  sunburst: "Sunburst"
-};
-const CHART_TYPES = ["bar", "pie", "sunburst"];
-const StackedBarChartCard = ({
-  title,
-  data,
-  subtitle,
-  chartType = "bar",
-  isLoading = false,
-  error,
-  onRetry,
-  onChartReady,
-  onSelectCategory,
-  // onAnalyzeRootCause — reserved for context menu integration
-  maxCategories = constants.MAX_CATEGORIES,
-  maxSubcategories = constants.MAX_SUBCATEGORIES,
-  showOthersBucket = true,
-  invertAxis = false,
-  hideLegend = false,
-  enableScroll = false,
-  toolbar,
-  actions,
-  className
-}) => {
-  const { categories, series } = react.useMemo(
-    () => buildChartOptions.aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),
-    [data, maxCategories, maxSubcategories, showOthersBucket]
-  );
-  const option = react.useMemo(() => {
-    switch (chartType) {
-      case "pie":
-        return buildChartOptions.buildPieOption(categories, series, hideLegend);
-      case "sunburst":
-        return buildChartOptions.buildSunburstOption(categories, series);
-      default:
-        return buildChartOptions.buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);
-    }
-  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
-  const handleChartReady = react.useCallback(
-    (instance) => {
-      onChartReady == null ? void 0 : onChartReady(instance);
-    },
-    [onChartReady]
-  );
-  const handleChartClick = react.useCallback(
-    (params) => {
-      if (!onSelectCategory || !params.name) return;
-      onSelectCategory({
-        category: params.name,
-        subCategory: params.seriesName ?? null
-      });
-    },
-    [onSelectCategory]
-  );
-  const hasData = data.length > 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(StackedBarChartCard_module.default.root, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.headerLeft, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: StackedBarChartCard_module.default.title, children: title }),
-        subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.subtitle, children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.headerRight, children: [
-        toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.toolbar, children: toolbar }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: chartType === type ? StackedBarChartCard_module.default.active : void 0,
-            "aria-pressed": chartType === type,
-            disabled: true,
-            children: CHART_TYPE_LABELS[type]
-          },
-          type
-        )) }),
-        actions
-      ] })
-    ] }),
-    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.loading, children: "Loading chart data..." }),
-    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.error, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
-      onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: StackedBarChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
-    ] }),
-    !isLoading && !error && !hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.empty, children: "No data available" }),
-    !isLoading && !error && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ReactECharts,
+const clsx = require("./index59.cjs");
+const Sparkline_module = require("./index108.cjs");
+const PAD = 3;
+const Sparkline = react.forwardRef(
+  ({
+    values,
+    highlightLast = true,
+    width = 120,
+    height = 30,
+    strokeColor,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const n = values.length;
+    const min = n ? Math.min(...values) : 0;
+    const max = n ? Math.max(...values) : 0;
+    const range = max - min || 1;
+    const x = (i) => n <= 1 ? width / 2 : i * width / (n - 1);
+    const y = (v) => height - (v - min) / range * (height - PAD * 2) - PAD;
+    const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
+    const lastIndex = n - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
       {
-        option,
-        style: { height: "100%", width: "100%" },
-        onChartReady: handleChartReady,
-        onEvents: { click: handleChartClick },
-        notMerge: true
+        ref,
+        className: clsx.clsx(Sparkline_module.default.root, className),
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        role: ariaLabel ? "img" : void 0,
+        "aria-label": ariaLabel,
+        "aria-hidden": ariaLabel ? void 0 : true,
+        ...props,
+        children: [
+          n > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+            "polyline",
+            {
+              className: Sparkline_module.default.line,
+              points,
+              fill: "none",
+              stroke: strokeColor ?? "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          highlightLast && n > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              className: Sparkline_module.default.dot,
+              cx: x(lastIndex).toFixed(1),
+              cy: y(values[lastIndex]).toFixed(1),
+              r: "3"
+            }
+          )
+        ]
       }
-    ) })
-  ] });
-};
-exports.StackedBarChartCard = StackedBarChartCard;
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
+exports.Sparkline = Sparkline;
 //# sourceMappingURL=index51.cjs.map

package/dist/index51.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index51.cjs","sources":["../src/charts/StackedBarChartCard/StackedBarChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { MAX_CATEGORIES, MAX_SUBCATEGORIES } from '../../constants';\nimport type { StackedBarChartCardProps, StackedBarChartType } from './StackedBarChartCard.types';\nimport { aggregateData, buildBarOption, buildPieOption, buildSunburstOption } from './buildChartOptions';\nimport styles from './StackedBarChartCard.module.css';\n\n/** Label map for chart type toggle buttons. */\nconst CHART_TYPE_LABELS: Record<StackedBarChartType, string> = {\n  bar: 'Bar',\n  pie: 'Pie',\n  sunburst: 'Sunburst',\n};\n\n/** All available chart types for the toggle group. */\nconst CHART_TYPES: StackedBarChartType[] = ['bar', 'pie', 'sunburst'];\n\nexport const StackedBarChartCard = ({\n  title,\n  data,\n  subtitle,\n  chartType = 'bar',\n  isLoading = false,\n  error,\n  onRetry,\n  onChartReady,\n  onSelectCategory,\n  // onAnalyzeRootCause — reserved for context menu integration\n  maxCategories = MAX_CATEGORIES,\n  maxSubcategories = MAX_SUBCATEGORIES,\n  showOthersBucket = true,\n  invertAxis = false,\n  hideLegend = false,\n  enableScroll = false,\n  toolbar,\n  actions,\n  className,\n}: StackedBarChartCardProps) => {\n  const { categories, series } = useMemo(\n    () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),\n    [data, maxCategories, maxSubcategories, showOthersBucket],\n  );\n\n  const option = useMemo(() => {\n    switch (chartType) {\n      case 'pie':\n        return buildPieOption(categories, series, hideLegend);\n      case 'sunburst':\n        return buildSunburstOption(categories, series);\n      default:\n        return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);\n    }\n  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);\n\n  const handleChartReady = useCallback(\n    (instance: EChartsInstance) => {\n      onChartReady?.(instance);\n    },\n    [onChartReady],\n  );\n\n  const handleChartClick = useCallback(\n    (params: { name?: string; seriesName?: string }) => {\n      if (!onSelectCategory || !params.name) return;\n      onSelectCategory({\n        category: params.name,\n        subCategory: params.seriesName ?? null,\n      });\n    },\n    [onSelectCategory],\n  );\n\n  const hasData = data.length > 0;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.header}>\n        <div className={styles.headerLeft}>\n          <h3 className={styles.title}>{title}</h3>\n          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n        </div>\n        <div className={styles.headerRight}>\n          {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n          <div className={styles.chartTypeToggle}>\n            {CHART_TYPES.map((type) => (\n              <button\n                key={type}\n                type=\"button\"\n                className={chartType === type ? styles.active : undefined}\n                aria-pressed={chartType === type}\n                disabled\n              >\n                {CHART_TYPE_LABELS[type]}\n              </button>\n            ))}\n          </div>\n          {actions}\n        </div>\n      </div>\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && !hasData && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && hasData && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={handleChartReady}\n            onEvents={{ click: handleChartClick }}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_CATEGORIES","MAX_SUBCATEGORIES","useMemo","aggregateData","buildPieOption","buildSunburstOption","buildBarOption","useCallback","clsx","styles","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"index51.cjs","sources":["../src/charts/Sparkline/Sparkline.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { SparklineProps } from './Sparkline.types';\nimport styles from './Sparkline.module.css';\n\n/** Vertical inset (px) so the highlighted endpoint dot is not clipped. */\nconst PAD = 3;\n\nexport const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(\n  (\n    {\n      values,\n      highlightLast = true,\n      width = 120,\n      height = 30,\n      strokeColor,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const n = values.length;\n    const min = n ? Math.min(...values) : 0;\n    const max = n ? Math.max(...values) : 0;\n    const range = max - min || 1;\n    const x = (i: number) => (n <= 1 ? width / 2 : (i * width) / (n - 1));\n    const y = (v: number) => height - ((v - min) / range) * (height - PAD * 2) - PAD;\n    const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');\n    const lastIndex = n - 1;\n\n    return (\n      <svg\n        ref={ref}\n        className={clsx(styles.root, className)}\n        width={width}\n        height={height}\n        viewBox={`0 0 ${width} ${height}`}\n        role={ariaLabel ? 'img' : undefined}\n        aria-label={ariaLabel}\n        aria-hidden={ariaLabel ? undefined : true}\n        {...props}\n      >\n        {n > 1 && (\n          <polyline\n            className={styles.line}\n            points={points}\n            fill=\"none\"\n            stroke={strokeColor ?? 'currentColor'}\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        )}\n        {highlightLast && n > 0 && (\n          <circle\n            className={styles.dot}\n            cx={x(lastIndex).toFixed(1)}\n            cy={y(values[lastIndex]).toFixed(1)}\n            r=\"3\"\n          />\n        )}\n      </svg>\n    );\n  },\n);\n\nSparkline.displayName = 'Sparkline';\n"],"names":["forwardRef","jsxs","clsx","styles","jsx"],"mappings":";;;;;;AAMA,MAAM,MAAM;AAEL,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,IAAI,OAAO;AACjB,UAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;AACtC,UAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;AACtC,UAAM,QAAQ,MAAM,OAAO;AAC3B,UAAM,IAAI,CAAC,MAAe,KAAK,IAAI,QAAQ,IAAK,IAAI,SAAU,IAAI;AAClE,UAAM,IAAI,CAAC,MAAc,UAAW,IAAI,OAAO,SAAU,SAAS,MAAM,KAAK;AAC7E,UAAM,SAAS,OAAO,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,GAAG;AACrF,UAAM,YAAY,IAAI;AAEtB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA,KAAKC,yBAAO,MAAM,SAAS;AAAA,QACtC;AAAA,QACA;AAAA,QACA,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,QAC/B,MAAM,YAAY,QAAQ;AAAA,QAC1B,cAAY;AAAA,QACZ,eAAa,YAAY,SAAY;AAAA,QACpC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,IAAI,KACHC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,iBAAAA,QAAO;AAAA,cAClB;AAAA,cACA,MAAK;AAAA,cACL,QAAQ,eAAe;AAAA,cACvB,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAGlB,iBAAiB,IAAI,KACpBC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,iBAAAA,QAAO;AAAA,cAClB,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC;AAAA,cAC1B,IAAI,EAAE,OAAO,SAAS,CAAC,EAAE,QAAQ,CAAC;AAAA,cAClC,GAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,UAAU,cAAc;;"}

package/dist/index51.js

@@ -1,109 +1,68 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo, useCallback } from "react";
-import ReactECharts from "echarts-for-react";
-import { clsx } from "./index58.js";
-import { MAX_CATEGORIES, MAX_SUBCATEGORIES } from "./index71.js";
-import { aggregateData, buildBarOption, buildSunburstOption, buildPieOption } from "./index98.js";
-import styles from "./index99.js";
-const CHART_TYPE_LABELS = {
-  bar: "Bar",
-  pie: "Pie",
-  sunburst: "Sunburst"
-};
-const CHART_TYPES = ["bar", "pie", "sunburst"];
-const StackedBarChartCard = ({
-  title,
-  data,
-  subtitle,
-  chartType = "bar",
-  isLoading = false,
-  error,
-  onRetry,
-  onChartReady,
-  onSelectCategory,
-  // onAnalyzeRootCause — reserved for context menu integration
-  maxCategories = MAX_CATEGORIES,
-  maxSubcategories = MAX_SUBCATEGORIES,
-  showOthersBucket = true,
-  invertAxis = false,
-  hideLegend = false,
-  enableScroll = false,
-  toolbar,
-  actions,
-  className
-}) => {
-  const { categories, series } = useMemo(
-    () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),
-    [data, maxCategories, maxSubcategories, showOthersBucket]
-  );
-  const option = useMemo(() => {
-    switch (chartType) {
-      case "pie":
-        return buildPieOption(categories, series, hideLegend);
-      case "sunburst":
-        return buildSunburstOption(categories, series);
-      default:
-        return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);
-    }
-  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
-  const handleChartReady = useCallback(
-    (instance) => {
-      onChartReady == null ? void 0 : onChartReady(instance);
-    },
-    [onChartReady]
-  );
-  const handleChartClick = useCallback(
-    (params) => {
-      if (!onSelectCategory || !params.name) return;
-      onSelectCategory({
-        category: params.name,
-        subCategory: params.seriesName ?? null
-      });
-    },
-    [onSelectCategory]
-  );
-  const hasData = data.length > 0;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.headerLeft, children: [
-        /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
-        subtitle && /* @__PURE__ */ jsx("div", { className: styles.subtitle, children: subtitle })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: styles.headerRight, children: [
-        toolbar && /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: toolbar }),
-        /* @__PURE__ */ jsx("div", { className: styles.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: chartType === type ? styles.active : void 0,
-            "aria-pressed": chartType === type,
-            disabled: true,
-            children: CHART_TYPE_LABELS[type]
-          },
-          type
-        )) }),
-        actions
-      ] })
-    ] }),
-    isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
-    !isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
-      /* @__PURE__ */ jsx("span", { children: error }),
-      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
-    ] }),
-    !isLoading && !error && !hasData && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
-    !isLoading && !error && hasData && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
-      ReactECharts,
+import { forwardRef } from "react";
+import { clsx } from "./index59.js";
+import styles from "./index108.js";
+const PAD = 3;
+const Sparkline = forwardRef(
+  ({
+    values,
+    highlightLast = true,
+    width = 120,
+    height = 30,
+    strokeColor,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const n = values.length;
+    const min = n ? Math.min(...values) : 0;
+    const max = n ? Math.max(...values) : 0;
+    const range = max - min || 1;
+    const x = (i) => n <= 1 ? width / 2 : i * width / (n - 1);
+    const y = (v) => height - (v - min) / range * (height - PAD * 2) - PAD;
+    const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
+    const lastIndex = n - 1;
+    return /* @__PURE__ */ jsxs(
+      "svg",
       {
-        option,
-        style: { height: "100%", width: "100%" },
-        onChartReady: handleChartReady,
-        onEvents: { click: handleChartClick },
-        notMerge: true
+        ref,
+        className: clsx(styles.root, className),
+        width,
+        height,
+        viewBox: `0 0 ${width} ${height}`,
+        role: ariaLabel ? "img" : void 0,
+        "aria-label": ariaLabel,
+        "aria-hidden": ariaLabel ? void 0 : true,
+        ...props,
+        children: [
+          n > 1 && /* @__PURE__ */ jsx(
+            "polyline",
+            {
+              className: styles.line,
+              points,
+              fill: "none",
+              stroke: strokeColor ?? "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          highlightLast && n > 0 && /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: styles.dot,
+              cx: x(lastIndex).toFixed(1),
+              cy: y(values[lastIndex]).toFixed(1),
+              r: "3"
+            }
+          )
+        ]
       }
-    ) })
-  ] });
-};
+    );
+  }
+);
+Sparkline.displayName = "Sparkline";
 export {
-  StackedBarChartCard
+  Sparkline
 };
 //# sourceMappingURL=index51.js.map

package/dist/index51.js.map

@@ -1 +1 @@
-{"version":3,"file":"index51.js","sources":["../src/charts/StackedBarChartCard/StackedBarChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { MAX_CATEGORIES, MAX_SUBCATEGORIES } from '../../constants';\nimport type { StackedBarChartCardProps, StackedBarChartType } from './StackedBarChartCard.types';\nimport { aggregateData, buildBarOption, buildPieOption, buildSunburstOption } from './buildChartOptions';\nimport styles from './StackedBarChartCard.module.css';\n\n/** Label map for chart type toggle buttons. */\nconst CHART_TYPE_LABELS: Record<StackedBarChartType, string> = {\n  bar: 'Bar',\n  pie: 'Pie',\n  sunburst: 'Sunburst',\n};\n\n/** All available chart types for the toggle group. */\nconst CHART_TYPES: StackedBarChartType[] = ['bar', 'pie', 'sunburst'];\n\nexport const StackedBarChartCard = ({\n  title,\n  data,\n  subtitle,\n  chartType = 'bar',\n  isLoading = false,\n  error,\n  onRetry,\n  onChartReady,\n  onSelectCategory,\n  // onAnalyzeRootCause — reserved for context menu integration\n  maxCategories = MAX_CATEGORIES,\n  maxSubcategories = MAX_SUBCATEGORIES,\n  showOthersBucket = true,\n  invertAxis = false,\n  hideLegend = false,\n  enableScroll = false,\n  toolbar,\n  actions,\n  className,\n}: StackedBarChartCardProps) => {\n  const { categories, series } = useMemo(\n    () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),\n    [data, maxCategories, maxSubcategories, showOthersBucket],\n  );\n\n  const option = useMemo(() => {\n    switch (chartType) {\n      case 'pie':\n        return buildPieOption(categories, series, hideLegend);\n      case 'sunburst':\n        return buildSunburstOption(categories, series);\n      default:\n        return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);\n    }\n  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);\n\n  const handleChartReady = useCallback(\n    (instance: EChartsInstance) => {\n      onChartReady?.(instance);\n    },\n    [onChartReady],\n  );\n\n  const handleChartClick = useCallback(\n    (params: { name?: string; seriesName?: string }) => {\n      if (!onSelectCategory || !params.name) return;\n      onSelectCategory({\n        category: params.name,\n        subCategory: params.seriesName ?? null,\n      });\n    },\n    [onSelectCategory],\n  );\n\n  const hasData = data.length > 0;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.header}>\n        <div className={styles.headerLeft}>\n          <h3 className={styles.title}>{title}</h3>\n          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n        </div>\n        <div className={styles.headerRight}>\n          {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n          <div className={styles.chartTypeToggle}>\n            {CHART_TYPES.map((type) => (\n              <button\n                key={type}\n                type=\"button\"\n                className={chartType === type ? styles.active : undefined}\n                aria-pressed={chartType === type}\n                disabled\n              >\n                {CHART_TYPE_LABELS[type]}\n              </button>\n            ))}\n          </div>\n          {actions}\n        </div>\n      </div>\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && !hasData && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && hasData && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={handleChartReady}\n            onEvents={{ click: handleChartClick }}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAUA,MAAM,oBAAyD;AAAA,EAC7D,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AACZ;AAGA,MAAM,cAAqC,CAAC,OAAO,OAAO,UAAU;AAE7D,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,EAAE,YAAY,OAAA,IAAW;AAAA,IAC7B,MAAM,cAAc,MAAM,eAAe,kBAAkB,gBAAgB;AAAA,IAC3E,CAAC,MAAM,eAAe,kBAAkB,gBAAgB;AAAA,EAAA;AAG1D,QAAM,SAAS,QAAQ,MAAM;AAC3B,YAAQ,WAAA;AAAA,MACN,KAAK;AACH,eAAO,eAAe,YAAY,QAAQ,UAAU;AAAA,MACtD,KAAK;AACH,eAAO,oBAAoB,YAAY,MAAM;AAAA,MAC/C;AACE,eAAO,eAAe,YAAY,QAAQ,YAAY,YAAY,YAAY;AAAA,IAAA;AAAA,EAEpF,GAAG,CAAC,WAAW,YAAY,QAAQ,YAAY,YAAY,YAAY,CAAC;AAExE,QAAM,mBAAmB;AAAA,IACvB,CAAC,aAA8B;AAC7B,mDAAe;AAAA,IACjB;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,QAAM,mBAAmB;AAAA,IACvB,CAAC,WAAmD;AAClD,UAAI,CAAC,oBAAoB,CAAC,OAAO,KAAM;AACvC,uBAAiB;AAAA,QACf,UAAU,OAAO;AAAA,QACjB,aAAa,OAAO,cAAc;AAAA,MAAA,CACnC;AAAA,IACH;AAAA,IACA,CAAC,gBAAgB;AAAA,EAAA;AAGnB,QAAM,UAAU,KAAK,SAAS;AAE9B,8BACG,OAAA,EAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GACzC,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACrB,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACrB,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAW,OAAO,OAAQ,UAAA,OAAM;AAAA,QACnC,YAAY,oBAAC,OAAA,EAAI,WAAW,OAAO,UAAW,UAAA,SAAA,CAAS;AAAA,MAAA,GAC1D;AAAA,MACA,qBAAC,OAAA,EAAI,WAAW,OAAO,aACpB,UAAA;AAAA,QAAA,WAAW,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAU,UAAA,SAAQ;AAAA,QACrD,oBAAC,SAAI,WAAW,OAAO,iBACpB,UAAA,YAAY,IAAI,CAAC,SAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,WAAW,cAAc,OAAO,OAAO,SAAS;AAAA,YAChD,gBAAc,cAAc;AAAA,YAC5B,UAAQ;AAAA,YAEP,4BAAkB,IAAI;AAAA,UAAA;AAAA,UANlB;AAAA,QAAA,CAQR,GACH;AAAA,QACC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAAA,IAEC,aAAa,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,UAAA,yBAAqB;AAAA,IAElE,CAAC,aAAa,8BACZ,OAAA,EAAI,WAAW,OAAO,OACrB,UAAA;AAAA,MAAA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,MACZ,WACC,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAW,OAAO,aAAa,SAAS,SAAS,UAAA,QAAA,CAEvE;AAAA,IAAA,GAEJ;AAAA,IAGD,CAAC,aAAa,CAAC,SAAS,CAAC,WACxB,oBAAC,OAAA,EAAI,WAAW,OAAO,OAAO,UAAA,oBAAA,CAAiB;AAAA,IAGhD,CAAC,aAAa,CAAC,SAAS,WACvB,oBAAC,OAAA,EAAI,WAAW,OAAO,gBACrB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,QAAQ,QAAQ,OAAO,OAAA;AAAA,QAChC,cAAc;AAAA,QACd,UAAU,EAAE,OAAO,iBAAA;AAAA,QACnB,UAAQ;AAAA,MAAA;AAAA,IAAA,EACV,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"index51.js","sources":["../src/charts/Sparkline/Sparkline.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { SparklineProps } from './Sparkline.types';\nimport styles from './Sparkline.module.css';\n\n/** Vertical inset (px) so the highlighted endpoint dot is not clipped. */\nconst PAD = 3;\n\nexport const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(\n  (\n    {\n      values,\n      highlightLast = true,\n      width = 120,\n      height = 30,\n      strokeColor,\n      className,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const n = values.length;\n    const min = n ? Math.min(...values) : 0;\n    const max = n ? Math.max(...values) : 0;\n    const range = max - min || 1;\n    const x = (i: number) => (n <= 1 ? width / 2 : (i * width) / (n - 1));\n    const y = (v: number) => height - ((v - min) / range) * (height - PAD * 2) - PAD;\n    const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');\n    const lastIndex = n - 1;\n\n    return (\n      <svg\n        ref={ref}\n        className={clsx(styles.root, className)}\n        width={width}\n        height={height}\n        viewBox={`0 0 ${width} ${height}`}\n        role={ariaLabel ? 'img' : undefined}\n        aria-label={ariaLabel}\n        aria-hidden={ariaLabel ? undefined : true}\n        {...props}\n      >\n        {n > 1 && (\n          <polyline\n            className={styles.line}\n            points={points}\n            fill=\"none\"\n            stroke={strokeColor ?? 'currentColor'}\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        )}\n        {highlightLast && n > 0 && (\n          <circle\n            className={styles.dot}\n            cx={x(lastIndex).toFixed(1)}\n            cy={y(values[lastIndex]).toFixed(1)}\n            r=\"3\"\n          />\n        )}\n      </svg>\n    );\n  },\n);\n\nSparkline.displayName = 'Sparkline';\n"],"names":[],"mappings":";;;;AAMA,MAAM,MAAM;AAEL,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,IAAI,OAAO;AACjB,UAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;AACtC,UAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;AACtC,UAAM,QAAQ,MAAM,OAAO;AAC3B,UAAM,IAAI,CAAC,MAAe,KAAK,IAAI,QAAQ,IAAK,IAAI,SAAU,IAAI;AAClE,UAAM,IAAI,CAAC,MAAc,UAAW,IAAI,OAAO,SAAU,SAAS,MAAM,KAAK;AAC7E,UAAM,SAAS,OAAO,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,GAAG;AACrF,UAAM,YAAY,IAAI;AAEtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC;AAAA,QACA;AAAA,QACA,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,QAC/B,MAAM,YAAY,QAAQ;AAAA,QAC1B,cAAY;AAAA,QACZ,eAAa,YAAY,SAAY;AAAA,QACpC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,IAAI,KACH;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,OAAO;AAAA,cAClB;AAAA,cACA,MAAK;AAAA,cACL,QAAQ,eAAe;AAAA,cACvB,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAGlB,iBAAiB,IAAI,KACpB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,OAAO;AAAA,cAClB,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC;AAAA,cAC1B,IAAI,EAAE,OAAO,SAAS,CAAC,EAAE,QAAQ,CAAC;AAAA,cAClC,GAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,UAAU,cAAc;"}

package/dist/index52.cjs

@@ -2,50 +2,108 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index58.cjs");
-const StatCard_module = require("./index62.cjs");
-const StatCard = react.forwardRef(
-  ({
-    label,
-    value,
-    sub,
-    variant = "default",
-    clickable = false,
-    active = false,
-    className,
-    onKeyDown,
-    ...props
-  }, ref) => {
-    const handleKeyDown = (event) => {
-      onKeyDown == null ? void 0 : onKeyDown(event);
-      if (clickable && (event.key === "Enter" || event.key === " ")) {
-        event.preventDefault();
-        event.currentTarget.click();
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+const ReactECharts = require("echarts-for-react");
+const clsx = require("./index59.cjs");
+const constants = require("./index63.cjs");
+const buildChartOptions = require("./index93.cjs");
+const StackedBarChartCard_module = require("./index94.cjs");
+const CHART_TYPE_LABELS = {
+  bar: "Bar",
+  pie: "Pie",
+  sunburst: "Sunburst"
+};
+const CHART_TYPES = ["bar", "pie", "sunburst"];
+const StackedBarChartCard = ({
+  title,
+  data,
+  subtitle,
+  chartType = "bar",
+  isLoading = false,
+  error,
+  onRetry,
+  onChartReady,
+  onSelectCategory,
+  // onAnalyzeRootCause — reserved for context menu integration
+  maxCategories = constants.MAX_CATEGORIES,
+  maxSubcategories = constants.MAX_SUBCATEGORIES,
+  showOthersBucket = true,
+  invertAxis = false,
+  hideLegend = false,
+  enableScroll = false,
+  toolbar,
+  actions,
+  className
+}) => {
+  const { categories, series } = react.useMemo(
+    () => buildChartOptions.aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),
+    [data, maxCategories, maxSubcategories, showOthersBucket]
+  );
+  const option = react.useMemo(() => {
+    switch (chartType) {
+      case "pie":
+        return buildChartOptions.buildPieOption(categories, series, hideLegend);
+      case "sunburst":
+        return buildChartOptions.buildSunburstOption(categories, series);
+      default:
+        return buildChartOptions.buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);
+    }
+  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
+  const handleChartReady = react.useCallback(
+    (instance) => {
+      onChartReady == null ? void 0 : onChartReady(instance);
+    },
+    [onChartReady]
+  );
+  const handleChartClick = react.useCallback(
+    (params) => {
+      if (!onSelectCategory || !params.name) return;
+      onSelectCategory({
+        category: params.name,
+        subCategory: params.seriesName ?? null
+      });
+    },
+    [onSelectCategory]
+  );
+  const hasData = data.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(StackedBarChartCard_module.default.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.headerLeft, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: StackedBarChartCard_module.default.title, children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.subtitle, children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.headerRight, children: [
+        toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.toolbar, children: toolbar }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: chartType === type ? StackedBarChartCard_module.default.active : void 0,
+            "aria-pressed": chartType === type,
+            disabled: true,
+            children: CHART_TYPE_LABELS[type]
+          },
+          type
+        )) }),
+        actions
+      ] })
+    ] }),
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.loading, children: "Loading chart data..." }),
+    !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: StackedBarChartCard_module.default.error, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
+      onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: StackedBarChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
+    ] }),
+    !isLoading && !error && !hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.empty, children: "No data available" }),
+    !isLoading && !error && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StackedBarChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      ReactECharts,
       {
-        ref,
-        className: clsx.clsx(
-          StatCard_module.default.root,
-          clickable && StatCard_module.default.isClick,
-          active && StatCard_module.default.isActive,
-          className
-        ),
-        role: clickable ? "button" : void 0,
-        tabIndex: clickable ? 0 : void 0,
-        onKeyDown: handleKeyDown,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: StatCard_module.default.label, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(StatCard_module.default.value, variant !== "default" && StatCard_module.default[variant]), children: value }),
-          sub != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: StatCard_module.default.sub, children: sub })
-        ]
+        option,
+        style: { height: "100%", width: "100%" },
+        onChartReady: handleChartReady,
+        onEvents: { click: handleChartClick },
+        notMerge: true
       }
-    );
-  }
-);
-StatCard.displayName = "StatCard";
-exports.StatCard = StatCard;
+    ) })
+  ] });
+};
+exports.StackedBarChartCard = StackedBarChartCard;
 //# sourceMappingURL=index52.cjs.map

package/dist/index52.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index52.cjs","sources":["../src/primitives/StatCard/StatCard.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { StatCardProps } from './StatCard.types';\nimport styles from './StatCard.module.css';\n\nexport const StatCard = forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      label,\n      value,\n      sub,\n      variant = 'default',\n      clickable = false,\n      active = false,\n      className,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (clickable && (event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n        event.currentTarget.click();\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.root,\n          clickable && styles.isClick,\n          active && styles.isActive,\n          className,\n        )}\n        role={clickable ? 'button' : undefined}\n        tabIndex={clickable ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        <div className={styles.label}>{label}</div>\n        <div className={clsx(styles.value, variant !== 'default' && styles[variant])}>{value}</div>\n        {sub != null && <div className={styles.sub}>{sub}</div>}\n      </div>\n    );\n  },\n);\n\nStatCard.displayName = 'StatCard';\n"],"names":["forwardRef","jsxs","clsx","styles","jsx"],"mappings":";;;;;;AAKO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,gBAAgB,CAAC,UAA+C;AACpE,6CAAY;AACZ,UAAI,cAAc,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;AAC7D,cAAM,eAAA;AACN,cAAM,cAAc,MAAA;AAAA,MACtB;AAAA,IACF;AAEA,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA;AAAAA,UACTC,gBAAAA,QAAO;AAAA,UACP,aAAaA,gBAAAA,QAAO;AAAA,UACpB,UAAUA,gBAAAA,QAAO;AAAA,UACjB;AAAA,QAAA;AAAA,QAEF,MAAM,YAAY,WAAW;AAAA,QAC7B,UAAU,YAAY,IAAI;AAAA,QAC1B,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,gBAAAA,QAAO,OAAQ,UAAA,OAAM;AAAA,UACrCC,2BAAAA,IAAC,OAAA,EAAI,WAAWF,KAAAA,KAAKC,gBAAAA,QAAO,OAAO,YAAY,aAAaA,gBAAAA,QAAO,OAAO,CAAC,GAAI,UAAA,MAAA,CAAM;AAAA,UACpF,OAAO,QAAQC,2BAAAA,IAAC,SAAI,WAAWD,wBAAO,KAAM,UAAA,IAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AACF;AAEA,SAAS,cAAc;;"}
+{"version":3,"file":"index52.cjs","sources":["../src/charts/StackedBarChartCard/StackedBarChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { EChartsInstance } from '../../types/chart.types';\nimport { MAX_CATEGORIES, MAX_SUBCATEGORIES } from '../../constants';\nimport type { StackedBarChartCardProps, StackedBarChartType } from './StackedBarChartCard.types';\nimport { aggregateData, buildBarOption, buildPieOption, buildSunburstOption } from './buildChartOptions';\nimport styles from './StackedBarChartCard.module.css';\n\n/** Label map for chart type toggle buttons. */\nconst CHART_TYPE_LABELS: Record<StackedBarChartType, string> = {\n  bar: 'Bar',\n  pie: 'Pie',\n  sunburst: 'Sunburst',\n};\n\n/** All available chart types for the toggle group. */\nconst CHART_TYPES: StackedBarChartType[] = ['bar', 'pie', 'sunburst'];\n\nexport const StackedBarChartCard = ({\n  title,\n  data,\n  subtitle,\n  chartType = 'bar',\n  isLoading = false,\n  error,\n  onRetry,\n  onChartReady,\n  onSelectCategory,\n  // onAnalyzeRootCause — reserved for context menu integration\n  maxCategories = MAX_CATEGORIES,\n  maxSubcategories = MAX_SUBCATEGORIES,\n  showOthersBucket = true,\n  invertAxis = false,\n  hideLegend = false,\n  enableScroll = false,\n  toolbar,\n  actions,\n  className,\n}: StackedBarChartCardProps) => {\n  const { categories, series } = useMemo(\n    () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),\n    [data, maxCategories, maxSubcategories, showOthersBucket],\n  );\n\n  const option = useMemo(() => {\n    switch (chartType) {\n      case 'pie':\n        return buildPieOption(categories, series, hideLegend);\n      case 'sunburst':\n        return buildSunburstOption(categories, series);\n      default:\n        return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);\n    }\n  }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);\n\n  const handleChartReady = useCallback(\n    (instance: EChartsInstance) => {\n      onChartReady?.(instance);\n    },\n    [onChartReady],\n  );\n\n  const handleChartClick = useCallback(\n    (params: { name?: string; seriesName?: string }) => {\n      if (!onSelectCategory || !params.name) return;\n      onSelectCategory({\n        category: params.name,\n        subCategory: params.seriesName ?? null,\n      });\n    },\n    [onSelectCategory],\n  );\n\n  const hasData = data.length > 0;\n\n  return (\n    <div className={clsx(styles.root, className)}>\n      <div className={styles.header}>\n        <div className={styles.headerLeft}>\n          <h3 className={styles.title}>{title}</h3>\n          {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n        </div>\n        <div className={styles.headerRight}>\n          {toolbar && <div className={styles.toolbar}>{toolbar}</div>}\n          <div className={styles.chartTypeToggle}>\n            {CHART_TYPES.map((type) => (\n              <button\n                key={type}\n                type=\"button\"\n                className={chartType === type ? styles.active : undefined}\n                aria-pressed={chartType === type}\n                disabled\n              >\n                {CHART_TYPE_LABELS[type]}\n              </button>\n            ))}\n          </div>\n          {actions}\n        </div>\n      </div>\n\n      {isLoading && <div className={styles.loading}>Loading chart data...</div>}\n\n      {!isLoading && error && (\n        <div className={styles.error}>\n          <span>{error}</span>\n          {onRetry && (\n            <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n              Retry\n            </button>\n          )}\n        </div>\n      )}\n\n      {!isLoading && !error && !hasData && (\n        <div className={styles.empty}>No data available</div>\n      )}\n\n      {!isLoading && !error && hasData && (\n        <div className={styles.chartContainer}>\n          <ReactECharts\n            option={option}\n            style={{ height: '100%', width: '100%' }}\n            onChartReady={handleChartReady}\n            onEvents={{ click: handleChartClick }}\n            notMerge\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["MAX_CATEGORIES","MAX_SUBCATEGORIES","useMemo","aggregateData","buildPieOption","buildSunburstOption","buildBarOption","useCallback","clsx","styles","jsxs","jsx"],"mappings":"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"}