@hitachivantara/uikit-react-viz 5.2.8 → 5.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSeries.js","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,YAAYZ,OAAO;AAEhCa,QAAAA,SAAwCC,QAE5C,MAAM;AACC,WAAA;AAAA,MACLC,QAAQb,KACLc,YACAC,EAAAA,OAAQC,OAAMA,MAAMP,UAAU,EAC9BQ,IAA2DD,CAAM,MAAA;AAC1DE,cAAAA,UAAUC,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/esm/hooks/useVizTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVizTheme.js","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,WAAWC,YAAY;AAChC;"}
+{"version":3,"file":"useVizTheme.js","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,WAAWC,YAAY;AAChC;"}

package/dist/esm/hooks/useXAxis.js

@@ -0,0 +1,29 @@
+import { useMemo } from "react";
+import { getAxisType } from "../utils/getAxisType.js";
+const useXAxis = ({
+  xAxis,
+  defaultType = "categorical",
+  scale = false
+}) => {
+  const option = useMemo(() => {
+    return {
+      xAxis: {
+        id: xAxis == null ? void 0 : xAxis.id,
+        type: getAxisType(xAxis == null ? void 0 : xAxis.type) ?? 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;
+};
+export {
+  useXAxis
+};
+//# sourceMappingURL=useXAxis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useXAxis.js","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,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLJ,OAAO;AAAA,QACLK,IAAIL,+BAAOK;AAAAA,QACXC,MAAMC,YAAYP,+BAAOM,IAAI,KAAKC,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/esm/hooks/useYAxis.js

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { getAxisType } from "../utils/getAxisType.js";
+const useYAxis = ({
+  yAxis,
+  defaultType = "continuous"
+}) => {
+  const option = useMemo(() => {
+    if (!yAxis || !Array.isArray(yAxis)) {
+      return {
+        yAxis: {
+          id: yAxis == null ? void 0 : yAxis.id,
+          type: getAxisType(yAxis == null ? void 0 : yAxis.type) ?? 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(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;
+};
+export {
+  useYAxis
+};
+//# sourceMappingURL=useYAxis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useYAxis.js","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,QAAsC,MAAM;AACzD,QAAI,CAACH,SAAS,CAACI,MAAMC,QAAQL,KAAK,GAAG;AAC5B,aAAA;AAAA,QACLA,OAAO;AAAA,UACLM,IAAIN,+BAAOM;AAAAA,UACXC,MAAMC,YAAYR,+BAAOO,IAAI,KAAKC,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,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/esm/index.js

@@ -1,8 +1,10 @@
 import { HvLineChart } from "./components/LineChart/LineChart.js";
 import { HvBarChart } from "./components/BarChart/BarChart.js";
+import { HvDonutChart } from "./components/DonutChart/DonutChart.js";
 import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
 export {
   HvBarChart,
+  HvDonutChart,
   HvLineChart,
   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/providers/Provider.js

@@ -1,6 +1,6 @@
+import { createContext, useMemo } from "react";
 import { useTheme } from "@hitachivantara/uikit-react-core";
-import { registerThemes } from "../utils/registerThemes.js";
-import { createContext, useEffect, useMemo } from "react";
+import { registerTheme } from "../utils/registerTheme.js";
 import { jsx } from "@emotion/react/jsx-runtime";
 const HvVizContext = createContext({
   theme: void 0
@@ -10,17 +10,15 @@ const HvVizProvider = ({
 }) => {
   const {
     activeTheme,
-    colorModes,
     selectedMode,
     selectedTheme
   } = useTheme();
-  useEffect(() => {
-    registerThemes(selectedTheme, colorModes, activeTheme);
-  }, [selectedTheme, colorModes, activeTheme]);
-  const theme = useMemo(() => `${selectedTheme}-${selectedMode}`, [selectedMode, selectedTheme]);
-  const value = useMemo(() => ({
-    theme
-  }), [theme]);
+  const value = useMemo(() => {
+    registerTheme(selectedTheme, selectedMode, activeTheme);
+    return {
+      theme: `${selectedTheme}-${selectedMode}`
+    };
+  }, [selectedTheme, selectedMode, activeTheme]);
   return /* @__PURE__ */ jsx(HvVizContext.Provider, {
     value,
     children

package/dist/esm/providers/Provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.js","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,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,SAAS;AAE1EC,YAAU,MAAM;AACCF,mBAAAA,eAAeF,YAAYD,WAAW;AAAA,EACpD,GAAA,CAACG,eAAeF,YAAYD,WAAW,CAAC;AAErCJ,QAAAA,QAAQU,QACZ,MAAO,GAAEH,iBAAiBD,gBAC1B,CAACA,cAAcC,aAAa,CAC9B;AAEMI,QAAAA,QAAQD,QACZ,OAAO;AAAA,IACLV;AAAAA,EAAAA,IAEF,CAACA,KAAK,CACR;AAGEY,SAAAA,oBAACd,aAAae,UAAQ;AAAA,IAACF;AAAAA,IAAaR;AAAAA,EAAAA,CAAkC;AAE1E;"}
+{"version":3,"file":"Provider.js","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,cAAiC;AAAA,EAC3DC,OAAOC;AACT,CAAC;AA2BM,MAAMC,gBAAgBA,CAAC;AAAA,EAAEC;AAA6B,MAAM;AAC3D,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,IAAcC;AAAAA,MAAkBC,SAAS;AAExDC,QAAAA,QAAQC,QAAQ,MAAM;AACZH,kBAAAA,eAAeD,cAAcD,WAAW;AAE/C,WAAA;AAAA,MAAEJ,OAAQ,GAAEM,iBAAiBD;AAAAA,IAAAA;AAAAA,EACnC,GAAA,CAACC,eAAeD,cAAcD,WAAW,CAAC;AAG3CM,SAAAA,oBAACZ,aAAaa,UAAQ;AAAA,IAACH;AAAAA,IAAaL;AAAAA,EAAAA,CAAkC;AAE1E;"}

package/dist/esm/utils/getGroupKey.js

@@ -0,0 +1,5 @@
+const getGroupKey = (groupBy) => Array.isArray(groupBy) ? groupBy.join("_") : groupBy;
+export {
+  getGroupKey
+};
+//# sourceMappingURL=getGroupKey.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getGroupKey.js","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/esm/utils/getLegendIcon.js

@@ -1,8 +1,11 @@
-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";
 };
 export {
   getLegendIcon

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

@@ -1 +1 @@
-{"version":3,"file":"getLegendIcon.js","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.js","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/esm/utils/getMeasure.js

@@ -0,0 +1,14 @@
+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];
+};
+export {
+  getMeasure
+};
+//# sourceMappingURL=getMeasure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getMeasure.js","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/esm/utils/registerTheme.js

@@ -0,0 +1,85 @@
+import * as echarts from "echarts/core";
+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.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
+      }
+    }
+  });
+};
+export {
+  registerTheme
+};
+//# sourceMappingURL=registerTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"registerTheme.js","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,UAAAA,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/types/index.d.ts

@@ -5,17 +5,9 @@ import type { CSSInterpolation } from '@emotion/serialize';
 import { ExtractNames } from '@hitachivantara/uikit-react-core';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 
-declare type BarMeasuresField = string | BaseFullMeasuresField;
-
-declare interface BaseFullMeasuresField {
-    /** Column name. */
-    field: string;
-    /** Sampling function to use. */
-    sampling?: HvChartSampling;
+declare interface AxisMeasures {
     /** Id of the yAxis. */
     yAxis?: string;
-    /** Aggregation function to use. If no `agg` is defined, it will default to `sum`. */
-    agg?: HvChartAggregation;
     /**
      * Stack name to use when the measure should be stacked.
      *
@@ -24,89 +16,68 @@ declare interface BaseFullMeasuresField {
      * If not specified, it defaults to the global `stacked` prop.
      */
     stack?: string;
-    /** Strategy to use when there are empty cells. If not specified, it defaults to the global `emptyCellMode` prop. */
+    /** Sampling function to use. */
+    sampling?: HvChartSampling;
+}
+
+declare interface BarFullMeasures extends BaseMeasures, AxisMeasures {
+}
+
+declare interface BaseMeasures {
+    /** Column name. */
+    field: string;
+    /** Aggregation function to use. If no `agg` is defined, it will default to `sum`. */
+    agg?: HvChartAggregation;
+    /** Formatter for the value. This will be used in the tooltips and overrides the tooltip's value formatter. */
     valueFormatter?: (value?: string | number) => string;
 }
 
+declare interface DonutFullMeasures extends BaseMeasures {
+}
+
 /** Empty cell mode */
 declare const emptyCellMode: readonly ["connect", "void"];
 
-declare type FullSortByField = {
+declare type FullSortBy = {
     /** Column name. */
     field: string;
     /** Order function to use. If no `order` is defined, it will default to `asc`. */
     order?: HvChartOrder;
 };
 
-declare type GroupByField = string;
-
-/**
- * A bar chart is a chart or graph that presents categorical data with rectangular bars.
- */
-export declare const HvBarChart: ({ horizontal, ...others }: HvBarChartProps) => JSX_2.Element;
-
-export declare interface HvBarChartClasses extends HvBaseChartClasses {
-}
-
-export declare interface HvBarChartProps extends HvBaseChartCommonProps, HvBaseChartBarProps {
-    /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: HvBarChartClasses;
-}
-
-/** Bar chart props only */
-declare interface HvBaseChartBarProps {
-    /**  Columns to measure on the chart. */
-    measures: Arrayable<BarMeasuresField>;
-    /** Whether the bar chart should be horizontal. Defaults to `false`. */
-    horizontal?: boolean;
-}
-
-declare type HvBaseChartClasses = ExtractNames<typeof useClasses>;
-
-/** Line and bar chart common props  */
-declare interface HvBaseChartCommonProps {
-    /** Chart data. */
-    data: Map<string | number, (string | number)[]> | Record<string | number, (string | number)[]> | Record<string | number, string | number>[] | ColumnTable;
-    /** Columns to use to group the data. */
-    groupBy: Arrayable<GroupByField>;
+/** Axis charts (line and bar) common props  */
+declare interface HvAxisChartCommonProps {
     /** Columns to use to split the measures. */
-    splitBy?: Arrayable<SplitByField>;
-    /** Columns to use to sort the data points. */
-    sortBy?: Arrayable<SortByField>;
+    splitBy?: Arrayable<string>;
     /** Options for the xAxis, i.e. the horizontal axis. */
     xAxis?: HvChartAxis;
     /** Options for the yAxis, i.e. the vertical axis. */
     yAxis?: HvChartAxis | [HvChartAxis, HvChartAxis];
-    /** Tooltip options. */
-    tooltip?: HvChartTooltip;
-    /** Legend options. */
-    legend?: {
-        /** Whether to show the legend or not. The legend will appear by default for multiple series. Otherwise, the legend will not be shown. */
-        show?: boolean;
-    };
-    /** Formatter for the series names used on the tooltips and legend. */
-    seriesNameFormatter?: (value?: string) => string;
     /** Stack name to use when all the series should be stacked together. If not provided, the series are not stacked. */
     stack?: string;
     /** Ranger slider options for the horizontal axis. */
-    horizontalRangeSlider?: {
-        /** Whether to show the ranger slider or not. Defaults to `false`. */
-        show?: boolean;
-    };
-    /** Grid options. */
-    grid?: HvChartGrid;
+    horizontalRangeSlider?: HvChartHorizontalRangeSlider;
+    /** Formatter for the series names used on the tooltips and legend. */
+    seriesNameFormatter?: (value?: string) => string;
+}
+
+/**
+ * A bar chart is a chart or graph that presents categorical data with rectangular bars.
+ */
+export declare const HvBarChart: ({ yAxis, xAxis, horizontal, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, stack, seriesNameFormatter, measures, legend, tooltip, classes, }: HvBarChartProps) => JSX_2.Element;
+
+export declare interface HvBarChartClasses extends HvChartTooltipClasses {
 }
 
-/** Line chart props only */
-declare interface HvBaseChartLineProps {
+export declare type HvBarChartMeasures = string | BarFullMeasures;
+
+export declare interface HvBarChartProps extends HvAxisChartCommonProps, HvChartCommonProps {
     /**  Columns to measure on the chart. */
-    measures: Arrayable<LineMeasuresField>;
-    /** Strategy to use when there are empty cells. Defaults to `void`. */
-    emptyCellMode?: HvChartEmptyCellMode;
-    /** Whether the area under the lines should be filled. Defaults to `false`. */
-    area?: boolean;
-    /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */
-    areaOpacity?: number;
+    measures: Arrayable<HvBarChartMeasures>;
+    /** Whether the bar chart should be horizontal. Defaults to `false`. */
+    horizontal?: boolean;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvBarChartClasses;
 }
 
 /** Aggregation functions */
@@ -143,6 +114,25 @@ export declare interface HvChartAxis {
  */
 export declare type HvChartAxisType = "continuous" | "categorical" | "time";
 
+/** Props common among all charts.  */
+declare interface HvChartCommonProps {
+    /** Chart data. */
+    data: HvChartData;
+    /** Columns to use to group the data. */
+    groupBy: Arrayable<string>;
+    /** Columns to use to sort the data points. */
+    sortBy?: Arrayable<HvChartSortBy>;
+    /** Tooltip options. */
+    tooltip?: HvChartTooltip;
+    /** Legend options. */
+    legend?: HvChartLegend;
+    /** Grid options. */
+    grid?: HvChartGrid;
+}
+
+/** Chart data */
+export declare type HvChartData = Map<string | number, (string | number)[]> | Record<string | number, (string | number)[]> | Record<string | number, string | number>[] | ColumnTable;
+
 export declare type HvChartEmptyCellMode = (typeof emptyCellMode)[number];
 
 export declare interface HvChartGrid {
@@ -156,12 +146,31 @@ export declare interface HvChartGrid {
     bottom?: string | number;
 }
 
+export declare interface HvChartHorizontalRangeSlider {
+    /** Whether to show the ranger slider or not. Defaults to `false`. */
+    show?: boolean;
+}
+
+export declare interface HvChartLegend {
+    /** Whether to show the legend or not. The legend will appear by default for multiple series. Otherwise, the legend will not be shown. */
+    show?: boolean;
+    /** Direction of the legend. Defaults to `horizontal`. */
+    direction?: "vertical" | "horizontal";
+    /** Position of the legend. `x` defaults to `center` and `y` to `top`. */
+    position?: {
+        x?: "left" | "center" | "right";
+        y?: "top" | "center" | "bottom";
+    };
+}
+
 /** Order functions */
 export declare type HvChartOrder = "asc" | "desc";
 
 /** Sampling functions */
 export declare type HvChartSampling = "none" | "average" | "min" | "max" | "sum" | "lttb";
 
+export declare type HvChartSortBy = string | FullSortBy;
+
 export declare interface HvChartTooltip {
     /** Whether to show the tooltip or not. Defaults to `true`. */
     show?: boolean;
@@ -175,6 +184,8 @@ export declare interface HvChartTooltip {
     component?: string | ((params?: HvChartTooltipParams) => string | HTMLElement | HTMLElement[]);
 }
 
+declare type HvChartTooltipClasses = ExtractNames<typeof useClasses>;
+
 export declare interface HvChartTooltipParams {
     title?: string | number;
     series?: {
@@ -186,16 +197,48 @@ export declare interface HvChartTooltipParams {
 
 export declare type HvChartTooltipType = (typeof tooltipType)[number];
 
+/**
+ * Donut charts nicely convey the part-whole relationship and they have become
+ * the most recognizable chart types for representing proportions in business and data statistics.
+ */
+export declare const HvDonutChart: ({ data, groupBy, classes, legend, tooltip, measure: measures, sortBy, grid, type, slicesNameFormatter, }: HvDonutChartProps) => JSX_2.Element;
+
+export declare interface HvDonutChartClasses extends HvChartTooltipClasses {
+}
+
+export declare type HvDonutChartMeasure = string | DonutFullMeasures;
+
+export declare interface HvDonutChartProps extends HvChartCommonProps {
+    /** Column to measure. */
+    measure: HvDonutChartMeasure;
+    /** Type: regular or thin. Defaults to `regular`. */
+    type?: "regular" | "thin";
+    /** Formatter for the slices names used on the tooltips and legend. */
+    slicesNameFormatter?: (value?: string) => string;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvDonutChartClasses;
+}
+
 /**
  * A line chart or line plot or line graph is a type of chart which displays information as a series of data points
  * connected by straight line segments. It is a basic type of chart common in many fields.
  */
-export declare const HvLineChart: ({ area, emptyCellMode, areaOpacity, ...others }: HvLineChartProps) => JSX_2.Element;
+export declare const HvLineChart: ({ area, emptyCellMode, areaOpacity, yAxis, xAxis, horizontalRangeSlider, grid, data, groupBy, splitBy, sortBy, measures, stack, seriesNameFormatter, legend, classes, tooltip, }: HvLineChartProps) => JSX_2.Element;
 
-export declare interface HvLineChartClasses extends HvBaseChartClasses {
+export declare interface HvLineChartClasses extends HvChartTooltipClasses {
 }
 
-export declare interface HvLineChartProps extends HvBaseChartCommonProps, HvBaseChartLineProps {
+export declare type HvLineChartMeasures = string | LineFullMeasures;
+
+export declare interface HvLineChartProps extends HvAxisChartCommonProps, HvChartCommonProps {
+    /**  Columns to measure on the chart. */
+    measures: Arrayable<HvLineChartMeasures>;
+    /** Strategy to use when there are empty cells. Defaults to `void`. */
+    emptyCellMode?: HvChartEmptyCellMode;
+    /** Whether the area under the lines should be filled. Defaults to `false`. */
+    area?: boolean;
+    /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */
+    areaOpacity?: number;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvLineChartClasses;
 }
@@ -236,7 +279,7 @@ export declare interface HvVizProviderProps {
     children?: React.ReactNode;
 }
 
-declare interface LineFullMeasuresField extends BaseFullMeasuresField {
+declare interface LineFullMeasures extends BaseMeasures, AxisMeasures {
     /** Whether to hide the symbol for data points. Defaults to `false`. */
     hideSymbol?: boolean;
     /** Whether the area under the lines should be filled. If not specified, it defaults to the global `area` prop. */
@@ -247,12 +290,6 @@ declare interface LineFullMeasuresField extends BaseFullMeasuresField {
     emptyCellMode?: HvChartEmptyCellMode;
 }
 
-declare type LineMeasuresField = string | LineFullMeasuresField;
-
-declare type SortByField = string | FullSortByField;
-
-declare type SplitByField = string;
-
 /** Tooltip type */
 declare const tooltipType: readonly ["single", "multiple"];