@hitachivantara/uikit-react-viz 6.1.6 → 6.1.7

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

package/dist/DonutChart/DonutChart.js

@@ -1,93 +1,75 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { PieChart } from "echarts/charts";
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
-import * as echarts from "echarts/core";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
+import { useGrid } from "../hooks/useGrid.js";
 import { useData } from "../hooks/useData.js";
 import { useDataset } from "../hooks/useDataset.js";
 import { useSeries } from "../hooks/useSeries.js";
 import { useLegend } from "../hooks/useLegend.js";
 import { useTooltip } from "../hooks/tooltip/useTooltip.js";
-import { useGrid } from "../hooks/useGrid.js";
 import { useOption } from "../hooks/useOption.js";
-import { HvBaseChart } from "../BaseChart/BaseChart.js";
+import { forwardRef } from "react";
+import { DatasetComponent, GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { jsx } from "react/jsx-runtime";
+import { PieChart } from "echarts/charts";
+//#region src/DonutChart/DonutChart.tsx
 echarts.use([
-  PieChart,
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent
+	PieChart,
+	DatasetComponent,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent
 ]);
-const HvDonutChart = forwardRef(
-  function HvDonutChart2(props, ref) {
-    const {
-      data,
-      groupBy,
-      classes,
-      legend,
-      tooltip,
-      measure: measures,
-      sortBy,
-      filters,
-      grid,
-      width,
-      height,
-      type = "regular",
-      slicesNameFormatter,
-      onOptionChange,
-      ...others
-    } = props;
-    const { data: chartData, mapping: measuresMapping } = useData({
-      data,
-      groupBy,
-      measures,
-      sortBy,
-      filters
-    });
-    const chartDataset = useDataset(chartData);
-    const chartSeries = useSeries({
-      type: "pie",
-      data: chartData,
-      groupBy,
-      measuresMapping,
-      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,
-      measuresMapping,
-      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,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvDonutChart
-};
+/**
+* Donut charts nicely convey the part-whole relationship and they have become
+* the most recognizable chart types for representing proportions in business and data statistics.
+*/
+var HvDonutChart = forwardRef(function HvDonutChart(props, ref) {
+	const { data, groupBy, classes, legend, tooltip, measure: measures, sortBy, filters, grid, width, height, type = "regular", slicesNameFormatter, onOptionChange, ...others } = props;
+	const { data: chartData, mapping: measuresMapping } = useData({
+		data,
+		groupBy,
+		measures,
+		sortBy,
+		filters
+	});
+	const chartDataset = useDataset(chartData);
+	const chartSeries = useSeries({
+		type: "pie",
+		data: chartData,
+		groupBy,
+		measuresMapping,
+		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,
+		measuresMapping,
+		classes,
+		nameFormatter: slicesNameFormatter
+	});
+	const chartGrid = useGrid({ ...grid });
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({
+			option: {
+				...chartSeries,
+				...chartDataset,
+				...chartLegend,
+				...chartTooltip,
+				...chartGrid
+			},
+			onOptionChange
+		}),
+		width,
+		height,
+		...others
+	});
+});
+//#endregion
+export { HvDonutChart };

package/dist/Heatmap/Heatmap.js

@@ -1,42 +1,35 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { HeatmapChart } from "echarts/charts";
-import { TooltipComponent, VisualMapComponent } from "echarts/components";
-import * as echarts from "echarts/core";
-import { useTheme } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Heatmap.styles.js";
-import { useTooltip } from "../hooks/tooltip/useTooltip.js";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
 import { useXAxis } from "../hooks/useXAxis.js";
 import { useYAxis } from "../hooks/useYAxis.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";
-echarts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);
-const HvHeatmap = forwardRef(
-  function HvHeatmap2(props, ref) {
-    const {
-      name,
-      data,
-      min,
-      max,
-      colorScale,
-      xAxis,
-      yAxis,
-      classes: classesProp,
-      tooltip,
-      width,
-      height,
-      onOptionChange,
-      ...others
-    } = props;
-    const { classes } = useClasses(classesProp);
-    const { colors } = useTheme();
-    const chartTooltip = useTooltip({
-      component: (params) => {
-        const value = params?.value;
-        const title = params?.title;
-        const valueToShow = value ? `${yAxis?.data?.[Number(value[1])]} - ${xAxis?.data?.[Number(value[0])]}: ${params?.series?.[0]?.name}` : "-";
-        return `
+import { useClasses } from "./Heatmap.styles.js";
+import { forwardRef } from "react";
+import { TooltipComponent, VisualMapComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { useTheme } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+import { HeatmapChart } from "echarts/charts";
+//#region src/Heatmap/Heatmap.tsx
+echarts.use([
+	HeatmapChart,
+	TooltipComponent,
+	VisualMapComponent
+]);
+/**
+* A Heatmap uses color gradients to represent data intensity across a surface.
+*/
+var HvHeatmap = forwardRef(function HvHeatmap(props, ref) {
+	const { name, data, min, max, colorScale, xAxis, yAxis, classes: classesProp, tooltip, width, height, onOptionChange, ...others } = props;
+	const { classes } = useClasses(classesProp);
+	const { colors } = useTheme();
+	const chartTooltip = useTooltip({
+		component: (params) => {
+			const value = params?.value;
+			const title = params?.title;
+			const valueToShow = value ? `${yAxis?.data?.[Number(value[1])]} - ${xAxis?.data?.[Number(value[0])]}: ${params?.series?.[0]?.name}` : "-";
+			return `
           <div class="${classes.tooltipRoot}">
             <div class="${classes.tooltipContainer}">
               <div>
@@ -45,65 +38,56 @@ const HvHeatmap = forwardRef(
               </div>
             </div>
           </div>`;
-      },
-      ...tooltip
-    });
-    const chartXAxis = useXAxis({ type: "categorical", ...xAxis });
-    const chartYAxis = useYAxis({
-      defaultType: "categorical",
-      axes: yAxis ? [yAxis] : []
-    });
-    const convertedColors = colorScale?.map(
-      (color) => colors?.[color] || color
-    );
-    const chartVisualMap = useVisualMap({
-      min,
-      max,
-      orient: "horizontal",
-      left: "center",
-      calculable: true,
-      position: {
-        y: "bottom"
-      },
-      colorScale: convertedColors || ["#2D4B87", "#95AFE8", "#E7EDF9"]
-    });
-    const option = useOption({
-      option: {
-        xAxis: chartXAxis.xAxis,
-        yAxis: chartYAxis.yAxis,
-        visualMap: chartVisualMap.visualMap,
-        series: [
-          {
-            name,
-            type: "heatmap",
-            data,
-            label: {
-              show: true
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ],
-        ...chartTooltip
-      },
-      onOptionChange
-    });
-    return /* @__PURE__ */ jsx(
-      HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvHeatmap
-};
+		},
+		...tooltip
+	});
+	const chartXAxis = useXAxis({
+		type: "categorical",
+		...xAxis
+	});
+	const chartYAxis = useYAxis({
+		defaultType: "categorical",
+		axes: yAxis ? [yAxis] : []
+	});
+	const convertedColors = colorScale?.map((color) => colors?.[color] || color);
+	const chartVisualMap = useVisualMap({
+		min,
+		max,
+		orient: "horizontal",
+		left: "center",
+		calculable: true,
+		position: { y: "bottom" },
+		colorScale: convertedColors || [
+			"#2D4B87",
+			"#95AFE8",
+			"#E7EDF9"
+		]
+	});
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({
+			option: {
+				xAxis: chartXAxis.xAxis,
+				yAxis: chartYAxis.yAxis,
+				visualMap: chartVisualMap.visualMap,
+				series: [{
+					name,
+					type: "heatmap",
+					data,
+					label: { show: true },
+					emphasis: { itemStyle: {
+						shadowBlur: 10,
+						shadowColor: "rgba(0, 0, 0, 0.5)"
+					} }
+				}],
+				...chartTooltip
+			},
+			onOptionChange
+		}),
+		width,
+		height,
+		...others
+	});
+});
+//#endregion
+export { HvHeatmap };

package/dist/Heatmap/Heatmap.styles.js

@@ -1,26 +1,25 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses, staticClasses } = createClasses("HvHeatmap", {
-  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
-  }
+//#region src/Heatmap/Heatmap.styles.tsx
+var { useClasses, staticClasses } = createClasses("HvHeatmap", {
+	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
-};
+//#endregion
+export { useClasses };