@hitachivantara/uikit-react-viz 5.10.2 → 5.11.0

package/dist/cjs/BarChart/BarChart.cjs

@@ -57,6 +57,7 @@ const HvBarChart = react.forwardRef(
       groupBy,
       splitBy,
       sortBy,
+      filters,
       stack,
       seriesNameFormatter,
       measures,
@@ -68,7 +69,14 @@ const HvBarChart = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({ data, groupBy, sortBy, splitBy, measures });
+    const chartData = 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],

package/dist/cjs/Boxplot/Boxplot.cjs

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/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(
+  (props, ref) => {
+    const {
+      name,
+      data,
+      xAxis,
+      yAxis,
+      grid,
+      legend,
+      measures,
+      groupBy,
+      splitBy,
+      sortBy,
+      tooltip,
+      width,
+      height,
+      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 });
+    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

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

package/dist/cjs/Boxplot/useBoxplot.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useBoxplotData = require("./useBoxplotData.cjs");
+const useBoxplot = ({ data, groupBy, measures }) => {
+  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) => {
+          let field;
+          if (typeof value === "string") {
+            field = value;
+          } else {
+            field = value.field;
+          }
+          return {
+            ...acc,
+            [field]: typeof value === "string" ? void 0 : value.yAxis
+          };
+        },
+        {}
+      );
+    }
+    return { [measures.field]: measures.yAxis };
+  }, [measures]);
+  const chartData = useBoxplotData.useBoxplotData({
+    data,
+    groupBy,
+    measures: measuresFields
+  });
+  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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const arquero = require("arquero");
+const useBoxplotData = ({
+  data,
+  groupBy,
+  measures
+}) => {
+  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 uniqueGroupBy = new Set(tableData.array(groupBy || ""));
+    const results = {};
+    uniqueGroupBy.forEach((group) => {
+      results[group] = {};
+      Object.keys(measures).forEach((measure) => {
+        results[group][measure] = tableData.params({ group, groupBy }).filter((d, $) => d[$.groupBy] === $.group).array(measure);
+      });
+    });
+    return results;
+  }, [data, groupBy, measures]);
+  return chartData;
+};
+exports.useBoxplotData = useBoxplotData;

package/dist/cjs/ConfusionMatrix/ConfusionMatrix.cjs

