on-codemerge/dist/src/plugins/ChartsPlugin/renderers/BarChartRenderer.mjs

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

/*! 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 y } from "./BaseChartRenderer.mjs";
import { validateChartData as H } from "../utils/validation.mjs";
class R extends y {
  render(t, e, a) {
    if (!H(e)) {
      this.drawNoDataMessage(t, a);
      return;
    }
    const l = Array.isArray(e) && "data" in e[0] ? e : [{ name: "", data: e }], n = l[0].data.map((s) => s.label || ""), f = a.mode || "default", v = a.orientation || "vertical";
    let o = 1;
    f === "stacked" ? o = Math.max(
      ...n.map((s, r) => l.reduce((h, d) => {
        var S;
        return h + (((S = d.data[r]) == null ? void 0 : S.value) || 0);
      }, 0))
    ) : o = Math.max(...l.flatMap((s) => s.data.map((r) => r.value || 0)), 1), this.drawBackground(t, a), this.drawTitle(t, a), this.drawGrid(t, a, o, !0, n, "bar"), v === "vertical" ? f === "stacked" ? this.drawStackedBars(t, l, a, o, this.getColors(a)) : f === "grouped" ? this.drawGroupedBars(t, l, a, o, this.getColors(a)) : this.drawSingleBars(t, l, a, o, this.getColors(a)) : f === "stacked" ? this.drawHorizontalStackedBars(t, l, a, o, this.getColors(a)) : f === "grouped" ? this.drawHorizontalGroupedBars(t, l, a, o, this.getColors(a)) : this.drawHorizontalBars(t, l, a, o, this.getColors(a)), this.drawAxisLabels(t, a), this.drawLegend(t, l, a);
  }
  // Обычные вертикальные bars (single series)
  drawSingleBars(t, e, a, u, l) {
    const { padding: n, width: f, height: v } = this.getDimensions(a), o = e[0].data, s = o.length, r = f, h = Math.max(20, r / Math.max(1, s) / 1.5), d = r / s, S = v / u;
    o.forEach((g, m) => {
      const i = g.value || 0, b = n + d * m + (d - h) / 2, c = i * S, C = a.height - n - c, B = g.color || l[m % l.length];
      t.fillStyle = "rgba(0,0,0,0.1)", t.fillRect(b + 2, C + 2, h, c);
      const w = t.createLinearGradient(b, C, b, C + c);
      w.addColorStop(0, B), w.addColorStop(1, this.colorWithOpacity(B, 0.7)), t.fillStyle = w, this.roundRect(t, b, C, h, c, 4), t.fill(), t.fillStyle = this.getTextColor(a), t.textAlign = "center", t.font = "12px Inter, system-ui, sans-serif", t.fillText(i.toString(), b + h / 2, C - 8);
    });
  }
  // Stacked bars
  drawStackedBars(t, e, a, u, l) {
    var h;
    const { padding: n, width: f, height: v } = this.getDimensions(a), o = e[0].data.length, s = f / o, r = Math.max(20, s / 1.5);
    for (let d = 0; d < o; d++) {
      let S = a.height - n;
      for (let g = 0; g < e.length; g++) {
        const i = (((h = e[g].data[d]) == null ? void 0 : h.value) || 0) * v / u;
        S -= i;
        const b = n + s * d + (s - r) / 2, c = e[g].color || l[g % l.length];
        t.fillStyle = c, this.roundRect(t, b, S, r, i, 4), t.fill();
      }
    }
  }
  // Grouped bars
  drawGroupedBars(t, e, a, u, l) {
    var g;
    const { padding: n, width: f, height: v } = this.getDimensions(a), o = e[0].data.length, s = e.length, r = f / o, h = Math.max(20, r / 1.2), d = h / s, S = v / u;
    for (let m = 0; m < o; m++)
      for (let i = 0; i < s; i++) {
        const c = (((g = e[i].data[m]) == null ? void 0 : g.value) || 0) * S, C = n + r * m + (r - h) / 2 + i * d, B = a.height - n - c, w = e[i].color || l[i % l.length];
        t.fillStyle = w, this.roundRect(t, C, B, d, c, 4), t.fill();
      }
  }
  // Горизонтальные обычные bars
  drawHorizontalBars(t, e, a, u, l) {
    const { padding: n, width: f, height: v } = this.getDimensions(a), o = e[0].data, s = o.length, r = v, h = Math.max(20, r / Math.max(1, s) / 1.5), d = r / s, S = f / u;
    o.forEach((g, m) => {
      const i = g.value || 0, b = n + d * m + (d - h) / 2, c = i * S, C = n, B = g.color || l[m % l.length];
      t.fillStyle = "rgba(0,0,0,0.1)", t.fillRect(C + 2, b + 2, c, h);
      const w = t.createLinearGradient(C, b, C + c, b);
      w.addColorStop(0, B), w.addColorStop(1, this.colorWithOpacity(B, 0.7)), t.fillStyle = w, this.roundRect(t, C, b, c, h, 4), t.fill(), t.fillStyle = this.getTextColor(a), t.textAlign = "left", t.font = "12px Inter, system-ui, sans-serif", t.fillText(i.toString(), C + c + 8, b + h / 2);
    });
  }
  // Горизонтальные stacked bars
  drawHorizontalStackedBars(t, e, a, u, l) {
    var h;
    const { padding: n, width: f, height: v } = this.getDimensions(a), o = e[0].data.length, s = v / o, r = Math.max(20, s / 1.5);
    for (let d = 0; d < o; d++) {
      let S = n;
      for (let g = 0; g < e.length; g++) {
        const i = (((h = e[g].data[d]) == null ? void 0 : h.value) || 0) * f / u, b = n + s * d + (s - r) / 2, c = e[g].color || l[g % l.length];
        t.fillStyle = c, this.roundRect(t, S, b, i, r, 4), t.fill(), S += i;
      }
    }
  }
  // Горизонтальные grouped bars
  drawHorizontalGroupedBars(t, e, a, u, l) {
    var g;
    const { padding: n, width: f, height: v } = this.getDimensions(a), o = e[0].data.length, s = e.length, r = v / o, h = Math.max(20, r / 1.2), d = h / s, S = f / u;
    for (let m = 0; m < o; m++)
      for (let i = 0; i < s; i++) {
        const c = (((g = e[i].data[m]) == null ? void 0 : g.value) || 0) * S, C = n + r * m + (r - h) / 2 + i * d, B = n, w = e[i].color || l[i % l.length];
        t.fillStyle = w, this.roundRect(t, B, C, c, d, 4), t.fill();
      }
  }
  roundRect(t, e, a, u, l, n) {
    t.beginPath(), t.moveTo(e + n, a), t.lineTo(e + u - n, a), t.quadraticCurveTo(e + u, a, e + u, a + n), t.lineTo(e + u, a + l), t.lineTo(e, a + l), t.lineTo(e, a + n), t.quadraticCurveTo(e, a, e + n, a), t.closePath();
  }
}
export {
  R as BarChartRenderer
};