@milaboratories/miplots4 1.0.134 → 1.0.136

package/dist/discrete/ChartRenderer.js

@@ -1,104 +1,96 @@
-var Y = Object.defineProperty;
-var k = (x, i, t) => i in x ? Y(x, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : x[i] = t;
-var C = (x, i, t) => k(x, typeof i != "symbol" ? i + "" : i, t);
-import { j as w } from "../node_modules/react/jsx-runtime.js";
-import V from "../node_modules/lodash/lodash.js";
-import { createRoot as Z } from "../node_modules/react-dom/client.js";
-import { Error as $ } from "../common/Error.js";
-import { DataFrameProvider as q } from "../common/useDataFrame.js";
-import { DEFAULT_HEIGHT as P, DEFAULT_WIDTH as I, TITLE_LINE_HEIGHT as J, TITLE_MARGIN as Q } from "../constants.js";
-import { DEFAULT_COMMON_AES as R, DEFAULT_TICKS_SIZE as v } from "../scatterplot/constants.js";
-import { arrangeLegendParts as y } from "../utils/arrangeLegendParts.js";
-import { TextMeasurer as G } from "../utils/TextMeasurer/TextMeasurer.js";
-import { ChartsGroup as K } from "./components/ChartsGroup.js";
-import { DEFAULT_AES as O, CAPTION_LINE_HEIGHT as W, LEGEND_OFFSET as tt, TICK_OFFSET as B, TITLE_LINE as z, MIN_PADDING as H, FACET_TITLE_OFFSET as it, FACET_TITLE_LINE as st } from "./constants.js";
-import { getChartStatsPadding as X } from "./utils/getChartStatsPadding.js";
-import { splitTextByWidth as D } from "./utils/splitTextByWidth.js";
-import S from "../node_modules/d3-scale/src/ordinal.js";
-import j from "../node_modules/d3-scale/src/linear.js";
-import _ from "../node_modules/d3-scale/src/band.js";
-import et from "../node_modules/d3-scale/src/log.js";
-function ot(x, i, t, s) {
-  const e = [];
-  return x % t === t - 1 && e.push("right"), x % t === 0 && e.push("left"), x < t && e.push("top"), (Math.ceil((x + 1) / t) === s || Math.ceil((x + 1) / t) === s - 1 && x % t > (i - 1) % t) && e.push("bottom"), e;
+var S = Object.defineProperty;
+var U = (c, i, t) => i in c ? S(c, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[i] = t;
+var f = (c, i, t) => U(c, typeof i != "symbol" ? i + "" : i, t);
+import { j as E } from "../node_modules/react/jsx-runtime.js";
+import X from "../node_modules/lodash/lodash.js";
+import { createRoot as k } from "../node_modules/react-dom/client.js";
+import { Error as V } from "../common/Error.js";
+import { DataFrameProvider as y } from "../common/useDataFrame.js";
+import { DEFAULT_HEIGHT as z, DEFAULT_WIDTH as W, TITLE_LINE_HEIGHT as Z, TITLE_MARGIN as $ } from "../constants.js";
+import { DEFAULT_COMMON_AES as R, DEFAULT_TICKS_SIZE as D } from "../scatterplot/constants.js";
+import { arrangeLegendParts as q } from "../utils/arrangeLegendParts.js";
+import { TextMeasurer as J } from "../utils/TextMeasurer/TextMeasurer.js";
+import { ChartsGroup as Q } from "./components/ChartsGroup.js";
+import { DEFAULT_AES as P, LEGEND_OFFSET as G, TICK_OFFSET as v, TITLE_LINE as _, MIN_PADDING as H, FACET_TITLE_OFFSET as K, FACET_TITLE_LINE as tt } from "./constants.js";
+import { getChartStatsPadding as B } from "./utils/getChartStatsPadding.js";
+import { splitTextByWidth as O } from "../utils/splitTextByWidth.js";
+import { createMultilineDiscreteLabels as it } from "../utils/createMultilineDiscreteLabels.js";
+import { measureMultilineDiscreteLabels as st } from "../utils/measureMultilineDiscreteLabels.js";
+import { getFacetRows as et } from "../utils/getFacetRowsColumns.js";
+import j from "../node_modules/d3-scale/src/ordinal.js";
+import Y from "../node_modules/d3-scale/src/linear.js";
+import F from "../node_modules/d3-scale/src/band.js";
+import ot from "../node_modules/d3-scale/src/log.js";
+function ht(c, i, t, s) {
+  const o = [];
+  return c % t === t - 1 && o.push("right"), c % t === 0 && o.push("left"), c < t && o.push("top"), (Math.ceil((c + 1) / t) === s || Math.ceil((c + 1) / t) === s - 1 && c % t > (i - 1) % t) && o.push("bottom"), o;
 }
-function nt(x, i, t, s, e, r, p, o, c, d, u) {
-  const T = x === "vertical", m = p.includes("left") || T && !(o != null && o.sharedY) || !T && !(o != null && o.sharedX), M = p.includes("left") && t.title !== "", f = p.includes("bottom") || T && !(o != null && o.sharedX) || !T && !(o != null && o.sharedY), l = p.includes("bottom") && i.title !== "", h = s.yAxisCaptionsWidth, n = (t.showTicks ? v : 0) + (t.hiddenLabels ? 0 : B), a = M ? z : 0, g = s.xAxisCaptionsWidthByRows[T ? c : d], A = (i.showTicks ? v : 0) + (i.hiddenLabels ? 0 : B), L = l ? z : 0, N = T ? h + n + a : g + A + L, F = T ? A + g + L : n + 2 * z, b = Math.max(...e.map((E) => r[E].length));
+function nt(c, i, t, s, o, h, r, e, l, p, u) {
+  const d = c === "vertical", T = r.includes("left") || d && !(e != null && e.sharedY) || !d && !(e != null && e.sharedX), a = r.includes("left") && t.title !== "", x = r.includes("bottom") || d && !(e != null && e.sharedX) || !d && !(e != null && e.sharedY), n = r.includes("bottom") && i.title !== "", A = s.leftAxisCaptionsWidth, C = (t.showTicks ? D : 0) + (t.hiddenLabels ? 0 : v), m = a ? _ : 0, g = d ? s.bottomAxisCaptionsWidthByRows[l] : s.leftAxisCaptionsWidthByColumns[p], b = (i.showTicks ? D : 0) + (i.hiddenLabels ? 0 : v), M = d && n || !d && a ? _ : 0, N = d ? A + C + m : g + b + M, I = d ? b + g + M : C + 2 * _, L = Math.max(...o.map((w) => h[w].length));
   return {
-    left: m ? N : H,
-    top: b === 0 ? 0 : it * 2 + b * st,
-    bottom: f ? F : H,
+    left: T ? N : H,
+    top: L === 0 ? 0 : K * 2 + L * tt,
+    bottom: x ? I : H,
     right: u ? 0 : H
   };
 }
-function at(x, i, t) {
-  const s = new Array(t).fill(null).map(() => []);
-  for (let e = 0; e < t; e++)
-    for (let r = 0; r < i; r++)
-      r * t + e < x.length && s[e].push(x[r * t + e]);
-  return s;
-}
-function U(x, i, t) {
-  const s = [];
-  for (let e = 0; e < i; e++)
-    s.push(x.slice(e * t, e * t + t));
-  return s;
-}
-function ht(x, i) {
-  const t = Math.floor(x / i), s = x - t * i;
+function at(c, i) {
+  const t = Math.floor(c / i), s = c - t * i;
   return [t, s];
 }
-function rt(x) {
-  return typeof x == "object" && "type" in x;
+function rt(c) {
+  return typeof c == "object" && "type" in c;
 }
-class Nt {
+class It {
   constructor() {
-    C(this, "reactRoot", null);
-    C(this, "parentNode", null);
-    C(this, "rootNode", null);
-    C(this, "component", /* @__PURE__ */ w.jsx(w.Fragment, {}));
-    C(this, "chartsDimensions", {});
-    C(this, "chartSizes", {
-      chartWidth: I,
+    f(this, "reactRoot", null);
+    f(this, "parentNode", null);
+    f(this, "rootNode", null);
+    f(this, "component", /* @__PURE__ */ E.jsx(E.Fragment, {}));
+    f(this, "chartsDimensions", {});
+    f(this, "chartSizes", {
+      chartWidth: W,
       // width of single chart
-      chartHeight: P,
+      chartHeight: z,
       // height of single chart
-      chartsWidth: I,
+      chartsWidth: W,
       // width of all charts in charts row
-      chartsHeight: P,
+      chartsHeight: z,
       // width of all charts in charts column, without axes
-      totalWidth: I,
+      totalWidth: W,
       // width of all charts in charts row, plus left axis, plus legend
-      totalHeight: P
+      totalHeight: z
       // width of all charts in charts height, plus bottom axis, plus top title
     });
-    C(this, "columnsCount", 1);
-    C(this, "rowsCount", 1);
-    C(this, "scales", {
+    f(this, "columnsCount", 1);
+    f(this, "rowsCount", 1);
+    f(this, "scales", {
       // Scale from primary grouping categories to every category x coordinate
-      xPrimary: { null: _().range([0, I]).domain(["1"]) },
+      xPrimary: { null: F().range([0, W]).domain(["1"]) },
       // Scale from secondary grouping categories to x shift inside corresponding primary group
-      xSecondary: { null: _().range([0, I]).domain(["1"]) },
+      xSecondary: { null: F().range([0, W]).domain(["1"]) },
       // Scale from y value to y coordinate, by facet
-      y: { null: j().domain([0, 10]).range([P, 0]).nice() },
+      y: { null: Y().domain([0, 10]).range([z, 0]).nice() },
       // Scale for link primary grouping category and aesthetics
-      xPrimaryAes: S().unknown(O),
+      xPrimaryAes: j().unknown(P),
       // Scale for link secondary grouping category and aesthetics
-      xSecondaryAes: S().unknown(O)
+      xSecondaryAes: j().unknown(P)
     });
-    C(this, "facetTitles", {});
+    f(this, "facetTitles", {});
     // can be multiline
-    C(this, "mainTitle", []);
+    f(this, "mainTitle", []);
     // can be multiline
-    C(this, "axisLabelsX", {});
+    f(this, "axisLabelsX", {});
     // can be multiline
-    C(this, "captionsSizes", {
-      xAxisCaptionsWidthByRows: [],
-      xCaptionsTail: 0,
-      yAxisCaptionsWidth: 100
+    f(this, "captionsSizes", {
+      bottomAxisCaptionsWidthByRows: [],
+      leftAxisCaptionsWidthByColumns: [],
+      bottomCaptionsTail: 0,
+      leftCaptionsTail: 0,
+      leftAxisCaptionsWidth: 100
     });
-    C(this, "legend", { width: 0, height: 0, items: [] });
-    C(this, "margins", { left: 0, right: 0, top: 0, bottom: 0 });
+    f(this, "legend", { width: 0, height: 0, items: [] });
+    f(this, "margins", { left: 0, right: 0, top: 0, bottom: 0 });
   }
   clear() {
     var i;
@@ -108,210 +100,145 @@ class Nt {
     });
   }
   init(i) {
-    this.parentNode === null && (this.parentNode = i, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = Z(this.rootNode));
+    this.parentNode === null && (this.parentNode = i, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = k(this.rootNode));
   }
-  updateChartSize(i, t, s, e, r, p) {
-    const o = i.innerOffset, c = i.innerOffset, d = X(p, e, i.innerOffset), u = t.length, T = Math.min((s == null ? void 0 : s.nRows) ?? u, u), m = Math.min((s == null ? void 0 : s.nCols) ?? u, u);
-    this.columnsCount = s != null && s.nRows ? Math.ceil(u / T) : m, this.rowsCount = Math.ceil(u / this.columnsCount);
-    let { width: M, height: f } = i;
-    r === "vertical" && d > o && (f += d), r === "horizontal" && d > c && (M += d), this.chartSizes.chartWidth = M, this.chartSizes.chartHeight = f;
+  updateChartSize(i, t, s, o, h, r) {
+    const e = i.innerOffset, l = i.innerOffset, p = B(r, o, i.innerOffset), u = t.length, d = Math.min((s == null ? void 0 : s.nRows) ?? u, u), T = Math.min((s == null ? void 0 : s.nCols) ?? u, u);
+    this.columnsCount = s != null && s.nRows ? Math.ceil(u / d) : T, this.rowsCount = Math.ceil(u / this.columnsCount);
+    let { width: a, height: x } = i;
+    h === "vertical" && p > e && (x += p), h === "horizontal" && p > l && (a += p), this.chartSizes.chartWidth = a, this.chartSizes.chartHeight = x;
   }
-  updateChartDimensions(i, t, s, e, r) {
-    const { chartWidth: p, chartHeight: o } = this.chartSizes;
-    let c = 0, d = 0;
-    this.chartsDimensions = i.reduce((m, M, f) => {
-      const [l, h] = ht(f, this.columnsCount), n = ot(f, i.length, this.columnsCount, this.rowsCount), a = nt(
+  updateChartDimensions(i, t, s, o, h) {
+    const { chartWidth: r, chartHeight: e } = this.chartSizes;
+    let l = 0, p = 0;
+    const u = et(i, this.rowsCount, this.columnsCount);
+    this.chartsDimensions = i.reduce((a, x, n) => {
+      const [A, C] = at(n, this.columnsCount), m = ht(n, i.length, this.columnsCount, this.rowsCount), g = nt(
         s,
-        e,
-        r,
+        o,
+        h,
         this.captionsSizes,
-        U(i, this.rowsCount, this.columnsCount)[l],
+        u[A],
         this.facetTitles,
-        n,
+        m,
         t,
-        l,
-        h,
-        h === this.columnsCount - 1
-      ), g = p + a.left + a.right, A = o + a.top + a.bottom;
-      return m[M] = {
-        left: c,
-        top: d,
-        chartEdgeSides: n,
-        padding: a,
-        inner: { width: p, height: o },
-        outer: { width: g, height: A }
-      }, c += g, h === this.columnsCount - 1 && (c = 0, d += A), m;
+        A,
+        C,
+        C === this.columnsCount - 1
+      ), b = r + g.left + g.right, M = e + g.top + g.bottom;
+      return a[x] = {
+        left: l,
+        top: p,
+        chartEdgeSides: m,
+        padding: g,
+        inner: { width: r, height: e },
+        outer: { width: b, height: M }
+      }, l += b, C === this.columnsCount - 1 && (l = 0, p += M), a;
     }, {});
-    const u = Math.max(
-      ...i.map((m) => this.chartsDimensions[m].outer.width + this.chartsDimensions[m].left)
+    const d = Math.max(
+      ...i.map((a) => this.chartsDimensions[a].outer.width + this.chartsDimensions[a].left)
     ), T = Math.max(
-      ...i.map((m) => this.chartsDimensions[m].outer.height + this.chartsDimensions[m].top)
+      ...i.map((a) => this.chartsDimensions[a].outer.height + this.chartsDimensions[a].top)
     );
-    this.chartSizes.chartsWidth = u, this.chartSizes.chartsHeight = T;
+    this.chartSizes.chartsWidth = d, this.chartSizes.chartsHeight = T;
   }
-  updateViewport(i, t, s, e, r, p, o, c, d, u) {
-    const T = d.innerOffset, m = i === "vertical", M = X(c, t, d.innerOffset), f = r === null || r.sharedX, l = r === null || r.sharedY, { chartHeight: h, chartWidth: n } = this.chartSizes;
-    e.forEach((a) => {
-      const g = p.scale === "log" ? et() : j(), A = Math.min(...l ? o.map(({ meta: b }) => b.minY) : o.map(({ geoms: b }) => Math.min(...b[a].map(({ boundsY: E }) => E.min)))), L = Math.max(...l ? o.map(({ meta: b }) => b.maxY) : o.map(({ geoms: b }) => Math.max(...b[a].map(({ boundsY: E }) => E.max)))), N = g.copy().domain([A, L]).range(
-        m ? [h - T, M] : [T, n - M]
+  updateViewport(i, t, s, o, h, r, e, l, p, u) {
+    const d = p.innerOffset, T = i === "vertical", a = B(l, t, p.innerOffset), x = h === null || h.sharedX, n = h === null || h.sharedY, { chartHeight: A, chartWidth: C } = this.chartSizes;
+    o.forEach((m) => {
+      const g = r.scale === "log" ? ot() : Y(), b = Math.min(...n ? e.map(({ meta: L }) => L.minY) : e.map(({ geoms: L }) => Math.min(...L[m].map(({ boundsY: w }) => w.min)))), M = Math.max(...n ? e.map(({ meta: L }) => L.maxY) : e.map(({ geoms: L }) => Math.max(...L[m].map(({ boundsY: w }) => w.max)))), N = g.copy().domain([b, M]).range(
+        T ? [A - d, a] : [d, C - a]
       );
-      g.domain([N.invert(m ? h : 0), N.invert(m ? 0 : n)]).range(m ? [h, 0] : [0, n]), this.scales.y[a] = g;
-      const F = f ? t : u[a];
-      this.scales.xPrimary[a] = _().domain(F).range(m ? [0, n] : [h, 0]), this.scales.xSecondary[a] = _().domain(s).range([0, this.scales.xPrimary[a].bandwidth()]);
+      g.domain([N.invert(T ? A : 0), N.invert(T ? 0 : C)]).range(T ? [A, 0] : [0, C]), this.scales.y[m] = g;
+      const I = x ? t : u[m];
+      this.scales.xPrimary[m] = F().domain(I).range(T ? [0, C] : [A, 0]), this.scales.xSecondary[m] = F().domain(s).range([0, this.scales.xPrimary[m].bandwidth()]);
     });
   }
   createFacetTitles(i, t) {
-    this.facetTitles = i.reduce((s, e, r) => (t[r].length === 1 && t[r][0] === "null" ? s[e] = [] : s[e] = D(t[r].join(", "), this.chartSizes.chartWidth, 14), s), {});
+    this.facetTitles = i.reduce((s, o, h) => (t[h].length === 1 && t[h][0] === "null" ? s[o] = [] : s[o] = O(t[h].join(", "), this.chartSizes.chartWidth, 14), s), {});
   }
   createMainTitle(i, t) {
-    const s = this.chartsDimensions[i[0]], e = this.chartsDimensions[i[i.length - 1]];
-    this.mainTitle = D(
+    const s = this.chartsDimensions[i[0]], o = this.chartsDimensions[i[i.length - 1]];
+    this.mainTitle = O(
       t.name,
-      this.chartSizes.chartsWidth - s.padding.left - e.padding.right,
+      this.chartSizes.chartsWidth - s.padding.left - o.padding.right,
       20
     );
   }
-  createAxisLabels(i, t, s, e) {
-    const r = {
-      center: 120,
-      "45deg": 256,
-      "90deg": 320
-    }, p = e === "vertical";
-    function o(c, d) {
-      return c === "center" ? 1 / 0 : Math.floor(c === "45deg" ? d * Math.sin(Math.PI / 4) / W : d / W);
-    }
-    this.axisLabelsX = i.reduce((c, d) => {
-      const u = this.scales.xPrimary[d], T = u.bandwidth(), m = r[t.labelsPosition], M = t.labelsPosition === "center" ? Math.min(m, T) : m, f = s.valueLabels;
-      return c[d] = u.domain().reduce((l, h) => {
-        if (t.hiddenLabels)
-          return l[h] = [], l;
-        const n = f[h];
-        if (!p)
-          l[h] = [n];
-        else {
-          const a = o(t.labelsPosition, T), g = D(n, M, 14);
-          l[h] = g.length > a ? [n] : g;
-        }
-        return l;
-      }, {}), c;
-    }, {});
+  createAxisLabels(i, t, s, o) {
+    this.axisLabelsX = it(
+      i,
+      t.labelsPosition,
+      s.valueLabels,
+      t.hiddenLabels,
+      o,
+      this.scales.xPrimary
+    );
   }
   updateAesScales(i, t) {
     if (i.inheritedAes) {
-      const { inheritedAes: s, keys: e } = i;
-      this.scales.xPrimaryAes.domain(e).range(e.map((r) => s[r] ?? R));
+      const { inheritedAes: s, keys: o } = i;
+      this.scales.xPrimaryAes.domain(o).range(o.map((h) => s[h] ?? R));
     } else
       this.scales.xPrimaryAes.domain([]).range([]);
     if (t.inheritedAes) {
-      const { inheritedAes: s, keys: e } = t;
-      this.scales.xSecondaryAes.domain(e).range(e.map((r) => s[r] ?? R));
+      const { inheritedAes: s, keys: o } = t;
+      this.scales.xSecondaryAes.domain(o).range(o.map((h) => s[h] ?? R));
     } else
       this.scales.xSecondaryAes.domain([]).range([]);
   }
-  updateCaptionsSize(i, t, s, e) {
-    const p = new G("600 14px Manrope"), o = i === "vertical";
-    function c(h) {
-      return h.length ? Math.max(...h.map((n) => p.getTextWidth(n))) : 0;
+  updateCaptionsSize(i, t, s, o) {
+    const r = new J("600 14px Manrope");
+    function e(a) {
+      return a.length ? Math.max(...a.map((x) => r.getTextWidth(x))) : 0;
     }
-    function d(h) {
-      return h.length ? Math.max(...h.map(c)) : 0;
-    }
-    let u = [], T = 0;
-    const m = U(t, this.rowsCount, this.columnsCount), M = at(t, this.rowsCount, this.columnsCount);
-    if (!o)
-      u = M.map(
-        (h) => Math.max(
-          ...h.map(
-            (n) => d(
-              this.scales.xPrimary[n].domain().map((a) => this.axisLabelsX[n][a])
-            )
-          )
-        )
-      );
-    else {
-      if (s.labelsPosition === "center" && (u = m.map(
-        (h) => Math.max(
-          ...h.map(
-            (n) => Math.max(
-              ...this.scales.xPrimary[n].domain().map(
-                (a) => a ? this.axisLabelsX[n][a].length * W : 0
-              )
-            )
-          )
-        )
-      )), s.labelsPosition === "45deg") {
-        const h = Math.sin(Math.PI / 4);
-        u = m.map((n) => Math.max(
-          ...n.map((a) => {
-            const g = this.scales.xPrimary[a].domain().map((L) => this.axisLabelsX[a][L]), A = d(g);
-            return A > 0 ? A * h + 14 : 0;
-          })
-        )), T = Math.max(
-          ...M[0].map((n) => {
-            const a = this.scales.xPrimary[n].domain(), g = this.axisLabelsX[n][a[0]];
-            return Math.max(
-              c(g) * h - this.scales.xPrimary[n].bandwidth() / 2 + 14,
-              0
-            );
-          })
-        );
-      }
-      s.labelsPosition === "90deg" && (u = m.map(
-        (h) => Math.max(
-          ...h.map(
-            (n) => d(
-              this.scales.xPrimary[n].domain().map((a) => this.axisLabelsX[n][a])
-            )
-          )
-        )
-      ));
-    }
-    const f = V.flatten(
-      t.map((h) => {
-        if (e.hiddenLabels)
+    const { xTail: l, yTail: p, axisCaptionsWidthByRows: u, axisCaptionsWidthByColumns: d } = st(t, this.rowsCount, this.columnsCount, s.labelsPosition, this.axisLabelsX, i, this.scales.xPrimary), T = X.flatten(
+      t.map((a) => {
+        if (o.hiddenLabels)
           return [];
-        const n = this.scales.y[h], a = n.ticks(), g = a.some((L) => Math.abs(L) < 1e-4 && L !== 0 || L > 1e4) ? ",e" : ",f", A = n.tickFormat(10, g);
-        return a.map(A);
+        const x = this.scales.y[a], n = x.ticks(), A = n.some((m) => Math.abs(m) < 1e-4 && m !== 0 || m > 1e4) ? ",e" : ",f", C = x.tickFormat(10, A);
+        return n.map(C);
       })
-    ), l = c(f);
+    );
     this.captionsSizes = {
-      xCaptionsTail: T,
-      xAxisCaptionsWidthByRows: u,
-      yAxisCaptionsWidth: l
+      bottomCaptionsTail: l,
+      leftCaptionsTail: p,
+      bottomAxisCaptionsWidthByRows: u,
+      leftAxisCaptionsWidthByColumns: d,
+      leftAxisCaptionsWidth: e(T)
     };
   }
   updateMargins(i, t, s) {
-    const e = this.chartsDimensions[t[0]], r = this.chartsDimensions[t[t.length - 1]], p = i === "vertical", o = this.mainTitle.length ? J * this.mainTitle.length + Q * 2 : 0, c = s.outerOffset;
+    const o = this.chartsDimensions[t[0]], h = this.chartsDimensions[t[t.length - 1]], r = i === "vertical", e = this.mainTitle.length ? Z * this.mainTitle.length + $ * 2 : 0, l = s.outerOffset;
     this.margins = {
-      left: Math.max(c, p ? this.captionsSizes.xCaptionsTail - e.padding.left : 0),
-      right: this.legend.width + c,
-      top: Math.max(o, c),
-      bottom: Math.max(c, p ? 0 : this.captionsSizes.xCaptionsTail - r.padding.bottom)
+      left: Math.max(l, r ? this.captionsSizes.bottomCaptionsTail - o.padding.left : 0),
+      right: this.legend.width + l,
+      top: Math.max(e, l),
+      bottom: Math.max(l, r ? 0 : this.captionsSizes.leftCaptionsTail - h.padding.bottom)
     }, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartsHeight, this.legend.height) + this.margins.bottom;
   }
-  updateLegendSize(i, t, s, e) {
+  updateLegendSize(i, t, s, o) {
     if (!i.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const r = this.chartSizes.chartHeight, p = { width: 0, height: 0, left: 0, top: 0 }, o = [];
-    function c(l, h) {
-      return e.some((n) => {
-        const a = n.aes[h];
-        return a && rt(a) && a.type === l;
+    const h = this.chartSizes.chartHeight, r = { width: 0, height: 0, left: 0, top: 0 }, e = [];
+    function l(n, A) {
+      return o.some((C) => {
+        const m = C.aes[A];
+        return m && rt(m) && m.type === n;
       });
     }
-    function d(l) {
+    function p(n) {
       return {
-        dotFill: c(l, "dotFill"),
-        fillColor: c(l, "fillColor"),
-        lineColor: c(l, "lineColor"),
-        dotShape: c(l, "dotShape"),
-        lineShape: c(l, "lineShape")
+        dotFill: l(n, "dotFill"),
+        fillColor: l(n, "fillColor"),
+        lineColor: l(n, "lineColor"),
+        dotShape: l(n, "dotShape"),
+        lineShape: l(n, "lineShape")
       };
     }
-    const u = d("primaryGrouping"), T = d("secondaryGrouping");
-    if (Object.values(u).some((l) => l) && t.inheritedAes && o.push({
+    const u = p("primaryGrouping"), d = p("secondaryGrouping");
+    if (Object.values(u).some((n) => n) && t.inheritedAes && e.push({
       type: "discreteMulti",
       id: "primary",
       title: t.label,
@@ -319,74 +246,74 @@ class Nt {
       values: t.keys,
       labels: t.valueLabels,
       usedAes: u,
-      ...p
-    }), Object.values(T).some((l) => l) && s.inheritedAes && o.push({
+      ...r
+    }), Object.values(d).some((n) => n) && s.inheritedAes && e.push({
       type: "discreteMulti",
       id: "secondary",
       title: s.label,
       scale: this.scales.xSecondaryAes,
       values: s.keys,
       labels: s.valueLabels,
-      usedAes: T,
-      ...p
-    }), !o.length) {
+      usedAes: d,
+      ...r
+    }), !e.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const m = y(o, this.chartSizes.chartHeight), M = m[m.length - 1], f = M.left + M.width + tt;
+    const T = q(e, this.chartSizes.chartHeight), a = T[T.length - 1], x = a.left + a.width + G;
     this.legend = {
-      width: f,
-      height: r,
-      items: m
+      width: x,
+      height: h,
+      items: T
     };
   }
-  render(i, t, s, e, r, p, o, c, d, u, T, m, M, f) {
-    var A;
-    const { orientation: l, xAxis: h, yAxis: n, size: a } = s;
-    this.updateChartSize(a, o, p, e.keys, l, u), this.updateViewport(
-      l,
-      e.keys,
-      r.keys,
-      o,
-      p,
+  render(i, t, s, o, h, r, e, l, p, u, d, T, a, x) {
+    var b;
+    const { orientation: n, xAxis: A, yAxis: C, size: m } = s;
+    this.updateChartSize(m, e, r, o.keys, n, u), this.updateViewport(
       n,
-      d,
+      o.keys,
+      h.keys,
+      e,
+      r,
+      C,
+      p,
       u,
-      a,
-      m
-    ), this.createAxisLabels(o, h, e, l), this.createFacetTitles(o, c), this.updateCaptionsSize(l, o, h, n), this.updateChartDimensions(o, p, l, h, n), this.updateLegendSize(s.legend, e, r, d), this.createMainTitle(o, s.title), this.updateMargins(l, o, a), this.updateAesScales(e, r);
-    const g = /* @__PURE__ */ w.jsx(q, { dataFrame: i, children: /* @__PURE__ */ w.jsx(
-      K,
+      m,
+      T
+    ), this.createAxisLabels(e, A, o, n), this.createFacetTitles(e, l), this.updateCaptionsSize(n, e, A, C), this.updateChartDimensions(e, r, n, A, C), this.updateLegendSize(s.legend, o, h, p), this.createMainTitle(e, s.title), this.updateMargins(n, e, m), this.updateAesScales(o, h);
+    const g = /* @__PURE__ */ E.jsx(y, { dataFrame: i, children: /* @__PURE__ */ E.jsx(
+      Q,
       {
         settingsId: t,
         chartSettings: s,
-        facetKeys: o,
-        facetSettings: p,
+        facetKeys: e,
+        facetSettings: r,
         facetTitles: this.facetTitles,
         chartSizes: this.chartSizes,
         chartsDimensions: this.chartsDimensions,
         scales: this.scales,
-        layersData: d,
+        layersData: p,
         statsData: u,
         legendData: this.legend,
         margins: this.margins,
         columnsCount: this.columnsCount,
-        keyColumn: T,
+        keyColumn: d,
         xLabels: this.axisLabelsX,
         chartTitle: this.mainTitle,
-        onlyPositive: M,
-        secondaryGrouping: r,
-        onTooltipHintSwitch: f
+        onlyPositive: a,
+        secondaryGrouping: h,
+        onTooltipHintSwitch: x
       }
     ) });
-    this.component = g, (A = this.reactRoot) == null || A.render(g);
+    this.component = g, (b = this.reactRoot) == null || b.render(g);
   }
   renderError(i) {
     var t;
-    (t = this.reactRoot) == null || t.render(/* @__PURE__ */ w.jsx($, { message: i }));
+    (t = this.reactRoot) == null || t.render(/* @__PURE__ */ E.jsx(V, { message: i }));
   }
 }
 export {
-  Nt as default
+  It as default
 };
 //# sourceMappingURL=ChartRenderer.js.map