@trackunit/react-chart-components 2.6.48 → 2.6.50

package/index.cjs.js

@@ -573,6 +573,7 @@ const BarChart = ({ series, loading = false, onClick, className, style, "data-te
 };
 const cvaChartRoot$1 = cssClassVarianceUtilities.cva({ base: ["flex", "flex-col", "items-center", "h-full"] });
 
+const CHART_DEFAULT_OTHER_ID = "defaultOther";
 /**
  * Limits the data set to the given limit.
  * If the data set is larger than the limit, the data set is limited to the limit and the rest of the data is added to the "Others" group.
@@ -588,13 +589,18 @@ const useLimitDataSet = (data, limit, autoSortData = true, othersName) => {
         const sortedData = autoSortData ? data.toSorted((a, b) => (b.value ?? 0) - (a.value ?? 0)) : data;
         if (sortedData.length > limit) {
             const result = sortedData.slice(0, limit);
+            const tail = sortedData.slice(limit);
+            const othersOriginal = Object.assign({}, tail[0]?.original, {
+                defaultOther: true,
+                ids: tail.map(item => item.id),
+            });
             result.push({
-                id: "defaultOther",
+                id: CHART_DEFAULT_OTHER_ID,
                 name: othersName ?? "Others",
                 selected: false,
-                value: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.value ?? 0), 0),
+                value: tail.reduce((acc, curr) => acc + (curr.value ?? 0), 0),
                 color: uiDesignTokens.DEFAULT_CHART_OTHER,
-                original: { defaultOther: true },
+                original: othersOriginal,
             });
             return result;
         }
@@ -663,8 +669,8 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
         chartRef.current = chart;
     }, []);
     const handleChartClick = react.useCallback((evt) => {
-        if (onClick && data) {
-            const clickedEntry = data.find(x => {
+        if (onClick) {
+            const clickedEntry = limitedData.find(x => {
                 if (evt.data === null || evt.data === undefined || typeof evt.data !== "object" || !("id" in evt.data)) {
                     return false;
                 }
@@ -674,7 +680,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
                 onClick(clickedEntry);
             }
         }
-    }, [onClick, data]);
+    }, [onClick, limitedData]);
     const handleChartMouseOver = react.useCallback(() => {
         setIsHovering(true);
     }, []);
@@ -799,6 +805,7 @@ const cvaChart = cssClassVarianceUtilities.cva({
 const cvaLegend = cssClassVarianceUtilities.cva({ base: ["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"] });
 
 exports.BarChart = BarChart;
+exports.CHART_DEFAULT_OTHER_ID = CHART_DEFAULT_OTHER_ID;
 exports.Chart = Chart;
 exports.DonutChart = DonutChart;
 exports.EChart = EChart;

package/index.esm.js

@@ -552,6 +552,7 @@ const BarChart = ({ series, loading = false, onClick, className, style, "data-te
 };
 const cvaChartRoot$1 = cva({ base: ["flex", "flex-col", "items-center", "h-full"] });
 
+const CHART_DEFAULT_OTHER_ID = "defaultOther";
 /**
  * Limits the data set to the given limit.
  * If the data set is larger than the limit, the data set is limited to the limit and the rest of the data is added to the "Others" group.
@@ -567,13 +568,18 @@ const useLimitDataSet = (data, limit, autoSortData = true, othersName) => {
         const sortedData = autoSortData ? data.toSorted((a, b) => (b.value ?? 0) - (a.value ?? 0)) : data;
         if (sortedData.length > limit) {
             const result = sortedData.slice(0, limit);
+            const tail = sortedData.slice(limit);
+            const othersOriginal = Object.assign({}, tail[0]?.original, {
+                defaultOther: true,
+                ids: tail.map(item => item.id),
+            });
             result.push({
-                id: "defaultOther",
+                id: CHART_DEFAULT_OTHER_ID,
                 name: othersName ?? "Others",
                 selected: false,
-                value: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.value ?? 0), 0),
+                value: tail.reduce((acc, curr) => acc + (curr.value ?? 0), 0),
                 color: DEFAULT_CHART_OTHER,
-                original: { defaultOther: true },
+                original: othersOriginal,
             });
             return result;
         }
@@ -642,8 +648,8 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
         chartRef.current = chart;
     }, []);
     const handleChartClick = useCallback((evt) => {
-        if (onClick && data) {
-            const clickedEntry = data.find(x => {
+        if (onClick) {
+            const clickedEntry = limitedData.find(x => {
                 if (evt.data === null || evt.data === undefined || typeof evt.data !== "object" || !("id" in evt.data)) {
                     return false;
                 }
@@ -653,7 +659,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
                 onClick(clickedEntry);
             }
         }
-    }, [onClick, data]);
+    }, [onClick, limitedData]);
     const handleChartMouseOver = useCallback(() => {
         setIsHovering(true);
     }, []);
@@ -777,4 +783,4 @@ const cvaChart = cva({
 });
 const cvaLegend = cva({ base: ["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"] });
 
-export { BarChart, Chart, DonutChart, EChart, LegendItem, useChartColor, useChartNumberFormat };
+export { BarChart, CHART_DEFAULT_OTHER_ID, Chart, DonutChart, EChart, LegendItem, useChartColor, useChartNumberFormat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "2.6.48",
+  "version": "2.6.50",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "echarts": "5.6.0",
-    "@trackunit/date-and-time-utils": "1.14.31",
-    "@trackunit/react-date-and-time-hooks": "2.6.47",
-    "@trackunit/ui-design-tokens": "1.15.20",
-    "@trackunit/shared-utils": "1.16.33",
-    "@trackunit/css-class-variance-utilities": "2.0.0",
-    "@trackunit/react-components": "2.13.1"
+    "@trackunit/date-and-time-utils": "1.14.33",
+    "@trackunit/react-date-and-time-hooks": "2.6.49",
+    "@trackunit/ui-design-tokens": "1.15.22",
+    "@trackunit/shared-utils": "1.16.35",
+    "@trackunit/css-class-variance-utilities": "2.0.2",
+    "@trackunit/react-components": "2.13.3"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/index.d.ts

@@ -5,3 +5,4 @@ export * from "./EChart/EChart";
 export * from "./LegendItem/LegendItem";
 export * from "./utils/useChartColor";
 export * from "./utils/useChartNumberFormat";
+export { CHART_DEFAULT_OTHER_ID } from "./utils/useLimitDataSet";

package/src/utils/useLimitDataSet.d.ts

@@ -1,8 +1,11 @@
 import { ChartData } from "../DonutChart/DonutChart";
+export declare const CHART_DEFAULT_OTHER_ID = "defaultOther";
+type ChartTailOthersOriginal = {
+    defaultOther?: boolean;
+    ids?: Array<string>;
+};
 type LimitDataSetReturn<TProps extends object> = {
-    limitedData: Array<ChartData<TProps & {
-        defaultOther?: boolean;
-    }>>;
+    limitedData: Array<ChartData<TProps & ChartTailOthersOriginal>>;
     limitedDataWithoutOthers: Array<ChartData<TProps>>;
 };
 /**