@trackunit/react-chart-components 1.24.1 → 1.25.0

package/index.cjs.js

@@ -276,9 +276,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 = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, }) => {
+const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, }) => {
     const handleOnClick = onClick && !disabled ? e => onClick(e) : undefined;
-    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && onClick !== undefined, 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 ?? ""] }))] }));
+    return (jsxRuntime.jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && onClick !== undefined, className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, 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 ?? ""] }))] }));
 };
 
 /**
@@ -381,7 +381,7 @@ const useLimitDataSet = (data, limit, autoSortData = true, othersName) => {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const DonutChart = ({ data, size = "full", loading = false, onClick, className, "data-testid": dataTestId, maxDataPoints = 6, showOthers = true, unit = undefined, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, ref, }) => {
+const DonutChart = ({ data, size = "full", loading = false, onClick, className, style, "data-testid": dataTestId, maxDataPoints = 6, showOthers = true, unit = undefined, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, ref, }) => {
     const containerRef = react.useRef(null);
     const mergedRef = reactComponents.useMergeRefs([containerRef, ref]);
     const chartRef = react.useRef(null);
@@ -508,7 +508,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
     if (loading) {
         return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", "data-testid": dataTestId ? `${dataTestId}-loading` : "donut-chart-loading" });
     }
-    return (jsxRuntime.jsxs("div", { className: cvaChartRoot$1({ className }), "data-testid": dataTestId, ref: mergedRef, children: [jsxRuntime.jsx("div", { className: cvaChartContainer(), children: jsxRuntime.jsx(Chart, { className: cvaChart({ size }), "data-testid": 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, "data-testid": `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: mergedRef, style: style, children: [jsxRuntime.jsx("div", { className: cvaChartContainer(), children: jsxRuntime.jsx(Chart, { className: cvaChart({ size }), "data-testid": 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, "data-testid": `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",
@@ -579,7 +579,7 @@ const cvaLegend = cssClassVarianceUtilities.cvaMerge(["flex", "overflow-auto", "
  * @param {BarChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const BarChart = ({ series, loading = false, onClick, className, "data-testid": dataTestId, units, showDataZoom = false, ref, }) => {
+const BarChart = ({ series, loading = false, onClick, className, style, "data-testid": dataTestId, units, showDataZoom = false, ref, }) => {
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const { chartColor } = useChartColor();
     const seriesData = react.useMemo(() => {
@@ -596,7 +596,7 @@ const BarChart = ({ series, loading = false, onClick, className, "data-testid":
         }));
     }, [series, chartColor]);
     const isDateData = (data) => !!data && "date" in data;
-    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("div", { className: "flex-0 flex flex-row gap-2 place-self-end pr-8", "data-testid": "legend", children: seriesData.map((item, index) => (jsxRuntime.jsx(LegendItem, { color: item.color || chartColor(index), "data-testid": `legend-${item.name}`, label: item.name }, item.name))) }), jsxRuntime.jsx("div", { className: "flex min-h-[260px] w-full flex-1", children: jsxRuntime.jsx(Chart, { "data-testid": "bar-chart", onClick: onClick
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsxRuntime.jsx("div", { className: "flex-0 flex flex-row gap-2 place-self-end pr-8", "data-testid": "legend", children: seriesData.map((item, index) => (jsxRuntime.jsx(LegendItem, { color: item.color || chartColor(index), "data-testid": `legend-${item.name}`, label: item.name }, item.name))) }), jsxRuntime.jsx("div", { className: "flex w-full flex-1", children: jsxRuntime.jsx(Chart, { "data-testid": "bar-chart", onClick: onClick
                         ? (e) => {
                             onClick(e);
                         }
@@ -659,7 +659,7 @@ const BarChart = ({ series, loading = false, onClick, className, "data-testid":
                             },
                         ],
                         series: seriesData,
-                    }, showLoading: loading, style: { height: "360px", width: "100%" } }) })] }));
+                    }, showLoading: loading, style: { height: "100%", minHeight: "150px", width: "100%" } }) })] }));
 };
 const cvaChartRoot = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "items-center", "h-full"]);
 

package/index.esm.js

@@ -255,9 +255,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 = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, }) => {
+const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, }) => {
     const handleOnClick = onClick && !disabled ? e => onClick(e) : undefined;
-    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && onClick !== undefined, 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 ?? ""] }))] }));
+    return (jsxs("div", { className: cvaLegendItem({ disabled, selected, isClickable: !disabled && onClick !== undefined, className }), "data-testid": dataTestId, onClick: handleOnClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, 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 ?? ""] }))] }));
 };
 
 /**
@@ -360,7 +360,7 @@ const useLimitDataSet = (data, limit, autoSortData = true, othersName) => {
  * @param {DonutChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const DonutChart = ({ data, size = "full", loading = false, onClick, className, "data-testid": dataTestId, maxDataPoints = 6, showOthers = true, unit = undefined, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, ref, }) => {
+const DonutChart = ({ data, size = "full", loading = false, onClick, className, style, "data-testid": dataTestId, maxDataPoints = 6, showOthers = true, unit = undefined, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, ref, }) => {
     const containerRef = useRef(null);
     const mergedRef = useMergeRefs([containerRef, ref]);
     const chartRef = useRef(null);
@@ -487,7 +487,7 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
     if (loading) {
         return jsx(Spinner, { centering: "centered", "data-testid": dataTestId ? `${dataTestId}-loading` : "donut-chart-loading" });
     }
-    return (jsxs("div", { className: cvaChartRoot$1({ className }), "data-testid": dataTestId, ref: mergedRef, children: [jsx("div", { className: cvaChartContainer(), children: jsx(Chart, { className: cvaChart({ size }), "data-testid": 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, "data-testid": `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: mergedRef, style: style, children: [jsx("div", { className: cvaChartContainer(), children: jsx(Chart, { className: cvaChart({ size }), "data-testid": 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, "data-testid": `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",
@@ -558,7 +558,7 @@ const cvaLegend = cvaMerge(["flex", "overflow-auto", "justify-start", "flex-col"
  * @param {BarChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-const BarChart = ({ series, loading = false, onClick, className, "data-testid": dataTestId, units, showDataZoom = false, ref, }) => {
+const BarChart = ({ series, loading = false, onClick, className, style, "data-testid": dataTestId, units, showDataZoom = false, ref, }) => {
     const { formatDate } = useDateAndTime();
     const { chartColor } = useChartColor();
     const seriesData = useMemo(() => {
@@ -575,7 +575,7 @@ const BarChart = ({ series, loading = false, onClick, className, "data-testid":
         }));
     }, [series, chartColor]);
     const isDateData = (data) => !!data && "date" in data;
-    return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("div", { className: "flex-0 flex flex-row gap-2 place-self-end pr-8", "data-testid": "legend", children: seriesData.map((item, index) => (jsx(LegendItem, { color: item.color || chartColor(index), "data-testid": `legend-${item.name}`, label: item.name }, item.name))) }), jsx("div", { className: "flex min-h-[260px] w-full flex-1", children: jsx(Chart, { "data-testid": "bar-chart", onClick: onClick
+    return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, ref: ref, style: style, children: [jsx("div", { className: "flex-0 flex flex-row gap-2 place-self-end pr-8", "data-testid": "legend", children: seriesData.map((item, index) => (jsx(LegendItem, { color: item.color || chartColor(index), "data-testid": `legend-${item.name}`, label: item.name }, item.name))) }), jsx("div", { className: "flex w-full flex-1", children: jsx(Chart, { "data-testid": "bar-chart", onClick: onClick
                         ? (e) => {
                             onClick(e);
                         }
@@ -638,7 +638,7 @@ const BarChart = ({ series, loading = false, onClick, className, "data-testid":
                             },
                         ],
                         series: seriesData,
-                    }, showLoading: loading, style: { height: "360px", width: "100%" } }) })] }));
+                    }, showLoading: loading, style: { height: "100%", minHeight: "150px", width: "100%" } }) })] }));
 };
 const cvaChartRoot = cvaMerge(["flex", "flex-col", "items-center", "h-full"]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",

package/src/BarChart/BarChart.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ECElementEvent } from "echarts";
 import { ReactElement } from "react";
 export interface BarChartData<TProps extends object = object> {
@@ -32,7 +32,7 @@ export interface SeriesData<TProps extends object> {
     color?: string;
     data: Array<BarChartGenericData<TProps>> | Array<BarChartDateData<TProps>>;
 }
-export interface BarChartProps<TProps extends object> extends CommonProps, Refable<HTMLDivElement> {
+export interface BarChartProps<TProps extends object> extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * Array of series of data points to show
      */
