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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +6 -8
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -11
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -2
- data/app/pb_kits/playbook/pb_badge/_badge.scss +6 -5
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +1 -1
- data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +1 -36
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +26 -71
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +16 -29
- data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md} +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +16 -28
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +2 -4
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +15 -23
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +51 -81
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +75 -103
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +6 -3
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +13 -19
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +17 -30
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +20 -34
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +20 -29
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +20 -28
- data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +4 -12
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +2 -5
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +17 -27
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +3 -3
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_tooltip/index.js +36 -59
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +2 -9
- data/dist/chunks/_bar_graph-iq9-hk-x.js +1 -0
- data/dist/chunks/{_typeahead-B1tu_vWi.js → _typeahead-DeLOYzLb.js} +3 -3
- data/dist/chunks/{_weekday_stacked-CKk0dR5s.js → _weekday_stacked-bjb7ElwG.js} +1 -1
- data/dist/chunks/{lib-DYpq0k8j.js → lib-GtpYwIew.js} +1 -1
- data/dist/chunks/{pb_form_validation-BUOKwfvW.js → pb_form_validation-BCfG-8Zp.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +8 -68
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +14 -20
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +0 -46
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +0 -7
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md +0 -4
- data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +0 -2
- data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md +0 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +0 -14
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +0 -1
- data/dist/chunks/_circle_chart-BZmlhBs2.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling_react.md → _advanced_table_row_styling.md} +0 -0
- /data/app/pb_kits/playbook/pb_body/docs/{_body_truncate_rails.md → _body_truncate.md} +0 -0
- /data/app/pb_kits/playbook/pb_title/docs/{_title_truncate_rails.md → _title_truncate.md} +0 -0
- /data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md} +0 -0
data/lib/playbook/version.rb
CHANGED
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.
|
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-
|
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/
|
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/
|
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/
|
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/
|
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/
|
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/
|
3626
|
-
- dist/chunks/_typeahead-
|
3627
|
-
- dist/chunks/_weekday_stacked-
|
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-
|
3630
|
-
- dist/chunks/pb_form_validation-
|
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 +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,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};
|
File without changes
|
File without changes
|
File without changes
|
/data/app/pb_kits/playbook/pb_tooltip/docs/{_tooltip_click_open_react.md → _tooltip_click_open.md}
RENAMED
File without changes
|