@hitachivantara/uikit-react-viz 5.2.8 → 5.3.0

package/dist/cjs/components/DonutChart/DonutChart.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const echarts = require("echarts/core");
+const charts = require("echarts/charts");
+const components = require("echarts/components");
+const useGrid = require("../../hooks/useGrid.cjs");
+const useData = require("../../hooks/useData.cjs");
+const useDataset = require("../../hooks/useDataset.cjs");
+const useSeries = require("../../hooks/useSeries.cjs");
+const useLegend = require("../../hooks/useLegend.cjs");
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useTooltip = require("../../hooks/tooltip/useTooltip.cjs");
+const BaseChart = require("../BaseChart/BaseChart.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
+echarts__namespace.use([charts.PieChart, components.DatasetComponent, components.GridComponent, components.TooltipComponent, components.LegendComponent]);
+const HvDonutChart = ({
+  data,
+  groupBy,
+  classes,
+  legend,
+  tooltip,
+  measure: measures,
+  sortBy,
+  grid,
+  type = "regular",
+  slicesNameFormatter
+}) => {
+  const chartData = useData.useData({
+    data,
+    groupBy,
+    measures,
+    sortBy
+  });
+  const chartDataset = useDataset.useDataset(chartData);
+  const chartSeries = useSeries.useSeries({
+    type: "pie",
+    data: chartData,
+    groupBy,
+    measures,
+    radius: type === "thin" ? ["65%", "70%"] : ["55%", "70%"]
+  });
+  const chartLegend = useLegend.useLegend({
+    ...legend,
+    show: (legend == null ? void 0 : legend.show) ?? true,
+    icon: "square",
+    series: chartSeries.series,
+    formatter: slicesNameFormatter
+  });
+  const chartTooltip = useTooltip.useTooltip({
+    ...tooltip,
+    measures,
+    classes,
+    nameFormatter: slicesNameFormatter
+  });
+  const chartGrid = useGrid.useGrid({
+    ...grid
+  });
+  const options = react.useMemo(() => {
+    return {
+      ...chartSeries,
+      ...chartDataset,
+      ...chartLegend,
+      ...chartTooltip,
+      ...chartGrid
+    };
+  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
+    options
+  });
+};
+exports.HvDonutChart = HvDonutChart;
+//# sourceMappingURL=DonutChart.cjs.map

package/dist/cjs/components/DonutChart/DonutChart.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.cjs","sources":["../../../../src/components/DonutChart/DonutChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport * as echarts from \"echarts/core\";\nimport { PieChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\n\nimport {\n  HvChartTooltipClasses,\n  useData,\n  useDataset,\n  useGrid,\n  useLegend,\n  useSeries,\n  useTooltip,\n} from \"@viz/hooks\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvChartCommonProps } from \"../../types/common\";\nimport { HvDonutChartMeasure } from \"../../types\";\n\n// Register chart components\necharts.use([\n  PieChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n]);\n\nexport interface HvDonutChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvDonutChartProps extends HvChartCommonProps {\n  /** Column to measure. */\n  measure: HvDonutChartMeasure;\n  /** Type: regular or thin. Defaults to `regular`. */\n  type?: \"regular\" | \"thin\";\n  /** Formatter for the slices names used on the tooltips and legend. */\n  slicesNameFormatter?: (value?: string) => string;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDonutChartClasses;\n}\n\n/**\n * Donut charts nicely convey the part-whole relationship and they have become\n * the most recognizable chart types for representing proportions in business and data statistics.\n */\nexport const HvDonutChart = ({\n  data,\n  groupBy,\n  classes,\n  legend,\n  tooltip,\n  measure: measures,\n  sortBy,\n  grid,\n  type = \"regular\",\n  slicesNameFormatter,\n}: HvDonutChartProps) => {\n  const chartData = useData({ data, groupBy, measures, sortBy });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartSeries = useSeries({\n    type: \"pie\",\n    data: chartData,\n    groupBy,\n    measures,\n    radius: type === \"thin\" ? [\"65%\", \"70%\"] : [\"55%\", \"70%\"],\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    show: legend?.show ?? true,\n    icon: \"square\",\n    series: chartSeries.series,\n    formatter: slicesNameFormatter,\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    measures,\n    classes,\n    nameFormatter: slicesNameFormatter,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const options = useMemo(() => {\n    return {\n      ...chartSeries,\n      ...chartDataset,\n      ...chartLegend,\n      ...chartTooltip,\n      ...chartGrid,\n    };\n  }, [chartSeries, chartDataset, chartLegend, chartTooltip, chartGrid]);\n\n  return <HvBaseChart options={options} />;\n};\n"],"names":["echarts","use","PieChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","HvDonutChart","data","groupBy","classes","legend","tooltip","measure","measures","sortBy","grid","type","slicesNameFormatter","chartData","useData","chartDataset","useDataset","chartSeries","useSeries","radius","chartLegend","useLegend","show","icon","series","formatter","chartTooltip","useTooltip","nameFormatter","chartGrid","useGrid","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BAA,mBAAQC,IAAI,CACVC,iBACAC,WAAAA,kBACAC,WAAAA,eACAC,WAAAA,kBACAC,WAAe,eAAA,CAChB;AAmBM,MAAMC,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AACiB,MAAM;AACvB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEZ;AAAAA,IAAMC;AAAAA,IAASK;AAAAA,IAAUC;AAAAA,EAAAA,CAAQ;AAEvDM,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,cAAcC,UAAAA,UAAU;AAAA,IAC5BP,MAAM;AAAA,IACNT,MAAMW;AAAAA,IACNV;AAAAA,IACAK;AAAAA,IACAW,QAAQR,SAAS,SAAS,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,KAAK;AAAA,EAAA,CACzD;AAED,QAAMS,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAGhB;AAAAA,IACHiB,OAAMjB,iCAAQiB,SAAQ;AAAA,IACtBC,MAAM;AAAA,IACNC,QAAQP,YAAYO;AAAAA,IACpBC,WAAWb;AAAAA,EAAAA,CACZ;AAED,QAAMc,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAGrB;AAAAA,IACHE;AAAAA,IACAJ;AAAAA,IACAwB,eAAehB;AAAAA,EAAAA,CAChB;AAED,QAAMiB,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAGpB;AAAAA,EAAAA,CAAM;AAE/BqB,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGf;AAAAA,MACH,GAAGF;AAAAA,MACH,GAAGK;AAAAA,MACH,GAAGM;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CAACZ,aAAaF,cAAcK,aAAaM,cAAcG,SAAS,CAAC;AAEpE,wCAAQI,UAAAA,aAAW;AAAA,IAACF;AAAAA,EAAAA,CAAmB;AACzC;;"}