@@ -48,6 +48,7 @@ const HvConfusionMatrix = react.forwardRef((props, ref) => {
     measure,
     sortBy,
     splitBy,
+    filters,
     grid,
     data: dataProp,
     tooltip,
@@ -72,6 +73,7 @@ const HvConfusionMatrix = react.forwardRef((props, ref) => {
     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({

package/dist/cjs/DonutChart/DonutChart.cjs

@@ -49,6 +49,7 @@ const HvDonutChart = react.forwardRef(
       tooltip,
       measure: measures,
       sortBy,
+      filters,
       grid,
       width,
       height,
@@ -57,7 +58,7 @@ const HvDonutChart = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({ data, groupBy, measures, sortBy });
+    const chartData = useData.useData({ data, groupBy, measures, sortBy, filters });
     const chartDataset = useDataset.useDataset(chartData);
     const chartSeries = useSeries.useSeries({
       type: "pie",

package/dist/cjs/LineChart/LineChart.cjs

@@ -59,6 +59,7 @@ const HvLineChart = react.forwardRef(
       groupBy,
       splitBy,
       sortBy,
+      filters,
       measures,
       stack,
       seriesNameFormatter,
@@ -70,7 +71,14 @@ const HvLineChart = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({ data, groupBy, measures, splitBy, sortBy });
+    const chartData = useData.useData({
+      data,
+      groupBy,
+      measures,
+      splitBy,
+      sortBy,
+      filters
+    });
     const chartDataset = useDataset.useDataset(chartData);
     const chartYAxis = useYAxis.useYAxis({
       axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]

package/dist/cjs/ScatterPlot/ScatterPlot.cjs

@@ -56,6 +56,7 @@ const HvScatterPlot = react.forwardRef(
       groupBy,
       splitBy,
       sortBy,
+      filters,
       measures,
       seriesNameFormatter,
       legend,
@@ -66,7 +67,14 @@ const HvScatterPlot = react.forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData.useData({ data, groupBy, measures, splitBy, sortBy });
+    const chartData = useData.useData({
+      data,
+      groupBy,
+      measures,
+      splitBy,
+      sortBy,
+      filters
+    });
     const chartDataset = useDataset.useDataset(chartData);
     const chartYAxis = useYAxis.useYAxis({
       axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis]

package/dist/cjs/hooks/tooltip/useTooltip.cjs

@@ -18,11 +18,11 @@ const useTooltip = ({
   const { classes: hvClasses } = styles.useClasses(classes);
   const renderTooltip = react.useCallback(
     (params) => {
-      const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
+      const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
       const formattedTitle = titleFormatter ? titleFormatter(title) : title;
       if (type === "single") {
         const measure = index.getMeasure(
-          params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
+          params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" || params[0].seriesType === "boxplot" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
           measures
         );
         const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
@@ -79,7 +79,7 @@ const useTooltip = ({
     (params) => {
       if (typeof component === "function") {
         const values = {
-          title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
+          title: params[0].seriesType === "boxplot" ? params[0].name : params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
           series: params.map((p) => {
             return {
               color: p.color,

package/dist/cjs/hooks/useData.cjs

@@ -10,6 +10,7 @@ const useData = ({
   measures,
   sortBy,
   splitBy,
+  filters,
   delta
 }) => {
   const groupByKey = index.getGroupKey(groupBy);
@@ -92,6 +93,17 @@ const useData = ({
         { after: groupByFields[groupByFields.length - 1] }
       );
     }
+    if (filters) {
+      const filtersArray = Array.isArray(filters) ? filters : [filters];
+      const combinedFilterFunction = (row) => {
+        return filtersArray.every((filter) => {
+          const { field, operation, value } = filter;
+          const filterFunction = index.getFilterFunction(operation, field, value);
+          return filterFunction(row);
+        });
+      };
+      tableData = tableData.filter(arquero.escape(combinedFilterFunction));
+    }
     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)
@@ -101,7 +113,7 @@ const useData = ({
       tableData = tableData.select(arquero.not(...groupByFields));
     }
     return tableData;
-  }, [data, groupBy, splitBy, measures, sortBy, delta, groupByKey]);
+  }, [data, groupBy, splitBy, measures, sortBy, delta, filters, groupByKey]);
   return chartData;
 };
 exports.useData = useData;

package/dist/cjs/index.cjs

@@ -8,6 +8,7 @@ const Treemap = require("./Treemap/Treemap.cjs");
 const ConfusionMatrix = require("./ConfusionMatrix/ConfusionMatrix.cjs");
 const ScatterPlot = require("./ScatterPlot/ScatterPlot.cjs");
 const Heatmap = require("./Heatmap/Heatmap.cjs");
+const Boxplot = require("./Boxplot/Boxplot.cjs");
 exports.HvVizContext = Provider.HvVizContext;
 exports.HvVizProvider = Provider.HvVizProvider;
 exports.HvLineChart = LineChart.HvLineChart;
@@ -17,3 +18,4 @@ exports.HvTreemapChart = Treemap.HvTreemapChart;
 exports.HvConfusionMatrix = ConfusionMatrix.HvConfusionMatrix;
 exports.HvScatterPlot = ScatterPlot.HvScatterPlot;
 exports.HvHeatmap = Heatmap.HvHeatmap;
+exports.HvBoxplot = Boxplot.HvBoxplot;

package/dist/cjs/utils/index.cjs

@@ -34,7 +34,34 @@ const getMeasure = (name, msr) => {
     return m.field === measureName;
   }) ?? measuresArray[0];
 };
+const getFilterFunction = (operation, field, value) => {
+  switch (operation) {
+    case "is": {
+      const valueArray = Array.isArray(value) ? value : [value];
+      return (row) => valueArray.includes(row[field]);
+    }
+    case "isNot": {
+      const valueArray = Array.isArray(value) ? value : [value];
+      return (row) => !valueArray.includes(row[field]);
+    }
+    case "contains":
+      return (row) => row[field].includes(value);
+    case "greaterThan":
+      return (row) => row[field] > (Array.isArray(value) ? value[0] : value);
+    case "greaterThanOrEqual":
+      return (row) => row[field] >= (Array.isArray(value) ? value[0] : value);
+    case "lessThan":
+      return (row) => row[field] < (Array.isArray(value) ? value[0] : value);
+    case "lessThanOrEqual":
+      return (row) => row[field] <= (Array.isArray(value) ? value[0] : value);
+    case "between":
+      return (row) => row[field] >= value[0] && row[field] <= value[1];
+    default:
+      throw new Error("Unsupported operation");
+  }
+};
 exports.getAxisType = getAxisType;
+exports.getFilterFunction = getFilterFunction;
 exports.getGroupKey = getGroupKey;
 exports.getLegendIcon = getLegendIcon;
 exports.getMeasure = getMeasure;

package/dist/esm/BarChart/BarChart.js

@@ -36,6 +36,7 @@ const HvBarChart = forwardRef(
       groupBy,
       splitBy,
       sortBy,
+      filters,
       stack,
       seriesNameFormatter,
       measures,
@@ -47,7 +48,14 @@ const HvBarChart = forwardRef(
       onOptionChange,
       ...others
     } = props;
-    const chartData = useData({ data, groupBy, sortBy, splitBy, measures });
+    const chartData = useData({
+      data,
+      groupBy,
+      sortBy,
+      splitBy,
+      measures,
+      filters
+    });
     const chartDataset = useDataset(chartData);
     const chartYAxis = useYAxis({
       axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],

package/dist/esm/BarChart/BarChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvBarChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontal = false,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      stack,\n      seriesNameFormatter,\n      measures,\n      legend,\n      tooltip,\n      classes,\n      height,\n      width,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n      defaultType: horizontal ? \"categorical\" : \"continuous\",\n    });\n\n    const chartXAxis = useXAxis({\n      type: horizontal ? \"continuous\" : \"categorical\",\n      ...xAxis,\n    });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"bar\",\n      data: chartData,\n      groupBy,\n      measures,\n      stack,\n      nameFormatter: seriesNameFormatter,\n      horizontal,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n      icon: \"square\",\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n      horizontal,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEE,UAAA,YAAY,QAAQ,EAAE,MAAM,SAAS,QAAQ,SAAS,UAAU;AAEhE,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa,aAAa,gBAAgB;AAAA,IAAA,CAC3C;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,aAAa,eAAe;AAAA,MAClC,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,MACpB,MAAM;AAAA,IAAA,CACP;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
+{"version":3,"file":"BarChart.js","sources":["../../../src/BarChart/BarChart.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  DataZoomInsideComponent,\n  DataZoomSliderComponent,\n  GridComponent,\n  LegendComponent,\n  MarkLineComponent,\n  TooltipComponent,\n} from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useDataZoom,\n  useGrid,\n  useLegend,\n  useOption,\n  useSeries,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvBarChartMeasures } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([\n  BarChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n  MarkLineComponent,\n]);\n\nexport interface HvBarChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvBarChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBarChartMeasures>;\n  /** Whether the bar chart should be horizontal. Defaults to `false`. */\n  horizontal?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBarChartClasses;\n}\n\n/**\n * A bar chart is a chart or graph that presents categorical data with rectangular bars.\n */\nexport const HvBarChart = forwardRef<ReactECharts, HvBarChartProps>(\n  (props, ref) => {\n    const {\n      yAxis,\n      xAxis,\n      horizontal = false,\n      horizontalRangeSlider,\n      grid,\n      data,\n      groupBy,\n      splitBy,\n      sortBy,\n      filters,\n      stack,\n      seriesNameFormatter,\n      measures,\n      legend,\n      tooltip,\n      classes,\n      height,\n      width,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartData = useData({\n      data,\n      groupBy,\n      sortBy,\n      splitBy,\n      measures,\n      filters,\n    });\n\n    const chartDataset = useDataset(chartData);\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n      defaultType: horizontal ? \"categorical\" : \"continuous\",\n    });\n\n    const chartXAxis = useXAxis({\n      type: horizontal ? \"continuous\" : \"categorical\",\n      ...xAxis,\n    });\n\n    const chartSlider = useDataZoom({\n      showHorizontal: horizontalRangeSlider?.show,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartSeries = useSeries({\n      type: \"bar\",\n      data: chartData,\n      groupBy,\n      measures,\n      stack,\n      nameFormatter: seriesNameFormatter,\n      horizontal,\n    });\n\n    const chartLegend = useLegend({\n      ...legend,\n      series: chartSeries.series,\n      icon: \"square\",\n    });\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      trigger: \"axis\",\n      measures,\n      classes,\n      horizontal,\n    });\n\n    const option = useOption({\n      option: {\n        ...chartYAxis,\n        ...chartXAxis,\n        ...chartSlider,\n        ...chartGrid,\n        ...chartDataset,\n        ...chartSeries,\n        ...chartLegend,\n        ...chartTooltip,\n      },\n      onOptionChange,\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={option}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAiCA,QAAQ,IAAI;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAkBM,MAAM,aAAa;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,YAAY,QAAQ;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEK,UAAA,eAAe,WAAW,SAAS;AAEzC,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa,aAAa,gBAAgB;AAAA,IAAA,CAC3C;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,aAAa,eAAe;AAAA,MAClC,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,cAAc,YAAY;AAAA,MAC9B,gBAAgB,uBAAuB;AAAA,IAAA,CACxC;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,CACD;AAED,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,QAAQ,YAAY;AAAA,MACpB,MAAM;AAAA,IAAA,CACP;AAED,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Boxplot/Boxplot.js

@@ -0,0 +1,99 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { BoxplotChart } from "echarts/charts";
+import { TooltipComponent, VisualMapComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { useClasses } from "./Boxplot.styles.js";
+import { useBoxplot } from "./useBoxplot.js";
+import { useTooltip } from "../hooks/tooltip/useTooltip.js";
+import { useGrid } from "../hooks/useGrid.js";
+import { useLegend } from "../hooks/useLegend.js";
+import { useXAxis } from "../hooks/useXAxis.js";
+import { useYAxis } from "../hooks/useYAxis.js";
+import { useOption } from "../hooks/useOption.js";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
+echarts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);
+const HvBoxplot = forwardRef(
+  (props, ref) => {
+    const {
+      name,
+      data,
+      xAxis,
+      yAxis,
+      grid,
+      legend,
+      measures,
+      groupBy,
+      splitBy,
+      sortBy,
+      tooltip,
+      width,
+      height,
+      classes: classesProp,
+      onOptionChange,
+      ...others
+    } = props;
+    const { classes } = useClasses(classesProp);
+    const chartTooltip = 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({ ...grid });
+    const chartLegend = useLegend({
+      ...legend,
+      icon: "square"
+    });
+    const chartXAxis = useXAxis({
+      ...xAxis
+    });
+    const chartYAxis = useYAxis({
+      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],
+      defaultType: "continuous",
+      ...yAxis
+    });
+    const chartBoxplot = useBoxplot({ data, groupBy, measures });
+    const chartOption = useOption({
+      option: {
+        ...chartBoxplot,
+        ...chartGrid,
+        ...chartLegend,
+        ...chartTooltip,
+        ...chartXAxis,
+        ...chartYAxis
+      }
+    });
+    return /* @__PURE__ */ jsx(
+      HvBaseChart,
+      {
+        ref,
+        option: chartOption,
+        width,
+        height,
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvBoxplot
+};

package/dist/esm/Boxplot/Boxplot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Boxplot.js","sources":["../../../src/Boxplot/Boxplot.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { BoxplotChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n  useGrid,\n  useLegend,\n  useOption,\n  useTooltip,\n  useXAxis,\n  useYAxis,\n} from \"../hooks\";\nimport { HvBoxplotMeasure, HvChartTooltip } from \"../types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../types/common\";\nimport { useClasses } from \"./Boxplot.styles\";\nimport { useBoxplot } from \"./useBoxplot\";\n\n// Register chart components\necharts.use([BoxplotChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvBoxplotClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBoxplotProps\n  extends HvAxisChartCommonProps,\n    Omit<HvChartCommonProps, \"groupBy\"> {\n  /** The name of the heatmap */\n  name?: string;\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvBoxplotMeasure>;\n  /** Columns to use to group the data. */\n  groupBy?: string;\n  /** The tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\" | \"valueFormatter\" | \"titleFormatter\">;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBoxplotClasses;\n}\n\n/**\n * A Boxplot chart visually summarizes the distribution of a dataset by depicting key statistical measures such as the median, quartiles, and outliers.\n */\nexport const HvBoxplot = forwardRef<ReactECharts, HvBoxplotProps>(\n  (props, ref) => {\n    const {\n      name,\n      data,\n      xAxis,\n      yAxis,\n      grid,\n      legend,\n      measures,\n      groupBy,\n      splitBy,\n      sortBy,\n      tooltip,\n      width,\n      height,\n      classes: classesProp,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const { classes } = useClasses(classesProp);\n\n    const chartTooltip = useTooltip({\n      component: (params) => {\n        const title = params?.title;\n        const upper = params?.value?.[5];\n        const q3 = params?.value?.[4];\n        const median = params?.value?.[3];\n        const q1 = params?.value?.[2];\n        const lower = params?.value?.[1];\n\n        return `\n          <div class=\"${classes.tooltipRoot}\">\n            <div class=\"${classes.tooltipContainer}\">\n              <div>\n              <p class=\"${classes.tooltipText}\">${title}</p>\n              <p class=\"${classes.tooltipText}\">Upper: ${upper}</p>\n              <p class=\"${classes.tooltipText}\">Q3: ${q3}</p>\n              <p class=\"${classes.tooltipText}\">Median: ${median}</p>\n              <p class=\"${classes.tooltipText}\">Q1: ${q1}</p>\n              <p class=\"${classes.tooltipText}\">Lower: ${lower}</p>\n              </div>\n            </div>\n          </div>`;\n      },\n      ...tooltip,\n    });\n\n    const chartGrid = useGrid({ ...grid });\n\n    const chartLegend = useLegend({\n      ...legend,\n      icon: \"square\",\n    });\n\n    const chartXAxis = useXAxis({\n      ...xAxis,\n    });\n\n    const chartYAxis = useYAxis({\n      axes: Array.isArray(yAxis) || yAxis == null ? yAxis : [yAxis],\n      defaultType: \"continuous\",\n      ...yAxis,\n    });\n\n    const chartBoxplot = useBoxplot({ data, groupBy, measures });\n\n    const chartOption = useOption({\n      option: {\n        ...chartBoxplot,\n        ...chartGrid,\n        ...chartLegend,\n        ...chartTooltip,\n        ...chartXAxis,\n        ...chartYAxis,\n      },\n    });\n\n    return (\n      <HvBaseChart\n        ref={ref}\n        option={chartOption}\n        width={width}\n        height={height}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAsBzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAE1C,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AAChB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AACzB,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,SAAS,QAAQ,QAAQ,CAAC;AAC1B,cAAA,KAAK,QAAQ,QAAQ,CAAC;AACtB,cAAA,QAAQ,QAAQ,QAAQ,CAAC;AAExB,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,YAAY,KAAK;AAAA,0BACpC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,aAAa,MAAM;AAAA,0BACtC,QAAQ,WAAW,SAAS,EAAE;AAAA,0BAC9B,QAAQ,WAAW,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,MAIxD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,YAAY,QAAQ,EAAE,GAAG,KAAM,CAAA;AAErC,UAAM,cAAc,UAAU;AAAA,MAC5B,GAAG;AAAA,MACH,MAAM;AAAA,IAAA,CACP;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS;AAAA,MAC1B,MAAM,MAAM,QAAQ,KAAK,KAAK,SAAS,OAAO,QAAQ,CAAC,KAAK;AAAA,MAC5D,aAAa;AAAA,MACb,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,eAAe,WAAW,EAAE,MAAM,SAAS,UAAU;AAE3D,UAAM,cAAc,UAAU;AAAA,MAC5B,QAAQ;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}

package/dist/esm/Boxplot/Boxplot.styles.js

@@ -0,0 +1,25 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const { useClasses, staticClasses } = createClasses("HvBoxplot", {
+  tooltipRoot: {
+    backgroundColor: theme.colors.atmo1,
+    width: "fit-content",
+    minWidth: 150,
+    boxShadow: theme.colors.shadow,
+    zIndex: theme.zIndices.sticky
+  },
+  tooltipContainer: {
+    padding: theme.spacing("15px", "sm"),
+    display: "flex",
+    flexDirection: "column"
+  },
+  tooltipText: {
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.normal,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};

package/dist/esm/Boxplot/Boxplot.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Boxplot.styles.js","sources":["../../../src/Boxplot/Boxplot.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvBoxplot\", {\n  tooltipRoot: {\n    backgroundColor: theme.colors.atmo1,\n    width: \"fit-content\",\n    minWidth: 150,\n    boxShadow: theme.colors.shadow,\n    zIndex: theme.zIndices.sticky,\n  },\n  tooltipContainer: {\n    padding: theme.spacing(\"15px\", \"sm\"),\n    display: \"flex\",\n    flexDirection: \"column\",\n  },\n  tooltipText: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,YAAY,kBAAkB,cAAc,aAAa;AAAA,EACtE,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,IACnC,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa;AAAA,IACX,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}