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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +5 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -8
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -5
- data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -36
- 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_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/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-B7FRYVtS.js} +3 -3
- data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-D5re2fT9.js} +2 -2
- 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 +16 -21
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md +0 -1
- 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/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
- /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/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.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-
|
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/
|
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/
|
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/
|
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/
|
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/
|
3626
|
-
- dist/chunks/
|
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-
|
3630
|
-
- dist/chunks/pb_form_validation-
|
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
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
DELETED
@@ -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 }) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
DELETED
@@ -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 +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 +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};
|
File without changes
|
File without changes
|
/data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md}
RENAMED
File without changes
|