package/dist/cjs/components/LineChart/LineChart.cjs

@@ -1,19 +1,115 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const echarts = require("echarts/core");
+const charts = require("echarts/charts");
+const components = require("echarts/components");
+const useDataZoom = require("../../hooks/useDataZoom.cjs");
+const useXAxis = require("../../hooks/useXAxis.cjs");
+const useYAxis = require("../../hooks/useYAxis.cjs");
+const useGrid = require("../../hooks/useGrid.cjs");
+const useData = require("../../hooks/useData.cjs");
+const useDataset = require("../../hooks/useDataset.cjs");
+const useSeries = require("../../hooks/useSeries.cjs");
+const useLegend = require("../../hooks/useLegend.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useTooltip = require("../../hooks/tooltip/useTooltip.cjs");
 const BaseChart = require("../BaseChart/BaseChart.cjs");
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
+echarts__namespace.use([charts.LineChart, components.DatasetComponent, components.GridComponent, components.TooltipComponent, components.LegendComponent, components.DataZoomSliderComponent, components.DataZoomInsideComponent]);
 const HvLineChart = ({
   area = false,
   emptyCellMode = "void",
   areaOpacity = 0.5,
-  ...others
+  yAxis,
+  xAxis,
+  horizontalRangeSlider,
+  grid,
+  data,
+  groupBy,
+  splitBy,
+  sortBy,
+  measures,
+  stack,
+  seriesNameFormatter,
+  legend,
+  classes,
+  tooltip
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
+  const chartData = useData.useData({
+    data,
+    groupBy,
+    measures,
+    splitBy,
+    sortBy
+  });
+  const chartDataset = useDataset.useDataset(chartData);
+  const chartYAxis = useYAxis.useYAxis({
+    yAxis
+  });
+  const chartXAxis = useXAxis.useXAxis({
+    xAxis,
+    scale: true
+  });
+  const chartSlider = useDataZoom.useDataZoom({
+    showHorizontal: horizontalRangeSlider == null ? void 0 : horizontalRangeSlider.show
+  });
+  const chartGrid = useGrid.useGrid({
+    ...grid
+  });
+  const chartSeries = useSeries.useSeries({
     type: "line",
+    data: chartData,
+    groupBy,
+    measures,
     area,
-    emptyCellMode,
     areaOpacity,
-    ...others
+    emptyCellMode,
+    stack,
+    nameFormatter: seriesNameFormatter
+  });
+  const chartLegend = useLegend.useLegend({
+    ...legend,
+    series: chartSeries.series
+  });
+  const chartTooltip = useTooltip.useTooltip({
+    ...tooltip,
+    trigger: "axis",
+    measures,
+    classes
+  });
+  const options = react.useMemo(() => {
+    return {
+      ...chartYAxis,
+      ...chartXAxis,
+      ...chartSlider,
+      ...chartGrid,
+      ...chartDataset,
+      ...chartSeries,
+      ...chartLegend,
+      ...chartTooltip
+    };
+  }, [chartXAxis, chartYAxis, chartSlider, chartGrid, chartDataset, chartSeries, chartLegend, chartTooltip]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseChart.HvBaseChart, {
+    options
   });
 };
 exports.HvLineChart = HvLineChart;

package/dist/cjs/components/LineChart/LineChart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.cjs","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import {\n  HvBaseChart,\n  HvBaseChartClasses,\n  HvBaseChartCommonProps,\n  HvBaseChartLineProps,\n} from \"../BaseChart\";\n\nexport interface HvLineChartClasses extends HvBaseChartClasses {}\n\nexport interface HvLineChartProps\n  extends HvBaseChartCommonProps,\n    HvBaseChartLineProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = ({\n  area = false,\n  emptyCellMode = \"void\",\n  areaOpacity = 0.5,\n  ...others\n}: HvLineChartProps) => {\n  return (\n    <HvBaseChart\n      type=\"line\"\n      area={area}\n      emptyCellMode={emptyCellMode}\n      areaOpacity={areaOpacity}\n      {...others}\n    />\n  );\n};\n"],"names":["HvLineChart","area","emptyCellMode","areaOpacity","others","HvBaseChart","type"],"mappings":";;;;AAoBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACd,GAAGC;AACa,MAAM;AACtB,wCACGC,UAAAA,aAAW;AAAA,IACVC,MAAK;AAAA,IACLL;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IAAyB,GACrBC;AAAAA,EAAAA,CACL;AAEL;;"}
+{"version":3,"file":"LineChart.cjs","sources":["../../../../src/components/LineChart/LineChart.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport * as echarts from \"echarts/core\";\nimport { LineChart } from \"echarts/charts\";\nimport {\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n} from \"echarts/components\";\n\nimport {\n  useYAxis,\n  useXAxis,\n  useDataZoom,\n  useGrid,\n  useData,\n  useDataset,\n  useSeries,\n  useLegend,\n  useTooltip,\n  HvChartTooltipClasses,\n} from \"@viz/hooks\";\n\nimport { HvChartEmptyCellMode, HvLineChartMeasures } from \"../../types\";\nimport { HvBaseChart } from \"../BaseChart\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"../../types/common\";\n\n// Register chart components\necharts.use([\n  LineChart,\n  DatasetComponent,\n  GridComponent,\n  TooltipComponent,\n  LegendComponent,\n  DataZoomSliderComponent,\n  DataZoomInsideComponent,\n]);\n\nexport interface HvLineChartClasses extends HvChartTooltipClasses {}\n\nexport interface HvLineChartProps\n  extends HvAxisChartCommonProps,\n    HvChartCommonProps {\n  /**  Columns to measure on the chart. */\n  measures: Arrayable<HvLineChartMeasures>;\n  /** Strategy to use when there are empty cells. Defaults to `void`. */\n  emptyCellMode?: HvChartEmptyCellMode;\n  /** Whether the area under the lines should be filled. Defaults to `false`. */\n  area?: boolean;\n  /** Sets opacity of the filled area if `area` is true. Defaults to `0.5`. */\n  areaOpacity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLineChartClasses;\n}\n\n/**\n * A line chart or line plot or line graph is a type of chart which displays information as a series of data points\n * connected by straight line segments. It is a basic type of chart common in many fields.\n */\nexport const HvLineChart = ({\n  area = false,\n  emptyCellMode = \"void\",\n  areaOpacity = 0.5,\n  yAxis,\n  xAxis,\n  horizontalRangeSlider,\n  grid,\n  data,\n  groupBy,\n  splitBy,\n  sortBy,\n  measures,\n  stack,\n  seriesNameFormatter,\n  legend,\n  classes,\n  tooltip,\n}: HvLineChartProps) => {\n  const chartData = useData({ data, groupBy, measures, splitBy, sortBy });\n\n  const chartDataset = useDataset(chartData);\n\n  const chartYAxis = useYAxis({ yAxis });\n\n  const chartXAxis = useXAxis({ xAxis, scale: true });\n\n  const chartSlider = useDataZoom({\n    showHorizontal: horizontalRangeSlider?.show,\n  });\n\n  const chartGrid = useGrid({ ...grid });\n\n  const chartSeries = useSeries({\n    type: \"line\",\n    data: chartData,\n    groupBy,\n    measures,\n    area,\n    areaOpacity,\n    emptyCellMode,\n    stack,\n    nameFormatter: seriesNameFormatter,\n  });\n\n  const chartLegend = useLegend({\n    ...legend,\n    series: chartSeries.series,\n  });\n\n  const chartTooltip = useTooltip({\n    ...tooltip,\n    trigger: \"axis\",\n    measures,\n    classes,\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","LineChart","DatasetComponent","GridComponent","TooltipComponent","LegendComponent","DataZoomSliderComponent","DataZoomInsideComponent","HvLineChart","area","emptyCellMode","areaOpacity","yAxis","xAxis","horizontalRangeSlider","grid","data","groupBy","splitBy","sortBy","measures","stack","seriesNameFormatter","legend","classes","tooltip","chartData","useData","chartDataset","useDataset","chartYAxis","useYAxis","chartXAxis","useXAxis","scale","chartSlider","useDataZoom","showHorizontal","show","chartGrid","useGrid","chartSeries","useSeries","type","nameFormatter","chartLegend","useLegend","series","chartTooltip","useTooltip","trigger","options","useMemo","HvBaseChart"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCAA,mBAAQC,IAAI,CACVC,OACAC,WAAAA,6BACAC,WAAAA,eACAC,WACAC,kBAAAA,4BACAC,WAAAA,yBACAC,WAAuB,uBAAA,CACxB;AAuBM,MAAMC,cAAcA,CAAC;AAAA,EAC1BC,OAAO;AAAA,EACPC,gBAAgB;AAAA,EAChBC,cAAc;AAAA,EACdC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AACtB,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAEX;AAAAA,IAAMC;AAAAA,IAASG;AAAAA,IAAUF;AAAAA,IAASC;AAAAA,EAAAA,CAAQ;AAEhES,QAAAA,eAAeC,sBAAWH,SAAS;AAEzC,QAAMI,aAAaC,SAAAA,SAAS;AAAA,IAAEnB;AAAAA,EAAAA,CAAO;AAErC,QAAMoB,aAAaC,SAAAA,SAAS;AAAA,IAAEpB;AAAAA,IAAOqB,OAAO;AAAA,EAAA,CAAM;AAElD,QAAMC,cAAcC,YAAAA,YAAY;AAAA,IAC9BC,gBAAgBvB,+DAAuBwB;AAAAA,EAAAA,CACxC;AAED,QAAMC,YAAYC,QAAAA,QAAQ;AAAA,IAAE,GAAGzB;AAAAA,EAAAA,CAAM;AAErC,QAAM0B,cAAcC,UAAAA,UAAU;AAAA,IAC5BC,MAAM;AAAA,IACN3B,MAAMU;AAAAA,IACNT;AAAAA,IACAG;AAAAA,IACAX;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAW;AAAAA,IACAuB,eAAetB;AAAAA,EAAAA,CAChB;AAED,QAAMuB,cAAcC,UAAAA,UAAU;AAAA,IAC5B,GAAGvB;AAAAA,IACHwB,QAAQN,YAAYM;AAAAA,EAAAA,CACrB;AAED,QAAMC,eAAeC,WAAAA,WAAW;AAAA,IAC9B,GAAGxB;AAAAA,IACHyB,SAAS;AAAA,IACT9B;AAAAA,IACAI;AAAAA,EAAAA,CACD;AAEK2B,QAAAA,UAAUC,MAAAA,QAAQ,MAAM;AACrB,WAAA;AAAA,MACL,GAAGtB;AAAAA,MACH,GAAGE;AAAAA,MACH,GAAGG;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGX;AAAAA,MACH,GAAGa;AAAAA,MACH,GAAGI;AAAAA,MACH,GAAGG;AAAAA,IAAAA;AAAAA,EACL,GACC,CACDhB,YACAF,YACAK,aACAI,WACAX,cACAa,aACAI,aACAG,YAAY,CACb;AAED,wCAAQK,UAAAA,aAAW;AAAA,IAACF;AAAAA,EAAAA,CAAmB;AACzC;;"}

package/dist/cjs/{components/BaseChart/BaseChart.styles.cjs → hooks/tooltip/styles.cjs}

@@ -4,7 +4,7 @@ const uikitReactCore = require("@hitachivantara/uikit-react-core");
 const {
   useClasses,
   staticClasses
-} = uikitReactCore.createClasses("HvBaseChart", {
+} = uikitReactCore.createClasses("HvChartTooltip", {
   /** Single tooltip styles */
   singleTooltipRoot: {
     width: "fit-content",
@@ -82,4 +82,4 @@ const {
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;
-//# sourceMappingURL=BaseChart.styles.cjs.map
+//# sourceMappingURL=styles.cjs.map

package/dist/cjs/hooks/tooltip/styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs","sources":["../../../../src/hooks/tooltip/styles.tsx"],"sourcesContent":["import { theme, createClasses } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvChartTooltip\", {\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,eAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,mBAAmB;AAAA,IACjBC,OAAO;AAAA,IACPC,WAAWC,eAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,eAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,SAASL,eAAAA,MAAMM,MAAMC;AAAAA,IACrBC,SAAS;AAAA,EACX;AAAA,EACAC,oBAAoB;AAAA,IAClBC,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAC,oBAAoB;AAAA,IAClBT,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,IACpBG,YAAYrB,eAAAA,MAAMM,MAAMgB;AAAAA,EAC1B;AAAA;AAAA,EAEAC,qBAAqB;AAAA,IACnBzB,OAAO;AAAA,IACPC,WAAWC,eAAAA,MAAMC,OAAOC;AAAAA,IACxBC,iBAAiBH,eAAAA,MAAMC,OAAOG;AAAAA,EAChC;AAAA,EACAoB,+BAA+B;AAAA,IAC7BnB,SAAU,QAAOL,eAAAA,MAAMM,MAAMC;AAAAA,IAC7BkB,cAAe,aAAYzB,eAAAA,MAAMC,OAAOyB;AAAAA,EAC1C;AAAA,EACAC,sBAAsB;AAAA,IACpBjB,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAU,gCAAgC;AAAA,IAC9BpB,SAAS;AAAA,IACTqB,eAAe;AAAA,IACfxB,SAASL,eAAAA,MAAMM,MAAMC;AAAAA,IAErB,0BAA0B;AAAA,MAAEuB,eAAe9B,eAAAA,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,eAAAA,MAAMM,MAAMC;AAAAA,EAC3B;AAAA,EACA6B,4BAA4B;AAAA,IAC1BtC,OAAO;AAAA,IACPuC,QAAQ;AAAA,IACRF,aAAa;AAAA,EACf;AAAA,EACAG,2BAA2B;AAAA,IACzB5B,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYC;AAAAA,IAC9BC,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AAAA,EACAqB,4BAA4B;AAAA,IAC1B7B,YAAYV,eAAAA,MAAMU,WAAWC;AAAAA,IAC7BC,YAAYZ,eAAAA,MAAMa,YAAYO;AAAAA,IAC9BL,UAAUf,eAAAA,MAAMgB,UAAUT;AAAAA,IAC1BU,OAAOjB,eAAAA,MAAMC,OAAOiB;AAAAA,EACtB;AACF,CAAC;;;"}

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

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const getMeasure = require("../../utils/getMeasure.cjs");
+const styles = require("./styles.cjs");
+const useTooltip = ({
+  measures,
+  classes,
+  component,
+  show = true,
+  horizontal = false,
+  trigger = "item",
+  type = "multiple",
+  valueFormatter,
+  titleFormatter,
+  nameFormatter
+}) => {
+  const {
+    classes: hvClasses
+  } = styles.useClasses(classes);
+  const renderTooltip = react.useCallback((params) => {
+    const title = params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
+    const formattedTitle = titleFormatter ? titleFormatter(title) : title;
+    if (type === "single") {
+      const measure = getMeasure.getMeasure(params[0].seriesType === "pie" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]], measures);
+      const value = params[0].seriesType === "pie" ? params[0].value[params[0].encode.value[0]] : horizontal ? params[0].value[params[0].encode.x[0]] : params[0].value[params[0].encode.y[0]];
+      const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+      return `
+            <div class="${hvClasses == null ? void 0 : hvClasses.singleTooltipRoot}">
+              <p class="${hvClasses == null ? void 0 : hvClasses.singleTooltipTitle}">${formattedTitle}</p>
+              <p class="${hvClasses == null ? void 0 : hvClasses.singleTooltipValue}">${formattedValue}</p>
+            </div>
+            `;
+    }
+    return `
+        <div class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipRoot}">
+          <div class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipTitleContainer}">
+            <div>
+              <p class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipTitle}">${formattedTitle}</p>
+            </div>
+          </div>
+          <div class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipValuesContainer}">
+            ${params.map((s) => {
+      const measure = getMeasure.getMeasure(s.seriesType === "pie" ? s.name : horizontal ? s.dimensionNames[s.encode.x[0]] : s.dimensionNames[s.encode.y[0]], measures);
+      const value = s.seriesType === "pie" ? s.value[s.encode.value[0]] : horizontal ? s.value[s.encode.x[0]] : s.value[s.encode.y[0]];
+      const formattedValue = typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
+      const name = s.seriesType === "pie" ? s.name : s.seriesName;
+      const formattedName = nameFormatter ? nameFormatter(name) : name;
+      return `
+                <div key="${s.seriesName}" class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipSeriesContainer}">
+                  <div class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipSeriesNameContainer}">
+                    <p style="background-color: ${s.color};" class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipSeriesColor}" />
+                    <p class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipSeriesName}">${formattedName}</p>
+                  </div>
+                  <p class="${hvClasses == null ? void 0 : hvClasses.multipleTooltipSeriesValue}">${formattedValue}</p>
+                </div>
+              `;
+    }).join(" ")}
+          </div>
+        </div>
+        `;
+  }, [hvClasses, horizontal, type, measures, nameFormatter, titleFormatter, valueFormatter]);
+  const renderCustomTooltip = react.useCallback((params) => {
+    if (typeof component === "function") {
+      const values = {
+        title: params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
+        series: params.map((p) => {
+          return {
+            color: p.color,
+            name: p.seriesType === "pie" ? p.name : p.seriesName,
+            value: p.seriesType === "pie" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
+          };
+        })
+      };
+      return component(values);
+    }
+    return component;
+  }, [component, horizontal]);
+  const option = react.useMemo(() => {
+    return {
+      tooltip: {
+        confine: false,
+        show,
+        trigger,
+        position: (point, params, dom, rect, size) => {
+          return [point[0], point[1] - size.contentSize[1]];
+        },
+        formatter: (params) => {
+          const tooltipParams = Array.isArray(params) ? params : [params];
+          return component ? renderCustomTooltip(tooltipParams) : renderTooltip(tooltipParams);
+        }
+      }
+    };
+  }, [trigger, component, show, renderTooltip, renderCustomTooltip]);
+  return option;
+};
+exports.useTooltip = useTooltip;
+//# sourceMappingURL=useTooltip.cjs.map

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

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

