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
57 lines (56 loc) • 3.67 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 k } from "./BaseChartRenderer.mjs";
import { validateChartData as v } from "../utils/validation.mjs";
class E extends k {
render(e, r, o) {
if (!v(r)) {
this.drawNoDataMessage(e, o);
return;
}
const f = o.orientation || "vertical", M = this.getColors(o);
this.drawBackground(e, o), this.drawTitle(e, o), f === "vertical" ? this.drawVerticalRadar(e, r, o, M) : this.drawHorizontalRadar(e, r, o, M), this.drawAxisLabels(e, o), this.drawLegend(e, r, o);
}
drawVerticalRadar(e, r, o, f) {
const { width: M, height: c } = this.getDimensions(o), h = M / 2, i = c / 2, s = Math.min(M, c) / 3, d = r[0].data.map((t) => t.label || ""), u = Math.max(...r.flatMap((t) => t.data.map((a) => a.value || 0)), 1);
for (let t = 1; t <= 5; t++) {
const a = s * t / 5;
e.beginPath(), e.arc(h, i, a, 0, Math.PI * 2), e.strokeStyle = "#e5e7eb", e.lineWidth = 1, e.stroke();
}
d.forEach((t, a) => {
const n = a * 2 * Math.PI / d.length - Math.PI / 2, g = h + Math.cos(n) * s, l = i + Math.sin(n) * s;
e.beginPath(), e.moveTo(h, i), e.lineTo(g, l), e.strokeStyle = "#e5e7eb", e.lineWidth = 1, e.stroke();
}), r.forEach((t, a) => {
const n = t.color || f[a % f.length];
e.beginPath(), t.data.forEach((g, l) => {
const m = l * 2 * Math.PI / d.length - Math.PI / 2, b = g.value || 0, P = s * b / u, y = h + Math.cos(m) * P, I = i + Math.sin(m) * P;
l === 0 ? e.moveTo(y, I) : e.lineTo(y, I);
}), e.closePath(), e.fillStyle = this.colorWithOpacity(n, 0.2), e.fill(), e.strokeStyle = n, e.lineWidth = 2, e.stroke();
}), d.forEach((t, a) => {
const n = a * 2 * Math.PI / d.length - Math.PI / 2, g = h + Math.cos(n) * (s + 20), l = i + Math.sin(n) * (s + 20);
e.fillStyle = this.getTextColor(o), e.font = "12px Inter, system-ui, sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillText(t, g, l);
});
}
drawHorizontalRadar(e, r, o, f) {
const { width: M, height: c } = this.getDimensions(o), h = M / 2, i = c / 2, s = Math.min(M, c) / 3, d = r[0].data.map((t) => t.label || ""), u = Math.max(...r.flatMap((t) => t.data.map((a) => a.value || 0)), 1);
for (let t = 1; t <= 5; t++) {
const a = s * t / 5;
e.beginPath(), e.arc(h, i, a, 0, Math.PI * 2), e.strokeStyle = "#e5e7eb", e.lineWidth = 1, e.stroke();
}
d.forEach((t, a) => {
const n = a * 2 * Math.PI / d.length + Math.PI / 2, g = h + Math.cos(n) * s, l = i + Math.sin(n) * s;
e.beginPath(), e.moveTo(h, i), e.lineTo(g, l), e.strokeStyle = "#e5e7eb", e.lineWidth = 1, e.stroke();
}), r.forEach((t, a) => {
const n = t.color || f[a % f.length];
e.beginPath(), t.data.forEach((g, l) => {
const m = l * 2 * Math.PI / d.length + Math.PI / 2, b = g.value || 0, P = s * b / u, y = h + Math.cos(m) * P, I = i + Math.sin(m) * P;
l === 0 ? e.moveTo(y, I) : e.lineTo(y, I);
}), e.closePath(), e.fillStyle = this.colorWithOpacity(n, 0.2), e.fill(), e.strokeStyle = n, e.lineWidth = 2, e.stroke();
}), d.forEach((t, a) => {
const n = a * 2 * Math.PI / d.length + Math.PI / 2, g = h + Math.cos(n) * (s + 20), l = i + Math.sin(n) * (s + 20);
e.fillStyle = this.getTextColor(o), e.font = "12px Inter, system-ui, sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillText(t, g, l);
});
}
}
export {
E as RadarChartRenderer
};