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
113 lines (112 loc) • 6.09 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";
import { validateChartData as k } from "../utils/validation.mjs";
class A extends S {
render(e, s, t) {
if (!k(s)) {
this.drawNoDataMessage(e, t);
return;
}
const r = Array.isArray(s) && "data" in s[0] ? s : [{ name: "", data: s }], a = r[0].data.map((d) => d.label || ""), g = this.getColors(t), n = t.mode || "default", l = t.orientation || "vertical";
let o = 1;
n === "stacked" ? o = Math.max(
...a.map((d, h) => r.reduce((c, m) => {
var f;
return c + (((f = m.data[h]) == null ? void 0 : f.value) || 0);
}, 0))
) : o = Math.max(...r.flatMap((d) => d.data.map((h) => h.value || 0)), 1), this.drawBackground(e, t), this.drawTitle(e, t), this.drawGrid(e, t, o, !0, a, "area"), l === "vertical" ? n === "stacked" ? this.drawStackedArea(e, r, t, o, g) : this.drawNormalArea(e, r, t, o, g) : n === "stacked" ? this.drawHorizontalStackedArea(e, r, t, o, g) : this.drawHorizontalArea(e, r, t, o, g), this.drawAxisLabels(e, t), this.drawLegend(e, r, t);
}
// Обычная area (несколько серий)
drawNormalArea(e, s, t, w, r) {
const { padding: a, width: g, height: n } = this.getDimensions(t), l = n / (w * 1.1);
[...s].reverse().forEach((o, d) => {
const h = o.color || r[d % r.length];
e.beginPath(), e.moveTo(a, t.height - a), o.data.forEach((m, f) => {
const y = a + g / (o.data.length - 1) * f, i = t.height - a - (m.value || 0) * l;
f === 0 && e.moveTo(y, t.height - a), e.lineTo(y, i);
}), e.lineTo(t.width - a, t.height - a), e.closePath();
const c = e.createLinearGradient(0, a, 0, t.height - a);
c.addColorStop(0, this.colorWithOpacity(h, 0.3)), c.addColorStop(1, this.colorWithOpacity(h, 0.05)), e.fillStyle = c, e.fill(), this.drawLine(e, o, t, l, h), this.drawPoints(e, o, t, l, h);
});
}
// Stacked area
drawStackedArea(e, s, t, w, r) {
const { padding: a, width: g, height: n } = this.getDimensions(t), l = s[0].data.length, o = n / (w * 1.1), d = new Array(l).fill(0);
[...s].reverse().forEach((h, c) => {
var y;
const m = h.color || r[c % r.length];
e.beginPath();
for (let i = 0; i < l; i++) {
const v = a + g / (l - 1) * i;
d[i] += ((y = h.data[i]) == null ? void 0 : y.value) || 0;
const T = t.height - a - d[i] * o;
i === 0 && e.moveTo(v, t.height - a), e.lineTo(v, T);
}
e.lineTo(t.width - a, t.height - a), e.closePath();
const f = e.createLinearGradient(0, a, 0, t.height - a);
f.addColorStop(0, this.colorWithOpacity(m, 0.3)), f.addColorStop(1, this.colorWithOpacity(m, 0.05)), e.fillStyle = f, e.fill(), e.beginPath();
for (let i = 0; i < l; i++) {
const v = a + g / (l - 1) * i, T = t.height - a - d[i] * o;
i === 0 ? e.moveTo(v, T) : e.lineTo(v, T);
}
e.strokeStyle = m, e.lineWidth = 2, e.stroke();
});
}
// Горизонтальная area
drawHorizontalArea(e, s, t, w, r) {
const { padding: a, width: g, height: n } = this.getDimensions(t), l = g / (w * 1.1);
[...s].reverse().forEach((o, d) => {
const h = o.color || r[d % r.length];
e.beginPath(), e.moveTo(a, n - a), o.data.forEach((m, f) => {
const y = a + n / (o.data.length - 1) * f, i = a + (m.value || 0) * l;
f === 0 && e.moveTo(a, y), e.lineTo(i, y);
}), e.lineTo(a, n - a), e.closePath();
const c = e.createLinearGradient(a, 0, g - a, 0);
c.addColorStop(0, this.colorWithOpacity(h, 0.3)), c.addColorStop(1, this.colorWithOpacity(h, 0.05)), e.fillStyle = c, e.fill(), e.beginPath(), o.data.forEach((m, f) => {
const y = a + n / (o.data.length - 1) * f, i = a + (m.value || 0) * l;
f === 0 ? e.moveTo(i, y) : e.lineTo(i, y);
}), e.strokeStyle = h, e.lineWidth = 2, e.stroke();
});
}
// Горизонтальная stacked area
drawHorizontalStackedArea(e, s, t, w, r) {
const { padding: a, width: g, height: n } = this.getDimensions(t), l = s[0].data.length, o = g / (w * 1.1), d = new Array(l).fill(0);
[...s].reverse().forEach((h, c) => {
var y;
const m = h.color || r[c % r.length];
e.beginPath();
for (let i = 0; i < l; i++) {
const v = a + n / (l - 1) * i;
d[i] += ((y = h.data[i]) == null ? void 0 : y.value) || 0;
const T = a + d[i] * o;
i === 0 && e.moveTo(a, v), e.lineTo(T, v);
}
e.lineTo(a, n - a), e.closePath();
const f = e.createLinearGradient(a, 0, g - a, 0);
f.addColorStop(0, this.colorWithOpacity(m, 0.3)), f.addColorStop(1, this.colorWithOpacity(m, 0.05)), e.fillStyle = f, e.fill(), e.beginPath();
for (let i = 0; i < l; i++) {
const v = a + n / (l - 1) * i, T = a + d[i] * o;
i === 0 ? e.moveTo(T, v) : e.lineTo(T, v);
}
e.strokeStyle = m, e.lineWidth = 2, e.stroke();
});
}
drawLine(e, s, t, w, r) {
const { padding: a, width: g } = this.getDimensions(t), n = s.data;
e.beginPath(), n.forEach((l, o) => {
const d = a + g / (n.length - 1) * o, h = t.height - a - (l.value || 0) * w;
o === 0 ? e.moveTo(d, h) : e.lineTo(d, h);
}), e.strokeStyle = r, e.lineWidth = 2, e.stroke();
}
drawPoints(e, s, t, w, r) {
const { padding: a, width: g } = this.getDimensions(t), n = s.data;
n.forEach((l, o) => {
var c;
const d = a + g / (n.length - 1) * o, h = t.height - a - (l.value || 0) * w;
e.beginPath(), e.arc(d, h, 4, 0, Math.PI * 2), e.fillStyle = "#fff", e.fill(), e.strokeStyle = r, e.lineWidth = 2, e.stroke(), e.fillStyle = this.getTextColor(t), e.textAlign = "center", e.textBaseline = "bottom", e.fillText(((c = l.value) == null ? void 0 : c.toString()) || "0", d, h - 8);
});
}
}
export {
A as AreaChartRenderer
};