npm - @hitachivantara/uikit-react-viz - Versions diffs - 5.1.1 → 5.2.0 - Mend

@hitachivantara/uikit-react-viz 5.1.1 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/dist/cjs/components/LineChart/LineChart.cjs CHANGED Viewed

@@ -1,397 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const components = require("echarts/components");
-const renderers = require("echarts/renderers");
-const echarts = require("echarts/core");
-const charts = require("echarts/charts");
-const ReactECharts = require("echarts-for-react");
-const arquero = require("arquero");
-const getAxisType = require("../../utils/getAxisType.cjs");
-const getAgFunc = require("../../utils/getAgFunc.cjs");
-const getLegendIcon = require("../../utils/getLegendIcon.cjs");
-const useVizTheme = require("../../hooks/useVizTheme.cjs");
-const LineChart_styles = require("./LineChart.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
-const ReactECharts__default = /* @__PURE__ */ _interopDefault(ReactECharts);
-echarts__namespace.use([charts.LineChart, renderers.CanvasRenderer, components.DatasetComponent, components.GridComponent, components.AriaComponent, components.TooltipComponent, components.LegendComponent, components.DataZoomSliderComponent, components.DataZoomInsideComponent]);
+const BaseChart = require("../BaseChart/BaseChart.cjs");
 const HvLineChart = ({
-  data,
-  groupBy,
-  splitBy,
-  measures,
-  sortBy,
-  xAxis,
-  yAxis,
-  legend,
-  tooltip,
-  seriesNameFormatter,
   area = false,
-  stack,
   emptyCellMode = "void",
-  horizontalRangeSlider,
   areaOpacity = 0.5,
-  classes: classesProp = {},
-  grid
+  ...others
 }) => {
-  const {
-    theme
-  } = useVizTheme.useVizTheme();
-  const {
-    classes
-  } = LineChart_styles.useClasses(classesProp);
-  const currentTheme = react.useRef(theme);
-  const chartRef = react.useRef(null);
-  const isMounted = react.useRef(false);
-  const groupByKey = Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
-  const chartData = react.useMemo(() => {
-    let tableData;
-    if (data instanceof arquero.internal.ColumnTable) {
-      tableData = data;
-    } else if (Array.isArray(data)) {
-      tableData = arquero.from(data);
-    } else {
-      tableData = arquero.table(data);
-    }
-    const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
-    const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
-    const measuresFields = measures == null ? {} : typeof measures === "string" ? {
-      [measures]: getAgFunc.getAgFunc("sum", measures)
-    } : Array.isArray(measures) ? measures.reduce((acc, value) => {
-      let field;
-      let agFunction;
-      if (typeof value === "string") {
-        field = value;
-        agFunction = "sum";
-      } else {
-        field = value.field;
-        agFunction = value.agg ?? "sum";
-      }
-      return {
-        ...acc,
-        [field]: getAgFunc.getAgFunc(agFunction, field)
-      };
-    }, {}) : {
-      [measures.field]: getAgFunc.getAgFunc(measures.agg ?? "sum", measures.field)
-    };
-    const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? {
-      [sortBy]: "asc"
-    } : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
-      let field;
-      let orderFunction;
-      if (typeof value === "string") {
-        field = value;
-        orderFunction = "asc";
-      } else {
-        field = value.field;
-        orderFunction = value.order ?? "asc";
-      }
-      return {
-        ...acc,
-        [field]: orderFunction
-      };
-    }, {}) : {
-      [sortBy.field]: sortBy.order ?? "asc"
-    };
-    const allFields = [...groupByFields, ...splitByFields, ...Object.keys(measuresFields)];
-    tableData = tableData.select(...allFields);
-    if (groupByFields.length > 0) {
-      tableData = tableData.groupby(groupByFields);
-    }
-    if (splitByFields.length > 0) {
-      tableData = tableData.pivot(splitByFields, measuresFields);
-    } else {
-      tableData = tableData.rollup(measuresFields);
-    }
-    if (groupByFields.length > 1) {
-      const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
-      tableData = tableData.derive({
-        [groupByKey]: expression
-      }, {
-        after: groupByFields[groupByFields.length - 1]
-      });
-    }
-    if (Object.keys(sortByFields).length > 0) {
-      tableData = tableData.orderby(...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? arquero.desc(key) : key));
-    }
-    if (groupByFields.length > 1) {
-      tableData = tableData.select(arquero.not(...groupByFields));
-    }
-    return tableData;
-  }, [data, groupBy, groupByKey, splitBy, measures, sortBy]);
-  const chartDataset = react.useMemo(() => {
-    return {
-      dataset: {
-        source: chartData.columnNames().reduce((acc, c) => ({
-          ...acc,
-          [c]: chartData.array(c)
-        }), {})
-      }
-    };
-  }, [chartData]);
-  const chartXAxis = react.useMemo(() => {
-    return {
-      xAxis: {
-        type: getAxisType.getAxisType(xAxis == null ? void 0 : xAxis.type) ?? "category",
-        name: xAxis == null ? void 0 : xAxis.name,
-        scale: true,
-        axisLabel: {
-          rotate: (xAxis == null ? void 0 : xAxis.labelRotation) ?? 0,
-          formatter: xAxis == null ? void 0 : xAxis.labelFormatter
-        },
-        max: (xAxis == null ? void 0 : xAxis.maxValue) === "max" ? "dataMax" : xAxis == null ? void 0 : xAxis.maxValue,
-        min: (xAxis == null ? void 0 : xAxis.minValue) === "min" ? "dataMin" : xAxis == null ? void 0 : xAxis.minValue
-      }
-    };
-  }, [xAxis == null ? void 0 : xAxis.labelFormatter, xAxis == null ? void 0 : xAxis.labelRotation, xAxis == null ? void 0 : xAxis.name, xAxis == null ? void 0 : xAxis.type, xAxis == null ? void 0 : xAxis.maxValue, xAxis == null ? void 0 : xAxis.minValue]);
-  const chartYAxis = react.useMemo(() => {
-    if (!yAxis || !Array.isArray(yAxis)) {
-      return {
-        yAxis: {
-          id: yAxis == null ? void 0 : yAxis.id,
-          type: getAxisType.getAxisType(yAxis == null ? void 0 : yAxis.type) ?? "value",
-          name: yAxis == null ? void 0 : yAxis.name,
-          axisLabel: {
-            rotate: (yAxis == null ? void 0 : yAxis.labelRotation) ?? 0,
-            formatter: yAxis == null ? void 0 : yAxis.labelFormatter
-          },
-          max: (yAxis == null ? void 0 : yAxis.maxValue) === "max" ? "dataMax" : yAxis == null ? void 0 : yAxis.maxValue,
-          min: (yAxis == null ? void 0 : yAxis.minValue) === "min" ? "dataMin" : yAxis == null ? void 0 : yAxis.minValue
-        }
-      };
-    }
-    return {
-      yAxis: yAxis.map((axis) => ({
-        id: axis == null ? void 0 : axis.id,
-        type: getAxisType.getAxisType(axis == null ? void 0 : axis.type) ?? "value",
-        name: axis == null ? void 0 : axis.name,
-        axisLabel: {
-          rotate: (axis == null ? void 0 : axis.labelRotation) ?? 0,
-          formatter: axis == null ? void 0 : axis.labelFormatter
-        },
-        max: (axis == null ? void 0 : axis.maxValue) === "max" ? "dataMax" : axis == null ? void 0 : axis.maxValue,
-        min: (axis == null ? void 0 : axis.minValue) === "min" ? "dataMin" : axis == null ? void 0 : axis.minValue
-      }))
-    };
-  }, [yAxis]);
-  const getMeasure = (name, msr) => {
-    const measureName = name.split("_")[0];
-    const measuresArray = Array.isArray(msr) ? msr : [msr];
-    return measuresArray.find((m) => {
-      if (typeof m === "string") {
-        return m === measureName;
-      }
-      return m.field === measureName;
-    }) ?? measuresArray[0];
-  };
-  const chartSeries = react.useMemo(() => {
-    return {
-      series: chartData.columnNames().filter((c) => c !== groupByKey).map((c) => {
-        const measure = getMeasure(c, measures);
-        const showSymbol = typeof measure !== "string" ? !measure.hideSymbol : true;
-        const sampling = typeof measure !== "string" ? measure.sampling : void 0;
-        const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
-        const isArea = typeof measure !== "string" ? measure.area ?? area : area;
-        const aOpacity = typeof measure !== "string" ? measure.areaOpacity ?? areaOpacity : areaOpacity;
-        const stackName = typeof measure !== "string" ? measure.stack ?? stack ?? void 0 : stack ?? void 0;
-        const connectNulls = typeof measure !== "string" && measure.emptyCellMode ? measure.emptyCellMode === "connect" : emptyCellMode === "connect";
-        return {
-          id: `series~${groupByKey}~${c}`,
-          name: seriesNameFormatter ? seriesNameFormatter(c) : c,
-          encode: {
-            x: groupByKey,
-            y: c
-          },
-          type: "line",
-          showSymbol,
-          sampling,
-          areaStyle: isArea ? {
-            opacity: aOpacity
-          } : void 0,
-          connectNulls,
-          stack: stackName,
-          yAxisId
-        };
-      })
-    };
-  }, [chartData, groupByKey, area, stack, seriesNameFormatter, emptyCellMode, areaOpacity, measures]);
-  const renderTooltip = (params, single, msr, cls, formatter) => {
-    const tooltipTitle = params[0].value[params[0].encode.x[0]];
-    if (single) {
-      const measure = getMeasure(params[0].dimensionNames[params[0].encode.y[0]], msr);
-      const value = params[0].value[params[0].encode.y[0]];
-      const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : formatter ? formatter(value) : value;
-      return `
-        <div class="${cls == null ? void 0 : cls.singleTooltipRoot}">
-          <p class="${cls == null ? void 0 : cls.singleTooltipTitle}">${tooltipTitle}</p>
-          <p class="${cls == null ? void 0 : cls.singleTooltipValue}">${formattedValue}</p>
-        </div>
-        `;
-    }
-    return `
-    <div class="${cls == null ? void 0 : cls.multipleTooltipRoot}">
-      <div class="${cls == null ? void 0 : cls.multipleTooltipTitleContainer}">
-        <div>
-          <p class="${cls == null ? void 0 : cls.multipleTooltipTitle}">${tooltipTitle}</p>
-        </div>
-      </div>
-      <div class="${cls == null ? void 0 : cls.multipleTooltipValuesContainer}">
-        ${params.map((s) => {
-      const measure = getMeasure(s.dimensionNames[s.encode.y[0]], msr);
-      const value = s.value[s.encode.y[0]];
-      const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : formatter ? formatter(value) : value;
-      return `
-            <div key="${s.seriesName}" class="${cls == null ? void 0 : cls.multipleTooltipSeriesContainer}">
-              <div class="${cls == null ? void 0 : cls.multipleTooltipSeriesNameContainer}">
-                <p style="background-color: ${s.color};" class="${cls == null ? void 0 : cls.multipleTooltipSeriesColor}" />
-                <p class="${cls == null ? void 0 : cls.multipleTooltipSeriesName}">${s.seriesName}</p>
-              </div>
-              <p class="${cls == null ? void 0 : cls.multipleTooltipSeriesValue}">${formattedValue}</p>
-            </div>
-          `;
-    }).join(" ")}
-      </div>
-    </div>
-    `;
-  };
-  const chartTooltip = react.useMemo(() => {
-    return {
-      tooltip: {
-        confine: false,
-        show: (tooltip == null ? void 0 : tooltip.show) ?? true,
-        trigger: "axis",
-        position: (point, params, dom, rect, size) => {
-          return [point[0], point[1] - size.contentSize[1]];
-        },
-        formatter: (params) => renderTooltip(params, (tooltip == null ? void 0 : tooltip.type) === "single", measures, classes, tooltip == null ? void 0 : tooltip.valueFormatter)
-      }
-    };
-  }, [tooltip == null ? void 0 : tooltip.show, tooltip == null ? void 0 : tooltip.valueFormatter, tooltip == null ? void 0 : tooltip.type, classes, measures]);
-  const chartLegend = react.useMemo(() => {
-    return {
-      legend: {
-        show: (legend == null ? void 0 : legend.show) ?? (Array.isArray(chartSeries.series) && chartSeries.series.length > 1),
-        itemGap: 20,
-        data: (legend == null ? void 0 : legend.show) !== false && Array.isArray(chartSeries.series) ? chartSeries.series.map((s) => {
-          return {
-            name: s.name,
-            icon: getLegendIcon.getLegendIcon(s.areaStyle != null)
-          };
-        }) : void 0
-      }
-    };
-  }, [chartSeries, legend == null ? void 0 : legend.show]);
-  const chartHorizontalRangerSlider = react.useMemo(() => {
-    return {
-      dataZoom: [{
-        show: (horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show) ?? false,
-        type: "slider",
-        orient: "horizontal"
-      }, {
-        show: (horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show) ?? false,
-        type: "inside",
-        orient: "horizontal",
-        zoomOnMouseWheel: "shift",
-        moveOnMouseWheel: true
-      }]
-    };
-  }, [horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show]);
-  const chartGrid = react.useMemo(() => {
-    return {
-      // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise
-      grid: {
-        ...(grid == null ? void 0 : grid.top) != null && {
-          top: grid.top
-        },
-        ...(grid == null ? void 0 : grid.bottom) != null && {
-          bottom: grid.bottom
-        },
-        ...(grid == null ? void 0 : grid.left) != null && {
-          left: grid.left
-        },
-        ...(grid == null ? void 0 : grid.right) != null && {
-          right: grid.right
-        }
-      }
-    };
-  }, [grid == null ? void 0 : grid.bottom, grid == null ? void 0 : grid.left, grid == null ? void 0 : grid.right, grid == null ? void 0 : grid.top]);
-  const [initialOption, setInitialOption] = react.useState({
-    aria: {
-      enabled: true
-    },
-    animation: false,
-    ...chartDataset,
-    ...chartXAxis,
-    ...chartYAxis,
-    ...chartSeries,
-    ...chartTooltip,
-    ...chartLegend,
-    ...chartHorizontalRangerSlider,
-    ...chartGrid
-  });
-  react.useEffect(() => {
-    var _a;
-    if (!isMounted.current) {
-      isMounted.current = true;
-      return;
-    }
-    if (theme !== currentTheme.current) {
-      setInitialOption({
-        aria: {
-          enabled: true
-        },
-        animation: false,
-        ...chartDataset,
-        ...chartXAxis,
-        ...chartYAxis,
-        ...chartSeries,
-        ...chartTooltip,
-        ...chartLegend,
-        ...chartHorizontalRangerSlider,
-        ...chartGrid
-      });
-      currentTheme.current = theme;
-      return;
-    }
-    (_a = chartRef.current) == null ? void 0 : _a.getEchartsInstance().setOption({
-      ...chartDataset,
-      ...chartXAxis,
-      ...chartYAxis,
-      ...chartSeries,
-      ...chartLegend,
-      ...chartTooltip,
-      ...chartHorizontalRangerSlider,
-      ...chartGrid
-    }, {
-      replaceMerge: ["xAxis", "yAxis", "series", "dataset"]
-    });
-  }, [theme, chartDataset, chartXAxis, chartYAxis, chartSeries, chartLegend, chartTooltip, chartHorizontalRangerSlider, chartGrid]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactECharts__default.default, {
-    ref: chartRef,
-    echarts: echarts__namespace,
-    option: initialOption,
-    theme,
-    notMerge: true
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
+    type: "line",
+    area,
+    emptyCellMode,
+    areaOpacity,
+    ...others
   });
 };
 exports.HvLineChart = HvLineChart;

