@ktnpm_devops/react-component 0.2.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (285) hide show
  1. package/dist/index.cjs +38 -33
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +5 -0
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/index.js +38 -33
  6. package/dist/index.js.map +1 -1
  7. package/dist/index10.cjs +15 -4
  8. package/dist/index10.cjs.map +1 -1
  9. package/dist/index10.js +15 -4
  10. package/dist/index10.js.map +1 -1
  11. package/dist/index11.cjs +4 -16
  12. package/dist/index11.cjs.map +1 -1
  13. package/dist/index11.js +4 -16
  14. package/dist/index11.js.map +1 -1
  15. package/dist/index12.cjs +16 -10
  16. package/dist/index12.cjs.map +1 -1
  17. package/dist/index12.js +16 -10
  18. package/dist/index12.js.map +1 -1
  19. package/dist/index13.cjs +10 -100
  20. package/dist/index13.cjs.map +1 -1
  21. package/dist/index13.js +11 -101
  22. package/dist/index13.js.map +1 -1
  23. package/dist/index14.cjs +100 -20
  24. package/dist/index14.cjs.map +1 -1
  25. package/dist/index14.js +101 -21
  26. package/dist/index14.js.map +1 -1
  27. package/dist/index15.cjs +20 -90
  28. package/dist/index15.cjs.map +1 -1
  29. package/dist/index15.js +21 -91
  30. package/dist/index15.js.map +1 -1
  31. package/dist/index16.cjs +40 -155
  32. package/dist/index16.cjs.map +1 -1
  33. package/dist/index16.js +42 -157
  34. package/dist/index16.js.map +1 -1
  35. package/dist/index17.cjs +86 -132
  36. package/dist/index17.cjs.map +1 -1
  37. package/dist/index17.js +88 -134
  38. package/dist/index17.js.map +1 -1
  39. package/dist/index18.cjs +150 -113
  40. package/dist/index18.cjs.map +1 -1
  41. package/dist/index18.js +151 -114
  42. package/dist/index18.js.map +1 -1
  43. package/dist/index19.cjs +136 -17
  44. package/dist/index19.cjs.map +1 -1
  45. package/dist/index19.js +136 -17
  46. package/dist/index19.js.map +1 -1
  47. package/dist/index20.cjs +120 -7
  48. package/dist/index20.cjs.map +1 -1
  49. package/dist/index20.js +122 -9
  50. package/dist/index20.js.map +1 -1
  51. package/dist/index21.cjs +16 -130
  52. package/dist/index21.cjs.map +1 -1
  53. package/dist/index21.js +16 -130
  54. package/dist/index21.js.map +1 -1
  55. package/dist/index22.cjs +8 -38
  56. package/dist/index22.cjs.map +1 -1
  57. package/dist/index22.js +9 -39
  58. package/dist/index22.js.map +1 -1
  59. package/dist/index23.cjs +118 -211
  60. package/dist/index23.cjs.map +1 -1
  61. package/dist/index23.js +119 -212
  62. package/dist/index23.js.map +1 -1
  63. package/dist/index24.cjs +38 -34
  64. package/dist/index24.cjs.map +1 -1
  65. package/dist/index24.js +39 -35
  66. package/dist/index24.js.map +1 -1
  67. package/dist/index25.cjs +211 -65
  68. package/dist/index25.cjs.map +1 -1
  69. package/dist/index25.js +211 -65
  70. package/dist/index25.js.map +1 -1
  71. package/dist/index26.cjs +29 -148
  72. package/dist/index26.cjs.map +1 -1
  73. package/dist/index26.js +31 -150
  74. package/dist/index26.js.map +1 -1
  75. package/dist/index27.cjs +77 -7
  76. package/dist/index27.cjs.map +1 -1
  77. package/dist/index27.js +79 -9
  78. package/dist/index27.js.map +1 -1
  79. package/dist/index28.cjs +59 -17
  80. package/dist/index28.cjs.map +1 -1
  81. package/dist/index28.js +60 -18
  82. package/dist/index28.js.map +1 -1
  83. package/dist/index29.cjs +146 -70
  84. package/dist/index29.cjs.map +1 -1
  85. package/dist/index29.js +148 -72
  86. package/dist/index29.js.map +1 -1
  87. package/dist/index3.cjs +76 -16
  88. package/dist/index3.cjs.map +1 -1
  89. package/dist/index3.js +76 -16
  90. package/dist/index3.js.map +1 -1
  91. package/dist/index30.cjs +7 -142
  92. package/dist/index30.cjs.map +1 -1
  93. package/dist/index30.js +9 -144
  94. package/dist/index30.js.map +1 -1
  95. package/dist/index31.cjs +15 -103
  96. package/dist/index31.cjs.map +1 -1
  97. package/dist/index31.js +14 -102
  98. package/dist/index31.js.map +1 -1
  99. package/dist/index32.cjs +77 -6
  100. package/dist/index32.cjs.map +1 -1
  101. package/dist/index32.js +78 -7
  102. package/dist/index32.js.map +1 -1
  103. package/dist/index33.cjs +133 -206
  104. package/dist/index33.cjs.map +1 -1
  105. package/dist/index33.js +134 -207
  106. package/dist/index33.js.map +1 -1
  107. package/dist/index34.cjs +104 -7
  108. package/dist/index34.cjs.map +1 -1
  109. package/dist/index34.js +106 -9
  110. package/dist/index34.js.map +1 -1
  111. package/dist/index35.cjs +8 -16
  112. package/dist/index35.cjs.map +1 -1
  113. package/dist/index35.js +7 -15
  114. package/dist/index35.js.map +1 -1
  115. package/dist/index36.cjs +218 -7
  116. package/dist/index36.cjs.map +1 -1
  117. package/dist/index36.js +217 -6
  118. package/dist/index36.js.map +1 -1
  119. package/dist/index37.cjs +10 -7
  120. package/dist/index37.cjs.map +1 -1
  121. package/dist/index37.js +9 -6
  122. package/dist/index37.js.map +1 -1
  123. package/dist/index38.cjs +15 -6
  124. package/dist/index38.cjs.map +1 -1
  125. package/dist/index38.js +15 -6
  126. package/dist/index38.js.map +1 -1
  127. package/dist/index39.cjs +9 -15
  128. package/dist/index39.cjs.map +1 -1
  129. package/dist/index39.js +10 -16
  130. package/dist/index39.js.map +1 -1
  131. package/dist/index4.cjs +12 -8
  132. package/dist/index4.cjs.map +1 -1
  133. package/dist/index4.js +12 -8
  134. package/dist/index4.js.map +1 -1
  135. package/dist/index40.cjs +24 -67
  136. package/dist/index40.cjs.map +1 -1
  137. package/dist/index40.js +23 -66
  138. package/dist/index40.js.map +1 -1
  139. package/dist/index41.cjs +10 -37
  140. package/dist/index41.cjs.map +1 -1
  141. package/dist/index41.js +10 -37
  142. package/dist/index41.js.map +1 -1
  143. package/dist/index42.cjs +2 -17
  144. package/dist/index42.cjs.map +1 -1
  145. package/dist/index42.js +3 -18
  146. package/dist/index42.js.map +1 -1
  147. package/dist/index43.cjs +2 -11
  148. package/dist/index43.cjs.map +1 -1
  149. package/dist/index43.js +2 -11
  150. package/dist/index43.js.map +1 -1
  151. package/dist/index44.cjs +22 -16
  152. package/dist/index44.cjs.map +1 -1
  153. package/dist/index44.js +22 -16
  154. package/dist/index44.js.map +1 -1
  155. package/dist/index45.cjs +16 -134
  156. package/dist/index45.cjs.map +1 -1
  157. package/dist/index45.js +15 -133
  158. package/dist/index45.js.map +1 -1
  159. package/dist/index46.cjs +15 -39
  160. package/dist/index46.cjs.map +1 -1
  161. package/dist/index46.js +16 -40
  162. package/dist/index46.js.map +1 -1
  163. package/dist/index47.cjs +16 -28
  164. package/dist/index47.cjs.map +1 -1
  165. package/dist/index47.js +16 -28
  166. package/dist/index47.js.map +1 -1
  167. package/dist/index48.cjs +67 -57
  168. package/dist/index48.cjs.map +1 -1
  169. package/dist/index48.js +66 -56
  170. package/dist/index48.js.map +1 -1
  171. package/dist/index49.cjs +77 -26
  172. package/dist/index49.cjs.map +1 -1
  173. package/dist/index49.js +77 -26
  174. package/dist/index49.js.map +1 -1
  175. package/dist/index5.cjs +9 -16
  176. package/dist/index5.cjs.map +1 -1
  177. package/dist/index5.js +10 -17
  178. package/dist/index5.js.map +1 -1
  179. package/dist/index51.cjs +30 -21
  180. package/dist/index51.cjs.map +1 -1
  181. package/dist/index51.js +30 -21
  182. package/dist/index51.js.map +1 -1
  183. package/dist/index52.cjs +13 -13
  184. package/dist/index52.js +14 -14
  185. package/dist/index54.cjs +1 -4
  186. package/dist/index54.cjs.map +1 -1
  187. package/dist/index54.js +1 -4
  188. package/dist/index54.js.map +1 -1
  189. package/dist/index55.cjs +5 -14
  190. package/dist/index55.cjs.map +1 -1
  191. package/dist/index55.js +5 -14
  192. package/dist/index55.js.map +1 -1
  193. package/dist/index56.cjs +37 -10
  194. package/dist/index56.cjs.map +1 -1
  195. package/dist/index56.js +37 -10
  196. package/dist/index56.js.map +1 -1
  197. package/dist/index57.cjs +2 -11
  198. package/dist/index57.cjs.map +1 -1
  199. package/dist/index57.js +2 -11
  200. package/dist/index57.js.map +1 -1
  201. package/dist/index58.cjs +13 -19
  202. package/dist/index58.cjs.map +1 -1
  203. package/dist/index58.js +13 -19
  204. package/dist/index58.js.map +1 -1
  205. package/dist/index59.cjs +27 -54
  206. package/dist/index59.cjs.map +1 -1
  207. package/dist/index59.js +28 -55
  208. package/dist/index59.js.map +1 -1
  209. package/dist/index6.cjs +19 -65
  210. package/dist/index6.cjs.map +1 -1
  211. package/dist/index6.js +19 -65
  212. package/dist/index6.js.map +1 -1
  213. package/dist/index60.cjs +64 -22
  214. package/dist/index60.cjs.map +1 -1
  215. package/dist/index60.js +64 -22
  216. package/dist/index60.js.map +1 -1
  217. package/dist/index61.cjs +15 -48
  218. package/dist/index61.cjs.map +1 -1
  219. package/dist/index61.js +16 -49
  220. package/dist/index61.js.map +1 -1
  221. package/dist/index62.cjs +16 -13
  222. package/dist/index62.cjs.map +1 -1
  223. package/dist/index62.js +17 -14
  224. package/dist/index62.js.map +1 -1
  225. package/dist/index63.cjs +27 -48
  226. package/dist/index63.cjs.map +1 -1
  227. package/dist/index63.js +27 -48
  228. package/dist/index63.js.map +1 -1
  229. package/dist/index64.cjs +13 -37
  230. package/dist/index64.cjs.map +1 -1
  231. package/dist/index64.js +14 -38
  232. package/dist/index64.js.map +1 -1
  233. package/dist/index65.cjs +45 -0
  234. package/dist/index65.cjs.map +1 -0
  235. package/dist/index65.js +45 -0
  236. package/dist/index65.js.map +1 -0
  237. package/dist/index66.cjs +136 -0
  238. package/dist/index66.cjs.map +1 -0
  239. package/dist/index66.js +136 -0
  240. package/dist/index66.js.map +1 -0
  241. package/dist/index67.cjs +48 -0
  242. package/dist/index67.cjs.map +1 -0
  243. package/dist/index67.js +48 -0
  244. package/dist/index67.js.map +1 -0
  245. package/dist/index68.cjs +60 -0
  246. package/dist/index68.cjs.map +1 -0
  247. package/dist/index68.js +60 -0
  248. package/dist/index68.js.map +1 -0
  249. package/dist/index69.cjs +57 -0
  250. package/dist/index69.cjs.map +1 -0
  251. package/dist/index69.js +57 -0
  252. package/dist/index69.js.map +1 -0
  253. package/dist/index7.cjs +58 -75
  254. package/dist/index7.cjs.map +1 -1
  255. package/dist/index7.js +58 -75
  256. package/dist/index7.js.map +1 -1
  257. package/dist/index8.cjs +82 -15
  258. package/dist/index8.cjs.map +1 -1
  259. package/dist/index8.js +82 -15
  260. package/dist/index8.js.map +1 -1
  261. package/dist/index9.cjs +14 -15
  262. package/dist/index9.cjs.map +1 -1
  263. package/dist/index9.js +15 -16
  264. package/dist/index9.js.map +1 -1
  265. package/dist/primitives/Col/Col.d.ts +4 -0
  266. package/dist/primitives/Col/Col.d.ts.map +1 -0
  267. package/dist/primitives/Col/Col.types.d.ts +13 -0
  268. package/dist/primitives/Col/Col.types.d.ts.map +1 -0
  269. package/dist/primitives/Col/index.d.ts +3 -0
  270. package/dist/primitives/Col/index.d.ts.map +1 -0
  271. package/dist/primitives/Row/Row.d.ts +4 -0
  272. package/dist/primitives/Row/Row.d.ts.map +1 -0
  273. package/dist/primitives/Row/Row.types.d.ts +16 -0
  274. package/dist/primitives/Row/Row.types.d.ts.map +1 -0
  275. package/dist/primitives/Row/index.d.ts +3 -0
  276. package/dist/primitives/Row/index.d.ts.map +1 -0
  277. package/dist/style.css +312 -0
  278. package/dist/tokens/semantic-tokens.css +21 -0
  279. package/dist/tokens/tokens.d.ts +35 -0
  280. package/dist/tokens/tokens.d.ts.map +1 -1
  281. package/package.json +3 -2
  282. package/dist/index2.cjs +0 -44
  283. package/dist/index2.cjs.map +0 -1
  284. package/dist/index2.js +0 -44
  285. package/dist/index2.js.map +0 -1
