@hitachivantara/uikit-react-viz 4.1.9 → 5.1.0

package/dist/esm/components/LineChart/LineChart.styles.js

@@ -0,0 +1,85 @@
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
+const {
+  useClasses,
+  staticClasses
+} = createClasses("HvLineChart", {
+  /** Single tooltip styles */
+  singleTooltipRoot: {
+    width: "fit-content",
+    boxShadow: theme.colors.shadow,
+    backgroundColor: theme.colors.atmo1,
+    padding: theme.space.sm,
+    display: "flex"
+  },
+  singleTooltipTitle: {
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.semibold,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary
+  },
+  singleTooltipValue: {
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.normal,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary,
+    marginLeft: theme.space.xs
+  },
+  /** Multiple tooltip styles */
+  multipleTooltipRoot: {
+    width: "fit-content",
+    boxShadow: theme.colors.shadow,
+    backgroundColor: theme.colors.atmo1
+  },
+  multipleTooltipTitleContainer: {
+    padding: `15px ${theme.space.sm}`,
+    borderBottom: `3px solid ${theme.colors.atmo2}`
+  },
+  multipleTooltipTitle: {
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.semibold,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary
+  },
+  multipleTooltipValuesContainer: {
+    display: "flex",
+    flexDirection: "column",
+    padding: theme.space.sm,
+    "& > *:not(:last-child)": {
+      paddingBottom: theme.space.sm
+    }
+  },
+  multipleTooltipSeriesContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  multipleTooltipSeriesNameContainer: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: theme.space.sm
+  },
+  multipleTooltipSeriesColor: {
+    width: "10px",
+    height: "10px",
+    marginRight: "5px"
+  },
+  multipleTooltipSeriesName: {
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.semibold,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary
+  },
+  multipleTooltipSeriesValue: {
+    fontFamily: theme.fontFamily.body,
+    fontWeight: theme.fontWeights.normal,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.secondary
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=LineChart.styles.js.map

package/dist/esm/components/LineChart/LineChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.styles.js","sources":["../../../../src/components/LineChart/LineChart.styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvLineChart\", {\n  /** Single tooltip styles */\n  singleTooltipRoot: {\n    width: \"fit-content\",\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n    padding: theme.space.sm,\n    display: \"flex\",\n  },\n  singleTooltipTitle: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  singleTooltipValue: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n    marginLeft: theme.space.xs,\n  },\n  /** Multiple tooltip styles */\n  multipleTooltipRoot: {\n    width: \"fit-content\",\n    boxShadow: theme.colors.shadow,\n    backgroundColor: theme.colors.atmo1,\n  },\n  multipleTooltipTitleContainer: {\n    padding: `15px ${theme.space.sm}`,\n    borderBottom: `3px solid ${theme.colors.atmo2}`,\n  },\n  multipleTooltipTitle: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  multipleTooltipValuesContainer: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    padding: theme.space.sm,\n\n    \"& > *:not(:last-child)\": { paddingBottom: theme.space.sm },\n  },\n  multipleTooltipSeriesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    justifyContent: \"space-between\",\n    alignItems: \"center\",\n  },\n  multipleTooltipSeriesNameContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    marginRight: theme.space.sm,\n  },\n  multipleTooltipSeriesColor: {\n    width: \"10px\",\n    height: \"10px\",\n    marginRight: \"5px\",\n  },\n  multipleTooltipSeriesName: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.semibold,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n  multipleTooltipSeriesValue: {\n    fontFamily: theme.fontFamily.body,\n    fontWeight: theme.fontWeights.normal,\n    fontSize: theme.fontSizes.sm,\n    color: theme.colors.secondary,\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","singleTooltipRoot","width","boxShadow","theme","colors","shadow","backgroundColor","atmo1","padding","space","sm","display","singleTooltipTitle","fontFamily","body","fontWeight","fontWeights","semibold","fontSize","fontSizes","color","secondary","singleTooltipValue","normal","marginLeft","xs","multipleTooltipRoot","multipleTooltipTitleContainer","borderBottom","atmo2","multipleTooltipTitle","multipleTooltipValuesContainer","flexDirection","paddingBottom","multipleTooltipSeriesContainer","justifyContent","alignItems","multipleTooltipSeriesNameContainer","marginRight","multipleTooltipSeriesColor","height","multipleTooltipSeriesName","multipleTooltipSeriesValue"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,eAAe;AAAA;AAAA,EAExEC,mBAAmB;AAAA,IACjBC,OAAO;AAAA,IACPC,WAAWC,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,MAAMM,MAAMC;AAAAA,IACrBC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA,IAClBC,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAC,oBAAoB;AAAA,IAClBT,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,IACpBG,YAAYrB,MAAMM,MAAMgB;AAAAA,EAC1B;AAAA;AAAA,EAEAC,qBAAqB;AAAA,IACnBzB,OAAO;AAAA,IACPC,WAAWC,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,MAAMC,OAAOG;AAAAA,EAChC;AAAA,EACAoB,+BAA+B;AAAA,IAC7BnB,SAAU,QAAOL,MAAMM,MAAMC;AAAAA,IAC7BkB,cAAe,aAAYzB,MAAMC,OAAOyB;AAAAA,EAC1C;AAAA,EACAC,sBAAsB;AAAA,IACpBjB,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAU,gCAAgC;AAAA,IAC9BpB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfxB,SAASL,MAAMM,MAAMC;AAAAA,IAErB,0BAA0B;AAAA,MAAEuB,eAAe9B,MAAMM,MAAMC;AAAAA,IAAG;AAAA,EAC5D;AAAA,EACAwB,gCAAgC;AAAA,IAC9BvB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfG,gBAAgB;AAAA,IAChBC,YAAY;AAAA,EACd;AAAA,EACAC,oCAAoC;AAAA,IAClC1B,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfI,YAAY;AAAA,IACZE,aAAanC,MAAMM,MAAMC;AAAAA,EAC3B;AAAA,EACA6B,4BAA4B;AAAA,IAC1BtC,OAAO;AAAA,IACPuC,QAAQ;AAAA,IACRF,aAAa;AAAA,EACf;AAAA,EACAG,2BAA2B;AAAA,IACzB5B,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAqB,4BAA4B;AAAA,IAC1B7B,YAAYV,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,MAAMC,OAAOiB;AAAAA,EACtB;AACF,CAAC;"}

package/dist/esm/hooks/useVizTheme.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { HvVizContext } from "../providers/Provider.js";
+const useVizTheme = () => {
+  return useContext(HvVizContext);
+};
+export {
+  useVizTheme
+};
+//# sourceMappingURL=useVizTheme.js.map

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

@@ -0,0 +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;"}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+import { HvLineChart } from "./components/LineChart/LineChart.js";
+import { HvVizContext, HvVizProvider } from "./providers/Provider.js";
+export {
+  HvLineChart,
+  HvVizContext,
+  HvVizProvider
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/providers/Provider.js

@@ -0,0 +1,118 @@
+import { useTheme } from "@hitachivantara/uikit-react-core";
+import * as echarts from "echarts/core";
+import { createContext, useState, useEffect, useMemo } from "react";
+import { jsx } from "@emotion/react/jsx-runtime";
+const HvVizContext = createContext({
+  theme: void 0
+});
+const HvVizProvider = ({
+  children
+}) => {
+  const {
+    activeTheme,
+    colorModes,
+    selectedMode,
+    selectedTheme
+  } = useTheme();
+  const [theme, setTheme] = useState();
+  const registerThemes = (themeName, modes, themeStructure) => {
+    modes.forEach((mode) => {
+      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(`${themeName}-${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],
+        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
+          }
+        }
+      });
+    });
+  };
+  useEffect(() => {
+    registerThemes(selectedTheme, colorModes, activeTheme);
+  }, [selectedTheme, colorModes, activeTheme]);
+  useEffect(() => {
+    setTheme(`${selectedTheme}-${selectedMode}`);
+  }, [selectedMode, selectedTheme]);
+  const value = useMemo(() => ({
+    theme
+  }), [theme]);
+  return /* @__PURE__ */ jsx(HvVizContext.Provider, {
+    value,
+    children
+  });
+};
+export {
+  HvVizContext,
+  HvVizProvider
+};
+//# sourceMappingURL=Provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { HvTheme, useTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\nimport { createContext, useEffect, useMemo, useState } 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  const [theme, setTheme] = useState<string | undefined>();\n\n  const registerThemes = (\n    themeName: string,\n    modes: string[],\n    themeStructure?: HvTheme\n  ) => {\n    modes.forEach((mode) => {\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(`${themeName}-${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        ],\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  };\n\n  useEffect(() => {\n    registerThemes(selectedTheme, colorModes, activeTheme);\n  }, [selectedTheme, colorModes, activeTheme]);\n\n  useEffect(() => {\n    setTheme(`${selectedTheme}-${selectedMode}`);\n  }, [selectedMode, selectedTheme]);\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","setTheme","useState","registerThemes","themeName","modes","themeStructure","forEach","mode","baseText","color","colors","secondary","fontWeight","fontWeights","normal","fontSize","fontSizes","sm","fontFamily","body","customAxis","nameTextStyle","axisLine","show","lineStyle","atmo3","axisTick","axisLabel","secondary_80","splitLine","registerTheme","cat1","cat2","cat3","cat4","cat5","cat6","legend","textStyle","tooltip","borderWidth","padding","axisPointer","width","dataZoom","categoryAxis","valueAxis","logAxis","timeAxis","line","useEffect","value","useMemo","_jsx","Provider"],"mappings":"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"}

package/dist/esm/utils/getAgFunc.js

@@ -0,0 +1,5 @@
+const getAgFunc = (func, field) => func === "count" ? "count()" : `${func}(d["${field}"])`;
+export {
+  getAgFunc
+};
+//# sourceMappingURL=getAgFunc.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getAgFunc.js","sources":["../../../src/utils/getAgFunc.ts"],"sourcesContent":["import { HvChartAggregation } from \"@viz/types\";\n\nexport const getAgFunc = (func: HvChartAggregation, field: string) =>\n  func === \"count\" ? \"count()\" : `${func}(d[\"${field}\"])`;\n"],"names":["getAgFunc","func","field"],"mappings":"AAEaA,MAAAA,YAAYA,CAACC,MAA0BC,UAClDD,SAAS,UAAU,YAAa,GAAEA,WAAWC;"}

package/dist/esm/utils/getAxisType.js

@@ -0,0 +1,16 @@
+const getAxisType = (type) => {
+  switch (type) {
+    case "categorical":
+      return "category";
+    case "time":
+      return "time";
+    case "continuous":
+      return "value";
+    default:
+      return void 0;
+  }
+};
+export {
+  getAxisType
+};
+//# sourceMappingURL=getAxisType.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"getAxisType.js","sources":["../../../src/utils/getAxisType.ts"],"sourcesContent":["import { HvChartAxisType } from \"@viz/types\";\n\nexport const getAxisType = (type?: HvChartAxisType) => {\n  switch (type) {\n    case \"categorical\":\n      return \"category\";\n    case \"time\":\n      return \"time\";\n    case \"continuous\":\n      return \"value\";\n    default:\n      return undefined;\n  }\n};\n"],"names":["getAxisType","type","undefined"],"mappings":"AAEaA,MAAAA,cAAcA,CAACC,SAA2B;AACrD,UAAQA,MAAI;AAAA,IACV,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACSC,aAAAA;AAAAA,EACX;AACF;"}

package/dist/esm/utils/getLegendIcon.js

@@ -0,0 +1,10 @@
+const getLegendIcon = (square) => {
+  if (square) {
+    return "path://M0,0L16,0L16,16L0,16L0,0Z";
+  }
+  return "path://M0,0L16,0L16,2L0,2Z";
+};
+export {
+  getLegendIcon
+};
+//# sourceMappingURL=getLegendIcon.js.map

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

@@ -0,0 +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;"}

package/dist/types/index.d.ts

@@ -0,0 +1,229 @@
+import type ColumnTable from 'arquero/dist/types/table/column-table';
+import type { Context } from 'react';
+import { ExtractNames } from '@hitachivantara/uikit-react-core';
+import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
+
+/** Empty cell mode */
+declare const emptyCellMode: readonly ["connect", "void"];
+
+declare type FullMeasuresField = {
+    /** Column name. */
+    field: string;
+    /** Sampling function to use. */
+    sampling?: HvChartSampling;
+    /** Id of the yAxis. */
+    yAxis?: string;
+    /** Whether to hide the symbol for data points. Defaults to `false`. */
+    hideSymbol?: boolean;
+    /** Aggregation function to use. If no `agg` is defined, it will default to `sum`. */
+    agg?: HvChartAggregation;
+    /** Whether the area under the lines should be filled. If not specified, it defaults to the global `area` prop. */
+    area?: boolean;
+    /** Sets opacity of the filled area if `area` is true. If not specified, it defaults to the global `areaOpacity` prop. */
+    areaOpacity?: number;
+    /**
+     * Stack name to use when the measure should be stacked.
+     *
+     * Measures stacked together have the same name.
+     *
+     * 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. */
+    emptyCellMode?: HvChartEmptyCellMode;
+    /** Formatter for the value in the tooltip. If not specified, it defaults to the one defined in the global `tooltip` prop. */
+    valueFormatter?: (value?: string | number) => string;
+};
+
+declare type FullSortByField = {
+    /** Column name. */
+    field: string;
+    /** Order function to use. If no `order` is defined, it will default to `asc`. */
+    order?: HvChartOrder;
+};
+
+declare type GroupByField = string;
+
+/** Aggregation functions */
+export declare type HvChartAggregation = "sum" | "average" | "min" | "max" | "count";
+
+/** Axis definition */
+export declare interface HvChartAxis {
+    id?: string;
+    /** Type: continuous, categorical, or time data. Defaults varies per visualization type and axis orientation. */
+    type?: HvChartAxisType;
+    /** Formatter for the labels on the axis. */
+    labelFormatter?: ((value?: string | number, index?: number) => string) | string;
+    /** Rotation of the labels on the axis. Defaults to `0`. */
+    labelRotation?: number;
+    /** Name used for the axis. */
+    name?: string;
+    /** Maximum value on the axis. Set this property to `max` to use the maximum data value. */
+    maxValue?: string | number | "max" | ((obj: {
+        max: string | number;
+        min: string | number;
+    }) => string | number);
+    /** Minimum value on the axis. Set this property to `min` to use the maximum data value. */
+    minValue?: string | number | "min" | ((obj: {
+        max: string | number;
+        min: string | number;
+    }) => string | number);
+}
+
+/**
+ * Axis types:
+ * continuous: continuous data
+ * categorical: discrete/categorical data
+ * time: continuous time data
+ */
+export declare type HvChartAxisType = "continuous" | "categorical" | "time";
+
+export declare type HvChartEmptyCellMode = (typeof emptyCellMode)[number];
+
+/** Order functions */
+export declare type HvChartOrder = "asc" | "desc";
+
+/** Sampling functions */
+export declare type HvChartSampling = "none" | "average" | "min" | "max" | "sum" | "lttb";
+
+export declare type HvChartTooltipType = (typeof tooltipType)[number];
+
+/**
+ * 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: ({ data, groupBy, splitBy, measures, sortBy, xAxis, yAxis, legend, tooltip, seriesNameFormatter, area, stack, emptyCellMode, horizontalRangeSlider, areaOpacity, classes: classesProp, grid, }: HvLineChartProps) => JSX_2.Element;
+
+export declare type HvLineChartClasses = ExtractNames<typeof useClasses>;
+
+export declare interface HvLineChartProps {
+    /** 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: GroupByField | GroupByField[];
+    /**  Columns to measure on the chart. */
+    measures: MeasuresField | MeasuresField[];
+    /** Columns to use to split the measures. */
+    splitBy?: SplitByField | SplitByField[];
+    /** Columns to use to sort the data points. */
+    sortBy?: SortByField | SortByField[];
+    /**
+     * Options for the xAxis, i.e. the horizontal axis.
+     *
+     * The default `type` for this axis is `categorical`.
+     * */
+    xAxis?: HvChartAxis;
+    /**
+     * Options for the yAxis, i.e. the vertical axis.
+     *
+     * The default `type` for this axis is `continuous`.
+     * */
+    yAxis?: HvChartAxis | [HvChartAxis, HvChartAxis];
+    /** Tooltip options. */
+    tooltip?: {
+        /** Whether to show the tooltip or not. Defaults to `true`. */
+        show?: boolean;
+        /** Formatter for the value in the tooltip. */
+        valueFormatter?: (value?: string | number) => string;
+        /** Tooltip type: single line or multiple lines modes. The single line mode should only be used when there's one series. Defaults to `multiple`. */
+        type?: HvChartTooltipType;
+    };
+    /** 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;
+    /** 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;
+    /** 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;
+    };
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: Partial<HvLineChartClasses>;
+    /** Grid options. */
+    grid?: {
+        /** Distance between the grid and the top of the container. */
+        top?: string | number;
+        /** Distance between the grid and the right side of the container. */
+        right?: string | number;
+        /** Distance between the grid and the left side of the container. */
+        left?: string | number;
+        /** Distance between the grid and the bottom of the container. */
+        bottom?: string | number;
+    };
+}
+
+export declare const HvVizContext: Context<HvVizContextValue>;
+
+export declare interface HvVizContextValue {
+    /**
+     * Current theme
+     */
+    theme?: string;
+}
+
+/**
+ * Enables theming capabilities for visualizations.
+ *
+ * Without this provider the visualizations will not comply to the UI Kit themes.
+ *
+ * This provider should always be used in combination with the `HvProvider` from
+ * the core package since the former uses the themes provided by the latter.
+ *
+ * `HvVizProvider` should always be used after `HvProvider` like so to work properly:
+ *
+ * ```
+ * <HvProvider>
+ *    <HvVizProvider>
+ *        (...)
+ *    </HvVizProvider>
+ * </HvProvider>
+ * ```
+ */
+export declare const HvVizProvider: ({ children }: HvVizProviderProps) => JSX_2.Element;
+
+export declare interface HvVizProviderProps {
+    /**
+     * Component tree.
+     */
+    children?: React.ReactNode;
+}
+
+declare type MeasuresField = string | FullMeasuresField;
+
+declare type SortByField = string | FullSortByField;
+
+declare type SplitByField = string;
+
+/** Tooltip type */
+declare const tooltipType: readonly ["single", "multiple"];
+
+declare const useClasses: (classesProp: Partial<Record<"singleTooltipRoot" | "singleTooltipTitle" | "singleTooltipValue" | "multipleTooltipRoot" | "multipleTooltipTitleContainer" | "multipleTooltipTitle" | "multipleTooltipValuesContainer" | "multipleTooltipSeriesContainer" | "multipleTooltipSeriesNameContainer" | "multipleTooltipSeriesColor" | "multipleTooltipSeriesName" | "multipleTooltipSeriesValue", string>>) => {
+    cx: (...args: any) => string;
+    classes: {
+        singleTooltipRoot: string;
+        singleTooltipTitle: string;
+        singleTooltipValue: string;
+        multipleTooltipRoot: string;
+        multipleTooltipTitleContainer: string;
+        multipleTooltipTitle: string;
+        multipleTooltipValuesContainer: string;
+        multipleTooltipSeriesContainer: string;
+        multipleTooltipSeriesNameContainer: string;
+        multipleTooltipSeriesColor: string;
+        multipleTooltipSeriesName: string;
+        multipleTooltipSeriesValue: string;
+    };
+};
+
+export { }

package/package.json

@@ -1,67 +1,55 @@
 {
   "name": "@hitachivantara/uikit-react-viz",
-  "version": "4.1.9",
-  "description": "A collection of React visualizations for the Hitachi Vantara's Design System.",
+  "version": "5.1.0",
+  "private": false,
+  "author": "Hitachi Vantara UI Kit Team",
+  "description": "Contributed React visualization components for the NEXT UI Kit.",
   "homepage": "https://github.com/lumada-design/hv-uikit-react",
-  "license": "Apache-2.0",
-  "main": "./dist/index.js",
-  "module": "./dist/legacy/index.js",
-  "types": "dist/index.d.ts",
   "sideEffects": false,
-  "author": {
-    "name": "Hitachi Vantara UI Kit Team"
-  },
+  "keywords": [
+    "hitachi-vantara",
+    "design-system",
+    "ui-kit",
+    "react",
+    "typescript"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/lumada-design/hv-uikit-react.git"
   },
-  "scripts": {
-    "build": "npx npm-run-all --npm-path npm --serial clean build:babel build:post:**",
-    "build:babel": "npx npm-run-all --npm-path npm --parallel build:babel:*",
-    "build:babel:node": "cross-env BABEL_ENV=commonjs npx babel --root-mode upward src -d dist --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored",
-    "build:babel:legacy": "cross-env BABEL_ENV=legacy npx babel --root-mode upward src -d dist/legacy --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored",
-    "build:babel:modern": "cross-env BABEL_ENV=modern npx babel --root-mode upward src -d dist/modern --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored",
-    "build:post:clean-snapshots": "npx rimraf **/dist/**/tests",
-    "dev": "npx npm-run-all --npm-path npm clean dev:babel:watch",
-    "dev:babel:watch": "cross-env BABEL_ENV=commonjs npx babel --root-mode upward src -d dist --extensions '.js,.jsx' --source-maps --ignore '**/tests','**/stories' --copy-files --no-copy-ignored --watch",
-    "clean": "npx rimraf dist",
-    "test": "jest --coverage",
-    "test:watch": "jest --watch",
-    "test:update": "jest --u",
-    "prepublishOnly": "npm run build",
-    "link": "npm link",
-    "yalc-publish": "npx yalc publish --no-scripts",
-    "lint:prettier": "npx prettier --config ../../prettier.config.js --check \"src/**/*.js\"",
-    "license-check": "node ../../scripts/license-check.cjs ../../config/license-check.json",
-    "ts-check": "npx tsc -p ."
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/lumada-design/hv-uikit-react/issues"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.10.0",
-    "@emotion/styled": "^11.10.0",
-    "@mui/material": "^5.9.0",
-    "@mui/styles": "^5.9.0",
-    "plotly.js-dist-min": "^2.14.0",
-    "react": "^16.13.1 || ^17.0.2",
-    "react-dom": "^16.13.1 || ^17.0.2"
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.12.2",
+    "arquero": "^5.2.0",
+    "echarts": "^5.4.2",
+    "echarts-for-react": "^3.0.2",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@hitachivantara/uikit-react-core": "^4.4.3",
-    "clsx": "^1.2.1",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.8.1",
-    "react-plotly.js": "^2.5.1"
-  },
-  "devDependencies": {
-    "@types/lodash": "^4.14.182",
-    "@types/plotly.js": "2.12.5",
-    "@types/react": "^17.0.47",
-    "cross-env": "^7.0.3"
+    "@emotion/css": "^11.11.0",
+    "@hitachivantara/uikit-react-core": "^5.15.0"
   },
   "files": [
     "dist"
   ],
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "package"
+  },
+  "gitHead": "10acd676130dcf2a1b89481de2de9ba072b0b746",
+  "main": "dist/cjs/index.cjs",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.cjs",
+      "import": "./dist/esm/index.js"
+    }
   },
-  "gitHead": "1306e807ca35c09ab5d243cb10a3c8aae600d6fe"
+  "types": "dist/types/index.d.ts",
+  "module": "dist/esm/index.js"
 }