@hitachivantara/uikit-react-viz 5.6.27 → 5.6.28

package/dist/esm/components/LineChart/LineChart.js

@@ -14,87 +14,86 @@ import { useLegend } from "../../hooks/useLegend.js";
 import { useOption } from "../../hooks/useOption.js";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
-echarts.use([LineChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
-const HvLineChart = forwardRef((props, ref) => {
-  const {
-    area = false,
-    emptyCellMode = "void",
-    areaOpacity = 0.5,
-    yAxis,
-    xAxis,
-    horizontalRangeSlider,
-    grid,
-    data,
-    groupBy,
-    splitBy,
-    sortBy,
-    measures,
-    stack,
-    seriesNameFormatter,
-    legend,
-    classes,
-    tooltip,
-    width,
-    height,
-    onOptionChange
-  } = props;
-  const chartData = useData({
-    data,
-    groupBy,
-    measures,
-    splitBy,
-    sortBy
-  });
-  const chartDataset = useDataset(chartData);
-  const chartYAxis = useYAxis({
-    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
-  });
-  const chartXAxis = useXAxis({
-    ...xAxis,
-    scale: true
-  });
-  const chartSlider = useDataZoom({
-    showHorizontal: horizontalRangeSlider?.show
-  });
-  const chartGrid = useGrid({
-    ...grid
-  });
-  const chartSeries = useSeries({
-    type: "line",
-    data: chartData,
-    groupBy,
-    measures,
-    area,
-    areaOpacity,
-    emptyCellMode,
-    stack,
-    nameFormatter: seriesNameFormatter
-  });
-  const chartLegend = useLegend({
-    ...legend,
-    series: chartSeries.series
-  });
-  const chartTooltip = useTooltip({
-    ...tooltip,
-    trigger: "axis",
-    measures,
-    classes
-  });
-  const option = useOption({
-    option: {
-      ...chartYAxis,
-      ...chartXAxis,
-      ...chartSlider,
-      ...chartGrid,
-      ...chartDataset,
-      ...chartSeries,
-      ...chartLegend,
-      ...chartTooltip
-    },
-    onOptionChange
-  });
-  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
-});
+echarts.use([
+  LineChart,
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomSliderComponent,
+  DataZoomInsideComponent
+]);
+const HvLineChart = forwardRef(
+  (props, ref) => {
+    const {
+      area = false,
+      emptyCellMode = "void",
+      areaOpacity = 0.5,
+      yAxis,
+      xAxis,
+      horizontalRangeSlider,
+      grid,
+      data,
+      groupBy,
+      splitBy,
+      sortBy,
+      measures,
+      stack,
+      seriesNameFormatter,
+      legend,
+      classes,
+      tooltip,
+      width,
+      height,
+      onOptionChange
+    } = props;
+    const chartData = useData({ data, groupBy, measures, splitBy, sortBy });
+    const chartDataset = useDataset(chartData);
+    const chartYAxis = useYAxis({
+      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
+    });
+    const chartXAxis = useXAxis({ ...xAxis, scale: true });
+    const chartSlider = useDataZoom({
+      showHorizontal: horizontalRangeSlider?.show
+    });
+    const chartGrid = useGrid({ ...grid });
+    const chartSeries = useSeries({
+      type: "line",
+      data: chartData,
+      groupBy,
+      measures,
+      area,
+      areaOpacity,
+      emptyCellMode,
+      stack,
+      nameFormatter: seriesNameFormatter
+    });
+    const chartLegend = useLegend({
+      ...legend,
+      series: chartSeries.series
+    });
+    const chartTooltip = useTooltip({
+      ...tooltip,
+      trigger: "axis",
+      measures,
+      classes
+    });
+    const option = useOption({
+      option: {
+        ...chartYAxis,
+        ...chartXAxis,
+        ...chartSlider,
+        ...chartGrid,
+        ...chartDataset,
+        ...chartSeries,
+        ...chartLegend,
+        ...chartTooltip
+      },
+      onOptionChange
+    });
+    return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+  }
+);
 export {
   HvLineChart
 };

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.js","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n  useOption,\n} from \"@viz/hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\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]);\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":["echarts","use","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","forwardRef","props","ref","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","onOptionChange","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","chartXAxis","useXAxis","scale","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","type","nameFormatter","chartLegend","useLegend","series","chartTooltip","useTooltip","trigger","option","useOption"],"mappings":";;;;;;;;;;;;;;;;AAmCAA,QAAQC,IAAI,CACVC,WACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAuBM,MAAMC,cAAcC,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,OAAO;AAAA,IACPC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EACErB,IAAAA;AAEJ,QAAMsB,YAAYC,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEY,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAM0B,aAAaC,SAAS;AAAA,IAAE,GAAG1B;AAAAA,IAAO2B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB7B,uBAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACNjC,MAAMa;AAAAA,IACNZ;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA6B,eAAe5B;AAAAA,EAAAA,CAChB;AAED,QAAM6B,cAAcC,UAAU;AAAA,IAC5B,GAAG7B;AAAAA,IACH8B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG9B;AAAAA,IACH+B,SAAS;AAAA,IACTpC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAED,QAAMiC,SAASC,UAAU;AAAA,IACvBD,QAAQ;AAAA,MACN,GAAGxB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IACL;AAAA,IACA1B;AAAAA,EAAAA,CACD;AAED,SACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;"}
+{"version":3,"file":"LineChart.js","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n  useOption,\n} from \"@viz/hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\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]);\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":";;;;;;;;;;;;;;;;AAmCA,QAAQ,IAAI;AAAA,EACV;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;"}

