playbook_ui 14.22.0.pre.alpha.PLAY2256stickydataidreact8523 → 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +6 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +2 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +5 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +51 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +1 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -8
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +5 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +36 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
  18. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  19. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  28. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  30. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  31. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  33. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  34. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  35. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  36. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  37. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
  38. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  47. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  48. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  57. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
  58. data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
  59. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
  60. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  61. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
  62. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  63. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  64. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
  65. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  66. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  67. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  68. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  69. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  70. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  71. data/dist/chunks/_circle_chart-BZmlhBs2.js +1 -0
  72. data/dist/chunks/{_typeahead-B7FRYVtS.js → _typeahead-B1tu_vWi.js} +3 -3
  73. data/dist/chunks/_weekday_stacked-CKk0dR5s.js +45 -0
  74. data/dist/chunks/{lib-Carqm8Ip.js → lib-DYpq0k8j.js} +1 -1
  75. data/dist/chunks/{pb_form_validation-DqRmTS8m.js → pb_form_validation-BUOKwfvW.js} +1 -1
  76. data/dist/chunks/vendor.js +1 -1
  77. data/dist/menu.yml +68 -8
  78. data/dist/playbook-doc.js +2 -2
  79. data/dist/playbook-rails-react-bindings.js +1 -1
  80. data/dist/playbook-rails.js +1 -1
  81. data/dist/playbook.css +1 -1
  82. data/lib/playbook/version.rb +1 -1
  83. metadata +28 -17
  84. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  85. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  86. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  87. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  88. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  89. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  90. data/dist/chunks/_weekday_stacked-BOIXPXFw.js +0 -45
  91. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
  92. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
  93. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open.md → _tooltip_click_open_react.md} +0 -0
  94. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.22.0"
5
- VERSION = "14.22.0.pre.alpha.PLAY2256stickydataidreact8523"
5
+ VERSION = "14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968"
6
6
  end
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.22.0.pre.alpha.PLAY2256stickydataidreact8523
4
+ version: 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968
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-06-20 00:00:00.000000000 Z
12
+ date: 2025-07-15 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,10 @@ 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
408
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
409
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
404
410
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
405
411
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
406
412
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -514,19 +520,19 @@ files:
514
520
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
515
521
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
516
522
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
523
+ - app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
517
524
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
518
525
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
519
526
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
520
527
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
521
528
  - 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
529
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
525
530
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
526
531
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
527
532
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
528
533
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
529
534
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
535
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
530
536
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
531
537
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
532
538
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -538,8 +544,6 @@ files:
538
544
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
539
545
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
540
546
  - 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
547
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
544
548
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
545
549
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -571,7 +575,8 @@ files:
571
575
  - app/pb_kits/playbook/pb_body/docs/_body_styled.md
572
576
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
573
577
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
574
- - app/pb_kits/playbook/pb_body/docs/_body_truncate.md
578
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
579
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
575
580
  - app/pb_kits/playbook/pb_body/docs/_description.md
576
581
  - app/pb_kits/playbook/pb_body/docs/_footer.md
577
582
  - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -765,7 +770,8 @@ files:
765
770
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
766
771
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
767
772
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
768
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
773
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
774
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
769
775
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
770
776
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
771
777
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -777,8 +783,6 @@ files:
777
783
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
778
784
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
779
785
  - 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
786
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
783
787
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
784
788
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -787,6 +791,7 @@ files:
787
791
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
788
792
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
789
793
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
794
+ - app/pb_kits/playbook/pb_circle_chart/docs/_description.md
790
795
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
791
796
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
792
797
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3280,7 +3285,8 @@ files:
3280
3285
  - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
3281
3286
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
3282
3287
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
3283
- - app/pb_kits/playbook/pb_title/docs/_title_truncate.md
3288
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
3289
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
3284
3290
  - app/pb_kits/playbook/pb_title/docs/example.yml
3285
3291
  - app/pb_kits/playbook/pb_title/docs/index.js
3286
3292
  - app/pb_kits/playbook/pb_title/title.html.erb
@@ -3337,8 +3343,10 @@ files:
3337
3343
  - app/pb_kits/playbook/pb_toggle/toggle.test.js
3338
3344
  - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
3339
3345
  - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
3346
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
3340
3347
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
3341
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
3348
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
3349
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
3342
3350
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
3343
3351
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
3344
3352
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3404,8 +3412,10 @@ files:
3404
3412
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
3405
3413
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
3406
3414
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
3415
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
3407
3416
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
3408
- - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
3417
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
3418
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
3409
3419
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
3410
3420
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
3411
3421
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
@@ -3612,11 +3622,12 @@ files:
3612
3622
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3613
3623
  - app/pb_kits/playbook/utilities/text.ts
3614
3624
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3615
- - dist/chunks/_typeahead-B7FRYVtS.js
3616
- - dist/chunks/_weekday_stacked-BOIXPXFw.js
3625
+ - dist/chunks/_circle_chart-BZmlhBs2.js
3626
+ - dist/chunks/_typeahead-B1tu_vWi.js
3627
+ - dist/chunks/_weekday_stacked-CKk0dR5s.js
3617
3628
  - dist/chunks/lazysizes-B7xYodB-.js
3618
- - dist/chunks/lib-Carqm8Ip.js
3619
- - dist/chunks/pb_form_validation-DqRmTS8m.js
3629
+ - dist/chunks/lib-DYpq0k8j.js
3630
+ - dist/chunks/pb_form_validation-BUOKwfvW.js
3620
3631
  - dist/chunks/vendor.js
3621
3632
  - dist/menu.yml
3622
3633
  - 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.