@ktnpm_devops/react-component 0.8.0 → 0.10.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 (332) hide show
  1. package/dist/charts/ScatterChartCard/ScatterChartCard.d.ts +7 -0
  2. package/dist/charts/ScatterChartCard/ScatterChartCard.d.ts.map +1 -0
  3. package/dist/charts/ScatterChartCard/ScatterChartCard.types.d.ts +31 -0
  4. package/dist/charts/ScatterChartCard/ScatterChartCard.types.d.ts.map +1 -0
  5. package/dist/charts/ScatterChartCard/buildScatterOption.d.ts +67 -0
  6. package/dist/charts/ScatterChartCard/buildScatterOption.d.ts.map +1 -0
  7. package/dist/charts/ScatterChartCard/foldPoints.d.ts +23 -0
  8. package/dist/charts/ScatterChartCard/foldPoints.d.ts.map +1 -0
  9. package/dist/charts/ScatterChartCard/index.d.ts +3 -0
  10. package/dist/charts/ScatterChartCard/index.d.ts.map +1 -0
  11. package/dist/constants.d.ts +13 -0
  12. package/dist/constants.d.ts.map +1 -1
  13. package/dist/index.cjs +20 -16
  14. package/dist/index.cjs.map +1 -1
  15. package/dist/index.d.ts +5 -1
  16. package/dist/index.d.ts.map +1 -1
  17. package/dist/index.js +20 -16
  18. package/dist/index.js.map +1 -1
  19. package/dist/index10.cjs +2 -2
  20. package/dist/index10.js +2 -2
  21. package/dist/index11.cjs +2 -2
  22. package/dist/index11.js +2 -2
  23. package/dist/index12.cjs +2 -2
  24. package/dist/index12.js +2 -2
  25. package/dist/index13.cjs +2 -2
  26. package/dist/index13.js +2 -2
  27. package/dist/index14.cjs +2 -2
  28. package/dist/index14.js +2 -2
  29. package/dist/index15.cjs +3 -3
  30. package/dist/index15.js +3 -3
  31. package/dist/index16.cjs +2 -2
  32. package/dist/index16.js +2 -2
  33. package/dist/index17.cjs +2 -2
  34. package/dist/index17.js +2 -2
  35. package/dist/index18.cjs +2 -2
  36. package/dist/index18.js +2 -2
  37. package/dist/index19.cjs +2 -2
  38. package/dist/index19.js +2 -2
  39. package/dist/index20.cjs +3 -3
  40. package/dist/index20.js +3 -3
  41. package/dist/index21.cjs +3 -3
  42. package/dist/index21.js +3 -3
  43. package/dist/index22.cjs +3 -3
  44. package/dist/index22.js +3 -3
  45. package/dist/index23.cjs +2 -2
  46. package/dist/index23.js +2 -2
  47. package/dist/index24.cjs +2 -2
  48. package/dist/index24.js +2 -2
  49. package/dist/index25.cjs +2 -2
  50. package/dist/index25.js +2 -2
  51. package/dist/index26.cjs +3 -3
  52. package/dist/index26.js +3 -3
  53. package/dist/index27.cjs +2 -2
  54. package/dist/index27.js +2 -2
  55. package/dist/index28.cjs +2 -2
  56. package/dist/index28.js +2 -2
  57. package/dist/index29.cjs +3 -3
  58. package/dist/index29.js +3 -3
  59. package/dist/index30.cjs +2 -2
  60. package/dist/index30.js +2 -2
  61. package/dist/index31.cjs +3 -3
  62. package/dist/index31.js +3 -3
  63. package/dist/index32.cjs +2 -2
  64. package/dist/index32.js +2 -2
  65. package/dist/index33.cjs +3 -3
  66. package/dist/index33.js +3 -3
  67. package/dist/index34.cjs +66 -76
  68. package/dist/index34.cjs.map +1 -1
  69. package/dist/index34.js +67 -77
  70. package/dist/index34.js.map +1 -1
  71. package/dist/index35.cjs +76 -57
  72. package/dist/index35.cjs.map +1 -1
  73. package/dist/index35.js +78 -59
  74. package/dist/index35.js.map +1 -1
  75. package/dist/index36.cjs +56 -150
  76. package/dist/index36.cjs.map +1 -1
  77. package/dist/index36.js +58 -152
  78. package/dist/index36.js.map +1 -1
  79. package/dist/index37.cjs +147 -66
  80. package/dist/index37.cjs.map +1 -1
  81. package/dist/index37.js +149 -68
  82. package/dist/index37.js.map +1 -1
  83. package/dist/index38.cjs +97 -7
  84. package/dist/index38.cjs.map +1 -1
  85. package/dist/index38.js +99 -9
  86. package/dist/index38.js.map +1 -1
  87. package/dist/index39.cjs +72 -17
  88. package/dist/index39.cjs.map +1 -1
  89. package/dist/index39.js +73 -18
  90. package/dist/index39.js.map +1 -1
  91. package/dist/index40.cjs +7 -76
  92. package/dist/index40.cjs.map +1 -1
  93. package/dist/index40.js +9 -78
  94. package/dist/index40.js.map +1 -1
  95. package/dist/index41.cjs +17 -143
  96. package/dist/index41.cjs.map +1 -1
  97. package/dist/index41.js +17 -143
  98. package/dist/index41.js.map +1 -1
  99. package/dist/index42.cjs +72 -59
  100. package/dist/index42.cjs.map +1 -1
  101. package/dist/index42.js +74 -61
  102. package/dist/index42.js.map +1 -1
  103. package/dist/index43.cjs +136 -98
  104. package/dist/index43.cjs.map +1 -1
  105. package/dist/index43.js +137 -99
  106. package/dist/index43.js.map +1 -1
  107. package/dist/index44.cjs +49 -32
  108. package/dist/index44.cjs.map +1 -1
  109. package/dist/index44.js +49 -32
  110. package/dist/index44.js.map +1 -1
  111. package/dist/index45.cjs +105 -6
  112. package/dist/index45.cjs.map +1 -1
  113. package/dist/index45.js +106 -7
  114. package/dist/index45.js.map +1 -1
  115. package/dist/index46.cjs +43 -212
  116. package/dist/index46.cjs.map +1 -1
  117. package/dist/index46.js +44 -213
  118. package/dist/index46.js.map +1 -1
  119. package/dist/index47.cjs +6 -8
  120. package/dist/index47.cjs.map +1 -1
  121. package/dist/index47.js +6 -8
  122. package/dist/index47.js.map +1 -1
  123. package/dist/index48.cjs +213 -14
  124. package/dist/index48.cjs.map +1 -1
  125. package/dist/index48.js +215 -16
  126. package/dist/index48.js.map +1 -1
  127. package/dist/index49.cjs +7 -65
  128. package/dist/index49.cjs.map +1 -1
  129. package/dist/index49.js +9 -67
  130. package/dist/index49.js.map +1 -1
  131. package/dist/index50.cjs +19 -16
  132. package/dist/index50.cjs.map +1 -1
  133. package/dist/index50.js +18 -15
  134. package/dist/index50.js.map +1 -1
  135. package/dist/index51.cjs +67 -6
  136. package/dist/index51.cjs.map +1 -1
  137. package/dist/index51.js +66 -5
  138. package/dist/index51.js.map +1 -1
  139. package/dist/index52.cjs +15 -27
  140. package/dist/index52.cjs.map +1 -1
  141. package/dist/index52.js +15 -27
  142. package/dist/index52.js.map +1 -1
  143. package/dist/index53.cjs +24 -15
  144. package/dist/index53.cjs.map +1 -1
  145. package/dist/index53.js +24 -15
  146. package/dist/index53.js.map +1 -1
  147. package/dist/index54.cjs +6 -76
  148. package/dist/index54.cjs.map +1 -1
  149. package/dist/index54.js +5 -75
  150. package/dist/index54.js.map +1 -1
  151. package/dist/index55.cjs +13 -13
  152. package/dist/index55.js +13 -13
  153. package/dist/index56.cjs +13 -19
  154. package/dist/index56.cjs.map +1 -1
  155. package/dist/index56.js +13 -19
  156. package/dist/index56.js.map +1 -1
  157. package/dist/index57.cjs +2 -23
  158. package/dist/index57.cjs.map +1 -1
  159. package/dist/index57.js +3 -24
  160. package/dist/index57.js.map +1 -1
  161. package/dist/index58.cjs +2 -29
  162. package/dist/index58.cjs.map +1 -1
  163. package/dist/index58.js +3 -30
  164. package/dist/index58.js.map +1 -1
  165. package/dist/index59.cjs +89 -24
  166. package/dist/index59.cjs.map +1 -1
  167. package/dist/index59.js +88 -23
  168. package/dist/index59.js.map +1 -1
  169. package/dist/index60.cjs +19 -49
  170. package/dist/index60.cjs.map +1 -1
  171. package/dist/index60.js +19 -49
  172. package/dist/index60.js.map +1 -1
  173. package/dist/index61.cjs +24 -39
  174. package/dist/index61.cjs.map +1 -1
  175. package/dist/index61.js +25 -40
  176. package/dist/index61.js.map +1 -1
  177. package/dist/index62.cjs +17 -44
  178. package/dist/index62.cjs.map +1 -1
  179. package/dist/index62.js +18 -45
  180. package/dist/index62.js.map +1 -1
  181. package/dist/index63.cjs +2 -17
  182. package/dist/index63.cjs.map +1 -1
  183. package/dist/index63.js +3 -18
  184. package/dist/index63.js.map +1 -1
  185. package/dist/index64.cjs +19 -28
  186. package/dist/index64.cjs.map +1 -1
  187. package/dist/index64.js +20 -29
  188. package/dist/index64.js.map +1 -1
  189. package/dist/index65.cjs +64 -16
  190. package/dist/index65.cjs.map +1 -1
  191. package/dist/index65.js +64 -16
  192. package/dist/index65.js.map +1 -1
  193. package/dist/index66.cjs +18 -15
  194. package/dist/index66.cjs.map +1 -1
  195. package/dist/index66.js +18 -15
  196. package/dist/index66.js.map +1 -1
  197. package/dist/index67.cjs +5 -5
  198. package/dist/index67.js +5 -5
  199. package/dist/index68.cjs +8 -35
  200. package/dist/index68.cjs.map +1 -1
  201. package/dist/index68.js +9 -36
  202. package/dist/index68.js.map +1 -1
  203. package/dist/index69.cjs +1 -1
  204. package/dist/index69.js +1 -1
  205. package/dist/index70.cjs +34 -13
  206. package/dist/index70.cjs.map +1 -1
  207. package/dist/index70.js +34 -13
  208. package/dist/index70.js.map +1 -1
  209. package/dist/index71.cjs +11 -2
  210. package/dist/index71.cjs.map +1 -1
  211. package/dist/index71.js +11 -2
  212. package/dist/index71.js.map +1 -1
  213. package/dist/index72.cjs +16 -10
  214. package/dist/index72.cjs.map +1 -1
  215. package/dist/index72.js +17 -11
  216. package/dist/index72.js.map +1 -1
  217. package/dist/index73.cjs +47 -5
  218. package/dist/index73.cjs.map +1 -1
  219. package/dist/index73.js +48 -6
  220. package/dist/index73.js.map +1 -1
  221. package/dist/index74.cjs +15 -18
  222. package/dist/index74.cjs.map +1 -1
  223. package/dist/index74.js +15 -18
  224. package/dist/index74.js.map +1 -1
  225. package/dist/index75.cjs +39 -21
  226. package/dist/index75.cjs.map +1 -1
  227. package/dist/index75.js +38 -20
  228. package/dist/index75.js.map +1 -1
  229. package/dist/index76.cjs +92 -69
  230. package/dist/index76.cjs.map +1 -1
  231. package/dist/index76.js +91 -68
  232. package/dist/index76.js.map +1 -1
  233. package/dist/index77.cjs +34 -19
  234. package/dist/index77.cjs.map +1 -1
  235. package/dist/index77.js +35 -20
  236. package/dist/index77.js.map +1 -1
  237. package/dist/index78.cjs +53 -2
  238. package/dist/index78.cjs.map +1 -1
  239. package/dist/index78.js +54 -3
  240. package/dist/index78.js.map +1 -1
  241. package/dist/index79.cjs +28 -13
  242. package/dist/index79.cjs.map +1 -1
  243. package/dist/index79.js +29 -14
  244. package/dist/index79.js.map +1 -1
  245. package/dist/index80.cjs +134 -34
  246. package/dist/index80.cjs.map +1 -1
  247. package/dist/index80.js +133 -33
  248. package/dist/index80.js.map +1 -1
  249. package/dist/index81.cjs +38 -50
  250. package/dist/index81.cjs.map +1 -1
  251. package/dist/index81.js +38 -50
  252. package/dist/index81.js.map +1 -1
  253. package/dist/index82.cjs +43 -134
  254. package/dist/index82.cjs.map +1 -1
  255. package/dist/index82.js +42 -133
  256. package/dist/index82.js.map +1 -1
  257. package/dist/index83.cjs +25 -40
  258. package/dist/index83.cjs.map +1 -1
  259. package/dist/index83.js +25 -40
  260. package/dist/index83.js.map +1 -1
  261. package/dist/index84.cjs +34 -10
  262. package/dist/index84.cjs.map +1 -1
  263. package/dist/index84.js +34 -10
  264. package/dist/index84.js.map +1 -1
  265. package/dist/index85.cjs +4 -13
  266. package/dist/index85.cjs.map +1 -1
  267. package/dist/index85.js +4 -13
  268. package/dist/index85.js.map +1 -1
  269. package/dist/index86.cjs +30 -36
  270. package/dist/index86.cjs.map +1 -1
  271. package/dist/index86.js +30 -36
  272. package/dist/index86.js.map +1 -1
  273. package/dist/index87.cjs +13 -79
  274. package/dist/index87.cjs.map +1 -1
  275. package/dist/index87.js +14 -80
  276. package/dist/index87.js.map +1 -1
  277. package/dist/index88.cjs +80 -2
  278. package/dist/index88.cjs.map +1 -1
  279. package/dist/index88.js +81 -3
  280. package/dist/index88.js.map +1 -1
  281. package/dist/index89.cjs +48 -36
  282. package/dist/index89.cjs.map +1 -1
  283. package/dist/index89.js +48 -36
  284. package/dist/index89.js.map +1 -1
  285. package/dist/index9.cjs +2 -2
  286. package/dist/index9.js +2 -2
  287. package/dist/index90.cjs +10 -10
  288. package/dist/index90.js +11 -11
  289. package/dist/index91.cjs +22 -34
  290. package/dist/index91.cjs.map +1 -1
  291. package/dist/index91.js +22 -34
  292. package/dist/index91.js.map +1 -1
  293. package/dist/index92.cjs +13 -25
  294. package/dist/index92.cjs.map +1 -1
  295. package/dist/index92.js +14 -26
  296. package/dist/index92.js.map +1 -1
  297. package/dist/index93.cjs +24 -0
  298. package/dist/index93.cjs.map +1 -0
  299. package/dist/index93.js +24 -0
  300. package/dist/index93.js.map +1 -0
  301. package/dist/index94.cjs +24 -0
  302. package/dist/index94.cjs.map +1 -0
  303. package/dist/index94.js +24 -0
  304. package/dist/index94.js.map +1 -0
  305. package/dist/index95.cjs +36 -0
  306. package/dist/index95.cjs.map +1 -0
  307. package/dist/index95.js +36 -0
  308. package/dist/index95.js.map +1 -0
  309. package/dist/index96.cjs +60 -0
  310. package/dist/index96.cjs.map +1 -0
  311. package/dist/index96.js +60 -0
  312. package/dist/index96.js.map +1 -0
  313. package/dist/index97.cjs +21 -0
  314. package/dist/index97.cjs.map +1 -0
  315. package/dist/index97.js +21 -0
  316. package/dist/index97.js.map +1 -0
  317. package/dist/index98.cjs +27 -0
  318. package/dist/index98.cjs.map +1 -0
  319. package/dist/index98.js +27 -0
  320. package/dist/index98.js.map +1 -0
  321. package/dist/primitives/RangeSlider/RangeSlider.d.ts +4 -0
  322. package/dist/primitives/RangeSlider/RangeSlider.d.ts.map +1 -0
  323. package/dist/primitives/RangeSlider/RangeSlider.types.d.ts +12 -0
  324. package/dist/primitives/RangeSlider/RangeSlider.types.d.ts.map +1 -0
  325. package/dist/primitives/RangeSlider/index.d.ts +3 -0
  326. package/dist/primitives/RangeSlider/index.d.ts.map +1 -0
  327. package/dist/style.css +254 -0
  328. package/dist/types/chart.types.d.ts +28 -0
  329. package/dist/types/chart.types.d.ts.map +1 -1
  330. package/dist/types/index.d.ts +1 -1
  331. package/dist/types/index.d.ts.map +1 -1
  332. package/package.json +1 -1
