@trackunit/react-chart-components 1.7.34 → 1.7.38

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 -18
  2. package/index.esm.js +15 -18
  3. package/package.json +8 -8
package/index.cjs.js CHANGED
@@ -288,8 +288,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
288
288
  const containerRef = react.useRef(null);
289
289
  const chartRef = react.useRef(null);
290
290
  const totalValue = react.useMemo(() => overrideTotal ?? data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data, overrideTotal]);
291
- const [hoveringItem, setHoveringItem] = react.useState(null);
292
- const currentValue = react.useMemo(() => hoveringItem?.value ?? totalValue, [hoveringItem, totalValue]);
291
+ const [isHovering, setIsHovering] = react.useState(false);
293
292
  const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData);
294
293
  const { chartColor } = useChartColor();
295
294
  const handleChartReady = react.useCallback((chart) => {
@@ -308,19 +307,18 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
308
307
  }
309
308
  }
310
309
  }, [onClick, data]);
310
+ const handleChartMouseOver = react.useCallback(() => {
311
+ setIsHovering(true);
312
+ }, []);
313
+ const handleChartMouseOut = react.useCallback(() => {
314
+ setIsHovering(false);
315
+ }, []);
311
316
  const handleChartEvents = react.useMemo(() => ({
312
- mouseover: (evt) => {
313
- const hoveredItem = data?.[evt.dataIndex];
314
- if (hoveredItem) {
315
- setHoveringItem(hoveredItem);
316
- }
317
- },
318
- mouseout: () => {
319
- setHoveringItem(null);
320
- },
321
- }), [data, setHoveringItem]);
317
+ mouseover: handleChartMouseOver,
318
+ mouseout: handleChartMouseOut,
319
+ }), [handleChartMouseOver, handleChartMouseOut]);
322
320
  const handleLegendMouseEnter = react.useCallback((item) => {
323
- setHoveringItem(item);
321
+ setIsHovering(true);
324
322
  const chart = chartRef.current;
325
323
  if (!chart) {
326
324
  return;
@@ -336,7 +334,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
336
334
  }
337
335
  }, [limitedData, limitedDataWithoutOthers, showOthers]);
338
336
  const handleLegendMouseLeave = react.useCallback(() => {
339
- setHoveringItem(null);
337
+ setIsHovering(false);
340
338
  const chart = chartRef.current;
341
339
  if (!chart) {
342
340
  return;
@@ -372,11 +370,11 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
372
370
  },
373
371
  avoidLabelOverlap: false,
374
372
  label: {
375
- show: true,
373
+ show: !isHovering,
376
374
  position: "center",
377
375
  fontSize: size === "full" ? 18 : 12,
378
376
  fontWeight: "bold",
379
- formatter: unit ? currentValue.toString() + unit : currentValue.toString(),
377
+ formatter: unit ? totalValue.toString() + unit : totalValue.toString(),
380
378
  },
381
379
  emphasis: {
382
380
  label: {
@@ -402,14 +400,13 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
402
400
  scale: true,
403
401
  scaleSize: 5,
404
402
  },
405
- selected: hoveringItem?.id === item.id,
406
403
  };
407
404
  })
408
405
  .filter(item => item.value),
409
406
  },
410
407
  ],
411
408
  };
412
- }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id, unit]);
409
+ }, [size, isHovering, unit, totalValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor]);
413
410
  if (loading) {
414
411
  return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", dataTestId: dataTestId ? `${dataTestId}-loading` : "donut-chart-loading" });
415
412
  }
package/index.esm.js CHANGED
@@ -267,8 +267,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
267
267
  const containerRef = useRef(null);
268
268
  const chartRef = useRef(null);
269
269
  const totalValue = useMemo(() => overrideTotal ?? data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data, overrideTotal]);
270
- const [hoveringItem, setHoveringItem] = useState(null);
271
- const currentValue = useMemo(() => hoveringItem?.value ?? totalValue, [hoveringItem, totalValue]);
270
+ const [isHovering, setIsHovering] = useState(false);
272
271
  const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData);
