@hitachivantara/uikit-react-viz 5.8.0 → 5.9.0

package/dist/cjs/Treemap/Treemap.cjs

@@ -0,0 +1,77 @@
+"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 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.TreemapChart, components.TooltipComponent]);
+const HvTreemapChart = react.forwardRef(
+  (props, ref) => {
+    const {
+      name,
+      data,
+      classes,
+      width,
+      height,
+      tooltip,
+      onOptionChange,
+      ...others
+    } = props;
+    const chartTooltip = useTooltip.useTooltip({
+      ...tooltip,
+      type: "single",
+      classes
+    });
+    const option = useOption.useOption({
+      option: {
+        title: {
+          text: name,
+          left: "center"
+        },
+        series: [
+          {
+            name,
+            type: "treemap",
+            data
+          }
+        ],
+        ...chartTooltip
+      },
+      onOptionChange
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseChart.HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
+  }
+);
+exports.HvTreemapChart = HvTreemapChart;

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

@@ -18,15 +18,15 @@ const useTooltip = ({
   const { classes: hvClasses } = styles.useClasses(classes);
   const renderTooltip = react.useCallback(
     (params) => {
-      const title = 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].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].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].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].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
-        const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+        const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? 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]];
+        const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
         return `
             <div class="${hvClasses?.singleTooltipRoot}">
               <p class="${hvClasses?.singleTooltipTitle}">${formattedTitle}</p>
@@ -79,12 +79,12 @@ const useTooltip = ({
     (params) => {
       if (typeof component === "function") {
         const values = {
-          title: params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
+          title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? 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,
-              name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" ? p.name : p.seriesName,
-              value: p.seriesType === "pie" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
+              name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
+              value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
             };
           })
         };

package/dist/cjs/index.cjs

@@ -4,6 +4,7 @@ const Provider = require("./providers/Provider.cjs");
 const LineChart = require("./LineChart/LineChart.cjs");
 const BarChart = require("./BarChart/BarChart.cjs");
 const DonutChart = require("./DonutChart/DonutChart.cjs");
+const Treemap = require("./Treemap/Treemap.cjs");
 const ConfusionMatrix = require("./ConfusionMatrix/ConfusionMatrix.cjs");
 const ScatterPlot = require("./ScatterPlot/ScatterPlot.cjs");
 exports.HvVizContext = Provider.HvVizContext;
@@ -11,5 +12,6 @@ exports.HvVizProvider = Provider.HvVizProvider;
 exports.HvLineChart = LineChart.HvLineChart;
 exports.HvBarChart = BarChart.HvBarChart;
 exports.HvDonutChart = DonutChart.HvDonutChart;
+exports.HvTreemapChart = Treemap.HvTreemapChart;
 exports.HvConfusionMatrix = ConfusionMatrix.HvConfusionMatrix;
 exports.HvScatterPlot = ScatterPlot.HvScatterPlot;

package/dist/cjs/utils/registerTheme.cjs

@@ -125,6 +125,16 @@ const registerTheme = (name, mode, themeStructure) => {
         borderColor: themeStructure?.colors.modes[mode].atmo3,
         borderWidth: 1
       }
+    },
+    treemap: {
+      breadcrumb: {
+        itemStyle: {
+          color: themeStructure?.colors.modes[mode].secondary,
+          textStyle: {
+            color: themeStructure?.colors.modes[mode].atmo1
+          }
+        }
+      }
     }
   });
 };

package/dist/esm/Treemap/Treemap.js

@@ -0,0 +1,58 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { TreemapChart } from "echarts/charts";
+import { TooltipComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { useTooltip } from "../hooks/tooltip/useTooltip.js";
+import { useOption } from "../hooks/useOption.js";
+import { HvBaseChart } from "../BaseChart/BaseChart.js";
+echarts.use([TreemapChart, TooltipComponent]);
+const HvTreemapChart = forwardRef(
+  (props, ref) => {
+    const {
+      name,
+      data,
+      classes,
+      width,
+      height,
+      tooltip,
+      onOptionChange,
+      ...others
+    } = props;
+    const chartTooltip = useTooltip({
+      ...tooltip,
+      type: "single",
+      classes
+    });
+    const option = useOption({
+      option: {
+        title: {
+          text: name,
+          left: "center"
+        },
+        series: [
+          {
+            name,
+            type: "treemap",
+            data
+          }
+        ],
+        ...chartTooltip
+      },
+      onOptionChange
+    });
+    return /* @__PURE__ */ jsx(
+      HvBaseChart,
+      {
+        ref,
+        option,
+        width,
+        height,
+        ...others
+      }
+    );
+  }
+);
+export {
+  HvTreemapChart
+};

package/dist/esm/Treemap/Treemap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Treemap.js","sources":["../../../src/Treemap/Treemap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { TreemapChart } from \"echarts/charts\";\nimport { TooltipComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartTooltipClasses, useOption, useTooltip } from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps } from \"../types/common\";\n\n// Register chart components\necharts.use([TreemapChart, TooltipComponent]);\n\nexport type HvTreemapData = {\n  [propName: string]:\n    | string\n    | number\n    | number[]\n    | HvTreemapData[]\n    | undefined\n    | null;\n  children?: HvTreemapData[];\n  name?: string;\n  value?: number[];\n};\n\nexport interface HvTreemapChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvTreemapChartProps\n  extends Omit<\n    HvChartCommonProps,\n    \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\"\n  > {\n  /** The name of the treemap */\n  name?: string;\n  /** The data to use on the treemap */\n  data?: HvTreemapData[];\n  /** The tooltip options. */\n  tooltip?: Omit<HvChartTooltip, \"type\">;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvTreemapChartClasses;\n}\n\n/**\n * A tree map chart visually represents hierarchical data using nested rectangles, with each rectangle's size proportional to the value it represents.\n */\nexport const HvTreemapChart = forwardRef<ReactECharts, HvTreemapChartProps>(\n  (props, ref) => {\n    const {\n      name,\n      data,\n      classes,\n      width,\n      height,\n      tooltip,\n      onOptionChange,\n      ...others\n    } = props;\n\n    const chartTooltip = useTooltip({\n      ...tooltip,\n      type: \"single\",\n      classes,\n    });\n\n    const option = useOption({\n      option: {\n        title: {\n          text: name,\n          left: \"center\",\n        },\n        series: [\n          {\n            name,\n            type: \"treemap\",\n            data,\n          },\n        ],\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":";;;;;;;;AAYA,QAAQ,IAAI,CAAC,cAAc,gBAAgB,CAAC;AAmCrC,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,eAAe,WAAW;AAAA,MAC9B,GAAG;AAAA,MACH,MAAM;AAAA,MACN;AAAA,IAAA,CACD;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,OAAO;AAAA,UACL,MAAM;AAAA,UACN,MAAM;AAAA,QACR;AAAA,QACA,QAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,UACF;AAAA,QACF;AAAA,QACA,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/hooks/tooltip/useTooltip.js

@@ -16,15 +16,15 @@ const useTooltip = ({
   const { classes: hvClasses } = useClasses(classes);
   const renderTooltip = useCallback(
     (params) => {
-      const title = 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].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 = getMeasure(
-          params[0].seriesType === "pie" ? 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].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].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
-        const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+        const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? 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]];
+        const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
         return `
             <div class="${hvClasses?.singleTooltipRoot}">
               <p class="${hvClasses?.singleTooltipTitle}">${formattedTitle}</p>
