@hitachivantara/uikit-react-viz 5.5.6 → 5.5.8

package/dist/cjs/components/BarChart/BarChart.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("react");
 const echarts = require("echarts/core");
 const charts = require("echarts/charts");
@@ -12,7 +13,6 @@ const useData = require("../../hooks/useData.cjs");
 const useDataset = require("../../hooks/useDataset.cjs");
 const useSeries = require("../../hooks/useSeries.cjs");
 const useLegend = require("../../hooks/useLegend.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useTooltip = require("../../hooks/tooltip/useTooltip.cjs");
 const BaseChart = require("../BaseChart/BaseChart.cjs");
 function _interopNamespace(e) {
@@ -109,11 +109,7 @@ const HvBarChart = ({
       ...chartTooltip
     };
   }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
-    options,
-    width,
-    height
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { options, width, height });
 };
 exports.HvBarChart = HvBarChart;
 //# sourceMappingURL=BarChart.cjs.map

package/dist/cjs/components/BarChart/BarChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = ({\n  yAxis,\n  xAxis,\n  horizontal = false,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  stack,\n  seriesNameFormatter,\n  measures,\n  legend,\n  tooltip,\n  classes,\n  height,\n  width,\n}: HvBarChartProps) => {\n  const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    defaultType: horizontal ? \"categorical\" : \"continuous\",\n  });\n\n  const chartXAxis = useXAxis({\n    type: horizontal ? \"continuous\" : \"categorical\",\n    ...xAxis,\n  });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"bar\",\n    data: chartData,\n    groupBy,\n    measures,\n    stack,\n    nameFormatter: seriesNameFormatter,\n    horizontal,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n    icon: \"square\",\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\n    horizontal,\n  });\n\n  const options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","height","width","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","defaultType","chartXAxis","useXAxis","type","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAA,mBAAQC,IAAI,CACVC,OACAC,UAAAA,6BACAC,WAAAA,eACAC,WACAC,kBAAAA,4BACAC,WAAAA,yBACAC,WAAuB,uBAAA,CACxB;AAkBM,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACrB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhEQ,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,IAC5D0B,aAAaxB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAMyB,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAM3B,aAAa,eAAe;AAAA,IAClC,GAAGD;AAAAA,EAAAA,CACJ;AAED,QAAM6B,cAAcC,YAAAA,YAAY;AAAA,IAC9BC,gBAAgB7B,+DAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAAA,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNxB,MAAMY;AAAAA,IACNX;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACA6B,eAAe5B;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMqC,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQL,YAAYK;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAG/B;AAAAA,IACHgC,SAAS;AAAA,IACTlC;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAEK4C,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAG1B;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGf;AAAAA,MACH,GAAGiB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAN,YACAS,aACAI,WACAf,cACAiB,aACAG,aACAI,YAAY,CACb;AAED,wCAAQK,UAAAA,aAAW;AAAA,IAACF;AAAAA,IAAkB9B;AAAAA,IAAcD;AAAAA,EAAAA,CAAiB;AACvE;;"}
+{"version":3,"file":"BarChart.cjs","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = ({\n  yAxis,\n  xAxis,\n  horizontal = false,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  stack,\n  seriesNameFormatter,\n  measures,\n  legend,\n  tooltip,\n  classes,\n  height,\n  width,\n}: HvBarChartProps) => {\n  const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    defaultType: horizontal ? \"categorical\" : \"continuous\",\n  });\n\n  const chartXAxis = useXAxis({\n    type: horizontal ? \"continuous\" : \"categorical\",\n    ...xAxis,\n  });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"bar\",\n    data: chartData,\n    groupBy,\n    measures,\n    stack,\n    nameFormatter: seriesNameFormatter,\n    horizontal,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n    icon: \"square\",\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\n    horizontal,\n  });\n\n  const options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","height","width","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","defaultType","chartXAxis","useXAxis","type","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","options","useMemo","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAA,mBAAQC,IAAI,CACVC,OACAC,UAAAA,6BACAC,WAAAA,eACAC,WACAC,kBAAAA,4BACAC,WAAAA,yBACAC,WAAuB,uBAAA,CACxB;AAkBM,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACrB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhEQ,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,IAC5D0B,aAAaxB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAMyB,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAM3B,aAAa,eAAe;AAAA,IAClC,GAAGD;AAAAA,EAAAA,CACJ;AAED,QAAM6B,cAAcC,YAAAA,YAAY;AAAA,IAC9BC,gBAAgB7B,+DAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAAA,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNxB,MAAMY;AAAAA,IACNX;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACA6B,eAAe5B;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMqC,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQL,YAAYK;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAG/B;AAAAA,IACHgC,SAAS;AAAA,IACTlC;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAEK4C,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAG1B;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGf;AAAAA,MACH,GAAGiB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAN,YACAS,aACAI,WACAf,cACAiB,aACAG,aACAI,YAAY,CACb;AAED,SAAQK,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;;"}

package/dist/cjs/components/BaseChart/BaseChart.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("react");
 const components = require("echarts/components");
 const renderers = require("echarts/renderers");
 const echarts = require("echarts/core");
 const ReactECharts = require("echarts-for-react/lib/core");
 const useVizTheme = require("../../hooks/useVizTheme.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 function _interopNamespace(e) {
   if (e && e.__esModule)
@@ -73,19 +73,12 @@ const HvBaseChart = ({
       replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
     });
   }, [theme, options]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactECharts__default.default, {
-    ref: chartRef,
-    echarts: echarts__namespace,
-    option: initialOption,
-    theme,
-    notMerge: true,
-    ...(width || height) && {
-      style: {
-        width,
-        height
-      }
+  return /* @__PURE__ */ jsxRuntime.jsx(ReactECharts__default.default, { ref: chartRef, echarts: echarts__namespace, option: initialOption, theme, notMerge: true, ...(width || height) && {
+    style: {
+      width,
+      height
     }
-  });
+  } });
 };
 exports.HvBaseChart = HvBaseChart;
 //# sourceMappingURL=BaseChart.cjs.map

