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
37 lines (36 loc) • 1.88 kB
JavaScript
import { BaseChartRenderer as T } from "./BaseChartRenderer.mjs";
import { validateChartData as c } from "../utils/validation.mjs";
class M extends T {
render(e, a, r) {
if (!c(a)) {
this.drawNoDataMessage(e, r);
return;
}
const t = this.normalizeData(a);
if (!t.length) {
this.drawNoDataMessage(e, r);
return;
}
const { width: n, height: l } = this.getDimensions(r), d = Math.max(20, n / Math.max(1, t.length) / 1.5), o = Math.max(1, ...t.map((g) => g.value || 0)), i = l / o;
this.drawGrid(e, r, o), this.drawBars(e, t, r, { barWidth: d, scale: i });
}
normalizeData(e) {
var r;
return e.length ? "value" in e[0] ? e : ((r = e[0]) == null ? void 0 : r.data) || [] : [];
}
drawBars(e, a, r, { barWidth: t, scale: n }) {
const { padding: l } = this.getDimensions(r), o = (r.width - l * 2) / a.length;
a.forEach((i, g) => {
const u = i.value || 0, s = l + o * g + (o - t) / 2, f = u * n, h = r.height - l - f;
e.fillStyle = "rgba(0, 0, 0, 0.1)", e.fillRect(s + 2, h + 2, t, f);
const m = e.createLinearGradient(s, h, s, h + f), v = i.color || this.colors[g % this.colors.length];
m.addColorStop(0, v), m.addColorStop(1, this.colorWithOpacity(v, 0.7)), e.fillStyle = m, this.roundRect(e, s, h, t, f, 4), e.fill(), e.fillStyle = "#374151", e.textAlign = "center", e.font = "12px Inter, system-ui, sans-serif", e.fillText(u.toString(), s + t / 2, h - 8), e.save(), e.translate(s + t / 2, r.height - l + 8), e.rotate(-Math.PI / 6), e.fillText(i.label || "", 0, 0), e.restore();
});
}
roundRect(e, a, r, t, n, l) {
e.beginPath(), e.moveTo(a + l, r), e.lineTo(a + t - l, r), e.quadraticCurveTo(a + t, r, a + t, r + l), e.lineTo(a + t, r + n), e.lineTo(a, r + n), e.lineTo(a, r + l), e.quadraticCurveTo(a, r, a + l, r), e.closePath();
}
}
export {
M as BarChartRenderer
};