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
data/app/pb_kits/playbook/pb_gauge/_gauge.tsx CHANGED
@@ -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";
12
-
13
- import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
14
- import { globalProps } from "../utilities/globalProps";
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
- };
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);
65
-
66
- const css = buildCss({
67
- pb_gauge_kit: true,
68
- });
69
-
70
- const [options, setOptions] = useState({});
71
- const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
72
-
73
- useEffect(() => {
74
- const formattedChartData = chartData.map((obj: any) => {
75
- obj.y = obj.value;
76
- delete obj.value;
77
- return obj;
78
- });
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.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.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
-
160
- setOptions({ ...staticOptions });
161
-
162
- const interval = setInterval(() => {
163
- if (window.Highcharts) {
164
- clearInterval(interval)
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)
177
-
178
- dark
179
- ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
180
- : window.Highcharts.setOptions(highchartsTheme)
181
-
182
- highchartsMore(window.Highcharts);
183
- solidGauge(window.Highcharts);
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
- });
192
-
193
- setIsHighchartsLoaded(true)
194
- }
195
- }, 0)
196
-
197
- }, [chartData]);
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
- };
213
-
214
- export default Gauge;
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
+
13
+ // import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
14
+ // import { globalProps } from "../utilities/globalProps";
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
+ // };
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);
65
+
66
+ // const css = buildCss({
67
+ // pb_gauge_kit: true,
68
+ // });
69
+
70
+ // const [options, setOptions] = useState({});
71
+ // const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
72
+
73
+ // useEffect(() => {
74
+ // const formattedChartData = chartData.map((obj: any) => {
75
+ // obj.y = obj.value;
76
+ // delete obj.value;
77
+ // return obj;
78
+ // });
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
+ // };
159
+
160
+ // setOptions({ ...staticOptions });
161
+
162
+ // const interval = setInterval(() => {
163
+ // if (window.Highcharts) {
164
+ // clearInterval(interval)
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)
177
+
178
+ // dark
179
+ // ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
180
+ // : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
181
+
182
+ // highchartsMore(window.Highcharts);
183
+ // solidGauge(window.Highcharts);
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
+ // });
192
+
193
+ // setIsHighchartsLoaded(true)
194
+ // }
195
+ // }, 0)
196
+
197
+ // }, [chartData]);
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
+ // };
213
+
214
+ // export default Gauge;
data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx CHANGED
@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
12
  type LineGraphProps = {
13
13
  align?: "left" | "right" | "center",
14
14
  axisTitle?: string,
15
- dark?: boolean,
15
+ dark?: Boolean,
16
16
  xAxisCategories: [],
17
17
  yAxisMin: number,
18
18
  yAxisMax: number,
@@ -101,7 +101,7 @@ const LineGraph = ({
101
101
  colors:
102
102
  colors !== undefined && colors.length > 0
103
103
  ? mapColors(colors)
104
- : highchartsTheme.colors,
104
+ : highchartsTheme(window.Highcharts).colors,
105
105
  plotOptions: {
106
106
  series: {
107
107
  pointStart: pointStart,
@@ -130,7 +130,7 @@ const LineGraph = ({
130
130
  clearInterval(interval)
131
131
  dark
132
132
  ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
133
- : window.Highcharts.setOptions(highchartsTheme)
133
+ : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
134
134
  setIsHighchartsLoaded(true)
135
135
  }
136
136
  }, 0)
data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ // /* eslint-disable */
1
2
  // import React, { useState, useEffect } from "react";
2
3
  // import classnames from "classnames";
3
4
 
@@ -74,7 +75,7 @@
74
75
  // colors:
75
76
  // colors !== undefined && colors.length > 0
76
77
  // ? mapColors(colors)
77
- // : highchartsTheme.colors,
78
+ // : highchartsTheme(window.Highcharts).colors,
78
79
  // },
79
80
  // },
80
81
  // };
@@ -90,7 +91,7 @@
90
91
  // clearInterval(interval)
91
92
  // dark
92
93
  // ? window.Highcharts.setOptions(highchartsDarkTheme(window.Highcharts))
93
- // : window.Highcharts.setOptions(highchartsTheme)
94
+ // : window.Highcharts.setOptions(highchartsTheme(window.Highcharts))
94
95
 
95
96
  // treemap(window.Highcharts)
96
97
  // setIsHighchartsLoaded(true)
data/app/pb_kits/playbook/playbook-doc.js CHANGED
@@ -16,7 +16,7 @@ import * as ButtonToolbar from 'pb_button_toolbar/docs'
16
16
  import * as Caption from 'pb_caption/docs'
17
17
  import * as Card from 'pb_card/docs'
18
18
  import * as Checkbox from 'pb_checkbox/docs'
19
- import * as CircleChart from 'pb_circle_chart/docs'
19
+ //import * as CircleChart from 'pb_circle_chart/docs'
20
20
  import * as CircleIconButton from 'pb_circle_icon_button/docs'
21
21
  import * as Collapsible from 'pb_collapsible/docs'
22
22
  import * as Contact from 'pb_contact/docs'
@@ -117,7 +117,7 @@ WebpackerReact.registerComponents({
117
117
  ...Caption,
118
118
  ...Card,
119
119
  ...Checkbox,
120
- ...CircleChart,
120
+ //...CircleChart,
121
121
  ...CircleIconButton,
122
122
  ...Collapsible,
123
123
  ...Contact,
data/app/pb_kits/playbook/playbook-rails-react-bindings.js CHANGED
@@ -4,7 +4,7 @@ import WebpackerReact from 'webpacker-react'
4
4
  import ujs from 'webpacker-react/ujs'
5
5
 
6
6
  import BarGraph from './pb_bar_graph/_bar_graph'
7
- import CircleChart from './pb_circle_chart/_circle_chart'
7
+ //import CircleChart from './pb_circle_chart/_circle_chart'
8
8
  import Dialog from './pb_dialog/_dialog'
9
9
  import DialogBody from './pb_dialog/child_kits/_dialog_body'
10
10
  import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
@@ -22,7 +22,7 @@ import PhoneNumberInput from './pb_phone_number_input/_phone_number_input'
22
22
 
23
23
  WebpackerReact.registerComponents({
24
24
  BarGraph,
25
- CircleChart,
25
+ //CircleChart,
26
26
  Dialog,
27
27
  DialogBody,
28
28
  DialogFooter,