playbook_ui 15.0.0.pre.alpha.removewebpacker10549 → 15.0.0.pre.alpha.removewebpacker10550
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_multi_level_select/_multi_level_select.tsx +12 -17
- data/app/pb_kits/playbook/pb_multi_level_select/index.js +39 -74
- data/dist/chunks/{_line_graph-CCdlZO2L.js → _line_graph-BgI_x0Qp.js} +1 -1
- data/dist/chunks/{_typeahead-ouDP07fM.js → _typeahead-DCpj5VBx.js} +1 -1
- data/dist/chunks/{_weekday_stacked-BwiHMjoq.js → _weekday_stacked-Bq-Luje1.js} +1 -1
- data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +5 -5
- data/dist/chunks/componentRegistry-BJW8wTi7.js +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c56c68794eed5778482082d9cb680e61df690803338cc716e101a915c9e47f83
|
4
|
+
data.tar.gz: ea1a964f5f7f7f66346d9ef849d45798f030326e559a5dd0718f5bf56ebdf926
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 17aa8860a451525c113b40be081d8a84e308c352c3e55e504ee1dcc8f5622fa115c89bc5b9ae42725822e93c6604af2f07ce26aab410e6e9f8cca573e02293e9
|
7
|
+
data.tar.gz: a216ad2a5724dba9a7024c2fec6ec2bad8f700a3f926192061e4c53fdd546529c7009f54a4d733e93d34b2100d0c79f9fb50ba4fe7de4266310a4a17a77ac7d7
|
@@ -93,8 +93,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
93
93
|
className
|
94
94
|
);
|
95
95
|
|
96
|
-
const inputId = id ? `${id}_multiselect_input` : `${Math.random().toString(36).slice(2)}_multiselect_input`;
|
97
|
-
|
98
96
|
const dropdownRef = useRef(null);
|
99
97
|
|
100
98
|
// State for whether dropdown is open or closed
|
@@ -328,11 +326,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
328
326
|
|
329
327
|
// Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
|
330
328
|
const handleInputWrapperClick = (e: any) => {
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
329
|
+
if (
|
330
|
+
e.target.id === "multiselect_input" ||
|
331
|
+
e.target.classList.contains("pb_form_pill_tag") ||
|
332
|
+
disabled
|
333
|
+
) {
|
334
|
+
return;
|
335
|
+
}
|
336
|
+
setIsDropdownClosed(!isDropdownClosed);
|
336
337
|
};
|
337
338
|
|
338
339
|
// Main function to handle any click inside dropdown
|
@@ -441,10 +442,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
|
|
441
442
|
}
|
442
443
|
};
|
443
444
|
|
444
|
-
const handleChevronClick = (e: React.MouseEvent) => {
|
445
|
-
e.stopPropagation()
|
446
|
-
setIsDropdownClosed(prev => !prev)
|
447
|
-
}
|
448
445
|
|
449
446
|
return (
|
450
447
|
<div
|
@@ -558,13 +555,13 @@ const handleChevronClick = (e: React.MouseEvent) => {
|
|
558
555
|
|
559
556
|
<input
|
560
557
|
disabled={disabled}
|
561
|
-
id=
|
558
|
+
id="multiselect_input"
|
562
559
|
onChange={(e) => {
|
563
560
|
variant === "single"
|
564
561
|
? handleRadioInputChange(e.target.value)
|
565
562
|
: setFilterItem(e.target.value);
|
566
563
|
}}
|
567
|
-
onClick={(
|
564
|
+
onClick={() => setIsDropdownClosed(false)}
|
568
565
|
placeholder={
|
569
566
|
inputDisplay === "none" && itemsSelectedLength()
|
570
567
|
? `${itemsSelectedLength()} ${
|
@@ -579,8 +576,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
|
|
579
576
|
|
580
577
|
{isDropdownClosed ? (
|
581
578
|
<div id={arrowDownElementId}
|
582
|
-
key="chevron-down"
|
583
|
-
onClick={handleChevronClick}>
|
579
|
+
key="chevron-down">
|
584
580
|
<Icon
|
585
581
|
icon="chevron-down"
|
586
582
|
id={arrowDownElementId}
|
@@ -589,8 +585,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
|
|
589
585
|
</div>
|
590
586
|
) : (
|
591
587
|
<div id={arrowUpElementId}
|
592
|
-
key="chevron-up"
|
593
|
-
onClick={handleChevronClick}>
|
588
|
+
key="chevron-up">
|
594
589
|
<Icon
|
595
590
|
icon="chevron-up"
|
596
591
|
id={arrowUpElementId}
|
@@ -12,129 +12,94 @@ export default class PbMultiLevelSelect extends PbEnhancedElement {
|
|
12
12
|
}
|
13
13
|
|
14
14
|
connect() {
|
15
|
-
this.justBlurred = false;
|
16
15
|
this.addEventListeners();
|
17
16
|
this.observeHiddenInputs();
|
18
17
|
this.observeRogueErrorInsideInnerContainer();
|
19
|
-
// @ts-ignore
|
20
|
-
console.log("[MLS ENHANCER] connect", this.element);
|
21
|
-
}
|
22
|
-
|
23
|
-
disconnect() {
|
24
|
-
if (this.inputElement && this.onInvalid) {
|
25
|
-
this.inputElement.removeEventListener("invalid", this.onInvalid);
|
26
|
-
}
|
27
|
-
if (this.inputElement && this.onBlur) {
|
28
|
-
this.inputElement.removeEventListener("blur", this.onBlur);
|
29
|
-
}
|
30
|
-
if (this.mutationObserver) {
|
31
|
-
this.mutationObserver.disconnect();
|
32
|
-
}
|
33
|
-
if (this.rogueErrorObserver) {
|
34
|
-
this.rogueErrorObserver.disconnect();
|
35
|
-
}
|
36
|
-
// @ts-ignore
|
37
|
-
console.log("[MLS ENHANCER] disconnect", this.element);
|
38
18
|
}
|
39
19
|
|
40
20
|
addEventListeners() {
|
41
21
|
const inputElement = this.element.querySelector("input");
|
42
|
-
if (!inputElement) {
|
43
|
-
// @ts-ignore
|
44
|
-
console.log("[MLS ENHANCER] no input found");
|
45
|
-
return;
|
46
|
-
}
|
47
|
-
|
48
|
-
this.inputElement = inputElement;
|
49
22
|
|
50
|
-
|
51
|
-
// @ts-ignore
|
52
|
-
console.log("[MLS ENHANCER] input invalid");
|
23
|
+
inputElement.addEventListener("invalid", () => {
|
53
24
|
this.handleErrorLabel(300);
|
54
|
-
};
|
55
|
-
|
56
|
-
this.onBlur = () => {
|
25
|
+
});
|
26
|
+
inputElement.addEventListener("blur", () => {
|
57
27
|
this.justBlurred = true;
|
58
|
-
|
59
|
-
console.log("[MLS ENHANCER] input blur");
|
28
|
+
|
60
29
|
setTimeout(() => {
|
61
30
|
this.justBlurred = false;
|
62
31
|
}, 300);
|
63
|
-
};
|
64
|
-
|
65
|
-
inputElement.addEventListener("invalid", this.onInvalid);
|
66
|
-
inputElement.addEventListener("blur", this.onBlur);
|
67
|
-
// @ts-ignore
|
68
|
-
console.log("[MLS ENHANCER] listeners attached");
|
32
|
+
});
|
69
33
|
}
|
70
34
|
|
71
35
|
handleErrorLabel(delay) {
|
72
36
|
setTimeout(() => {
|
73
37
|
const errorLabelElement = this.target;
|
74
38
|
const wrapper = this.element.querySelector(".wrapper");
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
39
|
+
|
40
|
+
if (errorLabelElement) {
|
41
|
+
errorLabelElement.remove();
|
42
|
+
if (wrapper) {
|
43
|
+
if (wrapper.querySelector(".pb_body_kit_negative")) {
|
44
|
+
wrapper.querySelector(".pb_body_kit_negative").remove();
|
45
|
+
}
|
46
|
+
wrapper.appendChild(errorLabelElement);
|
47
|
+
}
|
48
|
+
this.element.classList.add("error");
|
49
|
+
} else {
|
50
|
+
this.handleErrorLabel(100);
|
51
|
+
}
|
80
52
|
}, delay);
|
81
53
|
}
|
82
54
|
|
83
55
|
observeHiddenInputs() {
|
84
56
|
const container = this.element.querySelector(".input_inner_container");
|
85
|
-
if (!container)
|
86
|
-
// @ts-ignore
|
87
|
-
console.log("[MLS ENHANCER] no .input_inner_container found");
|
88
|
-
return;
|
89
|
-
}
|
57
|
+
if (!container) return;
|
90
58
|
|
91
|
-
this.mutationObserver = new MutationObserver((
|
92
|
-
// @ts-ignore
|
93
|
-
console.log("[MLS ENHANCER] hidden inputs observer mutations", mutations.length);
|
59
|
+
this.mutationObserver = new MutationObserver(() => {
|
94
60
|
const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
|
95
|
-
// @ts-ignore
|
96
|
-
console.log("[MLS ENHANCER] hidden inputs count", hiddenInputs.length);
|
97
61
|
if (hiddenInputs.length > 0) {
|
98
|
-
|
62
|
+
// At least one hidden input exists, so clear the error
|
63
|
+
this.clearError();
|
99
64
|
}
|
100
65
|
});
|
101
66
|
|
102
|
-
this.mutationObserver.observe(container, {
|
103
|
-
|
104
|
-
|
67
|
+
this.mutationObserver.observe(container, {
|
68
|
+
childList: true,
|
69
|
+
});
|
105
70
|
}
|
106
71
|
|
107
72
|
observeRogueErrorInsideInnerContainer() {
|
108
73
|
const container = this.element.querySelector(".input_inner_container");
|
109
|
-
if (!container) {
|
110
|
-
// @ts-ignore
|
111
|
-
console.log("[MLS ENHANCER] no .input_inner_container for rogue observer");
|
112
|
-
return;
|
113
|
-
}
|
114
74
|
|
115
75
|
this.rogueErrorObserver = new MutationObserver((mutations) => {
|
116
|
-
// @ts-ignore
|
117
|
-
console.log("[MLS ENHANCER] rogue error observer mutations", mutations.length, "justBlurred:", this.justBlurred);
|
118
76
|
for (const mutation of mutations) {
|
119
77
|
for (const node of mutation.addedNodes) {
|
120
78
|
if (
|
121
79
|
node.nodeType === Node.ELEMENT_NODE &&
|
122
80
|
node.classList.contains("pb_body_kit_negative")
|
123
81
|
) {
|
124
|
-
|
125
|
-
|
82
|
+
if (this.justBlurred) {
|
83
|
+
node.remove();
|
84
|
+
}
|
126
85
|
}
|
127
86
|
}
|
128
87
|
}
|
129
88
|
});
|
130
89
|
|
131
|
-
this.rogueErrorObserver.observe(container, {
|
132
|
-
|
133
|
-
|
90
|
+
this.rogueErrorObserver.observe(container, {
|
91
|
+
childList: true,
|
92
|
+
subtree: true,
|
93
|
+
});
|
134
94
|
}
|
135
95
|
|
136
96
|
clearError(e) {
|
137
|
-
|
138
|
-
|
97
|
+
const errorLabelElement = this.target;
|
98
|
+
|
99
|
+
if (errorLabelElement) {
|
100
|
+
errorLabelElement.remove();
|
101
|
+
this.element.classList.remove("error");
|
102
|
+
this.element.querySelector("input").value = e.detail.value;
|
103
|
+
}
|
139
104
|
}
|
140
105
|
}
|
@@ -1 +1 @@
|
|
1
|
-
import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useState,useEffect}from"react";import{c as buildAriaProps,d as buildDataProps,e as buildHtmlProps,H as HighchartsReact,f as Highcharts,g as classnames,h as globalProps,i as HighchartsMore,S as SolidGauge,j as buildCss}from"./_typeahead-ouDP07fM.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.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{c as buildAriaProps,d as buildDataProps,e as buildHtmlProps,H as HighchartsReact,f as Highcharts,g as classnames,h as globalProps,i as HighchartsMore,S as SolidGauge,j as buildCss}from"./_typeahead-DCpj5VBx.js";import{c as colors,h as highchartsTheme,m as merge,a as highchartsDarkTheme,t as typography}from"./lib-QZuu1ltS.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};
|