npm - @hitachivantara/uikit-react-viz - Versions diffs - 5.5.6 → 5.5.7 - Mend

@hitachivantara/uikit-react-viz 5.5.6 → 5.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/cjs/components/BarChart/BarChart.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;"}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;"}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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","jsx","HvBaseChart"],"mappings":"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"}

package/dist/cjs/components/DonutChart/DonutChart.cjs CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;"}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;"}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;;;"}
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"],"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;"}
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"],"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;"}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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"],"mappings":"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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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~~;"}
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"],"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;"}
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"],"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~;"}
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"],"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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.5.6",
+  "version": "5.5.7",
   "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.7"
   },
   "files": [
     "dist"
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "b090baa5188a74d8d0cddde8b71e606f567c3b5f",
+  "gitHead": "460d85c6afa256894fb1ffdf67c901e420d1d077",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {