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
50 lines (49 loc) • 2.23 kB
JavaScript
import { BaseChartRenderer as S } from "./BaseChartRenderer.mjs";
class b extends S {
render(e, i, t) {
if (!i || i.length === 0) {
this.drawNoDataMessage(e, t);
return;
}
const l = i.filter((f) => f.value > 0), a = l.reduce((f, n) => f + n.value, 0);
if (a <= 0 || l.length === 0) {
this.drawNoDataMessage(e, t);
return;
}
const { centerX: o, centerY: r, radius: s } = this.getCircleDimensions(t), h = s * 0.6;
this.drawSlices(e, l, a, o, r, s, h), this.drawLabels(e, l, a, o, r, s), this.drawCenterInfo(e, a, o, r, h);
}
drawSlices(e, i, t, l, a, o, r) {
let s = -Math.PI / 2;
i.forEach((h, f) => {
if (!h.value || h.value <= 0) return;
const n = h.value / t * (Math.PI * 2), d = s + n;
e.beginPath(), e.arc(l, a, o, s, d), e.arc(l, a, r, d, s, !0), e.closePath();
const u = h.color || this.colors[f % this.colors.length], g = e.createRadialGradient(
l,
a,
r,
l,
a,
o
);
g.addColorStop(0, this.colorWithOpacity(u, 0.8)), g.addColorStop(1, u), e.fillStyle = g, e.fill(), e.strokeStyle = "#ffffff", e.lineWidth = 2, e.stroke(), s = d;
});
}
drawLabels(e, i, t, l, a, o) {
let r = -Math.PI / 2;
i.forEach((s, h) => {
if (!s.value || s.value <= 0) return;
const f = s.value / t * (Math.PI * 2), n = r + f / 2, d = o * 1.2, u = l + Math.cos(n) * d, g = a + Math.sin(n) * d;
e.beginPath(), e.moveTo(l + Math.cos(n) * o, a + Math.sin(n) * o), e.lineTo(u, g), e.strokeStyle = "#9ca3af", e.lineWidth = 1, e.stroke(), e.fillStyle = "#374151", e.textAlign = n < Math.PI ? "left" : "right", e.textBaseline = "middle";
const M = (s.value / t * 100).toFixed(1);
e.fillText(`${s.label} (${M}%)`, u, g), r += f;
});
}
drawCenterInfo(e, i, t, l, a) {
e.beginPath(), e.arc(t, l, a - 2, 0, Math.PI * 2), e.fillStyle = "#ffffff", e.fill(), e.strokeStyle = "#e5e7eb", e.lineWidth = 2, e.stroke(), 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(i.toString(), t, l + 10);
}
}
export {
b as DoughnutChartRenderer
};