@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.
- package/dist/charts/ScatterChartCard/ScatterChartCard.d.ts +7 -0
- package/dist/charts/ScatterChartCard/ScatterChartCard.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/ScatterChartCard.types.d.ts +31 -0
- package/dist/charts/ScatterChartCard/ScatterChartCard.types.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/buildScatterOption.d.ts +67 -0
- package/dist/charts/ScatterChartCard/buildScatterOption.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/foldPoints.d.ts +23 -0
- package/dist/charts/ScatterChartCard/foldPoints.d.ts.map +1 -0
- package/dist/charts/ScatterChartCard/index.d.ts +3 -0
- package/dist/charts/ScatterChartCard/index.d.ts.map +1 -0
- package/dist/constants.d.ts +13 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/index.cjs +20 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +20 -16
- package/dist/index.js.map +1 -1
- package/dist/index10.cjs +2 -2
- package/dist/index10.js +2 -2
- package/dist/index11.cjs +2 -2
- package/dist/index11.js +2 -2
- package/dist/index12.cjs +2 -2
- package/dist/index12.js +2 -2
- package/dist/index13.cjs +2 -2
- package/dist/index13.js +2 -2
- package/dist/index14.cjs +2 -2
- package/dist/index14.js +2 -2
- package/dist/index15.cjs +3 -3
- package/dist/index15.js +3 -3
- package/dist/index16.cjs +2 -2
- package/dist/index16.js +2 -2
- package/dist/index17.cjs +2 -2
- package/dist/index17.js +2 -2
- package/dist/index18.cjs +2 -2
- package/dist/index18.js +2 -2
- package/dist/index19.cjs +2 -2
- package/dist/index19.js +2 -2
- package/dist/index20.cjs +3 -3
- package/dist/index20.js +3 -3
- package/dist/index21.cjs +3 -3
- package/dist/index21.js +3 -3
- package/dist/index22.cjs +3 -3
- package/dist/index22.js +3 -3
- package/dist/index23.cjs +2 -2
- package/dist/index23.js +2 -2
- package/dist/index24.cjs +2 -2
- package/dist/index24.js +2 -2
- package/dist/index25.cjs +2 -2
- package/dist/index25.js +2 -2
- package/dist/index26.cjs +3 -3
- package/dist/index26.js +3 -3
- package/dist/index27.cjs +2 -2
- package/dist/index27.js +2 -2
- package/dist/index28.cjs +2 -2
- package/dist/index28.js +2 -2
- package/dist/index29.cjs +3 -3
- package/dist/index29.js +3 -3
- package/dist/index30.cjs +2 -2
- package/dist/index30.js +2 -2
- package/dist/index31.cjs +3 -3
- package/dist/index31.js +3 -3
- package/dist/index32.cjs +2 -2
- package/dist/index32.js +2 -2
- package/dist/index33.cjs +3 -3
- package/dist/index33.js +3 -3
- package/dist/index34.cjs +66 -76
- package/dist/index34.cjs.map +1 -1
- package/dist/index34.js +67 -77
- package/dist/index34.js.map +1 -1
- package/dist/index35.cjs +76 -57
- package/dist/index35.cjs.map +1 -1
- package/dist/index35.js +78 -59
- package/dist/index35.js.map +1 -1
- package/dist/index36.cjs +56 -150
- package/dist/index36.cjs.map +1 -1
- package/dist/index36.js +58 -152
- package/dist/index36.js.map +1 -1
- package/dist/index37.cjs +147 -66
- package/dist/index37.cjs.map +1 -1
- package/dist/index37.js +149 -68
- package/dist/index37.js.map +1 -1
- package/dist/index38.cjs +97 -7
- package/dist/index38.cjs.map +1 -1
- package/dist/index38.js +99 -9
- package/dist/index38.js.map +1 -1
- package/dist/index39.cjs +72 -17
- package/dist/index39.cjs.map +1 -1
- package/dist/index39.js +73 -18
- package/dist/index39.js.map +1 -1
- package/dist/index40.cjs +7 -76
- package/dist/index40.cjs.map +1 -1
- package/dist/index40.js +9 -78
- package/dist/index40.js.map +1 -1
- package/dist/index41.cjs +17 -143
- package/dist/index41.cjs.map +1 -1
- package/dist/index41.js +17 -143
- package/dist/index41.js.map +1 -1
- package/dist/index42.cjs +72 -59
- package/dist/index42.cjs.map +1 -1
- package/dist/index42.js +74 -61
- package/dist/index42.js.map +1 -1
- package/dist/index43.cjs +136 -98
- package/dist/index43.cjs.map +1 -1
- package/dist/index43.js +137 -99
- package/dist/index43.js.map +1 -1
- package/dist/index44.cjs +49 -32
- package/dist/index44.cjs.map +1 -1
- package/dist/index44.js +49 -32
- package/dist/index44.js.map +1 -1
- package/dist/index45.cjs +105 -6
- package/dist/index45.cjs.map +1 -1
- package/dist/index45.js +106 -7
- package/dist/index45.js.map +1 -1
- package/dist/index46.cjs +43 -212
- package/dist/index46.cjs.map +1 -1
- package/dist/index46.js +44 -213
- package/dist/index46.js.map +1 -1
- package/dist/index47.cjs +6 -8
- package/dist/index47.cjs.map +1 -1
- package/dist/index47.js +6 -8
- package/dist/index47.js.map +1 -1
- package/dist/index48.cjs +213 -14
- package/dist/index48.cjs.map +1 -1
- package/dist/index48.js +215 -16
- package/dist/index48.js.map +1 -1
- package/dist/index49.cjs +7 -65
- package/dist/index49.cjs.map +1 -1
- package/dist/index49.js +9 -67
- package/dist/index49.js.map +1 -1
- package/dist/index50.cjs +19 -16
- package/dist/index50.cjs.map +1 -1
- package/dist/index50.js +18 -15
- package/dist/index50.js.map +1 -1
- package/dist/index51.cjs +67 -6
- package/dist/index51.cjs.map +1 -1
- package/dist/index51.js +66 -5
- package/dist/index51.js.map +1 -1
- package/dist/index52.cjs +15 -27
- package/dist/index52.cjs.map +1 -1
- package/dist/index52.js +15 -27
- package/dist/index52.js.map +1 -1
- package/dist/index53.cjs +24 -15
- package/dist/index53.cjs.map +1 -1
- package/dist/index53.js +24 -15
- package/dist/index53.js.map +1 -1
- package/dist/index54.cjs +6 -76
- package/dist/index54.cjs.map +1 -1
- package/dist/index54.js +5 -75
- package/dist/index54.js.map +1 -1
- package/dist/index55.cjs +13 -13
- package/dist/index55.js +13 -13
- package/dist/index56.cjs +13 -19
- package/dist/index56.cjs.map +1 -1
- package/dist/index56.js +13 -19
- package/dist/index56.js.map +1 -1
- package/dist/index57.cjs +2 -23
- package/dist/index57.cjs.map +1 -1
- package/dist/index57.js +3 -24
- package/dist/index57.js.map +1 -1
- package/dist/index58.cjs +2 -29
- package/dist/index58.cjs.map +1 -1
- package/dist/index58.js +3 -30
- package/dist/index58.js.map +1 -1
- package/dist/index59.cjs +89 -24
- package/dist/index59.cjs.map +1 -1
- package/dist/index59.js +88 -23
- package/dist/index59.js.map +1 -1
- package/dist/index60.cjs +19 -49
- package/dist/index60.cjs.map +1 -1
- package/dist/index60.js +19 -49
- package/dist/index60.js.map +1 -1
- package/dist/index61.cjs +24 -39
- package/dist/index61.cjs.map +1 -1
- package/dist/index61.js +25 -40
- package/dist/index61.js.map +1 -1
- package/dist/index62.cjs +17 -44
- package/dist/index62.cjs.map +1 -1
- package/dist/index62.js +18 -45
- package/dist/index62.js.map +1 -1
- package/dist/index63.cjs +2 -17
- package/dist/index63.cjs.map +1 -1
- package/dist/index63.js +3 -18
- package/dist/index63.js.map +1 -1
- package/dist/index64.cjs +19 -28
- package/dist/index64.cjs.map +1 -1
- package/dist/index64.js +20 -29
- package/dist/index64.js.map +1 -1
- package/dist/index65.cjs +64 -16
- package/dist/index65.cjs.map +1 -1
- package/dist/index65.js +64 -16
- package/dist/index65.js.map +1 -1
- package/dist/index66.cjs +18 -15
- package/dist/index66.cjs.map +1 -1
- package/dist/index66.js +18 -15
- package/dist/index66.js.map +1 -1
- package/dist/index67.cjs +5 -5
- package/dist/index67.js +5 -5
- package/dist/index68.cjs +8 -35
- package/dist/index68.cjs.map +1 -1
- package/dist/index68.js +9 -36
- package/dist/index68.js.map +1 -1
- package/dist/index69.cjs +1 -1
- package/dist/index69.js +1 -1
- package/dist/index70.cjs +34 -13
- package/dist/index70.cjs.map +1 -1
- package/dist/index70.js +34 -13
- package/dist/index70.js.map +1 -1
- package/dist/index71.cjs +11 -2
- package/dist/index71.cjs.map +1 -1
- package/dist/index71.js +11 -2
- package/dist/index71.js.map +1 -1
- package/dist/index72.cjs +16 -10
- package/dist/index72.cjs.map +1 -1
- package/dist/index72.js +17 -11
- package/dist/index72.js.map +1 -1
- package/dist/index73.cjs +47 -5
- package/dist/index73.cjs.map +1 -1
- package/dist/index73.js +48 -6
- package/dist/index73.js.map +1 -1
- package/dist/index74.cjs +15 -18
- package/dist/index74.cjs.map +1 -1
- package/dist/index74.js +15 -18
- package/dist/index74.js.map +1 -1
- package/dist/index75.cjs +39 -21
- package/dist/index75.cjs.map +1 -1
- package/dist/index75.js +38 -20
- package/dist/index75.js.map +1 -1
- package/dist/index76.cjs +92 -69
- package/dist/index76.cjs.map +1 -1
- package/dist/index76.js +91 -68
- package/dist/index76.js.map +1 -1
- package/dist/index77.cjs +34 -19
- package/dist/index77.cjs.map +1 -1
- package/dist/index77.js +35 -20
- package/dist/index77.js.map +1 -1
- package/dist/index78.cjs +53 -2
- package/dist/index78.cjs.map +1 -1
- package/dist/index78.js +54 -3
- package/dist/index78.js.map +1 -1
- package/dist/index79.cjs +28 -13
- package/dist/index79.cjs.map +1 -1
- package/dist/index79.js +29 -14
- package/dist/index79.js.map +1 -1
- package/dist/index80.cjs +134 -34
- package/dist/index80.cjs.map +1 -1
- package/dist/index80.js +133 -33
- package/dist/index80.js.map +1 -1
- package/dist/index81.cjs +38 -50
- package/dist/index81.cjs.map +1 -1
- package/dist/index81.js +38 -50
- package/dist/index81.js.map +1 -1
- package/dist/index82.cjs +43 -134
- package/dist/index82.cjs.map +1 -1
- package/dist/index82.js +42 -133
- package/dist/index82.js.map +1 -1
- package/dist/index83.cjs +25 -40
- package/dist/index83.cjs.map +1 -1
- package/dist/index83.js +25 -40
- package/dist/index83.js.map +1 -1
- package/dist/index84.cjs +34 -10
- package/dist/index84.cjs.map +1 -1
- package/dist/index84.js +34 -10
- package/dist/index84.js.map +1 -1
- package/dist/index85.cjs +4 -13
- package/dist/index85.cjs.map +1 -1
- package/dist/index85.js +4 -13
- package/dist/index85.js.map +1 -1
- package/dist/index86.cjs +30 -36
- package/dist/index86.cjs.map +1 -1
- package/dist/index86.js +30 -36
- package/dist/index86.js.map +1 -1
- package/dist/index87.cjs +13 -79
- package/dist/index87.cjs.map +1 -1
- package/dist/index87.js +14 -80
- package/dist/index87.js.map +1 -1
- package/dist/index88.cjs +80 -2
- package/dist/index88.cjs.map +1 -1
- package/dist/index88.js +81 -3
- package/dist/index88.js.map +1 -1
- package/dist/index89.cjs +48 -36
- package/dist/index89.cjs.map +1 -1
- package/dist/index89.js +48 -36
- package/dist/index89.js.map +1 -1
- package/dist/index9.cjs +2 -2
- package/dist/index9.js +2 -2
- package/dist/index90.cjs +10 -10
- package/dist/index90.js +11 -11
- package/dist/index91.cjs +22 -34
- package/dist/index91.cjs.map +1 -1
- package/dist/index91.js +22 -34
- package/dist/index91.js.map +1 -1
- package/dist/index92.cjs +13 -25
- package/dist/index92.cjs.map +1 -1
- package/dist/index92.js +14 -26
- package/dist/index92.js.map +1 -1
- package/dist/index93.cjs +24 -0
- package/dist/index93.cjs.map +1 -0
- package/dist/index93.js +24 -0
- package/dist/index93.js.map +1 -0
- package/dist/index94.cjs +24 -0
- package/dist/index94.cjs.map +1 -0
- package/dist/index94.js +24 -0
- package/dist/index94.js.map +1 -0
- package/dist/index95.cjs +36 -0
- package/dist/index95.cjs.map +1 -0
- package/dist/index95.js +36 -0
- package/dist/index95.js.map +1 -0
- package/dist/index96.cjs +60 -0
- package/dist/index96.cjs.map +1 -0
- package/dist/index96.js +60 -0
- package/dist/index96.js.map +1 -0
- package/dist/index97.cjs +21 -0
- package/dist/index97.cjs.map +1 -0
- package/dist/index97.js +21 -0
- package/dist/index97.js.map +1 -0
- package/dist/index98.cjs +27 -0
- package/dist/index98.cjs.map +1 -0
- package/dist/index98.js +27 -0
- package/dist/index98.js.map +1 -0
- package/dist/primitives/RangeSlider/RangeSlider.d.ts +4 -0
- package/dist/primitives/RangeSlider/RangeSlider.d.ts.map +1 -0
- package/dist/primitives/RangeSlider/RangeSlider.types.d.ts +12 -0
- package/dist/primitives/RangeSlider/RangeSlider.types.d.ts.map +1 -0
- package/dist/primitives/RangeSlider/index.d.ts +3 -0
- package/dist/primitives/RangeSlider/index.d.ts.map +1 -0
- package/dist/style.css +254 -0
- package/dist/types/chart.types.d.ts +28 -0
- package/dist/types/chart.types.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/index.d.ts.map +1 -1
- 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
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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
|
-
|
|
156
|
-
|
|
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
|
package/dist/index36.cjs.map
CHANGED
|
@@ -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 {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
-
|
|
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
|
-
|
|
61
|
+
Row
|
|
156
62
|
};
|
|
157
63
|
//# sourceMappingURL=index36.js.map
|
package/dist/index36.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index36.js","sources":["../src/
|
|
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;"}
|