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
39 lines (38 loc) • 1.71 kB
JavaScript
import { BaseChartRenderer as y } from "./BaseChartRenderer.mjs";
class w extends y {
render(e, s, i) {
if (!s || s.length === 0) {
this.drawNoDataMessage(e, i);
return;
}
const { width: d, height: r } = this.getDimensions(i), h = s.flatMap((o) => o.data), n = Math.max(...h.map((o) => o.x || 0)), t = Math.max(...h.map((o) => o.y || 0)), l = d / n, a = r / t;
this.drawGrid(e, i, t), this.drawAxes(e, i, n, t), s.forEach((o, g) => {
const f = this.colors[g % this.colors.length];
this.drawPoints(e, o, l, a, f, i);
}), this.drawLegend(e, s, i);
}
drawAxes(e, s, i, d) {
const { padding: r, width: h, height: n } = this.getDimensions(s);
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 l = r + h * t / 5, a = Math.round(i * t / 5);
e.textAlign = "center", e.fillText(a.toString(), l, s.height - r + 20);
}
for (let t = 0; t <= 5; t++) {
const l = s.height - r - n * t / 5, a = Math.round(d * t / 5);
e.textAlign = "right", e.fillText(a.toString(), r - 10, l + 4);
}
e.restore();
}
drawPoints(e, s, i, d, r, h) {
const { padding: n } = this.getDimensions(h);
s.data.forEach((t) => {
if (!t.x || !t.y) return;
const l = n + t.x * i, a = h.height - n - t.y * d;
e.beginPath(), e.arc(l, a, 6, 0, Math.PI * 2), e.fillStyle = this.colorWithOpacity(r, 0.2), e.fill(), e.strokeStyle = r, e.lineWidth = 2, e.stroke(), e.fillStyle = "#374151", e.textAlign = "center", e.textBaseline = "top", e.fillText(t.label, l, a + 10);
});
}
}
export {
w as ScatterChartRenderer
};