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.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +3 -3
  3. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +198 -198
  4. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +197 -197
  5. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +106 -106
  6. data/app/pb_kits/playbook/playbook-doc.js +6 -6
  7. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +6 -6
  8. data/dist/playbook-rails.js +7 -7
  9. data/lib/playbook/version.rb +1 -1
  10. metadata +1 -1
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
data/app/pb_kits/playbook/index.js CHANGED
@@ -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'
data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx CHANGED
@@ -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;