@@ -100,4 +100,4 @@ export interface BarChartProps<TProps extends object> extends CommonProps, Refab
  * @param {BarChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-export declare const BarChart: <TProps extends object>({ series, loading, onClick, className, "data-testid": dataTestId, units, showDataZoom, ref, }: BarChartProps<TProps>) => ReactElement;
+export declare const BarChart: <TProps extends object>({ series, loading, onClick, className, style, "data-testid": dataTestId, units, showDataZoom, ref, }: BarChartProps<TProps>) => ReactElement;

package/src/Chart/Chart.d.ts

@@ -1,8 +1,8 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import type { ECElementEvent, ECharts, EChartsOption } from "echarts";
-import { CSSProperties, ReactElement, ReactNode } from "react";
+import { ReactElement, ReactNode } from "react";
 import { BrushEvent, type EventName } from "../EChart/EChart";
-export type ChartProps = CommonProps & Refable<HTMLDivElement> & {
+export type ChartProps = CommonProps & Refable<HTMLDivElement> & Styleable & {
     /**
      * Option values for EChart.
      */
@@ -15,10 +15,6 @@ export type ChartProps = CommonProps & Refable<HTMLDivElement> & {
      * onClick event handler.
      */
     onClick?: (event: ECElementEvent) => void;
-    /**
-     * CSS styles for the chart.
-     */
-    style?: CSSProperties;
     /**
      * Called when the chart instance is ready.
      */

package/src/DonutChart/DonutChart.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 type Size = "compact" | "full";
 export interface ChartData<TProps extends object = object> {
@@ -27,7 +27,7 @@ export interface ChartData<TProps extends object = object> {
      */
     original?: TProps;
 }
-export interface DonutChartProps<TProps extends object> extends CommonProps, Refable<HTMLDivElement> {
+export interface DonutChartProps<TProps extends object> extends CommonProps, Refable<HTMLDivElement>, Styleable {
     /**
      * Array of data points to show
      */
@@ -137,5 +137,5 @@ export interface DonutChartProps<TProps extends object> extends CommonProps, Ref
  * @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, "data-testid": dataTestId, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, othersName, ref, }: DonutChartProps<TProps>) => ReactElement;
+export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, style, "data-testid": dataTestId, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, othersName, ref, }: DonutChartProps<TProps>) => ReactElement;
 export {};

package/src/EChart/EChart.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, type Styleable } from "@trackunit/react-components";
 import type { ECElementEvent, ECharts, EChartsOption } from "echarts";
-import { CSSProperties, ReactElement } from "react";
+import { ReactElement } from "react";
 /**
  * https://echarts.apache.org/en/api.html#events
  */
@@ -15,15 +15,11 @@ export type BrushEvent = {
     areas: Array<BrushArea>;
 };
 export type EventName = "click" | "dblclick" | "mousewheel" | "mouseout" | "mouseover" | "mouseup" | "mousedown" | "mousemove" | "contextmenu" | "drag" | "dragstart" | "dragend" | "dragenter" | "dragleave" | "dragover" | "drop" | "brush" | "brushselected" | "brushend" | "globalout" | "datarangeselected" | "legendselectchanged" | "datazoom";
-export interface EChartProps extends CommonProps {
+export interface EChartProps extends CommonProps, Styleable {
     /**
      * Option values for EChart.
      */
     option: EChartsOption;
-    /**
-     * CSS styles for the chart.
-     */
-    style?: CSSProperties;
     /**
      * Called when the chart instance is ready.
      */

package/src/LegendItem/LegendItem.d.ts

@@ -1,6 +1,6 @@
-import { Refable } from "@trackunit/react-components";
+import { Refable, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler } from "react";
-export interface LegendItemProps extends Refable<HTMLDivElement> {
+export interface LegendItemProps extends Refable<HTMLDivElement>, Styleable {
     label: string;
     count?: number;
     selected?: boolean;
@@ -20,4 +20,4 @@ export interface LegendItemProps extends Refable<HTMLDivElement> {
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-export declare const LegendItem: ({ className, count, label, disabled, selected, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LegendItem: ({ className, style, count, label, disabled, selected, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;