@hitachivantara/uikit-react-viz 5.12.9 → 5.12.11

package/dist/cjs/BarChart/BarChart.cjs

@@ -69,7 +69,7 @@ const HvBarChart = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({
+    const { data: chartData, mapping: measuresMapping } = useData.useData({
       data,
       groupBy,
       sortBy,
@@ -94,7 +94,7 @@ const HvBarChart = react.forwardRef(
       type: "bar",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       stack,
       nameFormatter: seriesNameFormatter,
       horizontal
@@ -107,7 +107,7 @@ const HvBarChart = react.forwardRef(
     const chartTooltip = useTooltip.useTooltip({
       ...tooltip,
       trigger: "axis",
-      measures,
+      measuresMapping,
       classes,
       horizontal
     });

package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs

@@ -66,7 +66,7 @@ const HvConfusionMatrix = react.forwardRef((props, ref) => {
   } = props;
   const { classes } = ConfusionMatrix_styles.useClasses(classesProp);
   const groupByKey = index.getGroupKey(groupBy);
-  const chartData = useData.useData({
+  const { data: chartData } = useData.useData({
     data: dataProp,
     groupBy,
     measures: [measure],

package/dist/cjs/DonutChart/DonutChart.cjs

@@ -58,13 +58,19 @@ const HvDonutChart = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({ data, groupBy, measures, sortBy, filters });
+    const { data: chartData, mapping: measuresMapping } = useData.useData({
+      data,
+      groupBy,
+      measures,
+      sortBy,
+      filters
+    });
     const chartDataset = useDataset.useDataset(chartData);
     const chartSeries = useSeries.useSeries({
       type: "pie",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
     });
     const chartLegend = useLegend.useLegend({
@@ -76,7 +82,7 @@ const HvDonutChart = react.forwardRef(
     });
     const chartTooltip = useTooltip.useTooltip({
       ...tooltip,
-      measures,
+      measuresMapping,
       classes,
       nameFormatter: slicesNameFormatter
     });

package/dist/cjs/LineChart/LineChart.cjs

@@ -71,7 +71,7 @@ const HvLineChart = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({
+    const { data: chartData, mapping: measuresMapping } = useData.useData({
       data,
       groupBy,
       measures,
@@ -92,7 +92,7 @@ const HvLineChart = react.forwardRef(
       type: "line",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       area,
       areaOpacity,
       emptyCellMode,
@@ -106,7 +106,7 @@ const HvLineChart = react.forwardRef(
     const chartTooltip = useTooltip.useTooltip({
       ...tooltip,
       trigger: "axis",
-      measures,
+      measuresMapping,
       classes
     });
     const option = useOption.useOption({

package/dist/cjs/ScatterPlot/ScatterPlot.cjs

@@ -67,7 +67,7 @@ const HvScatterPlot = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({
+    const { data: chartData, mapping: measuresMapping } = useData.useData({
       data,
       groupBy,
       measures,
@@ -88,7 +88,7 @@ const HvScatterPlot = react.forwardRef(
       type: "scatter",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       nameFormatter: seriesNameFormatter
     });
     const chartLegend = useLegend.useLegend({
@@ -98,7 +98,7 @@ const HvScatterPlot = react.forwardRef(
     const chartTooltip = useTooltip.useTooltip({
       ...tooltip,
       trigger: "axis",
-      measures,
+      measuresMapping,
       classes
     });
     const option = useOption.useOption({

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

@@ -4,7 +4,7 @@ const react = require("react");
 const index = require("../../utils/index.cjs");
 const styles = require("./styles.cjs");
 const useTooltip = ({
-  measures = [],
+  measuresMapping = {},
   classes,
   component,
   show = true,
@@ -23,7 +23,7 @@ const useTooltip = ({
       if (type === "single") {
         const measure = index.getMeasure(
           params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
-          measures
+          measuresMapping
         );
         const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
         const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
@@ -45,10 +45,10 @@ const useTooltip = ({
             ${params.map((s) => {
         const measure = index.getMeasure(
           s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]],
-          measures
+          measuresMapping
         );
         const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
-        const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+        const formattedValue = typeof measure !== "string" && measure?.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
         const name = s.seriesType === "pie" ? s.name : s.seriesName;
         const formattedName = nameFormatter ? nameFormatter(name) : name;
         return `
@@ -69,7 +69,7 @@ const useTooltip = ({
       hvClasses,
       horizontal,
       type,
-      measures,
+      measuresMapping,
       nameFormatter,
       titleFormatter,
       valueFormatter

package/dist/cjs/hooks/useData.cjs

@@ -14,7 +14,7 @@ const useData = ({
   delta
 }) => {
   const groupByKey = index.getGroupKey(groupBy);
-  const chartData = react.useMemo(() => {
+  return react.useMemo(() => {
     const { data: processedData, mapping } = index.processTableData(data);
     let tableData = processedData;
     if (filtersProp) {
@@ -29,35 +29,51 @@ const useData = ({
     }
     const groupByFields = (groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : []).map((value) => index.normalizeColumnName(value));
     const splitByFields = (Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : []).map((value) => index.normalizeColumnName(value));
-    let measuresFields = {};
+    const measuresFields = [];
+    const measuresMapping = {};
+    let measuresColumns = {};
     if (typeof measures === "string") {
+      measuresMapping[measures] = measures;
       const normalizedMeasure = index.normalizeColumnName(measures);
-      measuresFields[normalizedMeasure] = getAgFunc("sum", normalizedMeasure);
+      measuresColumns[normalizedMeasure] = getAgFunc("sum", normalizedMeasure);
+      measuresFields.push(normalizedMeasure);
     } else if (Array.isArray(measures)) {
-      measuresFields = measures.reduce(
+      measuresColumns = measures.reduce(
         (acc, value) => {
           let field;
           let agFunction;
+          let columnName;
           if (typeof value === "string") {
+            measuresMapping[value] = value;
             field = index.normalizeColumnName(value);
             agFunction = "sum";
+            columnName = field;
           } else {
+            const notUnique = measures.filter(
+              (m) => typeof m === "string" ? m === value.field : m.field === value.field
+            ).length > 1;
+            const appendAgg = notUnique && value.agg && value.agg !== "sum";
+            measuresMapping[appendAgg ? `${value.field}_${value.agg}` : value.field] = value;
             field = index.normalizeColumnName(value.field);
             agFunction = value.agg ?? "sum";
+            columnName = appendAgg ? `${field}_${value.agg}` : field;
           }
+          measuresFields.push(field);
           return {
             ...acc,
-            [field]: getAgFunc(agFunction, field)
+            [columnName]: getAgFunc(agFunction, field)
           };
         },
         {}
       );
     } else if (measures != null) {
+      measuresMapping[measures.field] = measures;
       const normalizedMeasure = index.normalizeColumnName(measures.field);
-      measuresFields[normalizedMeasure] = getAgFunc(
+      measuresColumns[normalizedMeasure] = getAgFunc(
         measures.agg ?? "sum",
         normalizedMeasure
       );
+      measuresFields.push(normalizedMeasure);
     }
     let sortByFields = {};
     if (typeof sortBy === "string") {
@@ -86,13 +102,9 @@ const useData = ({
       const normalizedSort = index.normalizeColumnName(sortBy.field);
       sortByFields[normalizedSort] = sortBy.order ?? "asc";
     }
-    const allFields = [
-      ...groupByFields,
-      ...splitByFields,
-      ...Object.keys(measuresFields)
-    ];
+    const allFields = [...groupByFields, ...splitByFields, ...measuresFields];
     if (delta) {
-      const deltaExpression = Object.keys(measuresFields).reduce(
+      const deltaExpression = Object.keys(measuresColumns).reduce(
         (acc, curr) => {
           const normalizedMeasure = index.normalizeColumnName(curr);
           const normalizedDelta = index.normalizeColumnName(delta);
@@ -110,9 +122,9 @@ const useData = ({
       tableData = tableData.groupby(groupByFields);
     }
     if (splitByFields.length > 0) {
-      tableData = tableData.pivot(splitByFields, measuresFields);
+      tableData = tableData.pivot(splitByFields, measuresColumns);
     } else {
-      tableData = tableData.rollup(measuresFields);
+      tableData = tableData.rollup(measuresColumns);
     }
     if (groupByFields.length > 1) {
       const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
@@ -131,14 +143,22 @@ const useData = ({
       if (mapping[column] != null) {
         reversedMapping[column] = mapping[column];
       } else {
-        reversedMapping[column] = column;
+        const found = Object.entries(mapping).find(
+          ([key]) => column.includes(key)
+        );
+        if (found) {
+          const [key, value] = found;
+          reversedMapping[column] = column.replace(key, value);
+        } else {
+          reversedMapping[column] = column;
+        }
       }
     }
     tableData = tableData.select(reversedMapping);
     if (groupByFields.length > 1) {
       tableData = tableData.select(arquero.not(...groupByFields));
     }
-    return tableData;
+    return { data: tableData, mapping: measuresMapping };
   }, [
     data,
     filtersProp,
@@ -149,6 +169,5 @@ const useData = ({
     delta,
     groupByKey
   ]);
-  return chartData;
 };
 exports.useData = useData;

package/dist/cjs/hooks/useSeries.cjs

@@ -6,20 +6,20 @@ const useSeries = ({
   groupBy,
   type,
   data,
-  measures,
+  measuresMapping,
   nameFormatter,
   stack,
+  emptyCellMode,
+  radius,
   horizontal = false,
   area = false,
-  areaOpacity = 0.5,
-  emptyCellMode,
-  radius
+  areaOpacity = 0.5
 }) => {
   const groupByKey = index.getGroupKey(groupBy);
   const option = react.useMemo(() => {
     return {
       series: data.columnNames().filter((c) => c !== groupByKey).map((c) => {
-        const measure = index.getMeasure(c, measures);
+        const measure = index.getMeasure(c, measuresMapping);
         let pieOps = {};
         let lineOps = {};
         let barOps = {};
@@ -104,7 +104,7 @@ const useSeries = ({
   }, [
     data,
     groupByKey,
-    measures,
+    measuresMapping,
     type,
     nameFormatter,
     radius,

package/dist/cjs/utils/index.cjs

@@ -25,15 +25,16 @@ const getLegendIcon = (icon) => {
       return "path://M0,0L16,0L16,2L0,2Z";
   }
 };
-const getMeasure = (name, msr) => {
-  const measureName = name.split("_")[0];
-  const measuresArray = Array.isArray(msr) ? msr : [msr];
-  return measuresArray.find((m) => {
-    if (typeof m === "string") {
-      return m === measureName;
+const getMeasure = (name, mapping) => {
+  let measure;
+  let count = 0;
+  for (const key of Object.keys(mapping)) {
+    if (name.includes(key) && key.length >= count) {
+      count = key.length;
+      measure = mapping[key];
     }
-    return m.field === measureName;
-  }) ?? measuresArray[0];
+  }
+  return measure ?? Object.values(mapping)[0];
 };
 const getFilterFunction = (operation, field, value) => {
   const valueArray = Array.isArray(value) ? value : [value];

package/dist/esm/BarChart/BarChart.js

@@ -48,7 +48,7 @@ const HvBarChart = forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData({
+    const { data: chartData, mapping: measuresMapping } = useData({
       data,
       groupBy,
       sortBy,
@@ -73,7 +73,7 @@ const HvBarChart = forwardRef(
       type: "bar",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       stack,
       nameFormatter: seriesNameFormatter,
       horizontal
@@ -86,7 +86,7 @@ const HvBarChart = forwardRef(
     const chartTooltip = useTooltip({
       ...tooltip,
       trigger: "axis",
-      measures,
+      measuresMapping,
       classes,
       horizontal
     });

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

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

package/dist/esm/ConfusionMatrix/ConfusionMatrix.js

@@ -45,7 +45,7 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
   } = props;
   const { classes } = useClasses(classesProp);
   const groupByKey = getGroupKey(groupBy);
-  const chartData = useData({
+  const { data: chartData } = useData({
     data: dataProp,
     groupBy,
     measures: [measure],

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

@@ -1 +1 @@
-{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n  GridComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvVisualMapHookProps,\n  useData,\n  useGrid,\n  useOption,\n  useTooltip,\n  useVisualMap,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport {\n  HvChartCommonProps,\n  HvChartXAxis,\n  HvChartYAxis,\n} from \"../types/common\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { getGroupKey } from \"../utils\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\n\n// Register chart components\necharts.use([\n  HeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n]);\n\nexport type HvConfusionMatrixClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvConfusionMatrixProps\n  extends Omit<HvChartCommonProps, \"tooltip\"> {\n  /** Column to measure. */\n  measure: HvConfusionMatrixMeasure;\n  /** Columns to use to split the measure. */\n  splitBy?: Arrayable<string>;\n  /**\n   * Column to use for the delta confusion matrix.\n   *\n   * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.\n   */\n  delta?: boolean | string;\n  /** Options for the xAxis, i.e. the horizontal axis. */\n  xAxis?: HvChartXAxis;\n  /** Options for the yAxis, i.e. the vertical axis. */\n  yAxis?: HvChartYAxis;\n  /** Tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** Format of the confusion matrix. Defaults to `square`. */\n  format?: HvConfusionMatrixFormat;\n  /** Properties to customize the prediction values. */\n  valuesProps?: HvConfusionMatrixValuesProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvConfusionMatrixClasses;\n  /**\n   * Color scale of the confusion matrix.\n   *\n   * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.\n   * An array of objects can also be used to create a custom scale.\n   * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.\n   */\n  colorScale?: [string, string] | HvConfusionMatrixColorScale[];\n}\n\n/**\n * Confusion Matrix is a table displaying the performance of a predictive model.\n * Typically the columns show the predicted class and the rows the expected class.\n * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.\n */\nexport const HvConfusionMatrix = forwardRef<\n  ReactECharts,\n  HvConfusionMatrixProps\n>((props, ref) => {\n  const {\n    legend,\n    groupBy,\n    measure,\n    sortBy,\n    splitBy,\n    filters,\n    grid,\n    data: dataProp,\n    tooltip,\n    xAxis,\n    yAxis,\n    colorScale: colorScaleProp,\n    delta,\n    valuesProps,\n    width,\n    height,\n    format = \"square\",\n    classes: classesProp,\n    onOptionChange,\n    ...others\n  } = props;\n\n  const { classes } = useClasses(classesProp);\n\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useData({\n    data: dataProp,\n    groupBy,\n    measures: [measure],\n    sortBy: sortBy ?? groupBy, // automatically orders x axis to create the confusion matrix\n    splitBy,\n    filters,\n    delta: typeof delta === \"string\" ? delta : undefined,\n  });\n\n  const colorScale = useColorScale({\n    delta: !!delta,\n    data: chartData,\n    custom: colorScaleProp,\n    filterKey: groupByKey,\n  });\n\n  const chartVisualMap = useVisualMap({\n    show: colorScale?.pieces != null,\n    type: colorScale?.pieces != null ? \"piecewise\" : \"continuous\",\n    ...(colorScale as Pick<\n      HvVisualMapHookProps,\n      \"max\" | \"min\" | \"colorScale\" | \"pieces\"\n    >),\n    ...legend,\n  });\n\n  const chartTooltip = useTooltip({\n    component: (params) => {\n      const value = params?.series?.[0].value;\n      const fmtValue =\n        typeof measure !== \"string\" && measure.valueFormatter\n          ? measure.valueFormatter(value)\n          : tooltip?.valueFormatter\n            ? tooltip?.valueFormatter(value)\n            : value;\n      const ftmTitle = tooltip?.titleFormatter\n        ? tooltip.titleFormatter(params?.title)\n        : params?.title;\n\n      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;\n\n      return `\n        <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n                <div>\n                    <p class=\"${classes.tooltipText}\">${content}</p>\n                </div>\n            </div>\n        </div>`;\n    },\n    ...tooltip,\n  });\n\n  const chartYAxis = useYAxis({\n    axes: [\n      {\n        type: \"categorical\",\n        name: \"True Label\",\n        position: \"left\",\n        ...yAxis,\n        nameProps: {\n          location: \"center\",\n          padding:\n            yAxis?.nameProps?.location == null ||\n            yAxis?.nameProps?.location === \"center\"\n              ? yAxis?.position === \"right\"\n                ? [50, 0, 0, 0]\n                : [0, 0, 50, 0]\n              : undefined,\n          ...yAxis?.nameProps,\n        },\n        data: chartData\n          .columnNames()\n          .filter((p) => p !== groupByKey)\n          .reverse(),\n      },\n    ],\n  });\n\n  const chartXAxis = useXAxis({\n    name: \"Predicted Value\",\n    position: \"top\",\n    ...xAxis,\n    nameProps: {\n      location: \"center\",\n      padding:\n        xAxis?.nameProps?.location == null ||\n        xAxis?.nameProps?.location === \"center\"\n          ? xAxis?.position === \"bottom\"\n            ? [30, 0, 0, 0]\n            : [0, 0, 30, 0]\n          : undefined,\n      ...xAxis?.nameProps,\n    },\n    data: chartData.array(groupByKey),\n  });\n\n  const chartSeries = useSeries({\n    data: chartData,\n    filterKey: groupByKey,\n    valuesProps,\n    delta: !!(delta && colorScale == null),\n  });\n\n  const chartGridLayout = useGridLayout({\n    data: chartData,\n    format,\n    filterKey: groupByKey,\n    visualMapVisible: chartVisualMap.visualMap.show,\n    visualMapYPosition: chartVisualMap.visualMap.top,\n    xAxisPosition: chartXAxis.xAxis.position,\n  });\n\n  const chartGrid = useGrid({\n    // If sizes are provided, the grid size should automatically adapt to the values provided\n    width: width != null ? undefined : chartGridLayout.size.width,\n    height: height != null ? undefined : chartGridLayout.size.height,\n    ...chartGridLayout.padding,\n    ...grid,\n  });\n\n  const size = useMemo(() => {\n    return {\n      width,\n      // Echarts has a problem were the height is always set to 300px\n      // Thus, we need to update the height to make sure the chart is not cut out\n      height:\n        height ??\n        chartGridLayout.size.height +\n          chartGridLayout.padding.bottom +\n          chartGridLayout.padding.top,\n    };\n  }, [\n    chartGridLayout.padding.bottom,\n    chartGridLayout.padding.top,\n    chartGridLayout.size.height,\n    height,\n    width,\n  ]);\n\n  const option = useOption({\n    option: {\n      ...chartVisualMap,\n      ...chartTooltip,\n      ...chartGrid,\n      ...chartXAxis,\n      ...chartYAxis,\n      ...chartSeries,\n    },\n    onOptionChange,\n  });\n\n  return <HvBaseChart ref={ref} option={option} {...size} {...others} />;\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ConfusionMatrix.js","sources":["../../../src/ConfusionMatrix/ConfusionMatrix.tsx"],"sourcesContent":["import { forwardRef, useMemo } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport {\n  GridComponent,\n  TooltipComponent,\n  VisualMapComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvVisualMapHookProps,\n  useData,\n  useGrid,\n  useOption,\n  useTooltip,\n  useVisualMap,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport {\n  HvChartCommonProps,\n  HvChartXAxis,\n  HvChartYAxis,\n} from \"../types/common\";\nimport { HvConfusionMatrixMeasure } from \"../types/measures\";\nimport { HvChartTooltip } from \"../types/tooltip\";\nimport { getGroupKey } from \"../utils\";\nimport { useClasses } from \"./ConfusionMatrix.styles\";\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\nimport { useColorScale, useGridLayout, useSeries } from \"./utils\";\n\n// Register chart components\necharts.use([\n  HeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  TooltipComponent,\n]);\n\nexport type HvConfusionMatrixClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvConfusionMatrixProps\n  extends Omit<HvChartCommonProps, \"tooltip\"> {\n  /** Column to measure. */\n  measure: HvConfusionMatrixMeasure;\n  /** Columns to use to split the measure. */\n  splitBy?: Arrayable<string>;\n  /**\n   * Column to use for the delta confusion matrix.\n   *\n   * It can be set to `true` in case the `measure` already has the calculations for the delta confusion matrix.\n   */\n  delta?: boolean | string;\n  /** Options for the xAxis, i.e. the horizontal axis. */\n  xAxis?: HvChartXAxis;\n  /** Options for the yAxis, i.e. the vertical axis. */\n  yAxis?: HvChartYAxis;\n  /** Tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** Format of the confusion matrix. Defaults to `square`. */\n  format?: HvConfusionMatrixFormat;\n  /** Properties to customize the prediction values. */\n  valuesProps?: HvConfusionMatrixValuesProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvConfusionMatrixClasses;\n  /**\n   * Color scale of the confusion matrix.\n   *\n   * If an array of two strings is provided, the first and second values are the lower and upper ends of the scale, respectively.\n   * An array of objects can also be used to create a custom scale.\n   * If `delta` is not provided, a default color scale is used when `colorScale` is not defined: `[base-light, cat3]`.\n   */\n  colorScale?: [string, string] | HvConfusionMatrixColorScale[];\n}\n\n/**\n * Confusion Matrix is a table displaying the performance of a predictive model.\n * Typically the columns show the predicted class and the rows the expected class.\n * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.\n */\nexport const HvConfusionMatrix = forwardRef<\n  ReactECharts,\n  HvConfusionMatrixProps\n>((props, ref) => {\n  const {\n    legend,\n    groupBy,\n    measure,\n    sortBy,\n    splitBy,\n    filters,\n    grid,\n    data: dataProp,\n    tooltip,\n    xAxis,\n    yAxis,\n    colorScale: colorScaleProp,\n    delta,\n    valuesProps,\n    width,\n    height,\n    format = \"square\",\n    classes: classesProp,\n    onOptionChange,\n    ...others\n  } = props;\n\n  const { classes } = useClasses(classesProp);\n\n  const groupByKey = getGroupKey(groupBy);\n\n  const { data: 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    filters,\n    delta: typeof delta === \"string\" ? delta : undefined,\n  });\n\n  const colorScale = useColorScale({\n    delta: !!delta,\n    data: chartData,\n    custom: colorScaleProp,\n    filterKey: groupByKey,\n  });\n\n  const chartVisualMap = useVisualMap({\n    show: colorScale?.pieces != null,\n    type: colorScale?.pieces != null ? \"piecewise\" : \"continuous\",\n    ...(colorScale as Pick<\n      HvVisualMapHookProps,\n      \"max\" | \"min\" | \"colorScale\" | \"pieces\"\n    >),\n    ...legend,\n  });\n\n  const chartTooltip = useTooltip({\n    component: (params) => {\n      const value = params?.series?.[0].value;\n      const fmtValue =\n        typeof measure !== \"string\" && measure.valueFormatter\n          ? measure.valueFormatter(value)\n          : tooltip?.valueFormatter\n            ? tooltip?.valueFormatter(value)\n            : value;\n      const ftmTitle = tooltip?.titleFormatter\n        ? tooltip.titleFormatter(params?.title)\n        : params?.title;\n\n      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;\n\n      return `\n        <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n                <div>\n                    <p class=\"${classes.tooltipText}\">${content}</p>\n                </div>\n            </div>\n        </div>`;\n    },\n    ...tooltip,\n  });\n\n  const chartYAxis = useYAxis({\n    axes: [\n      {\n        type: \"categorical\",\n        name: \"True Label\",\n        position: \"left\",\n        ...yAxis,\n        nameProps: {\n          location: \"center\",\n          padding:\n            yAxis?.nameProps?.location == null ||\n            yAxis?.nameProps?.location === \"center\"\n              ? yAxis?.position === \"right\"\n                ? [50, 0, 0, 0]\n                : [0, 0, 50, 0]\n              : undefined,\n          ...yAxis?.nameProps,\n        },\n        data: chartData\n          .columnNames()\n          .filter((p) => p !== groupByKey)\n          .reverse(),\n      },\n    ],\n  });\n\n  const chartXAxis = useXAxis({\n    name: \"Predicted Value\",\n    position: \"top\",\n    ...xAxis,\n    nameProps: {\n      location: \"center\",\n      padding:\n        xAxis?.nameProps?.location == null ||\n        xAxis?.nameProps?.location === \"center\"\n          ? xAxis?.position === \"bottom\"\n            ? [30, 0, 0, 0]\n            : [0, 0, 30, 0]\n          : undefined,\n      ...xAxis?.nameProps,\n    },\n    data: chartData.array(groupByKey),\n  });\n\n  const chartSeries = useSeries({\n    data: chartData,\n    filterKey: groupByKey,\n    valuesProps,\n    delta: !!(delta && colorScale == null),\n  });\n\n  const chartGridLayout = useGridLayout({\n    data: chartData,\n    format,\n    filterKey: groupByKey,\n    visualMapVisible: chartVisualMap.visualMap.show,\n    visualMapYPosition: chartVisualMap.visualMap.top,\n    xAxisPosition: chartXAxis.xAxis.position,\n  });\n\n  const chartGrid = useGrid({\n    // If sizes are provided, the grid size should automatically adapt to the values provided\n    width: width != null ? undefined : chartGridLayout.size.width,\n    height: height != null ? undefined : chartGridLayout.size.height,\n    ...chartGridLayout.padding,\n    ...grid,\n  });\n\n  const size = useMemo(() => {\n    return {\n      width,\n      // Echarts has a problem were the height is always set to 300px\n      // Thus, we need to update the height to make sure the chart is not cut out\n      height:\n        height ??\n        chartGridLayout.size.height +\n          chartGridLayout.padding.bottom +\n          chartGridLayout.padding.top,\n    };\n  }, [\n    chartGridLayout.padding.bottom,\n    chartGridLayout.padding.top,\n    chartGridLayout.size.height,\n    height,\n    width,\n  ]);\n\n  const option = useOption({\n    option: {\n      ...chartVisualMap,\n      ...chartTooltip,\n      ...chartGrid,\n      ...chartXAxis,\n      ...chartYAxis,\n      ...chartSeries,\n    },\n    onOptionChange,\n  });\n\n  return <HvBaseChart ref={ref} option={option} {...size} {...others} />;\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AA2CM,MAAM,oBAAoB,WAG/B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AAEJ,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,aAAa,YAAY,OAAO;AAEtC,QAAM,EAAE,MAAM,UAAU,IAAI,QAAQ;AAAA,IAClC,MAAM;AAAA,IACN;AAAA,IACA,UAAU,CAAC,OAAO;AAAA,IAClB,QAAQ,UAAU;AAAA;AAAA,IAClB;AAAA,IACA;AAAA,IACA,OAAO,OAAO,UAAU,WAAW,QAAQ;AAAA,EAAA,CAC5C;AAED,QAAM,aAAa,cAAc;AAAA,IAC/B,OAAO,CAAC,CAAC;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,EAAA,CACZ;AAED,QAAM,iBAAiB,aAAa;AAAA,IAClC,MAAM,YAAY,UAAU;AAAA,IAC5B,MAAM,YAAY,UAAU,OAAO,cAAc;AAAA,IACjD,GAAI;AAAA,IAIJ,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,eAAe,WAAW;AAAA,IAC9B,WAAW,CAAC,WAAW;AACrB,YAAM,QAAQ,QAAQ,SAAS,CAAC,EAAE;AAClC,YAAM,WACJ,OAAO,YAAY,YAAY,QAAQ,iBACnC,QAAQ,eAAe,KAAK,IAC5B,SAAS,iBACP,SAAS,eAAe,KAAK,IAC7B;AACF,YAAA,WAAW,SAAS,iBACtB,QAAQ,eAAe,QAAQ,KAAK,IACpC,QAAQ;AAEN,YAAA,UAAU,GAAG,QAAQ,MAAM,QAAQ,SAAS,CAAC,EAAE,IAAI,KAAK,QAAQ;AAE/D,aAAA;AAAA,sBACS,QAAQ,WAAW;AAAA,0BACf,QAAQ,gBAAgB;AAAA;AAAA,gCAElB,QAAQ,WAAW,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,IAI3D;AAAA,IACA,GAAG;AAAA,EAAA,CACJ;AAED,QAAM,aAAa,SAAS;AAAA,IAC1B,MAAM;AAAA,MACJ;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,QACN,UAAU;AAAA,QACV,GAAG;AAAA,QACH,WAAW;AAAA,UACT,UAAU;AAAA,UACV,SACE,OAAO,WAAW,YAAY,QAC9B,OAAO,WAAW,aAAa,WAC3B,OAAO,aAAa,UAClB,CAAC,IAAI,GAAG,GAAG,CAAC,IACZ,CAAC,GAAG,GAAG,IAAI,CAAC,IACd;AAAA,UACN,GAAG,OAAO;AAAA,QACZ;AAAA,QACA,MAAM,UACH,YAAA,EACA,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,QAAQ;AAAA,MACb;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,aAAa,SAAS;AAAA,IAC1B,MAAM;AAAA,IACN,UAAU;AAAA,IACV,GAAG;AAAA,IACH,WAAW;AAAA,MACT,UAAU;AAAA,MACV,SACE,OAAO,WAAW,YAAY,QAC9B,OAAO,WAAW,aAAa,WAC3B,OAAO,aAAa,WAClB,CAAC,IAAI,GAAG,GAAG,CAAC,IACZ,CAAC,GAAG,GAAG,IAAI,CAAC,IACd;AAAA,MACN,GAAG,OAAO;AAAA,IACZ;AAAA,IACA,MAAM,UAAU,MAAM,UAAU;AAAA,EAAA,CACjC;AAED,QAAM,cAAc,UAAU;AAAA,IAC5B,MAAM;AAAA,IACN,WAAW;AAAA,IACX;AAAA,IACA,OAAO,CAAC,EAAE,SAAS,cAAc;AAAA,EAAA,CAClC;AAED,QAAM,kBAAkB,cAAc;AAAA,IACpC,MAAM;AAAA,IACN;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB,eAAe,UAAU;AAAA,IAC3C,oBAAoB,eAAe,UAAU;AAAA,IAC7C,eAAe,WAAW,MAAM;AAAA,EAAA,CACjC;AAED,QAAM,YAAY,QAAQ;AAAA;AAAA,IAExB,OAAO,SAAS,OAAO,SAAY,gBAAgB,KAAK;AAAA,IACxD,QAAQ,UAAU,OAAO,SAAY,gBAAgB,KAAK;AAAA,IAC1D,GAAG,gBAAgB;AAAA,IACnB,GAAG;AAAA,EAAA,CACJ;AAEK,QAAA,OAAO,QAAQ,MAAM;AAClB,WAAA;AAAA,MACL;AAAA;AAAA;AAAA,MAGA,QACE,UACA,gBAAgB,KAAK,SACnB,gBAAgB,QAAQ,SACxB,gBAAgB,QAAQ;AAAA,IAAA;AAAA,EAC9B,GACC;AAAA,IACD,gBAAgB,QAAQ;AAAA,IACxB,gBAAgB,QAAQ;AAAA,IACxB,gBAAgB,KAAK;AAAA,IACrB;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,SAAS,UAAU;AAAA,IACvB,QAAQ;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IACA;AAAA,EAAA,CACD;AAED,6BAAQ,aAAY,EAAA,KAAU,QAAiB,GAAG,MAAO,GAAG,OAAQ,CAAA;AACtE,CAAC;"}

package/dist/esm/DonutChart/DonutChart.js

@@ -37,13 +37,19 @@ const HvDonutChart = forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData({ data, groupBy, measures, sortBy, filters });
+    const { data: chartData, mapping: measuresMapping } = useData({
+      data,
+      groupBy,
+      measures,
+      sortBy,
+      filters
+    });
     const chartDataset = useDataset(chartData);
     const chartSeries = useSeries({
       type: "pie",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
     });
     const chartLegend = useLegend({
@@ -55,7 +61,7 @@ const HvDonutChart = forwardRef(
     });
     const chartTooltip = useTooltip({
       ...tooltip,
-      measures,
+      measuresMapping,
       classes,
       nameFormatter: slicesNameFormatter
     });

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

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

package/dist/esm/LineChart/LineChart.js

@@ -50,7 +50,7 @@ const HvLineChart = forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData({
+    const { data: chartData, mapping: measuresMapping } = useData({
       data,
       groupBy,
       measures,
@@ -71,7 +71,7 @@ const HvLineChart = forwardRef(
       type: "line",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       area,
       areaOpacity,
       emptyCellMode,
@@ -85,7 +85,7 @@ const HvLineChart = forwardRef(
     const chartTooltip = useTooltip({
       ...tooltip,
       trigger: "axis",
-      measures,
+      measuresMapping,
       classes
     });
     const option = useOption({

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

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

package/dist/esm/ScatterPlot/ScatterPlot.js

@@ -46,7 +46,7 @@ const HvScatterPlot = forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData({
+    const { data: chartData, mapping: measuresMapping } = useData({
       data,
       groupBy,
       measures,
@@ -67,7 +67,7 @@ const HvScatterPlot = forwardRef(
       type: "scatter",
       data: chartData,
       groupBy,
-      measures,
+      measuresMapping,
       nameFormatter: seriesNameFormatter
     });
     const chartLegend = useLegend({
@@ -77,7 +77,7 @@ const HvScatterPlot = forwardRef(
     const chartTooltip = useTooltip({
       ...tooltip,
       trigger: "axis",
-      measures,
+      measuresMapping,
       classes
     });
     const option = useOption({

package/dist/esm/ScatterPlot/ScatterPlot.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterPlot.js","sources":["../../../src/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { ScatterChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\n// Register chart components\necharts.use([\n  ScatterChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvScatterPlotClasses extends HvChartTooltipClasses {}\n\nexport interface HvScatterPlotProps\n  extends HvChartCommonProps,\n    Omit<HvAxisChartCommonProps, \"stack\"> {\n  /** Columns to measure on the plot. */\n  measures: Arrayable<HvScatterPlotMeasure>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvScatterPlotClasses;\n}\n\n/**\n * A scatter plot is a type of chart which displays dots to represent two numeric variables.\n * This type of chart is used to determine the relationship between two variables.\n */\nexport const HvScatterPlot = forwardRef<ReactECharts, HvScatterPlotProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      filters,\n      measures,\n      seriesNameFormatter,\n      legend,\n      classes,\n      tooltip,\n      width,\n      height,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartData = useData({\n      data,\n      groupBy,\n      measures,\n      splitBy,\n      sortBy,\n      filters,\n    });\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({ type: \"continuous\", ...xAxis });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"scatter\",\n      data: chartData,\n      groupBy,\n      measures,\n      nameFormatter: seriesNameFormatter,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAiBM,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,YAAY,QAAQ;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,cAAc,GAAG,OAAO;AAE5D,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"ScatterPlot.js","sources":["../../../src/ScatterPlot/ScatterPlot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { ScatterChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\n// Register chart components\necharts.use([\n  ScatterChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvScatterPlotClasses extends HvChartTooltipClasses {}\n\nexport interface HvScatterPlotProps\n  extends HvChartCommonProps,\n    Omit<HvAxisChartCommonProps, \"stack\"> {\n  /** Columns to measure on the plot. */\n  measures: Arrayable<HvScatterPlotMeasure>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvScatterPlotClasses;\n}\n\n/**\n * A scatter plot is a type of chart which displays dots to represent two numeric variables.\n * This type of chart is used to determine the relationship between two variables.\n */\nexport const HvScatterPlot = forwardRef<ReactECharts, HvScatterPlotProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      filters,\n      measures,\n      seriesNameFormatter,\n      legend,\n      classes,\n      tooltip,\n      width,\n      height,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const { data: chartData, mapping: measuresMapping } = useData({\n      data,\n      groupBy,\n      measures,\n      splitBy,\n      sortBy,\n      filters,\n    });\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({ type: \"continuous\", ...xAxis });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"scatter\",\n      data: chartData,\n      groupBy,\n      measuresMapping,\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      measuresMapping,\n      classes,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAiBM,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,MAAM,WAAW,SAAS,gBAAA,IAAoB,QAAQ;AAAA,MAC5D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,IAAA,CAC7D;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,cAAc,GAAG,OAAO;AAE5D,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IAAA,CAChB;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,IAAA,CACrB;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

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

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { getMeasure } from "../../utils/index.js";
 import { useClasses } from "./styles.js";
 const useTooltip = ({
-  measures = [],
+  measuresMapping = {},
   classes,
   component,
   show = true,
@@ -21,7 +21,7 @@ const useTooltip = ({
       if (type === "single") {
         const measure = getMeasure(
           params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
-          measures
+          measuresMapping
         );
         const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
         const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
@@ -43,10 +43,10 @@ const useTooltip = ({
             ${params.map((s) => {
         const measure = getMeasure(
           s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]],
-          measures
+          measuresMapping
         );
         const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
-        const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+        const formattedValue = typeof measure !== "string" && measure?.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
         const name = s.seriesType === "pie" ? s.name : s.seriesName;
         const formattedName = nameFormatter ? nameFormatter(name) : name;
         return `
@@ -67,7 +67,7 @@ const useTooltip = ({
       hvClasses,
       horizontal,
       type,
-      measures,
+      measuresMapping,
       nameFormatter,
       titleFormatter,
       valueFormatter

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

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

package/dist/esm/hooks/useData.js

@@ -12,7 +12,7 @@ const useData = ({
   delta
 }) => {
   const groupByKey = getGroupKey(groupBy);
-  const chartData = useMemo(() => {
+  return useMemo(() => {
     const { data: processedData, mapping } = processTableData(data);
     let tableData = processedData;
     if (filtersProp) {
@@ -27,35 +27,51 @@ const useData = ({
     }
     const groupByFields = (groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : []).map((value) => normalizeColumnName(value));
     const splitByFields = (Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : []).map((value) => normalizeColumnName(value));
-    let measuresFields = {};
+    const measuresFields = [];
+    const measuresMapping = {};
+    let measuresColumns = {};
     if (typeof measures === "string") {
+      measuresMapping[measures] = measures;
       const normalizedMeasure = normalizeColumnName(measures);
-      measuresFields[normalizedMeasure] = getAgFunc("sum", normalizedMeasure);
+      measuresColumns[normalizedMeasure] = getAgFunc("sum", normalizedMeasure);
+      measuresFields.push(normalizedMeasure);
     } else if (Array.isArray(measures)) {
-      measuresFields = measures.reduce(
+      measuresColumns = measures.reduce(
         (acc, value) => {
           let field;
           let agFunction;
+          let columnName;
           if (typeof value === "string") {
+            measuresMapping[value] = value;
             field = normalizeColumnName(value);
             agFunction = "sum";
+            columnName = field;
           } else {
+            const notUnique = measures.filter(
+              (m) => typeof m === "string" ? m === value.field : m.field === value.field
+            ).length > 1;
+            const appendAgg = notUnique && value.agg && value.agg !== "sum";
+            measuresMapping[appendAgg ? `${value.field}_${value.agg}` : value.field] = value;
             field = normalizeColumnName(value.field);
             agFunction = value.agg ?? "sum";
+            columnName = appendAgg ? `${field}_${value.agg}` : field;
           }
+          measuresFields.push(field);
           return {
             ...acc,
-            [field]: getAgFunc(agFunction, field)
+            [columnName]: getAgFunc(agFunction, field)
           };
         },
         {}
       );
     } else if (measures != null) {
+      measuresMapping[measures.field] = measures;
       const normalizedMeasure = normalizeColumnName(measures.field);
-      measuresFields[normalizedMeasure] = getAgFunc(
+      measuresColumns[normalizedMeasure] = getAgFunc(
         measures.agg ?? "sum",
         normalizedMeasure
       );
+      measuresFields.push(normalizedMeasure);
     }
     let sortByFields = {};
     if (typeof sortBy === "string") {
@@ -84,13 +100,9 @@ const useData = ({
       const normalizedSort = normalizeColumnName(sortBy.field);
       sortByFields[normalizedSort] = sortBy.order ?? "asc";
     }
-    const allFields = [
-      ...groupByFields,
-      ...splitByFields,
-      ...Object.keys(measuresFields)
-    ];
+    const allFields = [...groupByFields, ...splitByFields, ...measuresFields];
     if (delta) {
-      const deltaExpression = Object.keys(measuresFields).reduce(
+      const deltaExpression = Object.keys(measuresColumns).reduce(
         (acc, curr) => {
           const normalizedMeasure = normalizeColumnName(curr);
           const normalizedDelta = normalizeColumnName(delta);
@@ -108,9 +120,9 @@ const useData = ({
       tableData = tableData.groupby(groupByFields);
     }
     if (splitByFields.length > 0) {
-      tableData = tableData.pivot(splitByFields, measuresFields);
+      tableData = tableData.pivot(splitByFields, measuresColumns);
     } else {
-      tableData = tableData.rollup(measuresFields);
+      tableData = tableData.rollup(measuresColumns);
     }
     if (groupByFields.length > 1) {
       const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
@@ -129,14 +141,22 @@ const useData = ({
       if (mapping[column] != null) {
         reversedMapping[column] = mapping[column];
       } else {
-        reversedMapping[column] = column;
+        const found = Object.entries(mapping).find(
+          ([key]) => column.includes(key)
+        );
+        if (found) {
+          const [key, value] = found;
+          reversedMapping[column] = column.replace(key, value);
+        } else {
+          reversedMapping[column] = column;
+        }
       }
     }
     tableData = tableData.select(reversedMapping);
     if (groupByFields.length > 1) {
       tableData = tableData.select(not(...groupByFields));
     }
-    return tableData;
+    return { data: tableData, mapping: measuresMapping };
   }, [
     data,
     filtersProp,
@@ -147,7 +167,6 @@ const useData = ({
     delta,
     groupByKey
   ]);
-  return chartData;
 };
 export {
   useData

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

@@ -1 +1 @@
-{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { desc, escape, internal, not } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartData,\n  HvChartOrder,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n  HvScatterPlotMeasure,\n} from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport {\n  getGroupKey,\n  getHvArqueroCombinedFilters,\n  normalizeColumnName,\n  processTableData,\n} from \"../utils\";\n\nconst getAgFunc = (func: HvChartAggregation, field: string) =>\n  func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n  filters?: HvChartCommonProps[\"filters\"];\n  delta?: string;\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n  filters: filtersProp,\n  delta,\n}: HvDataHookProps): internal.ColumnTable => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useMemo<ColumnTable>(() => {\n    // Converting data to arquero table data and normalizing the columns name\n    const { data: processedData, mapping } = processTableData(data);\n    let tableData = processedData;\n\n    // Filter data right away\n    if (filtersProp) {\n      const filters = (\n        Array.isArray(filtersProp) ? filtersProp : [filtersProp]\n      ).map((filter) => ({\n        ...filter,\n        field: normalizeColumnName(filter.field), // normalize\n      }));\n\n      tableData = tableData.filter(\n        escape((row) => getHvArqueroCombinedFilters(row, filters)),\n      );\n    }\n\n    const groupByFields = (\n      groupBy ? (Array.isArray(groupBy) ? groupBy : [groupBy]) : []\n    ).map((value) => normalizeColumnName(value)); // normalize\n\n    const splitByFields = (\n      Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : []\n    ).map((value) => normalizeColumnName(value)); // normalize\n\n    let measuresFields: { [key: string]: string } = {};\n    if (typeof measures === \"string\") {\n      const normalizedMeasure = normalizeColumnName(measures); // normalize\n      measuresFields[normalizedMeasure] = getAgFunc(\"sum\", normalizedMeasure);\n    } else if (Array.isArray(measures)) {\n      measuresFields = measures.reduce<{ [key: string]: string }>(\n        (acc, value) => {\n          let field: string;\n          let agFunction: HvChartAggregation;\n          if (typeof value === \"string\") {\n            field = normalizeColumnName(value); // normalize\n            agFunction = \"sum\";\n          } else {\n            field = normalizeColumnName(value.field); // normalize\n            agFunction = value.agg ?? \"sum\";\n          }\n          return {\n            ...acc,\n            [field]: getAgFunc(agFunction, field),\n          };\n        },\n        {},\n      );\n    } else if (measures != null) {\n      const normalizedMeasure = normalizeColumnName(measures.field); // normalize\n      measuresFields[normalizedMeasure] = getAgFunc(\n        measures.agg ?? \"sum\",\n        normalizedMeasure,\n      );\n    }\n\n    let sortByFields: { [key: string]: HvChartOrder } = {};\n    if (typeof sortBy === \"string\") {\n      const normalizedSort = normalizeColumnName(sortBy); // normalize\n      sortByFields[normalizedSort] = \"asc\";\n    } else if (Array.isArray(sortBy)) {\n      sortByFields = sortBy.reduce<{ [key: string]: HvChartOrder }>(\n        (acc, value) => {\n          let field: string;\n          let orderFunction: HvChartOrder;\n          if (typeof value === \"string\") {\n            field = normalizeColumnName(value); // normalize;\n            orderFunction = \"asc\";\n          } else {\n            field = normalizeColumnName(value.field); // normalize\n            orderFunction = value.order ?? \"asc\";\n          }\n          return {\n            ...acc,\n            [field]: orderFunction,\n          };\n        },\n        {},\n      );\n    } else if (sortBy != null) {\n      const normalizedSort = normalizeColumnName(sortBy.field); // normalize\n      sortByFields[normalizedSort] = sortBy.order ?? \"asc\";\n    }\n\n    const allFields = [\n      ...groupByFields,\n      ...splitByFields,\n      ...Object.keys(measuresFields),\n    ];\n\n    // --- Confusion matrix ---\n    // Recalculate the measures columns according to the delta column\n    if (delta) {\n      const deltaExpression = Object.keys(measuresFields).reduce(\n        (acc, curr) => {\n          const normalizedMeasure = normalizeColumnName(curr); // normalize\n          const normalizedDelta = normalizeColumnName(delta); // normalize\n          return {\n            ...acc,\n            [normalizedMeasure]: `d => d.${normalizedMeasure} - d.${normalizedDelta}`,\n          };\n        },\n        {},\n      );\n      tableData = tableData.derive(deltaExpression);\n    }\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresFields);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresFields);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] },\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key)),\n      );\n    }\n\n    // Revert the normalized names to the ones given by the user\n    const reversedMapping = {};\n    for (const column of tableData.columnNames()) {\n      if (mapping[column] != null) {\n        reversedMapping[column] = mapping[column];\n      } else {\n        reversedMapping[column] = column;\n      }\n    }\n    tableData = tableData.select(reversedMapping);\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return tableData;\n  }, [\n    data,\n    filtersProp,\n    groupBy,\n    splitBy,\n    measures,\n    sortBy,\n    delta,\n    groupByKey,\n  ]);\n\n  return chartData;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useData.js","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { desc, escape, not } from \"arquero\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartData,\n  HvChartOrder,\n  HvConfusionMatrixMeasure,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n  HvScatterPlotMeasure,\n} from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport {\n  getGroupKey,\n  getHvArqueroCombinedFilters,\n  normalizeColumnName,\n  processTableData,\n  SingleMeasure,\n} from \"../utils\";\n\nconst getAgFunc = (func: HvChartAggregation, field: string) =>\n  func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure\n    | HvConfusionMatrixMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n  filters?: HvChartCommonProps[\"filters\"];\n  delta?: string;\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n  filters: filtersProp,\n  delta,\n}: HvDataHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  return useMemo(() => {\n    // Converting data to Arquero table data and normalizing the columns name\n    const { data: processedData, mapping } = processTableData(data);\n    let tableData = processedData;\n\n    // Filter data right away\n    if (filtersProp) {\n      const filters = (\n        Array.isArray(filtersProp) ? filtersProp : [filtersProp]\n      ).map((filter) => ({\n        ...filter,\n        field: normalizeColumnName(filter.field), // normalize\n      }));\n\n      tableData = tableData.filter(\n        escape((row) => getHvArqueroCombinedFilters(row, filters)),\n      );\n    }\n\n    const groupByFields = (\n      groupBy ? (Array.isArray(groupBy) ? groupBy : [groupBy]) : []\n    ).map((value) => normalizeColumnName(value)); // normalize\n\n    const splitByFields = (\n      Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : []\n    ).map((value) => normalizeColumnName(value)); // normalize\n\n    // keeps track of fields (table columns) used as measures\n    const measuresFields: string[] = [];\n    // keeps track of the measures specs provided by the user for each derived column; non-normalized names are used as this will be exported;\n    const measuresMapping: Record<string, SingleMeasure> = {};\n    // defines the new columns to be derived and their agg function\n    let measuresColumns: Record<string, string> = {};\n    if (typeof measures === \"string\") {\n      measuresMapping[measures] = measures;\n      const normalizedMeasure = normalizeColumnName(measures); // normalize\n      measuresColumns[normalizedMeasure] = getAgFunc(\"sum\", normalizedMeasure);\n      measuresFields.push(normalizedMeasure);\n    } else if (Array.isArray(measures)) {\n      measuresColumns = measures.reduce<Record<string, string>>(\n        (acc, value) => {\n          let field: string;\n          let agFunction: HvChartAggregation;\n          let columnName: string;\n          if (typeof value === \"string\") {\n            measuresMapping[value] = value;\n            field = normalizeColumnName(value); // normalize\n            agFunction = \"sum\";\n            columnName = field;\n          } else {\n            // finds out if there are more measures for the same field\n            const notUnique =\n              measures.filter((m) =>\n                typeof m === \"string\"\n                  ? m === value.field\n                  : m.field === value.field,\n              ).length > 1;\n            const appendAgg = notUnique && value.agg && value.agg !== \"sum\";\n            measuresMapping[\n              appendAgg ? `${value.field}_${value.agg}` : value.field\n            ] = value;\n            field = normalizeColumnName(value.field); // normalize\n            agFunction = value.agg ?? \"sum\";\n            columnName = appendAgg ? `${field}_${value.agg}` : field;\n          }\n\n          measuresFields.push(field);\n          return {\n            ...acc,\n            [columnName]: getAgFunc(agFunction, field),\n          };\n        },\n        {},\n      );\n    } else if (measures != null) {\n      measuresMapping[measures.field] = measures;\n      const normalizedMeasure = normalizeColumnName(measures.field); // normalize\n      measuresColumns[normalizedMeasure] = getAgFunc(\n        measures.agg ?? \"sum\",\n        normalizedMeasure,\n      );\n      measuresFields.push(normalizedMeasure);\n    }\n\n    let sortByFields: Record<string, HvChartOrder> = {};\n    if (typeof sortBy === \"string\") {\n      const normalizedSort = normalizeColumnName(sortBy); // normalize\n      sortByFields[normalizedSort] = \"asc\";\n    } else if (Array.isArray(sortBy)) {\n      sortByFields = sortBy.reduce<Record<string, HvChartOrder>>(\n        (acc, value) => {\n          let field: string;\n          let orderFunction: HvChartOrder;\n          if (typeof value === \"string\") {\n            field = normalizeColumnName(value); // normalize;\n            orderFunction = \"asc\";\n          } else {\n            field = normalizeColumnName(value.field); // normalize\n            orderFunction = value.order ?? \"asc\";\n          }\n          return {\n            ...acc,\n            [field]: orderFunction,\n          };\n        },\n        {},\n      );\n    } else if (sortBy != null) {\n      const normalizedSort = normalizeColumnName(sortBy.field); // normalize\n      sortByFields[normalizedSort] = sortBy.order ?? \"asc\";\n    }\n\n    const allFields = [...groupByFields, ...splitByFields, ...measuresFields];\n\n    // --- Confusion matrix ---\n    // Recalculate the measures columns according to the delta column\n    if (delta) {\n      const deltaExpression = Object.keys(measuresColumns).reduce(\n        (acc, curr) => {\n          const normalizedMeasure = normalizeColumnName(curr); // normalize\n          const normalizedDelta = normalizeColumnName(delta); // normalize\n          return {\n            ...acc,\n            [normalizedMeasure]: `d => d.${normalizedMeasure} - d.${normalizedDelta}`,\n          };\n        },\n        {},\n      );\n\n      tableData = tableData.derive(deltaExpression);\n    }\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresColumns);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresColumns);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] },\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key)),\n      );\n    }\n\n    // revert the normalized names to the ones given by the user\n    const reversedMapping = {};\n    for (const column of tableData.columnNames()) {\n      if (mapping[column] != null) {\n        // use the original name (not normalized)\n        reversedMapping[column] = mapping[column];\n      } else {\n        const found = Object.entries(mapping).find(([key]) =>\n          column.includes(key),\n        );\n        if (found) {\n          const [key, value] = found;\n          // replace partially with the original name (not normalized)\n          reversedMapping[column] = column.replace(key, value as string);\n        } else {\n          // keep the current name\n          reversedMapping[column] = column;\n        }\n      }\n    }\n\n    tableData = tableData.select(reversedMapping);\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return { data: tableData, mapping: measuresMapping };\n  }, [\n    data,\n    filtersProp,\n    groupBy,\n    splitBy,\n    measures,\n    sortBy,\n    delta,\n    groupByKey,\n  ]);\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/hooks/useSeries.js

@@ -4,20 +4,20 @@ const useSeries = ({
   groupBy,
   type,
   data,
-  measures,
+  measuresMapping,
   nameFormatter,
   stack,
+  emptyCellMode,
+  radius,
   horizontal = false,
   area = false,
-  areaOpacity = 0.5,
-  emptyCellMode,
-  radius
+  areaOpacity = 0.5
 }) => {
   const groupByKey = getGroupKey(groupBy);
   const option = useMemo(() => {
     return {
       series: data.columnNames().filter((c) => c !== groupByKey).map((c) => {
-        const measure = getMeasure(c, measures);
+        const measure = getMeasure(c, measuresMapping);
         let pieOps = {};
         let lineOps = {};
         let barOps = {};
@@ -102,7 +102,7 @@ const useSeries = ({
   }, [
     data,
     groupByKey,
-    measures,
+    measuresMapping,
     type,
     nameFormatter,
     radius,

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

@@ -1 +1 @@
-{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { internal } from \"arquero\";\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n  ScatterSeriesOption,\n} from \"echarts/charts\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartEmptyCellMode,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"../types\";\nimport {\n  HvAxisChartCommonProps,\n  HvChartCommonProps,\n  HvEChartsOption,\n} from \"../types/common\";\nimport {\n  BarFullMeasure,\n  HvScatterPlotMeasure,\n  LineFullMeasure,\n  ScatterPlotMeasure,\n} from \"../types/measures\";\nimport { getGroupKey, getMeasure } from \"../utils\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\" | \"scatter\" | \"treemap\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure;\n  area?: boolean;\n  areaOpacity?: number;\n  emptyCellMode?: HvChartEmptyCellMode;\n  stack?: HvAxisChartCommonProps[\"stack\"];\n  nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n  horizontal?: boolean;\n  radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n  groupBy,\n  type,\n  data,\n  measures,\n  nameFormatter,\n  stack,\n  horizontal = false,\n  area = false,\n  areaOpacity = 0.5,\n  emptyCellMode,\n  radius,\n}: HvSeriesHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n    Pick<HvEChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map<\n          | LineSeriesOption\n          | BarSeriesOption\n          | PieSeriesOption\n          | ScatterSeriesOption\n        >((c) => {\n          const measure = getMeasure(c, measures);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\n          let scatterOps: ScatterSeriesOption = {};\n\n          // scatter\n          if (type === \"scatter\") {\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as ScatterPlotMeasure).yAxis\n                : undefined;\n            scatterOps = {\n              yAxisId,\n              encode: {\n                x: groupByKey,\n                y: c,\n              },\n            };\n          }\n\n          // pie\n          if (type === \"pie\") {\n            pieOps = {\n              encode: {\n                value: c,\n                itemName: groupByKey,\n              },\n              labelLine: {\n                show: false,\n              },\n              label: {\n                show: false,\n              },\n              emphasis: {\n                label: {\n                  show: false,\n                },\n              },\n              radius,\n            };\n          }\n\n          // line or bar\n          if (type === \"line\" || type === \"bar\") {\n            const sampling =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).stack ??\n                  stack ??\n                  undefined\n                : stack ?? undefined;\n\n            const axisOps = {\n              sampling,\n              yAxisId,\n              stack: stackName,\n              encode: horizontal\n                ? {\n                    x: c,\n                    y: groupByKey,\n                  }\n                : {\n                    x: groupByKey,\n                    y: c,\n                  },\n            };\n\n            // bar\n            if (type === \"bar\") {\n              barOps = {\n                ...axisOps,\n                barMaxWidth: 90,\n                barMinWidth: 3,\n              };\n            }\n\n            // line\n            if (type === \"line\") {\n              const showSymbol =\n                typeof measure !== \"string\"\n                  ? !(measure as LineFullMeasure).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasure).emptyCellMode\n                  ? (measure as LineFullMeasure).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).areaOpacity ?? areaOpacity\n                  : areaOpacity;\n\n              lineOps = {\n                ...axisOps,\n                connectNulls,\n                showSymbol,\n                areaStyle: isArea ? { opacity: aOpacity } : undefined,\n              };\n            }\n          }\n\n          return {\n            id: `series~${groupByKey}~${c}`,\n            type,\n            name: nameFormatter ? nameFormatter(c) : c,\n            ...pieOps,\n            ...barOps,\n            ...lineOps,\n            ...scatterOps,\n          } as\n            | LineSeriesOption\n            | BarSeriesOption\n            | PieSeriesOption\n            | ScatterSeriesOption;\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    measures,\n    type,\n    nameFormatter,\n    radius,\n    stack,\n    horizontal,\n    emptyCellMode,\n    area,\n    areaOpacity,\n  ]);\n\n  return option;\n};\n"],"names":[],"mappings":";;AA6CO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAKC,CAAC,MAAM;AACD,cAAA,UAAU,WAAW,GAAG,QAAQ;AAEtC,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAC9B,YAAI,aAAkC,CAAA;AAGtC,YAAI,SAAS,WAAW;AACtB,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+B,QAChC;AACO,uBAAA;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAAA,QAEJ;AAGA,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA6C,WAC9C;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA6C,QAC9C;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA6C,SAC9C,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA4B,aAC9B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA4B,gBACxB,QAA4B,kBAAkB,YAC/C,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA4B,QAAQ,OACrC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA4B,eAAe,cAC5C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CAKD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
+{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { internal } from \"arquero\";\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n  ScatterSeriesOption,\n} from \"echarts/charts\";\n\nimport { HvChartEmptyCellMode } from \"../types\";\nimport {\n  HvAxisChartCommonProps,\n  HvChartCommonProps,\n  HvEChartsOption,\n} from \"../types/common\";\nimport {\n  BarFullMeasure,\n  LineFullMeasure,\n  ScatterPlotMeasure,\n} from \"../types/measures\";\nimport { getGroupKey, getMeasure, SingleMeasure } from \"../utils\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\" | \"scatter\" | \"treemap\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measuresMapping: Record<string, SingleMeasure>;\n  area?: boolean;\n  areaOpacity?: number;\n  emptyCellMode?: HvChartEmptyCellMode;\n  stack?: HvAxisChartCommonProps[\"stack\"];\n  nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n  horizontal?: boolean;\n  radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n  groupBy,\n  type,\n  data,\n  measuresMapping,\n  nameFormatter,\n  stack,\n  emptyCellMode,\n  radius,\n  horizontal = false,\n  area = false,\n  areaOpacity = 0.5,\n}: HvSeriesHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n    Pick<HvEChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map((c) => {\n          const measure = getMeasure(c, measuresMapping);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\n          let scatterOps: ScatterSeriesOption = {};\n\n          // scatter\n          if (type === \"scatter\") {\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as ScatterPlotMeasure).yAxis\n                : undefined;\n            scatterOps = {\n              yAxisId,\n              encode: {\n                x: groupByKey,\n                y: c,\n              },\n            };\n          }\n\n          // pie\n          if (type === \"pie\") {\n            pieOps = {\n              encode: {\n                value: c,\n                itemName: groupByKey,\n              },\n              labelLine: {\n                show: false,\n              },\n              label: {\n                show: false,\n              },\n              emphasis: {\n                label: {\n                  show: false,\n                },\n              },\n              radius,\n            };\n          }\n\n          // line or bar\n          if (type === \"line\" || type === \"bar\") {\n            const sampling =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).stack ??\n                  stack ??\n                  undefined\n                : stack ?? undefined;\n\n            const axisOps = {\n              sampling,\n              yAxisId,\n              stack: stackName,\n              encode: horizontal\n                ? {\n                    x: c,\n                    y: groupByKey,\n                  }\n                : {\n                    x: groupByKey,\n                    y: c,\n                  },\n            };\n\n            // bar\n            if (type === \"bar\") {\n              barOps = {\n                ...axisOps,\n                barMaxWidth: 90,\n                barMinWidth: 3,\n              };\n            }\n\n            // line\n            if (type === \"line\") {\n              const showSymbol =\n                typeof measure !== \"string\"\n                  ? !(measure as LineFullMeasure).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasure).emptyCellMode\n                  ? (measure as LineFullMeasure).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).areaOpacity ?? areaOpacity\n                  : areaOpacity;\n\n              lineOps = {\n                ...axisOps,\n                connectNulls,\n                showSymbol,\n                areaStyle: isArea ? { opacity: aOpacity } : undefined,\n              };\n            }\n          }\n\n          return {\n            id: `series~${groupByKey}~${c}`,\n            type,\n            name: nameFormatter ? nameFormatter(c) : c,\n            ...pieOps,\n            ...barOps,\n            ...lineOps,\n            ...scatterOps,\n          };\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    measuresMapping,\n    type,\n    nameFormatter,\n    radius,\n    stack,\n    horizontal,\n    emptyCellMode,\n    area,\n    areaOpacity,\n  ]);\n\n  return option;\n};\n"],"names":[],"mappings":";;AAoCO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAChB,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAAI,CAAC,MAAM;AACJ,cAAA,UAAU,WAAW,GAAG,eAAe;AAE7C,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAC9B,YAAI,aAAkC,CAAA;AAGtC,YAAI,SAAS,WAAW;AACtB,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+B,QAChC;AACO,uBAAA;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAAA,QAEJ;AAGA,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA6C,WAC9C;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA6C,QAC9C;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA6C,SAC9C,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA4B,aAC9B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA4B,gBACxB,QAA4B,kBAAkB,YAC/C,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA4B,QAAQ,OACrC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA4B,eAAe,cAC5C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CACD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}

package/dist/esm/utils/index.js

@@ -23,15 +23,16 @@ const getLegendIcon = (icon) => {
       return "path://M0,0L16,0L16,2L0,2Z";
   }
 };
-const getMeasure = (name, msr) => {
-  const measureName = name.split("_")[0];
-  const measuresArray = Array.isArray(msr) ? msr : [msr];
-  return measuresArray.find((m) => {
-    if (typeof m === "string") {
-      return m === measureName;
+const getMeasure = (name, mapping) => {
+  let measure;
+  let count = 0;
+  for (const key of Object.keys(mapping)) {
+    if (name.includes(key) && key.length >= count) {
+      count = key.length;
+      measure = mapping[key];
     }
-    return m.field === measureName;
-  }) ?? measuresArray[0];
+  }
+  return measure ?? Object.values(mapping)[0];
 };
 const getFilterFunction = (operation, field, value) => {
   const valueArray = Array.isArray(value) ? value : [value];

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { from, internal, table } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type {\n  HvBarChartMeasures,\n  HvChartAxisType,\n  HvChartData,\n  HvChartFilter,\n  HvChartFilterOperation,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n  switch (type) {\n    case \"categorical\":\n      return \"category\";\n    case \"time\":\n      return \"time\";\n    case \"continuous\":\n      return \"value\";\n    default:\n      return undefined;\n  }\n};\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n  Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n  switch (icon) {\n    case \"circle\":\n      return \"circle\";\n    case \"square\":\n      return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n    case \"line\":\n    default:\n      return \"path://M0,0L16,0L16,2L0,2Z\";\n  }\n};\n\nexport const getMeasure = (\n  name: string,\n  msr:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure,\n):\n  | HvLineChartMeasures\n  | HvBarChartMeasures\n  | HvDonutChartMeasure\n  | HvScatterPlotMeasure => {\n  const measureName = name.split(\"_\")[0];\n  const measuresArray = Array.isArray(msr) ? msr : [msr];\n  // find the measure in measures array or return the first one\n  return (\n    measuresArray.find((m) => {\n      if (typeof m === \"string\") {\n        return m === measureName;\n      }\n      return m.field === measureName;\n    }) ?? measuresArray[0]\n  );\n};\n\nexport const getFilterFunction = (\n  operation: HvChartFilterOperation,\n  field: HvChartFilter[\"field\"],\n  value: HvChartFilter[\"value\"],\n): Function => {\n  const valueArray = Array.isArray(value) ? value : [value];\n  if (valueArray.length === 0) return () => true;\n\n  switch (operation) {\n    case \"is\": {\n      return (row: any) => valueArray.includes(row[field]);\n    }\n    case \"isNot\": {\n      return (row: any) => !valueArray.includes(row[field]);\n    }\n    case \"contains\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (String(row[field]).includes(String(val))) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"notContains\":\n      return (row: any) => {\n        let include = true;\n        for (const val of valueArray) {\n          if (String(row[field]).includes(String(val))) {\n            include = false;\n          }\n        }\n        return include;\n      };\n    case \"greaterThan\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] > val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"greaterThanOrEqual\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] >= val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"lessThan\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] < val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"lessThanOrEqual\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] <= val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"between\":\n      return (row: any) => row[field] >= value[0] && row[field] <= value[1];\n    case \"ends\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (String(row[field]).endsWith(String(val))) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"notEnds\":\n      return (row: any) => {\n        let include = true;\n        for (const val of valueArray) {\n          if (String(row[field]).endsWith(String(val))) {\n            include = false;\n          }\n        }\n        return include;\n      };\n    case \"starts\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (String(row[field]).startsWith(String(val))) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"notStarts\":\n      return (row: any) => {\n        let include = true;\n        for (const val of valueArray) {\n          if (String(row[field]).startsWith(String(val))) {\n            include = false;\n          }\n        }\n        return include;\n      };\n\n    default:\n      throw new Error(\"Unsupported operation\");\n  }\n};\n\n// Note: Exported to the users\n/**\n * Combine filter functions into a single function. Only rows that pass all filters will be included.\n * Should be used inside the `escape` function provided by Arquero.\n * */\nexport const getHvArqueroCombinedFilters = (\n  row: any,\n  filters: HvChartFilter[],\n) => {\n  return filters.every((filter) => {\n    const { field, operation, value } = filter;\n    const filterFunction = Object.hasOwn(row, field)\n      ? getFilterFunction(operation, field, value)\n      : () => true;\n    return filterFunction(row);\n  });\n};\n\n/**\n * Normalizes a column name by replacing all characters that are not letters or numbers by \"___\"\n */\nexport const normalizeColumnName = (string: string) => {\n  return string.replace(/[^a-zA-Z0-9]/g, \"__\");\n};\n\n/**\n * Converts data to a arquero data table and normalizes the column names for data processing.\n * @param data Chart data\n * @returns Processed data and reversed columns mapping to switch the columns to their original name\n */\nexport const processTableData = (data: HvChartData) => {\n  let tableData: ColumnTable;\n  if (data instanceof internal.ColumnTable) {\n    tableData = data;\n  } else if (Array.isArray(data)) {\n    tableData = from(data);\n  } else {\n    tableData = table(data);\n  }\n\n  // Normalize the column names to remove any special character and spaces since it can lead to errors during processing\n  const nameMapping = {};\n  const reversedNameMapping = {};\n  for (const column of tableData.columnNames()) {\n    const normalizedName = normalizeColumnName(column);\n    nameMapping[column] = normalizedName;\n    reversedNameMapping[normalizedName] = column;\n  }\n\n  return {\n    data: tableData.select(nameMapping),\n    mapping: reversedNameMapping,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { from, internal, table } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport type {\n  HvBarChartMeasures,\n  HvChartAxisType,\n  HvChartData,\n  HvChartFilter,\n  HvChartFilterOperation,\n  HvConfusionMatrixMeasure,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"..\";\nimport { HvChartCommonProps } from \"../types/common\";\nimport { HvChartLegendIcon } from \"../types/legend\";\nimport { HvScatterPlotMeasure } from \"../types/measures\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n  switch (type) {\n    case \"categorical\":\n      return \"category\";\n    case \"time\":\n      return \"time\";\n    case \"continuous\":\n      return \"value\";\n    default:\n      return undefined;\n  }\n};\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n  Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n  switch (icon) {\n    case \"circle\":\n      return \"circle\";\n    case \"square\":\n      return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n    case \"line\":\n    default:\n      return \"path://M0,0L16,0L16,2L0,2Z\";\n  }\n};\n\nexport type SingleMeasure =\n  | HvLineChartMeasures\n  | HvBarChartMeasures\n  | HvScatterPlotMeasure\n  | HvDonutChartMeasure\n  | HvConfusionMatrixMeasure;\n\nexport const getMeasure = (\n  name: string,\n  mapping: Record<string, SingleMeasure>,\n) => {\n  // find the key that matches the most number of characters\n  // we are not doing the first match because columns can be repeated if they use different agg functions\n  let measure: SingleMeasure | undefined;\n  let count = 0;\n  for (const key of Object.keys(mapping)) {\n    if (name.includes(key) && key.length >= count) {\n      count = key.length;\n      measure = mapping[key];\n    }\n  }\n  // return the found measure in measures array or return the first one\n  return measure ?? Object.values(mapping)[0];\n};\n\nexport const getFilterFunction = (\n  operation: HvChartFilterOperation,\n  field: HvChartFilter[\"field\"],\n  value: HvChartFilter[\"value\"],\n): Function => {\n  const valueArray = Array.isArray(value) ? value : [value];\n  if (valueArray.length === 0) return () => true;\n\n  switch (operation) {\n    case \"is\": {\n      return (row: any) => valueArray.includes(row[field]);\n    }\n    case \"isNot\": {\n      return (row: any) => !valueArray.includes(row[field]);\n    }\n    case \"contains\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (String(row[field]).includes(String(val))) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"notContains\":\n      return (row: any) => {\n        let include = true;\n        for (const val of valueArray) {\n          if (String(row[field]).includes(String(val))) {\n            include = false;\n          }\n        }\n        return include;\n      };\n    case \"greaterThan\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] > val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"greaterThanOrEqual\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] >= val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"lessThan\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] < val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"lessThanOrEqual\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (row[field] <= val) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"between\":\n      return (row: any) => row[field] >= value[0] && row[field] <= value[1];\n    case \"ends\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (String(row[field]).endsWith(String(val))) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"notEnds\":\n      return (row: any) => {\n        let include = true;\n        for (const val of valueArray) {\n          if (String(row[field]).endsWith(String(val))) {\n            include = false;\n          }\n        }\n        return include;\n      };\n    case \"starts\":\n      return (row: any) => {\n        let include = false;\n        for (const val of valueArray) {\n          if (String(row[field]).startsWith(String(val))) {\n            include = true;\n          }\n        }\n        return include;\n      };\n    case \"notStarts\":\n      return (row: any) => {\n        let include = true;\n        for (const val of valueArray) {\n          if (String(row[field]).startsWith(String(val))) {\n            include = false;\n          }\n        }\n        return include;\n      };\n\n    default:\n      throw new Error(\"Unsupported operation\");\n  }\n};\n\n// Note: Exported to the users\n/**\n * Combine filter functions into a single function. Only rows that pass all filters will be included.\n * Should be used inside the `escape` function provided by Arquero.\n * */\nexport const getHvArqueroCombinedFilters = (\n  row: any,\n  filters: HvChartFilter[],\n) => {\n  return filters.every((filter) => {\n    const { field, operation, value } = filter;\n    const filterFunction = Object.hasOwn(row, field)\n      ? getFilterFunction(operation, field, value)\n      : () => true;\n    return filterFunction(row);\n  });\n};\n\n/**\n * Normalizes a column name by replacing all characters that are not letters or numbers by \"__\"\n */\nexport const normalizeColumnName = (string: string) => {\n  return string.replace(/[^a-zA-Z0-9]/g, \"__\");\n};\n\n/**\n * Converts data to a arquero data table and normalizes the column names for data processing.\n * @param data Chart data\n * @returns Processed data and reversed columns mapping to switch the columns to their original name\n */\nexport const processTableData = (data: HvChartData) => {\n  let tableData: ColumnTable;\n  if (data instanceof internal.ColumnTable) {\n    tableData = data;\n  } else if (Array.isArray(data)) {\n    tableData = from(data);\n  } else {\n    tableData = table(data);\n  }\n\n  // Normalize the column names to remove any special character and spaces since it can lead to errors during processing\n  const nameMapping = {};\n  const reversedNameMapping = {};\n  for (const column of tableData.columnNames()) {\n    const normalizedName = normalizeColumnName(column);\n    nameMapping[column] = normalizedName;\n    reversedNameMapping[normalizedName] = column;\n  }\n\n  return {\n    data: tableData.select(nameMapping),\n    mapping: reversedNameMapping,\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.12.9",
+  "version": "5.12.11",
   "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.66.0"
+    "@hitachivantara/uikit-react-core": "^5.66.2"
   },
   "files": [
     "dist"
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "feb857e5023bcc3749cebe6937504cf35119b5d6",
+  "gitHead": "9415299f768b19fe3c247091ee2cf9afaf8469da",
   "exports": {
     ".": {
       "require": "./dist/cjs/index.cjs",