package/dist/cjs/components/LineChart/LineChart.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineChart.cjs","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n DatasetComponent,\n GridComponent,\n TooltipComponent,\n AriaComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n} from \"echarts/components\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport type {\n EChartsOption,\n LineSeriesOption,\n YAXisComponentOption,\n} from \"echarts\";\n\nimport ReactECharts from \"echarts-for-react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvChartAggregation,\n HvChartOrder,\n HvChartAxis,\n HvChartEmptyCellMode,\n HvChartSampling,\n HvChartTooltipType,\n} from \"@viz/types\";\nimport { getAgFunc, getAxisType, getLegendIcon } from \"@viz/utils\";\nimport { useVizTheme } from \"@viz/hooks\";\nimport { useClasses } from \"./LineChart.styles\";\n\nexport type HvLineChartClasses = ExtractNames<typeof useClasses>;\n\n// Register chart components\necharts.use([\n LineChart,\n CanvasRenderer,\n DatasetComponent,\n GridComponent,\n AriaComponent,\n TooltipComponent,\n LegendComponent,\n DataZoomSliderComponent,\n DataZoomInsideComponent,\n]);\n\ntype GroupByField = string;\ntype SplitByField = string;\n\ntype FullMeasuresField = {\n /** Column name. /\n field: string;\n /* Sampling function to use. /\n sampling?: HvChartSampling;\n /* Id of the yAxis. /\n yAxis?: string;\n /* Whether to hide the symbol for data points. Defaults to `false`. /\n hideSymbol?: boolean;\n /* Aggregation function to use. If no `agg` is defined, it will default to `sum`. /\n agg?: HvChartAggregation;\n /* Whether the area under the lines should be filled. If not specified, it defaults to the global `area` prop. /\n area?: boolean;\n /* Sets opacity of the filled area if `area` is true. If not specified, it defaults to the global `areaOpacity` prop. /\n areaOpacity?: number;\n /\n Stack name to use when the measure should be stacked.\n \n Measures stacked together have the same name.\n \n If not specified, it defaults to the global `stacked` prop.\n /\n stack?: string;\n /* Strategy to use when there are empty cells. If not specified, it defaults to the global `emptyCellMode` prop. /\n emptyCellMode?: HvChartEmptyCellMode;\n /* Formatter for the value in the tooltip. If not specified, it defaults to the one defined in the global `tooltip` prop. /\n valueFormatter?: (value?: string \| number) => string;\n};\n\ntype MeasuresField = string \| FullMeasuresField;\n\ntype FullSortByField = {\n /* Column name. /\n field: string;\n /* Order function to use. If no `order` is defined, it will default to `asc`. /\n order?: HvChartOrder;\n};\ntype SortByField = string \| FullSortByField;\n\nexport interface HvLineChartProps {\n /* Chart data. /\n data:\n \| Map<string \| number, (string \| number)[]>\n \| Record<string \| number, (string \| number)[]>\n \| Record<string \| number, string \| number>[]\n \| ColumnTable;\n /* Columns to use to group the data. /\n groupBy: GroupByField \| GroupByField[];\n /* Columns to measure on the chart. /\n measures: MeasuresField \| MeasuresField[];\n /* Columns to use to split the measures. /\n splitBy?: SplitByField \| SplitByField[];\n /* Columns to use to sort the data points. /\n sortBy?: SortByField \| SortByField[];\n /\n Options for the xAxis, i.e. the horizontal axis.\n \n The default `type` for this axis is `categorical`.\n * /\n xAxis?: HvChartAxis;\n /\n Options for the yAxis, i.e. the vertical axis.\n \n The default `type` for this axis is `continuous`.\n * /\n yAxis?: HvChartAxis \| [HvChartAxis, HvChartAxis];\n /* Tooltip options. /\n tooltip?: {\n /* Whether to show the tooltip or not. Defaults to `true`. /\n show?: boolean;\n /* Formatter for the value in the tooltip. /\n valueFormatter?: (value?: string \| number) => string;\n /* Tooltip type: single line or multiple lines modes. The single line mode should only be used when there's one series. Defaults to `multiple`. /\n type?: HvChartTooltipType;\n };\n /* Legend options. /\n legend?: {\n /* Whether to show the legend or not. The legend will appear by default for multiple series. Otherwise, the legend will not be shown. /\n show?: boolean;\n };\n /* Formatter for the series names used on the tooltips and legend. /\n seriesNameFormatter?: (value?: string) => string;\n /* Strategy to use when there are empty cells. Defaults to `void`. /\n emptyCellMode?: HvChartEmptyCellMode;\n /* Whether the area under the lines should be filled. Defaults to `false`. /\n area?: boolean;\n /* Sets opacity of the filled area if `area` is true. Defaults to `0.5`. /\n areaOpacity?: number;\n /* Stack name to use when all the series should be stacked together. If not provided, the series are not stacked. /\n stack?: string;\n /* Ranger slider options for the horizontal axis. /\n horizontalRangeSlider?: {\n /* Whether to show the ranger slider or not. Defaults to `false`. /\n show?: boolean;\n };\n /* A Jss Object used to override or extend the styles applied to the component. /\n classes?: Partial<HvLineChartClasses>;\n /* Grid options. /\n grid?: {\n /* Distance between the grid and the top of the container. /\n top?: string \| number;\n /* Distance between the grid and the right side of the container. /\n right?: string \| number;\n /* Distance between the grid and the left side of the container. /\n left?: string \| number;\n /* Distance between the grid and the bottom of the container. /\n bottom?: string \| number;\n };\n}\n\n/\n A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = ({\n data,\n groupBy,\n splitBy,\n measures,\n sortBy,\n xAxis,\n yAxis,\n legend,\n tooltip,\n seriesNameFormatter,\n area = false,\n stack,\n emptyCellMode = \"void\",\n horizontalRangeSlider,\n areaOpacity = 0.5,\n classes: classesProp = {},\n grid,\n}: HvLineChartProps) => {\n const { theme } = useVizTheme();\n const { classes } = useClasses(classesProp);\n\n const currentTheme = useRef<string \| undefined>(theme);\n const chartRef = useRef<ReactECharts>(null);\n const isMounted = useRef<boolean>(false);\n\n const groupByKey = Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n\n const chartData = useMemo<ColumnTable>(() => {\n let tableData: ColumnTable;\n if (data instanceof internal.ColumnTable) {\n tableData = data;\n } else if (Array.isArray(data)) {\n tableData = from(data);\n } else {\n tableData = table(data);\n }\n\n const groupByFields = groupBy\n ? Array.isArray(groupBy)\n ? groupBy\n : [groupBy]\n : [];\n\n const splitByFields = Array.isArray(splitBy)\n ? splitBy\n : splitBy != null\n ? [splitBy]\n : [];\n\n const measuresFields: { [key: string]: string } =\n measures == null\n ? {}\n : typeof measures === \"string\"\n ? { [measures]: getAgFunc(\"sum\", measures) }\n : Array.isArray(measures)\n ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n let field: string;\n let agFunction: HvChartAggregation;\n if (typeof value === \"string\") {\n field = value;\n agFunction = \"sum\";\n } else {\n field = value.field;\n agFunction = value.agg ?? \"sum\";\n }\n\n return {\n ...acc,\n [field]: getAgFunc(agFunction, field),\n };\n }, {})\n : {\n [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n };\n\n const sortByFields: { [key: string]: HvChartOrder } =\n sortBy == null\n ? {}\n : typeof sortBy === \"string\"\n ? { [sortBy]: \"asc\" }\n : Array.isArray(sortBy)\n ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n let field: string;\n let orderFunction: HvChartOrder;\n if (typeof value === \"string\") {\n field = value;\n orderFunction = \"asc\";\n } else {\n field = value.field;\n orderFunction = value.order ?? \"asc\";\n }\n\n return {\n ...acc,\n [field]: orderFunction,\n };\n }, {})\n : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n const allFields = [\n ...groupByFields,\n ...splitByFields,\n ...Object.keys(measuresFields),\n ];\n\n // remove unneeded fields\n tableData = tableData.select(...allFields);\n\n // group by groupBy fields\n if (groupByFields.length > 0) {\n tableData = tableData.groupby(groupByFields);\n }\n\n if (splitByFields.length > 0) {\n // pivot by splitBy fields\n tableData = tableData.pivot(splitByFields, measuresFields);\n } else {\n // if there is no splitBy fields, just aggregate measures fields\n tableData = tableData.rollup(measuresFields);\n }\n\n // if grouped by multiple fields, create a new joint field\n // as the line chart doesn't implement hierarchical axis label grouping\n if (groupByFields.length > 1) {\n const expression = `d => ${groupByFields\n .map((field) => `d.${field}`)\n .join(\" + '_' + \")}`;\n\n tableData = tableData.derive(\n { [groupByKey]: expression },\n { after: groupByFields[groupByFields.length - 1] }\n );\n }\n\n // sort by sortBy fields\n if (Object.keys(sortByFields).length > 0) {\n tableData = tableData.orderby(\n ...Object.keys(sortByFields)\n // only sort by fields that are in the table, ignore the rest\n .filter((key) => allFields.includes(key))\n .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n );\n }\n\n // if a derived field was created, remove the original fields\n if (groupByFields.length > 1) {\n tableData = tableData.select(not(...groupByFields));\n }\n\n return tableData;\n }, [data, groupBy, groupByKey, splitBy, measures, sortBy]);\n\n const chartDataset = useMemo<Pick<EChartsOption, \"dataset\">>(() => {\n return {\n dataset: {\n source: chartData.columnNames().reduce(\n (acc, c) => ({\n ...acc,\n [c]: chartData.array(c),\n }),\n {}\n ),\n },\n };\n }, [chartData]);\n\n const chartXAxis = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\n return {\n xAxis: {\n type: getAxisType(xAxis?.type) ?? \"category\",\n name: xAxis?.name,\n scale: true,\n axisLabel: {\n rotate: xAxis?.labelRotation ?? 0,\n formatter: xAxis?.labelFormatter,\n },\n max: xAxis?.maxValue === \"max\" ? \"dataMax\" : xAxis?.maxValue,\n min: xAxis?.minValue === \"min\" ? \"dataMin\" : xAxis?.minValue,\n },\n };\n }, [\n xAxis?.labelFormatter,\n xAxis?.labelRotation,\n xAxis?.name,\n xAxis?.type,\n xAxis?.maxValue,\n xAxis?.minValue,\n ]);\n\n const chartYAxis = useMemo<Pick<EChartsOption, \"yAxis\">>(() => {\n if (!yAxis \|\| !Array.isArray(yAxis)) {\n return {\n yAxis: {\n id: yAxis?.id,\n type: getAxisType(yAxis?.type) ?? \"value\",\n name: yAxis?.name,\n axisLabel: {\n rotate: yAxis?.labelRotation ?? 0,\n formatter: yAxis?.labelFormatter,\n },\n max: yAxis?.maxValue === \"max\" ? \"dataMax\" : yAxis?.maxValue,\n min: yAxis?.minValue === \"min\" ? \"dataMin\" : yAxis?.minValue,\n },\n };\n }\n\n return {\n yAxis: yAxis.map<YAXisComponentOption>((axis) => ({\n id: axis?.id,\n type: getAxisType(axis?.type) ?? \"value\",\n name: axis?.name,\n axisLabel: {\n rotate: axis?.labelRotation ?? 0,\n formatter: axis?.labelFormatter,\n },\n max: axis?.maxValue === \"max\" ? \"dataMax\" : axis?.maxValue,\n min: axis?.minValue === \"min\" ? \"dataMin\" : axis?.minValue,\n })),\n };\n }, [yAxis]);\n\n const getMeasure = (name: string, msr: MeasuresField \| MeasuresField[]) => {\n const measureName = name.split(\"_\")[0];\n const measuresArray = Array.isArray(msr) ? msr : [msr];\n // find the measure in measures array or return the first one\n return (\n measuresArray.find((m) => {\n if (typeof m === \"string\") {\n return m === measureName;\n }\n return m.field === measureName;\n }) ?? measuresArray[0]\n );\n };\n\n const chartSeries = useMemo<Pick<EChartsOption, \"series\">>(() => {\n return {\n series: chartData\n .columnNames()\n .filter((c) => c !== groupByKey)\n .map<LineSeriesOption>((c) => {\n const measure = getMeasure(c, measures);\n\n const showSymbol =\n typeof measure !== \"string\" ? !measure.hideSymbol : true;\n const sampling =\n typeof measure !== \"string\" ? measure.sampling : undefined;\n const yAxisId =\n typeof measure !== \"string\" ? measure.yAxis : undefined;\n const isArea =\n typeof measure !== \"string\" ? measure.area ?? area : area;\n const aOpacity =\n typeof measure !== \"string\"\n ? measure.areaOpacity ?? areaOpacity\n : areaOpacity;\n const stackName =\n typeof measure !== \"string\"\n ? measure.stack ?? stack ?? undefined\n : stack ?? undefined;\n const connectNulls =\n typeof measure !== \"string\" && measure.emptyCellMode\n ? measure.emptyCellMode === \"connect\"\n : emptyCellMode === \"connect\";\n\n return {\n id: `series~${groupByKey}~${c}`,\n name: seriesNameFormatter ? seriesNameFormatter(c) : c,\n encode: { x: groupByKey, y: c },\n type: \"line\",\n showSymbol,\n sampling,\n areaStyle: isArea ? { opacity: aOpacity } : undefined,\n connectNulls,\n stack: stackName,\n yAxisId,\n };\n }),\n };\n }, [\n chartData,\n groupByKey,\n area,\n stack,\n seriesNameFormatter,\n emptyCellMode,\n areaOpacity,\n measures,\n ]);\n\n const renderTooltip = (\n params: {\n seriesName: string;\n value: (string \| number)[];\n encode: { [key: string]: number[] };\n color: string;\n dimensionNames: string[];\n }[],\n single: boolean,\n msr: MeasuresField \| MeasuresField[],\n cls?: typeof classes,\n formatter?: (value?: string \| number) => string\n ) => {\n const tooltipTitle = params[0].value[params[0].encode.x[0]];\n\n if (single) {\n const measure = getMeasure(\n params[0].dimensionNames[params[0].encode.y[0]],\n msr\n );\n const value = params[0].value[params[0].encode.y[0]];\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : formatter\n ? formatter(value)\n : value;\n\n return `\n <div class=\"${cls?.singleTooltipRoot}\">\n <p class=\"${cls?.singleTooltipTitle}\">${tooltipTitle}</p>\n <p class=\"${cls?.singleTooltipValue}\">${formattedValue}</p>\n </div>\n `;\n }\n\n return `\n <div class=\"${cls?.multipleTooltipRoot}\">\n <div class=\"${cls?.multipleTooltipTitleContainer}\">\n <div>\n <p class=\"${cls?.multipleTooltipTitle}\">${tooltipTitle}</p>\n </div>\n </div>\n <div class=\"${cls?.multipleTooltipValuesContainer}\">\n ${params\n .map((s) => {\n const measure = getMeasure(s.dimensionNames[s.encode.y[0]], msr);\n const value = s.value[s.encode.y[0]];\n const formattedValue =\n typeof measure !== \"string\" && measure.valueFormatter\n ? measure.valueFormatter(value)\n : formatter\n ? formatter(value)\n : value;\n\n return `\n <div key=\"${s.seriesName}\" class=\"${cls?.multipleTooltipSeriesContainer}\">\n <div class=\"${cls?.multipleTooltipSeriesNameContainer}\">\n <p style=\"background-color: ${s.color};\" class=\"${cls?.multipleTooltipSeriesColor}\" />\n <p class=\"${cls?.multipleTooltipSeriesName}\">${s.seriesName}</p>\n </div>\n <p class=\"${cls?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n </div>\n `;\n })\n .join(\" \")}\n </div>\n </div>\n `;\n };\n\n const chartTooltip = useMemo<Pick<EChartsOption, \"tooltip\">>(() => {\n return {\n tooltip: {\n confine: false,\n show: tooltip?.show ?? true,\n trigger: \"axis\",\n position: (point, params, dom, rect, size) => {\n return [point[0], point[1] - size.contentSize[1]];\n },\n formatter: (params) =>\n renderTooltip(\n params,\n tooltip?.type === \"single\",\n measures,\n classes,\n tooltip?.valueFormatter\n ),\n },\n };\n }, [\n tooltip?.show,\n tooltip?.valueFormatter,\n tooltip?.type,\n classes,\n measures,\n ]);\n\n const chartLegend = useMemo<Pick<EChartsOption, \"legend\">>(() => {\n return {\n legend: {\n show:\n legend?.show ??\n (Array.isArray(chartSeries.series) && chartSeries.series.length > 1),\n itemGap: 20,\n data:\n legend?.show !== false && Array.isArray(chartSeries.series)\n ? chartSeries.series.map((s) => {\n return {\n name: s.name as string,\n icon: getLegendIcon((s as any).areaStyle != null),\n };\n })\n : undefined,\n },\n };\n }, [chartSeries, legend?.show]);\n\n const chartHorizontalRangerSlider = useMemo<\n Pick<EChartsOption, \"dataZoom\">\n >(() => {\n return {\n dataZoom: [\n {\n show: horizontalRangeSlider?.show ?? false,\n type: \"slider\",\n orient: \"horizontal\",\n },\n {\n show: horizontalRangeSlider?.show ?? false,\n type: \"inside\",\n orient: \"horizontal\",\n zoomOnMouseWheel: \"shift\",\n moveOnMouseWheel: true,\n },\n ],\n };\n }, [horizontalRangeSlider?.show]);\n\n const chartGrid = useMemo(() => {\n return {\n // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n grid: {\n ...(grid?.top != null && {\n top: grid.top,\n }),\n ...(grid?.bottom != null && {\n bottom: grid.bottom,\n }),\n ...(grid?.left != null && {\n left: grid.left,\n }),\n ...(grid?.right != null && {\n right: grid.right,\n }),\n },\n };\n }, [grid?.bottom, grid?.left, grid?.right, grid?.top]);\n\n const [initialOption, setInitialOption] = useState<EChartsOption>({\n aria: {\n enabled: true,\n },\n animation: false,\n ...chartDataset,\n ...chartXAxis,\n ...chartYAxis,\n ...chartSeries,\n ...chartTooltip,\n ...chartLegend,\n ...chartHorizontalRangerSlider,\n ...chartGrid,\n });\n\n useEffect(() => {\n if (!isMounted.current) {\n isMounted.current = true;\n return;\n }\n\n // when the theme changes echarts destroys the chart and mounts it again\n // thus we need to reset the initial option\n if (theme !== currentTheme.current) {\n setInitialOption({\n aria: {\n enabled: true,\n },\n animation: false,\n ...chartDataset,\n ...chartXAxis,\n ...chartYAxis,\n ...chartSeries,\n ...chartTooltip,\n ...chartLegend,\n ...chartHorizontalRangerSlider,\n ...chartGrid,\n });\n currentTheme.current = theme;\n return;\n }\n\n chartRef.current?.getEchartsInstance().setOption(\n {\n ...chartDataset,\n ...chartXAxis,\n ...chartYAxis,\n ...chartSeries,\n ...chartLegend,\n ...chartTooltip,\n ...chartHorizontalRangerSlider,\n ...chartGrid,\n },\n {\n replaceMerge: [\"xAxis\", \"yAxis\", \"series\", \"dataset\"],\n }\n );\n }, [\n theme,\n chartDataset,\n chartXAxis,\n chartYAxis,\n chartSeries,\n chartLegend,\n chartTooltip,\n chartHorizontalRangerSlider,\n chartGrid,\n ]);\n\n return (\n <ReactECharts\n ref={chartRef}\n echarts={echarts}\n option={initialOption}\n theme={theme}\n notMerge\n />\n );\n};\n"],"names":["echarts","use","LineChart","CanvasRenderer","DatasetComponent","GridComponent","AriaComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","data","groupBy","splitBy","measures","sortBy","xAxis","yAxis","legend","tooltip","seriesNameFormatter","area","stack","emptyCellMode","horizontalRangeSlider","areaOpacity","classes","classesProp","grid","theme","useVizTheme","useClasses","currentTheme","useRef","chartRef","isMounted","groupByKey","Array","isArray","join","chartData","useMemo","tableData","internal","ColumnTable","from","table","groupByFields","splitByFields","measuresFields","getAgFunc","reduce","acc","value","field","agFunction","agg","sortByFields","orderFunction","order","allFields","Object","keys","select","length","groupby","pivot","rollup","expression","map","derive","after","orderby","filter","key","includes","desc","not","chartDataset","dataset","source","columnNames","c","array","chartXAxis","type","getAxisType","name","scale","axisLabel","rotate","labelRotation","formatter","labelFormatter","max","maxValue","min","minValue","chartYAxis","id","axis","getMeasure","msr","measureName","split","measuresArray","find","m","chartSeries","series","measure","showSymbol","hideSymbol","sampling","undefined","yAxisId","isArea","aOpacity","stackName","connectNulls","encode","x","y","areaStyle","opacity","renderTooltip","params","single","cls","tooltipTitle","dimensionNames","formattedValue","valueFormatter","singleTooltipRoot","singleTooltipTitle","singleTooltipValue","multipleTooltipRoot","multipleTooltipTitleContainer","multipleTooltipTitle","multipleTooltipValuesContainer","s","seriesName","multipleTooltipSeriesContainer","multipleTooltipSeriesNameContainer","color","multipleTooltipSeriesColor","multipleTooltipSeriesName","multipleTooltipSeriesValue","chartTooltip","confine","show","trigger","position","point","dom","rect","size","contentSize","chartLegend","itemGap","icon","getLegendIcon","chartHorizontalRangerSlider","dataZoom","orient","zoomOnMouseWheel","moveOnMouseWheel","chartGrid","top","bottom","left","right","initialOption","setInitialOption","useState","aria","enabled","animation","useEffect","current","getEchartsInstance","setOption","replaceMerge","ReactECharts","ref","option","notMerge"],"mappings":"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"}
1	+ {"version":3,"file":"LineChart.cjs","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import {\n HvBaseChart,\n HvBaseChartClasses,\n HvBaseChartCommonProps,\n HvBaseChartLineProps,\n} from \"../BaseChart\";\n\nexport interface HvLineChartClasses extends HvBaseChartClasses {}\n\nexport interface HvLineChartProps\n extends HvBaseChartCommonProps,\n HvBaseChartLineProps {\n /** A Jss Object used to override or extend the styles applied to the component. /\n classes?: HvLineChartClasses;\n}\n\n/\n A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = ({\n area = false,\n emptyCellMode = \"void\",\n areaOpacity = 0.5,\n ...others\n}: HvLineChartProps) => {\n return (\n <HvBaseChart\n type=\"line\"\n area={area}\n emptyCellMode={emptyCellMode}\n areaOpacity={areaOpacity}\n {...others}\n />\n );\n};\n"],"names":["HvLineChart","area","emptyCellMode","areaOpacity","others","HvBaseChart","type"],"mappings":";;;;AAoBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACd,GAAGC;AACa,MAAM;AACtB,wCACGC,UAAAA,aAAW;AAAA,IACVC,MAAK;AAAA,IACLL;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAAyB,GACrBC;AAAAA,EAAAA,CACL;AAEL;;"}

