@hitachivantara/uikit-react-viz 6.1.6 → 6.1.8

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

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