@trackunit/react-chart-components 2.10.16 → 2.12.0

package/index.cjs.js

@@ -41,8 +41,9 @@ 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", "data-testid": dataTestId, }) => {
+const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", "data-testid": dataTestId, ref, }) => {
     const containerRef = react.useRef(null);
+    const mergedRef = reactComponents.useMergeRefs([containerRef, ref]);
     const internalChartRef = react.useRef(undefined);
     const isInitialRender = react.useRef(true);
     const setupEventHandlers = react.useCallback((chart) => {
@@ -172,7 +173,7 @@ const EChart = ({ option, style, className, onChartReady, onClick, onEvents, not
             isInitialRender.current = false;
         }
     }, [option, notMerge]);
-    return jsxRuntime.jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: containerRef, style: style });
+    return jsxRuntime.jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: mergedRef, style: style });
 };
 const cvaEChart = cssClassVarianceUtilities.cva({ base: ["w-full", "h-full"] });
 
@@ -300,7 +301,7 @@ const LegendItemSwatch = ({ color, dataTestId, indicator, symbol }) => {
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, ...indicatorProps }) => {
+const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, ref, ...indicatorProps }) => {
     const handleOnClick = onClick && !disabled ? e => onClick(e) : undefined;
     const handleOnKeyDown = handleOnClick
         ? event => {
@@ -313,7 +314,7 @@ const LegendItem = ({ className, style, count, label, disabled = false, selected
     const indicator = indicatorProps.indicator ?? "fill";
     const symbol = indicatorProps.indicator === "solid line" ? (indicatorProps.symbol ?? "emptyCircle") : "none";
     const isSwitch = handleOnClick !== undefined;
-    return (jsxRuntime.jsxs("div", { "aria-checked": isSwitch ? selected : undefined, className: cvaLegendItem({ disabled, selected, isClickable: isSwitch, className }), "data-testid": dataTestId, onClick: handleOnClick, onKeyDown: handleOnKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: isSwitch ? "switch" : undefined, style: style, tabIndex: isSwitch ? 0 : undefined, children: [jsxRuntime.jsx(LegendItemSwatch, { color: color, dataTestId: dataTestId, indicator: indicator, symbol: symbol }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : jsxRuntime.jsx("p", { className: "text-xs", children: `(${count ?? 0}${unit ?? ""})` })] }));
+    return (jsxRuntime.jsxs("div", { "aria-checked": isSwitch ? selected : undefined, className: cvaLegendItem({ disabled, selected, isClickable: isSwitch, className }), "data-testid": dataTestId, onClick: handleOnClick, onKeyDown: handleOnKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: isSwitch ? "switch" : undefined, style: style, tabIndex: isSwitch ? 0 : undefined, children: [jsxRuntime.jsx(LegendItemSwatch, { color: color, dataTestId: dataTestId, indicator: indicator, symbol: symbol }), jsxRuntime.jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : jsxRuntime.jsx("p", { className: "text-xs", children: `(${count ?? 0}${unit ?? ""})` })] }));
 };
 
 /**

package/index.esm.js

@@ -4,7 +4,7 @@ import { toDateUtil } from '@trackunit/date-and-time-utils';
 import { useLocale, useDateAndTime } from '@trackunit/react-date-and-time-hooks';
 import { DEFAULT_CHART_COLORS, CHART_STATUS_COLORS, fontFamily, DEFAULT_CHART_OTHER } from '@trackunit/ui-design-tokens';
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
-import { Spinner, Text, useMergeRefs } from '@trackunit/react-components';
+import { useMergeRefs, Spinner, Text } from '@trackunit/react-components';
 import { objectKeys, exhaustiveCheck } from '@trackunit/shared-utils';
 import * as echarts from 'echarts';
 
@@ -20,8 +20,9 @@ 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", "data-testid": dataTestId, }) => {
+const EChart = ({ option, style, className, onChartReady, onClick, onEvents, notMerge = false, renderer = "canvas", "data-testid": dataTestId, ref, }) => {
     const containerRef = useRef(null);
+    const mergedRef = useMergeRefs([containerRef, ref]);
     const internalChartRef = useRef(undefined);
     const isInitialRender = useRef(true);
     const setupEventHandlers = useCallback((chart) => {
@@ -151,7 +152,7 @@ const EChart = ({ option, style, className, onChartReady, onClick, onEvents, not
             isInitialRender.current = false;
         }
     }, [option, notMerge]);
-    return jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: containerRef, style: style });
+    return jsx("div", { className: cvaEChart({ className }), "data-testid": dataTestId, ref: mergedRef, style: style });
 };
 const cvaEChart = cva({ base: ["w-full", "h-full"] });
 
@@ -279,7 +280,7 @@ const LegendItemSwatch = ({ color, dataTestId, indicator, symbol }) => {
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, ...indicatorProps }) => {
+const LegendItem = ({ className, style, count, label, disabled = false, selected = false, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit = undefined, hideValue = false, ref, ...indicatorProps }) => {
     const handleOnClick = onClick && !disabled ? e => onClick(e) : undefined;
     const handleOnKeyDown = handleOnClick
         ? event => {
@@ -292,7 +293,7 @@ const LegendItem = ({ className, style, count, label, disabled = false, selected
     const indicator = indicatorProps.indicator ?? "fill";
     const symbol = indicatorProps.indicator === "solid line" ? (indicatorProps.symbol ?? "emptyCircle") : "none";
     const isSwitch = handleOnClick !== undefined;
-    return (jsxs("div", { "aria-checked": isSwitch ? selected : undefined, className: cvaLegendItem({ disabled, selected, isClickable: isSwitch, className }), "data-testid": dataTestId, onClick: handleOnClick, onKeyDown: handleOnKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: isSwitch ? "switch" : undefined, style: style, tabIndex: isSwitch ? 0 : undefined, children: [jsx(LegendItemSwatch, { color: color, dataTestId: dataTestId, indicator: indicator, symbol: symbol }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : jsx("p", { className: "text-xs", children: `(${count ?? 0}${unit ?? ""})` })] }));
+    return (jsxs("div", { "aria-checked": isSwitch ? selected : undefined, className: cvaLegendItem({ disabled, selected, isClickable: isSwitch, className }), "data-testid": dataTestId, onClick: handleOnClick, onKeyDown: handleOnKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ref: ref, role: isSwitch ? "switch" : undefined, style: style, tabIndex: isSwitch ? 0 : undefined, children: [jsx(LegendItemSwatch, { color: color, dataTestId: dataTestId, indicator: indicator, symbol: symbol }), jsxs("p", { className: "truncate text-xs", children: [label, "\u00A0"] }), hideValue ? null : jsx("p", { className: "text-xs", children: `(${count ?? 0}${unit ?? ""})` })] }));
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "2.10.16",
+  "version": "2.12.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "migrations": "./migrations.json",
@@ -9,12 +9,12 @@
   },
   "dependencies": {
     "echarts": "5.6.0",
-    "@trackunit/date-and-time-utils": "1.17.10",
-    "@trackunit/react-date-and-time-hooks": "2.10.16",
-    "@trackunit/ui-design-tokens": "1.18.9",
-    "@trackunit/shared-utils": "1.19.10",
-    "@trackunit/css-class-variance-utilities": "2.3.10",
-    "@trackunit/react-components": "3.8.10"
+    "@trackunit/date-and-time-utils": "1.19.0",
+    "@trackunit/react-date-and-time-hooks": "2.12.0",
+    "@trackunit/ui-design-tokens": "1.20.0",
+    "@trackunit/shared-utils": "1.21.0",
+    "@trackunit/css-class-variance-utilities": "2.5.0",
+    "@trackunit/react-components": "3.10.0"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/EChart/EChart.d.ts

@@ -1,4 +1,4 @@
-import { CommonProps, type Styleable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import type { ECElementEvent, ECharts, EChartsOption } from "echarts";
 import { ReactElement } from "react";
 /**
@@ -15,7 +15,7 @@ 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, Styleable {
+export interface EChartProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Option values for EChart.
      */
@@ -49,4 +49,4 @@ export interface EChartProps extends CommonProps, Styleable {
 /**
  * A React wrapper for ECharts that handles initialization, events, and cleanup.
  */
-export declare const EChart: ({ option, style, className, onChartReady, onClick, onEvents, notMerge, renderer, "data-testid": dataTestId, }: EChartProps) => ReactElement;
+export declare const EChart: ({ option, style, className, onChartReady, onClick, onEvents, notMerge, renderer, "data-testid": dataTestId, ref, }: EChartProps) => ReactElement;

package/src/LegendItem/LegendItem.d.ts

@@ -1,4 +1,4 @@
-import { Refable, type Styleable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement } from "react";
 /**
  * Shape of the colour indicator. `fill` is a solid circle for a block of colour. `solid line` is a
@@ -11,7 +11,7 @@ export type LegendItemIndicator = "fill" | "solid line" | "dashed line";
  * the reader should follow the trend rather than each sample. Dashed lines cannot take a symbol.
  */
 export type LegendItemSymbol = "none" | "emptyCircle";
-interface LegendItemBaseProps extends Refable<HTMLDivElement>, Styleable {
+interface LegendItemBaseProps extends CommonProps, Refable<HTMLDivElement>, Styleable {
     label: string;
     count?: number;
     selected?: boolean;
@@ -20,8 +20,6 @@ interface LegendItemBaseProps extends Refable<HTMLDivElement>, Styleable {
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
     color: string;
-    className?: string;
-    "data-testid"?: string;
     unit?: "%";
     hideValue?: boolean;
 }
@@ -71,5 +69,5 @@ export type LegendItemProps = LegendItemFillProps | LegendItemSolidLineProps | L
  * @param {LegendItem} props - The props for the LegendItem component
  * @returns {ReactElement} LegendItem component
  */
-export declare const LegendItem: ({ className, style, count, label, disabled, selected, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, ...indicatorProps }: LegendItemProps) => ReactElement;
+export declare const LegendItem: ({ className, style, count, label, disabled, selected, onClick, color, "data-testid": dataTestId, onMouseEnter, onMouseLeave, unit, hideValue, ref, ...indicatorProps }: LegendItemProps) => ReactElement;
 export {};