playbook_ui 13.18.0.pre.alpha.powercentrainplaybookpt22201 → 13.18.0.pre.alpha.thor93bargraphoptions2219
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 +4 -1
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +6 -1
- 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/app/pb_kits/playbook/pb_button/_button.scss +3 -3
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -3
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_dashboard/commonSettings.js +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +1 -1
- data/app/pb_kits/playbook/tokens/_titles.scss +4 -4
- data/app/pb_kits/playbook/tokens/_typography.scss +10 -10
- data/dist/playbook-rails.js +4 -4
- data/dist/reset.css +1 -1
- data/lib/playbook/version.rb +1 -1
- 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: 8ec6af33629ba1cad2697168cca8e87e43f0481cbf12430fd62ddc174ac77388
|
|
4
|
+
data.tar.gz: 0a5976c59dbdbefbcb3fa4f1ecdd0a3572c8e01518388104b6daf5a315a1da06
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 87c9af5d361733440d37edc722958b83555195a33a59e44f7281eb6dfda06d73c454b9956161896ac35ebf090de5218543c88573e8dd1c87076d97633da824c8
|
|
7
|
+
data.tar.gz: d8eeae22de85db2a9a079a9773641065d8ba6fa69b6a68511596d9a92ec7bdb476ead501910d4d8664f1474b9f85488f719cd4154f12328c57ac403c98911c17
|
|
@@ -7,6 +7,7 @@ import Highcharts from "highcharts";
|
|
|
7
7
|
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
|
8
8
|
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
|
9
9
|
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
|
10
|
+
import { merge } from 'lodash'
|
|
10
11
|
|
|
11
12
|
import classnames from "classnames";
|
|
12
13
|
|
|
@@ -19,6 +20,7 @@ type BarGraphProps = {
|
|
|
19
20
|
yAxisMax: number;
|
|
20
21
|
chartData: { name: string; data: number[] }[];
|
|
21
22
|
className?: string;
|
|
23
|
+
customOptions?: Partial<Highcharts.Options>;
|
|
22
24
|
id: string;
|
|
23
25
|
pointStart: number;
|
|
24
26
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
@@ -48,6 +50,7 @@ const BarGraph = ({
|
|
|
48
50
|
className = "pb_bar_graph",
|
|
49
51
|
colors,
|
|
50
52
|
htmlOptions = {},
|
|
53
|
+
customOptions = {},
|
|
51
54
|
id,
|
|
52
55
|
pointStart,
|
|
53
56
|
subTitle,
|
|
@@ -128,7 +131,7 @@ const BarGraph = ({
|
|
|
128
131
|
const [options, setOptions] = useState({});
|
|
129
132
|
|
|
130
133
|
useEffect(() => {
|
|
131
|
-
setOptions(
|
|
134
|
+
setOptions(merge(staticOptions, customOptions));
|
|
132
135
|
}, [chartData]);
|
|
133
136
|
|
|
134
137
|
return (
|
|
@@ -9,6 +9,7 @@ module Playbook
|
|
|
9
9
|
prop :axis_title
|
|
10
10
|
prop :chart_data, type: Playbook::Props::Array,
|
|
11
11
|
default: []
|
|
12
|
+
prop :custom_options, default: {}
|
|
12
13
|
prop :orientation, type: Playbook::Props::Enum,
|
|
13
14
|
values: %w[vertical horizontal],
|
|
14
15
|
default: "vertical"
|
|
@@ -39,7 +40,7 @@ module Playbook
|
|
|
39
40
|
orientation == "horizontal" ? "bar" : "column"
|
|
40
41
|
end
|
|
41
42
|
|
|
42
|
-
def
|
|
43
|
+
def standard_options
|
|
43
44
|
{
|
|
44
45
|
align: align,
|
|
45
46
|
id: id,
|
|
@@ -65,6 +66,10 @@ module Playbook
|
|
|
65
66
|
}
|
|
66
67
|
end
|
|
67
68
|
|
|
69
|
+
def chart_options
|
|
70
|
+
standard_options.deep_merge(custom_options)
|
|
71
|
+
end
|
|
72
|
+
|
|
68
73
|
def classname
|
|
69
74
|
generate_classname("pb_bar_graph")
|
|
70
75
|
end
|
|
@@ -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'
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
$pb_button_size: 40px;
|
|
11
11
|
$pb_button_v_padding: 7px;
|
|
12
|
-
$pb_button_h_padding:
|
|
12
|
+
$pb_button_h_padding: 34px;
|
|
13
13
|
$pb_button_hover_darken: 4%;
|
|
14
14
|
$pb_button_border_width: 0px;
|
|
15
15
|
|
|
@@ -27,13 +27,12 @@ $pb_button_border_width: 0px;
|
|
|
27
27
|
text-rendering: optimizeLegibility;
|
|
28
28
|
font-size: $font_small;
|
|
29
29
|
font-weight: $bold;
|
|
30
|
-
letter-spacing: $lspace_loose;
|
|
31
30
|
text-align: center;
|
|
32
31
|
vertical-align: middle;
|
|
33
32
|
text-transform: none;
|
|
34
33
|
border-width: $pb_button_border_width;
|
|
35
34
|
border-style: solid;
|
|
36
|
-
border-radius: $
|
|
35
|
+
border-radius: $border_rad_light;
|
|
37
36
|
min-height: $pb_button_size;
|
|
38
37
|
line-height: 1.5;
|
|
39
38
|
padding: $pb_button_v_padding $pb_button_h_padding;
|
|
@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
|
|
|
53
53
|
/* Change axis label styles */
|
|
54
54
|
axis.labels.style.fontFamily = typography.font_family_base
|
|
55
55
|
axis.labels.style.color = colors.charcoal
|
|
56
|
-
axis.labels.style.fontWeight = typography.
|
|
56
|
+
axis.labels.style.fontWeight = typography.light
|
|
57
57
|
axis.labels.style.fontSize = typography.font_small
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -5,11 +5,10 @@
|
|
|
5
5
|
@mixin pb_title(
|
|
6
6
|
$fontSize: $heading_1,
|
|
7
7
|
$fontWeight: $lighter,
|
|
8
|
-
$lineHeight: $lh_tighter
|
|
9
|
-
$letterSpacing: $lspace_tight
|
|
8
|
+
$lineHeight: $lh_tighter
|
|
10
9
|
){
|
|
11
10
|
font-size: $fontSize;
|
|
12
|
-
letter-spacing: $
|
|
11
|
+
letter-spacing: $lspace_tight;
|
|
13
12
|
font-weight: $fontWeight;
|
|
14
13
|
color: $text_lt_default;
|
|
15
14
|
margin: 0;
|
|
@@ -30,7 +29,8 @@
|
|
|
30
29
|
}
|
|
31
30
|
|
|
32
31
|
@mixin pb_title_4 {
|
|
33
|
-
@include pb_title($heading_4, $bolder
|
|
32
|
+
@include pb_title($heading_4, $bolder);
|
|
33
|
+
letter-spacing: -0.03em;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
@mixin pb_title_dark {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
$font_family_base: "
|
|
1
|
+
$font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
|
|
2
2
|
|
|
3
3
|
/* CLEAN UP AND REMOVE */
|
|
4
4
|
$font_jumbo: 36px !default;
|
|
5
5
|
$font_largest: 32px !default;
|
|
6
|
-
$font_larger:
|
|
6
|
+
$font_larger: 28px !default;
|
|
7
7
|
$font_large: 20px !default;
|
|
8
|
-
$font_base:
|
|
8
|
+
$font_base: 16px !default;
|
|
9
9
|
$font_default: $font_base !default;
|
|
10
10
|
$font_normal: $font_base !default;
|
|
11
11
|
$font_medium: $font_base !default;
|
|
@@ -26,8 +26,8 @@ $text_smaller: $font_smaller !default;
|
|
|
26
26
|
$text_smallest: $font_smallest !default;
|
|
27
27
|
|
|
28
28
|
/* Headings */
|
|
29
|
-
$heading_1:
|
|
30
|
-
$heading_2:
|
|
29
|
+
$heading_1: 46px !default;
|
|
30
|
+
$heading_2: 34px !default;
|
|
31
31
|
$heading_3: $font_larger !default;
|
|
32
32
|
$heading_4: $font_base !default;
|
|
33
33
|
|
|
@@ -35,19 +35,19 @@ $heading_4: $font_base !default;
|
|
|
35
35
|
$lspace_tightest: -.1em !default;
|
|
36
36
|
$lspace_tighter: -.07em !default;
|
|
37
37
|
$lspace_tight: -.01em !default;
|
|
38
|
-
$lspace_normal:
|
|
38
|
+
$lspace_normal: 0 !default;
|
|
39
39
|
$lspace_loose: .03em !default;
|
|
40
40
|
$lspace_looser: .07em !default;
|
|
41
41
|
$lspace_loosest: .1em !default;
|
|
42
42
|
$lspace_super_loosest: .2em !default;
|
|
43
43
|
|
|
44
44
|
/* Standard Font Weights */
|
|
45
|
-
$bold:
|
|
45
|
+
$bold: 600 !default;
|
|
46
46
|
$regular: 400 !default;
|
|
47
47
|
|
|
48
48
|
/* Non_Standard Font Weights */
|
|
49
|
-
$extrabold:
|
|
50
|
-
$boldest:
|
|
49
|
+
$extrabold: 900 !default;
|
|
50
|
+
$boldest: 800 !default;
|
|
51
51
|
$bolder: 700 !default;
|
|
52
52
|
$light: 300 !default;
|
|
53
|
-
$lighter:
|
|
53
|
+
$lighter: 100 !default;
|