playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1574 → 13.12.0.pre.alpha.play1051testhighcharts1579

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,214 +1,214 @@
1
- /* eslint-disable */
2
- import React, { useState, useEffect } from "react";
3
- import classnames from "classnames";
4
- import HighchartsReact from "highcharts-react-official";
5
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
6
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
7
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
8
- import highchartsMore from "highcharts/highcharts-more";
9
- import solidGauge from "highcharts/modules/solid-gauge";
10
- import defaultColors from "../tokens/exports/_colors.scss";
11
- import typography from "../tokens/exports/_typography.scss";
1
+ // /* eslint-disable */
2
+ // import React, { useState, useEffect } from "react";
3
+ // import classnames from "classnames";
4
+ // import HighchartsReact from "highcharts-react-official";
5
+ // import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
6
+ // import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
7
+ // import mapColors from "../pb_dashboard/pbChartsColorsHelper";
8
+ // import highchartsMore from "highcharts/highcharts-more";
9
+ // import solidGauge from "highcharts/modules/solid-gauge";
10
+ // import defaultColors from "../tokens/exports/_colors.scss";
11
+ // import typography from "../tokens/exports/_typography.scss";
12
12
 
13
- import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
14
- import { globalProps } from "../utilities/globalProps";
13
+ // import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
14
+ // import { globalProps } from "../utilities/globalProps";
15
15
 
16
- type GaugeProps = {
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[],
37
- };
16
+ // type GaugeProps = {
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[],
37
+ // };
38
38
 
