playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1579 → 13.12.0.pre.alpha.play1051testhighcharts1580
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +3 -3
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +198 -198
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +197 -197
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +106 -106
- data/app/pb_kits/playbook/playbook-doc.js +6 -6
- data/app/pb_kits/playbook/playbook-rails-react-bindings.js +6 -6
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 10cb2f295d9e0684627ef904137f3cfbaaf5b528846bf5d901268f439d3fac39
|
|
4
|
+
data.tar.gz: 649d3c714cb9151aafe3cf3955bfb87c63fa0ad6755172fef5c8c3f6ec36be56
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
//
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
|
|
96
|
-
|
|
95
|
+
const [options, setOptions] = useState({});
|
|
96
|
+
const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
|
|
97
97
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
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
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
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
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
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
|
-
|
|
161
|
+
highchartsMore(window.Highcharts);
|
|
162
162
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
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
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
171
|
+
setIsHighchartsLoaded(true)
|
|
172
|
+
}
|
|
173
|
+
}, 0)
|
|
174
|
+
}, [chartData]);
|
|
175
175
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
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
|
-
|
|
212
|
+
export default CircleChart;
|