@hitachivantara/uikit-react-viz 5.6.27 → 5.6.28

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

@@ -14,7 +14,12 @@ import { useClasses } from "./ConfusionMatrix.styles.js";
 import { useColorScale, useSeries, useGridLayout } from "./utils.js";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
-echarts.use([HeatmapChart, VisualMapComponent, GridComponent, TooltipComponent]);
+echarts.use([
+  HeatmapChart,
+  VisualMapComponent,
+  GridComponent,
+  TooltipComponent
+]);
 const HvConfusionMatrix = forwardRef((props, ref) => {
   const {
     legend,
@@ -36,9 +41,7 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
     classes: classesProp,
     onOptionChange
   } = props;
-  const {
-    classes
-  } = useClasses(classesProp);
+  const { classes } = useClasses(classesProp);
   const groupByKey = getGroupKey(groupBy);
   const chartData = useData({
     data: dataProp,
@@ -79,18 +82,20 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
     ...tooltip
   });
   const chartYAxis = useYAxis({
-    axes: [{
-      type: "categorical",
-      name: "True Label",
-      position: "left",
-      ...yAxis,
-      nameProps: {
-        location: "center",
-        padding: yAxis?.nameProps?.location == null || yAxis?.nameProps?.location === "center" ? yAxis?.position === "right" ? [50, 0, 0, 0] : [0, 0, 50, 0] : void 0,
-        ...yAxis?.nameProps
-      },
-      data: chartData.columnNames().filter((p) => p !== groupByKey).reverse()
-    }]
+    axes: [
+      {
+        type: "categorical",
+        name: "True Label",
+        position: "left",
+        ...yAxis,
+        nameProps: {
+          location: "center",
+          padding: yAxis?.nameProps?.location == null || yAxis?.nameProps?.location === "center" ? yAxis?.position === "right" ? [50, 0, 0, 0] : [0, 0, 50, 0] : void 0,
+          ...yAxis?.nameProps
+        },
+        data: chartData.columnNames().filter((p) => p !== groupByKey).reverse()
+      }
+    ]
   });
   const chartXAxis = useXAxis({
     name: "Predicted Value",
@@ -131,7 +136,13 @@ const HvConfusionMatrix = forwardRef((props, ref) => {
       // Thus, we need to update the height to make sure the chart is not cut out
       height: height ?? chartGridLayout.size.height + chartGridLayout.padding.bottom + chartGridLayout.padding.top
     };
-  }, [chartGridLayout.padding.bottom, chartGridLayout.padding.top, chartGridLayout.size.height, height, width]);
+  }, [
+    chartGridLayout.padding.bottom,
+    chartGridLayout.padding.top,
+    chartGridLayout.size.height,
+    height,
+    width
+  ]);
   const option = useOption({
     option: {
       ...chartVisualMap,

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

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

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

@@ -1,27 +1,27 @@
 import { createClasses, theme } from "@hitachivantara/uikit-react-core";
-const {
-  useClasses,
-  staticClasses
-} = createClasses("HvConfusionMatrix", {
-  tooltipRoot: {
-    backgroundColor: theme.colors.atmo1,
-    width: "fit-content",
-    minWidth: 150,
-    boxShadow: theme.colors.shadow,
-    zIndex: theme.zIndices.sticky
-  },
-  tooltipContainer: {
-    padding: theme.spacing("15px", "sm"),
-    display: "flex",
-    flexDirection: "column"
-  },
-  tooltipText: {
-    fontFamily: theme.fontFamily.body,
-    fontWeight: theme.fontWeights.normal,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.secondary
+const { useClasses, staticClasses } = createClasses(
+  "HvConfusionMatrix",
+  {
+    tooltipRoot: {
+      backgroundColor: theme.colors.atmo1,
+      width: "fit-content",
+      minWidth: 150,
+      boxShadow: theme.colors.shadow,
+      zIndex: theme.zIndices.sticky
+    },
+    tooltipContainer: {
+      padding: theme.spacing("15px", "sm"),
+      display: "flex",
+      flexDirection: "column"
+    },
+    tooltipText: {
+      fontFamily: theme.fontFamily.body,
+      fontWeight: theme.fontWeights.normal,
+      fontSize: theme.fontSizes.sm,
+      color: theme.colors.secondary
+    }
   }
-});
+);
 export {
   staticClasses,
   useClasses

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

@@ -1 +1 @@
-{"version":3,"file":"ConfusionMatrix.styles.js","sources":["../../../../src/components/ConfusionMatrix/ConfusionMatrix.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvConfusionMatrix\",\n  {\n    tooltipRoot: {\n      backgroundColor: theme.colors.atmo1,\n      width: \"fit-content\",\n      minWidth: 150,\n      boxShadow: theme.colors.shadow,\n      zIndex: theme.zIndices.sticky,\n    },\n    tooltipContainer: {\n      padding: theme.spacing(\"15px\", \"sm\"),\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    tooltipText: {\n      fontFamily: theme.fontFamily.body,\n      fontWeight: theme.fontWeights.normal,\n      fontSize: theme.fontSizes.sm,\n      color: theme.colors.secondary,\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","tooltipRoot","backgroundColor","theme","colors","atmo1","width","minWidth","boxShadow","shadow","zIndex","zIndices","sticky","tooltipContainer","padding","spacing","display","flexDirection","tooltipText","fontFamily","body","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","color","secondary"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,qBACA;AAAA,EACEC,aAAa;AAAA,IACXC,iBAAiBC,MAAMC,OAAOC;AAAAA,IAC9BC,OAAO;AAAA,IACPC,UAAU;AAAA,IACVC,WAAWL,MAAMC,OAAOK;AAAAA,IACxBC,QAAQP,MAAMQ,SAASC;AAAAA,EACzB;AAAA,EACAC,kBAAkB;AAAA,IAChBC,SAASX,MAAMY,QAAQ,QAAQ,IAAI;AAAA,IACnCC,SAAS;AAAA,IACTC,eAAe;AAAA,EACjB;AAAA,EACAC,aAAa;AAAA,IACXC,YAAYhB,MAAMgB,WAAWC;AAAAA,IAC7BC,YAAYlB,MAAMmB,YAAYC;AAAAA,IAC9BC,UAAUrB,MAAMsB,UAAUC;AAAAA,IAC1BC,OAAOxB,MAAMC,OAAOwB;AAAAA,EACtB;AACF,CACF;"}
+{"version":3,"file":"ConfusionMatrix.styles.js","sources":["../../../../src/components/ConfusionMatrix/ConfusionMatrix.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvConfusionMatrix\",\n  {\n    tooltipRoot: {\n      backgroundColor: theme.colors.atmo1,\n      width: \"fit-content\",\n      minWidth: 150,\n      boxShadow: theme.colors.shadow,\n      zIndex: theme.zIndices.sticky,\n    },\n    tooltipContainer: {\n      padding: theme.spacing(\"15px\", \"sm\"),\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    tooltipText: {\n      fontFamily: theme.fontFamily.body,\n      fontWeight: theme.fontWeights.normal,\n      fontSize: theme.fontSizes.sm,\n      color: theme.colors.secondary,\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,YAAY,cAAA,IAAkB;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,aAAa;AAAA,MACX,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO;AAAA,MACP,UAAU;AAAA,MACV,WAAW,MAAM,OAAO;AAAA,MACxB,QAAQ,MAAM,SAAS;AAAA,IACzB;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,MACnC,SAAS;AAAA,MACT,eAAe;AAAA,IACjB;AAAA,IACA,aAAa;AAAA,MACX,YAAY,MAAM,WAAW;AAAA,MAC7B,YAAY,MAAM,YAAY;AAAA,MAC9B,UAAU,MAAM,UAAU;AAAA,MAC1B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AACF;"}

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

@@ -6,22 +6,23 @@ const useColorScale = ({
   custom,
   filterKey
 }) => {
-  const {
-    colors
-  } = useTheme();
+  const { colors } = useTheme();
   const colorScale = useMemo(() => {
     if (custom == null && delta) {
       return;
     }
     if (custom && typeof custom[0] === "object") {
       return {
-        pieces: custom.reduce((acc, curr) => {
-          acc.push({
-            ...curr,
-            color: colors?.[curr.color] || curr.color
-          });
-          return acc;
-        }, [])
+        pieces: custom.reduce(
+          (acc, curr) => {
+            acc.push({
+              ...curr,
+              color: colors?.[curr.color] || curr.color
+            });
+            return acc;
+          },
+          []
+        )
       };
     }
     const flatData = data.columnNames().filter((p) => p !== filterKey).reduce((acc, c) => {
@@ -44,18 +45,19 @@ const useSeries = ({
   delta,
   valuesProps
 }) => {
-  const {
-    colors
-  } = useTheme();
-  const getDeltaColor = useCallback((value, diagonal) => {
-    if (diagonal && value > 0 || !diagonal && value < 0) {
-      return colors?.positive;
-    }
-    if (diagonal && value < 0 || !diagonal && value > 0) {
-      return colors?.negative;
-    }
-    return colors?.base_light;
-  }, [colors]);
+  const { colors } = useTheme();
+  const getDeltaColor = useCallback(
+    (value, diagonal) => {
+      if (diagonal && value > 0 || !diagonal && value < 0) {
+        return colors?.positive;
+      }
+      if (diagonal && value < 0 || !diagonal && value > 0) {
+        return colors?.negative;
+      }
+      return colors?.base_light;
+    },
+    [colors]
+  );
   const chartSeries = useMemo(() => {
     return {
       series: {
@@ -123,7 +125,14 @@ const useGridLayout = ({
         width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8)
       }
     };
-  }, [data, filterKey, format, visualMapVisible, visualMapYPosition, xAxisPosition]);
+  }, [
+    data,
+    filterKey,
+    format,
+    visualMapVisible,
+    visualMapYPosition,
+    xAxisPosition
+  ]);
   return size;
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n  data,\n  delta,\n  custom,\n  filterKey,\n}: {\n  data: ColumnTable;\n  delta: boolean;\n  filterKey: string;\n  custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n  const { colors } = useTheme();\n\n  const colorScale = useMemo(() => {\n    if (custom == null && delta) {\n      return;\n    }\n\n    if (custom && typeof custom[0] === \"object\") {\n      return {\n        pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n          (acc: HvConfusionMatrixColorScale[], curr) => {\n            acc.push({\n              ...curr,\n              color: colors?.[curr.color] || curr.color,\n            });\n            return acc;\n          },\n          []\n        ),\n      };\n    }\n\n    const flatData = data\n      .columnNames()\n      .filter((p) => p !== filterKey)\n      .reduce((acc: number[], c: string) => {\n        acc.push(...data.array(c));\n        return acc;\n      }, []);\n    const max = Math.max(...flatData);\n    const min = Math.min(...flatData);\n\n    return {\n      colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n      max,\n      min,\n    };\n  }, [colors, custom, data, filterKey, delta]);\n\n  return colorScale;\n};\n\nexport const useSeries = ({\n  data,\n  filterKey,\n  delta,\n  valuesProps,\n}: {\n  data: ColumnTable;\n  filterKey: string;\n  delta: boolean;\n  valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n  const { colors } = useTheme();\n\n  const getDeltaColor = useCallback(\n    (value: number, diagonal: boolean) => {\n      if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n        return colors?.positive;\n      }\n      if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n        return colors?.negative;\n      }\n\n      return colors?.base_light;\n    },\n    [colors]\n  );\n\n  const chartSeries = useMemo(() => {\n    return {\n      series: {\n        id: `series~${filterKey}`,\n        type: \"heatmap\",\n        label: {\n          show: true,\n          ...valuesProps,\n          ...(valuesProps?.color && {\n            color: colors?.[valuesProps.color] || valuesProps.color,\n          }),\n        },\n        emphasis: {\n          disabled: true,\n        },\n        data: data\n          .columnNames()\n          .filter((p) => p !== filterKey)\n          .reduce((acc: (string | number)[][], c: string, j) => {\n            const row: (string | number)[][] = data\n              .array(c)\n              .reduce((racc, rv, i) => {\n                racc.push({\n                  value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n                  ...(delta && {\n                    visualMap: false,\n                    itemStyle: {\n                      color: getDeltaColor(rv, i === j),\n                    },\n                  }),\n                });\n                return racc;\n              }, []);\n\n            acc.push(...row);\n            return acc;\n          }, []),\n      },\n    };\n  }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n  return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n  data,\n  filterKey,\n  format,\n  xAxisPosition,\n  visualMapVisible,\n  visualMapYPosition,\n}: {\n  xAxisPosition: HvChartXAxis[\"position\"];\n  data: ColumnTable;\n  filterKey: string;\n  format: HvConfusionMatrixFormat;\n  visualMapVisible: boolean;\n  visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n  const size = useMemo(() => {\n    const nCols = data.array(filterKey).length;\n    const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n    const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n    return {\n      padding: {\n        bottom:\n          xAxisPosition === \"bottom\" ||\n          (visualMapVisible && visualMapYPosition === \"bottom\")\n            ? 60\n            : 20,\n        top:\n          xAxisPosition === \"top\" ||\n          (visualMapVisible && visualMapYPosition === \"top\")\n            ? 60\n            : 20,\n        ...(visualMapVisible &&\n          visualMapYPosition === \"bottom\" &&\n          xAxisPosition === \"bottom\" && {\n            bottom: 100,\n          }),\n        ...(visualMapVisible &&\n          visualMapYPosition === \"top\" &&\n          xAxisPosition === \"top\" && {\n            top: 100,\n          }),\n        left: 80,\n        right: 80,\n      },\n      size: {\n        height: Math.max(itemHeight * nRows, itemHeight * 8),\n        width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n      },\n    };\n  }, [\n    data,\n    filterKey,\n    format,\n    visualMapVisible,\n    visualMapYPosition,\n    xAxisPosition,\n  ]);\n\n  return size;\n};\n"],"names":["useColorScale","data","delta","custom","filterKey","colors","useTheme","colorScale","useMemo","pieces","reduce","acc","curr","push","color","flatData","columnNames","filter","p","c","array","max","Math","min","base_light","cat3","useSeries","valuesProps","getDeltaColor","useCallback","value","diagonal","positive","negative","chartSeries","series","id","type","label","show","emphasis","disabled","j","row","racc","rv","i","visualMap","itemStyle","SQUARE_SIZE","useGridLayout","format","xAxisPosition","visualMapVisible","visualMapYPosition","size","nCols","length","nRows","itemHeight","padding","bottom","top","left","right","height","width"],"mappings":";;AAcO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAMF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,aAAaC,QAAQ,MAAM;AAC3BL,QAAAA,UAAU,QAAQD,OAAO;AAC3B;AAAA,IACF;AAEA,QAAIC,UAAU,OAAOA,OAAO,CAAC,MAAM,UAAU;AACpC,aAAA;AAAA,QACLM,QAASN,OAAyCO,OAChD,CAACC,KAAoCC,SAAS;AAC5CD,cAAIE,KAAK;AAAA,YACP,GAAGD;AAAAA,YACHE,OAAOT,SAASO,KAAKE,KAAK,KAAKF,KAAKE;AAAAA,UAAAA,CACrC;AACMH,iBAAAA;AAAAA,QACT,GACA,EACF;AAAA,MAAA;AAAA,IAEJ;AAEA,UAAMI,WAAWd,KACde,YAAY,EACZC,OAAQC,CAAAA,MAAMA,MAAMd,SAAS,EAC7BM,OAAO,CAACC,KAAeQ,MAAc;AACpCR,UAAIE,KAAK,GAAGZ,KAAKmB,MAAMD,CAAC,CAAC;AAClBR,aAAAA;AAAAA,IACT,GAAG,CAAE,CAAA;AACP,UAAMU,MAAMC,KAAKD,IAAI,GAAGN,QAAQ;AAChC,UAAMQ,MAAMD,KAAKC,IAAI,GAAGR,QAAQ;AAEzB,WAAA;AAAA,MACLR,YAAYJ,UAAU,CAACE,QAAQmB,cAAc,IAAInB,QAAQoB,QAAQ,EAAE;AAAA,MACnEJ;AAAAA,MACAE;AAAAA,IAAAA;AAAAA,EACF,GACC,CAAClB,QAAQF,QAAQF,MAAMG,WAAWF,KAAK,CAAC;AAEpCK,SAAAA;AACT;AAEO,MAAMmB,YAAYA,CAAC;AAAA,EACxBzB;AAAAA,EACAG;AAAAA,EACAF;AAAAA,EACAyB;AAMF,MAAM;AACE,QAAA;AAAA,IAAEtB;AAAAA,MAAWC,SAAS;AAE5B,QAAMsB,gBAAgBC,YACpB,CAACC,OAAeC,aAAsB;AACpC,QAAKA,YAAYD,QAAQ,KAAO,CAACC,YAAYD,QAAQ,GAAI;AACvD,aAAOzB,QAAQ2B;AAAAA,IACjB;AACA,QAAKD,YAAYD,QAAQ,KAAO,CAACC,YAAYD,QAAQ,GAAI;AACvD,aAAOzB,QAAQ4B;AAAAA,IACjB;AAEA,WAAO5B,QAAQmB;AAAAA,EAAAA,GAEjB,CAACnB,MAAM,CACT;AAEM6B,QAAAA,cAAc1B,QAAQ,MAAM;AACzB,WAAA;AAAA,MACL2B,QAAQ;AAAA,QACNC,IAAK,UAAShC,SAAU;AAAA,QACxBiC,MAAM;AAAA,QACNC,OAAO;AAAA,UACLC,MAAM;AAAA,UACN,GAAGZ;AAAAA,UACH,GAAIA,aAAab,SAAS;AAAA,YACxBA,OAAOT,SAASsB,YAAYb,KAAK,KAAKa,YAAYb;AAAAA,UACpD;AAAA,QACF;AAAA,QACA0B,UAAU;AAAA,UACRC,UAAU;AAAA,QACZ;AAAA,QACAxC,MAAMA,KACHe,cACAC,OAAQC,CAAAA,MAAMA,MAAMd,SAAS,EAC7BM,OAAO,CAACC,KAA4BQ,GAAWuB,MAAM;AAC9CC,gBAAAA,MAA6B1C,KAChCmB,MAAMD,CAAC,EACPT,OAAO,CAACkC,MAAMC,IAAIC,MAAM;AACvBF,iBAAK/B,KAAK;AAAA,cACRiB,OAAO,CAAC7B,KAAKmB,MAAMhB,SAAS,EAAE0C,CAAC,GAAG3B,GAAG0B,MAAM,OAAOA,KAAK,GAAG;AAAA,cAC1D,GAAI3C,SAAS;AAAA,gBACX6C,WAAW;AAAA,gBACXC,WAAW;AAAA,kBACTlC,OAAOc,cAAciB,IAAIC,MAAMJ,CAAC;AAAA,gBAClC;AAAA,cACF;AAAA,YAAA,CACD;AACME,mBAAAA;AAAAA,UACT,GAAG,CAAE,CAAA;AAEH/B,cAAAA,KAAK,GAAG8B,GAAG;AACRhC,iBAAAA;AAAAA,QACT,GAAG,EAAE;AAAA,MACT;AAAA,IAAA;AAAA,EACF,GACC,CAACN,QAAQJ,MAAMC,OAAOE,WAAWwB,eAAeD,WAAW,CAAC;AAExDO,SAAAA;AACT;AAEA,MAAMe,cAAc;AAEb,MAAMC,gBAAgBA,CAAC;AAAA,EAC5BjD;AAAAA,EACAG;AAAAA,EACA+C;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAQF,MAAM;AACEC,QAAAA,OAAO/C,QAAQ,MAAM;AACzB,UAAMgD,QAAQvD,KAAKmB,MAAMhB,SAAS,EAAEqD;AAC9BC,UAAAA,QAAQzD,KAAKe,cAAcC,OAAQC,CAAMA,MAAAA,MAAMd,SAAS,EAAEqD;AAChE,UAAME,aAAaR,WAAW,WAAWF,cAAcA,cAAc;AAE9D,WAAA;AAAA,MACLW,SAAS;AAAA,QACPC,QACET,kBAAkB,YACjBC,oBAAoBC,uBAAuB,WACxC,KACA;AAAA,QACNQ,KACEV,kBAAkB,SACjBC,oBAAoBC,uBAAuB,QACxC,KACA;AAAA,QACN,GAAID,oBACFC,uBAAuB,YACvBF,kBAAkB,YAAY;AAAA,UAC5BS,QAAQ;AAAA,QACV;AAAA,QACF,GAAIR,oBACFC,uBAAuB,SACvBF,kBAAkB,SAAS;AAAA,UACzBU,KAAK;AAAA,QACP;AAAA,QACFC,MAAM;AAAA,QACNC,OAAO;AAAA,MACT;AAAA,MACAT,MAAM;AAAA,QACJU,QAAQ3C,KAAKD,IAAIsC,aAAaD,OAAOC,aAAa,CAAC;AAAA,QACnDO,OAAO5C,KAAKD,IAAI4B,cAAcO,OAAOP,cAAc,CAAC;AAAA,MACtD;AAAA,IAAA;AAAA,EACF,GACC,CACDhD,MACAG,WACA+C,QACAE,kBACAC,oBACAF,aAAa,CACd;AAEMG,SAAAA;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n  HvConfusionMatrixColorScale,\n  HvConfusionMatrixFormat,\n  HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n  data,\n  delta,\n  custom,\n  filterKey,\n}: {\n  data: ColumnTable;\n  delta: boolean;\n  filterKey: string;\n  custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n  const { colors } = useTheme();\n\n  const colorScale = useMemo(() => {\n    if (custom == null && delta) {\n      return;\n    }\n\n    if (custom && typeof custom[0] === \"object\") {\n      return {\n        pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n          (acc: HvConfusionMatrixColorScale[], curr) => {\n            acc.push({\n              ...curr,\n              color: colors?.[curr.color] || curr.color,\n            });\n            return acc;\n          },\n          []\n        ),\n      };\n    }\n\n    const flatData = data\n      .columnNames()\n      .filter((p) => p !== filterKey)\n      .reduce((acc: number[], c: string) => {\n        acc.push(...data.array(c));\n        return acc;\n      }, []);\n    const max = Math.max(...flatData);\n    const min = Math.min(...flatData);\n\n    return {\n      colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n      max,\n      min,\n    };\n  }, [colors, custom, data, filterKey, delta]);\n\n  return colorScale;\n};\n\nexport const useSeries = ({\n  data,\n  filterKey,\n  delta,\n  valuesProps,\n}: {\n  data: ColumnTable;\n  filterKey: string;\n  delta: boolean;\n  valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n  const { colors } = useTheme();\n\n  const getDeltaColor = useCallback(\n    (value: number, diagonal: boolean) => {\n      if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n        return colors?.positive;\n      }\n      if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n        return colors?.negative;\n      }\n\n      return colors?.base_light;\n    },\n    [colors]\n  );\n\n  const chartSeries = useMemo(() => {\n    return {\n      series: {\n        id: `series~${filterKey}`,\n        type: \"heatmap\",\n        label: {\n          show: true,\n          ...valuesProps,\n          ...(valuesProps?.color && {\n            color: colors?.[valuesProps.color] || valuesProps.color,\n          }),\n        },\n        emphasis: {\n          disabled: true,\n        },\n        data: data\n          .columnNames()\n          .filter((p) => p !== filterKey)\n          .reduce((acc: (string | number)[][], c: string, j) => {\n            const row: (string | number)[][] = data\n              .array(c)\n              .reduce((racc, rv, i) => {\n                racc.push({\n                  value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n                  ...(delta && {\n                    visualMap: false,\n                    itemStyle: {\n                      color: getDeltaColor(rv, i === j),\n                    },\n                  }),\n                });\n                return racc;\n              }, []);\n\n            acc.push(...row);\n            return acc;\n          }, []),\n      },\n    };\n  }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n  return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n  data,\n  filterKey,\n  format,\n  xAxisPosition,\n  visualMapVisible,\n  visualMapYPosition,\n}: {\n  xAxisPosition: HvChartXAxis[\"position\"];\n  data: ColumnTable;\n  filterKey: string;\n  format: HvConfusionMatrixFormat;\n  visualMapVisible: boolean;\n  visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n  const size = useMemo(() => {\n    const nCols = data.array(filterKey).length;\n    const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n    const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n    return {\n      padding: {\n        bottom:\n          xAxisPosition === \"bottom\" ||\n          (visualMapVisible && visualMapYPosition === \"bottom\")\n            ? 60\n            : 20,\n        top:\n          xAxisPosition === \"top\" ||\n          (visualMapVisible && visualMapYPosition === \"top\")\n            ? 60\n            : 20,\n        ...(visualMapVisible &&\n          visualMapYPosition === \"bottom\" &&\n          xAxisPosition === \"bottom\" && {\n            bottom: 100,\n          }),\n        ...(visualMapVisible &&\n          visualMapYPosition === \"top\" &&\n          xAxisPosition === \"top\" && {\n            top: 100,\n          }),\n        left: 80,\n        right: 80,\n      },\n      size: {\n        height: Math.max(itemHeight * nRows, itemHeight * 8),\n        width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n      },\n    };\n  }, [\n    data,\n    filterKey,\n    format,\n    visualMapVisible,\n    visualMapYPosition,\n    xAxisPosition,\n  ]);\n\n  return size;\n};\n"],"names":[],"mappings":"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"}

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

@@ -11,65 +11,66 @@ import { useLegend } from "../../hooks/useLegend.js";
 import { useOption } from "../../hooks/useOption.js";
 import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
-echarts.use([PieChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent]);
-const HvDonutChart = forwardRef((props, ref) => {
-  const {
-    data,
-    groupBy,
-    classes,
-    legend,
-    tooltip,
-    measure: measures,
-    sortBy,
-    grid,
-    width,
-    height,
-    type = "regular",
-    slicesNameFormatter,
-    onOptionChange
-  } = props;
-  const chartData = useData({
-    data,
-    groupBy,
-    measures,
-    sortBy
-  });
-  const chartDataset = useDataset(chartData);
-  const chartSeries = useSeries({
-    type: "pie",
-    data: chartData,
-    groupBy,
-    measures,
-    radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
-  });
-  const chartLegend = useLegend({
-    ...legend,
-    show: legend?.show ?? true,
-    icon: "square",
-    series: chartSeries.series,
-    formatter: slicesNameFormatter
-  });
-  const chartTooltip = useTooltip({
-    ...tooltip,
-    measures,
-    classes,
-    nameFormatter: slicesNameFormatter
-  });
-  const chartGrid = useGrid({
-    ...grid
-  });
-  const option = useOption({
-    option: {
-      ...chartSeries,
-      ...chartDataset,
-      ...chartLegend,
-      ...chartTooltip,
-      ...chartGrid
-    },
-    onOptionChange
-  });
-  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
-});
+echarts.use([
+  PieChart,
+  DatasetComponent,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent
+]);
+const HvDonutChart = forwardRef(
+  (props, ref) => {
+    const {
+      data,
+      groupBy,
+      classes,
+      legend,
+      tooltip,
+      measure: measures,
+      sortBy,
+      grid,
+      width,
+      height,
+      type = "regular",
+      slicesNameFormatter,
+      onOptionChange
+    } = props;
+    const chartData = useData({ data, groupBy, measures, sortBy });
+    const chartDataset = useDataset(chartData);
+    const chartSeries = useSeries({
+      type: "pie",
+      data: chartData,
+      groupBy,
+      measures,
+      radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
+    });
+    const chartLegend = useLegend({
+      ...legend,
+      show: legend?.show ?? true,
+      icon: "square",
+      series: chartSeries.series,
+      formatter: slicesNameFormatter
+    });
+    const chartTooltip = useTooltip({
+      ...tooltip,
+      measures,
+      classes,
+      nameFormatter: slicesNameFormatter
+    });
+    const chartGrid = useGrid({ ...grid });
+    const option = useOption({
+      option: {
+        ...chartSeries,
+        ...chartDataset,
+        ...chartLegend,
+        ...chartTooltip,
+        ...chartGrid
+      },
+      onOptionChange
+    });
+    return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, width, height });
+  }
+);
 export {
   HvDonutChart
 };

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

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.js","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n  (props, ref) => {\n    const {\n      data,\n      groupBy,\n      classes,\n      legend,\n      tooltip,\n      measure: measures,\n      sortBy,\n      grid,\n      width,\n      height,\n      type = \"regular\",\n      slicesNameFormatter,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartSeries = useSeries({\n      type: \"pie\",\n      data: chartData,\n      groupBy,\n      measures,\n      radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      show: legend?.show ?? true,\n      icon: \"square\",\n      series: chartSeries.series,\n      formatter: slicesNameFormatter,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      measures,\n      classes,\n      nameFormatter: slicesNameFormatter,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const option = useOption({\n      option: {\n        ...chartSeries,\n        ...chartDataset,\n        ...chartLegend,\n        ...chartTooltip,\n        ...chartGrid,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  }\n);\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","forwardRef","props","ref","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","width","height","type","slicesNameFormatter","onOptionChange","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","option","useOption"],"mappings":";;;;;;;;;;;;;AA4BAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,eAAe,CAChB;AAmBM,MAAMC,eAAeC,WAC1B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,EACEf,IAAAA;AAEJ,QAAMgB,YAAYC,QAAQ;AAAA,IAAEf;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDS,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAU;AAAA,IAC5BR,MAAM;AAAA,IACNX,MAAMc;AAAAA,IACNb;AAAAA,IACAK;AAAAA,IACAc,QAAQT,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMU,cAAcC,UAAU;AAAA,IAC5B,GAAGnB;AAAAA,IACHoB,MAAMpB,QAAQoB,QAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWd;AAAAA,EAAAA,CACZ;AAED,QAAMe,eAAeC,WAAW;AAAA,IAC9B,GAAGxB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACA2B,eAAejB;AAAAA,EAAAA,CAChB;AAED,QAAMkB,YAAYC,QAAQ;AAAA,IAAE,GAAGvB;AAAAA,EAAAA,CAAM;AAErC,QAAMwB,SAASC,UAAU;AAAA,IACvBD,QAAQ;AAAA,MACN,GAAGd;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IACL;AAAA,IACAjB;AAAAA,EAAAA,CACD;AAED,SACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAkB,CAAA;AAE3E,CACF;"}
+{"version":3,"file":"DonutChart.js","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = forwardRef<ReactECharts, HvDonutChartProps>(\n  (props, ref) => {\n    const {\n      data,\n      groupBy,\n      classes,\n      legend,\n      tooltip,\n      measure: measures,\n      sortBy,\n      grid,\n      width,\n      height,\n      type = \"regular\",\n      slicesNameFormatter,\n      onOptionChange,\n    } = props;\n\n    const chartData = useData({ data, groupBy, measures, sortBy });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartSeries = useSeries({\n      type: \"pie\",\n      data: chartData,\n      groupBy,\n      measures,\n      radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      show: legend?.show ?? true,\n      icon: \"square\",\n      series: chartSeries.series,\n      formatter: slicesNameFormatter,\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      measures,\n      classes,\n      nameFormatter: slicesNameFormatter,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const option = useOption({\n      option: {\n        ...chartSeries,\n        ...chartDataset,\n        ...chartLegend,\n        ...chartTooltip,\n        ...chartGrid,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart ref={ref} option={option} width={width} height={height} />\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AA4BA,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,OAAO;AAAA,MACP;AAAA,MACA;AAAA,IACE,IAAA;AAEJ,UAAM,YAAY,QAAQ,EAAE,MAAM,SAAS,UAAU,QAAQ;AAEvD,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;AAED,WACG,oBAAA,aAAA,EAAY,KAAU,QAAgB,OAAc,OAAgB,CAAA;AAAA,EAEzE;AACF;"}