39
- const Gauge = ({
40
- aria = {},
41
- className,
42
- chartData,
43
- dark = false,
44
- data = {},
45
- disableAnimation = false,
46
- fullCircle = false,
47
- height = null,
48
- id,
49
- max = 100,
50
- min = 0,
51
- prefix = "",
52
- showLabels = false,
53
- style = "solidgauge",
54
- suffix = "",
55
- title = "",
56
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
57
- "<b>{point.y}</b>",
58
- colors = [],
59
- minorTickInterval = null,
60
- circumference = fullCircle ? [0, 360] : [-100, 100],
61
- ...props
62
- }: GaugeProps) => {
63
- const ariaProps = buildAriaProps(aria);
64
- const dataProps = buildDataProps(data);
39
+ // const Gauge = ({
40
+ // aria = {},
41
+ // className,
42
+ // chartData,
43
+ // dark = false,
44
+ // data = {},
45
+ // disableAnimation = false,
46
+ // fullCircle = false,
47
+ // height = null,
48
+ // id,
49
+ // max = 100,
50
+ // min = 0,
51
+ // prefix = "",
52
+ // showLabels = false,
53
+ // style = "solidgauge",
54
+ // suffix = "",
55
+ // title = "",
56
+ // tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
57
+ // "<b>{point.y}</b>",
58
+ // colors = [],
59
+ // minorTickInterval = null,
60
+ // circumference = fullCircle ? [0, 360] : [-100, 100],
61
+ // ...props
62
+ // }: GaugeProps) => {
63
+ // const ariaProps = buildAriaProps(aria);
64
+ // const dataProps = buildDataProps(data);
65
65
 
66
- const css = buildCss({
67
- pb_gauge_kit: true,
68
- });
66
+ // const css = buildCss({
67
+ // pb_gauge_kit: true,
68
+ // });
69
69
 
70
- const [options, setOptions] = useState({});
71
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
70
+ // const [options, setOptions] = useState({});
71
+ // const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
72
72
 
73
- useEffect(() => {
74
- const formattedChartData = chartData.map((obj: any) => {
75
- obj.y = obj.value;
76
- delete obj.value;
77
- return obj;
78
- });
73
+ // useEffect(() => {
74
+ // const formattedChartData = chartData.map((obj: any) => {
75
+ // obj.y = obj.value;
76
+ // delete obj.value;
77
+ // return obj;
78
+ // });
79
79
 
80
- const staticOptions = {
81
- chart: {
82
- events: {
83
- load() {
84
- setTimeout(this.reflow.bind(this), 0);
85
- },
86
- },
87
- type: style,
88
- height: height,
89
- },
90
- title: {
91
- text: title,
92
- },
93
- yAxis: {
94
- min: min,
95
- max: max,
96
- lineWidth: 0,
97
- tickWidth: 0,
98
- minorTickInterval: minorTickInterval,
99
- tickAmount: 2,
100
- tickPositions: [min, max],
101
- labels: {
102
- y: 26,
103
- enabled: showLabels,
104
- },
105
- },
106
- credits: false,
107
- series: [
108
- {
109
- data: formattedChartData,
110
- },
111
- ],
112
- pane: {
113
- center: ["50%", "50%"],
114
- size: "90%",
115
- startAngle: circumference[0],
116
- endAngle: circumference[1],
117
- background: {
118
- borderWidth: 20,
119
- innerRadius: "90%",
120
- outerRadius: "90%",
121
- shape: "arc",
122
- className: "gauge-pane",
123
- },
124
- },
125
- colors:
126
- colors !== undefined && colors.length > 0
127
- ? mapColors(colors)
128
- : highchartsTheme(window.Highcharts).colors,
129
- plotOptions: {
130
- series: {
131
- animation: !disableAnimation,
132
- },
133
- solidgauge: {
134
- borderColor:
135
- colors !== undefined && colors.length === 1
136
- ? mapColors(colors).join()
137
- : highchartsTheme(window.Highcharts).colors[0],
138
- borderWidth: 20,
139
- radius: 90,
140
- innerRadius: "90%",
141
- dataLabels: {
142
- borderWidth: 0,
143
- color: defaultColors.text_lt_default,
144
- enabled: true,
145
- format:
146
- `<span class="prefix">${prefix}</span>` +
147
- '<span class="fix">{y:,f}</span>' +
148
- `<span class="suffix">${suffix}</span>`,
149
- style: {
150
- fontFamily: typography.font_family_base,
151
- fontWeight: typography.regular,
152
- fontSize: typography.heading_2,
153
- },
154
- y: -26,
155
- },
156
- },
157
- },
158
- };
80
+ // const staticOptions = {
81
+ // chart: {
82
+ // events: {
83
+ // load() {
84
+ // setTimeout(this.reflow.bind(this), 0);
85
+ // },
86
+ // },
87
+ // type: style,
88
+ // height: height,
89
+ // },
90
+ // title: {
91
+ // text: title,
92
+ // },
93
+ // yAxis: {
94
+ // min: min,
95
+ // max: max,
96
+ // lineWidth: 0,
97
+ // tickWidth: 0,
98
+ // minorTickInterval: minorTickInterval,
99
+ // tickAmount: 2,
100
+ // tickPositions: [min, max],
101
+ // labels: {
102
+ // y: 26,
103
+ // enabled: showLabels,
104
+ // },
105
+ // },
106
+ // credits: false,
107
+ // series: [
108
+ // {
109
+ // data: formattedChartData,
110
+ // },
111
+ // ],
112
+ // pane: {
113
+ // center: ["50%", "50%"],
114
+ // size: "90%",
115
+ // startAngle: circumference[0],
116
+ // endAngle: circumference[1],
117
+ // background: {
118
+ // borderWidth: 20,
119
+ // innerRadius: "90%",
120
+ // outerRadius: "90%",
121
+ // shape: "arc",
122
+ // className: "gauge-pane",
123
+ // },
124
+ // },
125
+ // colors:
126
+ // colors !== undefined && colors.length > 0
127
+ // ? mapColors(colors)
128
+ // : highchartsTheme(window.Highcharts).colors,
129
+ // plotOptions: {
130
+ // series: {
131
+ // animation: !disableAnimation,
132
+ // },
133
+ // solidgauge: {
134
+ // borderColor:
135
+ // colors !== undefined && colors.length === 1
136
+ // ? mapColors(colors).join()
137
+ // : highchartsTheme(window.Highcharts).colors[0],
138
+ // borderWidth: 20,
139
+ // radius: 90,
140
+ // innerRadius: "90%",
141
+ // dataLabels: {
142
+ // borderWidth: 0,
143
+ // color: defaultColors.text_lt_default,
144
+ // enabled: true,
145
+ // format:
146
+ // `<span class="prefix">${prefix}</span>` +
147
+ // '<span class="fix">{y:,f}</span>' +
148
+ // `<span class="suffix">${suffix}</span>`,
149
+ // style: {
150
+ // fontFamily: typography.font_family_base,
151
+ // fontWeight: typography.regular,
152
+ // fontSize: typography.heading_2,
153
+ // },
154
+ // y: -26,
155
+ // },
156
+ // },
157
+ // },
158
+ // };
159
159
 
160
- setOptions({ ...staticOptions });
160
+ // setOptions({ ...staticOptions });
161
161
 
162
- const interval = setInterval(() => {
163
- if (window.Highcharts) {
164
- clearInterval(interval)
162
+ // const interval = setInterval(() => {
163
+ // if (window.Highcharts) {
164
+ // clearInterval(interval)
165
165
 
166
- const gaugeInterval = setInterval(() => {
167
- if (document.querySelector(".prefix")) {
168
- clearInterval(gaugeInterval)
169
- document.querySelectorAll(".prefix").forEach((prefix) => {
170
- prefix.setAttribute("y", "28");
171
- });
172
- document
173
- .querySelectorAll(".fix")
174
- .forEach((fix) => fix.setAttribute("y", "38"));
175
- }
176
- }, 0)
166
+ // const gaugeInterval = setInterval(() => {
167
+ // if (document.querySelector(".prefix")) {
168
+ // clearInterval(gaugeInterval)
169
+ // document.querySelectorAll(".prefix").forEach((prefix) => {
170
+ // prefix.setAttribute("y", "28");
171
+ // });
172
+ // document
173
+ // .querySelectorAll(".fix")
174
+ // .forEach((fix) => fix.setAttribute("y", "38"));
175
+ // }
176
+ // }, 0)
177
177
 
178
- dark
179
- ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
180
- : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
178
+ // dark
179
+ // ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
180
+ // : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
181
181
 
182
- highchartsMore(window.Highcharts);
183
- solidGauge(window.Highcharts);
182
+ // highchartsMore(window.Highcharts);
183
+ // solidGauge(window.Highcharts);
184
184
 
185
- //set tooltip directly to prevent being overriden by window.Highcharts defaults
186
- window.Highcharts.setOptions({
187
- tooltip: {
188
- pointFormat: tooltipHtml,
189
- followPointer: true,
190
- },
191
- });
185
+ // //set tooltip directly to prevent being overriden by window.Highcharts defaults
186
+ // window.Highcharts.setOptions({
187
+ // tooltip: {
188
+ // pointFormat: tooltipHtml,
189
+ // followPointer: true,
190
+ // },
191
+ // });
192
192
 
193
- setIsHighchartsLoaded(true)
194
- }
195
- }, 0)
193
+ // setIsHighchartsLoaded(true)
194
+ // }
195
+ // }, 0)
196
196
 
197
- }, [chartData]);
197
+ // }, [chartData]);
198
198
 
199
- return (
200
- isHighchartsLoaded &&
201
- <HighchartsReact
202
- containerProps={{
203
- className: classnames(css, globalProps(props)),
204
- id: id,
205
- ...ariaProps,
206
- ...dataProps,
207
- }}
208
- highcharts={window.Highcharts}
209
- options={options}
210
- />
211
- );
212
- };
199
+ // return (
200
+ // isHighchartsLoaded &&
201
+ // <HighchartsReact
202
+ // containerProps={{
203
+ // className: classnames(css, globalProps(props)),
204
+ // id: id,
205
+ // ...ariaProps,
206
+ // ...dataProps,
207
+ // }}
208
+ // highcharts={window.Highcharts}
209
+ // options={options}
210
+ // />
211
+ // );
212
+ // };
213
213
 
