@trackunit/react-chart-components 1.7.114 → 1.7.116

package/index.cjs.js

@@ -41,7 +41,7 @@ function isECElementEvent(value) {
 /**
  * A React wrapper for ECharts that handles initialization, events, and cleanup.
  */
-const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", dataTestId, }) => {
+const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", "data-testid": dataTestId, }) => {
     const containerRef = react.useRef(null);
     const internalChartRef = react.useRef(undefined);
     const isInitialRender = react.useRef(true);
@@ -180,13 +180,13 @@ const cvaEChart = cssClassVarianceUtilities.cvaMerge(["w-full", "h-full"]);
  * The Chart component is a wrapper component for ECharts.
  * Handles events and click functionality.
  */
-const Chart = ({ options, showLoading = false, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+const Chart = ({ options, showLoading = false, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", "data-testid": dataTestId, }) => {
     const containerStyle = {
         height: style?.height ?? "300px",
         width: style?.width ?? "100%",
         ...style,
     };
-    return (jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, style: containerStyle, children: showLoading ? (jsxRuntime.jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), loadingOption?.text ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart, { className: className, dataTestId: `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options, renderer: renderer, style: style }), timezoneLabel] })) }));
+    return (jsxRuntime.jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, style: containerStyle, children: showLoading ? (jsxRuntime.jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), loadingOption?.text ? (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart, { className: className, "data-testid": `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options, renderer: renderer, style: style }), timezoneLabel] })) }));
 };
 
 const cvaLegendItem = cssClassVarianceUtilities.cvaMerge([
@@ -236,7 +236,7 @@ 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, unit, hideValue = false, }) => {
+const LegendItem = ({ className, count, label, disabled, selected, onClick, color, "data-testid": 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"] }), hideValue ? null : (jsxRuntime.jsxs("p", { className: "text-xs", children: ["(", count || 0, ")", unit || ""] }))] }));
 };
@@ -300,7 +300,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, dataTestId, maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, }) => {
+const DonutChart = ({ data, size = "full", loading = false, onClick, className, "data-testid": 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]);
@@ -424,9 +424,9 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
         };
     }, [size, isHovering, unit, totalValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor]);
     if (loading) {
-        return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", dataTestId: dataTestId ? `${dataTestId}-loading` : "donut-chart-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: 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))) }))] }));
+    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 }), "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",
@@ -457,7 +457,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, dataTestId, units, showDataZoom = false, }) => {
+const BarChart = ({ series, loading = false, onClick, className, "data-testid": dataTestId, units, showDataZoom = false, }) => {
     const { formatDate } = reactDateAndTimeHooks.useDateAndTime();
     const { chartColor } = useChartColor();
     const seriesData = react.useMemo(() => {
@@ -474,7 +474,7 @@ const BarChart = ({ series, loading = false, onClick, className, dataTestId, uni
         }));
     }, [series, chartColor]);
     const isDateData = (data) => !!data && "date" in data;
-    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, 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), dataTestId: `legend-${item.name}`, label: item.name }, item.name))) }), jsxRuntime.jsx("div", { className: "flex min-h-[260px] w-full flex-1", children: jsxRuntime.jsx(Chart, { dataTestId: "bar-chart", onClick: onClick
+    return (jsxRuntime.jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, 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
                         ? (e) => {
                             onClick(e);
                         }

package/index.esm.js

@@ -20,7 +20,7 @@ function isECElementEvent(value) {
 /**
  * A React wrapper for ECharts that handles initialization, events, and cleanup.
  */
-const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", dataTestId, }) => {
+const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", "data-testid": dataTestId, }) => {
     const containerRef = useRef(null);
     const internalChartRef = useRef(undefined);
     const isInitialRender = useRef(true);
@@ -159,13 +159,13 @@ const cvaEChart = cvaMerge(["w-full", "h-full"]);
  * The Chart component is a wrapper component for ECharts.
  * Handles events and click functionality.
  */
-const Chart = ({ options, showLoading = false, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+const Chart = ({ options, showLoading = false, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", "data-testid": dataTestId, }) => {
     const containerStyle = {
         height: style?.height ?? "300px",
         width: style?.width ?? "100%",
         ...style,
     };
-    return (jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, style: containerStyle, children: showLoading ? (jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), loadingOption?.text ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, dataTestId: `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options, renderer: renderer, style: style }), timezoneLabel] })) }));
+    return (jsx("div", { className: "grid h-full w-full grid-cols-1 grid-rows-1 items-center gap-1", "data-testid": dataTestId, style: containerStyle, children: showLoading ? (jsxs("div", { className: "grid place-items-center overflow-y-auto", "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), loadingOption?.text ? (jsx(Text, { align: "center", subtle: true, children: loadingOption.text })) : null] })) : (jsxs(Fragment, { children: [jsx(EChart, { className: className, "data-testid": `${dataTestId}-chart`, notMerge: !merge, onChartReady: onChartReady, onClick: onClick, onEvents: onEvents, option: options, renderer: renderer, style: style }), timezoneLabel] })) }));
 };
 
 const cvaLegendItem = cvaMerge([
@@ -215,7 +215,7 @@ 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, unit, hideValue = false, }) => {
+const LegendItem = ({ className, count, label, disabled, selected, onClick, color, "data-testid": 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"] }), hideValue ? null : (jsxs("p", { className: "text-xs", children: ["(", count || 0, ")", unit || ""] }))] }));
 };
@@ -279,7 +279,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, dataTestId, maxDataPoints = 6, showOthers = true, unit, overrideTotal, autoSortData = true, hideLegendValues = false, othersName, }) => {
+const DonutChart = ({ data, size = "full", loading = false, onClick, className, "data-testid": 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]);
@@ -403,9 +403,9 @@ const DonutChart = ({ data, size = "full", loading = false, onClick, className,
         };
     }, [size, isHovering, unit, totalValue, showOthers, limitedData, limitedDataWithoutOthers, chartColor]);
     if (loading) {
-        return jsx(Spinner, { centering: "centered", dataTestId: dataTestId ? `${dataTestId}-loading` : "donut-chart-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: 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))) }))] }));
+    return (jsxs("div", { className: cvaChartRoot$1({ className }), "data-testid": dataTestId, ref: containerRef, 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",
@@ -436,7 +436,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, dataTestId, units, showDataZoom = false, }) => {
+const BarChart = ({ series, loading = false, onClick, className, "data-testid": dataTestId, units, showDataZoom = false, }) => {
     const { formatDate } = useDateAndTime();
     const { chartColor } = useChartColor();
     const seriesData = useMemo(() => {
@@ -453,7 +453,7 @@ const BarChart = ({ series, loading = false, onClick, className, dataTestId, uni
         }));
     }, [series, chartColor]);
     const isDateData = (data) => !!data && "date" in data;
-    return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, 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), dataTestId: `legend-${item.name}`, label: item.name }, item.name))) }), jsx("div", { className: "flex min-h-[260px] w-full flex-1", children: jsx(Chart, { dataTestId: "bar-chart", onClick: onClick
+    return (jsxs("div", { className: cvaChartRoot({ className }), "data-testid": dataTestId, 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
                         ? (e) => {
                             onClick(e);
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.7.114",
+  "version": "1.7.116",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,12 +9,12 @@
   "dependencies": {
     "echarts": "5.6.0",
     "react": "19.0.0",
-    "@trackunit/date-and-time-utils": "1.7.75",
-    "@trackunit/react-date-and-time-hooks": "1.7.105",
-    "@trackunit/ui-design-tokens": "1.7.75",
-    "@trackunit/shared-utils": "1.9.75",
-    "@trackunit/css-class-variance-utilities": "1.7.75",
-    "@trackunit/react-components": "1.10.49"
+    "@trackunit/date-and-time-utils": "1.7.77",
+    "@trackunit/react-date-and-time-hooks": "1.7.107",
+    "@trackunit/ui-design-tokens": "1.7.77",
+    "@trackunit/shared-utils": "1.9.77",
+    "@trackunit/css-class-variance-utilities": "1.7.77",
+    "@trackunit/react-components": "1.10.51"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/BarChart/BarChart.d.ts

@@ -60,4 +60,4 @@ export interface BarChartProps<TProps extends object> extends CommonProps {
  * @param {BarChartProps} props - The props for the Chart component
  * @returns {ReactElement} Chart component
  */
-export declare const BarChart: <TProps extends object>({ series, loading, onClick, className, dataTestId, units, showDataZoom, }: BarChartProps<TProps>) => ReactElement;
+export declare const BarChart: <TProps extends object>({ series, loading, onClick, className, "data-testid": dataTestId, units, showDataZoom, }: BarChartProps<TProps>) => ReactElement;

package/src/Chart/Chart.d.ts

@@ -56,10 +56,10 @@ export type ChartProps = CommonProps & {
     /**
      * Value used to find element by `data-testid` attribute.
      */
-    dataTestId?: string;
+    "data-testid"?: string;
 };
 /**
  * The Chart component is a wrapper component for ECharts.
  * Handles events and click functionality.
  */
-export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onEvents, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => ReactElement;
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onEvents, merge, loadingOption, timezoneLabel, renderer, "data-testid": dataTestId, }: ChartProps) => ReactElement;

package/src/DonutChart/DonutChart.d.ts

@@ -96,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, othersName, }: DonutChartProps<TProps>) => ReactElement;
+export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, "data-testid": dataTestId, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, othersName, }: DonutChartProps<TProps>) => ReactElement;
 export {};

package/src/EChart/EChart.d.ts

@@ -47,4 +47,4 @@ export interface EChartProps extends CommonProps {
 /**
  * A React wrapper for ECharts that handles initialization, events, and cleanup.
  */
-export declare const EChart: ({ option, style, className, onChartReady, onClick, onEvents, notMerge, renderer, dataTestId, }: EChartProps) => ReactElement;
+export declare const EChart: ({ option, style, className, onChartReady, onClick, onEvents, notMerge, renderer, "data-testid": dataTestId, }: EChartProps) => ReactElement;

package/src/LegendItem/LegendItem.d.ts

@@ -8,7 +8,7 @@ export interface LegendItemProps {
     onMouseLeave?: () => void;
     color: string;
     className?: string;
-    dataTestId?: string;
+    "data-testid"?: string;
     unit?: "%";
     hideValue?: boolean;
 }
@@ -18,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, unit, hideValue, }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;
+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;