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
59 lines (58 loc) • 2.75 kB
JavaScript
import { BaseChartRenderer as m } from "./BaseChartRenderer.mjs";
import { validateChartData as w } from "../utils/validation.mjs";
class A extends m {
render(e, s, a) {
if (!w(s)) {
this.drawNoDataMessage(e, a);
return;
}
const { height: o } = this.getDimensions(a), h = Array.isArray(s) ? s : [s], i = Math.max(
...h.flatMap((t) => t.data.map((r) => r.value || 0))
), l = o / (i * 1.1);
this.drawGrid(e, a, i), this.drawAxisLabels(
e,
h[0].data.map((t) => t.label),
a
), [...h].reverse().forEach((t, r) => {
const n = t.color || this.colors[r % this.colors.length];
this.drawAreaShape(e, t, a, l, n);
}), h.forEach((t, r) => {
const n = t.color || this.colors[r % this.colors.length];
this.drawLine(e, t, a, l, n), this.drawPoints(e, t, a, l, n);
}), this.drawLegend(e, h, a);
}
drawAreaShape(e, s, a, o, h) {
const { padding: i, width: l } = this.getDimensions(a), t = s.data;
e.beginPath(), e.moveTo(i, a.height - i), t.forEach((n, d) => {
const g = i + l / (t.length - 1) * d, f = a.height - i - (n.value || 0) * o;
d === 0 && e.moveTo(g, a.height - i), e.lineTo(g, f);
}), e.lineTo(a.width - i, a.height - i), e.closePath();
const r = e.createLinearGradient(0, i, 0, a.height - i);
r.addColorStop(0, this.colorWithOpacity(h, 0.3)), r.addColorStop(1, this.colorWithOpacity(h, 0.05)), e.fillStyle = r, e.fill();
}
drawLine(e, s, a, o, h) {
const { padding: i, width: l } = this.getDimensions(a), t = s.data;
e.beginPath(), t.forEach((r, n) => {
const d = i + l / (t.length - 1) * n, g = a.height - i - (r.value || 0) * o;
n === 0 ? e.moveTo(d, g) : e.lineTo(d, g);
}), e.strokeStyle = h, e.lineWidth = 2, e.stroke();
}
drawPoints(e, s, a, o, h) {
const { padding: i, width: l } = this.getDimensions(a), t = s.data;
t.forEach((r, n) => {
var f;
const d = i + l / (t.length - 1) * n, g = a.height - i - (r.value || 0) * o;
e.beginPath(), e.arc(d, g, 4, 0, Math.PI * 2), e.fillStyle = "#fff", e.fill(), e.strokeStyle = h, e.lineWidth = 2, e.stroke(), e.fillStyle = "#374151", e.textAlign = "center", e.textBaseline = "bottom", e.fillText(((f = r.value) == null ? void 0 : f.toString()) || "0", d, g - 8);
});
}
drawAxisLabels(e, s, a) {
const { padding: o, width: h } = this.getDimensions(a);
e.save(), e.fillStyle = "#6b7280", e.textAlign = "center", e.font = "12px Inter, system-ui, sans-serif", s.forEach((i, l) => {
const t = o + h / (s.length - 1) * l, r = a.height - o + 20;
e.save(), e.translate(t, r), e.rotate(-Math.PI / 4), e.fillText(i || "", 0, 0), e.restore();
}), e.restore();
}
}
export {
A as AreaChartRenderer
};