@trackunit/react-chart-components 1.4.49 → 1.4.52

package/index.cjs.js

@@ -221,9 +221,9 @@ const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "mr-1"
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, }) => {
+const LegendItem = ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, unit, hideValue = false, }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), jsxRuntime.jsxs("p", { className: "text-xs", children: ["(", count || 0, ")"] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsxRuntime.jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : (jsxRuntime.jsxs("p", { className: "text-xs", children: ["(", count || 0, ")", unit || ""] }))] }));
 };
 
 /**
@@ -254,11 +254,12 @@ 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.
  * @returns {object} The limited data set with and without the "others" category.
  */
-const useLimitDataSet = (data, limit) => {
+const useLimitDataSet = (data, limit, autoSortData = true) => {
     const limitedData = react.useMemo(() => {
-        const sortedData = data.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+        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({
@@ -272,7 +273,7 @@ const useLimitDataSet = (data, limit) => {
             return result;
         }
         return sortedData;
-    }, [data, limit]);
+    }, [data, limit, autoSortData]);
     const limitedDataWithoutOthers = react.useMemo(() => limitedData.filter(item => !item.original?.defaultOther), [limitedData]);
     return { limitedData, limitedDataWithoutOthers };
 };
@@ -283,13 +284,13 @@ const useLimitDataSet = (data, limit) => {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, }) => {
+const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, }) => {
     const containerRef = react.useRef(null);
     const chartRef = react.useRef(null);
-    const totalValue = react.useMemo(() => data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
+    const totalValue = react.useMemo(() => overrideTotal ?? data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data, overrideTotal]);
     const [hoveringItem, setHoveringItem] = react.useState(null);
     const currentValue = react.useMemo(() => hoveringItem?.value ?? totalValue, [hoveringItem, totalValue]);
-    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints);
+    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData);
     const { chartColor } = useChartColor();
     const handleChartReady = react.useCallback((chart) => {
         chartRef.current = chart;
@@ -375,12 +376,12 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
                         position: "center",
                         fontSize: size === "full" ? 18 : 12,
                         fontWeight: "bold",
-                        formatter: currentValue.toString(),
+                        formatter: unit ? currentValue.toString() + unit : currentValue.toString(),
                     },
                     emphasis: {
                         label: {
                             show: true,
-                            formatter: "{c}",
+                            formatter: unit ? "{c}" + unit : "{c}",
                         },
                     },
                     labelLine: {
@@ -408,8 +409,8 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
                 },
             ],
         };
-    }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
-    return (jsxRuntime.jsxs("div", { className: cvaChartRoot$1({ 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))) }))] }));
+    }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id, unit]);
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot$1({ 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, hideValue: hideLegendValues, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected, unit: unit }, item.id))) }))] }));
 };
 const cvaChartRoot$1 = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
     variants: {

package/index.esm.js

@@ -200,9 +200,9 @@ const cvaLegendItemIndicator = cvaMerge(["w-3", "mr-1", "h-3", "rounded-[50%]",
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, }) => {
+const LegendItem = ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, unit, hideValue = false, }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), jsxs("p", { className: "text-xs", children: ["(", count || 0, ")"] })] }));
+    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && Boolean(onClick), className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [jsx("div", { className: cvaLegendItemIndicator({ selected }), "data-testid": dataTestId ? `${dataTestId}-indicator` : null, style: { backgroundColor: color } }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : (jsxs("p", { className: "text-xs", children: ["(", count || 0, ")", unit || ""] }))] }));
 };
 
 /**
@@ -233,11 +233,12 @@ 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.
  * @returns {object} The limited data set with and without the "others" category.
  */
