@hitachivantara/uikit-react-viz 5.15.19 → 5.15.20
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.
|
@@ -73,6 +73,9 @@ const HvHeatmap = react.forwardRef(
|
|
|
73
73
|
defaultType: "categorical",
|
|
74
74
|
axes: yAxis ? [yAxis] : []
|
|
75
75
|
});
|
|
76
|
+
const convertedColors = colorScale?.map(
|
|
77
|
+
(color) => colors?.[color] || color
|
|
78
|
+
);
|
|
76
79
|
const chartVisualMap = useVisualMap.useVisualMap({
|
|
77
80
|
min,
|
|
78
81
|
max,
|
|
@@ -82,7 +85,10 @@ const HvHeatmap = react.forwardRef(
|
|
|
82
85
|
position: {
|
|
83
86
|
y: "bottom"
|
|
84
87
|
},
|
|
85
|
-
colorScale:
|
|
88
|
+
colorScale: convertedColors || [
|
|
89
|
+
colors?.cat1_180 || "",
|
|
90
|
+
colors?.cat1_20 || ""
|
|
91
|
+
]
|
|
86
92
|
});
|
|
87
93
|
const option = useOption.useOption({
|
|
88
94
|
option: {
|
|
@@ -53,6 +53,9 @@ const HvHeatmap = forwardRef(
|
|
|
53
53
|
defaultType: "categorical",
|
|
54
54
|
axes: yAxis ? [yAxis] : []
|
|
55
55
|
});
|
|
56
|
+
const convertedColors = colorScale?.map(
|
|
57
|
+
(color) => colors?.[color] || color
|
|
58
|
+
);
|
|
56
59
|
const chartVisualMap = useVisualMap({
|
|
57
60
|
min,
|
|
58
61
|
max,
|
|
@@ -62,7 +65,10 @@ const HvHeatmap = forwardRef(
|
|
|
62
65
|
position: {
|
|
63
66
|
y: "bottom"
|
|
64
67
|
},
|
|
65
|
-
colorScale:
|
|
68
|
+
colorScale: convertedColors || [
|
|
69
|
+
colors?.cat1_180 || "",
|
|
70
|
+
colors?.cat1_20 || ""
|
|
71
|
+
]
|
|
66
72
|
});
|
|
67
73
|
const option = useOption({
|
|
68
74
|
option: {
|
|
@@ -1 +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 { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\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\" | \"filters\"\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 definition */\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?:
|
|
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 { useTheme, type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { HvColorAny } from \"@hitachivantara/uikit-styles\";\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\" | \"filters\"\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 definition */\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?: HvColorAny[];\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 function HvHeatmap(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?.[Number(value[1])]} - ${xAxis?.data?.[Number(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 convertedColors = colorScale?.map(\n (color) => colors?.[color] || color,\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: convertedColors || [\n colors?.cat1_180 || \"\",\n colors?.cat1_20 || \"\",\n ],\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":["HvHeatmap"],"mappings":";;;;;;;;;;;;;AAqBA,QAAQ,IAAI,CAAC,cAAc,kBAAkB,kBAAkB,CAAC;AAoCzD,MAAM,YAAY;AAAA,EACvB,SAASA,WAAU,OAAO,KAAK;AACvB,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,IAAA,IACD;AAEJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AACpC,UAAA,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,eAAe,WAAW;AAAA,MAC9B,WAAW,CAAC,WAAW;AACrB,cAAM,QAAQ,QAAQ;AACtB,cAAM,QAAQ,QAAQ;AAEhB,cAAA,cAAc,QAChB,GAAG,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,SAAS,CAAC,GAAG,IAAI,KACrG;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,CAAA;AAAA,IAAC,CAC1B;AAED,UAAM,kBAAkB,YAAY;AAAA,MAClC,CAAC,UAAU,SAAS,KAAK,KAAK;AAAA,IAChC;AAEA,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,mBAAmB;AAAA,QAC7B,QAAQ,YAAY;AAAA,QACpB,QAAQ,WAAW;AAAA,MAAA;AAAA,IACrB,CACD;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,cAAA;AAAA,YACf;AAAA,UACF;AAAA,QAEJ;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,IACN;AAAA,EAAA;AAGN;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -415,7 +415,7 @@ export declare interface HvHeatmapProps extends Omit<HvChartCommonProps, "data"
|
|
|
415
415
|
/** The tooltip options. */
|
|
416
416
|
tooltip?: Omit<HvChartTooltip, "type">;
|
|
417
417
|
/** Color scale of the confusion matrix. Accepts an array of strings spanning from the lower to the upper ends of the scale. */
|
|
418
|
-
colorScale?:
|
|
418
|
+
colorScale?: HvColorAny[];
|
|
419
419
|
/** A Jss Object used to override or extend the styles applied to the component. */
|
|
420
420
|
classes?: HvHeatmapClasses;
|
|
421
421
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.15.
|
|
3
|
+
"version": "5.15.20",
|
|
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,8 +33,8 @@
|
|
|
33
33
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
37
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
36
|
+
"@hitachivantara/uikit-react-utils": "^0.2.27",
|
|
37
|
+
"@hitachivantara/uikit-styles": "^5.43.0"
|
|
38
38
|
},
|
|
39
39
|
"files": [
|
|
40
40
|
"dist"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"access": "public",
|
|
44
44
|
"directory": "package"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "eee4430726670b0641ae608a3eaef68713e76fd6",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"types": "./dist/types/index.d.ts",
|