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) • 1.8 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("./BaseChartRenderer.cjs"),m=require("../utils/validation.cjs");class u extends y.BaseChartRenderer{render(e,r,a){if(!m.validateChartData(r)){this.drawNoDataMessage(e,a);return}const{height:h}=this.getDimensions(a),l=Array.isArray(r)?r:[r],s=Math.max(...l.flatMap(t=>t.data.map(i=>i.value||0))),o=h/(s*1.1);this.drawGrid(e,a,s),this.drawAxisLabels(e,l[0].data.map(t=>t.label),a),l.forEach((t,i)=>{const n=t.color||this.colors[i%this.colors.length];this.drawLine(e,t,a,o,n),this.drawPoints(e,t,a,o,n)}),this.drawLegend(e,l,a)}drawLine(e,r,a,h,l){const{padding:s,width:o}=this.getDimensions(a),t=r.data;e.beginPath(),t.forEach((i,n)=>{const d=s+o/(t.length-1)*n,g=a.height-s-(i.value||0)*h;n===0?e.moveTo(d,g):e.lineTo(d,g)}),e.strokeStyle=l,e.lineWidth=2,e.stroke()}drawPoints(e,r,a,h,l){const{padding:s,width:o}=this.getDimensions(a),t=r.data;t.forEach((i,n)=>{var f;const d=s+o/(t.length-1)*n,g=a.height-s-(i.value||0)*h;e.beginPath(),e.arc(d,g,4,0,Math.PI*2),e.fillStyle="#fff",e.fill(),e.strokeStyle=l,e.lineWidth=2,e.stroke(),e.fillStyle="#374151",e.textAlign="center",e.textBaseline="bottom",e.fillText(((f=i.value)==null?void 0:f.toString())||"0",d,g-8),(n===t.length-1||n===0||n%Math.ceil(t.length/5)===0)&&(e.save(),e.translate(d,a.height-s+10),e.rotate(-Math.PI/4),e.textAlign="right",e.fillStyle="#374151",e.fillText(i.label||"",0,0),e.restore())})}drawAxisLabels(e,r,a){const{padding:h,width:l}=this.getDimensions(a);e.save(),e.fillStyle="#6b7280",e.textAlign="center",e.font="12px Inter, system-ui, sans-serif",r.forEach((s,o)=>{const t=h+l/(r.length-1)*o,i=a.height-h+20;e.save(),e.translate(t,i),e.rotate(-Math.PI/4),e.fillText(s||"",0,0),e.restore()}),e.restore()}}exports.LineChartRenderer=u;