playbook_ui 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971 → 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730

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.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -2
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +1 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -11
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -2
  8. data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +1 -1
  10. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +2 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +2 -1
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -1
  21. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
  22. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
  23. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
  24. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
  25. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
  26. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
  27. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
  28. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
  29. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
  30. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
  31. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
  32. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
  33. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  34. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  35. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
  36. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
  37. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
  38. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
  39. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
  40. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  41. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
  42. data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
  43. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
  44. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
  45. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  46. data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
  47. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
  48. data/dist/chunks/_bar_graph-iq9-hk-x.js +1 -0
  49. data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-DeLOYzLb.js} +3 -3
  50. data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-bjb7ElwG.js} +1 -1
  51. data/dist/chunks/{lib-DYpq0k8j.js → lib-GtpYwIew.js} +1 -1
  52. data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-BCfG-8Zp.js} +1 -1
  53. data/dist/chunks/vendor.js +1 -1
  54. data/dist/menu.yml +8 -68
  55. data/dist/playbook-doc.js +2 -2
  56. data/dist/playbook-rails-react-bindings.js +1 -1
  57. data/dist/playbook-rails.js +1 -1
  58. data/dist/playbook.css +1 -1
  59. data/lib/playbook/version.rb +1 -1
  60. metadata +14 -20
  61. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +0 -46
  62. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +0 -7
  63. data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
  65. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
  66. data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
  67. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
  68. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
  69. data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
  70. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling_react.md → _advanced_table_row_styling.md} +0 -0
  71. /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
  72. /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
  73. /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.22.0"
5
- VERSION = "14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971"
5
+ VERSION = "14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971
4
+ version: 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-07-15 00:00:00.000000000 Z
12
+ date: 2025-07-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -359,10 +359,8 @@ files:
359
359
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
360
360
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
361
361
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
362
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb
363
362
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
364
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md
365
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md
363
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md
366
364
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
367
365
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
368
366
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
@@ -575,8 +573,7 @@ files:
575
573
  - app/pb_kits/playbook/pb_body/docs/_body_styled.md
576
574
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
577
575
  - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
578
- - app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
579
- - app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
576
+ - app/pb_kits/playbook/pb_body/docs/_body_truncate.md
580
577
  - app/pb_kits/playbook/pb_body/docs/_description.md
581
578
  - app/pb_kits/playbook/pb_body/docs/_footer.md
582
579
  - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -770,8 +767,7 @@ files:
770
767
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
771
768
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
772
769
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
773
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
774
- - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
770
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.md
775
771
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
776
772
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
777
773
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
@@ -783,6 +779,8 @@ files:
783
779
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
784
780
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
785
781
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
782
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx
783
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
786
784
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
787
785
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
788
786
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
@@ -791,7 +789,6 @@ files:
791
789
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
792
790
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
793
791
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
794
- - app/pb_kits/playbook/pb_circle_chart/docs/_description.md
795
792
  - app/pb_kits/playbook/pb_circle_chart/docs/example.yml
796
793
  - app/pb_kits/playbook/pb_circle_chart/docs/index.js
797
794
  - app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss
@@ -3285,8 +3282,7 @@ files:
3285
3282
  - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
3286
3283
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
3287
3284
  - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
3288
- - app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
3289
- - app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
3285
+ - app/pb_kits/playbook/pb_title/docs/_title_truncate.md
3290
3286
  - app/pb_kits/playbook/pb_title/docs/example.yml
3291
3287
  - app/pb_kits/playbook/pb_title/docs/index.js
3292
3288
  - app/pb_kits/playbook/pb_title/title.html.erb
@@ -3343,10 +3339,8 @@ files:
3343
3339
  - app/pb_kits/playbook/pb_toggle/toggle.test.js
3344
3340
  - app/pb_kits/playbook/pb_tooltip/_tooltip.scss
3345
3341
  - app/pb_kits/playbook/pb_tooltip/_tooltip.tsx
3346
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
3347
3342
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
3348
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
3349
- - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
3343
+ - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
3350
3344
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
3351
3345
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
3352
3346
  - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -3622,12 +3616,12 @@ files:
3622
3616
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3623
3617
  - app/pb_kits/playbook/utilities/text.ts
3624
3618
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3625
- - dist/chunks/_circle_chart-BZmlhBs2.js
3626
- - dist/chunks/_typeahead-B1tu_vWi.js
3627
- - dist/chunks/_weekday_stacked-CKk0dR5s.js
3619
+ - dist/chunks/_bar_graph-iq9-hk-x.js
3620
+ - dist/chunks/_typeahead-DeLOYzLb.js
3621
+ - dist/chunks/_weekday_stacked-bjb7ElwG.js
3628
3622
  - dist/chunks/lazysizes-B7xYodB-.js
3629
- - dist/chunks/lib-DYpq0k8j.js
3630
- - dist/chunks/pb_form_validation-BUOKwfvW.js
3623
+ - dist/chunks/lib-GtpYwIew.js
3624
+ - dist/chunks/pb_form_validation-BCfG-8Zp.js
3631
3625
  - dist/chunks/vendor.js
3632
3626
  - dist/menu.yml
3633
3627
  - dist/playbook-doc.js
@@ -1,46 +0,0 @@
1
- <% column_definitions = [
2
- {
3
- accessor: "year",
4
- label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
- },
7
- {
8
- accessor: "newEnrollments",
9
- label: "New Enrollments",
10
- },
11
- {
12
- accessor: "scheduledMeetings",
13
- label: "Scheduled Meetings",
14
- },
15
- {
16
- accessor: "attendanceRate",
17
- label: "Attendance Rate",
18
- },
19
- {
20
- accessor: "completedClasses",
21
- label: "Completed Classes",
22
- },
23
- {
24
- accessor: "classCompletionRate",
25
- label: "Class Completion Rate",
26
- },
27
- {
28
- accessor: "graduatedStudents",
29
- label: "Graduated Students",
30
- }
31
- ] %>
32
-
33
- <% row_styling = [
34
- {
35
- row_id: "1",
36
- background_color: "#F9BB00",
37
- },
38
- {
39
- row_id: "8",
40
- background_color: "#0056CF",
41
- font_color: "white",
42
- expand_button_color: "white",
43
- },
44
- ] %>
45
-
46
- <%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
@@ -1,7 +0,0 @@
1
- The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
2
-
3
- - `background_color` : use this to control the background color of the row
4
- - `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
5
- - `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
6
-
7
- **NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
@@ -1,4 +0,0 @@
1
- ##### Prop
2
- `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
-
4
- The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1,2 +0,0 @@
1
- Custom data colors allow for color customization to match the needs of business requirements.
2
- Import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.
@@ -1 +0,0 @@
1
- **Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
@@ -1,4 +0,0 @@
1
- ##### Prop
2
- `truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
3
-
4
- The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.
@@ -1,14 +0,0 @@
1
- <%= pb_rails("button", props: {
2
- text: "Click to Open",
3
- id: "click-tooltip-trigger-1",
4
- variant: "primary"
5
- }) %>
6
-
7
- <%= pb_rails("tooltip", props: {
8
- trigger_element_selector: "#click-tooltip-trigger-1",
9
- tooltip_id: "click-tooltip-1",
10
- position: "top",
11
- use_click_to_open: true
12
- }) do %>
13
- Tooltip opened by click! Click trigger again to close.
14
- <% end %>
@@ -1 +0,0 @@
1
- Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.
@@ -1 +0,0 @@
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};