@hitachivantara/uikit-react-viz 5.2.8 → 5.3.1

package/dist/cjs/hooks/useLegend.cjs

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const getLegendIcon = require("../utils/getLegendIcon.cjs");
+const useLegend = ({
+  series,
+  show,
+  icon,
+  formatter,
+  position: positionProp,
+  direction = "horizontal"
+}) => {
+  const option = react.useMemo(() => {
+    const position = {
+      y: (positionProp == null ? void 0 : positionProp.y) ?? "top"
+    };
+    if ((positionProp == null ? void 0 : positionProp.x) != null && (positionProp == null ? void 0 : positionProp.x) !== "center") {
+      position[positionProp.x] = positionProp.x;
+    } else {
+      position.x = "center";
+    }
+    return {
+      legend: {
+        show: show ?? (Array.isArray(series) && series.length > 1),
+        itemGap: 20,
+        formatter,
+        orient: direction,
+        ...position,
+        ...icon && {
+          icon: getLegendIcon.getLegendIcon(icon)
+        },
+        ...!icon && {
+          data: show !== false && Array.isArray(series) ? series.map((s) => {
+            return {
+              name: s.name,
+              icon: getLegendIcon.getLegendIcon(s.areaStyle != null ? "square" : "line")
+            };
+          }) : void 0
+        }
+      }
+    };
+  }, [series, show, icon, formatter, positionProp, direction]);
+  return option;
+};
+exports.useLegend = useLegend;
+//# sourceMappingURL=useLegend.cjs.map

package/dist/cjs/hooks/useLegend.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLegend.cjs","sources":["../../../src/hooks/useLegend.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { getLegendIcon } from \"@viz/utils\";\nimport { HvChartLegend, HvChartLegendIcon } from \"@viz/types/legend\";\n\ninterface HvLegendHookProps {\n  show?: HvChartLegend[\"show\"];\n  direction?: HvChartLegend[\"direction\"];\n  position?: HvChartLegend[\"position\"];\n  series?: Pick<EChartsOption, \"series.series\">;\n  icon?: HvChartLegendIcon;\n  formatter?: string | ((value?: string) => string);\n}\n\nexport const useLegend = ({\n  series,\n  show,\n  icon,\n  formatter,\n  position: positionProp,\n  direction = \"horizontal\",\n}: HvLegendHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"legend\">>(() => {\n    const position: Record<string, string> = { y: positionProp?.y ?? \"top\" };\n    if (positionProp?.x != null && positionProp?.x !== \"center\") {\n      position[positionProp.x] = positionProp.x;\n    } else {\n      position.x = \"center\";\n    }\n\n    return {\n      legend: {\n        show: show ?? (Array.isArray(series) && series.length > 1),\n        itemGap: 20,\n        formatter,\n        orient: direction,\n        ...position,\n        ...(icon && { icon: getLegendIcon(icon) }),\n        ...(!icon && {\n          data:\n            show !== false && Array.isArray(series)\n              ? series.map((s) => {\n                  return {\n                    name: s.name as string,\n                    icon: getLegendIcon(\n                      (s as any).areaStyle != null ? \"square\" : \"line\"\n                    ),\n                  };\n                })\n              : undefined,\n        }),\n      },\n    };\n  }, [series, show, icon, formatter, positionProp, direction]);\n\n  return option;\n};\n"],"names":["useLegend","series","show","icon","formatter","position","positionProp","direction","option","useMemo","y","x","legend","Array","isArray","length","itemGap","orient","getLegendIcon","data","map","s","name","areaStyle","undefined"],"mappings":";;;;AAgBO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAUC;AAAAA,EACVC,YAAY;AACK,MAAM;AACjBC,QAAAA,SAASC,MAAAA,QAAuC,MAAM;AAC1D,UAAMJ,WAAmC;AAAA,MAAEK,IAAGJ,6CAAcI,MAAK;AAAA,IAAA;AACjE,SAAIJ,6CAAcK,MAAK,SAAQL,6CAAcK,OAAM,UAAU;AAClDL,eAAAA,aAAaK,CAAC,IAAIL,aAAaK;AAAAA,IAAAA,OACnC;AACLN,eAASM,IAAI;AAAA,IACf;AAEO,WAAA;AAAA,MACLC,QAAQ;AAAA,QACNV,MAAMA,SAASW,MAAMC,QAAQb,MAAM,KAAKA,OAAOc,SAAS;AAAA,QACxDC,SAAS;AAAA,QACTZ;AAAAA,QACAa,QAAQV;AAAAA,QACR,GAAGF;AAAAA,QACH,GAAIF,QAAQ;AAAA,UAAEA,MAAMe,4BAAcf,IAAI;AAAA,QAAE;AAAA,QACxC,GAAI,CAACA,QAAQ;AAAA,UACXgB,MACEjB,SAAS,SAASW,MAAMC,QAAQb,MAAM,IAClCA,OAAOmB,IAAKC,CAAM,MAAA;AACT,mBAAA;AAAA,cACLC,MAAMD,EAAEC;AAAAA,cACRnB,MAAMe,cACHG,cAAAA,EAAUE,aAAa,OAAO,WAAW,MAC5C;AAAA,YAAA;AAAA,UAEH,CAAA,IACDC;AAAAA,QACR;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACvB,QAAQC,MAAMC,MAAMC,WAAWE,cAAcC,SAAS,CAAC;AAEpDC,SAAAA;AACT;;"}