package/dist/esm/hooks/tooltip/styles.js

@@ -1,8 +1,5 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const {
-  useClasses,
-  staticClasses
-} = createClasses("HvChartTooltip", {
+const { useClasses, staticClasses } = createClasses("HvChartTooltip", {
   /** Single tooltip styles */
   singleTooltipRoot: {
     width: "fit-content",
@@ -44,9 +41,7 @@ const {
     display: "flex",
     flexDirection: "column",
     padding: theme.space.sm,
-    "& > *:not(:last-child)": {
-      paddingBottom: theme.space.sm
-    }
+    "& > *:not(:last-child)": { paddingBottom: theme.space.sm }
   },
   multipleTooltipSeriesContainer: {
     display: "flex",

package/dist/esm/hooks/tooltip/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvChartTooltip\", {\n  /** Single tooltip styles */\n  singleTooltipRoot: {\n    width: \"fit-content\",\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.space.sm,\n    display: \"flex\",\n  },\n  singleTooltipTitle: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  singleTooltipValue: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n    marginLeft: theme.space.xs,\n  },\n  /** Multiple tooltip styles */\n  multipleTooltipRoot: {\n    width: \"fit-content\",\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n  },\n  multipleTooltipTitleContainer: {\n    padding: `15px ${theme.space.sm}`,\n    borderBottom: `3px solid ${theme.colors.atmo2}`,\n  },\n  multipleTooltipTitle: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  multipleTooltipValuesContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n\n    \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n  },\n  multipleTooltipSeriesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  multipleTooltipSeriesNameContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    marginRight: theme.space.sm,\n  },\n  multipleTooltipSeriesColor: {\n    width: \"10px\",\n    height: \"10px\",\n    marginRight: \"5px\",\n  },\n  multipleTooltipSeriesName: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  multipleTooltipSeriesValue: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","singleTooltipRoot","width","boxShadow","theme","colors","shadow","backgroundColor","atmo1","padding","space","sm","display","singleTooltipTitle","fontFamily","body","fontWeight","fontWeights","semibold","fontSize","fontSizes","color","secondary","singleTooltipValue","normal","marginLeft","xs","multipleTooltipRoot","multipleTooltipTitleContainer","borderBottom","atmo2","multipleTooltipTitle","multipleTooltipValuesContainer","flexDirection","paddingBottom","multipleTooltipSeriesContainer","justifyContent","alignItems","multipleTooltipSeriesNameContainer","marginRight","multipleTooltipSeriesColor","height","multipleTooltipSeriesName","multipleTooltipSeriesValue"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,mBAAmB;AAAA,IACjBC,OAAO;AAAA,IACPC,WAAWC,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,MAAMM,MAAMC;AAAAA,IACrBC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA,IAClBC,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAC,oBAAoB;AAAA,IAClBT,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,IACpBG,YAAYrB,MAAMM,MAAMgB;AAAAA,EAC1B;AAAA;AAAA,EAEAC,qBAAqB;AAAA,IACnBzB,OAAO;AAAA,IACPC,WAAWC,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,EAChC;AAAA,EACAoB,+BAA+B;AAAA,IAC7BnB,SAAU,QAAOL,MAAMM,MAAMC,EAAG;AAAA,IAChCkB,cAAe,aAAYzB,MAAMC,OAAOyB,KAAM;AAAA,EAChD;AAAA,EACAC,sBAAsB;AAAA,IACpBjB,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAU,gCAAgC;AAAA,IAC9BpB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfxB,SAASL,MAAMM,MAAMC;AAAAA,IAErB,0BAA0B;AAAA,MAAEuB,eAAe9B,MAAMM,MAAMC;AAAAA,IAAG;AAAA,EAC5D;AAAA,EACAwB,gCAAgC;AAAA,IAC9BvB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfG,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,oCAAoC;AAAA,IAClC1B,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfI,YAAY;AAAA,IACZE,aAAanC,MAAMM,MAAMC;AAAAA,EAC3B;AAAA,EACA6B,4BAA4B;AAAA,IAC1BtC,OAAO;AAAA,IACPuC,QAAQ;AAAA,IACRF,aAAa;AAAA,EACf;AAAA,EACAG,2BAA2B;AAAA,IACzB5B,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAqB,4BAA4B;AAAA,IAC1B7B,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AACF,CAAC;"}
+{"version":3,"file":"styles.js","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvChartTooltip\", {\n  /** Single tooltip styles */\n  singleTooltipRoot: {\n    width: \"fit-content\",\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.space.sm,\n    display: \"flex\",\n  },\n  singleTooltipTitle: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  singleTooltipValue: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n    marginLeft: theme.space.xs,\n  },\n  /** Multiple tooltip styles */\n  multipleTooltipRoot: {\n    width: \"fit-content\",\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n  },\n  multipleTooltipTitleContainer: {\n    padding: `15px ${theme.space.sm}`,\n    borderBottom: `3px solid ${theme.colors.atmo2}`,\n  },\n  multipleTooltipTitle: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  multipleTooltipValuesContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n\n    \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n  },\n  multipleTooltipSeriesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  multipleTooltipSeriesNameContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    marginRight: theme.space.sm,\n  },\n  multipleTooltipSeriesColor: {\n    width: \"10px\",\n    height: \"10px\",\n    marginRight: \"5px\",\n  },\n  multipleTooltipSeriesName: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  multipleTooltipSeriesValue: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,YAAY,kBAAkB,cAAc,kBAAkB;AAAA;AAAA,EAE3E,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,SAAS,MAAM,MAAM;AAAA,IACrB,SAAS;AAAA,EACX;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA;AAAA,EAEA,qBAAqB;AAAA,IACnB,OAAO;AAAA,IACP,WAAW,MAAM,OAAO;AAAA,IACxB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,SAAS,QAAQ,MAAM,MAAM,EAAE;AAAA,IAC/B,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,sBAAsB;AAAA,IACpB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS,MAAM,MAAM;AAAA,IAErB,0BAA0B,EAAE,eAAe,MAAM,MAAM,GAAG;AAAA,EAC5D;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,oCAAoC;AAAA,IAClC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,aAAa,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,4BAA4B;AAAA,IAC1B,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}

package/dist/esm/hooks/tooltip/useTooltip.js

@@ -13,24 +13,26 @@ const useTooltip = ({
   titleFormatter,
   nameFormatter
 }) => {
-  const {
-    classes: hvClasses
-  } = useClasses(classes);
-  const renderTooltip = useCallback((params) => {
-    const title = params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
-    const formattedTitle = titleFormatter ? titleFormatter(title) : title;
-    if (type === "single") {
-      const measure = getMeasure(params[0].seriesType === "pie" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]], measures);
-      const value = params[0].seriesType === "pie" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
-      const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
-      return `
+  const { classes: hvClasses } = useClasses(classes);
+  const renderTooltip = useCallback(
+    (params) => {
+      const title = params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
+      const formattedTitle = titleFormatter ? titleFormatter(title) : title;
+      if (type === "single") {
+        const measure = getMeasure(
+          params[0].seriesType === "pie" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
+          measures
+        );
+        const value = params[0].seriesType === "pie" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
+        const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+        return `
             <div class="${hvClasses?.singleTooltipRoot}">
               <p class="${hvClasses?.singleTooltipTitle}">${formattedTitle}</p>
               <p class="${hvClasses?.singleTooltipValue}">${formattedValue}</p>
             </div>
             `;
-    }
-    return `
+      }
+      return `
         <div class="${hvClasses?.multipleTooltipRoot}">
           <div class="${hvClasses?.multipleTooltipTitleContainer}">
             <div>
@@ -39,12 +41,15 @@ const useTooltip = ({
           </div>
           <div class="${hvClasses?.multipleTooltipValuesContainer}">
             ${params.map((s) => {
-      const measure = getMeasure(s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]], measures);
-      const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
-      const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
-      const name = s.seriesType === "pie" ? s.name : s.seriesName;
-      const formattedName = nameFormatter ? nameFormatter(name) : name;
-      return `
+        const measure = getMeasure(
+          s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]],
+          measures
+        );
+        const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
+        const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+        const name = s.seriesType === "pie" ? s.name : s.seriesName;
+        const formattedName = nameFormatter ? nameFormatter(name) : name;
+        return `
                 <div key="${s.seriesName}" class="${hvClasses?.multipleTooltipSeriesContainer}">
                   <div class="${hvClasses?.multipleTooltipSeriesNameContainer}">
                     <p style="background-color: ${s.color};" class="${hvClasses?.multipleTooltipSeriesColor}" />
@@ -53,27 +58,40 @@ const useTooltip = ({
                   <p class="${hvClasses?.multipleTooltipSeriesValue}">${formattedValue}</p>
                 </div>
               `;
-    }).join(" ")}
+      }).join(" ")}
           </div>
         </div>
         `;
-  }, [hvClasses, horizontal, type, measures, nameFormatter, titleFormatter, valueFormatter]);
-  const renderCustomTooltip = useCallback((params) => {
-    if (typeof component === "function") {
-      const values = {
-        title: params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
-        series: params.map((p) => {
-          return {
-            color: p.color,
-            name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" ? p.name : p.seriesName,
-            value: p.seriesType === "pie" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
-          };
-        })
-      };
-      return component(values);
-    }
-    return component;
-  }, [component, horizontal]);
+    },
+    [
+      hvClasses,
+      horizontal,
+      type,
+      measures,
+      nameFormatter,
+      titleFormatter,
+      valueFormatter
+    ]
+  );
+  const renderCustomTooltip = useCallback(
+    (params) => {
+      if (typeof component === "function") {
+        const values = {
+          title: params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
+          series: params.map((p) => {
+            return {
+              color: p.color,
+              name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" ? p.name : p.seriesName,
+              value: p.seriesType === "pie" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
+            };
+          })
+        };
+        return component(values);
+      }
+      return component;
+    },
+    [component, horizontal]
+  );
   const option = useMemo(() => {
     return {
       tooltip: {

package/dist/esm/hooks/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartTooltip,\n  HvChartTooltipParams,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport { getMeasure } from \"@viz/utils\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n  seriesName: string;\n  value: (string | number)[];\n  encode: { [key: string]: number[] };\n  color: string;\n  dimensionNames: string[];\n  name: string;\n  seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n  measures?:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  trigger?: \"item\" | \"axis\";\n  classes?: HvChartTooltipClasses;\n  horizontal?: boolean;\n  show?: HvChartTooltip[\"show\"];\n  type?: HvChartTooltip[\"type\"];\n  component?: HvChartTooltip[\"component\"];\n  valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n  titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n  nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n  measures = [],\n  classes,\n  component,\n  show = true,\n  horizontal = false,\n  trigger = \"item\",\n  type = \"multiple\",\n  valueFormatter,\n  titleFormatter,\n  nameFormatter,\n}: HvTooltipHookProps) => {\n  const { classes: hvClasses } = useClasses(classes);\n\n  const renderTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      const title =\n        params[0].seriesType === \"pie\"\n          ? params[0].seriesName\n          : horizontal\n          ? params[0].value[params[0].encode.y[0]]\n          : params[0].value[params[0].encode.x[0]];\n\n      const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n      if (type === \"single\") {\n        const measure = getMeasure(\n          params[0].seriesType === \"pie\"\n            ? params[0].name\n            : horizontal\n            ? params[0].dimensionNames[params[0].encode.x[0]]\n            : params[0].dimensionNames[params[0].encode.y[0]],\n          measures\n        );\n\n        const value =\n          params[0].seriesType === \"pie\"\n            ? params[0].value[params[0].encode.value[0]]\n            : horizontal\n            ? params[0].value[params[0].encode.x[0]]\n            : params[0].value[params[0].encode.y[0]];\n\n        const formattedValue =\n          typeof measure !== \"string\" && measure.valueFormatter\n            ? measure.valueFormatter(value)\n            : valueFormatter\n            ? valueFormatter(value)\n            : value;\n\n        return `\n            <div class=\"${hvClasses?.singleTooltipRoot}\">\n              <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n              <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n            </div>\n            `;\n      }\n\n      return `\n        <div class=\"${hvClasses?.multipleTooltipRoot}\">\n          <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n            <div>\n              <p class=\"${\n                hvClasses?.multipleTooltipTitle\n              }\">${formattedTitle}</p>\n            </div>\n          </div>\n          <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n            ${params\n              .map((s) => {\n                const measure = getMeasure(\n                  s.seriesType === \"pie\"\n                    ? s.name\n                    : horizontal\n                    ? s.dimensionNames[s.encode.x[0]]\n                    : s.dimensionNames[s.encode.y[0]],\n                  measures\n                );\n\n                const value =\n                  s.seriesType === \"pie\"\n                    ? s.value[s.encode.value[0]]\n                    : horizontal\n                    ? s.value[s.encode.x[0]]\n                    : s.value[s.encode.y[0]];\n\n                const formattedValue =\n                  typeof measure !== \"string\" && measure.valueFormatter\n                    ? measure.valueFormatter(value)\n                    : valueFormatter\n                    ? valueFormatter(value)\n                    : value;\n\n                const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n                const formattedName = nameFormatter\n                  ? nameFormatter(name)\n                  : name;\n\n                return `\n                <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n                  <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n                    <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n                    <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n                  </div>\n                  <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n                </div>\n              `;\n              })\n              .join(\" \")}\n          </div>\n        </div>\n        `;\n    },\n    [\n      hvClasses,\n      horizontal,\n      type,\n      measures,\n      nameFormatter,\n      titleFormatter,\n      valueFormatter,\n    ]\n  );\n\n  const renderCustomTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      if (typeof component === \"function\") {\n        const values: HvChartTooltipParams = {\n          title:\n            params[0].seriesType === \"pie\"\n              ? params[0].seriesName\n              : horizontal\n              ? params[0].value[params[0].encode.y[0]]\n              : params[0].value[params[0].encode.x[0]],\n          series: params.map((p) => {\n            return {\n              color: p.color,\n              name:\n                p.seriesType === \"heatmap\"\n                  ? String(p.value[p.encode.y[0]])\n                  : p.seriesType === \"pie\"\n                  ? p.name\n                  : p.seriesName,\n              value:\n                p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n                  ? p.value[p.encode.value[0]]\n                  : horizontal\n                  ? p.value[p.encode.x[0]]\n                  : p.value[p.encode.y[0]],\n            };\n          }),\n        };\n\n        return component(values);\n      }\n\n      return component;\n    },\n    [component, horizontal]\n  );\n\n  const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n    return {\n      tooltip: {\n        confine: false,\n        show,\n        trigger,\n        position: (point, params, dom, rect, size) => {\n          return [point[0], point[1] - size.contentSize[1]];\n        },\n        formatter: (params) => {\n          const tooltipParams = Array.isArray(params) ? params : [params];\n\n          return component\n            ? renderCustomTooltip(tooltipParams)\n            : renderTooltip(tooltipParams);\n        },\n      },\n    };\n  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n  return option;\n};\n"],"names":["useTooltip","measures","classes","component","show","horizontal","trigger","type","valueFormatter","titleFormatter","nameFormatter","hvClasses","useClasses","renderTooltip","useCallback","params","title","seriesType","seriesName","value","encode","y","x","formattedTitle","measure","getMeasure","name","dimensionNames","formattedValue","singleTooltipRoot","singleTooltipTitle","singleTooltipValue","multipleTooltipRoot","multipleTooltipTitleContainer","multipleTooltipTitle","multipleTooltipValuesContainer","map","s","formattedName","multipleTooltipSeriesContainer","multipleTooltipSeriesNameContainer","color","multipleTooltipSeriesColor","multipleTooltipSeriesName","multipleTooltipSeriesValue","join","renderCustomTooltip","values","series","p","String","option","useMemo","tooltip","confine","position","point","dom","rect","size","contentSize","formatter","tooltipParams","Array","isArray"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\n\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartTooltip,\n  HvChartTooltipParams,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport { getMeasure } from \"@viz/utils\";\nimport { HvEChartsOption } from \"@viz/types/common\";\n\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n  seriesName: string;\n  value: (string | number)[];\n  encode: { [key: string]: number[] };\n  color: string;\n  dimensionNames: string[];\n  name: string;\n  seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n  measures?:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  trigger?: \"item\" | \"axis\";\n  classes?: HvChartTooltipClasses;\n  horizontal?: boolean;\n  show?: HvChartTooltip[\"show\"];\n  type?: HvChartTooltip[\"type\"];\n  component?: HvChartTooltip[\"component\"];\n  valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n  titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n  nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n  measures = [],\n  classes,\n  component,\n  show = true,\n  horizontal = false,\n  trigger = \"item\",\n  type = \"multiple\",\n  valueFormatter,\n  titleFormatter,\n  nameFormatter,\n}: HvTooltipHookProps) => {\n  const { classes: hvClasses } = useClasses(classes);\n\n  const renderTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      const title =\n        params[0].seriesType === \"pie\"\n          ? params[0].seriesName\n          : horizontal\n          ? params[0].value[params[0].encode.y[0]]\n          : params[0].value[params[0].encode.x[0]];\n\n      const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n      if (type === \"single\") {\n        const measure = getMeasure(\n          params[0].seriesType === \"pie\"\n            ? params[0].name\n            : horizontal\n            ? params[0].dimensionNames[params[0].encode.x[0]]\n            : params[0].dimensionNames[params[0].encode.y[0]],\n          measures\n        );\n\n        const value =\n          params[0].seriesType === \"pie\"\n            ? params[0].value[params[0].encode.value[0]]\n            : horizontal\n            ? params[0].value[params[0].encode.x[0]]\n            : params[0].value[params[0].encode.y[0]];\n\n        const formattedValue =\n          typeof measure !== \"string\" && measure.valueFormatter\n            ? measure.valueFormatter(value)\n            : valueFormatter\n            ? valueFormatter(value)\n            : value;\n\n        return `\n            <div class=\"${hvClasses?.singleTooltipRoot}\">\n              <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n              <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n            </div>\n            `;\n      }\n\n      return `\n        <div class=\"${hvClasses?.multipleTooltipRoot}\">\n          <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n            <div>\n              <p class=\"${\n                hvClasses?.multipleTooltipTitle\n              }\">${formattedTitle}</p>\n            </div>\n          </div>\n          <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n            ${params\n              .map((s) => {\n                const measure = getMeasure(\n                  s.seriesType === \"pie\"\n                    ? s.name\n                    : horizontal\n                    ? s.dimensionNames[s.encode.x[0]]\n                    : s.dimensionNames[s.encode.y[0]],\n                  measures\n                );\n\n                const value =\n                  s.seriesType === \"pie\"\n                    ? s.value[s.encode.value[0]]\n                    : horizontal\n                    ? s.value[s.encode.x[0]]\n                    : s.value[s.encode.y[0]];\n\n                const formattedValue =\n                  typeof measure !== \"string\" && measure.valueFormatter\n                    ? measure.valueFormatter(value)\n                    : valueFormatter\n                    ? valueFormatter(value)\n                    : value;\n\n                const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n                const formattedName = nameFormatter\n                  ? nameFormatter(name)\n                  : name;\n\n                return `\n                <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n                  <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n                    <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n                    <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n                  </div>\n                  <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n                </div>\n              `;\n              })\n              .join(\" \")}\n          </div>\n        </div>\n        `;\n    },\n    [\n      hvClasses,\n      horizontal,\n      type,\n      measures,\n      nameFormatter,\n      titleFormatter,\n      valueFormatter,\n    ]\n  );\n\n  const renderCustomTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      if (typeof component === \"function\") {\n        const values: HvChartTooltipParams = {\n          title:\n            params[0].seriesType === \"pie\"\n              ? params[0].seriesName\n              : horizontal\n              ? params[0].value[params[0].encode.y[0]]\n              : params[0].value[params[0].encode.x[0]],\n          series: params.map((p) => {\n            return {\n              color: p.color,\n              name:\n                p.seriesType === \"heatmap\"\n                  ? String(p.value[p.encode.y[0]])\n                  : p.seriesType === \"pie\"\n                  ? p.name\n                  : p.seriesName,\n              value:\n                p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n                  ? p.value[p.encode.value[0]]\n                  : horizontal\n                  ? p.value[p.encode.x[0]]\n                  : p.value[p.encode.y[0]],\n            };\n          }),\n        };\n\n        return component(values);\n      }\n\n      return component;\n    },\n    [component, horizontal]\n  );\n\n  const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n    return {\n      tooltip: {\n        confine: false,\n        show,\n        trigger,\n        position: (point, params, dom, rect, size) => {\n          return [point[0], point[1] - size.contentSize[1]];\n        },\n        formatter: (params) => {\n          const tooltipParams = Array.isArray(params) ? params : [params];\n\n          return component\n            ? renderCustomTooltip(tooltipParams)\n            : renderTooltip(tooltipParams);\n        },\n      },\n    };\n  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n  return option;\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/hooks/useData.js

@@ -22,9 +22,7 @@ const useData = ({
     }
     const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
     const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
-    const measuresFields = measures == null ? {} : typeof measures === "string" ? {
-      [measures]: getAgFunc("sum", measures)
-    } : Array.isArray(measures) ? measures.reduce((acc, value) => {
+    const measuresFields = measures == null ? {} : typeof measures === "string" ? { [measures]: getAgFunc("sum", measures) } : Array.isArray(measures) ? measures.reduce((acc, value) => {
       let field;
       let agFunction;
       if (typeof value === "string") {
@@ -41,9 +39,7 @@ const useData = ({
     }, {}) : {
       [measures.field]: getAgFunc(measures.agg ?? "sum", measures.field)
     };
-    const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? {
-      [sortBy]: "asc"
-    } : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
+    const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? { [sortBy]: "asc" } : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
       let field;
       let orderFunction;
       if (typeof value === "string") {
@@ -57,17 +53,22 @@ const useData = ({
         ...acc,
         [field]: orderFunction
       };
-    }, {}) : {
-      [sortBy.field]: sortBy.order ?? "asc"
-    };
-    const allFields = [...groupByFields, ...splitByFields, ...Object.keys(measuresFields)];
+    }, {}) : { [sortBy.field]: sortBy.order ?? "asc" };
+    const allFields = [
+      ...groupByFields,
+      ...splitByFields,
+      ...Object.keys(measuresFields)
+    ];
     if (delta) {
-      const deltaExpression = Object.keys(measuresFields).reduce((acc, curr) => {
-        return {
-          ...acc,
-          [curr]: `d => d.${curr} - d.${delta}`
-        };
-      }, {});
+      const deltaExpression = Object.keys(measuresFields).reduce(
+        (acc, curr) => {
+          return {
+            ...acc,
+            [curr]: `d => d.${curr} - d.${delta}`
+          };
+        },
+        {}
+      );
       tableData = tableData.derive(deltaExpression);
     }
     tableData = tableData.select(...allFields);
@@ -81,14 +82,15 @@ const useData = ({
     }
     if (groupByFields.length > 1) {
       const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
-      tableData = tableData.derive({
-        [groupByKey]: expression
-      }, {
-        after: groupByFields[groupByFields.length - 1]
-      });
+      tableData = tableData.derive(
+        { [groupByKey]: expression },
+        { after: groupByFields[groupByFields.length - 1] }
+      );
     }
     if (Object.keys(sortByFields).length > 0) {
-      tableData = tableData.orderby(...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? desc(key) : key));
+      tableData = tableData.orderby(
+        ...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? desc(key) : key)
+      );
     }
     if (groupByFields.length > 1) {
       tableData = tableData.select(not(...groupByFields));

package/dist/esm/hooks/useData.js.map

@@ -1 +1 @@
-{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartOrder,\n  HvLineChartMeasures,\n  HvChartData,\n  HvDonutChartMeasure,\n} from \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n  delta?: string;\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n  delta,\n}: HvDataHookProps): internal.ColumnTable => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useMemo<ColumnTable>(() => {\n    let tableData: ColumnTable;\n    if (data instanceof internal.ColumnTable) {\n      tableData = data;\n    } else if (Array.isArray(data)) {\n      tableData = from(data);\n    } else {\n      tableData = table(data);\n    }\n\n    const groupByFields = groupBy\n      ? Array.isArray(groupBy)\n        ? groupBy\n        : [groupBy]\n      : [];\n\n    const splitByFields = Array.isArray(splitBy)\n      ? splitBy\n      : splitBy != null\n      ? [splitBy]\n      : [];\n\n    const measuresFields: { [key: string]: string } =\n      measures == null\n        ? {}\n        : typeof measures === \"string\"\n        ? { [measures]: getAgFunc(\"sum\", measures) }\n        : Array.isArray(measures)\n        ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n            let field: string;\n            let agFunction: HvChartAggregation;\n            if (typeof value === \"string\") {\n              field = value;\n              agFunction = \"sum\";\n            } else {\n              field = value.field;\n              agFunction = value.agg ?? \"sum\";\n            }\n\n            return {\n              ...acc,\n              [field]: getAgFunc(agFunction, field),\n            };\n          }, {})\n        : {\n            [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n          };\n\n    const sortByFields: { [key: string]: HvChartOrder } =\n      sortBy == null\n        ? {}\n        : typeof sortBy === \"string\"\n        ? { [sortBy]: \"asc\" }\n        : Array.isArray(sortBy)\n        ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n            let field: string;\n            let orderFunction: HvChartOrder;\n            if (typeof value === \"string\") {\n              field = value;\n              orderFunction = \"asc\";\n            } else {\n              field = value.field;\n              orderFunction = value.order ?? \"asc\";\n            }\n\n            return {\n              ...acc,\n              [field]: orderFunction,\n            };\n          }, {})\n        : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n    const allFields = [\n      ...groupByFields,\n      ...splitByFields,\n      ...Object.keys(measuresFields),\n    ];\n\n    // --- Confusion matrix ---\n    // Recalculate the measures columns according to the delta column\n    if (delta) {\n      const deltaExpression = Object.keys(measuresFields).reduce(\n        (acc, curr) => {\n          return {\n            ...acc,\n            [curr]: `d => d.${curr} - d.${delta}`,\n          };\n        },\n        {}\n      );\n\n      tableData = tableData.derive(deltaExpression);\n    }\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresFields);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresFields);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] }\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n      );\n    }\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return tableData;\n  }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);\n\n  return chartData;\n};\n"],"names":["useData","data","groupBy","measures","sortBy","splitBy","delta","groupByKey","getGroupKey","chartData","useMemo","tableData","internal","ColumnTable","Array","isArray","from","table","groupByFields","splitByFields","measuresFields","getAgFunc","reduce","acc","value","field","agFunction","agg","sortByFields","orderFunction","order","allFields","Object","keys","deltaExpression","curr","derive","select","length","groupby","pivot","rollup","expression","map","join","after","orderby","filter","key","includes","desc","not"],"mappings":"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"}
+{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartOrder,\n  HvLineChartMeasures,\n  HvChartData,\n  HvDonutChartMeasure,\n} from \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n  delta?: string;\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n  delta,\n}: HvDataHookProps): internal.ColumnTable => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useMemo<ColumnTable>(() => {\n    let tableData: ColumnTable;\n    if (data instanceof internal.ColumnTable) {\n      tableData = data;\n    } else if (Array.isArray(data)) {\n      tableData = from(data);\n    } else {\n      tableData = table(data);\n    }\n\n    const groupByFields = groupBy\n      ? Array.isArray(groupBy)\n        ? groupBy\n        : [groupBy]\n      : [];\n\n    const splitByFields = Array.isArray(splitBy)\n      ? splitBy\n      : splitBy != null\n      ? [splitBy]\n      : [];\n\n    const measuresFields: { [key: string]: string } =\n      measures == null\n        ? {}\n        : typeof measures === \"string\"\n        ? { [measures]: getAgFunc(\"sum\", measures) }\n        : Array.isArray(measures)\n        ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n            let field: string;\n            let agFunction: HvChartAggregation;\n            if (typeof value === \"string\") {\n              field = value;\n              agFunction = \"sum\";\n            } else {\n              field = value.field;\n              agFunction = value.agg ?? \"sum\";\n            }\n\n            return {\n              ...acc,\n              [field]: getAgFunc(agFunction, field),\n            };\n          }, {})\n        : {\n            [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n          };\n\n    const sortByFields: { [key: string]: HvChartOrder } =\n      sortBy == null\n        ? {}\n        : typeof sortBy === \"string\"\n        ? { [sortBy]: \"asc\" }\n        : Array.isArray(sortBy)\n        ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n            let field: string;\n            let orderFunction: HvChartOrder;\n            if (typeof value === \"string\") {\n              field = value;\n              orderFunction = \"asc\";\n            } else {\n              field = value.field;\n              orderFunction = value.order ?? \"asc\";\n            }\n\n            return {\n              ...acc,\n              [field]: orderFunction,\n            };\n          }, {})\n        : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n    const allFields = [\n      ...groupByFields,\n      ...splitByFields,\n      ...Object.keys(measuresFields),\n    ];\n\n    // --- Confusion matrix ---\n    // Recalculate the measures columns according to the delta column\n    if (delta) {\n      const deltaExpression = Object.keys(measuresFields).reduce(\n        (acc, curr) => {\n          return {\n            ...acc,\n            [curr]: `d => d.${curr} - d.${delta}`,\n          };\n        },\n        {}\n      );\n\n      tableData = tableData.derive(deltaExpression);\n    }\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresFields);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresFields);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] }\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n      );\n    }\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return tableData;\n  }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);\n\n  return chartData;\n};\n"],"names":[],"mappings":";;;;AA6BO,MAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA6C;AACrC,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,YAAY,QAAqB,MAAM;AACvC,QAAA;AACA,QAAA,gBAAgB,SAAS,aAAa;AAC5B,kBAAA;AAAA,IACH,WAAA,MAAM,QAAQ,IAAI,GAAG;AAC9B,kBAAY,KAAK,IAAI;AAAA,IAAA,OAChB;AACL,kBAAY,MAAM,IAAI;AAAA,IACxB;AAEM,UAAA,gBAAgB,UAClB,MAAM,QAAQ,OAAO,IACnB,UACA,CAAC,OAAO,IACV;AAEE,UAAA,gBAAgB,MAAM,QAAQ,OAAO,IACvC,UACA,WAAW,OACX,CAAC,OAAO,IACR,CAAA;AAEE,UAAA,iBACJ,YAAY,OACR,CAAC,IACD,OAAO,aAAa,WACpB,EAAE,CAAC,QAAQ,GAAG,UAAU,OAAO,QAAQ,EAAE,IACzC,MAAM,QAAQ,QAAQ,IACtB,SAAS,OAAkC,CAAC,KAAK,UAAU;AACrD,UAAA;AACA,UAAA;AACA,UAAA,OAAO,UAAU,UAAU;AACrB,gBAAA;AACK,qBAAA;AAAA,MAAA,OACR;AACL,gBAAQ,MAAM;AACd,qBAAa,MAAM,OAAO;AAAA,MAC5B;AAEO,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,KAAK,GAAG,UAAU,YAAY,KAAK;AAAA,MAAA;AAAA,IAExC,GAAG,CAAE,CAAA,IACL;AAAA,MACE,CAAC,SAAS,KAAK,GAAG,UAAU,SAAS,OAAO,OAAO,SAAS,KAAK;AAAA,IAAA;AAGnE,UAAA,eACJ,UAAU,OACN,CAAA,IACA,OAAO,WAAW,WAClB,EAAE,CAAC,MAAM,GAAG,MAAM,IAClB,MAAM,QAAQ,MAAM,IACpB,OAAO,OAAwC,CAAC,KAAK,UAAU;AACzD,UAAA;AACA,UAAA;AACA,UAAA,OAAO,UAAU,UAAU;AACrB,gBAAA;AACQ,wBAAA;AAAA,MAAA,OACX;AACL,gBAAQ,MAAM;AACd,wBAAgB,MAAM,SAAS;AAAA,MACjC;AAEO,aAAA;AAAA,QACL,GAAG;AAAA,QACH,CAAC,KAAK,GAAG;AAAA,MAAA;AAAA,IACX,GACC,CAAE,CAAA,IACL,EAAE,CAAC,OAAO,KAAK,GAAG,OAAO,SAAS;AAExC,UAAM,YAAY;AAAA,MAChB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,OAAO,KAAK,cAAc;AAAA,IAAA;AAK/B,QAAI,OAAO;AACT,YAAM,kBAAkB,OAAO,KAAK,cAAc,EAAE;AAAA,QAClD,CAAC,KAAK,SAAS;AACN,iBAAA;AAAA,YACL,GAAG;AAAA,YACH,CAAC,IAAI,GAAG,UAAU,IAAI,QAAQ,KAAK;AAAA,UAAA;AAAA,QAEvC;AAAA,QACA,CAAC;AAAA,MAAA;AAGS,kBAAA,UAAU,OAAO,eAAe;AAAA,IAC9C;AAGY,gBAAA,UAAU,OAAO,GAAG,SAAS;AAGrC,QAAA,cAAc,SAAS,GAAG;AAChB,kBAAA,UAAU,QAAQ,aAAa;AAAA,IAC7C;AAEI,QAAA,cAAc,SAAS,GAAG;AAEhB,kBAAA,UAAU,MAAM,eAAe,cAAc;AAAA,IAAA,OACpD;AAEO,kBAAA,UAAU,OAAO,cAAc;AAAA,IAC7C;AAII,QAAA,cAAc,SAAS,GAAG;AAC5B,YAAM,aAAa,QAAQ,cACxB,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,EAC3B,KAAK,WAAW,CAAC;AAEpB,kBAAY,UAAU;AAAA,QACpB,EAAE,CAAC,UAAU,GAAG,WAAW;AAAA,QAC3B,EAAE,OAAO,cAAc,cAAc,SAAS,CAAC,EAAE;AAAA,MAAA;AAAA,IAErD;AAGA,QAAI,OAAO,KAAK,YAAY,EAAE,SAAS,GAAG;AACxC,kBAAY,UAAU;AAAA,QACpB,GAAG,OAAO,KAAK,YAAY,EAExB,OAAO,CAAC,QAAQ,UAAU,SAAS,GAAG,CAAC,EACvC,IAAI,CAAC,QAAS,aAAa,GAAG,MAAM,SAAS,KAAK,GAAG,IAAI,GAAI;AAAA,MAAA;AAAA,IAEpE;AAGI,QAAA,cAAc,SAAS,GAAG;AAC5B,kBAAY,UAAU,OAAO,IAAI,GAAG,aAAa,CAAC;AAAA,IACpD;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,MAAM,SAAS,SAAS,UAAU,QAAQ,OAAO,UAAU,CAAC;AAEzD,SAAA;AACT;"}

package/dist/esm/hooks/useDataZoom.js

@@ -1,20 +1,21 @@
 import { useMemo } from "react";
-const useDataZoom = ({
-  showHorizontal
-}) => {
+const useDataZoom = ({ showHorizontal }) => {
   const option = useMemo(() => {
     return {
-      dataZoom: [{
-        show: showHorizontal ?? false,
-        type: "slider",
-        orient: "horizontal"
-      }, {
-        show: showHorizontal ?? false,
-        type: "inside",
-        orient: "horizontal",
-        zoomOnMouseWheel: "shift",
-        moveOnMouseWheel: true
-      }]
+      dataZoom: [
+        {
+          show: showHorizontal ?? false,
+          type: "slider",
+          orient: "horizontal"
+        },
+        {
+          show: showHorizontal ?? false,
+          type: "inside",
+          orient: "horizontal",
+          zoomOnMouseWheel: "shift",
+          moveOnMouseWheel: true
+        }
+      ]
     };
   }, [showHorizontal]);
   return option;