playbook_ui 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968 → 14.22.0.pre.alpha.PLAY2292advancedtablepinnedrowsloading8630
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/Hooks/useTableState.ts +5 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -8
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -5
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -36
- data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -32
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
- 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 +15 -31
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
- data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-B7FRYVtS.js} +3 -3
- data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-D5re2fT9.js} +2 -2
- data/dist/chunks/{lib-DYpq0k8j.js → lib-Carqm8Ip.js} +1 -1
- data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-DqRmTS8m.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +8 -68
- 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 +1 -1
- metadata +16 -21
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +0 -1
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +0 -106
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
- data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6152833af218a14955e5100fb4ddfa551f879d572ad7961ad2eab37f72afb356
|
4
|
+
data.tar.gz: 39578a75358b930b6282f5764d3e682fc2b20fef0c8ac1cce430f1ba1267249f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5a9e651c54ee02b4bbe5af426ad20a3874ff963f7b012564edbe22d918c2c18b3f96a15cd83f1d6f1d8dd058c2b5620e0a6e73fd6d46240741cd703db6ab5af3
|
7
|
+
data.tar.gz: 87e28055fcf3cdcd3b4bfb2a863431e088159807966553a257669c978718607e2bc473d81fa74002faca5ac9c27211c9bd2b76aac4fc57f0664a5eabe67f88f3
|
@@ -66,7 +66,7 @@ export function useTableState({
|
|
66
66
|
const setExpanded = expandedControl ? expandedControl.onChange : setLocalExpanded;
|
67
67
|
const columnVisibility = (columnVisibilityControl && columnVisibilityControl.value) ? columnVisibilityControl.value : localColumnVisibility;
|
68
68
|
const setColumnVisibility = (columnVisibilityControl && columnVisibilityControl.onChange) ? columnVisibilityControl.onChange : setLocalColumnVisibility;
|
69
|
-
const rowPinning = pinnedRows?.value ?? localRowPinning
|
69
|
+
const rowPinning = loading ? { top: [] } : (pinnedRows?.value ?? localRowPinning);
|
70
70
|
const onRowPinningChange = pinnedRows?.onChange ?? setLocalRowPinning
|
71
71
|
|
72
72
|
// Virtualized data handling (chunked loading)
|
@@ -181,7 +181,9 @@ export function useTableState({
|
|
181
181
|
});
|
182
182
|
|
183
183
|
// Handle row pinning changes
|
184
|
-
|
184
|
+
useEffect(() => {
|
185
|
+
if (loading) return;
|
186
|
+
|
185
187
|
const topPins = pinnedRows?.value?.top ?? [];
|
186
188
|
if (topPins.length === 0) {
|
187
189
|
onRowPinningChange({ top: [] });
|
@@ -198,7 +200,7 @@ export function useTableState({
|
|
198
200
|
}
|
199
201
|
});
|
200
202
|
onRowPinningChange({ top: allPinned });
|
201
|
-
}, [table, pinnedRows?.value?.top?.join(',')]);
|
203
|
+
}, [table, pinnedRows?.value?.top?.join(','), loading]);
|
202
204
|
|
203
205
|
// Check if table has any sub-rows
|
204
206
|
const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
|
@@ -1 +1 @@
|
|
1
|
-
The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
|
1
|
+
The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
|
@@ -10,9 +10,9 @@ examples:
|
|
10
10
|
- advanced_table_beta_sort: Enable Sorting
|
11
11
|
- advanced_table_responsive: Responsive Tables
|
12
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
13
|
-
- advanced_table_with_custom_header_rails: Custom Header Cell
|
14
13
|
- advanced_table_column_headers: Multi-Header Columns
|
15
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
|
+
- advanced_table_column_border_color_rails: Column Group Border Color
|
16
16
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
17
17
|
- advanced_table_selectable_rows_rails: Selectable Rows
|
18
18
|
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
@@ -21,11 +21,10 @@ examples:
|
|
21
21
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
22
22
|
- advanced_table_column_styling_rails: Column Styling
|
23
23
|
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
24
|
-
- advanced_table_column_border_color_rails: Column Group Border Color
|
25
|
-
|
26
24
|
|
27
25
|
react:
|
28
26
|
- advanced_table_default: Default (Required Props)
|
27
|
+
- advanced_table_loading: Loading State
|
29
28
|
- advanced_table_sort: Enable Sorting
|
30
29
|
- advanced_table_sort_control: Sort Control
|
31
30
|
- advanced_table_custom_sort: Custom Sort
|
@@ -39,31 +38,30 @@ examples:
|
|
39
38
|
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
40
39
|
- advanced_table_sticky_columns: Sticky Columns
|
41
40
|
- advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
|
41
|
+
- advanced_table_inline_row_loading: Inline Row Loading
|
42
42
|
- advanced_table_responsive: Responsive Tables
|
43
43
|
- advanced_table_custom_cell: Custom Components for Cells
|
44
44
|
- advanced_table_with_custom_header: Custom Header Cell
|
45
45
|
- advanced_table_pagination: Pagination
|
46
46
|
- advanced_table_pagination_with_props: Pagination Props
|
47
|
-
- advanced_table_loading: Loading State
|
48
|
-
- advanced_table_inline_row_loading: Inline Row Loading
|
49
47
|
- advanced_table_column_headers: Multi-Header Columns
|
50
48
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
51
49
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
50
|
+
- advanced_table_column_border_color: Column Group Border Color
|
52
51
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
53
|
-
- advanced_table_pinned_rows: Pinned Rows
|
54
52
|
- advanced_table_selectable_rows: Selectable Rows
|
55
53
|
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
56
54
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
57
55
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
58
56
|
- advanced_table_inline_editing: Inline Cell Editing
|
57
|
+
- advanced_table_fullscreen: Fullscreen
|
59
58
|
- advanced_table_column_visibility: Column Visibility Control
|
60
59
|
- advanced_table_column_visibility_with_state: Column Visibility Control With State
|
61
60
|
- advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
|
62
61
|
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
62
|
+
- advanced_table_pinned_rows: Pinned Rows
|
63
63
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
64
64
|
- advanced_table_row_styling: Row Styling
|
65
65
|
- advanced_table_column_styling: Column Styling
|
66
66
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
67
|
-
- advanced_table_column_border_color: Column Group Border Color
|
68
|
-
- advanced_table_fullscreen: Fullscreen
|
69
67
|
- advanced_table_infinite_scroll: Infinite Scroll
|
@@ -26,11 +26,7 @@
|
|
26
26
|
<% end %>
|
27
27
|
<% end %>
|
28
28
|
<% end %>
|
29
|
-
|
30
|
-
<%= raw(object.render_custom_header(cell)) %>
|
31
|
-
<% else %>
|
32
|
-
<%= cell[:label] %>
|
33
|
-
<% end %>
|
29
|
+
<%= cell[:label] %>
|
34
30
|
<% end %>
|
35
31
|
<% end %>
|
36
32
|
<% end %>
|
@@ -76,30 +76,6 @@ module Playbook
|
|
76
76
|
end
|
77
77
|
end
|
78
78
|
|
79
|
-
# Get original column definition for custom rendering
|
80
|
-
def find_original_column_def(accessor)
|
81
|
-
find_column_def_by_accessor(column_definitions, accessor)
|
82
|
-
end
|
83
|
-
|
84
|
-
# Check if a header cell has a custom renderer
|
85
|
-
def has_custom_header_renderer?(cell)
|
86
|
-
return false unless cell[:accessor].present?
|
87
|
-
|
88
|
-
original_def = find_original_column_def(cell[:accessor])
|
89
|
-
original_def && original_def[:custom_header_renderer].present?
|
90
|
-
end
|
91
|
-
|
92
|
-
# Render custom header content
|
93
|
-
def render_custom_header(cell)
|
94
|
-
return cell[:label] unless has_custom_header_renderer?(cell)
|
95
|
-
|
96
|
-
original_def = find_original_column_def(cell[:accessor])
|
97
|
-
custom_renderer = original_def[:custom_header_renderer]
|
98
|
-
|
99
|
-
# Call the custom renderer with the cell data and label
|
100
|
-
custom_renderer.call(cell, cell[:label])
|
101
|
-
end
|
102
|
-
|
103
79
|
private
|
104
80
|
|
105
81
|
def compute_max_depth(columns)
|
@@ -172,18 +148,6 @@ module Playbook
|
|
172
148
|
end
|
173
149
|
wrapped
|
174
150
|
end
|
175
|
-
|
176
|
-
def find_column_def_by_accessor(defs, target_accessor)
|
177
|
-
defs.each do |col|
|
178
|
-
return col if col[:accessor] == target_accessor
|
179
|
-
|
180
|
-
if col[:columns].is_a?(Array)
|
181
|
-
found = find_column_def_by_accessor(col[:columns], target_accessor)
|
182
|
-
return found if found
|
183
|
-
end
|
184
|
-
end
|
185
|
-
nil
|
186
|
-
end
|
187
151
|
end
|
188
152
|
end
|
189
153
|
end
|
@@ -5,7 +5,7 @@
|
|
5
5
|
@import "../tokens/typography";
|
6
6
|
|
7
7
|
[class^=pb_badge_kit] {
|
8
|
-
$
|
8
|
+
$pb_badge_height: 18px;
|
9
9
|
|
10
10
|
display: inline-flex;
|
11
11
|
align-items: center;
|
@@ -13,6 +13,7 @@
|
|
13
13
|
border-radius: $border_rad_light;
|
14
14
|
padding: 0 $space_xs/2;
|
15
15
|
border-width: 1px;
|
16
|
+
border-style: solid;
|
16
17
|
border-color: $card_light;
|
17
18
|
white-space: nowrap;
|
18
19
|
|
@@ -30,10 +31,10 @@
|
|
30
31
|
}
|
31
32
|
|
32
33
|
&[class*=_rounded] {
|
33
|
-
height: $
|
34
|
-
min-height: $
|
35
|
-
min-width: $
|
36
|
-
border-radius: $
|
34
|
+
height: $pb_badge_height;
|
35
|
+
min-height: $pb_badge_height;
|
36
|
+
min-width: $pb_badge_height;
|
37
|
+
border-radius: $pb_badge_height / 2;
|
37
38
|
}
|
38
39
|
|
39
40
|
&[class*=_notification] {
|
@@ -1,10 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import colors from '../../tokens/exports/_colors.module.scss'
|
3
|
-
import barGraphTheme from '../barGraphTheme';
|
4
|
-
import Highcharts from "highcharts";
|
5
|
-
import HighchartsReact from "highcharts-react-official";
|
6
|
-
|
7
2
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
8
4
|
|
9
5
|
const chartData = [{
|
10
6
|
name: 'Installation',
|
@@ -23,33 +19,19 @@ const chartData = [{
|
|
23
19
|
data: [1111, 677, 3245, 500, 200],
|
24
20
|
}]
|
25
21
|
|
26
|
-
const
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
}
|
41
|
-
|
42
|
-
const BarGraphColors = () => {
|
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
|
-
}
|
22
|
+
const BarGraphColors = (props) => (
|
23
|
+
<div>
|
24
|
+
<BarGraph
|
25
|
+
axisTitle="Number of Employees"
|
26
|
+
chartData={chartData}
|
27
|
+
colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
|
28
|
+
id="bar-colors"
|
29
|
+
title="Bar Graph with Custom Data Colors"
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
31
|
+
yAxisMin={0}
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
</div>
|
35
|
+
)
|
54
36
|
|
55
37
|
export default BarGraphColors
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import ReactDOMServer from 'react-dom/server'
|
3
|
+
import BarGraph from '../_bar_graph'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
5
|
+
|
6
|
+
const chartData = [
|
7
|
+
{
|
8
|
+
name: 'Role',
|
9
|
+
data: [0, 200, 300, 654, 656],
|
10
|
+
},
|
11
|
+
{
|
12
|
+
name: 'Company',
|
13
|
+
data: [150, 524, 320, 440, 500],
|
14
|
+
},
|
15
|
+
]
|
16
|
+
|
17
|
+
const renderIcon = (iconName, color) => {
|
18
|
+
return ReactDOMServer.renderToStaticMarkup(
|
19
|
+
<Icon
|
20
|
+
color={color}
|
21
|
+
icon={iconName}
|
22
|
+
/>)
|
23
|
+
};
|
24
|
+
|
25
|
+
const barGraphOptions = {
|
26
|
+
yAxis: {
|
27
|
+
tickInterval: 5,
|
28
|
+
},
|
29
|
+
xAxis: {
|
30
|
+
categories: ['1', '2', '3', '4', '5'],
|
31
|
+
labels: {
|
32
|
+
useHTML: true,
|
33
|
+
formatter: function () {
|
34
|
+
switch (this.value) {
|
35
|
+
case '1':
|
36
|
+
return `${renderIcon('frown', 'error')}`;
|
37
|
+
case '2':
|
38
|
+
return `${renderIcon('frown', 'warning')}`;
|
39
|
+
case '3':
|
40
|
+
return `${renderIcon('frown-open', 'neutral')}`;
|
41
|
+
case '4':
|
42
|
+
return `${renderIcon('smile', 'category_7')}`;
|
43
|
+
case '5':
|
44
|
+
return `${renderIcon('smile-beam', 'success')}`;
|
45
|
+
default:
|
46
|
+
return ''
|
47
|
+
}
|
48
|
+
},
|
49
|
+
style: {
|
50
|
+
fontSize: '1.4em',
|
51
|
+
},
|
52
|
+
y: 42,
|
53
|
+
},
|
54
|
+
},
|
55
|
+
legend: {
|
56
|
+
itemMarginTop: 62,
|
57
|
+
},
|
58
|
+
}
|
59
|
+
|
60
|
+
const BarGraphCustom = () => (
|
61
|
+
<div>
|
62
|
+
<BarGraph
|
63
|
+
chartData={chartData}
|
64
|
+
customOptions={barGraphOptions}
|
65
|
+
id="happiness-dashboard"
|
66
|
+
legend
|
67
|
+
title="Bar Graph with Custom Overrides"
|
68
|
+
/>
|
69
|
+
</div>
|
70
|
+
)
|
71
|
+
|
72
|
+
export default BarGraphCustom
|
@@ -0,0 +1,6 @@
|
|
1
|
+
The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
|
2
|
+
It's important to note that certain options may require specific script imports to function properly.
|
3
|
+
|
4
|
+
Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
|
5
|
+
|
6
|
+
You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import barGraphTheme from '../barGraphTheme';
|
3
|
-
import Highcharts from "highcharts";
|
4
|
-
import HighchartsReact from "highcharts-react-official";
|
5
2
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
6
4
|
|
7
5
|
const chartData = [{
|
8
6
|
name: 'Installation',
|
@@ -21,35 +19,19 @@ const chartData = [{
|
|
21
19
|
data: [1111, 677, 3245, 500, 200],
|
22
20
|
}]
|
23
21
|
|
24
|
-
const
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
},
|
39
|
-
},
|
40
|
-
}
|
41
|
-
|
42
|
-
const BarGraphDefault = () => {
|
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
|
-
}
|
22
|
+
const BarGraphDefault = (props) => (
|
23
|
+
<div>
|
24
|
+
<BarGraph
|
25
|
+
axisTitle="Number of Employees"
|
26
|
+
chartData={chartData}
|
27
|
+
id="bar-default"
|
28
|
+
subTitle="Source: thesolarfoundation.com"
|
29
|
+
title="Solar Employment Growth by Sector, 2010-2016"
|
30
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
31
|
+
yAxisMin={0}
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
</div>
|
35
|
+
)
|
54
36
|
|
55
37
|
export default BarGraphDefault
|
@@ -1,69 +1,39 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import barGraphTheme from '../barGraphTheme';
|
3
|
-
import Highcharts from "highcharts";
|
4
|
-
import HighchartsReact from "highcharts-react-official";
|
5
2
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
6
4
|
|
7
5
|
const chartData = [{
|
8
6
|
name: 'Number of Installations',
|
9
7
|
data: [1475, 200, 3000, 654, 656],
|
10
8
|
}]
|
11
9
|
|
12
|
-
const
|
13
|
-
chart: {
|
14
|
-
height: "300"
|
15
|
-
},
|
16
|
-
series: chartData,
|
17
|
-
title: {
|
18
|
-
text: "Fixed Height (300px)",
|
19
|
-
},
|
20
|
-
xAxis: {
|
21
|
-
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
22
|
-
},
|
23
|
-
yAxis: {
|
24
|
-
title: {
|
25
|
-
text: "Number of Employees",
|
26
|
-
},
|
27
|
-
},
|
28
|
-
};
|
29
|
-
|
30
|
-
const percentageHeightChartOptions = {
|
31
|
-
chart: {
|
32
|
-
height: "50%"
|
33
|
-
},
|
34
|
-
series: chartData,
|
35
|
-
title: {
|
36
|
-
text: "Percentage Height (50%)",
|
37
|
-
},
|
38
|
-
xAxis: {
|
39
|
-
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
40
|
-
},
|
41
|
-
yAxis: {
|
42
|
-
title: {
|
43
|
-
text: "Number of Employees",
|
44
|
-
},
|
45
|
-
},
|
46
|
-
};
|
47
|
-
|
48
|
-
const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
|
49
|
-
|
50
|
-
const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
|
51
|
-
|
52
|
-
const BarGraphHeight = () => (
|
10
|
+
const BarGraphDefault = (props) => (
|
53
11
|
<div>
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
12
|
+
<BarGraph
|
13
|
+
axisTitle="Number of Employees"
|
14
|
+
chartData={chartData}
|
15
|
+
height="300"
|
16
|
+
id="bar-fixed-height"
|
17
|
+
title="Fixed Height (300px)"
|
18
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
19
|
+
yAxisMin={0}
|
20
|
+
{...props}
|
21
|
+
/>
|
58
22
|
|
59
23
|
<br />
|
60
24
|
<br />
|
61
25
|
|
62
|
-
<
|
63
|
-
|
64
|
-
|
26
|
+
<BarGraph
|
27
|
+
axisTitle="Number of Employees"
|
28
|
+
chartData={chartData}
|
29
|
+
height="50%"
|
30
|
+
id="bar-percentage-height"
|
31
|
+
title="Percentage Height (50%)"
|
32
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
33
|
+
yAxisMin={0}
|
34
|
+
{...props}
|
65
35
|
/>
|
66
36
|
</div>
|
67
37
|
)
|
68
38
|
|
69
|
-
export default
|
39
|
+
export default BarGraphDefault
|
@@ -1,10 +1,9 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import barGraphTheme from '../barGraphTheme';
|
3
|
-
import Highcharts from "highcharts";
|
4
|
-
import HighchartsReact from "highcharts-react-official";
|
5
2
|
|
3
|
+
import BarGraph from '../_bar_graph'
|
6
4
|
|
7
|
-
|
5
|
+
|
6
|
+
const barGraphOptions = {
|
8
7
|
chart: {
|
9
8
|
type: 'bar'
|
10
9
|
},
|
@@ -23,8 +22,13 @@ const chartOptions = {
|
|
23
22
|
lineWidth: 0
|
24
23
|
},
|
25
24
|
yAxis: {
|
25
|
+
min: 0,
|
26
26
|
title: {
|
27
|
-
text: '',
|
27
|
+
text: 'Population (millions)',
|
28
|
+
align: 'high'
|
29
|
+
},
|
30
|
+
labels: {
|
31
|
+
overflow: 'justify'
|
28
32
|
},
|
29
33
|
},
|
30
34
|
tooltip: {
|
@@ -47,16 +51,16 @@ const chartOptions = {
|
|
47
51
|
}, {
|
48
52
|
name: 'Year 2018',
|
49
53
|
data: [1276, 1007, 4561, 746]
|
50
|
-
}]
|
54
|
+
}]
|
51
55
|
}
|
52
56
|
|
53
|
-
const
|
54
|
-
|
55
|
-
const BarGraphHorizontal = () => (
|
57
|
+
const BarGraphHorizontal = (props) => (
|
56
58
|
<div>
|
57
|
-
<
|
58
|
-
|
59
|
-
|
59
|
+
<BarGraph
|
60
|
+
customOptions={barGraphOptions}
|
61
|
+
id="bar-horizontal"
|
62
|
+
yAxisMin={0}
|
63
|
+
{...props}
|
60
64
|
/>
|
61
65
|
</div>
|
62
66
|
)
|
@@ -1,40 +1,24 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
3
|
-
import Highcharts from "highcharts";
|
4
|
-
import HighchartsReact from "highcharts-react-official";
|
5
|
-
|
2
|
+
import BarGraph from "../../pb_bar_graph/_bar_graph"
|
6
3
|
|
7
4
|
const chartData = [{
|
8
5
|
name: 'Number of Installations',
|
9
6
|
data: [1475, 200, 3000, 654, 656],
|
10
7
|
}]
|
11
8
|
|
12
|
-
const
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
}
|
9
|
+
const BarGraphLegend = (props) => (
|
10
|
+
<div>
|
11
|
+
<BarGraph
|
12
|
+
axisTitle="Number of Employees"
|
13
|
+
chartData={chartData}
|
14
|
+
id="bar-test-2"
|
15
|
+
legend
|
16
|
+
title="Bar Graph with Legend"
|
17
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
18
|
+
yAxisMin={0}
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
</div>
|
22
|
+
)
|
27
23
|
|
28
|
-
const BarGraphLegend = () => {
|
29
|
-
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
30
|
-
|
31
|
-
return (
|
32
|
-
<div>
|
33
|
-
<HighchartsReact
|
34
|
-
highcharts={Highcharts}
|
35
|
-
options={options}
|
36
|
-
/>
|
37
|
-
</div>
|
38
|
-
)
|
39
|
-
}
|
40
24
|
export default BarGraphLegend
|
@@ -1,48 +1,25 @@
|
|
1
1
|
import React from 'react'
|
2
|
-
import
|
3
|
-
import Highcharts from "highcharts";
|
4
|
-
import HighchartsReact from "highcharts-react-official";
|
5
|
-
|
2
|
+
import BarGraph from "../../pb_bar_graph/_bar_graph"
|
6
3
|
|
7
4
|
const chartData = [{
|
8
5
|
name: 'Number of Installations',
|
9
6
|
data: [1475, 200, 3000, 654, 656],
|
10
7
|
}]
|
11
8
|
|
12
|
-
const
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
itemClick: function () {
|
28
|
-
return false;
|
29
|
-
}
|
30
|
-
}
|
31
|
-
},
|
32
|
-
series: chartData
|
33
|
-
}
|
34
|
-
|
35
|
-
const BarGraphLegendNonClickable = () => {
|
36
|
-
const options = Highcharts.merge({}, barGraphTheme, chartOptions)
|
37
|
-
|
38
|
-
return (
|
39
|
-
<div>
|
40
|
-
<HighchartsReact
|
41
|
-
highcharts={Highcharts}
|
42
|
-
options={options}
|
43
|
-
/>
|
44
|
-
</div>
|
45
|
-
)
|
46
|
-
}
|
9
|
+
const BarGraphLegendNonClickable = (props) => (
|
10
|
+
<div>
|
11
|
+
<BarGraph
|
12
|
+
axisTitle="Number of Employees"
|
13
|
+
chartData={chartData}
|
14
|
+
id="bar-test-3"
|
15
|
+
legend
|
16
|
+
title="Bar Graph with Legend Non Clickable"
|
17
|
+
toggleLegendClick={false}
|
18
|
+
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
|
19
|
+
yAxisMin={0}
|
20
|
+
{...props}
|
21
|
+
/>
|
22
|
+
</div>
|
23
|
+
)
|
47
24
|
|
48
25
|
export default BarGraphLegendNonClickable
|