package/dist/cjs/hooks/useSeries.cjs

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const getGroupKey = require("../utils/getGroupKey.cjs");
+const getMeasure = require("../utils/getMeasure.cjs");
+const useSeries = ({
+  groupBy,
+  type,
+  data,
+  measures,
+  nameFormatter,
+  stack,
+  horizontal = false,
+  area = false,
+  areaOpacity = 0.5,
+  emptyCellMode,
+  radius
+}) => {
+  const groupByKey = getGroupKey.getGroupKey(groupBy);
+  const option = react.useMemo(() => {
+    return {
+      series: data.columnNames().filter((c) => c !== groupByKey).map((c) => {
+        const measure = getMeasure.getMeasure(c, measures);
+        let pieOps = {};
+        let lineOps = {};
+        let barOps = {};
+        if (type === "pie") {
+          pieOps = {
+            encode: {
+              value: c,
+              itemName: groupByKey
+            },
+            labelLine: {
+              show: false
+            },
+            label: {
+              show: false
+            },
+            emphasis: {
+              label: {
+                show: false
+              }
+            },
+            radius
+          };
+        }
+        if (type === "line" || type === "bar") {
+          const sampling = typeof measure !== "string" ? measure.sampling : void 0;
+          const yAxisId = typeof measure !== "string" ? measure.yAxis : void 0;
+          const stackName = typeof measure !== "string" ? measure.stack ?? stack ?? void 0 : stack ?? void 0;
+          const axisOps = {
+            sampling,
+            yAxisId,
+            stack: stackName,
+            encode: horizontal ? {
+              x: c,
+              y: groupByKey
+            } : {
+              x: groupByKey,
+              y: c
+            }
+          };
+          if (type === "bar") {
+            barOps = {
+              ...axisOps,
+              barMaxWidth: 90,
+              barMinWidth: 3
+            };
+          }
+          if (type === "line") {
+            const showSymbol = typeof measure !== "string" ? !measure.hideSymbol : true;
+            const connectNulls = typeof measure !== "string" && measure.emptyCellMode ? measure.emptyCellMode === "connect" : emptyCellMode === "connect";
+            const isArea = typeof measure !== "string" ? measure.area ?? area : area;
+            const aOpacity = typeof measure !== "string" ? measure.areaOpacity ?? areaOpacity : areaOpacity;
+            lineOps = {
+              ...axisOps,
+              connectNulls,
+              showSymbol,
+              areaStyle: isArea ? {
+                opacity: aOpacity
+              } : void 0
+            };
+          }
+        }
+        return {
+          id: `series~${groupByKey}~${c}`,
+          type,
+          name: nameFormatter ? nameFormatter(c) : c,
+          ...pieOps,
+          ...barOps,
+          ...lineOps
+        };
+      })
+    };
+  }, [data, groupByKey, area, stack, nameFormatter, emptyCellMode, areaOpacity, measures, type, horizontal, radius]);
+  return option;
+};
+exports.useSeries = useSeries;
+//# sourceMappingURL=useSeries.cjs.map

package/dist/cjs/hooks/useSeries.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSeries.cjs","sources":["../../../src/hooks/useSeries.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\nimport {\n  BarSeriesOption,\n  LineSeriesOption,\n  PieSeriesOption,\n} from \"echarts/charts\";\n\nimport { internal } from \"arquero\";\n\nimport { getGroupKey, getMeasure } from \"@viz/utils\";\nimport {\n  HvBarChartMeasures,\n  HvChartEmptyCellMode,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\nimport { BarFullMeasures, LineFullMeasures } from \"@viz/types/measures\";\n\ninterface HvSeriesHookProps {\n  type: \"line\" | \"bar\" | \"pie\";\n  data: internal.ColumnTable;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\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<EChartsOption, \"series\"> = useMemo<\n    Pick<EChartsOption, \"series\">\n  >(() => {\n    return {\n      series: data\n        .columnNames()\n        .filter((c) => c !== groupByKey)\n        .map<LineSeriesOption | BarSeriesOption | PieSeriesOption>((c) => {\n          const measure = getMeasure(c, measures);\n\n          let pieOps: PieSeriesOption = {};\n          let lineOps: LineSeriesOption = {};\n          let barOps: BarSeriesOption = {};\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 LineFullMeasures | BarFullMeasures).sampling\n                : undefined;\n            const yAxisId =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).yAxis\n                : undefined;\n            const stackName =\n              typeof measure !== \"string\"\n                ? (measure as LineFullMeasures | BarFullMeasures).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 LineFullMeasures).hideSymbol\n                  : true;\n              const connectNulls =\n                typeof measure !== \"string\" &&\n                (measure as LineFullMeasures).emptyCellMode\n                  ? (measure as LineFullMeasures).emptyCellMode === \"connect\"\n                  : emptyCellMode === \"connect\";\n              const isArea =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasures).area ?? area\n                  : area;\n              const aOpacity =\n                typeof measure !== \"string\"\n                  ? (measure as LineFullMeasures).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          } as LineSeriesOption | BarSeriesOption | PieSeriesOption;\n        }),\n    };\n  }, [\n    data,\n    groupByKey,\n    area,\n    stack,\n    nameFormatter,\n    emptyCellMode,\n    areaOpacity,\n    measures,\n    type,\n    horizontal,\n    radius,\n  ]);\n\n  return option;\n};\n"],"names":["useSeries","groupBy","type","data","measures","nameFormatter","stack","horizontal","area","areaOpacity","emptyCellMode","radius","groupByKey","getGroupKey","option","useMemo","series","columnNames","filter","c","map","measure","getMeasure","pieOps","lineOps","barOps","encode","value","itemName","labelLine","show","label","emphasis","sampling","undefined","yAxisId","yAxis","stackName","axisOps","x","y","barMaxWidth","barMinWidth","showSymbol","hideSymbol","connectNulls","isArea","aOpacity","areaStyle","opacity","id","name"],"mappings":";;;;;AAuCO,MAAMA,YAAYA,CAAC;AAAA,EACxBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC,OAAO;AAAA,EACPC,cAAc;AAAA,EACdC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,aAAaC,wBAAYZ,OAAO;AAEhCa,QAAAA,SAAwCC,MAAAA,QAE5C,MAAM;AACC,WAAA;AAAA,MACLC,QAAQb,KACLc,YACAC,EAAAA,OAAQC,OAAMA,MAAMP,UAAU,EAC9BQ,IAA2DD,CAAM,MAAA;AAC1DE,cAAAA,UAAUC,WAAAA,WAAWH,GAAGf,QAAQ;AAEtC,YAAImB,SAA0B,CAAA;AAC9B,YAAIC,UAA4B,CAAA;AAChC,YAAIC,SAA0B,CAAA;AAG9B,YAAIvB,SAAS,OAAO;AACT,mBAAA;AAAA,YACPwB,QAAQ;AAAA,cACNC,OAAOR;AAAAA,cACPS,UAAUhB;AAAAA,YACZ;AAAA,YACAiB,WAAW;AAAA,cACTC,MAAM;AAAA,YACR;AAAA,YACAC,OAAO;AAAA,cACLD,MAAM;AAAA,YACR;AAAA,YACAE,UAAU;AAAA,cACRD,OAAO;AAAA,gBACLD,MAAM;AAAA,cACR;AAAA,YACF;AAAA,YACAnB;AAAAA,UAAAA;AAAAA,QAEJ;AAGIT,YAAAA,SAAS,UAAUA,SAAS,OAAO;AACrC,gBAAM+B,WACJ,OAAOZ,YAAY,WACdA,QAA+CY,WAChDC;AACN,gBAAMC,UACJ,OAAOd,YAAY,WACdA,QAA+Ce,QAChDF;AACAG,gBAAAA,YACJ,OAAOhB,YAAY,WACdA,QAA+Cf,SAChDA,SACA4B,SACA5B,SAAS4B;AAEf,gBAAMI,UAAU;AAAA,YACdL;AAAAA,YACAE;AAAAA,YACA7B,OAAO+B;AAAAA,YACPX,QAAQnB,aACJ;AAAA,cACEgC,GAAGpB;AAAAA,cACHqB,GAAG5B;AAAAA,YAAAA,IAEL;AAAA,cACE2B,GAAG3B;AAAAA,cACH4B,GAAGrB;AAAAA,YACL;AAAA,UAAA;AAIN,cAAIjB,SAAS,OAAO;AACT,qBAAA;AAAA,cACP,GAAGoC;AAAAA,cACHG,aAAa;AAAA,cACbC,aAAa;AAAA,YAAA;AAAA,UAEjB;AAGA,cAAIxC,SAAS,QAAQ;AACnB,kBAAMyC,aACJ,OAAOtB,YAAY,WACf,CAAEA,QAA6BuB,aAC/B;AACAC,kBAAAA,eACJ,OAAOxB,YAAY,YAClBA,QAA6BX,gBACzBW,QAA6BX,kBAAkB,YAChDA,kBAAkB;AACxB,kBAAMoC,SACJ,OAAOzB,YAAY,WACdA,QAA6Bb,QAAQA,OACtCA;AACN,kBAAMuC,WACJ,OAAO1B,YAAY,WACdA,QAA6BZ,eAAeA,cAC7CA;AAEI,sBAAA;AAAA,cACR,GAAG6B;AAAAA,cACHO;AAAAA,cACAF;AAAAA,cACAK,WAAWF,SAAS;AAAA,gBAAEG,SAASF;AAAAA,cAAab,IAAAA;AAAAA,YAAAA;AAAAA,UAEhD;AAAA,QACF;AAEO,eAAA;AAAA,UACLgB,IAAK,UAAStC,cAAcO;AAAAA,UAC5BjB;AAAAA,UACAiD,MAAM9C,gBAAgBA,cAAcc,CAAC,IAAIA;AAAAA,UACzC,GAAGI;AAAAA,UACH,GAAGE;AAAAA,UACH,GAAGD;AAAAA,QAAAA;AAAAA,MACL,CACD;AAAA,IAAA;AAAA,EAEJ,GAAA,CACDrB,MACAS,YACAJ,MACAF,OACAD,eACAK,eACAD,aACAL,UACAF,MACAK,YACAI,MAAM,CACP;AAEMG,SAAAA;AACT;;"}

