@hitachivantara/uikit-react-viz 5.1.1 → 5.2.0

package/dist/esm/utils/registerThemes.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"registerThemes.js","sources":["../../../src/utils/registerThemes.ts"],"sourcesContent":["import { HvTheme } from \"@hitachivantara/uikit-react-core\";\nimport * as echarts from \"echarts/core\";\n\nexport 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"],"names":["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"],"mappings":";AAGO,MAAMA,iBAAiBA,CAC5BC,WACAC,OACAC,mBACG;AACHD,QAAME,QAASC,CAAS,SAAA;AACtB,UAAMC,WAAW;AAAA,MACfC,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMI;AAAAA,MAC1CC,YAAYP,iDAAgBQ,YAAYC;AAAAA,MACxCC,UAAUV,iDAAgBW,UAAUC;AAAAA,MACpCC,YAAYb,iDAAgBa,WAAWC;AAAAA,IAAAA;AAGzC,UAAMC,aAAa;AAAA,MACjBC,eAAe;AAAA,QACb,GAAGb;AAAAA,MACL;AAAA,MACAc,UAAU;AAAA,QACRC,MAAM;AAAA,QACNC,WAAW;AAAA,UACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMkB;AAAAA,QAC5C;AAAA,MACF;AAAA,MACAC,UAAU;AAAA,QACRH,MAAM;AAAA,QACNC,WAAW;AAAA,UACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMkB;AAAAA,QAC5C;AAAA,MACF;AAAA,MACAE,WAAW;AAAA,QACTlB,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMqB;AAAAA,QAC1ChB,YAAYP,iDAAgBQ,YAAYC;AAAAA,QACxCC,UAAUV,iDAAgBW,UAAUC;AAAAA,QACpCC,YAAYb,iDAAgBa,WAAWC;AAAAA,MACzC;AAAA,MACAU,WAAW;AAAA,QACTN,MAAM;AAAA,QACNC,WAAW;AAAA,UACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMkB;AAAAA,QAC5C;AAAA,MACF;AAAA,IAAA;AAGMK,YAAAA,cAAe,GAAE3B,aAAaI,QAAQ;AAAA,MAC5CE,OAAO,CACLJ,iDAAgBK,OAAON,MAAMG,MAAMwB,MACnC1B,iDAAgBK,OAAON,MAAMG,MAAMyB,MACnC3B,iDAAgBK,OAAON,MAAMG,MAAM0B,MACnC5B,iDAAgBK,OAAON,MAAMG,MAAM2B,MACnC7B,iDAAgBK,OAAON,MAAMG,MAAM4B,MACnC9B,iDAAgBK,OAAON,MAAMG,MAAM6B,IAAI;AAAA,MAEzCC,QAAQ;AAAA,QACNC,WAAW;AAAA,UACT,GAAG9B;AAAAA,QACL;AAAA,MACF;AAAA,MACA+B,SAAS;AAAA,QACPC,aAAa;AAAA,QACbC,SAAS;AAAA,QACTH,WAAW;AAAA,UACT,GAAG9B;AAAAA,QACL;AAAA,QACAkC,aAAa;AAAA,UACXlB,WAAW;AAAA,YACTf,OAAOJ,iDAAgBK,OAAON,MAAMG,MAAMI;AAAAA,YAC1CgC,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,MACAC,UAAU;AAAA,QACRN,WAAW;AAAA,UAAE,GAAG9B;AAAAA,QAAS;AAAA,MAC3B;AAAA,MACAqC,cAAc;AAAA,QACZ,GAAGzB;AAAAA,MACL;AAAA,MACA0B,WAAW;AAAA,QACT,GAAG1B;AAAAA,MACL;AAAA,MACA2B,SAAS;AAAA,QACP,GAAG3B;AAAAA,MACL;AAAA,MACA4B,UAAU;AAAA,QACR,GAAG5B;AAAAA,MACL;AAAA,MACA6B,MAAM;AAAA,QACJzB,WAAW;AAAA,UACTmB,OAAO;AAAA,QACT;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;"}

