playbook_ui 16.9.0 → 16.10.0.pre.rc.0
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 +3 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +18 -10
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.jsx +15 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_asc.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_playground.json +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/kit.schema.json +8 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +20 -19
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +9 -11
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -24
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.json +4 -1
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +38 -0
- data/dist/chunks/{_pb_line_graph-B870s9g1.js → _pb_line_graph-DxHutusS.js} +1 -1
- data/dist/chunks/_typeahead-DoLAfwVt.js +5 -0
- data/dist/chunks/{globalProps-BInmh-C7.js → globalProps-D2_gFcf5.js} +1 -1
- data/dist/chunks/lib-C6NzIorw.js +29 -0
- data/dist/chunks/vendor.js +4 -4
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +2 -0
- data/lib/playbook/version.rb +2 -2
- metadata +9 -6
- data/dist/chunks/_typeahead-jMN-A0_C.js +0 -5
- data/dist/chunks/lib-CVYIIiwI.js +0 -29
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fbc8ab8a2cb4410a11719212ed4dd8808b3de275ae738263a157c700f2124bee
|
|
4
|
+
data.tar.gz: 6c12f43c0557d53ddc4bea574d6312893883ea55886623a09f2d46e5180693ef
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 10b8dff1e91a51f136767f109b0cf688a0b6356505316876adabebd3bac28324fc3c1c11be147f888d6532abd8818fba0f7e83844dc4dbd96a3e8aea88cab265
|
|
7
|
+
data.tar.gz: ba68c30c290c2a3a77324e775703c272157c3cecfb1e321d78fb620acc5b1f3a42e36ccb9e5d6ec706eb7cef1c2584efc940ad5cd61d89ffff91c378b3bba7ae
|
|
@@ -87,6 +87,7 @@ type DatePickerProps = {
|
|
|
87
87
|
thisRangesEndToday?: boolean,
|
|
88
88
|
timeFormat?: string,
|
|
89
89
|
type?: string,
|
|
90
|
+
yearAscending?: boolean,
|
|
90
91
|
yearRange?: number[],
|
|
91
92
|
controlsStartId?: string,
|
|
92
93
|
controlsEndId?: string,
|
|
@@ -140,6 +141,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
140
141
|
showTimezone = false,
|
|
141
142
|
staticPosition = true,
|
|
142
143
|
thisRangesEndToday = false,
|
|
144
|
+
yearAscending = false,
|
|
143
145
|
yearRange = [1900, 2100],
|
|
144
146
|
controlsStartId,
|
|
145
147
|
controlsEndId,
|
|
@@ -199,6 +201,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
|
|
199
201
|
showTimezone,
|
|
200
202
|
staticPosition,
|
|
201
203
|
thisRangesEndToday,
|
|
204
|
+
yearAscending,
|
|
202
205
|
yearRange,
|
|
203
206
|
controlsStartId,
|
|
204
207
|
controlsEndId,
|
|
@@ -89,6 +89,8 @@ module Playbook
|
|
|
89
89
|
default: ""
|
|
90
90
|
prop :cursor, type: Playbook::Props::String,
|
|
91
91
|
default: "pointer"
|
|
92
|
+
prop :year_ascending, type: Playbook::Props::Boolean,
|
|
93
|
+
default: false
|
|
92
94
|
|
|
93
95
|
def classname
|
|
94
96
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
|
@@ -122,6 +124,7 @@ module Playbook
|
|
|
122
124
|
staticPosition: static_position,
|
|
123
125
|
thisRangesEndToday: this_ranges_end_today,
|
|
124
126
|
yearRange: year_range,
|
|
127
|
+
yearAscending: year_ascending,
|
|
125
128
|
controlsStartId: controls_start_id,
|
|
126
129
|
controlsEndId: controls_end_id,
|
|
127
130
|
syncStartWith: sync_start_with,
|
|
@@ -7,7 +7,10 @@ import timeSelectPlugin from './plugins/timeSelect'
|
|
|
7
7
|
import quickPickPlugin from './plugins/quickPick'
|
|
8
8
|
import { getAllIcons } from '../utilities/icons/allicons';
|
|
9
9
|
|
|
10
|
-
const angleDown = getAllIcons()
|
|
10
|
+
const { angleDown, angleLeft, angleRight } = getAllIcons()
|
|
11
|
+
const angleDownString = angleDown.string
|
|
12
|
+
const angleLeftString = angleLeft.string
|
|
13
|
+
const angleRightString = angleRight.string
|
|
11
14
|
|
|
12
15
|
const getPositionElement = (element: string | Element) => {
|
|
13
16
|
return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
|
|
@@ -32,6 +35,7 @@ type DatePickerConfig = {
|
|
|
32
35
|
thisRangesEndToday?: boolean,
|
|
33
36
|
timeCaption?: string,
|
|
34
37
|
timeFormat?: string,
|
|
38
|
+
yearAscending?: boolean,
|
|
35
39
|
yearRange: number[],
|
|
36
40
|
controlsStartId?: string,
|
|
37
41
|
controlsEndId?: string,
|
|
@@ -70,6 +74,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
70
74
|
thisRangesEndToday = false,
|
|
71
75
|
timeCaption = 'Select Time',
|
|
72
76
|
timeFormat = 'at h:i K',
|
|
77
|
+
yearAscending,
|
|
73
78
|
yearRange,
|
|
74
79
|
controlsStartId,
|
|
75
80
|
controlsEndId,
|
|
@@ -365,7 +370,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
365
370
|
maxDate: effectiveMaxDate,
|
|
366
371
|
minDate: effectiveMinDate,
|
|
367
372
|
mode,
|
|
368
|
-
nextArrow:
|
|
373
|
+
nextArrow: `<div style="height: 14px;">${angleRightString}</div>`,
|
|
369
374
|
onOpen: [(_selectedDates, _dateStr, fp) => {
|
|
370
375
|
// If defaultDate was out of range of a dev set min/max date, restore it when calendar opens (in situation where the input was manually cleared or the calendar was closed without selection)
|
|
371
376
|
if (hasOutOfRangeDefault) {
|
|
@@ -437,7 +442,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
437
442
|
plugins: setPlugins(thisRangesEndToday, customQuickPickDates),
|
|
438
443
|
position,
|
|
439
444
|
positionElement: getPositionElement(positionElement),
|
|
440
|
-
prevArrow:
|
|
445
|
+
prevArrow: `<div style="height: 14px;">${angleLeftString}</div>`,
|
|
441
446
|
static: staticPosition,
|
|
442
447
|
})
|
|
443
448
|
|
|
@@ -515,8 +520,14 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
515
520
|
|
|
516
521
|
// create html option tags for desired years
|
|
517
522
|
let years = ''
|
|
518
|
-
|
|
519
|
-
|
|
523
|
+
if (yearAscending) {
|
|
524
|
+
for (let year = setMinYear; year <= setMaxYear; year++) {
|
|
525
|
+
years += `<option value="${year}">${year}</option>`
|
|
526
|
+
}
|
|
527
|
+
} else {
|
|
528
|
+
for (let year = setMaxYear; year >= setMinYear; year--) {
|
|
529
|
+
years += `<option value="${year}">${year}</option>`
|
|
530
|
+
}
|
|
520
531
|
}
|
|
521
532
|
|
|
522
533
|
// variablize each dropdown selector
|
|
@@ -651,12 +662,9 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
|
|
|
651
662
|
}
|
|
652
663
|
|
|
653
664
|
// Adding dropdown icons to year and month select
|
|
654
|
-
dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${
|
|
665
|
+
dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDownString}</i>`)
|
|
655
666
|
if (picker.monthElements[0].parentElement) {
|
|
656
|
-
return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${
|
|
657
|
-
// if (picker.weekElements[0].parentElement){
|
|
658
|
-
// return picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
|
|
659
|
-
// }
|
|
667
|
+
return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDownString}</i>`)}
|
|
660
668
|
|
|
661
669
|
// Remove readonly attribute for validation and or text input
|
|
662
670
|
if (allowInput){
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= pb_rails("date_picker", props: { picker_id: "date-picker-date-asc", year_ascending: true}) %>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import DatePicker from '../_date_picker'
|
|
4
|
+
|
|
5
|
+
const DatePickerYearAsc = (props) => (
|
|
6
|
+
<div>
|
|
7
|
+
<DatePicker
|
|
8
|
+
pickerId="date-picker-date-asc"
|
|
9
|
+
yearAscending
|
|
10
|
+
{...props}
|
|
11
|
+
/>
|
|
12
|
+
</div>
|
|
13
|
+
)
|
|
14
|
+
|
|
15
|
+
export default DatePickerYearAsc
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`yearAscending`/`year_ascending` is a boolean prop that if set to true, will render the years in the year dropdown in chronological order. This prop is set to false by default.
|
|
@@ -23,6 +23,7 @@ examples:
|
|
|
23
23
|
- date_picker_flatpickr_methods: Flatpickr Methods
|
|
24
24
|
- date_picker_hooks: Hooks
|
|
25
25
|
- date_picker_year_range: Year Range
|
|
26
|
+
- date_picker_year_asc: Year Ascending
|
|
26
27
|
- date_picker_anti_patterns: Anti-Patterns
|
|
27
28
|
- date_picker_margin_bottom: Margin Bottom
|
|
28
29
|
- date_picker_inline: Inline
|
|
@@ -58,6 +59,7 @@ examples:
|
|
|
58
59
|
- date_picker_flatpickr_methods: Flatpickr Methods
|
|
59
60
|
- date_picker_hooks: Hooks
|
|
60
61
|
- date_picker_year_range: Year Range
|
|
62
|
+
- date_picker_year_asc: Year Ascending
|
|
61
63
|
- date_picker_margin_bottom: Margin Bottom
|
|
62
64
|
- date_picker_inline: Inline
|
|
63
65
|
- date_picker_month_and_year: Month & Year Only
|
|
@@ -30,3 +30,4 @@ export { default as DatePickerRangePattern } from './_date_picker_range_pattern'
|
|
|
30
30
|
export { default as DatePickerAndDropdownRange } from './_date_picker_and_dropdown_range.jsx'
|
|
31
31
|
export { default as DatePickerRequiredIndicator } from "./_date_picker_required_indicator.jsx";
|
|
32
32
|
export { default as DatePickerDialogSubmission } from "./_date_picker_dialog_submission.jsx";
|
|
33
|
+
export { default as DatePickerYearAsc } from './_date_picker_year_asc.jsx'
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
|
33
33
|
|
|
34
34
|
<%= form.actions do |action| %>
|
|
35
|
-
<%= action.submit props: { text: "Apply", data: { disable_with: "
|
|
35
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe },}%>
|
|
36
36
|
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
|
37
37
|
<% end %>
|
|
38
38
|
<% end %>
|
|
@@ -131,23 +131,24 @@
|
|
|
131
131
|
%>
|
|
132
132
|
|
|
133
133
|
<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
|
|
134
|
-
<%= form.typeahead :
|
|
135
|
-
<%= form.text_field :
|
|
136
|
-
<%= form.text_field :
|
|
137
|
-
<%= form.phone_number_field :
|
|
138
|
-
<%= form.email_field :
|
|
139
|
-
<%= form.number_field :
|
|
140
|
-
<%= form.search_field :
|
|
141
|
-
<%= form.password_field :
|
|
142
|
-
<%= form.url_field :
|
|
143
|
-
<%= form.text_area :
|
|
144
|
-
<%= form.text_area :
|
|
145
|
-
|
|
146
|
-
<%= form.
|
|
147
|
-
<%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
148
|
-
<%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Custom Date Picker Label", required: true, required_indicator: true } %>
|
|
134
|
+
<%= form.typeahead :example_typeahead_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
135
|
+
<%= form.text_field :example_text_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
136
|
+
<%= form.text_field :example_text_field_required_indicator_custom, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
|
|
137
|
+
<%= form.phone_number_field :example_phone_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
138
|
+
<%= form.email_field :example_email_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
139
|
+
<%= form.number_field :example_number_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
140
|
+
<%= form.search_field :example_search_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
141
|
+
<%= form.password_field :example_password_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
142
|
+
<%= form.url_field :example_url_field_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
143
|
+
<%= form.text_area :example_text_area_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
144
|
+
<%= form.text_area :example_text_area_required_indicator_custom, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
145
|
+
<%= form.dropdown_field :example_dropdown_required_indicator, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
|
|
146
|
+
<%= form.dropdown_field :example_dropdown_required_indicator_multi, props: { label: "Dropdown Custom Label", options: example_dropdown_options, multi_select: true, required: true, required_indicator: true } %>
|
|
149
147
|
<%= form.select :example_select_required_indicator, [["Yes", 1], ["No", 2]], props: { label: true, required: true, required_indicator: true } %>
|
|
150
|
-
<%= form.select :
|
|
148
|
+
<%= form.select :example_select_required_indicator_custom, [["Yes", 1], ["No", 2]], props: { label: "Example Select Field", required: true, required_indicator: true } %>
|
|
149
|
+
<%# form.check_box :example_checkbox_required_indicator, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
|
|
150
|
+
<%= form.date_picker :example_date_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
151
|
+
<%= form.date_picker :example_date_picker_required_indicator_custom, props: { label: "Date Picker Custom Label", required: true, required_indicator: true } %>
|
|
151
152
|
<%= form.multi_level_select :example_multi_level_select_required_indicator, props: {
|
|
152
153
|
label: true,
|
|
153
154
|
margin_y: 'sm',
|
|
@@ -156,14 +157,14 @@
|
|
|
156
157
|
tree_data: tree_data
|
|
157
158
|
} %>
|
|
158
159
|
<%= form.multi_level_select :example_multi_level_select_required_indicator_custom, props: {
|
|
159
|
-
label: "
|
|
160
|
+
label: "Multi Level Select Custom Label",
|
|
160
161
|
margin_y: 'sm',
|
|
161
162
|
required: true,
|
|
162
163
|
required_indicator: true,
|
|
163
164
|
tree_data: tree_data
|
|
164
165
|
} %>
|
|
165
|
-
<%= form.
|
|
166
|
-
<%= form.
|
|
166
|
+
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
167
|
+
<%= form.time_picker :example_time_picker_required_indicator_custom, props: { label: "Time Picker Custom Label", required: true, required_indicator: true } %>
|
|
167
168
|
|
|
168
169
|
<%= form.actions do |action| %>
|
|
169
170
|
<%= action.submit %>
|
|
@@ -19,18 +19,16 @@ const PopoverWithButton = (props) => {
|
|
|
19
19
|
onClick={handleTogglePopover}
|
|
20
20
|
variant="secondary"
|
|
21
21
|
>
|
|
22
|
-
<Flex
|
|
22
|
+
<Flex
|
|
23
|
+
align="center"
|
|
24
|
+
gap="xxs"
|
|
25
|
+
>
|
|
23
26
|
{"Filter By"}
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
fixedWidth
|
|
30
|
-
icon="angle-down"
|
|
31
|
-
margin-left="xxs"
|
|
32
|
-
/>
|
|
33
|
-
</Flex>
|
|
27
|
+
<Icon
|
|
28
|
+
fixedWidth
|
|
29
|
+
flip={showPopover ? "vertical" : "none"}
|
|
30
|
+
icon="angle-down"
|
|
31
|
+
/>
|
|
34
32
|
</Flex>
|
|
35
33
|
</Button>
|
|
36
34
|
)
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
|
|
3
|
-
import { getAllIcons } from "../../utilities/icons/allicons"
|
|
4
|
-
|
|
5
3
|
import Flex from '../../pb_flex/_flex'
|
|
6
4
|
import PbReactPopover from '../../pb_popover/_popover'
|
|
7
5
|
import Button from '../../pb_button/_button'
|
|
@@ -67,8 +65,6 @@ const toolbarDropdownItems = [
|
|
|
67
65
|
},
|
|
68
66
|
]
|
|
69
67
|
|
|
70
|
-
const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
|
|
71
|
-
|
|
72
68
|
const handleTogglePopover = () => {
|
|
73
69
|
setShowPopover(!showPopover)
|
|
74
70
|
}
|
|
@@ -92,16 +88,12 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
|
|
|
92
88
|
size="lg"
|
|
93
89
|
/>
|
|
94
90
|
<div>{text}</div>
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
fixedWidth
|
|
102
|
-
margin-left="xs"
|
|
103
|
-
/>
|
|
104
|
-
</Flex>
|
|
91
|
+
<Icon
|
|
92
|
+
fixedWidth
|
|
93
|
+
flip={showPopover ? "vertical" : "none"}
|
|
94
|
+
icon="angle-down"
|
|
95
|
+
margin-left="xs"
|
|
96
|
+
/>
|
|
105
97
|
</Flex>
|
|
106
98
|
);
|
|
107
99
|
}
|
|
@@ -127,16 +119,12 @@ const popoverReference = (
|
|
|
127
119
|
size="lg"
|
|
128
120
|
/>
|
|
129
121
|
<div>Paragraph</div>
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
fixedWidth
|
|
137
|
-
margin-left="xs"
|
|
138
|
-
/>
|
|
139
|
-
</Flex>
|
|
122
|
+
<Icon
|
|
123
|
+
fixedWidth
|
|
124
|
+
flip={showPopover ? "vertical" : "none"}
|
|
125
|
+
icon="angle-down"
|
|
126
|
+
margin-left="xs"
|
|
127
|
+
/>
|
|
140
128
|
</Flex>
|
|
141
129
|
)
|
|
142
130
|
)
|
|
@@ -147,6 +147,36 @@ const angleDown = (
|
|
|
147
147
|
</svg>
|
|
148
148
|
)
|
|
149
149
|
|
|
150
|
+
const angleLeft = (
|
|
151
|
+
<svg
|
|
152
|
+
fill="none"
|
|
153
|
+
height="25"
|
|
154
|
+
viewBox="0 0 31 25"
|
|
155
|
+
width="31"
|
|
156
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
157
|
+
>
|
|
158
|
+
<path
|
|
159
|
+
d="M10.6074 11.3086L18.1074 3.85547C18.5293 3.38672 19.2324 3.38672 19.7012 3.85547C20.123 4.27734 20.123 4.98047 19.7012 5.40234L12.9512 12.1055L19.6543 18.8555C20.123 19.2773 20.123 19.9805 19.6543 20.4023C19.2324 20.8711 18.5293 20.8711 18.1074 20.4023L10.6074 12.9023C10.1387 12.4805 10.1387 11.7773 10.6074 11.3086Z"
|
|
160
|
+
fill="#242B42"
|
|
161
|
+
/>
|
|
162
|
+
</svg>
|
|
163
|
+
)
|
|
164
|
+
|
|
165
|
+
const angleRight = (
|
|
166
|
+
<svg
|
|
167
|
+
fill="none"
|
|
168
|
+
height="25"
|
|
169
|
+
viewBox="0 0 31 25"
|
|
170
|
+
width="31"
|
|
171
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
172
|
+
>
|
|
173
|
+
<path
|
|
174
|
+
d="M21.2012 11.3086C21.623 11.7773 21.623 12.4805 21.2012 12.9023L13.7012 20.4023C13.2324 20.8711 12.5293 20.8711 12.1074 20.4023C11.6387 19.9805 11.6387 19.2773 12.1074 18.8555L18.8105 12.1523L12.1074 5.40234C11.6387 4.98047 11.6387 4.27734 12.1074 3.85547C12.5293 3.38672 13.2324 3.38672 13.6543 3.85547L21.2012 11.3086Z"
|
|
175
|
+
fill="#242B42"
|
|
176
|
+
/>
|
|
177
|
+
</svg>
|
|
178
|
+
)
|
|
179
|
+
|
|
150
180
|
export const getAllIcons = () => {
|
|
151
181
|
|
|
152
182
|
return {
|
|
@@ -177,6 +207,14 @@ export const getAllIcons = () => {
|
|
|
177
207
|
angleDown: {
|
|
178
208
|
icon: angleDown,
|
|
179
209
|
string: ReactDOMServer.renderToStaticMarkup(angleDown)
|
|
210
|
+
},
|
|
211
|
+
angleLeft: {
|
|
212
|
+
icon: angleLeft,
|
|
213
|
+
string: ReactDOMServer.renderToStaticMarkup(angleLeft)
|
|
214
|
+
},
|
|
215
|
+
angleRight: {
|
|
216
|
+
icon: angleRight,
|
|
217
|
+
string: ReactDOMServer.renderToStaticMarkup(angleRight)
|
|
180
218
|
}
|
|
181
219
|
}
|
|
182
220
|
}
|
|
@@ -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-D2_gFcf5.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-C6NzIorw.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};
|