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
54 lines (53 loc) • 2.25 kB
JavaScript
import { BaseChartRenderer as S } from "./BaseChartRenderer.mjs";
import { validateChartData as v } from "../utils/validation.mjs";
class C extends S {
render(e, r, t) {
if (!v(r)) {
this.drawNoDataMessage(e, t);
return;
}
const l = this.normalizeData(r);
if (!l.length) {
this.drawNoDataMessage(e, t);
return;
}
const { centerX: a, centerY: s, radius: o } = this.getCircleDimensions(t), i = l.reduce((g, n) => g + (n.value || 0), 0);
if (i <= 0) {
this.drawNoDataMessage(e, t);
return;
}
this.drawSlices(e, l, i, a, s, o), this.drawLabels(e, l, i, a, s, o), this.drawCenterInfo(e, i, a, s);
}
normalizeData(e) {
var t;
return e.length ? "value" in e[0] ? e : ((t = e[0]) == null ? void 0 : t.data) || [] : [];
}
drawSlices(e, r, t, l, a, s) {
let o = -Math.PI / 2;
r.forEach((i, g) => {
const n = i.value || 0;
if (n <= 0) return;
const u = n / t * (Math.PI * 2), h = o + u;
e.beginPath(), e.moveTo(l, a), e.arc(l, a, s, o, h), e.closePath();
const d = i.color || this.colors[g % this.colors.length], f = e.createRadialGradient(l, a, 0, l, a, s);
f.addColorStop(0, this.colorWithOpacity(d, 0.8)), f.addColorStop(1, d), e.fillStyle = f, e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), o = h;
});
}
drawLabels(e, r, t, l, a, s) {
let o = -Math.PI / 2;
r.forEach((i, g) => {
const n = i.value || 0;
if (n <= 0) return;
const u = n / t * (Math.PI * 2), h = o + u / 2, d = s * 1.2, f = l + Math.cos(h) * d, m = a + Math.sin(h) * d;
e.beginPath(), e.moveTo(l + Math.cos(h) * s, a + Math.sin(h) * s), e.lineTo(f, m), e.strokeStyle = "#9ca3af", e.lineWidth = 1, e.stroke(), e.fillStyle = "#374151", e.textAlign = h < Math.PI ? "left" : "right", e.textBaseline = "middle";
const M = (n / t * 100).toFixed(1);
e.fillText(`${i.label || ""} (${M}%)`, f, m), o += u;
});
}
drawCenterInfo(e, r, t, l) {
e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = "#374151", e.font = "bold 16px Inter, system-ui, sans-serif", e.fillText("Total", t, l - 10), e.fillText(r.toLocaleString(), t, l + 10);
}
}
export {
C as PieChartRenderer
};