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
53 lines (52 loc) • 2.51 kB
JavaScript
var m = Object.defineProperty;
var y = (o, e, t) => e in o ? m(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
var f = (o, e, t) => y(o, typeof e != "symbol" ? e + "" : e, t);
import { CHART_COLORS as u, colorWithOpacity as w } from "../utils/colors.mjs";
class M {
constructor(e) {
f(this, "editor");
f(this, "colors", u);
this.editor = e;
}
colorWithOpacity(e, t) {
return w(e, t);
}
getDimensions(e) {
const t = Math.max(40, e.padding || 40), n = Math.max(0, e.width - t * 2), l = Math.max(0, e.height - t * 2);
return { padding: t, width: n, height: l };
}
getCircleDimensions(e) {
const t = e.width / 2, n = e.height / 2, l = Math.min(t, n) - 60;
return { centerX: t, centerY: n, radius: l };
}
drawNoDataMessage(e, t) {
e.save(), e.fillStyle = "#6b7280", e.textAlign = "center", e.textBaseline = "middle", e.font = "14px Inter, system-ui, sans-serif", e.fillText(
this.editor.t("No valid data points to display"),
t.width / 2,
t.height / 2
), e.restore();
}
drawGrid(e, t, n, l = !0, h) {
const { padding: i, width: a, height: d } = this.getDimensions(t);
e.save(), e.strokeStyle = "#e5e7eb", e.lineWidth = 1, e.fillStyle = "#6b7280", e.font = "12px Inter, system-ui, sans-serif";
for (let r = 0; r <= 5; r++) {
const s = i + d * r / 5, g = Math.round(n * (1 - r / 5));
e.beginPath(), e.moveTo(i, s), e.lineTo(t.width - i, s), e.stroke(), e.textAlign = "right", e.textBaseline = "middle", e.fillText(g.toString(), i - 10, s);
}
l && (e.beginPath(), e.moveTo(i, t.height - i), e.lineTo(t.width - i, t.height - i), e.stroke(), h && h.length > 0 && (e.textAlign = "center", e.textBaseline = "top", h.forEach((r, s) => {
const g = i + a * s / (h.length - 1);
e.save(), e.translate(g, t.height - i + 8), e.rotate(-Math.PI / 6), e.fillText(r, 0, 0), e.restore();
}))), e.restore();
}
drawLegend(e, t, n) {
const { padding: l } = this.getDimensions(n), h = l / 2;
let i = l;
t.forEach((a, d) => {
const r = a.name || this.editor.t("Series") + ` ${d + 1}`, s = a.color || this.colors[d % this.colors.length];
e.beginPath(), e.arc(i, h, 6, 0, Math.PI * 2), e.fillStyle = this.colorWithOpacity(s, 0.3), e.fill(), e.strokeStyle = s, e.lineWidth = 2, e.stroke(), e.fillStyle = "#374151", e.textAlign = "left", e.fillText(r, i + 15, h + 4), i += e.measureText(r).width + 40;
});
}
}
export {
M as BaseChartRenderer
};