playbook_ui 15.2.0.pre.alpha.play257911600 → 15.2.0.pre.alpha.testingmanual1
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/_playbook.scss +5 -5
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +3 -18
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +14 -56
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +3 -9
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/index.js +1 -5
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +6 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +6 -6
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +5 -49
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +6 -8
- data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +10 -7
- data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +1 -73
- data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +10 -7
- data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -47
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +2 -41
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +20 -60
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +0 -36
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -8
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +1 -127
- data/dist/chunks/{_line_graph-BnVgr42C.js → _line_graph-DiZsCIbc.js} +1 -1
- data/dist/chunks/_typeahead-e_XlDkym.js +6 -0
- data/dist/chunks/{_weekday_stacked-B3YOt9GF.js → _weekday_stacked-qKBP2x1z.js} +2 -2
- data/dist/chunks/{lib-QZuu1ltS.js → lib-izYrkvOQ.js} +2 -2
- data/dist/chunks/{pb_form_validation-CleM960_.js → pb_form_validation-Cah5Z5J3.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -12
- 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 +7 -85
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb +0 -39
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb +0 -40
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.md +0 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md +0 -3
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md +0 -3
- data/app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.scss +0 -3
- data/app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.tsx +0 -69
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md +0 -3
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.html.erb +0 -12
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx +0 -24
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md +0 -5
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.html.erb +0 -45
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx +0 -119
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.md +0 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb +0 -5
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.html.erb +0 -12
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.jsx +0 -24
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.html.erb +0 -23
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx +0 -37
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.html.erb +0 -40
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx +0 -56
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_live_data.jsx +0 -64
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.html.erb +0 -27
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx +0 -40
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.md +0 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.html.erb +0 -19
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.jsx +0 -65
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.md +0 -3
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.html.erb +0 -14
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx +0 -27
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb +0 -39
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx +0 -58
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md +0 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/example.yml +0 -29
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/index.js +0 -11
- data/app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts +0 -91
- data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb +0 -25
- data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx +0 -80
- data/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.scss +0 -3
- data/app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.tsx +0 -61
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md +0 -3
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.html.erb +0 -34
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx +0 -52
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md +0 -5
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb +0 -34
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx +0 -45
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb +0 -47
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.jsx +0 -64
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.html.erb +0 -24
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.jsx +0 -37
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.html.erb +0 -39
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.jsx +0 -45
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb +0 -86
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.jsx +0 -116
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.md +0 -11
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/example.yml +0 -20
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_pb_line_graph/pbLineGraphTheme.ts +0 -125
- data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.rb +0 -25
- data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx +0 -110
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx +0 -38
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx +0 -34
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx +0 -37
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx +0 -37
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx +0 -38
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx +0 -69
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md +0 -1
- data/dist/chunks/_typeahead-BH_dkgOy.js +0 -6
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: 15.2.0.pre.alpha.
|
|
4
|
+
version: 15.2.0.pre.alpha.testingmanual1
|
|
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-10-
|
|
12
|
+
date: 2025-10-16 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -273,8 +273,6 @@ files:
|
|
|
273
273
|
- app/pb_kits/playbook/pb_advanced_table/advanced_table.rb
|
|
274
274
|
- app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
|
|
275
275
|
- app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js
|
|
276
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
|
|
277
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
|
|
278
276
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
|
|
279
277
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
|
|
280
278
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb
|
|
@@ -344,10 +342,6 @@ files:
|
|
|
344
342
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md
|
|
345
343
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
|
|
346
344
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md
|
|
347
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb
|
|
348
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md
|
|
349
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb
|
|
350
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.md
|
|
351
345
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
|
|
352
346
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
|
|
353
347
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
|
|
@@ -2418,7 +2412,6 @@ files:
|
|
|
2418
2412
|
- app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
|
|
2419
2413
|
- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss
|
|
2420
2414
|
- app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx
|
|
2421
|
-
- app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md
|
|
2422
2415
|
- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
|
|
2423
2416
|
- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
|
|
2424
2417
|
- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
|
|
@@ -2452,7 +2445,6 @@ files:
|
|
|
2452
2445
|
- app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx
|
|
2453
2446
|
- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss
|
|
2454
2447
|
- app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx
|
|
2455
|
-
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
|
|
2456
2448
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
|
|
2457
2449
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
|
|
2458
2450
|
- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
|
|
@@ -2483,65 +2475,6 @@ files:
|
|
|
2483
2475
|
- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb
|
|
2484
2476
|
- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb
|
|
2485
2477
|
- app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx
|
|
2486
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.scss
|
|
2487
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.tsx
|
|
2488
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md
|
|
2489
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.html.erb
|
|
2490
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx
|
|
2491
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md
|
|
2492
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.html.erb
|
|
2493
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx
|
|
2494
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.md
|
|
2495
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb
|
|
2496
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.jsx
|
|
2497
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.html.erb
|
|
2498
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.jsx
|
|
2499
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.html.erb
|
|
2500
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx
|
|
2501
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.html.erb
|
|
2502
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx
|
|
2503
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_live_data.jsx
|
|
2504
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.html.erb
|
|
2505
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx
|
|
2506
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.md
|
|
2507
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.html.erb
|
|
2508
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.jsx
|
|
2509
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.md
|
|
2510
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.html.erb
|
|
2511
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx
|
|
2512
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb
|
|
2513
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx
|
|
2514
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md
|
|
2515
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/example.yml
|
|
2516
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/docs/index.js
|
|
2517
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts
|
|
2518
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb
|
|
2519
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb
|
|
2520
|
-
- app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx
|
|
2521
|
-
- app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.scss
|
|
2522
|
-
- app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.tsx
|
|
2523
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md
|
|
2524
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.html.erb
|
|
2525
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx
|
|
2526
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.md
|
|
2527
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.html.erb
|
|
2528
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.jsx
|
|
2529
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.html.erb
|
|
2530
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.jsx
|
|
2531
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_height.md
|
|
2532
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.html.erb
|
|
2533
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.jsx
|
|
2534
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.html.erb
|
|
2535
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.jsx
|
|
2536
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb
|
|
2537
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.jsx
|
|
2538
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.md
|
|
2539
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/example.yml
|
|
2540
|
-
- app/pb_kits/playbook/pb_pb_line_graph/docs/index.js
|
|
2541
|
-
- app/pb_kits/playbook/pb_pb_line_graph/pbLineGraphTheme.ts
|
|
2542
|
-
- app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.html.erb
|
|
2543
|
-
- app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.rb
|
|
2544
|
-
- app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx
|
|
2545
2478
|
- app/pb_kits/playbook/pb_person/_person.scss
|
|
2546
2479
|
- app/pb_kits/playbook/pb_person/_person.tsx
|
|
2547
2480
|
- app/pb_kits/playbook/pb_person/docs/_description.md
|
|
@@ -2767,20 +2700,9 @@ files:
|
|
|
2767
2700
|
- app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
|
|
2768
2701
|
- app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
|
|
2769
2702
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
|
|
2770
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx
|
|
2771
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md
|
|
2772
2703
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
|
|
2773
2704
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
|
|
2774
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
|
|
2775
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
|
|
2776
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
|
|
2777
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
|
|
2778
2705
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
|
|
2779
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
|
|
2780
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
|
|
2781
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
|
|
2782
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
|
|
2783
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
|
|
2784
2706
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
|
|
2785
2707
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
|
|
2786
2708
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
|
|
@@ -3786,13 +3708,13 @@ files:
|
|
|
3786
3708
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
|
3787
3709
|
- app/pb_kits/playbook/utilities/text.ts
|
|
3788
3710
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
|
3789
|
-
- dist/chunks/_line_graph-
|
|
3790
|
-
- dist/chunks/_typeahead-
|
|
3791
|
-
- dist/chunks/_weekday_stacked-
|
|
3711
|
+
- dist/chunks/_line_graph-DiZsCIbc.js
|
|
3712
|
+
- dist/chunks/_typeahead-e_XlDkym.js
|
|
3713
|
+
- dist/chunks/_weekday_stacked-qKBP2x1z.js
|
|
3792
3714
|
- dist/chunks/componentRegistry-DzmmLR2x.js
|
|
3793
3715
|
- dist/chunks/lazysizes-B7xYodB-.js
|
|
3794
|
-
- dist/chunks/lib-
|
|
3795
|
-
- dist/chunks/pb_form_validation-
|
|
3716
|
+
- dist/chunks/lib-izYrkvOQ.js
|
|
3717
|
+
- dist/chunks/pb_form_validation-Cah5Z5J3.js
|
|
3796
3718
|
- dist/chunks/vendor.js
|
|
3797
3719
|
- dist/menu.yml
|
|
3798
3720
|
- dist/playbook-doc.js
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
<% column_definitions = [
|
|
2
|
-
{
|
|
3
|
-
accessor: "year",
|
|
4
|
-
label: "Year",
|
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
accessor: "newEnrollments",
|
|
9
|
-
label: "New Enrollments",
|
|
10
|
-
column_styling: {
|
|
11
|
-
cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
accessor: "scheduledMeetings",
|
|
16
|
-
label: "Scheduled Meetings",
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
accessor: "attendanceRate",
|
|
20
|
-
label: "Attendance Rate",
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
accessor: "completedClasses",
|
|
24
|
-
label: "Completed Classes",
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
accessor: "classCompletionRate",
|
|
28
|
-
label: "Class Completion Rate",
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
accessor: "graduatedStudents",
|
|
32
|
-
label: "Graduated Students",
|
|
33
|
-
}
|
|
34
|
-
] %>
|
|
35
|
-
|
|
36
|
-
<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
37
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
|
|
38
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
|
|
39
|
-
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
<% column_definitions = [
|
|
2
|
-
{
|
|
3
|
-
accessor: "year",
|
|
4
|
-
label: "Year",
|
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
accessor: "newEnrollments",
|
|
9
|
-
label: "New Enrollments",
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
accessor: "scheduledMeetings",
|
|
13
|
-
label: "Scheduled Meetings",
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
accessor: "attendanceRate",
|
|
17
|
-
label: "Attendance Rate",
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
accessor: "completedClasses",
|
|
21
|
-
label: "Completed Classes",
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
accessor: "classCompletionRate",
|
|
25
|
-
label: "Class Completion Rate",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
accessor: "graduatedStudents",
|
|
29
|
-
label: "Graduated Students",
|
|
30
|
-
}
|
|
31
|
-
] %>
|
|
32
|
-
|
|
33
|
-
<% row_styling = [
|
|
34
|
-
{
|
|
35
|
-
row_id: "1",
|
|
36
|
-
cell_padding: "md"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
row_id: "3",
|
|
40
|
-
cell_padding: "lg"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
row_id: "5",
|
|
44
|
-
cell_padding: "none"
|
|
45
|
-
},
|
|
46
|
-
] %>
|
|
47
|
-
|
|
48
|
-
<%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
|
|
49
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control-per-row", column_definitions: column_definitions }) %>
|
|
50
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
|
|
51
|
-
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
`row_styling` can also be used to control padding on all cells in a given row via the use of the `cell_padding` key/value pair as shown here. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<% column_definitions = [
|
|
2
|
-
{
|
|
3
|
-
accessor: "year",
|
|
4
|
-
label: "Year",
|
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
6
|
-
},
|
|
7
|
-
{
|
|
8
|
-
accessor: "newEnrollments",
|
|
9
|
-
label: "New Enrollments",
|
|
10
|
-
column_styling: {
|
|
11
|
-
cell_padding: "none",
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
accessor: "scheduledMeetings",
|
|
16
|
-
label: "Scheduled Meetings",
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
accessor: "attendanceRate",
|
|
20
|
-
label: "Attendance Rate",
|
|
21
|
-
column_styling: { cell_padding: "md" },
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
accessor: "completedClasses",
|
|
25
|
-
label: "Completed Classes",
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
accessor: "classCompletionRate",
|
|
29
|
-
label: "Class Completion Rate",
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
accessor: "graduatedStudents",
|
|
33
|
-
label: "Graduated Students",
|
|
34
|
-
}
|
|
35
|
-
] %>
|
|
36
|
-
|
|
37
|
-
<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
38
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control", column_definitions: column_definitions }) %>
|
|
39
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) %>
|
|
40
|
-
<% end %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
`column_styling` can also be used to control padding on all cells in a given column via the use of the `cell_padding` key/value pair. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible.
|
|
2
|
-
|
|
3
|
-
See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible.
|
|
2
|
-
|
|
3
|
-
See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import React, { useMemo } from 'react'
|
|
3
|
-
import classnames from 'classnames'
|
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
|
5
|
-
import Highcharts from "highcharts"
|
|
6
|
-
import HighchartsReact from "highcharts-react-official"
|
|
7
|
-
import pbGaugeGraphTheme from './pbGaugeGraphTheme'
|
|
8
|
-
import highchartsMore from "highcharts/highcharts-more";
|
|
9
|
-
import solidGauge from "highcharts/modules/solid-gauge";
|
|
10
|
-
import { globalProps } from '../utilities/globalProps'
|
|
11
|
-
|
|
12
|
-
type PbGaugeChartProps = {
|
|
13
|
-
aria?: { [key: string]: string },
|
|
14
|
-
className?: string,
|
|
15
|
-
data?: { [key: string]: string },
|
|
16
|
-
htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void) },
|
|
17
|
-
id?: string,
|
|
18
|
-
ref?: React.RefObject<any>,
|
|
19
|
-
options: Record<string, unknown>
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
const PbGaugeChart = (props: PbGaugeChartProps) => {
|
|
23
|
-
const {
|
|
24
|
-
aria = {},
|
|
25
|
-
className,
|
|
26
|
-
data = {},
|
|
27
|
-
htmlOptions = {},
|
|
28
|
-
id,
|
|
29
|
-
ref,
|
|
30
|
-
options = {},
|
|
31
|
-
} = props
|
|
32
|
-
|
|
33
|
-
const ariaProps = buildAriaProps(aria)
|
|
34
|
-
const dataProps = buildDataProps(data)
|
|
35
|
-
const htmlProps = buildHtmlProps(htmlOptions)
|
|
36
|
-
const classes = classnames(buildCss('pb_pb_gauge_chart'), globalProps(props), className)
|
|
37
|
-
|
|
38
|
-
const mergedOptions = useMemo(() => {
|
|
39
|
-
if (!options || typeof options !== "object") {
|
|
40
|
-
// eslint-disable-next-line no-console
|
|
41
|
-
console.error("❌ Invalid options passed to <PbLineGraph />", options)
|
|
42
|
-
return {}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
return Highcharts.merge({}, pbGaugeGraphTheme, options)
|
|
46
|
-
}, [options])
|
|
47
|
-
|
|
48
|
-
highchartsMore(Highcharts);
|
|
49
|
-
solidGauge(Highcharts);
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<div>
|
|
53
|
-
<HighchartsReact
|
|
54
|
-
containerProps={{
|
|
55
|
-
className: classnames(classes),
|
|
56
|
-
id: id,
|
|
57
|
-
ref: ref,
|
|
58
|
-
...ariaProps,
|
|
59
|
-
...dataProps,
|
|
60
|
-
...htmlProps
|
|
61
|
-
}}
|
|
62
|
-
highcharts={Highcharts}
|
|
63
|
-
options={mergedOptions}
|
|
64
|
-
/>
|
|
65
|
-
</div>
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export default PbGaugeChart
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible.
|
|
2
|
-
|
|
3
|
-
See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
|
|
3
|
-
import { colors } from 'playbook-ui'
|
|
4
|
-
|
|
5
|
-
const data = [{ name: "Name", y: 67 }]
|
|
6
|
-
|
|
7
|
-
const chartOptions = {
|
|
8
|
-
series: [{ data: data }],
|
|
9
|
-
plotOptions: {
|
|
10
|
-
solidgauge: {
|
|
11
|
-
borderColor: colors.data_7,
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
};
|
|
15
|
-
const PbGaugeChartColor = (props) => (
|
|
16
|
-
<div>
|
|
17
|
-
<PbGaugeChart
|
|
18
|
-
options={chartOptions}
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
</div>
|
|
22
|
-
)
|
|
23
|
-
|
|
24
|
-
export default PbGaugeChartColor
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
|
|
2
|
-
|
|
3
|
-
For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
|
|
4
|
-
|
|
5
|
-
For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
<% chart_options = {
|
|
2
|
-
series:[{data:[{ name: "Name", y: 10 }]}],
|
|
3
|
-
chart: {
|
|
4
|
-
height: "150",
|
|
5
|
-
},
|
|
6
|
-
plotOptions: {
|
|
7
|
-
series: {
|
|
8
|
-
animation: false,
|
|
9
|
-
},
|
|
10
|
-
solidgauge: {
|
|
11
|
-
dataLabels: {
|
|
12
|
-
format:
|
|
13
|
-
'<span class="fix">{y:,f}</span>' +
|
|
14
|
-
'<span style="fill: #687887; font-size: 27px;">%</span>',
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
} %>
|
|
19
|
-
|
|
20
|
-
<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
|
|
21
|
-
<%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
|
|
22
|
-
<%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
|
|
23
|
-
<%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
|
|
24
|
-
<%= pb_rails("flex", props: {align: "stretch"}) do %>
|
|
25
|
-
<%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
|
|
26
|
-
<%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
|
|
27
|
-
<%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
|
|
28
|
-
<%= pb_rails("title", props: {size: 1, text: "39"})%>
|
|
29
|
-
<%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
|
|
30
|
-
<% end %>
|
|
31
|
-
<%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
|
|
32
|
-
<%end %>
|
|
33
|
-
<%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
|
|
34
|
-
<%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
|
|
35
|
-
<%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
|
|
36
|
-
<%= pb_rails("flex", props: {wrap: true}) do %>
|
|
37
|
-
<%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
|
|
38
|
-
<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
|
|
39
|
-
<% end %>
|
|
40
|
-
<% end %>
|
|
41
|
-
<% end %>
|
|
42
|
-
<%end %>
|
|
43
|
-
<% end %>
|
|
44
|
-
<% end %>
|
|
45
|
-
<% end %>
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
|
|
3
|
-
import Flex from '../../pb_flex/_flex'
|
|
4
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
|
5
|
-
import Card from '../../pb_card/_card'
|
|
6
|
-
import Caption from '../../pb_caption/_caption'
|
|
7
|
-
import Body from '../../pb_body/_body'
|
|
8
|
-
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
9
|
-
import Title from '../../pb_title/_title'
|
|
10
|
-
import { colors, typography } from 'playbook-ui'
|
|
11
|
-
|
|
12
|
-
const data = [{ name: "Name", y: 10 }];
|
|
13
|
-
|
|
14
|
-
const chartOptions = {
|
|
15
|
-
series: [{ data: data }],
|
|
16
|
-
chart: {
|
|
17
|
-
height: "150",
|
|
18
|
-
},
|
|
19
|
-
plotOptions: {
|
|
20
|
-
series: {
|
|
21
|
-
animation: false,
|
|
22
|
-
},
|
|
23
|
-
solidgauge: {
|
|
24
|
-
dataLabels: {
|
|
25
|
-
format:
|
|
26
|
-
`<span class="fix">{y:,f}</span>` +
|
|
27
|
-
`<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
const PbGaugeChartComplex = (props) => (
|
|
34
|
-
<Flex
|
|
35
|
-
gap="sm"
|
|
36
|
-
padding="xl"
|
|
37
|
-
wrap
|
|
38
|
-
>
|
|
39
|
-
<FlexItem
|
|
40
|
-
flex={1}
|
|
41
|
-
grow
|
|
42
|
-
>
|
|
43
|
-
<Card
|
|
44
|
-
maxWidth="xs"
|
|
45
|
-
padding="md"
|
|
46
|
-
>
|
|
47
|
-
<Title
|
|
48
|
-
paddingBottom="sm"
|
|
49
|
-
size={4}
|
|
50
|
-
text="Abandoned Calls"
|
|
51
|
-
/>
|
|
52
|
-
<Flex
|
|
53
|
-
align="stretch"
|
|
54
|
-
>
|
|
55
|
-
<Flex
|
|
56
|
-
marginRight="sm"
|
|
57
|
-
orientation="column"
|
|
58
|
-
>
|
|
59
|
-
<Body
|
|
60
|
-
color="light"
|
|
61
|
-
paddingBottom="sm"
|
|
62
|
-
text="Total Abandoned"
|
|
63
|
-
/>
|
|
64
|
-
<Flex
|
|
65
|
-
align="baseline"
|
|
66
|
-
paddingBottom="xs"
|
|
67
|
-
>
|
|
68
|
-
<Title
|
|
69
|
-
size={1}
|
|
70
|
-
text="39"
|
|
71
|
-
/>
|
|
72
|
-
<Title
|
|
73
|
-
color="light"
|
|
74
|
-
size={3}
|
|
75
|
-
text="calls"
|
|
76
|
-
/>
|
|
77
|
-
</Flex>
|
|
78
|
-
<Caption
|
|
79
|
-
size="xs"
|
|
80
|
-
text="of 390"
|
|
81
|
-
/>
|
|
82
|
-
</Flex>
|
|
83
|
-
|
|
84
|
-
<SectionSeparator
|
|
85
|
-
alignSelf="stretch"
|
|
86
|
-
marginRight="sm"
|
|
87
|
-
orientation="vertical"
|
|
88
|
-
/>
|
|
89
|
-
|
|
90
|
-
<Flex
|
|
91
|
-
orientation="column"
|
|
92
|
-
wrap
|
|
93
|
-
>
|
|
94
|
-
<Body
|
|
95
|
-
color="light"
|
|
96
|
-
text="% Abandoned"
|
|
97
|
-
/>
|
|
98
|
-
<Flex
|
|
99
|
-
wrap
|
|
100
|
-
>
|
|
101
|
-
<FlexItem
|
|
102
|
-
fixedSize="150px"
|
|
103
|
-
overflow="hidden"
|
|
104
|
-
shrink
|
|
105
|
-
>
|
|
106
|
-
<PbGaugeChart
|
|
107
|
-
options={chartOptions}
|
|
108
|
-
{...props}
|
|
109
|
-
/>
|
|
110
|
-
</FlexItem>
|
|
111
|
-
</Flex>
|
|
112
|
-
</Flex>
|
|
113
|
-
</Flex>
|
|
114
|
-
</Card>
|
|
115
|
-
</FlexItem>
|
|
116
|
-
</Flex>
|
|
117
|
-
)
|
|
118
|
-
|
|
119
|
-
export default PbGaugeChartComplex
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
|
|
3
|
-
|
|
4
|
-
const chartOptions = {
|
|
5
|
-
series:[{data:[{ name: "Name", y: 45 }]}]
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
const PbGaugeChartDefault = (props) => (
|
|
9
|
-
<div>
|
|
10
|
-
<PbGaugeChart
|
|
11
|
-
options={chartOptions}
|
|
12
|
-
{...props}
|
|
13
|
-
/>
|
|
14
|
-
</div>
|
|
15
|
-
)
|
|
16
|
-
|
|
17
|
-
export default PbGaugeChartDefault
|