playbook_ui 13.12.0.pre.alpha.play1051highchartstest1567 → 13.12.0.pre.alpha.play1051testhighcharts1579

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +3 -3
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +2 -2
  4. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +199 -199
  5. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +207 -459
  6. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +209 -207
  7. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +214 -214
  8. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +3 -3
  9. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +3 -2
  10. data/app/pb_kits/playbook/playbook-doc.js +2 -2
  11. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -2
  12. data/dist/playbook-rails.js +7 -7
  13. data/lib/playbook/version.rb +1 -1
  14. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ef5bfd872ac45c9283c70342d8e4858b83b17902df462f1f52d1c477a294dd39
4
- data.tar.gz: 29cbb47a5e2045916a9250d8db3a6338df401e284f34955186ebd9722aa0956f
3
+ metadata.gz: 9c2b4ce61bf5fc3f938857f9915f83616a067a69562ae2924833eb6ac5e2da75
4
+ data.tar.gz: 2755dc92ae7e772a348a612cfdda02d42192289e02da3414cd5f98c4810d4437
5
5
  SHA512:
6
- metadata.gz: 899b51e7c5ddaf7f8072761b523f52063bc3c10c6d912d4f6f6f894baef1c6980596ef6f9dbbda3af68c71d669879b6df31c5e5ffd738d56dc48b3b4a161c585
7
- data.tar.gz: db352b4f212fe4592d5bc229ac43bd99eb91f3be0841fdc820002b8323aadb921b802da15db36091cb8f4664f9c2af1551d877fed0c46ae926f0717c1bda2959
6
+ metadata.gz: 74ed210aa99e0e1eed92e4b811395e4cfbb01a1d104ea4e16e51377a0aa56a20af3c0cc5c39aa5e47eeca0a001536643d0106a5c0371f61fd54766116fef3ce5
7
+ data.tar.gz: a80415582692f3d011014a04c80d6786c84f75585691cf5c19640645a21722029e801570d153adbc947dfbff4ef48e6b5d01aef8c3f1817fdf8cd169cefc9db6
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_bar_graph/_bar_graph.tsx CHANGED
@@ -96,7 +96,7 @@ const BarGraph = ({
96
96
  colors:
97
97
  colors !== undefined && colors.length > 0
98
98
  ? mapColors(colors)
99
- : highchartsTheme.colors,
99
+ : highchartsTheme(window.Highcharts).colors,
100
100
  plotOptions: {
101
101
  series: {
102
102
  pointStart: pointStart,
@@ -125,7 +125,7 @@ const BarGraph = ({
125
125
  clearInterval(interval)
126
126
  dark
127
127
  ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
128
- : window.Highcharts.setOptions(highchartsTheme)
128
+ : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
129
129
  setIsHighchartsLoaded(true)
130
130
  }
131
131
  }, 0)
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?: unknown,
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.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)
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
+
161
+ // highchartsMore(window.Highcharts);
160
162
 
161
- highchartsMore(window.Highcharts);
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
+ // });
162
170
 
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
- });
171
+ // setIsHighchartsLoaded(true)
172
+ // }
173
+ // }, 0)
174
+ // }, [chartData]);
170
175
 
171
- setIsHighchartsLoaded(true)
172
- }
173
- }, 0)
174
- }, [chartData]);
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
+ // };
175
211
 
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
-
212
- export default CircleChart;
212
+ // export default CircleChart;