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