package/dist/index36.cjs CHANGED
@@ -2,156 +2,62 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const ReactECharts = require("echarts-for-react");
6
- const clsx = require("./index50.cjs");
7
- const constants = require("./index54.cjs");
8
- const SankeyChartCard_module = require("./index68.cjs");
9
- const COLOR_METRIC_OPTIONS = [
10
- { value: "deviation", label: "Deviation" },
11
- { value: "severity", label: "Severity" },
12
- { value: "origin", label: "Origin" },
13
- { value: "persistence", label: "Persistence" }
14
- ];
15
- const WIDTH_METRIC_OPTIONS = [
16
- { value: "slots", label: "Slots" },
17
- { value: "distinct_objects", label: "Distinct Objects" }
18
- ];
19
- const buildNodes = (rows) => {
20
- const seen = /* @__PURE__ */ new Set();
21
- const nodes = [];
22
- for (const row of rows) {
23
- if (!seen.has(row.source)) {
24
- seen.add(row.source);
25
- nodes.push({ name: row.source });
26
- }
27
- if (!seen.has(row.target)) {
28
- seen.add(row.target);
29
- nodes.push({ name: row.target });
30
- }
31
- }
32
- return nodes;
5
+ const clsx = require("./index52.cjs");
6
+ const Row_module = require("./index65.cjs");
7
+ const gapClass = {
8
+ none: Row_module.default.gapNone,
9
+ "2xs": Row_module.default.gap2xs,
10
+ xs: Row_module.default.gapXs,
11
+ sm: Row_module.default.gapSm,
12
+ md: Row_module.default.gapMd,
13
+ lg: Row_module.default.gapLg,
14
+ xl: Row_module.default.gapXl,
15
+ "2xl": Row_module.default.gap2xl,
16
+ "3xl": Row_module.default.gap3xl
33
17
  };
34
- const SankeyChartCard = ({
35
- title,
36
- rows,
37
- isLoading = false,
38
- error = null,
39
- onRetry,
40
- onChartReady,
41
- actions,
42
- className,
43
- colorMetric = "deviation",
44
- widthMetric = "slots",
45
- onColorMetricChange,
46
- onWidthMetricChange,
47
- onNodeClick,
48
- onNodeContextMenu,
49
- maxNodes = constants.MAX_SANKEY_NODES
50
- }) => {
51
- const isTruncated = rows.length > maxNodes;
52
- const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;
53
- const option = react.useMemo(() => {
54
- const nodes = buildNodes(visibleRows);
55
- const links = visibleRows.map((row) => ({
56
- source: row.source,
57
- target: row.target,
58
- value: row.value,
59
- lineStyle: row.color ? { color: row.color } : void 0
60
- }));
61
- return {
62
- tooltip: { trigger: "item" },
63
- series: [
64
- {
65
- type: "sankey",
66
- data: nodes.map((node, i) => ({
67
- ...node,
68
- itemStyle: { color: constants.CHART_COLORS[i % constants.CHART_COLORS.length] }
69
- })),
70
- links,
71
- emphasis: { focus: "adjacency" },
72
- lineStyle: { color: "gradient", curveness: 0.5 }
73
- }
74
- ]
75
- };
76
- }, [visibleRows]);
77
- const handleChartReady = (instance) => {
78
- if (onNodeClick) {
79
- instance.on("click", (params) => {
80
- const p = params;
81
- if (p.dataType === "node" && p.name) {
82
- onNodeClick({ name: p.name, type: "node" });
83
- }
84
- });
85
- }
86
- if (onNodeContextMenu) {
87
- instance.on("contextmenu", (params) => {
88
- var _a, _b;
89
- const p = params;
90
- if (p.dataType === "node" && p.name) {
91
- onNodeContextMenu(
92
- { name: p.name, type: "node" },
93
- { x: ((_a = p.event) == null ? void 0 : _a.offsetX) ?? 0, y: ((_b = p.event) == null ? void 0 : _b.offsetY) ?? 0 }
94
- );
95
- }
96
- });
97
- }
98
- onChartReady == null ? void 0 : onChartReady(instance);
99
- };
100
- const hasToolbar = onColorMetricChange || onWidthMetricChange;
101
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(SankeyChartCard_module.default.root, className), children: [
102
- /* @__PURE__ */ jsxRuntime.jsxs("header", { className: SankeyChartCard_module.default.header, children: [
103
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SankeyChartCard_module.default.title, children: title }),
104
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.headerActions, children: actions })
105
- ] }),
106
- hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.toolbar, children: [
107
- onColorMetricChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
108
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: SankeyChartCard_module.default.toolbarLabel, children: "Color: " }),
109
- /* @__PURE__ */ jsxRuntime.jsx(
110
- "select",
111
- {
112
- className: SankeyChartCard_module.default.toolbarSelect,
113
- value: colorMetric,
114
- onChange: (e) => onColorMetricChange(e.target.value),
115
- children: COLOR_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
116
- }
117
- )
118
- ] }),
119
- onWidthMetricChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
120
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: SankeyChartCard_module.default.toolbarLabel, children: "Width: " }),
121
- /* @__PURE__ */ jsxRuntime.jsx(
122
- "select",
123
- {
124
- className: SankeyChartCard_module.default.toolbarSelect,
125
- value: widthMetric,
126
- onChange: (e) => onWidthMetricChange(e.target.value),
127
- children: WIDTH_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
128
- }
129
- )
130
- ] })
131
- ] }),
132
- isTruncated && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.warning, children: [
133
- "Showing ",
134
- maxNodes,
135
- " of ",
136
- rows.length,
137
- " flows. Some data has been truncated."
138
- ] }),
139
- isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.loading, children: "Loading chart..." }),
140
- !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.error, children: [
141
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
142
- onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: SankeyChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
143
- ] }),
144
- !isLoading && !error && rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.empty, children: "No flow data available." }),
145
- !isLoading && !error && rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
146
- ReactECharts,
147
- {
148
- option,
149
- style: { height: "100%", minHeight: "25rem" },
150
- onChartReady: handleChartReady
151
- }
152
- ) })
153
- ] });
18
+ const alignClass = {
19
+ start: Row_module.default.alignStart,
20
+ center: Row_module.default.alignCenter,
21
+ end: Row_module.default.alignEnd,
22
+ stretch: Row_module.default.alignStretch,
23
+ baseline: Row_module.default.alignBaseline
24
+ };
25
+ const justifyClass = {
26
+ start: Row_module.default.justifyStart,
27
+ center: Row_module.default.justifyCenter,
28
+ end: Row_module.default.justifyEnd,
29
+ between: Row_module.default.justifyBetween,
30
+ around: Row_module.default.justifyAround,
31
+ evenly: Row_module.default.justifyEvenly
154
32
  };
