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
44 lines (43 loc) • 1.95 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 m } from "./BaseChartRenderer.mjs";
import { validateChartData as w } from "../utils/validation.mjs";
class D extends m {
render(e, i, a) {
if (!w(i)) {
this.drawNoDataMessage(e, a);
return;
}
const { height: o } = this.getDimensions(a), n = this.getColors(a), r = Array.isArray(i) ? i : [i], d = Math.max(
...r.flatMap((t) => t.data.map((s) => s.value || 0))
), l = o / (d * 1.1);
this.drawBackground(e, a), this.drawTitle(e, a), this.drawGrid(
e,
a,
d,
!0,
r[0].data.map((t) => t.label),
"line"
), r.forEach((t, s) => {
const h = t.color || n[s % n.length];
this.drawLine(e, t, a, l, h), this.drawPoints(e, t, a, l, h);
}), this.drawAxisLabels(e, a), this.drawLegend(e, r, a);
}
drawLine(e, i, a, o, n) {
const { padding: r, width: d } = this.getDimensions(a), l = i.data;
e.beginPath(), l.forEach((t, s) => {
const h = r + d / (l.length - 1) * s, g = a.height - r - (t.value || 0) * o;
s === 0 ? e.moveTo(h, g) : e.lineTo(h, g);
}), e.strokeStyle = n, e.lineWidth = 2, e.stroke();
}
drawPoints(e, i, a, o, n) {
const { padding: r, width: d } = this.getDimensions(a), l = i.data;
l.forEach((t, s) => {
var f;
const h = r + d / (l.length - 1) * s, g = a.height - r - (t.value || 0) * o;
e.beginPath(), e.arc(h, g, 4, 0, Math.PI * 2), e.fillStyle = "#fff", e.fill(), e.strokeStyle = n, e.lineWidth = 2, e.stroke(), e.fillStyle = this.getTextColor(a), e.textAlign = "center", e.textBaseline = "bottom", e.fillText(((f = t.value) == null ? void 0 : f.toString()) || "0", h, g - 8);
});
}
}
export {
D as LineChartRenderer
};