package/dist/cjs/hooks/useVizTheme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useVizTheme.cjs","sources":["../../../src/hooks/useVizTheme.ts"],"sourcesContent":["import { HvVizContext, HvVizContextValue } from \"@viz/providers\";\nimport { useContext } from \"react\";\n\nexport const useVizTheme = (): HvVizContextValue => {\n  return useContext(HvVizContext);\n};\n"],"names":["useVizTheme","useContext","HvVizContext"],"mappings":";;;;AAGO,MAAMA,cAAcA,MAAyB;AAClD,SAAOC,MAAAA,WAAWC,SAAAA,YAAY;AAChC;;"}
+{"version":3,"file":"useVizTheme.cjs","sources":["../../../src/hooks/useVizTheme.ts"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvVizContext, HvVizContextValue } from \"@viz/providers\";\n\nexport const useVizTheme = (): HvVizContextValue => {\n  return useContext(HvVizContext);\n};\n"],"names":["useVizTheme","useContext","HvVizContext"],"mappings":";;;;AAIO,MAAMA,cAAcA,MAAyB;AAClD,SAAOC,MAAAA,WAAWC,SAAAA,YAAY;AAChC;;"}

package/dist/cjs/hooks/useXAxis.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const getAxisType = require("../utils/getAxisType.cjs");
+const useXAxis = ({
+  xAxis,
+  defaultType = "categorical",
+  scale = false
+}) => {
+  const option = react.useMemo(() => {
+    return {
+      xAxis: {
+        id: xAxis == null ? void 0 : xAxis.id,
+        type: getAxisType.getAxisType(xAxis == null ? void 0 : xAxis.type) ?? getAxisType.getAxisType(defaultType),
+        name: xAxis == null ? void 0 : xAxis.name,
+        scale,
+        axisLabel: {
+          rotate: (xAxis == null ? void 0 : xAxis.labelRotation) ?? 0,
+          formatter: xAxis == null ? void 0 : xAxis.labelFormatter
+        },
+        max: (xAxis == null ? void 0 : xAxis.maxValue) === "max" ? "dataMax" : xAxis == null ? void 0 : xAxis.maxValue,
+        min: (xAxis == null ? void 0 : xAxis.minValue) === "min" ? "dataMin" : xAxis == null ? void 0 : xAxis.minValue
+      }
+    };
+  }, [xAxis, scale, defaultType]);
+  return option;
+};
+exports.useXAxis = useXAxis;
+//# sourceMappingURL=useXAxis.cjs.map

package/dist/cjs/hooks/useXAxis.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvAxisChartCommonProps } from \"@viz/types/common\";\nimport { HvChartAxisType } from \"@viz/types\";\n\ninterface HvXAxisHookProps {\n  xAxis: HvAxisChartCommonProps[\"xAxis\"];\n  defaultType?: HvChartAxisType;\n  scale?: boolean;\n}\n\nexport const useXAxis = ({\n  xAxis,\n  defaultType = \"categorical\",\n  scale = false,\n}: HvXAxisHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\n    return {\n      xAxis: {\n        id: xAxis?.id,\n        type: getAxisType(xAxis?.type) ?? getAxisType(defaultType),\n        name: xAxis?.name,\n        scale,\n        axisLabel: {\n          rotate: xAxis?.labelRotation ?? 0,\n          formatter: xAxis?.labelFormatter,\n        },\n        max: xAxis?.maxValue === \"max\" ? \"dataMax\" : xAxis?.maxValue,\n        min: xAxis?.minValue === \"min\" ? \"dataMin\" : xAxis?.minValue,\n      },\n    };\n  }, [xAxis, scale, defaultType]);\n\n  return option;\n};\n"],"names":["useXAxis","xAxis","defaultType","scale","option","useMemo","id","type","getAxisType","name","axisLabel","rotate","labelRotation","formatter","labelFormatter","max","maxValue","min","minValue"],"mappings":";;;;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AAAA,EACdC,QAAQ;AACQ,MAAM;AAChBC,QAAAA,SAASC,MAAAA,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLJ,OAAO;AAAA,QACLK,IAAIL,+BAAOK;AAAAA,QACXC,MAAMC,YAAYP,YAAAA,+BAAOM,IAAI,KAAKC,YAAAA,YAAYN,WAAW;AAAA,QACzDO,MAAMR,+BAAOQ;AAAAA,QACbN;AAAAA,QACAO,WAAW;AAAA,UACTC,SAAQV,+BAAOW,kBAAiB;AAAA,UAChCC,WAAWZ,+BAAOa;AAAAA,QACpB;AAAA,QACAC,MAAKd,+BAAOe,cAAa,QAAQ,YAAYf,+BAAOe;AAAAA,QACpDC,MAAKhB,+BAAOiB,cAAa,QAAQ,YAAYjB,+BAAOiB;AAAAA,MACtD;AAAA,IAAA;AAAA,EAED,GAAA,CAACjB,OAAOE,OAAOD,WAAW,CAAC;AAEvBE,SAAAA;AACT;;"}

