playbook_ui_docs 13.18.0.pre.alpha.thor93bargraphoptions2211 → 13.18.0.pre.alpha.thor93bargraphoptions2219
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +39 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +65 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/dist/playbook-doc.js +4 -4
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a9a2061b519f0fd195cbd137e4af57c3a6a12261c3c93d22d17f31f89e8e92dc
|
|
4
|
+
data.tar.gz: b7caa1c410686a976fd41898d70fbb08b1c47a119659e854312a9852ff91aeeb
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4401547f740e114be38b6207fabd219987c615de51b921344d47f589f49c72ec092c19662b4cffb8f31dd52effb0bb87f8cc0f2aee287d4f5a5048e17c91f751
|
|
7
|
+
data.tar.gz: 45d854e81ce5c07073de874a15ebd063be370e3470b3639fe2a0cc5990e2ca4ff0f9342c923e3e9f6ba4e849e6c0283033b2e136b85f44fa1f32c22327ea3504
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [1475,200,3000,654,656]
|
|
4
|
+
}, {
|
|
5
|
+
name: 'Manufacturing',
|
|
6
|
+
data: [4434,524,2320,440,500]
|
|
7
|
+
}, {
|
|
8
|
+
name: 'Sales & Distribution',
|
|
9
|
+
data: [3387,743,1344,434,440,]
|
|
10
|
+
}, {
|
|
11
|
+
name: 'Project Development',
|
|
12
|
+
data: [3227,878,999,780,1000]
|
|
13
|
+
}, {
|
|
14
|
+
name: 'Other',
|
|
15
|
+
data: [1111,677,3245,500,200]
|
|
16
|
+
}] %>
|
|
17
|
+
|
|
18
|
+
<% custom_options = {
|
|
19
|
+
customOptions: {
|
|
20
|
+
subtitle: {
|
|
21
|
+
text: "Overwritten subtitle",
|
|
22
|
+
style: {
|
|
23
|
+
color: "red",
|
|
24
|
+
fontSize: 20
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
} %>
|
|
29
|
+
|
|
30
|
+
<%= pb_rails("bar_graph", props: {
|
|
31
|
+
axis_title: 'Number of Employees',
|
|
32
|
+
chart_data: data,
|
|
33
|
+
id: "bar-default",
|
|
34
|
+
y_axis_min: 0,
|
|
35
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
|
36
|
+
subtitle: 'Subtitle to replace',
|
|
37
|
+
title: 'Solar Employment Growth by Sector, 2010-2016',
|
|
38
|
+
custom_options: custom_options
|
|
39
|
+
}) %>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
4
|
+
|
|
5
|
+
const chartData = [{
|
|
6
|
+
name: 'Installation',
|
|
7
|
+
data: [1475, 200, 3000, 654, 656],
|
|
8
|
+
}, {
|
|
9
|
+
name: 'Manufacturing',
|
|
10
|
+
data: [4434, 524, 2320, 440, 500],
|
|
11
|
+
}, {
|
|
12
|
+
name: 'Sales & Distribution',
|
|
13
|
+
data: [3387, 743, 1344, 434, 440],
|
|
14
|
+
}, {
|
|
15
|
+
name: 'Project Development',
|
|
16
|
+
data: [3227, 878, 999, 780, 1000],
|
|
17
|
+
}, {
|
|
18
|
+
name: 'Other',
|
|
19
|
+
data: [1111, 677, 3245, 500, 200],
|
|
20
|
+
}]
|
|
21
|
+
|
|
22
|
+
const barGraphOptions = {
|
|
23
|
+
subtitle: {
|
|
24
|
+
text: "Overwritten subtitle"
|
|
25
|
+
},
|
|
26
|
+
xAxis: {
|
|
27
|
+
labels: {
|
|
28
|
+
useHTML: true,
|
|
29
|
+
formatter: function() {
|
|
30
|
+
switch (this.value) {
|
|
31
|
+
case 'Jan':
|
|
32
|
+
return `<i class="fa-regular fa-apple-whole"></i> ${this.value}`
|
|
33
|
+
case 'Feb':
|
|
34
|
+
return `<i class="far fa-strawberry"></i> ${this.value}`
|
|
35
|
+
case 'Mar':
|
|
36
|
+
return `<i class="far fa-lemon"></i> ${this.value}`
|
|
37
|
+
case 'Apr':
|
|
38
|
+
return `<i class="far fa-pear"></i> ${this.value}`
|
|
39
|
+
case 'May':
|
|
40
|
+
return `<i class="far fa-peach"></i> ${this.value}`
|
|
41
|
+
default:
|
|
42
|
+
return ''
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const BarGraphCustom = (props) => (
|
|
50
|
+
<div>
|
|
51
|
+
<BarGraph
|
|
52
|
+
axisTitle="Number of Employees"
|
|
53
|
+
chartData={chartData}
|
|
54
|
+
customOptions={barGraphOptions}
|
|
55
|
+
id="bar-custom"
|
|
56
|
+
subTitle="Subtitle to replace"
|
|
57
|
+
title="Bar Graph with Custom Overrides"
|
|
58
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
59
|
+
yAxisMin={0}
|
|
60
|
+
{...props}
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
)
|
|
64
|
+
|
|
65
|
+
export default BarGraphCustom
|
|
@@ -8,6 +8,7 @@ examples:
|
|
|
8
8
|
- bar_graph_height: Height
|
|
9
9
|
- bar_graph_spline: Spline
|
|
10
10
|
- bar_graph_colors: Color Overrides
|
|
11
|
+
- bar_graph_custom: Custom Overrides
|
|
11
12
|
|
|
12
13
|
|
|
13
14
|
react:
|
|
@@ -18,3 +19,4 @@ examples:
|
|
|
18
19
|
- bar_graph_height: Height
|
|
19
20
|
- bar_graph_spline: Spline
|
|
20
21
|
- bar_graph_colors: Color Overrides
|
|
22
|
+
- bar_graph_custom: Custom Overrides
|
|
@@ -5,3 +5,4 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
|
|
|
5
5
|
export { default as BarGraphHeight } from './_bar_graph_height.jsx'
|
|
6
6
|
export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
|
|
7
7
|
export { default as BarGraphColors } from './_bar_graph_colors.jsx'
|
|
8
|
+
export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
|