playbook_ui 13.18.0.pre.alpha.powercentrainplaybookpt22201 → 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/_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;
|