on-codemerge/dist/src/plugins/ChartsPlugin/renderers/AreaChartRenderer.cjs

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

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