@hitachivantara/uikit-react-viz 5.4.5 → 5.5.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.
- package/dist/cjs/components/ConfusionMatrix/utils.cjs +11 -13
- package/dist/cjs/components/ConfusionMatrix/utils.cjs.map +1 -1
- package/dist/cjs/hooks/useXAxis.cjs +3 -4
- package/dist/cjs/hooks/useXAxis.cjs.map +1 -1
- package/dist/cjs/hooks/useYAxis.cjs +3 -4
- package/dist/cjs/hooks/useYAxis.cjs.map +1 -1
- package/dist/esm/components/ConfusionMatrix/utils.js +11 -13
- package/dist/esm/components/ConfusionMatrix/utils.js.map +1 -1
- package/dist/esm/hooks/useXAxis.js +3 -4
- package/dist/esm/hooks/useXAxis.js.map +1 -1
- package/dist/esm/hooks/useYAxis.js +3 -4
- package/dist/esm/hooks/useYAxis.js.map +1 -1
- package/dist/types/index.d.ts +6 -6
- package/package.json +3 -3
|
@@ -9,8 +9,7 @@ const useColorScale = ({
|
|
|
9
9
|
filterKey
|
|
10
10
|
}) => {
|
|
11
11
|
const {
|
|
12
|
-
|
|
13
|
-
selectedMode
|
|
12
|
+
colors
|
|
14
13
|
} = uikitReactCore.useTheme();
|
|
15
14
|
const colorScale = react.useMemo(() => {
|
|
16
15
|
if (custom == null && delta) {
|
|
@@ -21,7 +20,7 @@ const useColorScale = ({
|
|
|
21
20
|
pieces: custom.reduce((acc, curr) => {
|
|
22
21
|
acc.push({
|
|
23
22
|
...curr,
|
|
24
|
-
color: (
|
|
23
|
+
color: (colors == null ? void 0 : colors[curr.color]) || curr.color
|
|
25
24
|
});
|
|
26
25
|
return acc;
|
|
27
26
|
}, [])
|
|
@@ -34,11 +33,11 @@ const useColorScale = ({
|
|
|
34
33
|
const max = Math.max(...flatData);
|
|
35
34
|
const min = Math.min(...flatData);
|
|
36
35
|
return {
|
|
37
|
-
colorScale: custom || [(
|
|
36
|
+
colorScale: custom || [(colors == null ? void 0 : colors.base_light) || "", (colors == null ? void 0 : colors.cat3) || ""],
|
|
38
37
|
max,
|
|
39
38
|
min
|
|
40
39
|
};
|
|
41
|
-
}, [
|
|
40
|
+
}, [colors, custom, data, filterKey, delta]);
|
|
42
41
|
return colorScale;
|
|
43
42
|
};
|
|
44
43
|
const useSeries = ({
|
|
@@ -48,18 +47,17 @@ const useSeries = ({
|
|
|
48
47
|
valuesProps
|
|
49
48
|
}) => {
|
|
50
49
|
const {
|
|
51
|
-
|
|
52
|
-
selectedMode
|
|
50
|
+
colors
|
|
53
51
|
} = uikitReactCore.useTheme();
|
|
54
52
|
const getDeltaColor = react.useCallback((value, diagonal) => {
|
|
55
53
|
if (diagonal && value > 0 || !diagonal && value < 0) {
|
|
56
|
-
return
|
|
54
|
+
return colors == null ? void 0 : colors.positive;
|
|
57
55
|
}
|
|
58
56
|
if (diagonal && value < 0 || !diagonal && value > 0) {
|
|
59
|
-
return
|
|
57
|
+
return colors == null ? void 0 : colors.negative;
|
|
60
58
|
}
|
|
61
|
-
return
|
|
62
|
-
}, [
|
|
59
|
+
return colors == null ? void 0 : colors.base_light;
|
|
60
|
+
}, [colors]);
|
|
63
61
|
const chartSeries = react.useMemo(() => {
|
|
64
62
|
return {
|
|
65
63
|
series: {
|
|
@@ -69,7 +67,7 @@ const useSeries = ({
|
|
|
69
67
|
show: true,
|
|
70
68
|
...valuesProps,
|
|
71
69
|
...(valuesProps == null ? void 0 : valuesProps.color) && {
|
|
72
|
-
color: (
|
|
70
|
+
color: (colors == null ? void 0 : colors[valuesProps.color]) || valuesProps.color
|
|
73
71
|
}
|
|
74
72
|
},
|
|
75
73
|
emphasis: {
|
|
@@ -93,7 +91,7 @@ const useSeries = ({
|
|
|
93
91
|
}, [])
|
|
94
92
|
}
|
|
95
93
|
};
|
|
96
|
-
}, [
|
|
94
|
+
}, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);
|
|
97
95
|
return chartSeries;
|
|
98
96
|
};
|
|
99
97
|
const SQUARE_SIZE = 52;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const {
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const { colors } = useTheme();\n\n const colorScale = useMemo(() => {\n if (custom == null && delta) {\n return;\n }\n\n if (custom && typeof custom[0] === \"object\") {\n return {\n pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n (acc: HvConfusionMatrixColorScale[], curr) => {\n acc.push({\n ...curr,\n color: colors?.[curr.color] || curr.color,\n });\n return acc;\n },\n []\n ),\n };\n }\n\n const flatData = data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: number[], c: string) => {\n acc.push(...data.array(c));\n return acc;\n }, []);\n const max = Math.max(...flatData);\n const min = Math.min(...flatData);\n\n return {\n colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n max,\n min,\n };\n }, [colors, custom, data, filterKey, delta]);\n\n return colorScale;\n};\n\nexport const useSeries = ({\n data,\n filterKey,\n delta,\n valuesProps,\n}: {\n data: ColumnTable;\n filterKey: string;\n delta: boolean;\n valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n const { colors } = useTheme();\n\n const getDeltaColor = useCallback(\n (value: number, diagonal: boolean) => {\n if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n return colors?.positive;\n }\n if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n return colors?.negative;\n }\n\n return colors?.base_light;\n },\n [colors]\n );\n\n const chartSeries = useMemo(() => {\n return {\n series: {\n id: `series~${filterKey}`,\n type: \"heatmap\",\n label: {\n show: true,\n ...valuesProps,\n ...(valuesProps?.color && {\n color: colors?.[valuesProps.color] || valuesProps.color,\n }),\n },\n emphasis: {\n disabled: true,\n },\n data: data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: (string | number)[][], c: string, j) => {\n const row: (string | number)[][] = data\n .array(c)\n .reduce((racc, rv, i) => {\n racc.push({\n value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n ...(delta && {\n visualMap: false,\n itemStyle: {\n color: getDeltaColor(rv, i === j),\n },\n }),\n });\n return racc;\n }, []);\n\n acc.push(...row);\n return acc;\n }, []),\n },\n };\n }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n data,\n filterKey,\n format,\n xAxisPosition,\n visualMapVisible,\n visualMapYPosition,\n}: {\n xAxisPosition: HvChartXAxis[\"position\"];\n data: ColumnTable;\n filterKey: string;\n format: HvConfusionMatrixFormat;\n visualMapVisible: boolean;\n visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n const size = useMemo(() => {\n const nCols = data.array(filterKey).length;\n const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n return {\n padding: {\n bottom:\n xAxisPosition === \"bottom\" ||\n (visualMapVisible && visualMapYPosition === \"bottom\")\n ? 60\n : 20,\n top:\n xAxisPosition === \"top\" ||\n (visualMapVisible && visualMapYPosition === \"top\")\n ? 60\n : 20,\n ...(visualMapVisible &&\n visualMapYPosition === \"bottom\" &&\n xAxisPosition === \"bottom\" && {\n bottom: 100,\n }),\n ...(visualMapVisible &&\n visualMapYPosition === \"top\" &&\n xAxisPosition === \"top\" && {\n top: 100,\n }),\n left: 80,\n right: 80,\n },\n size: {\n height: Math.max(itemHeight * nRows, itemHeight * 8),\n width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n },\n };\n }, [\n data,\n filterKey,\n format,\n visualMapVisible,\n visualMapYPosition,\n xAxisPosition,\n ]);\n\n return size;\n};\n"],"names":["useColorScale","data","delta","custom","filterKey","colors","useTheme","colorScale","useMemo","pieces","reduce","acc","curr","push","color","flatData","columnNames","filter","p","c","array","max","Math","min","base_light","cat3","useSeries","valuesProps","getDeltaColor","useCallback","value","diagonal","positive","negative","chartSeries","series","id","type","label","show","emphasis","disabled","j","row","racc","rv","i","visualMap","itemStyle","SQUARE_SIZE","useGridLayout","format","xAxisPosition","visualMapVisible","visualMapYPosition","size","nCols","length","nRows","itemHeight","padding","bottom","top","left","right","height","width"],"mappings":"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"}
|
|
@@ -17,15 +17,14 @@ const useXAxis = ({
|
|
|
17
17
|
nameProps
|
|
18
18
|
}) => {
|
|
19
19
|
const {
|
|
20
|
-
|
|
21
|
-
selectedMode
|
|
20
|
+
colors
|
|
22
21
|
} = uikitReactCore.useTheme();
|
|
23
22
|
const option = react.useMemo(() => {
|
|
24
23
|
const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
|
|
25
24
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
26
25
|
return {
|
|
27
26
|
...acc,
|
|
28
|
-
[curr]: curr === "color" ? (
|
|
27
|
+
[curr]: curr === "color" ? (colors == null ? void 0 : colors[nameProps[curr]]) || nameProps[curr] : nameProps[curr]
|
|
29
28
|
};
|
|
30
29
|
}, {}) : void 0;
|
|
31
30
|
return {
|
|
@@ -54,7 +53,7 @@ const useXAxis = ({
|
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
};
|
|
57
|
-
}, [nameProps, id, type, name, scale, labelRotation, labelFormatter, maxValue, minValue, data, position,
|
|
56
|
+
}, [nameProps, id, type, name, scale, labelRotation, labelFormatter, maxValue, minValue, data, position, colors]);
|
|
58
57
|
return option;
|
|
59
58
|
};
|
|
60
59
|
exports.useXAxis = useXAxis;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis } from \"@viz/types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n scale?: boolean;\n data?: string[];\n}\n\nexport const useXAxis = ({\n id,\n type = \"categorical\",\n labelFormatter,\n labelRotation,\n name,\n maxValue,\n minValue,\n scale = false,\n data,\n position,\n nameProps,\n}: HvXAxisHookProps) => {\n const {
|
|
1
|
+
{"version":3,"file":"useXAxis.cjs","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis } from \"@viz/types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n scale?: boolean;\n data?: string[];\n}\n\nexport const useXAxis = ({\n id,\n type = \"categorical\",\n labelFormatter,\n labelRotation,\n name,\n maxValue,\n minValue,\n scale = false,\n data,\n position,\n nameProps,\n}: HvXAxisHookProps) => {\n const { colors } = useTheme();\n\n const option = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\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 xAxis: {\n id,\n type: getAxisType(type),\n name,\n scale,\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 }, [\n nameProps,\n id,\n type,\n name,\n scale,\n labelRotation,\n labelFormatter,\n maxValue,\n minValue,\n data,\n position,\n colors,\n ]);\n\n return option;\n};\n"],"names":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","colors","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","xAxis","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle"],"mappings":";;;;;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,eAAS,SAAA;AAEtBC,QAAAA,SAASC,MAAAA,QAAsC,MAAM;AACnDC,UAAAA,gBAAgBL,YAClBM,OAAOC,KAAKP,SAAS,EAAEQ,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJX,aAAaK,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLb,iCAASD,UAAUc,IAAI,OAAgBd,UAAUc,IAAI,IACrDd,UAAUc,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLK,OAAO;AAAA,QACLzB;AAAAA,QACAC,MAAMyB,wBAAYzB,IAAI;AAAA,QACtBG;AAAAA,QACAG;AAAAA,QACAoB,WAAW;AAAA,UACTC,QAAQzB,iBAAiB;AAAA,UACzB0B,WAAW3B;AAAAA,QACb;AAAA,QACA4B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC0B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC,IAAII,uCAAWsB,aAAY;AAAA,UACzBC,cAAcvB,UAAUsB;AAAAA,QAC1B;AAAA,QACA,GAAIX,aAAa;AAAA,UACfa,eAAeb;AAAAA,QACjB;AAAA,QACA,GAAIb,QAAQ;AAAA,UAAEA;AAAAA,QAAK;AAAA,QACnB,GAAIC,YAAY;AAAA,UAAEA;AAAAA,QAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EAED,GAAA,CACDC,WACAV,IACAC,MACAG,MACAG,OACAJ,eACAD,gBACAG,UACAC,UACAE,MACAC,UACAE,MAAM,CACP;AAEME,SAAAA;AACT;;"}
|
|
@@ -8,8 +8,7 @@ const useYAxis = ({
|
|
|
8
8
|
defaultType = "continuous"
|
|
9
9
|
}) => {
|
|
10
10
|
const {
|
|
11
|
-
|
|
12
|
-
selectedMode
|
|
11
|
+
colors
|
|
13
12
|
} = uikitReactCore.useTheme();
|
|
14
13
|
const createAxis = react.useCallback(({
|
|
15
14
|
id,
|
|
@@ -27,7 +26,7 @@ const useYAxis = ({
|
|
|
27
26
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
28
27
|
return {
|
|
29
28
|
...acc,
|
|
30
|
-
[curr]: curr === "color" ? (
|
|
29
|
+
[curr]: curr === "color" ? (colors == null ? void 0 : colors[nameProps[curr]]) || nameProps[curr] : nameProps[curr]
|
|
31
30
|
};
|
|
32
31
|
}, {}) : void 0;
|
|
33
32
|
return {
|
|
@@ -53,7 +52,7 @@ const useYAxis = ({
|
|
|
53
52
|
position
|
|
54
53
|
}
|
|
55
54
|
};
|
|
56
|
-
}, [
|
|
55
|
+
}, [colors, defaultType]);
|
|
57
56
|
const option = react.useMemo(() => {
|
|
58
57
|
return {
|
|
59
58
|
yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : createAxis({})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis } from \"@viz/types/common\";\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 {
|
|
1
|
+
{"version":3,"file":"useYAxis.cjs","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis } from \"@viz/types/common\";\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<EChartsOption, \"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":["useYAxis","axes","defaultType","colors","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle","option","useMemo","yAxis","Array","isArray","map","axis"],"mappings":";;;;;AAmBO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,eAAS,SAAA;AAEtBC,QAAAA,aAAaC,MAAAA,YACjB,CAAC;AAAA,IACCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,MACW;AACLC,UAAAA,gBAAgBH,YAClBI,OAAOC,KAAKL,SAAS,EAAEM,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJT,aAAaG,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLvB,iCAASW,UAAUY,IAAI,OAAgBZ,UAAUY,IAAI,IACrDZ,UAAUY,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLf;AAAAA,MACAC,MAAMmB,YAAAA,YAAYnB,IAAI,KAAKmB,YAAAA,YAAYzB,WAAW;AAAA,MAClDO;AAAAA,MACAmB,WAAW;AAAA,QACTC,QAAQlB,iBAAiB;AAAA,QACzBmB,WAAWpB;AAAAA,MACb;AAAA,MACAqB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtCoB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtC,IAAIC,uCAAWmB,aAAY;AAAA,QACzBC,cAAcpB,uCAAWmB;AAAAA,MAC3B;AAAA,MACA,GAAIV,aAAa;AAAA,QACfY,eAAeZ;AAAAA,MACjB;AAAA,MACA,GAAIR,QAAQ;AAAA,QAAEA;AAAAA,MAAK;AAAA,MACnB,GAAIC,YAAY;AAAA,QAAEA;AAAAA,MAAS;AAAA,IAAA;AAAA,EAC7B,GAEF,CAACb,QAAQD,WAAW,CACtB;AAEMkC,QAAAA,SAASC,MAAAA,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLC,OAAOC,MAAMC,QAAQvC,IAAI,IACrBA,KAAKwC,IAAKC,CAASrC,SAAAA,WAAWqC,IAAI,CAAC,IACnCrC,WAAW,CAAA,CAAE;AAAA,IAAA;AAAA,EACnB,GACC,CAACJ,MAAMI,UAAU,CAAC;AAEd+B,SAAAA;AACT;;"}
|
|
@@ -7,8 +7,7 @@ const useColorScale = ({
|
|
|
7
7
|
filterKey
|
|
8
8
|
}) => {
|
|
9
9
|
const {
|
|
10
|
-
|
|
11
|
-
selectedMode
|
|
10
|
+
colors
|
|
12
11
|
} = useTheme();
|
|
13
12
|
const colorScale = useMemo(() => {
|
|
14
13
|
if (custom == null && delta) {
|
|
@@ -19,7 +18,7 @@ const useColorScale = ({
|
|
|
19
18
|
pieces: custom.reduce((acc, curr) => {
|
|
20
19
|
acc.push({
|
|
21
20
|
...curr,
|
|
22
|
-
color: (
|
|
21
|
+
color: (colors == null ? void 0 : colors[curr.color]) || curr.color
|
|
23
22
|
});
|
|
24
23
|
return acc;
|
|
25
24
|
}, [])
|
|
@@ -32,11 +31,11 @@ const useColorScale = ({
|
|
|
32
31
|
const max = Math.max(...flatData);
|
|
33
32
|
const min = Math.min(...flatData);
|
|
34
33
|
return {
|
|
35
|
-
colorScale: custom || [(
|
|
34
|
+
colorScale: custom || [(colors == null ? void 0 : colors.base_light) || "", (colors == null ? void 0 : colors.cat3) || ""],
|
|
36
35
|
max,
|
|
37
36
|
min
|
|
38
37
|
};
|
|
39
|
-
}, [
|
|
38
|
+
}, [colors, custom, data, filterKey, delta]);
|
|
40
39
|
return colorScale;
|
|
41
40
|
};
|
|
42
41
|
const useSeries = ({
|
|
@@ -46,18 +45,17 @@ const useSeries = ({
|
|
|
46
45
|
valuesProps
|
|
47
46
|
}) => {
|
|
48
47
|
const {
|
|
49
|
-
|
|
50
|
-
selectedMode
|
|
48
|
+
colors
|
|
51
49
|
} = useTheme();
|
|
52
50
|
const getDeltaColor = useCallback((value, diagonal) => {
|
|
53
51
|
if (diagonal && value > 0 || !diagonal && value < 0) {
|
|
54
|
-
return
|
|
52
|
+
return colors == null ? void 0 : colors.positive;
|
|
55
53
|
}
|
|
56
54
|
if (diagonal && value < 0 || !diagonal && value > 0) {
|
|
57
|
-
return
|
|
55
|
+
return colors == null ? void 0 : colors.negative;
|
|
58
56
|
}
|
|
59
|
-
return
|
|
60
|
-
}, [
|
|
57
|
+
return colors == null ? void 0 : colors.base_light;
|
|
58
|
+
}, [colors]);
|
|
61
59
|
const chartSeries = useMemo(() => {
|
|
62
60
|
return {
|
|
63
61
|
series: {
|
|
@@ -67,7 +65,7 @@ const useSeries = ({
|
|
|
67
65
|
show: true,
|
|
68
66
|
...valuesProps,
|
|
69
67
|
...(valuesProps == null ? void 0 : valuesProps.color) && {
|
|
70
|
-
color: (
|
|
68
|
+
color: (colors == null ? void 0 : colors[valuesProps.color]) || valuesProps.color
|
|
71
69
|
}
|
|
72
70
|
},
|
|
73
71
|
emphasis: {
|
|
@@ -91,7 +89,7 @@ const useSeries = ({
|
|
|
91
89
|
}, [])
|
|
92
90
|
}
|
|
93
91
|
};
|
|
94
|
-
}, [
|
|
92
|
+
}, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);
|
|
95
93
|
return chartSeries;
|
|
96
94
|
};
|
|
97
95
|
const SQUARE_SIZE = 52;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const {
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/ConfusionMatrix/utils.ts"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type ColumnTable from \"arquero/dist/types/table/column-table\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { HvChartXAxis } from \"@viz/types/common\";\n\nimport {\n HvConfusionMatrixColorScale,\n HvConfusionMatrixFormat,\n HvConfusionMatrixValuesProps,\n} from \"./types\";\n\nexport const useColorScale = ({\n data,\n delta,\n custom,\n filterKey,\n}: {\n data: ColumnTable;\n delta: boolean;\n filterKey: string;\n custom?: [string, string] | HvConfusionMatrixColorScale[];\n}) => {\n const { colors } = useTheme();\n\n const colorScale = useMemo(() => {\n if (custom == null && delta) {\n return;\n }\n\n if (custom && typeof custom[0] === \"object\") {\n return {\n pieces: (custom as HvConfusionMatrixColorScale[]).reduce(\n (acc: HvConfusionMatrixColorScale[], curr) => {\n acc.push({\n ...curr,\n color: colors?.[curr.color] || curr.color,\n });\n return acc;\n },\n []\n ),\n };\n }\n\n const flatData = data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: number[], c: string) => {\n acc.push(...data.array(c));\n return acc;\n }, []);\n const max = Math.max(...flatData);\n const min = Math.min(...flatData);\n\n return {\n colorScale: custom || [colors?.base_light || \"\", colors?.cat3 || \"\"],\n max,\n min,\n };\n }, [colors, custom, data, filterKey, delta]);\n\n return colorScale;\n};\n\nexport const useSeries = ({\n data,\n filterKey,\n delta,\n valuesProps,\n}: {\n data: ColumnTable;\n filterKey: string;\n delta: boolean;\n valuesProps?: HvConfusionMatrixValuesProps;\n}) => {\n const { colors } = useTheme();\n\n const getDeltaColor = useCallback(\n (value: number, diagonal: boolean) => {\n if ((diagonal && value > 0) || (!diagonal && value < 0)) {\n return colors?.positive;\n }\n if ((diagonal && value < 0) || (!diagonal && value > 0)) {\n return colors?.negative;\n }\n\n return colors?.base_light;\n },\n [colors]\n );\n\n const chartSeries = useMemo(() => {\n return {\n series: {\n id: `series~${filterKey}`,\n type: \"heatmap\",\n label: {\n show: true,\n ...valuesProps,\n ...(valuesProps?.color && {\n color: colors?.[valuesProps.color] || valuesProps.color,\n }),\n },\n emphasis: {\n disabled: true,\n },\n data: data\n .columnNames()\n .filter((p) => p !== filterKey)\n .reduce((acc: (string | number)[][], c: string, j) => {\n const row: (string | number)[][] = data\n .array(c)\n .reduce((racc, rv, i) => {\n racc.push({\n value: [data.array(filterKey)[i], c, rv != null ? rv : \"-\"],\n ...(delta && {\n visualMap: false,\n itemStyle: {\n color: getDeltaColor(rv, i === j),\n },\n }),\n });\n return racc;\n }, []);\n\n acc.push(...row);\n return acc;\n }, []),\n },\n };\n }, [colors, data, delta, filterKey, getDeltaColor, valuesProps]);\n\n return chartSeries;\n};\n\nconst SQUARE_SIZE = 52;\n\nexport const useGridLayout = ({\n data,\n filterKey,\n format,\n xAxisPosition,\n visualMapVisible,\n visualMapYPosition,\n}: {\n xAxisPosition: HvChartXAxis[\"position\"];\n data: ColumnTable;\n filterKey: string;\n format: HvConfusionMatrixFormat;\n visualMapVisible: boolean;\n visualMapYPosition: \"top\" | \"center\" | \"bottom\";\n}) => {\n const size = useMemo(() => {\n const nCols = data.array(filterKey).length;\n const nRows = data.columnNames().filter((p) => p !== filterKey).length;\n const itemHeight = format === \"square\" ? SQUARE_SIZE : SQUARE_SIZE / 2;\n\n return {\n padding: {\n bottom:\n xAxisPosition === \"bottom\" ||\n (visualMapVisible && visualMapYPosition === \"bottom\")\n ? 60\n : 20,\n top:\n xAxisPosition === \"top\" ||\n (visualMapVisible && visualMapYPosition === \"top\")\n ? 60\n : 20,\n ...(visualMapVisible &&\n visualMapYPosition === \"bottom\" &&\n xAxisPosition === \"bottom\" && {\n bottom: 100,\n }),\n ...(visualMapVisible &&\n visualMapYPosition === \"top\" &&\n xAxisPosition === \"top\" && {\n top: 100,\n }),\n left: 80,\n right: 80,\n },\n size: {\n height: Math.max(itemHeight * nRows, itemHeight * 8),\n width: Math.max(SQUARE_SIZE * nCols, SQUARE_SIZE * 8),\n },\n };\n }, [\n data,\n filterKey,\n format,\n visualMapVisible,\n visualMapYPosition,\n xAxisPosition,\n ]);\n\n return size;\n};\n"],"names":["useColorScale","data","delta","custom","filterKey","colors","useTheme","colorScale","useMemo","pieces","reduce","acc","curr","push","color","flatData","columnNames","filter","p","c","array","max","Math","min","base_light","cat3","useSeries","valuesProps","getDeltaColor","useCallback","value","diagonal","positive","negative","chartSeries","series","id","type","label","show","emphasis","disabled","j","row","racc","rv","i","visualMap","itemStyle","SQUARE_SIZE","useGridLayout","format","xAxisPosition","visualMapVisible","visualMapYPosition","size","nCols","length","nRows","itemHeight","padding","bottom","top","left","right","height","width"],"mappings":"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"}
|
|
@@ -15,15 +15,14 @@ const useXAxis = ({
|
|
|
15
15
|
nameProps
|
|
16
16
|
}) => {
|
|
17
17
|
const {
|
|
18
|
-
|
|
19
|
-
selectedMode
|
|
18
|
+
colors
|
|
20
19
|
} = useTheme();
|
|
21
20
|
const option = useMemo(() => {
|
|
22
21
|
const nameStyleKeys = nameProps ? Object.keys(nameProps).filter((key) => key !== "location") : void 0;
|
|
23
22
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
24
23
|
return {
|
|
25
24
|
...acc,
|
|
26
|
-
[curr]: curr === "color" ? (
|
|
25
|
+
[curr]: curr === "color" ? (colors == null ? void 0 : colors[nameProps[curr]]) || nameProps[curr] : nameProps[curr]
|
|
27
26
|
};
|
|
28
27
|
}, {}) : void 0;
|
|
29
28
|
return {
|
|
@@ -52,7 +51,7 @@ const useXAxis = ({
|
|
|
52
51
|
}
|
|
53
52
|
}
|
|
54
53
|
};
|
|
55
|
-
}, [nameProps, id, type, name, scale, labelRotation, labelFormatter, maxValue, minValue, data, position,
|
|
54
|
+
}, [nameProps, id, type, name, scale, labelRotation, labelFormatter, maxValue, minValue, data, position, colors]);
|
|
56
55
|
return option;
|
|
57
56
|
};
|
|
58
57
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useXAxis.js","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis } from \"@viz/types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n scale?: boolean;\n data?: string[];\n}\n\nexport const useXAxis = ({\n id,\n type = \"categorical\",\n labelFormatter,\n labelRotation,\n name,\n maxValue,\n minValue,\n scale = false,\n data,\n position,\n nameProps,\n}: HvXAxisHookProps) => {\n const {
|
|
1
|
+
{"version":3,"file":"useXAxis.js","sources":["../../../src/hooks/useXAxis.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartXAxis } from \"@viz/types/common\";\n\ninterface HvXAxisHookProps extends HvChartXAxis {\n scale?: boolean;\n data?: string[];\n}\n\nexport const useXAxis = ({\n id,\n type = \"categorical\",\n labelFormatter,\n labelRotation,\n name,\n maxValue,\n minValue,\n scale = false,\n data,\n position,\n nameProps,\n}: HvXAxisHookProps) => {\n const { colors } = useTheme();\n\n const option = useMemo<Pick<EChartsOption, \"xAxis\">>(() => {\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 xAxis: {\n id,\n type: getAxisType(type),\n name,\n scale,\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 }, [\n nameProps,\n id,\n type,\n name,\n scale,\n labelRotation,\n labelFormatter,\n maxValue,\n minValue,\n data,\n position,\n colors,\n ]);\n\n return option;\n};\n"],"names":["useXAxis","id","type","labelFormatter","labelRotation","name","maxValue","minValue","scale","data","position","nameProps","colors","useTheme","option","useMemo","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","xAxis","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle"],"mappings":";;;AAcO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,SAASC,QAAsC,MAAM;AACnDC,UAAAA,gBAAgBL,YAClBM,OAAOC,KAAKP,SAAS,EAAEQ,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJX,aAAaK,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLb,iCAASD,UAAUc,IAAI,OAAgBd,UAAUc,IAAI,IACrDd,UAAUc,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLK,OAAO;AAAA,QACLzB;AAAAA,QACAC,MAAMyB,YAAYzB,IAAI;AAAA,QACtBG;AAAAA,QACAG;AAAAA,QACAoB,WAAW;AAAA,UACTC,QAAQzB,iBAAiB;AAAA,UACzB0B,WAAW3B;AAAAA,QACb;AAAA,QACA4B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC0B,KAAKzB,aAAa,QAAQ,YAAYA;AAAAA,QACtC,IAAII,uCAAWsB,aAAY;AAAA,UACzBC,cAAcvB,UAAUsB;AAAAA,QAC1B;AAAA,QACA,GAAIX,aAAa;AAAA,UACfa,eAAeb;AAAAA,QACjB;AAAA,QACA,GAAIb,QAAQ;AAAA,UAAEA;AAAAA,QAAK;AAAA,QACnB,GAAIC,YAAY;AAAA,UAAEA;AAAAA,QAAS;AAAA,MAC7B;AAAA,IAAA;AAAA,EAED,GAAA,CACDC,WACAV,IACAC,MACAG,MACAG,OACAJ,eACAD,gBACAG,UACAC,UACAE,MACAC,UACAE,MAAM,CACP;AAEME,SAAAA;AACT;"}
|
|
@@ -6,8 +6,7 @@ const useYAxis = ({
|
|
|
6
6
|
defaultType = "continuous"
|
|
7
7
|
}) => {
|
|
8
8
|
const {
|
|
9
|
-
|
|
10
|
-
selectedMode
|
|
9
|
+
colors
|
|
11
10
|
} = useTheme();
|
|
12
11
|
const createAxis = useCallback(({
|
|
13
12
|
id,
|
|
@@ -25,7 +24,7 @@ const useYAxis = ({
|
|
|
25
24
|
const nameStyle = nameProps && nameStyleKeys ? nameStyleKeys.reduce((acc, curr) => {
|
|
26
25
|
return {
|
|
27
26
|
...acc,
|
|
28
|
-
[curr]: curr === "color" ? (
|
|
27
|
+
[curr]: curr === "color" ? (colors == null ? void 0 : colors[nameProps[curr]]) || nameProps[curr] : nameProps[curr]
|
|
29
28
|
};
|
|
30
29
|
}, {}) : void 0;
|
|
31
30
|
return {
|
|
@@ -51,7 +50,7 @@ const useYAxis = ({
|
|
|
51
50
|
position
|
|
52
51
|
}
|
|
53
52
|
};
|
|
54
|
-
}, [
|
|
53
|
+
}, [colors, defaultType]);
|
|
55
54
|
const option = useMemo(() => {
|
|
56
55
|
return {
|
|
57
56
|
yAxis: Array.isArray(axes) ? axes.map((axis) => createAxis(axis)) : createAxis({})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis } from \"@viz/types/common\";\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 {
|
|
1
|
+
{"version":3,"file":"useYAxis.js","sources":["../../../src/hooks/useYAxis.tsx"],"sourcesContent":["import { useMemo, useCallback } from \"react\";\n\nimport type { EChartsOption } from \"echarts-for-react/lib/types\";\n\nimport { useTheme } from \"@hitachivantara/uikit-react-core\";\n\nimport { getAxisType } from \"@viz/utils\";\nimport { HvChartAxisType } from \"@viz/types\";\nimport { HvChartYAxis } from \"@viz/types/common\";\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<EChartsOption, \"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":["useYAxis","axes","defaultType","colors","useTheme","createAxis","useCallback","id","type","name","labelFormatter","labelRotation","maxValue","minValue","nameProps","data","position","nameStyleKeys","Object","keys","filter","key","undefined","nameStyle","reduce","acc","curr","getAxisType","axisLabel","rotate","formatter","max","min","location","nameLocation","nameTextStyle","option","useMemo","yAxis","Array","isArray","map","axis"],"mappings":";;;AAmBO,MAAMA,WAAWA,CAAC;AAAA,EACvBC;AAAAA,EACAC,cAAc;AACE,MAAM;AAChB,QAAA;AAAA,IAAEC;AAAAA,MAAWC,SAAS;AAEtBC,QAAAA,aAAaC,YACjB,CAAC;AAAA,IACCC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,MACW;AACLC,UAAAA,gBAAgBH,YAClBI,OAAOC,KAAKL,SAAS,EAAEM,OAAQC,CAAAA,QAAQA,QAAQ,UAAU,IACzDC;AACJ,UAAMC,YACJT,aAAaG,gBACTA,cAAcO,OAAO,CAACC,KAAKC,SAAS;AAC3B,aAAA;AAAA,QACL,GAAGD;AAAAA,QACH,CAACC,IAAI,GACHA,SAAS,WACLvB,iCAASW,UAAUY,IAAI,OAAgBZ,UAAUY,IAAI,IACrDZ,UAAUY,IAAI;AAAA,MAAA;AAAA,IACtB,GACC,CAAE,CAAA,IACLJ;AAEC,WAAA;AAAA,MACLf;AAAAA,MACAC,MAAMmB,YAAYnB,IAAI,KAAKmB,YAAYzB,WAAW;AAAA,MAClDO;AAAAA,MACAmB,WAAW;AAAA,QACTC,QAAQlB,iBAAiB;AAAA,QACzBmB,WAAWpB;AAAAA,MACb;AAAA,MACAqB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtCoB,KAAKnB,aAAa,QAAQ,YAAYA;AAAAA,MACtC,IAAIC,uCAAWmB,aAAY;AAAA,QACzBC,cAAcpB,uCAAWmB;AAAAA,MAC3B;AAAA,MACA,GAAIV,aAAa;AAAA,QACfY,eAAeZ;AAAAA,MACjB;AAAA,MACA,GAAIR,QAAQ;AAAA,QAAEA;AAAAA,MAAK;AAAA,MACnB,GAAIC,YAAY;AAAA,QAAEA;AAAAA,MAAS;AAAA,IAAA;AAAA,EAC7B,GAEF,CAACb,QAAQD,WAAW,CACtB;AAEMkC,QAAAA,SAASC,QAAsC,MAAM;AAClD,WAAA;AAAA,MACLC,OAAOC,MAAMC,QAAQvC,IAAI,IACrBA,KAAKwC,IAAKC,CAASrC,SAAAA,WAAWqC,IAAI,CAAC,IACnCrC,WAAW,CAAA,CAAE;AAAA,IAAA;AAAA,EACnB,GACC,CAACJ,MAAMI,UAAU,CAAC;AAEd+B,SAAAA;AACT;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type ColumnTable from 'arquero/dist/types/table/column-table';
|
|
|
3
3
|
import type { Context } from 'react';
|
|
4
4
|
import type { CSSInterpolation } from '@emotion/serialize';
|
|
5
5
|
import { ExtractNames } from '@hitachivantara/uikit-react-core';
|
|
6
|
+
import type { HvColorAny } from '@hitachivantara/uikit-react-core';
|
|
6
7
|
import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
|
|
7
8
|
|
|
8
9
|
declare interface AxisMeasures {
|
|
@@ -103,8 +104,8 @@ export declare interface HvChartAxis {
|
|
|
103
104
|
location?: HvChartAxisNameLocation;
|
|
104
105
|
/** Padding. */
|
|
105
106
|
padding?: number | number[];
|
|
106
|
-
/** Color.
|
|
107
|
-
color?:
|
|
107
|
+
/** Color. */
|
|
108
|
+
color?: HvColorAny;
|
|
108
109
|
/** Font size. */
|
|
109
110
|
fontSize?: number;
|
|
110
111
|
/** Font style. */
|
|
@@ -241,8 +242,7 @@ export declare const HvConfusionMatrix: ({ legend, groupBy, measure, sortBy, spl
|
|
|
241
242
|
export declare type HvConfusionMatrixClasses = ExtractNames<typeof useClasses_2>;
|
|
242
243
|
|
|
243
244
|
export declare interface HvConfusionMatrixColorScale {
|
|
244
|
-
|
|
245
|
-
color: string;
|
|
245
|
+
color: HvColorAny;
|
|
246
246
|
label: string;
|
|
247
247
|
max?: number;
|
|
248
248
|
min?: number;
|
|
@@ -289,8 +289,8 @@ export declare interface HvConfusionMatrixProps extends Omit<HvChartCommonProps,
|
|
|
289
289
|
export declare interface HvConfusionMatrixValuesProps {
|
|
290
290
|
/** Whether to show the prediction values inside the confusion matrix or not. Defaults to `true`. */
|
|
291
291
|
show?: boolean;
|
|
292
|
-
/** Prediction values label color.
|
|
293
|
-
color?:
|
|
292
|
+
/** Prediction values label color. */
|
|
293
|
+
color?: HvColorAny;
|
|
294
294
|
/** Prediction values label font style. */
|
|
295
295
|
fontStyle?: "normal" | "italic";
|
|
296
296
|
/** Prediction values label font weight. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-viz",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.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.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.27.0"
|
|
37
37
|
},
|
|
38
38
|
"files": [
|
|
39
39
|
"dist"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"access": "public",
|
|
43
43
|
"directory": "package"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "d97e2f6b946dbebf4bac28e6f071f14d9aad0789",
|
|
46
46
|
"main": "dist/cjs/index.cjs",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|