@trackunit/react-chart-components 0.0.205 → 0.0.208
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/index.cjs.js +7 -7
- package/index.esm.js +7 -7
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -72,7 +72,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
|
|
|
72
72
|
}
|
|
73
73
|
};
|
|
74
74
|
}, [onClick, echartsRef]);
|
|
75
|
-
return (jsxRuntime.jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" },
|
|
75
|
+
return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart__default["default"], { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options !== null && options !== void 0 ? options : unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
|
|
76
76
|
};
|
|
77
77
|
const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
|
|
78
78
|
const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
|
|
@@ -88,7 +88,7 @@ const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "pl
|
|
|
88
88
|
@returns {JSX.Element} - A donut chart displaying the KPI count and total count.
|
|
89
89
|
*/
|
|
90
90
|
const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
|
|
91
|
-
return (jsxRuntime.jsx(Chart, { dataTestId: dataTestId,
|
|
91
|
+
return (jsxRuntime.jsx(Chart, { dataTestId: dataTestId, options: {
|
|
92
92
|
color: [countColor || uiDesignTokens.DEFAULT_CHART_COLORS[0], totalCountColor || uiDesignTokens.DEFAULT_CHART_COLORS[22]],
|
|
93
93
|
xAxis: [
|
|
94
94
|
{
|
|
@@ -121,7 +121,7 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
|
|
|
121
121
|
center: ["50%", "50%"],
|
|
122
122
|
},
|
|
123
123
|
],
|
|
124
|
-
} }));
|
|
124
|
+
}, showLoading: loading, style: { height: "36px", width: "36px" } }));
|
|
125
125
|
};
|
|
126
126
|
|
|
127
127
|
const cvaKpi = cssClassVarianceUtilities.cvaMerge(["flex", "flex-row", "gap-1", "leading-none", "items-center"]);
|
|
@@ -161,7 +161,7 @@ const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
|
|
|
161
161
|
* @returns {JSX.Element} Kpi component
|
|
162
162
|
*/
|
|
163
163
|
const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
|
|
164
|
-
return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart && (jsxRuntime.jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading,
|
|
164
|
+
return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart && (jsxRuntime.jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })), loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: count !== null && count !== void 0 ? count : "-" }), suffix && (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
|
|
165
165
|
};
|
|
166
166
|
|
|
167
167
|
const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -215,7 +215,7 @@ const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "h-3",
|
|
|
215
215
|
*/
|
|
216
216
|
const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
|
|
217
217
|
const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
|
|
218
|
-
return (jsxRuntime.jsxs("div", {
|
|
218
|
+
return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), style: { backgroundColor: color } }), label && jsxRuntime.jsx("p", { children: label })] }));
|
|
219
219
|
};
|
|
220
220
|
|
|
221
221
|
/**
|
|
@@ -228,7 +228,7 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
|
|
|
228
228
|
var _a;
|
|
229
229
|
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
230
230
|
const { hovering, onMouseEnter, onMouseLeave } = reactComponents.useHover({ debounced: true });
|
|
231
|
-
return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { children: size === "full" && (jsxRuntime.jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsxRuntime.jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected
|
|
231
|
+
return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { children: size === "full" && (jsxRuntime.jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsxRuntime.jsx(LegendItem, { color: item.color, dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected }, item.id))) })) }), jsxRuntime.jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsxRuntime.jsx(Chart, { dataTestId: "pie-chart", onClick: evt => {
|
|
232
232
|
const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
|
|
233
233
|
if (onClick && clickedEntry) {
|
|
234
234
|
onClick(clickedEntry);
|
|
@@ -279,7 +279,7 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
|
|
|
279
279
|
}),
|
|
280
280
|
},
|
|
281
281
|
],
|
|
282
|
-
} }) })] }));
|
|
282
|
+
}, showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 } }) })] }));
|
|
283
283
|
};
|
|
284
284
|
const cvaChartRoot = cssClassVarianceUtilities.cvaMerge([
|
|
285
285
|
"flex",
|
package/index.esm.js
CHANGED
|
@@ -64,7 +64,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
|
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
66
|
}, [onClick, echartsRef]);
|
|
67
|
-
return (jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" },
|
|
67
|
+
return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options !== null && options !== void 0 ? options : unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
|
|
68
68
|
};
|
|
69
69
|
const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
|
|
70
70
|
const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
|
|
@@ -80,7 +80,7 @@ const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overfl
|
|
|
80
80
|
@returns {JSX.Element} - A donut chart displaying the KPI count and total count.
|
|
81
81
|
*/
|
|
82
82
|
const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
|
|
83
|
-
return (jsx(Chart, { dataTestId: dataTestId,
|
|
83
|
+
return (jsx(Chart, { dataTestId: dataTestId, options: {
|
|
84
84
|
color: [countColor || DEFAULT_CHART_COLORS[0], totalCountColor || DEFAULT_CHART_COLORS[22]],
|
|
85
85
|
xAxis: [
|
|
86
86
|
{
|
|
@@ -113,7 +113,7 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
|
|
|
113
113
|
center: ["50%", "50%"],
|
|
114
114
|
},
|
|
115
115
|
],
|
|
116
|
-
} }));
|
|
116
|
+
}, showLoading: loading, style: { height: "36px", width: "36px" } }));
|
|
117
117
|
};
|
|
118
118
|
|
|
119
119
|
const cvaKpi = cvaMerge(["flex", "flex-row", "gap-1", "leading-none", "items-center"]);
|
|
@@ -153,7 +153,7 @@ const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
|
|
|
153
153
|
* @returns {JSX.Element} Kpi component
|
|
154
154
|
*/
|
|
155
155
|
const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
|
|
156
|
-
return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart && (jsx(KPIDonutChart, { dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading,
|
|
156
|
+
return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart && (jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId && dataTestId + "-donut-chart", loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })), loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId && `${dataTestId}-skeleton-lines`, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId && `${dataTestId}-container`, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: count !== null && count !== void 0 ? count : "-" }), suffix && (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId && `${dataTestId}-suffix`, children: suffix }))] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
|
|
157
157
|
};
|
|
158
158
|
|
|
159
159
|
const cvaLegendItem = cvaMerge([
|
|
@@ -207,7 +207,7 @@ const cvaLegendItemIndicator = cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
|
|
|
207
207
|
*/
|
|
208
208
|
const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
|
|
209
209
|
const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
|
|
210
|
-
return (jsxs("div", {
|
|
210
|
+
return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), style: { backgroundColor: color } }), label && jsx("p", { children: label })] }));
|
|
211
211
|
};
|
|
212
212
|
|
|
213
213
|
/**
|
|
@@ -220,7 +220,7 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
|
|
|
220
220
|
var _a;
|
|
221
221
|
const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
|
|
222
222
|
const { hovering, onMouseEnter, onMouseLeave } = useHover({ debounced: true });
|
|
223
|
-
return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsx("div", { children: size === "full" && (jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsx(LegendItem, { dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected
|
|
223
|
+
return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, children: [jsx("div", { children: size === "full" && (jsx("div", { className: "flex flex-col", "data-testid": "legend", children: data === null || data === void 0 ? void 0 : data.map(item => (jsx(LegendItem, { color: item.color, dataTestId: `legend-${item.id}`, label: (item === null || item === void 0 ? void 0 : item.count) !== undefined ? `${item.name} (${item.count})` : item.name, onClick: onClick ? () => onClick(item) : undefined, selected: item.selected }, item.id))) })) }), jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsx(Chart, { dataTestId: "pie-chart", onClick: evt => {
|
|
224
224
|
const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
|
|
225
225
|
if (onClick && clickedEntry) {
|
|
226
226
|
onClick(clickedEntry);
|
|
@@ -271,7 +271,7 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
|
|
|
271
271
|
}),
|
|
272
272
|
},
|
|
273
273
|
],
|
|
274
|
-
} }) })] }));
|
|
274
|
+
}, showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 } }) })] }));
|
|
275
275
|
};
|
|
276
276
|
const cvaChartRoot = cvaMerge([
|
|
277
277
|
"flex",
|