@hitachivantara/uikit-react-viz 6.1.6 → 6.1.8

package/dist/ConfusionMatrix/ConfusionMatrix.js

@@ -1,79 +1,64 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { HeatmapChart } from "echarts/charts";
-import { VisualMapComponent, GridComponent, TooltipComponent } from "echarts/components";
-import * as echarts from "echarts/core";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
 import { getGroupKey } from "../utils/index.js";
-import { useClasses } from "./ConfusionMatrix.styles.js";
-import { useColorScale, useSeries, useGridLayout } from "./utils.js";
-import { useVisualMap } from "../hooks/useVisualMap.js";
-import { useData } from "../hooks/useData.js";
-import { useTooltip } from "../hooks/tooltip/useTooltip.js";
-import { useYAxis } from "../hooks/useYAxis.js";
 import { useXAxis } from "../hooks/useXAxis.js";
+import { useYAxis } from "../hooks/useYAxis.js";
 import { useGrid } from "../hooks/useGrid.js";
+import { useData } from "../hooks/useData.js";
+import { useVisualMap } from "../hooks/useVisualMap.js";
+import { useTooltip } from "../hooks/tooltip/useTooltip.js";
 import { useOption } from "../hooks/useOption.js";
-import { HvBaseChart } from "../BaseChart/BaseChart.js";
+import { useClasses } from "./ConfusionMatrix.styles.js";
+import { useColorScale, useGridLayout, useSeries } from "./utils.js";
+import { forwardRef, useMemo } from "react";
+import { GridComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { jsx } from "react/jsx-runtime";
+import { HeatmapChart } from "echarts/charts";
+//#region src/ConfusionMatrix/ConfusionMatrix.tsx
 echarts.use([
-  HeatmapChart,
-  VisualMapComponent,
-  GridComponent,
-  TooltipComponent
+	HeatmapChart,
+	VisualMapComponent,
+	GridComponent,
+	TooltipComponent
 ]);
-const HvConfusionMatrix = forwardRef(function HvConfusionMatrix2(props, ref) {
-  const {
-    legend,
-    groupBy,
-    measure,
-    sortBy,
-    splitBy,
-    filters,
-    grid,
-    data: dataProp,
-    tooltip,
-    xAxis,
-    yAxis,
-    colorScale: colorScaleProp,
-    delta,
-    valuesProps,
-    width,
-    height,
-    format = "square",
-    classes: classesProp,
-    onOptionChange,
-    ...others
-  } = props;
-  const { classes } = useClasses(classesProp);
-  const groupByKey = getGroupKey(groupBy);
-  const { data: chartData } = useData({
-    data: dataProp,
-    groupBy,
-    measures: [measure],
-    sortBy: sortBy ?? groupBy,
-    // automatically orders x axis to create the confusion matrix
-    splitBy,
-    filters,
-    delta: typeof delta === "string" ? delta : void 0
-  });
-  const colorScale = useColorScale({
-    delta: !!delta,
-    data: chartData,
-    custom: colorScaleProp,
-    filterKey: groupByKey
-  });
-  const chartVisualMap = useVisualMap({
-    show: colorScale?.pieces != null,
-    type: colorScale?.pieces != null ? "piecewise" : "continuous",
-    ...colorScale,
-    ...legend
-  });
-  const chartTooltip = useTooltip({
-    component: (params) => {
-      const value = params?.series?.[0].value;
-      const fmtValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : tooltip?.valueFormatter ? tooltip?.valueFormatter(value) : value;
-      const ftmTitle = tooltip?.titleFormatter ? tooltip.titleFormatter(params?.title) : params?.title;
-      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;
-      return `
+/**
+* A Confusion Matrix is a table used to evaluate the performance of a predictive model.
+* Rows represent the actual classes, and columns show the predicted classes.
+*
+* - The diagonal cells show correct predictions and off-diagonal cells represent misclassifications.
+*
+*/
+var HvConfusionMatrix = forwardRef(function HvConfusionMatrix(props, ref) {
+	const { legend, groupBy, measure, sortBy, splitBy, filters, grid, data: dataProp, tooltip, xAxis, yAxis, colorScale: colorScaleProp, delta, valuesProps, width, height, format = "square", classes: classesProp, onOptionChange, ...others } = props;
+	const { classes } = useClasses(classesProp);
+	const groupByKey = getGroupKey(groupBy);
+	const { data: chartData } = useData({
+		data: dataProp,
+		groupBy,
+		measures: [measure],
+		sortBy: sortBy ?? groupBy,
+		splitBy,
+		filters,
+		delta: typeof delta === "string" ? delta : void 0
+	});
+	const colorScale = useColorScale({
+		delta: !!delta,
+		data: chartData,
+		custom: colorScaleProp,
+		filterKey: groupByKey
+	});
+	const chartVisualMap = useVisualMap({
+		show: colorScale?.pieces != null,
+		type: colorScale?.pieces != null ? "piecewise" : "continuous",
+		...colorScale,
+		...legend
+	});
+	const chartTooltip = useTooltip({
+		component: (params) => {
+			const value = params?.series?.[0].value;
+			const fmtValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : tooltip?.valueFormatter ? tooltip?.valueFormatter(value) : value;
+			const content = `${tooltip?.titleFormatter ? tooltip.titleFormatter(params?.title) : params?.title} - ${params?.series?.[0].name}: ${fmtValue}`;
+			return `
         <div class="${classes.tooltipRoot}">
             <div class="${classes.tooltipContainer}">
                 <div>
@@ -81,84 +66,100 @@ const HvConfusionMatrix = forwardRef(function HvConfusionMatrix2(props, ref) {
                 </div>
             </div>
         </div>`;
-    },
-    ...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).toReversed()
-      }
-    ]
-  });
-  const chartXAxis = useXAxis({
-    name: "Predicted Value",
-    position: "top",
-    ...xAxis,
-    nameProps: {
-      location: "center",
-      padding: xAxis?.nameProps?.location == null || xAxis?.nameProps?.location === "center" ? xAxis?.position === "bottom" ? [30, 0, 0, 0] : [0, 0, 30, 0] : void 0,
-      ...xAxis?.nameProps
-    },
-    data: chartData.array(groupByKey)
-  });
-  const chartSeries = useSeries({
-    data: chartData,
-    filterKey: groupByKey,
-    valuesProps,
-    delta: !!(delta && colorScale == null)
-  });
-  const chartGridLayout = useGridLayout({
-    data: chartData,
-    format,
-    filterKey: groupByKey,
-    visualMapVisible: chartVisualMap.visualMap.show,
-    visualMapYPosition: chartVisualMap.visualMap.top,
-    xAxisPosition: chartXAxis.xAxis.position
-  });
-  const chartGrid = useGrid({
-    // If sizes are provided, the grid size should automatically adapt to the values provided
-    width: width != null ? void 0 : chartGridLayout.size.width,
-    height: height != null ? void 0 : chartGridLayout.size.height,
-    ...chartGridLayout.padding,
-    ...grid
-  });
-  const size = useMemo(() => {
-    return {
-      width,
-      // Echarts has a problem were the height is always set to 300px
-      // 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
-  ]);
-  const option = useOption({
-    option: {
-      ...chartVisualMap,
-      ...chartTooltip,
-      ...chartGrid,
-      ...chartXAxis,
-      ...chartYAxis,
-      ...chartSeries
-    },
-    onOptionChange
-  });
-  return /* @__PURE__ */ jsx(HvBaseChart, { ref, option, ...size, ...others });
+		},
+		...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).toReversed()
+	}] });
+	const chartXAxis = useXAxis({
+		name: "Predicted Value",
+		position: "top",
+		...xAxis,
+		nameProps: {
+			location: "center",
+			padding: xAxis?.nameProps?.location == null || xAxis?.nameProps?.location === "center" ? xAxis?.position === "bottom" ? [
+				30,
+				0,
+				0,
+				0
+			] : [
+				0,
+				0,
+				30,
+				0
+			] : void 0,
+			...xAxis?.nameProps
+		},
+		data: chartData.array(groupByKey)
+	});
+	const chartSeries = useSeries({
+		data: chartData,
+		filterKey: groupByKey,
+		valuesProps,
+		delta: !!(delta && colorScale == null)
+	});
+	const chartGridLayout = useGridLayout({
+		data: chartData,
+		format,
+		filterKey: groupByKey,
+		visualMapVisible: chartVisualMap.visualMap.show,
+		visualMapYPosition: chartVisualMap.visualMap.top,
+		xAxisPosition: chartXAxis.xAxis.position
+	});
+	const chartGrid = useGrid({
+		width: width != null ? void 0 : chartGridLayout.size.width,
+		height: height != null ? void 0 : chartGridLayout.size.height,
+		...chartGridLayout.padding,
+		...grid
+	});
+	const size = useMemo(() => {
+		return {
+			width,
+			height: height ?? chartGridLayout.size.height + chartGridLayout.padding.bottom + chartGridLayout.padding.top
+		};
+	}, [
+		chartGridLayout.padding.bottom,
+		chartGridLayout.padding.top,
+		chartGridLayout.size.height,
+		height,
+		width
+	]);
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({
+			option: {
+				...chartVisualMap,
+				...chartTooltip,
+				...chartGrid,
+				...chartXAxis,
+				...chartYAxis,
+				...chartSeries
+			},
+			onOptionChange
+		}),
+		...size,
+		...others
+	});
 });
-export {
-  HvConfusionMatrix
-};
+//#endregion
+export { HvConfusionMatrix };

package/dist/ConfusionMatrix/ConfusionMatrix.styles.js

@@ -1,29 +1,25 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses, staticClasses } = createClasses(
-  "HvConfusionMatrix",
-  {
-    tooltipRoot: {
-      backgroundColor: theme.colors.bgContainer,
-      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.text
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/ConfusionMatrix/ConfusionMatrix.styles.tsx
+var { useClasses, staticClasses } = createClasses("HvConfusionMatrix", {
+	tooltipRoot: {
+		backgroundColor: theme.colors.bgContainer,
+		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.text
+	}
+});
+//#endregion
+export { useClasses };

package/dist/ConfusionMatrix/utils.js

@@ -1,142 +1,109 @@
-import { useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
-const useColorScale = ({
-  data,
-  delta,
-  custom,
-  filterKey
-}) => {
-  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;
-        }, [])
-      };
-    }
-    const flatData = data.columnNames().filter((p) => p !== filterKey).reduce((acc, c) => {
-      acc.push(...data.array(c));
-      return acc;
-    }, []);
-    const max = Math.max(...flatData);
-    const min = Math.min(...flatData);
-    const parsedColors = custom?.map(
-      (c) => typeof c === "string" ? colors?.[c] || c : c.color
-    );
-    return {
-      colorScale: parsedColors || [colors?.textLight || "", colors?.cat3 || ""],
-      max,
-      min
-    };
-  }, [colors, custom, data, filterKey, delta]);
-  return colorScale;
+//#region src/ConfusionMatrix/utils.ts
+var useColorScale = ({ data, delta, custom, filterKey }) => {
+	const { colors } = useTheme();
+	return 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;
+		}, []) };
+		const flatData = data.columnNames().filter((p) => p !== filterKey).reduce((acc, c) => {
+			acc.push(...data.array(c));
+			return acc;
+		}, []);
+		const max = Math.max(...flatData);
+		const min = Math.min(...flatData);
+		return {
+			colorScale: custom?.map((c) => typeof c === "string" ? colors?.[c] || c : c.color) || [colors?.textLight || "", colors?.cat3 || ""],
+			max,
+			min
+		};
+	}, [
+		colors,
+		custom,
+		data,
+		filterKey,
+		delta
+	]);
 };
-const useSeries = ({
-  data,
-  filterKey,
-  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?.textLight;
-    },
-    [colors]
-  );
-  const chartSeries = useMemo(() => {
-    return {
-      series: {
-        id: `series~${filterKey}`,
-        type: "heatmap",
-        label: {
-          show: true,
-          ...valuesProps,
-          ...valuesProps?.color && {
-            color: colors?.[valuesProps.color] || valuesProps.color
-          }
-        },
-        emphasis: {
-          disabled: true
-        },
-        data: data.columnNames().filter((p) => p !== filterKey).reduce((acc, c, j) => {
-          const row = data.array(c).reduce((racc, rv, i) => {
-            racc.push({
-              value: [data.array(filterKey)[i], c, rv != null ? rv : "-"],
-              ...delta && {
-                visualMap: false,
-                itemStyle: {
-                  color: getDeltaColor(rv, i === j)
-                }
-              }
-            });
-            return racc;
-          }, []);
-          acc.push(...row);
-          return acc;
-        }, [])
-      }
-    };
-  }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);
-  return chartSeries;
+var useSeries = ({ data, filterKey, 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?.textLight;
+	}, [colors]);
+	return useMemo(() => {
+		return { series: {
+			id: `series~${filterKey}`,
+			type: "heatmap",
+			label: {
+				show: true,
+				...valuesProps,
+				...valuesProps?.color && { color: colors?.[valuesProps.color] || valuesProps.color }
+			},
+			emphasis: { disabled: true },
+			data: data.columnNames().filter((p) => p !== filterKey).reduce((acc, c, j) => {
+				const row = data.array(c).reduce((racc, rv, i) => {
+					racc.push({
+						value: [
+							data.array(filterKey)[i],
+							c,
+							rv != null ? rv : "-"
+						],
+						...delta && {
+							visualMap: false,
+							itemStyle: { color: getDeltaColor(rv, i === j) }
+						}
+					});
+					return racc;
+				}, []);
+				acc.push(...row);
+				return acc;
+			}, [])
+		} };
+	}, [
+		colors,
+		data,
+		delta,
+		filterKey,
+		getDeltaColor,
+		valuesProps
+	]);
 };
-const SQUARE_SIZE = 52;
-const useGridLayout = ({
-  data,
-  filterKey,
-  format,
-  xAxisPosition,
-  visualMapVisible,
-  visualMapYPosition
-}) => {
-  const size = useMemo(() => {
-    const nCols = data.array(filterKey).length;
-    const nRows = data.columnNames().filter((p) => p !== filterKey).length;
-    const itemHeight = format === "square" ? SQUARE_SIZE : SQUARE_SIZE / 2;
-    return {
-      padding: {
-        bottom: xAxisPosition === "bottom" || visualMapVisible && visualMapYPosition === "bottom" ? 60 : 20,
-        top: xAxisPosition === "top" || visualMapVisible && visualMapYPosition === "top" ? 60 : 20,
-        ...visualMapVisible && visualMapYPosition === "bottom" && xAxisPosition === "bottom" && {
-          bottom: 100
-        },
-        ...visualMapVisible && visualMapYPosition === "top" && xAxisPosition === "top" && {
-          top: 100
-        },
-        left: 80,
-        right: 80
-      },
-      size: {
-        height: Math.max(itemHeight * nRows, itemHeight * 8),
-        width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8)
-      }
-    };
-  }, [
-    data,
-    filterKey,
-    format,
-    visualMapVisible,
-    visualMapYPosition,
-    xAxisPosition
-  ]);
-  return size;
-};
-export {
-  useColorScale,
-  useGridLayout,
-  useSeries
+var SQUARE_SIZE = 52;
+var useGridLayout = ({ data, filterKey, format, xAxisPosition, visualMapVisible, visualMapYPosition }) => {
+	return useMemo(() => {
+		const nCols = data.array(filterKey).length;
+		const nRows = data.columnNames().filter((p) => p !== filterKey).length;
+		const itemHeight = format === "square" ? SQUARE_SIZE : SQUARE_SIZE / 2;
+		return {
+			padding: {
+				bottom: xAxisPosition === "bottom" || visualMapVisible && visualMapYPosition === "bottom" ? 60 : 20,
+				top: xAxisPosition === "top" || visualMapVisible && visualMapYPosition === "top" ? 60 : 20,
+				...visualMapVisible && visualMapYPosition === "bottom" && xAxisPosition === "bottom" && { bottom: 100 },
+				...visualMapVisible && visualMapYPosition === "top" && xAxisPosition === "top" && { top: 100 },
+				left: 80,
+				right: 80
+			},
+			size: {
+				height: Math.max(itemHeight * nRows, itemHeight * 8),
+				width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8)
+			}
+		};
+	}, [
+		data,
+		filterKey,
+		format,
+		visualMapVisible,
+		visualMapYPosition,
+		xAxisPosition
+	]);
 };
+//#endregion
+export { useColorScale, useGridLayout, useSeries };