package/dist/cjs/hooks/useData.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const arquero = require("arquero");
+const getAgFunc = require("../utils/getAgFunc.cjs");
+const getGroupKey = require("../utils/getGroupKey.cjs");
+const useData = ({
+  data,
+  groupBy,
+  measures,
+  sortBy,
+  splitBy
+}) => {
+  const groupByKey = getGroupKey.getGroupKey(groupBy);
+  const chartData = react.useMemo(() => {
+    let tableData;
+    if (data instanceof arquero.internal.ColumnTable) {
+      tableData = data;
+    } else if (Array.isArray(data)) {
+      tableData = arquero.from(data);
+    } else {
+      tableData = arquero.table(data);
+    }
+    const groupByFields = groupBy ? Array.isArray(groupBy) ? groupBy : [groupBy] : [];
+    const splitByFields = Array.isArray(splitBy) ? splitBy : splitBy != null ? [splitBy] : [];
+    const measuresFields = measures == null ? {} : typeof measures === "string" ? {
+      [measures]: getAgFunc.getAgFunc("sum", measures)
+    } : Array.isArray(measures) ? measures.reduce((acc, value) => {
+      let field;
+      let agFunction;
+      if (typeof value === "string") {
+        field = value;
+        agFunction = "sum";
+      } else {
+        field = value.field;
+        agFunction = value.agg ?? "sum";
+      }
+      return {
+        ...acc,
+        [field]: getAgFunc.getAgFunc(agFunction, field)
+      };
+    }, {}) : {
+      [measures.field]: getAgFunc.getAgFunc(measures.agg ?? "sum", measures.field)
+    };
+    const sortByFields = sortBy == null ? {} : typeof sortBy === "string" ? {
+      [sortBy]: "asc"
+    } : Array.isArray(sortBy) ? sortBy.reduce((acc, value) => {
+      let field;
+      let orderFunction;
+      if (typeof value === "string") {
+        field = value;
+        orderFunction = "asc";
+      } else {
+        field = value.field;
+        orderFunction = value.order ?? "asc";
+      }
+      return {
+        ...acc,
+        [field]: orderFunction
+      };
+    }, {}) : {
+      [sortBy.field]: sortBy.order ?? "asc"
+    };
+    const allFields = [...groupByFields, ...splitByFields, ...Object.keys(measuresFields)];
+    tableData = tableData.select(...allFields);
+    if (groupByFields.length > 0) {
+      tableData = tableData.groupby(groupByFields);
+    }
+    if (splitByFields.length > 0) {
+      tableData = tableData.pivot(splitByFields, measuresFields);
+    } else {
+      tableData = tableData.rollup(measuresFields);
+    }
+    if (groupByFields.length > 1) {
+      const expression = `d => ${groupByFields.map((field) => `d.${field}`).join(" + '_' + ")}`;
+      tableData = tableData.derive({
+        [groupByKey]: expression
+      }, {
+        after: groupByFields[groupByFields.length - 1]
+      });
+    }
+    if (Object.keys(sortByFields).length > 0) {
+      tableData = tableData.orderby(...Object.keys(sortByFields).filter((key) => allFields.includes(key)).map((key) => sortByFields[key] === "desc" ? arquero.desc(key) : key));
+    }
+    if (groupByFields.length > 1) {
+      tableData = tableData.select(arquero.not(...groupByFields));
+    }
+    return tableData;
+  }, [data, groupBy, groupByKey, splitBy, measures, sortBy]);
+  return chartData;
+};
+exports.useData = useData;
+//# sourceMappingURL=useData.cjs.map

