@hitachivantara/uikit-react-viz 5.9.1 → 5.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/Heatmap/Heatmap.cjs +125 -0
  2. package/dist/cjs/Heatmap/Heatmap.styles.cjs +25 -0
  3. package/dist/cjs/hooks/tooltip/useTooltip.cjs +6 -5
  4. package/dist/cjs/hooks/useVisualMap.cjs +5 -2
  5. package/dist/cjs/index.cjs +2 -0
  6. package/dist/esm/Heatmap/Heatmap.js +106 -0
  7. package/dist/esm/Heatmap/Heatmap.js.map +1 -0
  8. package/dist/esm/Heatmap/Heatmap.styles.js +25 -0
  9. package/dist/esm/Heatmap/Heatmap.styles.js.map +1 -0
  10. package/dist/esm/hooks/tooltip/useTooltip.js +6 -5
  11. package/dist/esm/hooks/tooltip/useTooltip.js.map +1 -1
  12. package/dist/esm/hooks/useVisualMap.js +5 -2
  13. package/dist/esm/hooks/useVisualMap.js.map +1 -1
  14. package/dist/esm/hooks/useYAxis.js.map +1 -1
  15. package/dist/esm/index.js +2 -0
  16. package/dist/esm/index.js.map +1 -1
  17. package/dist/types/index.d.ts +65 -11
  18. package/package.json +3 -4