package/dist/cjs/hooks/useYAxis.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const getAxisType = require("../utils/getAxisType.cjs");
+const useYAxis = ({
+  yAxis,
+  defaultType = "continuous"
+}) => {
+  const option = react.useMemo(() => {
+    if (!yAxis || !Array.isArray(yAxis)) {
+      return {
+        yAxis: {
+          id: yAxis == null ? void 0 : yAxis.id,
+          type: getAxisType.getAxisType(yAxis == null ? void 0 : yAxis.type) ?? getAxisType.getAxisType(defaultType),
+          name: yAxis == null ? void 0 : yAxis.name,
+          axisLabel: {
+            rotate: (yAxis == null ? void 0 : yAxis.labelRotation) ?? 0,
+            formatter: yAxis == null ? void 0 : yAxis.labelFormatter
+          },
+          max: (yAxis == null ? void 0 : yAxis.maxValue) === "max" ? "dataMax" : yAxis == null ? void 0 : yAxis.maxValue,
+          min: (yAxis == null ? void 0 : yAxis.minValue) === "min" ? "dataMin" : yAxis == null ? void 0 : yAxis.minValue
+        }
+      };
+    }
+    return {
+      yAxis: yAxis.map((axis) => ({
+        id: axis == null ? void 0 : axis.id,
+        type: getAxisType.getAxisType(axis == null ? void 0 : axis.type) ?? "value",
+        name: axis == null ? void 0 : axis.name,
+        axisLabel: {
+          rotate: (axis == null ? void 0 : axis.labelRotation) ?? 0,
+          formatter: axis == null ? void 0 : axis.labelFormatter
+        },
+        max: (axis == null ? void 0 : axis.maxValue) === "max" ? "dataMax" : axis == null ? void 0 : axis.maxValue,
+        min: (axis == null ? void 0 : axis.minValue) === "min" ? "dataMin" : axis == null ? void 0 : axis.minValue
+      }))
+    };
+  }, [yAxis, defaultType]);
+  return option;
+};
+exports.useYAxis = useYAxis;
+//# sourceMappingURL=useYAxis.cjs.map

package/dist/cjs/hooks/useYAxis.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\nimport type { YAXisComponentOption } from \"echarts/types/dist/echarts\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvAxisChartCommonProps } from \"@viz/types/common\";\nimport { HvChartAxisType } from \"@viz/types\";\n\ninterface HvYAxisHookProps {\n  yAxis: HvAxisChartCommonProps[\"yAxis\"];\n  defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n  yAxis,\n  defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"yAxis\">>(() => {\n    if (!yAxis || !Array.isArray(yAxis)) {\n      return {\n        yAxis: {\n          id: yAxis?.id,\n          type: getAxisType(yAxis?.type) ?? getAxisType(defaultType),\n          name: yAxis?.name,\n          axisLabel: {\n            rotate: yAxis?.labelRotation ?? 0,\n            formatter: yAxis?.labelFormatter,\n          },\n          max: yAxis?.maxValue === \"max\" ? \"dataMax\" : yAxis?.maxValue,\n          min: yAxis?.minValue === \"min\" ? \"dataMin\" : yAxis?.minValue,\n        },\n      };\n    }\n\n    return {\n      yAxis: yAxis.map<YAXisComponentOption>((axis) => ({\n        id: axis?.id,\n        type: getAxisType(axis?.type) ?? \"value\",\n        name: axis?.name,\n        axisLabel: {\n          rotate: axis?.labelRotation ?? 0,\n          formatter: axis?.labelFormatter,\n        },\n        max: axis?.maxValue === \"max\" ? \"dataMax\" : axis?.maxValue,\n        min: axis?.minValue === \"min\" ? \"dataMin\" : axis?.minValue,\n      })),\n    };\n  }, [yAxis, defaultType]);\n\n  return option;\n};\n"],"names":["useYAxis","yAxis","defaultType","option","useMemo","Array","isArray","id","type","getAxisType","name","axisLabel","rotate","labelRotation","formatter","labelFormatter","max","maxValue","min","minValue","map","axis"],"mappings":";;;;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChBC,QAAAA,SAASC,MAAAA,QAAsC,MAAM;AACzD,QAAI,CAACH,SAAS,CAACI,MAAMC,QAAQL,KAAK,GAAG;AAC5B,aAAA;AAAA,QACLA,OAAO;AAAA,UACLM,IAAIN,+BAAOM;AAAAA,UACXC,MAAMC,YAAYR,YAAAA,+BAAOO,IAAI,KAAKC,YAAAA,YAAYP,WAAW;AAAA,UACzDQ,MAAMT,+BAAOS;AAAAA,UACbC,WAAW;AAAA,YACTC,SAAQX,+BAAOY,kBAAiB;AAAA,YAChCC,WAAWb,+BAAOc;AAAAA,UACpB;AAAA,UACAC,MAAKf,+BAAOgB,cAAa,QAAQ,YAAYhB,+BAAOgB;AAAAA,UACpDC,MAAKjB,+BAAOkB,cAAa,QAAQ,YAAYlB,+BAAOkB;AAAAA,QACtD;AAAA,MAAA;AAAA,IAEJ;AAEO,WAAA;AAAA,MACLlB,OAAOA,MAAMmB,IAA2BC,CAAU,UAAA;AAAA,QAChDd,IAAIc,6BAAMd;AAAAA,QACVC,MAAMC,YAAAA,YAAYY,6BAAMb,IAAI,KAAK;AAAA,QACjCE,MAAMW,6BAAMX;AAAAA,QACZC,WAAW;AAAA,UACTC,SAAQS,6BAAMR,kBAAiB;AAAA,UAC/BC,WAAWO,6BAAMN;AAAAA,QACnB;AAAA,QACAC,MAAKK,6BAAMJ,cAAa,QAAQ,YAAYI,6BAAMJ;AAAAA,QAClDC,MAAKG,6BAAMF,cAAa,QAAQ,YAAYE,6BAAMF;AAAAA,MAAAA,EAClD;AAAA,IAAA;AAAA,EACJ,GACC,CAAClB,OAAOC,WAAW,CAAC;AAEhBC,SAAAA;AACT;;"}