package/dist/index34.js CHANGED
@@ -1,12 +1,109 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
3
- import { clsx } from "./index35.js";
4
- import styles from "./index36.js";
5
- const Textarea = forwardRef(
6
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("textarea", { ref, className: clsx(styles.root, className), ...props })
7
- );
8
- Textarea.displayName = "Textarea";
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useMemo, useCallback } from "react";
3
+ import ReactECharts from "echarts-for-react";
4
+ import { clsx } from "./index38.js";
5
+ import { MAX_CATEGORIES, MAX_SUBCATEGORIES } from "./index48.js";
6
+ import { aggregateData, buildBarOption, buildSunburstOption, buildPieOption } from "./index66.js";
7
+ import styles from "./index67.js";
8
+ const CHART_TYPE_LABELS = {
9
+ bar: "Bar",
10
+ pie: "Pie",
11
+ sunburst: "Sunburst"
12
+ };
13
+ const CHART_TYPES = ["bar", "pie", "sunburst"];
14
+ const StackedBarChartCard = ({
15
+ title,
16
+ data,
17
+ subtitle,
18
+ chartType = "bar",
19
+ isLoading = false,
20
+ error,
21
+ onRetry,
22
+ onChartReady,
23
+ onSelectCategory,
24
+ // onAnalyzeRootCause — reserved for context menu integration
25
+ maxCategories = MAX_CATEGORIES,
26
+ maxSubcategories = MAX_SUBCATEGORIES,
27
+ showOthersBucket = true,
28
+ invertAxis = false,
29
+ hideLegend = false,
30
+ enableScroll = false,
31
+ toolbar,
32
+ actions,
33
+ className
34
+ }) => {
35
+ const { categories, series } = useMemo(
36
+ () => aggregateData(data, maxCategories, maxSubcategories, showOthersBucket),
37
+ [data, maxCategories, maxSubcategories, showOthersBucket]
38
+ );
39
+ const option = useMemo(() => {
40
+ switch (chartType) {
41
+ case "pie":
42
+ return buildPieOption(categories, series, hideLegend);
43
+ case "sunburst":
44
+ return buildSunburstOption(categories, series);
45
+ default:
46
+ return buildBarOption(categories, series, invertAxis, hideLegend, enableScroll);
47
+ }
48
+ }, [chartType, categories, series, invertAxis, hideLegend, enableScroll]);
49
+ const handleChartReady = useCallback(
50
+ (instance) => {
51
+ onChartReady == null ? void 0 : onChartReady(instance);
52
+ },
53
+ [onChartReady]
54
+ );
55
+ const handleChartClick = useCallback(
56
+ (params) => {
57
+ if (!onSelectCategory || !params.name) return;
58
+ onSelectCategory({
59
+ category: params.name,
60
+ subCategory: params.seriesName ?? null
61
+ });
62
+ },
63
+ [onSelectCategory]
64
+ );
65
+ const hasData = data.length > 0;
66
+ return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
67
+ /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
68
+ /* @__PURE__ */ jsxs("div", { className: styles.headerLeft, children: [
69
+ /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
70
+ subtitle && /* @__PURE__ */ jsx("div", { className: styles.subtitle, children: subtitle })
71
+ ] }),
72
+ /* @__PURE__ */ jsxs("div", { className: styles.headerRight, children: [
73
+ toolbar && /* @__PURE__ */ jsx("div", { className: styles.toolbar, children: toolbar }),
74
+ /* @__PURE__ */ jsx("div", { className: styles.chartTypeToggle, children: CHART_TYPES.map((type) => /* @__PURE__ */ jsx(
75
+ "button",
76
+ {
77
+ type: "button",
78
+ className: chartType === type ? styles.active : void 0,
79
+ "aria-pressed": chartType === type,
80
+ disabled: true,
81
+ children: CHART_TYPE_LABELS[type]
82
+ },
83
+ type
84
+ )) }),
85
+ actions
86
+ ] })
87
+ ] }),
88
+ isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart data..." }),
89
+ !isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
90
+ /* @__PURE__ */ jsx("span", { children: error }),
91
+ onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
92
+ ] }),
93
+ !isLoading && !error && !hasData && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No data available" }),
94
+ !isLoading && !error && hasData && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
95
+ ReactECharts,
96
+ {
97
+ option,
98
+ style: { height: "100%", width: "100%" },
99
+ onChartReady: handleChartReady,
100
+ onEvents: { click: handleChartClick },
101
+ notMerge: true
102
+ }
103
+ ) })
104
+ ] });
105
+ };
9
106
  export {
10
- Textarea
107
+ StackedBarChartCard
11
108
  };
