@hitachivantara/uikit-react-viz 5.6.78 → 5.7.0

package/dist/cjs/BarChart/BarChart.cjs

@@ -65,7 +65,8 @@ const HvBarChart = react.forwardRef(
       classes,
       height,
       width,
-      onOptionChange
+      onOptionChange,
+      ...others
     } = props;
     const chartData = useData.useData({ data, groupBy, sortBy, splitBy, measures });
     const chartDataset = useDataset.useDataset(chartData);
@@ -115,7 +116,16 @@ const HvBarChart = react.forwardRef(
       },
       onOptionChange
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseChart.HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
   }
 );
 exports.HvBarChart = HvBarChart;

package/dist/cjs/BaseChart/BaseChart.cjs

@@ -32,12 +32,20 @@ const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
 echarts__namespace.use([renderers.CanvasRenderer, components.AriaComponent]);
 const HvBaseChart = react.forwardRef(
   (props, ref) => {
-    const { option, width, height } = props;
+    const { option, width, height, onEvents, ...others } = props;
     const { theme, activeTheme } = useVizTheme.useVizTheme();
     const currentTheme = react.useRef(theme);
     const chartRef = react.useRef(null);
     const forkedRef = utils.useForkRef(ref, chartRef);
     const [initialOption, setInitialOption] = react.useState(option);
+    react.useEffect(() => {
+      const instance = chartRef.current?.getEchartsInstance();
+      if (!instance)
+        return;
+      return () => {
+        instance.dispose();
+      };
+    }, [activeTheme]);
     react.useEffect(() => {
       if (theme !== currentTheme.current) {
         setInitialOption(option);
@@ -50,10 +58,7 @@ const HvBaseChart = react.forwardRef(
       instance.setOption(option, {
         replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
       });
-      return () => {
-        instance.dispose();
-      };
-    }, [theme, option, activeTheme]);
+    }, [theme, option]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       ReactECharts__default.default,
       {
@@ -63,9 +68,11 @@ const HvBaseChart = react.forwardRef(
         theme,
         notMerge: true,
         style: {
-          width: width || "100%",
-          height: height || "100%"
-        }
+          width: width ?? "100%",
+          height: height ?? "100%"
+        },
+        onEvents,
+        ...others
       }
     );
   }

package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs

@@ -60,7 +60,8 @@ const HvConfusionMatrix = react.forwardRef((props, ref) => {
     height,
     format = "square",
     classes: classesProp,
-    onOptionChange
+    onOptionChange,
+    ...others
   } = props;
   const { classes } = ConfusionMatrix_styles.useClasses(classesProp);
   const groupByKey = index.getGroupKey(groupBy);
@@ -175,6 +176,6 @@ const HvConfusionMatrix = react.forwardRef((props, ref) => {
     },
     onOptionChange
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, ...size });
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, ...size, ...others });
 });
 exports.HvConfusionMatrix = HvConfusionMatrix;

package/dist/cjs/DonutChart/DonutChart.cjs

@@ -54,7 +54,8 @@ const HvDonutChart = react.forwardRef(
       height,
       type = "regular",
       slicesNameFormatter,
-      onOptionChange
+      onOptionChange,
+      ...others
     } = props;
     const chartData = useData.useData({ data, groupBy, measures, sortBy });
     const chartDataset = useDataset.useDataset(chartData);
@@ -89,7 +90,16 @@ const HvDonutChart = react.forwardRef(
       },
       onOptionChange
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseChart.HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
   }
 );
 exports.HvDonutChart = HvDonutChart;

package/dist/cjs/LineChart/LineChart.cjs

@@ -67,7 +67,8 @@ const HvLineChart = react.forwardRef(
       tooltip,
       width,
       height,
-      onOptionChange
+      onOptionChange,
+      ...others
     } = props;
     const chartData = useData.useData({ data, groupBy, measures, splitBy, sortBy });
     const chartDataset = useDataset.useDataset(chartData);
@@ -113,7 +114,16 @@ const HvLineChart = react.forwardRef(
       },
       onOptionChange
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseChart.HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
   }
 );
 exports.HvLineChart = HvLineChart;

package/dist/esm/BarChart/BarChart.js

@@ -44,7 +44,8 @@ const HvBarChart = forwardRef(
       classes,
       height,
       width,
-      onOptionChange
+      onOptionChange,
+      ...others
     } = props;
     const chartData = useData({ data, groupBy, sortBy, splitBy, measures });
     const chartDataset = useDataset(chartData);
