playbook_ui 14.22.0.pre.alpha.PLAY2303optB8977 → 14.22.0.pre.alpha.PLAY22578709

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 (71) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -7
  3. data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -32
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +15 -31
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
  23. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  24. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  43. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
  44. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  45. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  46. data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
  47. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
  48. data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-BZsshVoi.js} +3 -3
  49. data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-DO4S-plL.js} +1 -1
  50. data/dist/chunks/{lib-DYpq0k8j.js → lib-Carqm8Ip.js} +1 -1
  51. data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-DqRmTS8m.js} +1 -1
  52. data/dist/chunks/vendor.js +1 -1
  53. data/dist/menu.yml +8 -68
  54. data/dist/playbook-doc.js +2 -2
  55. data/dist/playbook-rails-react-bindings.js +1 -1
  56. data/dist/playbook-rails.js +1 -1
  57. data/dist/playbook.css +1 -1
  58. data/lib/playbook/version.rb +1 -1
  59. metadata +16 -19
  60. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +0 -106
  61. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
  62. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
  65. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
  68. data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
  69. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
  70. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
  71. /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: 3672cfbb818cbb482ce3c2044ccdf0b85d99895ada5dd9b151e4296dd02560df
4
- data.tar.gz: '028c8a45076c258ecb086df992ba825d618e3775ceffccbbba6fe56c0b8e936d'
3
+ metadata.gz: ee237263c36fb6a79f0ab854b478c11dd52c0c36d7656bc442ff647b27831c45
4
+ data.tar.gz: d957832e4ab49ccaafa61a17e6e850682d9c96ec164e32ca46b3266638ddd024
5
5
  SHA512:
6
- metadata.gz: fad49a6fa76abfda7e777b17cd5211fac506d19a173ea4d3cd6be8b36714f90e26cd6c7d8badffc2c267bcead8664d91c5883ebd8603b2c3f1d13bf2ca86ed5b
7
- data.tar.gz: 69a327d5234349c0d67593a12e7657ac06285dc60a93542c753b60dc5d03561a62bf4b5ef27187904ce5965e12a00e142db17ec8329c03ec202aba092151c144
6
+ metadata.gz: 4e1f0a36db1c3fa7e9c136ed3e5f6bcd95e691e5617e4bc03a79fe96e3e6b356d64990396301cf87ebfcfef946515ed4e7e1336b970ee9d06f86a5fd490e50eb
7
+ data.tar.gz: bfd00edc136aa357808e6afc06022818c225deffaa1d912ebc1d1d98bb8d2064e937d950a3b7578c917889176dcd392be9877b666d48eaf7f3bfe1b2cac0d7a4
@@ -12,6 +12,7 @@ examples:
12
12
  - advanced_table_custom_cell_rails: Custom Components for Cells
13
13
  - advanced_table_column_headers: Multi-Header Columns
14
14
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
15
+ - advanced_table_column_border_color_rails: Column Group Border Color
15
16
  - advanced_table_no_subrows: Table with No Subrows or Expansion
16
17
  - advanced_table_selectable_rows_rails: Selectable Rows
17
18
  - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -20,11 +21,10 @@ examples:
20
21
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
21
22
  - advanced_table_column_styling_rails: Column Styling
22
23
  - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
23
- - advanced_table_column_border_color_rails: Column Group Border Color
24
-
25
24
 
26
25
  react:
27
26
  - advanced_table_default: Default (Required Props)
27
+ - advanced_table_loading: Loading State
28
28
  - advanced_table_sort: Enable Sorting
29
29
  - advanced_table_sort_control: Sort Control
30
30
  - advanced_table_custom_sort: Custom Sort
@@ -38,31 +38,30 @@ examples:
38
38
  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
39
39
  - advanced_table_sticky_columns: Sticky Columns
40
40
  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
41
+ - advanced_table_inline_row_loading: Inline Row Loading
41
42
  - advanced_table_responsive: Responsive Tables
42
43
  - advanced_table_custom_cell: Custom Components for Cells
43
44
  - advanced_table_with_custom_header: Custom Header Cell
44
45
  - advanced_table_pagination: Pagination
45
46
  - advanced_table_pagination_with_props: Pagination Props
46
- - advanced_table_loading: Loading State
47
- - advanced_table_inline_row_loading: Inline Row Loading
48
47
  - advanced_table_column_headers: Multi-Header Columns
49
48
  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
50
49
  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
50
+ - advanced_table_column_border_color: Column Group Border Color
51
51
  - advanced_table_no_subrows: Table with No Subrows or Expansion
52
- - advanced_table_pinned_rows: Pinned Rows
53
52
  - advanced_table_selectable_rows: Selectable Rows
54
53
  - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
55
54
  - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
56
55
  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
57
56
  - advanced_table_inline_editing: Inline Cell Editing
57
+ - advanced_table_fullscreen: Fullscreen
58
58
  - advanced_table_column_visibility: Column Visibility Control
59
59
  - advanced_table_column_visibility_with_state: Column Visibility Control With State
60
60
  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
61
61
  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
62
+ - advanced_table_pinned_rows: Pinned Rows
62
63
  - advanced_table_scrollbar_none: Advanced Table Scrollbar None
63
64
  - advanced_table_row_styling: Row Styling
64
65
  - advanced_table_column_styling: Column Styling
65
66
  - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
66
- - advanced_table_column_border_color: Column Group Border Color
67
- - advanced_table_fullscreen: Fullscreen
68
67
  - advanced_table_infinite_scroll: Infinite Scroll
@@ -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