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
63 lines (62 loc) • 2.78 kB
JavaScript
import { BaseChartRenderer as m } from "./BaseChartRenderer.mjs";
import { validateChartData as v } from "../utils/validation.mjs";
class b extends m {
render(a, s, t) {
if (!v(s)) {
this.drawNoDataMessage(a, t);
return;
}
const { centerX: o, centerY: i, radius: h } = this.getRadarDimensions(t), r = Math.max(
...s.flatMap((n) => n.data.map((e) => e.value || 0))
);
this.drawRadarGrid(a, r, o, i, h), [...s].reverse().forEach((n, e) => {
const l = n.color || this.colors[e % this.colors.length];
this.drawDataPolygon(a, n, r, o, i, h, l);
}), this.drawAxisLabels(
a,
s[0].data.map((n) => n.label),
o,
i,
h
), this.drawLegend(a, s, t);
}
getRadarDimensions(a) {
const s = a.width / 2, t = a.height / 2, o = Math.min(s, t) - 60;
return { centerX: s, centerY: t, radius: o };
}
drawRadarGrid(a, s, t, o, i) {
const r = s / 8;
for (let e = 1; e <= 8; e++) {
const l = i * e / 8;
a.beginPath(), a.arc(t, o, l, 0, Math.PI * 2), a.strokeStyle = "#e5e7eb", a.stroke(), a.fillStyle = "#6b7280", a.textAlign = "right", a.fillText(Math.round(r * e).toString(), t - l - 5, o);
}
const n = Math.PI * 2 / 6;
for (let e = 0; e < 6; e++) {
const l = e * n - Math.PI / 2;
a.beginPath(), a.moveTo(t, o), a.lineTo(t + Math.cos(l) * i, o + Math.sin(l) * i), a.strokeStyle = "#e5e7eb", a.stroke();
}
}
drawDataPolygon(a, s, t, o, i, h, r) {
const n = s.data, e = Math.PI * 2 / n.length;
a.beginPath(), n.forEach((l, g) => {
const y = l.value || 0, f = g * e - Math.PI / 2, M = h * y / t, d = o + Math.cos(f) * M, P = i + Math.sin(f) * M;
g === 0 ? a.moveTo(d, P) : a.lineTo(d, P);
}), a.closePath(), a.fillStyle = this.colorWithOpacity(r, 0.2), a.fill(), a.beginPath(), n.forEach((l, g) => {
const y = l.value || 0, f = g * e - Math.PI / 2, M = h * y / t, d = o + Math.cos(f) * M, P = i + Math.sin(f) * M;
g === 0 ? a.moveTo(d, P) : a.lineTo(d, P);
}), a.closePath(), a.strokeStyle = r, a.lineWidth = 2, a.stroke(), n.forEach((l, g) => {
const y = l.value || 0, f = g * e - Math.PI / 2, M = h * y / t, d = o + Math.cos(f) * M, P = i + Math.sin(f) * M;
a.beginPath(), a.arc(d, P, 4, 0, Math.PI * 2), a.fillStyle = "#fff", a.fill(), a.strokeStyle = r, a.lineWidth = 2, a.stroke();
});
}
drawAxisLabels(a, s, t, o, i) {
const h = Math.PI * 2 / s.length;
a.fillStyle = "#374151", a.font = "12px Inter, system-ui, sans-serif", s.forEach((r, n) => {
const e = n * h - Math.PI / 2, l = t + Math.cos(e) * (i + 20), g = o + Math.sin(e) * (i + 20);
a.textAlign = "center", a.textBaseline = "middle", a.fillText(r, l, g);
});
}
}
export {
b as RadarChartRenderer
};