package/dist/cjs/index.cjs

@@ -2,9 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const LineChart = require("./components/LineChart/LineChart.cjs");
 const BarChart = require("./components/BarChart/BarChart.cjs");
+const DonutChart = require("./components/DonutChart/DonutChart.cjs");
 const Provider = require("./providers/Provider.cjs");
 exports.HvLineChart = LineChart.HvLineChart;
 exports.HvBarChart = BarChart.HvBarChart;
+exports.HvDonutChart = DonutChart.HvDonutChart;
 exports.HvVizContext = Provider.HvVizContext;
 exports.HvVizProvider = Provider.HvVizProvider;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

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

package/dist/cjs/providers/Provider.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactCore = require("@hitachivantara/uikit-react-core");
-const registerThemes = require("../utils/registerThemes.cjs");
 const react = require("react");
+const uikitReactCore = require("@hitachivantara/uikit-react-core");
+const registerTheme = require("../utils/registerTheme.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvVizContext = react.createContext({
   theme: void 0
@@ -12,17 +12,15 @@ const HvVizProvider = ({
 }) => {
   const {
     activeTheme,
-    colorModes,
     selectedMode,
     selectedTheme
   } = uikitReactCore.useTheme();
-  react.useEffect(() => {
-    registerThemes.registerThemes(selectedTheme, colorModes, activeTheme);
-  }, [selectedTheme, colorModes, activeTheme]);
-  const theme = react.useMemo(() => `${selectedTheme}-${selectedMode}`, [selectedMode, selectedTheme]);
-  const value = react.useMemo(() => ({
-    theme
-  }), [theme]);
+  const value = react.useMemo(() => {
+    registerTheme.registerTheme(selectedTheme, selectedMode, activeTheme);
+    return {
+      theme: `${selectedTheme}-${selectedMode}`
+    };
+  }, [selectedTheme, selectedMode, activeTheme]);
   return /* @__PURE__ */ jsxRuntime.jsx(HvVizContext.Provider, {
     value,
     children

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

@@ -1 +1 @@
-{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { useTheme } from \"@hitachivantara/uikit-react-core\";\nimport { registerThemes } from \"@viz/utils\";\nimport { createContext, useEffect, useMemo } from \"react\";\n\nexport interface HvVizContextValue {\n  /**\n   * Current theme\n   */\n  theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n  theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n  /**\n   * Component tree.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n *    <HvVizProvider>\n *        (...)\n *    </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n  const { activeTheme, colorModes, selectedMode, selectedTheme } = useTheme();\n\n  useEffect(() => {\n    registerThemes(selectedTheme, colorModes, activeTheme);\n  }, [selectedTheme, colorModes, activeTheme]);\n\n  const theme = useMemo(\n    () => `${selectedTheme}-${selectedMode}`,\n    [selectedMode, selectedTheme]\n  );\n\n  const value = useMemo<HvVizContextValue>(\n    () => ({\n      theme,\n    }),\n    [theme]\n  );\n\n  return (\n    <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n  );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","colorModes","selectedMode","selectedTheme","useTheme","useEffect","useMemo","value","_jsx","Provider"],"mappings":";;;;;;AAWO,MAAMA,eAAeC,MAAAA,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAYC;AAAAA,IAAcC;AAAAA,MAAkBC,eAAS,SAAA;AAE1EC,QAAAA,UAAU,MAAM;AACCF,mBAAAA,eAAAA,eAAeF,YAAYD,WAAW;AAAA,EACpD,GAAA,CAACG,eAAeF,YAAYD,WAAW,CAAC;AAErCJ,QAAAA,QAAQU,MAAAA,QACZ,MAAO,GAAEH,iBAAiBD,gBAC1B,CAACA,cAAcC,aAAa,CAC9B;AAEMI,QAAAA,QAAQD,MAAAA,QACZ,OAAO;AAAA,IACLV;AAAAA,EAAAA,IAEF,CAACA,KAAK,CACR;AAGEY,SAAAA,2BAAAA,IAACd,aAAae,UAAQ;AAAA,IAACF;AAAAA,IAAaR;AAAAA,EAAAA,CAAkC;AAE1E;;;"}
+{"version":3,"file":"Provider.cjs","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { registerTheme } from \"@viz/utils\";\n\nexport interface HvVizContextValue {\n  /**\n   * Current theme\n   */\n  theme?: string;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n  theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n  /**\n   * Component tree.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n *    <HvVizProvider>\n *        (...)\n *    </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n  const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n  const value = useMemo(() => {\n    registerTheme(selectedTheme, selectedMode, activeTheme);\n\n    return { theme: `${selectedTheme}-${selectedMode}` };\n  }, [selectedTheme, selectedMode, activeTheme]);\n\n  return (\n    <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n  );\n};\n"],"names":["HvVizContext","createContext","theme","undefined","HvVizProvider","children","activeTheme","selectedMode","selectedTheme","useTheme","value","useMemo","_jsx","Provider"],"mappings":";;;;;;AAaO,MAAMA,eAAeC,MAAAA,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAkBC,eAAS,SAAA;AAExDC,QAAAA,QAAQC,MAAAA,QAAQ,MAAM;AACZH,kBAAAA,cAAAA,eAAeD,cAAcD,WAAW;AAE/C,WAAA;AAAA,MAAEJ,OAAQ,GAAEM,iBAAiBD;AAAAA,IAAAA;AAAAA,EACnC,GAAA,CAACC,eAAeD,cAAcD,WAAW,CAAC;AAG3CM,SAAAA,2BAAAA,IAACZ,aAAaa,UAAQ;AAAA,IAACH;AAAAA,IAAaL;AAAAA,EAAAA,CAAkC;AAE1E;;;"}

package/dist/cjs/utils/getGroupKey.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getGroupKey = (groupBy) => Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
+exports.getGroupKey = getGroupKey;
+//# sourceMappingURL=getGroupKey.cjs.map

package/dist/cjs/utils/getGroupKey.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getGroupKey.cjs","sources":["../../../src/utils/getGroupKey.ts"],"sourcesContent":["import { HvChartCommonProps } from \"@viz/types/common\";\n\nexport const getGroupKey = (groupBy: HvChartCommonProps[\"groupBy\"]) =>\n  Array.isArray(groupBy) ? groupBy.join(\"_\") : groupBy;\n"],"names":["getGroupKey","groupBy","Array","isArray","join"],"mappings":";;AAEaA,MAAAA,cAAcA,CAACC,YAC1BC,MAAMC,QAAQF,OAAO,IAAIA,QAAQG,KAAK,GAAG,IAAIH;;"}

