playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1081exporttypes1609
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_avatar/_avatar.d.ts +20 -0
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.d.ts +21 -0
- data/app/pb_kits/playbook/pb_background/_background.d.ts +33 -0
- data/app/pb_kits/playbook/pb_badge/_badge.d.ts +24 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.d.ts +35 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +32 -36
- data/app/pb_kits/playbook/pb_body/_body.d.ts +24 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.d.ts +12 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.d.ts +13 -0
- data/app/pb_kits/playbook/pb_button/_button.d.ts +37 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.d.ts +17 -0
- data/app/pb_kits/playbook/pb_caption/_caption.d.ts +20 -0
- data/app/pb_kits/playbook/pb_card/_card.d.ts +42 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.d.ts +24 -0
- data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.d.ts +2 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.d.ts +35 -0
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +63 -67
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.d.ts +21 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.d.ts +29 -0
- data/app/pb_kits/playbook/pb_collapsible/_helper_functions.d.ts +2 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.d.ts +7 -0
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.d.ts +10 -0
- data/app/pb_kits/playbook/pb_collapsible/context.d.ts +3 -0
- data/app/pb_kits/playbook/pb_collapsible/useCollapsible.d.ts +2 -0
- data/app/pb_kits/playbook/pb_contact/_contact.d.ts +13 -0
- data/app/pb_kits/playbook/pb_currency/_currency.d.ts +24 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.d.ts +2 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.d.ts +3 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.d.ts +3 -0
- data/app/pb_kits/playbook/pb_dashboard/themeTypes.d.ts +40 -0
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.d.ts +23 -0
- data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.d.ts +43 -0
- data/app/pb_kits/playbook/pb_date/_date.d.ts +18 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.d.ts +50 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.d.ts +23 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.d.ts +18 -0
- data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.d.ts +44 -0
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.d.ts +13 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.d.ts +10 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.d.ts +13 -0
- data/app/pb_kits/playbook/pb_date_time/_date_time.d.ts +18 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.d.ts +10 -0
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.d.ts +10 -0
- data/app/pb_kits/playbook/pb_detail/_detail.d.ts +20 -0
- data/app/pb_kits/playbook/pb_dialog/_close_icon.d.ts +5 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.d.ts +68 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog_context.d.ts +2 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.d.ts +8 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.d.ts +20 -0
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.d.ts +19 -0
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.d.ts +10 -0
- data/app/pb_kits/playbook/pb_enhanced_element/element_observer.d.ts +17 -0
- data/app/pb_kits/playbook/pb_enhanced_element/index.d.ts +17 -0
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.d.ts +16 -0
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.d.ts +10 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.d.ts +10 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.d.ts +14 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.d.ts +14 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.d.ts +11 -0
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.d.ts +8 -0
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.d.ts +18 -0
- data/app/pb_kits/playbook/pb_filter/Filter/index.d.ts +8 -0
- data/app/pb_kits/playbook/pb_filter/_filter.d.ts +1 -0
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.d.ts +18 -0
- data/app/pb_kits/playbook/pb_flex/_flex.d.ts +24 -0
- data/app/pb_kits/playbook/pb_flex/_flex_item.d.ts +14 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.d.ts +12 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.d.ts +20 -0
- data/app/pb_kits/playbook/pb_gauge/_gauge.d.ts +31 -0
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +46 -57
- data/app/pb_kits/playbook/pb_hashtag/_hashtag.d.ts +17 -0
- data/app/pb_kits/playbook/pb_highlight/_highlight.d.ts +14 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.d.ts +23 -0
- data/app/pb_kits/playbook/pb_icon/_icon.d.ts +29 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.d.ts +16 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.d.ts +18 -0
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.d.ts +14 -0
- data/app/pb_kits/playbook/pb_image/_image.d.ts +20 -0
- data/app/pb_kits/playbook/pb_kit/dateTime.d.ts +67 -0
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.d.ts +15 -0
- data/app/pb_kits/playbook/pb_label_value/_label_value.d.ts +19 -0
- data/app/pb_kits/playbook/pb_layout/_layout.d.ts +48 -0
- data/app/pb_kits/playbook/pb_legend/_legend.d.ts +14 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.d.ts +12 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.d.ts +10 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.d.ts +11 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.d.ts +9 -0
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.d.ts +16 -0
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.d.ts +22 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.d.ts +45 -0
- data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.d.ts +2 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.d.ts +3 -0
- data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.d.ts +6 -0
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.d.ts +35 -0
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +34 -39
- data/app/pb_kits/playbook/pb_list/_list.d.ts +22 -0
- data/app/pb_kits/playbook/pb_list/_list_item.d.ts +13 -0
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.d.ts +13 -0
- data/app/pb_kits/playbook/pb_map/_map.d.ts +30 -0
- data/app/pb_kits/playbook/pb_map/_map_controls.d.ts +11 -0
- data/app/pb_kits/playbook/pb_map/_map_custom_button.d.ts +6 -0
- data/app/pb_kits/playbook/pb_map/pbMapTheme.d.ts +20 -0
- data/app/pb_kits/playbook/pb_message/_message.d.ts +33 -0
- data/app/pb_kits/playbook/pb_message/_message_mention.d.ts +13 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.d.ts +33 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.d.ts +25 -0
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.d.ts +20 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.d.ts +16 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_nav/_item.d.ts +40 -0
- data/app/pb_kits/playbook/pb_nav/_nav.d.ts +23 -0
- data/app/pb_kits/playbook/pb_nav/navTypes.d.ts +22 -0
- data/app/pb_kits/playbook/pb_online_status/_online_status.d.ts +14 -0
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.d.ts +19 -0
- data/app/pb_kits/playbook/pb_person/_person.d.ts +15 -0
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.d.ts +18 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.d.ts +34 -0
- data/app/pb_kits/playbook/pb_pill/_pill.d.ts +16 -0
- data/app/pb_kits/playbook/pb_popover/_popover.d.ts +22 -0
- data/app/pb_kits/playbook/pb_popover/index.d.ts +21 -0
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.d.ts +17 -0
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.d.ts +15 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.d.ts +19 -0
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.d.ts +12 -0
- data/app/pb_kits/playbook/pb_radio/_radio.d.ts +355 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.d.ts +9 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.d.ts +9 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.d.ts +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.d.ts +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.d.ts +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.d.ts +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.d.ts +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.d.ts +31 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.d.ts +2 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/useFocus.d.ts +2 -0
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.d.ts +19 -0
- data/app/pb_kits/playbook/pb_select/_select.d.ts +385 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.d.ts +30 -0
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.d.ts +27 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.d.ts +21 -0
- data/app/pb_kits/playbook/pb_selectable_list/_item.d.ts +20 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.d.ts +17 -0
- data/app/pb_kits/playbook/pb_source/_source.d.ts +17 -0
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.d.ts +14 -0
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.d.ts +10 -0
- data/app/pb_kits/playbook/pb_stat_value/_stat_value.d.ts +9 -0
- data/app/pb_kits/playbook/pb_table/_table.d.ts +24 -0
- data/app/pb_kits/playbook/pb_table/_table_row.d.ts +15 -0
- data/app/pb_kits/playbook/pb_table/index.d.ts +5 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.d.ts +383 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.d.ts +380 -0
- data/app/pb_kits/playbook/pb_textarea/index.d.ts +10 -0
- data/app/pb_kits/playbook/pb_time/_time.d.ts +16 -0
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.d.ts +20 -0
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.d.ts +15 -0
- data/app/pb_kits/playbook/pb_timeline/_item.d.ts +11 -0
- data/app/pb_kits/playbook/pb_timeline/_timeline.d.ts +26 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.d.ts +22 -0
- data/app/pb_kits/playbook/pb_title/_title.d.ts +26 -0
- data/app/pb_kits/playbook/pb_title_count/_title_count.d.ts +18 -0
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.d.ts +16 -0
- data/app/pb_kits/playbook/pb_toggle/_toggle.d.ts +21 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.d.ts +356 -0
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.d.ts +27 -0
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +28 -33
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.d.ts +35 -0
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.d.ts +2 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Control.d.ts +5 -0
- data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.d.ts +2 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MenuList.d.ts +2 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.d.ts +9 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Option.d.ts +2 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.d.ts +2 -0
- data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.d.ts +2 -0
- data/app/pb_kits/playbook/pb_typeahead/index.d.ts +39 -0
- data/app/pb_kits/playbook/pb_user/_user.d.ts +23 -0
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.d.ts +14 -0
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.d.ts +2 -0
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.d.ts +2 -0
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.d.ts +41 -0
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.d.ts +15 -0
- data/app/pb_kits/playbook/utilities/globalProps.d.ts +113 -0
- data/app/pb_kits/playbook/utilities/object.d.ts +1 -0
- data/app/pb_kits/playbook/utilities/props.d.ts +38 -0
- data/app/pb_kits/playbook/utilities/text.d.ts +3 -0
- data/app/pb_kits/playbook/utilities/validEmojiChecker.d.ts +1 -0
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +198 -2
@@ -3,6 +3,8 @@ import classnames from "classnames";
|
|
3
3
|
import HighchartsReact from "highcharts-react-official";
|
4
4
|
import highchartsMore from "highcharts/highcharts-more";
|
5
5
|
|
6
|
+
import Highcharts from "highcharts";
|
7
|
+
|
6
8
|
import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
|
7
9
|
import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
|
8
10
|
import mapColors from "../pb_dashboard/pbChartsColorsHelper";
|
@@ -10,35 +12,35 @@ import { globalProps } from "../utilities/globalProps";
|
|
10
12
|
import { buildAriaProps, buildDataProps } from "../utilities/props";
|
11
13
|
|
12
14
|
type CircleChartProps = {
|
13
|
-
align?: "left" | "right" | "center"
|
14
|
-
aria: { [key: string]: string }
|
15
|
-
chartData?: []
|
16
|
-
children?: Node
|
17
|
-
className?: string
|
18
|
-
colors?: string[]
|
19
|
-
dark?: Boolean
|
20
|
-
data?: Object
|
21
|
-
dataLabelHtml?: string
|
22
|
-
dataLabels?: boolean
|
23
|
-
height?: string
|
24
|
-
id?: string
|
25
|
-
innerSize?: "sm" | "md" | "lg" | "none"
|
26
|
-
legend?: boolean
|
27
|
-
maxPointSize?: number
|
28
|
-
minPointSize?: number
|
29
|
-
rounded?: boolean
|
30
|
-
startAngle?: number
|
31
|
-
style?: string
|
32
|
-
title?: string
|
33
|
-
tooltipHtml: string
|
34
|
-
useHtml?: boolean
|
35
|
-
zMin?: number
|
36
|
-
layout?: "horizontal" | "vertical" | "proximate"
|
37
|
-
verticalAlign?: "top" | "middle" | "bottom"
|
38
|
-
x?: number
|
39
|
-
y?: number
|
40
|
-
borderColor?: string
|
41
|
-
borderWidth?: number
|
15
|
+
align?: "left" | "right" | "center";
|
16
|
+
aria: { [key: string]: string };
|
17
|
+
chartData?: [];
|
18
|
+
children?: Node;
|
19
|
+
className?: string;
|
20
|
+
colors?: string[];
|
21
|
+
dark?: Boolean;
|
22
|
+
data?: Object;
|
23
|
+
dataLabelHtml?: string;
|
24
|
+
dataLabels?: boolean;
|
25
|
+
height?: string;
|
26
|
+
id?: string;
|
27
|
+
innerSize?: "sm" | "md" | "lg" | "none";
|
28
|
+
legend?: boolean;
|
29
|
+
maxPointSize?: number;
|
30
|
+
minPointSize?: number;
|
31
|
+
rounded?: boolean;
|
32
|
+
startAngle?: number;
|
33
|
+
style?: string;
|
34
|
+
title?: string;
|
35
|
+
tooltipHtml: string;
|
36
|
+
useHtml?: boolean;
|
37
|
+
zMin?: number;
|
38
|
+
layout?: "horizontal" | "vertical" | "proximate";
|
39
|
+
verticalAlign?: "top" | "middle" | "bottom";
|
40
|
+
x?: number;
|
41
|
+
y?: number;
|
42
|
+
borderColor?: string;
|
43
|
+
borderWidth?: number;
|
42
44
|
};
|
43
45
|
|
44
46
|
// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
|
@@ -88,11 +90,29 @@ const CircleChart = ({
|
|
88
90
|
}: CircleChartProps) => {
|
89
91
|
const ariaProps = buildAriaProps(aria);
|
90
92
|
const dataProps = buildDataProps(data);
|
93
|
+
highchartsMore(Highcharts);
|
94
|
+
|
95
|
+
const setupTheme = () => {
|
96
|
+
dark
|
97
|
+
? Highcharts.setOptions(highchartsDarkTheme)
|
98
|
+
: Highcharts.setOptions(highchartsTheme);
|
99
|
+
};
|
100
|
+
setupTheme();
|
101
|
+
|
102
|
+
Highcharts.setOptions({
|
103
|
+
tooltip: {
|
104
|
+
headerFormat: null,
|
105
|
+
pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
|
106
|
+
useHTML: useHtml,
|
107
|
+
},
|
108
|
+
});
|
109
|
+
|
91
110
|
const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
|
92
|
-
const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
|
111
|
+
const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
|
112
|
+
innerSizes[size];
|
113
|
+
|
93
114
|
|
94
115
|
const [options, setOptions] = useState({});
|
95
|
-
const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
|
96
116
|
|
97
117
|
useEffect(() => {
|
98
118
|
const formattedChartData = chartData.map((obj: any) => {
|
@@ -149,50 +169,26 @@ const CircleChart = ({
|
|
149
169
|
credits: false,
|
150
170
|
};
|
151
171
|
setOptions({ ...staticOptions });
|
152
|
-
|
153
|
-
const interval = setInterval(() => {
|
154
|
-
if (window.Highcharts) {
|
155
|
-
clearInterval(interval)
|
156
|
-
dark
|
157
|
-
? window.Highcharts.setOptions(highchartsDarkTheme)
|
158
|
-
: window.Highcharts.setOptions(highchartsTheme)
|
159
|
-
|
160
|
-
highchartsMore(window.Highcharts);
|
161
|
-
|
162
|
-
window.Highcharts.setOptions({
|
163
|
-
tooltip: {
|
164
|
-
headerFormat: null,
|
165
|
-
pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
|
166
|
-
useHTML: useHtml,
|
167
|
-
},
|
168
|
-
});
|
169
|
-
|
170
|
-
setIsHighchartsLoaded(true)
|
171
|
-
}
|
172
|
-
}, 0)
|
173
172
|
}, [chartData]);
|
174
173
|
|
174
|
+
|
175
175
|
return (
|
176
176
|
<>
|
177
177
|
{children ? (
|
178
178
|
<div id={`wrapper-circle-chart-${id}`}>
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
options={options}
|
190
|
-
/>
|
191
|
-
}
|
179
|
+
<HighchartsReact
|
180
|
+
containerProps={{
|
181
|
+
className: classnames("pb_circle_chart", globalProps(props)),
|
182
|
+
id: id,
|
183
|
+
...ariaProps,
|
184
|
+
...dataProps,
|
185
|
+
}}
|
186
|
+
highcharts={Highcharts}
|
187
|
+
options={options}
|
188
|
+
/>
|
192
189
|
<div className="pb-circle-chart-block">{children}</div>
|
193
190
|
</div>
|
194
191
|
) : (
|
195
|
-
isHighchartsLoaded &&
|
196
192
|
<HighchartsReact
|
197
193
|
containerProps={{
|
198
194
|
className: classnames("pb_circle_chart", globalProps(props)),
|
@@ -200,7 +196,7 @@ const CircleChart = ({
|
|
200
196
|
...ariaProps,
|
201
197
|
...dataProps,
|
202
198
|
}}
|
203
|
-
highcharts={
|
199
|
+
highcharts={Highcharts}
|
204
200
|
options={options}
|
205
201
|
/>
|
206
202
|
)}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare type CircleIconButtonProps = {
|
3
|
+
aria?: {
|
4
|
+
[key: string]: string;
|
5
|
+
};
|
6
|
+
className?: string;
|
7
|
+
dark?: boolean;
|
8
|
+
data?: {
|
9
|
+
[key: string]: string;
|
10
|
+
};
|
11
|
+
disabled?: boolean;
|
12
|
+
icon: string;
|
13
|
+
id?: string;
|
14
|
+
link?: string;
|
15
|
+
onClick?: React.MouseEventHandler<HTMLElement>;
|
16
|
+
newWindow?: boolean;
|
17
|
+
type?: 'button' | 'submit' | 'reset' | undefined;
|
18
|
+
variant?: 'primary' | 'secondary' | 'link';
|
19
|
+
};
|
20
|
+
declare const CircleIconButton: (props: CircleIconButtonProps) => React.ReactElement;
|
21
|
+
export default CircleIconButton;
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { IconSizes } from "../pb_icon/_icon";
|
3
|
+
declare type CollapsibleProps = {
|
4
|
+
children?: JSX.Element | [] | any;
|
5
|
+
aria?: {
|
6
|
+
[key: string]: string;
|
7
|
+
};
|
8
|
+
className?: string;
|
9
|
+
collapsed?: boolean;
|
10
|
+
data?: object;
|
11
|
+
icon?: string | string[];
|
12
|
+
iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success';
|
13
|
+
iconSize?: IconSizes;
|
14
|
+
onIconClick?: () => void;
|
15
|
+
onClick?: () => void;
|
16
|
+
id?: string;
|
17
|
+
};
|
18
|
+
declare const Collapsible: {
|
19
|
+
({ aria, className, children, collapsed, data, icon, iconColor, iconSize, onIconClick, onClick, id, ...props }: CollapsibleProps): JSX.Element;
|
20
|
+
Main: ({ children, className, cursor, ...props }: {
|
21
|
+
children: React.ReactNode | React.ReactNode[];
|
22
|
+
className?: string;
|
23
|
+
cursor?: string;
|
24
|
+
dark?: boolean;
|
25
|
+
onClick?: () => void;
|
26
|
+
}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
27
|
+
Content: ({ children, className, ...props }: import("./child_kits/CollapsibleContent").CollapsibleContentProps) => JSX.Element;
|
28
|
+
};
|
29
|
+
export default Collapsible;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
export declare type CollapsibleContentProps = {
|
3
|
+
children?: React.ReactNode[] | React.ReactNode | string;
|
4
|
+
className?: string;
|
5
|
+
};
|
6
|
+
declare const CollapsibleContent: ({ children, className, ...props }: CollapsibleContentProps) => JSX.Element;
|
7
|
+
export default CollapsibleContent;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare type CollapsibleMainProps = {
|
3
|
+
children: React.ReactNode[] | React.ReactNode;
|
4
|
+
className?: string;
|
5
|
+
cursor?: string;
|
6
|
+
dark?: boolean;
|
7
|
+
onClick?: () => void;
|
8
|
+
};
|
9
|
+
declare const CollapsibleMain: ({ children, className, cursor, ...props }: CollapsibleMainProps) => React.ReactElement;
|
10
|
+
export default CollapsibleMain;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
declare type ContactProps = {
|
2
|
+
aria?: {
|
3
|
+
[key: string]: string;
|
4
|
+
};
|
5
|
+
className?: string | string[];
|
6
|
+
contactDetail?: string;
|
7
|
+
contactType?: string;
|
8
|
+
contactValue: string;
|
9
|
+
data?: object;
|
10
|
+
id?: string;
|
11
|
+
};
|
12
|
+
declare const Contact: (props: ContactProps) => JSX.Element;
|
13
|
+
export default Contact;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
declare type CurrencyProps = {
|
2
|
+
abbreviate?: boolean;
|
3
|
+
align?: 'center' | 'left' | 'right';
|
4
|
+
amount: string;
|
5
|
+
aria?: {
|
6
|
+
[key: string]: string;
|
7
|
+
};
|
8
|
+
className?: string;
|
9
|
+
dark?: boolean;
|
10
|
+
data?: {
|
11
|
+
[key: string]: string;
|
12
|
+
};
|
13
|
+
decimals?: 'default' | 'matching';
|
14
|
+
emphasized?: boolean;
|
15
|
+
id?: string;
|
16
|
+
label?: string;
|
17
|
+
size?: 'sm' | 'md' | 'lg';
|
18
|
+
symbol?: string;
|
19
|
+
variant?: 'default' | 'light' | 'bold';
|
20
|
+
unit?: string;
|
21
|
+
unstyled?: boolean;
|
22
|
+
};
|
23
|
+
declare const Currency: (props: CurrencyProps) => JSX.Element;
|
24
|
+
export default Currency;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
export declare type ThemeProps = {
|
2
|
+
lang?: {
|
3
|
+
[key: string]: string;
|
4
|
+
};
|
5
|
+
credits?: {
|
6
|
+
[key: string]: boolean;
|
7
|
+
};
|
8
|
+
colors?: string[];
|
9
|
+
chart?: {
|
10
|
+
[key: string]: any;
|
11
|
+
};
|
12
|
+
title?: {
|
13
|
+
[key: string]: string | {};
|
14
|
+
};
|
15
|
+
subtitle?: {
|
16
|
+
[key: string]: string | {};
|
17
|
+
};
|
18
|
+
xAxis?: {
|
19
|
+
[key: string]: any;
|
20
|
+
};
|
21
|
+
yAxis?: {
|
22
|
+
[key: string]: any;
|
23
|
+
};
|
24
|
+
legend?: {
|
25
|
+
[key: string]: string | {};
|
26
|
+
};
|
27
|
+
labels?: {
|
28
|
+
[key: string]: {};
|
29
|
+
};
|
30
|
+
tooltip?: {
|
31
|
+
[key: string]: any;
|
32
|
+
};
|
33
|
+
pane?: {
|
34
|
+
[key: string]: {};
|
35
|
+
};
|
36
|
+
plotOptions?: {
|
37
|
+
[key: string]: any;
|
38
|
+
};
|
39
|
+
colorKey?: string;
|
40
|
+
};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare type DashboardValueProps = {
|
3
|
+
align?: 'left' | 'center' | 'right';
|
4
|
+
aria?: {
|
5
|
+
[key: string]: string;
|
6
|
+
};
|
7
|
+
className?: string;
|
8
|
+
data?: {
|
9
|
+
[key: string]: string;
|
10
|
+
};
|
11
|
+
id?: string;
|
12
|
+
statChange?: {
|
13
|
+
change?: 'increase' | 'decrease' | 'neutral';
|
14
|
+
value?: string | number;
|
15
|
+
};
|
16
|
+
statLabel?: string;
|
17
|
+
statValue?: {
|
18
|
+
unit?: string;
|
19
|
+
value?: string | number;
|
20
|
+
};
|
21
|
+
};
|
22
|
+
declare const DashboardValue: (props: DashboardValueProps) => React.ReactElement;
|
23
|
+
export default DashboardValue;
|
@@ -0,0 +1,43 @@
|
|
1
|
+
declare const pbIndicator: {
|
2
|
+
title: {
|
3
|
+
fontFamily: any;
|
4
|
+
color: any;
|
5
|
+
fontSizes: {
|
6
|
+
big: any;
|
7
|
+
medium: any;
|
8
|
+
small: any;
|
9
|
+
micro: any;
|
10
|
+
};
|
11
|
+
};
|
12
|
+
secondaryTitle: {
|
13
|
+
color: any;
|
14
|
+
fontFamily: any;
|
15
|
+
fontSizes: {
|
16
|
+
big: any;
|
17
|
+
medium: any;
|
18
|
+
small: any;
|
19
|
+
micro: any;
|
20
|
+
};
|
21
|
+
};
|
22
|
+
value: {
|
23
|
+
fontFamily: any;
|
24
|
+
color: any;
|
25
|
+
fontWeight: any;
|
26
|
+
fontSizes: {
|
27
|
+
big: any;
|
28
|
+
medium: any;
|
29
|
+
small: any;
|
30
|
+
micro: any;
|
31
|
+
};
|
32
|
+
};
|
33
|
+
secondaryValue: {
|
34
|
+
fontFamily: any;
|
35
|
+
fontSizes: {
|
36
|
+
big: any;
|
37
|
+
medium: any;
|
38
|
+
small: any;
|
39
|
+
micro: any;
|
40
|
+
};
|
41
|
+
};
|
42
|
+
};
|
43
|
+
export default pbIndicator;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
declare type PbDateProps = {
|
2
|
+
alignment?: "left" | "center" | "right";
|
3
|
+
aria?: {
|
4
|
+
[key: string]: string;
|
5
|
+
};
|
6
|
+
className?: string;
|
7
|
+
data?: {
|
8
|
+
[key: string]: string;
|
9
|
+
};
|
10
|
+
id?: string;
|
11
|
+
showDayOfWeek?: boolean;
|
12
|
+
showIcon?: boolean;
|
13
|
+
size?: "sm" | "md" | "lg";
|
14
|
+
unstyled?: boolean;
|
15
|
+
value: Date;
|
16
|
+
};
|
17
|
+
declare const PbDate: (props: PbDateProps) => JSX.Element;
|
18
|
+
export default PbDate;
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { GlobalProps } from '../utilities/globalProps';
|
3
|
+
declare type DatePickerProps = {
|
4
|
+
allowInput?: boolean;
|
5
|
+
aria?: {
|
6
|
+
[key: string]: string;
|
7
|
+
};
|
8
|
+
className?: string;
|
9
|
+
dark?: boolean;
|
10
|
+
data?: {
|
11
|
+
[key: string]: string;
|
12
|
+
};
|
13
|
+
defaultDate?: string;
|
14
|
+
disableDate?: number[];
|
15
|
+
disableInput?: boolean;
|
16
|
+
disableRange?: number[];
|
17
|
+
disableWeekdays?: number[];
|
18
|
+
enableTime?: boolean;
|
19
|
+
error?: string;
|
20
|
+
format?: string;
|
21
|
+
hideIcon?: boolean;
|
22
|
+
hideLabel?: boolean;
|
23
|
+
id?: string;
|
24
|
+
inLine?: boolean;
|
25
|
+
inputAria?: {
|
26
|
+
[key: string]: string;
|
27
|
+
};
|
28
|
+
inputData?: {
|
29
|
+
[key: string]: string;
|
30
|
+
};
|
31
|
+
inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void;
|
32
|
+
inputValue?: string;
|
33
|
+
label?: string;
|
34
|
+
maxDate: string;
|
35
|
+
minDate: string;
|
36
|
+
name: string;
|
37
|
+
pickerId?: string;
|
38
|
+
placeholder?: string;
|
39
|
+
positionElement?: HTMLElement | null;
|
40
|
+
scrollContainer?: string;
|
41
|
+
selectionType?: "month" | "week" | "quickpick";
|
42
|
+
showTimezone?: boolean;
|
43
|
+
staticPosition: boolean;
|
44
|
+
thisRangesEndToday?: boolean;
|
45
|
+
timeFormat?: string;
|
46
|
+
type?: string;
|
47
|
+
yearRange?: number[];
|
48
|
+
} & GlobalProps;
|
49
|
+
declare const DatePicker: (props: DatePickerProps) => React.ReactElement;
|
50
|
+
export default DatePicker;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import { BaseOptions } from 'flatpickr/dist/types/options';
|
2
|
+
declare type DatePickerConfig = {
|
3
|
+
closeOnSelect?: boolean;
|
4
|
+
disableDate?: number[];
|
5
|
+
disableRange?: number[];
|
6
|
+
disableWeekdays?: number[];
|
7
|
+
format?: string;
|
8
|
+
pickerId?: ArrayLike<Node> | Node | string;
|
9
|
+
required: boolean;
|
10
|
+
hideIcon?: boolean;
|
11
|
+
inLine?: boolean;
|
12
|
+
onChange: (dateStr: string, selectedDates: Date[]) => void;
|
13
|
+
selectionType?: "month" | "week" | "quickpick" | "";
|
14
|
+
onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void;
|
15
|
+
showTimezone?: boolean;
|
16
|
+
staticPosition: boolean;
|
17
|
+
thisRangesEndToday?: boolean;
|
18
|
+
timeCaption?: string;
|
19
|
+
timeFormat?: string;
|
20
|
+
yearRange: number[];
|
21
|
+
} & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement">;
|
22
|
+
declare const datePickerHelper: (config: DatePickerConfig, scrollContainer: string | HTMLElement) => any;
|
23
|
+
export default datePickerHelper;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
declare type FpTypes = {
|
2
|
+
setDate: (arg0: any, arg1: boolean) => void;
|
3
|
+
config: {
|
4
|
+
[key: string]: string;
|
5
|
+
};
|
6
|
+
clear: (arg0: boolean, arg1: boolean) => void;
|
7
|
+
close: () => void;
|
8
|
+
calendarContainer?: {
|
9
|
+
classList: {
|
10
|
+
add: (arg0: string) => void;
|
11
|
+
};
|
12
|
+
prepend: (arg0: HTMLDivElement) => void;
|
13
|
+
append: (arg0: HTMLDivElement) => void;
|
14
|
+
};
|
15
|
+
loadedPlugins: string[];
|
16
|
+
};
|
17
|
+
declare const quickPickPlugin: (thisRangesEndToday: boolean) => (fp: FpTypes & any) => any;
|
18
|
+
export default quickPickPlugin;
|
@@ -0,0 +1,44 @@
|
|
1
|
+
declare type FpTypes = {
|
2
|
+
amPM?: {
|
3
|
+
style: {
|
4
|
+
display: string;
|
5
|
+
};
|
6
|
+
};
|
7
|
+
selectedDates: string | any[];
|
8
|
+
setDate: (arg0: any, arg1: boolean) => void;
|
9
|
+
input: {
|
10
|
+
id: any;
|
11
|
+
};
|
12
|
+
timeContainer?: {
|
13
|
+
classList: {
|
14
|
+
add: (arg0: string) => void;
|
15
|
+
};
|
16
|
+
prepend: (arg0: HTMLDivElement) => void;
|
17
|
+
append: (arg0: HTMLDivElement) => void;
|
18
|
+
};
|
19
|
+
minuteElement?: {
|
20
|
+
step: string;
|
21
|
+
};
|
22
|
+
_initialDate: {
|
23
|
+
toLocaleDateString: (arg0: string, arg1: {
|
24
|
+
day: string;
|
25
|
+
timeZoneName: string;
|
26
|
+
}) => string | any[];
|
27
|
+
};
|
28
|
+
loadedPlugins: string[];
|
29
|
+
};
|
30
|
+
export declare const getTimezoneText: (inputDate: {
|
31
|
+
toLocaleDateString: (arg0: string, arg1: {
|
32
|
+
day: string;
|
33
|
+
timeZoneName: string;
|
34
|
+
}) => string | any[];
|
35
|
+
}) => string;
|
36
|
+
declare function timeSelectPlugin(props: {
|
37
|
+
caption: string;
|
38
|
+
showTimezone: boolean;
|
39
|
+
}): (fp: FpTypes & any) => {
|
40
|
+
onValueUpdate(): void;
|
41
|
+
onOpen(): void;
|
42
|
+
onReady(): void;
|
43
|
+
};
|
44
|
+
export default timeSelectPlugin;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
declare type DateRangeInlineProps = {
|
2
|
+
className?: string;
|
3
|
+
id?: string;
|
4
|
+
data?: string;
|
5
|
+
align?: "left" | "center" | "vertical";
|
6
|
+
size?: "sm" | "xs";
|
7
|
+
dark?: boolean;
|
8
|
+
icon?: boolean;
|
9
|
+
startDate?: Date;
|
10
|
+
endDate?: Date;
|
11
|
+
};
|
12
|
+
declare const DateRangeInline: (props: DateRangeInlineProps) => JSX.Element;
|
13
|
+
export default DateRangeInline;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
declare type DateRangeStackedProps = {
|
2
|
+
className?: string | string[];
|
3
|
+
data?: string;
|
4
|
+
dark?: boolean;
|
5
|
+
endDate: Date;
|
6
|
+
id?: string;
|
7
|
+
startDate: Date;
|
8
|
+
};
|
9
|
+
declare const DateRangeStacked: (props: DateRangeStackedProps) => JSX.Element;
|
10
|
+
export default DateRangeStacked;
|
@@ -0,0 +1,13 @@
|
|
1
|
+
declare type DateStackedProps = {
|
2
|
+
align?: "left" | "center" | "right";
|
3
|
+
bold?: boolean;
|
4
|
+
className?: string | string[];
|
5
|
+
dark?: boolean;
|
6
|
+
data?: string;
|
7
|
+
date: Date;
|
8
|
+
size?: "sm" | "md";
|
9
|
+
id?: string;
|
10
|
+
reverse?: boolean;
|
11
|
+
};
|
12
|
+
declare const DateStacked: (props: DateStackedProps) => JSX.Element;
|
13
|
+
export default DateStacked;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
declare type DateTimeProps = {
|
2
|
+
align?: "left" | "center" | "right";
|
3
|
+
aria?: {
|
4
|
+
[key: string]: string;
|
5
|
+
};
|
6
|
+
className?: string;
|
7
|
+
data?: {
|
8
|
+
[key: string]: string;
|
9
|
+
};
|
10
|
+
datetime: Date;
|
11
|
+
id?: string;
|
12
|
+
size?: "sm" | "md";
|
13
|
+
showDayOfWeek: boolean;
|
14
|
+
showIcon?: boolean;
|
15
|
+
timeZone?: string;
|
16
|
+
};
|
17
|
+
declare const DateTime: (props: DateTimeProps) => JSX.Element;
|
18
|
+
export default DateTime;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
declare type DateTimeStackedProps = {
|
3
|
+
id?: string;
|
4
|
+
date: Date;
|
5
|
+
datetime: Date;
|
6
|
+
dark: boolean;
|
7
|
+
timeZone?: string;
|
8
|
+
};
|
9
|
+
declare const DateTimeStacked: (props: DateTimeStackedProps) => React.ReactElement;
|
10
|
+
export default DateTimeStacked;
|
@@ -0,0 +1,10 @@
|
|
1
|
+
declare type DateYearStackedProps = {
|
2
|
+
align?: "left" | "center" | "right";
|
3
|
+
className?: string | string[];
|
4
|
+
dark?: boolean;
|
5
|
+
data?: string;
|
6
|
+
date: Date;
|
7
|
+
id?: string;
|
8
|
+
};
|
9
|
+
declare const DateYearStacked: (props: DateYearStackedProps) => JSX.Element;
|
10
|
+
export default DateYearStacked;
|