playbook_ui 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968 → 14.22.0.pre.alpha.PLAY2292advancedtablepinnedrowsloading8630

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 (79) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +5 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -5
  6. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -36
  7. data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -32
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +15 -31
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
  25. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
  27. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  28. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  41. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
  42. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
  43. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
  44. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
  45. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
  46. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  47. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
  48. data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
  49. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
  50. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  51. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  52. data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
  53. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
  54. data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-B7FRYVtS.js} +3 -3
  55. data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-D5re2fT9.js} +2 -2
  56. data/dist/chunks/{lib-DYpq0k8j.js → lib-Carqm8Ip.js} +1 -1
  57. data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-DqRmTS8m.js} +1 -1
  58. data/dist/chunks/vendor.js +1 -1
  59. data/dist/menu.yml +8 -68
  60. data/dist/playbook-doc.js +2 -2
  61. data/dist/playbook-rails-react-bindings.js +1 -1
  62. data/dist/playbook-rails.js +1 -1
  63. data/dist/playbook.css +1 -1
  64. data/lib/playbook/version.rb +1 -1
  65. metadata +16 -21
  66. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +0 -51
  67. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +0 -1
  68. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +0 -106
  69. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
  70. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
  71. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
  72. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
  73. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
  74. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
  75. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
  76. data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
  77. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
  78. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
  79. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.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.PLAY2281atcustomheaderrails8968"
5
+ VERSION = "14.22.0.pre.alpha.PLAY2292advancedtablepinnedrowsloading8630"
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.PLAY2281atcustomheaderrails8968
4
+ version: 14.22.0.pre.alpha.PLAY2292advancedtablepinnedrowsloading8630
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-07-15 00:00:00.000000000 Z
12
+ date: 2025-06-26 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -405,8 +405,6 @@ files:
405
405
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
406
406
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
407
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
410
408
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
411
409
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
412
410
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -520,19 +518,19 @@ files:
520
518
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
521
519
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
522
520
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
523
- - app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
524
521
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
525
522
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
526
523
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
527
524
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
528
525
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
526
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
527
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
529
528
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
530
529
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
531
530
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
532
531
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
533
532
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
534
533
  - 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
536
534
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
537
535
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
538
536
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
@@ -544,6 +542,8 @@ files:
544
542
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
545
543
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
546
544
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
545
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
546
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
547
547
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
548
548
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
549
549
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -575,8 +575,7 @@ files:
575
575
  - app/pb_kits/playbook/pb_body/docs/_body_styled.md
576
576
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
577
577
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
578
- - app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
579
- - app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
578
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate.md
580
579
  - app/pb_kits/playbook/pb_body/docs/_description.md
581
580
  - app/pb_kits/playbook/pb_body/docs/_footer.md
582
581
  - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -770,8 +769,7 @@ files:
770
769
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
771
770
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
772
771
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
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
772
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
775
773
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
776
774
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
777
775
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -783,6 +781,8 @@ files:
783
781
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
784
782
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
785
783
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
784
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
785
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
786
786
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
787
787
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
788
788
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -791,7 +791,6 @@ files:
791
791
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
792
792
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
793
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
795
794
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
796
795
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
797
796
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3285,8 +3284,7 @@ files:
3285
3284
  - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
3286
3285
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
3287
3286
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
3288
- - app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
3289
- - app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
3287
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate.md
3290
3288
  - app/pb_kits/playbook/pb_title/docs/example.yml
3291
3289
  - app/pb_kits/playbook/pb_title/docs/index.js
3292
3290
  - app/pb_kits/playbook/pb_title/title.html.erb
@@ -3343,10 +3341,8 @@ files:
3343
3341
  - app/pb_kits/playbook/pb_toggle/toggle.test.js
3344
3342
  - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
3345
3343
  - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
3346
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
3347
3344
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
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
3345
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
3350
3346
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
3351
3347
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
3352
3348
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3622,12 +3618,11 @@ files:
3622
3618
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3623
3619
  - app/pb_kits/playbook/utilities/text.ts
3624
3620
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3625
- - dist/chunks/_circle_chart-BZmlhBs2.js
3626
- - dist/chunks/_typeahead-B1tu_vWi.js
3627
- - dist/chunks/_weekday_stacked-CKk0dR5s.js
3621
+ - dist/chunks/_typeahead-B7FRYVtS.js
3622
+ - dist/chunks/_weekday_stacked-D5re2fT9.js
3628
3623
  - dist/chunks/lazysizes-B7xYodB-.js
3629
- - dist/chunks/lib-DYpq0k8j.js
3630
- - dist/chunks/pb_form_validation-BUOKwfvW.js
3624
+ - dist/chunks/lib-Carqm8Ip.js
3625
+ - dist/chunks/pb_form_validation-DqRmTS8m.js
3631
3626
  - dist/chunks/vendor.js
3632
3627
  - dist/menu.yml
3633
3628
  - dist/playbook-doc.js
