@hitachivantara/uikit-react-viz 5.6.26 → 5.6.28

package/dist/cjs/components/ConfusionMatrix/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n  data,\n  delta,\n  custom,\n  filterKey,\n}: {\n  data: ColumnTable;\n  delta: boolean;\n  filterKey: string;\n  custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n  const { colors } = useTheme();\n\n  const colorScale = useMemo(() => {\n    if (custom == null && delta) {\n      return;\n    }\n\n    if (custom && typeof custom[0] === \"object\") {\n      return {\n        pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n          (acc: HvConfusionMatrixColorScale[], curr) => {\n            acc.push({\n              ...curr,\n              color: colors?.[curr.color] || curr.color,\n            });\n            return acc;\n          },\n          []\n        ),\n      };\n    }\n\n    const flatData = data\n      .columnNames()\n      .filter((p) => p !== filterKey)\n      .reduce((acc: number[], c: string) => {\n        acc.push(...data.array(c));\n        return acc;\n      }, []);\n    const max = Math.max(...flatData);\n    const min = Math.min(...flatData);\n\n    return {\n      colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n      max,\n      min,\n    };\n  }, [colors, custom, data, filterKey, delta]);\n\n  return colorScale;\n};\n\nexport const useSeries = ({\n  data,\n  filterKey,\n  delta,\n  valuesProps,\n}: {\n  data: ColumnTable;\n  filterKey: string;\n  delta: boolean;\n  valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n  const { colors } = useTheme();\n\n  const getDeltaColor = useCallback(\n    (value: number, diagonal: boolean) => {\n      if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n        return colors?.positive;\n      }\n      if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n        return colors?.negative;\n      }\n\n      return colors?.base_light;\n    },\n    [colors]\n  );\n\n  const chartSeries = useMemo(() => {\n    return {\n      series: {\n        id: `series~${filterKey}`,\n        type: \"heatmap\",\n        label: {\n          show: true,\n          ...valuesProps,\n          ...(valuesProps?.color && {\n            color: colors?.[valuesProps.color] || valuesProps.color,\n          }),\n        },\n        emphasis: {\n          disabled: true,\n        },\n        data: data\n          .columnNames()\n          .filter((p) => p !== filterKey)\n          .reduce((acc: (string | number)[][], c: string, j) => {\n            const row: (string | number)[][] = data\n              .array(c)\n              .reduce((racc, rv, i) => {\n                racc.push({\n                  value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n                  ...(delta && {\n                    visualMap: false,\n                    itemStyle: {\n                      color: getDeltaColor(rv, i === j),\n                    },\n                  }),\n                });\n                return racc;\n              }, []);\n\n            acc.push(...row);\n            return acc;\n          }, []),\n      },\n    };\n  }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n  return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n  data,\n  filterKey,\n  format,\n  xAxisPosition,\n  visualMapVisible,\n  visualMapYPosition,\n}: {\n  xAxisPosition: HvChartXAxis[\"position\"];\n  data: ColumnTable;\n  filterKey: string;\n  format: HvConfusionMatrixFormat;\n  visualMapVisible: boolean;\n  visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n  const size = useMemo(() => {\n    const nCols = data.array(filterKey).length;\n    const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n    const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n    return {\n      padding: {\n        bottom:\n          xAxisPosition === \"bottom\" ||\n          (visualMapVisible && visualMapYPosition === \"bottom\")\n            ? 60\n            : 20,\n        top:\n          xAxisPosition === \"top\" ||\n          (visualMapVisible && visualMapYPosition === \"top\")\n            ? 60\n            : 20,\n        ...(visualMapVisible &&\n          visualMapYPosition === \"bottom\" &&\n          xAxisPosition === \"bottom\" && {\n            bottom: 100,\n          }),\n        ...(visualMapVisible &&\n          visualMapYPosition === \"top\" &&\n          xAxisPosition === \"top\" && {\n            top: 100,\n          }),\n        left: 80,\n        right: 80,\n      },\n      size: {\n        height: Math.max(itemHeight * nRows, itemHeight * 8),\n        width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n      },\n    };\n  }, [\n    data,\n    filterKey,\n    format,\n    visualMapVisible,\n    visualMapYPosition,\n    xAxisPosition,\n  ]);\n\n  return size;\n};\n"],"names":["useColorScale","data","delta","custom","filterKey","colors","useTheme","colorScale","useMemo","pieces","reduce","acc","curr","push","color","flatData","columnNames","filter","p","c","array","max","Math","min","base_light","cat3","useSeries","valuesProps","getDeltaColor","useCallback","value","diagonal","positive","negative","chartSeries","series","id","type","label","show","emphasis","disabled","j","row","racc","rv","i","visualMap","itemStyle","SQUARE_SIZE","useGridLayout","format","xAxisPosition","visualMapVisible","visualMapYPosition","size","nCols","length","nRows","itemHeight","padding","bottom","top","left","right","height","width"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n  data,\n  delta,\n  custom,\n  filterKey,\n}: {\n  data: ColumnTable;\n  delta: boolean;\n  filterKey: string;\n  custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n  const { colors } = useTheme();\n\n  const colorScale = useMemo(() => {\n    if (custom == null && delta) {\n      return;\n    }\n\n    if (custom && typeof custom[0] === \"object\") {\n      return {\n        pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n          (acc: HvConfusionMatrixColorScale[], curr) => {\n            acc.push({\n              ...curr,\n              color: colors?.[curr.color] || curr.color,\n            });\n            return acc;\n          },\n          []\n        ),\n      };\n    }\n\n    const flatData = data\n      .columnNames()\n      .filter((p) => p !== filterKey)\n      .reduce((acc: number[], c: string) => {\n        acc.push(...data.array(c));\n        return acc;\n      }, []);\n    const max = Math.max(...flatData);\n    const min = Math.min(...flatData);\n\n    return {\n      colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n      max,\n      min,\n    };\n  }, [colors, custom, data, filterKey, delta]);\n\n  return colorScale;\n};\n\nexport const useSeries = ({\n  data,\n  filterKey,\n  delta,\n  valuesProps,\n}: {\n  data: ColumnTable;\n  filterKey: string;\n  delta: boolean;\n  valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n  const { colors } = useTheme();\n\n  const getDeltaColor = useCallback(\n    (value: number, diagonal: boolean) => {\n      if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n        return colors?.positive;\n      }\n      if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n        return colors?.negative;\n      }\n\n      return colors?.base_light;\n    },\n    [colors]\n  );\n\n  const chartSeries = useMemo(() => {\n    return {\n      series: {\n        id: `series~${filterKey}`,\n        type: \"heatmap\",\n        label: {\n          show: true,\n          ...valuesProps,\n          ...(valuesProps?.color && {\n            color: colors?.[valuesProps.color] || valuesProps.color,\n          }),\n        },\n        emphasis: {\n          disabled: true,\n        },\n        data: data\n          .columnNames()\n          .filter((p) => p !== filterKey)\n          .reduce((acc: (string | number)[][], c: string, j) => {\n            const row: (string | number)[][] = data\n              .array(c)\n              .reduce((racc, rv, i) => {\n                racc.push({\n                  value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n                  ...(delta && {\n                    visualMap: false,\n                    itemStyle: {\n                      color: getDeltaColor(rv, i === j),\n                    },\n                  }),\n                });\n                return racc;\n              }, []);\n\n            acc.push(...row);\n            return acc;\n          }, []),\n      },\n    };\n  }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n  return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n  data,\n  filterKey,\n  format,\n  xAxisPosition,\n  visualMapVisible,\n  visualMapYPosition,\n}: {\n  xAxisPosition: HvChartXAxis[\"position\"];\n  data: ColumnTable;\n  filterKey: string;\n  format: HvConfusionMatrixFormat;\n  visualMapVisible: boolean;\n  visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n  const size = useMemo(() => {\n    const nCols = data.array(filterKey).length;\n    const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n    const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n    return {\n      padding: {\n        bottom:\n          xAxisPosition === \"bottom\" ||\n          (visualMapVisible && visualMapYPosition === \"bottom\")\n            ? 60\n            : 20,\n        top:\n          xAxisPosition === \"top\" ||\n          (visualMapVisible && visualMapYPosition === \"top\")\n            ? 60\n            : 20,\n        ...(visualMapVisible &&\n          visualMapYPosition === \"bottom\" &&\n          xAxisPosition === \"bottom\" && {\n            bottom: 100,\n          }),\n        ...(visualMapVisible &&\n          visualMapYPosition === \"top\" &&\n          xAxisPosition === \"top\" && {\n            top: 100,\n          }),\n        left: 80,\n        right: 80,\n      },\n      size: {\n        height: Math.max(itemHeight * nRows, itemHeight * 8),\n        width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n      },\n    };\n  }, [\n    data,\n    filterKey,\n    format,\n    visualMapVisible,\n    visualMapYPosition,\n    xAxisPosition,\n  ]);\n\n  return size;\n};\n"],"names":["useTheme","useMemo","useCallback"],"mappings":"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"}

package/dist/cjs/components/DonutChart/DonutChart.cjs

@@ -32,64 +32,65 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
-echarts__namespace.use([charts.PieChart, components.DatasetComponent, components.GridComponent, components.TooltipComponent, components.LegendComponent]);
-const HvDonutChart = react.forwardRef((props, ref) => {
-  const {
-    data,
-    groupBy,
-    classes,
-    legend,
-    tooltip,
-    measure: measures,
-    sortBy,
-    grid,
-    width,
-    height,
-    type = "regular",
-    slicesNameFormatter,
-    onOptionChange
-  } = props;
-  const chartData = useData.useData({
-    data,
-    groupBy,
-    measures,
-    sortBy
-  });
-  const chartDataset = useDataset.useDataset(chartData);
-  const chartSeries = useSeries.useSeries({
-    type: "pie",
-    data: chartData,
-    groupBy,
-    measures,
-    radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
-  });
-  const chartLegend = useLegend.useLegend({
-    ...legend,
-    show: legend?.show ?? true,
-    icon: "square",
-    series: chartSeries.series,
-    formatter: slicesNameFormatter
-  });
-  const chartTooltip = useTooltip.useTooltip({
-    ...tooltip,
-    measures,
-    classes,
-    nameFormatter: slicesNameFormatter
-  });
-  const chartGrid = useGrid.useGrid({
-    ...grid
-  });
-  const option = useOption.useOption({
-    option: {
-      ...chartSeries,
-      ...chartDataset,
-      ...chartLegend,
-      ...chartTooltip,
-      ...chartGrid
-    },
-    onOptionChange
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
-});
+echarts__namespace.use([
+  charts.PieChart,
+  components.DatasetComponent,
+  components.GridComponent,
+  components.TooltipComponent,
+  components.LegendComponent
+]);
+const HvDonutChart = react.forwardRef(
+  (props, ref) => {
+    const {
+      data,
+      groupBy,
+      classes,
+      legend,
+      tooltip,
+      measure: measures,
+      sortBy,
+      grid,
+      width,
+      height,
+      type = "regular",
+      slicesNameFormatter,
+      onOptionChange
+    } = props;
+    const chartData = useData.useData({ data, groupBy, measures, sortBy });
+    const chartDataset = useDataset.useDataset(chartData);
+    const chartSeries = useSeries.useSeries({
+      type: "pie",
+      data: chartData,
+      groupBy,
+      measures,
+      radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
+    });
+    const chartLegend = useLegend.useLegend({
+      ...legend,
+      show: legend?.show ?? true,
+      icon: "square",
+      series: chartSeries.series,
+      formatter: slicesNameFormatter
+    });
+    const chartTooltip = useTooltip.useTooltip({
+      ...tooltip,
+      measures,
+      classes,
+      nameFormatter: slicesNameFormatter
+    });
+    const chartGrid = useGrid.useGrid({ ...grid });
+    const option = useOption.useOption({
+      option: {
+        ...chartSeries,
+        ...chartDataset,
+        ...chartLegend,
+        ...chartTooltip,
+        ...chartGrid
+      },
+      onOptionChange
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
+  }
+);
 exports.HvDonutChart = HvDonutChart;
 //# sourceMappingURL=DonutChart.cjs.map

package/dist/cjs/components/DonutChart/DonutChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.cjs","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\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":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","forwardRef","props","ref","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","onOptionChange","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","option","useOption","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BAA,mBAAQC,IAAI,CACVC,iBACAC,WAAAA,kBACAC,WAAAA,eACAC,WAAAA,kBACAC,WAAe,eAAA,CAChB;AAmBM,MAAMC,eAAeC,MAAAA,WAC1B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,EACEf,IAAAA;AAEJ,QAAMgB,YAAYC,QAAAA,QAAQ;AAAA,IAAEf;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDS,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAAA,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNX,MAAMc;AAAAA,IACNb;AAAAA,IACAK;AAAAA,IACAc,QAAQT,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMU,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAGnB;AAAAA,IACHoB,MAAMpB,QAAQoB,QAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWd;AAAAA,EAAAA,CACZ;AAED,QAAMe,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAGxB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA2B,eAAejB;AAAAA,EAAAA,CAChB;AAED,QAAMkB,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAGvB;AAAAA,EAAAA,CAAM;AAErC,QAAMwB,SAASC,UAAAA,UAAU;AAAA,IACvBD,QAAQ;AAAA,MACN,GAAGd;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IACL;AAAA,IACAjB;AAAAA,EAAAA,CACD;AAED,SACGqB,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;;"}
+{"version":3,"file":"DonutChart.cjs","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\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":["echarts","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","forwardRef","useData","useDataset","useSeries","useLegend","useTooltip","useGrid","useOption","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BAA,mBAAQ,IAAI;AAAA,EACVC,OAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AACF,CAAC;AAmBM,MAAM,eAAeC,MAAA;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,YAAYC,QAAAA,QAAQ,EAAE,MAAM,SAAS,UAAU,QAAQ;AAEvD,UAAA,eAAeC,sBAAW,SAAS;AAEzC,UAAM,cAAcC,UAAAA,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,cAAcC,UAAAA,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM,QAAQ,QAAQ;AAAA,MACtB,MAAM;AAAA,MACN,QAAQ,YAAY;AAAA,MACpB,WAAW;AAAA,IAAA,CACZ;AAED,UAAM,eAAeC,WAAAA,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,YAAYC,QAAA,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,SAASC,UAAAA,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,WACGC,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;;"}

package/dist/cjs/components/LineChart/LineChart.cjs

@@ -35,86 +35,85 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
-echarts__namespace.use([charts.LineChart, components.DatasetComponent, components.GridComponent, components.TooltipComponent, components.LegendComponent, components.DataZoomSliderComponent, components.DataZoomInsideComponent]);
-const HvLineChart = react.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.useData({
-    data,
-    groupBy,
-    measures,
-    splitBy,
-    sortBy
-  });
-  const chartDataset = useDataset.useDataset(chartData);
-  const chartYAxis = useYAxis.useYAxis({
-    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
-  });
-  const chartXAxis = useXAxis.useXAxis({
-    ...xAxis,
-    scale: true
-  });
-  const chartSlider = useDataZoom.useDataZoom({
-    showHorizontal: horizontalRangeSlider?.show
-  });
-  const chartGrid = useGrid.useGrid({
-    ...grid
-  });
-  const chartSeries = useSeries.useSeries({
-    type: "line",
-    data: chartData,
-    groupBy,
-    measures,
-    area,
-    areaOpacity,
-    emptyCellMode,
-    stack,
-    nameFormatter: seriesNameFormatter
-  });
-  const chartLegend = useLegend.useLegend({
-    ...legend,
-    series: chartSeries.series
-  });
-  const chartTooltip = useTooltip.useTooltip({
-    ...tooltip,
-    trigger: "axis",
-    measures,
-    classes
-  });
-  const option = useOption.useOption({
-    option: {
-      ...chartYAxis,
-      ...chartXAxis,
-      ...chartSlider,
-      ...chartGrid,
-      ...chartDataset,
-      ...chartSeries,
-      ...chartLegend,
-      ...chartTooltip
-    },
-    onOptionChange
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
-});
+echarts__namespace.use([
+  charts.LineChart,
+  components.DatasetComponent,
+  components.GridComponent,
+  components.TooltipComponent,
+  components.LegendComponent,
+  components.DataZoomSliderComponent,
+  components.DataZoomInsideComponent
+]);
+const HvLineChart = react.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.useData({ data, groupBy, measures, splitBy, sortBy });
+    const chartDataset = useDataset.useDataset(chartData);
+    const chartYAxis = useYAxis.useYAxis({
+      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
+    });
+    const chartXAxis = useXAxis.useXAxis({ ...xAxis, scale: true });
+    const chartSlider = useDataZoom.useDataZoom({
+      showHorizontal: horizontalRangeSlider?.show
+    });
+    const chartGrid = useGrid.useGrid({ ...grid });
+    const chartSeries = useSeries.useSeries({
+      type: "line",
+      data: chartData,
+      groupBy,
+      measures,
+      area,
+      areaOpacity,
+      emptyCellMode,
+      stack,
+      nameFormatter: seriesNameFormatter
+    });
+    const chartLegend = useLegend.useLegend({
+      ...legend,
+      series: chartSeries.series
+    });
+    const chartTooltip = useTooltip.useTooltip({
+      ...tooltip,
+      trigger: "axis",
+      measures,
+      classes
+    });
+    const option = useOption.useOption({
+      option: {
+        ...chartYAxis,
+        ...chartXAxis,
+        ...chartSlider,
+        ...chartGrid,
+        ...chartDataset,
+        ...chartSeries,
+        ...chartLegend,
+        ...chartTooltip
+      },
+      onOptionChange
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, width, height });
+  }
+);
 exports.HvLineChart = HvLineChart;
 //# sourceMappingURL=LineChart.cjs.map

package/dist/cjs/components/LineChart/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","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","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCAA,mBAAQC,IAAI,CACVC,OACAC,WAAAA,6BACAC,WAAAA,eACAC,WACAC,kBAAAA,4BACAC,WAAAA,yBACAC,WAAuB,uBAAA,CACxB;AAuBM,MAAMC,cAAcC,MAAAA,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,QAAAA,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEY,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAM0B,aAAaC,SAAAA,SAAS;AAAA,IAAE,GAAG1B;AAAAA,IAAO2B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAAA,YAAY;AAAA,IAC9BC,gBAAgB7B,uBAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAAA,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,UAAAA,UAAU;AAAA,IAC5B,GAAG7B;AAAAA,IACH8B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAG9B;AAAAA,IACH+B,SAAS;AAAA,IACTpC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAED,QAAMiC,SAASC,UAAAA,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+B,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;;"}
+{"version":3,"file":"LineChart.cjs","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","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","forwardRef","useData","useDataset","useYAxis","useXAxis","useDataZoom","useGrid","useSeries","useLegend","useTooltip","useOption","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCAA,mBAAQ,IAAI;AAAA,EACVC,OAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AAAA,EACAC,WAAA;AACF,CAAC;AAuBM,MAAM,cAAcC,MAAA;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,YAAYC,gBAAQ,EAAE,MAAM,SAAS,UAAU,SAAS,QAAQ;AAEhE,UAAA,eAAeC,sBAAW,SAAS;AAEzC,UAAM,aAAaC,SAAAA,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAaC,SAAAA,SAAS,EAAE,GAAG,OAAO,OAAO,MAAM;AAErD,UAAM,cAAcC,YAAAA,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAYC,QAAA,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAcC,UAAAA,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,cAAcC,UAAAA,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAeC,WAAAA,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAASC,UAAAA,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,WACGC,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;;"}

package/dist/cjs/hooks/tooltip/styles.cjs

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const {
-  useClasses,
-  staticClasses
-} = uikitReactCore.createClasses("HvChartTooltip", {
+const { useClasses, staticClasses } = uikitReactCore.createClasses("HvChartTooltip", {
   /** Single tooltip styles */
   singleTooltipRoot: {
     width: "fit-content",
@@ -46,9 +43,7 @@ const {
     display: "flex",
     flexDirection: "column",
     padding: uikitReactCore.theme.space.sm,
-    "& > *:not(:last-child)": {
-      paddingBottom: uikitReactCore.theme.space.sm
-    }
+    "& > *:not(:last-child)": { paddingBottom: uikitReactCore.theme.space.sm }
   },
   multipleTooltipSeriesContainer: {
     display: "flex",

package/dist/cjs/hooks/tooltip/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","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,eAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,mBAAmB;AAAA,IACjBC,OAAO;AAAA,IACPC,WAAWC,eAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,eAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,eAAAA,MAAMM,MAAMC;AAAAA,IACrBC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA,IAClBC,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAC,oBAAoB;AAAA,IAClBT,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,IACpBG,YAAYrB,eAAAA,MAAMM,MAAMgB;AAAAA,EAC1B;AAAA;AAAA,EAEAC,qBAAqB;AAAA,IACnBzB,OAAO;AAAA,IACPC,WAAWC,eAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,eAAAA,MAAMC,OAAOG;AAAAA,EAChC;AAAA,EACAoB,+BAA+B;AAAA,IAC7BnB,SAAU,QAAOL,eAAMM,MAAAA,MAAMC,EAAG;AAAA,IAChCkB,cAAe,aAAYzB,eAAMC,MAAAA,OAAOyB,KAAM;AAAA,EAChD;AAAA,EACAC,sBAAsB;AAAA,IACpBjB,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAU,gCAAgC;AAAA,IAC9BpB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfxB,SAASL,eAAAA,MAAMM,MAAMC;AAAAA,IAErB,0BAA0B;AAAA,MAAEuB,eAAe9B,eAAAA,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,eAAAA,MAAMM,MAAMC;AAAAA,EAC3B;AAAA,EACA6B,4BAA4B;AAAA,IAC1BtC,OAAO;AAAA,IACPuC,QAAQ;AAAA,IACRF,aAAa;AAAA,EACf;AAAA,EACAG,2BAA2B;AAAA,IACzB5B,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAqB,4BAA4B;AAAA,IAC1B7B,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AACF,CAAC;;;"}
+{"version":3,"file":"styles.cjs","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":["createClasses","theme"],"mappings":";;;AAEO,MAAM,EAAE,YAAY,kBAAkBA,eAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3E,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,WAAWC,eAAAA,MAAM,OAAO;AAAA,IACxB,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,IAC9B,SAASA,eAAAA,MAAM,MAAM;AAAA,IACrB,SAAS;AAAA,EACX;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAYA,eAAAA,MAAM,WAAW;AAAA,IAC7B,YAAYA,eAAAA,MAAM,YAAY;AAAA,IAC9B,UAAUA,eAAAA,MAAM,UAAU;AAAA,IAC1B,OAAOA,eAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAYA,eAAAA,MAAM,WAAW;AAAA,IAC7B,YAAYA,eAAAA,MAAM,YAAY;AAAA,IAC9B,UAAUA,eAAAA,MAAM,UAAU;AAAA,IAC1B,OAAOA,eAAAA,MAAM,OAAO;AAAA,IACpB,YAAYA,eAAAA,MAAM,MAAM;AAAA,EAC1B;AAAA;AAAA,EAEA,qBAAqB;AAAA,IACnB,OAAO;AAAA,IACP,WAAWA,eAAAA,MAAM,OAAO;AAAA,IACxB,iBAAiBA,eAAAA,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,+BAA+B;AAAA,IAC7B,SAAS,QAAQA,eAAM,MAAA,MAAM,EAAE;AAAA,IAC/B,cAAc,aAAaA,eAAM,MAAA,OAAO,KAAK;AAAA,EAC/C;AAAA,EACA,sBAAsB;AAAA,IACpB,YAAYA,eAAAA,MAAM,WAAW;AAAA,IAC7B,YAAYA,eAAAA,MAAM,YAAY;AAAA,IAC9B,UAAUA,eAAAA,MAAM,UAAU;AAAA,IAC1B,OAAOA,eAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gCAAgC;AAAA,IAC9B,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAASA,eAAAA,MAAM,MAAM;AAAA,IAErB,0BAA0B,EAAE,eAAeA,qBAAM,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,aAAaA,eAAAA,MAAM,MAAM;AAAA,EAC3B;AAAA,EACA,4BAA4B;AAAA,IAC1B,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,EACf;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAYA,eAAAA,MAAM,WAAW;AAAA,IAC7B,YAAYA,eAAAA,MAAM,YAAY;AAAA,IAC9B,UAAUA,eAAAA,MAAM,UAAU;AAAA,IAC1B,OAAOA,eAAAA,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,4BAA4B;AAAA,IAC1B,YAAYA,eAAAA,MAAM,WAAW;AAAA,IAC7B,YAAYA,eAAAA,MAAM,YAAY;AAAA,IAC9B,UAAUA,eAAAA,MAAM,UAAU;AAAA,IAC1B,OAAOA,eAAAA,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;;;"}

package/dist/cjs/hooks/tooltip/useTooltip.cjs

@@ -15,24 +15,26 @@ const useTooltip = ({
   titleFormatter,
   nameFormatter
 }) => {
-  const {
-    classes: hvClasses
-  } = styles.useClasses(classes);
-  const renderTooltip = react.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.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 } = styles.useClasses(classes);
+  const renderTooltip = react.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.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>
@@ -41,12 +43,15 @@ const useTooltip = ({
           </div>
           <div class="${hvClasses?.multipleTooltipValuesContainer}">
             ${params.map((s) => {
-      const measure = getMeasure.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.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}" />
@@ -55,27 +60,40 @@ const useTooltip = ({
                   <p class="${hvClasses?.multipleTooltipSeriesValue}">${formattedValue}</p>
                 </div>
               `;
-    }).join(" ")}
+      }).join(" ")}
           </div>
         </div>
         `;
-  }, [hvClasses, horizontal, type, measures, nameFormatter, titleFormatter, valueFormatter]);
-  const renderCustomTooltip = react.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 = react.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 = react.useMemo(() => {
     return {
       tooltip: {