@@ -94,7 +95,16 @@ const HvBarChart = forwardRef(
       },
       onOptionChange
     });
-    return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+    return /* @__PURE__ */ jsx(
+      HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
   }
 );
 export {

package/dist/esm/BarChart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvBarChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontal = false,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      stack,\n      seriesNameFormatter,\n      measures,\n      legend,\n      tooltip,\n      classes,\n      height,\n      width,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n      defaultType: horizontal ? \"categorical\" : \"continuous\",\n    });\n\n    const chartXAxis = useXAxis({\n      type: horizontal ? \"continuous\" : \"categorical\",\n      ...xAxis,\n    });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"bar\",\n      data: chartData,\n      groupBy,\n      measures,\n      stack,\n      nameFormatter: seriesNameFormatter,\n      horizontal,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n      icon: \"square\",\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n      horizontal,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,QAAQ,SAAS,UAAU;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa,aAAa,gBAAgB;AAAA,IAAA,CAC3C;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,aAAa,eAAe;AAAA,MAClC,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,MACpB,MAAM;AAAA,IAAA,CACP;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
+{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvBarChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontal = false,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      stack,\n      seriesNameFormatter,\n      measures,\n      legend,\n      tooltip,\n      classes,\n      height,\n      width,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n      defaultType: horizontal ? \"categorical\" : \"continuous\",\n    });\n\n    const chartXAxis = useXAxis({\n      type: horizontal ? \"continuous\" : \"categorical\",\n      ...xAxis,\n    });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"bar\",\n      data: chartData,\n      groupBy,\n      measures,\n      stack,\n      nameFormatter: seriesNameFormatter,\n      horizontal,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n      icon: \"square\",\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n      horizontal,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,QAAQ,SAAS,UAAU;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa,aAAa,gBAAgB;AAAA,IAAA,CAC3C;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,aAAa,eAAe;AAAA,MAClC,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,MACpB,MAAM;AAAA,IAAA,CACP;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/BaseChart/BaseChart.js

@@ -9,12 +9,20 @@ import { useVizTheme } from "../hooks/useVizTheme.js";
 echarts.use([CanvasRenderer, AriaComponent]);
 const HvBaseChart = forwardRef(
   (props, ref) => {
-    const { option, width, height } = props;
+    const { option, width, height, onEvents, ...others } = props;
     const { theme, activeTheme } = useVizTheme();
     const currentTheme = useRef(theme);
     const chartRef = useRef(null);
     const forkedRef = useForkRef(ref, chartRef);
     const [initialOption, setInitialOption] = useState(option);
+    useEffect(() => {
+      const instance = chartRef.current?.getEchartsInstance();
+      if (!instance)
+        return;
+      return () => {
+        instance.dispose();
+      };
+    }, [activeTheme]);
     useEffect(() => {
       if (theme !== currentTheme.current) {
         setInitialOption(option);
@@ -27,10 +35,7 @@ const HvBaseChart = forwardRef(
       instance.setOption(option, {
         replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
       });
-      return () => {
-        instance.dispose();
-      };
-    }, [theme, option, activeTheme]);
+    }, [theme, option]);
     return /* @__PURE__ */ jsx(
       ReactECharts,
       {
@@ -40,9 +45,11 @@ const HvBaseChart = forwardRef(
         theme,
         notMerge: true,
         style: {
-          width: width || "100%",
-          height: height || "100%"
-        }
+          width: width ?? "100%",
+          height: height ?? "100%"
+        },
+        onEvents,
+        ...others
       }
     );
   }

package/dist/esm/BaseChart/BaseChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { AriaComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  /** ECharts option. */\n  option: HvEChartsOption;\n  /** Charts width. */\n  width?: echarts.ResizeOpts[\"width\"];\n  /** Charts height. */\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n  (props, ref) => {\n    const { option, width, height } = props;\n\n    const { theme, activeTheme } = useVizTheme();\n\n    const currentTheme = useRef<string | undefined>(theme);\n    const chartRef = useRef<ReactECharts>(null);\n\n    const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n    const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n    useEffect(() => {\n      // when the theme changes echarts destroys the chart and mounts it again\n      // thus we need to reset the initial option\n      if (theme !== currentTheme.current) {\n        setInitialOption(option);\n        currentTheme.current = theme;\n        return;\n      }\n\n      const instance = chartRef.current?.getEchartsInstance();\n\n      if (!instance) return;\n\n      instance.setOption(option, {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      });\n\n      return () => {\n        // Dispose the instance of the chart when the component unmounts. This ensures that\n        // the chart theme will update when the theme changes.\n        instance.dispose();\n      };\n    }, [theme, option, activeTheme]);\n\n    return (\n      <ReactECharts\n        ref={forkedRef}\n        echarts={echarts}\n        option={initialOption}\n        theme={theme}\n        notMerge\n        style={{\n          width: width || \"100%\",\n          height: height || \"100%\",\n        }}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,OAAA,IAAW;AAElC,UAAM,EAAE,OAAO,YAAY,IAAI,YAAY;AAErC,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AAEpC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAE1E,cAAU,MAAM;AAGV,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,MAAA,CACrD;AAED,aAAO,MAAM;AAGX,iBAAS,QAAQ;AAAA,MAAA;AAAA,IAElB,GAAA,CAAC,OAAO,QAAQ,WAAW,CAAC;AAG7B,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,UAAQ;AAAA,QACR,OAAO;AAAA,UACL,OAAO,SAAS;AAAA,UAChB,QAAQ,UAAU;AAAA,QACpB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"BaseChart.js","sources":["../../../src/BaseChart/BaseChart.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { AriaComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\n\nimport { useVizTheme } from \"../hooks\";\nimport { HvChartCommonProps, HvEChartsOption } from \"../types/common\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps extends Pick<HvChartCommonProps, \"onEvents\"> {\n  /** ECharts option. */\n  option: HvEChartsOption;\n  /** Charts width. */\n  width?: echarts.ResizeOpts[\"width\"];\n  /** Charts height. */\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(\n  (props, ref) => {\n    const { option, width, height, onEvents, ...others } = props;\n\n    const { theme, activeTheme } = useVizTheme();\n\n    const currentTheme = useRef<string | undefined>(theme);\n    const chartRef = useRef<ReactECharts>(null);\n\n    const forkedRef = useForkRef<ReactECharts>(ref, chartRef);\n\n    const [initialOption, setInitialOption] = useState<HvEChartsOption>(option);\n\n    // Dispose the instance of the chart when the component unmounts. This ensures that\n    // the chart theme will update when the theme changes.\n    useEffect(() => {\n      const instance = chartRef.current?.getEchartsInstance();\n\n      if (!instance) return;\n\n      return () => {\n        instance.dispose();\n      };\n    }, [activeTheme]);\n\n    useEffect(() => {\n      // When the theme changes echarts destroys the chart and mounts it again\n      // thus we need to reset the initial option\n      if (theme !== currentTheme.current) {\n        setInitialOption(option);\n        currentTheme.current = theme;\n        return;\n      }\n\n      const instance = chartRef.current?.getEchartsInstance();\n\n      if (!instance) return;\n\n      instance.setOption(option, {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      });\n    }, [theme, option]);\n\n    return (\n      <ReactECharts\n        ref={forkedRef}\n        echarts={echarts}\n        option={initialOption}\n        theme={theme}\n        notMerge\n        style={{\n          width: width ?? \"100%\",\n          height: height ?? \"100%\",\n        }}\n        onEvents={onEvents}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAWA,QAAQ,IAAI,CAAC,gBAAgB,aAAa,CAAC;AAcpC,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,QAAQ,OAAO,QAAQ,UAAU,GAAG,OAAW,IAAA;AAEvD,UAAM,EAAE,OAAO,YAAY,IAAI,YAAY;AAErC,UAAA,eAAe,OAA2B,KAAK;AAC/C,UAAA,WAAW,OAAqB,IAAI;AAEpC,UAAA,YAAY,WAAyB,KAAK,QAAQ;AAExD,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAA0B,MAAM;AAI1E,cAAU,MAAM;AACR,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,aAAO,MAAM;AACX,iBAAS,QAAQ;AAAA,MAAA;AAAA,IACnB,GACC,CAAC,WAAW,CAAC;AAEhB,cAAU,MAAM;AAGV,UAAA,UAAU,aAAa,SAAS;AAClC,yBAAiB,MAAM;AACvB,qBAAa,UAAU;AACvB;AAAA,MACF;AAEM,YAAA,WAAW,SAAS,SAAS,mBAAmB;AAEtD,UAAI,CAAC;AAAU;AAEf,eAAS,UAAU,QAAQ;AAAA,QACzB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,MAAA,CACrD;AAAA,IAAA,GACA,CAAC,OAAO,MAAM,CAAC;AAGhB,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,UAAQ;AAAA,QACR,OAAO;AAAA,UACL,OAAO,SAAS;AAAA,UAChB,QAAQ,UAAU;AAAA,QACpB;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/ConfusionMatrix/ConfusionMatrix.js

@@ -39,7 +39,8 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
     height,
     format = "square",
     classes: classesProp,
-    onOptionChange
+    onOptionChange,
+    ...others
   } = props;
   const { classes } = useClasses(classesProp);
   const groupByKey = getGroupKey(groupBy);
@@ -154,7 +155,7 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
     },
     onOptionChange
   });
-  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, ...size });
+  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, ...size, ...others });
 });
 export {
   HvConfusionMatrix

package/dist/esm/ConfusionMatrix/ConfusionMatrix.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n  GridComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvVisualMapHookProps,\n  useData,\n  useGrid,\n  useOption,\n  useTooltip,\n  useVisualMap,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport {\n  HvChartCommonProps,\n  HvChartXAxis,\n  HvChartYAxis,\n} from \"../types/common\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { getGroupKey } from \"../utils\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\n\n// Register chart components\necharts.use([\n  HeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n]);\n\nexport type HvConfusionMatrixClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvConfusionMatrixProps\n  extends Omit<HvChartCommonProps, \"tooltip\"> {\n  /** Column to measure. */\n  measure: HvConfusionMatrixMeasure;\n  /** Columns to use to split the measure. */\n  splitBy?: Arrayable<string>;\n  /**\n   * Column to use for the delta confusion matrix.\n   *\n   * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.\n   */\n  delta?: boolean | string;\n  /** Options for the xAxis, i.e. the horizontal axis. */\n  xAxis?: HvChartXAxis;\n  /** Options for the yAxis, i.e. the vertical axis. */\n  yAxis?: HvChartYAxis;\n  /** Tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** Format of the confusion matrix. Defaults to `square`. */\n  format?: HvConfusionMatrixFormat;\n  /** Properties to customize the prediction values. */\n  valuesProps?: HvConfusionMatrixValuesProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvConfusionMatrixClasses;\n  /**\n   * Color scale of the confusion matrix.\n   *\n   * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.\n   * An array of objects can also be used to create a custom scale.\n   * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.\n   */\n  colorScale?: [string, string] | HvConfusionMatrixColorScale[];\n}\n\n/**\n * Confusion Matrix is a table displaying the performance of a predictive model.\n * Typically the columns show the predicted class and the rows the expected class.\n * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.\n */\nexport const HvConfusionMatrix = forwardRef<\n  ReactECharts,\n  HvConfusionMatrixProps\n>((props, ref) => {\n  const {\n    legend,\n    groupBy,\n    measure,\n    sortBy,\n    splitBy,\n    grid,\n    data: dataProp,\n    tooltip,\n    xAxis,\n    yAxis,\n    colorScale: colorScaleProp,\n    delta,\n    valuesProps,\n    width,\n    height,\n    format = \"square\",\n    classes: classesProp,\n    onOptionChange,\n  } = props;\n\n  const { classes } = useClasses(classesProp);\n\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useData({\n    data: dataProp,\n    groupBy,\n    measures: [measure],\n    sortBy: sortBy ?? groupBy, // automatically orders x axis to create the confusion matrix\n    splitBy,\n    delta: typeof delta === \"string\" ? delta : undefined,\n  });\n\n  const colorScale = useColorScale({\n    delta: !!delta,\n    data: chartData,\n    custom: colorScaleProp,\n    filterKey: groupByKey,\n  });\n\n  const chartVisualMap = useVisualMap({\n    show: colorScale?.pieces != null,\n    type: colorScale?.pieces != null ? \"piecewise\" : \"continuous\",\n    ...(colorScale as Pick<\n      HvVisualMapHookProps,\n      \"max\" | \"min\" | \"colorScale\" | \"pieces\"\n    >),\n    ...legend,\n  });\n\n  const chartTooltip = useTooltip({\n    component: (params) => {\n      const value = params?.series?.[0].value;\n      const fmtValue =\n        typeof measure !== \"string\" && measure.valueFormatter\n          ? measure.valueFormatter(value)\n          : tooltip?.valueFormatter\n            ? tooltip?.valueFormatter(value)\n            : value;\n      const ftmTitle = tooltip?.titleFormatter\n        ? tooltip.titleFormatter(params?.title)\n        : params?.title;\n\n      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;\n\n      return `\n        <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n                <div>\n                    <p class=\"${classes.tooltipText}\">${content}</p>\n                </div>\n            </div>\n        </div>`;\n    },\n    ...tooltip,\n  });\n\n  const chartYAxis = useYAxis({\n    axes: [\n      {\n        type: \"categorical\",\n        name: \"True Label\",\n        position: \"left\",\n        ...yAxis,\n        nameProps: {\n          location: \"center\",\n          padding:\n            yAxis?.nameProps?.location == null ||\n            yAxis?.nameProps?.location === \"center\"\n              ? yAxis?.position === \"right\"\n                ? [50, 0, 0, 0]\n                : [0, 0, 50, 0]\n              : undefined,\n          ...yAxis?.nameProps,\n        },\n        data: chartData\n          .columnNames()\n          .filter((p) => p !== groupByKey)\n          .reverse(),\n      },\n    ],\n  });\n\n  const chartXAxis = useXAxis({\n    name: \"Predicted Value\",\n    position: \"top\",\n    ...xAxis,\n    nameProps: {\n      location: \"center\",\n      padding:\n        xAxis?.nameProps?.location == null ||\n        xAxis?.nameProps?.location === \"center\"\n          ? xAxis?.position === \"bottom\"\n            ? [30, 0, 0, 0]\n            : [0, 0, 30, 0]\n          : undefined,\n      ...xAxis?.nameProps,\n    },\n    data: chartData.array(groupByKey),\n  });\n\n  const chartSeries = useSeries({\n    data: chartData,\n    filterKey: groupByKey,\n    valuesProps,\n    delta: !!(delta && colorScale == null),\n  });\n\n  const chartGridLayout = useGridLayout({\n    data: chartData,\n    format,\n    filterKey: groupByKey,\n    visualMapVisible: chartVisualMap.visualMap.show,\n    visualMapYPosition: chartVisualMap.visualMap.top,\n    xAxisPosition: chartXAxis.xAxis.position,\n  });\n\n  const chartGrid = useGrid({\n    // If sizes are provided, the grid size should automatically adapt to the values provided\n    width: width != null ? undefined : chartGridLayout.size.width,\n    height: height != null ? undefined : chartGridLayout.size.height,\n    ...chartGridLayout.padding,\n    ...grid,\n  });\n\n  const size = useMemo(() => {\n    return {\n      width,\n      // Echarts has a problem were the height is always set to 300px\n      // Thus, we need to update the height to make sure the chart is not cut out\n      height:\n        height ??\n        chartGridLayout.size.height +\n          chartGridLayout.padding.bottom +\n          chartGridLayout.padding.top,\n    };\n  }, [\n    chartGridLayout.padding.bottom,\n    chartGridLayout.padding.top,\n    chartGridLayout.size.height,\n    height,\n    width,\n  ]);\n\n  const option = useOption({\n    option: {\n      ...chartVisualMap,\n      ...chartTooltip,\n      ...chartGrid,\n      ...chartXAxis,\n      ...chartYAxis,\n      ...chartSeries,\n    },\n    onOptionChange,\n  });\n\n  return <HvBaseChart ref={ref} option={option} {...size} />;\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n  GridComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvVisualMapHookProps,\n  useData,\n  useGrid,\n  useOption,\n  useTooltip,\n  useVisualMap,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport {\n  HvChartCommonProps,\n  HvChartXAxis,\n  HvChartYAxis,\n} from \"../types/common\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { getGroupKey } from \"../utils\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\n\n// Register chart components\necharts.use([\n  HeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n]);\n\nexport type HvConfusionMatrixClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvConfusionMatrixProps\n  extends Omit<HvChartCommonProps, \"tooltip\"> {\n  /** Column to measure. */\n  measure: HvConfusionMatrixMeasure;\n  /** Columns to use to split the measure. */\n  splitBy?: Arrayable<string>;\n  /**\n   * Column to use for the delta confusion matrix.\n   *\n   * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.\n   */\n  delta?: boolean | string;\n  /** Options for the xAxis, i.e. the horizontal axis. */\n  xAxis?: HvChartXAxis;\n  /** Options for the yAxis, i.e. the vertical axis. */\n  yAxis?: HvChartYAxis;\n  /** Tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** Format of the confusion matrix. Defaults to `square`. */\n  format?: HvConfusionMatrixFormat;\n  /** Properties to customize the prediction values. */\n  valuesProps?: HvConfusionMatrixValuesProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvConfusionMatrixClasses;\n  /**\n   * Color scale of the confusion matrix.\n   *\n   * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.\n   * An array of objects can also be used to create a custom scale.\n   * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.\n   */\n  colorScale?: [string, string] | HvConfusionMatrixColorScale[];\n}\n\n/**\n * Confusion Matrix is a table displaying the performance of a predictive model.\n * Typically the columns show the predicted class and the rows the expected class.\n * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.\n */\nexport const HvConfusionMatrix = forwardRef<\n  ReactECharts,\n  HvConfusionMatrixProps\n>((props, ref) => {\n  const {\n    legend,\n    groupBy,\n    measure,\n    sortBy,\n    splitBy,\n    grid,\n    data: dataProp,\n    tooltip,\n    xAxis,\n    yAxis,\n    colorScale: colorScaleProp,\n    delta,\n    valuesProps,\n    width,\n    height,\n    format = \"square\",\n    classes: classesProp,\n    onOptionChange,\n    ...others\n  } = props;\n\n  const { classes } = useClasses(classesProp);\n\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useData({\n    data: dataProp,\n    groupBy,\n    measures: [measure],\n    sortBy: sortBy ?? groupBy, // automatically orders x axis to create the confusion matrix\n    splitBy,\n    delta: typeof delta === \"string\" ? delta : undefined,\n  });\n\n  const colorScale = useColorScale({\n    delta: !!delta,\n    data: chartData,\n    custom: colorScaleProp,\n    filterKey: groupByKey,\n  });\n\n  const chartVisualMap = useVisualMap({\n    show: colorScale?.pieces != null,\n    type: colorScale?.pieces != null ? \"piecewise\" : \"continuous\",\n    ...(colorScale as Pick<\n      HvVisualMapHookProps,\n      \"max\" | \"min\" | \"colorScale\" | \"pieces\"\n    >),\n    ...legend,\n  });\n\n  const chartTooltip = useTooltip({\n    component: (params) => {\n      const value = params?.series?.[0].value;\n      const fmtValue =\n        typeof measure !== \"string\" && measure.valueFormatter\n          ? measure.valueFormatter(value)\n          : tooltip?.valueFormatter\n            ? tooltip?.valueFormatter(value)\n            : value;\n      const ftmTitle = tooltip?.titleFormatter\n        ? tooltip.titleFormatter(params?.title)\n        : params?.title;\n\n      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;\n\n      return `\n        <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n                <div>\n                    <p class=\"${classes.tooltipText}\">${content}</p>\n                </div>\n            </div>\n        </div>`;\n    },\n    ...tooltip,\n  });\n\n  const chartYAxis = useYAxis({\n    axes: [\n      {\n        type: \"categorical\",\n        name: \"True Label\",\n        position: \"left\",\n        ...yAxis,\n        nameProps: {\n          location: \"center\",\n          padding:\n            yAxis?.nameProps?.location == null ||\n            yAxis?.nameProps?.location === \"center\"\n              ? yAxis?.position === \"right\"\n                ? [50, 0, 0, 0]\n                : [0, 0, 50, 0]\n              : undefined,\n          ...yAxis?.nameProps,\n        },\n        data: chartData\n          .columnNames()\n          .filter((p) => p !== groupByKey)\n          .reverse(),\n      },\n    ],\n  });\n\n  const chartXAxis = useXAxis({\n    name: \"Predicted Value\",\n    position: \"top\",\n    ...xAxis,\n    nameProps: {\n      location: \"center\",\n      padding:\n        xAxis?.nameProps?.location == null ||\n        xAxis?.nameProps?.location === \"center\"\n          ? xAxis?.position === \"bottom\"\n            ? [30, 0, 0, 0]\n            : [0, 0, 30, 0]\n          : undefined,\n      ...xAxis?.nameProps,\n    },\n    data: chartData.array(groupByKey),\n  });\n\n  const chartSeries = useSeries({\n    data: chartData,\n    filterKey: groupByKey,\n    valuesProps,\n    delta: !!(delta && colorScale == null),\n  });\n\n  const chartGridLayout = useGridLayout({\n    data: chartData,\n    format,\n    filterKey: groupByKey,\n    visualMapVisible: chartVisualMap.visualMap.show,\n    visualMapYPosition: chartVisualMap.visualMap.top,\n    xAxisPosition: chartXAxis.xAxis.position,\n  });\n\n  const chartGrid = useGrid({\n    // If sizes are provided, the grid size should automatically adapt to the values provided\n    width: width != null ? undefined : chartGridLayout.size.width,\n    height: height != null ? undefined : chartGridLayout.size.height,\n    ...chartGridLayout.padding,\n    ...grid,\n  });\n\n  const size = useMemo(() => {\n    return {\n      width,\n      // Echarts has a problem were the height is always set to 300px\n      // Thus, we need to update the height to make sure the chart is not cut out\n      height:\n        height ??\n        chartGridLayout.size.height +\n          chartGridLayout.padding.bottom +\n          chartGridLayout.padding.top,\n    };\n  }, [\n    chartGridLayout.padding.bottom,\n    chartGridLayout.padding.top,\n    chartGridLayout.size.height,\n    height,\n    width,\n  ]);\n\n  const option = useOption({\n    option: {\n      ...chartVisualMap,\n      ...chartTooltip,\n      ...chartGrid,\n      ...chartXAxis,\n      ...chartYAxis,\n      ...chartSeries,\n    },\n    onOptionChange,\n  });\n\n  return <HvBaseChart ref={ref} option={option} {...size} {...others} />;\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/DonutChart/DonutChart.js

@@ -33,7 +33,8 @@ const HvDonutChart = forwardRef(
       height,
       type = "regular",
       slicesNameFormatter,
-      onOptionChange
+      onOptionChange,
+      ...others
     } = props;
     const chartData = useData({ data, groupBy, measures, sortBy });
     const chartDataset = useDataset(chartData);
@@ -68,7 +69,16 @@ const HvDonutChart = forwardRef(
       },
       onOptionChange
     });
