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
77 lines (76 loc) • 3.69 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 w } from "./BaseChartRenderer.mjs";
class u extends w {
render(e, l, s) {
if (!l || l.length === 0) {
this.drawNoDataMessage(e, s);
return;
}
const n = s.orientation || "vertical", a = this.getColors(s), o = l.flatMap((r) => r.data), i = Math.max(...o.map((r) => r.x || 0)), t = Math.max(...o.map((r) => r.y || 0));
this.drawBackground(e, s), this.drawTitle(e, s), n === "vertical" ? (this.drawGrid(e, s, t), this.drawAxes(e, s, i, t), l.forEach((r, h) => {
const d = r.color || a[h % a.length];
this.drawPoints(e, r, i, t, d, s);
})) : (this.drawHorizontalGrid(e, s, i), this.drawHorizontalAxes(e, s, i, t), l.forEach((r, h) => {
const d = r.color || a[h % a.length];
this.drawHorizontalPoints(e, r, i, t, d, s);
})), this.drawAxisLabels(e, s), this.drawLegend(e, l, s);
}
drawAxes(e, l, s, n) {
const { padding: a, width: o, height: i } = 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 r = a + o * t / 5, h = Math.round(s * t / 5);
e.textAlign = "center", e.fillText(h.toString(), r, l.height - a + 20);
}
for (let t = 0; t <= 5; t++) {
const r = l.height - a - i * t / 5, h = Math.round(n * t / 5);
e.textAlign = "right", e.fillText(h.toString(), a - 10, r + 4);
}
e.restore();
}
drawPoints(e, l, s, n, a, o) {
const { padding: i } = this.getDimensions(o);
l.data.forEach((t) => {
if (!t.x || !t.y) return;
const r = i + t.x * s, h = o.height - i - t.y * n;
e.beginPath(), e.arc(r, h, 6, 0, Math.PI * 2), e.fillStyle = this.colorWithOpacity(a, 0.2), e.fill(), e.strokeStyle = a, e.lineWidth = 2, e.stroke();
});
}
drawHorizontalGrid(e, l, s) {
const { padding: n, width: a, 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 i = 0; i <= 5; i++) {
const t = n + a * i / 5;
e.beginPath(), e.moveTo(t, n), e.lineTo(t, l.height - n), e.stroke();
}
for (let i = 0; i <= 5; i++) {
const t = n + o * i / 5;
e.beginPath(), e.moveTo(n, t), e.lineTo(l.width - n, t), e.stroke();
}
e.restore();
}
drawHorizontalAxes(e, l, s, n) {
const { padding: a, width: o, height: i } = 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 r = a + o * t / 5, h = Math.round(s * t / 5);
e.textAlign = "center", e.fillText(h.toString(), r, l.height - a + 20);
}
for (let t = 0; t <= 5; t++) {
const r = a + i * t / 5, h = Math.round(n * t / 5);
e.textAlign = "right", e.fillText(h.toString(), a - 10, r + 4);
}
e.restore();
}
drawHorizontalPoints(e, l, s, n, a, o) {
const { padding: i, width: t, height: r } = this.getDimensions(o), h = r / s, d = t / n;
l.data.forEach((g) => {
if (!g.x || !g.y) return;
const f = i + g.y * h, y = o.height - i - g.x * d;
e.beginPath(), e.arc(f, y, 6, 0, Math.PI * 2), e.fillStyle = this.colorWithOpacity(a, 0.2), e.fill(), e.strokeStyle = a, e.lineWidth = 2, e.stroke();
});
}
}
export {
u as ScatterChartRenderer
};