playbook_ui 14.21.2.pre.alpha.PLAY22558410 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863
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 +0 -1
- 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/Hooks/useTableState.ts +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +19 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -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_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/example.yml +4 -2
- 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 +16 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
- 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_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_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 +3 -6
- 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_contact/contact.test.js +2 -2
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
- data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
- 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_table/styles/_table-card.scss +11 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
- 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.jsx +25 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/index.js +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/_circle_chart-C56zcOHC.js +1 -0
- data/dist/chunks/_typeahead-Do6525vz.js +22 -0
- data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
- data/dist/chunks/{lib-CTkMyvfQ.js → lib-DYpq0k8j.js} +2 -2
- data/dist/chunks/{pb_form_validation-BVF3TmcL.js → pb_form_validation-BUOKwfvW.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -9
- 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 +23 -37
- 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_treemap_chart/_treemap_chart.scss +0 -14
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
- data/dist/chunks/_typeahead-B80UsDrG.js +0 -22
- data/dist/chunks/_weekday_stacked-D1bqIne1.js +0 -45
- /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.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863
|
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-11 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
|
@@ -401,6 +403,8 @@ files:
|
|
401
403
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
|
402
404
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
|
403
405
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
|
406
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
|
407
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
|
404
408
|
- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
|
405
409
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
|
406
410
|
- app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
|
@@ -514,19 +518,19 @@ files:
|
|
514
518
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
515
519
|
- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
|
516
520
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
521
|
+
- app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
|
517
522
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
518
523
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
519
524
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
|
520
525
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
|
521
526
|
- 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
527
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
|
525
528
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
|
526
529
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
|
527
530
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
|
528
531
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
|
529
532
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
|
533
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
|
530
534
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
|
531
535
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
|
532
536
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
|
@@ -538,8 +542,6 @@ files:
|
|
538
542
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
|
539
543
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
|
540
544
|
- 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
545
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
|
544
546
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
|
545
547
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
|
@@ -765,7 +767,8 @@ files:
|
|
765
767
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
|
766
768
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
767
769
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
|
768
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/
|
770
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
|
771
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
|
769
772
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
|
770
773
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
|
771
774
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
|
@@ -777,8 +780,6 @@ files:
|
|
777
780
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
|
778
781
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
|
779
782
|
- 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
783
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
783
784
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
|
784
785
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
@@ -787,6 +788,7 @@ files:
|
|
787
788
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
|
788
789
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
789
790
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
|
791
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
|
790
792
|
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
791
793
|
- app/pb_kits/playbook/pb_circle_chart/docs/index.js
|
792
794
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
@@ -3337,6 +3339,10 @@ files:
|
|
3337
3339
|
- app/pb_kits/playbook/pb_toggle/toggle.test.js
|
3338
3340
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
3339
3341
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
3342
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
|
3343
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
|
3344
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
|
3345
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
|
3340
3346
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
3341
3347
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
3342
3348
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
@@ -3368,29 +3374,6 @@ files:
|
|
3368
3374
|
- app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
|
3369
3375
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
3370
3376
|
- app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
|
3371
|
-
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss
|
3372
|
-
- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
|
3373
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
|
3374
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
|
3375
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
|
3376
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md
|
3377
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb
|
3378
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx
|
3379
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md
|
3380
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb
|
3381
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx
|
3382
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md
|
3383
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb
|
3384
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx
|
3385
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md
|
3386
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb
|
3387
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx
|
3388
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md
|
3389
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/example.yml
|
3390
|
-
- app/pb_kits/playbook/pb_treemap_chart/docs/index.js
|
3391
|
-
- app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js
|
3392
|
-
- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb
|
3393
|
-
- app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
|
3394
3377
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.scss
|
3395
3378
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
|
3396
3379
|
- app/pb_kits/playbook/pb_typeahead/_typeahead.tsx
|
@@ -3425,8 +3408,10 @@ files:
|
|
3425
3408
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
3426
3409
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
3427
3410
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
3411
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
|
3428
3412
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
|
3429
|
-
- app/pb_kits/playbook/pb_typeahead/docs/
|
3413
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
|
3414
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
3430
3415
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
3431
3416
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
3432
3417
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
@@ -3633,11 +3618,12 @@ files:
|
|
3633
3618
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3634
3619
|
- app/pb_kits/playbook/utilities/text.ts
|
3635
3620
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3636
|
-
- dist/chunks/
|
3637
|
-
- dist/chunks/
|
3621
|
+
- dist/chunks/_circle_chart-C56zcOHC.js
|
3622
|
+
- dist/chunks/_typeahead-Do6525vz.js
|
3623
|
+
- dist/chunks/_weekday_stacked-CrFm3XuJ.js
|
3638
3624
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3639
|
-
- dist/chunks/lib-
|
3640
|
-
- dist/chunks/pb_form_validation-
|
3625
|
+
- dist/chunks/lib-DYpq0k8j.js
|
3626
|
+
- dist/chunks/pb_form_validation-BUOKwfvW.js
|
3641
3627
|
- dist/chunks/vendor.js
|
3642
3628
|
- dist/menu.yml
|
3643
3629
|
- 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,119 +0,0 @@
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
2
|
-
import classnames from "classnames";
|
3
|
-
|
4
|
-
import { globalProps } from "../utilities/globalProps";
|
5
|
-
import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
|
6
|
-
|
7
|
-
import HighchartsReact from "highcharts-react-official";
|
8
|
-
import Highcharts from "highcharts";
|
9
|
-
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
10
|
-
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
11
|
-
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
12
|
-
import treemap from 'highcharts/modules/treemap'
|
13
|
-
import { merge } from '../utilities/object'
|
14
|
-
|
15
|
-
type TreemapChartProps = {
|
16
|
-
chartData: {
|
17
|
-
name: string;
|
18
|
-
parent?: string | number;
|
19
|
-
value: number;
|
20
|
-
color?: string;
|
21
|
-
id?: string | number;
|
22
|
-
}[];
|
23
|
-
className?: string;
|
24
|
-
colors: string[];
|
25
|
-
customOptions?: Partial<Highcharts.Options>;
|
26
|
-
dark?: boolean;
|
27
|
-
drillable: boolean;
|
28
|
-
grouped: boolean;
|
29
|
-
height?: string;
|
30
|
-
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
31
|
-
id: number | string;
|
32
|
-
title?: string;
|
33
|
-
tooltipHtml: string;
|
34
|
-
type?: string;
|
35
|
-
aria?: { [key: string]: string };
|
36
|
-
data?: { [key: string]: string };
|
37
|
-
};
|
38
|
-
|
39
|
-
const TreemapChart = ({
|
40
|
-
aria = {},
|
41
|
-
data = {},
|
42
|
-
chartData,
|
43
|
-
colors,
|
44
|
-
customOptions = {},
|
45
|
-
dark = false,
|
46
|
-
drillable = false,
|
47
|
-
grouped = false,
|
48
|
-
height,
|
49
|
-
htmlOptions = {},
|
50
|
-
id,
|
51
|
-
title = "",
|
52
|
-
tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
|
53
|
-
type = "treemap",
|
54
|
-
...props
|
55
|
-
}: TreemapChartProps): React.ReactElement => {
|
56
|
-
|
57
|
-
const ariaProps = buildAriaProps(aria)
|
58
|
-
const dataProps = buildDataProps(data)
|
59
|
-
const htmlProps = buildHtmlProps(htmlOptions)
|
60
|
-
|
61
|
-
const setupTheme = () => {
|
62
|
-
dark
|
63
|
-
? Highcharts.setOptions(highchartsDarkTheme)
|
64
|
-
: Highcharts.setOptions(highchartsTheme);
|
65
|
-
};
|
66
|
-
treemap(Highcharts)
|
67
|
-
setupTheme();
|
68
|
-
|
69
|
-
const staticOptions = {
|
70
|
-
title: {
|
71
|
-
text: title,
|
72
|
-
},
|
73
|
-
chart: {
|
74
|
-
height: height,
|
75
|
-
type: type,
|
76
|
-
},
|
77
|
-
credits: false,
|
78
|
-
series: [
|
79
|
-
{
|
80
|
-
data: chartData,
|
81
|
-
},
|
82
|
-
],
|
83
|
-
plotOptions: {
|
84
|
-
treemap: {
|
85
|
-
tooltip: {
|
86
|
-
pointFormat: tooltipHtml,
|
87
|
-
},
|
88
|
-
allowTraversingTree: drillable,
|
89
|
-
colorByPoint: !grouped,
|
90
|
-
colors:
|
91
|
-
colors !== undefined && colors.length > 0
|
92
|
-
? mapColors(colors)
|
93
|
-
: highchartsTheme.colors,
|
94
|
-
},
|
95
|
-
},
|
96
|
-
};
|
97
|
-
|
98
|
-
const [options, setOptions] = useState({});
|
99
|
-
|
100
|
-
useEffect(() => {
|
101
|
-
setOptions(merge(staticOptions, customOptions));
|
102
|
-
}, [chartData]);
|
103
|
-
|
104
|
-
return (
|
105
|
-
<HighchartsReact
|
106
|
-
containerProps={{
|
107
|
-
className: classnames(globalProps(props), "pb_treemap_chart"),
|
108
|
-
id: id,
|
109
|
-
...ariaProps,
|
110
|
-
...dataProps,
|
111
|
-
...htmlProps
|
112
|
-
}}
|
113
|
-
highcharts={Highcharts}
|
114
|
-
options={options}
|
115
|
-
/>
|
116
|
-
);
|
117
|
-
};
|
118
|
-
|
119
|
-
export default TreemapChart;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
|
2
|
-
|
3
|
-
The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
|
4
|
-
|
5
|
-
For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.
|
@@ -1,37 +0,0 @@
|
|
1
|
-
<% data = [
|
2
|
-
{
|
3
|
-
name: "Pepperoni",
|
4
|
-
parent: "Toppings",
|
5
|
-
value: 600,
|
6
|
-
}, {
|
7
|
-
name: "Cheese",
|
8
|
-
parent: "Toppings",
|
9
|
-
value: 510,
|
10
|
-
}, {
|
11
|
-
name: "Mushroom",
|
12
|
-
parent: "Toppings",
|
13
|
-
value: 330,
|
14
|
-
},{
|
15
|
-
name: "Onions",
|
16
|
-
parent: "Toppings",
|
17
|
-
value: 250,
|
18
|
-
}, {
|
19
|
-
name: "Olives",
|
20
|
-
parent: "Toppings",
|
21
|
-
value: 204,
|
22
|
-
}, {
|
23
|
-
name: "Pineapple",
|
24
|
-
parent: "Toppings",
|
25
|
-
value: 90,
|
26
|
-
}, {
|
27
|
-
name: "Pizza Toppings",
|
28
|
-
id: "Toppings",
|
29
|
-
},
|
30
|
-
] %>
|
31
|
-
|
32
|
-
<%= pb_rails("treemap_chart", props: {
|
33
|
-
chart_data: data,
|
34
|
-
colors: ["data-4", "data-7", "#8E6E53", "#124732"],
|
35
|
-
id: "treemap-colors",
|
36
|
-
title: "Favored Pizza Toppings",
|
37
|
-
}) %>
|
@@ -1,48 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import TreemapChart from '../_treemap_chart'
|
4
|
-
|
5
|
-
const chartData = [
|
6
|
-
{
|
7
|
-
name: "Pepperoni",
|
8
|
-
parent: "Toppings",
|
9
|
-
value: 600,
|
10
|
-
}, {
|
11
|
-
name: "Cheese",
|
12
|
-
parent: "Toppings",
|
13
|
-
value: 510,
|
14
|
-
}, {
|
15
|
-
name: "Mushroom",
|
16
|
-
parent: "Toppings",
|
17
|
-
value: 330,
|
18
|
-
},{
|
19
|
-
name: "Onions",
|
20
|
-
parent: "Toppings",
|
21
|
-
value: 250,
|
22
|
-
}, {
|
23
|
-
name: "Olives",
|
24
|
-
parent: "Toppings",
|
25
|
-
value: 204,
|
26
|
-
}, {
|
27
|
-
name: "Pineapple",
|
28
|
-
parent: "Toppings",
|
29
|
-
value: 90,
|
30
|
-
}, {
|
31
|
-
name: "Pizza Toppings",
|
32
|
-
id: "Toppings",
|
33
|
-
},
|
34
|
-
]
|
35
|
-
|
36
|
-
const TreemapChartColors = (props) => (
|
37
|
-
<div>
|
38
|
-
<TreemapChart
|
39
|
-
chartData={chartData}
|
40
|
-
colors={["data-4", "data-7", "#8E6E53", "#124732"]}
|
41
|
-
id="treemap-colors"
|
42
|
-
title="Favored Pizza Toppings"
|
43
|
-
{...props}
|
44
|
-
/>
|
45
|
-
</div>
|
46
|
-
)
|
47
|
-
|
48
|
-
export default TreemapChartColors
|
@@ -1,37 +0,0 @@
|
|
1
|
-
<% data = [
|
2
|
-
{
|
3
|
-
name: "Pepperoni",
|
4
|
-
parent: "Toppings",
|
5
|
-
value: 600,
|
6
|
-
}, {
|
7
|
-
name: "Cheese",
|
8
|
-
parent: "Toppings",
|
9
|
-
value: 510,
|
10
|
-
}, {
|
11
|
-
name: "Mushroom",
|
12
|
-
parent: "Toppings",
|
13
|
-
value: 330,
|
14
|
-
},{
|
15
|
-
name: "Onions",
|
16
|
-
parent: "Toppings",
|
17
|
-
value: 250,
|
18
|
-
}, {
|
19
|
-
name: "Olives",
|
20
|
-
parent: "Toppings",
|
21
|
-
value: 204,
|
22
|
-
}, {
|
23
|
-
name: "Pineapple",
|
24
|
-
parent: "Toppings",
|
25
|
-
value: 90,
|
26
|
-
}, {
|
27
|
-
name: "Pizza Toppings",
|
28
|
-
id: "Toppings",
|
29
|
-
},
|
30
|
-
] %>
|
31
|
-
|
32
|
-
|
33
|
-
<%= pb_rails("treemap_chart", props: {
|
34
|
-
chart_data: data,
|
35
|
-
id: "treemap-default",
|
36
|
-
title: "Favored Pizza Toppings",
|
37
|
-
}) %>
|
@@ -1,47 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import TreemapChart from '../_treemap_chart'
|
4
|
-
|
5
|
-
const chartData = [
|
6
|
-
{
|
7
|
-
name: "Pepperoni",
|
8
|
-
parent: "Toppings",
|
9
|
-
value: 600,
|
10
|
-
}, {
|
11
|
-
name: "Cheese",
|
12
|
-
parent: "Toppings",
|
13
|
-
value: 510,
|
14
|
-
}, {
|
15
|
-
name: "Mushroom",
|
16
|
-
parent: "Toppings",
|
17
|
-
value: 330,
|
18
|
-
},{
|
19
|
-
name: "Onions",
|
20
|
-
parent: "Toppings",
|
21
|
-
value: 250,
|
22
|
-
}, {
|
23
|
-
name: "Olives",
|
24
|
-
parent: "Toppings",
|
25
|
-
value: 204,
|
26
|
-
}, {
|
27
|
-
name: "Pineapple",
|
28
|
-
parent: "Toppings",
|
29
|
-
value: 90,
|
30
|
-
}, {
|
31
|
-
name: "Pizza Toppings",
|
32
|
-
id: "Toppings",
|
33
|
-
},
|
34
|
-
]
|
35
|
-
|
36
|
-
const TreemapChartDefault = (props) => (
|
37
|
-
<div>
|
38
|
-
<TreemapChart
|
39
|
-
chartData={chartData}
|
40
|
-
id="treemap-default"
|
41
|
-
title="Favored Pizza Toppings"
|
42
|
-
{...props}
|
43
|
-
/>
|
44
|
-
</div>
|
45
|
-
)
|
46
|
-
|
47
|
-
export default TreemapChartDefault
|