@hitachivantara/uikit-react-viz 6.1.5 → 6.1.7

package/dist/hooks/useLegend.js

@@ -1,46 +1,37 @@
-import { useMemo } from "react";
 import { getLegendIcon } from "../utils/index.js";
-const useLegend = ({
-  series,
-  show,
-  icon,
-  formatter,
-  position: positionProp,
-  direction = "horizontal"
-}) => {
-  const option = useMemo(() => {
-    const position = {
-      y: positionProp?.y ?? "top",
-      x: positionProp?.x ?? "center"
-    };
-    return {
-      legend: {
-        show: show ?? (Array.isArray(series) && series.length > 1),
-        itemGap: 20,
-        formatter,
-        orient: direction,
-        ...position,
-        ...icon && { icon: getLegendIcon(icon) },
-        ...!icon && {
-          data: show !== false && Array.isArray(series) ? series.map((s) => {
-            let iconType = "line";
-            if (s.areaStyle != null) {
-              iconType = "square";
-            }
-            if (s.type === "scatter") {
-              iconType = "circle";
-            }
-            return {
-              name: s.name,
-              icon: getLegendIcon(iconType)
-            };
-          }) : void 0
-        }
-      }
-    };
-  }, [series, show, icon, formatter, positionProp, direction]);
-  return option;
-};
-export {
-  useLegend
+import { useMemo } from "react";
+//#region src/hooks/useLegend.tsx
+var useLegend = ({ series, show, icon, formatter, position: positionProp, direction = "horizontal" }) => {
+	return useMemo(() => {
+		const position = {
+			y: positionProp?.y ?? "top",
+			x: positionProp?.x ?? "center"
+		};
+		return { legend: {
+			show: show ?? (Array.isArray(series) && series.length > 1),
+			itemGap: 20,
+			formatter,
+			orient: direction,
+			...position,
+			...icon && { icon: getLegendIcon(icon) },
+			...!icon && { data: show !== false && Array.isArray(series) ? series.map((s) => {
+				let iconType = "line";
+				if (s.areaStyle != null) iconType = "square";
+				if (s.type === "scatter") iconType = "circle";
+				return {
+					name: s.name,
+					icon: getLegendIcon(iconType)
+				};
+			}) : void 0 }
+		} };
+	}, [
+		series,
+		show,
+		icon,
+		formatter,
+		positionProp,
+		direction
+	]);
 };
+//#endregion
+export { useLegend };

package/dist/hooks/useOption.js

@@ -1,20 +1,14 @@
 import { useMemo } from "react";
-const useOption = ({
-  option: optionProp,
-  onOptionChange
-}) => {
-  const option = useMemo(() => {
-    const baseOption = {
-      aria: {
-        enabled: true
-      },
-      animation: false
-    };
-    const opt = { ...baseOption, ...optionProp };
-    return onOptionChange ? onOptionChange(opt) : opt;
-  }, [onOptionChange, optionProp]);
-  return option;
-};
-export {
-  useOption
+//#region src/hooks/useOption.ts
+var useOption = ({ option: optionProp, onOptionChange }) => {
+	return useMemo(() => {
+		const opt = {
+			aria: { enabled: true },
+			animation: false,
+			...optionProp
+		};
+		return onOptionChange ? onOptionChange(opt) : opt;
+	}, [onOptionChange, optionProp]);
 };
+//#endregion
+export { useOption };

package/dist/hooks/useSeries.js

@@ -1,119 +1,86 @@
-import { useMemo } from "react";
 import { getGroupKey, getMeasure } from "../utils/index.js";
-const useSeries = ({
-  groupBy,
-  type,
-  data,
-  measuresMapping,
-  nameFormatter,
-  stack,
-  emptyCellMode,
-  radius,
-  horizontal = false,
-  area = false,
-  areaOpacity = 0.5
-}) => {
-  const groupByKey = getGroupKey(groupBy);
-  const option = useMemo(() => {
-    return {
-      series: data.columnNames().filter((c) => c !== groupByKey).map((c) => {
-        const measure = getMeasure(c, measuresMapping);
-        let pieOps = {};
-        let lineOps = {};
-        let barOps = {};
-        let scatterOps = {};
-        if (type === "scatter") {
-          const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
-          scatterOps = {
-            yAxisId,
-            encode: {
-              x: groupByKey,
-              y: c
-            }
-          };
-        }
-        if (type === "pie") {
-          pieOps = {
-            encode: {
-              value: c,
-              itemName: groupByKey
-            },
-            labelLine: {
-              show: false
-            },
-            label: {
-              show: false
-            },
-            emphasis: {
-              label: {
-                show: false
-              }
-            },
-            radius
-          };
-        }
-        if (type === "line" || type === "bar") {
-          const sampling = typeof measure !== "string" ? measure.sampling : void 0;
-          const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
-          const stackName = typeof measure !== "string" ? measure.stack ?? stack ?? void 0 : stack ?? void 0;
-          const axisOps = {
-            sampling,
-            yAxisId,
-            stack: stackName,
-            encode: horizontal ? {
-              x: c,
-              y: groupByKey
-            } : {
-              x: groupByKey,
-              y: c
-            }
-          };
-          if (type === "bar") {
-            barOps = {
-              ...axisOps,
-              barMaxWidth: 90,
-              barMinWidth: 3
-            };
-          }
-          if (type === "line") {
-            const showSymbol = typeof measure !== "string" ? !measure.hideSymbol : true;
-            const connectNulls = typeof measure !== "string" && measure.emptyCellMode ? measure.emptyCellMode === "connect" : emptyCellMode === "connect";
-            const isArea = typeof measure !== "string" ? measure.area ?? area : area;
-            const aOpacity = typeof measure !== "string" ? measure.areaOpacity ?? areaOpacity : areaOpacity;
-            lineOps = {
-              ...axisOps,
-              connectNulls,
-              showSymbol,
-              areaStyle: isArea ? { opacity: aOpacity } : void 0
-            };
-          }
-        }
-        return {
-          id: `series~${groupByKey}~${c}`,
-          type,
-          name: nameFormatter ? nameFormatter(c) : c,
-          ...pieOps,
-          ...barOps,
-          ...lineOps,
-          ...scatterOps
-        };
-      })
-    };
-  }, [
-    data,
-    groupByKey,
-    measuresMapping,
-    type,
-    nameFormatter,
-    radius,
-    stack,
-    horizontal,
-    emptyCellMode,
-    area,
-    areaOpacity
-  ]);
-  return option;
-};
-export {
-  useSeries
+import { useMemo } from "react";
+//#region src/hooks/useSeries.tsx
+var useSeries = ({ groupBy, type, data, measuresMapping, nameFormatter, stack, emptyCellMode, radius, horizontal = false, area = false, areaOpacity = .5 }) => {
+	const groupByKey = getGroupKey(groupBy);
+	return useMemo(() => {
+		return { series: data.columnNames().filter((c) => c !== groupByKey).map((c) => {
+			const measure = getMeasure(c, measuresMapping);
+			let pieOps = {};
+			let lineOps = {};
+			let barOps = {};
+			let scatterOps = {};
+			if (type === "scatter") scatterOps = {
+				yAxisId: typeof measure !== "string" ? measure.yAxis : void 0,
+				encode: {
+					x: groupByKey,
+					y: c
+				}
+			};
+			if (type === "pie") pieOps = {
+				encode: {
+					value: c,
+					itemName: groupByKey
+				},
+				labelLine: { show: false },
+				label: { show: false },
+				emphasis: { label: { show: false } },
+				radius
+			};
+			if (type === "line" || type === "bar") {
+				const axisOps = {
+					sampling: typeof measure !== "string" ? measure.sampling : void 0,
+					yAxisId: typeof measure !== "string" ? measure.yAxis : void 0,
+					stack: typeof measure !== "string" ? measure.stack ?? stack ?? void 0 : stack ?? void 0,
+					encode: horizontal ? {
+						x: c,
+						y: groupByKey
+					} : {
+						x: groupByKey,
+						y: c
+					}
+				};
+				if (type === "bar") barOps = {
+					...axisOps,
+					barMaxWidth: 90,
+					barMinWidth: 3
+				};
+				if (type === "line") {
+					const showSymbol = typeof measure !== "string" ? !measure.hideSymbol : true;
+					const connectNulls = typeof measure !== "string" && measure.emptyCellMode ? measure.emptyCellMode === "connect" : emptyCellMode === "connect";
+					const isArea = typeof measure !== "string" ? measure.area ?? area : area;
+					const aOpacity = typeof measure !== "string" ? measure.areaOpacity ?? areaOpacity : areaOpacity;
+					lineOps = {
+						...axisOps,
+						connectNulls,
+						showSymbol,
+						areaStyle: isArea ? { opacity: aOpacity } : void 0
+					};
+				}
+			}
+			return {
+				id: `series~${groupByKey}~${c}`,
+				type,
+				name: nameFormatter ? nameFormatter(c) : c,
+				...pieOps,
+				...barOps,
+				...lineOps,
+				...scatterOps
+			};
+		}) };
+	}, [
+		data,
+		groupByKey,
+		measuresMapping,
+		type,
+		nameFormatter,
+		radius,
+		stack,
+		horizontal,
+		emptyCellMode,
+		area,
+		areaOpacity
+	]);
 };
+//#endregion
+export { useSeries };

package/dist/hooks/useVisualMap.js

@@ -1,57 +1,40 @@
-import { useMemo } from "react";
 import { getLegendIcon } from "../utils/index.js";
-const useVisualMap = ({
-  show = true,
-  direction = "horizontal",
-  type = "continuous",
-  pieces,
-  max,
-  min,
-  colorScale,
-  position: positionProp,
-  ...others
-}) => {
-  const option = useMemo(() => {
-    return {
-      visualMap: {
-        type,
-        show,
-        ...pieces && {
-          pieces
-        },
-        ...type === "piecewise" && {
-          itemSymbol: getLegendIcon("square"),
-          itemGap: 20,
-          itemHeight: 16,
-          itemWidth: 16
-        },
-        ...colorScale && {
-          max,
-          min,
-          inRange: {
-            color: colorScale
-          }
-        },
-        orient: direction,
-        top: positionProp?.y || "top",
-        left: positionProp?.x || "center",
-        ...others
-      }
-    };
-  }, [
-    colorScale,
-    direction,
-    max,
-    min,
-    others,
-    pieces,
-    positionProp?.x,
-    positionProp?.y,
-    show,
-    type
-  ]);
-  return option;
-};
-export {
-  useVisualMap
+import { useMemo } from "react";
+//#region src/hooks/useVisualMap.tsx
+var useVisualMap = ({ show = true, direction = "horizontal", type = "continuous", pieces, max, min, colorScale, position: positionProp, ...others }) => {
+	return useMemo(() => {
+		return { visualMap: {
+			type,
+			show,
+			...pieces && { pieces },
+			...type === "piecewise" && {
+				itemSymbol: getLegendIcon("square"),
+				itemGap: 20,
+				itemHeight: 16,
+				itemWidth: 16
+			},
+			...colorScale && {
+				max,
+				min,
+				inRange: { color: colorScale }
+			},
+			orient: direction,
+			top: positionProp?.y || "top",
+			left: positionProp?.x || "center",
+			...others
+		} };
+	}, [
+		colorScale,
+		direction,
+		max,
+		min,
+		others,
+		pieces,
+		positionProp?.x,
+		positionProp?.y,
+		show,
+		type
+	]);
 };
+//#endregion
+export { useVisualMap };

package/dist/hooks/useXAxis.js

@@ -1,64 +1,45 @@
+import { getAxisType } from "../utils/index.js";
 import { useMemo } from "react";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
-import { getAxisType } from "../utils/index.js";
-const useXAxis = ({
-  id,
-  type = "categorical",
-  labelFormatter,
-  labelRotation,
-  name,
-  maxValue,
-  minValue,
-  scale = false,
-  data,
-  position,
-  nameProps
-}) => {
-  const { colors } = useTheme();
-  const option = useMemo(() => {
-    const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
-    const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
-      acc[curr] = curr === "color" && colors?.[nameProps[curr]] || nameProps[curr];
-      return acc;
-    }, {}) : void 0;
-    return {
-      xAxis: {
-        id,
-        type: getAxisType(type),
-        name,
-        scale,
-        axisLabel: {
-          rotate: labelRotation ?? 0,
-          formatter: labelFormatter
-        },
-        max: maxValue === "max" ? "dataMax" : maxValue,
-        min: minValue === "min" ? "dataMin" : minValue,
-        ...nameProps?.location && {
-          nameLocation: nameProps.location
-        },
-        ...nameStyle && {
-          nameTextStyle: nameStyle
-        },
-        ...data && { data },
-        ...position && { position }
-      }
-    };
-  }, [
-    nameProps,
-    id,
-    type,
-    name,
-    scale,
-    labelRotation,
-    labelFormatter,
-    maxValue,
-    minValue,
-    data,
-    position,
-    colors
-  ]);
-  return option;
-};
-export {
-  useXAxis
+//#region src/hooks/useXAxis.tsx
+var useXAxis = ({ id, type = "categorical", labelFormatter, labelRotation, name, maxValue, minValue, scale = false, data, position, nameProps }) => {
+	const { colors } = useTheme();
+	return useMemo(() => {
+		const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
+		const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
+			acc[curr] = curr === "color" && colors?.[nameProps[curr]] || nameProps[curr];
+			return acc;
+		}, {}) : void 0;
+		return { xAxis: {
+			id,
+			type: getAxisType(type),
+			name,
+			scale,
+			axisLabel: {
+				rotate: labelRotation ?? 0,
+				formatter: labelFormatter
+			},
+			max: maxValue === "max" ? "dataMax" : maxValue,
+			min: minValue === "min" ? "dataMin" : minValue,
+			...nameProps?.location && { nameLocation: nameProps.location },
+			...nameStyle && { nameTextStyle: nameStyle },
+			...data && { data },
+			...position && { position }
+		} };
+	}, [
+		nameProps,
+		id,
+		type,
+		name,
+		scale,
+		labelRotation,
+		labelFormatter,
+		maxValue,
+		minValue,
+		data,
+		position,
+		colors
+	]);
 };
+//#endregion
+export { useXAxis };

package/dist/hooks/useYAxis.js

@@ -1,58 +1,34 @@
+import { getAxisType } from "../utils/index.js";
 import { useCallback, useMemo } from "react";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
-import { getAxisType } from "../utils/index.js";
-const useYAxis = ({
-  axes,
-  defaultType = "continuous"
-}) => {
-  const { colors } = useTheme();
-  const createAxis = useCallback(
-    ({
-      id,
-      type,
-      name,
-      labelFormatter,
-      labelRotation,
-      maxValue,
-      minValue,
-      nameProps,
-      data,
-      position
-    }) => {
-      const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
-      const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
-        acc[curr] = curr === "color" && colors?.[nameProps[curr]] || nameProps[curr];
-        return acc;
-      }, {}) : void 0;
-      return {
-        id,
-        type: getAxisType(type) ?? getAxisType(defaultType),
-        name,
-        axisLabel: {
-          rotate: labelRotation ?? 0,
-          formatter: labelFormatter
-        },
-        max: maxValue === "max" ? "dataMax" : maxValue,
-        min: minValue === "min" ? "dataMin" : minValue,
-        ...nameProps?.location && {
-          nameLocation: nameProps?.location
-        },
-        ...nameStyle && {
-          nameTextStyle: nameStyle
-        },
-        ...data && { data },
-        ...position && { position }
-      };
-    },
-    [colors, defaultType]
-  );
-  const option = useMemo(() => {
-    return {
-      yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : [createAxis({})]
-    };
-  }, [axes, createAxis]);
-  return option;
-};
-export {
-  useYAxis
+//#region src/hooks/useYAxis.tsx
+var useYAxis = ({ axes, defaultType = "continuous" }) => {
+	const { colors } = useTheme();
+	const createAxis = useCallback(({ id, type, name, labelFormatter, labelRotation, maxValue, minValue, nameProps, data, position }) => {
+		const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
+		const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
+			acc[curr] = curr === "color" && colors?.[nameProps[curr]] || nameProps[curr];
+			return acc;
+		}, {}) : void 0;
+		return {
+			id,
+			type: getAxisType(type) ?? getAxisType(defaultType),
+			name,
+			axisLabel: {
+				rotate: labelRotation ?? 0,
+				formatter: labelFormatter
+			},
+			max: maxValue === "max" ? "dataMax" : maxValue,
+			min: minValue === "min" ? "dataMin" : minValue,
+			...nameProps?.location && { nameLocation: nameProps?.location },
+			...nameStyle && { nameTextStyle: nameStyle },
+			...data && { data },
+			...position && { position }
+		};
+	}, [colors, defaultType]);
+	return useMemo(() => {
+		return { yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : [createAxis({})] };
+	}, [axes, createAxis]);
 };
