@trackunit/react-chart-components 1.3.101 → 1.3.104

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 (4) hide show
  1. package/index.cjs.js +8 -8
  2. package/index.esm.js +8 -8
  3. package/package.json +7 -7
  4. package/src/DonutChart/DonutChart.d.ts +2 -2
package/index.cjs.js CHANGED
@@ -253,14 +253,14 @@ const useChartColor = () => {
253
253
  */
254
254
  const useLimitDataSet = (data, limit) => {
255
255
  const limitedData = react.useMemo(() => {
256
- const sortedData = data.sort((a, b) => (b.count ?? 0) - (a.count ?? 0));
256
+ const sortedData = data.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
257
257
  if (sortedData.length > limit) {
258
258
  const result = sortedData.slice(0, limit);
259
259
  result.push({
260
260
  id: "defaultOther",
261
261
  name: "Others",
262
262
  selected: false,
263
- count: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.count ?? 0), 0),
263
+ value: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.value ?? 0), 0),
264
264
  color: uiDesignTokens.DEFAULT_CHART_OTHER,
265
265
  original: { defaultOther: true },
266
266
  });
@@ -281,9 +281,9 @@ const useLimitDataSet = (data, limit) => {
281
281
  const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, }) => {
282
282
  const containerRef = react.useRef(null);
283
283
  const chartRef = react.useRef(null);
284
- const totalCount = react.useMemo(() => data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
284
+ const totalValue = react.useMemo(() => data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
285
285
  const [hoveringItem, setHoveringItem] = react.useState(null);
286
- const currentCount = react.useMemo(() => hoveringItem?.count ?? totalCount, [hoveringItem, totalCount]);
286
+ const currentValue = react.useMemo(() => hoveringItem?.value ?? totalValue, [hoveringItem, totalValue]);
287
287
  const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints);
288
288
  const { chartColor } = useChartColor();
289
289
  const handleChartReady = react.useCallback((chart) => {
@@ -365,7 +365,7 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
365
365
  position: "center",
366
366
  fontSize: size === "full" ? 18 : 12,
367
367
  fontWeight: "bold",
368
- formatter: currentCount.toString(),
368
+ formatter: currentValue.toString(),
369
369
  },
370
370
  emphasis: {
371
371
  label: {
@@ -382,7 +382,7 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
382
382
  return {
383
383
  id: item.id,
384
384
  name: item.name,
385
- value: item.count ?? 0,
385
+ value: item.value ?? 0,
386
386
  itemStyle: {
387
387
  color: itemColor,
388
388
  },
@@ -398,8 +398,8 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
398
398
  },
399
399
  ],
400
400
  };
401
- }, [size, currentCount, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
402
- return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsxRuntime.jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsxRuntime.jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.count, dataTestId: `legend-${item.id}`, disabled: item.count === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
401
+ }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
402
+ return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsxRuntime.jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsxRuntime.jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, dataTestId: `legend-${item.id}`, disabled: (item.value ?? 0) === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
403
403
  };
404
404
  const cvaChartRoot = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
405
405
  variants: {
package/index.esm.js CHANGED
@@ -232,14 +232,14 @@ const useChartColor = () => {
232
232
  */
233
233
  const useLimitDataSet = (data, limit) => {
234
234
  const limitedData = useMemo(() => {
235
- const sortedData = data.sort((a, b) => (b.count ?? 0) - (a.count ?? 0));
235
+ const sortedData = data.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
236
236
  if (sortedData.length > limit) {
237
237
  const result = sortedData.slice(0, limit);
238
238
  result.push({
239
239
  id: "defaultOther",
240
240
  name: "Others",
241
241
  selected: false,
242
- count: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.count ?? 0), 0),
242
+ value: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.value ?? 0), 0),
243
243
  color: DEFAULT_CHART_OTHER,
244
244
  original: { defaultOther: true },
245
245
  });
@@ -260,9 +260,9 @@ const useLimitDataSet = (data, limit) => {
260
260
  const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, }) => {
261
261
  const containerRef = useRef(null);
262
262
  const chartRef = useRef(null);
263
- const totalCount = useMemo(() => data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
263
+ const totalValue = useMemo(() => data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
264
264
  const [hoveringItem, setHoveringItem] = useState(null);
265
- const currentCount = useMemo(() => hoveringItem?.count ?? totalCount, [hoveringItem, totalCount]);
265
+ const currentValue = useMemo(() => hoveringItem?.value ?? totalValue, [hoveringItem, totalValue]);
266
266
  const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints);
267
267
  const { chartColor } = useChartColor();
268
268
  const handleChartReady = useCallback((chart) => {
@@ -344,7 +344,7 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
344
344
  position: "center",
345
345
  fontSize: size === "full" ? 18 : 12,
346
346
  fontWeight: "bold",
347
- formatter: currentCount.toString(),
347
+ formatter: currentValue.toString(),
348
348
  },
349
349
  emphasis: {
350
350
  label: {
@@ -361,7 +361,7 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
361
361
  return {
362
362
  id: item.id,
363
363
  name: item.name,
364
- value: item.count ?? 0,
364
+ value: item.value ?? 0,
365
365
  itemStyle: {
366
366
  color: itemColor,
367
367
  },
@@ -377,8 +377,8 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
377
377
  },
378
378
  ],
379
379
  };
380
- }, [size, currentCount, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
381
- return (jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.count, dataTestId: `legend-${item.id}`, disabled: item.count === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
380
+ }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
381
+ return (jsxs("div", { className: cvaChartRoot({ className, legendPosition }), "data-testid": dataTestId, ref: containerRef, children: [jsx("div", { className: cvaChartContainer({ legendPosition }), children: jsx(Chart, { className: cvaChart({ legendPosition, size }), dataTestId: "pie-chart", onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, showLoading: loading, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend({ legendPosition }), "data-testid": "legend", children: limitedData.map((item, index) => (jsx(LegendItem, { className: "p-1.5 py-0.5", color: item.color ?? chartColor(index), count: item.value, dataTestId: `legend-${item.id}`, disabled: (item.value ?? 0) === 0, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected }, item.id))) }))] }));
382
382
  };
383
383
  const cvaChartRoot = cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
384
384
  variants: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-chart-components",
3
- "version": "1.3.101",
3
+ "version": "1.3.104",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -9,12 +9,12 @@
9
9
  "dependencies": {
10
10
  "echarts": "5.6.0",
11
11
  "react": "19.0.0",
12
- "@trackunit/date-and-time-utils": "1.3.84",
13
- "@trackunit/react-date-and-time-hooks": "1.3.95",
14
- "@trackunit/ui-design-tokens": "1.3.84",
15
- "@trackunit/shared-utils": "1.5.84",
16
- "@trackunit/css-class-variance-utilities": "1.3.84",
17
- "@trackunit/react-components": "1.4.100"
12
+ "@trackunit/date-and-time-utils": "1.3.86",
13
+ "@trackunit/react-date-and-time-hooks": "1.3.97",
14
+ "@trackunit/ui-design-tokens": "1.3.86",
15
+ "@trackunit/shared-utils": "1.5.86",
16
+ "@trackunit/css-class-variance-utilities": "1.3.86",
17
+ "@trackunit/react-components": "1.4.102"
18
18
  },
19
19
  "module": "./index.esm.js",
20
20
  "main": "./index.cjs.js",
package/src/DonutChart/DonutChart.d.ts CHANGED
@@ -11,9 +11,9 @@ export interface ChartData<TProps extends object = object> {
11
11
  */
12
12
  name: string;
13
13
  /**
14
- * Number of elements with wrapped under this item
14
+ * Numeric value for this item
15
15
  */
16
- count?: number;
16
+ value?: number;
17
17
  /**
18
18
  * The color to use in the chart and legends for this item
19
19
  */