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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 9c2b4ce61bf5fc3f938857f9915f83616a067a69562ae2924833eb6ac5e2da75
4
- data.tar.gz: 2755dc92ae7e772a348a612cfdda02d42192289e02da3414cd5f98c4810d4437
3
+ metadata.gz: 10cb2f295d9e0684627ef904137f3cfbaaf5b528846bf5d901268f439d3fac39
4
+ data.tar.gz: 649d3c714cb9151aafe3cf3955bfb87c63fa0ad6755172fef5c8c3f6ec36be56
5
5
  SHA512:
6
- metadata.gz: 74ed210aa99e0e1eed92e4b811395e4cfbb01a1d104ea4e16e51377a0aa56a20af3c0cc5c39aa5e47eeca0a001536643d0106a5c0371f61fd54766116fef3ce5
7
- data.tar.gz: a80415582692f3d011014a04c80d6786c84f75585691cf5c19640645a21722029e801570d153adbc947dfbff4ef48e6b5d01aef8c3f1817fdf8cd169cefc9db6
6
+ metadata.gz: 28e31273f03b39aa8aa1544337d0892665b91b889c360b927312ee743ad53cb5b2e395782b2c98eb90d51501b11eacf171211bbd926748a0821a0ef4b7be8442
7
+ data.tar.gz: 62ce7c77a8916c9164732f11101f0e879b078f39c023cb059ad6a3b3ac907fd605848b6457b9d5718118cb7c08ba0e8d09d1122933a7de3199c29d5458760340
@@ -17,7 +17,7 @@ export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
17
17
  export { default as Caption } from './pb_caption/_caption'
18
18
  export { default as Card } from './pb_card/_card'
19
19
  export { default as Checkbox } from './pb_checkbox/_checkbox'
20
- //export { default as CircleChart } from './pb_circle_chart/_circle_chart'
20
+ export { default as CircleChart } from './pb_circle_chart/_circle_chart'
21
21
  export { default as CircleIconButton } from './pb_circle_icon_button/_circle_icon_button'
22
22
  export { default as Collapsible } from './pb_collapsible/_collapsible'
23
23
  export { default as Contact } from './pb_contact/_contact'
@@ -41,7 +41,7 @@ export { default as Flex } from './pb_flex/_flex'
41
41
  export { default as FlexItem } from './pb_flex/_flex_item'
42
42
  export { default as FormGroup } from './pb_form_group/_form_group'
43
43
  export { default as FormPill } from './pb_form_pill/_form_pill'
44
- //export { default as Gauge } from './pb_gauge/_gauge'
44
+ export { default as Gauge } from './pb_gauge/_gauge'
45
45
  export { default as Hashtag } from './pb_hashtag/_hashtag'
46
46
  export { default as Highlight } from './pb_highlight/_highlight'
47
47
  export { default as HomeAddressStreet } from './pb_home_address_street/_home_address_street'
@@ -105,7 +105,7 @@ export { default as TitleCount } from './pb_title_count/_title_count'
105
105
  export { default as TitleDetail } from './pb_title_detail/_title_detail'
106
106
  export { default as Toggle } from './pb_toggle/_toggle'
107
107
  export { default as Tooltip } from './pb_tooltip/_tooltip'
108
- //export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
108
+ export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
109
109
  export { default as Typeahead } from './pb_typeahead/_typeahead'
110
110
  export { default as User } from './pb_user/_user'
111
111
  export { default as UserBadge } from './pb_user_badge/_user_badge'
@@ -1,212 +1,212 @@
1
- // /* eslint-disable */
2
- // import React, { useEffect, useState } from "react";
3
- // import classnames from "classnames";
4
- // import HighchartsReact from "highcharts-react-official";
5
- // import highchartsMore from "highcharts/highcharts-more";
1
+ /* eslint-disable */
2
+ import React, { useEffect, useState } from "react";
3
+ import classnames from "classnames";
4
+ import HighchartsReact from "highcharts-react-official";
5
+ import highchartsMore from "highcharts/highcharts-more";
6
6
 
7
- // import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
- // import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
- // import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
- // import { globalProps } from "../utilities/globalProps";
11
- // import { buildAriaProps, buildDataProps } from "../utilities/props";
7
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
+ import { globalProps } from "../utilities/globalProps";
11
+ import { buildAriaProps, buildDataProps } from "../utilities/props";
12
12
 