@@ -77,12 +77,12 @@ const useTooltip = ({
     (params) => {
       if (typeof component === "function") {
         const values = {
-          title: params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
+          title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? 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,
-              name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" ? p.name : p.seriesName,
-              value: p.seriesType === "pie" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
+              name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
+              value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
             };
           })
         };

package/dist/esm/hooks/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartTooltip,\n  HvChartTooltipParams,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n  HvScatterPlotMeasure,\n} from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure } from \"../../utils\";\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n  seriesName: string;\n  value: (string | number)[];\n  encode: { [key: string]: number[] };\n  color: string;\n  dimensionNames: string[];\n  name: string;\n  seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n  measures?:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure;\n  trigger?: \"item\" | \"axis\";\n  classes?: HvChartTooltipClasses;\n  horizontal?: boolean;\n  show?: HvChartTooltip[\"show\"];\n  type?: HvChartTooltip[\"type\"];\n  component?: HvChartTooltip[\"component\"];\n  valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n  titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n  nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n  measures = [],\n  classes,\n  component,\n  show = true,\n  horizontal = false,\n  trigger = \"item\",\n  type = \"multiple\",\n  valueFormatter,\n  titleFormatter,\n  nameFormatter,\n}: HvTooltipHookProps) => {\n  const { classes: hvClasses } = useClasses(classes);\n\n  const renderTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      const title =\n        params[0].seriesType === \"pie\"\n          ? params[0].seriesName\n          : horizontal\n            ? params[0].value[params[0].encode.y[0]]\n            : params[0].value[params[0].encode.x[0]];\n\n      const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n      if (type === \"single\") {\n        const measure = getMeasure(\n          params[0].seriesType === \"pie\"\n            ? params[0].name\n            : horizontal\n              ? params[0].dimensionNames[params[0].encode.x[0]]\n              : params[0].dimensionNames[params[0].encode.y[0]],\n          measures,\n        );\n\n        const value =\n          params[0].seriesType === \"pie\"\n            ? params[0].value[params[0].encode.value[0]]\n            : horizontal\n              ? params[0].value[params[0].encode.x[0]]\n              : params[0].value[params[0].encode.y[0]];\n\n        const formattedValue =\n          typeof measure !== \"string\" && measure.valueFormatter\n            ? measure.valueFormatter(value)\n            : valueFormatter\n              ? valueFormatter(value)\n              : value;\n\n        return `\n            <div class=\"${hvClasses?.singleTooltipRoot}\">\n              <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n              <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n            </div>\n            `;\n      }\n\n      return `\n        <div class=\"${hvClasses?.multipleTooltipRoot}\">\n          <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n            <div>\n              <p class=\"${\n                hvClasses?.multipleTooltipTitle\n              }\">${formattedTitle}</p>\n            </div>\n          </div>\n          <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n            ${params\n              .map((s) => {\n                const measure = getMeasure(\n                  s.seriesType === \"pie\"\n                    ? s.name\n                    : horizontal\n                      ? s.dimensionNames[s.encode.x[0]]\n                      : s.dimensionNames[s.encode.y[0]],\n                  measures,\n                );\n\n                const value =\n                  s.seriesType === \"pie\"\n                    ? s.value[s.encode.value[0]]\n                    : horizontal\n                      ? s.value[s.encode.x[0]]\n                      : s.value[s.encode.y[0]];\n\n                const formattedValue =\n                  typeof measure !== \"string\" && measure.valueFormatter\n                    ? measure.valueFormatter(value)\n                    : valueFormatter\n                      ? valueFormatter(value)\n                      : value;\n\n                const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n                const formattedName = nameFormatter\n                  ? nameFormatter(name)\n                  : name;\n\n                return `\n                <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n                  <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n                    <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n                    <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n                  </div>\n                  <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n                </div>\n              `;\n              })\n              .join(\" \")}\n          </div>\n        </div>\n        `;\n    },\n    [\n      hvClasses,\n      horizontal,\n      type,\n      measures,\n      nameFormatter,\n      titleFormatter,\n      valueFormatter,\n    ],\n  );\n\n  const renderCustomTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      if (typeof component === \"function\") {\n        const values: HvChartTooltipParams = {\n          title:\n            params[0].seriesType === \"pie\"\n              ? params[0].seriesName\n              : horizontal\n                ? params[0].value[params[0].encode.y[0]]\n                : params[0].value[params[0].encode.x[0]],\n          series: params.map((p) => {\n            return {\n              color: p.color,\n              name:\n                p.seriesType === \"heatmap\"\n                  ? String(p.value[p.encode.y[0]])\n                  : p.seriesType === \"pie\"\n                    ? p.name\n                    : p.seriesName,\n              value:\n                p.seriesType === \"pie\" || p.seriesType === \"heatmap\"\n                  ? p.value[p.encode.value[0]]\n                  : horizontal\n                    ? p.value[p.encode.x[0]]\n                    : p.value[p.encode.y[0]],\n            };\n          }),\n        };\n\n        return component(values);\n      }\n\n      return component;\n    },\n    [component, horizontal],\n  );\n\n  const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n    return {\n      tooltip: {\n        confine: false,\n        show,\n        trigger,\n        position: (point, params, dom, rect, size) => {\n          return [point[0], point[1] - size.contentSize[1]];\n        },\n        formatter: (params) => {\n          const tooltipParams = Array.isArray(params) ? params : [params];\n\n          return component\n            ? renderCustomTooltip(tooltipParams)\n            : renderTooltip(tooltipParams);\n        },\n      },\n    };\n  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n  return option;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartTooltip,\n  HvChartTooltipParams,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n  HvScatterPlotMeasure,\n} from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure } from \"../../utils\";\nimport { useClasses } from \"./styles\";\n\nexport type HvChartTooltipClasses = ExtractNames<typeof useClasses>;\n\n/** Echarts doesn't seem to have the type for the tooltip params */\ninterface EChartsTooltipParams {\n  seriesName: string;\n  value: (string | number)[];\n  encode: { [key: string]: number[] };\n  color: string;\n  dimensionNames: string[];\n  name: string;\n  seriesType: string;\n}\n\ninterface HvTooltipHookProps {\n  measures?:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure;\n  trigger?: \"item\" | \"axis\";\n  classes?: HvChartTooltipClasses;\n  horizontal?: boolean;\n  show?: HvChartTooltip[\"show\"];\n  type?: HvChartTooltip[\"type\"];\n  component?: HvChartTooltip[\"component\"];\n  valueFormatter?: HvChartTooltip[\"valueFormatter\"];\n  titleFormatter?: HvChartTooltip[\"titleFormatter\"];\n  nameFormatter?: (value?: string) => string;\n}\n\nexport const useTooltip = ({\n  measures = [],\n  classes,\n  component,\n  show = true,\n  horizontal = false,\n  trigger = \"item\",\n  type = \"multiple\",\n  valueFormatter,\n  titleFormatter,\n  nameFormatter,\n}: HvTooltipHookProps) => {\n  const { classes: hvClasses } = useClasses(classes);\n\n  const renderTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      const title =\n        params[0].seriesType === \"treemap\"\n          ? params[0].name\n          : params[0].seriesType === \"pie\"\n            ? params[0].seriesName\n            : horizontal\n              ? params[0].value[params[0].encode.y[0]]\n              : params[0].value[params[0].encode.x[0]];\n\n      const formattedTitle = titleFormatter ? titleFormatter(title) : title;\n\n      if (type === \"single\") {\n        const measure = getMeasure(\n          params[0].seriesType === \"pie\" || params[0].seriesType === \"treemap\"\n            ? params[0].name\n            : horizontal\n              ? params[0].dimensionNames[params[0].encode.x[0]]\n              : params[0].dimensionNames[params[0].encode.y[0]],\n          measures,\n        );\n\n        const value =\n          params[0].seriesType === \"pie\" || params[0].seriesType === \"treemap\"\n            ? params[0].value[params[0].encode.value[0]]\n            : horizontal\n              ? params[0].value[params[0].encode.x[0]]\n              : params[0].value[params[0].encode.y[0]];\n\n        const formattedValue =\n          measure && typeof measure !== \"string\" && measure.valueFormatter\n            ? measure.valueFormatter(value)\n            : valueFormatter\n              ? valueFormatter(value)\n              : value;\n\n        return `\n            <div class=\"${hvClasses?.singleTooltipRoot}\">\n              <p class=\"${hvClasses?.singleTooltipTitle}\">${formattedTitle}</p>\n              <p class=\"${hvClasses?.singleTooltipValue}\">${formattedValue}</p>\n            </div>\n            `;\n      }\n\n      return `\n        <div class=\"${hvClasses?.multipleTooltipRoot}\">\n          <div class=\"${hvClasses?.multipleTooltipTitleContainer}\">\n            <div>\n              <p class=\"${\n                hvClasses?.multipleTooltipTitle\n              }\">${formattedTitle}</p>\n            </div>\n          </div>\n          <div class=\"${hvClasses?.multipleTooltipValuesContainer}\">\n            ${params\n              .map((s) => {\n                const measure = getMeasure(\n                  s.seriesType === \"pie\"\n                    ? s.name\n                    : horizontal\n                      ? s.dimensionNames[s.encode.x[0]]\n                      : s.dimensionNames[s.encode.y[0]],\n                  measures,\n                );\n\n                const value =\n                  s.seriesType === \"pie\"\n                    ? s.value[s.encode.value[0]]\n                    : horizontal\n                      ? s.value[s.encode.x[0]]\n                      : s.value[s.encode.y[0]];\n\n                const formattedValue =\n                  typeof measure !== \"string\" && measure.valueFormatter\n                    ? measure.valueFormatter(value)\n                    : valueFormatter\n                      ? valueFormatter(value)\n                      : value;\n\n                const name = s.seriesType === \"pie\" ? s.name : s.seriesName;\n\n                const formattedName = nameFormatter\n                  ? nameFormatter(name)\n                  : name;\n\n                return `\n                <div key=\"${s.seriesName}\" class=\"${hvClasses?.multipleTooltipSeriesContainer}\">\n                  <div class=\"${hvClasses?.multipleTooltipSeriesNameContainer}\">\n                    <p style=\"background-color: ${s.color};\" class=\"${hvClasses?.multipleTooltipSeriesColor}\" />\n                    <p class=\"${hvClasses?.multipleTooltipSeriesName}\">${formattedName}</p>\n                  </div>\n                  <p class=\"${hvClasses?.multipleTooltipSeriesValue}\">${formattedValue}</p>\n                </div>\n              `;\n              })\n              .join(\" \")}\n          </div>\n        </div>\n        `;\n    },\n    [\n      hvClasses,\n      horizontal,\n      type,\n      measures,\n      nameFormatter,\n      titleFormatter,\n      valueFormatter,\n    ],\n  );\n\n  const renderCustomTooltip = useCallback(\n    (params: EChartsTooltipParams[]) => {\n      if (typeof component === \"function\") {\n        const values: HvChartTooltipParams = {\n          title:\n            params[0].seriesType === \"pie\" || params[0].seriesType === \"treemap\"\n              ? params[0].seriesName\n              : horizontal\n                ? params[0].value[params[0].encode.y[0]]\n                : params[0].value[params[0].encode.x[0]],\n          series: params.map((p) => {\n            return {\n              color: p.color,\n              name:\n                p.seriesType === \"heatmap\"\n                  ? String(p.value[p.encode.y[0]])\n                  : p.seriesType === \"pie\" || p.seriesType === \"treemap\"\n                    ? p.name\n                    : p.seriesName,\n              value:\n                p.seriesType === \"pie\" ||\n                p.seriesType === \"treemap\" ||\n                p.seriesType === \"heatmap\"\n                  ? p.value[p.encode.value[0]]\n                  : horizontal\n                    ? p.value[p.encode.x[0]]\n                    : p.value[p.encode.y[0]],\n            };\n          }),\n        };\n\n        return component(values);\n      }\n\n      return component;\n    },\n    [component, horizontal],\n  );\n\n  const option = useMemo<Pick<HvEChartsOption, \"tooltip\">>(() => {\n    return {\n      tooltip: {\n        confine: false,\n        show,\n        trigger,\n        position: (point, params, dom, rect, size) => {\n          return [point[0], point[1] - size.contentSize[1]];\n        },\n        formatter: (params) => {\n          const tooltipParams = Array.isArray(params) ? params : [params];\n\n          return component\n            ? renderCustomTooltip(tooltipParams)\n            : renderTooltip(tooltipParams);\n        },\n      },\n    };\n  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);\n\n  return option;\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/hooks/useSeries.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { internal } from \"arquero\";\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n  ScatterSeriesOption,\n} from \"echarts/charts\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartEmptyCellMode,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"../types\";\nimport {\n  HvAxisChartCommonProps,\n  HvChartCommonProps,\n  HvEChartsOption,\n} from \"../types/common\";\nimport {\n  BarFullMeasure,\n  HvScatterPlotMeasure,\n  LineFullMeasure,\n  ScatterPlotMeasure,\n} from \"../types/measures\";\nimport { getGroupKey, getMeasure } from \"../utils\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\" | \"scatter\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure;\n  area?: boolean;\n  areaOpacity?: number;\n  emptyCellMode?: HvChartEmptyCellMode;\n  stack?: HvAxisChartCommonProps[\"stack\"];\n  nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n  horizontal?: boolean;\n  radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n  groupBy,\n  type,\n  data,\n  measures,\n  nameFormatter,\n  stack,\n  horizontal = false,\n  area = false,\n  areaOpacity = 0.5,\n  emptyCellMode,\n  radius,\n}: HvSeriesHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n    Pick<HvEChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map<\n          | LineSeriesOption\n          | BarSeriesOption\n          | PieSeriesOption\n          | ScatterSeriesOption\n        >((c) => {\n          const measure = getMeasure(c, measures);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\n          let scatterOps: ScatterSeriesOption = {};\n\n          // scatter\n          if (type === \"scatter\") {\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as ScatterPlotMeasure).yAxis\n                : undefined;\n            scatterOps = {\n              yAxisId,\n              encode: {\n                x: groupByKey,\n                y: c,\n              },\n            };\n          }\n\n          // pie\n          if (type === \"pie\") {\n            pieOps = {\n              encode: {\n                value: c,\n                itemName: groupByKey,\n              },\n              labelLine: {\n                show: false,\n              },\n              label: {\n                show: false,\n              },\n              emphasis: {\n                label: {\n                  show: false,\n                },\n              },\n              radius,\n            };\n          }\n\n          // line or bar\n          if (type === \"line\" || type === \"bar\") {\n            const sampling =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).stack ??\n                  stack ??\n                  undefined\n                : stack ?? undefined;\n\n            const axisOps = {\n              sampling,\n              yAxisId,\n              stack: stackName,\n              encode: horizontal\n                ? {\n                    x: c,\n                    y: groupByKey,\n                  }\n                : {\n                    x: groupByKey,\n                    y: c,\n                  },\n            };\n\n            // bar\n            if (type === \"bar\") {\n              barOps = {\n                ...axisOps,\n                barMaxWidth: 90,\n                barMinWidth: 3,\n              };\n            }\n\n            // line\n            if (type === \"line\") {\n              const showSymbol =\n                typeof measure !== \"string\"\n                  ? !(measure as LineFullMeasure).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasure).emptyCellMode\n                  ? (measure as LineFullMeasure).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).areaOpacity ?? areaOpacity\n                  : areaOpacity;\n\n              lineOps = {\n                ...axisOps,\n                connectNulls,\n                showSymbol,\n                areaStyle: isArea ? { opacity: aOpacity } : undefined,\n              };\n            }\n          }\n\n          return {\n            id: `series~${groupByKey}~${c}`,\n            type,\n            name: nameFormatter ? nameFormatter(c) : c,\n            ...pieOps,\n            ...barOps,\n            ...lineOps,\n            ...scatterOps,\n          } as\n            | LineSeriesOption\n            | BarSeriesOption\n            | PieSeriesOption\n            | ScatterSeriesOption;\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    measures,\n    type,\n    nameFormatter,\n    radius,\n    stack,\n    horizontal,\n    emptyCellMode,\n    area,\n    areaOpacity,\n  ]);\n\n  return option;\n};\n"],"names":[],"mappings":";;AA6CO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAKC,CAAC,MAAM;AACD,cAAA,UAAU,WAAW,GAAG,QAAQ;AAEtC,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAC9B,YAAI,aAAkC,CAAA;AAGtC,YAAI,SAAS,WAAW;AACtB,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+B,QAChC;AACO,uBAAA;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAAA,QAEJ;AAGA,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA6C,WAC9C;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA6C,QAC9C;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA6C,SAC9C,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA4B,aAC9B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA4B,gBACxB,QAA4B,kBAAkB,YAC/C,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA4B,QAAQ,OACrC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA4B,eAAe,cAC5C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CAKD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
+{"version":3,"file":"useSeries.js","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { internal } from \"arquero\";\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n  ScatterSeriesOption,\n} from \"echarts/charts\";\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartEmptyCellMode,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"../types\";\nimport {\n  HvAxisChartCommonProps,\n  HvChartCommonProps,\n  HvEChartsOption,\n} from \"../types/common\";\nimport {\n  BarFullMeasure,\n  HvScatterPlotMeasure,\n  LineFullMeasure,\n  ScatterPlotMeasure,\n} from \"../types/measures\";\nimport { getGroupKey, getMeasure } from \"../utils\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\" | \"scatter\" | \"treemap\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures | HvScatterPlotMeasure>\n    | HvDonutChartMeasure;\n  area?: boolean;\n  areaOpacity?: number;\n  emptyCellMode?: HvChartEmptyCellMode;\n  stack?: HvAxisChartCommonProps[\"stack\"];\n  nameFormatter?: HvAxisChartCommonProps[\"seriesNameFormatter\"];\n  horizontal?: boolean;\n  radius?: number | string | (number | string)[];\n}\n\nexport const useSeries = ({\n  groupBy,\n  type,\n  data,\n  measures,\n  nameFormatter,\n  stack,\n  horizontal = false,\n  area = false,\n  areaOpacity = 0.5,\n  emptyCellMode,\n  radius,\n}: HvSeriesHookProps) => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const option: Pick<HvEChartsOption, \"series\"> = useMemo<\n    Pick<HvEChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map<\n          | LineSeriesOption\n          | BarSeriesOption\n          | PieSeriesOption\n          | ScatterSeriesOption\n        >((c) => {\n          const measure = getMeasure(c, measures);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\n          let scatterOps: ScatterSeriesOption = {};\n\n          // scatter\n          if (type === \"scatter\") {\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as ScatterPlotMeasure).yAxis\n                : undefined;\n            scatterOps = {\n              yAxisId,\n              encode: {\n                x: groupByKey,\n                y: c,\n              },\n            };\n          }\n\n          // pie\n          if (type === \"pie\") {\n            pieOps = {\n              encode: {\n                value: c,\n                itemName: groupByKey,\n              },\n              labelLine: {\n                show: false,\n              },\n              label: {\n                show: false,\n              },\n              emphasis: {\n                label: {\n                  show: false,\n                },\n              },\n              radius,\n            };\n          }\n\n          // line or bar\n          if (type === \"line\" || type === \"bar\") {\n            const sampling =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasure | BarFullMeasure).stack ??\n                  stack ??\n                  undefined\n                : stack ?? undefined;\n\n            const axisOps = {\n              sampling,\n              yAxisId,\n              stack: stackName,\n              encode: horizontal\n                ? {\n                    x: c,\n                    y: groupByKey,\n                  }\n                : {\n                    x: groupByKey,\n                    y: c,\n                  },\n            };\n\n            // bar\n            if (type === \"bar\") {\n              barOps = {\n                ...axisOps,\n                barMaxWidth: 90,\n                barMinWidth: 3,\n              };\n            }\n\n            // line\n            if (type === \"line\") {\n              const showSymbol =\n                typeof measure !== \"string\"\n                  ? !(measure as LineFullMeasure).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasure).emptyCellMode\n                  ? (measure as LineFullMeasure).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasure).areaOpacity ?? areaOpacity\n                  : areaOpacity;\n\n              lineOps = {\n                ...axisOps,\n                connectNulls,\n                showSymbol,\n                areaStyle: isArea ? { opacity: aOpacity } : undefined,\n              };\n            }\n          }\n\n          return {\n            id: `series~${groupByKey}~${c}`,\n            type,\n            name: nameFormatter ? nameFormatter(c) : c,\n            ...pieOps,\n            ...barOps,\n            ...lineOps,\n            ...scatterOps,\n          } as\n            | LineSeriesOption\n            | BarSeriesOption\n            | PieSeriesOption\n            | ScatterSeriesOption;\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    measures,\n    type,\n    nameFormatter,\n    radius,\n    stack,\n    horizontal,\n    emptyCellMode,\n    area,\n    areaOpacity,\n  ]);\n\n  return option;\n};\n"],"names":[],"mappings":";;AA6CO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,cAAc;AAAA,EACd;AAAA,EACA;AACF,MAAyB;AACjB,QAAA,aAAa,YAAY,OAAO;AAEhC,QAAA,SAA0C,QAE9C,MAAM;AACC,WAAA;AAAA,MACL,QAAQ,KACL,YAAY,EACZ,OAAO,CAAC,MAAM,MAAM,UAAU,EAC9B,IAKC,CAAC,MAAM;AACD,cAAA,UAAU,WAAW,GAAG,QAAQ;AAEtC,YAAI,SAA0B,CAAA;AAC9B,YAAI,UAA4B,CAAA;AAChC,YAAI,SAA0B,CAAA;AAC9B,YAAI,aAAkC,CAAA;AAGtC,YAAI,SAAS,WAAW;AACtB,gBAAM,UACJ,OAAO,YAAY,WACd,QAA+B,QAChC;AACO,uBAAA;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAAA,QAEJ;AAGA,YAAI,SAAS,OAAO;AACT,mBAAA;AAAA,YACP,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,YACZ;AAAA,YACA,WAAW;AAAA,cACT,MAAM;AAAA,YACR;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,OAAO;AAAA,gBACL,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACA;AAAA,UAAA;AAAA,QAEJ;AAGI,YAAA,SAAS,UAAU,SAAS,OAAO;AACrC,gBAAM,WACJ,OAAO,YAAY,WACd,QAA6C,WAC9C;AACN,gBAAM,UACJ,OAAO,YAAY,WACd,QAA6C,QAC9C;AACA,gBAAA,YACJ,OAAO,YAAY,WACd,QAA6C,SAC9C,SACA,SACA,SAAS;AAEf,gBAAM,UAAU;AAAA,YACd;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YACP,QAAQ,aACJ;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YAAA,IAEL;AAAA,cACE,GAAG;AAAA,cACH,GAAG;AAAA,YACL;AAAA,UAAA;AAIN,cAAI,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAG;AAAA,cACH,aAAa;AAAA,cACb,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAI,SAAS,QAAQ;AACnB,kBAAM,aACJ,OAAO,YAAY,WACf,CAAE,QAA4B,aAC9B;AACA,kBAAA,eACJ,OAAO,YAAY,YAClB,QAA4B,gBACxB,QAA4B,kBAAkB,YAC/C,kBAAkB;AACxB,kBAAM,SACJ,OAAO,YAAY,WACd,QAA4B,QAAQ,OACrC;AACN,kBAAM,WACJ,OAAO,YAAY,WACd,QAA4B,eAAe,cAC5C;AAEI,sBAAA;AAAA,cACR,GAAG;AAAA,cACH;AAAA,cACA;AAAA,cACA,WAAW,SAAS,EAAE,SAAS,aAAa;AAAA,YAAA;AAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACL,IAAI,UAAU,UAAU,IAAI,CAAC;AAAA,UAC7B;AAAA,UACA,MAAM,gBAAgB,cAAc,CAAC,IAAI;AAAA,UACzC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,UACH,GAAG;AAAA,QAAA;AAAA,MACL,CAKD;AAAA,IAAA;AAAA,EACL,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}