package/dist/cjs/hooks/useData.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useData.cjs","sources":["../../../src/hooks/useData.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { from, internal, not, table, desc } from \"arquero\";\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { Arrayable } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n  HvBarChartMeasures,\n  HvChartAggregation,\n  HvChartOrder,\n  HvLineChartMeasures,\n  HvChartData,\n  HvDonutChartMeasure,\n} from \"@viz/types\";\nimport { getAgFunc, getGroupKey } from \"@viz/utils\";\nimport { HvAxisChartCommonProps, HvChartCommonProps } from \"@viz/types/common\";\n\ninterface HvDataHookProps {\n  data: HvChartData;\n  groupBy: HvChartCommonProps[\"groupBy\"];\n  measures:\n    | Arrayable<HvLineChartMeasures | HvBarChartMeasures>\n    | HvDonutChartMeasure;\n  splitBy?: HvAxisChartCommonProps[\"splitBy\"];\n  sortBy?: HvChartCommonProps[\"sortBy\"];\n}\n\nexport const useData = ({\n  data,\n  groupBy,\n  measures,\n  sortBy,\n  splitBy,\n}: HvDataHookProps): internal.ColumnTable => {\n  const groupByKey = getGroupKey(groupBy);\n\n  const chartData = useMemo<ColumnTable>(() => {\n    let tableData: ColumnTable;\n    if (data instanceof internal.ColumnTable) {\n      tableData = data;\n    } else if (Array.isArray(data)) {\n      tableData = from(data);\n    } else {\n      tableData = table(data);\n    }\n\n    const groupByFields = groupBy\n      ? Array.isArray(groupBy)\n        ? groupBy\n        : [groupBy]\n      : [];\n\n    const splitByFields = Array.isArray(splitBy)\n      ? splitBy\n      : splitBy != null\n      ? [splitBy]\n      : [];\n\n    const measuresFields: { [key: string]: string } =\n      measures == null\n        ? {}\n        : typeof measures === \"string\"\n        ? { [measures]: getAgFunc(\"sum\", measures) }\n        : Array.isArray(measures)\n        ? measures.reduce<{ [key: string]: string }>((acc, value) => {\n            let field: string;\n            let agFunction: HvChartAggregation;\n            if (typeof value === \"string\") {\n              field = value;\n              agFunction = \"sum\";\n            } else {\n              field = value.field;\n              agFunction = value.agg ?? \"sum\";\n            }\n\n            return {\n              ...acc,\n              [field]: getAgFunc(agFunction, field),\n            };\n          }, {})\n        : {\n            [measures.field]: getAgFunc(measures.agg ?? \"sum\", measures.field),\n          };\n\n    const sortByFields: { [key: string]: HvChartOrder } =\n      sortBy == null\n        ? {}\n        : typeof sortBy === \"string\"\n        ? { [sortBy]: \"asc\" }\n        : Array.isArray(sortBy)\n        ? sortBy.reduce<{ [key: string]: HvChartOrder }>((acc, value) => {\n            let field: string;\n            let orderFunction: HvChartOrder;\n            if (typeof value === \"string\") {\n              field = value;\n              orderFunction = \"asc\";\n            } else {\n              field = value.field;\n              orderFunction = value.order ?? \"asc\";\n            }\n\n            return {\n              ...acc,\n              [field]: orderFunction,\n            };\n          }, {})\n        : { [sortBy.field]: sortBy.order ?? \"asc\" };\n\n    const allFields = [\n      ...groupByFields,\n      ...splitByFields,\n      ...Object.keys(measuresFields),\n    ];\n\n    // remove unneeded fields\n    tableData = tableData.select(...allFields);\n\n    // group by groupBy fields\n    if (groupByFields.length > 0) {\n      tableData = tableData.groupby(groupByFields);\n    }\n\n    if (splitByFields.length > 0) {\n      // pivot by splitBy fields\n      tableData = tableData.pivot(splitByFields, measuresFields);\n    } else {\n      // if there is no splitBy fields, just aggregate measures fields\n      tableData = tableData.rollup(measuresFields);\n    }\n\n    // if grouped by multiple fields, create a new joint field\n    // as the line chart doesn't implement hierarchical axis label grouping\n    if (groupByFields.length > 1) {\n      const expression = `d => ${groupByFields\n        .map((field) => `d.${field}`)\n        .join(\" + '_' + \")}`;\n\n      tableData = tableData.derive(\n        { [groupByKey]: expression },\n        { after: groupByFields[groupByFields.length - 1] }\n      );\n    }\n\n    // sort by sortBy fields\n    if (Object.keys(sortByFields).length > 0) {\n      tableData = tableData.orderby(\n        ...Object.keys(sortByFields)\n          // only sort by fields that are in the table, ignore the rest\n          .filter((key) => allFields.includes(key))\n          .map((key) => (sortByFields[key] === \"desc\" ? desc(key) : key))\n      );\n    }\n\n    // if a derived field was created, remove the original fields\n    if (groupByFields.length > 1) {\n      tableData = tableData.select(not(...groupByFields));\n    }\n\n    return tableData;\n  }, [data, groupBy, groupByKey, splitBy, measures, sortBy]);\n\n  return chartData;\n};\n"],"names":["useData","data","groupBy","measures","sortBy","splitBy","groupByKey","getGroupKey","chartData","useMemo","tableData","internal","ColumnTable","Array","isArray","from","table","groupByFields","splitByFields","measuresFields","getAgFunc","reduce","acc","value","field","agFunction","agg","sortByFields","orderFunction","order","allFields","Object","keys","select","length","groupby","pivot","rollup","expression","map","join","derive","after","orderby","filter","key","includes","desc","not"],"mappings":"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"}

package/dist/cjs/hooks/useDataZoom.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useDataZoom = ({
+  showHorizontal
+}) => {
+  const option = react.useMemo(() => {
+    return {
+      dataZoom: [{
+        show: showHorizontal ?? false,
+        type: "slider",
+        orient: "horizontal"
+      }, {
+        show: showHorizontal ?? false,
+        type: "inside",
+        orient: "horizontal",
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true
+      }]
+    };
+  }, [showHorizontal]);
+  return option;
+};
+exports.useDataZoom = useDataZoom;
+//# sourceMappingURL=useDataZoom.cjs.map

package/dist/cjs/hooks/useDataZoom.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataZoom.cjs","sources":["../../../src/hooks/useDataZoom.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\ninterface HvDataZoomHookProps {\n  showHorizontal?: boolean;\n}\n\nexport const useDataZoom = ({ showHorizontal }: HvDataZoomHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"dataZoom\">>(() => {\n    return {\n      dataZoom: [\n        {\n          show: showHorizontal ?? false,\n          type: \"slider\",\n          orient: \"horizontal\",\n        },\n        {\n          show: showHorizontal ?? false,\n          type: \"inside\",\n          orient: \"horizontal\",\n          zoomOnMouseWheel: \"shift\",\n          moveOnMouseWheel: true,\n        },\n      ],\n    };\n  }, [showHorizontal]);\n\n  return option;\n};\n"],"names":["useDataZoom","showHorizontal","option","useMemo","dataZoom","show","type","orient","zoomOnMouseWheel","moveOnMouseWheel"],"mappings":";;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAAEC;AAAoC,MAAM;AAChEC,QAAAA,SAASC,MAAAA,QAAyC,MAAM;AACrD,WAAA;AAAA,MACLC,UAAU,CACR;AAAA,QACEC,MAAMJ,kBAAkB;AAAA,QACxBK,MAAM;AAAA,QACNC,QAAQ;AAAA,MAAA,GAEV;AAAA,QACEF,MAAMJ,kBAAkB;AAAA,QACxBK,MAAM;AAAA,QACNC,QAAQ;AAAA,QACRC,kBAAkB;AAAA,QAClBC,kBAAkB;AAAA,MAAA,CACnB;AAAA,IAAA;AAAA,EAEL,GACC,CAACR,cAAc,CAAC;AAEZC,SAAAA;AACT;;"}

