playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9751
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_avatar/avatar.test.js +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +120 -12
- data/app/pb_kits/playbook/pb_body/_body.scss +108 -35
- data/app/pb_kits/playbook/pb_body/_body_mixins.scss +1 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss +16 -29
- data/app/pb_kits/playbook/pb_button/_button.scss +39 -31
- data/app/pb_kits/playbook/pb_button/_button.tsx +12 -12
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -2
- data/app/pb_kits/playbook/pb_button/button.rb +11 -18
- data/app/pb_kits/playbook/pb_button/button.test.js +3 -3
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -73
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +32 -33
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +1 -1
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js +2 -2
- data/app/pb_kits/playbook/pb_caption/_caption.scss +100 -17
- data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -8
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +11 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +6 -6
- data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +19 -19
- data/app/pb_kits/playbook/pb_currency/_currency.scss +118 -33
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss +16 -6
- data/app/pb_kits/playbook/pb_date/_date.scss +14 -16
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss +10 -10
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +25 -19
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js +2 -2
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss +66 -26
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +2 -2
- data/app/pb_kits/playbook/pb_date_time/_date_time.scss +5 -12
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss +2 -3
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss +17 -14
- data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +1 -1
- data/app/pb_kits/playbook/pb_detail/_detail.scss +86 -21
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +463 -65
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +16 -2
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +10 -7
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +2 -2
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +6 -6
- data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +4 -4
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +20 -9
- data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +3 -3
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +65 -29
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +48 -48
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +381 -344
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +4 -4
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +8 -7
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +9 -2
- data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +2 -2
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.scss +4 -4
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +40 -39
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +15 -15
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +1 -1
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss +16 -15
- data/app/pb_kits/playbook/pb_image/_image.scss +41 -36
- data/app/pb_kits/playbook/pb_label_value/_label_value.scss +3 -2
- data/app/pb_kits/playbook/pb_label_value/label_value.test.js +2 -2
- data/app/pb_kits/playbook/pb_legend/_legend.scss +66 -16
- data/app/pb_kits/playbook/pb_legend/legend.test.js +1 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +4 -4
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_link/_link.scss +113 -19
- data/app/pb_kits/playbook/pb_list/_list.scss +9 -9
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.scss +13 -11
- data/app/pb_kits/playbook/pb_map/_map.scss +1 -1
- data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +1 -1
- data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +1 -1
- data/app/pb_kits/playbook/pb_message/_message.scss +20 -15
- data/app/pb_kits/playbook/pb_message/_message.tsx +1 -0
- data/app/pb_kits/playbook/pb_message/_message_mixins.scss +5 -12
- data/app/pb_kits/playbook/pb_message/message.html.erb +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +4 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +16 -15
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +10 -10
- data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +9 -9
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.scss +19 -15
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +1 -1
- data/app/pb_kits/playbook/pb_online_status/online_status.rb +5 -4
- data/app/pb_kits/playbook/pb_online_status/online_status.test.js +2 -2
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +1 -1
- data/app/pb_kits/playbook/pb_overlay/overlay.rb +1 -1
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss +5 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +1 -1
- data/app/pb_kits/playbook/pb_pill/_pill.scss +23 -21
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +12 -10
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss +106 -31
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +37 -37
- data/app/pb_kits/playbook/pb_radio/_radio.scss +71 -52
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +1 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +0 -3
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +80 -69
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +1 -1
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +3 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +7 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +2 -2
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +6 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss +13 -4
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +39 -29
- data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +2 -0
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +8 -11
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js +24 -25
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +2 -2
- data/app/pb_kits/playbook/pb_source/_source.scss +5 -5
- data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js +1 -1
- data/app/pb_kits/playbook/pb_stat_value/_stat_value.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_alignment.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_content.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_hover.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_outer_padding.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_reset.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +12 -12
- data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_striped.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_structure.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +2 -2
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +4 -4
- data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +4 -4
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +5 -5
- data/app/pb_kits/playbook/pb_time/_time.scss +43 -16
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +14 -14
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss +5 -8
- data/app/pb_kits/playbook/pb_timeline/_timeline.scss +41 -41
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +4 -4
- data/app/pb_kits/playbook/pb_title/_title.scss +41 -38
- data/app/pb_kits/playbook/pb_title/_title.tsx +17 -8
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +2 -2
- data/app/pb_kits/playbook/pb_title/title.rb +20 -10
- data/app/pb_kits/playbook/pb_title/title.test.js +4 -4
- data/app/pb_kits/playbook/pb_title_count/_title_count.scss +19 -8
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.scss +10 -11
- data/app/pb_kits/playbook/pb_toggle/_toggle.scss +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +10 -10
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +3 -3
- data/app/pb_kits/playbook/pb_user/_user.scss +13 -13
- data/app/pb_kits/playbook/pb_user/user.test.js +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss +23 -8
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss +10 -10
- data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx +3 -3
- data/dist/chunks/{_line_graph-0Y0wuiB9.js → _line_graph-Dv_ODxW3.js} +1 -1
- data/dist/chunks/_typeahead-CD5RAaaP.js +6 -0
- data/dist/chunks/{_weekday_stacked-Dblcf2V8.js → _weekday_stacked-Bv6tOPKC.js} +2 -2
- 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/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -5
- data/dist/chunks/_typeahead-B2gV75O0.js +0 -6
@@ -1 +1 @@
|
|
1
|
-
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-B2gV75O0.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,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:colors2!==void 0&&colors2.length>0?mapColors(colors2):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:colors2=[],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:colors2.length>0?mapColors(colors2):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})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...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:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};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})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
|
1
|
+
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{b as buildAriaProps,c as buildDataProps,d as buildHtmlProps,H as HighchartsReact,e as Highcharts,f as classnames,g as globalProps,h as HighchartsMore,S as SolidGauge,i as buildCss}from"./_typeahead-CD5RAaaP.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-CY5ZPzic.js";const mapColors=array=>{const regex=/(data)\-[1-8]/;const newArray=array.map((item=>regex.test(item)?`${colors[`data_${item[item.length-1]}`]}`:item));return newArray};const BarGraph=({aria:aria={},data:data={},align:align="center",axisTitle:axisTitle,dark:dark=false,chartData:chartData,className:className="pb_bar_graph",colors:colors2,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:colors2!==void 0&&colors2.length>0?mapColors(colors2):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:colors2=[],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:colors2.length>0?mapColors(colors2):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})})};const Gauge=({aria:aria={},chartData:chartData,customOptions:customOptions={},dark:dark=false,data:data={},disableAnimation:disableAnimation=false,fullCircle:fullCircle=false,height:height=null,htmlOptions:htmlOptions={},id:id,max:max=100,min:min=0,prefix:prefix="",showLabels:showLabels=false,style:style="solidgauge",suffix:suffix="",title:title="",tooltipHtml:tooltipHtml='<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',colors:colors$1=[],minorTickInterval:minorTickInterval=null,circumference:circumference=(fullCircle?[0,360]:[-100,100]),...props})=>{const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);HighchartsMore(Highcharts);SolidGauge(Highcharts);const setupTheme=()=>{dark?Highcharts.setOptions(highchartsDarkTheme):Highcharts.setOptions(highchartsTheme)};setupTheme();Highcharts.setOptions({tooltip:{pointFormat:tooltipHtml,followPointer:true}});const css=buildCss({pb_gauge_kit:true});const[options,setOptions]=useState({});useEffect((()=>{const formattedChartData=chartData.map((obj=>{obj.y=obj.value;delete obj.value;return obj}));const staticOptions={chart:{events:{load(){setTimeout(this.reflow.bind(this),0)}},type:style,height:height},title:{text:title},yAxis:{min:min,max:max,lineWidth:0,tickWidth:0,minorTickInterval:minorTickInterval,tickAmount:2,tickPositions:[min,max],labels:{y:26,enabled:showLabels}},credits:false,series:[{data:formattedChartData}],pane:{center:["50%","50%"],size:"90%",startAngle:circumference[0],endAngle:circumference[1],background:{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane"}},colors:colors$1!==void 0&&colors$1.length>0?mapColors(colors$1):highchartsTheme.colors,plotOptions:{series:{animation:!disableAnimation},solidgauge:{borderColor:colors$1!==void 0&&colors$1.length===1?mapColors(colors$1).join():highchartsTheme.colors[0],borderWidth:20,radius:90,innerRadius:"90%",dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:`<span class="prefix${dark?" dark":""}">${prefix}</span><span class="fix${dark?" dark":""}">{y:,f}</span><span class="suffix${dark?" dark":""}">${suffix}</span>`,style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}}};setOptions(merge(staticOptions,customOptions));if(document.querySelector(".prefix")){document.querySelectorAll(".prefix").forEach((prefix2=>{prefix2.setAttribute("y","28")}));document.querySelectorAll(".fix").forEach((fix=>fix.setAttribute("y","38")))}}),[chartData]);return jsx(HighchartsReact,{containerProps:{className:classnames(css,globalProps(props)),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:options})};const LineGraph=({aria:aria={},data:data={},align:align="center",className:className="pb_bar_graph",customOptions:customOptions={},dark:dark=false,gradient:gradient=false,type:type="line",htmlOptions:htmlOptions={},id:id,legend:legend=false,toggleLegendClick:toggleLegendClick=true,layout:layout="horizontal",verticalAlign:verticalAlign="bottom",x:x=0,y:y=0,axisTitle:axisTitle,xAxisCategories:xAxisCategories,yAxisMin:yAxisMin,yAxisMax:yAxisMax,chartData:chartData,pointStart:pointStart,subTitle:subTitle,title:title,height:height,colors:colors2=[],...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:{min:yAxisMin,max:yAxisMax,title:{text:axisTitle}},xAxis:{categories:xAxisCategories},legend:{enabled:legend,align:align,verticalAlign:verticalAlign,layout:layout,x:x,y:y},colors:colors2!==void 0&&colors2.length>0?mapColors(colors2):highchartsTheme.colors,plotOptions:{series:{pointStart:pointStart,events:{},dataLabels:{enabled:false}}},series:chartData,credits:false};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})};export{BarGraph as B,CircleChart as C,Gauge as G,LineGraph as L};
|