playbook_ui 13.12.0.pre.alpha.play900startratingasinput1612 → 13.12.0.pre.alpha.play1051highchartstest1556

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +36 -32
  3. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +68 -63
  4. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +257 -3
  5. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +59 -47
  6. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +40 -34
  7. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -6
  8. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -6
  9. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +53 -84
  10. data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +55 -184
  11. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.html.erb +1 -11
  12. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_default.jsx +2 -17
  13. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.html.erb +1 -6
  14. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_hide.jsx +5 -22
  15. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +5 -10
  16. data/app/pb_kits/playbook/pb_star_rating/docs/index.js +0 -6
  17. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +20 -58
  18. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +6 -42
  19. data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +34 -34
  20. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -7
  21. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +0 -4
  22. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +107 -102
  23. data/app/pb_kits/playbook/playbook-doc.js +4 -4
  24. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -4
  25. data/dist/playbook-rails.js +7 -7
  26. data/lib/playbook/version.rb +1 -1
  27. metadata +2 -25
  28. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +0 -11
  29. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +0 -7
  30. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +0 -13
  31. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +0 -11
  32. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +0 -15
  33. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +0 -5
  34. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +0 -15
  35. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +0 -15
  36. data/app/pb_kits/playbook/pb_star_rating/custom-icons.js +0 -356
  37. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.html.erb +0 -7
  38. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_color_options.jsx +0 -40
  39. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.html.erb +0 -12
  40. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_number_config.jsx +0 -57
  41. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.html.erb +0 -23
  42. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_size_options.jsx +0 -59
  43. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +0 -35
  44. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +0 -29
  45. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +0 -13
  46. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +0 -24
  47. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +0 -13
  48. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +0 -11
  49. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +0 -10
  50. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +0 -6
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3b90330bfe6cb188da22c83d743c53b85d4906b6606052e2c157fb6ed76b19b6
4
- data.tar.gz: b24b4d58c99b4dc61863a4f6845c7b64001b1d1c68aa2b9cd1873307d182de9f
3
+ metadata.gz: 929026cac483c05a87b39292c9d51b41c4b6821b59de94e90a0c50e7442780f3
4
+ data.tar.gz: 3128e1087d1e0c3a35b55ee77777a76964458f85959bb09f578a62c97a164f3d
5
5
  SHA512:
6
- metadata.gz: 5fac6891a0bd6fe16224f3b6319ade251567ff5e617fb4a0022ef90e5969a883e1a08d7a030bb931ccc922a726d706f23bc7294332a1a5133a2549ad24d1d292
7
- data.tar.gz: 3461691e90464afb2ccb7ec68af97e76bacd36021c3d1a76482ede27ea813f04ac0fed5b60a7068ea19d966e1310e16478b24075805be989218d82a8ef8540d1
6
+ metadata.gz: c30d4c784c54c82d0f16c4c3743d863548c8998c458fbf0f7b32f79b3f47a860d646babb50e059d01d87cbb915fd38eae522e27a27190b468d90507e390ee595
7
+ data.tar.gz: 047cbc9a8cf5f7de72a5d55feb1b675ad20bc5ca5cb9853cbc2c4c0ca728be645772e095c4931552cdad9d77191c9f7a52c39dd610d68c6e353065c84d80b56e
@@ -3,7 +3,6 @@ import { globalProps } from "../utilities/globalProps";
3
3
  import { buildAriaProps, buildDataProps } from "../utilities/props";
4
4
 
5
5
  import HighchartsReact from "highcharts-react-official";
6
- import Highcharts from "highcharts";
7
6
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
7
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
8
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -11,32 +10,31 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
10
  import classnames from "classnames";
12
11
 