package/dist/cjs/Heatmap/Heatmap.cjs ADDED
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("@emotion/react/jsx-runtime");
4
+ const react = require("react");
5
+ const charts = require("echarts/charts");
6
+ const components = require("echarts/components");
7
+ const echarts = require("echarts/core");
8
+ const uikitReactCore = require("@hitachivantara/uikit-react-core");
9
+ const Heatmap_styles = require("./Heatmap.styles.cjs");
10
+ const useTooltip = require("../hooks/tooltip/useTooltip.cjs");
11
+ const useXAxis = require("../hooks/useXAxis.cjs");
12
+ const useYAxis = require("../hooks/useYAxis.cjs");
13
+ const useVisualMap = require("../hooks/useVisualMap.cjs");
14
+ const useOption = require("../hooks/useOption.cjs");
15
+ const BaseChart = require("../BaseChart/BaseChart.cjs");
16
+ function _interopNamespace(e) {
17
+ if (e && e.__esModule)
18
+ return e;
19
+ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
20
+ if (e) {
21
+ for (const k in e) {
22
+ if (k !== "default") {
23
+ const d = Object.getOwnPropertyDescriptor(e, k);
24
+ Object.defineProperty(n, k, d.get ? d : {
25
+ enumerable: true,
26
+ get: () => e[k]
27
+ });
28
+ }
29
+ }
30
+ }
31
+ n.default = e;
32
+ return Object.freeze(n);
33
+ }
34
+ const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
35
+ echarts__namespace.use([charts.HeatmapChart, components.TooltipComponent, components.VisualMapComponent]);
36
+ const HvHeatmap = react.forwardRef(
37
+ (props, ref) => {
38
+ const {
39
+ name,
40
+ data,
41
+ min,
42
+ max,
43
+ colorScale,
44
+ xAxis,
45
+ yAxis,
46
+ classes: classesProp,
47
+ tooltip,
48
+ width,
49
+ height,
50
+ onOptionChange,
51
+ ...others
52
+ } = props;
53
+ const { classes } = Heatmap_styles.useClasses(classesProp);
54
+ const { colors } = uikitReactCore.useTheme();
55
+ const chartTooltip = useTooltip.useTooltip({
56
+ component: (params) => {
57
+ const value = params?.value;
58
+ const title = params?.title;
59
+ const valueToShow = value ? `${yAxis?.data?.[value?.[1]]} - ${xAxis?.data?.[value?.[0]]}: ${params?.series?.[0]?.name}` : "-";
60
+ return `
61
+ <div class="${classes.tooltipRoot}">
62
+ <div class="${classes.tooltipContainer}">
63
+ <div>
64
+ <p class="${classes.tooltipText}">${title}</p>
65
+ <p class="${classes.tooltipText}">${valueToShow}</p>
66
+ </div>
67
+ </div>
68
+ </div>`;
69
+ },
70
+ ...tooltip
71
+ });
72
+ const chartXAxis = useXAxis.useXAxis({ type: "categorical", ...xAxis });
73
+ const chartYAxis = useYAxis.useYAxis({
74
+ defaultType: "categorical",
75
+ axes: yAxis ? [yAxis] : []
76
+ });
77
+ const chartVisualMap = useVisualMap.useVisualMap({
78
+ min,
79
+ max,
80
+ orient: "horizontal",
81
+ left: "center",
82
+ calculable: true,
83
+ position: {
84
+ y: "bottom"
85
+ },
86
+ colorScale: colorScale || [colors?.cat1_180 || "", colors?.cat1_20 || ""]
87
+ });
88
+ const option = useOption.useOption({
89
+ option: {
90
+ xAxis: chartXAxis.xAxis,
91
+ yAxis: chartYAxis.yAxis,
92
+ visualMap: chartVisualMap.visualMap,
93
+ series: [
94
+ {
95
+ name,
96
+ type: "heatmap",
97
+ data,
98
+ label: {
99
+ show: true
100
+ },
101
+ emphasis: {
102
+ itemStyle: {
103
+ shadowBlur: 10,
104
+ shadowColor: "rgba(0, 0, 0, 0.5)"
105
+ }
106
+ }
107
+ }
108
+ ],
109
+ ...chartTooltip
110
+ },
111
+ onOptionChange
112
+ });
113
+ return /* @__PURE__ */ jsxRuntime.jsx(
114
+ BaseChart.HvBaseChart,
115
+ {
116
+ ref,
117
+ option,
118
+ width,
119
+ height,
120
+ ...others
121
+ }
122
+ );
123
+ }
124
+ );
125
+ exports.HvHeatmap = HvHeatmap;
package/dist/cjs/Heatmap/Heatmap.styles.cjs ADDED
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const uikitReactCore = require("@hitachivantara/uikit-react-core");
4
+ const { useClasses, staticClasses } = uikitReactCore.createClasses("HvHeatmap", {
5
+ tooltipRoot: {
6
+ backgroundColor: uikitReactCore.theme.colors.atmo1,
7
+ width: "fit-content",
8
+ minWidth: 150,
9
+ boxShadow: uikitReactCore.theme.colors.shadow,
10
+ zIndex: uikitReactCore.theme.zIndices.sticky
11
+ },
12
+ tooltipContainer: {
13
+ padding: uikitReactCore.theme.spacing("15px", "sm"),
14
+ display: "flex",
15
+ flexDirection: "column"
16
+ },
17
+ tooltipText: {
18
+ fontFamily: uikitReactCore.theme.fontFamily.body,
19
+ fontWeight: uikitReactCore.theme.fontWeights.normal,
20
+ fontSize: uikitReactCore.theme.fontSizes.sm,
21
+ color: uikitReactCore.theme.colors.secondary
22
+ }
23
+ });
24
+ exports.staticClasses = staticClasses;
25
+ exports.useClasses = useClasses;
package/dist/cjs/hooks/tooltip/useTooltip.cjs CHANGED
@@ -18,14 +18,14 @@ const useTooltip = ({
18
18
  const { classes: hvClasses } = styles.useClasses(classes);
19
19
  const renderTooltip = react.useCallback(
20
20
  (params) => {
21
- const title = params[0].seriesType === "treemap" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
21
+ const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
22
22
  const formattedTitle = titleFormatter ? titleFormatter(title) : title;
23
23
  if (type === "single") {
24
24
  const measure = index.getMeasure(
25
- params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
25
+ params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
26
26
  measures
27
27
  );
28
- const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? 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]];
28
+ const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? 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]];
29
29
  const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
30
30
  return `
31
31
  <div class="${hvClasses?.singleTooltipRoot}">
@@ -79,14 +79,15 @@ const useTooltip = ({
79
79
  (params) => {
80
80
  if (typeof component === "function") {
81
81
  const values = {
82
- title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
82
+ title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
83
83
  series: params.map((p) => {
84
84
  return {
85
85
  color: p.color,
86
86
  name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
87
87
  value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
88
88
  };
89
- })
89
+ }),
90
+ value: params[0].value
90
91
  };
91
92
  return component(values);
92
93
  }
package/dist/cjs/hooks/useVisualMap.cjs CHANGED
@@ -10,7 +10,8 @@ const useVisualMap = ({
10
10
  max,
11
11
  min,
12
12
  colorScale,
13
- position: positionProp
13
+ position: positionProp,
14
+ ...others
14
15
  }) => {
15
16
  const option = react.useMemo(() => {
16
17
  return {
@@ -35,7 +36,8 @@ const useVisualMap = ({
35
36
  },
36
37
  orient: direction,
37
38
  top: positionProp?.y || "top",
38
- left: positionProp?.x || "center"
39
+ left: positionProp?.x || "center",
40
+ ...others
39
41
  }
40
42
  };
41
43
  }, [
@@ -43,6 +45,7 @@ const useVisualMap = ({
43
45
  direction,
44
46
  max,
45
47
  min,
48
+ others,
46
49
  pieces,
47
50
  positionProp?.x,
48
51
  positionProp?.y,
package/dist/cjs/index.cjs CHANGED
@@ -7,6 +7,7 @@ const DonutChart = require("./DonutChart/DonutChart.cjs");
7
7
  const Treemap = require("./Treemap/Treemap.cjs");
8
8
  const ConfusionMatrix = require("./ConfusionMatrix/ConfusionMatrix.cjs");
9
9
  const ScatterPlot = require("./ScatterPlot/ScatterPlot.cjs");
10
+ const Heatmap = require("./Heatmap/Heatmap.cjs");
10
11
  exports.HvVizContext = Provider.HvVizContext;
11
12
  exports.HvVizProvider = Provider.HvVizProvider;
12
13
  exports.HvLineChart = LineChart.HvLineChart;
@@ -15,3 +16,4 @@ exports.HvDonutChart = DonutChart.HvDonutChart;
15
16
  exports.HvTreemapChart = Treemap.HvTreemapChart;
16
17
  exports.HvConfusionMatrix = ConfusionMatrix.HvConfusionMatrix;
17
18
  exports.HvScatterPlot = ScatterPlot.HvScatterPlot;
19
+ exports.HvHeatmap = Heatmap.HvHeatmap;
package/dist/esm/Heatmap/Heatmap.js ADDED
@@ -0,0 +1,106 @@
1
+ import { jsx } from "@emotion/react/jsx-runtime";
2
+ import { forwardRef } from "react";
3
+ import { HeatmapChart } from "echarts/charts";
4
+ import { TooltipComponent, VisualMapComponent } from "echarts/components";
5
+ import * as echarts from "echarts/core";
6
+ import { useTheme } from "@hitachivantara/uikit-react-core";
7
+ import { useClasses } from "./Heatmap.styles.js";
8
+ import { useTooltip } from "../hooks/tooltip/useTooltip.js";
9
+ import { useXAxis } from "../hooks/useXAxis.js";
10
+ import { useYAxis } from "../hooks/useYAxis.js";
11
+ import { useVisualMap } from "../hooks/useVisualMap.js";
12
+ import { useOption } from "../hooks/useOption.js";
13
+ import { HvBaseChart } from "../BaseChart/BaseChart.js";
14
+ echarts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);
15
+ const HvHeatmap = forwardRef(
16
+ (props, ref) => {
17
+ const {
18
+ name,
19
+ data,
20
+ min,
21
+ max,
22
+ colorScale,
23
+ xAxis,
24
+ yAxis,
25
+ classes: classesProp,
26
+ tooltip,
27
+ width,
28
+ height,
29
+ onOptionChange,
30
+ ...others
31
+ } = props;
32
+ const { classes } = useClasses(classesProp);
33
+ const { colors } = useTheme();
34
+ const chartTooltip = useTooltip({
35
+ component: (params) => {
36
+ const value = params?.value;
37
+ const title = params?.title;
38
+ const valueToShow = value ? `${yAxis?.data?.[value?.[1]]} - ${xAxis?.data?.[value?.[0]]}: ${params?.series?.[0]?.name}` : "-";
39
+ return `
40
+ <div class="${classes.tooltipRoot}">
41
+ <div class="${classes.tooltipContainer}">
42
+ <div>
43
+ <p class="${classes.tooltipText}">${title}</p>
44
+ <p class="${classes.tooltipText}">${valueToShow}</p>
45
+ </div>
46
+ </div>
47
+ </div>`;
48
+ },
49
+ ...tooltip
50
+ });
51
+ const chartXAxis = useXAxis({ type: "categorical", ...xAxis });
52
+ const chartYAxis = useYAxis({
53
+ defaultType: "categorical",
54
+ axes: yAxis ? [yAxis] : []
55
+ });
56
+ const chartVisualMap = useVisualMap({
57
+ min,
58
+ max,
59
+ orient: "horizontal",
60
+ left: "center",
61
+ calculable: true,
62
+ position: {
63
+ y: "bottom"
64
+ },
65
+ colorScale: colorScale || [colors?.cat1_180 || "", colors?.cat1_20 || ""]
66
+ });
67
+ const option = useOption({
68
+ option: {
69
+ xAxis: chartXAxis.xAxis,
70
+ yAxis: chartYAxis.yAxis,
71
+ visualMap: chartVisualMap.visualMap,
72
+ series: [
73
+ {
74
+ name,
75
+ type: "heatmap",
76
+ data,
77
+ label: {
78
+ show: true
79
+ },
80
+ emphasis: {
81
+ itemStyle: {
82
+ shadowBlur: 10,
83
+ shadowColor: "rgba(0, 0, 0, 0.5)"
84
+ }
85
+ }
86
+ }
87
+ ],
88
+ ...chartTooltip
89
+ },
90
+ onOptionChange
91
+ });
92
+ return /* @__PURE__ */ jsx(
93
+ HvBaseChart,
94
+ {
95
+ ref,
96
+ option,
97
+ width,
98
+ height,
99
+ ...others
100
+ }
101
+ );
102
+ }
103
+ );
104
+ export {
105
+ HvHeatmap
106
+ };
package/dist/esm/Heatmap/Heatmap.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Heatmap.js","sources":["../../../src/Heatmap/Heatmap.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport ReactECharts from \"echarts-for-react/lib/core\";\nimport { HeatmapChart } from \"echarts/charts\";\nimport { TooltipComponent, VisualMapComponent } from \"echarts/components\";\nimport * as echarts from \"echarts/core\";\nimport { ExtractNames, useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvBaseChart } from \"../BaseChart\";\nimport {\n useOption,\n useTooltip,\n useVisualMap,\n useXAxis,\n useYAxis,\n} from \"../hooks\";\nimport { HvChartTooltip } from \"../types\";\nimport { HvChartCommonProps, XAxis, YAxis } from \"../types/common\";\nimport { useClasses } from \"./Heatmap.styles\";\n\n// Register chart components\necharts.use([HeatmapChart, TooltipComponent, VisualMapComponent]);\n\nexport type HvHeatmapClasses = ExtractNames<typeof useClasses>;\n\nexport type HvHeatmapItem = Array<number | string>;\n\nexport type HvHeatmapData = Array<HvHeatmapItem>;\n\nexport interface HvHeatmapProps\n extends Omit<\n HvChartCommonProps,\n \"data\" | \"groupBy\" | \"sortBy\" | \"grid\" | \"legend\" | \"tooltip\"\n > {\n /** The name of the heatmap */\n name?: string;\n /** The data to use on the heatmap */\n data?: HvHeatmapData;\n /** The min value of the Heatmap */\n min: number;\n /** The max value of the Heatmap */\n max: number;\n /** The X axis defintion */\n xAxis?: XAxis;\n /** The Y axis definition. */\n yAxis?: YAxis;\n /** The tooltip options. */\n tooltip?: Omit<HvChartTooltip, \"type\">;\n /** Color scale of the confusion matrix. Accepts an array of strings spanning from the lower to the upper ends of the scale. */\n colorScale?: string[];\n /** A Jss Object used to override or extend the styles applied to the component. */\n classes?: HvHeatmapClasses;\n}\n\n/**\n * A Heatmap uses color gradients to represent data intensity across a surface.\n */\nexport const HvHeatmap = forwardRef<ReactECharts, HvHeatmapProps>(\n (props, ref) => {\n const {\n name,\n data,\n min,\n max,\n colorScale,\n xAxis,\n yAxis,\n classes: classesProp,\n tooltip,\n width,\n height,\n onOptionChange,\n ...others\n } = props;\n\n const { classes } = useClasses(classesProp);\n const { colors } = useTheme();\n\n const chartTooltip = useTooltip({\n component: (params) => {\n const value = params?.value;\n const title = params?.title;\n\n const valueToShow = value\n ? `${yAxis?.data?.[value?.[1]]} - ${xAxis?.data?.[value?.[0]]}: ${params?.series?.[0]?.name}`\n : \"-\";\n\n return `\n <div class=\"${classes.tooltipRoot}\">\n <div class=\"${classes.tooltipContainer}\">\n <div>\n <p class=\"${classes.tooltipText}\">${title}</p>\n <p class=\"${classes.tooltipText}\">${valueToShow}</p>\n </div>\n </div>\n </div>`;\n },\n ...tooltip,\n });\n\n const chartXAxis = useXAxis({ type: \"categorical\", ...xAxis });\n const chartYAxis = useYAxis({\n defaultType: \"categorical\",\n axes: yAxis ? [yAxis] : [],\n });\n\n const chartVisualMap = useVisualMap({\n min,\n max,\n orient: \"horizontal\",\n left: \"center\",\n calculable: true,\n position: {\n y: \"bottom\",\n },\n colorScale: colorScale || [colors?.cat1_180 || \"\", colors?.cat1_20 || \"\"],\n });\n\n const option = useOption({\n option: {\n xAxis: chartXAxis.xAxis,\n yAxis: chartYAxis.yAxis,\n visualMap: chartVisualMap.visualMap,\n series: [\n {\n name,\n type: \"heatmap\",\n data,\n label: {\n show: true,\n },\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowColor: \"rgba(0, 0, 0, 0.5)\",\n },\n },\n },\n ],\n ...chartTooltip,\n },\n onOptionChange,\n });\n\n return (\n <HvBaseChart\n ref={ref}\n option={option}\n width={width}\n height={height}\n {...others}\n />\n );\n },\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAoCzD,MAAM,YAAY;AAAA,EACvB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,EAAE,WAAW;AAEnB,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AACtB,cAAM,QAAQ,QAAQ;AAEhB,cAAA,cAAc,QAChB,GAAG,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAC,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAK,QAAQ,SAAS,CAAC,GAAG,IAAI,KACzF;AAEG,eAAA;AAAA,wBACS,QAAQ,WAAW;AAAA,0BACjB,QAAQ,gBAAgB;AAAA;AAAA,0BAExB,QAAQ,WAAW,KAAK,KAAK;AAAA,0BAC7B,QAAQ,WAAW,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,MAIvD;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAED,UAAM,aAAa,SAAS,EAAE,MAAM,eAAe,GAAG,OAAO;AAC7D,UAAM,aAAa,SAAS;AAAA,MAC1B,aAAa;AAAA,MACb,MAAM,QAAQ,CAAC,KAAK,IAAI,CAAC;AAAA,IAAA,CAC1B;AAED,UAAM,iBAAiB,aAAa;AAAA,MAClC;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACA,YAAY,cAAc,CAAC,QAAQ,YAAY,IAAI,QAAQ,WAAW,EAAE;AAAA,IAAA,CACzE;AAED,UAAM,SAAS,UAAU;AAAA,MACvB,QAAQ;AAAA,QACN,OAAO,WAAW;AAAA,QAClB,OAAO,WAAW;AAAA,QAClB,WAAW,eAAe;AAAA,QAC1B,QAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA,YACA,UAAU;AAAA,cACR,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,aAAa;AAAA,cACf;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,QACA,GAAG;AAAA,MACL;AAAA,MACA;AAAA,IAAA,CACD;AAGC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;"}
package/dist/esm/Heatmap/Heatmap.styles.js ADDED
@@ -0,0 +1,25 @@
1
+ import { createClasses, theme } from "@hitachivantara/uikit-react-core";
2
+ const { useClasses, staticClasses } = createClasses("HvHeatmap", {
3
+ tooltipRoot: {
4
+ backgroundColor: theme.colors.atmo1,
5
+ width: "fit-content",
6
+ minWidth: 150,
7
+ boxShadow: theme.colors.shadow,
8
+ zIndex: theme.zIndices.sticky
9
+ },
10
+ tooltipContainer: {
11
+ padding: theme.spacing("15px", "sm"),
12
+ display: "flex",
13
+ flexDirection: "column"
14
+ },
15
+ tooltipText: {
16
+ fontFamily: theme.fontFamily.body,
17
+ fontWeight: theme.fontWeights.normal,
18
+ fontSize: theme.fontSizes.sm,
19
+ color: theme.colors.secondary
20
+ }
21
+ });
22
+ export {
23
+ staticClasses,
24
+ useClasses
25
+ };
package/dist/esm/Heatmap/Heatmap.styles.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Heatmap.styles.js","sources":["../../../src/Heatmap/Heatmap.styles.tsx"],"sourcesContent":["import { createClasses, theme } from \"@hitachivantara/uikit-react-core\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvHeatmap\", {\n tooltipRoot: {\n backgroundColor: theme.colors.atmo1,\n width: \"fit-content\",\n minWidth: 150,\n boxShadow: theme.colors.shadow,\n zIndex: theme.zIndices.sticky,\n },\n tooltipContainer: {\n padding: theme.spacing(\"15px\", \"sm\"),\n display: \"flex\",\n flexDirection: \"column\",\n },\n tooltipText: {\n fontFamily: theme.fontFamily.body,\n fontWeight: theme.fontWeights.normal,\n fontSize: theme.fontSizes.sm,\n color: theme.colors.secondary,\n },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,YAAY,kBAAkB,cAAc,aAAa;AAAA,EACtE,aAAa;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW,MAAM,OAAO;AAAA,IACxB,QAAQ,MAAM,SAAS;AAAA,EACzB;AAAA,EACA,kBAAkB;AAAA,IAChB,SAAS,MAAM,QAAQ,QAAQ,IAAI;AAAA,IACnC,SAAS;AAAA,IACT,eAAe;AAAA,EACjB;AAAA,EACA,aAAa;AAAA,IACX,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY,MAAM,YAAY;AAAA,IAC9B,UAAU,MAAM,UAAU;AAAA,IAC1B,OAAO,MAAM,OAAO;AAAA,EACtB;AACF,CAAC;"}
package/dist/esm/hooks/tooltip/useTooltip.js CHANGED
@@ -16,14 +16,14 @@ const useTooltip = ({
16
16
  const { classes: hvClasses } = useClasses(classes);
17
17
  const renderTooltip = useCallback(
18
18
  (params) => {
19
- const title = params[0].seriesType === "treemap" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
19
+ const title = params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].name : params[0].seriesType === "pie" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]];
20
20
  const formattedTitle = titleFormatter ? titleFormatter(title) : title;
21
21
  if (type === "single") {
22
22
  const measure = getMeasure(
23
- params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
23
+ params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].name : horizontal ? params[0].dimensionNames[params[0].encode.x[0]] : params[0].dimensionNames[params[0].encode.y[0]],
24
24
  measures
25
25
  );
26
- const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? 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]];
26
+ const value = params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? 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]];
27
27
  const formattedValue = measure && typeof measure !== "string" && measure.valueFormatter ? measure.valueFormatter(value) : valueFormatter ? valueFormatter(value) : value;