package/dist/esm/index.js

@@ -2,6 +2,7 @@ import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
 import { HvLineChart } from "./LineChart/LineChart.js";
 import { HvBarChart } from "./BarChart/BarChart.js";
 import { HvDonutChart } from "./DonutChart/DonutChart.js";
+import { HvTreemapChart } from "./Treemap/Treemap.js";
 import { HvConfusionMatrix } from "./ConfusionMatrix/ConfusionMatrix.js";
 import { HvScatterPlot } from "./ScatterPlot/ScatterPlot.js";
 export {
@@ -10,6 +11,7 @@ export {
   HvDonutChart,
   HvLineChart,
   HvScatterPlot,
+  HvTreemapChart,
   HvVizContext,
   HvVizProvider
 };

package/dist/esm/index.js.map

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

package/dist/esm/utils/registerTheme.js

@@ -104,6 +104,16 @@ const registerTheme = (name, mode, themeStructure) => {
         borderColor: themeStructure?.colors.modes[mode].atmo3,
         borderWidth: 1
       }
+    },
+    treemap: {
+      breadcrumb: {
+        itemStyle: {
+          color: themeStructure?.colors.modes[mode].secondary,
+          textStyle: {
+            color: themeStructure?.colors.modes[mode].atmo1
+          }
+        }
+      }
     }
   });
 };

