@trackunit/react-chart-components 1.3.23 → 1.3.28

package/index.cjs.js

@@ -15,7 +15,7 @@ var uiDesignTokens = require('@trackunit/ui-design-tokens');
  * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
  *
  * @param {ChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
+ * @returns {ReactElement} Chart component
  */
 const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
     const echartsRef = react.useRef(null);
@@ -67,14 +67,14 @@ const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "
 const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
 /**
- 
-    A donut chart component to display a KPI value and its total in a circular chart.
+
+ A donut chart component to display a KPI value and its total in a circular chart.
  *
-    @param {string} countColor - The color to be used for the value portion in the chart.
-    @param {string} totalCountColor - The color to be used for the total portion in the chart.
-    @param {number} count - The count of the KPI to be displayed.
-    @param {number} totalCount - The total count of the KPI to be displayed.
-    @returns {JSX.Element} - A donut chart displaying the KPI count and total count.
+ @param {string} countColor - The color to be used for the value portion in the chart.
+ @param {string} totalCountColor - The color to be used for the total portion in the chart.
+ @param {number} count - The count of the KPI to be displayed.
+ @param {number} totalCount - The total count of the KPI to be displayed.
+ @returns {ReactElement} - A donut chart displaying the KPI count and total count.
  */
 const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
     return (jsxRuntime.jsx(Chart, { dataTestId: dataTestId, options: {
@@ -147,7 +147,7 @@ const cvaKpiContainer = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col",
  * @param {string[]} colors - Colors of the Kpi.
  * @param {boolean} loading - Whether the value is loading or not.
  * @param {boolean} inline - Boolean to control whether the KPI is displayed inline or not.
- * @returns {JSX.Element} Kpi component
+ * @returns {ReactElement} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
     return (jsxRuntime.jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsxRuntime.jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 20 }), jsxRuntime.jsx(reactComponents.SkeletonLines, { lines: 1, width: 50 })] })) : (jsxRuntime.jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxRuntime.jsxs("span", { className: cvaKpiCountContainer(), children: [jsxRuntime.jsx("span", { className: cvaKpiCount(), children: count ?? "-" }), suffix ? (jsxRuntime.jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsxRuntime.jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
@@ -200,7 +200,7 @@ const cvaLegendItemIndicator = cssClassVarianceUtilities.cvaMerge(["w-3", "h-3",
  * The LegendItem component is used to show form legends.
  *
  * @param {LegendItem} props - The props for the LegendItem component
- * @returns {JSX.Element} LegendItem component
+ * @returns {ReactElement} LegendItem component
  */
 const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
@@ -211,7 +211,7 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
  * Create a PieChart with legends based on our current Chart component
  *
  * @param {PieChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
+ * @returns {ReactElement} Chart component
  */
 const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
     const totalCount = data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0;

package/index.esm.js

@@ -13,7 +13,7 @@ import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
  * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
  *
  * @param {ChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
+ * @returns {ReactElement} Chart component
  */
 const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
     const echartsRef = useRef(null);
@@ -65,14 +65,14 @@ const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1
 const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
 
 /**
- 
-    A donut chart component to display a KPI value and its total in a circular chart.
+
+ A donut chart component to display a KPI value and its total in a circular chart.
  *
-    @param {string} countColor - The color to be used for the value portion in the chart.
-    @param {string} totalCountColor - The color to be used for the total portion in the chart.
-    @param {number} count - The count of the KPI to be displayed.
-    @param {number} totalCount - The total count of the KPI to be displayed.
-    @returns {JSX.Element} - A donut chart displaying the KPI count and total count.
+ @param {string} countColor - The color to be used for the value portion in the chart.
+ @param {string} totalCountColor - The color to be used for the total portion in the chart.
+ @param {number} count - The count of the KPI to be displayed.
+ @param {number} totalCount - The total count of the KPI to be displayed.
+ @returns {ReactElement} - A donut chart displaying the KPI count and total count.
  */
 const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count, totalCount = count, }) => {
     return (jsx(Chart, { dataTestId: dataTestId, options: {
@@ -145,7 +145,7 @@ const cvaKpiContainer = cvaMerge(["flex", "flex-col", "items-baseline"], {
  * @param {string[]} colors - Colors of the Kpi.
  * @param {boolean} loading - Whether the value is loading or not.
  * @param {boolean} inline - Boolean to control whether the KPI is displayed inline or not.
- * @returns {JSX.Element} Kpi component
+ * @returns {ReactElement} Kpi component
  */
 const Kpi = ({ className, dataTestId, showChart = false, count, description, totalCount, countColor, totalCountColor, suffix, inline = false, loading = false, }) => {
     return (jsxs("div", { className: cvaKpi({ className }), "data-testid": dataTestId, children: [showChart ? (jsx(KPIDonutChart, { count: Number(count), countColor: countColor, dataTestId: dataTestId ? dataTestId + "-donut-chart" : undefined, loading: loading, totalCount: totalCount, totalCountColor: totalCountColor })) : null, loading ? (jsxs("div", { className: cvaKpiContainer({ inline }), "data-testid": dataTestId ? `${dataTestId}-skeleton-lines` : null, children: [jsx(SkeletonLines, { lines: 1, width: 20 }), jsx(SkeletonLines, { lines: 1, width: 50 })] })) : (jsxs("div", { className: cvaKpiContainer({ inline, showChart }), "data-testid": dataTestId ? `${dataTestId}-container` : null, children: [jsxs("span", { className: cvaKpiCountContainer(), children: [jsx("span", { className: cvaKpiCount(), children: count ?? "-" }), suffix ? (jsx("span", { className: cvaKpiSuffix(), "data-testid": dataTestId ? `${dataTestId}-suffix` : null, children: suffix })) : null] }), jsx("span", { className: cvaKpiDescription(), children: description })] }))] }));
@@ -198,7 +198,7 @@ const cvaLegendItemIndicator = cvaMerge(["w-3", "h-3", "rounded-[50%]"], {
  * The LegendItem component is used to show form legends.
  *
  * @param {LegendItem} props - The props for the LegendItem component
- * @returns {JSX.Element} LegendItem component
+ * @returns {ReactElement} LegendItem component
  */
 const LegendItem = ({ className, label, disabled, selected, onClick, color, dataTestId }) => {
     const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
@@ -209,7 +209,7 @@ const LegendItem = ({ className, label, disabled, selected, onClick, color, data
  * Create a PieChart with legends based on our current Chart component
  *
  * @param {PieChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
+ * @returns {ReactElement} Chart component
  */
 const PieChart = ({ data, size = "full", loading, onClick, className, dataTestId, }) => {
     const totalCount = data?.map(item => item.count ?? 0).reduce((a, b) => a + b, 0) ?? 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-chart-components",
-  "version": "1.3.23",
+  "version": "1.3.28",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,10 +9,10 @@
   "dependencies": {
     "echarts": "5.6.0",
     "echarts-for-react": "^3.0.2",
-    "react": "18.3.1",
-    "@trackunit/css-class-variance-utilities": "1.3.23",
-    "@trackunit/react-components": "1.4.23",
-    "@trackunit/ui-design-tokens": "1.3.23"
+    "react": "19.0.0",
+    "@trackunit/css-class-variance-utilities": "1.3.28",
+    "@trackunit/react-components": "1.4.28",
+    "@trackunit/ui-design-tokens": "1.3.28"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/Chart/Chart.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { EChartsOption, EChartsType } from "echarts";
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactElement, ReactNode } from "react";
 interface UnsafeOptions {
     [key: string]: any;
 }
@@ -105,7 +105,7 @@ export type ChartProps = CommonProps & ConditionalChartOptions & {
  * For more information see the [eCharts documentation](https://github.com/hustcc/echarts-for-react).
  *
  * @param {ChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
+ * @returns {ReactElement} Chart component
  */
-export declare const Chart: ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => JSX.Element;
+export declare const Chart: ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => ReactElement;
 export {};

package/src/KPI/KPIDonutChart.d.ts

@@ -35,14 +35,14 @@ interface DonutChartProps {
     dataTestId?: string;
 }
 /**
- 
-    A donut chart component to display a KPI value and its total in a circular chart.
+
+ A donut chart component to display a KPI value and its total in a circular chart.
  *
-    @param {string} countColor - The color to be used for the value portion in the chart.
-    @param {string} totalCountColor - The color to be used for the total portion in the chart.
-    @param {number} count - The count of the KPI to be displayed.
-    @param {number} totalCount - The total count of the KPI to be displayed.
-    @returns {JSX.Element} - A donut chart displaying the KPI count and total count.
+ @param {string} countColor - The color to be used for the value portion in the chart.
+ @param {string} totalCountColor - The color to be used for the total portion in the chart.
+ @param {number} count - The count of the KPI to be displayed.
+ @param {number} totalCount - The total count of the KPI to be displayed.
+ @returns {ReactElement} - A donut chart displaying the KPI count and total count.
  */
 export declare const KPIDonutChart: ({ dataTestId, loading, countColor, totalCountColor, count, totalCount, }: DonutChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/KPI/Kpi.d.ts

@@ -69,6 +69,6 @@ export interface KpiProps extends CommonProps {
  * @param {string[]} colors - Colors of the Kpi.
  * @param {boolean} loading - Whether the value is loading or not.
  * @param {boolean} inline - Boolean to control whether the KPI is displayed inline or not.
- * @returns {JSX.Element} Kpi component
+ * @returns {ReactElement} Kpi component
  */
 export declare const Kpi: ({ className, dataTestId, showChart, count, description, totalCount, countColor, totalCountColor, suffix, inline, loading, }: KpiProps) => import("react/jsx-runtime").JSX.Element;

package/src/LegendItem/LegendItem.d.ts

@@ -11,6 +11,6 @@ export interface LegendItemProps {
  * The LegendItem component is used to show form legends.
  *
  * @param {LegendItem} props - The props for the LegendItem component
- * @returns {JSX.Element} LegendItem component
+ * @returns {ReactElement} LegendItem component
  */
 export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: LegendItemProps) => import("react/jsx-runtime").JSX.Element;

package/src/PieChart/PieChart.d.ts

@@ -1,4 +1,5 @@
 import { CommonProps } from "@trackunit/react-components";
+import { ReactElement } from "react";
 type Size = "compact" | "full";
 export interface ChartData<TProps extends object = object> {
     /**
@@ -48,7 +49,7 @@ export interface PieChartProps<TProps extends object> extends CommonProps {
  * Create a PieChart with legends based on our current Chart component
  *
  * @param {PieChartProps} props - The props for the Chart component
- * @returns {JSX.Element} Chart component
+ * @returns {ReactElement} Chart component
  */
-export declare const PieChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<TProps>) => JSX.Element;
+export declare const PieChart: <TProps extends object>({ data, size, loading, onClick, className, dataTestId, }: PieChartProps<TProps>) => ReactElement;
 export {};