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
98 lines (97 loc) • 4.19 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 S } from "./BaseChartRenderer.mjs";
class w extends S {
render(l, f, e) {
if (!f || f.length === 0) {
this.drawNoDataMessage(l, e);
return;
}
const t = f.filter((s) => s.value > 0), o = t.reduce((s, r) => s + r.value, 0);
if (o <= 0 || t.length === 0) {
this.drawNoDataMessage(l, e);
return;
}
const i = e.orientation || "vertical", { centerX: n, centerY: h, radius: a } = this.getCircleDimensions(e), g = a * 0.6;
this.drawBackground(l, e), this.drawTitle(l, e), i === "vertical" ? (this.drawVerticalSlices(
l,
t,
o,
n,
h,
a,
g,
e
), this.drawVerticalLabels(l, t, o, n, h, a, e)) : (this.drawHorizontalSlices(
l,
t,
o,
n,
h,
a,
g,
e
), this.drawHorizontalLabels(l, t, o, n, h, a, e)), this.drawCenterInfo(l, o, n, h, g, e), this.drawAxisLabels(l, e), this.drawLegend(l, f, e);
}
drawVerticalSlices(l, f, e, t, o, i, n, h) {
let a = -Math.PI / 2;
const g = this.getColors(h);
f.forEach((s, r) => {
if (!s.value || s.value <= 0) return;
const M = s.value / e * (Math.PI * 2), d = a + M;
l.beginPath(), l.arc(t, o, i, a, d), l.arc(t, o, n, d, a, !0), l.closePath();
const u = s.color || g[r % g.length], v = l.createRadialGradient(
t,
o,
n,
t,
o,
i
);
v.addColorStop(0, this.colorWithOpacity(u, 0.8)), v.addColorStop(1, u), l.fillStyle = v, l.fill(), l.strokeStyle = "#ffffff", l.lineWidth = 2, l.stroke(), a = d;
});
}
drawHorizontalSlices(l, f, e, t, o, i, n, h) {
let a = Math.PI / 2;
const g = this.getColors(h);
f.forEach((s, r) => {
if (!s.value || s.value <= 0) return;
const M = s.value / e * (Math.PI * 2), d = a + M;
l.beginPath(), l.arc(t, o, i, a, d), l.arc(t, o, n, d, a, !0), l.closePath();
const u = s.color || g[r % g.length], v = l.createRadialGradient(
t,
o,
n,
t,
o,
i
);
v.addColorStop(0, this.colorWithOpacity(u, 0.8)), v.addColorStop(1, u), l.fillStyle = v, l.fill(), l.strokeStyle = "#ffffff", l.lineWidth = 2, l.stroke(), a = d;
});
}
drawVerticalLabels(l, f, e, t, o, i, n) {
let h = -Math.PI / 2;
f.forEach((a, g) => {
if (!a.value || a.value <= 0) return;
const s = a.value / e * (Math.PI * 2), r = h + s / 2, M = i * 1.2, d = t + Math.cos(r) * M, u = o + Math.sin(r) * M;
l.beginPath(), l.moveTo(t + Math.cos(r) * i, o + Math.sin(r) * i), l.lineTo(d, u), l.strokeStyle = "#9ca3af", l.lineWidth = 1, l.stroke(), l.fillStyle = this.getTextColor(n), l.textAlign = r < Math.PI ? "left" : "right", l.textBaseline = "middle";
const v = (a.value / e * 100).toFixed(1);
l.fillText(`${a.label} (${v}%)`, d, u), h += s;
});
}
drawHorizontalLabels(l, f, e, t, o, i, n) {
let h = Math.PI / 2;
f.forEach((a, g) => {
if (!a.value || a.value <= 0) return;
const s = a.value / e * (Math.PI * 2), r = h + s / 2, M = i * 1.2, d = t + Math.cos(r) * M, u = o + Math.sin(r) * M;
l.beginPath(), l.moveTo(t + Math.cos(r) * i, o + Math.sin(r) * i), l.lineTo(d, u), l.strokeStyle = "#9ca3af", l.lineWidth = 1, l.stroke(), l.fillStyle = this.getTextColor(n), l.textAlign = r < Math.PI ? "left" : "right", l.textBaseline = "middle";
const v = (a.value / e * 100).toFixed(1);
l.fillText(`${a.label} (${v}%)`, d, u), h += s;
});
}
drawCenterInfo(l, f, e, t, o, i) {
l.beginPath(), l.arc(e, t, o - 2, 0, Math.PI * 2), l.fillStyle = "#ffffff", l.fill(), l.strokeStyle = "#e5e7eb", l.lineWidth = 2, l.stroke(), l.textAlign = "center", l.textBaseline = "middle", l.fillStyle = this.getTextColor(i), l.font = "bold 16px Inter, system-ui, sans-serif", l.fillText("Total", e, t - 10), l.fillText(f.toString(), e, t + 10);
}
}
export {
w as DoughnutChartRenderer
};