@hitachivantara/uikit-react-viz 6.1.6 → 6.1.8

package/dist/ScatterPlot/ScatterPlot.js

@@ -1,110 +1,88 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { ScatterChart } from "echarts/charts";
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent, MarkLineComponent } from "echarts/components";
-import * as echarts from "echarts/core";
-import { useData } from "../hooks/useData.js";
-import { useDataset } from "../hooks/useDataset.js";
-import { useYAxis } from "../hooks/useYAxis.js";
-import { useXAxis } from "../hooks/useXAxis.js";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
 import { useDataZoom } from "../hooks/useDataZoom.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 { 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 { useOption } from "../hooks/useOption.js";
-import { HvBaseChart } from "../BaseChart/BaseChart.js";
+import { forwardRef } from "react";
+import { DataZoomInsideComponent, DataZoomSliderComponent, DatasetComponent, GridComponent, LegendComponent, MarkLineComponent, TooltipComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { jsx } from "react/jsx-runtime";
+import { ScatterChart } from "echarts/charts";
+//#region src/ScatterPlot/ScatterPlot.tsx
 echarts.use([
-  ScatterChart,
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  DataZoomSliderComponent,
-  DataZoomInsideComponent,
-  MarkLineComponent
+	ScatterChart,
+	DatasetComponent,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent,
+	DataZoomSliderComponent,
+	DataZoomInsideComponent,
+	MarkLineComponent
 ]);
-const HvScatterPlot = forwardRef(
-  function HvScatterPlot2(props, ref) {
-    const {
-      yAxis,
-      xAxis,
-      horizontalRangeSlider,
-      grid,
-      data,
-      groupBy,
-      splitBy,
-      sortBy,
-      filters,
-      measures,
-      seriesNameFormatter,
-      legend,
-      classes,
-      tooltip,
-      width,
-      height,
-      onOptionChange,
-      ...others
-    } = props;
-    const { data: chartData, mapping: measuresMapping } = useData({
-      data,
-      groupBy,
-      measures,
-      splitBy,
-      sortBy,
-      filters
-    });
-    const chartDataset = useDataset(chartData);
-    const chartYAxis = useYAxis({
-      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]
-    });
-    const chartXAxis = useXAxis({ type: "continuous", ...xAxis });
-    const chartSlider = useDataZoom({
-      showHorizontal: horizontalRangeSlider?.show
-    });
-    const chartGrid = useGrid({ ...grid });
-    const chartSeries = useSeries({
-      type: "scatter",
-      data: chartData,
-      groupBy,
-      measuresMapping,
-      nameFormatter: seriesNameFormatter
-    });
-    const chartLegend = useLegend({
-      ...legend,
-      series: chartSeries.series
-    });
-    const chartTooltip = useTooltip({
-      ...tooltip,
-      trigger: "axis",
-      measuresMapping,
-      classes
-    });
-    const option = useOption({
-      option: {
-        ...chartYAxis,
-        ...chartXAxis,
-        ...chartSlider,
-        ...chartGrid,
-        ...chartDataset,
-        ...chartSeries,
-        ...chartLegend,
-        ...chartTooltip
-      },
-      onOptionChange
-    });
-    return /* @__PURE__ */ jsx(
-      HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvScatterPlot
-};
+/**
+* A scatter plot is a type of chart which displays dots to represent two numeric variables.
+* This type of chart is used to determine the relationship between two variables.
+*/
+var HvScatterPlot = forwardRef(function HvScatterPlot(props, ref) {
+	const { yAxis, xAxis, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, filters, measures, seriesNameFormatter, legend, classes, tooltip, width, height, onOptionChange, ...others } = props;
+	const { data: chartData, mapping: measuresMapping } = useData({
+		data,
+		groupBy,
+		measures,
+		splitBy,
+		sortBy,
+		filters
+	});
+	const chartDataset = useDataset(chartData);
+	const chartYAxis = useYAxis({ axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis] });
+	const chartXAxis = useXAxis({
+		type: "continuous",
+		...xAxis
+	});
+	const chartSlider = useDataZoom({ showHorizontal: horizontalRangeSlider?.show });
+	const chartGrid = useGrid({ ...grid });
+	const chartSeries = useSeries({
+		type: "scatter",
+		data: chartData,
+		groupBy,
+		measuresMapping,
+		nameFormatter: seriesNameFormatter
+	});
+	const chartLegend = useLegend({
+		...legend,
+		series: chartSeries.series
+	});
+	const chartTooltip = useTooltip({
+		...tooltip,
+		trigger: "axis",
+		measuresMapping,
+		classes
+	});
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({
+			option: {
+				...chartYAxis,
+				...chartXAxis,
+				...chartSlider,
+				...chartGrid,
+				...chartDataset,
+				...chartSeries,
+				...chartLegend,
+				...chartTooltip
+			},
+			onOptionChange
+		}),
+		width,
+		height,
+		...others
+	});
+});
+//#endregion
+export { HvScatterPlot };

package/dist/Treemap/Treemap.js

@@ -1,54 +1,40 @@
-import { jsx } from "react/jsx-runtime";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
+import { useTooltip } from "../hooks/tooltip/useTooltip.js";
+import { useOption } from "../hooks/useOption.js";
 import { forwardRef } from "react";
-import { TreemapChart } from "echarts/charts";
 import { TooltipComponent } from "echarts/components";
 import * as echarts from "echarts/core";
-import { useTooltip } from "../hooks/tooltip/useTooltip.js";
-import { useOption } from "../hooks/useOption.js";
-import { HvBaseChart } from "../BaseChart/BaseChart.js";
+import { jsx } from "react/jsx-runtime";
+import { TreemapChart } from "echarts/charts";
+//#region src/Treemap/Treemap.tsx
 echarts.use([TreemapChart, TooltipComponent]);
-const HvTreemapChart = forwardRef(
-  function HvTreemapChart2(props, ref) {
-    const {
-      name,
-      data,
-      classes,
-      width,
-      height,
-      tooltip,
-      onOptionChange,
-      ...others
-    } = props;
-    const chartTooltip = useTooltip({
-      ...tooltip,
-      type: "single",
-      classes
-    });
-    const option = useOption({
-      option: {
-        series: [
-          {
-            name,
-            type: "treemap",
-            data
-          }
-        ],
-        ...chartTooltip
-      },
-      onOptionChange
-    });
-    return /* @__PURE__ */ jsx(
-      HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvTreemapChart
-};
+/**
+* A tree map chart visually represents hierarchical data using nested rectangles, with each rectangle's size proportional to the value it represents.
+*/
+var HvTreemapChart = forwardRef(function HvTreemapChart(props, ref) {
+	const { name, data, classes, width, height, tooltip, onOptionChange, ...others } = props;
+	const chartTooltip = useTooltip({
+		...tooltip,
+		type: "single",
+		classes
+	});
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({
+			option: {
+				series: [{
+					name,
+					type: "treemap",
+					data
+				}],
+				...chartTooltip
+			},
+			onOptionChange
+		}),
+		width,
+		height,
+		...others
+	});
+});
+//#endregion
+export { HvTreemapChart };

package/dist/hooks/tooltip/styles.js

@@ -1,80 +1,79 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { useClasses, staticClasses } = createClasses("HvChartTooltip", {
-  /** Single tooltip styles */
-  singleTooltipRoot: {
-    width: "fit-content",
-    boxShadow: theme.colors.shadow,
-    backgroundColor: theme.colors.bgContainer,
-    padding: theme.space.sm,
-    display: "flex"
-  },
-  singleTooltipTitle: {
-    fontFamily: theme.fontFamily.body,
-    fontWeight: theme.fontWeights.semibold,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.text
-  },
-  singleTooltipValue: {
-    fontFamily: theme.fontFamily.body,
-    fontWeight: theme.fontWeights.normal,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.text,
-    marginLeft: theme.space.xs
-  },
-  /** Multiple tooltip styles */
-  multipleTooltipRoot: {
-    width: "fit-content",
-    boxShadow: theme.colors.shadow,
-    backgroundColor: theme.colors.bgContainer
-  },
-  multipleTooltipTitleContainer: {
-    padding: `15px ${theme.space.sm}`,
-    borderBottom: `3px solid ${theme.colors.bgPage}`
-  },
-  multipleTooltipTitle: {
-    fontFamily: theme.fontFamily.body,
-    fontWeight: theme.fontWeights.semibold,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.text
-  },
-  multipleTooltipValuesContainer: {
-    display: "flex",
-    flexDirection: "column",
-    padding: theme.space.sm,
-    "& > *:not(:last-child)": { paddingBottom: theme.space.sm }
-  },
-  multipleTooltipSeriesContainer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center"
-  },
-  multipleTooltipSeriesNameContainer: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    marginRight: theme.space.sm
-  },
-  multipleTooltipSeriesColor: {
-    width: "10px",
-    height: "10px",
-    marginRight: "5px"
-  },
-  multipleTooltipSeriesName: {
-    fontFamily: theme.fontFamily.body,
-    fontWeight: theme.fontWeights.semibold,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.text
-  },
-  multipleTooltipSeriesValue: {
-    fontFamily: theme.fontFamily.body,
-    fontWeight: theme.fontWeights.normal,
-    fontSize: theme.fontSizes.sm,
-    color: theme.colors.text
-  }
+//#region src/hooks/tooltip/styles.tsx
+var { useClasses, staticClasses } = createClasses("HvChartTooltip", {
+	/** Single tooltip styles */
+	singleTooltipRoot: {
+		width: "fit-content",
+		boxShadow: theme.colors.shadow,
+		backgroundColor: theme.colors.bgContainer,
+		padding: theme.space.sm,
+		display: "flex"
+	},
+	singleTooltipTitle: {
+		fontFamily: theme.fontFamily.body,
+		fontWeight: theme.fontWeights.semibold,
+		fontSize: theme.fontSizes.sm,
+		color: theme.colors.text
+	},
+	singleTooltipValue: {
+		fontFamily: theme.fontFamily.body,
+		fontWeight: theme.fontWeights.normal,
+		fontSize: theme.fontSizes.sm,
+		color: theme.colors.text,
+		marginLeft: theme.space.xs
+	},
+	/** Multiple tooltip styles */
+	multipleTooltipRoot: {
+		width: "fit-content",
+		boxShadow: theme.colors.shadow,
+		backgroundColor: theme.colors.bgContainer
+	},
+	multipleTooltipTitleContainer: {
+		padding: `15px ${theme.space.sm}`,
+		borderBottom: `3px solid ${theme.colors.bgPage}`
+	},
+	multipleTooltipTitle: {
+		fontFamily: theme.fontFamily.body,
+		fontWeight: theme.fontWeights.semibold,
+		fontSize: theme.fontSizes.sm,
+		color: theme.colors.text
+	},
+	multipleTooltipValuesContainer: {
+		display: "flex",
+		flexDirection: "column",
+		padding: theme.space.sm,
+		"& > *:not(:last-child)": { paddingBottom: theme.space.sm }
+	},
+	multipleTooltipSeriesContainer: {
+		display: "flex",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		alignItems: "center"
+	},
+	multipleTooltipSeriesNameContainer: {
+		display: "flex",
+		flexDirection: "row",
+		alignItems: "center",
+		marginRight: theme.space.sm
+	},
+	multipleTooltipSeriesColor: {
+		width: "10px",
+		height: "10px",
+		marginRight: "5px"
+	},
+	multipleTooltipSeriesName: {
+		fontFamily: theme.fontFamily.body,
+		fontWeight: theme.fontWeights.semibold,
+		fontSize: theme.fontSizes.sm,
+		color: theme.colors.text
+	},
+	multipleTooltipSeriesValue: {
+		fontFamily: theme.fontFamily.body,
+		fontWeight: theme.fontWeights.normal,
+		fontSize: theme.fontSizes.sm,
+		color: theme.colors.text
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/hooks/tooltip/useTooltip.js

@@ -1,38 +1,24 @@
-import { useCallback, useMemo } from "react";
 import { getMeasure } from "../../utils/index.js";
 import { useClasses } from "./styles.js";
-const useTooltip = ({
-  measuresMapping = {},
-  classes,
-  component,
-  show = true,
-  horizontal = false,
-  trigger = "item",
-  type = "multiple",
-  valueFormatter,
-  titleFormatter,
-  nameFormatter
-}) => {
-  const { classes: hvClasses } = useClasses(classes);
-  const renderTooltip = useCallback(
-    (params) => {
-      const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
-      const formattedTitle = titleFormatter ? titleFormatter(title) : title;
-      if (type === "single") {
-        const measure = getMeasure(
-          params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
-          measuresMapping
-        );
-        const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
-        const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
-        return `
+import { useCallback, useMemo } from "react";
+//#region src/hooks/tooltip/useTooltip.tsx
+var useTooltip = ({ measuresMapping = {}, classes, component, show = true, horizontal = false, trigger = "item", type = "multiple", valueFormatter, titleFormatter, nameFormatter }) => {
+	const { classes: hvClasses } = useClasses(classes);
+	const renderTooltip = useCallback((params) => {
+		const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
+		const formattedTitle = titleFormatter ? titleFormatter(title) : title;
+		if (type === "single") {
+			const measure = getMeasure(params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]], measuresMapping);
+			const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
+			const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+			return `
             <div class="${hvClasses?.singleTooltipRoot}">
               <p class="${hvClasses?.singleTooltipTitle}">${formattedTitle}</p>
               <p class="${hvClasses?.singleTooltipValue}">${formattedValue}</p>
             </div>
             `;
-      }
-      return `
+		}
+		return `
         <div class="${hvClasses?.multipleTooltipRoot}">
           <div class="${hvClasses?.multipleTooltipTitleContainer}">
             <div>
@@ -41,15 +27,12 @@ const useTooltip = ({
           </div>
           <div class="${hvClasses?.multipleTooltipValuesContainer}">
             ${params.map((s) => {
-        const measure = getMeasure(
-          s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]],
-          measuresMapping
-        );
-        const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
-        const formattedValue = typeof measure !== "string" && measure?.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
-        const name = s.seriesType === "pie" ? s.name : s.seriesName;
-        const formattedName = nameFormatter ? nameFormatter(name) : name;
-        return `
+			const measure = getMeasure(s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]], measuresMapping);
+			const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
+			const formattedValue = typeof measure !== "string" && measure?.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+			const name = s.seriesType === "pie" ? s.name : s.seriesName;
+			const formattedName = nameFormatter ? nameFormatter(name) : name;
+			return `
                 <div key="${s.seriesName}" class="${hvClasses?.multipleTooltipSeriesContainer}">
                   <div class="${hvClasses?.multipleTooltipSeriesNameContainer}">
                     <p style="background-color: ${s.color};" class="${hvClasses?.multipleTooltipSeriesColor}" />
@@ -58,59 +41,53 @@ const useTooltip = ({
                   <p class="${hvClasses?.multipleTooltipSeriesValue}">${formattedValue}</p>
                 </div>
               `;
-      }).join(" ")}
+		}).join(" ")}
           </div>
         </div>
         `;
-    },
-    [
-      hvClasses,
-      horizontal,
-      type,
-      measuresMapping,
-      nameFormatter,
-      titleFormatter,
-      valueFormatter
-    ]
-  );
-  const renderCustomTooltip = useCallback(
-    (params) => {
-      if (typeof component === "function") {
-        const values = {
-          title: params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
-          series: params.map((p) => {
-            return {
-              color: p.color,
-              name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
-              value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
-            };
-          }),
-          value: params[0].value
-        };
-        return component(values);
-      }
-      return component;
-    },
-    [component, horizontal]
-  );
-  const option = useMemo(() => {
-    return {
-      tooltip: {
-        confine: false,
-        show,
-        trigger,
-        position: (point, params, dom, rect, size) => {
-          return [point[0], point[1] - size.contentSize[1]];
-        },
-        formatter: (params) => {
-          const tooltipParams = Array.isArray(params) ? params : [params];
-          return component ? renderCustomTooltip(tooltipParams) : renderTooltip(tooltipParams);
-        }
-      }
-    };
-  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);
-  return option;
-};
-export {
-  useTooltip
+	}, [
+		hvClasses,
+		horizontal,
+		type,
+		measuresMapping,
+		nameFormatter,
+		titleFormatter,
+		valueFormatter
+	]);
+	const renderCustomTooltip = useCallback((params) => {
+		if (typeof component === "function") return component({
+			title: params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
+			series: params.map((p) => {
+				return {
+					color: p.color,
+					name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
+					value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
+				};
+			}),
+			value: params[0].value
+		});
+		return component;
+	}, [component, horizontal]);
+	return useMemo(() => {
+		return { tooltip: {
+			confine: false,
+			show,
+			trigger,
+			position: (point, params, dom, rect, size) => {
+				return [point[0], point[1] - size.contentSize[1]];
+			},
+			formatter: (params) => {
+				const tooltipParams = Array.isArray(params) ? params : [params];
+				return component ? renderCustomTooltip(tooltipParams) : renderTooltip(tooltipParams);
+			}
+		} };
+	}, [
+		trigger,
+		component,
+		show,
+		renderTooltip,
+		renderCustomTooltip
+	]);
 };
+//#endregion
+export { useTooltip };