package/dist/cjs/utils/getLegendIcon.cjs

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const getLegendIcon = (square) => {
-  if (square) {
-    return "path://M0,0L16,0L16,16L0,16L0,0Z";
+const getLegendIcon = (icon) => {
+  switch (icon) {
+    case "square":
+      return "path://M0,0L16,0L16,16L0,16L0,0Z";
+    case "line":
+    default:
+      return "path://M0,0L16,0L16,2L0,2Z";
   }
-  return "path://M0,0L16,0L16,2L0,2Z";
 };
 exports.getLegendIcon = getLegendIcon;
 //# sourceMappingURL=getLegendIcon.cjs.map

package/dist/cjs/utils/getLegendIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"getLegendIcon.cjs","sources":["../../../src/utils/getLegendIcon.ts"],"sourcesContent":["export const getLegendIcon = (square: boolean) => {\n  if (square) {\n    return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n  }\n\n  return \"path://M0,0L16,0L16,2L0,2Z\";\n};\n"],"names":["getLegendIcon","square"],"mappings":";;AAAaA,MAAAA,gBAAgBA,CAACC,WAAoB;AAChD,MAAIA,QAAQ;AACH,WAAA;AAAA,EACT;AAEO,SAAA;AACT;;"}
+{"version":3,"file":"getLegendIcon.cjs","sources":["../../../src/utils/getLegendIcon.ts"],"sourcesContent":["import { HvChartLegendIcon } from \"@viz/types/legend\";\n\nexport const getLegendIcon = (icon: HvChartLegendIcon) => {\n  switch (icon) {\n    case \"square\":\n      return \"path://M0,0L16,0L16,16L0,16L0,0Z\";\n    case \"line\":\n    default:\n      return \"path://M0,0L16,0L16,2L0,2Z\";\n  }\n};\n"],"names":["getLegendIcon","icon"],"mappings":";;AAEaA,MAAAA,gBAAgBA,CAACC,SAA4B;AACxD,UAAQA,MAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AAAA,IACL;AACS,aAAA;AAAA,EACX;AACF;;"}

package/dist/cjs/utils/getMeasure.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const getMeasure = (name, msr) => {
+  const measureName = name.split("_")[0];
+  const measuresArray = Array.isArray(msr) ? msr : [msr];
+  return measuresArray.find((m) => {
+    if (typeof m === "string") {
+      return m === measureName;
+    }
+    return m.field === measureName;
+  }) ?? measuresArray[0];
+};
+exports.getMeasure = getMeasure;
+//# sourceMappingURL=getMeasure.cjs.map

package/dist/cjs/utils/getMeasure.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"getMeasure.cjs","sources":["../../../src/utils/getMeasure.ts"],"sourcesContent":["import { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvDonutChartMeasure,\n  HvLineChartMeasures,\n} from \"@viz/types\";\n\nexport const getMeasure = (\n  name: string,\n  msr: Arrayable<HvLineChartMeasures | HvBarChartMeasures> | HvDonutChartMeasure\n): HvLineChartMeasures | HvBarChartMeasures | HvDonutChartMeasure => {\n  const measureName = name.split(\"_\")[0];\n  const measuresArray = Array.isArray(msr) ? msr : [msr];\n  // find the measure in measures array or return the first one\n  return (\n    measuresArray.find((m) => {\n      if (typeof m === \"string\") {\n        return m === measureName;\n      }\n      return m.field === measureName;\n    }) ?? measuresArray[0]\n  );\n};\n"],"names":["getMeasure","name","msr","measureName","split","measuresArray","Array","isArray","find","m","field"],"mappings":";;AAQaA,MAAAA,aAAaA,CACxBC,MACAC,QACmE;AACnE,QAAMC,cAAcF,KAAKG,MAAM,GAAG,EAAE,CAAC;AACrC,QAAMC,gBAAgBC,MAAMC,QAAQL,GAAG,IAAIA,MAAM,CAACA,GAAG;AAGnDG,SAAAA,cAAcG,KAAMC,CAAM,MAAA;AACpB,QAAA,OAAOA,MAAM,UAAU;AACzB,aAAOA,MAAMN;AAAAA,IACf;AACA,WAAOM,EAAEC,UAAUP;AAAAA,EAAAA,CACpB,KAAKE,cAAc,CAAC;AAEzB;;"}

package/dist/cjs/utils/registerTheme.cjs

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const echarts = require("echarts/core");
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
+const registerTheme = (name, mode, themeStructure) => {
+  const baseText = {
+    color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary,
+    fontWeight: themeStructure == null ? void 0 : themeStructure.fontWeights.normal,
+    fontSize: themeStructure == null ? void 0 : themeStructure.fontSizes.sm,
+    fontFamily: themeStructure == null ? void 0 : themeStructure.fontFamily.body
+  };
+  const customAxis = {
+    nameTextStyle: {
+      ...baseText
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3
+      }
+    },
+    axisLabel: {
+      color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary_80,
+      fontWeight: themeStructure == null ? void 0 : themeStructure.fontWeights.normal,
+      fontSize: themeStructure == null ? void 0 : themeStructure.fontSizes.sm,
+      fontFamily: themeStructure == null ? void 0 : themeStructure.fontFamily.body
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].atmo3
+      }
+    }
+  };
+  echarts__namespace.registerTheme(`${name}-${mode}`, {
+    color: [themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat1, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat2, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat3, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat4, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat5, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat6, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat7, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat8, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat9, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat10, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat11, themeStructure == null ? void 0 : themeStructure.colors.modes[mode].cat12],
+    legend: {
+      textStyle: {
+        ...baseText
+      }
+    },
+    tooltip: {
+      borderWidth: 0,
+      padding: 0,
+      textStyle: {
+        ...baseText
+      },
+      axisPointer: {
+        lineStyle: {
+          color: themeStructure == null ? void 0 : themeStructure.colors.modes[mode].secondary,
+          width: 1
+        }
+      }
+    },
+    dataZoom: {
+      textStyle: {
+        ...baseText
+      }
+    },
+    categoryAxis: {
+      ...customAxis
+    },
+    valueAxis: {
+      ...customAxis
+    },
+    logAxis: {
+      ...customAxis
+    },
+    timeAxis: {
+      ...customAxis
+    },
+    line: {
+      lineStyle: {
+        width: 2
+      }
+    }
+  });
+};
+exports.registerTheme = registerTheme;
+//# sourceMappingURL=registerTheme.cjs.map

