playbook_ui_docs 13.18.0.pre.alpha.thor93bargraphoptions2219 → 13.18.0.pre.alpha.useexactnodejsversionghactions2179
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/example.yml +0 -2
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -1
- data/dist/playbook-doc.js +4 -4
- metadata +2 -4
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb +0 -39
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -65
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui_docs
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 13.18.0.pre.alpha.
|
4
|
+
version: 13.18.0.pre.alpha.useexactnodejsversionghactions2179
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-02-
|
12
|
+
date: 2024-02-19 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: playbook_ui
|
@@ -127,8 +127,6 @@ files:
|
|
127
127
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
|
128
128
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
|
129
129
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
|
130
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb
|
131
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
|
132
130
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
|
133
131
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
|
134
132
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
|
@@ -1,39 +0,0 @@
|
|
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
|
-
}) %>
|
@@ -1,65 +0,0 @@
|
|
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
|