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
47 lines (46 loc) • 2.27 kB
JavaScript
import { BaseChartRenderer as m } from "./BaseChartRenderer.mjs";
import { validateChartData as w } from "../utils/validation.mjs";
class u extends m {
render(e, s, a) {
if (!w(s)) {
this.drawNoDataMessage(e, a);
return;
}
const { height: h } = this.getDimensions(a), i = Array.isArray(s) ? s : [s], l = Math.max(
...i.flatMap((t) => t.data.map((r) => r.value || 0))
), o = h / (l * 1.1);
this.drawGrid(e, a, l), this.drawAxisLabels(
e,
i[0].data.map((t) => t.label),
a
), i.forEach((t, r) => {
const n = t.color || this.colors[r % this.colors.length];
this.drawLine(e, t, a, o, n), this.drawPoints(e, t, a, o, n);
}), this.drawLegend(e, i, a);
}
drawLine(e, s, a, h, i) {
const { padding: l, width: o } = this.getDimensions(a), t = s.data;
e.beginPath(), t.forEach((r, n) => {
const d = l + o / (t.length - 1) * n, g = a.height - l - (r.value || 0) * h;
n === 0 ? e.moveTo(d, g) : e.lineTo(d, g);
}), e.strokeStyle = i, e.lineWidth = 2, e.stroke();
}
drawPoints(e, s, a, h, i) {
const { padding: l, width: o } = this.getDimensions(a), t = s.data;
t.forEach((r, n) => {
var f;
const d = l + o / (t.length - 1) * n, g = a.height - l - (r.value || 0) * h;
e.beginPath(), e.arc(d, g, 4, 0, Math.PI * 2), e.fillStyle = "#fff", e.fill(), e.strokeStyle = i, e.lineWidth = 2, e.stroke(), e.fillStyle = "#374151", e.textAlign = "center", e.textBaseline = "bottom", e.fillText(((f = r.value) == null ? void 0 : f.toString()) || "0", d, g - 8), (n === t.length - 1 || n === 0 || n % Math.ceil(t.length / 5) === 0) && (e.save(), e.translate(d, a.height - l + 10), e.rotate(-Math.PI / 4), e.textAlign = "right", e.fillStyle = "#374151", e.fillText(r.label || "", 0, 0), e.restore());
});
}
drawAxisLabels(e, s, a) {
const { padding: h, width: i } = this.getDimensions(a);
e.save(), e.fillStyle = "#6b7280", e.textAlign = "center", e.font = "12px Inter, system-ui, sans-serif", s.forEach((l, o) => {
const t = h + i / (s.length - 1) * o, r = a.height - h + 20;
e.save(), e.translate(t, r), e.rotate(-Math.PI / 4), e.fillText(l || "", 0, 0), e.restore();
}), e.restore();
}
}
export {
u as LineChartRenderer
};