package/dist/cjs/utils/registerTheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerTheme.cjs","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/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    },\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  });\n};\n"],"names":["registerTheme","name","mode","themeStructure","baseText","color","colors","modes","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","secondary_80","splitLine","cat1","cat2","cat3","cat4","cat5","cat6","cat7","cat8","cat9","cat10","cat11","cat12","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGO,MAAMA,gBAAgBA,CAC3BC,MACAC,MACAC,mBACG;AACH,QAAMC,WAAW;AAAA,IACfC,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMM;AAAAA,IAC1CC,YAAYN,iDAAgBO,YAAYC;AAAAA,IACxCC,UAAUT,iDAAgBU,UAAUC;AAAAA,IACpCC,YAAYZ,iDAAgBY,WAAWC;AAAAA,EAAAA;AAGzC,QAAMC,aAAa;AAAA,IACjBC,eAAe;AAAA,MACb,GAAGd;AAAAA,IACL;AAAA,IACAe,UAAU;AAAA,MACRC,MAAM;AAAA,MACNC,WAAW;AAAA,QACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMoB;AAAAA,MAC5C;AAAA,IACF;AAAA,IACAC,UAAU;AAAA,MACRH,MAAM;AAAA,MACNC,WAAW;AAAA,QACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMoB;AAAAA,MAC5C;AAAA,IACF;AAAA,IACAE,WAAW;AAAA,MACTnB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMuB;AAAAA,MAC1ChB,YAAYN,iDAAgBO,YAAYC;AAAAA,MACxCC,UAAUT,iDAAgBU,UAAUC;AAAAA,MACpCC,YAAYZ,iDAAgBY,WAAWC;AAAAA,IACzC;AAAA,IACAU,WAAW;AAAA,MACTN,MAAM;AAAA,MACNC,WAAW;AAAA,QACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMoB;AAAAA,MAC5C;AAAA,IACF;AAAA,EAAA;AAGMtB,qBAAAA,cAAe,GAAEC,QAAQC,QAAQ;AAAA,IACvCG,OAAO,CACLF,iDAAgBG,OAAOC,MAAML,MAAMyB,MACnCxB,iDAAgBG,OAAOC,MAAML,MAAM0B,MACnCzB,iDAAgBG,OAAOC,MAAML,MAAM2B,MACnC1B,iDAAgBG,OAAOC,MAAML,MAAM4B,MACnC3B,iDAAgBG,OAAOC,MAAML,MAAM6B,MACnC5B,iDAAgBG,OAAOC,MAAML,MAAM8B,MACnC7B,iDAAgBG,OAAOC,MAAML,MAAM+B,MACnC9B,iDAAgBG,OAAOC,MAAML,MAAMgC,MACnC/B,iDAAgBG,OAAOC,MAAML,MAAMiC,MACnChC,iDAAgBG,OAAOC,MAAML,MAAMkC,OACnCjC,iDAAgBG,OAAOC,MAAML,MAAMmC,OACnClC,iDAAgBG,OAAOC,MAAML,MAAMoC,KAAK;AAAA,IAE1CC,QAAQ;AAAA,MACNC,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,IACF;AAAA,IACAqC,SAAS;AAAA,MACPC,aAAa;AAAA,MACbC,SAAS;AAAA,MACTH,WAAW;AAAA,QACT,GAAGpC;AAAAA,MACL;AAAA,MACAwC,aAAa;AAAA,QACXvB,WAAW;AAAA,UACThB,OAAOF,iDAAgBG,OAAOC,MAAML,MAAMM;AAAAA,UAC1CqC,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,IACAC,UAAU;AAAA,MACRN,WAAW;AAAA,QAAE,GAAGpC;AAAAA,MAAS;AAAA,IAC3B;AAAA,IACA2C,cAAc;AAAA,MACZ,GAAG9B;AAAAA,IACL;AAAA,IACA+B,WAAW;AAAA,MACT,GAAG/B;AAAAA,IACL;AAAA,IACAgC,SAAS;AAAA,MACP,GAAGhC;AAAAA,IACL;AAAA,IACAiC,UAAU;AAAA,MACR,GAAGjC;AAAAA,IACL;AAAA,IACAkC,MAAM;AAAA,MACJ9B,WAAW;AAAA,QACTwB,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EAAA,CACD;AACH;;"}

package/dist/esm/components/BarChart/BarChart.js

@@ -1,13 +1,93 @@
+import { useMemo } from "react";
+import * as echarts from "echarts/core";
+import { BarChart } from "echarts/charts";
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent } from "echarts/components";
+import { useDataZoom } from "../../hooks/useDataZoom.js";
+import { useXAxis } from "../../hooks/useXAxis.js";
+import { useYAxis } from "../../hooks/useYAxis.js";
+import { useGrid } from "../../hooks/useGrid.js";
+import { useData } from "../../hooks/useData.js";
+import { useDataset } from "../../hooks/useDataset.js";
+import { useSeries } from "../../hooks/useSeries.js";
+import { useLegend } from "../../hooks/useLegend.js";
 import { jsx } from "@emotion/react/jsx-runtime";
+import { useTooltip } from "../../hooks/tooltip/useTooltip.js";
 import { HvBaseChart } from "../BaseChart/BaseChart.js";