273
272
  const { chartColor } = useChartColor();
274
273
  const handleChartReady = useCallback((chart) => {
@@ -287,19 +286,18 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
287
286
  }
288
287
  }
289
288
  }, [onClick, data]);
289
+ const handleChartMouseOver = useCallback(() => {
290
+ setIsHovering(true);
291
+ }, []);
292
+ const handleChartMouseOut = useCallback(() => {
293
+ setIsHovering(false);
294
+ }, []);
290
295
  const handleChartEvents = useMemo(() => ({
291
- mouseover: (evt) => {
292
- const hoveredItem = data?.[evt.dataIndex];
293
- if (hoveredItem) {
294
- setHoveringItem(hoveredItem);
295
- }
296
- },
297
- mouseout: () => {
298
- setHoveringItem(null);
299
- },
300
- }), [data, setHoveringItem]);
296
+ mouseover: handleChartMouseOver,
297
+ mouseout: handleChartMouseOut,
298
+ }), [handleChartMouseOver, handleChartMouseOut]);
301
299
  const handleLegendMouseEnter = useCallback((item) => {
302
- setHoveringItem(item);
300
+ setIsHovering(true);
303
301
  const chart = chartRef.current;
304
302
  if (!chart) {
305
303
  return;
@@ -315,7 +313,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
315
313
  }
316
314
  }, [limitedData, limitedDataWithoutOthers, showOthers]);
317
315
  const handleLegendMouseLeave = useCallback(() => {
318
- setHoveringItem(null);
316
+ setIsHovering(false);
319
317
  const chart = chartRef.current;
320
318
  if (!chart) {
321
319
  return;
@@ -351,11 +349,11 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
351
349
  },
352
350
  avoidLabelOverlap: false,
353
351
  label: {
354
- show: true,
352
+ show: !isHovering,
355
353
  position: "center",
356
354
  fontSize: size === "full" ? 18 : 12,
357
355
  fontWeight: "bold",
358
- formatter: unit ? currentValue.toString() + unit : currentValue.toString(),
356
+ formatter: unit ? totalValue.toString() + unit : totalValue.toString(),
359
357
  },
360
358
  emphasis: {
361
359
  label: {
@@ -381,14 +379,13 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
381
379
  scale: true,
382
380
  scaleSize: 5,
383
381
  },
384
- selected: hoveringItem?.id === item.id,
385
382
  };
386
383
  })
387
384
  .filter(item => item.value),
388
385
  },
389
386
  ],
390
387
  };
391
- }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id, unit]);
388
+ }, [size, isHovering, unit, totalValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor]);
392
389
  if (loading) {
393
390
  return jsx(Spinner, { centering: "centered", dataTestId: dataTestId ? `${dataTestId}-loading` : "donut-chart-loading" });
394
391
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-chart-components",
3
- "version": "1.7.34",
3
+ "version": "1.7.38",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -9,13 +9,13 @@
9
9
  "dependencies": {
10
10
  "echarts": "5.6.0",
11
11
  "react": "19.0.0",
12
- "@trackunit/date-and-time-utils": "1.7.23",
13
- "@trackunit/react-date-and-time-hooks": "1.7.28",
14
- "@trackunit/ui-design-tokens": "1.7.24",
15
- "@trackunit/shared-utils": "1.9.23",
16
- "@trackunit/css-class-variance-utilities": "1.7.23",
17
- "@trackunit/react-components": "1.9.34",
18
- "@trackunit/react-test-setup": "1.4.23"
12
+ "@trackunit/date-and-time-utils": "1.7.26",
13
+ "@trackunit/react-date-and-time-hooks": "1.7.31",
14
+ "@trackunit/ui-design-tokens": "1.7.27",
15
+ "@trackunit/shared-utils": "1.9.26",
16
+ "@trackunit/css-class-variance-utilities": "1.7.26",
17
+ "@trackunit/react-components": "1.9.37",
18
+ "@trackunit/react-test-setup": "1.4.26"
19
19
  },
20
20
  "module": "./index.esm.js",
21
21
  "main": "./index.cjs.js",