@mozaic-ds/chart 0.1.0-beta.2 → 0.1.0-beta.4

package/dist/mozaic-chart.js

@@ -9318,7 +9318,7 @@ const Pi = (i, t) => {
   for (const [n, s] of t)
     e[n] = s;
   return e;
-}, Qi = /* @__PURE__ */ Pi(Dd, [["__scopeId", "data-v-d13d8a6b"]]);
+}, Qi = /* @__PURE__ */ Pi(Dd, [["__scopeId", "data-v-7de032ad"]]);
 Qi.install = (i) => {
   i.component("BarChart", Qi);
 };

package/dist/mozaic-chart.umd.cjs

@@ -19,4 +19,4 @@ var Md=Object.defineProperty;var Cd=(X,v,ot)=>v in X?Md(X,v,{enumerable:!0,confi
     width: ${ui+4+"px"};
     height: ${ui+4+"px"};
     margin-right: ${Oo};
-    border-color: ${o};`)}function hn(i,t,e=!1){const n=i.config.type==="doughnut",s=n?t.index:t.datasetIndex,o=document.createElement("input");o.setAttribute("type","checkbox"),o.setAttribute("data-test-id",`legend-checkbox-${s}`);const a=n?i.getDataVisibility(s):i.isDatasetVisible(s);return Qh(a,t,o,e),o}function Eo(i){const{type:t}=i.config;return t==="pie"||t==="doughnut"}function Bo(i){let t=i.config.data.datasets;return Eo(i)&&(t=i.config.data.datasets[0].data),t}function zo(i,t,e){if(!e.value){const n=Bo(i);e.value=!0,n.forEach((s,o)=>{o!==t&&fi(i,o)})}}function Jh(i){let t=!0;return Bo(i).forEach((n,s)=>{t=t&&i.isDatasetVisible(s)}),t}function fi(i,t,e){Eo(i)?i.toggleDataVisibility(t):i.setDatasetVisibility(t,!i.isDatasetVisible(t)),e&&Jh(i)&&(e.value=!1),i.update()}function Wo(i,t){const e=Ro(i,""),n=Zh(i);return(i.index||i.datasetIndex)===0?t?n.style.borderRadius="25px":n.style.transform="rotate(45deg)":t?n.style.transform="rotate(45deg)":n.style.borderRadius="25px",e.appendChild(n),e}function dn(i,t){var n,s;let e=(n=i.value)==null?void 0:n.querySelector("ul");return e||(e=document.createElement("ul"),e.style.display="flex",e.style.flexDirection=t,e.style.margin="0",e.style.padding="0",(s=i.value)==null||s.appendChild(e)),e}function gi(i,t){const e=Math.round(Math.min(Math.max(t||1,0),1)*255);return i+e.toString(16).toUpperCase()}const{getPatternIndexWithShift:un}=rn();function td(){const i=v.ref(3),t=v.ref(null),e=v.reactive({dataSetIndex:-1,columnIndex:-1});function n(p,g,b,y,_){return Io(p,g,e,b,y,_)}function s(){i.value=4,i.value=3}function o(p,g,b,y,_,S){const x=i.value;return p.map((P,k)=>({borderColor:function(w){return b?"#00000000":r(k,w.index,y,S)},backgroundColor:function(w){return l(k,w.index,b,y,_,S)},borderWidth:function(){return b?1:x},data:P.data,label:P.label,stack:`Stack ${g?"0":k}`}))}function a(p,g,b,y,_){return o([p,g],!1,_,b,y)}function r(p,g,b,y){const _=un(p,y);return u(p,g)?b[_]:gi(b[_],.2)}function l(p,g,b,y,_,S){const x=un(p,S);return u(p,g)?_[x](!1,y[x],b):_[x](!0,y[x],b)}function c(){return e.dataSetIndex<0}function h(p,g){return e.dataSetIndex===p&&e.columnIndex===g}function d(p){return e.dataSetIndex===p&&e.columnIndex<0}function u(p,g){return c()||h(p,g)||d(p)}function f(){e.dataSetIndex=-1,e.columnIndex=-1}function m(){return(p,g)=>{g[0]!==void 0?(e.dataSetIndex=g[0].datasetIndex,e.columnIndex=g[0].index):f()}}return{onHoverIndex:e,reloadChart:s,getDatasets:a,getStackedDatasets:o,getOnHoverOptions:m,getBorderColor:r,getPattern:l,privateGetHtmlLegendPlugin:n,getPatternIndexWithShift:un,barChartRef:t,borderWidth:i}}const{getPatternCanvas:ed}=rn();class pi{constructor(){M(this,"chartType","");M(this,"datasetIndex",0);M(this,"dataIndex",0);M(this,"titleLines",[""]);M(this,"dataToDisplay","");M(this,"xValue","");M(this,"yValue","");M(this,"patternShifting",0)}createTooltip(t,e,n,s,o,a=!1){var c;if(!t.tooltip.dataPoints)return;this.datasetIndex=((c=t.tooltip)==null?void 0:c.dataPoints[0].datasetIndex)||0,this.dataIndex=t.tooltip.dataPoints[0].dataIndex||0,this.xValue=n.firstLineLabel||"",this.yValue=n.secondLineLabel||"",this.chartType=n.chartType,this.dataToDisplay=e(t),this.patternShifting=n.patternShifting||0;let r=document.querySelector("#chartjs-tooltip");r||(r=this.createNewTooltipElement());const l=t.tooltip;if(l.opacity===0){r.style.opacity="0";return}if(l.body){this.titleLines=l.title||[];const h=l.body.map(this.getBody);let d="background: white;";d+="border-bottom: 1px solid #CCCCCC;",d+="border-radius: 5px;",d+="padding: 10px 20px";const u=`<div style="${d}" class="tooltipTitle">`,f=this.chartType==="DOUGHNUT"?[l.title[0].split("(")[0].trim()]:h[0];let m="",p="";this.chartType==="RADAR"||this.chartType==="LINE_CHART"?(m=this.createLegendStyle(t),p=this.createLegendInnerStyle(t)):(this.chartType==="BAR_CHART"||this.chartType==="DETAILS_BAR_CHART"||this.chartType==="DOUGHNUT")&&(m=this.createPatternLegendStyle(t)),this.addLegendToDom(u,m,p,f,d,r,s,o,a)}this.handleTooltipPosition(t,l,r)}handleTooltipPosition(t,e,n){const s=t.chart.canvas.getBoundingClientRect(),o=window.innerWidth,a=s.left+window.pageXOffset+e.caretX,r=s.top+window.pageYOffset+e.caretY;n.style.left=a+"px",n.style.top=r+"px",n.style.height="auto",n.style.minWidth="17rem",n.style.opacity="1",n.style.position="absolute",n.style.zIndex="99",n.style.backgroundColor="white",n.style.pointerEvents="none",n.getBoundingClientRect().width+a>o&&(n.style.left=a-n.getBoundingClientRect().width+"px")}createNewTooltipElement(){const t=document.createElement("div");return t.id="chartjs-tooltip",t.style.backgroundColor="white",t.style.borderRadius="5px",t.style.transition="opacity .5s",t.style.boxShadow="0px 1px 5px rgba(0, 0, 0, 0.2)",t.innerHTML='<div class="tooltipCtn"></div>',document.body.appendChild(t),t}createPatternLegendStyle(t){return this.createCommonLegendSquareStyle(t)}createLegendStyle(t){let e=`background-color:${t.tooltip.labelColors[0].backgroundColor}`;return e+=this.createCommonLegendSquareStyle(t),e}createCommonLegendSquareStyle(t){let e=`;border: 2px solid ${t.tooltip.labelColors[0].borderColor}`;return e+=";min-height: 20px",e+=";min-width: 20px",e+=";border-radius: 5px",e+=";margin-right: 10px",e+=";display: flex",e+=";align-items: center",e+=";justify-content: center;",e}createLegendInnerStyle(t){let e="height: 12px";return e+=";width: 12px",e+=";background-color: #FFF",e+=`;border: 2px solid ${t.tooltip.labelColors[0].borderColor};`,t.tooltip.labelPointStyles[0].pointStyle==="circle"?e+="border-radius: 25px;":t.tooltip.labelPointStyles[0].pointStyle==="rectRot"&&(e+="transform: rotate(45deg);"),e}addLegendToDom(t,e,n,s,o,a,r,l,c=!1){let h=t,d=`<div class="legendIcon" style="${e}">`;const u=`<div style="${n}"></div>`;d+=`${u}</div>`;const f=this.setInnerHtmlToAdd(s,o,d);h+=f;const m=a==null?void 0:a.querySelector(".tooltipCtn");(m==null?void 0:m.innerHTML)!=null&&this.setInnerHtmlAndPattern(m,h,r,l,c)}setInnerHtmlToAdd(t,e,n){const a=`<span style="font-family: Arial; font-size: 16px">${t[0].split(":")[0]}</span>`;return this.chartType==="RADAR"?this.returnRadarHtml(e,n,a):this.chartType==="DOUGHNUT"?this.returnDoughnutHtml(n,a):this.returnDetailsBarchartHtml(e,n,a)}returnDoughnutHtml(t,e){const n="font-family: Arial; font-size: 16px",s=`<span style="${n}">${e.split("(")[0]}</span>`;let o=`<div style="${n}; display: flex; align-items: center; justify-content: space-between">`;return o+=`<div style="display:flex; align-items: center;" >${t+s}</div>`,o+=`<div style="${n}; margin-left:3rem;">${this.dataToDisplay}</div>`,o+="</div></div>",o}returnRadarHtml(t,e,n){const s="font-family: Arial; font-size: 16px";let o=`<div style="${s}; display: flex; align-items: center;">${e+n}</div>`;return o+="</div>",o+=`<div style="${s}; ${t}; border: none; display:flex; justify-content: space-between;">`,o+=`<div>${this.titleLines[0]}</div>`,o+=`<div style="margin-left: 20px;">${this.dataToDisplay}</div>`,o+="</div>",o+="</div><div>",o}returnDetailsBarchartHtml(t,e,n){const s="font-family: Arial; font-size: 16px";let o=`<div style="${s}; display: flex; align-items: center;">${e+n}</div>`;return o+="</div>",o+=`<div style="${s}; ${t}; display:flex; justify-content: space-between;">`,o+=`<div>${this.xValue}</div>`,o+=`<div style="margin-left: 20px;">${this.titleLines[0]}</div>`,o+="</div>",o+=`<div style="${s}; ${t}; border-: none; display:flex; justify-content: space-between;">`,o+=`<div>${this.yValue}</div>`,o+=`<div style="margin-left: 20px;">${this.dataToDisplay}</div>`,o+="</div>",o}setInnerHtmlAndPattern(t,e,n,s,o=!1){t.innerHTML=e;const a=document.querySelector(".legendIcon"),r=new Image;let l;this.chartType==="DOUGHNUT"?l=this.dataIndex+1:l=this.datasetIndex+1;const c=Hh(l,this.patternShifting);if(this.chartType!=="LINE_CHART"&&this.chartType!=="RADAR"){const h=s[c-1](!1,n[c-1],o),d=ed(h,22,22);r.src=d.toDataURL(),a.style.backgroundImage=`url(${r.src})`}}getBody(t){return t.lines}}var ve=(i=>(i.RADAR="RADAR",i.BAR_CHART="BAR_CHART",i.DETAILS_BAR_CHART="DETAILS_BAR_CHART",i.LINE_CHART="LINE_CHART",i.DOUGHNUT="DOUGHNUT",i))(ve||{});function id(i,t="#A274FF",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50,a=o*.15;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.006*o,s.rect(.5*o,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.006*o,s.rect(.75*o,o/2,a,a),s.fill(),s.beginPath(),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.006*o,s.rect(0,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.006*o,s.rect(.25*o,o/2,a,a),s.fill()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const l=document.createElement("canvas").getContext("2d");if(!l)return new CanvasPattern;const c=l.createPattern(n,"repeat");return c||new CanvasPattern}function nd(i,t="#143666",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(-o*.03,-.01*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.29*o,.33*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.63*o,.69*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.33*o,-.37*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.71*o,-.72*o,o+o/2,.04*o),s.fill(),s.restore()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const r=document.createElement("canvas").getContext("2d");if(!r)return new CanvasPattern;const l=r.createPattern(n,"repeat");return l||new CanvasPattern}function sd(i,t="#00A3B2",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,o/2),s.lineTo(0,0),s.lineTo(o/2,o/2),s.lineTo(o,0),s.stroke(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,o),s.lineTo(0,o/2),s.lineTo(o/2,o),s.lineTo(o,o/2),s.lineTo(o+o/2,o),s.stroke(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,111e-6),s.lineTo(4e-6*o,-o/2),s.lineTo(o/2,111e-6),s.lineTo(o,-o/2),s.lineTo(o+o/2,111e-6),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,o+o/2),s.lineTo(0,o),s.lineTo(o/2,o+o/2),s.lineTo(o,o),s.lineTo(o+o/2,o+o/2),s.stroke()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const r=document.createElement("canvas").getContext("2d");if(!r)return new CanvasPattern;const l=r.createPattern(n,"repeat");return l||new CanvasPattern}function od(i,t="#8C1551",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50,a=o*.15;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,a,o),s.fill(),s.beginPath(),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.005*o,s.rect(o/2,0,a,o),s.fill()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const l=document.createElement("canvas").getContext("2d");if(!l)return new CanvasPattern;const c=l.createPattern(n,"repeat");return c?(l.fillStyle=c,l.fillRect(0,0,o,o),c):new CanvasPattern}function ad(i,t="#F255A3",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=new DOMMatrix,a=21,r=.1*a;n.width=a,n.height=a,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,a,a),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*a,s.rect(0,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*a,s.rect(0,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=r,s.moveTo(r,0),s.lineTo(r,.5*a),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=r,s.moveTo(a/2+r,0),s.lineTo(a/2+r,.5*a),s.stroke()),i&&(s.beginPath(),s.fillStyle="#FFFFFF",s.globalAlpha=.5,s.lineWidth=.006*a,s.rect(0,0,a,a),s.fill());const l=document.createElement("canvas"),c=l.getContext("2d");if(!c)return new CanvasPattern;const h=c.createPattern(n,"repeat");return h?(c.fillStyle=h,c.fillRect(0,0,l.width,l.height),h.setTransform(o.rotate(45)),h):new CanvasPattern}function rd(i,t="#095359",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50,a=.04*o;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.1005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.1005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=a,s.arc(a+.06*o,a+.06*o,.06*o,0,2*Math.PI),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=a,s.arc(a+.56*o,a+.06*o,.06*o,0,2*Math.PI),s.stroke(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=.04*o,s.arc(-a+.44*o,a+.56*o,.06*o,0,2*Math.PI),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=.04*o,s.arc(-a+.94*o,a+.56*o,.06*o,0,2*Math.PI),s.stroke()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const r=document.createElement("canvas"),l=r.getContext("2d");if(!l)return new CanvasPattern;const c=l.createPattern(n,"repeat");return c?(l.fillStyle=c,l.fillRect(0,0,r.width,r.height),c):new CanvasPattern}function mi(){return{patternsStandardList:[id,nd,sd,od,ad,rd],colourSets:[["#393879","#006974","#405D68","#005C91","#8C3500","#8C0003"],["#A274FF","#143666","#00A3B2","#8C1551","#F255A3","#095359"],["#00A3B2","#143666","#3D993D","#8C1551","#E56D17","#4C3380"],["#8C1551","#E56D17","#4C3380","#4588E5","#095359","#F255A3"],["#4588E5","#4C3380","#E56D17","#143666","#D94141","#8C1551"],["#143666","#F255A3","#095359","#4588E5","#8C1551","#E56D17"],["#A274FF","#B0BBC0","#B0BBC0","#B0BBC0","#B0BBC0","#B0BBC0"]]}}const ld={class:"container"},cd={class:"main"},hd=v.defineComponent({__name:"BarChart",props:{chartId:{type:String,default:"radar-chart"},rawTitle:{type:String,default:"sales"},unit:{type:String,default:"%"},labels:{type:Array,default:()=>[]},colourSet:{type:Number,default:0},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},datasets:{type:Array,default:()=>[]},width:{type:String,default:"400px"},height:{type:String,default:"300px"},cssClasses:{default:"",type:String},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]},stacked:{type:Boolean,default:!1},disableAccessibility:{type:Boolean,default:!1},firstTooltip:{type:String,default:"content"},secondTooltip:{type:String,default:"content2"}},setup(i){const t=i;Wt.register(ii,si,ei,ti,oi,ri);const{colourSets:e,patternsStandardList:n}=mi(),s=v.ref(null),o=v.ref(!1),a=v.computed(()=>t.newPatternsOrder.length!==n.length?e[t.colourSet]:t.newPatternsOrder.map(C=>e[t.colourSet][C])),r=v.computed(()=>t.newPatternsOrder.length!==n.length?n:t.newPatternsOrder.map(C=>n[C])),l=v.computed(()=>t.disableAccessibility),{onHoverIndex:c,barChartRef:h,reloadChart:d,getOnHoverOptions:u,getStackedDatasets:f,privateGetHtmlLegendPlugin:m}=td(),p=v.computed(()=>{const C=P(_.value);return y(),{labels:C,datasets:f(t.datasets.map((A,D)=>({data:S(D,_.value),label:t.datasets[D].label})),t.stacked,t.disableAccessibility,a.value,r.value,0)}});let g,b;const y=()=>{g=t.firstTooltip,b=t.secondTooltip},_=v.computed(()=>{const C=t.labels;if(C.includes("other")){const A=C.indexOf("other");if(t.datasets[0].data[A].rate+""=="0"&&t.datasets[1].data[A].rate+""=="0")return A}return null}),S=(C,A,D=!1)=>{const T=Object.assign([],t.datasets[C].data);return A&&_.value&&T.splice(_.value,1),T.map($=>$.rate)},x=C=>{const A=C.tooltip.dataPoints[0].datasetIndex,D=C.tooltip.dataPoints[0].dataIndex,T=parseFloat(C.tooltip.body[0].lines[0].split(":")[1].replace(",",".")).toFixed(2)+"% ";if(!D||!A)return"";const $=t.datasets[A].data[D],Q=Nt($.amount);return T+Q+$.amountUnit},P=C=>{const A=Object.assign([],t.labels);return C&&A.splice(C,1),A.map(D=>D)},k=v.computed(()=>({onHover:u(),elements:{bar:{borderSkipped:!1}},plugins:{responsive:!0,maintainAspectRatio:!1,legend:{display:!1},title:{display:!1},tooltip:{enabled:!1,position:"nearest",external:function(C){new pi().createTooltip(C,x,{chartType:ve.BAR_CHART,firstLineLabel:g,secondLineLabel:b},a.value,r.value,t.disableAccessibility)}}},scales:{x:{stacked:!0},y:{stacked:!0,ticks:{callback:function(C){return Lo(C,t.unit)},maxTicksLimit:8}}}})),w=v.ref(m(s,o,l,a,r));return v.watch(c,()=>{d()},{deep:!0}),(C,A)=>(v.openBlock(),v.createElementBlock("div",ld,[v.createElementVNode("div",cd,[p.value?(v.openBlock(),v.createBlock(v.unref(Eh),{key:0,ref_key:"barChartRef",ref:h,data:p.value,options:k.value,plugins:w.value,style:v.normalizeStyle({width:i.width,height:i.height}),"chart-id":i.chartId,"cssClasses:":i.cssClasses,styles:i.styles},null,8,["data","options","plugins","style","chart-id","cssClasses:","styles"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:s},null,512)]))}}),Pd="",bi=(i,t)=>{const e=i.__vccOpts||i;for(const[n,s]of t)e[n]=s;return e},yi=bi(hd,[["__scopeId","data-v-d13d8a6b"]]);yi.install=i=>{i.component("BarChart",yi)};function dd(){const i=v.ref(null),t=v.ref(null),e=v.ref(null);function n(h,d,u,f,m,p,g){return Io(h,d,t,u,f,m,p,g)}function s(h,d,u){return t.value!==null?d.map((f,m)=>t.value===m?f(!1,h[m],u):f(!0,h[m],u)):d.map((f,m)=>f(!1,h[m],u))}function o(h){return t.value!==null?h.map((d,u)=>t.value===u?d:gi(d,.2)):h}function a(){return(h,d)=>{d[0]!==void 0?t.value=d[0].element.$context.index:t.value=null}}const r=h=>h.charAt(0).toUpperCase()+h.slice(1).toLowerCase();function l(h,d,u){let f=h.slice(0),m=d.slice(0);return h.length>u&&(m=c(d,u),f=f.slice(0,u-1),f.push("others")),f.map((p,g)=>`${r(p)} (${Nt(m[g].rate)} %)`)}function c(h,d){if(d<1)return h;let u=h.slice(0);return h.length>d&&(u=u.slice(0,d),u[d-1]=h.slice(d).reduce((f,m)=>(f.rate+=m.rate,f.value+=m.value,f),{rate:h[d-1].rate,value:h[d-1].value})),u}return{onHoverIndex:t,privateGetHtmlLegendPlugin:n,getOnHoverOptions:a,groupDataAfterNthValue:c,getDoughnutLabels:l,getBackgroundColor:s,getFormatedText:r,getBorderColor:o,backgroundColor:e,doughnutRef:i}}const ud={class:"container"},fd={class:"main"},gd=v.defineComponent({__name:"DoughnutChart",props:{chartId:{type:String,default:"doughnut-chart"},data:{type:Array,default:()=>[]},labels:{type:Array,default:()=>[]},cssClasses:{default:"",type:String},disableAccessibility:{type:Boolean,default:!1},colourSet:{default:"0",type:Number},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},width:{type:String,default:"400px"},height:{type:String,default:"400px"},maxValues:{type:Number,default:5},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]}},setup(i){const t=i;Wt.register(ii,si,ei,me);const{colourSets:e,patternsStandardList:n}=mi(),{onHoverIndex:s,doughnutRef:o,getBackgroundColor:a,privateGetHtmlLegendPlugin:r,getOnHoverOptions:l,groupDataAfterNthValue:c,getDoughnutLabels:h,getBorderColor:d}=dd(),u=v.ref(!1),f=v.ref(null),m=v.computed(()=>t.newPatternsOrder.length!==6?e[t.colourSet]:t.newPatternsOrder.map(k=>e[t.colourSet][k])),p=v.computed(()=>t.newPatternsOrder.length!==6?n:t.newPatternsOrder.map(k=>n[k])),g=v.computed(()=>({labels:h(t.labels,t.data,t.maxValues),datasets:[{data:c(t.data,t.maxValues).map(k=>k.rate),backgroundColor:a(m.value,p.value,t.disableAccessibility),borderColor:d(m.value)}]})),b=k=>{const w=k.tooltip.dataPoints[0].dataIndex;if(!w)return"";const C=c(t.data,t.maxValues)[w],A=Nt(C.rate),D=Nt(C.value),T=C.unit||"";return`${D}${T} (${A})%`};function y(){return t.labels.length<=1?0:12}const _=v.computed(()=>{const k=m.value,w=p.value;return{onHover:l(),plugins:{legend:{display:!1,position:"bottom",align:"start",labels:{pointStyle:"rectRounded",usePointStyle:!0}},title:{display:!1},tooltip:{enabled:!1,external:function(C){new pi().createTooltip(C,b,{chartType:ve.DOUGHNUT},k,w,x.value)}}},radius:"90%",cutout:"70%",borderWidth:3,spacing:y(),hoverOffset:4}}),S={data:t.data,labels:t.labels},x=v.computed(()=>t.disableAccessibility),P=v.computed(()=>r(f,u,x,m,p,t.maxValues,S));return v.onMounted(()=>{a(m.value,p.value,t.disableAccessibility)}),v.watch(s,(k,w)=>{k!==w&&a(m.value,p.value,t.disableAccessibility)}),v.watch(x,()=>{a(m.value,p.value,t.disableAccessibility)}),(k,w)=>(v.openBlock(),v.createElementBlock("div",ud,[v.createElementVNode("div",fd,[g.value?(v.openBlock(),v.createBlock(v.unref(Bh),{key:0,ref_key:"doughnutRef",ref:o,data:g.value,options:_.value,plugins:P.value,"cssClasses:":i.cssClasses,"max-values":i.maxValues,style:v.normalizeStyle({width:i.width,height:i.height,cursor:"pointer"})},null,8,["data","options","plugins","cssClasses:","max-values","style"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:f},null,512)]))}}),Ad="",xi=bi(gd,[["__scopeId","data-v-d03b50b1"]]);xi.install=i=>{i.component("DoughnutChart",xi)};const pd={class:"container"},md={class:"main"},bd="months",yd=v.defineComponent({__name:"LineChart",props:{chartId:{type:String,default:"radar-chart"},rawTitle:{type:String,default:"sales"},width:{type:String,default:"200px"},height:{type:String,default:"400px"},disableAccessibility:{type:Boolean,default:!1},colourSet:{type:Number,default:0},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},lines:{type:Array,default:()=>{}},labels:{type:Array,default:()=>[]},cssClasses:{default:"",type:String},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]}},setup(i){const t=i;Wt.register(ii,si,ei,be,bt,oi,ri);const{colourSets:e,patternsStandardList:n}=mi(),s=v.ref(null),o=v.ref(!1),a=v.computed(()=>t.newPatternsOrder.length!==6?e[t.colourSet]:t.newPatternsOrder.map(p=>e[t.colourSet][p])),r=t.newPatternsOrder.length!==6?n:t.newPatternsOrder.map(p=>n[p]),l=p=>{const g=p.tooltip.dataPoints[0].datasetIndex,b=p.tooltip.dataPoints[0].dataIndex;if(!b||!g)return"";const y=t.lines[g].data[b].toFixed(2);return t.lines[g].unit?y+" "+t.lines[g].unit:y},c=v.computed(()=>t.rawTitle),h=v.computed(()=>({labels:t.labels.map(p=>p),datasets:[{type:"line",borderColor:a.value[0],pointStyle:"rectRot",pointBackgroundColor:"#FFFFFF",pointRadius:5,label:t.lines[0].label,data:t.lines[0].data,borderWidth:2},{type:"line",borderColor:a.value[1],pointStyle:"circle",pointBackgroundColor:"#FFFFFF",pointRadius:5,label:t.lines[1].label,data:t.lines[1].data,borderWidth:2}]}));function d(p,g){return[{id:"htmlLegend",afterUpdate(b){const y=dn(p,"column");for(y.style.display="flex",y.style.flexDirection="row";y.firstChild;)y.firstChild.remove();b.options.plugins.legend.labels.generateLabels(b).forEach(S=>{const x=cn(b,g,S.datasetIndex);let P;g.value?P=u(b,S):P=Wo(S),x.style.marginRight="10px",x.appendChild(P),x.appendChild(ln(S)),y.appendChild(x)})}}]}function u(p,g){const b=hn(p,g);return b.onclick=y=>{fi(p,g.datasetIndex,o),y.stopPropagation()},b}const f=d(s,o),m=v.computed(()=>({responsive:!0,maintainAspectRatio:!0,plugins:{legend:{display:!1},tooltip:{enabled:!1,external:function(p){new pi().createTooltip(p,l,{chartType:ve.LINE_CHART,firstLineLabel:bd,secondLineLabel:c.value},a.value,r,t.disableAccessibility)}}},scales:{x:{offset:!0},y:{type:"linear",display:!0,position:"left",grid:{drawOnChartArea:!0},ticks:{callback:function(p){const g=t.lines[0].unit;return Lo(p,g||null)},maxTicksLimit:8}}}}));return(p,g)=>(v.openBlock(),v.createElementBlock("div",pd,[v.createElementVNode("div",md,[h.value?(v.openBlock(),v.createBlock(v.unref(zh),{key:0,ref:"cockpitLineChartRef",data:h.value,options:m.value,plugins:v.unref(f),"chart-id":i.chartId,"cssClasses:":i.cssClasses,styles:i.styles,style:v.normalizeStyle({width:i.width,height:i.height,cursor:"pointer"})},null,8,["data","options","plugins","chart-id","cssClasses:","styles","style"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:s},null,512)]))}}),Dd="",_i=bi(yd,[["__scopeId","data-v-ecb2ed0e"]]);_i.install=i=>{i.component("LineChart",_i)};function xd(i,t){const e=i.ctx,n=i.scales.r,s=i.data.labels;!e||!n||!s||(e.save(),s.forEach((o,a)=>{const r=(n.getIndexAngle(a)-Math.PI/2)%(2*Math.PI),l=n.getPointPositionForValue(a,n.max);e.textAlign=r<=Math.PI/2||r>3*Math.PI/2?"left":"right";let c=r<=Math.PI/2||r>3*Math.PI/2?15:-15,h;r<0||r>Math.PI?h=-15:h=15,r>Math.PI/4&&r<3*Math.PI/4&&(h*=3),(r<-Math.PI/4||r>5*Math.PI/4)&&(h*=3,c=0),(r>11*Math.PI/8||r<-3*Math.PI/8)&&(e.textAlign="center");const d=l.y+h*(o.length-1)/2;e.font="15px Arial",o.forEach((u,f)=>{const m=f===o.length-1?_d(t)[a]:"#000000";e.fillStyle=m;const p=l.x+c,g=d+15*f;e.fillText(u,p,g)})}),e.restore())}const _d=i=>i.areas[0].areaData.map(t=>{switch(t.color){case"red":return"#C61112";case"green":return"#46A610";default:return"#000000"}}),vd={class:"container"},Sd={class:"main"},kd=v.defineComponent({__name:"RadarChart",props:{chartId:{type:String,default:"radar-chart"},height:{type:String,default:"400px"},labels:{type:Array,default:()=>[]},disableAccessibility:{type:Boolean,default:!1},colourSet:{type:Number,default:0},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},areas:{type:Array,default:()=>[]},cssClasses:{default:"",type:String},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]}},setup(i){const t=i;Wt.register(ii,si,ei,_e,bt,be,qc);const{colourSets:e,patternsStandardList:n}=mi(),s=v.computed(()=>t.newPatternsOrder.length!==6?e[t.colourSet]:t.newPatternsOrder.map(g=>e[t.colourSet][g])),o=v.computed(()=>t.newPatternsOrder.length!==6?n:t.newPatternsOrder.map(g=>n[g])),a=v.computed(()=>({labels:d(),datasets:[{label:"Data One",backgroundColor:gi(s.value[0],.1),borderColor:s.value[0],pointBackgroundColor:"#FFFFFF",pointBorderColor:s.value[0],pointBorderWidth:2,borderWidth:2,pointHitRadius:55,pointRadius:5,pointHoverBackgroundColor:s.value[0],pointHoverBorderColor:s.value[0],data:t.areas[0].areaData.map(g=>g.position)},{label:"Data Two",backgroundColor:gi(s.value[1],.1),borderColor:s.value[1],pointBackgroundColor:"#FFFFFF",pointBorderColor:s.value[1],pointBorderWidth:2,borderWidth:2,pointHitRadius:55,pointRadius:5,pointStyle:"rectRot",pointHoverBackgroundColor:s.value[1],pointHoverBorderColor:s.value[1],data:t.areas[1].areaData.map(g=>g.position)}]})),r={onClick:(g,b,y)=>{b[0]&&zo(y,b[0].datasetIndex,c)},plugins:{htmlLegend:{containerID:"legend-container"},legend:{display:!1},title:{display:!1},tooltip:{enabled:!1,position:"nearest",external:function(g){new pi().createTooltip(g,p,{chartType:ve.RADAR},s.value,o.value,t.disableAccessibility)}}},layout:{padding:65},scales:{r:{min:0,max:100,pointLabels:{display:!1,font:{size:16}},ticks:{display:!1,stepSize:25}}}},l=v.ref(null),c=v.ref(!1);function h(g,b){if(g.length>15&&g.includes(" ",15)){const _=g.indexOf(" ",15);return[g.substring(0,_),g.substring(_),b]}return[g,b]}const d=()=>t.labels.map((g,b)=>{const y=t.areas[0].areaData[b].value?`${u(t.areas[0].areaData[b].value+"")} ${t.areas[0].areaData[b].unit}`:"No Data";return h(g,y)}),u=g=>Nt(parseFloat(g));function f(g,b){const y=hn(g,b);return y.onclick=_=>{fi(g,b.datasetIndex,c),_.stopPropagation()},y}const m=[{id:"htmlLegend",afterUpdate(g){const b=dn(l,"row");for(;b.firstChild;)b.firstChild.remove();g.options.plugins.legend.labels.generateLabels(g).reverse().forEach(_=>{const S=cn(g,c,_.datasetIndex);let x;S.style.marginRight="0.625rem",c.value?x=f(g,_):x=Wo(_,!0),S.appendChild(x),S.appendChild(ln(_)),b.appendChild(S)})}},{id:"radarLabelPlugin",beforeDraw(g){xd(g,t)}}],p=g=>{const b=g.tooltip.dataPoints[0].datasetIndex,y=g.tooltip.dataPoints[0].dataIndex;if(b&&y){const _=t.areas[b];return _.areaData[y].value.toFixed(2)+" "+_.areaData[y].unit}return""};return(g,b)=>(v.openBlock(),v.createElementBlock("div",vd,[v.createElementVNode("div",Sd,[a.value?(v.openBlock(),v.createBlock(v.unref(Wh),{key:0,data:a.value,options:r,plugins:m,"chart-id":i.chartId,"cssClasses:":i.cssClasses,styles:i.styles,style:v.normalizeStyle({height:i.height,cursor:"pointer"})},null,8,["data","chart-id","cssClasses:","styles","style"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:l,class:"legendContainer"},null,512)]))}}),Td="",vi=bi(kd,[["__scopeId","data-v-9ec69ee9"]]);vi.install=i=>{i.component("RadarChart",vi)};const Ho=Object.freeze(Object.defineProperty({__proto__:null,BarChart:yi,DoughnutChart:xi,LineChart:_i,RadarChart:vi},Symbol.toStringTag,{value:"Module"})),wd={install:(i,t)=>{Object.keys(Ho).forEach(e=>{i.component(e,Ho[e])})}};X.BarChart=yi,X.DoughnutChart=xi,X.LineChart=_i,X.RadarChart=vi,X.default=wd,Object.defineProperties(X,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+    border-color: ${o};`)}function hn(i,t,e=!1){const n=i.config.type==="doughnut",s=n?t.index:t.datasetIndex,o=document.createElement("input");o.setAttribute("type","checkbox"),o.setAttribute("data-test-id",`legend-checkbox-${s}`);const a=n?i.getDataVisibility(s):i.isDatasetVisible(s);return Qh(a,t,o,e),o}function Eo(i){const{type:t}=i.config;return t==="pie"||t==="doughnut"}function Bo(i){let t=i.config.data.datasets;return Eo(i)&&(t=i.config.data.datasets[0].data),t}function zo(i,t,e){if(!e.value){const n=Bo(i);e.value=!0,n.forEach((s,o)=>{o!==t&&fi(i,o)})}}function Jh(i){let t=!0;return Bo(i).forEach((n,s)=>{t=t&&i.isDatasetVisible(s)}),t}function fi(i,t,e){Eo(i)?i.toggleDataVisibility(t):i.setDatasetVisibility(t,!i.isDatasetVisible(t)),e&&Jh(i)&&(e.value=!1),i.update()}function Wo(i,t){const e=Ro(i,""),n=Zh(i);return(i.index||i.datasetIndex)===0?t?n.style.borderRadius="25px":n.style.transform="rotate(45deg)":t?n.style.transform="rotate(45deg)":n.style.borderRadius="25px",e.appendChild(n),e}function dn(i,t){var n,s;let e=(n=i.value)==null?void 0:n.querySelector("ul");return e||(e=document.createElement("ul"),e.style.display="flex",e.style.flexDirection=t,e.style.margin="0",e.style.padding="0",(s=i.value)==null||s.appendChild(e)),e}function gi(i,t){const e=Math.round(Math.min(Math.max(t||1,0),1)*255);return i+e.toString(16).toUpperCase()}const{getPatternIndexWithShift:un}=rn();function td(){const i=v.ref(3),t=v.ref(null),e=v.reactive({dataSetIndex:-1,columnIndex:-1});function n(p,g,b,y,_){return Io(p,g,e,b,y,_)}function s(){i.value=4,i.value=3}function o(p,g,b,y,_,S){const x=i.value;return p.map((P,k)=>({borderColor:function(w){return b?"#00000000":r(k,w.index,y,S)},backgroundColor:function(w){return l(k,w.index,b,y,_,S)},borderWidth:function(){return b?1:x},data:P.data,label:P.label,stack:`Stack ${g?"0":k}`}))}function a(p,g,b,y,_){return o([p,g],!1,_,b,y)}function r(p,g,b,y){const _=un(p,y);return u(p,g)?b[_]:gi(b[_],.2)}function l(p,g,b,y,_,S){const x=un(p,S);return u(p,g)?_[x](!1,y[x],b):_[x](!0,y[x],b)}function c(){return e.dataSetIndex<0}function h(p,g){return e.dataSetIndex===p&&e.columnIndex===g}function d(p){return e.dataSetIndex===p&&e.columnIndex<0}function u(p,g){return c()||h(p,g)||d(p)}function f(){e.dataSetIndex=-1,e.columnIndex=-1}function m(){return(p,g)=>{g[0]!==void 0?(e.dataSetIndex=g[0].datasetIndex,e.columnIndex=g[0].index):f()}}return{onHoverIndex:e,reloadChart:s,getDatasets:a,getStackedDatasets:o,getOnHoverOptions:m,getBorderColor:r,getPattern:l,privateGetHtmlLegendPlugin:n,getPatternIndexWithShift:un,barChartRef:t,borderWidth:i}}const{getPatternCanvas:ed}=rn();class pi{constructor(){M(this,"chartType","");M(this,"datasetIndex",0);M(this,"dataIndex",0);M(this,"titleLines",[""]);M(this,"dataToDisplay","");M(this,"xValue","");M(this,"yValue","");M(this,"patternShifting",0)}createTooltip(t,e,n,s,o,a=!1){var c;if(!t.tooltip.dataPoints)return;this.datasetIndex=((c=t.tooltip)==null?void 0:c.dataPoints[0].datasetIndex)||0,this.dataIndex=t.tooltip.dataPoints[0].dataIndex||0,this.xValue=n.firstLineLabel||"",this.yValue=n.secondLineLabel||"",this.chartType=n.chartType,this.dataToDisplay=e(t),this.patternShifting=n.patternShifting||0;let r=document.querySelector("#chartjs-tooltip");r||(r=this.createNewTooltipElement());const l=t.tooltip;if(l.opacity===0){r.style.opacity="0";return}if(l.body){this.titleLines=l.title||[];const h=l.body.map(this.getBody);let d="background: white;";d+="border-bottom: 1px solid #CCCCCC;",d+="border-radius: 5px;",d+="padding: 10px 20px";const u=`<div style="${d}" class="tooltipTitle">`,f=this.chartType==="DOUGHNUT"?[l.title[0].split("(")[0].trim()]:h[0];let m="",p="";this.chartType==="RADAR"||this.chartType==="LINE_CHART"?(m=this.createLegendStyle(t),p=this.createLegendInnerStyle(t)):(this.chartType==="BAR_CHART"||this.chartType==="DETAILS_BAR_CHART"||this.chartType==="DOUGHNUT")&&(m=this.createPatternLegendStyle(t)),this.addLegendToDom(u,m,p,f,d,r,s,o,a)}this.handleTooltipPosition(t,l,r)}handleTooltipPosition(t,e,n){const s=t.chart.canvas.getBoundingClientRect(),o=window.innerWidth,a=s.left+window.pageXOffset+e.caretX,r=s.top+window.pageYOffset+e.caretY;n.style.left=a+"px",n.style.top=r+"px",n.style.height="auto",n.style.minWidth="17rem",n.style.opacity="1",n.style.position="absolute",n.style.zIndex="99",n.style.backgroundColor="white",n.style.pointerEvents="none",n.getBoundingClientRect().width+a>o&&(n.style.left=a-n.getBoundingClientRect().width+"px")}createNewTooltipElement(){const t=document.createElement("div");return t.id="chartjs-tooltip",t.style.backgroundColor="white",t.style.borderRadius="5px",t.style.transition="opacity .5s",t.style.boxShadow="0px 1px 5px rgba(0, 0, 0, 0.2)",t.innerHTML='<div class="tooltipCtn"></div>',document.body.appendChild(t),t}createPatternLegendStyle(t){return this.createCommonLegendSquareStyle(t)}createLegendStyle(t){let e=`background-color:${t.tooltip.labelColors[0].backgroundColor}`;return e+=this.createCommonLegendSquareStyle(t),e}createCommonLegendSquareStyle(t){let e=`;border: 2px solid ${t.tooltip.labelColors[0].borderColor}`;return e+=";min-height: 20px",e+=";min-width: 20px",e+=";border-radius: 5px",e+=";margin-right: 10px",e+=";display: flex",e+=";align-items: center",e+=";justify-content: center;",e}createLegendInnerStyle(t){let e="height: 12px";return e+=";width: 12px",e+=";background-color: #FFF",e+=`;border: 2px solid ${t.tooltip.labelColors[0].borderColor};`,t.tooltip.labelPointStyles[0].pointStyle==="circle"?e+="border-radius: 25px;":t.tooltip.labelPointStyles[0].pointStyle==="rectRot"&&(e+="transform: rotate(45deg);"),e}addLegendToDom(t,e,n,s,o,a,r,l,c=!1){let h=t,d=`<div class="legendIcon" style="${e}">`;const u=`<div style="${n}"></div>`;d+=`${u}</div>`;const f=this.setInnerHtmlToAdd(s,o,d);h+=f;const m=a==null?void 0:a.querySelector(".tooltipCtn");(m==null?void 0:m.innerHTML)!=null&&this.setInnerHtmlAndPattern(m,h,r,l,c)}setInnerHtmlToAdd(t,e,n){const a=`<span style="font-family: Arial; font-size: 16px">${t[0].split(":")[0]}</span>`;return this.chartType==="RADAR"?this.returnRadarHtml(e,n,a):this.chartType==="DOUGHNUT"?this.returnDoughnutHtml(n,a):this.returnDetailsBarchartHtml(e,n,a)}returnDoughnutHtml(t,e){const n="font-family: Arial; font-size: 16px",s=`<span style="${n}">${e.split("(")[0]}</span>`;let o=`<div style="${n}; display: flex; align-items: center; justify-content: space-between">`;return o+=`<div style="display:flex; align-items: center;" >${t+s}</div>`,o+=`<div style="${n}; margin-left:3rem;">${this.dataToDisplay}</div>`,o+="</div></div>",o}returnRadarHtml(t,e,n){const s="font-family: Arial; font-size: 16px";let o=`<div style="${s}; display: flex; align-items: center;">${e+n}</div>`;return o+="</div>",o+=`<div style="${s}; ${t}; border: none; display:flex; justify-content: space-between;">`,o+=`<div>${this.titleLines[0]}</div>`,o+=`<div style="margin-left: 20px;">${this.dataToDisplay}</div>`,o+="</div>",o+="</div><div>",o}returnDetailsBarchartHtml(t,e,n){const s="font-family: Arial; font-size: 16px";let o=`<div style="${s}; display: flex; align-items: center;">${e+n}</div>`;return o+="</div>",o+=`<div style="${s}; ${t}; display:flex; justify-content: space-between;">`,o+=`<div>${this.xValue}</div>`,o+=`<div style="margin-left: 20px;">${this.titleLines[0]}</div>`,o+="</div>",o+=`<div style="${s}; ${t}; border-: none; display:flex; justify-content: space-between;">`,o+=`<div>${this.yValue}</div>`,o+=`<div style="margin-left: 20px;">${this.dataToDisplay}</div>`,o+="</div>",o}setInnerHtmlAndPattern(t,e,n,s,o=!1){t.innerHTML=e;const a=document.querySelector(".legendIcon"),r=new Image;let l;this.chartType==="DOUGHNUT"?l=this.dataIndex+1:l=this.datasetIndex+1;const c=Hh(l,this.patternShifting);if(this.chartType!=="LINE_CHART"&&this.chartType!=="RADAR"){const h=s[c-1](!1,n[c-1],o),d=ed(h,22,22);r.src=d.toDataURL(),a.style.backgroundImage=`url(${r.src})`}}getBody(t){return t.lines}}var ve=(i=>(i.RADAR="RADAR",i.BAR_CHART="BAR_CHART",i.DETAILS_BAR_CHART="DETAILS_BAR_CHART",i.LINE_CHART="LINE_CHART",i.DOUGHNUT="DOUGHNUT",i))(ve||{});function id(i,t="#A274FF",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50,a=o*.15;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.006*o,s.rect(.5*o,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.006*o,s.rect(.75*o,o/2,a,a),s.fill(),s.beginPath(),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.006*o,s.rect(0,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.006*o,s.rect(.25*o,o/2,a,a),s.fill()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const l=document.createElement("canvas").getContext("2d");if(!l)return new CanvasPattern;const c=l.createPattern(n,"repeat");return c||new CanvasPattern}function nd(i,t="#143666",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(-o*.03,-.01*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.29*o,.33*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.63*o,.69*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.33*o,-.37*o,o+o/2,.04*o),s.fill(),s.restore(),s.save(),s.beginPath(),s.transform(.708293,.705919,-.666352,.745637,0,0),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.075*o,s.miterLimit=4,s.rect(.71*o,-.72*o,o+o/2,.04*o),s.fill(),s.restore()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const r=document.createElement("canvas").getContext("2d");if(!r)return new CanvasPattern;const l=r.createPattern(n,"repeat");return l||new CanvasPattern}function sd(i,t="#00A3B2",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,o/2),s.lineTo(0,0),s.lineTo(o/2,o/2),s.lineTo(o,0),s.stroke(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,o),s.lineTo(0,o/2),s.lineTo(o/2,o),s.lineTo(o,o/2),s.lineTo(o+o/2,o),s.stroke(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,111e-6),s.lineTo(4e-6*o,-o/2),s.lineTo(o/2,111e-6),s.lineTo(o,-o/2),s.lineTo(o+o/2,111e-6),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=.08*o,s.moveTo(-o/2,o+o/2),s.lineTo(0,o),s.lineTo(o/2,o+o/2),s.lineTo(o,o),s.lineTo(o+o/2,o+o/2),s.stroke()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const r=document.createElement("canvas").getContext("2d");if(!r)return new CanvasPattern;const l=r.createPattern(n,"repeat");return l||new CanvasPattern}function od(i,t="#8C1551",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50,a=o*.15;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.3,s.fillStyle=t,s.lineWidth=.005*o,s.rect(0,0,a,o),s.fill(),s.beginPath(),s.globalAlpha=.7,s.fillStyle=t,s.lineWidth=.005*o,s.rect(o/2,0,a,o),s.fill()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const l=document.createElement("canvas").getContext("2d");if(!l)return new CanvasPattern;const c=l.createPattern(n,"repeat");return c?(l.fillStyle=c,l.fillRect(0,0,o,o),c):new CanvasPattern}function ad(i,t="#F255A3",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=new DOMMatrix,a=21,r=.1*a;n.width=a,n.height=a,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,a,a),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.005*a,s.rect(0,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.005*a,s.rect(0,0,a,a),s.fill(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=r,s.moveTo(r,0),s.lineTo(r,.5*a),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=r,s.moveTo(a/2+r,0),s.lineTo(a/2+r,.5*a),s.stroke()),i&&(s.beginPath(),s.fillStyle="#FFFFFF",s.globalAlpha=.5,s.lineWidth=.006*a,s.rect(0,0,a,a),s.fill());const l=document.createElement("canvas"),c=l.getContext("2d");if(!c)return new CanvasPattern;const h=c.createPattern(n,"repeat");return h?(c.fillStyle=h,c.fillRect(0,0,l.width,l.height),h.setTransform(o.rotate(45)),h):new CanvasPattern}function rd(i,t="#095359",e=!1){const n=document.createElement("canvas"),s=n.getContext("2d");if(!s)return new CanvasPattern;const o=50,a=.04*o;n.width=o,n.height=o,e===!0?(s.beginPath(),s.fillStyle=t,s.rect(0,0,o,o),s.fill()):(s.beginPath(),s.fillStyle="#FFFFFF",s.lineWidth=.1005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.1,s.fillStyle=t,s.lineWidth=.1005*o,s.rect(0,0,o,o),s.fill(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=a,s.arc(a+.06*o,a+.06*o,.06*o,0,2*Math.PI),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=a,s.arc(a+.56*o,a+.06*o,.06*o,0,2*Math.PI),s.stroke(),s.beginPath(),s.globalAlpha=.3,s.strokeStyle=t,s.lineWidth=.04*o,s.arc(-a+.44*o,a+.56*o,.06*o,0,2*Math.PI),s.stroke(),s.beginPath(),s.globalAlpha=.7,s.strokeStyle=t,s.lineWidth=.04*o,s.arc(-a+.94*o,a+.56*o,.06*o,0,2*Math.PI),s.stroke()),i&&(s.beginPath(),s.globalAlpha=.5,s.fillStyle="#FFFFFF",s.lineWidth=.006*o,s.rect(0,0,o,o),s.fill());const r=document.createElement("canvas"),l=r.getContext("2d");if(!l)return new CanvasPattern;const c=l.createPattern(n,"repeat");return c?(l.fillStyle=c,l.fillRect(0,0,r.width,r.height),c):new CanvasPattern}function mi(){return{patternsStandardList:[id,nd,sd,od,ad,rd],colourSets:[["#393879","#006974","#405D68","#005C91","#8C3500","#8C0003"],["#A274FF","#143666","#00A3B2","#8C1551","#F255A3","#095359"],["#00A3B2","#143666","#3D993D","#8C1551","#E56D17","#4C3380"],["#8C1551","#E56D17","#4C3380","#4588E5","#095359","#F255A3"],["#4588E5","#4C3380","#E56D17","#143666","#D94141","#8C1551"],["#143666","#F255A3","#095359","#4588E5","#8C1551","#E56D17"],["#A274FF","#B0BBC0","#B0BBC0","#B0BBC0","#B0BBC0","#B0BBC0"]]}}const ld={class:"container"},cd={class:"main"},hd=v.defineComponent({__name:"BarChart",props:{chartId:{type:String,default:"radar-chart"},rawTitle:{type:String,default:"sales"},unit:{type:String,default:"%"},labels:{type:Array,default:()=>[]},colourSet:{type:Number,default:0},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},datasets:{type:Array,default:()=>[]},width:{type:String,default:"400px"},height:{type:String,default:"300px"},cssClasses:{default:"",type:String},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]},stacked:{type:Boolean,default:!1},disableAccessibility:{type:Boolean,default:!1},firstTooltip:{type:String,default:"content"},secondTooltip:{type:String,default:"content2"}},setup(i){const t=i;Wt.register(ii,si,ei,ti,oi,ri);const{colourSets:e,patternsStandardList:n}=mi(),s=v.ref(null),o=v.ref(!1),a=v.computed(()=>t.newPatternsOrder.length!==n.length?e[t.colourSet]:t.newPatternsOrder.map(C=>e[t.colourSet][C])),r=v.computed(()=>t.newPatternsOrder.length!==n.length?n:t.newPatternsOrder.map(C=>n[C])),l=v.computed(()=>t.disableAccessibility),{onHoverIndex:c,barChartRef:h,reloadChart:d,getOnHoverOptions:u,getStackedDatasets:f,privateGetHtmlLegendPlugin:m}=td(),p=v.computed(()=>{const C=P(_.value);return y(),{labels:C,datasets:f(t.datasets.map((A,D)=>({data:S(D,_.value),label:t.datasets[D].label})),t.stacked,t.disableAccessibility,a.value,r.value,0)}});let g,b;const y=()=>{g=t.firstTooltip,b=t.secondTooltip},_=v.computed(()=>{const C=t.labels;if(C.includes("other")){const A=C.indexOf("other");if(t.datasets[0].data[A].rate+""=="0"&&t.datasets[1].data[A].rate+""=="0")return A}return null}),S=(C,A,D=!1)=>{const T=Object.assign([],t.datasets[C].data);return A&&_.value&&T.splice(_.value,1),T.map($=>$.rate)},x=C=>{const A=C.tooltip.dataPoints[0].datasetIndex,D=C.tooltip.dataPoints[0].dataIndex,T=parseFloat(C.tooltip.body[0].lines[0].split(":")[1].replace(",",".")).toFixed(2)+"% ";if(!D||!A)return"";const $=t.datasets[A].data[D],Q=Nt($.amount);return T+Q+$.amountUnit},P=C=>{const A=Object.assign([],t.labels);return C&&A.splice(C,1),A.map(D=>D)},k=v.computed(()=>({onHover:u(),elements:{bar:{borderSkipped:!1}},plugins:{responsive:!0,maintainAspectRatio:!1,legend:{display:!1},title:{display:!1},tooltip:{enabled:!1,position:"nearest",external:function(C){new pi().createTooltip(C,x,{chartType:ve.BAR_CHART,firstLineLabel:g,secondLineLabel:b},a.value,r.value,t.disableAccessibility)}}},scales:{x:{stacked:!0},y:{stacked:!0,ticks:{callback:function(C){return Lo(C,t.unit)},maxTicksLimit:8}}}})),w=v.ref(m(s,o,l,a,r));return v.watch(c,()=>{d()},{deep:!0}),(C,A)=>(v.openBlock(),v.createElementBlock("div",ld,[v.createElementVNode("div",cd,[p.value?(v.openBlock(),v.createBlock(v.unref(Eh),{key:0,ref_key:"barChartRef",ref:h,data:p.value,options:k.value,plugins:w.value,style:v.normalizeStyle({width:i.width,height:i.height}),"chart-id":i.chartId,"cssClasses:":i.cssClasses,styles:i.styles},null,8,["data","options","plugins","style","chart-id","cssClasses:","styles"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:s},null,512)]))}}),Pd="",Ad="",bi=(i,t)=>{const e=i.__vccOpts||i;for(const[n,s]of t)e[n]=s;return e},yi=bi(hd,[["__scopeId","data-v-7de032ad"]]);yi.install=i=>{i.component("BarChart",yi)};function dd(){const i=v.ref(null),t=v.ref(null),e=v.ref(null);function n(h,d,u,f,m,p,g){return Io(h,d,t,u,f,m,p,g)}function s(h,d,u){return t.value!==null?d.map((f,m)=>t.value===m?f(!1,h[m],u):f(!0,h[m],u)):d.map((f,m)=>f(!1,h[m],u))}function o(h){return t.value!==null?h.map((d,u)=>t.value===u?d:gi(d,.2)):h}function a(){return(h,d)=>{d[0]!==void 0?t.value=d[0].element.$context.index:t.value=null}}const r=h=>h.charAt(0).toUpperCase()+h.slice(1).toLowerCase();function l(h,d,u){let f=h.slice(0),m=d.slice(0);return h.length>u&&(m=c(d,u),f=f.slice(0,u-1),f.push("others")),f.map((p,g)=>`${r(p)} (${Nt(m[g].rate)} %)`)}function c(h,d){if(d<1)return h;let u=h.slice(0);return h.length>d&&(u=u.slice(0,d),u[d-1]=h.slice(d).reduce((f,m)=>(f.rate+=m.rate,f.value+=m.value,f),{rate:h[d-1].rate,value:h[d-1].value})),u}return{onHoverIndex:t,privateGetHtmlLegendPlugin:n,getOnHoverOptions:a,groupDataAfterNthValue:c,getDoughnutLabels:l,getBackgroundColor:s,getFormatedText:r,getBorderColor:o,backgroundColor:e,doughnutRef:i}}const ud={class:"container"},fd={class:"main"},gd=v.defineComponent({__name:"DoughnutChart",props:{chartId:{type:String,default:"doughnut-chart"},data:{type:Array,default:()=>[]},labels:{type:Array,default:()=>[]},cssClasses:{default:"",type:String},disableAccessibility:{type:Boolean,default:!1},colourSet:{default:"0",type:Number},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},width:{type:String,default:"400px"},height:{type:String,default:"400px"},maxValues:{type:Number,default:5},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]}},setup(i){const t=i;Wt.register(ii,si,ei,me);const{colourSets:e,patternsStandardList:n}=mi(),{onHoverIndex:s,doughnutRef:o,getBackgroundColor:a,privateGetHtmlLegendPlugin:r,getOnHoverOptions:l,groupDataAfterNthValue:c,getDoughnutLabels:h,getBorderColor:d}=dd(),u=v.ref(!1),f=v.ref(null),m=v.computed(()=>t.newPatternsOrder.length!==6?e[t.colourSet]:t.newPatternsOrder.map(k=>e[t.colourSet][k])),p=v.computed(()=>t.newPatternsOrder.length!==6?n:t.newPatternsOrder.map(k=>n[k])),g=v.computed(()=>({labels:h(t.labels,t.data,t.maxValues),datasets:[{data:c(t.data,t.maxValues).map(k=>k.rate),backgroundColor:a(m.value,p.value,t.disableAccessibility),borderColor:d(m.value)}]})),b=k=>{const w=k.tooltip.dataPoints[0].dataIndex;if(!w)return"";const C=c(t.data,t.maxValues)[w],A=Nt(C.rate),D=Nt(C.value),T=C.unit||"";return`${D}${T} (${A})%`};function y(){return t.labels.length<=1?0:12}const _=v.computed(()=>{const k=m.value,w=p.value;return{onHover:l(),plugins:{legend:{display:!1,position:"bottom",align:"start",labels:{pointStyle:"rectRounded",usePointStyle:!0}},title:{display:!1},tooltip:{enabled:!1,external:function(C){new pi().createTooltip(C,b,{chartType:ve.DOUGHNUT},k,w,x.value)}}},radius:"90%",cutout:"70%",borderWidth:3,spacing:y(),hoverOffset:4}}),S={data:t.data,labels:t.labels},x=v.computed(()=>t.disableAccessibility),P=v.computed(()=>r(f,u,x,m,p,t.maxValues,S));return v.onMounted(()=>{a(m.value,p.value,t.disableAccessibility)}),v.watch(s,(k,w)=>{k!==w&&a(m.value,p.value,t.disableAccessibility)}),v.watch(x,()=>{a(m.value,p.value,t.disableAccessibility)}),(k,w)=>(v.openBlock(),v.createElementBlock("div",ud,[v.createElementVNode("div",fd,[g.value?(v.openBlock(),v.createBlock(v.unref(Bh),{key:0,ref_key:"doughnutRef",ref:o,data:g.value,options:_.value,plugins:P.value,"cssClasses:":i.cssClasses,"max-values":i.maxValues,style:v.normalizeStyle({width:i.width,height:i.height,cursor:"pointer"})},null,8,["data","options","plugins","cssClasses:","max-values","style"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:f},null,512)]))}}),Dd="",xi=bi(gd,[["__scopeId","data-v-d03b50b1"]]);xi.install=i=>{i.component("DoughnutChart",xi)};const pd={class:"container"},md={class:"main"},bd="months",yd=v.defineComponent({__name:"LineChart",props:{chartId:{type:String,default:"radar-chart"},rawTitle:{type:String,default:"sales"},width:{type:String,default:"200px"},height:{type:String,default:"400px"},disableAccessibility:{type:Boolean,default:!1},colourSet:{type:Number,default:0},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},lines:{type:Array,default:()=>{}},labels:{type:Array,default:()=>[]},cssClasses:{default:"",type:String},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]}},setup(i){const t=i;Wt.register(ii,si,ei,be,bt,oi,ri);const{colourSets:e,patternsStandardList:n}=mi(),s=v.ref(null),o=v.ref(!1),a=v.computed(()=>t.newPatternsOrder.length!==6?e[t.colourSet]:t.newPatternsOrder.map(p=>e[t.colourSet][p])),r=t.newPatternsOrder.length!==6?n:t.newPatternsOrder.map(p=>n[p]),l=p=>{const g=p.tooltip.dataPoints[0].datasetIndex,b=p.tooltip.dataPoints[0].dataIndex;if(!b||!g)return"";const y=t.lines[g].data[b].toFixed(2);return t.lines[g].unit?y+" "+t.lines[g].unit:y},c=v.computed(()=>t.rawTitle),h=v.computed(()=>({labels:t.labels.map(p=>p),datasets:[{type:"line",borderColor:a.value[0],pointStyle:"rectRot",pointBackgroundColor:"#FFFFFF",pointRadius:5,label:t.lines[0].label,data:t.lines[0].data,borderWidth:2},{type:"line",borderColor:a.value[1],pointStyle:"circle",pointBackgroundColor:"#FFFFFF",pointRadius:5,label:t.lines[1].label,data:t.lines[1].data,borderWidth:2}]}));function d(p,g){return[{id:"htmlLegend",afterUpdate(b){const y=dn(p,"column");for(y.style.display="flex",y.style.flexDirection="row";y.firstChild;)y.firstChild.remove();b.options.plugins.legend.labels.generateLabels(b).forEach(S=>{const x=cn(b,g,S.datasetIndex);let P;g.value?P=u(b,S):P=Wo(S),x.style.marginRight="10px",x.appendChild(P),x.appendChild(ln(S)),y.appendChild(x)})}}]}function u(p,g){const b=hn(p,g);return b.onclick=y=>{fi(p,g.datasetIndex,o),y.stopPropagation()},b}const f=d(s,o),m=v.computed(()=>({responsive:!0,maintainAspectRatio:!0,plugins:{legend:{display:!1},tooltip:{enabled:!1,external:function(p){new pi().createTooltip(p,l,{chartType:ve.LINE_CHART,firstLineLabel:bd,secondLineLabel:c.value},a.value,r,t.disableAccessibility)}}},scales:{x:{offset:!0},y:{type:"linear",display:!0,position:"left",grid:{drawOnChartArea:!0},ticks:{callback:function(p){const g=t.lines[0].unit;return Lo(p,g||null)},maxTicksLimit:8}}}}));return(p,g)=>(v.openBlock(),v.createElementBlock("div",pd,[v.createElementVNode("div",md,[h.value?(v.openBlock(),v.createBlock(v.unref(zh),{key:0,ref:"cockpitLineChartRef",data:h.value,options:m.value,plugins:v.unref(f),"chart-id":i.chartId,"cssClasses:":i.cssClasses,styles:i.styles,style:v.normalizeStyle({width:i.width,height:i.height,cursor:"pointer"})},null,8,["data","options","plugins","chart-id","cssClasses:","styles","style"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:s},null,512)]))}}),Td="",_i=bi(yd,[["__scopeId","data-v-ecb2ed0e"]]);_i.install=i=>{i.component("LineChart",_i)};function xd(i,t){const e=i.ctx,n=i.scales.r,s=i.data.labels;!e||!n||!s||(e.save(),s.forEach((o,a)=>{const r=(n.getIndexAngle(a)-Math.PI/2)%(2*Math.PI),l=n.getPointPositionForValue(a,n.max);e.textAlign=r<=Math.PI/2||r>3*Math.PI/2?"left":"right";let c=r<=Math.PI/2||r>3*Math.PI/2?15:-15,h;r<0||r>Math.PI?h=-15:h=15,r>Math.PI/4&&r<3*Math.PI/4&&(h*=3),(r<-Math.PI/4||r>5*Math.PI/4)&&(h*=3,c=0),(r>11*Math.PI/8||r<-3*Math.PI/8)&&(e.textAlign="center");const d=l.y+h*(o.length-1)/2;e.font="15px Arial",o.forEach((u,f)=>{const m=f===o.length-1?_d(t)[a]:"#000000";e.fillStyle=m;const p=l.x+c,g=d+15*f;e.fillText(u,p,g)})}),e.restore())}const _d=i=>i.areas[0].areaData.map(t=>{switch(t.color){case"red":return"#C61112";case"green":return"#46A610";default:return"#000000"}}),vd={class:"container"},Sd={class:"main"},kd=v.defineComponent({__name:"RadarChart",props:{chartId:{type:String,default:"radar-chart"},height:{type:String,default:"400px"},labels:{type:Array,default:()=>[]},disableAccessibility:{type:Boolean,default:!1},colourSet:{type:Number,default:0},newPatternsOrder:{type:Array,default:()=>[0,1,2,3,4,5]},areas:{type:Array,default:()=>[]},cssClasses:{default:"",type:String},styles:{type:Object,default:()=>{}},plugins:{type:Array,default:()=>[]}},setup(i){const t=i;Wt.register(ii,si,ei,_e,bt,be,qc);const{colourSets:e,patternsStandardList:n}=mi(),s=v.computed(()=>t.newPatternsOrder.length!==6?e[t.colourSet]:t.newPatternsOrder.map(g=>e[t.colourSet][g])),o=v.computed(()=>t.newPatternsOrder.length!==6?n:t.newPatternsOrder.map(g=>n[g])),a=v.computed(()=>({labels:d(),datasets:[{label:"Data One",backgroundColor:gi(s.value[0],.1),borderColor:s.value[0],pointBackgroundColor:"#FFFFFF",pointBorderColor:s.value[0],pointBorderWidth:2,borderWidth:2,pointHitRadius:55,pointRadius:5,pointHoverBackgroundColor:s.value[0],pointHoverBorderColor:s.value[0],data:t.areas[0].areaData.map(g=>g.position)},{label:"Data Two",backgroundColor:gi(s.value[1],.1),borderColor:s.value[1],pointBackgroundColor:"#FFFFFF",pointBorderColor:s.value[1],pointBorderWidth:2,borderWidth:2,pointHitRadius:55,pointRadius:5,pointStyle:"rectRot",pointHoverBackgroundColor:s.value[1],pointHoverBorderColor:s.value[1],data:t.areas[1].areaData.map(g=>g.position)}]})),r={onClick:(g,b,y)=>{b[0]&&zo(y,b[0].datasetIndex,c)},plugins:{htmlLegend:{containerID:"legend-container"},legend:{display:!1},title:{display:!1},tooltip:{enabled:!1,position:"nearest",external:function(g){new pi().createTooltip(g,p,{chartType:ve.RADAR},s.value,o.value,t.disableAccessibility)}}},layout:{padding:65},scales:{r:{min:0,max:100,pointLabels:{display:!1,font:{size:16}},ticks:{display:!1,stepSize:25}}}},l=v.ref(null),c=v.ref(!1);function h(g,b){if(g.length>15&&g.includes(" ",15)){const _=g.indexOf(" ",15);return[g.substring(0,_),g.substring(_),b]}return[g,b]}const d=()=>t.labels.map((g,b)=>{const y=t.areas[0].areaData[b].value?`${u(t.areas[0].areaData[b].value+"")} ${t.areas[0].areaData[b].unit}`:"No Data";return h(g,y)}),u=g=>Nt(parseFloat(g));function f(g,b){const y=hn(g,b);return y.onclick=_=>{fi(g,b.datasetIndex,c),_.stopPropagation()},y}const m=[{id:"htmlLegend",afterUpdate(g){const b=dn(l,"row");for(;b.firstChild;)b.firstChild.remove();g.options.plugins.legend.labels.generateLabels(g).reverse().forEach(_=>{const S=cn(g,c,_.datasetIndex);let x;S.style.marginRight="0.625rem",c.value?x=f(g,_):x=Wo(_,!0),S.appendChild(x),S.appendChild(ln(_)),b.appendChild(S)})}},{id:"radarLabelPlugin",beforeDraw(g){xd(g,t)}}],p=g=>{const b=g.tooltip.dataPoints[0].datasetIndex,y=g.tooltip.dataPoints[0].dataIndex;if(b&&y){const _=t.areas[b];return _.areaData[y].value.toFixed(2)+" "+_.areaData[y].unit}return""};return(g,b)=>(v.openBlock(),v.createElementBlock("div",vd,[v.createElementVNode("div",Sd,[a.value?(v.openBlock(),v.createBlock(v.unref(Wh),{key:0,data:a.value,options:r,plugins:m,"chart-id":i.chartId,"cssClasses:":i.cssClasses,styles:i.styles,style:v.normalizeStyle({height:i.height,cursor:"pointer"})},null,8,["data","chart-id","cssClasses:","styles","style"])):v.createCommentVNode("",!0)]),v.createElementVNode("div",{ref_key:"legendContainer",ref:l,class:"legendContainer"},null,512)]))}}),Ld="",vi=bi(kd,[["__scopeId","data-v-9ec69ee9"]]);vi.install=i=>{i.component("RadarChart",vi)};const Ho=Object.freeze(Object.defineProperty({__proto__:null,BarChart:yi,DoughnutChart:xi,LineChart:_i,RadarChart:vi},Symbol.toStringTag,{value:"Module"})),wd={install:(i,t)=>{Object.keys(Ho).forEach(e=>{i.component(e,Ho[e])})}};X.BarChart=yi,X.DoughnutChart=xi,X.LineChart=_i,X.RadarChart=vi,X.default=wd,Object.defineProperties(X,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.container[data-v-d13d8a6b]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d13d8a6b]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-d03b50b1]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d03b50b1]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-ecb2ed0e]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-ecb2ed0e]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9ec69ee9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9ec69ee9]{height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}
+.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__input{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #666666;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.container[data-v-7de032ad]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-7de032ad]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-d03b50b1]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d03b50b1]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-ecb2ed0e]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-ecb2ed0e]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9ec69ee9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9ec69ee9]{height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/chart",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.4",
   "type": "module",
   "scripts": {
     "build": "vue-tsc && vite build",
@@ -38,7 +38,7 @@
     }
   },
   "dependencies": {
-    "@mozaic-ds/vue-3": "0.49.3",
+    "@mozaic-ds/vue-3": "0.50.0",
     "chart.js": "^4.3.3",
     "vue": "^3.2.41",
     "vue-chartjs": "5.2.0"

package/src/components/bar/BarChart.vue

@@ -282,6 +282,11 @@ watch(onHoverIndex, () => {
 
 </script>
 
+<style lang="scss">
+@import "settings-tools/all-settings";
+@import "components/c.checkbox";
+</style>
+
 <style scoped>
 .container {
   -moz-osx-font-smoothing: grayscale;