playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1579 → 13.12.0.pre.alpha.play1051testhighcharts1580

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;