playbook_ui 14.22.0.pre.alpha.PLAY22958842 → 14.22.0.pre.alpha.PLAY23038941
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +7 -6
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +4 -0
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +12 -4
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +5 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +4 -0
- data/dist/chunks/{_circle_chart-BjcInQNv.js → _circle_chart-BZmlhBs2.js} +1 -1
- data/dist/chunks/{_typeahead-CuwY9iVi.js → _typeahead-B1tu_vWi.js} +2 -2
- data/dist/chunks/{_weekday_stacked-C3EeTZ8D.js → _weekday_stacked-CKk0dR5s.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +9 -7
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate.md → _body_truncate_rails.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate.md → _title_truncate_rails.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5f50300e33da8154703fe359498c9858c3470612348a2ca22970787b3ebd6e03
|
4
|
+
data.tar.gz: d7265cc165aec24b1e6f86a88df3621e3534bbf2146555c235486bf44d370619
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5e88eef568e04462cc0e31219558d6ab146f208bacdf23c1d2ca2f395c1cff84348aa4469cf0a7e4d1d3cb254a000b582108d11390aeb01a988af9d9593afbd5
|
7
|
+
data.tar.gz: 6aaa5a5f886bf02b488c5ba129df3b46b38f0e03abb07610a72588f6ba9e112a82d3e1fa8050dbc63879056c9912ec1fffa02b26a2767d49dd7daad0276e6857
|
@@ -12,7 +12,6 @@ examples:
|
|
12
12
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
13
13
|
- advanced_table_column_headers: Multi-Header Columns
|
14
14
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
15
|
-
- advanced_table_column_border_color_rails: Column Group Border Color
|
16
15
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
17
16
|
- advanced_table_selectable_rows_rails: Selectable Rows
|
18
17
|
- advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
|
@@ -21,10 +20,11 @@ examples:
|
|
21
20
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
22
21
|
- advanced_table_column_styling_rails: Column Styling
|
23
22
|
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
23
|
+
- advanced_table_column_border_color_rails: Column Group Border Color
|
24
|
+
|
24
25
|
|
25
26
|
react:
|
26
27
|
- advanced_table_default: Default (Required Props)
|
27
|
-
- advanced_table_loading: Loading State
|
28
28
|
- advanced_table_sort: Enable Sorting
|
29
29
|
- advanced_table_sort_control: Sort Control
|
30
30
|
- advanced_table_custom_sort: Custom Sort
|
@@ -38,30 +38,31 @@ examples:
|
|
38
38
|
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
39
39
|
- advanced_table_sticky_columns: Sticky Columns
|
40
40
|
- advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
|
41
|
-
- advanced_table_inline_row_loading: Inline Row Loading
|
42
41
|
- advanced_table_responsive: Responsive Tables
|
43
42
|
- advanced_table_custom_cell: Custom Components for Cells
|
44
43
|
- advanced_table_with_custom_header: Custom Header Cell
|
45
44
|
- advanced_table_pagination: Pagination
|
46
45
|
- advanced_table_pagination_with_props: Pagination Props
|
46
|
+
- advanced_table_loading: Loading State
|
47
|
+
- advanced_table_inline_row_loading: Inline Row Loading
|
47
48
|
- advanced_table_column_headers: Multi-Header Columns
|
48
49
|
- advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
|
49
50
|
- advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
|
50
|
-
- advanced_table_column_border_color: Column Group Border Color
|
51
51
|
- advanced_table_no_subrows: Table with No Subrows or Expansion
|
52
|
+
- advanced_table_pinned_rows: Pinned Rows
|
52
53
|
- advanced_table_selectable_rows: Selectable Rows
|
53
54
|
- advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
|
54
55
|
- advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
|
55
56
|
- advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
|
56
57
|
- advanced_table_inline_editing: Inline Cell Editing
|
57
|
-
- advanced_table_fullscreen: Fullscreen
|
58
58
|
- advanced_table_column_visibility: Column Visibility Control
|
59
59
|
- advanced_table_column_visibility_with_state: Column Visibility Control With State
|
60
60
|
- advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
|
61
61
|
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
62
|
-
- advanced_table_pinned_rows: Pinned Rows
|
63
62
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
64
63
|
- advanced_table_row_styling: Row Styling
|
65
64
|
- advanced_table_column_styling: Column Styling
|
66
65
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
66
|
+
- advanced_table_column_border_color: Column Group Border Color
|
67
|
+
- advanced_table_fullscreen: Fullscreen
|
67
68
|
- advanced_table_infinite_scroll: Infinite Scroll
|
@@ -19,7 +19,7 @@ const BodyTruncate = (props) => {
|
|
19
19
|
<Body
|
20
20
|
marginBottom="md"
|
21
21
|
text={lorem}
|
22
|
-
truncate=
|
22
|
+
truncate={1}
|
23
23
|
{...props}
|
24
24
|
/>
|
25
25
|
|
@@ -30,7 +30,7 @@ const BodyTruncate = (props) => {
|
|
30
30
|
<Body
|
31
31
|
marginBottom="md"
|
32
32
|
text={lorem}
|
33
|
-
truncate=
|
33
|
+
truncate={2}
|
34
34
|
{...props}
|
35
35
|
/>
|
36
36
|
|
@@ -40,7 +40,7 @@ const BodyTruncate = (props) => {
|
|
40
40
|
/>
|
41
41
|
<Body
|
42
42
|
text={lorem}
|
43
|
-
truncate=
|
43
|
+
truncate={3}
|
44
44
|
{...props}
|
45
45
|
/>
|
46
46
|
</Flex>
|
@@ -3,7 +3,7 @@ import { InitialStateType, ActionType, DraggableProviderType } from "./types";
|
|
3
3
|
|
4
4
|
const initialState: InitialStateType = {
|
5
5
|
items: [],
|
6
|
-
dragData: { id: "", initialGroup: "" },
|
6
|
+
dragData: { id: "", initialGroup: "", originId: "" },
|
7
7
|
isDragging: "",
|
8
8
|
activeContainer: ""
|
9
9
|
};
|
@@ -60,7 +60,8 @@ export const DraggableProvider = ({
|
|
60
60
|
onDragEnd,
|
61
61
|
onDrop,
|
62
62
|
onDragOver,
|
63
|
-
dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
|
63
|
+
dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
|
64
|
+
providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
|
64
65
|
}: DraggableProviderType) => {
|
65
66
|
const [state, dispatch] = useReducer(reducer, initialState);
|
66
67
|
|
@@ -93,15 +94,17 @@ export const DraggableProvider = ({
|
|
93
94
|
}, [state.items]);
|
94
95
|
|
95
96
|
const handleDragStart = (id: string, container: string) => {
|
96
|
-
dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
|
97
|
+
dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
|
97
98
|
dispatch({ type: 'SET_IS_DRAGGING', payload: id });
|
98
99
|
if (onDragStart) onDragStart(id, container);
|
99
100
|
};
|
100
101
|
|
101
102
|
const handleDragEnter = (id: string, container: string) => {
|
103
|
+
if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
|
104
|
+
|
102
105
|
if (state.dragData.id !== id) {
|
103
106
|
dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
|
104
|
-
dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
|
107
|
+
dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
|
105
108
|
}
|
106
109
|
if (onDragEnter) onDragEnter(id, container);
|
107
110
|
};
|
@@ -109,6 +112,7 @@ export const DraggableProvider = ({
|
|
109
112
|
const handleDragEnd = () => {
|
110
113
|
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
111
114
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
115
|
+
dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
|
112
116
|
if (onDragEnd) onDragEnd();
|
113
117
|
};
|
114
118
|
|
@@ -117,6 +121,8 @@ export const DraggableProvider = ({
|
|
117
121
|
};
|
118
122
|
|
119
123
|
const handleDrop = (container: string) => {
|
124
|
+
if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
|
125
|
+
|
120
126
|
dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
|
121
127
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
|
122
128
|
changeCategory(state.dragData.id, container);
|
@@ -124,6 +130,8 @@ export const DraggableProvider = ({
|
|
124
130
|
};
|
125
131
|
|
126
132
|
const handleDragOver = (e: Event, container: string) => {
|
133
|
+
if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
|
134
|
+
|
127
135
|
e.preventDefault();
|
128
136
|
dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
|
129
137
|
if (onDragOver) onDragOver(e, container);
|
@@ -6,14 +6,16 @@ export interface ItemType {
|
|
6
6
|
|
7
7
|
export interface InitialStateType {
|
8
8
|
items: ItemType[];
|
9
|
-
dragData: { id: string; initialGroup: string };
|
9
|
+
dragData: { id: string; initialGroup: string, originId?: string };
|
10
10
|
isDragging: string;
|
11
11
|
activeContainer: string;
|
12
12
|
}
|
13
13
|
|
14
14
|
export type ActionType =
|
15
15
|
| { type: 'SET_ITEMS'; payload: ItemType[] }
|
16
|
-
| { type: 'SET_DRAG_DATA'; payload: {
|
16
|
+
| { type: 'SET_DRAG_DATA'; payload: {
|
17
|
+
originId: string; id: string; initialGroup: string
|
18
|
+
} }
|
17
19
|
| { type: 'SET_IS_DRAGGING'; payload: string }
|
18
20
|
| { type: 'SET_ACTIVE_CONTAINER'; payload: string }
|
19
21
|
| { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
|
@@ -35,4 +37,5 @@ export type ActionType =
|
|
35
37
|
onDrop?: (container: string) => void;
|
36
38
|
onDragOver?: (e: Event, container: string) => void;
|
37
39
|
dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
|
40
|
+
providerId?: string;
|
38
41
|
}
|
@@ -68,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
|
|
68
68
|
return /^[()+\-\ .\d]*$/g.test(value)
|
69
69
|
}
|
70
70
|
|
71
|
-
const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.
|
71
|
+
const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
|
72
72
|
const {
|
73
73
|
aria = {},
|
74
74
|
className,
|
@@ -106,15 +106,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
106
106
|
className
|
107
107
|
)
|
108
108
|
|
109
|
-
const inputRef = useRef<HTMLInputElement>()
|
109
|
+
const inputRef = useRef<HTMLInputElement | null>(null)
|
110
110
|
const itiRef = useRef<any>(null);
|
111
111
|
const [inputValue, setInputValue] = useState(value)
|
112
112
|
const [error, setError] = useState(props.error)
|
113
113
|
const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
|
114
114
|
const [selectedData, setSelectedData] = useState()
|
115
|
+
const [hasTyped, setHasTyped] = useState(false)
|
115
116
|
|
116
117
|
useEffect(() => {
|
117
|
-
if (error
|
118
|
+
if ((error ?? '').length > 0) {
|
118
119
|
onValidate(false)
|
119
120
|
} else {
|
120
121
|
onValidate(true)
|
@@ -131,6 +132,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
131
132
|
clearField() {
|
132
133
|
setInputValue("")
|
133
134
|
setError("")
|
135
|
+
setHasTyped(false)
|
134
136
|
},
|
135
137
|
inputNode() {
|
136
138
|
return inputRef.current
|
@@ -201,6 +203,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
201
203
|
}
|
202
204
|
|
203
205
|
const validateErrors = () => {
|
206
|
+
if (!hasTyped && !error) return
|
207
|
+
|
204
208
|
if (itiRef.current) isValid(itiRef.current.isValidNumber())
|
205
209
|
if (validateOnlyNumbers(itiRef.current)) return
|
206
210
|
if (validateTooLongNumber(itiRef.current)) return
|
@@ -214,6 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
214
218
|
}
|
215
219
|
|
216
220
|
const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
|
221
|
+
if (!hasTyped) setHasTyped(true)
|
217
222
|
setInputValue(evt.target.value)
|
218
223
|
let phoneNumberData
|
219
224
|
if (formatAsYouType) {
|
@@ -259,16 +264,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
259
264
|
|
260
265
|
itiRef.current = telInputInit;
|
261
266
|
|
262
|
-
inputRef.current
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
|
270
|
-
inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
|
267
|
+
if (inputRef.current) {
|
268
|
+
inputRef.current.addEventListener("countrychange", (evt: Event) => {
|
269
|
+
const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
|
270
|
+
setSelectedData(phoneNumberData)
|
271
|
+
onChange(phoneNumberData)
|
272
|
+
validateErrors()
|
273
|
+
})
|
271
274
|
|
275
|
+
inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
|
276
|
+
inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
|
277
|
+
}
|
272
278
|
if (formatAsYouType) {
|
273
279
|
inputRef.current?.addEventListener("input", (evt) => {
|
274
280
|
handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
|
@@ -303,12 +309,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
|
|
303
309
|
{...htmlProps}
|
304
310
|
>
|
305
311
|
<TextInput
|
306
|
-
ref={
|
307
|
-
|
308
|
-
|
309
|
-
|
312
|
+
ref={inputNode => {
|
313
|
+
if (ref) {
|
314
|
+
if (typeof ref === 'function') {
|
315
|
+
ref(inputNode)
|
316
|
+
} else {
|
317
|
+
(ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
|
318
|
+
}
|
310
319
|
}
|
311
|
-
|
320
|
+
inputRef.current = inputNode
|
321
|
+
}}
|
312
322
|
{...textInputProps}
|
313
323
|
/>
|
314
324
|
</div>
|
@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
|
|
20
20
|
marginBottom="md"
|
21
21
|
size={4}
|
22
22
|
text={lorem}
|
23
|
-
truncate=
|
23
|
+
truncate={1}
|
24
24
|
{...props}
|
25
25
|
/>
|
26
26
|
|
@@ -32,7 +32,7 @@ const TitleTruncate = (props) => {
|
|
32
32
|
marginBottom="md"
|
33
33
|
size={4}
|
34
34
|
text={lorem}
|
35
|
-
truncate=
|
35
|
+
truncate={2}
|
36
36
|
{...props}
|
37
37
|
/>
|
38
38
|
|
@@ -43,7 +43,7 @@ const TitleTruncate = (props) => {
|
|
43
43
|
<Title
|
44
44
|
size={4}
|
45
45
|
text={lorem}
|
46
|
-
truncate=
|
46
|
+
truncate={3}
|
47
47
|
{...props}
|
48
48
|
/>
|
49
49
|
</Flex>
|
@@ -1 +1 @@
|
|
1
|
-
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-
|
1
|
+
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,m as mapColors,H as HighchartsReact,d as Highcharts,e as classnames,g as globalProps,f as HighchartsMore}from"./_typeahead-B1tu_vWi.js";import{h as highchartsTheme,m as merge,a as highchartsDarkTheme}from"./lib-DYpq0k8j.js";const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors,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:colors!==void 0&&colors.length>0?mapColors(colors):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:colors=[],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:colors.length>0?mapColors(colors):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})})};export{BarGraph as B,CircleChart as C};
|