playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2148selectclassnamessinglespacesfix9144
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_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -0
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +46 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +107 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +14 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +36 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +11 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
- data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +12 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +2 -1
- data/app/pb_kits/playbook/pb_checkbox/index.js +3 -1
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +4 -7
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
- data/app/pb_kits/playbook/pb_gauge/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +32 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md +2 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +35 -9
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +26 -14
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +32 -15
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +45 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +59 -22
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +40 -9
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +50 -18
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +31 -18
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +34 -17
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +64 -23
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md +1 -0
- data/app/pb_kits/playbook/pb_gauge/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +7 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_description.md +1 -3
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx +36 -17
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md +3 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx +31 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +63 -31
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md +3 -0
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +35 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +41 -16
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +107 -62
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +4 -7
- data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +16 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +30 -17
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb +10 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx +26 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md +3 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
- data/app/pb_kits/playbook/pb_select/select.rb +4 -2
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +1 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
- data/dist/chunks/_line_graph-BfCo79KE.js +1 -0
- data/dist/chunks/_typeahead-Db4YQA5c.js +6 -0
- data/dist/chunks/_weekday_stacked-DfH_cGOX.js +61 -0
- data/dist/chunks/lib-DnQyMxO1.js +29 -0
- data/dist/chunks/{pb_form_validation-Dx1C9XCK.js → pb_form_validation-kl-4Jv4t.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +68 -8
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +45 -25
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -30
- data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md +0 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +0 -52
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +0 -1
- data/dist/chunks/_typeahead-dOC1gq2X.js +0 -22
- data/dist/chunks/_weekday_stacked-Bh8iY5uA.js +0 -45
- data/dist/chunks/lib-DtCftrUN.js +0 -29
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling.md → _advanced_table_row_styling_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_colors.md → _gauge_colors_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_gauge/docs/{_gauge_complex.md → _gauge_complex_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_line_graph/docs/{_line_graph_colors.md → _line_graph_colors_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -1,8 +1,11 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from "../../pb_bar_graph/_bar_graph"
|
4
6
|
import Title from "../../pb_title/_title"
|
5
7
|
|
8
|
+
|
6
9
|
const chartData = [{
|
7
10
|
name: 'Installation',
|
8
11
|
data: [1475],
|
@@ -20,7 +23,76 @@ const chartData = [{
|
|
20
23
|
data: [1111],
|
21
24
|
}]
|
22
25
|
|
23
|
-
const
|
26
|
+
const alignChartOptions = {
|
27
|
+
series: chartData,
|
28
|
+
title: {
|
29
|
+
text: 'Alignment of Legend',
|
30
|
+
},
|
31
|
+
subtitle: {
|
32
|
+
text: 'Source: thesolarfoundation.com',
|
33
|
+
},
|
34
|
+
xAxis: {
|
35
|
+
categories: ['Jan'],
|
36
|
+
},
|
37
|
+
yAxis: {
|
38
|
+
title: {
|
39
|
+
text: 'Number of Employees',
|
40
|
+
},
|
41
|
+
},
|
42
|
+
legend: {
|
43
|
+
enabled: true,
|
44
|
+
verticalAlign: 'top',
|
45
|
+
align: 'right',
|
46
|
+
},
|
47
|
+
}
|
48
|
+
|
49
|
+
const layoutChartOptions = {
|
50
|
+
series: chartData,
|
51
|
+
title: {
|
52
|
+
text: 'Layout of Legend',
|
53
|
+
},
|
54
|
+
xAxis: {
|
55
|
+
categories: ['Jan'],
|
56
|
+
},
|
57
|
+
yAxis: {
|
58
|
+
title: {
|
59
|
+
text: 'Number of Employees',
|
60
|
+
},
|
61
|
+
},
|
62
|
+
legend: {
|
63
|
+
enabled: true,
|
64
|
+
layout: 'vertical',
|
65
|
+
},
|
66
|
+
}
|
67
|
+
|
68
|
+
const offsetChartOptions = {
|
69
|
+
series: chartData,
|
70
|
+
title: {
|
71
|
+
text: 'Offset of Legend',
|
72
|
+
},
|
73
|
+
xAxis: {
|
74
|
+
categories: ['Jan'],
|
75
|
+
},
|
76
|
+
yAxis: {
|
77
|
+
title: {
|
78
|
+
text: 'Number of Employees',
|
79
|
+
},
|
80
|
+
},
|
81
|
+
legend: {
|
82
|
+
enabled: true,
|
83
|
+
layout: 'vertical',
|
84
|
+
x: 100,
|
85
|
+
y: 10,
|
86
|
+
},
|
87
|
+
}
|
88
|
+
|
89
|
+
const BarGraphLegendPosition = () => {
|
90
|
+
const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
|
91
|
+
const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
|
92
|
+
const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
|
93
|
+
|
94
|
+
|
95
|
+
return (
|
24
96
|
<div>
|
25
97
|
<Title
|
26
98
|
paddingBottom="sm"
|
@@ -29,19 +101,11 @@ const BarGraphLegendPosition = (props) => (
|
|
29
101
|
tag="h4"
|
30
102
|
text="align | verticalAlign"
|
31
103
|
/>
|
32
|
-
<
|
33
|
-
|
34
|
-
|
35
|
-
chartData={chartData}
|
36
|
-
id="legend-position-bar"
|
37
|
-
legend
|
38
|
-
paddingBottom="sm"
|
39
|
-
title="Alignment of Legend"
|
40
|
-
verticalAlign="top"
|
41
|
-
xAxisCategories={['Jan']}
|
42
|
-
yAxisMin={0}
|
43
|
-
{...props}
|
104
|
+
<HighchartsReact
|
105
|
+
highcharts={Highcharts}
|
106
|
+
options={alignOptions}
|
44
107
|
/>
|
108
|
+
|
45
109
|
<Title
|
46
110
|
paddingBottom="sm"
|
47
111
|
paddingTop="sm"
|
@@ -49,19 +113,11 @@ const BarGraphLegendPosition = (props) => (
|
|
49
113
|
tag="h4"
|
50
114
|
text="layout"
|
51
115
|
/>
|
52
|
-
<
|
53
|
-
|
54
|
-
|
55
|
-
id="legend-position-bar-1"
|
56
|
-
layout="vertical"
|
57
|
-
legend
|
58
|
-
paddingBottom="sm"
|
59
|
-
paddingTop="sm"
|
60
|
-
title="Layout of Legend"
|
61
|
-
xAxisCategories={['Jan']}
|
62
|
-
yAxisMin={0}
|
63
|
-
{...props}
|
116
|
+
<HighchartsReact
|
117
|
+
highcharts={Highcharts}
|
118
|
+
options={layoutOptions}
|
64
119
|
/>
|
120
|
+
|
65
121
|
<Title
|
66
122
|
paddingBottom="sm"
|
67
123
|
paddingTop="sm"
|
@@ -69,20 +125,12 @@ const BarGraphLegendPosition = (props) => (
|
|
69
125
|
tag="h4"
|
70
126
|
text="x | y"
|
71
127
|
/>
|
72
|
-
<
|
73
|
-
|
74
|
-
|
75
|
-
id="legend-position-bar-2"
|
76
|
-
layout="vertical"
|
77
|
-
legend
|
78
|
-
title="Offset of Legend"
|
79
|
-
x={100}
|
80
|
-
xAxisCategories={['Jan']}
|
81
|
-
y={10}
|
82
|
-
yAxisMin={0}
|
83
|
-
{...props}
|
128
|
+
<HighchartsReact
|
129
|
+
highcharts={Highcharts}
|
130
|
+
options={offsetOptions}
|
84
131
|
/>
|
85
132
|
</div>
|
86
133
|
)
|
134
|
+
}
|
87
135
|
|
88
136
|
export default BarGraphLegendPosition
|
@@ -1,7 +1,7 @@
|
|
1
1
|
##### Prop
|
2
2
|
|
3
3
|
`align` **Type**: String | **Values**: left | center | right (defaults to center)
|
4
|
-
`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults
|
4
|
+
`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
|
5
5
|
`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
|
6
6
|
`x` **Type**: Number (defaults to 0)
|
7
7
|
`y` **Type**: Number (defaults to 0)
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
6
|
|
5
7
|
const chartData = [{
|
6
8
|
name: 'Installation',
|
@@ -10,26 +12,41 @@ const chartData = [{
|
|
10
12
|
name: 'Manufacturing',
|
11
13
|
data: [1475, 200, 1000, 654, -656],
|
12
14
|
threshold: 0
|
13
|
-
},
|
15
|
+
},
|
14
16
|
{
|
15
17
|
name: 'Sales & Distribution',
|
16
18
|
data: [1270, 100, -1200, 554, 756],
|
17
19
|
threshold: 0
|
18
20
|
}]
|
19
21
|
|
22
|
+
const chartOptions = {
|
23
|
+
series: chartData,
|
24
|
+
title: {
|
25
|
+
text: "Bar Graph with Negative Numbers",
|
26
|
+
},
|
27
|
+
xAxis: {
|
28
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
29
|
+
},
|
30
|
+
yAxis: {
|
31
|
+
title: {
|
32
|
+
text: "Number of Employees",
|
33
|
+
},
|
34
|
+
},
|
35
|
+
legend: { enabled: true },
|
36
|
+
};
|
20
37
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
38
|
+
|
39
|
+
const BarGraphStacked = () => {
|
40
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
41
|
+
|
42
|
+
return(
|
43
|
+
<div>
|
44
|
+
<HighchartsReact
|
45
|
+
highcharts={Highcharts}
|
46
|
+
options={options}
|
47
|
+
/>
|
48
|
+
</div>
|
49
|
+
)
|
50
|
+
}
|
34
51
|
|
35
52
|
export default BarGraphStacked
|
@@ -1,6 +1,11 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts"
|
4
|
+
import HighchartsReact from "highcharts-react-official"
|
2
5
|
|
3
|
-
|
6
|
+
|
7
|
+
import colors from '../../tokens/exports/_colors.module.scss'
|
8
|
+
import typography from '../../tokens/exports/_typography.module.scss'
|
4
9
|
|
5
10
|
const chartData = [{
|
6
11
|
name: 'Number of Installations',
|
@@ -13,24 +18,69 @@ const chartData = [{
|
|
13
18
|
yAxis: 1
|
14
19
|
}]
|
15
20
|
|
16
|
-
const
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
21
|
+
const chartOptions = {
|
22
|
+
series: chartData,
|
23
|
+
title: {
|
24
|
+
text: "Bar Graph with Secondary Y-axis",
|
25
|
+
},
|
26
|
+
xAxis: {
|
27
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
28
|
+
},
|
29
|
+
yAxis: [{
|
30
|
+
labels: {
|
31
|
+
style: {
|
32
|
+
fontFamily: typography.font_family_base,
|
33
|
+
color: colors.text_lt_lighter,
|
34
|
+
fontWeight: typography.bold,
|
35
|
+
fontSize: typography.text_smaller,
|
36
|
+
},
|
37
|
+
},
|
38
|
+
title: {
|
39
|
+
text: "Number of Employees",
|
40
|
+
style: {
|
41
|
+
fontFamily: typography.font_family_base,
|
42
|
+
color: colors.text_lt_lighter,
|
43
|
+
fontWeight: typography.bold,
|
44
|
+
fontSize: typography.text_smaller,
|
45
|
+
},
|
46
|
+
},
|
47
|
+
}, {
|
48
|
+
labels: {
|
49
|
+
style: {
|
50
|
+
fontFamily: typography.font_family_base,
|
51
|
+
color: colors.text_lt_lighter,
|
52
|
+
fontWeight: typography.bold,
|
53
|
+
fontSize: typography.text_smaller,
|
54
|
+
},
|
55
|
+
},
|
56
|
+
title: {
|
57
|
+
text: "Percentage",
|
58
|
+
style: {
|
59
|
+
fontFamily: typography.font_family_base,
|
60
|
+
color: colors.text_lt_lighter,
|
61
|
+
fontWeight: typography.bold,
|
62
|
+
fontSize: typography.text_smaller,
|
63
|
+
},
|
64
|
+
},
|
65
|
+
|
66
|
+
opposite: true,
|
67
|
+
min: 0,
|
68
|
+
max: 100
|
69
|
+
}],
|
70
|
+
legend: { enabled: true },
|
71
|
+
}
|
72
|
+
|
73
|
+
const BarGraphSecondaryYAxis = () => {
|
74
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
75
|
+
|
76
|
+
return (
|
77
|
+
<div>
|
78
|
+
<HighchartsReact
|
79
|
+
highcharts={Highcharts}
|
80
|
+
options={options}
|
81
|
+
/>
|
82
|
+
</div>
|
83
|
+
)
|
84
|
+
}
|
85
|
+
|
86
|
+
export default BarGraphSecondaryYAxis
|
@@ -1,3 +1,3 @@
|
|
1
|
-
Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing`
|
1
|
+
Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing `yAxis: 1` to the second node of your `chartData` array.
|
2
2
|
|
3
3
|
To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
6
|
|
5
7
|
const chartData = [{
|
6
8
|
name: 'Number of Installations',
|
@@ -12,19 +14,33 @@ const chartData = [{
|
|
12
14
|
color: '#F9BB00',
|
13
15
|
}]
|
14
16
|
|
15
|
-
const
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
17
|
+
const chartOptions = {
|
18
|
+
series: chartData,
|
19
|
+
title: {
|
20
|
+
text: "Bar Graph with Spline",
|
21
|
+
},
|
22
|
+
xAxis: {
|
23
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
24
|
+
},
|
25
|
+
yAxis: {
|
26
|
+
title: {
|
27
|
+
text: "Number of Employees",
|
28
|
+
},
|
29
|
+
},
|
30
|
+
legend: { enabled: true },
|
31
|
+
};
|
32
|
+
|
33
|
+
const BarGraphSpline = () => {
|
34
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
35
|
+
|
36
|
+
return (
|
37
|
+
<div>
|
38
|
+
<HighchartsReact
|
39
|
+
highcharts={Highcharts}
|
40
|
+
options={options}
|
41
|
+
/>
|
42
|
+
</div>
|
43
|
+
)
|
44
|
+
}
|
29
45
|
|
30
46
|
export default BarGraphSpline
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import React from 'react'
|
2
|
+
import barGraphTheme from '../barGraphTheme';
|
3
|
+
import Highcharts from "highcharts";
|
4
|
+
import HighchartsReact from "highcharts-react-official";
|
2
5
|
|
3
|
-
import BarGraph from '../_bar_graph'
|
4
6
|
|
5
7
|
const chartData = [{
|
6
8
|
name: 'Installation',
|
@@ -14,21 +16,40 @@ const chartData = [{
|
|
14
16
|
data: [975, 1600, 1500, 924, 500],
|
15
17
|
}]
|
16
18
|
|
19
|
+
const chartOptions = {
|
20
|
+
series: chartData,
|
21
|
+
title: {
|
22
|
+
text: "Bar Graph with Stacked Columns",
|
23
|
+
},
|
24
|
+
xAxis: {
|
25
|
+
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
26
|
+
},
|
27
|
+
yAxis: {
|
28
|
+
title: {
|
29
|
+
text: "Number of Employees",
|
30
|
+
},
|
31
|
+
},
|
32
|
+
plotOptions: {
|
33
|
+
column: {
|
34
|
+
stacking: 'normal',
|
35
|
+
borderWidth: 0,
|
36
|
+
}
|
37
|
+
},
|
38
|
+
legend: { enabled: true },
|
39
|
+
};
|
17
40
|
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
</div>
|
32
|
-
)
|
41
|
+
|
42
|
+
const BarGraphStacked = () => {
|
43
|
+
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
44
|
+
|
45
|
+
return (
|
46
|
+
<div>
|
47
|
+
<HighchartsReact
|
48
|
+
highcharts={Highcharts}
|
49
|
+
options={options}
|
50
|
+
/>
|
51
|
+
</div>
|
52
|
+
)
|
53
|
+
}
|
33
54
|
|
34
55
|
export default BarGraphStacked
|
@@ -1,3 +1 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.
|
1
|
+
**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import BarGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
|
@@ -17,15 +17,13 @@ examples:
|
|
17
17
|
|
18
18
|
react:
|
19
19
|
- bar_graph_default: Default
|
20
|
-
- bar_graph_pb_styles: Playbook Styles
|
21
20
|
- bar_graph_legend: Legend
|
22
21
|
- bar_graph_legend_position: Legend Position
|
23
22
|
- bar_graph_legend_non_clickable: Legend Non Clickable
|
24
23
|
- bar_graph_height: Height
|
25
24
|
- bar_graph_spline: Spline
|
26
25
|
- bar_graph_colors: Color Overrides
|
27
|
-
- bar_graph_custom: Custom Overrides
|
28
26
|
- bar_graph_stacked: Stacked
|
29
27
|
- bar_graph_negative_numbers: Negative Numbers
|
30
28
|
- bar_graph_secondary_y_axis: Secondary Y-Axis
|
31
|
-
- bar_graph_horizontal:
|
29
|
+
- bar_graph_horizontal: Horizontal Bar Graph
|
@@ -5,9 +5,7 @@ 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
8
|
export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
|
10
9
|
export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
|
11
10
|
export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
|
12
11
|
export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'
|
13
|
-
export { default as BarGraphPbStyles } from './_bar_graph_pb_styles.jsx'
|
@@ -19,7 +19,7 @@ const BodyTruncate = (props) => {
|
|
19
19
|
<Body
|
20
20
|
marginBottom="md"
|
21
21
|
text={lorem}
|
22
|
-
truncate=
|
22
|
+
truncate={1}
|
23
23
|
{...props}
|
24
24
|
/>
|
25
25
|
|
@@ -30,7 +30,7 @@ const BodyTruncate = (props) => {
|
|
30
30
|
<Body
|
31
31
|
marginBottom="md"
|
32
32
|
text={lorem}
|
33
|
-
truncate=
|
33
|
+
truncate={2}
|
34
34
|
{...props}
|
35
35
|
/>
|
36
36
|
|
@@ -40,7 +40,7 @@ const BodyTruncate = (props) => {
|
|
40
40
|
/>
|
41
41
|
<Body
|
42
42
|
text={lorem}
|
43
|
-
truncate=
|
43
|
+
truncate={3}
|
44
44
|
{...props}
|
45
45
|
/>
|
46
46
|
</Flex>
|
@@ -6,6 +6,8 @@ module Playbook
|
|
6
6
|
prop :error, type: Playbook::Props::Boolean, default: false
|
7
7
|
prop :checked, type: Playbook::Props::Boolean, default: false
|
8
8
|
prop :indeterminate_main, type: Playbook::Props::Boolean, default: false
|
9
|
+
prop :indeterminate_main_labels, type: Playbook::Props::Array,
|
10
|
+
default: []
|
9
11
|
prop :indeterminate_parent
|
10
12
|
prop :text
|
11
13
|
prop :value
|
@@ -49,10 +51,19 @@ module Playbook
|
|
49
51
|
end
|
50
52
|
|
51
53
|
def data
|
52
|
-
Hash(prop(:data)).merge(
|
54
|
+
base_data = Hash(prop(:data)).merge(
|
53
55
|
pb_checkbox_indeterminate_main: indeterminate_main,
|
54
56
|
pb_checkbox_indeterminate_parent: indeterminate_parent
|
55
57
|
)
|
58
|
+
|
59
|
+
if indeterminate_main && indeterminate_main_labels.size == 2
|
60
|
+
base_data.merge!(
|
61
|
+
pb_checkbox_indeterminate_main_label_check: indeterminate_main_labels[0],
|
62
|
+
pb_checkbox_indeterminate_main_label_uncheck: indeterminate_main_labels[1]
|
63
|
+
)
|
64
|
+
end
|
65
|
+
|
66
|
+
base_data
|
56
67
|
end
|
57
68
|
|
58
69
|
private
|
@@ -9,10 +9,10 @@
|
|
9
9
|
<tr>
|
10
10
|
<th>
|
11
11
|
<%= pb_rails("checkbox", props: {
|
12
|
-
text: "Uncheck All",
|
13
12
|
value: "checkbox-value",
|
14
13
|
name: "main-checkbox",
|
15
14
|
indeterminate_main: true,
|
15
|
+
indeterminate_main_labels: ["Check All Ice Cream", "Uncheck All Ice Cream"],
|
16
16
|
id: "indeterminate-checkbox"
|
17
17
|
}) %>
|
18
18
|
</th>
|
@@ -1 +1,2 @@
|
|
1
|
-
If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
|
1
|
+
If you want to use indeterminate, "check/uncheck all" checkboxes, add `indeterminate_main: true` and an `id` to the main checkbox. Then, add an `indeterminate_parent` prop with the main checkbox's `id` to the children checkboxes.
|
2
|
+
If you want to customize the main checkbox labels, set an array `indeterminate_main_labels` with "Check All" and "Uncheck All" labels.
|
@@ -23,7 +23,9 @@ export default class PbCheckbox extends PbEnhancedElement {
|
|
23
23
|
mainCheckbox.checked = checkedCount > 0;
|
24
24
|
|
25
25
|
// Determine the main checkbox label based on the number of checked checkboxes
|
26
|
-
const
|
26
|
+
const checkAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelCheck ?? 'Check All'
|
27
|
+
const uncheckAllLabel = mainCheckboxWrapper.dataset.pbCheckboxIndeterminateMainLabelUncheck ?? 'Uncheck All'
|
28
|
+
const text = checkedCount === 0 ? checkAllLabel : uncheckAllLabel;
|
27
29
|
|
28
30
|
// Determine the icon class to add and remove based on the number of checked checkboxes
|
29
31
|
const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
|
@@ -2,7 +2,15 @@ import colors from '../tokens/exports/_colors.module.scss'
|
|
2
2
|
import typography from '../tokens/exports/_typography.module.scss'
|
3
3
|
|
4
4
|
const circleChartTheme = {
|
5
|
-
title: {
|
5
|
+
title: {
|
6
|
+
text: "",
|
7
|
+
style: {
|
8
|
+
color: colors.text_lt_default,
|
9
|
+
fontFamily: typography.font_family_base,
|
10
|
+
fontWeight: typography.bold,
|
11
|
+
fontSize: typography.heading_3,
|
12
|
+
},
|
13
|
+
},
|
6
14
|
chart: {
|
7
15
|
type: "pie",
|
8
16
|
},
|
@@ -32,6 +40,16 @@ const circleChartTheme = {
|
|
32
40
|
pie: {
|
33
41
|
dataLabels: {
|
34
42
|
enabled: false,
|
43
|
+
connectorShape: "straight",
|
44
|
+
connectorWidth: 3,
|
45
|
+
format: "<div>{point.name}</div>",
|
46
|
+
style: {
|
47
|
+
fontFamily: typography.font_family_base,
|
48
|
+
fontSize: typography.text_smaller,
|
49
|
+
color: colors.text_lt_light,
|
50
|
+
fontWeight: typography.regular,
|
51
|
+
textOutline: '2px $white',
|
52
|
+
},
|
35
53
|
},
|
36
54
|
innerSize: '50%',
|
37
55
|
borderColor: "",
|
@@ -47,6 +65,23 @@ const circleChartTheme = {
|
|
47
65
|
],
|
48
66
|
},
|
49
67
|
},
|
68
|
+
legend: {
|
69
|
+
layout: 'horizontal',
|
70
|
+
align: 'center',
|
71
|
+
verticalAlign: 'bottom',
|
72
|
+
itemStyle: {
|
73
|
+
fontFamily: typography.font_family_base,
|
74
|
+
color: colors.text_lt_light,
|
75
|
+
fontWeight: typography.regular,
|
76
|
+
fontSize: typography.text_smaller,
|
77
|
+
},
|
78
|
+
itemHoverStyle: {
|
79
|
+
color: colors.text_lt_default,
|
80
|
+
},
|
81
|
+
itemHiddenStyle: {
|
82
|
+
color: colors.text_lt_lighter,
|
83
|
+
},
|
84
|
+
},
|
50
85
|
credits: { enabled: false }
|
51
86
|
}
|
52
87
|
|