@trackunit/react-chart-components 1.7.42 → 1.7.45

package/index.cjs.js

@@ -284,7 +284,7 @@ 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, legendPosition = "Right", 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, }) => {
     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]);
@@ -410,30 +410,20 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
     if (loading) {
         return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", dataTestId: dataTestId ? `${dataTestId}-loading` : "donut-chart-loading" });
     }
-    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: dataTestId ? `chart-${dataTestId}` : undefined, onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, 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))) }))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot$1({ className }), "data-testid": dataTestId, ref: containerRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer(), children: jsxRuntime.jsx(Chart, { className: cvaChart({ size }), dataTestId: dataTestId ? `chart-${dataTestId}` : undefined, onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsxRuntime.jsx("div", { className: cvaLegend(), "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: {
-        legendPosition: {
-            Right: ["items-center", "justify-items-stretch", "flex-row"],
-            Bottom: ["items-center", "flex-col"],
-        },
-    },
-});
-const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["flex-1", "h-full"], {
-    variants: {
-        legendPosition: {
-            Right: ["justify-end"],
-            Bottom: ["flex", "items-center", "w-full"],
-        },
-    },
-});
+const cvaChartRoot$1 = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "w-full",
+    "h-full",
+    "gap-4",
+    "items-center",
+    "justify-items-stretch",
+    "flex-row",
+]);
+const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["flex-1", "h-full", "justify-end"]);
 const cvaChart = cssClassVarianceUtilities.cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"], {
     variants: {
-        legendPosition: {
-            Right: [],
-            Bottom: ["max-h-[230px]"],
-        },
         size: {
             full: ["min-h-[140px]"],
             compact: ["w-[60px]", "h-[60px]"],
@@ -443,17 +433,7 @@ const cvaChart = cssClassVarianceUtilities.cvaMerge(["flex-0", "max-w-[200px]",
         size: "full",
     },
 });
-const cvaLegend = cssClassVarianceUtilities.cvaMerge(["flex", "overflow-auto"], {
-    variants: {
-        legendPosition: {
-            Right: ["justify-start", "flex-col", "flex-1"],
-            Bottom: ["flex-wrap", "justify-end", "flex-row"],
-        },
-    },
-    defaultVariants: {
-        legendPosition: "Right",
-    },
-});
+const cvaLegend = cssClassVarianceUtilities.cvaMerge(["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"]);
 
 /**
  * Create a BarChart with legends. Based on Chart component

package/index.esm.js

@@ -263,7 +263,7 @@ 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, legendPosition = "Right", 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, }) => {
     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]);
@@ -389,30 +389,20 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
     if (loading) {
         return jsx(Spinner, { centering: "centered", dataTestId: dataTestId ? `${dataTestId}-loading` : "donut-chart-loading" });
     }
-    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: dataTestId ? `chart-${dataTestId}` : undefined, onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, 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))) }))] }));
+    return (jsxs("div", { className: cvaChartRoot$1({ className }), "data-testid": dataTestId, ref: containerRef, children: [jsx("div", { className: cvaChartContainer(), children: jsx(Chart, { className: cvaChart({ size }), dataTestId: dataTestId ? `chart-${dataTestId}` : undefined, onChartReady: handleChartReady, onClick: handleChartClick, onEvents: handleChartEvents, options: chartOptions, style: { width: "100%", height: "100%" } }) }), size === "full" && (jsx("div", { className: cvaLegend(), "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: {
-        legendPosition: {
-            Right: ["items-center", "justify-items-stretch", "flex-row"],
-            Bottom: ["items-center", "flex-col"],
-        },
-    },
-});
-const cvaChartContainer = cvaMerge(["flex-1", "h-full"], {
-    variants: {
-        legendPosition: {
-            Right: ["justify-end"],
-            Bottom: ["flex", "items-center", "w-full"],
-        },
-    },
-});
+const cvaChartRoot$1 = cvaMerge([
+    "flex",
+    "w-full",
+    "h-full",
+    "gap-4",
+    "items-center",
+    "justify-items-stretch",
+    "flex-row",
+]);
+const cvaChartContainer = cvaMerge(["flex-1", "h-full", "justify-end"]);
 const cvaChart = cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-self-center"], {
     variants: {
-        legendPosition: {
-            Right: [],
-            Bottom: ["max-h-[230px]"],
-        },
         size: {
             full: ["min-h-[140px]"],
             compact: ["w-[60px]", "h-[60px]"],
@@ -422,17 +412,7 @@ const cvaChart = cvaMerge(["flex-0", "max-w-[200px]", "max-h-[200px]", "place-se
         size: "full",
     },
 });
-const cvaLegend = cvaMerge(["flex", "overflow-auto"], {
-    variants: {
-        legendPosition: {
-            Right: ["justify-start", "flex-col", "flex-1"],
-            Bottom: ["flex-wrap", "justify-end", "flex-row"],
-        },
-    },
-    defaultVariants: {
-        legendPosition: "Right",
-    },
-});
+const cvaLegend = cvaMerge(["flex", "overflow-auto", "justify-start", "flex-col", "flex-1"]);
 
 /**
  * Create a BarChart with legends. Based on Chart component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.7.42",
+  "version": "1.7.45",
   "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.27",
-    "@trackunit/react-date-and-time-hooks": "1.7.35",
-    "@trackunit/ui-design-tokens": "1.7.28",
-    "@trackunit/shared-utils": "1.9.27",
-    "@trackunit/css-class-variance-utilities": "1.7.27",
-    "@trackunit/react-components": "1.9.41",
-    "@trackunit/react-test-setup": "1.4.27"
+    "@trackunit/date-and-time-utils": "1.7.29",
+    "@trackunit/react-date-and-time-hooks": "1.7.37",
+    "@trackunit/ui-design-tokens": "1.7.30",
+    "@trackunit/shared-utils": "1.9.29",
+    "@trackunit/css-class-variance-utilities": "1.7.29",
+    "@trackunit/react-components": "1.9.43",
+    "@trackunit/react-test-setup": "1.4.29"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/DonutChart/DonutChart.d.ts

@@ -44,10 +44,6 @@ export interface DonutChartProps<TProps extends object> extends CommonProps {
      * When compact, the chart is smaller and legends are hidden.
      */
     size?: Size;
-    /**
-     * The position of the legend. Defaults to "Right"
-     */
-    legendPosition?: "Right" | "Bottom";
     /**
      * Maximum number of data points to show in the chart.
      * The remaining will be grouped into a catogory called "others".
@@ -94,5 +90,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, 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, }: DonutChartProps<TProps>) => ReactElement;
 export {};