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.
Files changed (79) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +5 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -5
  6. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -36
  7. data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -32
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +15 -31
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
  27. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  28. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  47. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
  48. data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
  49. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
  50. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  51. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  52. data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
  53. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
  54. data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-B7FRYVtS.js} +3 -3
  55. data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-D5re2fT9.js} +2 -2
  56. data/dist/chunks/{lib-DYpq0k8j.js → lib-Carqm8Ip.js} +1 -1
  57. data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-DqRmTS8m.js} +1 -1
  58. data/dist/chunks/vendor.js +1 -1
  59. data/dist/menu.yml +8 -68
  60. data/dist/playbook-doc.js +2 -2
  61. data/dist/playbook-rails-react-bindings.js +1 -1
  62. data/dist/playbook-rails.js +1 -1
  63. data/dist/playbook.css +1 -1
  64. data/lib/playbook/version.rb +1 -1
  65. metadata +16 -21
  66. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +0 -51
  67. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +0 -1
  68. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +0 -106
  69. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
  70. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
  71. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
  72. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
  73. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
  74. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
  75. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
  76. data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
  77. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
  78. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
  79. /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: ddcfecfbe5c6d6dc4bbf934394560b00a8a2a12d3a4c8c6265f8631cf67f91b9
4
- data.tar.gz: a1ae8ef97c98ce81a2ee2f79c3cb7778b680a6fd26a943081db510cb2537eb83
3
+ metadata.gz: 6152833af218a14955e5100fb4ddfa551f879d572ad7961ad2eab37f72afb356
4
+ data.tar.gz: 39578a75358b930b6282f5764d3e682fc2b20fef0c8ac1cce430f1ba1267249f
5
5
  SHA512:
6
- metadata.gz: 3e144374508f511c0b8dd6d4f131290491e37db99754b0567ac9780ed747195714975406ae7980439ff42ce818de7a5fd4ead198c34a1440cc475dbc8f03afde
7
- data.tar.gz: bc83e8baca7f39fd42afd83c3aa27a6cee79bda3ddc2e2098df15ca4330c18acebd116264dccd2234d3aa977f66278b61cf042530eeb11bcf617ab82d865a21d
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
- useEffect(() => {
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
- <% if object.has_custom_header_renderer?(cell) %>
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
- $pb_badge_height_rounded: 16px;
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: $pb_badge_height_rounded;
34
- min-height: $pb_badge_height_rounded;
35
- min-width: $pb_badge_height_rounded;
36
- border-radius: $pb_badge_height_rounded / 2;
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 chartOptions = {
27
- series: chartData,
28
- title: {
29
- text: "Bar Graph with Custom Data Colors",
30
- },
31
- xAxis: {
32
- categories: ["Jan", "Feb", "Mar", "Apr", "May"],
33
- },
34
- yAxis: {
35
- title: {
36
- text: "Number of Employees",
37
- },
38
- },
39
- colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
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 chartOptions = {
25
- series: chartData,
26
- title: {
27
- text: 'Solar Employment Growth by Sector, 2010-2016',
28
- },
29
- subtitle: {
30
- text: 'Source: thesolarfoundation.com',
31
- },
32
- xAxis: {
33
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
34
- },
35
- yAxis: {
36
- title: {
37
- text: 'Number of Employees',
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 pixelHeightChartOptions = {
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
- <HighchartsReact
55
- highcharts={Highcharts}
56
- options={pixelOptions}
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
- <HighchartsReact
63
- highcharts={Highcharts}
64
- options={percentageOptions}
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 BarGraphHeight
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
- const chartOptions = {
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 options = Highcharts.merge({}, barGraphTheme, chartOptions)
54
-
55
- const BarGraphHorizontal = () => (
57
+ const BarGraphHorizontal = (props) => (
56
58
  <div>
57
- <HighchartsReact
58
- highcharts={Highcharts}
59
- options={options}
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 barGraphTheme from '../barGraphTheme';
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 chartOptions = {
13
- series: chartData,
14
- title: {
15
- text: 'Bar Graph with Legend',
16
- },
17
- xAxis: {
18
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
19
- },
20
- yAxis: {
21
- title: {
22
- text: 'Number of Employees',
23
- },
24
- },
25
- legend: { enabled: true },
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 barGraphTheme from '../barGraphTheme';
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 chartOptions = {
13
- title: {
14
- text: 'Bar Graph with Legend Non Clickable',
15
- },
16
- xAxis: {
17
- categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
18
- },
19
- yAxis: {
20
- title: {
21
- text: 'Number of Employees',
22
- },
23
- },
24
- legend: {
25
- enabled: true,
26
- events: {
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