155
- SankeyChartCard.displayName = "SankeyChartCard";
156
- exports.SankeyChartCard = SankeyChartCard;
33
+ const Row = react.forwardRef(
34
+ ({
35
+ gap = "md",
36
+ align = "stretch",
37
+ justify = "start",
38
+ wrap = true,
39
+ direction = "row",
40
+ className,
41
+ children,
42
+ ...props
43
+ }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
44
+ "div",
45
+ {
46
+ ref,
47
+ className: clsx.clsx(
48
+ Row_module.default.root,
49
+ gapClass[gap],
50
+ alignClass[align],
51
+ justifyClass[justify],
52
+ wrap ? Row_module.default.wrap : Row_module.default.nowrap,
53
+ direction === "column" ? Row_module.default.dirColumn : Row_module.default.dirRow,
54
+ className
55
+ ),
56
+ ...props,
57
+ children
58
+ }
59
+ )
60
+ );
61
+ Row.displayName = "Row";
62
+ exports.Row = Row;
157
63
  //# sourceMappingURL=index36.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index36.cjs","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n { value: 'deviation', label: 'Deviation' },\n { value: 'severity', label: 'Severity' },\n { value: 'origin', label: 'Origin' },\n { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n { value: 'slots', label: 'Slots' },\n { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n const seen = new Set<string>();\n const nodes: { name: string }[] = [];\n\n for (const row of rows) {\n if (!seen.has(row.source)) {\n seen.add(row.source);\n nodes.push({ name: row.source });\n }\n if (!seen.has(row.target)) {\n seen.add(row.target);\n nodes.push({ name: row.target });\n }\n }\n\n return nodes;\n};\n\nexport const SankeyChartCard = ({\n title,\n rows,\n isLoading = false,\n error = null,\n onRetry,\n onChartReady,\n actions,\n className,\n colorMetric = 'deviation',\n widthMetric = 'slots',\n onColorMetricChange,\n onWidthMetricChange,\n onNodeClick,\n onNodeContextMenu,\n maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n const isTruncated = rows.length > maxNodes;\n const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n const option = useMemo(() => {\n const nodes = buildNodes(visibleRows);\n const links = visibleRows.map((row) => ({\n source: row.source,\n target: row.target,\n value: row.value,\n lineStyle: row.color ? { color: row.color } : undefined,\n }));\n\n return {\n tooltip: { trigger: 'item' as const },\n series: [\n {\n type: 'sankey' as const,\n data: nodes.map((node, i) => ({\n ...node,\n itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n })),\n links,\n emphasis: { focus: 'adjacency' as const },\n lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n },\n ],\n };\n }, [visibleRows]);\n\n const handleChartReady = (instance: EChartsInstance) => {\n if (onNodeClick) {\n instance.on('click', (params: unknown) => {\n const p = params as { dataType?: string; name?: string };\n if (p.dataType === 'node' && p.name) {\n onNodeClick({ name: p.name, type: 'node' });\n }\n });\n }\n\n if (onNodeContextMenu) {\n instance.on('contextmenu', (params: unknown) => {\n const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n if (p.dataType === 'node' && p.name) {\n onNodeContextMenu(\n { name: p.name, type: 'node' },\n { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n );\n }\n });\n }\n\n onChartReady?.(instance);\n };\n\n const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n return (\n <div className={clsx(styles.root, className)}>\n <header className={styles.header}>\n <h3 className={styles.title}>{title}</h3>\n {actions && <div className={styles.headerActions}>{actions}</div>}\n </header>\n\n {hasToolbar && (\n <div className={styles.toolbar}>\n {onColorMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Color: </span>\n <select\n className={styles.toolbarSelect}\n value={colorMetric}\n onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n >\n {COLOR_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n {onWidthMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Width: </span>\n <select\n className={styles.toolbarSelect}\n value={widthMetric}\n onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n >\n {WIDTH_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n </div>\n )}\n\n {isTruncated && (\n <div className={styles.warning}>\n Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\n </div>\n )}\n\n {isLoading && <div className={styles.loading}>Loading chart...</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 && rows.length === 0 && (\n <div className={styles.empty}>No flow data available.</div>\n )}\n\n {!isLoading && !error && rows.length > 0 && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', minHeight: '25rem' }}\n onChartReady={handleChartReady}\n />\n </div>\n )}\n </div>\n );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":["MAX_SANKEY_NODES","useMemo","CHART_COLORS","clsx","styles","jsxs","jsx"],"mappings":"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"}