package/dist/esm/utils/registerTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import * as echarts from \"echarts/core\";\nimport { HvTheme } from \"@hitachivantara/uikit-react-core\";\n\nexport const registerTheme = (\n  name: string,\n  mode: string,\n  themeStructure?: HvTheme,\n) => {\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      color: themeStructure?.colors.modes[mode].secondary_80,\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(`${name}-${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      themeStructure?.colors.modes[mode].cat7,\n      themeStructure?.colors.modes[mode].cat8,\n      themeStructure?.colors.modes[mode].cat9,\n      themeStructure?.colors.modes[mode].cat10,\n      themeStructure?.colors.modes[mode].cat11,\n      themeStructure?.colors.modes[mode].cat12,\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    visualMap: {\n      textStyle: {\n        ...baseText,\n      },\n    },\n    heatmap: {\n      label: {\n        fontWeight: baseText.fontWeight,\n        fontSize: baseText.fontSize,\n        fontFamily: baseText.fontFamily,\n      },\n      itemStyle: {\n        borderColor: themeStructure?.colors.modes[mode].atmo3,\n        borderWidth: 1,\n      },\n    },\n  });\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import * as echarts from \"echarts/core\";\nimport { HvTheme } from \"@hitachivantara/uikit-react-core\";\n\nexport const registerTheme = (\n  name: string,\n  mode: string,\n  themeStructure?: HvTheme,\n) => {\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      color: themeStructure?.colors.modes[mode].secondary_80,\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(`${name}-${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      themeStructure?.colors.modes[mode].cat7,\n      themeStructure?.colors.modes[mode].cat8,\n      themeStructure?.colors.modes[mode].cat9,\n      themeStructure?.colors.modes[mode].cat10,\n      themeStructure?.colors.modes[mode].cat11,\n      themeStructure?.colors.modes[mode].cat12,\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    visualMap: {\n      textStyle: {\n        ...baseText,\n      },\n    },\n    heatmap: {\n      label: {\n        fontWeight: baseText.fontWeight,\n        fontSize: baseText.fontSize,\n        fontFamily: baseText.fontFamily,\n      },\n      itemStyle: {\n        borderColor: themeStructure?.colors.modes[mode].atmo3,\n        borderWidth: 1,\n      },\n    },\n    treemap: {\n      breadcrumb: {\n        itemStyle: {\n          color: themeStructure?.colors.modes[mode].secondary,\n          textStyle: {\n            color: themeStructure?.colors.modes[mode].atmo1,\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -389,6 +389,32 @@ export declare interface HvScatterPlotProps extends HvChartCommonProps, Omit<HvA
     classes?: HvScatterPlotClasses;
 }
 