package/dist/cjs/hooks/useDataset.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useDataset = (data) => {
+  const option = react.useMemo(() => {
+    return {
+      dataset: {
+        source: data.columnNames().reduce((acc, c) => ({
+          ...acc,
+          [c]: data.array(c)
+        }), {})
+      }
+    };
+  }, [data]);
+  return option;
+};
+exports.useDataset = useDataset;
+//# sourceMappingURL=useDataset.cjs.map

package/dist/cjs/hooks/useDataset.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataset.cjs","sources":["../../../src/hooks/useDataset.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { internal } from \"arquero\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nexport const useDataset = (data: internal.ColumnTable) => {\n  const option = useMemo<Pick<EChartsOption, \"dataset\">>(() => {\n    return {\n      dataset: {\n        source: data.columnNames().reduce(\n          (acc, c) => ({\n            ...acc,\n            [c]: data.array(c),\n          }),\n          {}\n        ),\n      },\n    };\n  }, [data]);\n\n  return option;\n};\n"],"names":["useDataset","data","option","useMemo","dataset","source","columnNames","reduce","acc","c","array"],"mappings":";;;AAMaA,MAAAA,aAAaA,CAACC,SAA+B;AAClDC,QAAAA,SAASC,MAAAA,QAAwC,MAAM;AACpD,WAAA;AAAA,MACLC,SAAS;AAAA,QACPC,QAAQJ,KAAKK,YAAAA,EAAcC,OACzB,CAACC,KAAKC,OAAO;AAAA,UACX,GAAGD;AAAAA,UACH,CAACC,CAAC,GAAGR,KAAKS,MAAMD,CAAC;AAAA,QACnB,IACA,CAAA,CACF;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAACR,IAAI,CAAC;AAEFC,SAAAA;AACT;;"}

