playbook_ui 13.22.0.pre.alpha.PLAY1297updatetextstyles2636 → 13.22.0.pre.alpha.pbntr254barchartnegativenumber2640
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +9 -0
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +4 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_body/_body.scss +3 -3
- data/dist/playbook-rails.js +4 -4
- data/lib/playbook/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 698c471b62dca2248d6cd9383e5233813dd67e8dfdef7d4b787074fc9ee5a001
|
|
4
|
+
data.tar.gz: f221c3e16f0df358f8fabefc756ef62c7bc62745a3cd751c45851511b41dc2d4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 30c747d874c99f45950dcd9467741556ac8800798faf58c5a9c5fce320baa7a79e7644d3d3476992a8a67619e586dc8afc8b35230b05f477021c2cffe8f2a507
|
|
7
|
+
data.tar.gz: de32503c6c661877228a8490b4676d663038dcd0c9c5c0823bcc815cdae3c7640e270ce4f3c115f0ff624baae5d5c80dbff1335b3694ce446aa812552659b42a
|
|
@@ -37,6 +37,7 @@ type BarGraphProps = {
|
|
|
37
37
|
y?: number;
|
|
38
38
|
aria?: { [key: string]: string };
|
|
39
39
|
data?: { [key: string]: string };
|
|
40
|
+
stacking?: "normal" | "percent"
|
|
40
41
|
};
|
|
41
42
|
|
|
42
43
|
|
|
@@ -53,6 +54,7 @@ const BarGraph = ({
|
|
|
53
54
|
customOptions = {},
|
|
54
55
|
id,
|
|
55
56
|
pointStart,
|
|
57
|
+
stacking,
|
|
56
58
|
subTitle,
|
|
57
59
|
type = "column",
|
|
58
60
|
title = "Title",
|
|
@@ -95,6 +97,11 @@ const BarGraph = ({
|
|
|
95
97
|
title: {
|
|
96
98
|
text: axisTitle,
|
|
97
99
|
},
|
|
100
|
+
plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
|
|
101
|
+
value: 0,
|
|
102
|
+
zIndex: 10,
|
|
103
|
+
color: "#E4E8F0"
|
|
104
|
+
}],
|
|
98
105
|
},
|
|
99
106
|
xAxis: {
|
|
100
107
|
categories: xAxisCategories,
|
|
@@ -113,7 +120,9 @@ const BarGraph = ({
|
|
|
113
120
|
: highchartsTheme.colors,
|
|
114
121
|
plotOptions: {
|
|
115
122
|
series: {
|
|
123
|
+
stacking: stacking,
|
|
116
124
|
pointStart: pointStart,
|
|
125
|
+
borderWidth: stacking ? 0 : "",
|
|
117
126
|
events: {},
|
|
118
127
|
dataLabels: {
|
|
119
128
|
enabled: false,
|
|
@@ -14,6 +14,7 @@ module Playbook
|
|
|
14
14
|
values: %w[vertical horizontal],
|
|
15
15
|
default: "vertical"
|
|
16
16
|
prop :point_start, type: Playbook::Props::Numeric
|
|
17
|
+
prop :stacking
|
|
17
18
|
prop :subtitle
|
|
18
19
|
prop :title
|
|
19
20
|
prop :x_axis_categories, type: Playbook::Props::Array,
|
|
@@ -49,6 +50,7 @@ module Playbook
|
|
|
49
50
|
dark: dark ? "dark" : "",
|
|
50
51
|
type: chart_type,
|
|
51
52
|
title: title,
|
|
53
|
+
stacking: stacking,
|
|
52
54
|
subTitle: subtitle,
|
|
53
55
|
axisTitle: axis_title,
|
|
54
56
|
pointStart: point_start,
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [-475, 400, -1000, 354, -856],
|
|
4
|
+
threshold: 0
|
|
5
|
+
}, {
|
|
6
|
+
name: 'Manufacturing',
|
|
7
|
+
data: [1475, 200, 1000, 654, -656],
|
|
8
|
+
threshold: 0
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: 'Sales & Distribution',
|
|
12
|
+
data: [1270, 100, -1200, 554, 756],
|
|
13
|
+
threshold: 0
|
|
14
|
+
}] %>
|
|
15
|
+
|
|
16
|
+
<%= pb_rails("bar_graph", props: {
|
|
17
|
+
axis_title: 'Number of Employees',
|
|
18
|
+
chart_data: data,
|
|
19
|
+
id: "bar-default",
|
|
20
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
|
21
|
+
title: 'Bar Graph with Stacked Columns',
|
|
22
|
+
legend: true,
|
|
23
|
+
}) %>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
|
4
|
+
|
|
5
|
+
const chartData = [{
|
|
6
|
+
name: 'Installation',
|
|
7
|
+
data: [-475, 400, -1000, 354, -856],
|
|
8
|
+
threshold: 0
|
|
9
|
+
}, {
|
|
10
|
+
name: 'Manufacturing',
|
|
11
|
+
data: [1475, 200, 1000, 654, -656],
|
|
12
|
+
threshold: 0
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
name: 'Sales & Distribution',
|
|
16
|
+
data: [1270, 100, -1200, 554, 756],
|
|
17
|
+
threshold: 0
|
|
18
|
+
}]
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
const BarGraphStacked = (props) => (
|
|
22
|
+
<div>
|
|
23
|
+
<BarGraph
|
|
24
|
+
axisTitle="Number of Employees"
|
|
25
|
+
chartData={chartData}
|
|
26
|
+
id="bar-default"
|
|
27
|
+
legend
|
|
28
|
+
title="Bar Graph with Negative Numbers"
|
|
29
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
30
|
+
{...props}
|
|
31
|
+
/>
|
|
32
|
+
</div>
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
export default BarGraphStacked
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<% data = [{
|
|
2
|
+
name: 'Installation',
|
|
3
|
+
data: [1475, 200, 3000, 654, 656],
|
|
4
|
+
},
|
|
5
|
+
{
|
|
6
|
+
name: 'Manufacturing',
|
|
7
|
+
data: [1270, 800, 200, 454, 956],
|
|
8
|
+
}, {
|
|
9
|
+
name: 'Sales & Distribution',
|
|
10
|
+
data: [975, 1600, 1500, 924, 500],
|
|
11
|
+
}] %>
|
|
12
|
+
|
|
13
|
+
<%= pb_rails("bar_graph", props: {
|
|
14
|
+
axis_title: 'Number of Employees',
|
|
15
|
+
chart_data: data,
|
|
16
|
+
id: "bar-default",
|
|
17
|
+
y_axis_min: 0,
|
|
18
|
+
x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
|
|
19
|
+
stacking: "normal",
|
|
20
|
+
title: 'Bar Graph with Stacked Columns',
|
|
21
|
+
legend: true,
|
|
22
|
+
}) %>
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
+
{
|
|
10
|
+
name: 'Manufacturing',
|
|
11
|
+
data: [1270, 800, 200, 454, 956],
|
|
12
|
+
}, {
|
|
13
|
+
name: 'Sales & Distribution',
|
|
14
|
+
data: [975, 1600, 1500, 924, 500],
|
|
15
|
+
}]
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
const BarGraphStacked = (props) => (
|
|
19
|
+
<div>
|
|
20
|
+
<BarGraph
|
|
21
|
+
axisTitle="Number Of Employees"
|
|
22
|
+
chartData={chartData}
|
|
23
|
+
id="bar-default"
|
|
24
|
+
legend
|
|
25
|
+
stacking="normal"
|
|
26
|
+
title="Bar Graph with Stacked Columns"
|
|
27
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
|
28
|
+
yAxisMin={0}
|
|
29
|
+
{...props}
|
|
30
|
+
/>
|
|
31
|
+
</div>
|
|
32
|
+
)
|
|
33
|
+
|
|
34
|
+
export default BarGraphStacked
|
|
@@ -9,7 +9,8 @@ examples:
|
|
|
9
9
|
- bar_graph_spline: Spline
|
|
10
10
|
- bar_graph_colors: Color Overrides
|
|
11
11
|
- bar_graph_custom: Custom Overrides
|
|
12
|
-
|
|
12
|
+
- bar_graph_stacked: Stacked
|
|
13
|
+
- bar_graph_negative_numbers: Negative Numbers
|
|
13
14
|
|
|
14
15
|
react:
|
|
15
16
|
- bar_graph_default: Default
|
|
@@ -20,3 +21,5 @@ examples:
|
|
|
20
21
|
- bar_graph_spline: Spline
|
|
21
22
|
- bar_graph_colors: Color Overrides
|
|
22
23
|
- bar_graph_custom: Custom Overrides
|
|
24
|
+
- bar_graph_stacked: Stacked
|
|
25
|
+
- bar_graph_negative_numbers: Negative Numbers
|
|
@@ -6,3 +6,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
8
|
export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
|
|
9
|
+
export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
|
|
10
|
+
export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
|