@trackunit/react-chart-components 1.0.13 → 1.0.15

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 (3) hide show
  1. package/index.cjs.js +15 -24
  2. package/index.esm.js +15 -24
  3. package/package.json +2 -2
package/index.cjs.js CHANGED
@@ -18,7 +18,6 @@ var uiDesignTokens = require('@trackunit/ui-design-tokens');
18
18
  * @returns {JSX.Element} Chart component
19
19
  */
20
20
  const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
21
- var _a, _b;
22
21
  const echartsRef = react.useRef(null);
23
22
  const eventHandlers = react.useMemo(() => {
24
23
  const values = {};
@@ -36,27 +35,23 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
36
35
  }
37
36
  if (mouseMoveChart !== undefined) {
38
37
  values.mouseMove = (event) => {
39
- var _a;
40
- mouseMoveChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
38
+ mouseMoveChart(event, echartsRef.current?.getEchartsInstance());
41
39
  };
42
40
  }
43
41
  if (mouseOverChart !== undefined) {
44
42
  values.mouseOver = (event) => {
45
- var _a;
46
- mouseOverChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
43
+ mouseOverChart(event, echartsRef.current?.getEchartsInstance());
47
44
  };
48
45
  }
49
46
  if (mouseOutChart !== undefined) {
50
47
  values.mouseOut = (event) => {
51
- var _a;
52
- mouseOutChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
48
+ mouseOutChart(event, echartsRef.current?.getEchartsInstance());
53
49
  };
54
50
  }
55
51
  return values;
56
52
  }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
57
53
  react.useEffect(() => {
58
- var _a;
59
- const instance = (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
54
+ const instance = echartsRef.current?.getEchartsInstance();
60
55
  if (instance && onClick) {
61
56
  instance.on("click", onClick);
62
57
  }
@@ -66,7 +61,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
66
61
  }
67
62
  };
68
63
  }, [onClick, echartsRef]);
69
- 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 })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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] })) }));
64
+ return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), loadingOption?.text ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart, { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
70
65
  };
71
66
  const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
72
67
  const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
@@ -155,7 +150,7 @@ const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
155
150
  * @returns {JSX.Element} Kpi component
156
151
  */
157
152
  const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
158
- 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" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, 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` : null, 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` : null, children: suffix })) : null] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
153
+ 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" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, 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` : null, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: count ?? "-" }), suffix ? (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
159
154
  };
160
155
 
161
156
  const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
@@ -219,11 +214,10 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
219
214
  * @returns {JSX.Element} Chart component
220
215
  */
221
216
  const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
222
- var _a;
223
- const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
217
+ const totalCount = data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0;
224
218
  const { hovering, onMouseEnter, onMouseLeave } = reactComponents.useHover({ debounced: true });
225
- 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.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 => {
226
- const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
219
+ 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?.map(item => (jsxRuntime.jsx(LegendItem, { color: item.color, dataTestId: `legend-${item.id}`, label: 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 => {
220
+ const clickedEntry = data?.find(x => x.id === evt.data.id);
227
221
  if (onClick && clickedEntry) {
228
222
  onClick(clickedEntry);
229
223
  }
@@ -262,15 +256,12 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
262
256
  labelLine: {
263
257
  show: false,
264
258
  },
265
- data: data === null || data === void 0 ? void 0 : data.map(item => {
266
- var _a;
267
- return ({
268
- id: item.id,
269
- name: item.name,
270
- value: (_a = item.count) !== null && _a !== void 0 ? _a : 0,
271
- itemStyle: { color: item.color },
272
- });
273
- }),
259
+ data: data?.map(item => ({
260
+ id: item.id,
261
+ name: item.name,
262
+ value: item.count ?? 0,
263
+ itemStyle: { color: item.color },
264
+ })),
274
265
  },
275
266
  ],
276
267
  }, showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 } }) })] }));
package/index.esm.js CHANGED
@@ -16,7 +16,6 @@ import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
16
16
  * @returns {JSX.Element} Chart component
17
17
  */
18
18
  const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
19
- var _a, _b;
20
19
  const echartsRef = useRef(null);
