@hitachivantara/uikit-react-viz 6.1.6 → 6.1.7

package/dist/LineChart/LineChart.js

@@ -1,118 +1,92 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { LineChart } 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 { LineChart } from "echarts/charts";
+//#region src/LineChart/LineChart.tsx
 echarts.use([
-  LineChart,
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  DataZoomSliderComponent,
-  DataZoomInsideComponent,
-  MarkLineComponent
+	LineChart,
+	DatasetComponent,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent,
+	DataZoomSliderComponent,
+	DataZoomInsideComponent,
+	MarkLineComponent
 ]);
-const HvLineChart = forwardRef(
-  function HvLineChart2(props, ref) {
-    const {
-      area = false,
-      emptyCellMode = "void",
-      areaOpacity = 0.5,
-      yAxis,
-      xAxis,
-      horizontalRangeSlider,
-      grid,
-      data,
-      groupBy,
-      splitBy,
-      sortBy,
-      filters,
-      measures,
-      stack,
-      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({ ...xAxis, scale: true });
-    const chartSlider = useDataZoom({
-      showHorizontal: horizontalRangeSlider?.show
-    });
-    const chartGrid = useGrid({ ...grid });
-    const chartSeries = useSeries({
-      type: "line",
-      data: chartData,
-      groupBy,
-      measuresMapping,
-      area,
-      areaOpacity,
-      emptyCellMode,
-      stack,
-      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 {
-  HvLineChart
-};
+/**
+* A line chart or line plot or line graph is a type of chart which displays information as a series of data points
+* connected by straight line segments.
+*/
+var HvLineChart = forwardRef(function HvLineChart(props, ref) {
+	const { area = false, emptyCellMode = "void", areaOpacity = .5, yAxis, xAxis, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, filters, measures, stack, 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({
+		...xAxis,
+		scale: true
+	});
+	const chartSlider = useDataZoom({ showHorizontal: horizontalRangeSlider?.show });
+	const chartGrid = useGrid({ ...grid });
+	const chartSeries = useSeries({
+		type: "line",
+		data: chartData,
+		groupBy,
+		measuresMapping,
+		area,
+		areaOpacity,
+		emptyCellMode,
+		stack,
+		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 { HvLineChart };

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