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
82 lines (81 loc) • 4.37 kB
JavaScript
/*! 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 */
import { BaseChartRenderer as S } from "./BaseChartRenderer.mjs";
import { validateChartData as v } from "../utils/validation.mjs";
class A extends S {
render(e, l, i) {
if (!v(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 y = e.createRadialGradient(h - d / 3, g - d / 3, 0, h, g, d);
y.addColorStop(0, this.colorWithOpacity(r.color || a[0], 0.6)), y.addColorStop(1, this.colorWithOpacity(r.color || a[0], 0.2)), e.fillStyle = y, 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), y = this.getColors(o);
l.data.forEach((f) => {
if (!f.x || !f.y || !f.r) return;
const b = t + f.y * h, m = o.height - t - f.x * g, u = f.r * d;
e.beginPath(), e.arc(b, m, u, 0, Math.PI * 2);
const w = e.createRadialGradient(b - u / 3, m - u / 3, 0, b, m, u);
w.addColorStop(0, this.colorWithOpacity(f.color || y[0], 0.6)), w.addColorStop(1, this.colorWithOpacity(f.color || y[0], 0.2)), e.fillStyle = w, e.fill(), e.strokeStyle = f.color || y[0], e.lineWidth = 2, e.stroke();
});
}
}
export {
A as BubbleChartRenderer
};