@hitachivantara/uikit-react-viz 5.16.6 → 6.0.0-next.1

package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs

@@ -1,182 +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 index = require("../utils/index.cjs");
-const ConfusionMatrix_styles = require("./ConfusionMatrix.styles.cjs");
-const utils = require("./utils.cjs");
-const useVisualMap = require("../hooks/useVisualMap.cjs");
-const useData = require("../hooks/useData.cjs");
-const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
-const useYAxis = require("../hooks/useYAxis.cjs");
-const useXAxis = require("../hooks/useXAxis.cjs");
-const useGrid = require("../hooks/useGrid.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.HeatmapChart,
-  components.VisualMapComponent,
-  components.GridComponent,
-  components.TooltipComponent
-]);
-const HvConfusionMatrix = react.forwardRef(function HvConfusionMatrix2(props, ref) {
-  const {
-    legend,
-    groupBy,
-    measure,
-    sortBy,
-    splitBy,
-    filters,
-    grid,
-    data: dataProp,
-    tooltip,
-    xAxis,
-    yAxis,
-    colorScale: colorScaleProp,
-    delta,
-    valuesProps,
-    width,
-    height,
-    format = "square",
-    classes: classesProp,
-    onOptionChange,
-    ...others
-  } = props;
-  const { classes } = ConfusionMatrix_styles.useClasses(classesProp);
-  const groupByKey = index.getGroupKey(groupBy);
-  const { data: chartData } = useData.useData({
-    data: dataProp,
-    groupBy,
-    measures: [measure],
-    sortBy: sortBy ?? groupBy,
-    // automatically orders x axis to create the confusion matrix
-    splitBy,
-    filters,
-    delta: typeof delta === "string" ? delta : void 0
-  });
-  const colorScale = utils.useColorScale({
-    delta: !!delta,
-    data: chartData,
-    custom: colorScaleProp,
-    filterKey: groupByKey
-  });
-  const chartVisualMap = useVisualMap.useVisualMap({
-    show: colorScale?.pieces != null,
-    type: colorScale?.pieces != null ? "piecewise" : "continuous",
-    ...colorScale,
-    ...legend
-  });
-  const chartTooltip = useTooltip.useTooltip({
-    component: (params) => {
-      const value = params?.series?.[0].value;
-      const fmtValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : tooltip?.valueFormatter ? tooltip?.valueFormatter(value) : value;
-      const ftmTitle = tooltip?.titleFormatter ? tooltip.titleFormatter(params?.title) : params?.title;
-      const content = `${ftmTitle} - ${params?.series?.[0].name}: ${fmtValue}`;
-      return `
-        <div class="${classes.tooltipRoot}">
-            <div class="${classes.tooltipContainer}">
-                <div>
-                    <p class="${classes.tooltipText}">${content}</p>
-                </div>
-            </div>
-        </div>`;
-    },
-    ...tooltip
-  });
-  const chartYAxis = useYAxis.useYAxis({
-    axes: [
-      {
-        type: "categorical",
-        name: "True Label",
-        position: "left",
-        ...yAxis,
-        nameProps: {
-          location: "center",
-          padding: yAxis?.nameProps?.location == null || yAxis?.nameProps?.location === "center" ? yAxis?.position === "right" ? [50, 0, 0, 0] : [0, 0, 50, 0] : void 0,
-          ...yAxis?.nameProps
-        },
-        data: chartData.columnNames().filter((p) => p !== groupByKey).reverse()
-      }
-    ]
-  });
-  const chartXAxis = useXAxis.useXAxis({
-    name: "Predicted Value",
-    position: "top",
-    ...xAxis,
-    nameProps: {
-      location: "center",
-      padding: xAxis?.nameProps?.location == null || xAxis?.nameProps?.location === "center" ? xAxis?.position === "bottom" ? [30, 0, 0, 0] : [0, 0, 30, 0] : void 0,
-      ...xAxis?.nameProps
-    },
-    data: chartData.array(groupByKey)
-  });
-  const chartSeries = utils.useSeries({
-    data: chartData,
-    filterKey: groupByKey,
-    valuesProps,
-    delta: !!(delta && colorScale == null)
-  });
-  const chartGridLayout = utils.useGridLayout({
-    data: chartData,
-    format,
-    filterKey: groupByKey,
-    visualMapVisible: chartVisualMap.visualMap.show,
-    visualMapYPosition: chartVisualMap.visualMap.top,
-    xAxisPosition: chartXAxis.xAxis.position
-  });
-  const chartGrid = useGrid.useGrid({
-    // If sizes are provided, the grid size should automatically adapt to the values provided
-    width: width != null ? void 0 : chartGridLayout.size.width,
-    height: height != null ? void 0 : chartGridLayout.size.height,
-    ...chartGridLayout.padding,
-    ...grid
-  });
-  const size = react.useMemo(() => {
-    return {
-      width,
-      // Echarts has a problem were the height is always set to 300px
-      // Thus, we need to update the height to make sure the chart is not cut out
-      height: height ?? chartGridLayout.size.height + chartGridLayout.padding.bottom + chartGridLayout.padding.top
-    };
-  }, [
-    chartGridLayout.padding.bottom,
-    chartGridLayout.padding.top,
-    chartGridLayout.size.height,
-    height,
-    width
-  ]);
-  const option = useOption.useOption({
-    option: {
-      ...chartVisualMap,
-      ...chartTooltip,
-      ...chartGrid,
-      ...chartXAxis,
-      ...chartYAxis,
-      ...chartSeries
-    },
-    onOptionChange
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, { ref, option, ...size, ...others });
-});
-exports.HvConfusionMatrix = HvConfusionMatrix;

package/dist/cjs/ConfusionMatrix/ConfusionMatrix.styles.cjs

@@ -1,29 +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(
-  "HvConfusionMatrix",
-  {
-    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/ConfusionMatrix/utils.cjs

@@ -1,142 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useColorScale = ({
-  data,
-  delta,
-  custom,
-  filterKey
-}) => {
-  const { colors } = uikitReactUtils.useTheme();
-  const colorScale = react.useMemo(() => {
-    if (custom == null && delta) {
-      return;
-    }
-    if (custom && typeof custom[0] === "object") {
-      return {
-        pieces: custom.reduce((acc, curr) => {
-          acc.push({
-            ...curr,
-            color: colors?.[curr.color] || curr.color
-          });
-          return acc;
-        }, [])
-      };
-    }
-    const flatData = data.columnNames().filter((p) => p !== filterKey).reduce((acc, c) => {
-      acc.push(...data.array(c));
-      return acc;
-    }, []);
-    const max = Math.max(...flatData);
-    const min = Math.min(...flatData);
-    const parsedColors = custom?.map(
-      (c) => typeof c === "string" ? colors?.[c] || c : c.color
-    );
-    return {
-      colorScale: parsedColors || [colors?.textLight || "", colors?.cat3 || ""],
-      max,
-      min
-    };
-  }, [colors, custom, data, filterKey, delta]);
-  return colorScale;
-};
-const useSeries = ({
-  data,
-  filterKey,
-  delta,
-  valuesProps
-}) => {
-  const { colors } = uikitReactUtils.useTheme();
-  const getDeltaColor = react.useCallback(
-    (value, diagonal) => {
-      if (diagonal && value > 0 || !diagonal && value < 0) {
-        return colors?.positive;
-      }
-      if (diagonal && value < 0 || !diagonal && value > 0) {
-        return colors?.negative;
-      }
-      return colors?.textLight;
-    },
-    [colors]
-  );
-  const chartSeries = react.useMemo(() => {
-    return {
-      series: {
-        id: `series~${filterKey}`,
-        type: "heatmap",
-        label: {
-          show: true,
-          ...valuesProps,
-          ...valuesProps?.color && {
-            color: colors?.[valuesProps.color] || valuesProps.color
-          }
-        },
-        emphasis: {
-          disabled: true
-        },
-        data: data.columnNames().filter((p) => p !== filterKey).reduce((acc, c, j) => {
-          const row = data.array(c).reduce((racc, rv, i) => {
-            racc.push({
-              value: [data.array(filterKey)[i], c, rv != null ? rv : "-"],
-              ...delta && {
-                visualMap: false,
-                itemStyle: {
-                  color: getDeltaColor(rv, i === j)
-                }
-              }
-            });
-            return racc;
-          }, []);
-          acc.push(...row);
-          return acc;
-        }, [])
-      }
-    };
-  }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);
-  return chartSeries;
-};
-const SQUARE_SIZE = 52;
-const useGridLayout = ({
-  data,
-  filterKey,
-  format,
-  xAxisPosition,
-  visualMapVisible,
-  visualMapYPosition
-}) => {
-  const size = react.useMemo(() => {
-    const nCols = data.array(filterKey).length;
-    const nRows = data.columnNames().filter((p) => p !== filterKey).length;
-    const itemHeight = format === "square" ? SQUARE_SIZE : SQUARE_SIZE / 2;
-    return {
-      padding: {
-        bottom: xAxisPosition === "bottom" || visualMapVisible && visualMapYPosition === "bottom" ? 60 : 20,
-        top: xAxisPosition === "top" || visualMapVisible && visualMapYPosition === "top" ? 60 : 20,
-        ...visualMapVisible && visualMapYPosition === "bottom" && xAxisPosition === "bottom" && {
-          bottom: 100
-        },
-        ...visualMapVisible && visualMapYPosition === "top" && xAxisPosition === "top" && {
-          top: 100
-        },
-        left: 80,
-        right: 80
-      },
-      size: {
-        height: Math.max(itemHeight * nRows, itemHeight * 8),
-        width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8)
-      }
-    };
-  }, [
-    data,
-    filterKey,
-    format,
-    visualMapVisible,
-    visualMapYPosition,
-    xAxisPosition
-  ]);
-  return size;
-};
-exports.useColorScale = useColorScale;
-exports.useGridLayout = useGridLayout;
-exports.useSeries = useSeries;

package/dist/cjs/DonutChart/DonutChart.cjs

@@ -1,111 +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 useSeries = require("../hooks/useSeries.cjs");
-const useLegend = require("../hooks/useLegend.cjs");
-const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
-const useGrid = require("../hooks/useGrid.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.PieChart,
-  components.DatasetComponent,
-  components.GridComponent,
-  components.TooltipComponent,
-  components.LegendComponent
-]);
-const HvDonutChart = react.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.useData({
-      data,
-      groupBy,
-      measures,
-      sortBy,
-      filters
-    });
-    const chartDataset = useDataset.useDataset(chartData);
-    const chartSeries = useSeries.useSeries({
-      type: "pie",
-      data: chartData,
-      groupBy,
-      measuresMapping,
-      radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
-    });
-    const chartLegend = useLegend.useLegend({
-      ...legend,
-      show: legend?.show ?? true,
-      icon: "square",
-      series: chartSeries.series,
-      formatter: slicesNameFormatter
-    });
-    const chartTooltip = useTooltip.useTooltip({
-      ...tooltip,
-      measuresMapping,
-      classes,
-      nameFormatter: slicesNameFormatter
-    });
-    const chartGrid = useGrid.useGrid({ ...grid });
-    const option = useOption.useOption({
-      option: {
-        ...chartSeries,
-        ...chartDataset,
-        ...chartLegend,
-        ...chartTooltip,
-        ...chartGrid
-      },
-      onOptionChange
-    });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseChart.HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-exports.HvDonutChart = HvDonutChart;

package/dist/cjs/Heatmap/Heatmap.cjs

@@ -1,127 +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 uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const Heatmap_styles = require("./Heatmap.styles.cjs");
-const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
-const useXAxis = require("../hooks/useXAxis.cjs");
-const useYAxis = require("../hooks/useYAxis.cjs");
-const useVisualMap = require("../hooks/useVisualMap.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.HeatmapChart, components.TooltipComponent, components.VisualMapComponent]);
-const HvHeatmap = react.forwardRef(
-  function HvHeatmap2(props, ref) {
-    const {
-      name,
-      data,
-      min,
-      max,
-      colorScale,
-      xAxis,
-      yAxis,
-      classes: classesProp,
-      tooltip,
-      width,
-      height,
-      onOptionChange,
-      ...others
-    } = props;
-    const { classes } = Heatmap_styles.useClasses(classesProp);
-    const { colors } = uikitReactUtils.useTheme();
-    const chartTooltip = useTooltip.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>
-              <p class="${classes.tooltipText}">${title}</p>
-              <p class="${classes.tooltipText}">${valueToShow}</p>
-              </div>
-            </div>
-          </div>`;
-      },
-      ...tooltip
-    });
-    const chartXAxis = useXAxis.useXAxis({ type: "categorical", ...xAxis });
-    const chartYAxis = useYAxis.useYAxis({
-      defaultType: "categorical",
-      axes: yAxis ? [yAxis] : []
-    });
-    const convertedColors = colorScale?.map(
-      (color) => colors?.[color] || color
-    );
-    const chartVisualMap = useVisualMap.useVisualMap({
-      min,
-      max,
-      orient: "horizontal",
-      left: "center",
-      calculable: true,
-      position: {
-        y: "bottom"
-      },
-      colorScale: convertedColors || ["#2D4B87", "#95AFE8", "#E7EDF9"]
-    });
-    const option = useOption.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__ */ jsxRuntime.jsx(
-      BaseChart.HvBaseChart,
-      {
-        ref,
-        option,
-        width,
-        height,
-        ...others
-      }
-    );
-  }
-);
-exports.HvHeatmap = HvHeatmap;

package/dist/cjs/Heatmap/Heatmap.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("HvHeatmap", {
-  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;