13
12
  type BarGraphProps = {
14
- align?: "left" | "right" | "center";
15
- axisTitle: string;
16
- dark?: boolean;
17
- xAxisCategories: [];
18
- yAxisMin: number;
19
- yAxisMax: number;
20
- chartData: { name: string; data: number[] }[];
21
- className?: string;
22
- id: any;
23
- pointStart: number | any;
24
- subTitle?: string;
25
- title: string;
26
- type?: string;
27
- legend?: boolean;
28
- toggleLegendClick?: boolean;
29
- height?: string;
30
- colors: string[];
31
- layout?: "horizontal" | "vertical" | "proximate";
32
- verticalAlign?: "top" | "middle" | "bottom";
33
- x?: number;
34
- y?: number;
35
- aria?: { [key: string]: string };
36
- data?: { [key: string]: string };
13
+ align?: "left" | "right" | "center",
14
+ axisTitle: string,
15
+ dark?: boolean,
16
+ xAxisCategories: [],
17
+ yAxisMin: number,
18
+ yAxisMax: number,
19
+ chartData: { name: string, data: number[] }[],
20
+ className?: string,
21
+ id: any,
22
+ pointStart: number | any,
23
+ subTitle?: string,
24
+ title: string,
25
+ type?: string,
26
+ legend?: boolean,
27
+ toggleLegendClick?: boolean,
28
+ height?: string,
29
+ colors: string[],
30
+ layout?: "horizontal" | "vertical" | "proximate",
31
+ verticalAlign?: "top" | "middle" | "bottom",
32
+ x?: number,
33
+ y?: number,
34
+ aria?: { [key: string]: string },
35
+ data?: { [key: string]: string },
37
36
  };
38
37
 