package/dist/cjs/components/BaseChart/BaseChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseChart.cjs","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\n\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useVizTheme } from \"@viz/hooks\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  options: EChartsOption;\n  width?: echarts.ResizeOpts[\"width\"];\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = ({ options, width, height }: HvBaseChartProps) => {\n  const { theme } = useVizTheme();\n\n  const currentTheme = useRef<string | undefined>(theme);\n  const chartRef = useRef<ReactECharts>(null);\n  const isMounted = useRef<boolean>(false);\n\n  const [initialOption, setInitialOption] = useState<EChartsOption>({\n    aria: {\n      enabled: true,\n    },\n    animation: false,\n    ...options,\n  });\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true;\n      return;\n    }\n\n    // when the theme changes echarts destroys the chart and mounts it again\n    // thus we need to reset the initial option\n    if (theme !== currentTheme.current) {\n      setInitialOption({\n        aria: {\n          enabled: true,\n        },\n        animation: false,\n        ...options,\n      });\n      currentTheme.current = theme;\n      return;\n    }\n\n    const instance = chartRef.current?.getEchartsInstance();\n\n    if (!instance) return;\n\n    instance.setOption(\n      {\n        ...options,\n      },\n      {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      }\n    );\n  }, [theme, options]);\n\n  return (\n    <ReactECharts\n      ref={chartRef}\n      echarts={echarts}\n      option={initialOption}\n      theme={theme}\n      notMerge\n      {...((width || height) && {\n        style: { width, height },\n      })}\n    />\n  );\n};\n"],"names":["echarts","use","CanvasRenderer","AriaComponent","HvBaseChart","options","width","height","theme","useVizTheme","currentTheme","useRef","chartRef","isMounted","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","instance","getEchartsInstance","setOption","replaceMerge","ReactECharts","ref","option","notMerge","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYAA,mBAAQC,IAAI,CAACC,0BAAgBC,WAAAA,aAAa,CAAC;AAWpC,MAAMC,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAASC;AAAAA,EAAOC;AAAyB,MAAM;AACrE,QAAA;AAAA,IAAEC;AAAAA,MAAUC,YAAY,YAAA;AAExBC,QAAAA,eAAeC,aAA2BH,KAAK;AAC/CI,QAAAA,WAAWD,aAAqB,IAAI;AACpCE,QAAAA,YAAYF,aAAgB,KAAK;AAEvC,QAAM,CAACG,eAAeC,gBAAgB,IAAIC,eAAwB;AAAA,IAChEC,MAAM;AAAA,MACJC,SAAS;AAAA,IACX;AAAA,IACAC,WAAW;AAAA,IACX,GAAGd;AAAAA,EAAAA,CACJ;AAEDe,QAAAA,UAAU,MAAM;;AACV,QAAA,CAACP,UAAUQ,SAAS;AACtBR,gBAAUQ,UAAU;AACpB;AAAA,IACF;AAIIb,QAAAA,UAAUE,aAAaW,SAAS;AACjB,uBAAA;AAAA,QACfJ,MAAM;AAAA,UACJC,SAAS;AAAA,QACX;AAAA,QACAC,WAAW;AAAA,QACX,GAAGd;AAAAA,MAAAA,CACJ;AACDK,mBAAaW,UAAUb;AACvB;AAAA,IACF;AAEMc,UAAAA,YAAWV,cAASS,YAATT,mBAAkBW;AAEnC,QAAI,CAACD;AAAU;AAEfA,aAASE,UACP;AAAA,MACE,GAAGnB;AAAAA,IAAAA,GAEL;AAAA,MACEoB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,IAAA,CAExD;AAAA,EAAA,GACC,CAACjB,OAAOH,OAAO,CAAC;AAEnB,wCACGqB,sBAAAA,SAAY;AAAA,IACXC,KAAKf;AAAAA,IAAAA,SACLZ;AAAAA,IACA4B,QAAQd;AAAAA,IACRN;AAAAA,IACAqB,UAAQ;AAAA,IAAA,IACFvB,SAASC,WAAW;AAAA,MACxBuB,OAAO;AAAA,QAAExB;AAAAA,QAAOC;AAAAA,MAAO;AAAA,IACzB;AAAA,EAAA,CACD;AAEL;;"}
+{"version":3,"file":"BaseChart.cjs","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\n\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useVizTheme } from \"@viz/hooks\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  options: EChartsOption;\n  width?: echarts.ResizeOpts[\"width\"];\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = ({ options, width, height }: HvBaseChartProps) => {\n  const { theme } = useVizTheme();\n\n  const currentTheme = useRef<string | undefined>(theme);\n  const chartRef = useRef<ReactECharts>(null);\n  const isMounted = useRef<boolean>(false);\n\n  const [initialOption, setInitialOption] = useState<EChartsOption>({\n    aria: {\n      enabled: true,\n    },\n    animation: false,\n    ...options,\n  });\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true;\n      return;\n    }\n\n    // when the theme changes echarts destroys the chart and mounts it again\n    // thus we need to reset the initial option\n    if (theme !== currentTheme.current) {\n      setInitialOption({\n        aria: {\n          enabled: true,\n        },\n        animation: false,\n        ...options,\n      });\n      currentTheme.current = theme;\n      return;\n    }\n\n    const instance = chartRef.current?.getEchartsInstance();\n\n    if (!instance) return;\n\n    instance.setOption(\n      {\n        ...options,\n      },\n      {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      }\n    );\n  }, [theme, options]);\n\n  return (\n    <ReactECharts\n      ref={chartRef}\n      echarts={echarts}\n      option={initialOption}\n      theme={theme}\n      notMerge\n      {...((width || height) && {\n        style: { width, height },\n      })}\n    />\n  );\n};\n"],"names":["echarts","use","CanvasRenderer","AriaComponent","HvBaseChart","options","width","height","theme","useVizTheme","currentTheme","useRef","chartRef","isMounted","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","instance","getEchartsInstance","setOption","replaceMerge","jsx","ReactECharts","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYAA,mBAAQC,IAAI,CAACC,0BAAgBC,WAAAA,aAAa,CAAC;AAWpC,MAAMC,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAASC;AAAAA,EAAOC;AAAyB,MAAM;AACrE,QAAA;AAAA,IAAEC;AAAAA,MAAUC,YAAY,YAAA;AAExBC,QAAAA,eAAeC,aAA2BH,KAAK;AAC/CI,QAAAA,WAAWD,aAAqB,IAAI;AACpCE,QAAAA,YAAYF,aAAgB,KAAK;AAEvC,QAAM,CAACG,eAAeC,gBAAgB,IAAIC,eAAwB;AAAA,IAChEC,MAAM;AAAA,MACJC,SAAS;AAAA,IACX;AAAA,IACAC,WAAW;AAAA,IACX,GAAGd;AAAAA,EAAAA,CACJ;AAEDe,QAAAA,UAAU,MAAM;;AACV,QAAA,CAACP,UAAUQ,SAAS;AACtBR,gBAAUQ,UAAU;AACpB;AAAA,IACF;AAIIb,QAAAA,UAAUE,aAAaW,SAAS;AACjB,uBAAA;AAAA,QACfJ,MAAM;AAAA,UACJC,SAAS;AAAA,QACX;AAAA,QACAC,WAAW;AAAA,QACX,GAAGd;AAAAA,MAAAA,CACJ;AACDK,mBAAaW,UAAUb;AACvB;AAAA,IACF;AAEMc,UAAAA,YAAWV,cAASS,YAATT,mBAAkBW;AAEnC,QAAI,CAACD;AAAU;AAEfA,aAASE,UACP;AAAA,MACE,GAAGnB;AAAAA,IAAAA,GAEL;AAAA,MACEoB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,IAAA,CAExD;AAAA,EAAA,GACC,CAACjB,OAAOH,OAAO,CAAC;AAEnB,SACGqB,2BAAA,IAAAC,sBAAA,SAAA,EACC,KAAKf,UACLZ,SAAAA,oBACA,QAAQc,eACR,OACA,UAAQ,MACH,IAACR,SAASC,WAAW;AAAA,IACxBqB,OAAO;AAAA,MAAEtB;AAAAA,MAAOC;AAAAA,IAAO;AAAA,EAEzB,EAAA,CAAA;AAEN;;"}

