@hitachivantara/uikit-react-viz 6.1.5 → 6.1.7

package/dist/BarChart/BarChart.js

@@ -1,120 +1,94 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { BarChart } 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 { BarChart } from "echarts/charts";
+//#region src/BarChart/BarChart.tsx
 echarts.use([
-  BarChart,
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  DataZoomSliderComponent,
-  DataZoomInsideComponent,
-  MarkLineComponent
+	BarChart,
+	DatasetComponent,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent,
+	DataZoomSliderComponent,
+	DataZoomInsideComponent,
+	MarkLineComponent
 ]);
-const HvBarChart = forwardRef(
-  function HvBarChart2(props, ref) {
-    const {
-      yAxis,
-      xAxis,
-      horizontal = false,
-      horizontalRangeSlider,
-      grid,
-      data,
-      groupBy,
-      splitBy,
-      sortBy,
-      filters,
-      stack,
-      seriesNameFormatter,
-      measures,
-      legend,
-      tooltip,
-      classes,
-      height,
-      width,
-      onOptionChange,
-      ...others
-    } = props;
-    const { data: chartData, mapping: measuresMapping } = useData({
-      data,
-      groupBy,
-      sortBy,
-      splitBy,
-      measures,
-      filters
-    });
-    const chartDataset = useDataset(chartData);
-    const chartYAxis = useYAxis({
-      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
-      defaultType: horizontal ? "categorical" : "continuous"
-    });
-    const chartXAxis = useXAxis({
-      type: horizontal ? "continuous" : "categorical",
-      ...xAxis
-    });
-    const chartSlider = useDataZoom({
-      showHorizontal: horizontalRangeSlider?.show
-    });
-    const chartGrid = useGrid({ ...grid });
-    const chartSeries = useSeries({
-      type: "bar",
-      data: chartData,
-      groupBy,
-      measuresMapping,
-      stack,
-      nameFormatter: seriesNameFormatter,
-      horizontal
-    });
-    const chartLegend = useLegend({
-      ...legend,
-      series: chartSeries.series,
-      icon: "square"
-    });
-    const chartTooltip = useTooltip({
-      ...tooltip,
-      trigger: "axis",
-      measuresMapping,
-      classes,
-      horizontal
-    });
-    const option = useOption({
-      option: {
-        ...chartYAxis,
-        ...chartXAxis,
-        ...chartSlider,
-        ...chartGrid,
-        ...chartDataset,
-        ...chartSeries,
-        ...chartLegend,
-        ...chartTooltip
-      },
-      onOptionChange
-    });
-    return /* @__PURE__ */ jsx(
-      HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvBarChart
-};
+/**
+* A bar chart is a chart or graph that presents categorical data with rectangular bars.
+*/
+var HvBarChart = forwardRef(function HvBarChart(props, ref) {
+	const { yAxis, xAxis, horizontal = false, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, filters, stack, seriesNameFormatter, measures, legend, tooltip, classes, height, width, onOptionChange, ...others } = props;
+	const { data: chartData, mapping: measuresMapping } = useData({
+		data,
+		groupBy,
+		sortBy,
+		splitBy,
+		measures,
+		filters
+	});
+	const chartDataset = useDataset(chartData);
+	const chartYAxis = useYAxis({
+		axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
+		defaultType: horizontal ? "categorical" : "continuous"
+	});
+	const chartXAxis = useXAxis({
+		type: horizontal ? "continuous" : "categorical",
+		...xAxis
+	});
+	const chartSlider = useDataZoom({ showHorizontal: horizontalRangeSlider?.show });
+	const chartGrid = useGrid({ ...grid });
+	const chartSeries = useSeries({
+		type: "bar",
+		data: chartData,
+		groupBy,
+		measuresMapping,
+		stack,
+		nameFormatter: seriesNameFormatter,
+		horizontal
+	});
+	const chartLegend = useLegend({
+		...legend,
+		series: chartSeries.series,
+		icon: "square"
+	});
+	const chartTooltip = useTooltip({
+		...tooltip,
+		trigger: "axis",
+		measuresMapping,
+		classes,
+		horizontal
+	});
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({
+			option: {
+				...chartYAxis,
+				...chartXAxis,
+				...chartSlider,
+				...chartGrid,
+				...chartDataset,
+				...chartSeries,
+				...chartLegend,
+				...chartTooltip
+			},
+			onOptionChange
+		}),
+		width,
+		height,
+		...others
+	});
+});
+//#endregion
+export { HvBarChart };

package/dist/BaseChart/BaseChart.js

@@ -1,57 +1,59 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useEffect } from "react";
+import { useVizTheme } from "../providers/Provider.js";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { useForkRef } from "@mui/material/utils";
 import ReactECharts from "echarts-for-react";
 import { AriaComponent } from "echarts/components";
 import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
-import { useVizTheme } from "../providers/Provider.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/BaseChart/BaseChart.tsx
 echarts.use([CanvasRenderer, AriaComponent]);
-const HvBaseChart = forwardRef(
-  function HvBaseChart2(props, ref) {
-    const { option, width, height, onEvents, ...others } = props;
-    const { theme, activeTheme } = useVizTheme();
-    const currentTheme = useRef(theme);
-    const chartRef = useRef(null);
-    const forkedRef = useForkRef(ref, chartRef);
-    const [initialOption, setInitialOption] = useState(option);
-    useEffect(() => {
-      const instance = chartRef.current?.getEchartsInstance();
-      if (!instance) return;
-      return () => {
-        instance.dispose();
-      };
-    }, [activeTheme]);
-    useEffect(() => {
-      if (theme !== currentTheme.current) {
-        setInitialOption(option);
-        currentTheme.current = theme;
-        return;
-      }
-      const instance = chartRef.current?.getEchartsInstance();
-      if (!instance) return;
-      instance.setOption(option, {
-        replaceMerge: ["xAxis", "yAxis", "series", "dataset", "dataZoom"]
-      });
-    }, [theme, option]);
-    return /* @__PURE__ */ jsx(
-      ReactECharts,
-      {
-        ref: forkedRef,
-        echarts,
-        option: initialOption,
-        theme,
-        notMerge: true,
-        style: {
-          width: width ?? "100%",
-          height: height ?? "100%"
-        },
-        onEvents,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvBaseChart
-};
+/**
+* Base chart.
+*/
+var HvBaseChart = forwardRef(function HvBaseChart(props, ref) {
+	const { option, width, height, onEvents, ...others } = props;
+	const { theme, activeTheme } = useVizTheme();
+	const currentTheme = useRef(theme);
+	const chartRef = useRef(null);
+	const forkedRef = useForkRef(ref, chartRef);
+	const [initialOption, setInitialOption] = useState(option);
+	useEffect(() => {
+		const instance = chartRef.current?.getEchartsInstance();
+		if (!instance) return;
+		return () => {
+			instance.dispose();
+		};
+	}, [activeTheme]);
+	useEffect(() => {
+		if (theme !== currentTheme.current) {
+			setInitialOption(option);
+			currentTheme.current = theme;
+			return;
+		}
+		const instance = chartRef.current?.getEchartsInstance();
+		if (!instance) return;
+		instance.setOption(option, { replaceMerge: [
+			"xAxis",
+			"yAxis",
+			"series",
+			"dataset",
+			"dataZoom"
+		] });
+	}, [theme, option]);
+	return /* @__PURE__ */ jsx(ReactECharts, {
+		ref: forkedRef,
+		echarts,
+		option: initialOption,
+		theme,
+		notMerge: true,
+		style: {
+			width: width ?? "100%",
+			height: height ?? "100%"
+		},
+		onEvents,
+		...others
+	});
+});
+//#endregion
+export { HvBaseChart };

package/dist/Boxplot/Boxplot.js

@@ -1,47 +1,38 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { BoxplotChart } from "echarts/charts";
-import { TooltipComponent, VisualMapComponent } from "echarts/components";
-import * as echarts from "echarts/core";
-import { useClasses } from "./Boxplot.styles.js";
-import { useBoxplot } from "./useBoxplot.js";
-import { useTooltip } from "../hooks/tooltip/useTooltip.js";
-import { useGrid } from "../hooks/useGrid.js";
-import { useLegend } from "../hooks/useLegend.js";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
 import { useXAxis } from "../hooks/useXAxis.js";
 import { useYAxis } from "../hooks/useYAxis.js";
+import { useGrid } from "../hooks/useGrid.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";
-echarts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);
-const HvBoxplot = forwardRef(
-  function HvBoxplot2(props, ref) {
-    const {
-      name,
-      data,
-      xAxis,
-      yAxis,
-      grid,
-      legend,
-      measures,
-      groupBy,
-      tooltip,
-      width,
-      height,
-      filters,
-      classes: classesProp,
-      onOptionChange,
-      ...others
-    } = props;
-    const { classes } = useClasses(classesProp);
-    const chartTooltip = useTooltip({
-      component: (params) => {
-        const title = params?.title;
-        const upper = params?.value?.[5];
-        const q3 = params?.value?.[4];
-        const median = params?.value?.[3];
-        const q1 = params?.value?.[2];
-        const lower = params?.value?.[1];
-        return `
+import { useClasses } from "./Boxplot.styles.js";
+import { useBoxplot } from "./useBoxplot.js";
+import { forwardRef } from "react";
+import { TooltipComponent, VisualMapComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { jsx } from "react/jsx-runtime";
+import { BoxplotChart } from "echarts/charts";
+//#region src/Boxplot/Boxplot.tsx
+echarts.use([
+	BoxplotChart,
+	TooltipComponent,
+	VisualMapComponent
+]);
+/**
+* A Boxplot chart visually summarizes the distribution of a dataset by depicting key statistical measures such as the median, quartiles, and outliers.
+*/
+var HvBoxplot = forwardRef(function HvBoxplot(props, ref) {
+	const { name, data, xAxis, yAxis, grid, legend, measures, groupBy, tooltip, width, height, filters, classes: classesProp, onOptionChange, ...others } = props;
+	const { classes } = useClasses(classesProp);
+	const chartTooltip = useTooltip({
+		component: (params) => {
+			const title = params?.title;
+			const upper = params?.value?.[5];
+			const q3 = params?.value?.[4];
+			const median = params?.value?.[3];
+			const q1 = params?.value?.[2];
+			const lower = params?.value?.[1];
+			return `
           <div class="${classes.tooltipRoot}">
             <div class="${classes.tooltipContainer}">
               <div>
@@ -54,45 +45,39 @@ const HvBoxplot = forwardRef(
               </div>
             </div>
           </div>`;
-      },
-      ...tooltip
-    });
-    const chartGrid = useGrid({ ...grid });
-    const chartLegend = useLegend({
-      ...legend,
-      icon: "square"
-    });
-    const chartXAxis = useXAxis({
-      ...xAxis
-    });
-    const chartYAxis = useYAxis({
-      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
-      defaultType: "continuous",
-      ...yAxis
-    });
-    const chartBoxplot = useBoxplot({ data, groupBy, measures, filters });
-    const chartOption = useOption({
-      option: {
-        ...chartBoxplot,
-        ...chartGrid,
-        ...chartLegend,
-        ...chartTooltip,
-        ...chartXAxis,
-        ...chartYAxis
-      }
-    });
-    return /* @__PURE__ */ jsx(
-      HvBaseChart,
-      {
-        ref,
-        option: chartOption,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-export {
-  HvBoxplot
-};
+		},
+		...tooltip
+	});
+	const chartGrid = useGrid({ ...grid });
+	const chartLegend = useLegend({
+		...legend,
+		icon: "square"
+	});
+	const chartXAxis = useXAxis({ ...xAxis });
+	const chartYAxis = useYAxis({
+		axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
+		defaultType: "continuous",
+		...yAxis
+	});
+	return /* @__PURE__ */ jsx(HvBaseChart, {
+		ref,
+		option: useOption({ option: {
+			...useBoxplot({
+				data,
+				groupBy,
+				measures,
+				filters
+			}),
+			...chartGrid,
+			...chartLegend,
+			...chartTooltip,
+			...chartXAxis,
+			...chartYAxis
+		} }),
+		width,
+		height,
+		...others
+	});
+});
+//#endregion
+export { HvBoxplot };

package/dist/Boxplot/Boxplot.styles.js

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

package/dist/Boxplot/useBoxplot.js

@@ -1,72 +1,58 @@
-import { useMemo } from "react";
 import { useBoxplotData } from "./useBoxplotData.js";
-const useBoxplot = ({
-  data,
-  groupBy,
-  measures,
-  filters
-}) => {
-  const measuresFields = useMemo(() => {
-    if (measures == null) return {};
-    if (typeof measures === "string") return { [measures]: void 0 };
-    if (Array.isArray(measures)) {
-      return measures.reduce(
-        (acc, value) => {
-          const field = typeof value === "string" ? value : value.field;
-          acc[field] = typeof value === "string" ? void 0 : value.yAxis;
-          return acc;
-        },
-        {}
-      );
-    }
-    return { [measures.field]: measures.yAxis };
-  }, [measures]);
-  const chartData = useBoxplotData({
-    data,
-    groupBy,
-    measures: measuresFields,
-    filters
-  });
-  const boxplotData = useMemo(() => {
-    const setData = {};
-    Object.keys(measuresFields).forEach((m) => {
-      setData[m] = [];
-      Object.keys(chartData).forEach((key) => {
-        setData[m].push(chartData[key][m]);
-      });
-    });
-    const sources = [];
-    const transforms = [];
-    const series = [];
-    Object.keys(measuresFields).forEach((m, index) => {
-      sources.push({
-        source: setData[m],
-        id: m
-      });
-      transforms.push({
-        fromDatasetId: m,
-        transform: {
-          type: "boxplot",
-          config: {
-            itemNameFormatter: (params) => Object.keys(chartData)[params.value]
-          }
-        }
-      });
-      series.push({
-        name: m,
-        type: "boxplot",
-        datasetIndex: Object.keys(measuresFields).length + index,
-        yAxisId: measuresFields[m]
-      });
-    });
-    const datasets = {
-      dataset: [...sources, ...transforms],
-      series
-    };
-    return datasets;
-  }, [chartData, measuresFields]);
-  return boxplotData;
-};
-export {
-  useBoxplot
+import { useMemo } from "react";
+//#region src/Boxplot/useBoxplot.tsx
+var useBoxplot = ({ data, groupBy, measures, filters }) => {
+	const measuresFields = useMemo(() => {
+		if (measures == null) return {};
+		if (typeof measures === "string") return { [measures]: void 0 };
+		if (Array.isArray(measures)) return measures.reduce((acc, value) => {
+			const field = typeof value === "string" ? value : value.field;
+			acc[field] = typeof value === "string" ? void 0 : value.yAxis;
+			return acc;
+		}, {});
+		return { [measures.field]: measures.yAxis };
+	}, [measures]);
+	const chartData = useBoxplotData({
+		data,
+		groupBy,
+		measures: measuresFields,
+		filters
+	});
+	return useMemo(() => {
+		const setData = {};
+		Object.keys(measuresFields).forEach((m) => {
+			setData[m] = [];
+			Object.keys(chartData).forEach((key) => {
+				setData[m].push(chartData[key][m]);
+			});
+		});
+		const sources = [];
+		const transforms = [];
+		const series = [];
+		Object.keys(measuresFields).forEach((m, index) => {
+			sources.push({
+				source: setData[m],
+				id: m
+			});
+			transforms.push({
+				fromDatasetId: m,
+				transform: {
+					type: "boxplot",
+					config: { itemNameFormatter: (params) => Object.keys(chartData)[params.value] }
+				}
+			});
+			series.push({
+				name: m,
+				type: "boxplot",
+				datasetIndex: Object.keys(measuresFields).length + index,
+				yAxisId: measuresFields[m]
+			});
+		});
+		return {
+			dataset: [...sources, ...transforms],
+			series
+		};
+	}, [chartData, measuresFields]);
 };
+//#endregion
+export { useBoxplot };