on-codemerge/dist/src/plugins/ChartsPlugin/renderers/BubbleChartRenderer.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 b=require("./BaseChartRenderer.cjs"),S=require("../utils/validation.cjs");class M extends b.BaseChartRenderer{render(e,r,l){if(!S.validateChartData(r)){this.drawNoDataMessage(e,l);return}const{width:g,height:n}=this.getDimensions(l),h=r.flatMap(a=>a.data),o=Math.max(...h.map(a=>a.x||0)),t=Math.max(...h.map(a=>a.y||0)),s=Math.max(...h.map(a=>a.r||0)),i=g/o,d=n/t,u=Math.min(g,n)/(s*20);this.drawGrid(e,l,t),this.drawAxes(e,l,o,t),r.forEach(a=>{const c=[...a.data].sort((f,y)=>(y.value||0)-(f.value||0));a={...a,data:c},this.drawBubbles(e,a,i,d,u,l)}),this.drawLegend(e,r,l)}drawBubbles(e,r,l,g,n,h){const{padding:o}=this.getDimensions(h);r.data.forEach(t=>{if(!t.x||!t.y||!t.r)return;const s=o+t.x*l,i=h.height-o-t.y*g,d=t.r*n;e.beginPath(),e.arc(s,i,d,0,Math.PI*2);const u=e.createRadialGradient(s-d/3,i-d/3,0,s,i,d);u.addColorStop(0,this.colorWithOpacity(t.color,.6)),u.addColorStop(1,this.colorWithOpacity(t.color,.2)),e.fillStyle=u,e.fill(),e.strokeStyle=t.color||this.colors[0],e.lineWidth=2,e.stroke(),e.fillStyle="#374151",e.textAlign="center",e.textBaseline="top",e.fillText(t.label||"",s,i+d+5)})}drawAxes(e,r,l,g){const{padding:n,width:h,height:o}=this.getDimensions(r);e.save(),e.strokeStyle="#e5e7eb",e.fillStyle="#6b7280",e.font="12px Inter, system-ui, sans-serif",e.lineWidth=1;for(let t=0;t<=5;t++){const s=n+h*t/5,i=Math.round(l*t/5);e.textAlign="center",e.fillText(i.toString(),s,r.height-n+20)}for(let t=0;t<=5;t++){const s=r.height-n-o*t/5,i=Math.round(g*t/5);e.textAlign="right",e.fillText(i.toString(),n-10,s+4)}e.restore()}}exports.BubbleChartRenderer=M;