1
+ {"version":3,"file":"index36.cjs","sources":["../src/primitives/Row/Row.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RowProps } from './Row.types';\nimport styles from './Row.module.css';\n\nconst gapClass: Record<string, string> = {\n none: styles.gapNone,\n '2xs': styles.gap2xs,\n xs: styles.gapXs,\n sm: styles.gapSm,\n md: styles.gapMd,\n lg: styles.gapLg,\n xl: styles.gapXl,\n '2xl': styles.gap2xl,\n '3xl': styles.gap3xl,\n};\n\nconst alignClass: Record<string, string> = {\n start: styles.alignStart,\n center: styles.alignCenter,\n end: styles.alignEnd,\n stretch: styles.alignStretch,\n baseline: styles.alignBaseline,\n};\n\nconst justifyClass: Record<string, string> = {\n start: styles.justifyStart,\n center: styles.justifyCenter,\n end: styles.justifyEnd,\n between: styles.justifyBetween,\n around: styles.justifyAround,\n evenly: styles.justifyEvenly,\n};\n\nexport const Row = forwardRef<HTMLDivElement, RowProps>(\n (\n {\n gap = 'md',\n align = 'stretch',\n justify = 'start',\n wrap = true,\n direction = 'row',\n className,\n children,\n ...props\n },\n ref,\n ) => (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n gapClass[gap],\n alignClass[align],\n justifyClass[justify],\n wrap ? styles.wrap : styles.nowrap,\n direction === 'column' ? styles.dirColumn : styles.dirRow,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nRow.displayName = 'Row';\n"],"names":["styles","forwardRef","jsx","clsx"],"mappings":";;;;;;AAKA,MAAM,WAAmC;AAAA,EACvC,MAAMA,WAAAA,QAAO;AAAA,EACb,OAAOA,WAAAA,QAAO;AAAA,EACd,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,OAAOA,WAAAA,QAAO;AAAA,EACd,OAAOA,WAAAA,QAAO;AAChB;AAEA,MAAM,aAAqC;AAAA,EACzC,OAAOA,WAAAA,QAAO;AAAA,EACd,QAAQA,WAAAA,QAAO;AAAA,EACf,KAAKA,WAAAA,QAAO;AAAA,EACZ,SAASA,WAAAA,QAAO;AAAA,EAChB,UAAUA,WAAAA,QAAO;AACnB;AAEA,MAAM,eAAuC;AAAA,EAC3C,OAAOA,WAAAA,QAAO;AAAA,EACd,QAAQA,WAAAA,QAAO;AAAA,EACf,KAAKA,WAAAA,QAAO;AAAA,EACZ,SAASA,WAAAA,QAAO;AAAA,EAChB,QAAQA,WAAAA,QAAO;AAAA,EACf,QAAQA,WAAAA,QAAO;AACjB;AAEO,MAAM,MAAMC,MAAAA;AAAAA,EACjB,CACE;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,KAAAA;AAAAA,QACTH,WAAAA,QAAO;AAAA,QACP,SAAS,GAAG;AAAA,QACZ,WAAW,KAAK;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAOA,WAAAA,QAAO,OAAOA,WAAAA,QAAO;AAAA,QAC5B,cAAc,WAAWA,WAAAA,QAAO,YAAYA,WAAAA,QAAO;AAAA,QACnD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,IAAI,cAAc;;"}
package/dist/index36.js CHANGED
@@ -1,157 +1,63 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
2
- import { useMemo } from "react";
3
- import ReactECharts from "echarts-for-react";
4
- import { clsx } from "./index50.js";
5
- import { MAX_SANKEY_NODES, CHART_COLORS } from "./index54.js";
6
- import styles from "./index68.js";
7
- const COLOR_METRIC_OPTIONS = [
8
- { value: "deviation", label: "Deviation" },
9
- { value: "severity", label: "Severity" },
10
- { value: "origin", label: "Origin" },
11
- { value: "persistence", label: "Persistence" }
12
- ];
13
- const WIDTH_METRIC_OPTIONS = [
14
- { value: "slots", label: "Slots" },
15
- { value: "distinct_objects", label: "Distinct Objects" }
16
- ];
17
- const buildNodes = (rows) => {
18
- const seen = /* @__PURE__ */ new Set();
19
- const nodes = [];
20
- for (const row of rows) {
21
- if (!seen.has(row.source)) {
22
- seen.add(row.source);
23
- nodes.push({ name: row.source });
24
- }
25
- if (!seen.has(row.target)) {
26
- seen.add(row.target);
27
- nodes.push({ name: row.target });
28
- }
29
- }
30
- return nodes;
1
+ import { jsx } from "react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { clsx } from "./index52.js";
4
+ import styles from "./index65.js";
5
+ const gapClass = {
6
+ none: styles.gapNone,
7
+ "2xs": styles.gap2xs,
8
+ xs: styles.gapXs,
9
+ sm: styles.gapSm,
10
+ md: styles.gapMd,
11
+ lg: styles.gapLg,
12
+ xl: styles.gapXl,
13
+ "2xl": styles.gap2xl,
14
+ "3xl": styles.gap3xl
31
15
  };
32
- const SankeyChartCard = ({
33
- title,
34
- rows,
35
- isLoading = false,
36
- error = null,
37
- onRetry,
38
- onChartReady,
39
- actions,
40
- className,
41
- colorMetric = "deviation",
42
- widthMetric = "slots",
43
- onColorMetricChange,
44
- onWidthMetricChange,
45
- onNodeClick,
46
- onNodeContextMenu,
47
- maxNodes = MAX_SANKEY_NODES
48
- }) => {
49
- const isTruncated = rows.length > maxNodes;
50
- const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;
51
- const option = useMemo(() => {
52
- const nodes = buildNodes(visibleRows);
53
- const links = visibleRows.map((row) => ({
54
- source: row.source,
55
- target: row.target,
56
- value: row.value,
57
- lineStyle: row.color ? { color: row.color } : void 0
58
- }));
59
- return {
60
- tooltip: { trigger: "item" },
61
- series: [
62
- {
63
- type: "sankey",
64
- data: nodes.map((node, i) => ({
65
- ...node,
66
- itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] }
67
- })),
68
- links,
69
- emphasis: { focus: "adjacency" },
70
- lineStyle: { color: "gradient", curveness: 0.5 }
71
- }
72
- ]
73
- };
74
- }, [visibleRows]);
75
- const handleChartReady = (instance) => {
76
- if (onNodeClick) {
77
- instance.on("click", (params) => {
78
- const p = params;
79
- if (p.dataType === "node" && p.name) {
80
- onNodeClick({ name: p.name, type: "node" });
81
- }
82
- });
83
- }
84
- if (onNodeContextMenu) {
85
- instance.on("contextmenu", (params) => {
86
- var _a, _b;
87
- const p = params;
88
- if (p.dataType === "node" && p.name) {
89
- onNodeContextMenu(
90
- { name: p.name, type: "node" },
91
- { x: ((_a = p.event) == null ? void 0 : _a.offsetX) ?? 0, y: ((_b = p.event) == null ? void 0 : _b.offsetY) ?? 0 }
92
- );
93
- }
94
- });
95
- }
96
- onChartReady == null ? void 0 : onChartReady(instance);
97
- };
98
- const hasToolbar = onColorMetricChange || onWidthMetricChange;
99
- return /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), children: [
100
- /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
101
- /* @__PURE__ */ jsx("h3", { className: styles.title, children: title }),
102
- actions && /* @__PURE__ */ jsx("div", { className: styles.headerActions, children: actions })
103
- ] }),
104
- hasToolbar && /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
105
- onColorMetricChange && /* @__PURE__ */ jsxs("label", { children: [
106
- /* @__PURE__ */ jsx("span", { className: styles.toolbarLabel, children: "Color: " }),
107
- /* @__PURE__ */ jsx(
108
- "select",
109
- {
110
- className: styles.toolbarSelect,
111
- value: colorMetric,
112
- onChange: (e) => onColorMetricChange(e.target.value),
113
- children: COLOR_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
114
- }
115
- )
116
- ] }),
117
- onWidthMetricChange && /* @__PURE__ */ jsxs("label", { children: [
118
- /* @__PURE__ */ jsx("span", { className: styles.toolbarLabel, children: "Width: " }),
119
- /* @__PURE__ */ jsx(
120
- "select",
121
- {
122
- className: styles.toolbarSelect,
123
- value: widthMetric,
124
- onChange: (e) => onWidthMetricChange(e.target.value),
125
- children: WIDTH_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
126
- }
127
- )
128
- ] })
129
- ] }),
130
- isTruncated && /* @__PURE__ */ jsxs("div", { className: styles.warning, children: [
131
- "Showing ",
132
- maxNodes,
133
- " of ",
134
- rows.length,
135
- " flows. Some data has been truncated."
136
- ] }),
137
- isLoading && /* @__PURE__ */ jsx("div", { className: styles.loading, children: "Loading chart..." }),
138
- !isLoading && error && /* @__PURE__ */ jsxs("div", { className: styles.error, children: [
139
- /* @__PURE__ */ jsx("span", { children: error }),
140
- onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: styles.retryButton, onClick: onRetry, children: "Retry" })
141
- ] }),
142
- !isLoading && !error && rows.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.empty, children: "No flow data available." }),
143
- !isLoading && !error && rows.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.chartContainer, children: /* @__PURE__ */ jsx(
144
- ReactECharts,
145
- {
146
- option,
147
- style: { height: "100%", minHeight: "25rem" },
148
- onChartReady: handleChartReady
149
- }
150
- ) })
151
- ] });
16
+ const alignClass = {
17
+ start: styles.alignStart,
18
+ center: styles.alignCenter,
19
+ end: styles.alignEnd,
20
+ stretch: styles.alignStretch,
21
+ baseline: styles.alignBaseline
22
+ };
23
+ const justifyClass = {
24
+ start: styles.justifyStart,
25
+ center: styles.justifyCenter,
26
+ end: styles.justifyEnd,
27
+ between: styles.justifyBetween,
28
+ around: styles.justifyAround,
29
+ evenly: styles.justifyEvenly
152
30
  };
