playbook_ui 14.22.0 → 14.23.0.pre.alpha.PLAY2205atborderbug9085
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/CustomCell.tsx +6 -7
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +10 -10
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +58 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +15 -6
- 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 +13 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +16 -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_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 +13 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +7 -1
- 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 +13 -4
- 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_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_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_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-BNHSKTSw.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 +43 -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
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.
|
4
|
+
version: 14.23.0.pre.alpha.PLAY2205atborderbug9085
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2025-
|
12
|
+
date: 2025-07-18 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -328,6 +328,8 @@ files:
|
|
328
328
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
|
329
329
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
|
330
330
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
|
331
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx
|
332
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
|
331
333
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
332
334
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
333
335
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
|
@@ -357,8 +359,10 @@ files:
|
|
357
359
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
|
358
360
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
|
359
361
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
|
362
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb
|
360
363
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
|
361
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/
|
364
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md
|
365
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md
|
362
366
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
|
363
367
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
|
364
368
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
|
@@ -401,6 +405,10 @@ files:
|
|
401
405
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
|
402
406
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
|
403
407
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
|
408
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
|
409
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
|
410
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
|
411
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
|
404
412
|
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
|
405
413
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
|
406
414
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
|
@@ -514,19 +522,19 @@ files:
|
|
514
522
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
515
523
|
- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
|
516
524
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
525
|
+
- app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
|
517
526
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
518
527
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
519
528
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
|
520
529
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
|
521
530
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
|
522
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
|
523
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
|
524
531
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
|
525
532
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
|
526
533
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
|
527
534
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
|
528
535
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
|
529
536
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
|
537
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
|
530
538
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
|
531
539
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
|
532
540
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
|
@@ -538,8 +546,6 @@ files:
|
|
538
546
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
|
539
547
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
|
540
548
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
|
541
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
|
542
|
-
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
|
543
549
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
|
544
550
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
|
545
551
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
|
@@ -571,7 +577,8 @@ files:
|
|
571
577
|
- app/pb_kits/playbook/pb_body/docs/_body_styled.md
|
572
578
|
- app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
|
573
579
|
- app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
|
574
|
-
- app/pb_kits/playbook/pb_body/docs/
|
580
|
+
- app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
|
581
|
+
- app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
|
575
582
|
- app/pb_kits/playbook/pb_body/docs/_description.md
|
576
583
|
- app/pb_kits/playbook/pb_body/docs/_footer.md
|
577
584
|
- app/pb_kits/playbook/pb_body/docs/example.yml
|
@@ -765,7 +772,8 @@ files:
|
|
765
772
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
|
766
773
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
767
774
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
|
768
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/
|
775
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
|
776
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
|
769
777
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
|
770
778
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
|
771
779
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
|
@@ -777,8 +785,6 @@ files:
|
|
777
785
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
|
778
786
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
|
779
787
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
|
780
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
|
781
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
|
782
788
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
783
789
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
|
784
790
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
@@ -787,6 +793,7 @@ files:
|
|
787
793
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
|
788
794
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
789
795
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
|
796
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
|
790
797
|
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
791
798
|
- app/pb_kits/playbook/pb_circle_chart/docs/index.js
|
792
799
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
@@ -1671,12 +1678,15 @@ files:
|
|
1671
1678
|
- app/pb_kits/playbook/pb_form_pill/form_pill.rb
|
1672
1679
|
- app/pb_kits/playbook/pb_gauge/_gauge.scss
|
1673
1680
|
- app/pb_kits/playbook/pb_gauge/_gauge.tsx
|
1681
|
+
- app/pb_kits/playbook/pb_gauge/docs/_description.md
|
1674
1682
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
|
1675
1683
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
|
1676
|
-
- app/pb_kits/playbook/pb_gauge/docs/
|
1684
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_rails.md
|
1685
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md
|
1677
1686
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb
|
1678
1687
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx
|
1679
|
-
- app/pb_kits/playbook/pb_gauge/docs/
|
1688
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_rails.md
|
1689
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md
|
1680
1690
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
|
1681
1691
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
|
1682
1692
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
|
@@ -1689,8 +1699,6 @@ files:
|
|
1689
1699
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
|
1690
1700
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
|
1691
1701
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md
|
1692
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx
|
1693
|
-
- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md
|
1694
1702
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
|
1695
1703
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
|
1696
1704
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md
|
@@ -1698,6 +1706,7 @@ files:
|
|
1698
1706
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
|
1699
1707
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
|
1700
1708
|
- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
|
1709
|
+
- app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md
|
1701
1710
|
- app/pb_kits/playbook/pb_gauge/docs/example.yml
|
1702
1711
|
- app/pb_kits/playbook/pb_gauge/docs/index.js
|
1703
1712
|
- app/pb_kits/playbook/pb_gauge/gauge.html.erb
|
@@ -2014,11 +2023,13 @@ files:
|
|
2014
2023
|
- app/pb_kits/playbook/pb_line_graph/docs/_description.md
|
2015
2024
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
|
2016
2025
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
|
2017
|
-
- app/pb_kits/playbook/pb_line_graph/docs/
|
2026
|
+
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_rails.md
|
2027
|
+
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md
|
2018
2028
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb
|
2019
2029
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx
|
2020
2030
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb
|
2021
2031
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx
|
2032
|
+
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md
|
2022
2033
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb
|
2023
2034
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx
|
2024
2035
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb
|
@@ -2026,8 +2037,6 @@ files:
|
|
2026
2037
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb
|
2027
2038
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
|
2028
2039
|
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
|
2029
|
-
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx
|
2030
|
-
- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md
|
2031
2040
|
- app/pb_kits/playbook/pb_line_graph/docs/example.yml
|
2032
2041
|
- app/pb_kits/playbook/pb_line_graph/docs/index.js
|
2033
2042
|
- app/pb_kits/playbook/pb_line_graph/lineGraph.test.js
|
@@ -2463,6 +2472,9 @@ files:
|
|
2463
2472
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
|
2464
2473
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
|
2465
2474
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
|
2475
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
|
2476
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
|
2477
|
+
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
|
2466
2478
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
|
2467
2479
|
- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
|
2468
2480
|
- app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
|
@@ -3280,7 +3292,8 @@ files:
|
|
3280
3292
|
- app/pb_kits/playbook/pb_title/docs/_title_responsive.md
|
3281
3293
|
- app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
|
3282
3294
|
- app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
|
3283
|
-
- app/pb_kits/playbook/pb_title/docs/
|
3295
|
+
- app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
|
3296
|
+
- app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
|
3284
3297
|
- app/pb_kits/playbook/pb_title/docs/example.yml
|
3285
3298
|
- app/pb_kits/playbook/pb_title/docs/index.js
|
3286
3299
|
- app/pb_kits/playbook/pb_title/title.html.erb
|
@@ -3337,8 +3350,10 @@ files:
|
|
3337
3350
|
- app/pb_kits/playbook/pb_toggle/toggle.test.js
|
3338
3351
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
3339
3352
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
3353
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
|
3340
3354
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
|
3341
|
-
- app/pb_kits/playbook/pb_tooltip/docs/
|
3355
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
|
3356
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
|
3342
3357
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
3343
3358
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
3344
3359
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
@@ -3404,8 +3419,10 @@ files:
|
|
3404
3419
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
3405
3420
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
3406
3421
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
3422
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
|
3407
3423
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
|
3408
|
-
- app/pb_kits/playbook/pb_typeahead/docs/
|
3424
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
|
3425
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
3409
3426
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
3410
3427
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
3411
3428
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
@@ -3612,11 +3629,12 @@ files:
|
|
3612
3629
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3613
3630
|
- app/pb_kits/playbook/utilities/text.ts
|
3614
3631
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3615
|
-
- dist/chunks/
|
3616
|
-
- dist/chunks/
|
3632
|
+
- dist/chunks/_line_graph-BfCo79KE.js
|
3633
|
+
- dist/chunks/_typeahead-Db4YQA5c.js
|
3634
|
+
- dist/chunks/_weekday_stacked-BNHSKTSw.js
|
3617
3635
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3618
|
-
- dist/chunks/lib-
|
3619
|
-
- dist/chunks/pb_form_validation-
|
3636
|
+
- dist/chunks/lib-DnQyMxO1.js
|
3637
|
+
- dist/chunks/pb_form_validation-kl-4Jv4t.js
|
3620
3638
|
- dist/chunks/vendor.js
|
3621
3639
|
- dist/menu.yml
|
3622
3640
|
- dist/playbook-doc.js
|
@@ -1,72 +0,0 @@
|
|
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
|
@@ -1,6 +0,0 @@
|
|
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,64 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Highcharts from "highcharts";
|
3
|
-
import HighchartsReact from "highcharts-react-official";
|
4
|
-
|
5
|
-
import "../BarGraphStyles.scss";
|
6
|
-
// Your path might look more like this
|
7
|
-
//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
|
8
|
-
|
9
|
-
const columnChartData = [
|
10
|
-
{
|
11
|
-
name: "Installation",
|
12
|
-
data: [1475, 200, 3000, 654, 656],
|
13
|
-
},
|
14
|
-
{
|
15
|
-
name: "Manufacturing",
|
16
|
-
data: [4434, 524, 2320, 440, 500],
|
17
|
-
},
|
18
|
-
{
|
19
|
-
name: "Sales & Distribution",
|
20
|
-
data: [3387, 743, 1344, 434, 440],
|
21
|
-
},
|
22
|
-
{
|
23
|
-
name: "Project Development",
|
24
|
-
data: [3227, 878, 999, 780, 1000],
|
25
|
-
},
|
26
|
-
{
|
27
|
-
name: "Other",
|
28
|
-
data: [1111, 677, 3245, 500, 200],
|
29
|
-
},
|
30
|
-
];
|
31
|
-
|
32
|
-
const columnOptions = {
|
33
|
-
chart: {
|
34
|
-
type: "column",
|
35
|
-
},
|
36
|
-
series: columnChartData,
|
37
|
-
title: {
|
38
|
-
text: "Solar Employment Growth by Sector, 2010-2016",
|
39
|
-
},
|
40
|
-
subtitle: {
|
41
|
-
text: "Source: thesolarfoundation.com",
|
42
|
-
},
|
43
|
-
xAxis: {
|
44
|
-
categories: ["Jan", "Feb", "Mar", "Apr", "May"],
|
45
|
-
},
|
46
|
-
yAxis: {
|
47
|
-
min: 0,
|
48
|
-
title: {
|
49
|
-
text: "Number of Employees",
|
50
|
-
},
|
51
|
-
},
|
52
|
-
legend: { enabled: false },
|
53
|
-
credits: { enabled: false },
|
54
|
-
};
|
55
|
-
|
56
|
-
const BarGraphPbStyles = () => (
|
57
|
-
<div>
|
58
|
-
<HighchartsReact highcharts={Highcharts}
|
59
|
-
options={columnOptions}
|
60
|
-
/>
|
61
|
-
</div>
|
62
|
-
)
|
63
|
-
|
64
|
-
export default BarGraphPbStyles
|
@@ -1 +0,0 @@
|
|
1
|
-
You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.
|
@@ -1,38 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import circleChartTheme from '../circleChartTheme'
|
3
|
-
import Highcharts from "highcharts"
|
4
|
-
import HighchartsReact from "highcharts-react-official"
|
5
|
-
|
6
|
-
const data = [
|
7
|
-
{
|
8
|
-
name: 'Waiting for Calls',
|
9
|
-
y: 41,
|
10
|
-
},
|
11
|
-
{
|
12
|
-
name: 'On Call',
|
13
|
-
y: 49,
|
14
|
-
},
|
15
|
-
{
|
16
|
-
name: 'After Call',
|
17
|
-
y: 10,
|
18
|
-
},
|
19
|
-
]
|
20
|
-
|
21
|
-
const baseOptions = {
|
22
|
-
series: [{ data: data }],
|
23
|
-
}
|
24
|
-
|
25
|
-
const CircleChartPbStyles = () => {
|
26
|
-
const options = Highcharts.merge({}, circleChartTheme, baseOptions )
|
27
|
-
|
28
|
-
return (
|
29
|
-
<div>
|
30
|
-
<HighchartsReact
|
31
|
-
highcharts={Highcharts}
|
32
|
-
options={options}
|
33
|
-
/>
|
34
|
-
</div>
|
35
|
-
);
|
36
|
-
};
|
37
|
-
|
38
|
-
export default CircleChartPbStyles;
|
@@ -1 +0,0 @@
|
|
1
|
-
You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
|
@@ -1,30 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import gaugeTheme from '../gaugeTheme'
|
3
|
-
import Highcharts from "highcharts"
|
4
|
-
import HighchartsReact from "highcharts-react-official"
|
5
|
-
import HighchartsMore from "highcharts/highcharts-more"
|
6
|
-
import SolidGauge from "highcharts/modules/solid-gauge"
|
7
|
-
|
8
|
-
HighchartsMore(Highcharts);
|
9
|
-
SolidGauge(Highcharts);
|
10
|
-
|
11
|
-
const data = [{ name: "Name", y: 45 }]
|
12
|
-
|
13
|
-
const baseOptions = {
|
14
|
-
series: [{ data: data }],
|
15
|
-
};
|
16
|
-
|
17
|
-
const GaugePbStyles = () => {
|
18
|
-
const options = Highcharts.merge({}, gaugeTheme, baseOptions);
|
19
|
-
|
20
|
-
return (
|
21
|
-
<div>
|
22
|
-
<HighchartsReact
|
23
|
-
highcharts={Highcharts}
|
24
|
-
options={options}
|
25
|
-
/>
|
26
|
-
</div>
|
27
|
-
);
|
28
|
-
};
|
29
|
-
|
30
|
-
export default GaugePbStyles;
|
@@ -1 +0,0 @@
|
|
1
|
-
You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.
|
@@ -1,52 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import lineGraphTheme from '../lineGraphTheme'
|
3
|
-
import Highcharts from "highcharts"
|
4
|
-
import HighchartsReact from "highcharts-react-official"
|
5
|
-
|
6
|
-
const data = [{
|
7
|
-
name: 'Installation',
|
8
|
-
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
|
9
|
-
}, {
|
10
|
-
name: 'Manufacturing',
|
11
|
-
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
|
12
|
-
}, {
|
13
|
-
name: 'Sales & Distribution',
|
14
|
-
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
|
15
|
-
}, {
|
16
|
-
name: 'Project Development',
|
17
|
-
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
|
18
|
-
}, {
|
19
|
-
name: 'Other',
|
20
|
-
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
|
21
|
-
}]
|
22
|
-
|
23
|
-
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
24
|
-
|
25
|
-
const baseOptions = {
|
26
|
-
series: data,
|
27
|
-
title: { text: "Solar Employment Growth by Sector, 2010-2016" },
|
28
|
-
subtitle: { text: "Source: thesolarfoundation.com" },
|
29
|
-
xAxis: {
|
30
|
-
categories: categories,
|
31
|
-
},
|
32
|
-
yAxis: {
|
33
|
-
title: {
|
34
|
-
text: "Number of Employees",
|
35
|
-
},
|
36
|
-
},
|
37
|
-
}
|
38
|
-
|
39
|
-
const LineGraphPbStyles = () => {
|
40
|
-
const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
|
41
|
-
|
42
|
-
return(
|
43
|
-
<div>
|
44
|
-
<HighchartsReact
|
45
|
-
highcharts={Highcharts}
|
46
|
-
options={options}
|
47
|
-
/>
|
48
|
-
</div>
|
49
|
-
)
|
50
|
-
}
|
51
|
-
|
52
|
-
export default LineGraphPbStyles
|
@@ -1 +0,0 @@
|
|
1
|
-
You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.
|