@gravity-ui/chartkit 0.11.1 → 0.12.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.
Files changed (19) hide show
  1. package/CHANGELOG.md +7 -1
  2. package/build/components/ChartKit.css +1 -1
  3. package/build/plugins/highcharts/__stories__/Bar.stories.d.ts +4 -0
  4. package/build/plugins/highcharts/__stories__/Bar.stories.js +31 -0
  5. package/build/plugins/highcharts/__stories__/Column.stories.d.ts +4 -0
  6. package/build/plugins/highcharts/__stories__/Column.stories.js +30 -0
  7. package/build/plugins/highcharts/__stories__/constants/story-settings.d.ts +42 -0
  8. package/build/plugins/highcharts/__stories__/constants/story-settings.js +42 -0
  9. package/build/plugins/highcharts/__stories__/mocks/bar.d.ts +2 -0
  10. package/build/plugins/highcharts/__stories__/mocks/bar.js +199 -0
  11. package/build/plugins/highcharts/__stories__/mocks/column.d.ts +2 -0
  12. package/build/plugins/highcharts/__stories__/mocks/column.js +197 -0
  13. package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts +0 -3
  14. package/build/plugins/highcharts/renderer/helpers/config/config.d.ts +0 -3
  15. package/build/plugins/highcharts/renderer/helpers/config/options.d.ts +0 -3
  16. package/build/plugins/highcharts/renderer/helpers/config/options.js +3 -6
  17. package/build/plugins/highcharts/renderer/helpers/graph.d.ts +0 -3
  18. package/build/plugins/highcharts/renderer/helpers/graph.js +1 -1
  19. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,11 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.12.0](https://github.com/gravity-ui/chartkit/compare/v0.11.1...v0.12.0) (2022-11-22)
4
+
5
+
6
+ ### Features
7
+
8
+ * add support border color setting ([defdcf7](https://github.com/gravity-ui/chartkit/commit/defdcf768d33fe11f9de8dc14a1e9561c034f6ea))
9
+
3
10
  ## [0.11.1](https://github.com/gravity-ui/chartkit/compare/v0.11.0...v0.11.1) (2022-11-21)
4
11
 
5
12
 
6
13
  ### Bug Fixes
7
14
 
8
- * **Highcharts plugin:** fix tooltip golidays handling ([9bc3f8c](https://github.com/gravity-ui/chartkit/commit/9bc3f8c7a62d3b269626be87a46de1d8a6949f57))
9
15
  * **Highcharts plugin:** fix tooltip holidays handling ([#69](https://github.com/gravity-ui/chartkit/issues/69)) ([9bc3f8c](https://github.com/gravity-ui/chartkit/commit/9bc3f8c7a62d3b269626be87a46de1d8a6949f57))
10
16
 
11
17
  ## [0.11.0](https://github.com/gravity-ui/chartkit/compare/v0.10.1...v0.11.0) (2022-11-18)
package/build/components/ChartKit.css CHANGED
@@ -11,7 +11,7 @@
11
11
  --highcarts-navigator-border: var(--yc-color-line-generic);
12
12
  --highcarts-navigator-track: var(--yc-color-base-generic);
13
13
  --highcarts-navigator-body: var(--yc-color-scroll-handle);
14
- --highcharts-series-border: var(--yc-color-base-background);
14
+ --highcharts-chart-background: var(--yc-color-base-background);
15
15
  --highcharts-grid-line: var(--yc-color-line-generic);
16
16
  --highcharts-axis-line: var(--yc-color-line-generic);
17
17
  --highcharts-tick: var(--yc-color-line-generic);
package/build/plugins/highcharts/__stories__/Bar.stories.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Story, Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Bar: Story<any>;
package/build/plugins/highcharts/__stories__/Bar.stories.js ADDED
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import { Button, ThemeProvider } from '@gravity-ui/uikit';
3
+ import { ChartKit } from '../../../components/ChartKit';
4
+ import { settings } from '../../../libs';
5
+ import { HighchartsPlugin } from '../index';
6
+ import { defaultChartKitPropsControlsState } from './constants/story-settings';
7
+ import holidays from './mocks/holidays';
8
+ import { data } from './mocks/bar';
9
+ export default {
10
+ title: 'Plugins/Highcharts/Bar',
11
+ component: ChartKit,
12
+ args: {
13
+ theme: 'light',
14
+ },
15
+ argTypes: Object.assign({ theme: {
16
+ options: ['light', 'light-hc', 'dark', 'dark-hc'],
17
+ control: { type: 'radio' },
18
+ } }, defaultChartKitPropsControlsState),
19
+ };
20
+ const Template = (args) => {
21
+ const [shown, setShown] = React.useState(false);
22
+ const chartkitRef = React.useRef();
23
+ if (!shown) {
24
+ settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
25
+ return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
26
+ }
27
+ return (React.createElement(ThemeProvider, { theme: args.theme },
28
+ React.createElement("div", { style: { height: '600px', width: '100%' } },
29
+ React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "highcharts", data: data, onError: () => console.log('onError invoked') }))));
30
+ };
31
+ export const Bar = Template.bind({});
package/build/plugins/highcharts/__stories__/Column.stories.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { Story, Meta } from '@storybook/react';
2
+ declare const _default: Meta<import("@storybook/react").Args>;
3
+ export default _default;
4
+ export declare const Column: Story<any>;
package/build/plugins/highcharts/__stories__/Column.stories.js ADDED
@@ -0,0 +1,30 @@
1
+ import React from 'react';
2
+ import { Button, ThemeProvider } from '@gravity-ui/uikit';
3
+ import { ChartKit } from '../../../components/ChartKit';
4
+ import { settings } from '../../../libs';
5
+ import { HighchartsPlugin } from '../index';
6
+ import { defaultChartKitPropsControlsState } from './constants/story-settings';
7
+ import holidays from './mocks/holidays';
8
+ import { data } from './mocks/column';
9
+ export default {
10
+ title: 'Plugins/Highcharts/Column',
11
+ component: ChartKit,
12
+ args: {
13
+ theme: 'light',
14
+ },
15
+ argTypes: Object.assign({ theme: {
16
+ options: ['light', 'light-hc', 'dark', 'dark-hc'],
17
+ control: { type: 'radio' },
18
+ } }, defaultChartKitPropsControlsState),
19
+ };
20
+ const Template = (args) => {
21
+ const [shown, setShown] = React.useState(false);
22
+ const chartkitRef = React.useRef();
23
+ if (!shown) {
24
+ settings.set({ plugins: [HighchartsPlugin], extra: { holidays } });
25
+ return React.createElement(Button, { onClick: () => setShown(true) }, "Show chart");
26
+ }
27
+ return (React.createElement(ThemeProvider, { theme: args.theme },
28
+ React.createElement(ChartKit, { ref: chartkitRef, id: "1", type: "highcharts", data: data, onError: () => console.log('onError invoked') })));
29
+ };
30
+ export const Column = Template.bind({});
package/build/plugins/highcharts/__stories__/constants/story-settings.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ export declare const defaultChartKitPropsControlsState: {
2
+ ref: {
3
+ table: {
4
+ disable: boolean;
5
+ };
6
+ };
7
+ hoistConfigError: {
8
+ table: {
9
+ disable: boolean;
10
+ };
11
+ };
12
+ onError: {
13
+ table: {
14
+ disable: boolean;
15
+ };
16
+ };
17
+ data: {
18
+ table: {
19
+ disable: boolean;
20
+ };
21
+ };
22
+ type: {
23
+ table: {
24
+ disable: boolean;
25
+ };
26
+ };
27
+ id: {
28
+ table: {
29
+ disable: boolean;
30
+ };
31
+ };
32
+ isMobile: {
33
+ table: {
34
+ disable: boolean;
35
+ };
36
+ };
37
+ onLoad: {
38
+ table: {
39
+ disable: boolean;
40
+ };
41
+ };
42
+ };
package/build/plugins/highcharts/__stories__/constants/story-settings.js ADDED
@@ -0,0 +1,42 @@
1
+ export const defaultChartKitPropsControlsState = {
2
+ ref: {
3
+ table: {
4
+ disable: true,
5
+ },
6
+ },
7
+ hoistConfigError: {
8
+ table: {
9
+ disable: true,
10
+ },
11
+ },
12
+ onError: {
13
+ table: {
14
+ disable: true,
15
+ },
16
+ },
17
+ data: {
18
+ table: {
19
+ disable: true,
20
+ },
21
+ },
22
+ type: {
23
+ table: {
24
+ disable: true,
25
+ },
26
+ },
27
+ id: {
28
+ table: {
29
+ disable: true,
30
+ },
31
+ },
32
+ isMobile: {
33
+ table: {
34
+ disable: true,
35
+ },
36
+ },
37
+ onLoad: {
38
+ table: {
39
+ disable: true,
40
+ },
41
+ },
42
+ };
package/build/plugins/highcharts/__stories__/mocks/bar.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { HighchartsWidgetData } from '../../types';
2
+ export declare const data: HighchartsWidgetData;
package/build/plugins/highcharts/__stories__/mocks/bar.js ADDED
@@ -0,0 +1,199 @@
1
+ export const data = {
2
+ data: {
3
+ graphs: [
4
+ {
5
+ title: 'Central',
6
+ tooltip: {
7
+ chartKitFormatting: true,
8
+ chartKitPrecision: 0,
9
+ },
10
+ data: [
11
+ {
12
+ y: 163798.70024430752,
13
+ dataLabels: {
14
+ enabled: false,
15
+ },
16
+ },
17
+ {
18
+ y: 167028.80030867457,
19
+ dataLabels: {
20
+ enabled: false,
21
+ },
22
+ },
23
+ {
24
+ y: 170420.6004266739,
25
+ dataLabels: {
26
+ enabled: false,
27
+ },
28
+ },
29
+ ],
30
+ legendTitle: 'Central',
31
+ drillDownFilterValue: 'Central',
32
+ connectNulls: false,
33
+ yAxis: 0,
34
+ colorValue: 'Central',
35
+ shapeValue: 'Profit',
36
+ custom: {},
37
+ color: '#4DA2F1',
38
+ },
39
+ {
40
+ title: 'East',
41
+ tooltip: {
42
+ chartKitFormatting: true,
43
+ chartKitPrecision: 0,
44
+ },
45
+ data: [
46
+ {
47
+ y: 208293.70054268837,
48
+ dataLabels: {
49
+ enabled: false,
50
+ },
51
+ },
52
+ {
53
+ y: 205518.80070078373,
54
+ dataLabels: {
55
+ enabled: false,
56
+ },
57
+ },
58
+ {
59
+ y: 264979.80019688606,
60
+ dataLabels: {
61
+ enabled: false,
62
+ },
63
+ },
64
+ ],
65
+ legendTitle: 'East',
66
+ drillDownFilterValue: 'East',
67
+ connectNulls: false,
68
+ yAxis: 0,
69
+ colorValue: 'East',
70
+ shapeValue: 'Profit',
71
+ custom: {},
72
+ color: '#FF3D64',
73
+ },
74
+ {
75
+ title: 'South',
76
+ tooltip: {
77
+ chartKitFormatting: true,
78
+ chartKitPrecision: 0,
79
+ },
80
+ data: [
81
+ {
82
+ y: 117300.00069212914,
83
+ dataLabels: {
84
+ enabled: false,
85
+ },
86
+ },
87
+ {
88
+ y: 125653.1994549036,
89
+ dataLabels: {
90
+ enabled: false,
91
+ },
92
+ },
93
+ {
94
+ y: 148775.5996557474,
95
+ dataLabels: {
96
+ enabled: false,
97
+ },
98
+ },
99
+ ],
100
+ legendTitle: 'South',
101
+ drillDownFilterValue: 'South',
102
+ connectNulls: false,
103
+ yAxis: 0,
104
+ colorValue: 'South',
105
+ shapeValue: 'Profit',
106
+ custom: {},
107
+ color: '#8AD554',
108
+ },
109
+ {
110
+ title: 'West',
111
+ tooltip: {
112
+ chartKitFormatting: true,
113
+ chartKitPrecision: 0,
114
+ },
115
+ data: [
116
+ {
117
+ y: 252617.00065851212,
118
+ dataLabels: {
119
+ enabled: false,
120
+ },
121
+ },
122
+ {
123
+ y: 220856.3998889923,
124
+ dataLabels: {
125
+ enabled: false,
126
+ },
127
+ },
128
+ {
129
+ y: 251998.89954137802,
130
+ dataLabels: {
131
+ enabled: false,
132
+ },
133
+ },
134
+ ],
135
+ legendTitle: 'West',
136
+ drillDownFilterValue: 'West',
137
+ connectNulls: false,
138
+ yAxis: 0,
139
+ colorValue: 'West',
140
+ shapeValue: 'Profit',
141
+ custom: {},
142
+ color: '#FFC636',
143
+ },
144
+ ],
145
+ categories: ['Furniture', 'Office Supplies', 'Technology'],
146
+ },
147
+ config: {
148
+ withoutLineLimit: true,
149
+ hideHolidaysBands: true,
150
+ enableSum: true,
151
+ },
152
+ libraryConfig: {
153
+ chart: {
154
+ type: 'bar',
155
+ zoomType: 'xy',
156
+ },
157
+ xAxis: {
158
+ endOnTick: false,
159
+ title: {
160
+ text: null,
161
+ },
162
+ type: 'linear',
163
+ labels: {
164
+ enabled: true,
165
+ },
166
+ },
167
+ yAxis: {
168
+ opposite: false,
169
+ labels: {
170
+ y: 3,
171
+ enabled: true,
172
+ },
173
+ title: {
174
+ text: null,
175
+ },
176
+ type: 'linear',
177
+ },
178
+ tooltip: {},
179
+ plotOptions: {
180
+ bar: {
181
+ stacking: 'normal',
182
+ },
183
+ column: {
184
+ dataGrouping: {
185
+ enabled: false,
186
+ },
187
+ maxPointWidth: 50,
188
+ },
189
+ series: {
190
+ dataGrouping: {
191
+ enabled: false,
192
+ },
193
+ dataLabels: {
194
+ allowOverlap: false,
195
+ },
196
+ },
197
+ },
198
+ },
199
+ };
package/build/plugins/highcharts/__stories__/mocks/column.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { HighchartsWidgetData } from '../../types';
2
+ export declare const data: HighchartsWidgetData;
package/build/plugins/highcharts/__stories__/mocks/column.js ADDED
@@ -0,0 +1,197 @@
1
+ export const data = {
2
+ data: {
3
+ graphs: [
4
+ {
5
+ title: 'Central',
6
+ tooltip: {
7
+ chartKitFormatting: true,
8
+ chartKitPrecision: 0,
9
+ },
10
+ data: [
11
+ {
12
+ y: 163798.70024430752,
13
+ dataLabels: {
14
+ enabled: false,
15
+ },
16
+ },
17
+ {
18
+ y: 167028.80030867457,
19
+ dataLabels: {
20
+ enabled: false,
21
+ },
22
+ },
23
+ {
24
+ y: 170420.6004266739,
25
+ dataLabels: {
26
+ enabled: false,
27
+ },
28
+ },
29
+ ],
30
+ legendTitle: 'Central',
31
+ drillDownFilterValue: 'Central',
32
+ connectNulls: false,
33
+ yAxis: 0,
34
+ colorValue: 'Central',
35
+ shapeValue: 'Profit',
36
+ custom: {},
37
+ color: '#4DA2F1',
38
+ },
39
+ {
40
+ title: 'East',
41
+ tooltip: {
42
+ chartKitFormatting: true,
43
+ chartKitPrecision: 0,
44
+ },
45
+ data: [
46
+ {
47
+ y: 208293.70054268837,
48
+ dataLabels: {
49
+ enabled: false,
50
+ },
51
+ },
52
+ {
53
+ y: 205518.80070078373,
54
+ dataLabels: {
55
+ enabled: false,
56
+ },
57
+ },
58
+ {
59
+ y: 264979.80019688606,
60
+ dataLabels: {
61
+ enabled: false,
62
+ },
63
+ },
64
+ ],
65
+ legendTitle: 'East',
66
+ drillDownFilterValue: 'East',
67
+ connectNulls: false,
68
+ yAxis: 0,
69
+ colorValue: 'East',
70
+ shapeValue: 'Profit',
71
+ custom: {},
72
+ color: '#FF3D64',
73
+ },
74
+ {
75
+ title: 'South',
76
+ tooltip: {
77
+ chartKitFormatting: true,
78
+ chartKitPrecision: 0,
79
+ },
80
+ data: [
81
+ {
82
+ y: 117300.00069212914,
83
+ dataLabels: {
84
+ enabled: false,
85
+ },
86
+ },
87
+ {
88
+ y: 125653.1994549036,
89
+ dataLabels: {
90
+ enabled: false,
91
+ },
92
+ },
93
+ {
94
+ y: 148775.5996557474,
95
+ dataLabels: {
96
+ enabled: false,
97
+ },
98
+ },
99
+ ],
100
+ legendTitle: 'South',
101
+ drillDownFilterValue: 'South',
102
+ connectNulls: false,
103
+ yAxis: 0,
104
+ colorValue: 'South',
105
+ shapeValue: 'Profit',
106
+ custom: {},
107
+ color: '#8AD554',
108
+ },
109
+ {
110
+ title: 'West',
111
+ tooltip: {
112
+ chartKitFormatting: true,
113
+ chartKitPrecision: 0,
114
+ },
115
+ data: [
116
+ {
117
+ y: 252617.00065851212,
118
+ dataLabels: {
119
+ enabled: false,
120
+ },
121
+ },
122
+ {
123
+ y: 220856.3998889923,
124
+ dataLabels: {
125
+ enabled: false,
126
+ },
127
+ },
128
+ {
129
+ y: 251998.89954137802,
130
+ dataLabels: {
131
+ enabled: false,
132
+ },
133
+ },
134
+ ],
135
+ legendTitle: 'West',
136
+ drillDownFilterValue: 'West',
137
+ connectNulls: false,
138
+ yAxis: 0,
139
+ colorValue: 'West',
140
+ shapeValue: 'Profit',
141
+ custom: {},
142
+ color: '#FFC636',
143
+ },
144
+ ],
145
+ categories: ['Furniture', 'Office Supplies', 'Technology'],
146
+ },
147
+ config: {
148
+ withoutLineLimit: true,
149
+ hideHolidaysBands: true,
150
+ enableSum: true,
151
+ },
152
+ libraryConfig: {
153
+ chart: {
154
+ type: 'column',
155
+ zoomType: 'xy',
156
+ },
157
+ xAxis: {
158
+ endOnTick: false,
159
+ title: {
160
+ text: null,
161
+ },
162
+ type: 'linear',
163
+ labels: {
164
+ enabled: true,
165
+ },
166
+ },
167
+ yAxis: {
168
+ opposite: false,
169
+ labels: {
170
+ y: 3,
171
+ enabled: true,
172
+ },
173
+ title: {
174
+ text: null,
175
+ },
176
+ type: 'linear',
177
+ },
178
+ tooltip: {},
179
+ plotOptions: {
180
+ column: {
181
+ stacking: 'normal',
182
+ dataGrouping: {
183
+ enabled: false,
184
+ },
185
+ maxPointWidth: 50,
186
+ },
187
+ series: {
188
+ dataGrouping: {
189
+ enabled: false,
190
+ },
191
+ dataLabels: {
192
+ allowOverlap: false,
193
+ },
194
+ },
195
+ },
196
+ },
197
+ };
package/build/plugins/highcharts/renderer/components/HighchartsComponent.d.ts CHANGED
@@ -117,9 +117,6 @@ export declare class HighchartsComponent extends React.PureComponent<Props, Stat
117
117
  };
118
118
  };
119
119
  bar: {
120
- borderWidth: number;
121
- pointWidth: number;
122
- } & {
123
120
  states: {
124
121
  hover: {
125
122
  lineWidthPlus: number;
package/build/plugins/highcharts/renderer/helpers/config/config.d.ts CHANGED
@@ -182,9 +182,6 @@ export function prepareConfig(data: any, options: any, isMobile: any, holidays:
182
182
  };
183
183
  };
184
184
  bar: {
185
- borderWidth: number;
186
- pointWidth: number;
187
- } & {
188
185
  states: {
189
186
  hover: {
190
187
  lineWidthPlus: number;
package/build/plugins/highcharts/renderer/helpers/config/options.d.ts CHANGED
@@ -152,9 +152,6 @@ declare namespace options {
152
152
  };
153
153
  export { first as areaspline };
154
154
  export const bar: {
155
- borderWidth: number;
156
- pointWidth: number;
157
- } & {
158
155
  states: {
159
156
  hover: {
160
157
  lineWidthPlus: number;
package/build/plugins/highcharts/renderer/helpers/config/options.js CHANGED
@@ -94,7 +94,7 @@ const statesForLine = {
94
94
  const options = {
95
95
  chart: {
96
96
  zoomType: 'xy',
97
- backgroundColor: 'transparent',
97
+ backgroundColor: 'var(--highcharts-chart-background)',
98
98
  className: 'chartkit-highcharts',
99
99
  },
100
100
  title: {
@@ -164,7 +164,7 @@ const options = {
164
164
  },
165
165
  plotOptions: {
166
166
  series: {
167
- borderColor: 'var(--highcharts-series-border)',
167
+ borderColor: 'var(--highcharts-chart-background)',
168
168
  label: {
169
169
  enabled: false,
170
170
  },
@@ -186,10 +186,7 @@ const options = {
186
186
  stickyTracking: false,
187
187
  }, first, wizardGraphDataLabels, statesForLine),
188
188
  areaspline: first,
189
- bar: Object.assign({
190
- borderWidth: 0,
191
- pointWidth: 4,
192
- }, first, wizardGraphDataLabels, notChangeOpacityForInactive),
189
+ bar: Object.assign({}, first, wizardGraphDataLabels, notChangeOpacityForInactive),
193
190
  column: Object.assign({}, first, wizardGraphDataLabels, notChangeOpacityForInactive),
194
191
  line: Object.assign({}, first, wizardGraphDataLabels, statesForLine),
195
192
  spline: first,
package/build/plugins/highcharts/renderer/helpers/graph.d.ts CHANGED
@@ -111,9 +111,6 @@ declare function getGraph({ options, data, comments, isMobile, holidays }: GetGr
111
111
  };
112
112
  };
113
113
  bar: {
114
- borderWidth: number;
115
- pointWidth: number;
116
- } & {
117
114
  states: {
118
115
  hover: {
119
116
  lineWidthPlus: number;
package/build/plugins/highcharts/renderer/helpers/graph.js CHANGED
@@ -19,7 +19,7 @@ function getGraph({ options, data, comments, isMobile, holidays }) {
19
19
  console.error('CHARTKIT_NO_CHART_CALLBACK');
20
20
  return;
21
21
  }
22
- chart.userOptions._getComments = () => chart.userOptions._internalComments.concat(chart.userOptions._externalComments);
22
+ chart.userOptions._getComments = () => { var _a, _b; return (_a = chart.userOptions) === null || _a === void 0 ? void 0 : _a._internalComments.concat((_b = chart.userOptions) === null || _b === void 0 ? void 0 : _b._externalComments); };
23
23
  let needRedraw = false;
24
24
  chart.series.forEach((serie) => {
25
25
  if (serie.userOptions.noCheckNullValues) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/chartkit",
3
- "version": "0.11.1",
3
+ "version": "0.12.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",