39
-
40
38
  const BarGraph = ({
41
39
  aria = {},
42
40
  data = {},
@@ -65,12 +63,6 @@ const BarGraph = ({
65
63
  }: BarGraphProps): React.ReactElement => {
66
64
  const ariaProps = buildAriaProps(aria);
67
65
  const dataProps = buildDataProps(data);
68
- const setupTheme = () => {
69
- dark
70
- ? Highcharts.setOptions(highchartsDarkTheme)
71
- : Highcharts.setOptions(highchartsTheme);
72
- };
73
- setupTheme();
74
66
 
75
67
  const staticOptions = {
76
68
  title: {
@@ -123,12 +115,24 @@ const BarGraph = ({
123
115
  }
124
116
 
125
117
  const [options, setOptions] = useState({});
118
+ const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false)
126
119
 
127
120
  useEffect(() => {
128
121
  setOptions({ ...staticOptions });
122
+
123
+ const interval = setInterval(() => {
124
+ if (window.Highcharts) {
125
+ clearInterval(interval)
126
+ dark
127
+ ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
128
+ : window.Highcharts.setOptions(highchartsTheme)
129
+ setIsHighchartsLoaded(true)
130
+ }
131
+ }, 0)
129
132
  }, [chartData]);
130
133
 
131
134
  return (
135
+ isHighchartsLoaded &&
132
136
  <HighchartsReact
133
137
  containerProps={{
134
138
  className: classnames(globalProps(props), className),
@@ -136,7 +140,7 @@ const BarGraph = ({
136
140
  ...ariaProps,
137
141
  ...dataProps,
138
142
  }}
139
- highcharts={Highcharts}
143
+ highcharts={window.Highcharts}
140
144
  options={options}
141
145
  />
142
146
  );
@@ -1,10 +1,9 @@
1
+ /* eslint-disable */
1
2
  import React, { useEffect, useState } from "react";
2
3
  import classnames from "classnames";
3
4
  import HighchartsReact from "highcharts-react-official";
4
5
  import highchartsMore from "highcharts/highcharts-more";
5
6
 
6
- import Highcharts from "highcharts";
7
-
8
7
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
8
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
9
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -12,35 +11,35 @@ import { globalProps } from "../utilities/globalProps";
12
11
  import { buildAriaProps, buildDataProps } from "../utilities/props";
13
12
 
14
13
  type CircleChartProps = {
15
- align?: "left" | "right" | "center";
16
- aria: { [key: string]: string };
17
- chartData?: [];
18
- children?: Node;
19
- className?: string;
20
- colors?: string[];
21
- dark?: Boolean;
22
- data?: Object;
23
- dataLabelHtml?: string;
24
- dataLabels?: boolean;
25
- height?: string;
26
- id?: string;
27
- innerSize?: "sm" | "md" | "lg" | "none";
28
- legend?: boolean;
29
- maxPointSize?: number;
30
- minPointSize?: number;
31
- rounded?: boolean;
32
- startAngle?: number;
33
- style?: string;
34
- title?: string;
35
- tooltipHtml: string;
36
- useHtml?: boolean;
37
- zMin?: number;
38
- layout?: "horizontal" | "vertical" | "proximate";
39
- verticalAlign?: "top" | "middle" | "bottom";
40
- x?: number;
41
- y?: number;
42
- borderColor?: string;
43
- borderWidth?: number;
14
+ align?: "left" | "right" | "center",
15
+ aria: { [key: string]: string },
16
+ chartData?: [],
17
+ children?: Node,
18
+ className?: string,
19
+ colors?: string[],
20
+ dark?: boolean,
21
+ data?: unknown,
22
+ dataLabelHtml?: string,
23
+ dataLabels?: boolean,
24
+ height?: string,
25
+ id?: string,
26
+ innerSize?: "sm" | "md" | "lg" | "none",
27
+ legend?: boolean,
28
+ maxPointSize?: number,
29
+ minPointSize?: number,
30
+ rounded?: boolean,
31
+ startAngle?: number,
32
+ style?: string,
33
+ title?: string,
34
+ tooltipHtml: string,
35
+ useHtml?: boolean,
36
+ zMin?: number,
37
+ layout?: "horizontal" | "vertical" | "proximate",
38
+ verticalAlign?: "top" | "middle" | "bottom",
39
+ x?: number,
40
+ y?: number,
41
+ borderColor?: string,
42
+ borderWidth?: number,
44
43
  };
45
44
 
46
45
  // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -90,29 +89,11 @@ const CircleChart = ({
90
89
  }: CircleChartProps) => {
91
90
  const ariaProps = buildAriaProps(aria);
92
91
  const dataProps = buildDataProps(data);
93
- highchartsMore(Highcharts);
94
-
95
- const setupTheme = () => {
96
- dark
97
- ? Highcharts.setOptions(highchartsDarkTheme)
98
- : Highcharts.setOptions(highchartsTheme);
99
- };
100
- setupTheme();
101
-
102
- Highcharts.setOptions({
103
- tooltip: {
104
- headerFormat: null,
105
- pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
106
- useHTML: useHtml,
107
- },
108
- });
109
-
110
92
  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
111
- const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
112
- innerSizes[size];
113
-
93
+ const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
114
94
 
115
95
  const [options, setOptions] = useState({});
96
+ const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
116
97
 
117
98
  useEffect(() => {
118
99
  const formattedChartData = chartData.map((obj: any) => {
@@ -169,26 +150,50 @@ const CircleChart = ({
169
150
  credits: false,
170
151
  };
171
152
  setOptions({ ...staticOptions });
172
- }, [chartData]);
173
153
 
154
+ const interval = setInterval(() => {
155
+ if (window.Highcharts) {
156
+ clearInterval(interval)
157
+ dark
158
+ ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
159
+ : window.Highcharts.setOptions(highchartsTheme)
160
+
161
+ highchartsMore(window.Highcharts);
162
+
163
+ window.Highcharts.setOptions({
164
+ tooltip: {
165
+ headerFormat: null,
166
+ pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
167
+ useHTML: useHtml,
168
+ },
169
+ });
170
+
171
+ setIsHighchartsLoaded(true)
172
+ }
173
+ }, 0)
174
+ }, [chartData]);
174
175
 
175
176
  return (
176
177
  <>
177
178
  {children ? (
178
179
  <div id={`wrapper-circle-chart-${id}`}>
179
- <HighchartsReact
180
- containerProps={{
181
- className: classnames("pb_circle_chart", globalProps(props)),
182
- id: id,
183
- ...ariaProps,
184
- ...dataProps,
185
- }}
186
- highcharts={Highcharts}
187
- options={options}
188
- />
180
+ {
181
+ isHighchartsLoaded &&
182
+ <HighchartsReact
183
+ containerProps={{
184
+ className: classnames("pb_circle_chart", globalProps(props)),
185
+ id: id,
186
+ ...ariaProps,
187
+ ...dataProps,
188
+ }}
189
+ highcharts={window.Highcharts}
190
+ options={options}
191
+ />
192
+ }
189
193
  <div className="pb-circle-chart-block">{children}</div>
190
194
  </div>
191
195
  ) : (
196
+ isHighchartsLoaded &&
192
197
  <HighchartsReact
193
198
  containerProps={{
194
199
  className: classnames("pb_circle_chart", globalProps(props)),
@@ -196,7 +201,7 @@ const CircleChart = ({
196
201
  ...ariaProps,
197
202
  ...dataProps,
198
203
  }}
199
- highcharts={Highcharts}
204
+ highcharts={window.Highcharts}
200
205
  options={options}
201
206
  />
202
207
  )}
@@ -3,10 +3,263 @@ import typography from '../tokens/exports/_typography.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import Highcharts from 'highcharts'
6
+ //import Highcharts from 'highcharts'
7
7
 
8
8
  const pbButtonHoverColor = '#004ebb'
9
- const highchartsDarkTheme: ThemeProps = {
9
+ // const highchartsDarkTheme: ThemeProps = {
10
+ // lang: {
11
+ // thousandsSep: ',',
12
+ // },
13
+ // colors: [
14
+ // colors.data_1,
15
+ // colors.data_2,
16
+ // colors.data_3,
17
+ // colors.data_4,
18
+ // colors.data_5,
19
+ // colors.data_6,
20
+ // colors.data_7,
21
+ // ],
22
+ // chart: {
23
+ // borderWidth: 0,
24
+ // borderRadius: 0,
25
+ // plotBackgroundColor: null,
26
+ // plotShadow: false,
27
+ // plotBorderWidth: 0,
28
+ // },
29
+ // title: {
30
+ // style: {
31
+ // color: colors.text_dk_default,
32
+ // fontFamily: typography.font_family_base,
33
+ // fontWeight: typography.regular,
34
+ // fontSize: typography.heading_3,
35
+ // },
36
+ // },
37
+ // subtitle: {
38
+ // style: {
39
+ // fontFamily: typography.font_family_base,
40
+ // color: colors.text_dk_light,
41
+ // fontWeight: typography.regular,
42
+ // fontSize: typography.text_base,
43
+ // },
44
+ // },
45
+ // xAxis: {
46
+ // gridLineWidth: 0,
47
+ // lineColor: colors.border_dark,
48
+ // tickColor: colors.border_dark,
49
+ // labels: {
50
+ // style: {
51
+ // fontFamily: typography.font_family_base,
52
+ // color: colors.text_dk_lighter,
53
+ // fontWeight: typography.bold,
54
+ // fontSize: typography.text_smaller,
55
+ // },
56
+ // },
57
+ // title: {
58
+ // style: {
59
+ // color: colors.text_dk_default,
60
+ // fontFamily: typography.font_family_base,
61
+ // fontWeight: typography.regular,
62
+ // fontSize: typography.heading_4,
63
+ // },
64
+ // },
65
+ // },
66
+ // yAxis: {
67
+ // alternateGridColor: null,
68
+ // minorTickInterval: null,
69
+ // gridLineColor: colors.border_dark,
70
+ // minorGridLineColor: colors.border_dark,
71
+ // lineWidth: 0,
72
+ // tickWidth: 0,
73
+ // labels: {
74
+ // style: {
75
+ // fontFamily: typography.font_family_base,
76
+ // color: colors.text_dk_lighter,
77
+ // fontWeight: typography.bold,
78
+ // fontSize: typography.text_smaller,
79
+ // },
80
+ // },
81
+ // title: {
82
+ // style: {
83
+ // fontFamily: typography.font_family_base,
84
+ // color: colors.text_dk_lighter,
85
+ // fontWeight: typography.bold,
86
+ // fontSize: typography.text_smaller,
87
+ // },
88
+ // },
89
+ // },
90
+ // legend: {
91
+ // layout: 'horizontal',
92
+ // align: 'center',
93
+ // verticalAlign: 'bottom',
94
+ // itemStyle: {
95
+ // fontFamily: typography.font_family_base,
96
+ // color: colors.text_dk_light,
97
+ // fontWeight: typography.regular,
98
+ // fontSize: typography.text_smaller,
99
+ // },
100
+ // itemHoverStyle: {
101
+ // color: colors.text_dk_default,
102
+ // },
103
+ // itemHiddenStyle: {
104
+ // color: colors.text_dk_lighter,
105
+ // },
106
+ // },
107
+ // labels: {
108
+ // style: {
109
+ // color: colors.primary,
110
+ // },
111
+ // },
112
+ // tooltip: {
113
+ // backgroundColor: {
114
+ // linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
115
+ // stops: [
116
+ // [0, colors.card_light],
117
+ // [1, colors.card_light],
118
+ // ],
119
+ // },
120
+ // shadow: false,
121
+ // borderWidth: 0,
122
+ // borderRadius: 10,
123
+ // style: {
124
+ // fontFamily: typography.font_family_base,
125
+ // color: colors.text_lt_default,
126
+ // fontWeight: typography.regular,
127
+ // fontSize: typography.text_smaller,
128
+ // },
129
+ // },
130
+ // // specific to gauge
131
+ // // unfilled gauge color
132
+ // pane: {
133
+ // background: {
134
+ // borderColor: colors.border_dark,
135
+ // },
136
+ // },
137
+
138
+ // plotOptions: {
139
+ // series: {
140
+ // borderColor: colors.bg_dark_card,
141
+ // borderWidth: 2,
142
+ // type: 'area',
143
+ // nullColor: colors.text_dk_lighter,
144
+ // fillColor: {
145
+ // linearGradient: {
146
+ // x1: 0,
147
+ // y1: 0,
148
+ // x2: 0,
149
+ // y2: 1,
150
+ // },
151
+ // stops: [
152
+ // [0, Highcharts.getOptions().colors[0]],
153
+ // [1, 'white'],
154
+ // ],
155
+ // },
156
+ // threshold: null,
157
+ // },
158
+ // // PIE STYLES
159
+ // pie: {
160
+ // colors: [
161
+ // colors.data_1,
162
+ // colors.data_2,
163
+ // colors.data_3,
164
+ // colors.data_4,
165
+ // colors.data_5,
166
+ // colors.data_6,
167
+ // colors.data_7,
168
+ // ],
169
+ // dataLabels: {
170
+ // style: {
171
+ // fontFamily: typography.font_family_base,
172
+ // fontSize: typography.text_smaller,
173
+ // color: colors.text_dk_light,
174
+ // fontWeight: typography.regular,
175
+ // },
176
+ // },
177
+ // },
178
+
179
+ // // LINE CHART STYLES
180
+ // line: {
181
+ // dataLabels: {
182
+ // color: colors.text_dk_light,
183
+ // },
184
+ // marker: {
185
+ // lineColor: colors.border_dark,
186
+ // },
187
+ // area: {
188
+ // shadow: false,
189
+ // states: {
190
+ // hover: {
191
+ // lineWidth: 1,
192
+ // },
193
+ // },
194
+ // threshold: null,
195
+ // },
196
+ // },
197
+
198
+ // //TREEMAP CHART STYLES
199
+ // treemap: {
200
+ // layoutAlgorithm: "squarified",
201
+ // allowTraversingTree: false,
202
+ // animationLimit: 1000,
203
+ // colors: [
204
+ // colors.data_1,
205
+ // colors.data_2,
206
+ // colors.data_3,
207
+ // colors.data_4,
208
+ // colors.data_5,
209
+ // colors.data_6,
210
+ // colors.data_7,
211
+ // colors.data_8,
212
+ // ],
213
+ // colorByPoint: true,
214
+ // dataLabels: {
215
+ // enabled: true,
216
+ // style: {
217
+ // fontFamily: typography.font_family_base,
218
+ // fontWeight: typography.bold,
219
+ // fontSize: typography.heading_4,
220
+ // },
221
+ // },
222
+ // levels: [
223
+ // {
224
+ // level: 1,
225
+ // dataLabels: {
226
+ // enabled: false,
227
+ // },
228
+ // },
229
+ // ],
230
+ // traverseUpButton: {
231
+ // position: { y: -50 },
232
+ // text: '< Back',
233
+ // theme: {
234
+ // r: 4,
235
+ // states: {
236
+ // hover: {
237
+ // style: {
238
+ // fill: pbButtonHoverColor,
239
+ // },
240
+ // },
241
+ // },
242
+ // style: {
243
+ // fill: colors.royal,
244
+ // color: colors.white,
245
+ // fontSize: `${typography.text_small}`,
246
+ // fontWeight: typography.bold,
247
+ // fontFamily: `${typography.font_family_base}`,
248
+ // },
249
+ // stroke: colors.royal,
250
+ // height: 24,
251
+ // width: 90,
252
+ // },
253
+ // },
254
+ // },
255
+ // },
256
+ // credits: {
257
+ // enabled: false
258
+ // },
259
+ // }
260
+
261
+ function highchartsDarkTheme(highcharts: any): ThemeProps {
262
+ return {
10
263
  lang: {
11
264
  thousandsSep: ',',
12
265
  },
@@ -149,7 +402,7 @@ const highchartsDarkTheme: ThemeProps = {
149
402
  y2: 1,
150
403
  },
151
404
  stops: [
152
- [0, Highcharts.getOptions().colors[0]],
405
+ [0, highcharts.getOptions().colors[0]],
153
406
  [1, 'white'],
154
407
  ],
155
408
  },
@@ -257,5 +510,6 @@ const highchartsDarkTheme: ThemeProps = {
257
510
  enabled: false
258
511
  },
259
512
  }
513
+ }
260
514
 
261
515
  export { highchartsDarkTheme }