@coderundebug/ui-web/ui-pie-chart.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as t}from"./ui-tools.js";class i{static TYPE_PIE=0;static TYPE_DONUT=1;static TYPE_PIE_HALF=2;static TYPE_DONUT_HALF=3;static HALF_TYPE_TOP=0;static HALF_TYPE_BOTTOM=1;static HALF_TYPE_LEFT=2;static HALF_TYPE_RIGHT=3;static LABEL_TYPE_PERCENTAGE=0;static LABEL_TYPE_VALUE=1;static LABEL_TYPE_CATEGORY=2;static COLOR_LIST=["#1858bb","#e1b038","#dd6149","#109b95","#64c056","#df66b0","#756bb2","#18b3bb","#a32dab","#b78675","#757575","#c0ca33","#c35a09","#9678df","#b71c54","#2d8bd5","#67d0dd","#607d8b","#b0bec5","#347936"];constructor(){this.t=null,this.i={},this.i.x=0,this.i.y=0,this.i.width=0,this.i.height=0,this.h=0,this.o=0,this.p=0,this.l=0,this.u=0,this.v=0,this.m=0,this.M=0,this._=0,this.A=Math.PI/180,this.T=[],this.L=[],this.P=this.P.bind(this),this.k=this.k.bind(this),this.C=this.C.bind(this),this.F=this.F.bind(this)}get options(){return this.t}get innerArea(){return this.i}get currentWidth(){return this.h}get currentHeight(){return this.o}get pieRadius(){return this.p}get donutRadiusTop(){return this.l}get donutRadiusBottom(){return this.u}get highlightRadiusTop(){return this.v}get highlightRadiusBottom(){return this.m}get selectableRadiusTop(){return this.M}get selectableRadiusBottom(){return this._}get degreeToRadian(){return this.A}get dataList(){return this.T}get colorList(){return this.L}processOptions(t){if(this.t={},this.t.chartType=i.TYPE_PIE,this.t.chartHalfType=i.HALF_TYPE_TOP,this.t.selectable=!1,this.t.highlight=!1,this.t.padding=12,this.t.donutSize=32,this.t.selectableSize=5,this.t.highlightSize=10,this.t.legend={},this.t.legend.showPopup=!1,this.t.legend.formatTextCallback=this.k,this.t.label={},this.t.label.show=!1,this.t.label.showLimit=4,this.t.label.type="",this.t.label.labelType=i.LABEL_TYPE_PERCENTAGE,this.t.label.textSuffix="",this.t.label.textPrefix="",this.t.label.textGap=16,this.t.label.formatTextCallback=this.P,this.t.popup={},this.t.popup.show=!1,this.t.popup.formatInfoTextCallback=this.C,this.t.popup.formatValueTextCallback=this.F,t){const s="undefined";"pie"===t.type&&(this.t.chartType=i.TYPE_PIE),"donut"===t.type&&(this.t.chartType=i.TYPE_DONUT),"pie-half"===t.type&&(this.t.chartType=i.TYPE_PIE_HALF),"donut-half"===t.type&&(this.t.chartType=i.TYPE_DONUT_HALF),"top"===t.halfType&&(this.t.chartHalfType=i.HALF_TYPE_TOP),"bottom"===t.halfType&&(this.t.chartHalfType=i.HALF_TYPE_BOTTOM),"left"===t.halfType&&(this.t.chartHalfType=i.HALF_TYPE_LEFT),"right"===t.halfType&&(this.t.chartHalfType=i.HALF_TYPE_RIGHT),typeof t.selectable!==s&&(this.t.selectable=t.selectable),typeof t.highlight!==s&&(this.t.highlight=t.highlight),typeof t.stack!==s&&(this.t.stack=t.stack),typeof t.padding!==s&&(this.t.padding=t.padding),typeof t.donutSize!==s&&(this.t.donutSize=t.donutSize),typeof t.selectableSize!==s&&(this.t.selectableSize=t.selectableSize),typeof t.highlightSize!==s&&(this.t.highlightSize=t.highlightSize),"object"==typeof t.legend&&(typeof t.legend.showPopup!==s&&(this.t.legend.showPopup=t.legend.showPopup),typeof t.legend.formatTextCallback!==s&&(this.t.legend.formatTextCallback=t.legend.formatTextCallback)),"object"==typeof t.label&&(typeof t.label.show!==s&&(this.t.label.show=t.label.show),typeof t.label.showLimit!==s&&(this.t.label.showLimit=t.label.showLimit),typeof t.label.type!==s&&(this.t.label.type=t.label.type),typeof t.label.textSuffix!==s&&(this.t.label.textSuffix=t.label.textSuffix),typeof t.label.textPrefix!==s&&(this.t.label.textPrefix=t.label.textPrefix),typeof t.label.textGap!==s&&(this.t.label.textGap=t.label.textGap),typeof t.label.formatTextCallback!==s&&(this.t.label.formatTextCallback=t.label.formatTextCallback),"percentage"===this.t.label.type&&(this.t.label.labelType=i.LABEL_TYPE_PERCENTAGE),"value"===this.t.label.type&&(this.t.label.labelType=i.LABEL_TYPE_VALUE),"category"===this.t.label.type&&(this.t.label.labelType=i.LABEL_TYPE_CATEGORY)),"object"==typeof t.popup&&(typeof t.popup.show!==s&&(this.t.popup.show=t.popup.show),typeof t.popup.formatInfoTextCallback!==s&&(this.t.popup.formatInfoTextCallback=t.popup.formatInfoTextCallback),typeof t.popup.formatValueTextCallback!==s&&(this.t.popup.formatValueTextCallback=t.popup.formatValueTextCallback))}}processData(t){if(this.T=[],!t)return;if(!1===Array.isArray(t))return;t.forEach((t=>{if("number"==typeof t){const i={category:""};return i.data=t,i.value=t,void this.T.push(i)}if(!t.value)return;if(t.value<0)return;const i={};i.category=t.category,i.value=t.value,i.color=t.color,i.data=t.data,i.text=t.text,this.T.push(i)}));for(let t=0;t<this.T.length;t++){this.T[t].index=t}if(0===this.T.length)return;let s=0;this.T.forEach((t=>{s+=t.value}));const h=this.t;let e=360;h.chartType!==i.TYPE_DONUT_HALF&&h.chartType!==i.TYPE_PIE_HALF||(e=180),this.T.forEach((t=>{t.percentage=t.value/s*100,t.angle=t.value/s*e}));let r=0,o=1;this.L=[],this.T.forEach((t=>{t.color||(t.color="var(--ui-chart-color"+o.toString()+", "+i.COLOR_LIST[o-1]+")",o++,o>20&&(o=1)),this.L.push(t.color)}));let a=!1;if(h.chartType!==i.TYPE_DONUT_HALF&&h.chartType!==i.TYPE_PIE_HALF||(h.chartHalfType!==i.HALF_TYPE_BOTTOM&&h.chartHalfType!==i.HALF_TYPE_LEFT||(a=!0),h.chartHalfType!==i.HALF_TYPE_LEFT&&h.chartHalfType!==i.HALF_TYPE_RIGHT||(r=180)),!1===a&&this.T.forEach((t=>{t.angleFrom=r,t.angleTo=t.angleFrom+t.angle,t.middleAngle=t.angleFrom+(t.angleTo-t.angleFrom)/2,r+=t.angle})),!0===a)for(let t=this.T.length-1;t>=0;t--){const i=this.T[t];i.angleFrom=r,i.angleTo=i.angleFrom+i.angle,i.middleAngle=i.angleFrom+(i.angleTo-i.angleFrom)/2,r+=i.angle}}setDimensions(t,i){this.h=t,this.o=i}calculateInnerArea(){this.i.x=this.t.padding,this.i.y=this.t.padding,this.i.width=this.h-2*this.t.padding,this.i.height=this.o-2*this.t.padding}calculateConstants(){const t=this.t;let s=this.i.width/2;t.chartType!==i.TYPE_PIE_HALF&&t.chartType!==i.TYPE_DONUT_HALF||(s=t.chartHalfType===i.HALF_TYPE_TOP||t.chartHalfType===i.HALF_TYPE_BOTTOM?this.i.height:this.i.width),this.p=s,!0===t.highlight&&!0===t.selectable?t.highlightSize>t.selectableSize?this.p-=t.highlightSize:this.p-=t.selectableSize:!0===t.highlight?this.p-=t.highlightSize:!0===t.selectable&&(this.p-=t.selectableSize),this.l=s,!0===t.highlight&&!0===t.selectable?t.highlightSize>t.selectableSize?this.l-=t.highlightSize:this.l-=t.selectableSize:!0===t.highlight?this.l-=t.highlightSize:!0===t.selectable&&(this.l-=t.selectableSize),this.u=this.l-t.donutSize,!0===t.highlight&&(this.v=s,this.m=this.v-t.highlightSize),!0===t.selectable&&(this.M=s,this._=this.M-t.selectableSize);let h=-90,e=this.i.x+this.i.width/2,r=this.i.y+this.i.height/2;if(t.chartType!==i.TYPE_PIE_HALF&&t.chartType!==i.TYPE_DONUT_HALF||(t.chartHalfType===i.HALF_TYPE_TOP&&(r=this.i.y+this.i.height,h=-180),t.chartHalfType===i.HALF_TYPE_BOTTOM&&(r=this.i.y,h=0),t.chartHalfType===i.HALF_TYPE_LEFT&&(e=this.i.x+this.i.width,h=-90),t.chartHalfType===i.HALF_TYPE_RIGHT&&(e=this.i.x,h=90)),this.T.forEach((s=>{let o=(s.middleAngle+h)*this.A;t.chartType!==i.TYPE_PIE&&t.chartType!==i.TYPE_PIE_HALF||(s.middleRadius=this.p-t.label.textGap),t.chartType!==i.TYPE_DONUT&&t.chartType!==i.TYPE_DONUT_HALF||(s.middleRadius=this.u+(this.l-this.u)/2),s.middleX=e+s.middleRadius*Math.cos(o),s.middleY=r+s.middleRadius*Math.sin(o)})),1===this.T.length&&t.chartType===i.TYPE_PIE){const t=this.T[0];t.middleX=e,t.middleY=r}}P(t){let s="";return t.text?t.text:(this.t.label.labelType===i.LABEL_TYPE_PERCENTAGE&&(s=t.percentage.toFixed(0)+"%"),this.t.label.labelType===i.LABEL_TYPE_VALUE&&(s=this.t.label.textPrefix+t.value.toString()+this.t.label.textSuffix),this.t.label.labelType===i.LABEL_TYPE_CATEGORY&&(s=t.category),s)}k(t){return t}C(t){return t.category}F(t){if(t.text)return t.text;return t.value.toString()+" ("+t.percentage.toFixed(0)+"%)"}}class s{constructor(t,i){this.I=t,this.R=i,this.H=t.shadowRoot.querySelector(".base"),this.Y=t.shadowRoot.getElementById("chart"),this.O=t.shadowRoot.getElementById("popup"),this.Z=t.shadowRoot.getElementById("popup-color"),this.U=t.shadowRoot.getElementById("popup-info"),this.j=t.shadowRoot.getElementById("popup-value"),this.S=this.S.bind(this),this.q=this.q.bind(this),this.B=this.B.bind(this),this.D=[],this.G=null,this.N=null,this.V=null,this.W=null}addEvents(t){t.addEventListener("click",this.S),this.D.forEach((t=>{t.removeEventListener("pointermove",this.q),t.removeEventListener("pointerout",this.B)})),!0!==this.R.options.popup.show&&!0!==this.R.options.highlight||(this.D=this.I.shadowRoot.querySelectorAll("g.group"),this.D.forEach((t=>{t.addEventListener("pointermove",this.q),t.addEventListener("pointerout",this.B)})))}removeEvents(t){t.removeEventListener("click",this.S),this.D.forEach((t=>{t.removeEventListener("pointermove",this.q),t.removeEventListener("pointerout",this.B)}))}chartItemHighlight(t){if(null==t)return void this.J(null);if("number"!=typeof t)return;if(t<0)return;const i=this.I.shadowRoot.querySelector('g.group[data-index="'+t.toString()+'"]');i&&(this.J(i),!0===this.R.options.legend.showPopup&&this.K(i),this.X(i))}chartItemSelect(t){if(null==t)return void this.$(null,-1);if("number"!=typeof t)return;if(t<0)return;const i=this.I.shadowRoot.querySelector('g.group[data-index="'+t.toString()+'"]');i&&(this.$(i),this.tt(i))}S(t){let i=this.it(t);null!==i&&!1!==this.R.options.selectable&&(this.tt(i),this.$(i))}q(t){let i=this.it(t);null!==i&&i!==this.W&&(this.W=i,this.K(i),!0===this.R.options.highlight&&(this.X(i),this.J(i)))}B(t){this.W=null,this.J(null)}J(t){if(this.N&&(this.N.classList.remove("highlighting"),this.N=null),null===t)return this.O.style.display="none",void(this.V=null);t!==this.N&&void 0!==t.dataset.index&&(this.N=t,this.N.classList.add("highlighting"))}$(t){return null===t?(this.G&&this.G.classList.remove("select"),void(this.G=null)):t===this.G?(t.classList.remove("select"),void(this.G=null)):(this.G&&this.G.classList.remove("select"),this.G=t,void t.classList.add("select"))}X(t){const i=parseInt(t.dataset.index),s=new CustomEvent("highlighted",{bubbles:!0,composed:!0,detail:{index:i}});this.I.dispatchEvent(s)}tt(t){const i=parseInt(t.dataset.index),s=new CustomEvent("selected",{bubbles:!0,composed:!0,detail:{index:i}});this.I.dispatchEvent(s)}K(t){if(!1===this.R.options.popup.show)return;if(t===this.V)return;this.V=t;const i=parseInt(t.dataset.index);let s=0,h=0;const e=this.Y.querySelector('text[data-index="'+i.toString()+'"]');if(e){const t=e.getBoundingClientRect();s=t.width/2+2,h=t.height/2+2}const r=this.R.dataList[i],o=this.H.getBoundingClientRect(),a=this.Y.getBoundingClientRect(),n=a.left-o.left,p=a.top-o.top;let l=r.middleX,u=r.middleY;const c=a.width/2;this.O.style.opacity=0,this.O.style.display="grid",this.O.classList.remove("triangle-top","triangle-bottom","triangle-left","triangle-right"),this.st(r);const d=this.O.getBoundingClientRect();let g=null,f=null,v=null,m=null;l<c?u<=d.height?(this.O.classList.add("triangle-top"),v=u+p+h,g=l-d.width/2+n):u>a.height-d.height?(this.O.classList.add("triangle-bottom"),m=a.height-u+p+h,g=l-d.width/2+n):(this.O.classList.add("triangle-left"),v=u-d.height/2+p,g=l+n+s):u<=d.height?(this.O.classList.add("triangle-top"),v=u+p+h,f=a.width-l-d.width/2+n):u>a.height-d.height?(this.O.classList.add("triangle-bottom"),m=a.height-u+p+h,f=a.width-l-d.width/2+n):(this.O.classList.add("triangle-right"),v=u-d.height/2+p,f=a.width-l+n+s),this.O.style.left="",this.O.style.right="",this.O.style.top="",this.O.style.bottom="",g&&(this.O.style.left=g.toString()+"px"),f&&(this.O.style.right=f.toString()+"px"),v&&(this.O.style.top=v.toString()+"px"),m&&(this.O.style.bottom=m.toString()+"px"),this.O.style.opacity=1}st(t){const i=this.R.options,s=i.popup.formatInfoTextCallback(t),h=i.popup.formatValueTextCallback(t);this.Z.style.backgroundColor=t.color,this.U.innerText=s,this.j.innerText=h,this.O.classList.remove("has-info","has-value"),s&&this.O.classList.add("has-info"),h&&this.O.classList.add("has-value"),s||h||(this.O.style.display="none")}it(t){return!0===t.target.classList.contains("group")?t.target:!0===t.target.classList.contains("slice")||!0===t.target.classList.contains("highlight")?t.target.parentElement:null}}class h{constructor(t){this.R=t}create(t){this.R.calculateInnerArea(),this.R.calculateConstants();const s=[];t===i.TYPE_PIE&&this.ht(!1,!1,s),t===i.TYPE_DONUT&&this.ht(!1,!0,s),t===i.TYPE_PIE_HALF&&this.ht(!0,!1,s),t===i.TYPE_DONUT_HALF&&this.ht(!0,!0,s),this.et(s);return s.join("")}ht(t,s,h){const e=this.R.dataList;if(1===e.length&&!1===t)return void this.rt(e[0],t,s,h);const r=this.R.options,o=this.R.innerArea,a=this.R.pieRadius,n=this.R.donutRadiusTop,p=this.R.donutRadiusBottom,l=this.R.highlightRadiusTop,u=this.R.highlightRadiusBottom,c=this.R.selectableRadiusTop,d=this.R.selectableRadiusBottom;let g=-90;!0===t&&(g=180);let f=o.x+o.width/2,v=o.y+o.height/2;!0===t&&(r.chartHalfType===i.HALF_TYPE_TOP&&(v=o.y+o.height,g=180),r.chartHalfType===i.HALF_TYPE_BOTTOM&&(v=o.y,g=0),r.chartHalfType===i.HALF_TYPE_LEFT&&(f=o.x+o.width,g=-90),r.chartHalfType===i.HALF_TYPE_RIGHT&&(f=o.x,g=90)),e.forEach((t=>{const i=[],e=(t.angleFrom+g)*this.R.degreeToRadian,o=(t.angleTo+g)*this.R.degreeToRadian;let m="0";if(t.angleTo-t.angleFrom>180&&(m="1"),i.push('<g class="group" '),i.push('data-index="'+t.index.toString()+'"'),i.push('fill="'+t.color+'"'),i.push(">"),!0===r.selectable){const t=f+c*Math.cos(e),s=v+c*Math.sin(e),h=f+c*Math.cos(o),r=v+c*Math.sin(o),a=f+d*Math.cos(o),n=v+d*Math.sin(o),p=f+d*Math.cos(e),l=v+d*Math.sin(e);i.push('<path class="selectable"'),i.push(' d="'),i.push("M"),i.push(t.toString()),i.push(s.toString()),i.push("A"),i.push(c.toString()),i.push(c.toString()),i.push("0"),i.push(m),i.push("1"),i.push(h.toString()),i.push(r.toString()),i.push("L"),i.push(a.toString()),i.push(n.toString()),i.push("A"),i.push(d.toString()),i.push(d.toString()),i.push("0"),i.push(m),i.push("0"),i.push(p.toString()),i.push(l.toString()),i.push("L"),i.push(t.toString()),i.push(s.toString()),i.push("Z"),i.push('"></path>')}if(!0===r.highlight){const t=f+l*Math.cos(e),s=v+l*Math.sin(e),h=f+l*Math.cos(o),r=v+l*Math.sin(o),a=f+u*Math.cos(o),n=v+u*Math.sin(o),p=f+u*Math.cos(e),c=v+u*Math.sin(e);i.push('<path class="highlight"'),i.push(' d="'),i.push("M"),i.push(t.toString()),i.push(s.toString()),i.push("A"),i.push(l.toString()),i.push(l.toString()),i.push("0"),i.push(m),i.push("1"),i.push(h.toString()),i.push(r.toString()),i.push("L"),i.push(a.toString()),i.push(n.toString()),i.push("A"),i.push(u.toString()),i.push(u.toString()),i.push("0"),i.push(m),i.push("0"),i.push(p.toString()),i.push(c.toString()),i.push("L"),i.push(t.toString()),i.push(s.toString()),i.push("Z"),i.push('"></path>')}if(!0===s){const t=f+n*Math.cos(e),s=v+n*Math.sin(e),h=f+n*Math.cos(o),r=v+n*Math.sin(o),a=f+p*Math.cos(o),l=v+p*Math.sin(o),u=f+p*Math.cos(e),c=v+p*Math.sin(e);i.push('<path class="slice"'),i.push(' d="'),i.push("M"),i.push(t.toString()),i.push(s.toString()),i.push("A"),i.push(n.toString()),i.push(n.toString()),i.push("0"),i.push(m),i.push("1"),i.push(h.toString()),i.push(r.toString()),i.push("L"),i.push(a.toString()),i.push(l.toString()),i.push("A"),i.push(p.toString()),i.push(p.toString()),i.push("0"),i.push(m),i.push("0"),i.push(u.toString()),i.push(c.toString()),i.push("L"),i.push(t.toString()),i.push(s.toString()),i.push("Z"),i.push('"></path>')}if(!1===s){const t=f+a*Math.cos(e),s=v+a*Math.sin(e),h=f+a*Math.cos(o),r=v+a*Math.sin(o);i.push('<path class="slice"'),i.push(' d="'),i.push("M"),i.push(f.toString()),i.push(v.toString()),i.push("L"),i.push(t.toString()),i.push(s.toString()),i.push("A"),i.push(a.toString()),i.push(a.toString()),i.push("0"),i.push(m),i.push("1"),i.push(h.toString()),i.push(r.toString()),i.push("L"),i.push(f.toString()),i.push(v.toString()),i.push("Z"),i.push('"></path>')}i.push("</g>"),h.push(i.join(" "))})),h.push("</svg>")}et(t){const i=this.R.options;if(!1!==i.label.show)for(let s=0;s<this.R.dataList.length;s++){const h=this.R.dataList[s];if(h.percentage<i.label.showLimit)continue;const e=[],r=this.R.options.label.formatTextCallback(h);r&&(e.push('<text class="slice-text"'),e.push('data-index="'+s.toString()+'"'),e.push('x="'+h.middleX.toString()+'"'),e.push('y="'+h.middleY.toString()+'"'),e.push('dominant-baseline="middle" text-anchor="middle">'),e.push(r),e.push("</text>"),t.push(e.join(" ")))}}rt(t,s,h,e){const r=this.R.options,o=this.R.innerArea,a=this.R.pieRadius,n=this.R.donutRadiusTop,p=this.R.donutRadiusBottom,l=this.R.highlightRadiusTop,u=this.R.highlightRadiusBottom,c=this.R.selectableRadiusTop,d=this.R.selectableRadiusBottom;let g=o.x+o.width/2,f=o.y+o.height/2;!0===s&&(r.chartHalfType===i.HALF_TYPE_TOP&&(f=o.y+o.height),r.chartHalfType===i.HALF_TYPE_BOTTOM&&(f=o.y,angleDelta=0),r.chartHalfType===i.HALF_TYPE_LEFT&&(g=o.x+o.width),r.chartHalfType===i.HALF_TYPE_RIGHT&&(g=o.x));const v=[];v.push('<g class="group" '),v.push('data-index="'+t.index.toString()+'"'),v.push('fill="'+t.color+'"'),v.push(">"),!0===r.selectable&&(v.push('<path class="selectable" '),v.push('d="'),v.push("M"),v.push(g.toString()),v.push((f-c).toString()),v.push("A"),v.push(c.toString()),v.push(c.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((f+c).toString()),v.push("A"),v.push(c.toString()),v.push(c.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((f-c).toString()),v.push("Z"),v.push("M"),v.push(g.toString()),v.push((f-d).toString()),v.push("A"),v.push(d.toString()),v.push(d.toString()),v.push("0 0 1"),v.push(g.toString()),v.push((f+d).toString()),v.push("A"),v.push(d.toString()),v.push(d.toString()),v.push("0 0 1"),v.push(g.toString()),v.push((f-d).toString()),v.push("Z"),v.push('"></path>')),!0===r.highlight&&(v.push('<path class="highlight"'),v.push(' d="'),v.push("M"),v.push(g.toString()),v.push((f-l).toString()),v.push("A"),v.push(l.toString()),v.push(l.toString()),v.push("0 1 0 "),v.push(g.toString()),v.push((f+l).toString()),v.push("A"),v.push(l.toString()),v.push(l.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((g-l).toString()),v.push("Z"),v.push("M"),v.push(g.toString()),v.push((f-u).toString()),v.push("A"),v.push(u.toString()),v.push(u.toString()),v.push("0 0 1"),v.push(g.toString()),v.push((f+u).toString()),v.push("A"),v.push(u.toString()),v.push(u.toString()),v.push("0 0 1"),v.push(g.toString()),v.push((f-u).toString()),v.push("Z"),v.push('"></path>')),!0===h&&(v.push('<path class="slice"'),v.push(' d="'),v.push("M"),v.push(g.toString()),v.push((f-n).toString()),v.push("A"),v.push(n.toString()),v.push(n.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((f+n).toString()),v.push("A"),v.push(n.toString()),v.push(n.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((f-n).toString()),v.push("Z"),v.push("M"),v.push(g.toString()),v.push((f-p).toString()),v.push("A"),v.push(p.toString()),v.push(p.toString()),v.push("0 0 1"),v.push(g.toString()),v.push((f+p).toString()),v.push("A"),v.push(p.toString()),v.push(p.toString()),v.push("0 0 1"),v.push(g.toString()),v.push((f-p).toString()),v.push("Z"),v.push('"></path>')),!1===h&&(v.push('<path class="slice"'),v.push(' d="'),v.push("M"),v.push(g.toString()),v.push((f-a).toString()),v.push("A"),v.push(a.toString()),v.push(a.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((f+a).toString()),v.push("A"),v.push(a.toString()),v.push(a.toString()),v.push("0 1 0"),v.push(g.toString()),v.push((f-a).toString()),v.push("Z"),v.push('"></path>')),v.push("</g>"),e.push(v.join(" "))}}export class UiPieChart extends HTMLElement{constructor(){super(),this.R=new i,this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiPieChart.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiPieChart.uiCssStyleSheet],this.Y=this.shadowRoot.getElementById("chart"),this.ot=this.shadowRoot.getElementById("svg"),this.H=this.shadowRoot.querySelector(".base"),this.nt=new h(this.R),this.lt=new s(this,this.R),this.ut=this.ut.bind(this),this.h=0,this.o=0,this.ct=!1}connectedCallback(){this.dt=new ResizeObserver(this.ut),this.dt.observe(this.ot)}disconnectedCallback(){this.dt.unobserve(this.ot),this.lt.removeEvents(this.Y)}chartItemHighlight(t){!1!==this.R.options.highlight&&this.lt.chartItemHighlight(t)}chartItemSelect(t){!1!==this.R.options.selectable&&this.lt.chartItemSelect(t)}getColorList(){return this.R.colorList}setChart(t,i){if(this.R.processOptions(i),this.gt(),this.R.processData(t),this.ft(),0===this.h||0===this.o){const t=this.ot.getBoundingClientRect();this.h=t.width,this.o=t.height,this.ot.style.opacity=0,this.vt&&(clearTimeout(this.vt),this.vt=null),this.vt=setTimeout((()=>{this.bt(),this.ot.style.opacity=1}),250)}}ut(t){if(0===t.length)return;const i=t[0];let s=0,h=0;if(i.contentBoxSize)s=i.contentBoxSize[0].inlineSize,h=i.contentBoxSize[0].blockSize;else{if(!i.devicePixelContentBoxSize)throw new Error("SVG width/height problems");s=i.devicePixelContentBoxSize[0].inlineSize,h=i.devicePixelContentBoxSize[0].blockSize}s===this.h&&h===this.o||(this.h=s,this.o=h,this.ot.style.opacity=0,this.vt&&(clearTimeout(this.vt),this.vt=null),this.vt=setTimeout((()=>{this.bt(),this.ot.style.opacity=1}),250))}gt(){this.Y.classList.remove("highlight","selectable"),!0===this.R.options.highlight&&this.Y.classList.add("highlight"),!0===this.R.options.selectable&&this.Y.classList.add("selectable"),this.H.classList.remove("half","donut","half-top","half-bottom","half-left","half-right"),this.R.options.chartType!==i.TYPE_DONUT_HALF&&this.R.options.chartType!==i.TYPE_PIE_HALF||this.H.classList.add("half"),this.R.options.chartType!==i.TYPE_DONUT&&this.R.options.chartType!==i.TYPE_DONUT_HALF||this.H.classList.add("donut"),this.R.options.chartHalfType===i.HALF_TYPE_TOP&&this.H.classList.add("half-top"),this.R.options.chartHalfType===i.HALF_TYPE_BOTTOM&&this.H.classList.add("half-bottom"),this.R.options.chartHalfType===i.HALF_TYPE_LEFT&&this.H.classList.add("half-left"),this.R.options.chartHalfType===i.HALF_TYPE_RIGHT&&this.H.classList.add("half-right")}bt(){if(0===this.R.dataList.length)return;if(0===this.h||0===this.o)return;this.H.classList.remove("created"),this.R.setDimensions(this.h,this.o),this.ot.innerHTML="",this.ot.setAttribute("viewbox","0 0 "+this.h.toString()+" "+this.o.toString());const t=this.nt.create(this.R.options.chartType);this.ot.innerHTML=t,this.Y.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.Y.setAttribute("href","data:image/svg+xml,"+encodeURIComponent(this.ot.outerHTML)),this.lt.addEvents(this.Y),this.xt(),this.H.classList.add("created")}async ft(){const t=this.wt();if(!t)return;await customElements.whenDefined("ui-chart-legend");const i=[];for(let t=0;t<this.R.T.length;t++){const s=this.R.T[t],h={};h.color=s.color,h.legend=this.R.options.legend.formatTextCallback(s.category),h.index=t,i.push(h)}t.setChart(i,this)}xt(){if(this.R.options.chartType!==i.TYPE_DONUT&&this.R.options.chartType!==i.TYPE_DONUT_HALF)return;const t=this.shadowRoot.querySelector(".large"),s=this.shadowRoot.querySelector(".small"),h=this.Y.getBoundingClientRect(),e=45*this.R.degreeToRadian,r=this.R.donutRadiusBottom+2;if(this.R.options.chartType===i.TYPE_DONUT){const i=h.width/2-this.R.donutRadiusBottom*Math.cos(e);s.style.inset=i.toString()+"px";const o=h.width/2-this.R.donutRadiusBottom;t.style.inset=o.toString()+"px",t.style.clipPath="circle("+r.toString()+"px)"}if(this.R.options.chartType===i.TYPE_DONUT_HALF){if(this.R.options.chartHalfType===i.HALF_TYPE_TOP){const i=h.width/2-this.R.donutRadiusBottom*Math.cos(e),o=i-this.R.options.padding;s.style.left=i.toString()+"px",s.style.right=i.toString()+"px",s.style.top=o.toString()+"px",s.style.bottom=this.R.options.padding.toString()+"px";const a=h.width/2-this.R.donutRadiusBottom,n=h.height-this.R.donutRadiusBottom-this.R.options.padding;t.style.left=a.toString()+"px",t.style.right=a.toString()+"px",t.style.top=n.toString()+"px",t.style.bottom=this.R.options.padding.toString()+"px",t.style.clipPath="circle("+r.toString()+"px at bottom center)"}if(this.R.options.chartHalfType===i.HALF_TYPE_BOTTOM){const i=h.width/2-this.R.donutRadiusBottom*Math.cos(e),o=i-this.R.options.padding;s.style.left=i.toString()+"px",s.style.right=i.toString()+"px",s.style.top=this.R.options.padding.toString()+"px",s.style.bottom=o.toString()+"px";const a=h.width/2-this.R.donutRadiusBottom,n=h.height-this.R.donutRadiusBottom-this.R.options.padding;t.style.left=a.toString()+"px",t.style.right=a.toString()+"px",t.style.top=this.R.options.padding.toString()+"px",t.style.bottom=n.toString()+"px",t.style.clipPath="circle("+r.toString()+"px at top center)"}if(this.R.options.chartHalfType===i.HALF_TYPE_LEFT){const i=h.height/2-this.R.donutRadiusBottom*Math.cos(e),o=i-this.R.options.padding;s.style.left=o.toString()+"px",s.style.right=this.R.options.padding.toString()+"px",s.style.top=i.toString()+"px",s.style.bottom=i.toString()+"px";const a=h.width-this.R.donutRadiusBottom-this.R.options.padding,n=h.height/2-this.R.donutRadiusBottom;t.style.left=a.toString()+"px",t.style.right=this.R.options.padding.toString()+"px",t.style.top=n.toString()+"px",t.style.bottom=n.toString()+"px",t.style.clipPath="circle("+r.toString()+"px at right center)"}if(this.R.options.chartHalfType===i.HALF_TYPE_RIGHT){const i=h.height/2-this.R.donutRadiusBottom*Math.cos(e),o=i-this.R.options.padding;s.style.left=this.R.options.padding.toString()+"px",s.style.right=o.toString()+"px",s.style.top=i.toString()+"px",s.style.bottom=i.toString()+"px";const a=h.width-this.R.donutRadiusBottom-this.R.options.padding,n=h.height/2-this.R.donutRadiusBottom;t.style.left=this.R.options.padding.toString()+"px",t.style.right=a.toString()+"px",t.style.top=n.toString()+"px",t.style.bottom=n.toString()+"px",t.style.clipPath="circle("+r.toString()+"px at left center)"}}}wt(){if(!1===this.hasAttribute("id"))return;let t=this.getAttribute("id");if(!t)return;const i='ui-chart-legend[for="'+t+'"]';let s=!0,h=this;for(;h;){if(!0===s&&h.querySelector){const t=h.querySelector(i);if(t)return t}if(h.assignedSlot)h=h.assignedSlot,s=!1;else if(h.parentElement)h=h.parentElement,s=!0;else if(h.parentNode)h=h.parentNode,s=!1;else{if(!h.host)break;h=h.host,s=!0}}}}UiPieChart.uiCss=":host{isolation:isolate;}.base{position:relative;direction:ltr;width:100%;height:100%;background-color:var(--ui-pie-chart-background, var(--ui-background, hsl(0 0% 97% / 1)));}.base .square{position:absolute;inset:0;max-height:100%;max-width:100%;margin:auto;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;-webkit-tap-highlight-color:transparent;}.base.half.half-top .square, .base.half.half-bottom .square{aspect-ratio:2 / 1;}.base.half.half-left .square, .base.half.half-right .square{aspect-ratio:1 / 2;}.base:not(.half) .square{aspect-ratio:1 / 1;}#chart{grid-column:1;grid-row:1;position:relative;z-index:2;}#chart > svg{position:absolute;inset:0;height:100%;width:100%;max-width:100%;max-height:100%;opacity:0;transition:opacity var(--ui-pie-chart-animation-show-duraction, var(--ui-animation-duration-default, 200ms)) linear;pointer-events:none;}.group{pointer-events:all;stroke-width:0;stroke:var(--ui-pie-chart-gap-color, var(--ui-background, hsl(0 0% 97% / 1)));}.group .slice{stroke-linejoin:var(--ui-pie-chart-gap-linejoin, round);stroke-width:var(--ui-pie-chart-gap-width, 1px);}.group .selectable{display:none;}#chart.selectable .group.select .selectable{fill-opacity:var(--ui-pie-chart-select-opacity, 1.0);filter:var(--ui-pie-chart-select-filter, none);display:unset;}#chart.selectable .group:not(.select){cursor:pointer;}.group .highlight{display:none;}#chart.highlight .group.highlighting .highlight{fill-opacity:var(--ui-pie-chart-highlight-opacity, 0.8);filter:var(--ui-pie-chart-highlight-filter, brightness(125%));display:unset;}.slice-text{stroke:none;fill:var(--ui-pie-chart-label-color, hsl(0 0% 97% / 1));font-size:var(--ui-pie-chart-label-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-pie-chart-label-font-weight, var(--ui-font-weight-normal, normal));user-select:none;-webkit-user-select:none;}.base:not(.donut) .center{display:none;}.center{grid-column:1;grid-row:1;position:relative;}.small, .large{position:absolute;inset:0;}.large{background-color:var(--ui-pie-chart-inside, var(--ui-background, hsl(0 0% 97% / 1)));}#popup{position:absolute;display:none;z-index:3;pointer-events:none;--ui-cp-pbc:var(--ui-pie-chart-popup-background, var(--ui-foreground, hsl(0 0% 18% / 1)));--ui-cp-pts:var(--ui-pie-chart-popup-triangle-size, 8px);}#popup.triangle-top, #popup.triangle-bottom{grid-template-columns:1fr;grid-template-rows:auto auto;}#popup.triangle-left{grid-template-columns:1fr auto;grid-template-rows:1fr;}#popup.triangle-right{grid-template-columns:auto 1fr;grid-template-rows:1fr;}#popup.triangle-top .inner{grid-column:1;grid-row:2;}#popup.triangle-top .triangle{grid-column:1;grid-row:1;}#popup.triangle-bottom .inner{grid-column:1;grid-row:1;}#popup.triangle-bottom .triangle{grid-column:1;grid-row:2;}#popup.triangle-left .inner{grid-column:2;grid-row:1;}#popup.triangle-left .triangle{grid-column:1;grid-row:1;}#popup.triangle-right .inner{grid-column:1;grid-row:1;}#popup.triangle-right .triangle{grid-column:2;grid-row:1;}#popup .inner{display:grid;grid-template-columns:var(--ui-pie-chart-popup-tab, 8px) 1fr;grid-template-rows:auto 1fr;row-gap:var(--ui-pie-chart-popup-row-gap, 0);column-gap:var(--ui-pie-chart-popup-column-gap, 4px);min-width:var(--ui-pie-chart-popup-min-width, 100px);max-width:var(--ui-pie-chart-popup-max-width, 150px);padding:var(--ui-pie-chart-popup-padding, 4px);border-radius:var(--ui-pie-chart-popup-radius, var(--ui-border-radius-small, 3px));background-color:var(--ui-cp-pbc);color:var(--ui-pie-chart-popup-foreground, var(--ui-background, hsl(0 0% 90% / 1)));align-items:center;justify-items:center;user-select:none;-webkit-user-select:none;}#popup .triangle{width:0;height:0;}#popup.triangle-top .triangle{border-left:var(--ui-cp-pts) solid transparent;border-right:var(--ui-cp-pts) solid transparent;border-bottom:var(--ui-cp-pts) solid var(--ui-cp-pbc);justify-self:center;}#popup.triangle-bottom .triangle{border-left:var(--ui-cp-pts) solid transparent;border-right:var(--ui-cp-pts) solid transparent;border-top:var(--ui-cp-pts) solid var(--ui-cp-pbc);justify-self:center;}#popup.triangle-left .triangle{border-top:var(--ui-cp-pts) solid transparent;border-bottom:var(--ui-cp-pts) solid transparent;border-right:var(--ui-cp-pts) solid var(--ui-cp-pbc);align-self:center;}#popup.triangle-right .triangle{border-top:var(--ui-cp-pts) solid transparent;border-bottom:var(--ui-cp-pts) solid transparent;border-left:var(--ui-cp-pts) solid var(--ui-cp-pbc);align-self:center;}#popup.has-info.has-value{& #popup-info{grid-column:2;grid-row:1;}& #popup-value{grid-column:2;grid-row:2;}} #popup.has-value:not(.has-info){& .inner{min-width:0;}& #popup-info{display:none;}& #popup-value{grid-column:2;grid-row:1 / -1;}} #popup.has-info:not(.has-value){& .inner{min-width:0;}& #popup-info{grid-column:2;grid-row:1 / -1;}& #popup-value{display:none;}} #popup-info{font-size:var(--ui-pie-chart-popup-info-font-size, var(--ui-font-size-small, 12px));font-weight:var(--ui-pie-chart-popup-info-font-weight, var(--ui-font-weight-normal, normal));}#popup-value{font-size:var(--ui-pie-chart-popup-value-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-pie-chart-popup-value-font-weight, var(--ui-font-weight-bold, 600));}#popup-color{grid-column:1;grid-row:1 / -1;width:100%;height:100%;border-radius:2px;}.base:not(.created) slot::slotted(*){display:none;}::slotted(*:not(:defined)){display:none;}@media (prefers-reduced-motion){#chart > svg{transition:none;}}",UiPieChart.uiHtml='<div class="base"><div class="square"><div id="chart"><svg id="svg"></svg></div><div class="center"><div class="large"><slot name="large"></slot></div><div class="small"><slot name="small"></slot></div></div></div><div id="popup"><div class="triangle"></div><div class="inner"><div id="popup-color"></div><div id="popup-info"></div><div id="popup-value"></div></div></div></div>',t.createUi(UiPieChart,"ui-pie-chart",import.meta.url);