playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1093typeaheadkitdocbug1577

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
4
- data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
3
+ metadata.gz: d2e75ac2b96498c068416a578e7ffe91d6f97831b1b44e2b80d647fb8ce0c3d1
4
+ data.tar.gz: f9605134e0684d8ba51ab2d6404ec4fd4699269b9fcd5cd714d43275a8f135f7
5
5
  SHA512:
6
- metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
7
- data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7
6
+ metadata.gz: 68ab223d1d4c85efaa3fdf6f2d18661dcf2a7389b79c1df35cdfd150d8594ce2bb3c28bcc10402578dc9dcc59f0eaf08bc0f81b1140de200b3fcd640ee2ed93e
7
+ data.tar.gz: 628889add191c4e59f40a6a9660b6b944f203920f18fa90089d0a5454356bc438f523235df4650b1a5c9de5c27d9af0b8f55bf036b0eca355720043804c5fd1f
@@ -3,6 +3,7 @@ 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";
6
7
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
7
8
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
8
9
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,31 +11,32 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
11
  import classnames from "classnames";
11
12
 
12
13
  type BarGraphProps = {
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 },
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 };
36
37
  };
37
38
 
39
+
38
40
  const BarGraph = ({
39
41
  aria = {},
40
42
  data = {},
@@ -63,6 +65,12 @@ const BarGraph = ({
63
65
  }: BarGraphProps): React.ReactElement => {
64
66
  const ariaProps = buildAriaProps(aria);
65
67
  const dataProps = buildDataProps(data);
68
+ const setupTheme = () => {
69
+ dark
70
+ ? Highcharts.setOptions(highchartsDarkTheme)
71
+ : Highcharts.setOptions(highchartsTheme);
72
+ };
73
+ setupTheme();
66
74
 
67
75
  const staticOptions = {
68
76
  title: {
@@ -115,24 +123,12 @@ const BarGraph = ({
115
123
  }
116
124
 
117
125
  const [options, setOptions] = useState({});
118
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false)
119
126
 
120
127
  useEffect(() => {
121
128
  setOptions({ ...staticOptions });
122
-
123
- const interval = setInterval(() => {
124
- if (window.Highcharts) {
125
- clearInterval(interval)
126
- dark
127
- ? window.Highcharts.setOptions(highchartsDarkTheme)
128
- : window.Highcharts.setOptions(highchartsTheme)
129
- setIsHighchartsLoaded(true)
130
- }
131
- }, 0)
132
129
  }, [chartData]);
133
130
 
134
131
  return (
135
- isHighchartsLoaded &&
136
132
  <HighchartsReact
137
133
  containerProps={{
138
134
  className: classnames(globalProps(props), className),
@@ -140,7 +136,7 @@ const BarGraph = ({
140
136
  ...ariaProps,
141
137
  ...dataProps,
142
138
  }}
143
- highcharts={window.Highcharts}
139
+ highcharts={Highcharts}
144
140
  options={options}
145
141
  />
146
142
  );
@@ -3,6 +3,8 @@ import classnames from "classnames";
3
3
  import HighchartsReact from "highcharts-react-official";
4
4
  import highchartsMore from "highcharts/highcharts-more";
5
5
 
6
+ import Highcharts from "highcharts";
7
+
6
8
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
7
9
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
8
10
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -10,35 +12,35 @@ import { globalProps } from "../utilities/globalProps";
10
12
  import { buildAriaProps, buildDataProps } from "../utilities/props";
11
13
 
12
14
  type CircleChartProps = {
13
- align?: "left" | "right" | "center",
14
- aria: { [key: string]: string },
15
- chartData?: [],
16
- children?: Node,
17
- className?: string,
18
- colors?: string[],
19
- dark?: Boolean,
20
- data?: Object,
21
- dataLabelHtml?: string,
22
- dataLabels?: boolean,
23
- height?: string,
24
- id?: string,
25
- innerSize?: "sm" | "md" | "lg" | "none",
26
- legend?: boolean,
27
- maxPointSize?: number,
28
- minPointSize?: number,
29
- rounded?: boolean,
30
- startAngle?: number,
31
- style?: string,
32
- title?: string,
33
- tooltipHtml: string,
34
- useHtml?: boolean,
35
- zMin?: number,
36
- layout?: "horizontal" | "vertical" | "proximate",
37
- verticalAlign?: "top" | "middle" | "bottom",
38
- x?: number,
39
- y?: number,
40
- borderColor?: string,
41
- borderWidth?: number,
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;
42
44
  };
43
45
 
44
46
  // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -88,11 +90,29 @@ const CircleChart = ({
88
90
  }: CircleChartProps) => {
89
91
  const ariaProps = buildAriaProps(aria);
90
92
  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
+
91
110
  const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
92
- const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
111
+ const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
112
+ innerSizes[size];
113
+
93
114
 
94
115
  const [options, setOptions] = useState({});
95
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
96
116
 
97
117
  useEffect(() => {
98
118
  const formattedChartData = chartData.map((obj: any) => {
@@ -149,50 +169,26 @@ const CircleChart = ({
149
169
  credits: false,
150
170
  };
151
171
  setOptions({ ...staticOptions });
152
-
153
- const interval = setInterval(() => {
154
- if (window.Highcharts) {
155
- clearInterval(interval)
156
- dark
157
- ? window.Highcharts.setOptions(highchartsDarkTheme)
158
- : window.Highcharts.setOptions(highchartsTheme)
159
-
160
- highchartsMore(window.Highcharts);
161
-
162
- window.Highcharts.setOptions({
163
- tooltip: {
164
- headerFormat: null,
165
- pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
166
- useHTML: useHtml,
167
- },
168
- });
169
-
170
- setIsHighchartsLoaded(true)
171
- }
172
- }, 0)
173
172
  }, [chartData]);
174
173
 
174
+
175
175
  return (
176
176
  <>
177
177
  {children ? (
178
178
  <div id={`wrapper-circle-chart-${id}`}>
179
- {
180
- isHighchartsLoaded &&
181
- <HighchartsReact
182
- containerProps={{
183
- className: classnames("pb_circle_chart", globalProps(props)),
184
- id: id,
185
- ...ariaProps,
186
- ...dataProps,
187
- }}
188
- highcharts={window.Highcharts}
189
- options={options}
190
- />
191
- }
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
+ />
192
189
  <div className="pb-circle-chart-block">{children}</div>
193
190
  </div>
194
191
  ) : (
195
- isHighchartsLoaded &&
196
192
  <HighchartsReact
197
193
  containerProps={{
198
194
  className: classnames("pb_circle_chart", globalProps(props)),
@@ -200,7 +196,7 @@ const CircleChart = ({
200
196
  ...ariaProps,
201
197
  ...dataProps,
202
198
  }}
203
- highcharts={window.Highcharts}
199
+ highcharts={Highcharts}
204
200
  options={options}
205
201
  />
206
202
  )}
@@ -1,6 +1,7 @@
1
1
  import React, { useState, useEffect } from "react";
2
2
  import classnames from "classnames";
3
3
  import HighchartsReact from "highcharts-react-official";
4
+ import Highcharts from "highcharts";
4
5
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
5
6
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
6
7
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -13,26 +14,26 @@ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
13
14
  import { globalProps } from "../utilities/globalProps";
14
15
 
15
16
  type GaugeProps = {
16
- aria: { [key: string]: string },
17
- className?: string,
18
- chartData?: { name: string, value: number[] | number }[],
19
- dark?: Boolean,
20
- data?: { [key: string]: string },
21
- disableAnimation?: boolean,
22
- fullCircle?: boolean,
23
- height?: string,
24
- id?: string,
25
- max?: number,
26
- min?: number,
27
- prefix?: string,
28
- showLabels?: boolean,
29
- style?: string,
30
- suffix?: string,
31
- title?: string,
32
- tooltipHtml?: string,
33
- colors: string[],
34
- minorTickInterval: any,
35
- circumference: number[],
17
+ aria: { [key: string]: string };
18
+ className?: string;
19
+ chartData?: { name: string; value: number[] | number }[];
20
+ dark?: Boolean;
21
+ data?: { [key: string]: string };
22
+ disableAnimation?: boolean;
23
+ fullCircle?: boolean;
24
+ height?: string;
25
+ id?: string;
26
+ max?: number;
27
+ min?: number;
28
+ prefix?: string;
29
+ showLabels?: boolean;
30
+ style?: string;
31
+ suffix?: string;
32
+ title?: string;
33
+ tooltipHtml?: string;
34
+ colors: string[];
35
+ minorTickInterval: any;
36
+ circumference: number[];
36
37
  };
37
38
 
38
39
  const Gauge = ({
@@ -61,13 +62,28 @@ const Gauge = ({
61
62
  }: GaugeProps) => {
62
63
  const ariaProps = buildAriaProps(aria);
63
64
  const dataProps = buildDataProps(data);
65
+ highchartsMore(Highcharts);
66
+ solidGauge(Highcharts);
67
+ const setupTheme = () => {
68
+ dark
69
+ ? Highcharts.setOptions(highchartsDarkTheme)
70
+ : Highcharts.setOptions(highchartsTheme);
71
+ };
72
+ setupTheme();
73
+
74
+ //set tooltip directly to prevent being overriden by Highcharts defaults
75
+ Highcharts.setOptions({
76
+ tooltip: {
77
+ pointFormat: tooltipHtml,
78
+ followPointer: true,
79
+ },
80
+ });
64
81
 
65
82
  const css = buildCss({
66
83
  pb_gauge_kit: true,
67
84
  });
68
85
 
69
86
  const [options, setOptions] = useState({});
70
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
71
87
 
72
88
  useEffect(() => {
73
89
  const formattedChartData = chartData.map((obj: any) => {
@@ -158,45 +174,18 @@ const Gauge = ({
158
174
 
159
175
  setOptions({ ...staticOptions });
160
176
 
161
- const interval = setInterval(() => {
162
- if (window.Highcharts) {
163
- clearInterval(interval)
164
-
165
- const gaugeInterval = setInterval(() => {
166
- if (document.querySelector(".prefix")) {
167
- clearInterval(gaugeInterval)
168
- document.querySelectorAll(".prefix").forEach((prefix) => {
169
- prefix.setAttribute("y", "28");
170
- });
171
- document
172
- .querySelectorAll(".fix")
173
- .forEach((fix) => fix.setAttribute("y", "38"));
174
- }
175
- }, 0)
176
-
177
- dark
178
- ? window.Highcharts.setOptions(highchartsDarkTheme)
179
- : window.Highcharts.setOptions(highchartsTheme)
180
-
181
- highchartsMore(window.Highcharts);
182
- solidGauge(window.Highcharts);
183
-
184
- //set tooltip directly to prevent being overriden by window.Highcharts defaults
185
- window.Highcharts.setOptions({
186
- tooltip: {
187
- pointFormat: tooltipHtml,
188
- followPointer: true,
189
- },
190
- });
191
-
192
- setIsHighchartsLoaded(true)
193
- }
194
- }, 0)
177
+ if (document.querySelector(".prefix")) {
178
+ document.querySelectorAll(".prefix").forEach((prefix) => {
179
+ prefix.setAttribute("y", "28");
180
+ });
181
+ document
182
+ .querySelectorAll(".fix")
183
+ .forEach((fix) => fix.setAttribute("y", "38"));
184
+ }
195
185
 
196
186
  }, [chartData]);
197
187
 
198
188
  return (
199
- isHighchartsLoaded &&
200
189
  <HighchartsReact
201
190
  containerProps={{
202
191
  className: classnames(css, globalProps(props)),
@@ -204,7 +193,7 @@ const Gauge = ({
204
193
  ...ariaProps,
205
194
  ...dataProps,
206
195
  }}
207
- highcharts={window.Highcharts}
196
+ highcharts={Highcharts}
208
197
  options={options}
209
198
  />
210
199
  );
@@ -4,38 +4,39 @@ import { globalProps } from "../utilities/globalProps";
4
4
  import { buildAriaProps, buildDataProps } from "../utilities/props";
5
5
 
6
6
  import HighchartsReact from "highcharts-react-official";
7
+ import Highcharts from "highcharts";
7
8
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
9
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
10
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
11
 
11
12
  type LineGraphProps = {
12
- align?: "left" | "right" | "center",
13
- axisTitle?: string,
14
- dark?: Boolean,
15
- xAxisCategories: [],
16
- yAxisMin: number,
17
- yAxisMax: number,
18
- className?: string,
13
+ align?: "left" | "right" | "center";
14
+ axisTitle?: string;
15
+ dark?: Boolean;
16
+ xAxisCategories: [];
17
+ yAxisMin: number;
18
+ yAxisMax: number;
19
+ className?: string;
19
20
  chartData: {
20
- name: string,
21
- data: number[],
22
- }[],
23
- gradient?: boolean,
24
- id: string,
25
- pointStart: number,
26
- subTitle?: string,
27
- title: string,
28
- type?: string,
29
- legend?: boolean,
30
- toggleLegendClick?: boolean,
31
- height?: string,
32
- colors: string[],
33
- layout?: "horizontal" | "vertical" | "proximate",
34
- verticalAlign?: "top" | "middle" | "bottom",
35
- x?: number,
36
- y?: number,
37
- aria?: { [key: string]: string },
38
- data?: { [key: string]: string },
21
+ name: string;
22
+ data: number[];
23
+ }[];
24
+ gradient?: boolean;
25
+ id: string;
26
+ pointStart: number;
27
+ subTitle?: string;
28
+ title: string;
29
+ type?: string;
30
+ legend?: boolean;
31
+ toggleLegendClick?: boolean;
32
+ height?: string;
33
+ colors: string[];
34
+ layout?: "horizontal" | "vertical" | "proximate";
35
+ verticalAlign?: "top" | "middle" | "bottom";
36
+ x?: number;
37
+ y?: number;
38
+ aria?: { [key: string]: string };
39
+ data?: { [key: string]: string };
39
40
  };
40
41
 
41
42
  const LineGraph = ({
@@ -67,6 +68,12 @@ const LineGraph = ({
67
68
  }: LineGraphProps) => {
68
69
  const ariaProps = buildAriaProps(aria);
69
70
  const dataProps = buildDataProps(data);
71
+ const setupTheme = () => {
72
+ dark
73
+ ? Highcharts.setOptions(highchartsDarkTheme)
74
+ : Highcharts.setOptions(highchartsTheme);
75
+ };
76
+ setupTheme();
70
77
 
71
78
  const staticOptions = {
72
79
  title: {
@@ -119,24 +126,12 @@ const LineGraph = ({
119
126
  }
120
127
 
121
128
  const [options, setOptions] = useState({});
122
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
123
129
 
124
130
  useEffect(() => {
125
131
  setOptions({ ...staticOptions });
126
-
127
- const interval = setInterval(() => {
128
- if (window.Highcharts) {
129
- clearInterval(interval)
130
- dark
131
- ? window.Highcharts.setOptions(highchartsDarkTheme)
132
- : window.Highcharts.setOptions(highchartsTheme)
133
- setIsHighchartsLoaded(true)
134
- }
135
- }, 0)
136
132
  }, [chartData]);
137
133
 
138
134
  return (
139
- isHighchartsLoaded &&
140
135
  <HighchartsReact
141
136
  containerProps={{
142
137
  className: classnames(globalProps(props), className),
@@ -144,7 +139,7 @@ const LineGraph = ({
144
139
  ...ariaProps,
145
140
  ...dataProps,
146
141
  }}
147
- highcharts={window.Highcharts}
142
+ highcharts={Highcharts}
148
143
  options={options}
149
144
  />
150
145
  );
@@ -5,6 +5,7 @@ import { globalProps } from "../utilities/globalProps";
5
5
  import { buildAriaProps, buildDataProps } from "../utilities/props";
6
6
 
7
7
  import HighchartsReact from "highcharts-react-official";
8
+ import Highcharts from "highcharts";
8
9
  import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
10
  import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
11
  import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -12,24 +13,24 @@ import treemap from 'highcharts/modules/treemap'
12
13
 
13
14
  type TreemapChartProps = {
14
15
  chartData: {
15
- name: string,
16
- parent?: string | number,
17
- value: number,
18
- color?: string,
19
- id?: string | number,
20
- }[],
21
- className?: string,
22
- colors: string[],
23
- dark?: boolean,
24
- drillable: boolean,
25
- grouped: boolean,
26
- height?: string,
27
- id: number | string,
28
- title?: string,
29
- tooltipHtml: string,
30
- type?: string,
31
- aria?: { [key: string]: string },
32
- data?: { [key: string]: string },
16
+ name: string;
17
+ parent?: string | number;
18
+ value: number;
19
+ color?: string;
20
+ id?: string | number;
21
+ }[];
22
+ className?: string;
23
+ colors: string[];
24
+ dark?: boolean;
25
+ drillable: boolean;
26
+ grouped: boolean;
27
+ height?: string;
28
+ id: number | string;
29
+ title?: string;
30
+ tooltipHtml: string;
31
+ type?: string;
32
+ aria?: { [key: string]: string };
33
+ data?: { [key: string]: string };
33
34
  };
34
35
 
35
36
  const TreemapChart = ({
@@ -49,6 +50,13 @@ const TreemapChart = ({
49
50
  }: TreemapChartProps) => {
50
51
  const ariaProps = buildAriaProps(aria);
51
52
  const dataProps = buildDataProps(data);
53
+ const setupTheme = () => {
54
+ dark
55
+ ? Highcharts.setOptions(highchartsDarkTheme)
56
+ : Highcharts.setOptions(highchartsTheme);
57
+ };
58
+ treemap(Highcharts)
59
+ setupTheme();
52
60
 
53
61
  const staticOptions = {
54
62
  title: {
@@ -80,26 +88,13 @@ const TreemapChart = ({
80
88
  };
81
89
 
82
90
  const [options, setOptions] = useState({});
83
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
84
91
 
85
92
  useEffect(() => {
93
+
86
94
  setOptions({ ...staticOptions });
87
-
88
- const interval = setInterval(() => {
89
- if (window.Highcharts) {
90
- clearInterval(interval)
91
- dark
92
- ? window.Highcharts.setOptions(highchartsDarkTheme)
93
- : window.Highcharts.setOptions(highchartsTheme)
94
-
95
- treemap(window.Highcharts)
96
- setIsHighchartsLoaded(true)
97
- }
98
- }, 0)
99
95
  }, [chartData]);
100
96
 
101
97
  return (
102
- isHighchartsLoaded &&
103
98
  <HighchartsReact
104
99
  containerProps={{
105
100
  className: classnames(globalProps(props), "pb_treemap_chart"),
@@ -107,7 +102,7 @@ const TreemapChart = ({
107
102
  ...ariaProps,
108
103
  ...dataProps,
109
104
  }}
110
- highcharts={window.Highcharts}
105
+ highcharts={Highcharts}
111
106
  options={options}
112
107
  />
113
108
  );
@@ -70,8 +70,8 @@ const TypeaheadWithHighlight = (props) => {
70
70
  }
71
71
 
72
72
  const customComponents = {
73
- Option: (props: OptionProps) => (
74
- <components.Option {...props}/>
73
+ Option: (highlightProps: OptionProps) => (
74
+ <components.Option {...highlightProps}/>
75
75
  ),
76
76
  SingleValue: ({ data }: any) => (
77
77
  <span>{data.name}</span>