@hitachivantara/uikit-react-viz 5.16.7 → 6.0.0-next.2

package/dist/{esm/BaseChart → BaseChart}/BaseChart.js

@@ -5,7 +5,7 @@ import ReactECharts from "echarts-for-react/lib/core";
 import { AriaComponent } from "echarts/components";
 import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
-import { useVizTheme } from "../hooks/useVizTheme.js";
+import { useVizTheme } from "../providers/Provider.js";
 echarts.use([CanvasRenderer, AriaComponent]);
 const HvBaseChart = forwardRef(
   function HvBaseChart2(props, ref) {

package/dist/{types/index.d.ts → index.d.ts}

@@ -98,11 +98,11 @@ export declare const HvBarChart: ForwardRefExoticComponent<HvBarChartProps & Ref
 export declare interface HvBarChartClasses extends HvChartTooltipClasses {
 }
 
-export declare type HvBarChartMeasures = string | BarFullMeasure;
+export declare type HvBarChartMeasure = string | BarFullMeasure;
 
 export declare interface HvBarChartProps extends HvAxisChartCommonProps, HvChartCommonProps {
     /**  Columns to measure on the chart. */
-    measures: Arrayable<HvBarChartMeasures>;
+    measures: Arrayable<HvBarChartMeasure>;
     /** Whether the bar chart should be horizontal. Defaults to `false`. */
     horizontal?: boolean;
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -446,11 +446,11 @@ export declare const HvLineChart: ForwardRefExoticComponent<HvLineChartProps & R
 export declare interface HvLineChartClasses extends HvChartTooltipClasses {
 }
 
-export declare type HvLineChartMeasures = string | LineFullMeasure;
+export declare type HvLineChartMeasure = string | LineFullMeasure;
 
 export declare interface HvLineChartProps extends HvAxisChartCommonProps, HvChartCommonProps {
     /** Columns to measure on the chart. */
-    measures: Arrayable<HvLineChartMeasures>;
+    measures: Arrayable<HvLineChartMeasure>;
     /** Strategy to use when there are empty cells. Defaults to `void`. */
     emptyCellMode?: HvChartEmptyCellMode;
     /** Whether the area under the lines should be filled. Defaults to `false`. */
@@ -611,6 +611,8 @@ declare const useClasses_4: (classesProp?: Partial<Record<"tooltipRoot" | "toolt
     readonly cx: (...args: any) => string;
 };
 
+export declare const useVizTheme: () => HvVizContextValue;
+
 declare interface XAxis extends HvChartXAxis {
     data?: string[];
 }

package/dist/{esm/index.js → index.js}

@@ -1,4 +1,4 @@
-import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
+import { HvVizContext, HvVizProvider, useVizTheme } from "./providers/Provider.js";
 import { getHvArqueroCombinedFilters } from "./utils/index.js";
 import { HvBaseChart } from "./BaseChart/BaseChart.js";
 import { HvBarChart } from "./BarChart/BarChart.js";
@@ -21,5 +21,6 @@ export {
   HvTreemapChart,
   HvVizContext,
   HvVizProvider,
-  getHvArqueroCombinedFilters
+  getHvArqueroCombinedFilters,
+  useVizTheme
 };

package/dist/{esm/providers → providers}/Provider.js

@@ -1,20 +1,24 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useMemo } from "react";
+import { createContext, useMemo, useContext } from "react";
 import { useTheme } from "@hitachivantara/uikit-react-utils";
 import { registerTheme } from "../utils/registerTheme.js";
 const HvVizContext = createContext({
   theme: void 0
 });
 const HvVizProvider = ({ children }) => {
-  const { activeTheme, selectedMode, selectedTheme } = useTheme();
+  const { activeTheme, selectedMode } = useTheme();
   const value = useMemo(() => {
-    const themeName = `${selectedTheme}-${selectedMode}`;
+    const themeName = `${activeTheme?.name}-${selectedMode}`;
     registerTheme(themeName, selectedMode, activeTheme);
     return { theme: themeName, activeTheme };
-  }, [selectedTheme, selectedMode, activeTheme]);
+  }, [selectedMode, activeTheme]);
   return /* @__PURE__ */ jsx(HvVizContext.Provider, { value, children });
 };
+const useVizTheme = () => {
+  return useContext(HvVizContext);
+};
 export {
   HvVizContext,
-  HvVizProvider
+  HvVizProvider,
+  useVizTheme
 };

package/dist/{esm/utils → utils}/registerTheme.js

@@ -1,6 +1,6 @@
 import * as echarts from "echarts/core";
 const registerTheme = (themeName, mode, themeStructure) => {
-  const colors = themeStructure?.colors.modes[mode];
+  const colors = themeStructure?.colors[mode];
   if (!colors) return;
   const baseText = {
     color: colors?.text,

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.16.7",
+  "version": "6.0.0-next.2",
+  "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React visualization components for the NEXT UI Kit.",
@@ -25,16 +26,16 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.16.14",
+    "@mui/material": "^7.0.2",
     "arquero": "^5.2.0",
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.2",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@hitachivantara/uikit-react-utils": "^0.2.46",
-    "@hitachivantara/uikit-styles": "^5.51.1"
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.2",
+    "@hitachivantara/uikit-styles": "^6.0.0-next.2"
   },
   "files": [
     "dist"
@@ -43,14 +44,13 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "7d60bff02f58ff47ae19146532553882c2e4b732",
+  "gitHead": "0b07240fb2ef75e046d8e6aaf0ff71bf2415c73f",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.cjs",
-      "import": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
-  "types": "dist/types/index.d.ts",
-  "module": "dist/esm/index.js"
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js"
 }

package/dist/cjs/BarChart/BarChart.cjs

@@ -1,138 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const charts = require("echarts/charts");
-const components = require("echarts/components");
-const echarts = require("echarts/core");
-const useData = require("../hooks/useData.cjs");
-const useDataset = require("../hooks/useDataset.cjs");
-const useYAxis = require("../hooks/useYAxis.cjs");
-const useXAxis = require("../hooks/useXAxis.cjs");
-const useDataZoom = require("../hooks/useDataZoom.cjs");
-const useGrid = require("../hooks/useGrid.cjs");
-const useSeries = require("../hooks/useSeries.cjs");
-const useLegend = require("../hooks/useLegend.cjs");
-const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
-const useOption = require("../hooks/useOption.cjs");
-const BaseChart = require("../BaseChart/BaseChart.cjs");
-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);
-echarts__namespace.use([
-  charts.BarChart,
-  components.DatasetComponent,
-  components.GridComponent,
-  components.TooltipComponent,
-  components.LegendComponent,
-  components.DataZoomSliderComponent,
-  components.DataZoomInsideComponent,
-  components.MarkLineComponent
-]);
-const HvBarChart = react.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.useData({
-      data,
-      groupBy,
-      sortBy,
-      splitBy,
-      measures,
-      filters
-    });
-    const chartDataset = useDataset.useDataset(chartData);
-    const chartYAxis = useYAxis.useYAxis({
-      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
-      defaultType: horizontal ? "categorical" : "continuous"
-    });
-    const chartXAxis = useXAxis.useXAxis({
-      type: horizontal ? "continuous" : "categorical",
-      ...xAxis
-    });
-    const chartSlider = useDataZoom.useDataZoom({
-      showHorizontal: horizontalRangeSlider?.show
-    });
-    const chartGrid = useGrid.useGrid({ ...grid });
-    const chartSeries = useSeries.useSeries({
-      type: "bar",
-      data: chartData,
-      groupBy,
-      measuresMapping,
-      stack,
-      nameFormatter: seriesNameFormatter,
-      horizontal
-    });
-    const chartLegend = useLegend.useLegend({
-      ...legend,
-      series: chartSeries.series,
-      icon: "square"
-    });
-    const chartTooltip = useTooltip.useTooltip({
-      ...tooltip,
-      trigger: "axis",
-      measuresMapping,
-      classes,
-      horizontal
-    });
-    const option = useOption.useOption({
-      option: {
-        ...chartYAxis,
-        ...chartXAxis,
-        ...chartSlider,
-        ...chartGrid,
-        ...chartDataset,
-        ...chartSeries,
-        ...chartLegend,
-        ...chartTooltip
-      },
-      onOptionChange
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseChart.HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-exports.HvBarChart = HvBarChart;

package/dist/cjs/BaseChart/BaseChart.cjs

@@ -1,77 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const utils = require("@mui/material/utils");
-const ReactECharts = require("echarts-for-react/lib/core");
-const components = require("echarts/components");
-const echarts = require("echarts/core");
-const renderers = require("echarts/renderers");
-const useVizTheme = require("../hooks/useVizTheme.cjs");
-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 ReactECharts__default = /* @__PURE__ */ _interopDefault(ReactECharts);
-const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
-echarts__namespace.use([renderers.CanvasRenderer, components.AriaComponent]);
-const HvBaseChart = react.forwardRef(
-  function HvBaseChart2(props, ref) {
-    const { option, width, height, onEvents, ...others } = props;
-    const { theme, activeTheme } = useVizTheme.useVizTheme();
-    const currentTheme = react.useRef(theme);
-    const chartRef = react.useRef(null);
-    const forkedRef = utils.useForkRef(ref, chartRef);
-    const [initialOption, setInitialOption] = react.useState(option);
-    react.useEffect(() => {
-      const instance = chartRef.current?.getEchartsInstance();
-      if (!instance) return;
-      return () => {
-        instance.dispose();
-      };
-    }, [activeTheme]);
-    react.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__ */ jsxRuntime.jsx(
-      ReactECharts__default.default,
-      {
-        ref: forkedRef,
-        echarts: echarts__namespace,
-        option: initialOption,
-        theme,
-        notMerge: true,
-        style: {
-          width: width ?? "100%",
-          height: height ?? "100%"
-        },
-        onEvents,
-        ...others
-      }
-    );
-  }
-);
-exports.HvBaseChart = HvBaseChart;

package/dist/cjs/Boxplot/Boxplot.cjs

@@ -1,116 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const charts = require("echarts/charts");
-const components = require("echarts/components");
-const echarts = require("echarts/core");
-const Boxplot_styles = require("./Boxplot.styles.cjs");
-const useBoxplot = require("./useBoxplot.cjs");
-const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
-const useGrid = require("../hooks/useGrid.cjs");
-const useLegend = require("../hooks/useLegend.cjs");
-const useXAxis = require("../hooks/useXAxis.cjs");
-const useYAxis = require("../hooks/useYAxis.cjs");
-const useOption = require("../hooks/useOption.cjs");
-const BaseChart = require("../BaseChart/BaseChart.cjs");
-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);
-echarts__namespace.use([charts.BoxplotChart, components.TooltipComponent, components.VisualMapComponent]);
-const HvBoxplot = react.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 } = Boxplot_styles.useClasses(classesProp);
-    const chartTooltip = useTooltip.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>
-              <p class="${classes.tooltipText}">${title}</p>
-              <p class="${classes.tooltipText}">Upper: ${upper}</p>
-              <p class="${classes.tooltipText}">Q3: ${q3}</p>
-              <p class="${classes.tooltipText}">Median: ${median}</p>
-              <p class="${classes.tooltipText}">Q1: ${q1}</p>
-              <p class="${classes.tooltipText}">Lower: ${lower}</p>
-              </div>
-            </div>
-          </div>`;
-      },
-      ...tooltip
-    });
-    const chartGrid = useGrid.useGrid({ ...grid });
-    const chartLegend = useLegend.useLegend({
-      ...legend,
-      icon: "square"
-    });
-    const chartXAxis = useXAxis.useXAxis({
-      ...xAxis
-    });
-    const chartYAxis = useYAxis.useYAxis({
-      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
-      defaultType: "continuous",
-      ...yAxis
-    });
-    const chartBoxplot = useBoxplot.useBoxplot({ data, groupBy, measures, filters });
-    const chartOption = useOption.useOption({
-      option: {
-        ...chartBoxplot,
-        ...chartGrid,
-        ...chartLegend,
-        ...chartTooltip,
-        ...chartXAxis,
-        ...chartYAxis
-      }
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseChart.HvBaseChart,
-      {
-        ref,
-        option: chartOption,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-exports.HvBoxplot = HvBoxplot;

package/dist/cjs/Boxplot/Boxplot.styles.cjs

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBoxplot", {
-  tooltipRoot: {
-    backgroundColor: uikitStyles.theme.colors.bgContainer,
-    width: "fit-content",
-    minWidth: 150,
-    boxShadow: uikitStyles.theme.colors.shadow,
-    zIndex: uikitStyles.theme.zIndices.sticky
-  },
-  tooltipContainer: {
-    padding: uikitStyles.theme.spacing("15px", "sm"),
-    display: "flex",
-    flexDirection: "column"
-  },
-  tooltipText: {
-    fontFamily: uikitStyles.theme.fontFamily.body,
-    fontWeight: uikitStyles.theme.fontWeights.normal,
-    fontSize: uikitStyles.theme.fontSizes.sm,
-    color: uikitStyles.theme.colors.text
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/Boxplot/useBoxplot.cjs

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const useBoxplotData = require("./useBoxplotData.cjs");
-const useBoxplot = ({
-  data,
-  groupBy,
-  measures,
-  filters
-}) => {
-  const measuresFields = react.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.useBoxplotData({
-    data,
-    groupBy,
-    measures: measuresFields,
-    filters
-  });
-  const boxplotData = react.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;
-};
-exports.useBoxplot = useBoxplot;

package/dist/cjs/Boxplot/useBoxplotData.cjs

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const arquero = require("arquero");
-const index = require("../utils/index.cjs");
-const useBoxplotData = ({
-  data,
-  groupBy: groupByProp,
-  measures,
-  filters: filtersProp
-}) => {
-  const chartData = react.useMemo(() => {
-    const { data: processedData } = index.processTableData(data);
-    let tableData = processedData;
-    if (filtersProp) {
-      const filters = (Array.isArray(filtersProp) ? filtersProp : [filtersProp]).map((filter) => ({
-        ...filter,
-        field: index.normalizeColumnName(filter.field)
-        // normalize
-      }));
-      tableData = tableData.filter(
-        arquero.escape((row) => index.getHvArqueroCombinedFilters(row, filters))
-      );
-    }
-    const normalizedGroupBy = index.normalizeColumnName(groupByProp || "");
-    const uniqueGroupBy = new Set(
-      tableData.array(normalizedGroupBy)
-    );
-    const results = {};
-    uniqueGroupBy.forEach((group) => {
-      results[group] = {};
-      Object.keys(measures).forEach((measure) => {
-        results[group][measure] = tableData.params({ group, groupBy: normalizedGroupBy }).filter((d, $) => d[$.groupBy] === $.group).array(index.normalizeColumnName(measure));
-      });
-    });
-    return results;
-  }, [data, filtersProp, groupByProp, measures]);
-  return chartData;
-};
-exports.useBoxplotData = useBoxplotData;