13
- // type CircleChartProps = {
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?: Object,
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,
43
- // };
13
+ type CircleChartProps = {
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?: Object,
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,
43
+ };
44
44
 
45
- // // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
46
- // const alignBlockElement = (event: any) => {
47
- // const itemToMove = document.querySelector(
48
- // `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
49
- // ) as HTMLElement;
50
- // const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
51
- // if (itemToMove !== null) {
52
- // itemToMove.style.height = `${event.target.chartHeight}px`;
53
- // itemToMove.style.width = `${event.target.chartWidth}px`;
54
- // chartContainer.firstChild.before(itemToMove);
55
- // }
56
- // };
45
+ // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
46
+ const alignBlockElement = (event: any) => {
47
+ const itemToMove = document.querySelector(
48
+ `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
49
+ ) as HTMLElement;
50
+ const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
51
+ if (itemToMove !== null) {
52
+ itemToMove.style.height = `${event.target.chartHeight}px`;
53
+ itemToMove.style.width = `${event.target.chartWidth}px`;
54
+ chartContainer.firstChild.before(itemToMove);
55
+ }
56
+ };
57
57
 
58
- // const CircleChart = ({
59
- // align = "center",
60
- // aria = {},
61
- // rounded = false,
62
- // borderColor = rounded ? null : "",
63
- // borderWidth = rounded ? 20 : null,
64
- // chartData,
65
- // children,
66
- // className,
67
- // colors = [],
68
- // dark = false,
69
- // data = {},
70
- // dataLabelHtml = "<div>{point.name}</div>",
71
- // dataLabels = false,
72
- // height,
73
- // id,
74
- // innerSize = "md",
75
- // legend = false,
76
- // maxPointSize = null,
77
- // minPointSize = null,
78
- // startAngle = null,
79
- // style = "pie",
80
- // title,
81
- // tooltipHtml,
82
- // useHtml = false,
83
- // zMin = null,
84
- // layout = "horizontal",
85
- // verticalAlign = "bottom",
86
- // x = 0,
87
- // y = 0,
88
- // ...props
89
- // }: CircleChartProps) => {
90
- // const ariaProps = buildAriaProps(aria);
91
- // const dataProps = buildDataProps(data);
92
- // const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
93
- // const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
58
+ const CircleChart = ({
59
+ align = "center",
60
+ aria = {},
61
+ rounded = false,
62
+ borderColor = rounded ? null : "",
63
+ borderWidth = rounded ? 20 : null,
64
+ chartData,
65
+ children,
66
+ className,
67
+ colors = [],
68
+ dark = false,
69
+ data = {},
70
+ dataLabelHtml = "<div>{point.name}</div>",
71
+ dataLabels = false,
72
+ height,
73
+ id,
74
+ innerSize = "md",
75
+ legend = false,
76
+ maxPointSize = null,
77
+ minPointSize = null,
78
+ startAngle = null,
79
+ style = "pie",
80
+ title,
81
+ tooltipHtml,
82
+ useHtml = false,
83
+ zMin = null,
84
+ layout = "horizontal",
85
+ verticalAlign = "bottom",
86
+ x = 0,
87
+ y = 0,
88
+ ...props
89
+ }: CircleChartProps) => {
90
+ const ariaProps = buildAriaProps(aria);
91
+ const dataProps = buildDataProps(data);
92
+ const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
93
+ const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
94
94
 
95
- // const [options, setOptions] = useState({});
96
- // const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
95
+ const [options, setOptions] = useState({});
96
+ const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
97
97
 
98
- // useEffect(() => {
99
- // const formattedChartData = chartData.map((obj: any) => {
100
- // obj.y = obj.value;
101
- // delete obj.value;
102
- // return obj;
103
- // });
98
+ useEffect(() => {
99
+ const formattedChartData = chartData.map((obj: any) => {
100
+ obj.y = obj.value;
101
+ delete obj.value;
102
+ return obj;
103
+ });
104
104
 
105
- // const staticOptions = {
106
- // title: {
107
- // text: title,
108
- // },
109
- // chart: {
110
- // height: height,
111
- // type: style,
112
- // events: {
113
- // render: (event: any) => alignBlockElement(event),
114
- // redraw: (event: any) => alignBlockElement(event),
115
- // },
116
- // },
105
+ const staticOptions = {
106
+ title: {
107
+ text: title,
108
+ },
109
+ chart: {
110
+ height: height,
111
+ type: style,
112
+ events: {
113
+ render: (event: any) => alignBlockElement(event),
114
+ redraw: (event: any) => alignBlockElement(event),
115
+ },
116
+ },
117
117
 
118
- // legend: {
119
- // align: align,
120
- // verticalAlign: verticalAlign,
121
- // layout: layout,
122
- // x: x,
123
- // y: y,
124
- // },
125
- // plotOptions: {
126
- // pie: {
127
- // colors:
128
- // colors.length > 0 ? mapColors(colors) : highchartsTheme(window.Highcharts).colors,
129
- // dataLabels: {
130
- // enabled: dataLabels,
131
- // connectorShape: "straight",
132
- // connectorWidth: 3,
133
- // format: dataLabelHtml,
134
- // },
135
- // showInLegend: legend,
136
- // },
137
- // },
138
- // series: [
139
- // {
140
- // minPointSize: minPointSize,
141
- // maxPointSize: maxPointSize,
142
- // innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
143
- // data: formattedChartData,
144
- // zMin: zMin,
145
- // startAngle: startAngle,
146
- // borderWidth: borderWidth,
147
- // borderColor: borderColor,
148
- // },
149
- // ],
150
- // credits: false,
151
- // };
152
- // setOptions({ ...staticOptions });
118
+ legend: {
119
+ align: align,
120
+ verticalAlign: verticalAlign,
121
+ layout: layout,
122
+ x: x,
123
+ y: y,
124
+ },
125
+ plotOptions: {
126
+ pie: {
127
+ colors:
128
+ colors.length > 0 ? mapColors(colors) : highchartsTheme(window.Highcharts).colors,
129
+ dataLabels: {
130
+ enabled: dataLabels,
131
+ connectorShape: "straight",
132
+ connectorWidth: 3,
133
+ format: dataLabelHtml,
134
+ },
135
+ showInLegend: legend,
136
+ },
137
+ },
138
+ series: [
139
+ {
140
+ minPointSize: minPointSize,
141
+ maxPointSize: maxPointSize,
142
+ innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
143
+ data: formattedChartData,
144
+ zMin: zMin,
145
+ startAngle: startAngle,
146
+ borderWidth: borderWidth,
147
+ borderColor: borderColor,
148
+ },
149
+ ],
150
+ credits: false,
151
+ };
152
+ setOptions({ ...staticOptions });
153
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(window.Highcharts))
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(window.Highcharts))
160
160
 
161
- // highchartsMore(window.Highcharts);
161
+ highchartsMore(window.Highcharts);
162
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
- // });
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
170
 
171
- // setIsHighchartsLoaded(true)
172
- // }
173
- // }, 0)
174
- // }, [chartData]);
171
+ setIsHighchartsLoaded(true)
172
+ }
173
+ }, 0)
174
+ }, [chartData]);
175
175
 
176
- // return (
177
- // <>
178
- // {children ? (
179
- // <div id={`wrapper-circle-chart-${id}`}>
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
- // }
193
- // <div className="pb-circle-chart-block">{children}</div>
194
- // </div>
195
- // ) : (
196
- // isHighchartsLoaded &&
197
- // <HighchartsReact
198
- // containerProps={{
199
- // className: classnames("pb_circle_chart", globalProps(props)),
200
- // id: id,
201
- // ...ariaProps,
202
- // ...dataProps,
203
- // }}
204
- // highcharts={window.Highcharts}
205
- // options={options}
206
- // />
207
- // )}
208
- // </>
209
- // );
210
- // };
176
+ return (
177
+ <>
178
+ {children ? (
179
+ <div id={`wrapper-circle-chart-${id}`}>
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
+ }
193
+ <div className="pb-circle-chart-block">{children}</div>
194
+ </div>
195
+ ) : (
196
+ isHighchartsLoaded &&
197
+ <HighchartsReact
198
+ containerProps={{
199
+ className: classnames("pb_circle_chart", globalProps(props)),
200
+ id: id,
201
+ ...ariaProps,
202
+ ...dataProps,
203
+ }}
204
+ highcharts={window.Highcharts}
205
+ options={options}
206
+ />
207
+ )}
208
+ </>
209
+ );
210
+ };
211
211
 
212
- // export default CircleChart;
212
+ export default CircleChart;