package/dist/types/index.d.ts

@@ -1,27 +1,21 @@
+import { Arrayable } from '@hitachivantara/uikit-react-core';
 import type ColumnTable from 'arquero/dist/types/table/column-table';
 import type { Context } from 'react';
 import type { CSSInterpolation } from '@emotion/serialize';
 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 BarMeasuresField = string | BaseFullMeasuresField;
 
-declare type FullMeasuresField = {
+declare interface BaseFullMeasuresField {
     /** 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.
      *
@@ -31,10 +25,11 @@ declare type FullMeasuresField = {
      */
     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;
-};
+}
+
+/** Empty cell mode */
+declare const emptyCellMode: readonly ["connect", "void"];
 
 declare type FullSortByField = {
     /** Column name. */
@@ -45,6 +40,75 @@ declare type FullSortByField = {
 
 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 = Partial<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>;
+    /** Columns to use to split the measures. */
+    splitBy?: Arrayable<SplitByField>;
+    /** Columns to use to sort the data points. */
+    sortBy?: Arrayable<SortByField>;
+    /** 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;
+}
+
+/** Line chart props only */
+declare interface HvBaseChartLineProps {
+    /**  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;
+}
+
 /** Aggregation functions */
 export declare type HvChartAggregation = "sum" | "average" | "min" | "max" | "count";
 
@@ -81,87 +145,59 @@ export declare type HvChartAxisType = "continuous" | "categorical" | "time";
 
 export declare type HvChartEmptyCellMode = (typeof emptyCellMode)[number];
 
+export declare interface HvChartGrid {
+    /** 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;
+}
+
 /** Order functions */
 export declare type HvChartOrder = "asc" | "desc";
 
 /** Sampling functions */
 export declare type HvChartSampling = "none" | "average" | "min" | "max" | "sum" | "lttb";
 
+export declare interface HvChartTooltip {
+    /** Whether to show the tooltip or not. Defaults to `true`. */
+    show?: boolean;
+    /** 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;
+    /** Formatter for the value in the tooltip. */
+    valueFormatter?: (value?: string | number) => string;
+    /** Formatter for the title in the tooltip. */
+    titleFormatter?: (value?: string | number) => string;
+    /** Custom tooltip. */
+    component?: string | ((params?: HvChartTooltipParams) => string | HTMLElement | HTMLElement[]);
+}
+
+export declare interface HvChartTooltipParams {
+    title?: string | number;
+    series?: {
+        name?: string;
+        value?: string | number;
+        color?: string;
+    }[];
+}
+
 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 const HvLineChart: ({ area, emptyCellMode, areaOpacity, ...others }: HvLineChartProps) => JSX_2.Element;
 
-export declare type HvLineChartClasses = ExtractNames<typeof useClasses>;
+export declare interface HvLineChartClasses extends HvBaseChartClasses {
+}
 
-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;
-    };
+export declare interface HvLineChartProps extends HvBaseChartCommonProps, HvBaseChartLineProps {
     /** 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;
-    };
+    classes?: HvLineChartClasses;
 }
 
 export declare const HvVizContext: Context<HvVizContextValue>;
@@ -200,7 +236,18 @@ export declare interface HvVizProviderProps {
     children?: React.ReactNode;
 }
 
-declare type MeasuresField = string | FullMeasuresField;
+declare interface LineFullMeasuresField extends BaseFullMeasuresField {
+    /** 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. */
+    area?: boolean;
+    /** Sets opacity of the filled area if `area` is true. If not specified, it defaults to the global `areaOpacity` prop. */
+    areaOpacity?: number;
+    /** Strategy to use when there are empty cells. If not specified, it defaults to the global `emptyCellMode` prop. */
+    emptyCellMode?: HvChartEmptyCellMode;
+}
+
+declare type LineMeasuresField = string | LineFullMeasuresField;
 
 declare type SortByField = string | FullSortByField;
 

package/package.json

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