153
- SankeyChartCard.displayName = "SankeyChartCard";
31
+ const Row = forwardRef(
32
+ ({
33
+ gap = "md",
34
+ align = "stretch",
35
+ justify = "start",
36
+ wrap = true,
37
+ direction = "row",
38
+ className,
39
+ children,
40
+ ...props
41
+ }, ref) => /* @__PURE__ */ jsx(
42
+ "div",
43
+ {
44
+ ref,
45
+ className: clsx(
46
+ styles.root,
47
+ gapClass[gap],
48
+ alignClass[align],
49
+ justifyClass[justify],
50
+ wrap ? styles.wrap : styles.nowrap,
51
+ direction === "column" ? styles.dirColumn : styles.dirRow,
52
+ className
53
+ ),
54
+ ...props,
55
+ children
56
+ }
57
+ )
58
+ );
59
+ Row.displayName = "Row";
154
60
  export {
155
- SankeyChartCard
61
+ Row
156
62
  };
157
63
  //# sourceMappingURL=index36.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index36.js","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n { value: 'deviation', label: 'Deviation' },\n { value: 'severity', label: 'Severity' },\n { value: 'origin', label: 'Origin' },\n { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n { value: 'slots', label: 'Slots' },\n { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n const seen = new Set<string>();\n const nodes: { name: string }[] = [];\n\n for (const row of rows) {\n if (!seen.has(row.source)) {\n seen.add(row.source);\n nodes.push({ name: row.source });\n }\n if (!seen.has(row.target)) {\n seen.add(row.target);\n nodes.push({ name: row.target });\n }\n }\n\n return nodes;\n};\n\nexport const SankeyChartCard = ({\n title,\n rows,\n isLoading = false,\n error = null,\n onRetry,\n onChartReady,\n actions,\n className,\n colorMetric = 'deviation',\n widthMetric = 'slots',\n onColorMetricChange,\n onWidthMetricChange,\n onNodeClick,\n onNodeContextMenu,\n maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n const isTruncated = rows.length > maxNodes;\n const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n const option = useMemo(() => {\n const nodes = buildNodes(visibleRows);\n const links = visibleRows.map((row) => ({\n source: row.source,\n target: row.target,\n value: row.value,\n lineStyle: row.color ? { color: row.color } : undefined,\n }));\n\n return {\n tooltip: { trigger: 'item' as const },\n series: [\n {\n type: 'sankey' as const,\n data: nodes.map((node, i) => ({\n ...node,\n itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n })),\n links,\n emphasis: { focus: 'adjacency' as const },\n lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n },\n ],\n };\n }, [visibleRows]);\n\n const handleChartReady = (instance: EChartsInstance) => {\n if (onNodeClick) {\n instance.on('click', (params: unknown) => {\n const p = params as { dataType?: string; name?: string };\n if (p.dataType === 'node' && p.name) {\n onNodeClick({ name: p.name, type: 'node' });\n }\n });\n }\n\n if (onNodeContextMenu) {\n instance.on('contextmenu', (params: unknown) => {\n const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n if (p.dataType === 'node' && p.name) {\n onNodeContextMenu(\n { name: p.name, type: 'node' },\n { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n );\n }\n });\n }\n\n onChartReady?.(instance);\n };\n\n const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n return (\n <div className={clsx(styles.root, className)}>\n <header className={styles.header}>\n <h3 className={styles.title}>{title}</h3>\n {actions && <div className={styles.headerActions}>{actions}</div>}\n </header>\n\n {hasToolbar && (\n <div className={styles.toolbar}>\n {onColorMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Color: </span>\n <select\n className={styles.toolbarSelect}\n value={colorMetric}\n onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n >\n {COLOR_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n {onWidthMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Width: </span>\n <select\n className={styles.toolbarSelect}\n value={widthMetric}\n onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n >\n {WIDTH_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n </div>\n )}\n\n {isTruncated && (\n <div className={styles.warning}>\n Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\n </div>\n )}\n\n {isLoading && <div className={styles.loading}>Loading chart...</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 && rows.length === 0 && (\n <div className={styles.empty}>No flow data available.</div>\n )}\n\n {!isLoading && !error && rows.length > 0 && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', minHeight: '25rem' }}\n onChartReady={handleChartReady}\n />\n </div>\n )}\n </div>\n );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index36.js","sources":["../src/primitives/Row/Row.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RowProps } from './Row.types';\nimport styles from './Row.module.css';\n\nconst gapClass: Record<string, string> = {\n none: styles.gapNone,\n '2xs': styles.gap2xs,\n xs: styles.gapXs,\n sm: styles.gapSm,\n md: styles.gapMd,\n lg: styles.gapLg,\n xl: styles.gapXl,\n '2xl': styles.gap2xl,\n '3xl': styles.gap3xl,\n};\n\nconst alignClass: Record<string, string> = {\n start: styles.alignStart,\n center: styles.alignCenter,\n end: styles.alignEnd,\n stretch: styles.alignStretch,\n baseline: styles.alignBaseline,\n};\n\nconst justifyClass: Record<string, string> = {\n start: styles.justifyStart,\n center: styles.justifyCenter,\n end: styles.justifyEnd,\n between: styles.justifyBetween,\n around: styles.justifyAround,\n evenly: styles.justifyEvenly,\n};\n\nexport const Row = forwardRef<HTMLDivElement, RowProps>(\n (\n {\n gap = 'md',\n align = 'stretch',\n justify = 'start',\n wrap = true,\n direction = 'row',\n className,\n children,\n ...props\n },\n ref,\n ) => (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n gapClass[gap],\n alignClass[align],\n justifyClass[justify],\n wrap ? styles.wrap : styles.nowrap,\n direction === 'column' ? styles.dirColumn : styles.dirRow,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nRow.displayName = 'Row';\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAmC;AAAA,EACvC,MAAM,OAAO;AAAA,EACb,OAAO,OAAO;AAAA,EACd,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,OAAO,OAAO;AAAA,EACd,OAAO,OAAO;AAChB;AAEA,MAAM,aAAqC;AAAA,EACzC,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAAA,EACf,KAAK,OAAO;AAAA,EACZ,SAAS,OAAO;AAAA,EAChB,UAAU,OAAO;AACnB;AAEA,MAAM,eAAuC;AAAA,EAC3C,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAAA,EACf,KAAK,OAAO;AAAA,EACZ,SAAS,OAAO;AAAA,EAChB,QAAQ,OAAO;AAAA,EACf,QAAQ,OAAO;AACjB;AAEO,MAAM,MAAM;AAAA,EACjB,CACE;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,SAAS,GAAG;AAAA,QACZ,WAAW,KAAK;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAO,OAAO,OAAO,OAAO;AAAA,QAC5B,cAAc,WAAW,OAAO,YAAY,OAAO;AAAA,QACnD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,IAAI,cAAc;"}