package/dist/cjs/components/ConfusionMatrix/ConfusionMatrix.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("react");
 const echarts = require("echarts/core");
 const charts = require("echarts/charts");
@@ -12,7 +13,6 @@ const useVisualMap = require("../../hooks/useVisualMap.cjs");
 const getGroupKey = require("../../utils/getGroupKey.cjs");
 const ConfusionMatrix_styles = require("./ConfusionMatrix.styles.cjs");
 const utils = require("./utils.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useTooltip = require("../../hooks/tooltip/useTooltip.cjs");
 const BaseChart = require("../BaseChart/BaseChart.cjs");
 function _interopNamespace(e) {
@@ -162,10 +162,7 @@ const HvConfusionMatrix = ({
       ...chartSeries
     };
   }, [chartVisualMap, chartTooltip, chartGrid, chartYAxis, chartSeries, chartXAxis]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
-    options,
-    ...size
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { options, ...size });
 };
 exports.HvConfusionMatrix = HvConfusionMatrix;
 //# sourceMappingURL=ConfusionMatrix.cjs.map

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

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

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("react");
 const echarts = require("echarts/core");
 const charts = require("echarts/charts");
@@ -9,7 +10,6 @@ const useData = require("../../hooks/useData.cjs");
 const useDataset = require("../../hooks/useDataset.cjs");
 const useSeries = require("../../hooks/useSeries.cjs");
 const useLegend = require("../../hooks/useLegend.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useTooltip = require("../../hooks/tooltip/useTooltip.cjs");
 const BaseChart = require("../BaseChart/BaseChart.cjs");
 function _interopNamespace(e) {
@@ -85,11 +85,7 @@ const HvDonutChart = ({
       ...chartGrid
     };
   }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
-    options,
-    width,
-    height
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { options, 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 { useMemo } 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\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\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 = ({\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}: HvDonutChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartSeries,\n      ...chartDataset,\n      ...chartLegend,\n      ...chartTooltip,\n      ...chartGrid,\n    };\n  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BAA,mBAAQC,IAAI,CACVC,iBACAC,WAAAA,kBACAC,WAAAA,eACAC,WAAAA,kBACAC,WAAe,eAAA,CAChB;AAmBM,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACiB,MAAM;AACvB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDQ,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAAA,UAAU;AAAA,IAC5BP,MAAM;AAAA,IACNX,MAAMa;AAAAA,IACNZ;AAAAA,IACAK;AAAAA,IACAa,QAAQR,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMS,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAGlB;AAAAA,IACHmB,OAAMnB,iCAAQmB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWb;AAAAA,EAAAA,CACZ;AAED,QAAMc,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAGvB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA0B,eAAehB;AAAAA,EAAAA,CAChB;AAED,QAAMiB,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAGtB;AAAAA,EAAAA,CAAM;AAE/BuB,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGf;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CAACZ,aAAaF,cAAcK,aAAaM,cAAcG,SAAS,CAAC;AAEpE,wCAAQI,UAAAA,aAAW;AAAA,IAACF;AAAAA,IAAkBtB;AAAAA,IAAcC;AAAAA,EAAAA,CAAiB;AACvE;;"}
+{"version":3,"file":"DonutChart.cjs","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useMemo } 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\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\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 = ({\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}: HvDonutChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartSeries,\n      ...chartDataset,\n      ...chartLegend,\n      ...chartTooltip,\n      ...chartGrid,\n    };\n  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","options","useMemo","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BAA,mBAAQC,IAAI,CACVC,iBACAC,WAAAA,kBACAC,WAAAA,eACAC,WAAAA,kBACAC,WAAe,eAAA,CAChB;AAmBM,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACiB,MAAM;AACvB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDQ,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAAA,UAAU;AAAA,IAC5BP,MAAM;AAAA,IACNX,MAAMa;AAAAA,IACNZ;AAAAA,IACAK;AAAAA,IACAa,QAAQR,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMS,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAGlB;AAAAA,IACHmB,OAAMnB,iCAAQmB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWb;AAAAA,EAAAA,CACZ;AAED,QAAMc,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAGvB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA0B,eAAehB;AAAAA,EAAAA,CAChB;AAED,QAAMiB,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAGtB;AAAAA,EAAAA,CAAM;AAE/BuB,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGf;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CAACZ,aAAaF,cAAcK,aAAaM,cAAcG,SAAS,CAAC;AAEpE,SAAQI,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;;"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("react");
 const echarts = require("echarts/core");
 const charts = require("echarts/charts");
@@ -12,7 +13,6 @@ const useData = require("../../hooks/useData.cjs");
 const useDataset = require("../../hooks/useDataset.cjs");
 const useSeries = require("../../hooks/useSeries.cjs");
 const useLegend = require("../../hooks/useLegend.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useTooltip = require("../../hooks/tooltip/useTooltip.cjs");
 const BaseChart = require("../BaseChart/BaseChart.cjs");
 function _interopNamespace(e) {
@@ -110,11 +110,7 @@ const HvLineChart = ({
       ...chartTooltip
     };
   }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
-    options,
-    width,
-    height
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { options, 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 { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\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\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\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 = ({\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}: HvLineChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","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","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAA,mBAAQC,IAAI,CACVC,OACAC,WAAAA,6BACAC,WAAAA,eACAC,WACAC,kBAAAA,4BACAC,WAAAA,yBACAC,WAAuB,uBAAA,CACxB;AAuBM,MAAMC,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AACtB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEW,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQxB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAMyB,aAAaC,SAAAA,SAAS;AAAA,IAAE,GAAGzB;AAAAA,IAAO0B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAAA,YAAY;AAAA,IAC9BC,gBAAgB5B,+DAAuB6B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAAA,CAAM;AAErC,QAAM+B,cAAcC,UAAAA,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACNhC,MAAMY;AAAAA,IACNX;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA4B,eAAe3B;AAAAA,EAAAA,CAChB;AAED,QAAM4B,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAG7B;AAAAA,IACH8B,SAAS;AAAA,IACTnC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAEKgC,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGzB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAL,YACAQ,aACAI,WACAd,cACAgB,aACAI,aACAG,YAAY,CACb;AAED,wCAAQK,UAAAA,aAAW;AAAA,IAACF;AAAAA,IAAkB9B;AAAAA,IAAcC;AAAAA,EAAAA,CAAiB;AACvE;;"}
+{"version":3,"file":"LineChart.cjs","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\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\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\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 = ({\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}: HvLineChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","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","options","useMemo","jsx","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAA,mBAAQC,IAAI,CACVC,OACAC,WAAAA,6BACAC,WAAAA,eACAC,WACAC,kBAAAA,4BACAC,WAAAA,yBACAC,WAAuB,uBAAA,CACxB;AAuBM,MAAMC,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AACtB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEW,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAAA,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQxB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAMyB,aAAaC,SAAAA,SAAS;AAAA,IAAE,GAAGzB;AAAAA,IAAO0B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAAA,YAAY;AAAA,IAC9BC,gBAAgB5B,+DAAuB6B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAAA,CAAM;AAErC,QAAM+B,cAAcC,UAAAA,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACNhC,MAAMY;AAAAA,IACNX;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA4B,eAAe3B;AAAAA,EAAAA,CAChB;AAED,QAAM4B,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAG7B;AAAAA,IACH8B,SAAS;AAAA,IACTnC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAEKgC,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGzB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAL,YACAQ,aACAI,WACAd,cACAgB,aACAI,aACAG,YAAY,CACb;AAED,SAAQK,2BAAAA,IAAAC,UAAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;;"}

package/dist/cjs/providers/Provider.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const react = require("react");
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const registerTheme = require("../utils/registerTheme.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvVizContext = react.createContext({
   theme: void 0
 });
@@ -21,10 +21,7 @@ const HvVizProvider = ({
       theme: `${selectedTheme}-${selectedMode}`
     };
   }, [selectedTheme, selectedMode, activeTheme]);
-  return /* @__PURE__ */ jsxRuntime.jsx(HvVizContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(HvVizContext.Provider, { value, children });
 };
 exports.HvVizContext = HvVizContext;
 exports.HvVizProvider = HvVizProvider;

package/dist/cjs/providers/Provider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n  /**\n   * Current theme\n   */\n  theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n  theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n  /**\n   * Component tree.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n *    <HvVizProvider>\n *        (...)\n *    </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n  const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n  const value = useMemo(() => {\n    registerTheme(selectedTheme, selectedMode, activeTheme);\n\n    return { theme: `${selectedTheme}-${selectedMode}` };\n  }, [selectedTheme, selectedMode, activeTheme]);\n\n  return (\n    <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n  );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","selectedMode","selectedTheme","useTheme","value","useMemo","_jsx","Provider"],"mappings":";;;;;;AAaO,MAAMA,eAAeC,MAAAA,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAkBC,eAAS,SAAA;AAExDC,QAAAA,QAAQC,MAAAA,QAAQ,MAAM;AACZH,kBAAAA,cAAAA,eAAeD,cAAcD,WAAW;AAE/C,WAAA;AAAA,MAAEJ,OAAQ,GAAEM,aAAc,IAAGD,YAAa;AAAA,IAAA;AAAA,EAChD,GAAA,CAACC,eAAeD,cAAcD,WAAW,CAAC;AAG3CM,SAAAA,2BAAAA,IAACZ,aAAaa,UAAQ;AAAA,IAACH;AAAAA,IAAaL;AAAAA,EAAAA,CAAkC;AAE1E;;;"}
+{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n  /**\n   * Current theme\n   */\n  theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n  theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n  /**\n   * Component tree.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n *    <HvVizProvider>\n *        (...)\n *    </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n  const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n  const value = useMemo(() => {\n    registerTheme(selectedTheme, selectedMode, activeTheme);\n\n    return { theme: `${selectedTheme}-${selectedMode}` };\n  }, [selectedTheme, selectedMode, activeTheme]);\n\n  return (\n    <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n  );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","selectedMode","selectedTheme","useTheme","value","useMemo","jsx"],"mappings":";;;;;;AAaO,MAAMA,eAAeC,MAAAA,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAkBC,eAAS,SAAA;AAExDC,QAAAA,QAAQC,MAAAA,QAAQ,MAAM;AACZH,kBAAAA,cAAAA,eAAeD,cAAcD,WAAW;AAE/C,WAAA;AAAA,MAAEJ,OAAQ,GAAEM,aAAc,IAAGD,YAAa;AAAA,IAAA;AAAA,EAChD,GAAA,CAACC,eAAeD,cAAcD,WAAW,CAAC;AAE7C,SACGM,2BAAAA,IAAA,aAAa,UAAb,EAAsB,OAAeP,SAAS,CAAA;AAEnD;;;"}

package/dist/esm/components/BarChart/BarChart.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import * as echarts from "echarts/core";
 import { BarChart } from "echarts/charts";
@@ -10,7 +11,6 @@ import { useData } from "../../hooks/useData.js";
 import { useDataset } from "../../hooks/useDataset.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { useLegend } from "../../hooks/useLegend.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
 echarts.use([BarChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
@@ -88,11 +88,7 @@ const HvBarChart = ({
       ...chartTooltip
     };
   }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
-  return /* @__PURE__ */ jsx(HvBaseChart, {
-    options,
-    width,
-    height
-  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { options, width, height });
 };
 export {
   HvBarChart

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

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = ({\n  yAxis,\n  xAxis,\n  horizontal = false,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  stack,\n  seriesNameFormatter,\n  measures,\n  legend,\n  tooltip,\n  classes,\n  height,\n  width,\n}: HvBarChartProps) => {\n  const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    defaultType: horizontal ? \"categorical\" : \"continuous\",\n  });\n\n  const chartXAxis = useXAxis({\n    type: horizontal ? \"continuous\" : \"categorical\",\n    ...xAxis,\n  });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"bar\",\n    data: chartData,\n    groupBy,\n    measures,\n    stack,\n    nameFormatter: seriesNameFormatter,\n    horizontal,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n    icon: \"square\",\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\n    horizontal,\n  });\n\n  const options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","height","width","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","defaultType","chartXAxis","useXAxis","type","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAkBM,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACrB,QAAMC,YAAYC,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhEQ,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,IAC5D0B,aAAaxB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAMyB,aAAaC,SAAS;AAAA,IAC1BC,MAAM3B,aAAa,eAAe;AAAA,IAClC,GAAGD;AAAAA,EAAAA,CACJ;AAED,QAAM6B,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB7B,+DAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNxB,MAAMY;AAAAA,IACNX;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACA6B,eAAe5B;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMqC,cAAcC,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQL,YAAYK;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG/B;AAAAA,IACHgC,SAAS;AAAA,IACTlC;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAEK4C,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAG1B;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGf;AAAAA,MACH,GAAGiB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAN,YACAS,aACAI,WACAf,cACAiB,aACAG,aACAI,YAAY,CACb;AAED,6BAAQK,aAAW;AAAA,IAACF;AAAAA,IAAkB9B;AAAAA,IAAcD;AAAAA,EAAAA,CAAiB;AACvE;"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = ({\n  yAxis,\n  xAxis,\n  horizontal = false,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  stack,\n  seriesNameFormatter,\n  measures,\n  legend,\n  tooltip,\n  classes,\n  height,\n  width,\n}: HvBarChartProps) => {\n  const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n    defaultType: horizontal ? \"categorical\" : \"continuous\",\n  });\n\n  const chartXAxis = useXAxis({\n    type: horizontal ? \"continuous\" : \"categorical\",\n    ...xAxis,\n  });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"bar\",\n    data: chartData,\n    groupBy,\n    measures,\n    stack,\n    nameFormatter: seriesNameFormatter,\n    horizontal,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n    icon: \"square\",\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\n    horizontal,\n  });\n\n  const options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","height","width","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","axes","Array","isArray","defaultType","chartXAxis","useXAxis","type","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","options","useMemo"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAkBM,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACrB,QAAMC,YAAYC,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhEQ,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQzB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,IAC5D0B,aAAaxB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAMyB,aAAaC,SAAS;AAAA,IAC1BC,MAAM3B,aAAa,eAAe;AAAA,IAClC,GAAGD;AAAAA,EAAAA,CACJ;AAED,QAAM6B,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB7B,+DAAuB8B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG/B;AAAAA,EAAAA,CAAM;AAErC,QAAMgC,cAAcC,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNxB,MAAMY;AAAAA,IACNX;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACA6B,eAAe5B;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMqC,cAAcC,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQL,YAAYK;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG/B;AAAAA,IACHgC,SAAS;AAAA,IACTlC;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAEK4C,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAG1B;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGf;AAAAA,MACH,GAAGiB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAN,YACAS,aACAI,WACAf,cACAiB,aACAG,aACAI,YAAY,CACb;AAED,SAAQ,oBAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;"}

package/dist/esm/components/BaseChart/BaseChart.js

@@ -1,10 +1,10 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { AriaComponent } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import * as echarts from "echarts/core";
 import ReactECharts from "echarts-for-react/lib/core";
 import { useVizTheme } from "../../hooks/useVizTheme.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 echarts.use([CanvasRenderer, AriaComponent]);
 const HvBaseChart = ({
   options,
@@ -50,19 +50,12 @@ const HvBaseChart = ({
       replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
     });
   }, [theme, options]);
-  return /* @__PURE__ */ jsx(ReactECharts, {
-    ref: chartRef,
-    echarts,
-    option: initialOption,
-    theme,
-    notMerge: true,
-    ...(width || height) && {
-      style: {
-        width,
-        height
-      }
+  return /* @__PURE__ */ jsx(ReactECharts, { ref: chartRef, echarts, option: initialOption, theme, notMerge: true, ...(width || height) && {
+    style: {
+      width,
+      height
     }
-  });
+  } });
 };
 export {
   HvBaseChart

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

@@ -1 +1 @@
-{"version":3,"file":"BaseChart.js","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\n\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useVizTheme } from \"@viz/hooks\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  options: EChartsOption;\n  width?: echarts.ResizeOpts[\"width\"];\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = ({ options, width, height }: HvBaseChartProps) => {\n  const { theme } = useVizTheme();\n\n  const currentTheme = useRef<string | undefined>(theme);\n  const chartRef = useRef<ReactECharts>(null);\n  const isMounted = useRef<boolean>(false);\n\n  const [initialOption, setInitialOption] = useState<EChartsOption>({\n    aria: {\n      enabled: true,\n    },\n    animation: false,\n    ...options,\n  });\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true;\n      return;\n    }\n\n    // when the theme changes echarts destroys the chart and mounts it again\n    // thus we need to reset the initial option\n    if (theme !== currentTheme.current) {\n      setInitialOption({\n        aria: {\n          enabled: true,\n        },\n        animation: false,\n        ...options,\n      });\n      currentTheme.current = theme;\n      return;\n    }\n\n    const instance = chartRef.current?.getEchartsInstance();\n\n    if (!instance) return;\n\n    instance.setOption(\n      {\n        ...options,\n      },\n      {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      }\n    );\n  }, [theme, options]);\n\n  return (\n    <ReactECharts\n      ref={chartRef}\n      echarts={echarts}\n      option={initialOption}\n      theme={theme}\n      notMerge\n      {...((width || height) && {\n        style: { width, height },\n      })}\n    />\n  );\n};\n"],"names":["echarts","use","CanvasRenderer","AriaComponent","HvBaseChart","options","width","height","theme","useVizTheme","currentTheme","useRef","chartRef","isMounted","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","instance","getEchartsInstance","setOption","replaceMerge","ReactECharts","ref","option","notMerge","style"],"mappings":";;;;;;;AAYAA,QAAQC,IAAI,CAACC,gBAAgBC,aAAa,CAAC;AAWpC,MAAMC,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAASC;AAAAA,EAAOC;AAAyB,MAAM;AACrE,QAAA;AAAA,IAAEC;AAAAA,MAAUC,YAAY;AAExBC,QAAAA,eAAeC,OAA2BH,KAAK;AAC/CI,QAAAA,WAAWD,OAAqB,IAAI;AACpCE,QAAAA,YAAYF,OAAgB,KAAK;AAEvC,QAAM,CAACG,eAAeC,gBAAgB,IAAIC,SAAwB;AAAA,IAChEC,MAAM;AAAA,MACJC,SAAS;AAAA,IACX;AAAA,IACAC,WAAW;AAAA,IACX,GAAGd;AAAAA,EAAAA,CACJ;AAEDe,YAAU,MAAM;;AACV,QAAA,CAACP,UAAUQ,SAAS;AACtBR,gBAAUQ,UAAU;AACpB;AAAA,IACF;AAIIb,QAAAA,UAAUE,aAAaW,SAAS;AACjB,uBAAA;AAAA,QACfJ,MAAM;AAAA,UACJC,SAAS;AAAA,QACX;AAAA,QACAC,WAAW;AAAA,QACX,GAAGd;AAAAA,MAAAA,CACJ;AACDK,mBAAaW,UAAUb;AACvB;AAAA,IACF;AAEMc,UAAAA,YAAWV,cAASS,YAATT,mBAAkBW;AAEnC,QAAI,CAACD;AAAU;AAEfA,aAASE,UACP;AAAA,MACE,GAAGnB;AAAAA,IAAAA,GAEL;AAAA,MACEoB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,IAAA,CAExD;AAAA,EAAA,GACC,CAACjB,OAAOH,OAAO,CAAC;AAEnB,6BACGqB,cAAY;AAAA,IACXC,KAAKf;AAAAA,IACLZ;AAAAA,IACA4B,QAAQd;AAAAA,IACRN;AAAAA,IACAqB,UAAQ;AAAA,IAAA,IACFvB,SAASC,WAAW;AAAA,MACxBuB,OAAO;AAAA,QAAExB;AAAAA,QAAOC;AAAAA,MAAO;AAAA,IACzB;AAAA,EAAA,CACD;AAEL;"}
+{"version":3,"file":"BaseChart.js","sources":["../../../../src/components/BaseChart/BaseChart.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { AriaComponent } from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\n\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useVizTheme } from \"@viz/hooks\";\n\n// Register chart components\necharts.use([CanvasRenderer, AriaComponent]);\n\nexport interface HvBaseChartProps {\n  options: EChartsOption;\n  width?: echarts.ResizeOpts[\"width\"];\n  height?: echarts.ResizeOpts[\"height\"];\n}\n\n/**\n * Base chart.\n */\nexport const HvBaseChart = ({ options, width, height }: HvBaseChartProps) => {\n  const { theme } = useVizTheme();\n\n  const currentTheme = useRef<string | undefined>(theme);\n  const chartRef = useRef<ReactECharts>(null);\n  const isMounted = useRef<boolean>(false);\n\n  const [initialOption, setInitialOption] = useState<EChartsOption>({\n    aria: {\n      enabled: true,\n    },\n    animation: false,\n    ...options,\n  });\n\n  useEffect(() => {\n    if (!isMounted.current) {\n      isMounted.current = true;\n      return;\n    }\n\n    // when the theme changes echarts destroys the chart and mounts it again\n    // thus we need to reset the initial option\n    if (theme !== currentTheme.current) {\n      setInitialOption({\n        aria: {\n          enabled: true,\n        },\n        animation: false,\n        ...options,\n      });\n      currentTheme.current = theme;\n      return;\n    }\n\n    const instance = chartRef.current?.getEchartsInstance();\n\n    if (!instance) return;\n\n    instance.setOption(\n      {\n        ...options,\n      },\n      {\n        replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n      }\n    );\n  }, [theme, options]);\n\n  return (\n    <ReactECharts\n      ref={chartRef}\n      echarts={echarts}\n      option={initialOption}\n      theme={theme}\n      notMerge\n      {...((width || height) && {\n        style: { width, height },\n      })}\n    />\n  );\n};\n"],"names":["echarts","use","CanvasRenderer","AriaComponent","HvBaseChart","options","width","height","theme","useVizTheme","currentTheme","useRef","chartRef","isMounted","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","instance","getEchartsInstance","setOption","replaceMerge","style"],"mappings":";;;;;;;AAYAA,QAAQC,IAAI,CAACC,gBAAgBC,aAAa,CAAC;AAWpC,MAAMC,cAAcA,CAAC;AAAA,EAAEC;AAAAA,EAASC;AAAAA,EAAOC;AAAyB,MAAM;AACrE,QAAA;AAAA,IAAEC;AAAAA,MAAUC,YAAY;AAExBC,QAAAA,eAAeC,OAA2BH,KAAK;AAC/CI,QAAAA,WAAWD,OAAqB,IAAI;AACpCE,QAAAA,YAAYF,OAAgB,KAAK;AAEvC,QAAM,CAACG,eAAeC,gBAAgB,IAAIC,SAAwB;AAAA,IAChEC,MAAM;AAAA,MACJC,SAAS;AAAA,IACX;AAAA,IACAC,WAAW;AAAA,IACX,GAAGd;AAAAA,EAAAA,CACJ;AAEDe,YAAU,MAAM;;AACV,QAAA,CAACP,UAAUQ,SAAS;AACtBR,gBAAUQ,UAAU;AACpB;AAAA,IACF;AAIIb,QAAAA,UAAUE,aAAaW,SAAS;AACjB,uBAAA;AAAA,QACfJ,MAAM;AAAA,UACJC,SAAS;AAAA,QACX;AAAA,QACAC,WAAW;AAAA,QACX,GAAGd;AAAAA,MAAAA,CACJ;AACDK,mBAAaW,UAAUb;AACvB;AAAA,IACF;AAEMc,UAAAA,YAAWV,cAASS,YAATT,mBAAkBW;AAEnC,QAAI,CAACD;AAAU;AAEfA,aAASE,UACP;AAAA,MACE,GAAGnB;AAAAA,IAAAA,GAEL;AAAA,MACEoB,cAAc,CAAC,SAAS,SAAS,UAAU,SAAS;AAAA,IAAA,CAExD;AAAA,EAAA,GACC,CAACjB,OAAOH,OAAO,CAAC;AAEnB,SACG,oBAAA,cAAA,EACC,KAAKO,UACL,SACA,QAAQE,eACR,OACA,UAAQ,MACH,IAACR,SAASC,WAAW;AAAA,IACxBmB,OAAO;AAAA,MAAEpB;AAAAA,MAAOC;AAAAA,IAAO;AAAA,EAEzB,EAAA,CAAA;AAEN;"}

package/dist/esm/components/ConfusionMatrix/ConfusionMatrix.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import * as echarts from "echarts/core";
 import { HeatmapChart } from "echarts/charts";
@@ -10,7 +11,6 @@ import { useVisualMap } from "../../hooks/useVisualMap.js";
 import { getGroupKey } from "../../utils/getGroupKey.js";
 import { useClasses } from "./ConfusionMatrix.styles.js";
 import { useColorScale, useSeries, useGridLayout } from "./utils.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
 echarts.use([HeatmapChart, VisualMapComponent, GridComponent, TooltipComponent]);
@@ -141,10 +141,7 @@ const HvConfusionMatrix = ({
       ...chartSeries
     };
   }, [chartVisualMap, chartTooltip, chartGrid, chartYAxis, chartSeries, chartXAxis]);
-  return /* @__PURE__ */ jsx(HvBaseChart, {
-    options,
-    ...size
-  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { options, ...size });
 };
 export {
   HvConfusionMatrix

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

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

package/dist/esm/components/DonutChart/DonutChart.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import * as echarts from "echarts/core";
 import { PieChart } from "echarts/charts";
@@ -7,7 +8,6 @@ import { useData } from "../../hooks/useData.js";
 import { useDataset } from "../../hooks/useDataset.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { useLegend } from "../../hooks/useLegend.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
 echarts.use([PieChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent]);
@@ -64,11 +64,7 @@ const HvDonutChart = ({
       ...chartGrid
     };
   }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);
-  return /* @__PURE__ */ jsx(HvBaseChart, {
-    options,
-    width,
-    height
-  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { options, width, height });
 };
 export {
   HvDonutChart

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useMemo } 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\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\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 = ({\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}: HvDonutChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartSeries,\n      ...chartDataset,\n      ...chartLegend,\n      ...chartTooltip,\n      ...chartGrid,\n    };\n  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;AA0BAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,eAAe,CAChB;AAmBM,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACiB,MAAM;AACvB,QAAMC,YAAYC,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDQ,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAU;AAAA,IAC5BP,MAAM;AAAA,IACNX,MAAMa;AAAAA,IACNZ;AAAAA,IACAK;AAAAA,IACAa,QAAQR,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMS,cAAcC,UAAU;AAAA,IAC5B,GAAGlB;AAAAA,IACHmB,OAAMnB,iCAAQmB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWb;AAAAA,EAAAA,CACZ;AAED,QAAMc,eAAeC,WAAW;AAAA,IAC9B,GAAGvB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA0B,eAAehB;AAAAA,EAAAA,CAChB;AAED,QAAMiB,YAAYC,QAAQ;AAAA,IAAE,GAAGtB;AAAAA,EAAAA,CAAM;AAE/BuB,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGf;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CAACZ,aAAaF,cAAcK,aAAaM,cAAcG,SAAS,CAAC;AAEpE,6BAAQI,aAAW;AAAA,IAACF;AAAAA,IAAkBtB;AAAAA,IAAcC;AAAAA,EAAAA,CAAiB;AACvE;"}
+{"version":3,"file":"DonutChart.js","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useMemo } 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\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\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 = ({\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}: HvDonutChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartSeries,\n      ...chartDataset,\n      ...chartLegend,\n      ...chartTooltip,\n      ...chartGrid,\n    };\n  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","options","useMemo"],"mappings":";;;;;;;;;;;;AA0BAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,eAAe,CAChB;AAmBM,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACiB,MAAM;AACvB,QAAMC,YAAYC,QAAQ;AAAA,IAAEd;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDQ,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAU;AAAA,IAC5BP,MAAM;AAAA,IACNX,MAAMa;AAAAA,IACNZ;AAAAA,IACAK;AAAAA,IACAa,QAAQR,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMS,cAAcC,UAAU;AAAA,IAC5B,GAAGlB;AAAAA,IACHmB,OAAMnB,iCAAQmB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWb;AAAAA,EAAAA,CACZ;AAED,QAAMc,eAAeC,WAAW;AAAA,IAC9B,GAAGvB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA0B,eAAehB;AAAAA,EAAAA,CAChB;AAED,QAAMiB,YAAYC,QAAQ;AAAA,IAAE,GAAGtB;AAAAA,EAAAA,CAAM;AAE/BuB,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGf;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CAACZ,aAAaF,cAAcK,aAAaM,cAAcG,SAAS,CAAC;AAEpE,SAAQ,oBAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;"}

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

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import * as echarts from "echarts/core";
 import { LineChart } from "echarts/charts";
@@ -10,7 +11,6 @@ import { useData } from "../../hooks/useData.js";
 import { useDataset } from "../../hooks/useDataset.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { useLegend } from "../../hooks/useLegend.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
 echarts.use([LineChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
@@ -89,11 +89,7 @@ const HvLineChart = ({
       ...chartTooltip
     };
   }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
-  return /* @__PURE__ */ jsx(HvBaseChart, {
-    options,
-    width,
-    height
-  });
+  return /* @__PURE__ */ jsx(HvBaseChart, { options, 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 { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\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\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\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 = ({\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}: HvLineChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","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","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,WACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAuBM,MAAMC,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AACtB,QAAMC,YAAYC,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEW,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQxB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAMyB,aAAaC,SAAS;AAAA,IAAE,GAAGzB;AAAAA,IAAO0B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB5B,+DAAuB6B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAAA,CAAM;AAErC,QAAM+B,cAAcC,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACNhC,MAAMY;AAAAA,IACNX;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA4B,eAAe3B;AAAAA,EAAAA,CAChB;AAED,QAAM4B,cAAcC,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG7B;AAAAA,IACH8B,SAAS;AAAA,IACTnC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAEKgC,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGzB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAL,YACAQ,aACAI,WACAd,cACAgB,aACAI,aACAG,YAAY,CACb;AAED,6BAAQK,aAAW;AAAA,IAACF;AAAAA,IAAkB9B;AAAAA,IAAcC;AAAAA,EAAAA,CAAiB;AACvE;"}
+{"version":3,"file":"LineChart.js","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\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\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\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 = ({\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}: HvLineChartProps) => {\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 options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} width={width} height={height} />;\n};\n"],"names":["echarts","use","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","width","height","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","options","useMemo"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,WACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAuBM,MAAMC,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AACtB,QAAMC,YAAYC,QAAQ;AAAA,IAAEb;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhEW,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BC,MAAMC,MAAMC,QAAQxB,KAAK,KAAKA,SAAS,OAAOA,QAAQ,CAACA,KAAK;AAAA,EAAA,CAC7D;AAED,QAAMyB,aAAaC,SAAS;AAAA,IAAE,GAAGzB;AAAAA,IAAO0B,OAAO;AAAA,EAAA,CAAM;AAErD,QAAMC,cAAcC,YAAY;AAAA,IAC9BC,gBAAgB5B,+DAAuB6B;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAG9B;AAAAA,EAAAA,CAAM;AAErC,QAAM+B,cAAcC,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACNhC,MAAMY;AAAAA,IACNX;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACA4B,eAAe3B;AAAAA,EAAAA,CAChB;AAED,QAAM4B,cAAcC,UAAU;AAAA,IAC5B,GAAG5B;AAAAA,IACH6B,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG7B;AAAAA,IACH8B,SAAS;AAAA,IACTnC;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAEKgC,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGzB;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGd;AAAAA,MACH,GAAGgB;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAL,YACAQ,aACAI,WACAd,cACAgB,aACAI,aACAG,YAAY,CACb;AAED,SAAQ,oBAAA,aAAA,EAAY,SAAkB,OAAc,OAAkB,CAAA;AACxE;"}

package/dist/esm/providers/Provider.js

@@ -1,7 +1,7 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { createContext, useMemo } from "react";
 import { useTheme } from "@hitachivantara/uikit-react-core";
 import { registerTheme } from "../utils/registerTheme.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 const HvVizContext = createContext({
   theme: void 0
 });
@@ -19,10 +19,7 @@ const HvVizProvider = ({
       theme: `${selectedTheme}-${selectedMode}`
     };
   }, [selectedTheme, selectedMode, activeTheme]);
-  return /* @__PURE__ */ jsx(HvVizContext.Provider, {
-    value,
-    children
-  });
+  return /* @__PURE__ */ jsx(HvVizContext.Provider, { value, children });
 };
 export {
   HvVizContext,

package/dist/esm/providers/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n  /**\n   * Current theme\n   */\n  theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n  theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n  /**\n   * Component tree.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n *    <HvVizProvider>\n *        (...)\n *    </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n  const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n  const value = useMemo(() => {\n    registerTheme(selectedTheme, selectedMode, activeTheme);\n\n    return { theme: `${selectedTheme}-${selectedMode}` };\n  }, [selectedTheme, selectedMode, activeTheme]);\n\n  return (\n    <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n  );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","selectedMode","selectedTheme","useTheme","value","useMemo","_jsx","Provider"],"mappings":";;;;AAaO,MAAMA,eAAeC,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAkBC,SAAS;AAExDC,QAAAA,QAAQC,QAAQ,MAAM;AACZH,kBAAAA,eAAeD,cAAcD,WAAW;AAE/C,WAAA;AAAA,MAAEJ,OAAQ,GAAEM,aAAc,IAAGD,YAAa;AAAA,IAAA;AAAA,EAChD,GAAA,CAACC,eAAeD,cAAcD,WAAW,CAAC;AAG3CM,SAAAA,oBAACZ,aAAaa,UAAQ;AAAA,IAACH;AAAAA,IAAaL;AAAAA,EAAAA,CAAkC;AAE1E;"}
+{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n  /**\n   * Current theme\n   */\n  theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n  theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n  /**\n   * Component tree.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n *    <HvVizProvider>\n *        (...)\n *    </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n  const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n  const value = useMemo(() => {\n    registerTheme(selectedTheme, selectedMode, activeTheme);\n\n    return { theme: `${selectedTheme}-${selectedMode}` };\n  }, [selectedTheme, selectedMode, activeTheme]);\n\n  return (\n    <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n  );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","selectedMode","selectedTheme","useTheme","value","useMemo"],"mappings":";;;;AAaO,MAAMA,eAAeC,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAkBC,SAAS;AAExDC,QAAAA,QAAQC,QAAQ,MAAM;AACZH,kBAAAA,eAAeD,cAAcD,WAAW;AAE/C,WAAA;AAAA,MAAEJ,OAAQ,GAAEM,aAAc,IAAGD,YAAa;AAAA,IAAA;AAAA,EAChD,GAAA,CAACC,eAAeD,cAAcD,WAAW,CAAC;AAE7C,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAeD,SAAS,CAAA;AAEnD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.5.6",
+  "version": "5.5.8",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React visualization components for the NEXT UI Kit.",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.27.6"
+    "@hitachivantara/uikit-react-core": "^5.27.8"
   },
   "files": [
     "dist"
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "b090baa5188a74d8d0cddde8b71e606f567c3b5f",
+  "gitHead": "74f3c460e003c0731758dc398627502b5ed8b0db",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {