@gravity-ui/chartkit 3.0.0-beta.9 → 3.0.0-beta.zefirka.2
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/build/components/ChartKit.css +19 -19
- package/build/plugins/highcharts/mocks/complex.js +1 -1
- package/build/plugins/highcharts/renderer/components/StyledSplitPane/StyledSplitPane.css +1 -1
- package/build/plugins/highcharts/renderer/helpers/config/config.js +4 -4
- package/build/plugins/highcharts/renderer/helpers/config/options.js +1 -1
- package/build/plugins/highcharts/renderer/helpers/graph.css +4 -4
- package/build/plugins/highcharts/renderer/helpers/tooltip/tooltip.css +5 -5
- package/build/plugins/indicator/renderer/IndicatorWidget.css +1 -1
- package/build/plugins/yagr/renderer/YagrWidget.css +1 -1
- package/build/plugins/yagr/renderer/tooltip/tooltip.css +14 -14
- package/package.json +4 -4
|
@@ -8,24 +8,24 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.chartkit-theme_common {
|
|
11
|
-
--highcarts-navigator-border: var(--
|
|
12
|
-
--highcarts-navigator-track: var(--
|
|
13
|
-
--highcarts-navigator-body: var(--
|
|
14
|
-
--highcharts-series-border: var(--
|
|
15
|
-
--highcharts-grid-line: var(--
|
|
16
|
-
--highcharts-axis-line: var(--
|
|
17
|
-
--highcharts-tick: var(--
|
|
18
|
-
--highcharts-title: var(--
|
|
19
|
-
--highcharts-axis-labels: var(--
|
|
20
|
-
--highcharts-data-labels: var(--
|
|
21
|
-
--highcharts-plot-line-label: var(--
|
|
22
|
-
--highcharts-legend-item: var(--
|
|
23
|
-
--highcharts-legend-item-hover: var(--
|
|
24
|
-
--highcharts-legend-item-hidden: var(--
|
|
25
|
-
--highcharts-floating-bg: var(--
|
|
26
|
-
--highcharts-tooltip-text: var(--
|
|
11
|
+
--highcarts-navigator-border: var(--g-color-line-generic);
|
|
12
|
+
--highcarts-navigator-track: var(--g-color-base-generic);
|
|
13
|
+
--highcarts-navigator-body: var(--g-color-scroll-handle);
|
|
14
|
+
--highcharts-series-border: var(--g-color-base-background);
|
|
15
|
+
--highcharts-grid-line: var(--g-color-line-generic);
|
|
16
|
+
--highcharts-axis-line: var(--g-color-line-generic);
|
|
17
|
+
--highcharts-tick: var(--g-color-line-generic);
|
|
18
|
+
--highcharts-title: var(--g-color-text-primary);
|
|
19
|
+
--highcharts-axis-labels: var(--g-color-text-secondary);
|
|
20
|
+
--highcharts-data-labels: var(--g-color-text-complementary);
|
|
21
|
+
--highcharts-plot-line-label: var(--g-color-text-complementary);
|
|
22
|
+
--highcharts-legend-item: var(--g-color-text-secondary);
|
|
23
|
+
--highcharts-legend-item-hover: var(--g-color-text-primary);
|
|
24
|
+
--highcharts-legend-item-hidden: var(--g-color-text-hint);
|
|
25
|
+
--highcharts-floating-bg: var(--g-color-infographics-tooltip-bg);
|
|
26
|
+
--highcharts-tooltip-text: var(--g-color-text-primary);
|
|
27
27
|
--highcharts-tooltip-bg: var(--highcharts-floating-bg);
|
|
28
|
-
--highcharts-tooltip-alternate-bg: var(--
|
|
29
|
-
--highcharts-tooltip-text-complementary: var(--
|
|
30
|
-
--highcharts-holiday-band: var(--
|
|
28
|
+
--highcharts-tooltip-alternate-bg: var(--g-color-base-generic);
|
|
29
|
+
--highcharts-tooltip-text-complementary: var(--g-color-text-complementary);
|
|
30
|
+
--highcharts-holiday-band: var(--g-color-base-generic);
|
|
31
31
|
}
|
|
@@ -244,7 +244,7 @@ export const data = {
|
|
|
244
244
|
.rect(rect.x, rect.y, rect.width, rect.height)
|
|
245
245
|
.addClass('highcharts-axis-grid-divider')
|
|
246
246
|
.attr({
|
|
247
|
-
fill: 'var(--
|
|
247
|
+
fill: 'var(--g-color-base-background)',
|
|
248
248
|
zIndex: 8,
|
|
249
249
|
})
|
|
250
250
|
.add();
|
|
@@ -159,12 +159,12 @@ export function buildLegend(options) {
|
|
|
159
159
|
}
|
|
160
160
|
},
|
|
161
161
|
navigation: {
|
|
162
|
-
activeColor: 'var(--
|
|
163
|
-
inactiveColor: 'var(--
|
|
164
|
-
style: { color: 'var(--
|
|
162
|
+
activeColor: 'var(--g-color-base-brand)',
|
|
163
|
+
inactiveColor: 'var(--g-color-base-generic-accent-disabled)',
|
|
164
|
+
style: { color: 'var(--g-color-text-primary)' },
|
|
165
165
|
},
|
|
166
166
|
title: {
|
|
167
|
-
style: { color: 'var(--
|
|
167
|
+
style: { color: 'var(--g-color-text-secondary)' },
|
|
168
168
|
},
|
|
169
169
|
};
|
|
170
170
|
if (options.outsideLegend) {
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.chartkit-graph .highcharts-legend .highcharts-coloraxis-labels text {
|
|
11
|
-
fill: var(--
|
|
12
|
-
color: var(--
|
|
11
|
+
fill: var(--g-color-text-secondary) !important;
|
|
12
|
+
color: var(--g-color-text-secondary) !important;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.chartkit-graph .highcharts-legend .highcharts-coloraxis-grid path {
|
|
16
|
-
stroke: var(--
|
|
16
|
+
stroke: var(--g-color-base-background);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.chartkit-tooltip {
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
border: none;
|
|
32
32
|
border-radius: 0;
|
|
33
33
|
box-shadow: none;
|
|
34
|
-
border-bottom: 1px solid var(--
|
|
34
|
+
border-bottom: 1px solid var(--g-color-line-generic);
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.chartkit-tooltip_yandex-map {
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
|
|
7
|
-
padding-right: calc(18px + var(--
|
|
7
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
|
|
11
|
-
padding-right: calc(18px + var(--
|
|
11
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
|
|
15
|
-
padding-right: calc(18px + var(--
|
|
15
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
|
|
19
|
-
padding-right: calc(18px + var(--
|
|
19
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
._tooltip {
|
|
@@ -347,7 +347,7 @@
|
|
|
347
347
|
}
|
|
348
348
|
|
|
349
349
|
._tooltip-right__traf-div_for-split-tooltip {
|
|
350
|
-
color: var(--
|
|
350
|
+
color: var(--g-color-text-secondary);
|
|
351
351
|
padding-left: 8px;
|
|
352
352
|
border-top: none;
|
|
353
353
|
border-left: 2px solid;
|
|
@@ -4,26 +4,26 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-header td:last-child {
|
|
7
|
-
padding-right: calc(18px + var(--
|
|
7
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll ._tooltip-footer td:last-child {
|
|
11
|
-
padding-right: calc(18px + var(--
|
|
11
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-row td:last-child {
|
|
15
|
-
padding-right: calc(18px + var(--
|
|
15
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
.chartkit-highcharts-tooltip-container._tooltip-with-scroll-in-safari ._tooltip-rows__summ-tr td:last-child {
|
|
19
|
-
padding-right: calc(18px + var(--
|
|
19
|
+
padding-right: calc(18px + var(--g-scrollbar-width, 15px));
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
._tooltip {
|
|
23
23
|
border-radius: 5px;
|
|
24
|
-
background: var(--
|
|
25
|
-
background-color: var(--
|
|
26
|
-
color: var(--
|
|
24
|
+
background: var(--g-color-infographics-tooltip-bg);
|
|
25
|
+
background-color: var(--g-color-infographics-tooltip-bg);
|
|
26
|
+
color: var(--g-color-text-primary);
|
|
27
27
|
font-size: 12px;
|
|
28
28
|
overflow: hidden;
|
|
29
29
|
box-sizing: border-box;
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
._tooltip-rows__table thead._tooltip-header tr:not(._tooltip-fake-row):first-child td {
|
|
151
151
|
padding-top: 6px;
|
|
152
152
|
padding-bottom: 6px;
|
|
153
|
-
border-bottom: 1px solid var(--
|
|
153
|
+
border-bottom: 1px solid var(--g-color-line-generic);
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
._tooltip-rows__table tbody {
|
|
@@ -169,11 +169,11 @@
|
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
._tooltip-rows__table tbody._tooltip-list ._tooltip-row-dark-bg {
|
|
172
|
-
background-color: var(--
|
|
172
|
+
background-color: var(--g-color-base-generic);
|
|
173
173
|
}
|
|
174
174
|
|
|
175
175
|
._tooltip-rows__table tbody ._hidden-rows-sum._hidden-rows-sum-dark-bg {
|
|
176
|
-
background-color: var(--
|
|
176
|
+
background-color: var(--g-color-base-generic);
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
._tooltip-rows__table tbody ._hidden-rows-sum td {
|
|
@@ -281,9 +281,9 @@
|
|
|
281
281
|
|
|
282
282
|
._tooltip-rows__summ-td {
|
|
283
283
|
padding: 6px 0 6px 3px;
|
|
284
|
-
color: var(--
|
|
284
|
+
color: var(--g-color-text-complementary);
|
|
285
285
|
font-size: 12px;
|
|
286
|
-
border-top: 1px solid var(--
|
|
286
|
+
border-top: 1px solid var(--g-color-line-generic);
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
._tooltip-rows__summ-td-value {
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
._tooltip-right__td {
|
|
309
309
|
vertical-align: top;
|
|
310
310
|
opacity: 0.9;
|
|
311
|
-
border-left: 1px solid var(--
|
|
311
|
+
border-left: 1px solid var(--g-color-line-generic);
|
|
312
312
|
white-space: normal;
|
|
313
313
|
font-size: 8pt;
|
|
314
314
|
position: relative;
|
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
}
|
|
349
349
|
|
|
350
350
|
._tooltip-right__traf-div_for-split-tooltip {
|
|
351
|
-
color: var(--
|
|
351
|
+
color: var(--g-color-text-secondary);
|
|
352
352
|
padding-left: 8px;
|
|
353
353
|
border-top: none;
|
|
354
354
|
border-left: 2px solid;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/chartkit",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.zefirka.2",
|
|
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",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@gravity-ui/date-utils": "^1.4.1",
|
|
17
|
-
"@gravity-ui/yagr": "^3.
|
|
17
|
+
"@gravity-ui/yagr": "^3.5.0",
|
|
18
18
|
"bem-cn-lite": "^4.1.0",
|
|
19
19
|
"highcharts": "^8.2.2",
|
|
20
20
|
"highcharts-react-official": "^3.0.0",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"@gravity-ui/prettier-config": "^1.0.1",
|
|
31
31
|
"@gravity-ui/stylelint-config": "^1.0.1",
|
|
32
32
|
"@gravity-ui/tsconfig": "^1.0.0",
|
|
33
|
-
"@gravity-ui/uikit": "^
|
|
33
|
+
"@gravity-ui/uikit": "^5.0.0-beta.1",
|
|
34
34
|
"@storybook/addon-essentials": "^7.0.26",
|
|
35
35
|
"@storybook/addon-knobs": "^7.0.2",
|
|
36
36
|
"@storybook/cli": "^7.0.26",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"typescript": "^4.9.5"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
|
-
"@gravity-ui/uikit": "^
|
|
74
|
+
"@gravity-ui/uikit": "^5.0.0-beta.1",
|
|
75
75
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
|
76
76
|
},
|
|
77
77
|
"scripts": {
|