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
42 lines (41 loc) • 2.1 kB
JavaScript
import { BaseChartRenderer as u } from "./BaseChartRenderer.mjs";
import { validateChartData as M } from "../utils/validation.mjs";
class v extends u {
render(e, r, l) {
if (!M(r)) {
this.drawNoDataMessage(e, l);
return;
}
const { width: g, height: h } = this.getDimensions(l), o = r.flatMap((t) => t.data), n = Math.max(...o.map((t) => t.x || 0)), a = Math.max(...o.map((t) => t.y || 0)), s = Math.max(...o.map((t) => t.r || 0)), i = g / n, d = h / a, f = Math.min(g, h) / (s * 20);
this.drawGrid(e, l, a), this.drawAxes(e, l, n, a), r.forEach((t) => {
const m = [...t.data].sort((y, c) => (c.value || 0) - (y.value || 0));
t = { ...t, data: m }, this.drawBubbles(e, t, i, d, f, l);
}), this.drawLegend(e, r, l);
}
drawBubbles(e, r, l, g, h, o) {
const { padding: n } = this.getDimensions(o);
r.data.forEach((a) => {
if (!a.x || !a.y || !a.r) return;
const s = n + a.x * l, i = o.height - n - a.y * g, d = a.r * h;
e.beginPath(), e.arc(s, i, d, 0, Math.PI * 2);
const f = e.createRadialGradient(s - d / 3, i - d / 3, 0, s, i, d);
f.addColorStop(0, this.colorWithOpacity(a.color, 0.6)), f.addColorStop(1, this.colorWithOpacity(a.color, 0.2)), e.fillStyle = f, e.fill(), e.strokeStyle = a.color || this.colors[0], e.lineWidth = 2, e.stroke(), e.fillStyle = "#374151", e.textAlign = "center", e.textBaseline = "top", e.fillText(a.label || "", s, i + d + 5);
});
}
drawAxes(e, r, l, g) {
const { padding: h, width: o, height: n } = this.getDimensions(r);
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 s = h + o * a / 5, i = Math.round(l * a / 5);
e.textAlign = "center", e.fillText(i.toString(), s, r.height - h + 20);
}
for (let a = 0; a <= 5; a++) {
const s = r.height - h - n * a / 5, i = Math.round(g * a / 5);
e.textAlign = "right", e.fillText(i.toString(), h - 10, s + 4);
}
e.restore();
}
}
export {
v as BubbleChartRenderer
};