feat: onEvents callback added to viz

lumada-design · Apr 8, 2024 · b77c452 · b77c452
1 parent 05f513c
commit b77c452
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 18 deletions.
diff --git a/packages/viz/src/BarChart/BarChart.tsx b/packages/viz/src/BarChart/BarChart.tsx
@@ -79,6 +79,7 @@ export const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(
       height,
       width,
       onOptionChange,
+      ...others
     } = props;
 
     const chartData = useData({ data, groupBy, sortBy, splitBy, measures });
@@ -140,7 +141,13 @@ export const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(
     });
 
     return (
-      <HvBaseChart ref={ref} option={option} width={width} height={height} />
+      <HvBaseChart
+        ref={ref}
+        option={option}
+        width={width}
+        height={height}
+        {...others}
+      />
     );
   },
 );
diff --git a/packages/viz/src/BaseChart/BaseChart.tsx b/packages/viz/src/BaseChart/BaseChart.tsx
@@ -6,12 +6,12 @@ import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 
 import { useVizTheme } from "../hooks";
-import { HvEChartsOption } from "../types/common";
+import { HvChartCommonProps, HvEChartsOption } from "../types/common";
 
 // Register chart components
 echarts.use([CanvasRenderer, AriaComponent]);
 
-export interface HvBaseChartProps {
+export interface HvBaseChartProps extends Pick<HvChartCommonProps, "onEvents"> {
   /** ECharts option. */
   option: HvEChartsOption;
   /** Charts width. */
@@ -25,7 +25,7 @@ export interface HvBaseChartProps {
  */
 export const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(
   (props, ref) => {
-    const { option, width, height } = props;
+    const { option, width, height, onEvents, ...others } = props;
 
     const { theme, activeTheme } = useVizTheme();
 
@@ -36,8 +36,20 @@ export const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(
 
     const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);
 
+    // Dispose the instance of the chart when the component unmounts. This ensures that
+    // the chart theme will update when the theme changes.
     useEffect(() => {
-      // when the theme changes echarts destroys the chart and mounts it again
+      const instance = chartRef.current?.getEchartsInstance();
+
+      if (!instance) return;
+
+      return () => {
+        instance.dispose();
+      };
+    }, [activeTheme]);
+
+    useEffect(() => {
+      // When the theme changes echarts destroys the chart and mounts it again
       // thus we need to reset the initial option
       if (theme !== currentTheme.current) {
         setInitialOption(option);
@@ -52,13 +64,7 @@ export const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(
       instance.setOption(option, {
         replaceMerge: ["xAxis", "yAxis", "series", "dataset"],
       });
-
-      return () => {
-        // Dispose the instance of the chart when the component unmounts. This ensures that
-        // the chart theme will update when the theme changes.
-        instance.dispose();
-      };
-    }, [theme, option, activeTheme]);
+    }, [theme, option]);
 
     return (
       <ReactECharts
@@ -68,9 +74,11 @@ export const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(
         theme={theme}
         notMerge
         style={{
-          width: width || "100%",
-          height: height || "100%",
+          width: width ?? "100%",
+          height: height ?? "100%",
         }}
+        onEvents={onEvents}
+        {...others}
       />
     );
   },

diff --git a/packages/viz/src/ConfusionMatrix/ConfusionMatrix.tsx b/packages/viz/src/ConfusionMatrix/ConfusionMatrix.tsx
@@ -108,6 +108,7 @@ export const HvConfusionMatrix = forwardRef<
     format = "square",
     classes: classesProp,
     onOptionChange,
+    ...others
   } = props;
 
   const { classes } = useClasses(classesProp);
@@ -266,5 +267,5 @@ export const HvConfusionMatrix = forwardRef<
     onOptionChange,
   });
 
-  return <HvBaseChart ref={ref} option={option} {...size} />;
+  return <HvBaseChart ref={ref} option={option} {...size} {...others} />;
 });
diff --git a/packages/viz/src/DonutChart/DonutChart.tsx b/packages/viz/src/DonutChart/DonutChart.tsx
@@ -65,6 +65,7 @@ export const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(
       type = "regular",
       slicesNameFormatter,
       onOptionChange,
+      ...others
     } = props;
 
     const chartData = useData({ data, groupBy, measures, sortBy });
@@ -108,7 +109,13 @@ export const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(
     });
 
     return (
-      <HvBaseChart ref={ref} option={option} width={width} height={height} />
+      <HvBaseChart
+        ref={ref}
+        option={option}
+        width={width}
+        height={height}
+        {...others}
+      />
     );
   },
 );
diff --git a/packages/viz/src/LineChart/LineChart.tsx b/packages/viz/src/LineChart/LineChart.tsx
@@ -86,6 +86,7 @@ export const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(
       width,
       height,
       onOptionChange,
+      ...others
     } = props;
 
     const chartData = useData({ data, groupBy, measures, splitBy, sortBy });
@@ -143,7 +144,13 @@ export const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(
     });
 
     return (
-      <HvBaseChart ref={ref} option={option} width={width} height={height} />
+      <HvBaseChart
+        ref={ref}
+        option={option}
+        width={width}
+        height={height}
+        {...others}
+      />
     );
   },
 );
diff --git a/packages/viz/src/types/common.ts b/packages/viz/src/types/common.ts
@@ -1,4 +1,5 @@
-import { Arrayable } from "@hitachivantara/uikit-react-core";
+import type { EChartsType } from "echarts";
+import { Arrayable, HvExtraProps } from "@hitachivantara/uikit-react-core";
 
 import { HvChartAxis } from "./axis";
 import { HvChartData } from "./generic";
@@ -14,6 +15,17 @@ import { HvChartTooltip } from "./tooltip";
 // This type was created to have something a little bit more specific.
 export type HvEChartsOption = Record<string, any>;
 
+// Echarts doesn't provide much information about the params properties so we extend HvExtraProps
+interface EventParams extends HvExtraProps {
+  componentIndex?: number;
+  componentType?: string;
+  dataIndex?: number;
+  value?: any;
+  targetType?: string;
+  type?: string;
+  event?: HvExtraProps;
+}
+
 /** Props common among all charts. */
 export interface HvChartCommonProps {
   /** Chart data. */
@@ -38,6 +50,11 @@ export interface HvChartCommonProps {
    * For more information about the ECharts option and the available properties, take a look at their [documentation](https://echarts.apache.org/en/option.html).
    */
   onOptionChange?: (option: HvEChartsOption) => HvEChartsOption;
+  /** Callback to bind events to the chart. */
+  onEvents?: Record<
+    string,
+    (params: EventParams, instance?: EChartsType) => void
+  >;
 }
 
 export interface HvChartXAxis extends HvChartAxis {