playbook_ui 14.22.0.pre.alpha.PLAY23038970 → 14.22.0.pre.alpha.customheaderat8564
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +7 -6
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +11 -32
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +8 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -2
- data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +72 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +15 -33
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +22 -52
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +16 -12
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +15 -31
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +16 -39
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +38 -86
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +15 -32
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +22 -72
- 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 +15 -31
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +16 -37
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
- data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -3
- data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-B7FRYVtS.js} +3 -3
- data/dist/chunks/_weekday_stacked-CEJcIpjK.js +45 -0
- data/dist/chunks/{lib-DYpq0k8j.js → lib-Carqm8Ip.js} +1 -1
- data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-DqRmTS8m.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +8 -68
- 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 +17 -24
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +0 -65
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +0 -5
- data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +0 -106
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +0 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +0 -18
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +0 -1
- data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
- data/dist/chunks/_weekday_stacked-CKk0dR5s.js +0 -45
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md} +0 -0
- /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input_react.md → _typeahead_preserve_input.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.22.0.pre.alpha.
|
4
|
+
version: 14.22.0.pre.alpha.customheaderat8564
|
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-06-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -328,8 +328,6 @@ 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
|
333
331
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
334
332
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
335
333
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
|
@@ -518,19 +516,19 @@ files:
|
|
518
516
|
- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
|
519
517
|
- app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
|
520
518
|
- app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
|
521
|
-
- app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts
|
522
519
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
|
523
520
|
- app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
|
524
521
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
|
525
522
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
|
526
523
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
|
524
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
|
525
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
|
527
526
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
|
528
527
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
|
529
528
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
|
530
529
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
|
531
530
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
|
532
531
|
- 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
|
534
532
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
|
535
533
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
|
536
534
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
|
@@ -542,6 +540,8 @@ files:
|
|
542
540
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
|
543
541
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
|
544
542
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
|
543
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
|
544
|
+
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
|
545
545
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
|
546
546
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
|
547
547
|
- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
|
@@ -573,8 +573,7 @@ files:
|
|
573
573
|
- app/pb_kits/playbook/pb_body/docs/_body_styled.md
|
574
574
|
- app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
|
575
575
|
- app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
|
576
|
-
- app/pb_kits/playbook/pb_body/docs/
|
577
|
-
- app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
|
576
|
+
- app/pb_kits/playbook/pb_body/docs/_body_truncate.md
|
578
577
|
- app/pb_kits/playbook/pb_body/docs/_description.md
|
579
578
|
- app/pb_kits/playbook/pb_body/docs/_footer.md
|
580
579
|
- app/pb_kits/playbook/pb_body/docs/example.yml
|
@@ -768,8 +767,7 @@ files:
|
|
768
767
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
|
769
768
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
|
770
769
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
|
771
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/
|
772
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
|
770
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
|
773
771
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
|
774
772
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
|
775
773
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
|
@@ -781,6 +779,8 @@ files:
|
|
781
779
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
|
782
780
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
|
783
781
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
|
782
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
|
783
|
+
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
|
784
784
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
|
785
785
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
|
786
786
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
|
@@ -789,7 +789,6 @@ files:
|
|
789
789
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
|
790
790
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
|
791
791
|
- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
|
792
|
-
- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
|
793
792
|
- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
|
794
793
|
- app/pb_kits/playbook/pb_circle_chart/docs/index.js
|
795
794
|
- app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
|
@@ -3283,8 +3282,7 @@ files:
|
|
3283
3282
|
- app/pb_kits/playbook/pb_title/docs/_title_responsive.md
|
3284
3283
|
- app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
|
3285
3284
|
- app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
|
3286
|
-
- app/pb_kits/playbook/pb_title/docs/
|
3287
|
-
- app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
|
3285
|
+
- app/pb_kits/playbook/pb_title/docs/_title_truncate.md
|
3288
3286
|
- app/pb_kits/playbook/pb_title/docs/example.yml
|
3289
3287
|
- app/pb_kits/playbook/pb_title/docs/index.js
|
3290
3288
|
- app/pb_kits/playbook/pb_title/title.html.erb
|
@@ -3341,10 +3339,8 @@ files:
|
|
3341
3339
|
- app/pb_kits/playbook/pb_toggle/toggle.test.js
|
3342
3340
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
3343
3341
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
|
3344
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
|
3345
3342
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
|
3346
|
-
- app/pb_kits/playbook/pb_tooltip/docs/
|
3347
|
-
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
|
3343
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
|
3348
3344
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
3349
3345
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
|
3350
3346
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
|
@@ -3410,10 +3406,8 @@ files:
|
|
3410
3406
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
|
3411
3407
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
|
3412
3408
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
|
3413
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
|
3414
3409
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
|
3415
|
-
- app/pb_kits/playbook/pb_typeahead/docs/
|
3416
|
-
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
|
3410
|
+
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
|
3417
3411
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
|
3418
3412
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
|
3419
3413
|
- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
|
@@ -3620,12 +3614,11 @@ files:
|
|
3620
3614
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3621
3615
|
- app/pb_kits/playbook/utilities/text.ts
|
3622
3616
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3623
|
-
- dist/chunks/
|
3624
|
-
- dist/chunks/
|
3625
|
-
- dist/chunks/_weekday_stacked-CKk0dR5s.js
|
3617
|
+
- dist/chunks/_typeahead-B7FRYVtS.js
|
3618
|
+
- dist/chunks/_weekday_stacked-CEJcIpjK.js
|
3626
3619
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3627
|
-
- dist/chunks/lib-
|
3628
|
-
- dist/chunks/pb_form_validation-
|
3620
|
+
- dist/chunks/lib-Carqm8Ip.js
|
3621
|
+
- dist/chunks/pb_form_validation-DqRmTS8m.js
|
3629
3622
|
- dist/chunks/vendor.js
|
3630
3623
|
- dist/menu.yml
|
3631
3624
|
- dist/playbook-doc.js
|
@@ -1,65 +0,0 @@
|
|
1
|
-
import React from "react"
|
2
|
-
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
4
|
-
|
5
|
-
const AdvancedTableCustomSort = (props) => {
|
6
|
-
const columnDefinitions = [
|
7
|
-
{
|
8
|
-
accessor: "year",
|
9
|
-
label: "Year",
|
10
|
-
id: "year",
|
11
|
-
cellAccessors: ["quarter", "month", "day"],
|
12
|
-
},
|
13
|
-
{
|
14
|
-
accessor: "newEnrollments",
|
15
|
-
id: "newEnrollments",
|
16
|
-
label: "New Enrollments",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
accessor: "scheduledMeetings",
|
20
|
-
id: "scheduledMeetings",
|
21
|
-
label: "Scheduled Meetings",
|
22
|
-
},
|
23
|
-
{
|
24
|
-
accessor: "attendanceRate",
|
25
|
-
id: "attendanceRate",
|
26
|
-
label: "Attendance Rate",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
accessor: "completedClasses",
|
30
|
-
id: "completedClasses",
|
31
|
-
label: "Completed Classes",
|
32
|
-
},
|
33
|
-
{
|
34
|
-
accessor: "classCompletionRate",
|
35
|
-
id: "classCompletionRate",
|
36
|
-
label: "Class Completion Rate",
|
37
|
-
},
|
38
|
-
{
|
39
|
-
accessor: "graduatedStudents",
|
40
|
-
id: "graduatedStudents",
|
41
|
-
label: "Graduated Students",
|
42
|
-
},
|
43
|
-
]
|
44
|
-
|
45
|
-
//Render the subRow header rows
|
46
|
-
const subRowHeaders = ["Quarter", "Month", "Day"]
|
47
|
-
|
48
|
-
return (
|
49
|
-
<div>
|
50
|
-
<AdvancedTable
|
51
|
-
columnDefinitions={columnDefinitions}
|
52
|
-
customSort
|
53
|
-
enableToggleExpansion="all"
|
54
|
-
onCustomSortClick={(subrows)=>{console.log("Custom sort clicked", subrows)}}
|
55
|
-
tableData={MOCK_DATA}
|
56
|
-
{...props}
|
57
|
-
>
|
58
|
-
<AdvancedTable.Header enableSorting />
|
59
|
-
<AdvancedTable.Body subRowHeaders={subRowHeaders} />
|
60
|
-
</AdvancedTable>
|
61
|
-
</div>
|
62
|
-
)
|
63
|
-
}
|
64
|
-
|
65
|
-
export default AdvancedTableCustomSort
|
@@ -1,5 +0,0 @@
|
|
1
|
-
The optional `customSort` prop can be used to add a sort button within a subrow header. The button will only appear if that subrowheader has more than one subrow nested within it. This button comes with a callback function called `onCustomSortClick`.
|
2
|
-
|
3
|
-
The `onCustomSortClick` provides as an argument an array of all the subrows nested within that level of the table.
|
4
|
-
|
5
|
-
__NOTE__: `customSort` must be used in conjunction with the `subRowHeaders` prop. The `customSort` DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.
|
@@ -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 +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,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,18 +0,0 @@
|
|
1
|
-
<%
|
2
|
-
options = [
|
3
|
-
{ label: 'Orange', value: '#FFA500' },
|
4
|
-
{ label: 'Red', value: '#FF0000' },
|
5
|
-
{ label: 'Green', value: '#00FF00' },
|
6
|
-
{ label: 'Blue', value: '#0000FF' },
|
7
|
-
]
|
8
|
-
%>
|
9
|
-
|
10
|
-
<%= pb_rails("typeahead", props: {
|
11
|
-
id: "typeahead-preserve-search-input",
|
12
|
-
is_multi: false,
|
13
|
-
label: "Colors",
|
14
|
-
options: options,
|
15
|
-
placeholder: "Select...",
|
16
|
-
preserve_search_input: true,
|
17
|
-
})
|
18
|
-
%>
|
@@ -1 +0,0 @@
|
|
1
|
-
By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserve_search_input` prop in order to prevent text from being cleared when the field loses focus
|
@@ -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};
|