@@ -1,51 +0,0 @@
1
- <%
2
- column_definitions = [
3
- {
4
- accessor: "year",
5
- label: "Year",
6
- cellAccessors: ["quarter", "month", "day"],
7
- },
8
- {
9
- accessor: "newEnrollments",
10
- label: "New Enrollments",
11
- custom_header_renderer: ->(cell, label) {
12
- capture do
13
- pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
14
- pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
15
- pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
16
- pb_rails("tooltip", props: {
17
- trigger_element_id: "tooltip-interact",
18
- tooltip_id: "example-custom-tooltip",
19
- position: "top",
20
- z_index: "10"
21
- }) do
22
- "Whoa. I'm a Tooltip"
23
- end
24
- end
25
- end
26
- }
27
- },
28
- {
29
- accessor: "scheduledMeetings",
30
- label: "Scheduled Meetings",
31
- },
32
- {
33
- accessor: "attendanceRate",
34
- label: "Attendance Rate",
35
- },
36
- {
37
- accessor: "completedClasses",
38
- label: "Completed Classes",
39
- },
40
- {
41
- accessor: "classCompletionRate",
42
- label: "Class Completion Rate",
43
- },
44
- {
45
- accessor: "graduatedStudents",
46
- label: "Graduated Students",
47
- }
48
- ]
49
- %>
50
-
51
- <%= pb_rails("advanced_table", props: { id: "custom_header_table", table_data: @table_data, column_definitions: column_definitions }) %>
@@ -1 +0,0 @@
1
- The optional `custom_header_renderer` item can be used within `column_definitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well.
@@ -1,106 +0,0 @@
1
- import colors from '../tokens/exports/_colors.module.scss'
2
- import typography from '../tokens/exports/_typography.module.scss'
3
-
4
- const barGraphTheme = {
5
- title: {
6
- text: "",
7
- style: {
8
- color: colors.text_lt_default,
9
- fontFamily: typography.font_family_base,
10
- fontWeight: typography.bold,
11
- fontSize: typography.heading_3,
12
- },
13
- },
14
- subtitle: {
15
- text: "",
16
- style: {
17
- fontFamily: typography.font_family_base,
18
- color: colors.text_lt_light,
19
- fontWeight: typography.regular,
20
- fontSize: typography.text_base,
21
- },
22
- },
23
- chart: {
24
- type: "column",
25
- },
26
- tooltip: {
27
- backgroundColor: {
28
- linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
29
- stops: [
30
- [0, colors.bg_dark],
31
- [1, colors.bg_dark],
32
- ],
33
- },
34
- style: {
35
- fontFamily: typography.font_family_base,
36
- color: colors.text_dk_default,
37
- fontWeight: typography.regular,
38
- fontSize: typography.text_smaller,
39
- },
40
- },
41
- colors: [
42
- colors.data_1,
43
- colors.data_2,
44
- colors.data_3,
45
- colors.data_4,
46
- colors.data_5,
47
- colors.data_6,
48
- colors.data_7,
49
- ],
50
- credits: { enabled: false },
51
- legend: {
52
- enabled: false,
53
- itemStyle: {
54
- color: colors.text_lt_light,
55
- fill: colors.text_lt_light,
56
- fontSize: typography.text_smaller,
57
- },
58
- },
59
- xAxis: {
60
- gridLineWidth: 0,
61
- lineColor: colors.border_light,
62
- tickColor: colors.border_light,
63
- labels: {
64
- style: {
65
- fontFamily: typography.font_family_base,
66
- color: colors.text_lt_lighter,
67
- fontWeight: typography.bold,
68
- fontSize: typography.text_smaller,
69
- },
70
- },
71
- title: {
72
- style: {
73
- color: colors.text_lt_default,
74
- fontFamily: typography.font_family_base,
75
- fontWeight: typography.regular,
76
- fontSize: typography.heading_4,
77
- },
78
- },
79
- },
80
- yAxis: {
81
- alternateGridColor: undefined as string | undefined,
82
- minorTickInterval: null as number | null,
83
- gridLineColor: colors.border_light,
84
- minorGridLineColor: colors.border_light,
85
- lineWidth: 0,
86
- tickWidth: 0,
87
- labels: {
88
- style: {
89
- fontFamily: typography.font_family_base,
90
- color: colors.text_lt_lighter,
91
- fontWeight: typography.bold,
92
- fontSize: typography.text_smaller,
93
- },
94
- },
95
- title: {
96
- style: {
97
- fontFamily: typography.font_family_base,
98
- color: colors.text_lt_lighter,
99
- fontWeight: typography.bold,
100
- fontSize: typography.text_smaller,
101
- },
102
- },
103
- },
104
- }
105
-
106
- export default barGraphTheme;
@@ -1,3 +0,0 @@
1
- By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
2
-
3
- Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.
@@ -1,4 +0,0 @@
1
- ##### Prop
2
- `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
-
4
- The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1,2 +0,0 @@
1
- Custom data colors allow for color customization to match the needs of business requirements.
2
- Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.
@@ -1 +0,0 @@
1
- **Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
@@ -1,4 +0,0 @@
1
- ##### Prop
2
- `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
-
4
- The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1,14 +0,0 @@
1
- <%= pb_rails("button", props: {
2
- text: "Click to Open",
3
- id: "click-tooltip-trigger-1",
4
- variant: "primary"
5
- }) %>
6
-
7
- <%= pb_rails("tooltip", props: {
8
- trigger_element_selector: "#click-tooltip-trigger-1",
9
- tooltip_id: "click-tooltip-1",
10
- position: "top",
11
- use_click_to_open: true
12
- }) do %>
13
- Tooltip opened by click! Click trigger again to close.
14
- <% end %>
@@ -1 +0,0 @@
1
- Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.
@@ -1 +0,0 @@
1
- import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-B1tu_vWi.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-DYpq0k8j.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,htmlOptions:htmlOptions={},customOptions:customOptions={},axisFormat:axisFormat,id:id,pointStart:pointStart,stacking:stacking,subTitle:subTitle,type:type="column",title:title="Title",xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,legend:legend=false,toggleLegendClick:toggleLegendClick=true,height:height,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();const staticOptions={title:{text:title},chart:{height:height,type:type},subtitle:{text:subTitle},yAxis:[{labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat&&axisFormat[0]?axisFormat[0].format:""},min:yAxisMin,max:yAxisMax,opposite:false,title:{text:Array.isArray(axisTitle)?axisTitle.length>0?axisTitle[0].name:null:axisTitle},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]}],xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors!==void 0&&colors.length>0?mapColors(colors):highchartsTheme.colors,plotOptions:{series:{stacking:stacking,pointStart:pointStart,borderWidth:stacking?0:"",events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};if(Array.isArray(axisTitle)&&axisTitle.length>1&&axisTitle[1].name){staticOptions.yAxis.push({labels:{format:typeof axisFormat==="string"?axisFormat:axisFormat[1].format},min:yAxisMin,max:yAxisMax,opposite:true,title:{text:axisTitle[1].name},plotLines:typeof yAxisMin!=="undefined"&&yAxisMin!==null?[]:[{value:0,zIndex:10,color:"#E4E8F0"}]})}if(!toggleLegendClick){staticOptions.plotOptions.series.events={legendItemClick:()=>false}}const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(globalProps(filteredProps),className),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const alignBlockElement=event=>{const itemToMove=document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`);const chartContainer=document.querySelector(`#${event.target.renderTo.id}`);if(itemToMove!==null&&chartContainer!==null){itemToMove.style.height=`${event.target.chartHeight}px`;itemToMove.style.width=`${event.target.chartWidth}px`;if(chartContainer.firstChild!==null){chartContainer.firstChild.before(itemToMove)}}};const CircleChart=({align:align="center",aria:aria={},rounded:rounded=false,borderColor:borderColor=(rounded?null:""),borderWidth:borderWidth=(rounded?20:null),chartData:chartData,children:children,className:className,colors:colors=[],customOptions:customOptions={},dark:dark=false,data:data={},dataLabelHtml:dataLabelHtml="<div>{point.name}</div>",dataLabels:dataLabels=false,height:height,htmlOptions:htmlOptions={},id:id,innerSize:innerSize="md",legend:legend=false,maxPointSize:maxPointSize=null,minPointSize:minPointSize=null,startAngle:startAngle=null,style:style="pie",title:title,tooltipHtml:tooltipHtml,useHtml:useHtml=false,zMin:zMin=null,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{headerFormat:null,pointFormat:tooltipHtml?tooltipHtml:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',useHTML:useHtml}});const innerSizes={sm:"35%",md:"50%",lg:"85%",none:"0%"};const innerSizeFormat=size=>innerSizes[size];const filteredProps={...props};delete filteredProps.verticalAlign;const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={title:{text:title},chart:{height:height,type:style,events:{render:event=>alignBlockElement(event),redraw:event=>alignBlockElement(event)}},legend:{align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},plotOptions:{pie:{colors:colors.length>0?mapColors(colors):highchartsTheme.colors,dataLabels:{enabled:dataLabels,connectorShape:"straight",connectorWidth:3,format:dataLabelHtml},showInLegend:legend}},series:[{minPointSize:minPointSize,maxPointSize:maxPointSize,innerSize:borderWidth==20?"100%":innerSizeFormat(innerSize),data:formattedChartData,zMin:zMin,startAngle:startAngle,borderWidth:borderWidth,borderColor:borderColor}],credits:false};setOptions(merge(staticOptions,customOptions))}),[chartData]);return jsx(Fragment,{children:children?jsxs("div",{id:`wrapper-circle-chart-${id}`,children:[jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options}),jsx("div",{className:"pb-circle-chart-block",children:children})]}):jsx(HighchartsReact,{containerProps:{className:classnames("pb_circle_chart",globalProps(filteredProps)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})})};export{BarGraph as B,CircleChart as C};