12
109
  //# sourceMappingURL=index34.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index34.js","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className, ...props }, ref) => (\n <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":[],"mappings":";;;;AAMO,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB,oBAAC,YAAA,EAAS,KAAU,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;"}
1
+ {"version":3,"file":"index34.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;"}
package/dist/index35.cjs CHANGED
@@ -1,18 +1,10 @@
1
1
  "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- function r(e) {
4
- var t, f, n = "";
5
- if ("string" == typeof e || "number" == typeof e) n += e;
6
- else if ("object" == typeof e) if (Array.isArray(e)) {
7
- var o = e.length;
8
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
9
- } else for (f in e) e[f] && (n && (n += " "), n += f);
10
- return n;
11
- }
12
- function clsx() {
13
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
14
- return n;
15
- }
16
- exports.clsx = clsx;
17
- exports.default = clsx;
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const clsx = require("./index38.cjs");
5
+ const Table_module = require("./index55.cjs");
6
+ const TableContainer = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Table_module.default.container, className), ...props });
7
+ const Table = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("table", { className: clsx.clsx(Table_module.default.root, className), ...props });
8
+ exports.Table = Table;
9
+ exports.TableContainer = TableContainer;
18
10
  //# sourceMappingURL=index35.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index35.cjs","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":";;AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index35.cjs","sources":["../src/primitives/Table/Table.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Table.module.css';\n\nexport interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const TableContainer = ({ className, ...props }: TableContainerProps) => (\n <div className={clsx(styles.container, className)} {...props} />\n);\n\nexport const Table = ({ className, ...props }: TableProps) => (\n <table className={clsx(styles.root, className)} {...props} />\n);\n"],"names":["jsx","clsx","styles"],"mappings":";;;;;AAMO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAC7CA,2BAAAA,IAAC,OAAA,EAAI,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,WAAW,SAAS,GAAI,GAAG,MAAA,CAAO;AAGzD,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YACpCF,2BAAAA,IAAC,SAAA,EAAM,WAAWC,KAAAA,KAAKC,aAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;;;"}
