playbook_ui 15.1.0.pre.alpha.PLAY251810942 → 15.1.0.pre.alpha.play252710946
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_dropdown/_dropdown.scss +29 -105
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +39 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -0
- data/dist/chunks/{_line_graph-C9stNsP3.js → _line_graph-DwC5jqYQ.js} +1 -1
- data/dist/chunks/{_typeahead-D3MtsWXG.js → _typeahead-4Ud3FHDA.js} +1 -1
- data/dist/chunks/{_weekday_stacked-Bvc7R5vH.js → _weekday_stacked-CygSRiZe.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- 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 +4 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1356285c2892298ab0d74134116ab03ac8559495657fddba5c09715c495b8f8b
|
4
|
+
data.tar.gz: e780800f41ea2ca322b7cfb5e15b1e0b8ca1b58ff949e196771987b45a659b79
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: '0930a43f3351acff7849b6eee6c89b565d5454d59a7b81aa4e6b08571d353203c9d47894c4c1cbeb1c3f17d0106fcbe1e7f77a6958cc176ce5f1a2143393aef6'
|
7
|
+
data.tar.gz: ae3b1306ae43c73b5a86f949cccd21cead3e2c74b81f59caee59f80b8b53509fe791ef4bc54000580526f29d82f77cf82e11eccf23f69d8173ac8174b675fd2e
|
@@ -10,15 +10,9 @@
|
|
10
10
|
@import "./scss_partials/dropdown_animation";
|
11
11
|
@import "dropdown_mixin";
|
12
12
|
|
13
|
-
|
14
|
-
.pb_dropdown_subtle,
|
15
|
-
.pb_dropdown_default_separators_hidden,
|
16
|
-
.pb_dropdown_subtle_separators_hidden {
|
13
|
+
[class*="pb_dropdown"] {
|
17
14
|
.dropdown_wrapper {
|
18
|
-
|
19
|
-
.dropdown_trigger_wrapper_focus,
|
20
|
-
.dropdown_trigger_wrapper_focus_select_only,
|
21
|
-
.dropdown_trigger_wrapper_select_only {
|
15
|
+
[class*="dropdown_trigger_wrapper"] {
|
22
16
|
@include pb_body;
|
23
17
|
border: 1px solid $border_light;
|
24
18
|
background-color: $white;
|
@@ -54,11 +48,11 @@
|
|
54
48
|
transition: box-shadow 0.15s ease-in-out;
|
55
49
|
}
|
56
50
|
|
57
|
-
|
51
|
+
&[class*="_select_only"] {
|
58
52
|
box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
|
59
53
|
}
|
60
54
|
|
61
|
-
|
55
|
+
&[class*="_focus"] {
|
62
56
|
box-shadow: 0px 0px 0 1px $primary !important;
|
63
57
|
transition: box-shadow 0.1s ease-in-out;
|
64
58
|
}
|
@@ -75,12 +69,7 @@
|
|
75
69
|
z-index: $z_1;
|
76
70
|
width: 100%;
|
77
71
|
|
78
|
-
|
79
|
-
.pb_dropdown_option_list,
|
80
|
-
.pb_dropdown_option_selected,
|
81
|
-
.pb_dropdown_option_focused,
|
82
|
-
.pb_dropdown_option_list_focused,
|
83
|
-
.pb_dropdown_option_selected_focused {
|
72
|
+
[class*="pb_dropdown_option"] {
|
84
73
|
padding-left: $space_sm;
|
85
74
|
padding-right: $space_sm;
|
86
75
|
padding-top: $space_xs;
|
@@ -90,14 +79,11 @@
|
|
90
79
|
background-color: $bg_light;
|
91
80
|
}
|
92
81
|
|
93
|
-
|
94
|
-
&.pb_dropdown_option_list_focused,
|
95
|
-
&.pb_dropdown_option_selected_focused {
|
82
|
+
&[class*="_focused"] {
|
96
83
|
background-color: $bg_light;
|
97
84
|
}
|
98
85
|
|
99
|
-
|
100
|
-
&.pb_dropdown_option_list_focused {
|
86
|
+
&[class*="_list"] {
|
101
87
|
border-bottom: 1px solid $border_light;
|
102
88
|
|
103
89
|
&:hover, &:focus {
|
@@ -106,8 +92,7 @@
|
|
106
92
|
}
|
107
93
|
}
|
108
94
|
}
|
109
|
-
|
110
|
-
&.pb_dropdown_option_selected_focused {
|
95
|
+
&[class*="selected"] {
|
111
96
|
background-color: $primary;
|
112
97
|
color: $white;
|
113
98
|
[class^="pb_body"],
|
@@ -156,66 +141,41 @@
|
|
156
141
|
}
|
157
142
|
|
158
143
|
&.error {
|
159
|
-
|
144
|
+
[class*=pb_body_kit] {
|
160
145
|
margin-top: $space_xs / 2;
|
161
146
|
}
|
162
147
|
|
163
|
-
|
164
|
-
.dropdown_trigger_wrapper_focus,
|
165
|
-
.dropdown_trigger_wrapper_focus_select_only,
|
166
|
-
.dropdown_trigger_wrapper_select_only {
|
148
|
+
[class*="dropdown_trigger_wrapper"] {
|
167
149
|
border-color: $error;
|
168
150
|
box-shadow: none !important;
|
169
151
|
}
|
170
152
|
}
|
171
153
|
}
|
172
154
|
|
173
|
-
|
174
|
-
&.pb_dropdown_subtle_separators_hidden {
|
155
|
+
&[class*="separators_hidden"] {
|
175
156
|
.dropdown_wrapper {
|
176
157
|
.pb_dropdown_container {
|
177
158
|
|
178
|
-
|
179
|
-
.pb_dropdown_option_list,
|
180
|
-
.pb_dropdown_option_selected,
|
181
|
-
.pb_dropdown_option_focused,
|
182
|
-
.pb_dropdown_option_list_focused,
|
183
|
-
.pb_dropdown_option_selected_focused {
|
159
|
+
[class*="pb_dropdown_option"] {
|
184
160
|
border: none;
|
185
161
|
}
|
186
162
|
}
|
187
163
|
}
|
188
164
|
}
|
189
165
|
|
190
|
-
|
191
|
-
&.pb_dropdown_subtle_separators_hidden {
|
166
|
+
&[class*="subtle"] {
|
192
167
|
.dropdown_wrapper {
|
193
168
|
.pb_dropdown_container {
|
194
169
|
|
195
|
-
|
196
|
-
.pb_dropdown_option_list:first-child,
|
197
|
-
.pb_dropdown_option_selected:first-child,
|
198
|
-
.pb_dropdown_option_focused:first-child,
|
199
|
-
.pb_dropdown_option_list_focused:first-child,
|
200
|
-
.pb_dropdown_option_selected_focused:first-child {
|
170
|
+
[class*="pb_dropdown_option"]:first-child {
|
201
171
|
margin-top: $space_xs;
|
202
172
|
}
|
203
173
|
|
204
|
-
|
205
|
-
.pb_dropdown_option_list:last-child,
|
206
|
-
.pb_dropdown_option_selected:last-child,
|
207
|
-
.pb_dropdown_option_focused:last-child,
|
208
|
-
.pb_dropdown_option_list_focused:last-child,
|
209
|
-
.pb_dropdown_option_selected_focused:last-child {
|
174
|
+
[class*="pb_dropdown_option"]:last-child {
|
210
175
|
margin-bottom: $space_xs;
|
211
176
|
}
|
212
177
|
|
213
|
-
|
214
|
-
.pb_dropdown_option_list,
|
215
|
-
.pb_dropdown_option_selected,
|
216
|
-
.pb_dropdown_option_focused,
|
217
|
-
.pb_dropdown_option_list_focused,
|
218
|
-
.pb_dropdown_option_selected_focused {
|
178
|
+
[class*="pb_dropdown_option"] {
|
219
179
|
margin: $space_xs;
|
220
180
|
padding: $space_xs;
|
221
181
|
border-radius: $border_radius_md;
|
@@ -233,44 +193,24 @@
|
|
233
193
|
}
|
234
194
|
}
|
235
195
|
|
236
|
-
|
237
|
-
.pb_dropdown_option_list:last-child::after,
|
238
|
-
.pb_dropdown_option_selected:last-child::after,
|
239
|
-
.pb_dropdown_option_focused:last-child::after,
|
240
|
-
.pb_dropdown_option_list_focused:last-child::after,
|
241
|
-
.pb_dropdown_option_selected_focused:last-child::after {
|
196
|
+
[class*="pb_dropdown_option"]:last-child::after {
|
242
197
|
display: none;
|
243
198
|
}
|
244
199
|
}
|
245
200
|
}
|
246
201
|
|
247
|
-
|
202
|
+
&[class*="separators_hidden"] {
|
248
203
|
.dropdown_wrapper {
|
249
204
|
.pb_dropdown_container {
|
250
|
-
|
251
|
-
.pb_dropdown_option_list:first-child,
|
252
|
-
.pb_dropdown_option_selected:first-child,
|
253
|
-
.pb_dropdown_option_focused:first-child,
|
254
|
-
.pb_dropdown_option_list_focused:first-child,
|
255
|
-
.pb_dropdown_option_selected_focused:first-child {
|
205
|
+
[class*="pb_dropdown_option"]:first-child {
|
256
206
|
margin-top: $space_xs;
|
257
207
|
}
|
258
208
|
|
259
|
-
|
260
|
-
.pb_dropdown_option_list:last-child,
|
261
|
-
.pb_dropdown_option_selected:last-child,
|
262
|
-
.pb_dropdown_option_focused:last-child,
|
263
|
-
.pb_dropdown_option_list_focused:last-child,
|
264
|
-
.pb_dropdown_option_selected_focused:last-child {
|
209
|
+
[class*="pb_dropdown_option"]:last-child {
|
265
210
|
margin-bottom: $space_xs;
|
266
211
|
}
|
267
212
|
|
268
|
-
|
269
|
-
.pb_dropdown_option_list,
|
270
|
-
.pb_dropdown_option_selected,
|
271
|
-
.pb_dropdown_option_focused,
|
272
|
-
.pb_dropdown_option_list_focused,
|
273
|
-
.pb_dropdown_option_selected_focused {
|
213
|
+
[class*="pb_dropdown_option"] {
|
274
214
|
padding: $space_xxs $space_xs;
|
275
215
|
margin: $space_xxs $space_xs;
|
276
216
|
|
@@ -278,8 +218,7 @@
|
|
278
218
|
height: 0px;
|
279
219
|
}
|
280
220
|
|
281
|
-
|
282
|
-
&.pb_dropdown_option_selected_focused {
|
221
|
+
&[class*="selected"] {
|
283
222
|
border-bottom: none;
|
284
223
|
}
|
285
224
|
}
|
@@ -290,10 +229,7 @@
|
|
290
229
|
|
291
230
|
&.dark {
|
292
231
|
.dropdown_wrapper {
|
293
|
-
|
294
|
-
.dropdown_trigger_wrapper_focus,
|
295
|
-
.dropdown_trigger_wrapper_focus_select_only,
|
296
|
-
.dropdown_trigger_wrapper_select_only {
|
232
|
+
[class*="dropdown_trigger_wrapper"] {
|
297
233
|
@include pb_body_light_dark;
|
298
234
|
background-color: rgba($white, 0.1) !important;
|
299
235
|
background: none;
|
@@ -308,7 +244,7 @@
|
|
308
244
|
[class^="pb_body"] {
|
309
245
|
color: $white;
|
310
246
|
}
|
311
|
-
|
247
|
+
&[class*="_select_only"] {
|
312
248
|
box-shadow: inset 0 -11px 20px rgba($white, 0.05);
|
313
249
|
}
|
314
250
|
.dropdown_input {
|
@@ -318,10 +254,7 @@
|
|
318
254
|
}
|
319
255
|
|
320
256
|
&.error {
|
321
|
-
|
322
|
-
.dropdown_trigger_wrapper_focus,
|
323
|
-
.dropdown_trigger_wrapper_focus_select_only,
|
324
|
-
.dropdown_trigger_wrapper_select_only {
|
257
|
+
[class*="dropdown_trigger_wrapper"] {
|
325
258
|
border-color: $error_dark;
|
326
259
|
}
|
327
260
|
}
|
@@ -335,28 +268,19 @@
|
|
335
268
|
color: $white !important;
|
336
269
|
}
|
337
270
|
|
338
|
-
|
339
|
-
.pb_dropdown_option_list,
|
340
|
-
.pb_dropdown_option_selected,
|
341
|
-
.pb_dropdown_option_focused,
|
342
|
-
.pb_dropdown_option_list_focused,
|
343
|
-
.pb_dropdown_option_selected_focused {
|
271
|
+
[class*="pb_dropdown_option"] {
|
344
272
|
&:hover {
|
345
273
|
background-color: $hover_dark;
|
346
274
|
}
|
347
275
|
|
348
|
-
|
349
|
-
&.pb_dropdown_option_list_focused,
|
350
|
-
&.pb_dropdown_option_selected_focused {
|
276
|
+
&[class*="_focused"] {
|
351
277
|
background-color: $hover_dark;
|
352
278
|
}
|
353
279
|
|
354
|
-
|
355
|
-
&.pb_dropdown_option_list_focused {
|
280
|
+
&[class*="_list"] {
|
356
281
|
border-color: rgba($white, 0.15);
|
357
282
|
}
|
358
|
-
|
359
|
-
&.pb_dropdown_option_selected_focused {
|
283
|
+
&[class*="selected"] {
|
360
284
|
background-color: $primary;
|
361
285
|
border-bottom: rgba($white, 0.15);
|
362
286
|
}
|
@@ -21,6 +21,15 @@
|
|
21
21
|
]
|
22
22
|
%>
|
23
23
|
|
24
|
+
<%
|
25
|
+
example_typeahead_options = [
|
26
|
+
{ label: 'Orange', value: '#FFA500' },
|
27
|
+
{ label: 'Red', value: '#FF0000' },
|
28
|
+
{ label: 'Green', value: '#00FF00' },
|
29
|
+
{ label: 'Blue', value: '#0000FF' },
|
30
|
+
]
|
31
|
+
%>
|
32
|
+
|
24
33
|
<% treeData = [{
|
25
34
|
label: "Power Home Remodeling",
|
26
35
|
value: "Power Home Remodeling",
|
@@ -88,7 +97,9 @@
|
|
88
97
|
}] %>
|
89
98
|
|
90
99
|
<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
|
91
|
-
<%= form.typeahead :
|
100
|
+
<%= form.typeahead :example_typeahead_validation_rails, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
|
101
|
+
<%= form.typeahead :example_typeahead_validation, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
|
102
|
+
<%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
|
92
103
|
<%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
|
93
104
|
<%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
|
94
105
|
<%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
|
@@ -53,6 +53,8 @@ type TypeaheadProps = {
|
|
53
53
|
pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
|
54
54
|
onChange?: any,
|
55
55
|
optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
|
56
|
+
required?: boolean,
|
57
|
+
validation?: { message: string },
|
56
58
|
searchContextSelector?: string,
|
57
59
|
clearOnContextChange?: boolean,
|
58
60
|
preserveSearchInput?: boolean,
|
@@ -94,12 +96,16 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
94
96
|
onChange,
|
95
97
|
optionsByContext = {},
|
96
98
|
searchContextSelector,
|
99
|
+
required = false,
|
100
|
+
validation,
|
97
101
|
clearOnContextChange = false,
|
98
102
|
preserveSearchInput = false, // Default to false to maintain backward compatibility
|
99
103
|
...props
|
100
104
|
}: TypeaheadProps) => {
|
101
105
|
// State to manage the input value when preserveSearchInput is true
|
102
106
|
const [inputValue, setInputValue] = useState("")
|
107
|
+
// State to track if form has been submitted to control validation display for react rendered rails kit
|
108
|
+
const [formSubmitted, setFormSubmitted] = useState(false)
|
103
109
|
|
104
110
|
// If preserveSearchInput is true, we need to control the input value
|
105
111
|
const handleInputChange = preserveSearchInput
|
@@ -135,6 +141,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
135
141
|
|
136
142
|
const selectProps = {
|
137
143
|
cacheOptions: true,
|
144
|
+
required,
|
138
145
|
components: {
|
139
146
|
Control,
|
140
147
|
ClearIndicator,
|
@@ -170,6 +177,27 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
170
177
|
|
171
178
|
const [contextValue, setContextValue] = useState("")
|
172
179
|
|
180
|
+
// Add listener for form validation to track when validation should be shown (needed for react rendered rails kit)
|
181
|
+
useEffect(() => {
|
182
|
+
const handleInvalid = (event: Event) => {
|
183
|
+
const target = event.target as HTMLInputElement
|
184
|
+
const typeaheadContainer = target.closest('[data-pb-react-component="Typeahead"]')
|
185
|
+
|
186
|
+
if (typeaheadContainer) {
|
187
|
+
// Check if this invalid event is specifically for our typeahead by comparing names so we do not have to require ids
|
188
|
+
const invalidInputName = target.name || target.getAttribute('name')
|
189
|
+
if (invalidInputName === name) {
|
190
|
+
setFormSubmitted(true)
|
191
|
+
}
|
192
|
+
}
|
193
|
+
}
|
194
|
+
document.addEventListener('invalid', handleInvalid, true)
|
195
|
+
|
196
|
+
return () => {
|
197
|
+
document.removeEventListener('invalid', handleInvalid, true)
|
198
|
+
}
|
199
|
+
}, [name])
|
200
|
+
|
173
201
|
// Add listener for clearing
|
174
202
|
useEffect(() => {
|
175
203
|
const handleClear = () => {
|
@@ -230,6 +258,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
230
258
|
}
|
231
259
|
}
|
232
260
|
|
261
|
+
// Reset form submitted state when a selection is made (this is all for react rendered rails kit)
|
262
|
+
if (action === 'select-option') {
|
263
|
+
setFormSubmitted(false)
|
264
|
+
}
|
265
|
+
|
233
266
|
// If a value is selected and we're preserving input on blur, clear the input
|
234
267
|
if (action === 'select-option' && preserveSearchInput) {
|
235
268
|
setInputValue('')
|
@@ -268,6 +301,11 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
268
301
|
|
269
302
|
const inlineClass = selectProps.inline ? 'inline' : null
|
270
303
|
|
304
|
+
const shouldShowValidationError = required &&
|
305
|
+
formSubmitted
|
306
|
+
|
307
|
+
const errorDisplay = error || (shouldShowValidationError ? validation?.message || "Please fill out this field." : "")
|
308
|
+
|
271
309
|
return (
|
272
310
|
<div
|
273
311
|
{...dataProps}
|
@@ -276,7 +314,7 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
|
|
276
314
|
>
|
277
315
|
<Tag
|
278
316
|
classNamePrefix="typeahead-kit-select"
|
279
|
-
error={
|
317
|
+
error={errorDisplay}
|
280
318
|
isDisabled={disabled}
|
281
319
|
onChange={handleOnChange}
|
282
320
|
{...selectProps}
|
@@ -101,6 +101,8 @@ module Playbook
|
|
101
101
|
plusIcon: plus_icon,
|
102
102
|
truncate: truncate,
|
103
103
|
wrapped: wrapped,
|
104
|
+
required: required,
|
105
|
+
validation: validation,
|
104
106
|
searchContextSelector: search_context_selector,
|
105
107
|
optionsByContext: options_by_context,
|
106
108
|
clearOnContextChange: clear_on_context_change,
|
@@ -1 +1 @@
|
|
1
|
-
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-D3MtsWXG.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,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:colors2!==void 0&&colors2.length>0?mapColors(colors2):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:colors2=[],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:colors2.length>0?mapColors(colors2):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})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...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:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};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})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
|
1
|
+
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{d as buildAriaProps,e as buildDataProps,f as buildHtmlProps,H as HighchartsReact,g as Highcharts,h as classnames,i as globalProps,j as HighchartsMore,S as SolidGauge,k as buildCss}from"./_typeahead-4Ud3FHDA.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,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:colors2!==void 0&&colors2.length>0?mapColors(colors2):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:colors2=[],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:colors2.length>0?mapColors(colors2):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})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...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:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};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})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
|