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

/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("./BaseChartRenderer.cjs"),v=require("../utils/validation.cjs");class c extends m.BaseChartRenderer{render(e,l,i){if(!v.validateChartData(l)){this.drawNoDataMessage(e,i);return}const n=i.orientation||"vertical",s=l.flatMap(r=>r.data),o=Math.max(...s.map(r=>r.x||0)),t=Math.max(...s.map(r=>r.y||0)),a=Math.max(...s.map(r=>r.r||0));this.drawBackground(e,i),this.drawTitle(e,i),n==="vertical"?(this.drawGrid(e,i,t),this.drawAxes(e,i,o,t),l.forEach(r=>{const h=[...r.data].sort((g,d)=>(d.value||0)-(g.value||0));r={...r,data:h},this.drawBubbles(e,r,o,t,a,i)})):(this.drawHorizontalGrid(e,i,o),this.drawHorizontalAxes(e,i,o,t),l.forEach(r=>{const h=[...r.data].sort((g,d)=>(d.value||0)-(g.value||0));r={...r,data:h},this.drawHorizontalBubbles(e,r,o,t,a,i)})),this.drawAxisLabels(e,i),this.drawLegend(e,l,i)}drawBubbles(e,l,i,n,s,o){const{padding:t}=this.getDimensions(o),a=this.getColors(o);l.data.forEach(r=>{if(!r.x||!r.y||!r.r)return;const h=t+r.x*i,g=o.height-t-r.y*n,d=r.r*s;e.beginPath(),e.arc(h,g,d,0,Math.PI*2);const u=e.createRadialGradient(h-d/3,g-d/3,0,h,g,d);u.addColorStop(0,this.colorWithOpacity(r.color||a[0],.6)),u.addColorStop(1,this.colorWithOpacity(r.color||a[0],.2)),e.fillStyle=u,e.fill(),e.strokeStyle=r.color||a[0],e.lineWidth=2,e.stroke()})}drawAxes(e,l,i,n){const{padding:s,width:o,height:t}=this.getDimensions(l);e.save(),e.strokeStyle="#e5e7eb",e.fillStyle="#6b7280",e.font="12px Inter, system-ui, sans-serif",e.lineWidth=1;for(let a=0;a<=5;a++){const r=s+o*a/5,h=Math.round(i*a/5);e.textAlign="center",e.fillText(h.toString(),r,l.height-s+20)}for(let a=0;a<=5;a++){const r=l.height-s-t*a/5,h=Math.round(n*a/5);e.textAlign="right",e.fillText(h.toString(),s-10,r+4)}e.restore()}drawHorizontalGrid(e,l,i){const{padding:n,width:s,height:o}=this.getDimensions(l);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 a=n+s*t/5;e.beginPath(),e.moveTo(a,n),e.lineTo(a,l.height-n),e.stroke()}for(let t=0;t<=5;t++){const a=n+o*t/5;e.beginPath(),e.moveTo(n,a),e.lineTo(l.width-n,a),e.stroke()}e.restore()}drawHorizontalAxes(e,l,i,n){const{padding:s,width:o,height:t}=this.getDimensions(l);e.save(),e.strokeStyle="#e5e7eb",e.fillStyle="#6b7280",e.font="12px Inter, system-ui, sans-serif",e.lineWidth=1;for(let a=0;a<=5;a++){const r=s+o*a/5,h=Math.round(i*a/5);e.textAlign="center",e.fillText(h.toString(),r,l.height-s+20)}for(let a=0;a<=5;a++){const r=s+t*a/5,h=Math.round(n*a/5);e.textAlign="right",e.fillText(h.toString(),s-10,r+4)}e.restore()}drawHorizontalBubbles(e,l,i,n,s,o){const{padding:t,width:a,height:r}=this.getDimensions(o),h=r/i,g=a/n,d=Math.min(a,r)/(s*20),u=this.getColors(o);l.data.forEach(f=>{if(!f.x||!f.y||!f.r)return;const b=t+f.y*h,S=o.height-t-f.x*g,y=f.r*d;e.beginPath(),e.arc(b,S,y,0,Math.PI*2);const w=e.createRadialGradient(b-y/3,S-y/3,0,b,S,y);w.addColorStop(0,this.colorWithOpacity(f.color||u[0],.6)),w.addColorStop(1,this.colorWithOpacity(f.color||u[0],.2)),e.fillStyle=w,e.fill(),e.strokeStyle=f.color||u[0],e.lineWidth=2,e.stroke()})}}exports.BubbleChartRenderer=c;