playbook_ui 11.12.0 → 11.12.1.pre.alpha.charts1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +0 -1
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +145 -0
  4. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  5. data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts +2 -0
  6. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +216 -0
  7. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb +9 -21
  8. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +7 -47
  9. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +16 -0
  10. data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.js → pbChartsDarkTheme.ts} +6 -21
  11. data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts} +6 -21
  12. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -0
  13. data/app/pb_kits/playbook/pb_gauge/_gauge.scss +4 -0
  14. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +213 -0
  15. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +1 -1
  16. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +8 -8
  17. data/app/pb_kits/playbook/pb_gauge/gauge.html.erb +1 -11
  18. data/app/pb_kits/playbook/pb_gauge/gauge.rb +3 -8
  19. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +148 -0
  20. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +111 -0
  21. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +1 -1
  22. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -0
  23. data/app/pb_kits/playbook/playbook-rails.js +0 -4
  24. data/lib/playbook/version.rb +2 -2
  25. metadata +14 -12
  26. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +0 -111
  27. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +0 -151
  28. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -112
  29. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +0 -113
  30. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
  31. data/app/pb_kits/playbook/plugins/pb_chart.js +0 -322
@@ -1,322 +0,0 @@
1
- import Highcharts from 'highcharts'
2
-
3
- import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
4
- import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
5
- import colors from '../tokens/exports/_colors.scss'
6
-
7
- import pie from 'highcharts/modules/variable-pie'
8
- import highchartsMore from 'highcharts/highcharts-more'
9
- import solidGauge from 'highcharts/modules/solid-gauge'
10
- import treemap from 'highcharts/modules/treemap'
11
-
12
- pie(Highcharts)
13
-
14
- // Map Data Color String Props to our SCSS Variables
15
-
16
- const mapColors = (array) => {
17
- const regex = /(data)\-[1-8]/ //eslint-disable-line
18
-
19
- const newArray = array.map((item) => {
20
- return regex.test(item)
21
- ? `${colors[`data_${item[item.length - 1]}`]}`
22
- : item
23
- })
24
- return newArray
25
- }
26
-
27
- // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
28
- const alignBlockElement = (event) => {
29
- const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
30
- const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
31
- if (itemToMove !== null) {
32
- itemToMove.style.height = `${event.target.chartHeight}px`
33
- itemToMove.style.width = `${event.target.chartWidth}px`;
34
- (chartContainer.firstChild).before(itemToMove)
35
- }
36
- }
37
-
38
- class pbChart {
39
- defaults = {
40
- callbackInitializeBefore: () => {},
41
- callbackInitializeAfter: () => {},
42
- callbackRefreshBefore: () => {},
43
- callbackRefreshAfter: () => {},
44
- callbackDestroyBefore: () => {},
45
- callbackDestroyAfter: () => {},
46
- property: 'Value',
47
- }
48
-
49
- extendDefaults(defaults, options) {
50
- for (const property in options) {
51
- if (Object.prototype.hasOwnProperty.call(options, property)) {
52
- defaults[property] = options[property]
53
- }
54
- }
55
- return defaults
56
- }
57
-
58
- constructor(element, options) {
59
- this.element = element
60
- this.options = options
61
- this.settings = this.extendDefaults(this.defaults, options)
62
-
63
- if (this.options.type == 'variablepie' || this.options.type == 'pie'){
64
- this.setupPieChart(options)
65
- } else if (this.options.type == 'gauge') {
66
- this.setupGauge(options)
67
- } else if (this.options.type == 'treemap') {
68
- this.setupTreemap(options)
69
- } else {
70
- this.setupChart(options)
71
- }
72
- }
73
-
74
- setupTheme() {
75
- this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme)
76
- }
77
-
78
- setupGauge(options) {
79
- highchartsMore(Highcharts)
80
- solidGauge(Highcharts)
81
- this.setupTheme()
82
-
83
- Highcharts.chart(this.defaults.id, {
84
- chart: {
85
- events: {
86
- load() {
87
- setTimeout(this.reflow.bind(this), 0)
88
- },
89
- },
90
- type: this.defaults.style,
91
- height: this.defaults.height,
92
- },
93
- title: {
94
- text: this.defaults.title,
95
- },
96
- yAxis: {
97
- min: this.defaults.min,
98
- max: this.defaults.max,
99
- lineWidth: 0,
100
- tickWidth: 0,
101
- minorTickInterval: null,
102
- tickAmount: 2,
103
- tickPositions: [this.defaults.min, this.defaults.max],
104
- labels: {
105
- y: 26,
106
- enabled: this.defaults.showLabels,
107
- },
108
- },
109
- credits: false,
110
- series: [
111
- {
112
- data: this.defaults.chartData,
113
- },
114
- ],
115
- pane: {
116
- center: ['50%', '50%'],
117
- size: '90%',
118
- startAngle: this.defaults.circumference[0],
119
- endAngle: this.defaults.circumference[1],
120
- background: {
121
- borderWidth: 20,
122
- innerRadius: '90%',
123
- outerRadius: '90%',
124
- shape: 'arc',
125
- className: 'gauge-pane',
126
- },
127
- },
128
- tooltip: {
129
- headerFormat: '',
130
- pointFormat: this.defaults.tooltipHtml,
131
- followPointer: true,
132
- },
133
- colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
134
- plotOptions: {
135
- series: {
136
- animation: !this.defaults.disableAnimation,
137
- },
138
- solidgauge: {
139
- borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
140
- dataLabels: {
141
- format: `<span class="prefix">${this.defaults.prefix}</span>` +
142
- '<span class="fix">{y:,f}</span>' +
143
- `<span class="suffix">${this.defaults.suffix}</span>`,
144
- } },
145
- },
146
- },
147
- )
148
- document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
149
- if (document.querySelector('.prefix')) {
150
- document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
151
- document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
152
- }
153
- }
154
-
155
- setupPieChart(options) {
156
- this.setupTheme()
157
- Highcharts.chart(this.defaults.id, {
158
- title: {
159
- text: this.defaults.title,
160
- },
161
- chart: {
162
- height: this.defaults.height,
163
- type: this.defaults.type,
164
- events: {
165
- render: (event) => alignBlockElement(event),
166
- redraw: (event) => alignBlockElement(event),
167
- },
168
- },
169
-
170
- legend: {
171
- align: this.defaults.align,
172
- verticalAlign: this.defaults.verticalAlign,
173
- layout: this.defaults.layout,
174
- x: this.defaults.x,
175
- y: this.defaults.y,
176
- },
177
-
178
- plotOptions: {
179
- pie: {
180
- colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
181
- dataLabels: {
182
- enabled: this.defaults.dataLabels,
183
- connectorShape: 'straight',
184
- connectorWidth: 3,
185
- format: this.defaults.dataLabelHtml,
186
- },
187
- showInLegend: this.defaults.showInLegend,
188
- },
189
- },
190
-
191
- tooltip: {
192
- headerFormat: this.defaults.headerFormat,
193
- pointFormat: this.defaults.tooltipHtml,
194
- useHTML: this.defaults.useHTML,
195
- },
196
- series: [{
197
- minPointSize: this.defaults.minPointSize,
198
- maxPointSize: this.defaults.maxPointSize,
199
- innerSize: options.borderWidth == 20 ? '100%' : this.defaults.innerSize,
200
- data: this.defaults.chartData,
201
- zMin: this.defaults.zMin,
202
- startAngle: this.defaults.startAngle,
203
- borderWidth: this.defaults.borderWidth,
204
- borderColor: options.borderWidth == 20 ? null : this.defaults.innerSize,
205
- }],
206
- credits: false,
207
- })
208
- }
209
-
210
- setupTreemap(options) {
211
- treemap(Highcharts)
212
- this.setupTheme()
213
- options.dark ? Highcharts.setOptions(highchartsDarkTheme) : Highcharts.setOptions(highchartsTheme)
214
-
215
- Highcharts.chart(this.defaults.id, {
216
- title: {
217
- text: this.defaults.title,
218
- },
219
- chart: {
220
- height: this.defaults.height,
221
- type: this.defaults.type,
222
- },
223
- credits: false,
224
- series: [{
225
- data: this.defaults.chartData,
226
- }],
227
- plotOptions: {
228
- treemap: {
229
- allowTraversingTree: this.defaults.drillable,
230
- colorByPoint: !this.defaults.grouped,
231
- colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
232
- },
233
- },
234
- tooltip: {
235
- pointFormat: this.defaults.tooltipHtml,
236
- useHTML: true,
237
- },
238
- })
239
- }
240
-
241
- setupChart(options) {
242
- this.setupTheme()
243
- const configOptions = {
244
- title: {
245
- text: this.defaults.title,
246
- },
247
- chart: {
248
- height: this.defaults.height,
249
- type: this.defaults.type,
250
- },
251
- subtitle: {
252
- text: this.defaults.subtitle,
253
- },
254
- yAxis: {
255
- min: this.defaults.yAxisMin,
256
- max: this.defaults.yAxisMax,
257
- title: {
258
- text: this.defaults.axisTitle,
259
- },
260
- },
261
- xAxis: {
262
- categories: this.defaults.xAxisCategories,
263
- },
264
- legend: {
265
- enabled: this.defaults.legend,
266
- align: this.defaults.align,
267
- verticalAlign: this.defaults.verticalAlign,
268
- layout: this.defaults.layout,
269
- x: this.defaults.x,
270
- y: this.defaults.y,
271
- },
272
- colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
273
- plotOptions: {
274
- series: {
275
- pointStart: this.defaults.pointStart,
276
- dataLabels: {
277
- enabled: false,
278
- },
279
- },
280
- },
281
- series: this.defaults.chartData,
282
- credits: false,
283
- }
284
-
285
- if (!this.defaults.toggleLegendClick) {
286
- configOptions.plotOptions.series.events = { legendItemClick: () => false }
287
- }
288
-
289
- Highcharts.chart(this.defaults.id, configOptions)
290
- }
291
-
292
- refresh(silent = false) {
293
- if (!silent) {
294
- this.settings.callbackRefreshBefore.call()
295
- }
296
-
297
- this.this.destroy(silent)
298
- this.this.initialize(silent)
299
- if (!silent) {
300
- this.settings.callbackRefreshAfter.call()
301
- }
302
- }
303
-
304
- destroy(silent = false) {
305
- if (!silent) {
306
- this.settings.callbackDestroyBefore.call()
307
- }
308
- if (!silent) {
309
- this.settings.callbackDestroyAfter.call()
310
- }
311
- }
312
-
313
- refreshSilently() {
314
- this.this.refresh(true)
315
- }
316
-
317
- destroySilently() {
318
- this.this.destroy(true)
319
- }
320
- }
321
-
322
- export default pbChart