28
28
  return `
29
29
  <div class="${hvClasses?.singleTooltipRoot}">
@@ -77,14 +77,15 @@ const useTooltip = ({
77
77
  (params) => {
78
78
  if (typeof component === "function") {
79
79
  const values = {
80
- title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
80
+ title: params[0].seriesType === "pie" || params[0].seriesType === "treemap" || params[0].seriesType === "heatmap" ? params[0].seriesName : horizontal ? params[0].value[params[0].encode.y[0]] : params[0].value[params[0].encode.x[0]],
81
81
  series: params.map((p) => {
82
82
  return {
83
83
  color: p.color,
84
84
  name: p.seriesType === "heatmap" ? String(p.value[p.encode.y[0]]) : p.seriesType === "pie" || p.seriesType === "treemap" ? p.name : p.seriesName,
85
85
  value: p.seriesType === "pie" || p.seriesType === "treemap" || p.seriesType === "heatmap" ? p.value[p.encode.value[0]] : horizontal ? p.value[p.encode.x[0]] : p.value[p.encode.y[0]]
86
86
  };
87
- })
87
+ }),
88
+ value: params[0].value
88
89
  };
89
90
  return component(values);
90
91
  }
package/dist/esm/hooks/tooltip/useTooltip.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartTooltip,\n HvChartTooltipParams,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n HvScatterPlotMeasure,\n} from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure } from \"../../utils\";\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 | HvScatterPlotMeasure>\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 === \"treemap\"\n ? params[0].name\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\" || params[0].seriesType === \"treemap\"\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 measures,\n );\n\n const value =\n params[0].seriesType === \"pie\" || params[0].seriesType === \"treemap\"\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 measure && 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\" || params[0].seriesType === \"treemap\"\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:\n p.seriesType === \"heatmap\"\n ? String(p.value[p.encode.y[0]])\n : p.seriesType === \"pie\" || p.seriesType === \"treemap\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" ||\n p.seriesType === \"treemap\" ||\n p.seriesType === \"heatmap\"\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<HvEChartsOption, \"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":[],"mappings":"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"}
1
+ {"version":3,"file":"useTooltip.js","sources":["../../../../src/hooks/tooltip/useTooltip.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { Arrayable, ExtractNames } from \"@hitachivantara/uikit-react-core\";\n\nimport {\n HvBarChartMeasures,\n HvChartTooltip,\n HvChartTooltipParams,\n HvDonutChartMeasure,\n HvLineChartMeasures,\n HvScatterPlotMeasure,\n} from \"../../types\";\nimport { HvEChartsOption } from \"../../types/common\";\nimport { getMeasure } from \"../../utils\";\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 | HvScatterPlotMeasure>\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 === \"treemap\" || params[0].seriesType === \"heatmap\"\n ? params[0].name\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].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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 measures,\n );\n\n const value =\n params[0].seriesType === \"pie\" ||\n params[0].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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 measure && 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].seriesType === \"treemap\" ||\n params[0].seriesType === \"heatmap\"\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:\n p.seriesType === \"heatmap\"\n ? String(p.value[p.encode.y[0]])\n : p.seriesType === \"pie\" || p.seriesType === \"treemap\"\n ? p.name\n : p.seriesName,\n value:\n p.seriesType === \"pie\" ||\n p.seriesType === \"treemap\" ||\n p.seriesType === \"heatmap\"\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 value: params[0].value,\n };\n\n return component(values);\n }\n\n return component;\n },\n [component, horizontal],\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"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":[],"mappings":";;;AA2CO,MAAM,aAAa,CAAC;AAAA,EACzB,WAAW,CAAC;AAAA,EACZ;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAA0B;AACxB,QAAM,EAAE,SAAS,UAAU,IAAI,WAAW,OAAO;AAEjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAmC;AAC5B,YAAA,QACJ,OAAO,CAAC,EAAE,eAAe,aAAa,OAAO,CAAC,EAAE,eAAe,YAC3D,OAAO,CAAC,EAAE,OACV,OAAO,CAAC,EAAE,eAAe,QACvB,OAAO,CAAC,EAAE,aACV,aACE,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,IACrC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAE/C,YAAM,iBAAiB,iBAAiB,eAAe,KAAK,IAAI;AAEhE,UAAI,SAAS,UAAU;AACrB,cAAM,UAAU;AAAA,UACd,OAAO,CAAC,EAAE,eAAe,SACvB,OAAO,CAAC,EAAE,eAAe,aACzB,OAAO,CAAC,EAAE,eAAe,YACvB,OAAO,CAAC,EAAE,OACV,aACE,OAAO,CAAC,EAAE,eAAe,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,IAC9C,OAAO,CAAC,EAAE,eAAe,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAAA,UACpD;AAAA,QAAA;AAGI,cAAA,QACJ,OAAO,CAAC,EAAE,eAAe,SACzB,OAAO,CAAC,EAAE,eAAe,aACzB,OAAO,CAAC,EAAE,eAAe,YACrB,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,MAAM,CAAC,CAAC,IACzC,aACE,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,IACrC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAE7C,cAAM,iBACJ,WAAW,OAAO,YAAY,YAAY,QAAQ,iBAC9C,QAAQ,eAAe,KAAK,IAC5B,iBACE,eAAe,KAAK,IACpB;AAED,eAAA;AAAA,0BACW,WAAW,iBAAiB;AAAA,0BAC5B,WAAW,kBAAkB,KAAK,cAAc;AAAA,0BAChD,WAAW,kBAAkB,KAAK,cAAc;AAAA;AAAA;AAAA,MAGpE;AAEO,aAAA;AAAA,sBACS,WAAW,mBAAmB;AAAA,wBAC5B,WAAW,6BAA6B;AAAA;AAAA,0BAGhD,WAAW,oBACb,KAAK,cAAc;AAAA;AAAA;AAAA,wBAGT,WAAW,8BAA8B;AAAA,cACnD,OACC,IAAI,CAAC,MAAM;AACV,cAAM,UAAU;AAAA,UACd,EAAE,eAAe,QACb,EAAE,OACF,aACE,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC,IAC9B,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC;AAAA,UACpC;AAAA,QAAA;AAGI,cAAA,QACJ,EAAE,eAAe,QACb,EAAE,MAAM,EAAE,OAAO,MAAM,CAAC,CAAC,IACzB,aACE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,IACrB,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;AAE7B,cAAM,iBACJ,OAAO,YAAY,YAAY,QAAQ,iBACnC,QAAQ,eAAe,KAAK,IAC5B,iBACE,eAAe,KAAK,IACpB;AAER,cAAM,OAAO,EAAE,eAAe,QAAQ,EAAE,OAAO,EAAE;AAEjD,cAAM,gBAAgB,gBAClB,cAAc,IAAI,IAClB;AAEG,eAAA;AAAA,4BACK,EAAE,UAAU,YAAY,WAAW,8BAA8B;AAAA,gCAC7D,WAAW,kCAAkC;AAAA,kDAC3B,EAAE,KAAK,aAAa,WAAW,0BAA0B;AAAA,gCAC3E,WAAW,yBAAyB,KAAK,aAAa;AAAA;AAAA,8BAExD,WAAW,0BAA0B,KAAK,cAAc;AAAA;AAAA;AAAA,MAAA,CAGvE,EACA,KAAK,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,IAIpB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,QAAM,sBAAsB;AAAA,IAC1B,CAAC,WAAmC;AAC9B,UAAA,OAAO,cAAc,YAAY;AACnC,cAAM,SAA+B;AAAA,UACnC,OACE,OAAO,CAAC,EAAE,eAAe,SACzB,OAAO,CAAC,EAAE,eAAe,aACzB,OAAO,CAAC,EAAE,eAAe,YACrB,OAAO,CAAC,EAAE,aACV,aACE,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,IACrC,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAAA,UAC7C,QAAQ,OAAO,IAAI,CAAC,MAAM;AACjB,mBAAA;AAAA,cACL,OAAO,EAAE;AAAA,cACT,MACE,EAAE,eAAe,YACb,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,IAC7B,EAAE,eAAe,SAAS,EAAE,eAAe,YACzC,EAAE,OACF,EAAE;AAAA,cACV,OACE,EAAE,eAAe,SACjB,EAAE,eAAe,aACjB,EAAE,eAAe,YACb,EAAE,MAAM,EAAE,OAAO,MAAM,CAAC,CAAC,IACzB,aACE,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,IACrB,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;AAAA,YAAA;AAAA,UAC/B,CACD;AAAA,UACD,OAAO,OAAO,CAAC,EAAE;AAAA,QAAA;AAGnB,eAAO,UAAU,MAAM;AAAA,MACzB;AAEO,aAAA;AAAA,IACT;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,EAAA;AAGlB,QAAA,SAAS,QAA0C,MAAM;AACtD,WAAA;AAAA,MACL,SAAS;AAAA,QACP,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,UAAU,CAAC,OAAO,QAAQ,KAAK,MAAM,SAAS;AACrC,iBAAA,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;AAAA,QAClD;AAAA,QACA,WAAW,CAAC,WAAW;AACrB,gBAAM,gBAAgB,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC,MAAM;AAE9D,iBAAO,YACH,oBAAoB,aAAa,IACjC,cAAc,aAAa;AAAA,QACjC;AAAA,MACF;AAAA,IAAA;AAAA,EACF,GACC,CAAC,SAAS,WAAW,MAAM,eAAe,mBAAmB,CAAC;AAE1D,SAAA;AACT;"}
package/dist/esm/hooks/useVisualMap.js CHANGED
@@ -8,7 +8,8 @@ const useVisualMap = ({
8
8
  max,
9
9
  min,
10
10
  colorScale,
11
- position: positionProp
11
+ position: positionProp,
12
+ ...others
12
13
  }) => {
13
14
  const option = useMemo(() => {
14
15
  return {
@@ -33,7 +34,8 @@ const useVisualMap = ({
33
34
  },
34
35
  orient: direction,
35
36
  top: positionProp?.y || "top",
36
- left: positionProp?.x || "center"
37
+ left: positionProp?.x || "center",
38
+ ...others
37
39
  }
38
40
  };
39
41
  }, [
@@ -41,6 +43,7 @@ const useVisualMap = ({
41
43
  direction,
42
44
  max,
43
45
  min,
46
+ others,
44
47
  pieces,
45
48
  positionProp?.x,
46
49
  positionProp?.y,
package/dist/esm/hooks/useVisualMap.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useVisualMap.js","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { HvChartLegend } from \"../types\";\nimport { HvEChartsOption } from \"../types/common\";\nimport { getLegendIcon } from \"../utils\";\n\nexport interface HvVisualMapHookProps {\n show?: boolean;\n pieces?: Record<string, string | number>[];\n max?: number;\n min?: number;\n colorScale?: string[];\n type?: \"continuous\" | \"piecewise\";\n // Uses the same props as the legend\n position?: HvChartLegend[\"position\"];\n direction?: HvChartLegend[\"direction\"];\n}\n\nexport const useVisualMap = ({\n show = true,\n direction = \"horizontal\",\n type = \"continuous\",\n pieces,\n max,\n min,\n colorScale,\n position: positionProp,\n}: HvVisualMapHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"visualMap\">>(() => {\n return {\n visualMap: {\n type,\n show,\n ...(pieces && {\n pieces,\n }),\n ...(type === \"piecewise\" && {\n itemSymbol: getLegendIcon(\"square\"),\n itemGap: 20,\n itemHeight: 16,\n itemWidth: 16,\n }),\n ...(colorScale && {\n max,\n min,\n inRange: {\n color: colorScale,\n },\n }),\n orient: direction,\n top: positionProp?.y || \"top\",\n left: positionProp?.x || \"center\",\n },\n };\n }, [\n colorScale,\n direction,\n max,\n min,\n pieces,\n positionProp?.x,\n positionProp?.y,\n show,\n type,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAkBO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAA4B;AACpB,QAAA,SAAS,QAA4C,MAAM;AACxD,WAAA;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,GAAI,UAAU;AAAA,UACZ;AAAA,QACF;AAAA,QACA,GAAI,SAAS,eAAe;AAAA,UAC1B,YAAY,cAAc,QAAQ;AAAA,UAClC,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QACA,GAAI,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,QACR,KAAK,cAAc,KAAK;AAAA,QACxB,MAAM,cAAc,KAAK;AAAA,MAC3B;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
1
+ {"version":3,"file":"useVisualMap.js","sources":["../../../src/hooks/useVisualMap.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { VisualMapComponentOption } from \"echarts\";\n\nimport { HvChartLegend } from \"../types\";\nimport { HvEChartsOption } from \"../types/common\";\nimport { getLegendIcon } from \"../utils\";\n\nexport type HvVisualMapHookProps = VisualMapComponentOption & {\n show?: boolean;\n pieces?: Record<string, string | number>[];\n max?: number;\n min?: number;\n colorScale?: string[];\n type?: \"continuous\" | \"piecewise\";\n // Uses the same props as the legend\n position?: HvChartLegend[\"position\"];\n direction?: HvChartLegend[\"direction\"];\n};\n\nexport const useVisualMap = ({\n show = true,\n direction = \"horizontal\",\n type = \"continuous\",\n pieces,\n max,\n min,\n colorScale,\n position: positionProp,\n ...others\n}: HvVisualMapHookProps) => {\n const option = useMemo<Pick<HvEChartsOption, \"visualMap\">>(() => {\n return {\n visualMap: {\n type,\n show,\n ...(pieces && {\n pieces,\n }),\n ...(type === \"piecewise\" && {\n itemSymbol: getLegendIcon(\"square\"),\n itemGap: 20,\n itemHeight: 16,\n itemWidth: 16,\n }),\n ...(colorScale && {\n max,\n min,\n inRange: {\n color: colorScale,\n },\n }),\n orient: direction,\n top: positionProp?.y || \"top\",\n left: positionProp?.x || \"center\",\n ...others,\n },\n };\n }, [\n colorScale,\n direction,\n max,\n min,\n others,\n\n pieces,\n positionProp?.x,\n positionProp?.y,\n show,\n type,\n ]);\n\n return option;\n};\n"],"names":[],"mappings":";;AAmBO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAA4B;AACpB,QAAA,SAAS,QAA4C,MAAM;AACxD,WAAA;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,GAAI,UAAU;AAAA,UACZ;AAAA,QACF;AAAA,QACA,GAAI,SAAS,eAAe;AAAA,UAC1B,YAAY,cAAc,QAAQ;AAAA,UAClC,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,QACb;AAAA,QACA,GAAI,cAAc;AAAA,UAChB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,OAAO;AAAA,UACT;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,QACR,KAAK,cAAc,KAAK;AAAA,QACxB,MAAM,cAAc,KAAK;AAAA,QACzB,GAAG;AAAA,MACL;AAAA,IAAA;AAAA,EACF,GACC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACD;AAEM,SAAA;AACT;"}
package/dist/esm/hooks/useYAxis.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartAxisType } from \"../types\";\nimport { HvChartYAxis, HvEChartsOption } from \"../types/common\";\nimport { getAxisType } from \"../utils\";\n\ninterface YAxis extends HvChartYAxis {\n data?: string[];\n}\n\ninterface HvYAxisHookProps {\n axes?: YAxis[];\n defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n axes,\n defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n const { colors } = useTheme();\n\n const createAxis = useCallback(\n ({\n id,\n type,\n name,\n labelFormatter,\n labelRotation,\n maxValue,\n minValue,\n nameProps,\n data,\n position,\n }: YAxis) => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n id,\n type: getAxisType(type) ?? getAxisType(defaultType),\n name,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps?.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n };\n },\n [colors, defaultType],\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n return {\n yAxis: Array.isArray(axes)\n ? axes.map((axis) => createAxis(axis))\n : [createAxis({})],\n };\n }, [axes, createAxis]);\n\n return option;\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEnB,QAAM,aAAa;AAAA,IACjB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,MACW;AACL,YAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,YAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,QAAA;AAAA,MACtB,GACC,CAAE,CAAA,IACL;AAEC,aAAA;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI,KAAK,YAAY,WAAW;AAAA,QAClD;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,WAAW;AAAA,QAC3B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAGhB,QAAA,SAAS,QAAwC,MAAM;AACpD,WAAA;AAAA,MACL,OAAO,MAAM,QAAQ,IAAI,IACrB,KAAK,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IACnC,CAAC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}
1
+ {"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartAxisType } from \"../types\";\nimport { HvEChartsOption, YAxis } from \"../types/common\";\nimport { getAxisType } from \"../utils\";\n\ninterface HvYAxisHookProps {\n axes?: YAxis[];\n defaultType?: HvChartAxisType;\n}\n\nexport const useYAxis = ({\n axes,\n defaultType = \"continuous\",\n}: HvYAxisHookProps) => {\n const { colors } = useTheme();\n\n const createAxis = useCallback(\n ({\n id,\n type,\n name,\n labelFormatter,\n labelRotation,\n maxValue,\n minValue,\n nameProps,\n data,\n position,\n }: YAxis) => {\n const nameStyleKeys = nameProps\n ? Object.keys(nameProps).filter((key) => key !== \"location\")\n : undefined;\n const nameStyle =\n nameProps && nameStyleKeys\n ? nameStyleKeys.reduce((acc, curr) => {\n return {\n ...acc,\n [curr]:\n curr === \"color\"\n ? colors?.[nameProps[curr] as string] || nameProps[curr]\n : nameProps[curr],\n };\n }, {})\n : undefined;\n\n return {\n id,\n type: getAxisType(type) ?? getAxisType(defaultType),\n name,\n axisLabel: {\n rotate: labelRotation ?? 0,\n formatter: labelFormatter,\n },\n max: maxValue === \"max\" ? \"dataMax\" : maxValue,\n min: minValue === \"min\" ? \"dataMin\" : minValue,\n ...(nameProps?.location && {\n nameLocation: nameProps?.location,\n }),\n ...(nameStyle && {\n nameTextStyle: nameStyle,\n }),\n ...(data && { data }),\n ...(position && { position }),\n };\n },\n [colors, defaultType],\n );\n\n const option = useMemo<Pick<HvEChartsOption, \"yAxis\">>(() => {\n return {\n yAxis: Array.isArray(axes)\n ? axes.map((axis) => createAxis(axis))\n : [createAxis({})],\n };\n }, [axes, createAxis]);\n\n return option;\n};\n"],"names":[],"mappings":";;;AAYO,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,cAAc;AAChB,MAAwB;AAChB,QAAA,EAAE,WAAW;AAEnB,QAAM,aAAa;AAAA,IACjB,CAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,MACW;AACL,YAAA,gBAAgB,YAClB,OAAO,KAAK,SAAS,EAAE,OAAO,CAAC,QAAQ,QAAQ,UAAU,IACzD;AACJ,YAAM,YACJ,aAAa,gBACT,cAAc,OAAO,CAAC,KAAK,SAAS;AAC3B,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,IAAI,GACH,SAAS,UACL,SAAS,UAAU,IAAI,CAAW,KAAK,UAAU,IAAI,IACrD,UAAU,IAAI;AAAA,QAAA;AAAA,MACtB,GACC,CAAE,CAAA,IACL;AAEC,aAAA;AAAA,QACL;AAAA,QACA,MAAM,YAAY,IAAI,KAAK,YAAY,WAAW;AAAA,QAClD;AAAA,QACA,WAAW;AAAA,UACT,QAAQ,iBAAiB;AAAA,UACzB,WAAW;AAAA,QACb;AAAA,QACA,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,KAAK,aAAa,QAAQ,YAAY;AAAA,QACtC,GAAI,WAAW,YAAY;AAAA,UACzB,cAAc,WAAW;AAAA,QAC3B;AAAA,QACA,GAAI,aAAa;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,QACA,GAAI,QAAQ,EAAE,KAAK;AAAA,QACnB,GAAI,YAAY,EAAE,SAAS;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,CAAC,QAAQ,WAAW;AAAA,EAAA;AAGhB,QAAA,SAAS,QAAwC,MAAM;AACpD,WAAA;AAAA,MACL,OAAO,MAAM,QAAQ,IAAI,IACrB,KAAK,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IACnC,CAAC,WAAW,CAAE,CAAA,CAAC;AAAA,IAAA;AAAA,EACrB,GACC,CAAC,MAAM,UAAU,CAAC;AAEd,SAAA;AACT;"}
package/dist/esm/index.js CHANGED
@@ -5,10 +5,12 @@ import { HvDonutChart } from "./DonutChart/DonutChart.js";
5
5
  import { HvTreemapChart } from "./Treemap/Treemap.js";
6
6
  import { HvConfusionMatrix } from "./ConfusionMatrix/ConfusionMatrix.js";
7
7
  import { HvScatterPlot } from "./ScatterPlot/ScatterPlot.js";
8
+ import { HvHeatmap } from "./Heatmap/Heatmap.js";
8
9
  export {
9
10
  HvBarChart,
10
11
  HvConfusionMatrix,
11
12
  HvDonutChart,
13
+ HvHeatmap,
12
14
  HvLineChart,
13
15
  HvScatterPlot,
14
16
  HvTreemapChart,
package/dist/esm/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
package/dist/types/index.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  import { Arrayable } from '@hitachivantara/uikit-react-core';
2
- import type ColumnTable from 'arquero/dist/types/table/column-table';
3
2
  import { Context } from 'react';
4
3
  import { CSSInterpolation } from '@emotion/serialize';
5
- import type { EChartsType } from 'echarts';
4
+ import { default as default_2 } from 'arquero/dist/types/table/column-table';
5
+ import { default as default_3 } from 'echarts-for-react/lib/core';
6
+ import { EChartsType } from 'echarts';
6
7
  import { ExtractNames } from '@hitachivantara/uikit-react-core';
7
8
  import { ForwardRefExoticComponent } from 'react';
8
- import type { HvColorAny } from '@hitachivantara/uikit-react-core';
9
+ import { HvColorAny } from '@hitachivantara/uikit-react-core';
9
10
  import { HvExtraProps } from '@hitachivantara/uikit-react-core';
10
11
  import { HvTheme } from '@hitachivantara/uikit-react-core';
11
12
  import { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
12
- import ReactECharts from 'echarts-for-react/lib/core';
13
13
  import { RefAttributes } from 'react';
14
14
 
15
15
  declare interface AxisMeasure {
@@ -84,7 +84,7 @@ declare interface HvAxisChartCommonProps {
84
84
  /**
85
85
  * A bar chart is a chart or graph that presents categorical data with rectangular bars.
86
86
  */
87
- export declare const HvBarChart: ForwardRefExoticComponent<HvBarChartProps & RefAttributes<ReactECharts>>;
87
+ export declare const HvBarChart: ForwardRefExoticComponent<HvBarChartProps & RefAttributes<default_3>>;
88
88
 
89
89
  export declare interface HvBarChartClasses extends HvChartTooltipClasses {
90
90
  }
@@ -180,7 +180,7 @@ declare interface HvChartCommonProps {
180
180
  }
181
181
 
182
182
  /** Chart data */
183
- export declare type HvChartData = Map<string | number, (string | number)[]> | Record<string | number, (string | number)[]> | Record<string | number, string | number>[] | ColumnTable;
183
+ export declare type HvChartData = Map<string | number, (string | number)[]> | Record<string | number, (string | number)[]> | Record<string | number, string | number>[] | default_2;
184
184
 
185
185
  export declare type HvChartEmptyCellMode = (typeof emptyCellMode)[number];
186
186
 
@@ -242,6 +242,7 @@ export declare interface HvChartTooltipParams {
242
242
  name?: string;
243
243
  value?: string | number;
244
244
  }[];
245
+ value?: (string | number)[];
245
246
  }
246
247
 
247
248
  export declare type HvChartTooltipType = (typeof tooltipType)[number];
@@ -261,7 +262,7 @@ declare interface HvChartYAxis extends HvChartAxis {
261
262
  * Typically the columns show the predicted class and the rows the expected class.
262
263
  * The main diagonal counts the positive matches while the cells outside it count the mismatches between predicted and expected.
263
264
  */
264
- export declare const HvConfusionMatrix: ForwardRefExoticComponent<HvConfusionMatrixProps & RefAttributes<ReactECharts>>;
265
+ export declare const HvConfusionMatrix: ForwardRefExoticComponent<HvConfusionMatrixProps & RefAttributes<default_3>>;
265
266
 
266
267
  export declare type HvConfusionMatrixClasses = ExtractNames<typeof useClasses_2>;
267
268
 
@@ -327,7 +328,7 @@ export declare interface HvConfusionMatrixValuesProps {
327
328
  * Donut charts nicely convey the part-whole relationship and they have become
328
329
  * the most recognizable chart types for representing proportions in business and data statistics.
329
330
  */
330
- export declare const HvDonutChart: ForwardRefExoticComponent<HvDonutChartProps & RefAttributes<ReactECharts>>;
331
+ export declare const HvDonutChart: ForwardRefExoticComponent<HvDonutChartProps & RefAttributes<default_3>>;
331
332
 
332
333
  export declare interface HvDonutChartClasses extends HvChartTooltipClasses {
333
334
  }
@@ -347,11 +348,43 @@ export declare interface HvDonutChartProps extends HvChartCommonProps {
347
348
 
348
349
  declare type HvEChartsOption = Record<string, any>;
349
350
 
351
+ /**
352
+ * A Heatmap uses color gradients to represent data intensity across a surface.
353
+ */
354
+ export declare const HvHeatmap: ForwardRefExoticComponent<HvHeatmapProps & RefAttributes<default_3>>;
355
+
356
+ export declare type HvHeatmapClasses = ExtractNames<typeof useClasses_3>;
357
+
358
+ export declare type HvHeatmapData = Array<HvHeatmapItem>;
359
+
360
+ export declare type HvHeatmapItem = Array<number | string>;
361
+
362
+ export declare interface HvHeatmapProps extends Omit<HvChartCommonProps, "data" | "groupBy" | "sortBy" | "grid" | "legend" | "tooltip"> {
363
+ /** The name of the heatmap */
364
+ name?: string;
365
+ /** The data to use on the heatmap */
366
+ data?: HvHeatmapData;
367
+ /** The min value of the Heatmap */
368
+ min: number;
369
+ /** The max value of the Heatmap */
370
+ max: number;
371
+ /** The X axis defintion */
372
+ xAxis?: XAxis;
373
+ /** The Y axis definition. */
374
+ yAxis?: YAxis;
375
+ /** The tooltip options. */
376
+ tooltip?: Omit<HvChartTooltip, "type">;
377
+ /** Color scale of the confusion matrix. Accepts an array of strings spanning from the lower to the upper ends of the scale. */
378
+ colorScale?: string[];
379
+ /** A Jss Object used to override or extend the styles applied to the component. */
380
+ classes?: HvHeatmapClasses;
381
+ }
382
+
350
383
  /**
351
384
  * A line chart or line plot or line graph is a type of chart which displays information as a series of data points
352
385
  * connected by straight line segments. It is a basic type of chart common in many fields.
353
386
  */
354
- export declare const HvLineChart: ForwardRefExoticComponent<HvLineChartProps & RefAttributes<ReactECharts>>;
387
+ export declare const HvLineChart: ForwardRefExoticComponent<HvLineChartProps & RefAttributes<default_3>>;
355
388
 
356
389
  export declare interface HvLineChartClasses extends HvChartTooltipClasses {
357
390
  }
@@ -375,7 +408,7 @@ export declare interface HvLineChartProps extends HvAxisChartCommonProps, HvChar
375
408
  * A scatter plot is a type of chart which displays dots to represent two numeric variables.
376
409
  * This type of chart is used to determine the relationship between two variables.
377
410
  */
378
- export declare const HvScatterPlot: ForwardRefExoticComponent<HvScatterPlotProps & RefAttributes<ReactECharts>>;
411
+ export declare const HvScatterPlot: ForwardRefExoticComponent<HvScatterPlotProps & RefAttributes<default_3>>;
379
412
 
380
413
  export declare interface HvScatterPlotClasses extends HvChartTooltipClasses {
381
414
  }
@@ -392,7 +425,7 @@ export declare interface HvScatterPlotProps extends HvChartCommonProps, Omit<HvA
392
425
  /**
393
426
  * A tree map chart visually represents hierarchical data using nested rectangles, with each rectangle's size proportional to the value it represents.
394
427
  */
395
- export declare const HvTreemapChart: ForwardRefExoticComponent<HvTreemapChartProps & RefAttributes<ReactECharts>>;
428
+ export declare const HvTreemapChart: ForwardRefExoticComponent<HvTreemapChartProps & RefAttributes<default_3>>;
396
429
 
397
430
  export declare interface HvTreemapChartClasses extends HvChartTooltipClasses {
398
431
  }
@@ -507,4 +540,25 @@ declare const useClasses_2: (classesProp?: Partial<Record<"tooltipRoot" | "toolt
507
540
  cx: (...args: any) => string;
508
541
  };
509
542
 
543
+ declare const useClasses_3: (classesProp?: Partial<Record<"tooltipRoot" | "tooltipContainer" | "tooltipText", string>>, addStatic?: boolean) => {
544
+ classes: {
545
+ tooltipRoot: string;
546
+ tooltipContainer: string;
547
+ tooltipText: string;
548
+ };
549
+ css: {
550
+ (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
551
+ (...args: CSSInterpolation[]): string;
552
+ };
553
+ cx: (...args: any) => string;
554
+ };
555
+
556
+ declare interface XAxis extends HvChartXAxis {
557
+ data?: string[];
558
+ }
559
+
560
+ declare interface YAxis extends HvChartYAxis {
561
+ data?: string[];
562
+ }
563
+
510
564
  export { }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-viz",
3
- "version": "5.9.1",
3
+ "version": "5.10.0",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "Contributed React visualization components for the NEXT UI Kit.",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@emotion/css": "^11.11.0",
36
- "@hitachivantara/uikit-react-core": "^5.64.1"
36
+ "@hitachivantara/uikit-react-core": "^5.64.2"
37
37
  },
38
38
  "files": [
39
39
  "dist"
@@ -42,8 +42,7 @@
42
42
  "access": "public",
43
43
  "directory": "package"
44
44
  },
45
- "gitHead": "bdd638b19425b905ffa70b083e006f0820450113",
46
- "main": "dist/cjs/index.cjs",
45
+ "gitHead": "8e3ae40c51df853c67a1b5b73b330ad19f24c3f1",
47
46
  "exports": {
48
47
  ".": {
49
48
  "require": "./dist/cjs/index.cjs",