playbook_ui 16.8.0.pre.alpha.PLAY298516635 → 16.8.0.pre.alpha.PLAY298616637
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_date_picker/_date_picker.tsx +42 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +8 -5
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +60 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +3 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +0 -58
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +0 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +1 -7
- data/app/pb_kits/playbook/pb_select/select.rb +0 -9
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +0 -9
- data/dist/chunks/{_pb_line_graph-BgsTI0CL.js → _pb_line_graph-BdDqs3Vu.js} +1 -1
- data/dist/chunks/{_typeahead-DA__Kgp5.js → _typeahead-B8k7RBsj.js} +1 -1
- data/dist/chunks/{globalProps-DOB47YGB.js → globalProps-DF0MuVPf.js} +1 -1
- data/dist/chunks/{lib-BzglXly2.js → lib-DsBJM_F3.js} +1 -1
- data/dist/chunks/vendor.js +3 -3
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a7433137fdbca6402528b7760f24b18180f74ee7e365cf010286a3a8e80614b5
|
|
4
|
+
data.tar.gz: fd6226655188651cbdc783e6acb77deff35ebcaaea75a03f040cf2466505d3e8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8e022be82d66109e4e13e67776667c0fa952b4fb25b9ff961deb80a4e9801e490de9fa256a9acd0a9a4e7456a44a55ba0707be8f88cca0ca4551f510d90ab6d3
|
|
7
|
+
data.tar.gz: 9587bdc193b7be5422c15c21c8fec87a28cb7e1779ff566bac63d4c9bff0383ad0bc18062159667d447f972b44e99f6d43567892a04e62c1e08584cfe956bec9
|
|
@@ -12,6 +12,41 @@ import Caption from '../pb_caption/_caption'
|
|
|
12
12
|
import Body from '../pb_body/_body'
|
|
13
13
|
import colors from "../tokens/exports/_colors.module.scss"
|
|
14
14
|
|
|
15
|
+
function isValidDateInstance(value: Date): boolean {
|
|
16
|
+
return !Number.isNaN(value.getTime())
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function normalizeDefaultDate<T>(defaultDate: T): T {
|
|
20
|
+
if (defaultDate instanceof Date) {
|
|
21
|
+
return (isValidDateInstance(defaultDate) ? defaultDate : '') as unknown as T
|
|
22
|
+
}
|
|
23
|
+
if (Array.isArray(defaultDate)) {
|
|
24
|
+
const normalized = defaultDate.filter(
|
|
25
|
+
(d) => !(d instanceof Date) || isValidDateInstance(d)
|
|
26
|
+
)
|
|
27
|
+
return (normalized.length ? normalized : '') as unknown as T
|
|
28
|
+
}
|
|
29
|
+
return defaultDate
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
function serializeDefaultDateForFilterReset(defaultDate: unknown): string | undefined {
|
|
33
|
+
if (defaultDate === '' || defaultDate == null) return undefined
|
|
34
|
+
if (Array.isArray(defaultDate)) {
|
|
35
|
+
const parts = defaultDate.map((d) => {
|
|
36
|
+
if (d == null || d === '') return ''
|
|
37
|
+
if (d instanceof Date) {
|
|
38
|
+
return isValidDateInstance(d) ? d.toISOString() : ''
|
|
39
|
+
}
|
|
40
|
+
return String(d)
|
|
41
|
+
}).filter(Boolean)
|
|
42
|
+
return parts.length ? parts.join(',') : undefined
|
|
43
|
+
}
|
|
44
|
+
if (defaultDate instanceof Date) {
|
|
45
|
+
return isValidDateInstance(defaultDate) ? defaultDate.toISOString() : undefined
|
|
46
|
+
}
|
|
47
|
+
return String(defaultDate)
|
|
48
|
+
}
|
|
49
|
+
|
|
15
50
|
type DatePickerProps = {
|
|
16
51
|
allowInput?: boolean,
|
|
17
52
|
aria?: { [key: string]: string },
|
|
@@ -113,7 +148,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
113
148
|
} = props
|
|
114
149
|
|
|
115
150
|
const ariaProps = buildAriaProps(aria)
|
|
116
|
-
const
|
|
151
|
+
const normalizedDefaultDate = normalizeDefaultDate(defaultDate)
|
|
152
|
+
const filterResetDefaultSerialized = serializeDefaultDateForFilterReset(normalizedDefaultDate)
|
|
153
|
+
const dataProps = buildDataProps({
|
|
154
|
+
...data,
|
|
155
|
+
...(filterResetDefaultSerialized ? { 'default-value': filterResetDefaultSerialized } : {}),
|
|
156
|
+
})
|
|
117
157
|
const htmlProps = buildHtmlProps(htmlOptions)
|
|
118
158
|
const inputAriaProps = buildAriaProps(inputAria)
|
|
119
159
|
const inputDataProps = buildDataProps(inputData)
|
|
@@ -136,7 +176,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
136
176
|
datePickerHelper({
|
|
137
177
|
allowInput,
|
|
138
178
|
customQuickPickDates,
|
|
139
|
-
defaultDate,
|
|
179
|
+
defaultDate: normalizedDefaultDate,
|
|
140
180
|
disableDate,
|
|
141
181
|
disableRange,
|
|
142
182
|
disableWeekdays,
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<% date_picker_root_attrs = {
|
|
2
|
+
class: object.classname + object.error_class,
|
|
3
|
+
'data-pb-date-picker' => true,
|
|
4
|
+
'data-validation-message' => object.validation_message,
|
|
5
|
+
}
|
|
6
|
+
date_picker_root_attrs['data-default-value'] = object.serialized_default_date_for_dom if object.serialized_default_date_for_dom.present?
|
|
7
|
+
%>
|
|
8
|
+
<%= pb_content_tag(:div, date_picker_root_attrs) do %>
|
|
6
9
|
<div class="input_wrapper">
|
|
7
10
|
<% if !object.hide_label && object.label %>
|
|
8
11
|
<label for="<%= object.picker_id %>">
|
|
@@ -145,6 +145,18 @@ module Playbook
|
|
|
145
145
|
def angle_down_path
|
|
146
146
|
"app/pb_kits/playbook/utilities/icons/angle-down.svg"
|
|
147
147
|
end
|
|
148
|
+
|
|
149
|
+
# Serialized business default for opt-in smart filter reset (Nitro / data-default-value).
|
|
150
|
+
def serialized_default_date_for_dom
|
|
151
|
+
case default_date
|
|
152
|
+
when nil, ""
|
|
153
|
+
nil
|
|
154
|
+
when Array
|
|
155
|
+
default_date.compact_blank.map(&:to_s).join(",")
|
|
156
|
+
else
|
|
157
|
+
default_date.to_s.presence
|
|
158
|
+
end
|
|
159
|
+
end
|
|
148
160
|
end
|
|
149
161
|
end
|
|
150
162
|
end
|
|
@@ -40,6 +40,66 @@ describe('DatePicker Kit', () => {
|
|
|
40
40
|
expect(kit).toHaveClass('pb_date_picker_kit mb_sm')
|
|
41
41
|
})
|
|
42
42
|
|
|
43
|
+
test('exposes data-default-value on kit root when defaultDate is set', () => {
|
|
44
|
+
const testId = 'datepicker-def-attr'
|
|
45
|
+
render(
|
|
46
|
+
<DatePicker
|
|
47
|
+
data={{ testid: testId }}
|
|
48
|
+
defaultDate={DEFAULT_DATE}
|
|
49
|
+
pickerId="date-picker-def-attr"
|
|
50
|
+
/>
|
|
51
|
+
)
|
|
52
|
+
const kit = screen.getByTestId(testId)
|
|
53
|
+
expect(kit).toHaveAttribute('data-default-value', DEFAULT_DATE.toISOString())
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
test('omits data-default-value when defaultDate is empty', () => {
|
|
57
|
+
const testId = 'datepicker-no-def-attr'
|
|
58
|
+
render(
|
|
59
|
+
<DatePicker
|
|
60
|
+
data={{ testid: testId }}
|
|
61
|
+
defaultDate=""
|
|
62
|
+
pickerId="date-picker-no-def-attr"
|
|
63
|
+
/>
|
|
64
|
+
)
|
|
65
|
+
const kit = screen.getByTestId(testId)
|
|
66
|
+
expect(kit).not.toHaveAttribute('data-default-value')
|
|
67
|
+
})
|
|
68
|
+
|
|
69
|
+
test('renders without error when defaultDate is an invalid Date', () => {
|
|
70
|
+
const testId = 'datepicker-invalid-date'
|
|
71
|
+
const invalidDate = new Date('UndefinedT00:00')
|
|
72
|
+
|
|
73
|
+
expect(() => {
|
|
74
|
+
render(
|
|
75
|
+
<DatePicker
|
|
76
|
+
data={{ testid: testId }}
|
|
77
|
+
defaultDate={invalidDate}
|
|
78
|
+
pickerId="date-picker-invalid-date"
|
|
79
|
+
/>
|
|
80
|
+
)
|
|
81
|
+
}).not.toThrow()
|
|
82
|
+
|
|
83
|
+
const kit = screen.getByTestId(testId)
|
|
84
|
+
expect(kit).not.toHaveAttribute('data-default-value')
|
|
85
|
+
})
|
|
86
|
+
|
|
87
|
+
test('omits data-default-value when defaultDate is constructed from undefined', () => {
|
|
88
|
+
const testId = 'datepicker-undefined-date'
|
|
89
|
+
const invalidDate = new Date(undefined + 'T00:00')
|
|
90
|
+
|
|
91
|
+
render(
|
|
92
|
+
<DatePicker
|
|
93
|
+
data={{ testid: testId }}
|
|
94
|
+
defaultDate={invalidDate}
|
|
95
|
+
pickerId="date-picker-undefined-date"
|
|
96
|
+
/>
|
|
97
|
+
)
|
|
98
|
+
|
|
99
|
+
const kit = screen.getByTestId(testId)
|
|
100
|
+
expect(kit).not.toHaveAttribute('data-default-value')
|
|
101
|
+
})
|
|
102
|
+
|
|
43
103
|
test('inLine alone adds inline-date-picker class and inline control icons, not the calendar icon', () => {
|
|
44
104
|
const testId = 'datepicker-inline-only'
|
|
45
105
|
render(
|
|
@@ -278,7 +278,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
278
278
|
// Default Date + Min/Max Date Initialization Helper Functions section ----/
|
|
279
279
|
const toDateObject = (dateValue: any): Date | null => {
|
|
280
280
|
if (!dateValue) return null
|
|
281
|
-
if (dateValue instanceof Date)
|
|
281
|
+
if (dateValue instanceof Date) {
|
|
282
|
+
return isNaN(dateValue.getTime()) ? null : dateValue
|
|
283
|
+
}
|
|
282
284
|
if (typeof dateValue === 'string') {
|
|
283
285
|
const parsed = new Date(dateValue)
|
|
284
286
|
return isNaN(parsed.getTime()) ? null : parsed
|
|
@@ -21,58 +21,6 @@ import {
|
|
|
21
21
|
handleClickOutside,
|
|
22
22
|
} from "./utilities";
|
|
23
23
|
|
|
24
|
-
function serializeDropdownFilterResetDefault(
|
|
25
|
-
variant: "default" | "subtle" | "quickpick" | undefined,
|
|
26
|
-
multiSelect: boolean,
|
|
27
|
-
defaultValue: GenericObject | GenericObject[] | string | undefined,
|
|
28
|
-
dropdownOptions: GenericObject[] | GenericObject | undefined,
|
|
29
|
-
): string | undefined {
|
|
30
|
-
const optionList: GenericObject[] = Array.isArray(dropdownOptions)
|
|
31
|
-
? dropdownOptions
|
|
32
|
-
: [];
|
|
33
|
-
const optionDefaultId = (option: GenericObject | undefined): string | undefined => {
|
|
34
|
-
if (!option) return undefined;
|
|
35
|
-
|
|
36
|
-
const id = option.id;
|
|
37
|
-
if (id != null && id !== "") return String(id);
|
|
38
|
-
|
|
39
|
-
const matched = optionList.find((listOption: GenericObject) => (
|
|
40
|
-
(option.value != null && listOption.value === option.value) ||
|
|
41
|
-
(option.label != null && listOption.label === option.label)
|
|
42
|
-
));
|
|
43
|
-
|
|
44
|
-
if (matched?.id != null && matched.id !== "") return String(matched.id);
|
|
45
|
-
return undefined;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
if (variant === "quickpick") {
|
|
49
|
-
if (typeof defaultValue === "string" && defaultValue) {
|
|
50
|
-
const matched = optionList.find(
|
|
51
|
-
(opt: GenericObject) => opt.label?.toLowerCase() === defaultValue.toLowerCase()
|
|
52
|
-
);
|
|
53
|
-
if (matched?.id != null && matched.id !== "") return String(matched.id);
|
|
54
|
-
}
|
|
55
|
-
return undefined;
|
|
56
|
-
}
|
|
57
|
-
if (multiSelect) {
|
|
58
|
-
const arr = Array.isArray(defaultValue)
|
|
59
|
-
? defaultValue
|
|
60
|
-
: defaultValue && typeof defaultValue === "object" && Object.keys(defaultValue).length
|
|
61
|
-
? [defaultValue as GenericObject]
|
|
62
|
-
: [];
|
|
63
|
-
if (!arr.length) return undefined;
|
|
64
|
-
const ids = arr
|
|
65
|
-
.map((v) => optionDefaultId(v as GenericObject))
|
|
66
|
-
.filter((id) => id != null && id !== "");
|
|
67
|
-
return ids.length ? ids.join(",") : undefined;
|
|
68
|
-
}
|
|
69
|
-
if (defaultValue && typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
|
|
70
|
-
const id = optionDefaultId(defaultValue as GenericObject);
|
|
71
|
-
if (id) return id;
|
|
72
|
-
}
|
|
73
|
-
return undefined;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
24
|
type CustomQuickPickDate = {
|
|
77
25
|
label: string;
|
|
78
26
|
value: string[] | { timePeriod: string; amount: number };
|
|
@@ -209,11 +157,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
|
209
157
|
initialSelected
|
|
210
158
|
);
|
|
211
159
|
|
|
212
|
-
const filterResetDefaultSerialized = useMemo(
|
|
213
|
-
() => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
|
|
214
|
-
[variant, multiSelect, defaultValue, dropdownOptions]
|
|
215
|
-
);
|
|
216
|
-
|
|
217
160
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
218
161
|
const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
|
|
219
162
|
const [hasContainerSubcomponent, setHasContainerSubcomponent] =
|
|
@@ -489,7 +432,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
|
489
432
|
<div {...ariaProps}
|
|
490
433
|
{...dataProps}
|
|
491
434
|
{...htmlProps}
|
|
492
|
-
{...(filterResetDefaultSerialized ? { "data-default-value": filterResetDefaultSerialized } : {})}
|
|
493
435
|
className={classes}
|
|
494
436
|
id={id}
|
|
495
437
|
ref={outerDivRef}
|
|
@@ -12,9 +12,7 @@
|
|
|
12
12
|
<% end %>
|
|
13
13
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
|
14
14
|
<input
|
|
15
|
-
<% if input_default_value.present? %>
|
|
16
15
|
data-default-value="<%= input_default_value %>"
|
|
17
|
-
<% end %>
|
|
18
16
|
data-dropdown-selected-option
|
|
19
17
|
name="<%= object.name %><%= '[]' if object.multi_select %>"
|
|
20
18
|
style="display: none"
|
|
@@ -51,7 +51,6 @@ test('generated default kit and classname', () => {
|
|
|
51
51
|
const kit = screen.getByTestId(testId)
|
|
52
52
|
expect(kit).toBeInTheDocument()
|
|
53
53
|
expect(kit).toHaveClass('pb_dropdown_default')
|
|
54
|
-
expect(kit).not.toHaveAttribute('data-default-value')
|
|
55
54
|
})
|
|
56
55
|
|
|
57
56
|
test('generated default Trigger and Container when none passed in', () => {
|
|
@@ -434,16 +433,12 @@ test("defaultValue works with multiSelect", () => {
|
|
|
434
433
|
render(
|
|
435
434
|
<Dropdown
|
|
436
435
|
data={{ testid: testId }}
|
|
437
|
-
defaultValue={[
|
|
438
|
-
{ label: options[0].label, value: options[0].value },
|
|
439
|
-
{ label: options[2].label, value: options[2].value },
|
|
440
|
-
]}
|
|
436
|
+
defaultValue={[options[0], options[2]]}
|
|
441
437
|
multiSelect
|
|
442
438
|
options={options}
|
|
443
439
|
/>
|
|
444
440
|
)
|
|
445
441
|
const kit = screen.getByTestId(testId)
|
|
446
|
-
expect(kit).toHaveAttribute("data-default-value", "United-states,pakistan")
|
|
447
442
|
expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
|
|
448
443
|
const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
|
|
449
444
|
const firstOpt = options[0].label
|
|
@@ -504,7 +499,6 @@ test("quickpick variant accepts string defaultValue", () => {
|
|
|
504
499
|
const trigger = kit.querySelector('.pb_dropdown_trigger')
|
|
505
500
|
|
|
506
501
|
expect(trigger).toHaveTextContent("This Month")
|
|
507
|
-
expect(kit).toHaveAttribute("data-default-value", "quickpick-this-month")
|
|
508
502
|
})
|
|
509
503
|
|
|
510
504
|
test("quickpick attaches _dropdownRef to DOM element when id is provided", () => {
|
|
@@ -50,18 +50,9 @@ module Playbook
|
|
|
50
50
|
def validation_data
|
|
51
51
|
fields = input_options[:data] || {}
|
|
52
52
|
fields[:message] = validation_message unless validation_message.blank?
|
|
53
|
-
dv = filter_reset_default_value
|
|
54
|
-
fields[:default_value] = dv if dv.present?
|
|
55
53
|
fields
|
|
56
54
|
end
|
|
57
55
|
|
|
58
|
-
def filter_reset_default_value
|
|
59
|
-
s = selected
|
|
60
|
-
return if s.blank?
|
|
61
|
-
|
|
62
|
-
s.join(",")
|
|
63
|
-
end
|
|
64
|
-
|
|
65
56
|
# Same resolved id as the native +<select>+ (+all_attributes[:id]+) for label +for+.
|
|
66
57
|
def select_input_id
|
|
67
58
|
all_attributes[:id].presence
|
|
@@ -121,18 +121,9 @@ module Playbook
|
|
|
121
121
|
fields[:message] = validation_message unless validation_message.blank?
|
|
122
122
|
fields[:pb_input_mask] = true if mask
|
|
123
123
|
fields[:pb_emoji_mask] = true if emoji_mask
|
|
124
|
-
dv = filter_reset_default_value
|
|
125
|
-
fields[:default_value] = dv if dv.present?
|
|
126
124
|
fields
|
|
127
125
|
end
|
|
128
126
|
|
|
129
|
-
def filter_reset_default_value
|
|
130
|
-
return if value.nil?
|
|
131
|
-
return if value.is_a?(String) && value.empty?
|
|
132
|
-
|
|
133
|
-
value.to_s
|
|
134
|
-
end
|
|
135
|
-
|
|
136
127
|
def error_class
|
|
137
128
|
error ? " error" : ""
|
|
138
129
|
end
|
|
@@ -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-DF0MuVPf.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DsBJM_F3.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};
|