+echarts.use([BarChart, DatasetComponent, GridComponent, TooltipComponent, LegendComponent, DataZoomSliderComponent, DataZoomInsideComponent]);
 const HvBarChart = ({
+  yAxis,
+  xAxis,
   horizontal = false,
-  ...others
+  horizontalRangeSlider,
+  grid,
+  data,
+  groupBy,
+  splitBy,
+  sortBy,
+  stack,
+  seriesNameFormatter,
+  measures,
+  legend,
+  tooltip,
+  classes
 }) => {
-  return /* @__PURE__ */ jsx(HvBaseChart, {
+  const chartData = useData({
+    data,
+    groupBy,
+    sortBy,
+    splitBy,
+    measures
+  });
+  const chartDataset = useDataset(chartData);
+  const chartYAxis = useYAxis({
+    yAxis,
+    defaultType: horizontal ? "categorical" : "continuous"
+  });
+  const chartXAxis = useXAxis({
+    xAxis,
+    defaultType: horizontal ? "continuous" : "categorical"
+  });
+  const chartSlider = useDataZoom({
+    showHorizontal: horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show
+  });
+  const chartGrid = useGrid({
+    ...grid
+  });
+  const chartSeries = useSeries({
     type: "bar",
-    horizontal,
-    ...others
+    data: chartData,
+    groupBy,
+    measures,
+    stack,
+    nameFormatter: seriesNameFormatter,
+    horizontal
+  });
+  const chartLegend = useLegend({
+    ...legend,
+    series: chartSeries.series,
+    icon: "square"
+  });
+  const chartTooltip = useTooltip({
+    ...tooltip,
+    trigger: "axis",
+    measures,
+    classes,
+    horizontal
+  });
+  const options = useMemo(() => {
+    return {
+      ...chartYAxis,
+      ...chartXAxis,
+      ...chartSlider,
+      ...chartGrid,
+      ...chartDataset,
+      ...chartSeries,
+      ...chartLegend,
+      ...chartTooltip
+    };
+  }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
+  return /* @__PURE__ */ jsx(HvBaseChart, {
+    options
   });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import {\n  HvBaseChart,\n  HvBaseChartBarProps,\n  HvBaseChartClasses,\n  HvBaseChartCommonProps,\n} from \"../BaseChart\";\n\nexport interface HvBarChartClasses extends HvBaseChartClasses {}\n\nexport interface HvBarChartProps\n  extends HvBaseChartCommonProps,\n    HvBaseChartBarProps {\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 = ({\n  horizontal = false,\n  ...others\n}: HvBarChartProps) => {\n  return <HvBaseChart type=\"bar\" horizontal={horizontal} {...others} />;\n};\n"],"names":["HvBarChart","horizontal","others","HvBaseChart","type"],"mappings":";;AAmBO,MAAMA,aAAaA,CAAC;AAAA,EACzBC,aAAa;AAAA,EACb,GAAGC;AACY,MAAM;AACrB,6BAAQC,aAAW;AAAA,IAACC,MAAK;AAAA,IAAMH;AAAAA,IAAuB,GAAKC;AAAAA,EAAAA,CAAS;AACtE;"}
+{"version":3,"file":"BarChart.js","sources":["../../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { BarChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useXAxis,\n  useYAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvBarChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\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]);\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 = ({\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}: HvBarChartProps) => {\n  const chartData = useData({ data, groupBy, sortBy, splitBy, measures });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({\n    yAxis,\n    defaultType: horizontal ? \"categorical\" : \"continuous\",\n  });\n\n  const chartXAxis = useXAxis({\n    xAxis,\n    defaultType: horizontal ? \"continuous\" : \"categorical\",\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 options = useMemo(() => {\n    return {\n      ...chartYAxis,\n      ...chartXAxis,\n      ...chartSlider,\n      ...chartGrid,\n      ...chartDataset,\n      ...chartSeries,\n      ...chartLegend,\n      ...chartTooltip,\n    };\n  }, [\n    chartXAxis,\n    chartYAxis,\n    chartSlider,\n    chartGrid,\n    chartDataset,\n    chartSeries,\n    chartLegend,\n    chartTooltip,\n  ]);\n\n  return <HvBaseChart options={options} />;\n};\n"],"names":["echarts","use","BarChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvBarChart","yAxis","xAxis","horizontal","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","stack","seriesNameFormatter","measures","legend","tooltip","classes","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","defaultType","chartXAxis","useXAxis","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","type","nameFormatter","chartLegend","useLegend","series","icon","chartTooltip","useTooltip","trigger","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;AAiCAA,QAAQC,IAAI,CACVC,UACAC,kBACAC,eACAC,kBACAC,iBACAC,yBACAC,uBAAuB,CACxB;AAkBM,MAAMC,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACe,MAAM;AACrB,QAAMC,YAAYC,QAAQ;AAAA,IAAEX;AAAAA,IAAMC;AAAAA,IAASE;AAAAA,IAAQD;AAAAA,IAASI;AAAAA,EAAAA,CAAU;AAEhEM,QAAAA,eAAeC,WAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAS;AAAA,IAC1BpB;AAAAA,IACAqB,aAAanB,aAAa,gBAAgB;AAAA,EAAA,CAC3C;AAED,QAAMoB,aAAaC,SAAS;AAAA,IAC1BtB;AAAAA,IACAoB,aAAanB,aAAa,eAAe;AAAA,EAAA,CAC1C;AAED,QAAMsB,cAAcC,YAAY;AAAA,IAC9BC,gBAAgBvB,+DAAuBwB;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAQ;AAAA,IAAE,GAAGzB;AAAAA,EAAAA,CAAM;AAErC,QAAM0B,cAAcC,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACN3B,MAAMU;AAAAA,IACNT;AAAAA,IACAK;AAAAA,IACAF;AAAAA,IACAwB,eAAevB;AAAAA,IACfR;AAAAA,EAAAA,CACD;AAED,QAAMgC,cAAcC,UAAU;AAAA,IAC5B,GAAGvB;AAAAA,IACHwB,QAAQN,YAAYM;AAAAA,IACpBC,MAAM;AAAA,EAAA,CACP;AAED,QAAMC,eAAeC,WAAW;AAAA,IAC9B,GAAG1B;AAAAA,IACH2B,SAAS;AAAA,IACT7B;AAAAA,IACAG;AAAAA,IACAZ;AAAAA,EAAAA,CACD;AAEKuC,QAAAA,UAAUC,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGvB;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGE;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGX;AAAAA,MACH,GAAGa;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGI;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAH,YACAK,aACAI,WACAX,cACAa,aACAI,aACAI,YAAY,CACb;AAED,6BAAQK,aAAW;AAAA,IAACF;AAAAA,EAAAA,CAAmB;AACzC;"}