playbook_ui 16.2.0.pre.rc.2 → 16.2.0.pre.rc.4
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/docs/_advanced_table_sort.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -8
- data/app/pb_kits/playbook/pb_dropdown/index.js +11 -10
- data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -3
- data/app/pb_kits/playbook/pb_nav/_nav.scss +82 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb +24 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx +87 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -6
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/item.rb +1 -1
- data/app/pb_kits/playbook/pb_nav/navTypes.ts +1 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +29 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -0
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -0
- data/app/pb_kits/playbook/tokens/_colors_accessible.scss +250 -0
- data/app/pb_kits/playbook/tokens/exports/_colors.module.scss +10 -0
- data/dist/chunks/{_pb_line_graph-DuJNCf7N.js → _pb_line_graph-CC2Ywwix.js} +1 -1
- data/dist/chunks/_typeahead-CmMqokN8.js +1 -0
- data/dist/chunks/{globalProps-Bc-FVsRt.js → globalProps-DYr2qrIf.js} +1 -1
- data/dist/chunks/{lib-BwX82vim.js → lib-DgqmX9CF.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +2 -2
- data/dist/reset.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +9 -6
- data/dist/chunks/_typeahead-BKSzddAX.js +0 -1
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/*=====================================
|
|
2
|
+
Accessible Color Tokens (WCAG-compliant)
|
|
3
|
+
Source of truth for new color tokens, starting with accessible text, border, input, and status colors.
|
|
4
|
+
Do not document base values; document usage only.
|
|
5
|
+
=====================================*/
|
|
6
|
+
|
|
7
|
+
/* Text Colors ----------------------*/
|
|
8
|
+
$text_default_color: #242B42 !default; // text_default_color is temporary name accounting for conflict with typography token text_default
|
|
9
|
+
$text_light: #4B546B !default;
|
|
10
|
+
$text_lighter: #617290 !default;
|
|
11
|
+
$text_success: #158149 !default;
|
|
12
|
+
$text_error: #DA0014 !default;
|
|
13
|
+
$text_link: #0056CF !default;
|
|
14
|
+
|
|
15
|
+
$text_default_dark: #FFFFFF !default;
|
|
16
|
+
$text_light_dark: #B4B2BE !default;
|
|
17
|
+
$text_lighter_dark: #8A879A !default;
|
|
18
|
+
$text_success_dark: #00CA74 !default;
|
|
19
|
+
$text_error_dark: #FF1A1A !default;
|
|
20
|
+
$text_link_dark: #0E89FF !default;
|
|
21
|
+
|
|
22
|
+
$accessible_text_colors: (
|
|
23
|
+
text_default: $text_default_color,
|
|
24
|
+
text_light: $text_light,
|
|
25
|
+
text_lighter: $text_lighter,
|
|
26
|
+
text_success: $text_success,
|
|
27
|
+
text_error: $text_error,
|
|
28
|
+
text_link: $text_link,
|
|
29
|
+
text_default_dark: $text_default_dark,
|
|
30
|
+
text_light_dark: $text_light_dark,
|
|
31
|
+
text_lighter_dark: $text_lighter_dark,
|
|
32
|
+
text_success_dark: $text_success_dark,
|
|
33
|
+
text_error_dark: $text_error_dark,
|
|
34
|
+
text_link_dark: $text_link_dark
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
/* Input Text & Icon Colors ----------------------*/
|
|
38
|
+
$input_text_default: #617290 !default;
|
|
39
|
+
$input_text_active: #242B42 !default;
|
|
40
|
+
$input_text_disabled: #B4BBC3 !default;
|
|
41
|
+
$input_text_error: #DA0014 !default;
|
|
42
|
+
|
|
43
|
+
$input_text_default_dark: #B0B0B0 !default;
|
|
44
|
+
$input_text_state_active: #FFFFFF !default;
|
|
45
|
+
$input_text_disabled_dark: #615D73 !default;
|
|
46
|
+
$input_text_error_dark: #FF1A1A !default;
|
|
47
|
+
|
|
48
|
+
$accessible_input_text_colors: (
|
|
49
|
+
input_text_default: $input_text_default,
|
|
50
|
+
input_text_active: $input_text_active,
|
|
51
|
+
input_text_disabled: $input_text_disabled,
|
|
52
|
+
input_text_error: $input_text_error,
|
|
53
|
+
input_text_default_dark: $input_text_default_dark,
|
|
54
|
+
input_text_state_active: $input_text_state_active,
|
|
55
|
+
input_text_disabled_dark: $input_text_disabled_dark,
|
|
56
|
+
input_text_error_dark: $input_text_error_dark
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
/* Input Background Colors ----------------------*/
|
|
60
|
+
$input_background_default: #FFFFFF !default;
|
|
61
|
+
$input_background_state: #FBFDFF !default;
|
|
62
|
+
$input_background_disabled: #F4F4F6 !default;
|
|
63
|
+
|
|
64
|
+
$input_background_default_dark: #44405A !default;
|
|
65
|
+
$input_background_state_dark: #36324E !default;
|
|
66
|
+
$input_background_disabled_dark: #171333 !default;
|
|
67
|
+
|
|
68
|
+
$accessible_input_background_colors: (
|
|
69
|
+
input_background_default: $input_background_default,
|
|
70
|
+
input_background_state: $input_background_state,
|
|
71
|
+
input_background_disabled: $input_background_disabled,
|
|
72
|
+
input_background_default_dark: $input_background_default_dark,
|
|
73
|
+
input_background_state_dark: $input_background_state_dark,
|
|
74
|
+
input_background_disabled_dark: $input_background_disabled_dark
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
/* Input Border Colors ----------------------*/
|
|
78
|
+
$input_border_default: #828EA7 !default;
|
|
79
|
+
$input_border_state: #0056CF !default;
|
|
80
|
+
$input_border_error: #DA0014 !default;
|
|
81
|
+
$input_border_disabled: #E4E8F0 !default;
|
|
82
|
+
|
|
83
|
+
$input_border_default_dark: #6E6A84 !default;
|
|
84
|
+
$input_border_state_dark: #0E89FF !default;
|
|
85
|
+
$input_border_error_dark: #FF1A1A !default;
|
|
86
|
+
$input_border_disabled_dark: #6E6A84 !default;
|
|
87
|
+
|
|
88
|
+
$accessible_input_border_colors: (
|
|
89
|
+
input_border_default: $input_border_default,
|
|
90
|
+
input_border_state: $input_border_state,
|
|
91
|
+
input_border_error: $input_border_error,
|
|
92
|
+
input_border_disabled: $input_border_disabled,
|
|
93
|
+
input_border_default_dark: $input_border_default_dark,
|
|
94
|
+
input_border_state_dark: $input_border_state_dark,
|
|
95
|
+
input_border_error_dark: $input_border_error_dark,
|
|
96
|
+
input_border_disabled_dark: $input_border_disabled_dark
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
/* Status Text and Icon colors ----------------------*/
|
|
100
|
+
$status_text_neutral: #576775 !default;
|
|
101
|
+
$status_text_primary: #0056CF !default;
|
|
102
|
+
$status_text_success: #107441 !default;
|
|
103
|
+
$status_text_error: #BF0012 !default;
|
|
104
|
+
$status_text_warning: #886600 !default;
|
|
105
|
+
$status_text_info: #16747E !default;
|
|
106
|
+
$status_text_notification: #FFFFFF !default;
|
|
107
|
+
|
|
108
|
+
$status_text_neutral_dark: #93A8B8 !default;
|
|
109
|
+
$status_text_primary_dark: #0E89FF !default;
|
|
110
|
+
$status_text_success_dark: #00CA74 !default;
|
|
111
|
+
$status_text_error_dark: #FF4A50 !default;
|
|
112
|
+
$status_text_warning_dark: #F9BB00 !default;
|
|
113
|
+
$status_text_info_dark: #00C4D7 !default;
|
|
114
|
+
|
|
115
|
+
$accessible_status_text_colors: (
|
|
116
|
+
status_text_neutral: $status_text_neutral,
|
|
117
|
+
status_text_primary: $status_text_primary,
|
|
118
|
+
status_text_success: $status_text_success,
|
|
119
|
+
status_text_error: $status_text_error,
|
|
120
|
+
status_text_warning: $status_text_warning,
|
|
121
|
+
status_text_info: $status_text_info,
|
|
122
|
+
status_text_notification: $status_text_notification,
|
|
123
|
+
status_text_neutral_dark: $status_text_neutral_dark,
|
|
124
|
+
status_text_primary_dark: $status_text_primary_dark,
|
|
125
|
+
status_text_success_dark: $status_text_success_dark,
|
|
126
|
+
status_text_error_dark: $status_text_error_dark,
|
|
127
|
+
status_text_warning_dark: $status_text_warning_dark,
|
|
128
|
+
status_text_info_dark: $status_text_info_dark
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
/* Status Background colors ----------------------*/
|
|
132
|
+
$status_background_neutral: #EDEDED !default;
|
|
133
|
+
$status_background_primary: #E5EEFA !default;
|
|
134
|
+
$status_background_success: #E0F0E8 !default;
|
|
135
|
+
$status_background_error: #FBE5E7 !default;
|
|
136
|
+
$status_background_warning: #FBF5E3 !default;
|
|
137
|
+
$status_background_info: #DEF8FC !default;
|
|
138
|
+
$status_background_notification: #0056CF !default;
|
|
139
|
+
$status_background_notificationError: #DA0014 !default;
|
|
140
|
+
|
|
141
|
+
$status_background_neutral_hover: #E3E3E3 !default;
|
|
142
|
+
$status_background_primary_hover: #CEE0F7 !default;
|
|
143
|
+
$status_background_success_hover: #CDEADB !default;
|
|
144
|
+
$status_background_error_hover: #F9CDD1 !default;
|
|
145
|
+
$status_background_warning_hover: #FAEDC7 !default;
|
|
146
|
+
$status_background_info_hover: #C4F2F7 !default;
|
|
147
|
+
|
|
148
|
+
$status_background_dark: #231E3D !default;
|
|
149
|
+
$status_background_notification_dark: #0E89FF !default;
|
|
150
|
+
$status_background_notificationError_dark: #FF4A50 !default;
|
|
151
|
+
|
|
152
|
+
$status_background_neutral_hover_dark: #292543 !default;
|
|
153
|
+
$status_background_primary_hover_dark: #0B2137 !default;
|
|
154
|
+
$status_background_success_hover_dark: #1C2B25 !default;
|
|
155
|
+
$status_background_error_hover_dark: #2E1F1F !default;
|
|
156
|
+
$status_background_warning_hover_dark: #2B261D !default;
|
|
157
|
+
$status_background_info_hover_dark: #212645 !default;
|
|
158
|
+
|
|
159
|
+
$accessible_status_background_colors: (
|
|
160
|
+
status_background_neutral: $status_background_neutral,
|
|
161
|
+
status_background_primary: $status_background_primary,
|
|
162
|
+
status_background_success: $status_background_success,
|
|
163
|
+
status_background_error: $status_background_error,
|
|
164
|
+
status_background_warning: $status_background_warning,
|
|
165
|
+
status_background_info: $status_background_info,
|
|
166
|
+
status_background_notification: $status_background_notification,
|
|
167
|
+
status_background_notificationError: $status_background_notificationError,
|
|
168
|
+
status_background_neutral_hover: $status_background_neutral_hover,
|
|
169
|
+
status_background_primary_hover: $status_background_primary_hover,
|
|
170
|
+
status_background_success_hover: $status_background_success_hover,
|
|
171
|
+
status_background_error_hover: $status_background_error_hover,
|
|
172
|
+
status_background_warning_hover: $status_background_warning_hover,
|
|
173
|
+
status_background_info_hover: $status_background_info_hover,
|
|
174
|
+
status_background_dark: $status_background_dark,
|
|
175
|
+
status_background_notification_dark: $status_background_notification_dark,
|
|
176
|
+
status_background_notificationError_dark: $status_background_notificationError_dark,
|
|
177
|
+
status_background_neutral_hover_dark: $status_background_neutral_hover_dark,
|
|
178
|
+
status_background_primary_hover_dark: $status_background_primary_hover_dark,
|
|
179
|
+
status_background_success_hover_dark: $status_background_success_hover_dark,
|
|
180
|
+
status_background_error_hover_dark: $status_background_error_hover_dark,
|
|
181
|
+
status_background_warning_hover_dark: $status_background_warning_hover_dark,
|
|
182
|
+
status_background_info_hover_dark: $status_background_info_hover_dark
|
|
183
|
+
);
|
|
184
|
+
|
|
185
|
+
/* Status Icon Background colors ----------------------*/
|
|
186
|
+
$status_iconBackground_neutral_hover: #EDEDED !default;
|
|
187
|
+
$status_iconBackground_primary_hover: #E5EEFA !default;
|
|
188
|
+
$status_iconBackground_success_hover: #E0F0E8 !default;
|
|
189
|
+
$status_iconBackground_error_hover: #FBE5E7 !default;
|
|
190
|
+
$status_iconBackground_warning_hover: #FBF5E3 !default;
|
|
191
|
+
$status_iconBackground_info_hover: #DEF8FC !default;
|
|
192
|
+
|
|
193
|
+
$status_iconBackground_neutral_hover_dark: #403C57 !default;
|
|
194
|
+
$status_iconBackground_primary_hover_dark: #1B3956 !default;
|
|
195
|
+
$status_iconBackground_success_hover_dark: #2D483D !default;
|
|
196
|
+
$status_iconBackground_error_hover_dark: #522F2F !default;
|
|
197
|
+
$status_iconBackground_warning_hover_dark: #463B27 !default;
|
|
198
|
+
$status_iconBackground_info_hover_dark: #1A4662 !default;
|
|
199
|
+
|
|
200
|
+
$accessible_status_icon_background_colors: (
|
|
201
|
+
status_iconBackground_neutral_hover: $status_iconBackground_neutral_hover,
|
|
202
|
+
status_iconBackground_primary_hover: $status_iconBackground_primary_hover,
|
|
203
|
+
status_iconBackground_success_hover: $status_iconBackground_success_hover,
|
|
204
|
+
status_iconBackground_error_hover: $status_iconBackground_error_hover,
|
|
205
|
+
status_iconBackground_warning_hover: $status_iconBackground_warning_hover,
|
|
206
|
+
status_iconBackground_info_hover: $status_iconBackground_info_hover,
|
|
207
|
+
status_iconBackground_neutral_hover_dark: $status_iconBackground_neutral_hover_dark,
|
|
208
|
+
status_iconBackground_primary_hover_dark: $status_iconBackground_primary_hover_dark,
|
|
209
|
+
status_iconBackground_success_hover_dark: $status_iconBackground_success_hover_dark,
|
|
210
|
+
status_iconBackground_error_hover_dark: $status_iconBackground_error_hover_dark,
|
|
211
|
+
status_iconBackground_warning_hover_dark: $status_iconBackground_warning_hover_dark,
|
|
212
|
+
status_iconBackground_info_hover_dark: $status_iconBackground_info_hover_dark
|
|
213
|
+
);
|
|
214
|
+
|
|
215
|
+
/* Status Border colors ----------------------*/
|
|
216
|
+
$status_border_neutral: #576775 !default;
|
|
217
|
+
$status_border_primary: #0056CF !default;
|
|
218
|
+
$status_border_success: #107441 !default;
|
|
219
|
+
$status_border_error: #BF0012 !default;
|
|
220
|
+
$status_border_warning: #886600 !default;
|
|
221
|
+
$status_border_info: #16747E !default;
|
|
222
|
+
$status_border_notification: #FFFFFF !default;
|
|
223
|
+
|
|
224
|
+
$status_border_neutral_dark: #93A8B8 !default;
|
|
225
|
+
$status_border_primary_dark: #0E89FF !default;
|
|
226
|
+
$status_border_success_dark: #00CA74 !default;
|
|
227
|
+
$status_border_error_dark: #FF4A50 !default;
|
|
228
|
+
$status_border_warning_dark: #F9BB00 !default;
|
|
229
|
+
$status_border_info_dark: #00C4D7 !default;
|
|
230
|
+
|
|
231
|
+
$status_border_focus: #0056CF !default;
|
|
232
|
+
$status_border_focus_dark: #0E89FF !default;
|
|
233
|
+
|
|
234
|
+
$accessible_status_border_colors: (
|
|
235
|
+
status_border_neutral: $status_border_neutral,
|
|
236
|
+
status_border_primary: $status_border_primary,
|
|
237
|
+
status_border_success: $status_border_success,
|
|
238
|
+
status_border_error: $status_border_error,
|
|
239
|
+
status_border_warning: $status_border_warning,
|
|
240
|
+
status_border_info: $status_border_info,
|
|
241
|
+
status_border_notification: $status_border_notification,
|
|
242
|
+
status_border_neutral_dark: $status_border_neutral_dark,
|
|
243
|
+
status_border_primary_dark: $status_border_primary_dark,
|
|
244
|
+
status_border_success_dark: $status_border_success_dark,
|
|
245
|
+
status_border_error_dark: $status_border_error_dark,
|
|
246
|
+
status_border_warning_dark: $status_border_warning_dark,
|
|
247
|
+
status_border_info_dark: $status_border_info_dark,
|
|
248
|
+
status_border_focus: $status_border_focus,
|
|
249
|
+
status_border_focus_dark: $status_border_focus_dark
|
|
250
|
+
);
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
#{"" + $name}: $color;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
+
/* Legacy tokens — from _colors.scss */
|
|
9
10
|
@include export-colors($product_colors);
|
|
10
11
|
@include export-colors($status_colors);
|
|
11
12
|
@include export-colors($data_colors);
|
|
@@ -23,4 +24,13 @@
|
|
|
23
24
|
@include export-colors($category_colors);
|
|
24
25
|
gradient_start: $gradient_start;
|
|
25
26
|
gradient_end: $gradient_end;
|
|
27
|
+
/* Accessible tokens — from _colors_accessible.scss */
|
|
28
|
+
@include export-colors($accessible_text_colors);
|
|
29
|
+
@include export-colors($accessible_input_text_colors);
|
|
30
|
+
@include export-colors($accessible_input_background_colors);
|
|
31
|
+
@include export-colors($accessible_input_border_colors);
|
|
32
|
+
@include export-colors($accessible_status_text_colors);
|
|
33
|
+
@include export-colors($accessible_status_background_colors);
|
|
34
|
+
@include export-colors($accessible_status_icon_background_colors);
|
|
35
|
+
@include export-colors($accessible_status_border_colors);
|
|
26
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-DYr2qrIf.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DgqmX9CF.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|