+//#endregion
+export { useYAxis };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { HvVizContext, HvVizProvider, useVizTheme } from "./providers/Provider.js";
+import { HvBaseChart } from "./BaseChart/BaseChart.js";
 import { getHvArqueroCombinedFilters } from "./utils/index.js";
 import { HvBarChart } from "./BarChart/BarChart.js";
-import { HvBaseChart } from "./BaseChart/BaseChart.js";
 import { HvBoxplot } from "./Boxplot/Boxplot.js";
 import { HvConfusionMatrix } from "./ConfusionMatrix/ConfusionMatrix.js";
 import { HvDonutChart } from "./DonutChart/DonutChart.js";
@@ -9,18 +9,4 @@ import { HvHeatmap } from "./Heatmap/Heatmap.js";
 import { HvLineChart } from "./LineChart/LineChart.js";
 import { HvScatterPlot } from "./ScatterPlot/ScatterPlot.js";
 import { HvTreemapChart } from "./Treemap/Treemap.js";
-export {
-  HvBarChart,
-  HvBaseChart,
-  HvBoxplot,
-  HvConfusionMatrix,
-  HvDonutChart,
-  HvHeatmap,
-  HvLineChart,
-  HvScatterPlot,
-  HvTreemapChart,
-  HvVizContext,
-  HvVizProvider,
-  getHvArqueroCombinedFilters,
-  useVizTheme
-};
+export { HvBarChart, HvBaseChart, HvBoxplot, HvConfusionMatrix, HvDonutChart, HvHeatmap, HvLineChart, HvScatterPlot, HvTreemapChart, HvVizContext, HvVizProvider, getHvArqueroCombinedFilters, useVizTheme };