@trackunit/react-chart-components 0.0.177 → 0.0.178

package/index.cjs.js

@@ -6,31 +6,12 @@ var jsxRuntime = require('react/jsx-runtime');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactComponents = require('@trackunit/react-components');
 var EChart = require('echarts-for-react');
-var React = require('react');
+var react = require('react');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
 var EChart__default = /*#__PURE__*/_interopDefaultLegacy(EChart);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /**
  * The Chart component is a wrapper component for ECharts.
@@ -42,10 +23,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-const Chart = ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
     var _a, _b;
-    const echartsRef = React__namespace.useRef(null);
-    const eventHandlers = React__namespace.useMemo(() => {
+    const echartsRef = react.useRef(null);
+    const eventHandlers = react.useMemo(() => {
         const values = {};
         if (onDataZoom !== undefined) {
             values.dataZoom = onDataZoom;
@@ -79,7 +60,7 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
         }
         return values;
     }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
-    React__namespace.useEffect(() => {
+    react.useEffect(() => {
         var _a;
         const instance = (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
         if (instance && onClick) {
@@ -91,7 +72,7 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
             }
         };
     }, [onClick, echartsRef]);
-    return (jsxRuntime.jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart__default["default"], { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
+    return (jsxRuntime.jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsxRuntime.jsx(reactComponents.Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(EChart__default["default"], { ref: echartsRef, option: options !== null && options !== void 0 ? options : unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
 };
 const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
 const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
@@ -124,15 +105,15 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
                     labelLine: {
                         show: false,
                     },
-                    emphasis: false,
+                    emphasis: { disabled: true },
                     type: "pie",
                     data: [
                         {
-                            key: "Value",
+                            name: "Value",
                             value: count,
                         },
                         {
-                            key: "Total",
+                            name: "Total",
                             value: totalCount - count,
                         },
                     ],

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { Spinner, Text, SkeletonLines, useHover } from '@trackunit/react-components';
 import EChart from 'echarts-for-react';
-import * as React from 'react';
+import { useRef, useMemo, useEffect } from 'react';
 import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
 
 /**
@@ -15,10 +15,10 @@ import { DEFAULT_CHART_COLORS } from '@trackunit/ui-design-tokens';
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-const Chart = ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
+const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
     var _a, _b;
-    const echartsRef = React.useRef(null);
-    const eventHandlers = React.useMemo(() => {
+    const echartsRef = useRef(null);
+    const eventHandlers = useMemo(() => {
         const values = {};
         if (onDataZoom !== undefined) {
             values.dataZoom = onDataZoom;
@@ -52,7 +52,7 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
         }
         return values;
     }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
         const instance = (_a = echartsRef === null || echartsRef === void 0 ? void 0 : echartsRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
         if (instance && onClick) {
@@ -64,7 +64,7 @@ const Chart = ({ options, showLoading, className, style, onChartReady, onClick,
             }
         };
     }, [onClick, echartsRef]);
-    return (jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxs(Fragment, { children: [jsx(EChart, { ref: echartsRef, option: options, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
+    return (jsx("div", { className: cvaChartContainer(), style: { height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px", width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%" }, "data-testid": dataTestId, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "data-testid": `${dataTestId}-loading`, children: [jsx(Spinner, { centering: "centered" }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && (jsx(Text, { align: "center", subtle: true, children: loadingOption.text }))] })) : (jsxs(Fragment, { children: [jsx(EChart, { ref: echartsRef, option: options !== null && options !== void 0 ? options : unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, notMerge: !merge, onEvents: eventHandlers, className: className, style: style, onChartReady: onChartReady }), timezoneLabel] })) }));
 };
 const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
 const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
@@ -97,15 +97,15 @@ const KPIDonutChart = ({ dataTestId, loading, countColor, totalCountColor, count
                     labelLine: {
                         show: false,
                     },
-                    emphasis: false,
+                    emphasis: { disabled: true },
                     type: "pie",
                     data: [
                         {
-                            key: "Value",
+                            name: "Value",
                             value: count,
                         },
                         {
-                            key: "Total",
+                            name: "Total",
                             value: totalCount - count,
                         },
                     ],

package/package.json

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

package/src/Chart/Chart.d.ts

@@ -1,14 +1,35 @@
 import { CommonProps } from "@trackunit/react-components";
-import { EChartsType } from "echarts";
-import * as React from "react";
-export interface IOptionsType {
+import { EChartsOption, EChartsType } from "echarts";
+import { CSSProperties, ReactNode } from "react";
+interface UnsafeOptions {
     [key: string]: any;
 }
-export interface ChartProps extends CommonProps {
+type UnsafeOptionsCondition = {
     /**
      * Option values for EChart.
      */
-    options: IOptionsType;
+    options?: never;
+    /**
+     * Option values for EChart. Not typed.
+     *
+     * @deprecated Use options instead.
+     */
+    unsafeOptions: UnsafeOptions;
+};
+type SafeOptionsCondition = {
+    /**
+     * Option values for EChart.
+     */
+    options: EChartsOption;
+    /**
+     * Option values for EChart. Not typed.
+     *
+     * @deprecated Use options instead.
+     */
+    unsafeOptions?: never;
+};
+type ConditionalChartOptions = UnsafeOptionsCondition | SafeOptionsCondition;
+export type ChartProps = CommonProps & ConditionalChartOptions & {
     /**
      * Whether or not to low the preloader.
      */
@@ -48,7 +69,7 @@ export interface ChartProps extends CommonProps {
     /**
      * CSS styles for the chart.
      */
-    style?: Record<string, string | number>;
+    style?: CSSProperties;
     /**
      * To denote of chart is ready or not.
      */
@@ -66,7 +87,7 @@ export interface ChartProps extends CommonProps {
     /**
      * Time-zone label.
      */
-    timezoneLabel?: React.ReactNode;
+    timezoneLabel?: ReactNode;
     /**
      * Type of rendered used. Either "svg" or "canvas".
      */
@@ -75,7 +96,7 @@ export interface ChartProps extends CommonProps {
      * Value used to find element by `data-testid` attribute.
      */
     dataTestId?: string;
-}
+};
 /**
  * The Chart component is a wrapper component for ECharts.
  *
@@ -86,4 +107,5 @@ export interface ChartProps extends CommonProps {
  * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
-export declare const Chart: ({ options, 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) => JSX.Element;
+export {};