21
20
  const eventHandlers = useMemo(() => {
22
21
  const values = {};
@@ -34,27 +33,23 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
34
33
  }
35
34
  if (mouseMoveChart !== undefined) {
36
35
  values.mouseMove = (event) => {
37
- var _a;
38
- mouseMoveChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
36
+ mouseMoveChart(event, echartsRef.current?.getEchartsInstance());
39
37
  };
40
38
  }
41
39
  if (mouseOverChart !== undefined) {
42
40
  values.mouseOver = (event) => {
43
- var _a;
44
- mouseOverChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
41
+ mouseOverChart(event, echartsRef.current?.getEchartsInstance());
45
42
  };
46
43
  }
47
44
  if (mouseOutChart !== undefined) {
48
45
  values.mouseOut = (event) => {
49
- var _a;
50
- mouseOutChart(event, (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance());
46
+ mouseOutChart(event, echartsRef.current?.getEchartsInstance());
51
47
  };
52
48
  }
53
49
  return values;
54
50
  }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
55
51
  useEffect(() => {
56
- var _a;
57
- const instance = (_a = echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
52
+ const instance = echartsRef.current?.getEchartsInstance();
58
53
  if (instance && onClick) {
59
54
  instance.on("click", onClick);
60
55
  }
@@ -64,7 +59,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
64
59
  }
65
60
  };
66
61
  }, [onClick, echartsRef]);
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 })) : null] })) : (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] })) }));
62
+ return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), loadingOption?.text ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
68
63
  };
69
64
  const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
70
65
  const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
@@ -153,7 +148,7 @@ const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
153
148
  * @returns {JSX.Element} Kpi component
154
149
  */
155
150
  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, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, 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` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
151
+ return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: count ?? "-" }), suffix ? (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
157
152
  };
158
153
 
159
154
  const cvaLegendItem = cvaMerge([
@@ -217,11 +212,10 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
217
212
  * @returns {JSX.Element} Chart component
218
213
  */
219
214
  const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
220
- var _a;
221
- const totalCount = (_a = data === null || data === void 0 ? void 0 : data.map(item => { var _a; return (_a = item.count) !== null && _a !== void 0 ? _a : 0; }).reduce((a, b) => a + b, 0)) !== null && _a !== void 0 ? _a : 0;
215
+ const totalCount = data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0;
222
216
  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, { color: item.color, dataTestId: `legend-${item.id}`, label: 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
- const clickedEntry = data === null || data === void 0 ? void 0 : data.find(x => x.id === evt.data.id);
217
+ 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?.map(item => (jsx(LegendItem, { color: item.color, dataTestId: `legend-${item.id}`, label: 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 => {
218
+ const clickedEntry = data?.find(x => x.id === evt.data.id);
225
219
  if (onClick && clickedEntry) {
226
220
  onClick(clickedEntry);
227
221
  }
@@ -260,15 +254,12 @@ const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId
260
254
  labelLine: {
261
255
  show: false,
262
256
  },
263
- data: data === null || data === void 0 ? void 0 : data.map(item => {
264
- var _a;
265
- return ({
266
- id: item.id,
267
- name: item.name,
268
- value: (_a = item.count) !== null && _a !== void 0 ? _a : 0,
269
- itemStyle: { color: item.color },
270
- });
271
- }),
257
+ data: data?.map(item => ({
258
+ id: item.id,
259
+ name: item.name,
260
+ value: item.count ?? 0,
261
+ itemStyle: { color: item.color },
262
+ })),
272
263
  },
273
264
  ],
274
265
  }, showLoading: loading, style: size === "full" ? { height: 110, width: 110 } : { height: 60, width: 60 } }) })] }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-chart-components",
3
- "version": "1.0.13",
3
+ "version": "1.0.15",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -11,7 +11,7 @@
11
11
  "echarts-for-react": "^3.0.2",
12
12
  "react": "18.3.1",
13
13
  "@trackunit/css-class-variance-utilities": "^1.0.1",
14
- "@trackunit/react-components": "^1.0.13",
14
+ "@trackunit/react-components": "^1.1.1",
15
15
  "@trackunit/ui-design-tokens": "^1.0.1"
16
16
  },
17
17
  "module": "./index.esm.js",