on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 2.12 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./BaseChartRenderer.cjs"),v=require("../utils/validation.cjs");class S extends u.BaseChartRenderer{render(e,o,t){if(!v.validateChartData(o)){this.drawNoDataMessage(e,t);return}const{centerX:s,centerY:r,radius:i}=this.getRadarDimensions(t),h=Math.max(...o.flatMap(n=>n.data.map(a=>a.value||0)));this.drawRadarGrid(e,h,s,r,i),[...o].reverse().forEach((n,a)=>{const l=n.color||this.colors[a%this.colors.length];this.drawDataPolygon(e,n,h,s,r,i,l)}),this.drawAxisLabels(e,o[0].data.map(n=>n.label),s,r,i),this.drawLegend(e,o,t)}getRadarDimensions(e){const o=e.width/2,t=e.height/2,s=Math.min(o,t)-60;return{centerX:o,centerY:t,radius:s}}drawRadarGrid(e,o,t,s,r){const h=o/8;for(let a=1;a<=8;a++){const l=r*a/8;e.beginPath(),e.arc(t,s,l,0,Math.PI*2),e.strokeStyle="#e5e7eb",e.stroke(),e.fillStyle="#6b7280",e.textAlign="right",e.fillText(Math.round(h*a).toString(),t-l-5,s)}const n=Math.PI*2/6;for(let a=0;a<6;a++){const l=a*n-Math.PI/2;e.beginPath(),e.moveTo(t,s),e.lineTo(t+Math.cos(l)*r,s+Math.sin(l)*r),e.strokeStyle="#e5e7eb",e.stroke()}}drawDataPolygon(e,o,t,s,r,i,h){const n=o.data,a=Math.PI*2/n.length;e.beginPath(),n.forEach((l,d)=>{const y=l.value||0,g=d*a-Math.PI/2,M=i*y/t,f=s+Math.cos(g)*M,P=r+Math.sin(g)*M;d===0?e.moveTo(f,P):e.lineTo(f,P)}),e.closePath(),e.fillStyle=this.colorWithOpacity(h,.2),e.fill(),e.beginPath(),n.forEach((l,d)=>{const y=l.value||0,g=d*a-Math.PI/2,M=i*y/t,f=s+Math.cos(g)*M,P=r+Math.sin(g)*M;d===0?e.moveTo(f,P):e.lineTo(f,P)}),e.closePath(),e.strokeStyle=h,e.lineWidth=2,e.stroke(),n.forEach((l,d)=>{const y=l.value||0,g=d*a-Math.PI/2,M=i*y/t,f=s+Math.cos(g)*M,P=r+Math.sin(g)*M;e.beginPath(),e.arc(f,P,4,0,Math.PI*2),e.fillStyle="#fff",e.fill(),e.strokeStyle=h,e.lineWidth=2,e.stroke()})}drawAxisLabels(e,o,t,s,r){const i=Math.PI*2/o.length;e.fillStyle="#374151",e.font="12px Inter, system-ui, sans-serif",o.forEach((h,n)=>{const a=n*i-Math.PI/2,l=t+Math.cos(a)*(r+20),d=s+Math.sin(a)*(r+20);e.textAlign="center",e.textBaseline="middle",e.fillText(h,l,d)})}}exports.RadarChartRenderer=S;