package/dist/cjs/index.cjs CHANGED Viewed

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const LineChart = require("./components/LineChart/LineChart.cjs");
+const BarChart = require("./components/BarChart/BarChart.cjs");
 const Provider = require("./providers/Provider.cjs");
 exports.HvLineChart = LineChart.HvLineChart;
+exports.HvBarChart = BarChart.HvBarChart;
 exports.HvVizContext = Provider.HvVizContext;
 exports.HvVizProvider = Provider.HvVizProvider;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;~~"}
1	+ {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/cjs/providers/Provider.cjs CHANGED Viewed

@@ -1,28 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const echarts = require("echarts/core");
+const registerThemes = require("../utils/registerThemes.cjs");
 const react = require("react");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-function _interopNamespace(e) {
-  if (e && e.__esModule)
-    return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
 const HvVizContext = react.createContext({
   theme: void 0
 });
@@ -36,90 +17,8 @@ const HvVizProvider = ({
     selectedTheme
   } = uikitReactCore.useTheme();
   const [theme, setTheme] = react.useState();
-  const registerThemes = (themeName, modes, themeStructure) => {
-    modes.forEach((mode) => {
-      const baseText = {
-        color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary,
-        fontWeight: themeStructure == null ? void 0 : themeStructure.fontWeights.normal,
-        fontSize: themeStructure == null ? void 0 : themeStructure.fontSizes.sm,
-        fontFamily: themeStructure == null ? void 0 : themeStructure.fontFamily.body
-      };
-      const customAxis = {
-        nameTextStyle: {
-          ...baseText
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3
-          }
-        },
-        axisTick: {
-          show: true,
-          lineStyle: {
-            color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3
-          }
-        },
-        axisLabel: {
-          color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary_80,
-          fontWeight: themeStructure == null ? void 0 : themeStructure.fontWeights.normal,
-          fontSize: themeStructure == null ? void 0 : themeStructure.fontSizes.sm,
-          fontFamily: themeStructure == null ? void 0 : themeStructure.fontFamily.body
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3
-          }
-        }
-      };
-      echarts__namespace.registerTheme(`${themeName}-${mode}`, {
-        color: [themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat1, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat2, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat3, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat4, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat5, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat6],
-        legend: {
-          textStyle: {
-            ...baseText
-          }
-        },
-        tooltip: {
-          borderWidth: 0,
-          padding: 0,
-          textStyle: {
-            ...baseText
-          },
-          axisPointer: {
-            lineStyle: {
-              color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary,
-              width: 1
-            }
-          }
-        },
-        dataZoom: {
-          textStyle: {
-            ...baseText
-          }
-        },
-        categoryAxis: {
-          ...customAxis
-        },
-        valueAxis: {
-          ...customAxis
-        },
-        logAxis: {
-          ...customAxis
-        },
-        timeAxis: {
-          ...customAxis
-        },
-        line: {
-          lineStyle: {
-            width: 2
-          }
-        }
-      });
-    });
-  };
   react.useEffect(() => {
-    registerThemes(selectedTheme, colorModes, activeTheme);
+    registerThemes.registerThemes(selectedTheme, colorModes, activeTheme);
   }, [selectedTheme, colorModes, activeTheme]);
   react.useEffect(() => {
     setTheme(`${selectedTheme}-${selectedMode}`);

package/dist/cjs/providers/Provider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { ~~HvTheme,~~ useTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as ~~echarts~~ from \"~~echarts~~/~~core~~\";\nimport { createContext, useEffect, useMemo, useState } from \"react\";\n\nexport interface HvVizContextValue {\n /*\n Current theme\n /\n theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /\n Component tree.\n /\n children?: React.ReactNode;\n}\n\n/\n Enables theming capabilities for visualizations.\n \n Without this provider the visualizations will not comply to the UI Kit themes.\n \n This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n \n `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n \n ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, colorModes, selectedMode, selectedTheme } = useTheme();\n\n const [theme, setTheme] = useState<string \| undefined>();\n\n const registerThemes = (\n themeName: string,\n modes: string[],\n themeStructure?: HvTheme\n ) => {\n modes.forEach((mode) => {\n const baseText = {\n color: themeStructure?.colors.modes[mode].secondary,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n };\n\n const customAxis = {\n nameTextStyle: {\n ...baseText,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisTick: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n axisLabel: {\n color: themeStructure?.colors.modes[mode].secondary_80,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: themeStructure?.colors.modes[mode].atmo3,\n },\n },\n };\n\n echarts.registerTheme(`${themeName}-${mode}`, {\n color: [\n themeStructure?.colors.modes[mode].cat1,\n themeStructure?.colors.modes[mode].cat2,\n themeStructure?.colors.modes[mode].cat3,\n themeStructure?.colors.modes[mode].cat4,\n themeStructure?.colors.modes[mode].cat5,\n themeStructure?.colors.modes[mode].cat6,\n ],\n legend: {\n textStyle: {\n ...baseText,\n },\n },\n tooltip: {\n borderWidth: 0,\n padding: 0,\n textStyle: {\n ...baseText,\n },\n axisPointer: {\n lineStyle: {\n color: themeStructure?.colors.modes[mode].secondary,\n width: 1,\n },\n },\n },\n dataZoom: {\n textStyle: { ...baseText },\n },\n categoryAxis: {\n ...customAxis,\n },\n valueAxis: {\n ...customAxis,\n },\n logAxis: {\n ...customAxis,\n },\n timeAxis: {\n ...customAxis,\n },\n line: {\n lineStyle: {\n width: 2,\n },\n },\n });\n });\n };\n\n useEffect(() => {\n registerThemes(selectedTheme, colorModes, activeTheme);\n }, [selectedTheme, colorModes, activeTheme]);\n\n useEffect(() => {\n setTheme(`${selectedTheme}-${selectedMode}`);\n }, [selectedMode, selectedTheme]);\n\n const value = useMemo<HvVizContextValue>(\n () => ({\n theme,\n }),\n [theme]\n );\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","colorModes","selectedMode","selectedTheme","useTheme","setTheme","useState","registerThemes","themeName","modes","themeStructure","forEach","mode","baseText","color","colors","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","secondary_80","splitLine","registerTheme","cat1","cat2","cat3","cat4","cat5","cat6","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line","useEffect","value","useMemo","_jsx","Provider"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;~~AAWO,MAAMA,eAAeC,MAAAA,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,IAAcC;AAAAA,MAAkBC,eAAS,SAAA;AAE1E,QAAM,CAACR,OAAOS,QAAQ,IAAIC,MAA6B,SAAA;~~AAEvD~~,QAAMC,iBAAiBA,CACrBC,WACAC,OACAC,mBACG;AACHD,UAAME,QAASC,CAAS,SAAA;AACtB,YAAMC,WAAW;AAAA,QACfC,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMI;AAAAA,QAC1CC,YAAYP,iDAAgBQ,YAAYC;AAAAA,QACxCC,UAAUV,iDAAgBW,UAAUC;AAAAA,QACpCC,YAAYb,iDAAgBa,WAAWC;AAAAA,MAAAA;AAGzC,YAAMC,aAAa;AAAA,QACjBC,eAAe;AAAA,UACb,GAAGb;AAAAA,QACL;AAAA,QACAc,UAAU;AAAA,UACRC,MAAM;AAAA,UACNC,WAAW;AAAA,YACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMkB;AAAAA,UAC5C;AAAA,QACF;AAAA,QACAC,UAAU;AAAA,UACRH,MAAM;AAAA,UACNC,WAAW;AAAA,YACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMkB;AAAAA,UAC5C;AAAA,QACF;AAAA,QACAE,WAAW;AAAA,UACTlB,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMqB;AAAAA,UAC1ChB,YAAYP,iDAAgBQ,YAAYC;AAAAA,UACxCC,UAAUV,iDAAgBW,UAAUC;AAAAA,UACpCC,YAAYb,iDAAgBa,WAAWC;AAAAA,QACzC;AAAA,QACAU,WAAW;AAAA,UACTN,MAAM;AAAA,UACNC,WAAW;AAAA,YACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMkB;AAAAA,UAC5C;AAAA,QACF;AAAA,MAAA;AAGMK,yBAAAA,cAAe,GAAE3B,aAAaI,QAAQ;AAAA,QAC5CE,OAAO,CACLJ,iDAAgBK,OAAON,MAAMG,MAAMwB,MACnC1B,iDAAgBK,OAAON,MAAMG,MAAMyB,MACnC3B,iDAAgBK,OAAON,MAAMG,MAAM0B,MACnC5B,iDAAgBK,OAAON,MAAMG,MAAM2B,MACnC7B,iDAAgBK,OAAON,MAAMG,MAAM4B,MACnC9B,iDAAgBK,OAAON,MAAMG,MAAM6B,IAAI;AAAA,QAEzCC,QAAQ;AAAA,UACNC,WAAW;AAAA,YACT,GAAG9B;AAAAA,UACL;AAAA,QACF;AAAA,QACA+B,SAAS;AAAA,UACPC,aAAa;AAAA,UACbC,SAAS;AAAA,UACTH,WAAW;AAAA,YACT,GAAG9B;AAAAA,UACL;AAAA,UACAkC,aAAa;AAAA,YACXlB,WAAW;AAAA,cACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMI;AAAAA,cAC1CgC,OAAO;AAAA,YACT;AAAA,UACF;AAAA,QACF;AAAA,QACAC,UAAU;AAAA,UACRN,WAAW;AAAA,YAAE,GAAG9B;AAAAA,UAAS;AAAA,QAC3B;AAAA,QACAqC,cAAc;AAAA,UACZ,GAAGzB;AAAAA,QACL;AAAA,QACA0B,WAAW;AAAA,UACT,GAAG1B;AAAAA,QACL;AAAA,QACA2B,SAAS;AAAA,UACP,GAAG3B;AAAAA,QACL;AAAA,QACA4B,UAAU;AAAA,UACR,GAAG5B;AAAAA,QACL;AAAA,QACA6B,MAAM;AAAA,UACJzB,WAAW;AAAA,YACTmB,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MAAA,CACD;AAAA,IAAA,CACF;AAAA,EAAA;AAGHO,QAAAA,UAAU,MAAM;~~AACCpD~~,mBAAAA,eAAeF,YAAYD,WAAW;AAAA,EACpD,GAAA,CAACG,eAAeF,YAAYD,WAAW,CAAC;~~AAE3CuD~~,QAAAA,UAAU,MAAM;AACJ,aAAA,~~GAAEpD~~,iBAAiBD,cAAc;AAAA,EAAA,GAC1C,CAACA,cAAcC,aAAa,CAAC;~~AAE1BqD~~,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,~~IACL7D~~;AAAAA,EAAAA,IAEF,CAACA,KAAK,CACR;~~AAGE8D~~,SAAAA,2BAAAA,~~IAAChE~~,~~aAAaiE~~,UAAQ;AAAA,IAACH;AAAAA,~~IAAazD~~;AAAAA,EAAAA,CAAkC;AAE1E;;;"}
1	+ {"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-core\";\nimport { registerThemes } from \"@viz/utils\";\nimport { createContext, useEffect, useMemo, useState } from \"react\";\n\nexport interface HvVizContextValue {\n /*\n Current theme\n /\n theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /\n Component tree.\n /\n children?: React.ReactNode;\n}\n\n/\n Enables theming capabilities for visualizations.\n \n Without this provider the visualizations will not comply to the UI Kit themes.\n \n This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n \n `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n \n ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, colorModes, selectedMode, selectedTheme } = useTheme();\n\n const [theme, setTheme] = useState<string \| undefined>();\n\n useEffect(() => {\n registerThemes(selectedTheme, colorModes, activeTheme);\n }, [selectedTheme, colorModes, activeTheme]);\n\n useEffect(() => {\n setTheme(`${selectedTheme}-${selectedMode}`);\n }, [selectedMode, selectedTheme]);\n\n const value = useMemo<HvVizContextValue>(\n () => ({\n theme,\n }),\n [theme]\n );\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","colorModes","selectedMode","selectedTheme","useTheme","setTheme","useState","useEffect","value","useMemo","_jsx","Provider"],"mappings":";;;;;;AAWO,MAAMA,eAAeC,MAAAA,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,IAAcC;AAAAA,MAAkBC,eAAS,SAAA;AAE1E,QAAM,CAACR,OAAOS,QAAQ,IAAIC,MAA6B,SAAA;AAEvDC,QAAAA,UAAU,MAAM;AACCJ,mBAAAA,eAAAA,eAAeF,YAAYD,WAAW;AAAA,EACpD,GAAA,CAACG,eAAeF,YAAYD,WAAW,CAAC;AAE3CO,QAAAA,UAAU,MAAM;AACJ,aAAA,GAAEJ,iBAAiBD,cAAc;AAAA,EAAA,GAC1C,CAACA,cAAcC,aAAa,CAAC;AAE1BK,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLb;AAAAA,EAAAA,IAEF,CAACA,KAAK,CACR;AAGEc,SAAAA,2BAAAA,IAAChB,aAAaiB,UAAQ;AAAA,IAACH;AAAAA,IAAaT;AAAAA,EAAAA,CAAkC;AAE1E;;;"}