-    return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+    return /* @__PURE__ */ jsx(
+      HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
   }
 );
 export {

package/dist/esm/DonutChart/DonutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sources":["../../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  LegendComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"../hooks\";\nimport { HvDonutChartMeasure } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n  (props, ref) => {\n    const {\n      data,\n      groupBy,\n      classes,\n      legend,\n      tooltip,\n      measure: measures,\n      sortBy,\n      grid,\n      width,\n      height,\n      type = \"regular\",\n      slicesNameFormatter,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartSeries = useSeries({\n      type: \"pie\",\n      data: chartData,\n      groupBy,\n      measures,\n      radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      show: legend?.show ?? true,\n      icon: \"square\",\n      series: chartSeries.series,\n      formatter: slicesNameFormatter,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      measures,\n      classes,\n      nameFormatter: slicesNameFormatter,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const option = useOption({\n      option: {\n        ...chartSeries,\n        ...chartDataset,\n        ...chartLegend,\n        ...chartTooltip,\n        ...chartGrid,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA0BA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAmBM,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACE,IAAA;AAEJ,UAAM,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,QAAQ;AAEvD,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,IAAA,CACzD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM,QAAQ,QAAQ;AAAA,MACtB,MAAM;AAAA,MACN,QAAQ,YAAY;AAAA,MACpB,WAAW;AAAA,IAAA,CACZ;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
+{"version":3,"file":"DonutChart.js","sources":["../../../src/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  LegendComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"../hooks\";\nimport { HvDonutChartMeasure } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n  (props, ref) => {\n    const {\n      data,\n      groupBy,\n      classes,\n      legend,\n      tooltip,\n      measure: measures,\n      sortBy,\n      grid,\n      width,\n      height,\n      type = \"regular\",\n      slicesNameFormatter,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartSeries = useSeries({\n      type: \"pie\",\n      data: chartData,\n      groupBy,\n      measures,\n      radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      show: legend?.show ?? true,\n      icon: \"square\",\n      series: chartSeries.series,\n      formatter: slicesNameFormatter,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      measures,\n      classes,\n      nameFormatter: slicesNameFormatter,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const option = useOption({\n      option: {\n        ...chartSeries,\n        ...chartDataset,\n        ...chartLegend,\n        ...chartTooltip,\n        ...chartGrid,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA0BA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAmBM,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,QAAQ;AAEvD,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,QAAQ,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,IAAA,CACzD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM,QAAQ,QAAQ;AAAA,MACtB,MAAM;AAAA,MACN,QAAQ,YAAY;AAAA,MACpB,WAAW;AAAA,IAAA,CACZ;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/LineChart/LineChart.js

@@ -46,7 +46,8 @@ const HvLineChart = forwardRef(
       tooltip,
       width,
       height,
-      onOptionChange
+      onOptionChange,
+      ...others
     } = props;
     const chartData = useData({ data, groupBy, measures, splitBy, sortBy });
     const chartDataset = useDataset(chartData);
@@ -92,7 +93,16 @@ const HvLineChart = forwardRef(
       },
       onOptionChange
     });
-    return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+    return /* @__PURE__ */ jsx(
+      HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
   }
 );
 export {

package/dist/esm/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  LineChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvLineChartMeasures>;\n  /** Strategy to use when there are empty cells. Defaults to `void`. */\n  emptyCellMode?: HvChartEmptyCellMode;\n  /** Whether the area under the lines should be filled. Defaults to `false`. */\n  area?: boolean;\n  /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n  areaOpacity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(\n  (props, ref) => {\n    const {\n      area = false,\n      emptyCellMode = \"void\",\n      areaOpacity = 0.5,\n      yAxis,\n      xAxis,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      measures,\n      stack,\n      seriesNameFormatter,\n      legend,\n      classes,\n      tooltip,\n      width,\n      height,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    });\n\n    const chartXAxis = useXAxis({ ...xAxis, scale: true });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"line\",\n      data: chartData,\n      groupBy,\n      measures,\n      area,\n      areaOpacity,\n      emptyCellMode,\n      stack,\n      nameFormatter: seriesNameFormatter,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAuBM,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACE,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM;AAErD,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}
+{"version":3,"file":"LineChart.js","sources":["../../../src/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  LineChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvLineChartMeasures>;\n  /** Strategy to use when there are empty cells. Defaults to `void`. */\n  emptyCellMode?: HvChartEmptyCellMode;\n  /** Whether the area under the lines should be filled. Defaults to `false`. */\n  area?: boolean;\n  /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n  areaOpacity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = forwardRef<ReactECharts, HvLineChartProps>(\n  (props, ref) => {\n    const {\n      area = false,\n      emptyCellMode = \"void\",\n      areaOpacity = 0.5,\n      yAxis,\n      xAxis,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      measures,\n      stack,\n      seriesNameFormatter,\n      legend,\n      classes,\n      tooltip,\n      width,\n      height,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    });\n\n    const chartXAxis = useXAxis({ ...xAxis, scale: true });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"line\",\n      data: chartData,\n      groupBy,\n      measures,\n      area,\n      areaOpacity,\n      emptyCellMode,\n      stack,\n      nameFormatter: seriesNameFormatter,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAuBM,MAAM,cAAc;AAAA,EACzB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,OAAO;AAAA,MACP,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM;AAErD,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/types/index.d.ts

@@ -2,9 +2,11 @@ import { Arrayable } from '@hitachivantara/uikit-react-core';
 import type ColumnTable from 'arquero/dist/types/table/column-table';
 import { Context } from 'react';
 import { CSSInterpolation } from '@emotion/serialize';
+import type { EChartsType } from 'echarts';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import { ForwardRefExoticComponent } from 'react';
 import type { HvColorAny } from '@hitachivantara/uikit-react-core';
+import { HvExtraProps } from '@hitachivantara/uikit-react-core';
 import { HvTheme } from '@hitachivantara/uikit-react-core';
 import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import ReactECharts from 'echarts-for-react/lib/core';
@@ -46,6 +48,16 @@ declare interface DonutFullMeasures extends BaseMeasures {
 /** Empty cell mode */
 declare const emptyCellMode: readonly ["connect", "void"];
 
+declare interface EventParams extends HvExtraProps {
+    componentIndex?: number;
+    componentType?: string;
+    dataIndex?: number;
+    value?: any;
+    targetType?: string;
+    type?: string;
+    event?: HvExtraProps;
+}
+
 declare type FullSortBy = {
     /** Column name. */
     field: string;
@@ -163,6 +175,8 @@ declare 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>;
 }
 
 /** Chart data */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.6.78",
+  "version": "5.7.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React visualization components for the NEXT UI Kit.",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.63.0"
+    "@hitachivantara/uikit-react-core": "^5.63.1"
   },
   "files": [
     "dist"
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "2d237eef49915ff00973faca64e5286c0b495e4c",
+  "gitHead": "274c57ce6dd9272b5950927526f48ad3cc4adc00",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {