@trackunit/react-chart-components 1.3.49 → 1.3.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.cjs.js +9 -35
  2. package/index.esm.js +10 -36
  3. package/package.json +3 -3
  4. package/src/Chart/Chart.d.ts +10 -30
package/index.cjs.js CHANGED
@@ -16,43 +16,17 @@ var react = require('react');
16
16
  * @param {ChartProps} props - The props for the Chart component
17
17
  * @returns {ReactElement} Chart component
18
18
  */
19
- const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
19
+ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
20
20
  const echartsRef = react.useRef(null);
21
- const eventHandlers = react.useMemo(() => {
22
- const values = {};
23
- if (onDataZoom !== undefined) {
24
- values.dataZoom = onDataZoom;
25
- }
26
- if (onBrush !== undefined) {
27
- values.brush = onBrush;
28
- }
29
- if (onBrushSelected !== undefined) {
30
- values.brushSelected = onBrushSelected;
31
- }
32
- if (mouseLeaveChart !== undefined) {
33
- values.globalout = mouseLeaveChart;
34
- }
35
- if (mouseMoveChart !== undefined) {
36
- values.mouseMove = (event) => {
37
- mouseMoveChart(event, echartsRef.current?.getEchartsInstance());
38
- };
39
- }
40
- if (mouseOverChart !== undefined) {
41
- values.mouseOver = (event) => {
42
- mouseOverChart(event, echartsRef.current?.getEchartsInstance());
43
- };
44
- }
45
- if (mouseOutChart !== undefined) {
46
- values.mouseOut = (event) => {
47
- mouseOutChart(event, echartsRef.current?.getEchartsInstance());
48
- };
49
- }
50
- return values;
51
- }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
52
21
  react.useEffect(() => {
53
22
  const instance = echartsRef.current?.getEchartsInstance();
54
- if (instance && onClick) {
55
- instance.on("click", onClick);
23
+ if (instance) {
24
+ if (onClick) {
25
+ instance.on("click", onClick);
26
+ }
27
+ else {
28
+ instance.getZr().setCursorStyle("default");
29
+ }
56
30
  }
57
31
  return () => {
58
32
  if (instance && !instance.isDisposed()) {
@@ -60,7 +34,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
60
34
  }
61
35
  };
62
36
  }, [onClick, echartsRef]);
63
- return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "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, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
37
+ return (jsxRuntime.jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxRuntime.jsxs("div", { className: cvaChartSpinnerContainer(), "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, notMerge: !merge, onChartReady: onChartReady, onEvents: onEvents, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
64
38
  };
65
39
  const cvaChartContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
66
40
  const cvaChartSpinnerContainer = cssClassVarianceUtilities.cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
package/index.esm.js CHANGED
@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { cvaMerge } from '@trackunit/css-class-variance-utilities';
3
3
  import { Spinner, Text, useHover } from '@trackunit/react-components';
4
4
  import EChart from 'echarts-for-react';
5
- import { useRef, useMemo, useEffect } from 'react';
5
+ import { useRef, useEffect } from 'react';
6
6
 
7
7
  /**
8
8
  * The Chart component is a wrapper component for ECharts.
@@ -14,43 +14,17 @@ import { useRef, useMemo, useEffect } from 'react';
14
14
  * @param {ChartProps} props - The props for the Chart component
15
15
  * @returns {ReactElement} Chart component
16
16
  */
17
- const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOverChart, mouseOutChart, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
17
+ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge = true, loadingOption, timezoneLabel, renderer = "canvas", dataTestId, }) => {
18
18
  const echartsRef = useRef(null);
19
- const eventHandlers = useMemo(() => {
20
- const values = {};
21
- if (onDataZoom !== undefined) {
22
- values.dataZoom = onDataZoom;
23
- }
24
- if (onBrush !== undefined) {
25
- values.brush = onBrush;
26
- }
27
- if (onBrushSelected !== undefined) {
28
- values.brushSelected = onBrushSelected;
29
- }
30
- if (mouseLeaveChart !== undefined) {
31
- values.globalout = mouseLeaveChart;
32
- }
33
- if (mouseMoveChart !== undefined) {
34
- values.mouseMove = (event) => {
35
- mouseMoveChart(event, echartsRef.current?.getEchartsInstance());
36
- };
37
- }
38
- if (mouseOverChart !== undefined) {
39
- values.mouseOver = (event) => {
40
- mouseOverChart(event, echartsRef.current?.getEchartsInstance());
41
- };
42
- }
43
- if (mouseOutChart !== undefined) {
44
- values.mouseOut = (event) => {
45
- mouseOutChart(event, echartsRef.current?.getEchartsInstance());
46
- };
47
- }
48
- return values;
49
- }, [onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, mouseMoveChart, mouseOutChart, mouseOverChart]);
50
19
  useEffect(() => {
51
20
  const instance = echartsRef.current?.getEchartsInstance();
52
- if (instance && onClick) {
53
- instance.on("click", onClick);
21
+ if (instance) {
22
+ if (onClick) {
23
+ instance.on("click", onClick);
24
+ }
25
+ else {
26
+ instance.getZr().setCursorStyle("default");
27
+ }
54
28
  }
55
29
  return () => {
56
30
  if (instance && !instance.isDisposed()) {
@@ -58,7 +32,7 @@ const Chart = ({ options, unsafeOptions, showLoading, className, style, onChartR
58
32
  }
59
33
  };
60
34
  }, [onClick, echartsRef]);
61
- return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "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, notMerge: !merge, onChartReady: onChartReady, onEvents: eventHandlers, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
35
+ return (jsx("div", { className: cvaChartContainer(), "data-testid": dataTestId, style: { height: style?.height ?? "300px", width: style?.width ?? "100%" }, children: showLoading ? (jsxs("div", { className: cvaChartSpinnerContainer(), "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, notMerge: !merge, onChartReady: onChartReady, onEvents: onEvents, option: options ?? unsafeOptions, opts: { width: "auto", height: "auto", renderer: renderer }, ref: echartsRef, style: style }), timezoneLabel] })) }));
62
36
  };
63
37
  const cvaChartContainer = cvaMerge(["grid", "gap-1", "grid-rows-1", "grid-cols-1", "h-full", "w-full", "items-center"]);
64
38
  const cvaChartSpinnerContainer = cvaMerge(["grid", "place-items-center", "overflow-y-auto"]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-chart-components",
3
- "version": "1.3.49",
3
+ "version": "1.3.53",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -10,8 +10,8 @@
10
10
  "echarts": "5.6.0",
11
11
  "echarts-for-react": "^3.0.2",
12
12
  "react": "19.0.0",
13
- "@trackunit/css-class-variance-utilities": "1.3.41",
14
- "@trackunit/react-components": "1.4.49"
13
+ "@trackunit/css-class-variance-utilities": "1.3.43",
14
+ "@trackunit/react-components": "1.4.53"
15
15
  },
16
16
  "module": "./index.esm.js",
17
17
  "main": "./index.cjs.js",
package/src/Chart/Chart.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { EChartsOption, EChartsType } from "echarts";
2
+ import { EChartsOption } from "echarts";
3
3
  import { CSSProperties, ReactElement, ReactNode } from "react";
4
4
  interface UnsafeOptions {
5
5
  [key: string]: any;
@@ -29,6 +29,10 @@ type SafeOptionsCondition = {
29
29
  unsafeOptions?: never;
30
30
  };
31
31
  type ConditionalChartOptions = UnsafeOptionsCondition | SafeOptionsCondition;
32
+ /**
33
+ * https://echarts.apache.org/en/api.html#events
34
+ */
35
+ type EventName = "datazoom" | "brush" | "brushselected" | "globalout" | "mouseover" | "mousedown" | "mouseup" | "mouseOut" | "click" | "dblclick" | "contextmenu";
32
36
  export type ChartProps = CommonProps & ConditionalChartOptions & {
33
37
  /**
34
38
  * Whether or not to low the preloader.
@@ -38,34 +42,6 @@ export type ChartProps = CommonProps & ConditionalChartOptions & {
38
42
  * onClick event.
39
43
  */
40
44
  onClick?: (event: any) => void;
41
- /**
42
- * onDataZoom event.
43
- */
44
- onDataZoom?: (event: any) => void;
45
- /**
46
- * onBrush event.
47
- */
48
- onBrush?: (event: any) => void;
49
- /**
50
- * Event fired when brush is selected.
51
- */
52
- onBrushSelected?: (event: any) => void;
53
- /**
54
- * Event fired when mouse leaves the chart.
55
- */
56
- mouseLeaveChart?: () => void;
57
- /**
58
- * Event fired when mouse is moving over the chart.
59
- */
60
- mouseMoveChart?: (event: any, chart: EChartsType | undefined) => void;
61
- /**
62
- * Event fired when mouse enters the chart.
63
- */
64
- mouseOverChart?: (event: any, chart: EChartsType | undefined) => void;
65
- /**
66
- * Event fired when mouse enters the chart.
67
- */
68
- mouseOutChart?: (event: any, chart: EChartsType | undefined) => void;
69
45
  /**
70
46
  * CSS styles for the chart.
71
47
  */
@@ -74,6 +50,10 @@ export type ChartProps = CommonProps & ConditionalChartOptions & {
74
50
  * To denote of chart is ready or not.
75
51
  */
76
52
  onChartReady?: (chart: any) => void;
53
+ /**
54
+ * Event handlers for the chart.
55
+ */
56
+ onEvents?: Partial<Record<EventName, (event: any) => void>>;
77
57
  /**
78
58
  * Whether to merge with previous option.
79
59
  */
@@ -107,5 +87,5 @@ export type ChartProps = CommonProps & ConditionalChartOptions & {
107
87
  * @param {ChartProps} props - The props for the Chart component
108
88
  * @returns {ReactElement} Chart component
109
89
  */
110
- 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;
90
+ export declare const Chart: ({ options, unsafeOptions, showLoading, className, style, onChartReady, onClick, onEvents, merge, loadingOption, timezoneLabel, renderer, dataTestId, }: ChartProps) => ReactElement;
111
91
  export {};