package/dist/cjs/hooks/useGrid.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useGrid = ({
+  top,
+  left,
+  right,
+  bottom
+}) => {
+  const option = react.useMemo(() => {
+    return {
+      // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise
+      grid: {
+        ...top != null && {
+          top
+        },
+        ...bottom != null && {
+          bottom
+        },
+        ...left != null && {
+          left
+        },
+        ...right != null && {
+          right
+        }
+      }
+    };
+  }, [top, left, right, bottom]);
+  return option;
+};
+exports.useGrid = useGrid;
+//# sourceMappingURL=useGrid.cjs.map

package/dist/cjs/hooks/useGrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGrid.cjs","sources":["../../../src/hooks/useGrid.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { HvChartGrid } from \"@viz/types\";\n\ninterface HvGridHookProps {\n  top?: HvChartGrid[\"top\"];\n  bottom?: HvChartGrid[\"bottom\"];\n  left?: HvChartGrid[\"left\"];\n  right?: HvChartGrid[\"right\"];\n}\n\nexport const useGrid = ({ top, left, right, bottom }: HvGridHookProps) => {\n  const option = useMemo<Pick<EChartsOption, \"grid\">>(() => {\n    return {\n      // if no value is defined we shouldn't pass anything because echarts doesn't behave well otherwise\n      grid: {\n        ...(top != null && {\n          top,\n        }),\n        ...(bottom != null && {\n          bottom,\n        }),\n        ...(left != null && {\n          left,\n        }),\n        ...(right != null && {\n          right,\n        }),\n      },\n    };\n  }, [top, left, right, bottom]);\n\n  return option;\n};\n"],"names":["useGrid","top","left","right","bottom","option","useMemo","grid"],"mappings":";;;AAaO,MAAMA,UAAUA,CAAC;AAAA,EAAEC;AAAAA,EAAKC;AAAAA,EAAMC;AAAAA,EAAOC;AAAwB,MAAM;AAClEC,QAAAA,SAASC,MAAAA,QAAqC,MAAM;AACjD,WAAA;AAAA;AAAA,MAELC,MAAM;AAAA,QACJ,GAAIN,OAAO,QAAQ;AAAA,UACjBA;AAAAA,QACF;AAAA,QACA,GAAIG,UAAU,QAAQ;AAAA,UACpBA;AAAAA,QACF;AAAA,QACA,GAAIF,QAAQ,QAAQ;AAAA,UAClBA;AAAAA,QACF;AAAA,QACA,GAAIC,SAAS,QAAQ;AAAA,UACnBA;AAAAA,QACF;AAAA,MACF;AAAA,IAAA;AAAA,KAED,CAACF,KAAKC,MAAMC,OAAOC,MAAM,CAAC;AAEtBC,SAAAA;AACT;;"}