@hitachivantara/uikit-react-viz 6.1.5 → 6.1.7

package/dist/Boxplot/useBoxplotData.js

@@ -1,40 +1,37 @@
+import { getHvArqueroCombinedFilters, normalizeColumnName, processTableData } from "../utils/index.js";
 import { useMemo } from "react";
 import { escape } from "arquero";
-import { processTableData, normalizeColumnName, getHvArqueroCombinedFilters } from "../utils/index.js";
-const useBoxplotData = ({
-  data,
-  groupBy: groupByProp,
-  measures,
-  filters: filtersProp
-}) => {
-  const chartData = useMemo(() => {
-    const { data: processedData } = processTableData(data);
-    let tableData = processedData;
-    if (filtersProp) {
-      const filters = (Array.isArray(filtersProp) ? filtersProp : [filtersProp]).map((filter) => ({
-        ...filter,
-        field: normalizeColumnName(filter.field)
-        // normalize
-      }));
-      tableData = tableData.filter(
-        escape((row) => getHvArqueroCombinedFilters(row, filters))
-      );
-    }
-    const normalizedGroupBy = normalizeColumnName(groupByProp || "");
-    const uniqueGroupBy = new Set(
-      tableData.array(normalizedGroupBy)
-    );
-    const results = {};
-    uniqueGroupBy.forEach((group) => {
-      results[group] = {};
-      Object.keys(measures).forEach((measure) => {
-        results[group][measure] = tableData.params({ group, groupBy: normalizedGroupBy }).filter((d, $) => d[$.groupBy] === $.group).array(normalizeColumnName(measure));
-      });
-    });
-    return results;
-  }, [data, filtersProp, groupByProp, measures]);
-  return chartData;
-};
-export {
-  useBoxplotData
+//#region src/Boxplot/useBoxplotData.tsx
+var useBoxplotData = ({ data, groupBy: groupByProp, measures, filters: filtersProp }) => {
+	return useMemo(() => {
+		const { data: processedData } = processTableData(data);
+		let tableData = processedData;
+		if (filtersProp) {
+			const filters = (Array.isArray(filtersProp) ? filtersProp : [filtersProp]).map((filter) => ({
+				...filter,
+				field: normalizeColumnName(filter.field)
+			}));
+			tableData = tableData.filter(escape((row) => getHvArqueroCombinedFilters(row, filters)));
+		}
+		const normalizedGroupBy = normalizeColumnName(groupByProp || "");
+		const uniqueGroupBy = new Set(tableData.array(normalizedGroupBy));
+		const results = {};
+		uniqueGroupBy.forEach((group) => {
+			results[group] = {};
+			Object.keys(measures).forEach((measure) => {
+				results[group][measure] = tableData.params({
+					group,
+					groupBy: normalizedGroupBy
+				}).filter((d, $) => d[$.groupBy] === $.group).array(normalizeColumnName(measure));
+			});
+		});
+		return results;
+	}, [
+		data,
+		filtersProp,
+		groupByProp,
+		measures
+	]);
 };
+//#endregion
+export { useBoxplotData };

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 };