@hitachivantara/uikit-react-viz 5.9.2 → 5.10.1

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 +54 -0
  18. package/package.json +3 -3
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":"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"}
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
@@ -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];
@@ -347,6 +348,38 @@ 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.
@@ -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.2",
3
+ "version": "5.10.1",
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.2"
36
+ "@hitachivantara/uikit-react-core": "^5.64.3"
37
37
  },
38
38
  "files": [
39
39
  "dist"
@@ -42,7 +42,7 @@
42
42
  "access": "public",
43
43
  "directory": "package"
44
44
  },
45
- "gitHead": "0e08b9389eab092cbaecf55b54cc37406e81f797",
45
+ "gitHead": "e4d9b95ff33f0a36aa8205bd3529475974aa0fe2",
46
46
  "exports": {
47
47
  ".": {
48
48
  "require": "./dist/cjs/index.cjs",