+/**
+ * A tree map chart visually represents hierarchical data using nested rectangles, with each rectangle's size proportional to the value it represents.
+ */
+export declare const HvTreemapChart: ForwardRefExoticComponent<HvTreemapChartProps & RefAttributes<ReactECharts>>;
+
+export declare interface HvTreemapChartClasses extends HvChartTooltipClasses {
+}
+
+export declare interface HvTreemapChartProps extends Omit<HvChartCommonProps, "data" | "groupBy" | "sortBy" | "grid" | "legend" | "tooltip"> {
+    /** The name of the treemap */
+    name?: string;
+    /** The data to use on the treemap */
+    data?: HvTreemapData[];
+    /** The tooltip options. */
+    tooltip?: Omit<HvChartTooltip, "type">;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvTreemapChartClasses;
+}
+
+export declare type HvTreemapData = {
+    [propName: string]: string | number | number[] | HvTreemapData[] | undefined | null;
+    children?: HvTreemapData[];
+    name?: string;
+    value?: number[];
+};
+
 export declare const HvVizContext: Context<HvVizContextValue>;
 
 export declare interface HvVizContextValue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Contributed React visualization components for the NEXT UI Kit.",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
-    "@hitachivantara/uikit-react-core": "^5.63.2"
+    "@hitachivantara/uikit-react-core": "^5.64.0"
   },
   "files": [
     "dist"
@@ -42,7 +42,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "ce608ffb66a649dba8171cecc942dc60e416d8ad",
+  "gitHead": "deb91297e6f26f90ba5e86e520ad96751fffb0ff",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {