@trackunit/react-chart-components 1.7.84 → 1.7.89

package/index.cjs.js

@@ -270,16 +270,17 @@ const useChartColor = () => {
  * @param data - The data set to limit.
  * @param limit - The limit to apply to the data set.
  * @param autoSortData - If true, the data will be sorted by value in descending order.
+ * @param othersName - The name to use for the "others" category. If not provided, the default name "Others" will be used. Main use if you want to translate the "others" category.
  * @returns {object} The limited data set with and without the "others" category.
  */
-const useLimitDataSet = (data, limit, autoSortData = true) => {
+const useLimitDataSet = (data, limit, autoSortData = true, othersName) => {
     const limitedData = react.useMemo(() => {
         const sortedData = autoSortData ? data.toSorted((a, b) => (b.value ?? 0) - (a.value ?? 0)) : data;
         if (sortedData.length > limit) {
             const result = sortedData.slice(0, limit);
             result.push({
                 id: "defaultOther",
-                name: "Others",
+                name: othersName ?? "Others",
                 selected: false,
                 value: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.value ?? 0), 0),
                 color: uiDesignTokens.DEFAULT_CHART_OTHER,
@@ -288,7 +289,7 @@ const useLimitDataSet = (data, limit, autoSortData = true) => {
             return result;
         }
         return sortedData;
-    }, [data, limit, autoSortData]);
+    }, [data, limit, autoSortData, othersName]);
     const limitedDataWithoutOthers = react.useMemo(() => limitedData.filter(item => !item.original?.defaultOther), [limitedData]);
     return { limitedData, limitedDataWithoutOthers };
 };
@@ -299,12 +300,12 @@ const useLimitDataSet = (data, limit, autoSortData = true) => {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const DonutChart = ({ data, size = "full", loading = false, onClick, className, dataTestId, maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, }) => {
+const DonutChart = ({ data, size = "full", loading = false, onClick, className, dataTestId, maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, }) => {
     const containerRef = react.useRef(null);
     const chartRef = react.useRef(null);
     const totalValue = react.useMemo(() => overrideTotal ?? data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data, overrideTotal]);
     const [isHovering, setIsHovering] = react.useState(false);
-    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData);
+    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData, othersName);
     const { chartColor } = useChartColor();
     const handleChartReady = react.useCallback((chart) => {
         chartRef.current = chart;

package/index.esm.js

@@ -249,16 +249,17 @@ const useChartColor = () => {
  * @param data - The data set to limit.
  * @param limit - The limit to apply to the data set.
  * @param autoSortData - If true, the data will be sorted by value in descending order.
+ * @param othersName - The name to use for the "others" category. If not provided, the default name "Others" will be used. Main use if you want to translate the "others" category.
  * @returns {object} The limited data set with and without the "others" category.
  */
-const useLimitDataSet = (data, limit, autoSortData = true) => {
+const useLimitDataSet = (data, limit, autoSortData = true, othersName) => {
     const limitedData = useMemo(() => {
         const sortedData = autoSortData ? data.toSorted((a, b) => (b.value ?? 0) - (a.value ?? 0)) : data;
         if (sortedData.length > limit) {
             const result = sortedData.slice(0, limit);
             result.push({
                 id: "defaultOther",
-                name: "Others",
+                name: othersName ?? "Others",
                 selected: false,
                 value: sortedData.slice(limit).reduce((acc, curr) => acc + (curr.value ?? 0), 0),
                 color: DEFAULT_CHART_OTHER,
@@ -267,7 +268,7 @@ const useLimitDataSet = (data, limit, autoSortData = true) => {
             return result;
         }
         return sortedData;
-    }, [data, limit, autoSortData]);
+    }, [data, limit, autoSortData, othersName]);
     const limitedDataWithoutOthers = useMemo(() => limitedData.filter(item => !item.original?.defaultOther), [limitedData]);
     return { limitedData, limitedDataWithoutOthers };
 };
@@ -278,12 +279,12 @@ const useLimitDataSet = (data, limit, autoSortData = true) => {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const DonutChart = ({ data, size = "full", loading = false, onClick, className, dataTestId, maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, }) => {
+const DonutChart = ({ data, size = "full", loading = false, onClick, className, dataTestId, maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, }) => {
     const containerRef = useRef(null);
     const chartRef = useRef(null);
     const totalValue = useMemo(() => overrideTotal ?? data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data, overrideTotal]);
     const [isHovering, setIsHovering] = useState(false);
-    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData);
+    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData, othersName);
     const { chartColor } = useChartColor();
     const handleChartReady = useCallback((chart) => {
         chartRef.current = chart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.7.84",
+  "version": "1.7.89",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,13 +9,13 @@
   "dependencies": {
     "echarts": "5.6.0",
     "react": "19.0.0",
-    "@trackunit/date-and-time-utils": "1.7.53",
-    "@trackunit/react-date-and-time-hooks": "1.7.76",
-    "@trackunit/ui-design-tokens": "1.7.53",
-    "@trackunit/shared-utils": "1.9.53",
-    "@trackunit/css-class-variance-utilities": "1.7.53",
-    "@trackunit/react-components": "1.10.21",
-    "@trackunit/react-test-setup": "1.4.53"
+    "@trackunit/date-and-time-utils": "1.7.57",
+    "@trackunit/react-date-and-time-hooks": "1.7.80",
+    "@trackunit/ui-design-tokens": "1.7.57",
+    "@trackunit/shared-utils": "1.9.57",
+    "@trackunit/css-class-variance-utilities": "1.7.57",
+    "@trackunit/react-components": "1.10.25",
+    "@trackunit/react-test-setup": "1.4.57"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DonutChart/DonutChart.d.ts

@@ -83,6 +83,12 @@ export interface DonutChartProps<TProps extends object> extends CommonProps {
      * @default false
      */
     hideLegendValues?: boolean;
+    /**
+     * The name to use for the "others" category. If not provided, the default name "Others" will be used. Main use if you want to translate the "others" category.
+     *
+     * @default "Others"
+     */
+    othersName?: string;
 }
 /**
  * Create a DonutChart with legends based on our current Chart component
@@ -90,5 +96,5 @@ export interface DonutChartProps<TProps extends object> extends CommonProps {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, }: DonutChartProps<TProps>) => ReactElement;
+export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, othersName, }: DonutChartProps<TProps>) => ReactElement;
 export {};

package/src/utils/useLimitDataSet.d.ts

@@ -12,7 +12,8 @@ type LimitDataSetReturn<TProps extends object> = {
  * @param data - The data set to limit.
  * @param limit - The limit to apply to the data set.
  * @param autoSortData - If true, the data will be sorted by value in descending order.
+ * @param othersName - The name to use for the "others" category. If not provided, the default name "Others" will be used. Main use if you want to translate the "others" category.
  * @returns {object} The limited data set with and without the "others" category.
  */
-export declare const useLimitDataSet: <TProps extends object>(data: Array<ChartData<TProps>>, limit: number, autoSortData?: boolean) => LimitDataSetReturn<TProps>;
+export declare const useLimitDataSet: <TProps extends object>(data: Array<ChartData<TProps>>, limit: number, autoSortData?: boolean, othersName?: string | undefined) => LimitDataSetReturn<TProps>;
 export {};