214
- export default Gauge;
214
+ // export default Gauge;
@@ -1,117 +1,117 @@
1
- /* eslint-disable */
2
- import React, { useState, useEffect } from "react";
3
- import classnames from "classnames";
1
+ // /* eslint-disable */
2
+ // import React, { useState, useEffect } from "react";
3
+ // import classnames from "classnames";
4
4
 
5
- import { globalProps } from "../utilities/globalProps";
6
- import { buildAriaProps, buildDataProps } from "../utilities/props";
5
+ // import { globalProps } from "../utilities/globalProps";
6
+ // import { buildAriaProps, buildDataProps } from "../utilities/props";
7
7
 
8
- import HighchartsReact from "highcharts-react-official";
9
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
10
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
11
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
- import treemap from 'highcharts/modules/treemap'
8
+ // import HighchartsReact from "highcharts-react-official";
9
+ // import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
10
+ // import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
11
+ // import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
+ // import treemap from 'highcharts/modules/treemap'
13
13
 
14
- type TreemapChartProps = {
15
- chartData: {
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 },
34
- };
14
+ // type TreemapChartProps = {
15
+ // chartData: {
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 },
34
+ // };
35
35
 
36
- const TreemapChart = ({
37
- aria = {},
38
- data = {},
39
- chartData,
40
- colors,
41
- dark = false,
42
- drillable = false,
43
- grouped = false,
44
- height,
45
- id,
46
- title = "",
47
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
48
- type = "treemap",
49
- ...props
50
- }: TreemapChartProps) => {
51
- const ariaProps = buildAriaProps(aria);
52
- const dataProps = buildDataProps(data);
36
+ // const TreemapChart = ({
37
+ // aria = {},
38
+ // data = {},
39
+ // chartData,
40
+ // colors,
41
+ // dark = false,
42
+ // drillable = false,
43
+ // grouped = false,
44
+ // height,
45
+ // id,
46
+ // title = "",
47
+ // tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
48
+ // type = "treemap",
49
+ // ...props
50
+ // }: TreemapChartProps) => {
51
+ // const ariaProps = buildAriaProps(aria);
52
+ // const dataProps = buildDataProps(data);
53
53
 
54
- const staticOptions = {
55
- title: {
56
- text: title,
57
- },
58
- chart: {
59
- height: height,
60
- type: type,
61
- },
62
- credits: false,
63
- series: [
64
- {
65
- data: chartData,
66
- },
67
- ],
68
- plotOptions: {
69
- treemap: {
70
- tooltip: {
71
- pointFormat: tooltipHtml,
72
- },
73
- allowTraversingTree: drillable,
74
- colorByPoint: !grouped,
75
- colors:
76
- colors !== undefined && colors.length > 0
77
- ? mapColors(colors)
78
- : highchartsTheme(window.Highcharts).colors,
79
- },
80
- },
81
- };
54
+ // const staticOptions = {
55
+ // title: {
56
+ // text: title,
57
+ // },
58
+ // chart: {
59
+ // height: height,
60
+ // type: type,
61
+ // },
62
+ // credits: false,
63
+ // series: [
64
+ // {
65
+ // data: chartData,
66
+ // },
67
+ // ],
68
+ // plotOptions: {
69
+ // treemap: {
70
+ // tooltip: {
71
+ // pointFormat: tooltipHtml,
72
+ // },
73
+ // allowTraversingTree: drillable,
74
+ // colorByPoint: !grouped,
75
+ // colors:
76
+ // colors !== undefined && colors.length > 0
77
+ // ? mapColors(colors)
78
+ // : highchartsTheme(window.Highcharts).colors,
79
+ // },
80
+ // },
81
+ // };
82
82
 
83
- const [options, setOptions] = useState({});
84
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
83
+ // const [options, setOptions] = useState({});
84
+ // const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
85
85
 
86
- useEffect(() => {
87
- setOptions({ ...staticOptions });
86
+ // useEffect(() => {
87
+ // setOptions({ ...staticOptions });
88
88
 
89
- const interval = setInterval(() => {
90
- if (window.Highcharts) {
91
- clearInterval(interval)
92
- dark
93
- ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
94
- : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
89
+ // const interval = setInterval(() => {
90
+ // if (window.Highcharts) {
91
+ // clearInterval(interval)
92
+ // dark
93
+ // ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
94
+ // : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
95
95
 
96
- treemap(window.Highcharts)
97
- setIsHighchartsLoaded(true)
98
- }
99
- }, 0)
100
- }, [chartData]);
96
+ // treemap(window.Highcharts)
97
+ // setIsHighchartsLoaded(true)
98
+ // }
99
+ // }, 0)
100
+ // }, [chartData]);
101
101
 
102
- return (
103
- isHighchartsLoaded &&
104
- <HighchartsReact
105
- containerProps={{
106
- className: classnames(globalProps(props), "pb_treemap_chart"),
107
- id: id,
108
- ...ariaProps,
109
- ...dataProps,
110
- }}
111
- highcharts={window.Highcharts}
112
- options={options}
113
- />
114
- );
115
- };
102
+ // return (
103
+ // isHighchartsLoaded &&
104
+ // <HighchartsReact
105
+ // containerProps={{
106
+ // className: classnames(globalProps(props), "pb_treemap_chart"),
107
+ // id: id,
108
+ // ...ariaProps,
109
+ // ...dataProps,
110
+ // }}
111
+ // highcharts={window.Highcharts}
112
+ // options={options}
113
+ // />
114
+ // );
115
+ // };
116
116
 
117
- export default TreemapChart;
117
+ // export default TreemapChart;