@hitachivantara/uikit-react-viz 5.15.13 → 5.15.14
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/providers/Provider.cjs +3 -2
- package/dist/cjs/utils/registerTheme.cjs +26 -24
- package/dist/esm/providers/Provider.js +3 -2
- package/dist/esm/providers/Provider.js.map +1 -1
- package/dist/esm/utils/registerTheme.js +26 -24
- package/dist/esm/utils/registerTheme.js.map +1 -1
- package/package.json +2 -2
|
@@ -10,8 +10,9 @@ const HvVizContext = react.createContext({
|
|
|
10
10
|
const HvVizProvider = ({ children }) => {
|
|
11
11
|
const { activeTheme, selectedMode, selectedTheme } = uikitReactUtils.useTheme();
|
|
12
12
|
const value = react.useMemo(() => {
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const themeName = `${selectedTheme}-${selectedMode}`;
|
|
14
|
+
registerTheme.registerTheme(themeName, selectedMode, activeTheme);
|
|
15
|
+
return { theme: themeName, activeTheme };
|
|
15
16
|
}, [selectedTheme, selectedMode, activeTheme]);
|
|
16
17
|
return /* @__PURE__ */ jsxRuntime.jsx(HvVizContext.Provider, { value, children });
|
|
17
18
|
};
|
|
@@ -19,9 +19,11 @@ function _interopNamespace(e) {
|
|
|
19
19
|
return Object.freeze(n);
|
|
20
20
|
}
|
|
21
21
|
const echarts__namespace = /* @__PURE__ */ _interopNamespace(echarts);
|
|
22
|
-
const registerTheme = (
|
|
22
|
+
const registerTheme = (themeName, mode, themeStructure) => {
|
|
23
|
+
const colors = themeStructure?.colors.modes[mode];
|
|
24
|
+
if (!colors) return;
|
|
23
25
|
const baseText = {
|
|
24
|
-
color:
|
|
26
|
+
color: colors?.secondary,
|
|
25
27
|
fontWeight: themeStructure?.fontWeights.normal,
|
|
26
28
|
fontSize: themeStructure?.fontSizes.sm,
|
|
27
29
|
fontFamily: themeStructure?.fontFamily.body
|
|
@@ -29,22 +31,22 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
29
31
|
const customAxis = {
|
|
30
32
|
nameTextStyle: {
|
|
31
33
|
...baseText,
|
|
32
|
-
color:
|
|
34
|
+
color: colors?.secondary_80
|
|
33
35
|
},
|
|
34
36
|
axisLine: {
|
|
35
37
|
show: true,
|
|
36
38
|
lineStyle: {
|
|
37
|
-
color:
|
|
39
|
+
color: colors?.atmo3
|
|
38
40
|
}
|
|
39
41
|
},
|
|
40
42
|
axisTick: {
|
|
41
43
|
show: true,
|
|
42
44
|
lineStyle: {
|
|
43
|
-
color:
|
|
45
|
+
color: colors?.atmo3
|
|
44
46
|
}
|
|
45
47
|
},
|
|
46
48
|
axisLabel: {
|
|
47
|
-
color:
|
|
49
|
+
color: colors?.secondary_80,
|
|
48
50
|
fontWeight: themeStructure?.fontWeights.normal,
|
|
49
51
|
fontSize: themeStructure?.fontSizes.sm,
|
|
50
52
|
fontFamily: themeStructure?.fontFamily.body
|
|
@@ -52,24 +54,24 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
52
54
|
splitLine: {
|
|
53
55
|
show: true,
|
|
54
56
|
lineStyle: {
|
|
55
|
-
color:
|
|
57
|
+
color: colors?.atmo3
|
|
56
58
|
}
|
|
57
59
|
}
|
|
58
60
|
};
|
|
59
|
-
echarts__namespace.registerTheme(
|
|
61
|
+
echarts__namespace.registerTheme(themeName, {
|
|
60
62
|
color: [
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
63
|
+
colors?.cat1,
|
|
64
|
+
colors?.cat2,
|
|
65
|
+
colors?.cat3,
|
|
66
|
+
colors?.cat4,
|
|
67
|
+
colors?.cat5,
|
|
68
|
+
colors?.cat6,
|
|
69
|
+
colors?.cat7,
|
|
70
|
+
colors?.cat8,
|
|
71
|
+
colors?.cat9,
|
|
72
|
+
colors?.cat10,
|
|
73
|
+
colors?.cat11,
|
|
74
|
+
colors?.cat12
|
|
73
75
|
],
|
|
74
76
|
legend: {
|
|
75
77
|
textStyle: {
|
|
@@ -84,7 +86,7 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
84
86
|
},
|
|
85
87
|
axisPointer: {
|
|
86
88
|
lineStyle: {
|
|
87
|
-
color:
|
|
89
|
+
color: colors?.secondary,
|
|
88
90
|
width: 1
|
|
89
91
|
}
|
|
90
92
|
}
|
|
@@ -121,16 +123,16 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
121
123
|
fontFamily: baseText.fontFamily
|
|
122
124
|
},
|
|
123
125
|
itemStyle: {
|
|
124
|
-
borderColor:
|
|
126
|
+
borderColor: colors?.atmo3,
|
|
125
127
|
borderWidth: 1
|
|
126
128
|
}
|
|
127
129
|
},
|
|
128
130
|
treemap: {
|
|
129
131
|
breadcrumb: {
|
|
130
132
|
itemStyle: {
|
|
131
|
-
color:
|
|
133
|
+
color: colors?.secondary,
|
|
132
134
|
textStyle: {
|
|
133
|
-
color:
|
|
135
|
+
color: colors?.atmo1
|
|
134
136
|
}
|
|
135
137
|
}
|
|
136
138
|
}
|
|
@@ -8,8 +8,9 @@ const HvVizContext = createContext({
|
|
|
8
8
|
const HvVizProvider = ({ children }) => {
|
|
9
9
|
const { activeTheme, selectedMode, selectedTheme } = useTheme();
|
|
10
10
|
const value = useMemo(() => {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const themeName = `${selectedTheme}-${selectedMode}`;
|
|
12
|
+
registerTheme(themeName, selectedMode, activeTheme);
|
|
13
|
+
return { theme: themeName, activeTheme };
|
|
13
14
|
}, [selectedTheme, selectedMode, activeTheme]);
|
|
14
15
|
return /* @__PURE__ */ jsx(HvVizContext.Provider, { value, children });
|
|
15
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\nimport { useTheme, type HvTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { registerTheme } from \"../utils/registerTheme\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n /**\n * The current active theme\n */\n activeTheme?: HvTheme;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n registerTheme(
|
|
1
|
+
{"version":3,"file":"Provider.js","sources":["../../../src/providers/Provider.tsx"],"sourcesContent":["import { createContext, useMemo } from \"react\";\nimport { useTheme, type HvTheme } from \"@hitachivantara/uikit-react-utils\";\n\nimport { registerTheme } from \"../utils/registerTheme\";\n\nexport interface HvVizContextValue {\n /**\n * Current theme\n */\n theme?: string;\n /**\n * The current active theme\n */\n activeTheme?: HvTheme;\n}\n\nexport const HvVizContext = createContext<HvVizContextValue>({\n theme: undefined,\n});\n\nexport interface HvVizProviderProps {\n /**\n * Component tree.\n */\n children?: React.ReactNode;\n}\n\n/**\n * Enables theming capabilities for visualizations.\n *\n * Without this provider the visualizations will not comply to the UI Kit themes.\n *\n * This provider should always be used in combination with the `HvProvider` from\n * the core package since the former uses the themes provided by the latter.\n *\n * `HvVizProvider` should always be used after `HvProvider` like so to work properly:\n *\n * ```\n * <HvProvider>\n * <HvVizProvider>\n * (...)\n * </HvVizProvider>\n * </HvProvider>\n * ```\n */\nexport const HvVizProvider = ({ children }: HvVizProviderProps) => {\n const { activeTheme, selectedMode, selectedTheme } = useTheme();\n\n const value = useMemo(() => {\n const themeName = `${selectedTheme}-${selectedMode}`;\n registerTheme(themeName, selectedMode, activeTheme);\n return { theme: themeName, activeTheme };\n }, [selectedTheme, selectedMode, activeTheme]);\n\n return (\n <HvVizContext.Provider value={value}>{children}</HvVizContext.Provider>\n );\n};\n"],"names":[],"mappings":";;;;AAgBO,MAAM,eAAe,cAAiC;AAAA,EAC3D,OAAO;AACT,CAAC;AA2BM,MAAM,gBAAgB,CAAC,EAAE,eAAmC;AACjE,QAAM,EAAE,aAAa,cAAc,cAAA,IAAkB,SAAS;AAExD,QAAA,QAAQ,QAAQ,MAAM;AAC1B,UAAM,YAAY,GAAG,aAAa,IAAI,YAAY;AACpC,kBAAA,WAAW,cAAc,WAAW;AAC3C,WAAA,EAAE,OAAO,WAAW,YAAY;AAAA,EACtC,GAAA,CAAC,eAAe,cAAc,WAAW,CAAC;AAE7C,SACG,oBAAA,aAAa,UAAb,EAAsB,OAAe,SAAS,CAAA;AAEnD;"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import * as echarts from "echarts/core";
|
|
2
|
-
const registerTheme = (
|
|
2
|
+
const registerTheme = (themeName, mode, themeStructure) => {
|
|
3
|
+
const colors = themeStructure?.colors.modes[mode];
|
|
4
|
+
if (!colors) return;
|
|
3
5
|
const baseText = {
|
|
4
|
-
color:
|
|
6
|
+
color: colors?.secondary,
|
|
5
7
|
fontWeight: themeStructure?.fontWeights.normal,
|
|
6
8
|
fontSize: themeStructure?.fontSizes.sm,
|
|
7
9
|
fontFamily: themeStructure?.fontFamily.body
|
|
@@ -9,22 +11,22 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
9
11
|
const customAxis = {
|
|
10
12
|
nameTextStyle: {
|
|
11
13
|
...baseText,
|
|
12
|
-
color:
|
|
14
|
+
color: colors?.secondary_80
|
|
13
15
|
},
|
|
14
16
|
axisLine: {
|
|
15
17
|
show: true,
|
|
16
18
|
lineStyle: {
|
|
17
|
-
color:
|
|
19
|
+
color: colors?.atmo3
|
|
18
20
|
}
|
|
19
21
|
},
|
|
20
22
|
axisTick: {
|
|
21
23
|
show: true,
|
|
22
24
|
lineStyle: {
|
|
23
|
-
color:
|
|
25
|
+
color: colors?.atmo3
|
|
24
26
|
}
|
|
25
27
|
},
|
|
26
28
|
axisLabel: {
|
|
27
|
-
color:
|
|
29
|
+
color: colors?.secondary_80,
|
|
28
30
|
fontWeight: themeStructure?.fontWeights.normal,
|
|
29
31
|
fontSize: themeStructure?.fontSizes.sm,
|
|
30
32
|
fontFamily: themeStructure?.fontFamily.body
|
|
@@ -32,24 +34,24 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
32
34
|
splitLine: {
|
|
33
35
|
show: true,
|
|
34
36
|
lineStyle: {
|
|
35
|
-
color:
|
|
37
|
+
color: colors?.atmo3
|
|
36
38
|
}
|
|
37
39
|
}
|
|
38
40
|
};
|
|
39
|
-
echarts.registerTheme(
|
|
41
|
+
echarts.registerTheme(themeName, {
|
|
40
42
|
color: [
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
43
|
+
colors?.cat1,
|
|
44
|
+
colors?.cat2,
|
|
45
|
+
colors?.cat3,
|
|
46
|
+
colors?.cat4,
|
|
47
|
+
colors?.cat5,
|
|
48
|
+
colors?.cat6,
|
|
49
|
+
colors?.cat7,
|
|
50
|
+
colors?.cat8,
|
|
51
|
+
colors?.cat9,
|
|
52
|
+
colors?.cat10,
|
|
53
|
+
colors?.cat11,
|
|
54
|
+
colors?.cat12
|
|
53
55
|
],
|
|
54
56
|
legend: {
|
|
55
57
|
textStyle: {
|
|
@@ -64,7 +66,7 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
64
66
|
},
|
|
65
67
|
axisPointer: {
|
|
66
68
|
lineStyle: {
|
|
67
|
-
color:
|
|
69
|
+
color: colors?.secondary,
|
|
68
70
|
width: 1
|
|
69
71
|
}
|
|
70
72
|
}
|
|
@@ -101,16 +103,16 @@ const registerTheme = (name, mode, themeStructure) => {
|
|
|
101
103
|
fontFamily: baseText.fontFamily
|
|
102
104
|
},
|
|
103
105
|
itemStyle: {
|
|
104
|
-
borderColor:
|
|
106
|
+
borderColor: colors?.atmo3,
|
|
105
107
|
borderWidth: 1
|
|
106
108
|
}
|
|
107
109
|
},
|
|
108
110
|
treemap: {
|
|
109
111
|
breadcrumb: {
|
|
110
112
|
itemStyle: {
|
|
111
|
-
color:
|
|
113
|
+
color: colors?.secondary,
|
|
112
114
|
textStyle: {
|
|
113
|
-
color:
|
|
115
|
+
color: colors?.atmo1
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import * as echarts from \"echarts/core\";\nimport { type HvTheme } from \"@hitachivantara/uikit-react-utils\";\n\nexport const registerTheme = (\n
|
|
1
|
+
{"version":3,"file":"registerTheme.js","sources":["../../../src/utils/registerTheme.ts"],"sourcesContent":["import * as echarts from \"echarts/core\";\nimport { type HvTheme } from \"@hitachivantara/uikit-react-utils\";\n\nexport const registerTheme = (\n themeName: string,\n mode: string,\n themeStructure?: HvTheme,\n) => {\n const colors = themeStructure?.colors.modes[mode];\n // if theme & mode is invalid, exit (to use the default theme)\n if (!colors) return;\n\n const baseText = {\n color: colors?.secondary,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n };\n\n const customAxis = {\n nameTextStyle: {\n ...baseText,\n color: colors?.secondary_80,\n },\n axisLine: {\n show: true,\n lineStyle: {\n color: colors?.atmo3,\n },\n },\n axisTick: {\n show: true,\n lineStyle: {\n color: colors?.atmo3,\n },\n },\n axisLabel: {\n color: colors?.secondary_80,\n fontWeight: themeStructure?.fontWeights.normal,\n fontSize: themeStructure?.fontSizes.sm,\n fontFamily: themeStructure?.fontFamily.body,\n },\n splitLine: {\n show: true,\n lineStyle: {\n color: colors?.atmo3,\n },\n },\n };\n\n echarts.registerTheme(themeName, {\n color: [\n colors?.cat1,\n colors?.cat2,\n colors?.cat3,\n colors?.cat4,\n colors?.cat5,\n colors?.cat6,\n colors?.cat7,\n colors?.cat8,\n colors?.cat9,\n colors?.cat10,\n colors?.cat11,\n colors?.cat12,\n ],\n legend: {\n textStyle: {\n ...baseText,\n },\n },\n tooltip: {\n borderWidth: 0,\n padding: 0,\n textStyle: {\n ...baseText,\n },\n axisPointer: {\n lineStyle: {\n color: colors?.secondary,\n width: 1,\n },\n },\n },\n dataZoom: {\n textStyle: { ...baseText },\n },\n categoryAxis: {\n ...customAxis,\n },\n valueAxis: {\n ...customAxis,\n },\n logAxis: {\n ...customAxis,\n },\n timeAxis: {\n ...customAxis,\n },\n line: {\n lineStyle: {\n width: 2,\n },\n },\n visualMap: {\n textStyle: {\n ...baseText,\n },\n },\n heatmap: {\n label: {\n fontWeight: baseText.fontWeight,\n fontSize: baseText.fontSize,\n fontFamily: baseText.fontFamily,\n },\n itemStyle: {\n borderColor: colors?.atmo3,\n borderWidth: 1,\n },\n },\n treemap: {\n breadcrumb: {\n itemStyle: {\n color: colors?.secondary,\n textStyle: {\n color: colors?.atmo1,\n },\n },\n },\n },\n });\n};\n"],"names":[],"mappings":";AAGO,MAAM,gBAAgB,CAC3B,WACA,MACA,mBACG;AACH,QAAM,SAAS,gBAAgB,OAAO,MAAM,IAAI;AAEhD,MAAI,CAAC,OAAQ;AAEb,QAAM,WAAW;AAAA,IACf,OAAO,QAAQ;AAAA,IACf,YAAY,gBAAgB,YAAY;AAAA,IACxC,UAAU,gBAAgB,UAAU;AAAA,IACpC,YAAY,gBAAgB,WAAW;AAAA,EACzC;AAEA,QAAM,aAAa;AAAA,IACjB,eAAe;AAAA,MACb,GAAG;AAAA,MACH,OAAO,QAAQ;AAAA,IACjB;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,QAAQ;AAAA,MAAA;AAAA,IAEnB;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,QAAQ;AAAA,MAAA;AAAA,IAEnB;AAAA,IACA,WAAW;AAAA,MACT,OAAO,QAAQ;AAAA,MACf,YAAY,gBAAgB,YAAY;AAAA,MACxC,UAAU,gBAAgB,UAAU;AAAA,MACpC,YAAY,gBAAgB,WAAW;AAAA,IACzC;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,QACT,OAAO,QAAQ;AAAA,MAAA;AAAA,IACjB;AAAA,EAEJ;AAEA,UAAQ,cAAc,WAAW;AAAA,IAC/B,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,WAAW;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAEP;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MACL;AAAA,MACA,aAAa;AAAA,QACX,WAAW;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IAEJ;AAAA,IACA,UAAU;AAAA,MACR,WAAW,EAAE,GAAG,SAAS;AAAA,IAC3B;AAAA,IACA,cAAc;AAAA,MACZ,GAAG;AAAA,IACL;AAAA,IACA,WAAW;AAAA,MACT,GAAG;AAAA,IACL;AAAA,IACA,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,GAAG;AAAA,IACL;AAAA,IACA,MAAM;AAAA,MACJ,WAAW;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,WAAW;AAAA,MACT,WAAW;AAAA,QACT,GAAG;AAAA,MAAA;AAAA,IAEP;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,YAAY,SAAS;AAAA,QACrB,UAAU,SAAS;AAAA,QACnB,YAAY,SAAS;AAAA,MACvB;AAAA,MACA,WAAW;AAAA,QACT,aAAa,QAAQ;AAAA,QACrB,aAAa;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,SAAS;AAAA,MACP,YAAY;AAAA,QACV,WAAW;AAAA,UACT,OAAO,QAAQ;AAAA,UACf,WAAW;AAAA,YACT,OAAO,QAAQ;AAAA,UAAA;AAAA,QACjB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
|
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.14",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React visualization components for the NEXT UI Kit.",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"access": "public",
|
|
44
44
|
"directory": "package"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "b640963c1ededed00ec3f0f2bce7f7cdab8891c6",
|
|
47
47
|
"exports": {
|
|
48
48
|
".": {
|
|
49
49
|
"types": "./dist/types/index.d.ts",
|