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

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 (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,