package/dist/index35.js CHANGED
@@ -1,18 +1,10 @@
1
- function r(e) {
2
- var t, f, n = "";
3
- if ("string" == typeof e || "number" == typeof e) n += e;
4
- else if ("object" == typeof e) if (Array.isArray(e)) {
5
- var o = e.length;
6
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
7
- } else for (f in e) e[f] && (n && (n += " "), n += f);
8
- return n;
9
- }
10
- function clsx() {
11
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
12
- return n;
13
- }
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { clsx } from "./index38.js";
3
+ import styles from "./index55.js";
4
+ const TableContainer = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: clsx(styles.container, className), ...props });
5
+ const Table = ({ className, ...props }) => /* @__PURE__ */ jsx("table", { className: clsx(styles.root, className), ...props });
14
6
  export {
15
- clsx,
16
- clsx as default
7
+ Table,
8
+ TableContainer
17
9
  };
18
10
  //# sourceMappingURL=index35.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index35.js","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":"AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index35.js","sources":["../src/primitives/Table/Table.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport styles from './Table.module.css';\n\nexport interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {}\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\nexport const TableContainer = ({ className, ...props }: TableContainerProps) => (\n <div className={clsx(styles.container, className)} {...props} />\n);\n\nexport const Table = ({ className, ...props }: TableProps) => (\n <table className={clsx(styles.root, className)} {...props} />\n);\n"],"names":[],"mappings":";;;AAMO,MAAM,iBAAiB,CAAC,EAAE,WAAW,GAAG,YAC7C,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,WAAW,SAAS,GAAI,GAAG,MAAA,CAAO;AAGzD,MAAM,QAAQ,CAAC,EAAE,WAAW,GAAG,YACpC,oBAAC,SAAA,EAAM,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;"}