-const useLimitDataSet = (data, limit) => {
+const useLimitDataSet = (data, limit, autoSortData = true) => {
     const limitedData = useMemo(() => {
-        const sortedData = data.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+        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({
@@ -251,7 +252,7 @@ const useLimitDataSet = (data, limit) => {
             return result;
         }
         return sortedData;
-    }, [data, limit]);
+    }, [data, limit, autoSortData]);
     const limitedDataWithoutOthers = useMemo(() => limitedData.filter(item => !item.original?.defaultOther), [limitedData]);
     return { limitedData, limitedDataWithoutOthers };
 };
@@ -262,13 +263,13 @@ const useLimitDataSet = (data, limit) => {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, }) => {
+const DonutChart = ({ data, size = "full", loading, onClick, className, dataTestId, legendPosition = "Right", maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, }) => {
     const containerRef = useRef(null);
     const chartRef = useRef(null);
-    const totalValue = useMemo(() => data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data]);
+    const totalValue = useMemo(() => overrideTotal ?? data?.map(item => item.value ?? 0).reduce((a, b) => a + b, 0) ?? 0, [data, overrideTotal]);
     const [hoveringItem, setHoveringItem] = useState(null);
     const currentValue = useMemo(() => hoveringItem?.value ?? totalValue, [hoveringItem, totalValue]);
-    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints);
+    const { limitedData, limitedDataWithoutOthers } = useLimitDataSet(data ?? [], maxDataPoints, autoSortData);
     const { chartColor } = useChartColor();
     const handleChartReady = useCallback((chart) => {
         chartRef.current = chart;
@@ -354,12 +355,12 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
                         position: "center",
                         fontSize: size === "full" ? 18 : 12,
                         fontWeight: "bold",
-                        formatter: currentValue.toString(),
+                        formatter: unit ? currentValue.toString() + unit : currentValue.toString(),
                     },
                     emphasis: {
                         label: {
                             show: true,
-                            formatter: "{c}",
+                            formatter: unit ? "{c}" + unit : "{c}",
                         },
                     },
                     labelLine: {
@@ -387,8 +388,8 @@ const DonutChart = ({ data, size = "full", loading, onClick, className, dataTest
                 },
             ],
         };
-    }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id]);
-    return (jsxs("div", { className: cvaChartRoot$1({ 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))) }))] }));
+    }, [size, currentValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor, hoveringItem?.id, unit]);
+    return (jsxs("div", { className: cvaChartRoot$1({ 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, hideValue: hideLegendValues, label: item.name, onClick: onClick ? () => onClick(item) : undefined, onMouseEnter: () => handleLegendMouseEnter(item), onMouseLeave: handleLegendMouseLeave, selected: item.selected, unit: unit }, item.id))) }))] }));
 };
 const cvaChartRoot$1 = cvaMerge(["flex", "w-full", "h-full", "gap-4"], {
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.4.49",
+  "version": "1.4.52",
   "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.4.28",
-    "@trackunit/react-date-and-time-hooks": "1.4.36",
-    "@trackunit/ui-design-tokens": "1.4.30",
-    "@trackunit/shared-utils": "1.6.28",
-    "@trackunit/css-class-variance-utilities": "1.4.28",
-    "@trackunit/react-components": "1.5.45",
-    "@trackunit/react-test-setup": "1.1.28"
+    "@trackunit/date-and-time-utils": "1.4.31",
+    "@trackunit/react-date-and-time-hooks": "1.4.39",
+    "@trackunit/ui-design-tokens": "1.4.33",
+    "@trackunit/shared-utils": "1.6.31",
+    "@trackunit/css-class-variance-utilities": "1.4.31",
+    "@trackunit/react-components": "1.5.48",
+    "@trackunit/react-test-setup": "1.1.31"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DonutChart/DonutChart.d.ts

@@ -62,6 +62,31 @@ export interface DonutChartProps<TProps extends object> extends CommonProps {
      * @default true
      */
     showOthers?: boolean;
+    /**
+     * The unit of the chart.
+     *
+     */
+    unit?: "%";
+    /**
+     * The value to use as the total value of the chart.
+     * Example of use case:
+     * - If the data is a progress percentage, the total should display the value of the progress instead of 100%.
+     *
+     * If not provided, the total value will be calculated from the data.
+     */
+    overrideTotal?: number;
+    /**
+     * If true, the data will be sorted by value in descending order.
+     *
+     * @default true
+     */
+    autoSortData?: boolean;
+    /**
+     * If true, the value will not be shown in the legend.
+     *
+     * @default false
+     */
+    hideLegendValues?: boolean;
 }
 /**
  * Create a DonutChart with legends based on our current Chart component
@@ -69,5 +94,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, legendPosition, maxDataPoints, showOthers, }: DonutChartProps<TProps>) => ReactElement;
+export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, legendPosition, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, }: DonutChartProps<TProps>) => ReactElement;
 export {};

package/src/LegendItem/LegendItem.d.ts

@@ -9,6 +9,8 @@ export interface LegendItemProps {
     color: string;
     className?: string;
     dataTestId?: string;
+    unit?: "%";
+    hideValue?: boolean;
 }
 /**
  * The LegendItem component is used to show form legends.
@@ -16,4 +18,4 @@ export interface LegendItemProps {
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-export declare const LegendItem: ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendItem: ({ className, count, label, disabled, selected, onClick, color, dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/utils/useLimitDataSet.d.ts

@@ -11,7 +11,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.
  * @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) => LimitDataSetReturn<TProps>;
+export declare const useLimitDataSet: <TProps extends object>(data: Array<ChartData<TProps>>, limit: number, autoSortData?: boolean) => LimitDataSetReturn<TProps>;
 export {};