@gravity-ui/chartkit 0.13.0 → 1.1.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/CHANGELOG.md +55 -73
- package/README.md +3 -3
- package/build/plugins/index.d.ts +1 -1
- package/build/plugins/index.js +1 -0
- package/build/plugins/yagr/__stories__/mocks/line10.js +8 -11
- package/build/plugins/yagr/__tests__/utils.test.d.ts +1 -0
- package/build/plugins/yagr/__tests__/utils.test.js +26 -0
- package/build/plugins/yagr/renderer/YagrWidget.js +35 -169
- package/build/plugins/yagr/renderer/tooltip/index.d.ts +1 -0
- package/build/plugins/yagr/renderer/tooltip/index.js +1 -0
- package/build/plugins/yagr/renderer/tooltip/renderTooltip.d.ts +2 -0
- package/build/plugins/yagr/renderer/tooltip/renderTooltip.js +55 -0
- package/build/plugins/yagr/renderer/tooltip/tooltip.d.ts +2 -140
- package/build/plugins/yagr/renderer/tooltip/tooltip.js +10 -9
- package/build/plugins/yagr/renderer/tooltip/types.d.ts +74 -0
- package/build/plugins/yagr/renderer/tooltip/types.js +1 -0
- package/build/plugins/yagr/renderer/useWidgetData.d.ts +8 -0
- package/build/plugins/yagr/renderer/useWidgetData.js +21 -0
- package/build/plugins/yagr/renderer/utils.d.ts +21 -0
- package/build/plugins/yagr/renderer/utils.js +116 -0
- package/build/plugins/yagr/types.d.ts +3 -2
- package/build/plugins/yagr/types.js +1 -1
- package/build/types/widget.d.ts +1 -2
- package/package.json +2 -2
- package/build/plugins/yagr/renderer/synchronizeTooltipTablesCellsWidth.d.ts +0 -1
- package/build/plugins/yagr/renderer/synchronizeTooltipTablesCellsWidth.js +0 -43
package/CHANGELOG.md
CHANGED
|
@@ -1,221 +1,203 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## [
|
|
3
|
+
## [1.1.0](https://github.com/gravity-ui/chartkit/compare/v1.0.0...v1.1.0) (2022-12-08)
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
### Features
|
|
7
7
|
|
|
8
|
-
*
|
|
8
|
+
* useWidgetData fixes ([54c47af](https://github.com/gravity-ui/chartkit/commit/54c47afb0c519fe8d500d993069e4c660c04550e))
|
|
9
9
|
|
|
10
|
-
## [0.
|
|
10
|
+
## [1.0.0](https://github.com/gravity-ui/chartkit/compare/v0.13.0...v1.0.0) (2022-12-07)
|
|
11
|
+
|
|
12
|
+
### ⚠ BREAKING CHANGES
|
|
13
|
+
|
|
14
|
+
- update Yagr to v2. Read more about [changes](https://github.com/yandex-cloud/yagr/blob/master/CHANGELOG.md#200-19-04-2022)
|
|
15
|
+
|
|
16
|
+
## [0.13.0](https://github.com/gravity-ui/chartkit/compare/v0.12.3...v0.13.0) (2022-12-05)
|
|
17
|
+
|
|
18
|
+
### Features
|
|
11
19
|
|
|
20
|
+
- remove direct import @gravity-ui/uikit styles in ChartKit component ([#80](https://github.com/gravity-ui/chartkit/issues/80)) ([49642d7](https://github.com/gravity-ui/chartkit/commit/49642d7cfbd358a399ead674b2d3a040b05bf669))
|
|
21
|
+
|
|
22
|
+
## [0.12.3](https://github.com/gravity-ui/chartkit/compare/v0.12.2...v0.12.3) (2022-12-01)
|
|
12
23
|
|
|
13
24
|
### Bug Fixes
|
|
14
25
|
|
|
15
|
-
|
|
26
|
+
- **Yagr:** added common no-data case handling ([#78](https://github.com/gravity-ui/chartkit/issues/78)) ([100efaa](https://github.com/gravity-ui/chartkit/commit/100efaaff20e03048146ca084ee91c2be2568640))
|
|
16
27
|
|
|
17
28
|
## [0.12.2](https://github.com/gravity-ui/chartkit/compare/v0.12.1...v0.12.2) (2022-11-30)
|
|
18
29
|
|
|
19
|
-
|
|
20
30
|
### Bug Fixes
|
|
21
31
|
|
|
22
|
-
|
|
32
|
+
- **ChartKit:** id not to be new on every render ([#76](https://github.com/gravity-ui/chartkit/issues/76)) ([230a992](https://github.com/gravity-ui/chartkit/commit/230a992fe99a176bbf85cbef363ccac45db7b3b4))
|
|
23
33
|
|
|
24
34
|
## [0.12.1](https://github.com/gravity-ui/chartkit/compare/v0.12.0...v0.12.1) (2022-11-22)
|
|
25
35
|
|
|
26
|
-
|
|
27
36
|
### Bug Fixes
|
|
28
37
|
|
|
29
|
-
|
|
38
|
+
- **Highcharts plugin:** remove style for chart background color ([#73](https://github.com/gravity-ui/chartkit/issues/73)) ([481b2f5](https://github.com/gravity-ui/chartkit/commit/481b2f5fe07d818f37ba220f70fbad14690b39ba))
|
|
30
39
|
|
|
31
40
|
## [0.12.0](https://github.com/gravity-ui/chartkit/compare/v0.11.1...v0.12.0) (2022-11-22)
|
|
32
41
|
|
|
33
|
-
|
|
34
42
|
### Features
|
|
35
43
|
|
|
36
|
-
|
|
44
|
+
- add support border color setting ([defdcf7](https://github.com/gravity-ui/chartkit/commit/defdcf768d33fe11f9de8dc14a1e9561c034f6ea))
|
|
37
45
|
|
|
38
46
|
## [0.11.1](https://github.com/gravity-ui/chartkit/compare/v0.11.0...v0.11.1) (2022-11-21)
|
|
39
47
|
|
|
40
|
-
|
|
41
48
|
### Bug Fixes
|
|
42
49
|
|
|
43
|
-
|
|
50
|
+
- **Highcharts plugin:** fix tooltip holidays handling ([#69](https://github.com/gravity-ui/chartkit/issues/69)) ([9bc3f8c](https://github.com/gravity-ui/chartkit/commit/9bc3f8c7a62d3b269626be87a46de1d8a6949f57))
|
|
44
51
|
|
|
45
52
|
## [0.11.0](https://github.com/gravity-ui/chartkit/compare/v0.10.1...v0.11.0) (2022-11-18)
|
|
46
53
|
|
|
47
|
-
|
|
48
54
|
### Features
|
|
49
55
|
|
|
50
|
-
|
|
56
|
+
- types improvements ([#67](https://github.com/gravity-ui/chartkit/issues/67)) ([33b4f07](https://github.com/gravity-ui/chartkit/commit/33b4f07a24abdfde52005ddbbf17fb7a25817beb))
|
|
51
57
|
|
|
52
58
|
## [0.10.1](https://github.com/gravity-ui/chartkit/compare/v0.10.0...v0.10.1) (2022-11-18)
|
|
53
59
|
|
|
54
|
-
|
|
55
60
|
### Bug Fixes
|
|
56
61
|
|
|
57
|
-
|
|
62
|
+
- **Highcharts plugin:** add Highcharts lib type export ([#65](https://github.com/gravity-ui/chartkit/issues/65)) ([de24a26](https://github.com/gravity-ui/chartkit/commit/de24a264197441b21261438808838e5fbd0a8402))
|
|
58
63
|
|
|
59
64
|
## [0.10.0](https://github.com/gravity-ui/chartkit/compare/v0.9.1...v0.10.0) (2022-11-18)
|
|
60
65
|
|
|
61
|
-
|
|
62
66
|
### Features
|
|
63
67
|
|
|
64
|
-
|
|
65
|
-
|
|
68
|
+
- add highcharts plugin ([#61](https://github.com/gravity-ui/chartkit/issues/61)) ([9329ede](https://github.com/gravity-ui/chartkit/commit/9329edeaba8c4ef84b1fc30bb7196ba350dc3abd))
|
|
66
69
|
|
|
67
70
|
### Bug Fixes
|
|
68
71
|
|
|
69
|
-
|
|
72
|
+
- yagr & indicator types fixes ([#64](https://github.com/gravity-ui/chartkit/issues/64)) ([479c552](https://github.com/gravity-ui/chartkit/commit/479c552f5ce1890451f3f104fc8efb730f2baf67))
|
|
70
73
|
|
|
71
74
|
## [0.9.1](https://github.com/gravity-ui/chartkit/compare/v0.9.0...v0.9.1) (2022-11-14)
|
|
72
75
|
|
|
73
|
-
|
|
74
76
|
### Bug Fixes
|
|
75
77
|
|
|
76
|
-
|
|
78
|
+
- fix yagr theme initialization ([#59](https://github.com/gravity-ui/chartkit/issues/59)) ([7247873](https://github.com/gravity-ui/chartkit/commit/724787380b8d81f6dfdaae1f6e5c1b806af32e3c))
|
|
77
79
|
|
|
78
80
|
## [0.9.0](https://github.com/gravity-ui/chartkit/compare/v0.8.0...v0.9.0) (2022-11-08)
|
|
79
81
|
|
|
80
|
-
|
|
81
82
|
### Features
|
|
82
83
|
|
|
83
|
-
|
|
84
|
+
- add isMobile property ([#57](https://github.com/gravity-ui/chartkit/issues/57)) ([a2e87ed](https://github.com/gravity-ui/chartkit/commit/a2e87edf1d05705fb92c2571b5a71496c48d9215))
|
|
84
85
|
|
|
85
86
|
## [0.8.0](https://github.com/gravity-ui/chartkit/compare/v0.7.2...v0.8.0) (2022-10-04)
|
|
86
87
|
|
|
87
|
-
|
|
88
88
|
### Features
|
|
89
89
|
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
- move to @gravity-ui/i18n ([#45](https://github.com/gravity-ui/chartkit/issues/45)) ([ad401d8](https://github.com/gravity-ui/chartkit/commit/ad401d85bf50ab4ceb0ae8a837c4b11cd36a4acd))
|
|
92
91
|
|
|
93
92
|
### Bug Fixes
|
|
94
93
|
|
|
95
|
-
|
|
94
|
+
- add ChartKitOnError type export ([#54](https://github.com/gravity-ui/chartkit/issues/54)) ([7660be7](https://github.com/gravity-ui/chartkit/commit/7660be756cd3ec1057aa9fd4bb45226c9632e80f))
|
|
96
95
|
|
|
97
96
|
## [0.7.2](https://github.com/gravity-ui/chartkit/compare/v0.7.1...v0.7.2) (2022-10-03)
|
|
98
97
|
|
|
99
|
-
|
|
100
98
|
### Bug Fixes
|
|
101
99
|
|
|
102
|
-
|
|
100
|
+
- package.json fixes ([#50](https://github.com/gravity-ui/chartkit/issues/50)) ([aca306d](https://github.com/gravity-ui/chartkit/commit/aca306dc8872951a48c1db0362ae1912138d72ed))
|
|
103
101
|
|
|
104
102
|
## [0.7.1](https://github.com/gravity-ui/chartkit/compare/v0.7.0...v0.7.1) (2022-10-03)
|
|
105
103
|
|
|
106
|
-
|
|
107
104
|
### Bug Fixes
|
|
108
105
|
|
|
109
|
-
|
|
106
|
+
- move to gravity-ui configs ([#48](https://github.com/gravity-ui/chartkit/issues/48)) ([620587b](https://github.com/gravity-ui/chartkit/commit/620587b41febade698f12e67506aab683934e7b3))
|
|
110
107
|
|
|
111
108
|
## [0.7.0](https://github.com/yandex-cloud/chartkit/compare/v0.6.0...v0.7.0) (2022-10-01)
|
|
112
109
|
|
|
113
|
-
|
|
114
110
|
### Features
|
|
115
111
|
|
|
116
|
-
|
|
112
|
+
- use gravity-ui/uikit instead of yandex-cloud/uikit ([#46](https://github.com/yandex-cloud/chartkit/issues/46)) ([afb2300](https://github.com/yandex-cloud/chartkit/commit/afb230036bb26573159e5f03e0972653b6692d86))
|
|
117
113
|
|
|
118
114
|
## [0.6.0](https://github.com/yandex-cloud/chartkit/compare/v0.5.4...v0.6.0) (2022-08-12)
|
|
119
115
|
|
|
120
|
-
|
|
121
116
|
### Features
|
|
122
117
|
|
|
123
|
-
|
|
118
|
+
- remove uikit css variables proxing ([#43](https://github.com/yandex-cloud/chartkit/issues/43)) ([4d5131e](https://github.com/yandex-cloud/chartkit/commit/4d5131e0d77270e44bef94f0ba05c9fc5c317704))
|
|
124
119
|
|
|
125
120
|
## [0.5.4](https://github.com/yandex-cloud/chartkit/compare/v0.5.3...v0.5.4) (2022-08-08)
|
|
126
121
|
|
|
127
|
-
|
|
128
122
|
### Bug Fixes
|
|
129
123
|
|
|
130
|
-
|
|
131
|
-
|
|
124
|
+
- add Yagr type export ([#42](https://github.com/yandex-cloud/chartkit/issues/42)) ([a8b9475](https://github.com/yandex-cloud/chartkit/commit/a8b94755bbb0d42652db3e4266e0ca04481ad99f))
|
|
125
|
+
- npm vulnerabilities fixes ([#40](https://github.com/yandex-cloud/chartkit/issues/40)) ([1509bcf](https://github.com/yandex-cloud/chartkit/commit/1509bcf87a50d9281c3ea47074c694db429ad5d4))
|
|
132
126
|
|
|
133
127
|
## [0.5.3](https://github.com/yandex-cloud/chartkit/compare/v0.5.2...v0.5.3) (2022-08-01)
|
|
134
128
|
|
|
135
|
-
|
|
136
129
|
### Bug Fixes
|
|
137
130
|
|
|
138
|
-
|
|
131
|
+
- dev and peer dependencies fixes ([#36](https://github.com/yandex-cloud/chartkit/issues/36)) ([faeccd9](https://github.com/yandex-cloud/chartkit/commit/faeccd9aca9b84ee02edeadef3db2d2abeedb143))
|
|
139
132
|
|
|
140
133
|
## [0.5.2](https://github.com/yandex-cloud/chartkit/compare/v0.5.1...v0.5.2) (2022-07-28)
|
|
141
134
|
|
|
142
|
-
|
|
143
135
|
### Bug Fixes
|
|
144
136
|
|
|
145
|
-
|
|
137
|
+
- Indicator onLoad invocation fixes ([#34](https://github.com/yandex-cloud/chartkit/issues/34)) ([95fafc3](https://github.com/yandex-cloud/chartkit/commit/95fafc381bbafe47173f802310a67e7ced243d80))
|
|
146
138
|
|
|
147
139
|
## [0.5.1](https://github.com/yandex-cloud/chartkit/compare/v0.5.0...v0.5.1) (2022-07-27)
|
|
148
140
|
|
|
149
|
-
|
|
150
141
|
### Bug Fixes
|
|
151
142
|
|
|
152
|
-
|
|
143
|
+
- error handling fixes ([#31](https://github.com/yandex-cloud/chartkit/issues/31)) ([e20fb9d](https://github.com/yandex-cloud/chartkit/commit/e20fb9df1d811efa08a8a68110b1a6819a384af4))
|
|
153
144
|
|
|
154
145
|
## [0.5.0](https://github.com/yandex-cloud/chartkit/compare/v0.4.0...v0.5.0) (2022-07-25)
|
|
155
146
|
|
|
156
|
-
|
|
157
147
|
### Features
|
|
158
148
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
149
|
+
- add chartkit-error ([#28](https://github.com/yandex-cloud/chartkit/issues/28)) ([8342073](https://github.com/yandex-cloud/chartkit/commit/83420738dd431fa1ce2b96f18631f84ca36ed4af))
|
|
150
|
+
- add indicator chart ([#30](https://github.com/yandex-cloud/chartkit/issues/30)) ([4f465de](https://github.com/yandex-cloud/chartkit/commit/4f465de3afdee721f96868d975f3aee647177f76))
|
|
151
|
+
- change error handling ([#29](https://github.com/yandex-cloud/chartkit/issues/29)) ([993958a](https://github.com/yandex-cloud/chartkit/commit/993958a68e1c4376e037bd006d6b19f013b58cfb))
|
|
163
152
|
|
|
164
153
|
### Bug Fixes
|
|
165
154
|
|
|
166
|
-
|
|
155
|
+
- remove react-dom from peer dependencies ([#26](https://github.com/yandex-cloud/chartkit/issues/26)) ([22b6525](https://github.com/yandex-cloud/chartkit/commit/22b6525c767104e56cc51cf5dee5340253f7c080))
|
|
167
156
|
|
|
168
157
|
## [0.4.0](https://github.com/yandex-cloud/chartkit/compare/v0.3.1...v0.4.0) (2022-07-18)
|
|
169
158
|
|
|
170
|
-
|
|
171
159
|
### Features
|
|
172
160
|
|
|
173
|
-
|
|
161
|
+
- add onError property ([#24](https://github.com/yandex-cloud/chartkit/issues/24)) ([0b51f19](https://github.com/yandex-cloud/chartkit/commit/0b51f195612cb80ab8e40b5d115eb7650f986888))
|
|
174
162
|
|
|
175
163
|
## [0.3.1](https://github.com/yandex-cloud/chartkit/compare/v0.3.0...v0.3.1) (2022-07-14)
|
|
176
164
|
|
|
177
|
-
|
|
178
165
|
### Bug Fixes
|
|
179
166
|
|
|
180
|
-
|
|
181
|
-
|
|
167
|
+
- add test for settings ([#21](https://github.com/yandex-cloud/chartkit/issues/21)) ([b848503](https://github.com/yandex-cloud/chartkit/commit/b8485032d9ab14edda0a8f193f9174e3a6c687bf))
|
|
168
|
+
- build task fixes ([#23](https://github.com/yandex-cloud/chartkit/issues/23)) ([2f13233](https://github.com/yandex-cloud/chartkit/commit/2f13233005d8fe7d10d496464ec3aed0a9ea5743))
|
|
182
169
|
|
|
183
170
|
## [0.3.0](https://github.com/yandex-cloud/chartkit/compare/v0.2.0...v0.3.0) (2022-07-13)
|
|
184
171
|
|
|
185
|
-
|
|
186
172
|
### Features
|
|
187
173
|
|
|
188
|
-
|
|
174
|
+
- add root types export ([#18](https://github.com/yandex-cloud/chartkit/issues/18)) ([06265a1](https://github.com/yandex-cloud/chartkit/commit/06265a10f518836ac63f2b847e73dd19b3e2e8ca))
|
|
189
175
|
|
|
190
176
|
## [0.2.0](https://github.com/yandex-cloud/chartkit/compare/v0.1.1...v0.2.0) (2022-07-11)
|
|
191
177
|
|
|
192
|
-
|
|
193
178
|
### Features
|
|
194
179
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
180
|
+
- add cn lib ([#10](https://github.com/yandex-cloud/chartkit/issues/10)) ([796bdda](https://github.com/yandex-cloud/chartkit/commit/796bdda22fbf69ea8fc37965486e358ea3779a7e))
|
|
181
|
+
- add i18n ([#13](https://github.com/yandex-cloud/chartkit/issues/13)) ([3f0204b](https://github.com/yandex-cloud/chartkit/commit/3f0204bb949aeb596632b3479d7e5ee130d91225))
|
|
182
|
+
- add reflow handler ([#15](https://github.com/yandex-cloud/chartkit/issues/15)) ([80210af](https://github.com/yandex-cloud/chartkit/commit/80210af775ca7476f107f6ecc2ae9983baa9a8e3))
|
|
183
|
+
- add yagr plugin types export ([#17](https://github.com/yandex-cloud/chartkit/issues/17)) ([6e4cf1d](https://github.com/yandex-cloud/chartkit/commit/6e4cf1dc5cc584a9bda99b39122f489ed35f90e2))
|
|
184
|
+
- change lib structure ([#7](https://github.com/yandex-cloud/chartkit/issues/7)) ([dfb6ed8](https://github.com/yandex-cloud/chartkit/commit/dfb6ed839fd49a13006e75bca77abfd43849653b))
|
|
201
185
|
|
|
202
186
|
### Bug Fixes
|
|
203
187
|
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
188
|
+
- change cn workflow ([#12](https://github.com/yandex-cloud/chartkit/issues/12)) ([aba5148](https://github.com/yandex-cloud/chartkit/commit/aba5148237aa0dd0bfd89744c77e30ebbcbcb90e))
|
|
189
|
+
- downgrade i18n to v0.5.0 ([#16](https://github.com/yandex-cloud/chartkit/issues/16)) ([454985a](https://github.com/yandex-cloud/chartkit/commit/454985a6c339775ebc0a96d77a20792b31b305c7))
|
|
190
|
+
- move all storybook decorators into one ([#14](https://github.com/yandex-cloud/chartkit/issues/14)) ([de1e8e9](https://github.com/yandex-cloud/chartkit/commit/de1e8e90325142e41ece8edc785119440b49fa0c))
|
|
207
191
|
|
|
208
192
|
### [0.1.1](https://www.github.com/yandex-cloud/ChartKit/compare/v0.1.0...v0.1.1) (2022-02-17)
|
|
209
193
|
|
|
210
|
-
|
|
211
194
|
### Bug Fixes
|
|
212
195
|
|
|
213
|
-
|
|
196
|
+
- add publishConfig ([5cfdfff](https://www.github.com/yandex-cloud/ChartKit/commit/5cfdfffbdcafb8baeb05338ef07dd3a602c51797))
|
|
214
197
|
|
|
215
198
|
## 0.1.0 (2022-02-17)
|
|
216
199
|
|
|
217
|
-
|
|
218
200
|
### Bug Fixes
|
|
219
201
|
|
|
220
|
-
|
|
221
|
-
|
|
202
|
+
- init ([2804dac](https://www.github.com/yandex-cloud/ChartKit/commit/2804dacfd0f11e15cda6a84ca22172bf2d74b532))
|
|
203
|
+
- init ([4b747d4](https://www.github.com/yandex-cloud/ChartKit/commit/4b747d409122fc4ae330040e75e273ee9a602bcf))
|
package/README.md
CHANGED
|
@@ -36,21 +36,21 @@ const data: YagrWidgetData = {
|
|
|
36
36
|
id: '0',
|
|
37
37
|
name: 'Serie 1',
|
|
38
38
|
color: '#6c59c2',
|
|
39
|
-
visible: true,
|
|
40
39
|
data: [25, 52, 89, 72, 39, 49, 82, 59, 36, 5],
|
|
41
40
|
},
|
|
42
41
|
{
|
|
43
42
|
id: '1',
|
|
44
43
|
name: 'Serie 2',
|
|
45
44
|
color: '#6e8188',
|
|
46
|
-
visible: true,
|
|
47
45
|
data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
|
|
48
46
|
},
|
|
49
47
|
],
|
|
50
48
|
},
|
|
51
49
|
libraryConfig: {
|
|
52
50
|
chart: {
|
|
53
|
-
|
|
51
|
+
series: {
|
|
52
|
+
type: 'line',
|
|
53
|
+
},
|
|
54
54
|
},
|
|
55
55
|
title: {
|
|
56
56
|
text: 'line: random 10 pts',
|
package/build/plugins/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { YagrPlugin } from './yagr';
|
|
2
|
-
export
|
|
2
|
+
export * from './yagr/types';
|
|
3
3
|
export { IndicatorPlugin } from './indicator';
|
|
4
4
|
export type { IndicatorWidgetData } from './indicator/types';
|
|
5
5
|
export { HighchartsPlugin } from './highcharts';
|
package/build/plugins/index.js
CHANGED
|
@@ -9,28 +9,30 @@ export const line10 = {
|
|
|
9
9
|
id: '0',
|
|
10
10
|
name: 'Serie 1',
|
|
11
11
|
color: '#6c59c2',
|
|
12
|
-
|
|
13
|
-
data: [25, 52, 89, 72, 39, 49, 82, 59, 36, 5],
|
|
12
|
+
data: [45, 52, 89, 72, 39, 49, 82, 59, 36, 5],
|
|
14
13
|
},
|
|
15
14
|
{
|
|
16
15
|
id: '1',
|
|
17
16
|
name: 'Serie 2',
|
|
18
17
|
color: '#6e8188',
|
|
19
|
-
visible: true,
|
|
20
18
|
data: [37, 6, 51, 10, 65, 35, 72, 0, 94, 54],
|
|
21
19
|
},
|
|
22
20
|
{
|
|
23
21
|
id: '2',
|
|
24
22
|
name: 'Serie 3',
|
|
25
23
|
color: '#e21576',
|
|
26
|
-
visible: true,
|
|
27
24
|
data: [26, 54, 15, 40, 43, 18, 65, 46, 51, 33],
|
|
28
25
|
},
|
|
29
26
|
],
|
|
30
27
|
},
|
|
31
28
|
libraryConfig: {
|
|
32
29
|
chart: {
|
|
33
|
-
|
|
30
|
+
series: {
|
|
31
|
+
type: 'line',
|
|
32
|
+
},
|
|
33
|
+
select: {
|
|
34
|
+
zoom: false,
|
|
35
|
+
},
|
|
34
36
|
},
|
|
35
37
|
title: {
|
|
36
38
|
text: 'line: random 10 pts',
|
|
@@ -51,14 +53,9 @@ export const line10 = {
|
|
|
51
53
|
style: 'solid 2px rgba(230, 2, 7, 0.3)',
|
|
52
54
|
},
|
|
53
55
|
},
|
|
54
|
-
settings: {
|
|
55
|
-
adaptive: true,
|
|
56
|
-
},
|
|
57
56
|
tooltip: {
|
|
58
|
-
|
|
59
|
-
boundClassName: '.wrapper',
|
|
57
|
+
show: true,
|
|
60
58
|
tracking: 'sticky',
|
|
61
|
-
className: 'chartkit-theme_common',
|
|
62
59
|
},
|
|
63
60
|
legend: {},
|
|
64
61
|
processing: {},
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { shapeYagrConfig } from '../renderer/utils';
|
|
2
|
+
const DATA = {
|
|
3
|
+
timeline: [1],
|
|
4
|
+
graphs: [{ data: [45] }],
|
|
5
|
+
};
|
|
6
|
+
describe('plugins/yagr/utils', () => {
|
|
7
|
+
describe('shapeYagrConfig > check chart property', () => {
|
|
8
|
+
test.each([
|
|
9
|
+
[{}, { appereance: { locale: 'en', theme: 'dark' } }],
|
|
10
|
+
[{ appereance: { locale: 'ru' } }, { appereance: { locale: 'ru', theme: 'dark' } }],
|
|
11
|
+
[{ appereance: { theme: 'light' } }, { appereance: { locale: 'en', theme: 'light' } }],
|
|
12
|
+
[
|
|
13
|
+
{ series: { type: 'dots' }, select: { zoom: false }, timeMultiplier: 1 },
|
|
14
|
+
{
|
|
15
|
+
appereance: { locale: 'en', theme: 'dark' },
|
|
16
|
+
series: { type: 'dots' },
|
|
17
|
+
select: { zoom: false },
|
|
18
|
+
timeMultiplier: 1,
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
])('(args: %j)', (chart, expected) => {
|
|
22
|
+
const config = shapeYagrConfig({ data: DATA, libraryConfig: { chart }, theme: 'dark' });
|
|
23
|
+
expect(config.chart).toEqual(expected);
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
});
|
|
@@ -1,179 +1,22 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import moment from 'moment';
|
|
3
|
-
import debounce from 'lodash/debounce';
|
|
4
2
|
import isEmpty from 'lodash/isEmpty';
|
|
5
|
-
import { useThemeType } from '@gravity-ui/uikit';
|
|
6
3
|
import YagrComponent from 'yagr/dist/react';
|
|
7
|
-
import { defaults, } from 'yagr';
|
|
8
4
|
import { i18n } from '../../../i18n';
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import { synchronizeTooltipTablesCellsWidth } from './
|
|
5
|
+
import { CHARTKIT_ERROR_CODE, ChartKitError } from '../../../libs';
|
|
6
|
+
import { useWidgetData } from './useWidgetData';
|
|
7
|
+
import { checkFocus, detectClickOutside, synchronizeTooltipTablesCellsWidth } from './utils';
|
|
12
8
|
import './polyfills';
|
|
13
9
|
import './YagrWidget.css';
|
|
14
|
-
const calcOption = (d) => {
|
|
15
|
-
return typeof d === 'object'
|
|
16
|
-
? Object.values(d).reduce((_, t) => {
|
|
17
|
-
return t;
|
|
18
|
-
})
|
|
19
|
-
: d;
|
|
20
|
-
};
|
|
21
|
-
/*
|
|
22
|
-
* Default tooltip renderer.
|
|
23
|
-
* Adapter between native Yagr tooltip config and ChartKit
|
|
24
|
-
* tooltip renderer.
|
|
25
|
-
*/
|
|
26
|
-
const renderTooltip = (data) => {
|
|
27
|
-
var _a, _b;
|
|
28
|
-
const cfg = data.yagr.config;
|
|
29
|
-
const timeMultiplier = ((_a = cfg.settings) === null || _a === void 0 ? void 0 : _a.timeMultiplier) || 1;
|
|
30
|
-
const locale = (_b = cfg.settings) === null || _b === void 0 ? void 0 : _b.locale;
|
|
31
|
-
const opts = data.options;
|
|
32
|
-
const { x, pinned } = data;
|
|
33
|
-
let sumTotal = 0;
|
|
34
|
-
const rows = Object.values(data.scales).reduce((acc, scale) => {
|
|
35
|
-
sumTotal += scale.sum || 0;
|
|
36
|
-
return acc.concat(scale.rows);
|
|
37
|
-
}, []);
|
|
38
|
-
const lines = rows.length;
|
|
39
|
-
const sum = calcOption(opts.sum);
|
|
40
|
-
const maxLines = calcOption(opts.maxLines);
|
|
41
|
-
const valueFormatter = calcOption(opts.value);
|
|
42
|
-
// eslint-disable-next-line no-nested-ternary
|
|
43
|
-
const hiddenRowsNumber = pinned
|
|
44
|
-
? undefined
|
|
45
|
-
: lines > maxLines
|
|
46
|
-
? Math.abs(maxLines - lines)
|
|
47
|
-
: undefined;
|
|
48
|
-
const hiddenRowsSum = hiddenRowsNumber
|
|
49
|
-
? valueFormatter(rows
|
|
50
|
-
.slice(-hiddenRowsNumber)
|
|
51
|
-
.reduce((sum, { originalValue }) => sum + (originalValue || 0), 0))
|
|
52
|
-
: undefined;
|
|
53
|
-
const tooltipFormatOptions = {
|
|
54
|
-
activeRowAlwaysFirstInTooltip: rows.length > 1,
|
|
55
|
-
tooltipHeader: moment(x / timeMultiplier).format('DD MMMM YYYY HH:mm:ss'),
|
|
56
|
-
shared: true,
|
|
57
|
-
lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: row.color, selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
|
|
58
|
-
withPercent: calcOption(opts.percent),
|
|
59
|
-
hiddenRowsNumber: hiddenRowsNumber,
|
|
60
|
-
hiddenRowsSum,
|
|
61
|
-
};
|
|
62
|
-
if (sum) {
|
|
63
|
-
tooltipFormatOptions.sum = valueFormatter(sumTotal);
|
|
64
|
-
}
|
|
65
|
-
return formatTooltip(tooltipFormatOptions, {
|
|
66
|
-
options: { locale },
|
|
67
|
-
lastVisibleRowIndex: pinned ? rows.length - 1 : maxLines - 1,
|
|
68
|
-
});
|
|
69
|
-
};
|
|
70
|
-
const getXAxisFormatter = (msm = 1) => (_, ticks) => {
|
|
71
|
-
const range = (ticks[ticks.length - 1] - ticks[0]) / msm;
|
|
72
|
-
return ticks.map((rawValue) => {
|
|
73
|
-
const d = moment(rawValue / msm);
|
|
74
|
-
if (d.hour() === 0 && d.minutes() === 0 && d.seconds() === 0) {
|
|
75
|
-
return d.format('DD.MM.YY');
|
|
76
|
-
}
|
|
77
|
-
return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');
|
|
78
|
-
});
|
|
79
|
-
};
|
|
80
10
|
const YagrWidget = React.forwardRef((props, forwardedRef) => {
|
|
81
|
-
|
|
11
|
+
const { id, data: { data }, onLoad, } = props;
|
|
82
12
|
const yagrRef = React.useRef(null);
|
|
83
|
-
const { data, libraryConfig } = props.data;
|
|
84
|
-
const { id, onLoad } = props;
|
|
85
|
-
const theme = useThemeType();
|
|
86
13
|
if (!data || isEmpty(data)) {
|
|
87
14
|
throw new ChartKitError({
|
|
88
15
|
code: CHARTKIT_ERROR_CODE.NO_DATA,
|
|
89
16
|
message: i18n('error', 'label_no-data'),
|
|
90
17
|
});
|
|
91
18
|
}
|
|
92
|
-
const
|
|
93
|
-
mouseMove: null,
|
|
94
|
-
mouseDown: null,
|
|
95
|
-
};
|
|
96
|
-
const checkFocus = (tooltip) => (event) => {
|
|
97
|
-
var _a, _b;
|
|
98
|
-
const yagr = (_a = yagrRef === null || yagrRef === void 0 ? void 0 : yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
|
|
99
|
-
if (!yagr) {
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
const target = event.target;
|
|
103
|
-
const seriesIdx = target && tooltip.contains(target) && target.tagName === 'TD'
|
|
104
|
-
? (_b = target.parentElement) === null || _b === void 0 ? void 0 : _b.dataset['seriesIdx']
|
|
105
|
-
: undefined;
|
|
106
|
-
const serie = seriesIdx ? yagr.uplot.series[Number(seriesIdx)] : null;
|
|
107
|
-
yagr.focus(serie ? serie.id : null, true);
|
|
108
|
-
};
|
|
109
|
-
const detectClickOutside = (tooltip, actions) => (event) => {
|
|
110
|
-
var _a, _b;
|
|
111
|
-
const yagr = (_a = yagrRef === null || yagrRef === void 0 ? void 0 : yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
|
|
112
|
-
if (!yagr) {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
const target = event.target;
|
|
116
|
-
if (target instanceof Element) {
|
|
117
|
-
const isClickInsideTooltip = target && tooltip.contains(target);
|
|
118
|
-
const isClickOnUplotOver = target && ((_b = yagr.root.querySelector('.u-over')) === null || _b === void 0 ? void 0 : _b.contains(target));
|
|
119
|
-
if (!isClickInsideTooltip && !isClickOnUplotOver) {
|
|
120
|
-
actions.pin(false);
|
|
121
|
-
actions.hide();
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
|
|
126
|
-
config.settings = Object.assign({ locale: settings.get('lang'), theme }, (config.settings || {}));
|
|
127
|
-
if (((_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.enabled) !== false) {
|
|
128
|
-
config.tooltip = config.tooltip || {};
|
|
129
|
-
config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || renderTooltip;
|
|
130
|
-
// "className" property prevent default yagr styles adding
|
|
131
|
-
config.tooltip.className = 'chartkit-yagr-tooltip';
|
|
132
|
-
config.tooltip.onStateChange = (tooltip, { action, actions }) => {
|
|
133
|
-
switch (action) {
|
|
134
|
-
case 'pin': {
|
|
135
|
-
handlers.mouseMove = checkFocus(tooltip);
|
|
136
|
-
handlers.mouseDown = detectClickOutside(tooltip, actions);
|
|
137
|
-
document.addEventListener('mousemove', handlers.mouseMove);
|
|
138
|
-
document.addEventListener('mousedown', handlers.mouseDown);
|
|
139
|
-
break;
|
|
140
|
-
}
|
|
141
|
-
case 'unpin': {
|
|
142
|
-
if (handlers.mouseMove) {
|
|
143
|
-
document.removeEventListener('mousemove', handlers.mouseMove);
|
|
144
|
-
handlers.mouseMove = null;
|
|
145
|
-
}
|
|
146
|
-
if (handlers.mouseDown) {
|
|
147
|
-
document.removeEventListener('mousedown', handlers.mouseDown);
|
|
148
|
-
handlers.mouseDown = null;
|
|
149
|
-
}
|
|
150
|
-
break;
|
|
151
|
-
}
|
|
152
|
-
case 'render': {
|
|
153
|
-
synchronizeTooltipTablesCellsWidth(tooltip);
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
|
-
config.axes = config.axes || {};
|
|
159
|
-
const xAxis = config.axes[defaults.DEFAULT_X_SCALE];
|
|
160
|
-
if (xAxis && !xAxis.values) {
|
|
161
|
-
xAxis.values = getXAxisFormatter(config.settings.timeMultiplier);
|
|
162
|
-
}
|
|
163
|
-
if (!xAxis) {
|
|
164
|
-
config.axes[defaults.DEFAULT_X_SCALE] = {
|
|
165
|
-
values: getXAxisFormatter(config.settings.timeMultiplier),
|
|
166
|
-
};
|
|
167
|
-
}
|
|
168
|
-
const debugFileName = props.data.sources
|
|
169
|
-
? Object.values(props.data.sources)
|
|
170
|
-
.map((source) => {
|
|
171
|
-
var _a;
|
|
172
|
-
return (_a = source === null || source === void 0 ? void 0 : source.data) === null || _a === void 0 ? void 0 : _a.program;
|
|
173
|
-
})
|
|
174
|
-
.filter(Boolean)
|
|
175
|
-
.join(', ') || id
|
|
176
|
-
: id;
|
|
19
|
+
const { config, debug } = useWidgetData(Object.assign(Object.assign({}, props.data), { id }));
|
|
177
20
|
const handleChartLoading = React.useCallback((chart, { renderTime }) => {
|
|
178
21
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(Object.assign(Object.assign({}, data), { widget: chart, widgetRendering: renderTime }));
|
|
179
22
|
}, [onLoad, data]);
|
|
@@ -193,13 +36,36 @@ const YagrWidget = React.forwardRef((props, forwardedRef) => {
|
|
|
193
36
|
onWindowResize();
|
|
194
37
|
},
|
|
195
38
|
}), [onWindowResize]);
|
|
196
|
-
React.
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
39
|
+
React.useLayoutEffect(() => {
|
|
40
|
+
var _a, _b, _c, _d;
|
|
41
|
+
const yagr = (_a = yagrRef.current) === null || _a === void 0 ? void 0 : _a.chart;
|
|
42
|
+
if (!yagr) {
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const handlers = {
|
|
46
|
+
mouseMove: null,
|
|
47
|
+
mouseDown: null,
|
|
201
48
|
};
|
|
202
|
-
|
|
203
|
-
|
|
49
|
+
(_b = yagr.plugins.tooltip) === null || _b === void 0 ? void 0 : _b.on('render', (tooltip) => {
|
|
50
|
+
synchronizeTooltipTablesCellsWidth(tooltip);
|
|
51
|
+
});
|
|
52
|
+
(_c = yagr.plugins.tooltip) === null || _c === void 0 ? void 0 : _c.on('pin', (tooltip, { actions }) => {
|
|
53
|
+
handlers.mouseMove = checkFocus({ tooltip, yagr });
|
|
54
|
+
handlers.mouseDown = detectClickOutside({ tooltip, actions, yagr });
|
|
55
|
+
document.addEventListener('mousemove', handlers.mouseMove);
|
|
56
|
+
document.addEventListener('mousedown', handlers.mouseDown);
|
|
57
|
+
});
|
|
58
|
+
(_d = yagr.plugins.tooltip) === null || _d === void 0 ? void 0 : _d.on('unpin', () => {
|
|
59
|
+
if (handlers.mouseMove) {
|
|
60
|
+
document.removeEventListener('mousemove', handlers.mouseMove);
|
|
61
|
+
handlers.mouseMove = null;
|
|
62
|
+
}
|
|
63
|
+
if (handlers.mouseDown) {
|
|
64
|
+
document.removeEventListener('mousedown', handlers.mouseDown);
|
|
65
|
+
handlers.mouseDown = null;
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
return (React.createElement(YagrComponent, { ref: yagrRef, id: id, config: config, debug: debug, onChartLoad: handleChartLoading }));
|
|
204
70
|
});
|
|
205
71
|
export default YagrWidget;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { renderTooltip } from './renderTooltip';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { renderTooltip } from './renderTooltip';
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import moment from 'moment';
|
|
2
|
+
import { formatTooltip } from './tooltip';
|
|
3
|
+
const calcOption = (d) => {
|
|
4
|
+
return typeof d === 'object'
|
|
5
|
+
? Object.values(d).reduce((_, t) => {
|
|
6
|
+
return t;
|
|
7
|
+
})
|
|
8
|
+
: d;
|
|
9
|
+
};
|
|
10
|
+
/*
|
|
11
|
+
* Default tooltip renderer.
|
|
12
|
+
* Adapter between native Yagr tooltip config and ChartKit
|
|
13
|
+
* tooltip renderer.
|
|
14
|
+
*/
|
|
15
|
+
export const renderTooltip = (data) => {
|
|
16
|
+
const cfg = data.yagr.config;
|
|
17
|
+
const timeMultiplier = cfg.chart.timeMultiplier || 1;
|
|
18
|
+
const opts = data.options;
|
|
19
|
+
const { x, pinned } = data;
|
|
20
|
+
let sumTotal = 0;
|
|
21
|
+
const rows = Object.values(data.scales).reduce((acc, scale) => {
|
|
22
|
+
sumTotal += scale.sum || 0;
|
|
23
|
+
return acc.concat(scale.rows);
|
|
24
|
+
}, []);
|
|
25
|
+
const lines = rows.length;
|
|
26
|
+
const sum = calcOption(opts.sum);
|
|
27
|
+
const maxLines = calcOption(opts.maxLines);
|
|
28
|
+
const valueFormatter = calcOption(opts.value);
|
|
29
|
+
// eslint-disable-next-line no-nested-ternary
|
|
30
|
+
const hiddenRowsNumber = pinned
|
|
31
|
+
? undefined
|
|
32
|
+
: lines > maxLines
|
|
33
|
+
? Math.abs(maxLines - lines)
|
|
34
|
+
: undefined;
|
|
35
|
+
const hiddenRowsSum = hiddenRowsNumber
|
|
36
|
+
? valueFormatter(rows
|
|
37
|
+
.slice(-hiddenRowsNumber)
|
|
38
|
+
.reduce((acc, { originalValue }) => acc + (originalValue || 0), 0))
|
|
39
|
+
: undefined;
|
|
40
|
+
const tooltipFormatOptions = {
|
|
41
|
+
activeRowAlwaysFirstInTooltip: rows.length > 1,
|
|
42
|
+
tooltipHeader: moment(x / timeMultiplier).format('DD MMMM YYYY HH:mm:ss'),
|
|
43
|
+
shared: true,
|
|
44
|
+
lines: rows.map((row, i) => (Object.assign(Object.assign({}, row), { seriesName: row.name || 'Serie ' + (i + 1), seriesColor: row.color, selectedSeries: row.active, seriesIdx: row.seriesIdx, percentValue: typeof row.transformed === 'number' ? row.transformed.toFixed(1) : '' }))),
|
|
45
|
+
withPercent: calcOption(opts.percent),
|
|
46
|
+
hiddenRowsNumber: hiddenRowsNumber,
|
|
47
|
+
hiddenRowsSum,
|
|
48
|
+
};
|
|
49
|
+
if (sum) {
|
|
50
|
+
tooltipFormatOptions.sum = valueFormatter(sumTotal);
|
|
51
|
+
}
|
|
52
|
+
return formatTooltip(tooltipFormatOptions, {
|
|
53
|
+
lastVisibleRowIndex: pinned ? rows.length - 1 : maxLines - 1,
|
|
54
|
+
});
|
|
55
|
+
};
|
|
@@ -1,141 +1,3 @@
|
|
|
1
|
+
import type { TooltipData, TooltipExtraData } from './types';
|
|
1
2
|
import './tooltip.css';
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const SERIES_IDX_DATA_ATTRIBUTE = "data-series-idx";
|
|
4
|
-
export declare const TOOLTIP_CONTAINER_CLASS_NAME = "_tooltip";
|
|
5
|
-
export declare const TOOLTIP_ROW_NAME_CLASS_NANE = "_tooltip-rows__name-td";
|
|
6
|
-
export declare const TOOLTIP_ROW_CLASS_NAME = "_tooltip-row";
|
|
7
|
-
export declare const TOOLTIP_HEADER_CLASS_NAME = "_tooltip-header";
|
|
8
|
-
export declare const TOOLTIP_LIST_CLASS_NAME = "_tooltip-list";
|
|
9
|
-
export declare const TOOLTIP_FOOTER_CLASS_NAME = "_tooltip-footer";
|
|
10
|
-
declare type Tooltip = any;
|
|
11
|
-
export interface TooltipData {
|
|
12
|
-
/**
|
|
13
|
-
* Массив строк выводящихся в тултипе (см. TooltipLine)
|
|
14
|
-
*/
|
|
15
|
-
lines: Array<TooltipLine>;
|
|
16
|
-
/**
|
|
17
|
-
* массив комментариев (задаются в диалоге комментариев)
|
|
18
|
-
*/
|
|
19
|
-
xComments?: Array<{
|
|
20
|
-
/**
|
|
21
|
-
* текст комментария
|
|
22
|
-
*/
|
|
23
|
-
text: string;
|
|
24
|
-
/**
|
|
25
|
-
* цвет отображающийся над комментарием
|
|
26
|
-
*/
|
|
27
|
-
color: string;
|
|
28
|
-
}>;
|
|
29
|
-
/**
|
|
30
|
-
* текст комментария (задаётся через manageTooltipConfig)
|
|
31
|
-
*/
|
|
32
|
-
commentDateText?: string;
|
|
33
|
-
/**
|
|
34
|
-
* флаг, указывающий что нужно всегда дублировать активную строку выводя её поверх основного списка (дефолтное
|
|
35
|
-
* поведение - активная строка выводится поверх основного списка только если "не поместилась" в тултип)
|
|
36
|
-
*/
|
|
37
|
-
activeRowAlwaysFirstInTooltip?: boolean;
|
|
38
|
-
/**
|
|
39
|
-
* флаг, указыващий что чарт отображается в режиме split tooltip
|
|
40
|
-
*/
|
|
41
|
-
splitTooltip?: boolean;
|
|
42
|
-
/**
|
|
43
|
-
* текст хедера тултипа
|
|
44
|
-
*/
|
|
45
|
-
tooltipHeader?: string;
|
|
46
|
-
/**
|
|
47
|
-
* флаг, указывающий, что в тултипе выводится колонка с названием строки
|
|
48
|
-
*/
|
|
49
|
-
shared?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* флаг, указывающий, что в тултипе выводится колонка с процентным значением
|
|
52
|
-
*/
|
|
53
|
-
withPercent?: boolean;
|
|
54
|
-
/**
|
|
55
|
-
* флаг, указывающий, что в тултипе выводится колонка с diff-ом
|
|
56
|
-
*/
|
|
57
|
-
useCompareFrom?: boolean;
|
|
58
|
-
/**
|
|
59
|
-
* флаг, указывающий, что в тултипе выводится блок с информацией о праздничном дне
|
|
60
|
-
*/
|
|
61
|
-
holiday?: boolean;
|
|
62
|
-
/**
|
|
63
|
-
* название праздничного дня
|
|
64
|
-
*/
|
|
65
|
-
holidayText?: string;
|
|
66
|
-
/**
|
|
67
|
-
* регион для которого актуален праздничный день
|
|
68
|
-
*/
|
|
69
|
-
region?: string;
|
|
70
|
-
/**
|
|
71
|
-
* сумма значений выводящихся в тултипе строк
|
|
72
|
-
*/
|
|
73
|
-
sum?: number | string;
|
|
74
|
-
/**
|
|
75
|
-
* количество скрытых строк "не поместившихся" в тултип
|
|
76
|
-
*/
|
|
77
|
-
hiddenRowsNumber: number;
|
|
78
|
-
/**
|
|
79
|
-
* сумма значений скрытых ("не поместившихся" в тултип) строк
|
|
80
|
-
*/
|
|
81
|
-
hiddenRowsSum?: number | string;
|
|
82
|
-
}
|
|
83
|
-
export interface TooltipLine {
|
|
84
|
-
/**
|
|
85
|
-
* цвет выводящийся в соответсвующей ячейке
|
|
86
|
-
*/
|
|
87
|
-
seriesColor: string;
|
|
88
|
-
/**
|
|
89
|
-
* название измерения выводящееся в соответсвующей ячейке
|
|
90
|
-
*/
|
|
91
|
-
seriesName: string;
|
|
92
|
-
/**
|
|
93
|
-
* индекс линии
|
|
94
|
-
*/
|
|
95
|
-
seriesIdx?: number;
|
|
96
|
-
/**
|
|
97
|
-
* флаг, указывающий, должно ли отображаться название строки
|
|
98
|
-
*/
|
|
99
|
-
hideSeriesName?: boolean;
|
|
100
|
-
/**
|
|
101
|
-
* процентное значение выводящееся в соответвующей ячейке
|
|
102
|
-
*/
|
|
103
|
-
percentValue?: number | string;
|
|
104
|
-
/**
|
|
105
|
-
* значение diff-а выводящееся в соответвующей ячейке
|
|
106
|
-
*/
|
|
107
|
-
diff?: string;
|
|
108
|
-
/**
|
|
109
|
-
* отформатированное числовое значение для текущего измерения выводящееся в соответствующей ячейке
|
|
110
|
-
*/
|
|
111
|
-
value: string;
|
|
112
|
-
/**
|
|
113
|
-
* Комментарий к строке (отображается под соответствующей строкой), задаётся через manageTooltipConfig
|
|
114
|
-
*/
|
|
115
|
-
commentText?: string;
|
|
116
|
-
/**
|
|
117
|
-
* Комментарий к строке (отображается под соответствующей строкой), задаётся через диалог комментариев
|
|
118
|
-
*/
|
|
119
|
-
xyCommentText?: string;
|
|
120
|
-
/**
|
|
121
|
-
* флаг, указывающий, что данная строка активна
|
|
122
|
-
*/
|
|
123
|
-
selectedSeries?: boolean;
|
|
124
|
-
/**
|
|
125
|
-
* кастомный рендер соответсвующей строки (строка с текстом либо html разметкой)
|
|
126
|
-
*/
|
|
127
|
-
customRender?: string;
|
|
128
|
-
/**
|
|
129
|
-
* объект, где ключи - индексы ячеек, контент которых должен быть заменён, значения - функции возвращающие
|
|
130
|
-
* строку (с текстом либо html разметкой) которая будет вставлена в ячейку на соответствующем индексе
|
|
131
|
-
*/
|
|
132
|
-
replaceCellAt?: Record<number, (line: TooltipLine) => string>;
|
|
133
|
-
/**
|
|
134
|
-
* объект, где ключи - индексы на которые будут вставлены новые ячейки (ячейка ранее располагавшаяся на этом
|
|
135
|
-
* индексе и последующие за ней будут сдвинуты), значения - функции возвращающие строку (с текстом либо html
|
|
136
|
-
* разметкой) которая будет вставлена в добавившуюся ячейку
|
|
137
|
-
*/
|
|
138
|
-
insertCellAt?: Record<number, (line: TooltipLine) => string>;
|
|
139
|
-
}
|
|
140
|
-
export declare const formatTooltip: (data: TooltipData, tooltip: Tooltip) => string;
|
|
141
|
-
export {};
|
|
3
|
+
export declare const formatTooltip: (data: TooltipData, tooltip: TooltipExtraData) => string;
|
|
@@ -1,14 +1,15 @@
|
|
|
1
|
+
/* eslint complexity: 0 */
|
|
1
2
|
import { i18n } from '../../../../i18n';
|
|
2
3
|
import { escapeHTML } from './helpers/escapeHTML';
|
|
3
4
|
import './tooltip.css';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
const SERIES_NAME_DATA_ATTRIBUTE = 'data-series-name';
|
|
6
|
+
const SERIES_IDX_DATA_ATTRIBUTE = 'data-series-idx';
|
|
7
|
+
const TOOLTIP_CONTAINER_CLASS_NAME = '_tooltip';
|
|
8
|
+
const TOOLTIP_ROW_NAME_CLASS_NANE = '_tooltip-rows__name-td';
|
|
9
|
+
const TOOLTIP_ROW_CLASS_NAME = '_tooltip-row';
|
|
10
|
+
const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
|
|
11
|
+
const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
|
|
12
|
+
const TOOLTIP_FOOTER_CLASS_NAME = '_tooltip-footer';
|
|
12
13
|
const renderEmptyCell = () => '<td />';
|
|
13
14
|
const renderColorCell = (line) => `<td class="_tooltip-rows__bubble-td">
|
|
14
15
|
<div class="_tooltip-rows__bubble-div" style="background-color:${line.seriesColor};"></div>
|
|
@@ -154,7 +155,7 @@ export const formatTooltip = (data, tooltip) => {
|
|
|
154
155
|
tooltipContainerClassNames += ` ${TOOLTIP_CONTAINER_CLASS_NAME}_split-tooltip`;
|
|
155
156
|
}
|
|
156
157
|
return `
|
|
157
|
-
<div class="${tooltipContainerClassNames}" style="
|
|
158
|
+
<div class="${tooltipContainerClassNames}" style="max-height: ${splitTooltip ? 'auto' : `${windowHeight}px`}">
|
|
158
159
|
${data.tooltipHeader
|
|
159
160
|
? `<div title="${(document.createRange().createContextualFragment(data.tooltipHeader).textContent ||
|
|
160
161
|
'').trim()}" class="_tooltip-date">
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
export declare type TooltipData = {
|
|
2
|
+
/** Tooltip lines data */
|
|
3
|
+
lines: Array<TooltipLine>;
|
|
4
|
+
/** Tooltip comments */
|
|
5
|
+
xComments?: Array<{
|
|
6
|
+
text: string;
|
|
7
|
+
color: string;
|
|
8
|
+
}>;
|
|
9
|
+
commentDateText?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Indicating that active line duplicated by displaying it on top of the main list
|
|
12
|
+
* default behavior - the active line is displayed on top of the main list only if it"does not fit" in the tooltip
|
|
13
|
+
*/
|
|
14
|
+
activeRowAlwaysFirstInTooltip?: boolean;
|
|
15
|
+
/** Indicating that the chart is displayed in "split tooltip" mode */
|
|
16
|
+
splitTooltip?: boolean;
|
|
17
|
+
/** Text of the header of the tooltip */
|
|
18
|
+
tooltipHeader?: string;
|
|
19
|
+
/** Indicating that a column with the line name is displayed in the tooltip */
|
|
20
|
+
shared?: boolean;
|
|
21
|
+
/** Indicating that a column with a percentage value is displayed in the tooltip */
|
|
22
|
+
withPercent?: boolean;
|
|
23
|
+
/** Indicating that a column with a diff is displayed in the tooltip */
|
|
24
|
+
useCompareFrom?: boolean;
|
|
25
|
+
/** Indicating that the tooltip displays a block with information about the holiday */
|
|
26
|
+
holiday?: boolean;
|
|
27
|
+
/** Name of the holiday */
|
|
28
|
+
holidayText?: string;
|
|
29
|
+
/** Region for which the holiday is relevant */
|
|
30
|
+
region?: string;
|
|
31
|
+
/** Sum of the values of the rows displayed in the tooltip */
|
|
32
|
+
sum?: number | string;
|
|
33
|
+
/** Number of hidden lines "not fit" in the tooltip */
|
|
34
|
+
hiddenRowsNumber: number;
|
|
35
|
+
/** Sum of the values of the hidden ("not fit" in the tooltip) rows */
|
|
36
|
+
hiddenRowsSum?: number | string;
|
|
37
|
+
};
|
|
38
|
+
export declare type TooltipExtraData = {
|
|
39
|
+
lastVisibleRowIndex: number;
|
|
40
|
+
};
|
|
41
|
+
export declare type TooltipLine = {
|
|
42
|
+
/** Color displayed in a separate cell */
|
|
43
|
+
seriesColor: string;
|
|
44
|
+
/** Series name */
|
|
45
|
+
seriesName: string;
|
|
46
|
+
/** Series index */
|
|
47
|
+
seriesIdx?: number;
|
|
48
|
+
/** Indicating whether the series name should be displayed */
|
|
49
|
+
hideSeriesName?: boolean;
|
|
50
|
+
/** Percentage value displayed in a separate cell */
|
|
51
|
+
percentValue?: number | string;
|
|
52
|
+
/** Diff value displayed in the separate cell */
|
|
53
|
+
diff?: string;
|
|
54
|
+
/** Formatted numeric value for the current series displayed in a separate cell */
|
|
55
|
+
value: string;
|
|
56
|
+
/** Comment to the line (displayed under the corresponding line), set via manageTooltipConfig */
|
|
57
|
+
commentText?: string;
|
|
58
|
+
/** Comment to the line (displayed under the corresponding line) */
|
|
59
|
+
xyCommentText?: string;
|
|
60
|
+
/** Indicating that line is active */
|
|
61
|
+
selectedSeries?: boolean;
|
|
62
|
+
/** Custom renderer of the line (a string with text or html markup) */
|
|
63
|
+
customRender?: string;
|
|
64
|
+
replaceCellAt?: Record<number, (line: TooltipLine) => string>;
|
|
65
|
+
insertCellAt?: Record<number, (line: TooltipLine) => string>;
|
|
66
|
+
};
|
|
67
|
+
export declare type RowRenderingConfig = {
|
|
68
|
+
cellsRenderers: Array<(line: TooltipLine) => string>;
|
|
69
|
+
isSelectedLine?: boolean;
|
|
70
|
+
allowComment?: boolean;
|
|
71
|
+
withDarkBackground?: boolean;
|
|
72
|
+
isSingleLine?: boolean;
|
|
73
|
+
rowIndex?: number;
|
|
74
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { YagrChartProps } from 'yagr/dist/react';
|
|
2
|
+
import type { YagrWidgetData, MinimalValidConfig } from '../types';
|
|
3
|
+
export declare const useWidgetData: (args: YagrWidgetData & {
|
|
4
|
+
id: string;
|
|
5
|
+
}) => {
|
|
6
|
+
config: MinimalValidConfig;
|
|
7
|
+
debug: YagrChartProps['debug'];
|
|
8
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useThemeType } from '@gravity-ui/uikit';
|
|
3
|
+
import { shapeYagrConfig } from './utils';
|
|
4
|
+
export const useWidgetData = (args) => {
|
|
5
|
+
const { id, data, sources, libraryConfig } = args;
|
|
6
|
+
const theme = useThemeType();
|
|
7
|
+
const config = React.useMemo(() => shapeYagrConfig({ data, libraryConfig, theme }), [data, libraryConfig, theme]);
|
|
8
|
+
const debug = React.useMemo(() => {
|
|
9
|
+
const filename = sources
|
|
10
|
+
? Object.values(sources)
|
|
11
|
+
.map((source) => {
|
|
12
|
+
var _a;
|
|
13
|
+
return (_a = source === null || source === void 0 ? void 0 : source.data) === null || _a === void 0 ? void 0 : _a.program;
|
|
14
|
+
})
|
|
15
|
+
.filter(Boolean)
|
|
16
|
+
.join(', ') || id
|
|
17
|
+
: id;
|
|
18
|
+
return { filename };
|
|
19
|
+
}, [id, sources]);
|
|
20
|
+
return { config, debug };
|
|
21
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { Yagr, YagrWidgetData, YagrTheme, MinimalValidConfig } from '../types';
|
|
2
|
+
declare type ShapeYagrConfigArgs = {
|
|
3
|
+
data: YagrWidgetData['data'];
|
|
4
|
+
libraryConfig: YagrWidgetData['libraryConfig'];
|
|
5
|
+
theme: YagrTheme;
|
|
6
|
+
};
|
|
7
|
+
export declare const synchronizeTooltipTablesCellsWidth: (tooltipContainer: HTMLElement) => void;
|
|
8
|
+
export declare const checkFocus: (args: {
|
|
9
|
+
tooltip: HTMLElement;
|
|
10
|
+
yagr?: Yagr;
|
|
11
|
+
}) => (event: MouseEvent) => void;
|
|
12
|
+
export declare const detectClickOutside: (args: {
|
|
13
|
+
tooltip: HTMLElement;
|
|
14
|
+
actions: {
|
|
15
|
+
pin: (state: boolean) => void;
|
|
16
|
+
hide: () => void;
|
|
17
|
+
};
|
|
18
|
+
yagr?: Yagr<MinimalValidConfig> | undefined;
|
|
19
|
+
}) => (event: MouseEvent) => void;
|
|
20
|
+
export declare const shapeYagrConfig: (args: ShapeYagrConfigArgs) => MinimalValidConfig;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
import moment from 'moment';
|
|
2
|
+
import merge from 'lodash/merge';
|
|
3
|
+
import { defaults } from 'yagr';
|
|
4
|
+
import { settings } from '../../../libs';
|
|
5
|
+
import { renderTooltip } from './tooltip';
|
|
6
|
+
const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
|
|
7
|
+
const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
|
|
8
|
+
export const synchronizeTooltipTablesCellsWidth = (tooltipContainer) => {
|
|
9
|
+
const tHeadNode = tooltipContainer.querySelector(`.${TOOLTIP_HEADER_CLASS_NAME}`);
|
|
10
|
+
const tBodyNode = tooltipContainer.querySelector(`.${TOOLTIP_LIST_CLASS_NAME}`);
|
|
11
|
+
if (!tHeadNode || !tBodyNode || !tHeadNode.children.length) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
const tHeadNodeFirstRow = tHeadNode.children[0];
|
|
15
|
+
for (let j = 0; j < tHeadNodeFirstRow.children.length; j++) {
|
|
16
|
+
const cell = tHeadNodeFirstRow.children[j];
|
|
17
|
+
cell.removeAttribute('style');
|
|
18
|
+
if ((tBodyNode === null || tBodyNode === void 0 ? void 0 : tBodyNode.children.length) === 1) {
|
|
19
|
+
cell.innerHTML = ' ';
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
const tBodyNodeFirstRow = tBodyNode.children[0];
|
|
23
|
+
for (let j = 0; j < tBodyNodeFirstRow.children.length; j++) {
|
|
24
|
+
const cell = tBodyNodeFirstRow.children[j];
|
|
25
|
+
cell.removeAttribute('style');
|
|
26
|
+
}
|
|
27
|
+
const tHeadRowsWidth = tHeadNode.children[0].getBoundingClientRect().width;
|
|
28
|
+
const tBodyRowsWidth = tBodyNode.children[0].getBoundingClientRect().width;
|
|
29
|
+
const nodeWithWidesRows = tHeadRowsWidth > tBodyRowsWidth ? tHeadNode : tBodyNode;
|
|
30
|
+
const nodeWithWidesRowsCellsWidth = Array.prototype.reduce.call(nodeWithWidesRows.children[0].children, (accum, cellNode) => {
|
|
31
|
+
accum.push(cellNode.getBoundingClientRect().width);
|
|
32
|
+
return accum;
|
|
33
|
+
}, []);
|
|
34
|
+
const nodeToSetCellsWidth = nodeWithWidesRows === tHeadNode ? tBodyNode : tHeadNode;
|
|
35
|
+
const nodeToSetCellsWidthFirstRow = nodeToSetCellsWidth.children[0];
|
|
36
|
+
for (let j = 0; j < nodeToSetCellsWidthFirstRow.children.length; j++) {
|
|
37
|
+
const cell = nodeToSetCellsWidthFirstRow.children[j];
|
|
38
|
+
cell.setAttribute('style', `width: ${nodeWithWidesRowsCellsWidth[j]}px`);
|
|
39
|
+
}
|
|
40
|
+
if (tBodyNode.children.length === 1) {
|
|
41
|
+
for (const cell of tHeadNodeFirstRow.children) {
|
|
42
|
+
cell.innerHTML = '';
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
export const checkFocus = (args) => (event) => {
|
|
47
|
+
var _a;
|
|
48
|
+
const { tooltip, yagr } = args;
|
|
49
|
+
if (!yagr) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
const target = event.target;
|
|
53
|
+
const seriesIdx = target && tooltip.contains(target) && target.tagName === 'TD'
|
|
54
|
+
? (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.dataset['seriesIdx']
|
|
55
|
+
: undefined;
|
|
56
|
+
const serie = seriesIdx ? yagr.uplot.series[Number(seriesIdx)] : null;
|
|
57
|
+
yagr.setFocus(serie ? serie.id : null, true);
|
|
58
|
+
};
|
|
59
|
+
export const detectClickOutside = (args) => (event) => {
|
|
60
|
+
var _a;
|
|
61
|
+
const { tooltip, actions, yagr } = args;
|
|
62
|
+
if (!yagr) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
const target = event.target;
|
|
66
|
+
if (target instanceof Element) {
|
|
67
|
+
const isClickInsideTooltip = target && tooltip.contains(target);
|
|
68
|
+
const isClickOnUplotOver = target && ((_a = yagr.root.querySelector('.u-over')) === null || _a === void 0 ? void 0 : _a.contains(target));
|
|
69
|
+
if (!isClickInsideTooltip && !isClickOnUplotOver) {
|
|
70
|
+
actions.pin(false);
|
|
71
|
+
actions.hide();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
const getXAxisFormatter = (msm = 1) => (_, ticks) => {
|
|
76
|
+
const range = (ticks[ticks.length - 1] - ticks[0]) / msm;
|
|
77
|
+
return ticks.map((rawValue) => {
|
|
78
|
+
const d = moment(rawValue / msm);
|
|
79
|
+
if (d.hour() === 0 && d.minutes() === 0 && d.seconds() === 0) {
|
|
80
|
+
return d.format('DD.MM.YY');
|
|
81
|
+
}
|
|
82
|
+
return d.format(range < 300 ? 'HH:mm:ss' : 'HH:mm');
|
|
83
|
+
});
|
|
84
|
+
};
|
|
85
|
+
export const shapeYagrConfig = (args) => {
|
|
86
|
+
var _a, _b;
|
|
87
|
+
const { data, libraryConfig, theme } = args;
|
|
88
|
+
const config = Object.assign(Object.assign({}, libraryConfig), { timeline: data.timeline, series: data.graphs });
|
|
89
|
+
const chart = {
|
|
90
|
+
appereance: {
|
|
91
|
+
locale: settings.get('lang'),
|
|
92
|
+
theme,
|
|
93
|
+
},
|
|
94
|
+
};
|
|
95
|
+
merge(chart, config.chart);
|
|
96
|
+
config.chart = chart;
|
|
97
|
+
if ((_a = config.tooltip) === null || _a === void 0 ? void 0 : _a.show) {
|
|
98
|
+
config.tooltip = config.tooltip || {};
|
|
99
|
+
config.tooltip.render = ((_b = config.tooltip) === null || _b === void 0 ? void 0 : _b.render) || renderTooltip;
|
|
100
|
+
if (!config.tooltip.className) {
|
|
101
|
+
// "className" property prevent default yagr styles adding
|
|
102
|
+
config.tooltip.className = 'chartkit-yagr-tooltip';
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
config.axes = config.axes || {};
|
|
106
|
+
const xAxis = config.axes[defaults.DEFAULT_X_SCALE];
|
|
107
|
+
if (xAxis && !xAxis.values) {
|
|
108
|
+
xAxis.values = getXAxisFormatter(config.chart.timeMultiplier);
|
|
109
|
+
}
|
|
110
|
+
if (!xAxis) {
|
|
111
|
+
config.axes[defaults.DEFAULT_X_SCALE] = {
|
|
112
|
+
values: getXAxisFormatter(config.chart.timeMultiplier),
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
return config;
|
|
116
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export
|
|
1
|
+
import type { RawSerieData, YagrConfig } from 'yagr';
|
|
2
|
+
export type { default as Yagr } from 'yagr';
|
|
3
|
+
export * from 'yagr/dist/types';
|
|
3
4
|
export declare type YagrWidgetData = {
|
|
4
5
|
data: {
|
|
5
6
|
graphs: RawSerieData[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from 'yagr/dist/types';
|
package/build/types/widget.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import type Yagr from 'yagr';
|
|
2
|
-
import type { YagrWidgetData } from '../plugins/yagr/types';
|
|
1
|
+
import type { Yagr, YagrWidgetData } from '../plugins/yagr/types';
|
|
3
2
|
import type { IndicatorWidgetData } from '../plugins/indicator/types';
|
|
4
3
|
import type { Highcharts, HighchartsWidgetData, StringParams } from '../plugins/highcharts/types';
|
|
5
4
|
export interface ChartKitWidget {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/chartkit",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "React component used to render charts based on any sources you need",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": "git@github.com:gravity-ui/ChartKit.git",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"highcharts-react-official": "^3.0.0",
|
|
19
19
|
"lodash": "^4.17.21",
|
|
20
20
|
"react-split-pane": "^0.1.92",
|
|
21
|
-
"yagr": "
|
|
21
|
+
"yagr": "^2.0.1"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@gravity-ui/eslint-config": "^1.0.2",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function synchronizeTooltipTablesCellsWidth(tooltipContainer: any): false | undefined;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
const TOOLTIP_HEADER_CLASS_NAME = '_tooltip-header';
|
|
2
|
-
const TOOLTIP_LIST_CLASS_NAME = '_tooltip-list';
|
|
3
|
-
// @ts-ignore
|
|
4
|
-
export function synchronizeTooltipTablesCellsWidth(tooltipContainer) {
|
|
5
|
-
const tHeadNode = tooltipContainer.querySelector(`.${TOOLTIP_HEADER_CLASS_NAME}`);
|
|
6
|
-
const tBodyNode = tooltipContainer.querySelector(`.${TOOLTIP_LIST_CLASS_NAME}`);
|
|
7
|
-
if (!tHeadNode || !tHeadNode.children.length) {
|
|
8
|
-
return false;
|
|
9
|
-
}
|
|
10
|
-
const tHeadNodeFirstRow = tHeadNode.children[0];
|
|
11
|
-
for (let j = 0; j < tHeadNodeFirstRow.children.length; j++) {
|
|
12
|
-
const cell = tHeadNodeFirstRow.children[j];
|
|
13
|
-
cell.removeAttribute('style');
|
|
14
|
-
if (tBodyNode.children.length === 1) {
|
|
15
|
-
cell.innerHTML = ' ';
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
const tBodyNodeFirstRow = tBodyNode.children[0];
|
|
19
|
-
for (let j = 0; j < tBodyNodeFirstRow.children.length; j++) {
|
|
20
|
-
const cell = tBodyNodeFirstRow.children[j];
|
|
21
|
-
cell.removeAttribute('style');
|
|
22
|
-
}
|
|
23
|
-
const tHeadRowsWidth = tHeadNode.children[0].getBoundingClientRect().width;
|
|
24
|
-
const tBodyRowsWidth = tBodyNode.children[0].getBoundingClientRect().width;
|
|
25
|
-
const nodeWithWidesRows = tHeadRowsWidth > tBodyRowsWidth ? tHeadNode : tBodyNode;
|
|
26
|
-
const nodeWithWidesRowsCellsWidth = Array.prototype.reduce.call(nodeWithWidesRows.children[0].children, (accum, cellNode) => {
|
|
27
|
-
// @ts-ignore
|
|
28
|
-
accum.push(cellNode.getBoundingClientRect().width);
|
|
29
|
-
return accum;
|
|
30
|
-
}, []);
|
|
31
|
-
const nodeToSetCellsWidth = nodeWithWidesRows === tHeadNode ? tBodyNode : tHeadNode;
|
|
32
|
-
const nodeToSetCellsWidthFirstRow = nodeToSetCellsWidth.children[0];
|
|
33
|
-
for (let j = 0; j < nodeToSetCellsWidthFirstRow.children.length; j++) {
|
|
34
|
-
const cell = nodeToSetCellsWidthFirstRow.children[j];
|
|
35
|
-
// @ts-ignore
|
|
36
|
-
cell.setAttribute('style', `width: ${nodeWithWidesRowsCellsWidth[j]}px`);
|
|
37
|
-
}
|
|
38
|
-
if (tBodyNode.children.length === 1) {
|
|
39
|
-
for (const cell of tHeadNodeFirstRow.children) {
|
|
40
|
-
cell.innerHTML = '';
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
}
|