package/dist/index36.cjs CHANGED
@@ -1,9 +1,220 @@
1
1
  "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const root = "krc-root-FVKOX";
4
- const styles = {
5
- root
6
- };
7
- exports.default = styles;
8
- exports.root = root;
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const react = require("react");
5
+ const clsx = require("./index38.cjs");
6
+ const ReactECharts = require("echarts-for-react");
7
+ const constants = require("./index48.cjs");
8
+ const TemporalTrendChartCard_module = require("./index65.cjs");
9
+ function groupByCategory(data, limit) {
10
+ const grouped = /* @__PURE__ */ new Map();
11
+ for (const point of data) {
12
+ const key = point.category ?? "Unknown";
13
+ if (!grouped.has(key)) {
14
+ grouped.set(key, []);
15
+ }
16
+ grouped.get(key).push({
17
+ ts: point.ts ?? "",
18
+ value: point.value
19
+ });
20
+ }
21
+ const entries = [...grouped.entries()].sort(
22
+ (a, b) => b[1].reduce((sum, p) => sum + p.value, 0) - a[1].reduce((sum, p) => sum + p.value, 0)
23
+ );
24
+ if (entries.length <= limit) {
25
+ return entries;
26
+ }
27
+ const top = entries.slice(0, limit - 1);
28
+ const rest = entries.slice(limit - 1);
29
+ const otherMap = /* @__PURE__ */ new Map();
30
+ for (const [, points] of rest) {
31
+ for (const p of points) {
32
+ otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);
33
+ }
34
+ }
35
+ const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({
36
+ ts,
37
+ value
38
+ }));
39
+ return [...top, ["Other", otherPoints]];
40
+ }
41
+ function buildMarkAreas(annotations) {
42
+ return annotations.filter((a) => a.end).map((a) => [
43
+ {
44
+ name: a.label,
45
+ xAxis: a.start,
46
+ itemStyle: { color: a.color ?? "rgba(255,107,90,0.1)" }
47
+ },
48
+ { xAxis: a.end }
49
+ ]);
50
+ }
51
+ function buildMarkLines(annotations) {
52
+ return annotations.filter((a) => !a.end).map((a) => ({
53
+ name: a.label,
54
+ xAxis: a.start,
55
+ lineStyle: { color: a.color ?? constants.CHART_COLORS[0], type: "dashed" },
56
+ label: { formatter: a.label, position: "end" }
57
+ }));
58
+ }
59
+ function TemporalTrendChartCard({
60
+ title,
61
+ data,
62
+ isLoading = false,
63
+ error,
64
+ onRetry,
65
+ onChartReady,
66
+ actions,
67
+ className,
68
+ groupBy,
69
+ groupOptions,
70
+ onGroupChange,
71
+ granularity,
72
+ granularityOptions,
73
+ onGranularityChange,
74
+ annotations = [],
75
+ showLegend = true,
76
+ onToggleLegend,
77
+ onSeriesSelect,
78
+ onBucketSelect,
79
+ maxSeries = constants.MAX_SERIES
80
+ }) {
81
+ const seriesGroups = react.useMemo(
82
+ () => groupByCategory(data, maxSeries),
83
+ [data, maxSeries]
84
+ );
85
+ const option = react.useMemo(() => {
86
+ const markAreas = buildMarkAreas(annotations);
87
+ const markLines = buildMarkLines(annotations);
88
+ const series = seriesGroups.map(([name, points], idx) => ({
89
+ name,
90
+ type: "line",
91
+ stack: "total",
92
+ areaStyle: {},
93
+ emphasis: { focus: "series" },
94
+ color: constants.CHART_COLORS[idx % constants.CHART_COLORS.length],
95
+ data: points.sort((a, b) => a.ts < b.ts ? -1 : 1).map((p) => [p.ts, p.value]),
96
+ ...idx === 0 && (markAreas.length > 0 || markLines.length > 0) ? {
97
+ markArea: markAreas.length > 0 ? { silent: true, data: markAreas } : void 0,
98
+ markLine: markLines.length > 0 ? { silent: true, symbol: "none", data: markLines } : void 0
99
+ } : {}
100
+ }));
101
+ return {
102
+ tooltip: {
103
+ trigger: "axis",
104
+ axisPointer: { type: "cross" }
105
+ },
106
+ legend: {
107
+ show: showLegend,
108
+ type: "scroll",
109
+ bottom: 0
110
+ },
111
+ grid: {
112
+ left: "3%",
113
+ right: "4%",
114
+ bottom: showLegend ? "15%" : "3%",
115
+ containLabel: true
116
+ },
117
+ xAxis: { type: "time" },
118
+ yAxis: { type: "value" },
119
+ series
120
+ };
121
+ }, [seriesGroups, annotations, showLegend]);
122
+ const handleChartReady = react.useCallback(
123
+ (instance) => {
124
+ onChartReady == null ? void 0 : onChartReady(instance);
125
+ },
126
+ [onChartReady]
127
+ );
128
+ const handleEvents = react.useMemo(() => {
129
+ const events = {};
130
+ if (onSeriesSelect) {
131
+ events["legendselectchanged"] = (params) => {
132
+ const p = params;
133
+ onSeriesSelect(p.name);
134
+ };
135
+ }
136
+ if (onBucketSelect) {
137
+ events["brushSelected"] = (params) => {
138
+ var _a, _b, _c;
139
+ const p = params;
140
+ const area = (_c = (_b = (_a = p.batch) == null ? void 0 : _a[0]) == null ? void 0 : _b.areas) == null ? void 0 : _c[0];
141
+ if (area) {
142
+ onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });
143
+ }
144
+ };
145
+ }
146
+ return events;
147
+ }, [onSeriesSelect, onBucketSelect]);
148
+ const hasToolbar = groupOptions || granularityOptions || onToggleLegend;
149
+ const hasData = data.length > 0;
150
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(TemporalTrendChartCard_module.default.root, className), children: [
151
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.header, children: [
152
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: TemporalTrendChartCard_module.default.title, children: title }),
153
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.headerRight, children: [
154
+ hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.toolbar, children: [
155
+ groupOptions && groupOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
156
+ "select",
157
+ {
158
+ className: TemporalTrendChartCard_module.default.select,
159
+ value: groupBy ?? "",
160
+ onChange: (e) => onGroupChange == null ? void 0 : onGroupChange(e.target.value),
161
+ "aria-label": "Group by",
162
+ children: groupOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
163
+ }
164
+ ),
165
+ granularityOptions && granularityOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
166
+ "select",
167
+ {
168
+ className: TemporalTrendChartCard_module.default.select,
169
+ value: granularity ?? "",
170
+ onChange: (e) => onGranularityChange == null ? void 0 : onGranularityChange(e.target.value || null),
171
+ "aria-label": "Granularity",
172
+ children: granularityOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
173
+ }
174
+ ),
175
+ onToggleLegend && /* @__PURE__ */ jsxRuntime.jsx(
176
+ "button",
177
+ {
178
+ type: "button",
179
+ className: clsx.clsx(
180
+ TemporalTrendChartCard_module.default.legendToggle,
181
+ showLegend && TemporalTrendChartCard_module.default.legendToggleActive
182
+ ),
183
+ onClick: onToggleLegend,
184
+ "aria-label": "Toggle legend",
185
+ children: "Legend"
186
+ }
187
+ )
188
+ ] }),
189
+ actions
190
+ ] })
191
+ ] }),
192
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.loading, children: "Loading chart data..." }),
193
+ !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: TemporalTrendChartCard_module.default.error, children: [
194
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
195
+ onRetry && /* @__PURE__ */ jsxRuntime.jsx(
196
+ "button",
197
+ {
198
+ type: "button",
199
+ className: TemporalTrendChartCard_module.default.retryButton,
200
+ onClick: onRetry,
201
+ children: "Retry"
202
+ }
203
+ )
204
+ ] }),
205
+ !isLoading && !error && !hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.empty, children: "No data available" }),
206
+ !isLoading && !error && hasData && /* @__PURE__ */ jsxRuntime.jsx("div", { className: TemporalTrendChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
207
+ ReactECharts,
208
+ {
209
+ option,
210
+ style: { height: "100%", minHeight: "18.75rem" },
211
+ onChartReady: handleChartReady,
212
+ onEvents: handleEvents,
213
+ notMerge: true
214
+ }
215
+ ) })
216
+ ] });
217
+ }
218
+ TemporalTrendChartCard.displayName = "TemporalTrendChartCard";
219
+ exports.TemporalTrendChartCard = TemporalTrendChartCard;
9
220
  //# sourceMappingURL=index36.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index36.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"index36.cjs","sources":["../src/charts/TemporalTrendChartCard/TemporalTrendChartCard.tsx"],"sourcesContent":["import { useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport ReactECharts from 'echarts-for-react';\nimport type { TemporalTrendChartCardProps } from './TemporalTrendChartCard.types';\nimport type { EChartsInstance, ChartAnnotation } from '../../types/chart.types';\nimport { MAX_SERIES, CHART_COLORS } from '../../constants';\nimport styles from './TemporalTrendChartCard.module.css';\n\n/** Group data points by category, returning sorted series keyed by category name. */\nfunction groupByCategory(\n data: TemporalTrendChartCardProps['data'],\n limit: number,\n) {\n const grouped = new Map<string, { ts: string; value: number }[]>();\n\n for (const point of data) {\n const key = point.category ?? 'Unknown';\n if (!grouped.has(key)) {\n grouped.set(key, []);\n }\n grouped.get(key)!.push({\n ts: point.ts ?? '',\n value: point.value,\n });\n }\n\n const entries = [...grouped.entries()].sort(\n (a, b) =>\n b[1].reduce((sum, p) => sum + p.value, 0) -\n a[1].reduce((sum, p) => sum + p.value, 0),\n );\n\n if (entries.length <= limit) {\n return entries;\n }\n\n const top = entries.slice(0, limit - 1);\n const rest = entries.slice(limit - 1);\n\n const otherMap = new Map<string, number>();\n for (const [, points] of rest) {\n for (const p of points) {\n otherMap.set(p.ts, (otherMap.get(p.ts) ?? 0) + p.value);\n }\n }\n\n const otherPoints = [...otherMap.entries()].map(([ts, value]) => ({\n ts,\n value,\n }));\n\n return [...top, ['Other', otherPoints] as const] as Array<\n [string, { ts: string; value: number }[]]\n >;\n}\n\n/** Build markArea items from range annotations. */\nfunction buildMarkAreas(annotations: ChartAnnotation[]) {\n return annotations\n .filter((a) => a.end)\n .map((a) => [\n {\n name: a.label,\n xAxis: a.start,\n itemStyle: { color: a.color ?? 'rgba(255,107,90,0.1)' },\n },\n { xAxis: a.end },\n ]);\n}\n\n/** Build markLine items from point annotations. */\nfunction buildMarkLines(annotations: ChartAnnotation[]) {\n return annotations\n .filter((a) => !a.end)\n .map((a) => ({\n name: a.label,\n xAxis: a.start,\n lineStyle: { color: a.color ?? CHART_COLORS[0], type: 'dashed' as const },\n label: { formatter: a.label, position: 'end' as const },\n }));\n}\n\nexport function TemporalTrendChartCard({\n title,\n data,\n isLoading = false,\n error,\n onRetry,\n onChartReady,\n actions,\n className,\n groupBy,\n groupOptions,\n onGroupChange,\n granularity,\n granularityOptions,\n onGranularityChange,\n annotations = [],\n showLegend = true,\n onToggleLegend,\n onSeriesSelect,\n onBucketSelect,\n maxSeries = MAX_SERIES,\n}: TemporalTrendChartCardProps) {\n const seriesGroups = useMemo(\n () => groupByCategory(data, maxSeries),\n [data, maxSeries],\n );\n\n const option = useMemo(() => {\n const markAreas = buildMarkAreas(annotations);\n const markLines = buildMarkLines(annotations);\n\n const series = seriesGroups.map(([name, points], idx) => ({\n name,\n type: 'line' as const,\n stack: 'total',\n areaStyle: {},\n emphasis: { focus: 'series' as const },\n color: CHART_COLORS[idx % CHART_COLORS.length],\n data: points\n .sort((a, b) => (a.ts < b.ts ? -1 : 1))\n .map((p) => [p.ts, p.value]),\n ...(idx === 0 && (markAreas.length > 0 || markLines.length > 0)\n ? {\n markArea:\n markAreas.length > 0 ? { silent: true, data: markAreas } : undefined,\n markLine:\n markLines.length > 0\n ? { silent: true, symbol: 'none', data: markLines }\n : undefined,\n }\n : {}),\n }));\n\n return {\n tooltip: {\n trigger: 'axis' as const,\n axisPointer: { type: 'cross' as const },\n },\n legend: {\n show: showLegend,\n type: 'scroll' as const,\n bottom: 0,\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: showLegend ? '15%' : '3%',\n containLabel: true,\n },\n xAxis: { type: 'time' as const },\n yAxis: { type: 'value' as const },\n series,\n };\n }, [seriesGroups, annotations, showLegend]);\n\n const handleChartReady = useCallback(\n (instance: EChartsInstance) => {\n onChartReady?.(instance);\n },\n [onChartReady],\n );\n\n const handleEvents = useMemo(() => {\n const events: Record<string, (...args: unknown[]) => void> = {};\n\n if (onSeriesSelect) {\n events['legendselectchanged'] = (params: unknown) => {\n const p = params as { name: string };\n onSeriesSelect(p.name);\n };\n }\n\n if (onBucketSelect) {\n events['brushSelected'] = (params: unknown) => {\n const p = params as {\n batch: { areas: { coordRange: [string, string] }[] }[];\n };\n const area = p.batch?.[0]?.areas?.[0];\n if (area) {\n onBucketSelect({ start: area.coordRange[0], end: area.coordRange[1] });\n }\n };\n }\n\n return events;\n }, [onSeriesSelect, onBucketSelect]);\n\n const hasToolbar = groupOptions || granularityOptions || onToggleLegend;\n const hasData = data.length > 0;\n\n return (\n <div className={clsx(styles.root, className)}>\n <div className={styles.header}>\n <span className={styles.title}>{title}</span>\n <div className={styles.headerRight}>\n {hasToolbar && (\n <div className={styles.toolbar}>\n {groupOptions && groupOptions.length > 0 && (\n <select\n className={styles.select}\n value={groupBy ?? ''}\n onChange={(e) => onGroupChange?.(e.target.value)}\n aria-label=\"Group by\"\n >\n {groupOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )}\n {granularityOptions && granularityOptions.length > 0 && (\n <select\n className={styles.select}\n value={granularity ?? ''}\n onChange={(e) =>\n onGranularityChange?.(e.target.value || null)\n }\n aria-label=\"Granularity\"\n >\n {granularityOptions.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n )}\n {onToggleLegend && (\n <button\n type=\"button\"\n className={clsx(\n styles.legendToggle,\n showLegend && styles.legendToggleActive,\n )}\n onClick={onToggleLegend}\n aria-label=\"Toggle legend\"\n >\n Legend\n </button>\n )}\n </div>\n )}\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\n type=\"button\"\n className={styles.retryButton}\n onClick={onRetry}\n >\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%', minHeight: '18.75rem' }}\n onChartReady={handleChartReady}\n onEvents={handleEvents}\n notMerge\n />\n </div>\n )}\n </div>\n );\n}\n\nTemporalTrendChartCard.displayName = 'TemporalTrendChartCard';\n"],"names":["CHART_COLORS","MAX_SERIES","useMemo","useCallback","clsx","styles","jsxs","jsx"],"mappings":"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"}