@milaboratories/graph-maker 1.1.141 → 1.1.143

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot/ChartRenderer.js

@@ -1,92 +1,114 @@
-import { j as b } from "../node_modules/react/jsx-runtime.js";
-import { createRoot as K } from "../node_modules/react-dom/client.js";
-import { Error as Z } from "../common/Error.js";
-import { DataFrameProvider as q } from "../common/useDataFrame.js";
-import { DEFAULT_HEIGHT as $, DEFAULT_WIDTH as R, TITLE_LINE_HEIGHT as J, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as Q, BLACK as B, TITLE_MARGIN as tt } from "../constants.js";
-import { FACET_TITLE_LINE as et } from "../discrete/constants.js";
-import { splitTextByWidth as O } from "../discrete/utils/splitTextByWidth.js";
-import { isContinuousAes as V } from "../types/common.js";
+import { j as Y } from "../node_modules/react/jsx-runtime.js";
+import { createRoot as it } from "../node_modules/react-dom/client.js";
+import { Error as at } from "../common/Error.js";
+import { DataFrameProvider as ot } from "../common/useDataFrame.js";
+import { DEFAULT_HEIGHT as P, DEFAULT_WIDTH as k, TITLE_LINE_HEIGHT as nt, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as rt, BLACK as st, TITLE_MARGIN as ht } from "../constants.js";
+import { FACET_TITLE_LINE as lt } from "../discrete/constants.js";
+import { splitTextByWidth as V } from "../utils/splitTextByWidth.js";
+import { isContinuousAes as j } from "../types/common.js";
 import "../types/discrete.js";
 import "../types/scatterplot.js";
 import "../types/heatmap.js";
 import "../types/dendro.js";
 import "../types/histogram.js";
 import "../types/bubble.js";
-import { arrangeLegendParts as it } from "../utils/arrangeLegendParts.js";
-import { getContinuousColorScale as st } from "../utils/getContinuousColorScale.js";
-import { getContinuousLegendTicks as at } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as ot } from "../utils/TextMeasurer/TextMeasurer.js";
-import { ChartsGroup as nt } from "./components/ChartsGroup.js";
-import { PADDINGS as X, MIN_MARGIN as D, DEFAULT_DOT_AES as W, LEGEND_OFFSET as rt, TICK_OFFSET as G, DEFAULT_TICKS_SIZE as k, MIN_PADDING as H, FACET_TITLE_OFFSET as ht, FACET_AXIS_OFFSET as P, TITLE_LINE as j } from "./constants.js";
-import { createAesGetter as Y } from "./utils/createAesGetter.js";
-import { getTicksAndFormat as lt } from "./utils/getTicksAndFormat.js";
-import L from "../node_modules/d3-scale/src/linear.js";
-import U from "../node_modules/d3-scale/src/log.js";
-import ct from "../node_modules/d3-scale/src/ordinal.js";
-import mt from "../node_modules/d3-scale/src/symlog.js";
-import { sqrt as dt } from "../node_modules/d3-scale/src/pow.js";
-var ut = Object.defineProperty, pt = (h, t, e) => t in h ? ut(h, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[t] = e, E = (h, t, e) => pt(h, typeof t != "symbol" ? t + "" : t, e);
-function gt(h, t, e, s) {
-  const i = [];
-  return h % e === e - 1 && i.push("right"), h % e === 0 && i.push("left"), h < e && i.push("top"), (Math.ceil((h + 1) / e) === s || Math.ceil((h + 1) / e) === s - 1 && h % e > (t - 1) % e) && i.push("bottom"), i;
+import { arrangeLegendParts as ct } from "../utils/arrangeLegendParts.js";
+import { getContinuousColorScale as mt } from "../utils/getContinuousColorScale.js";
+import { getContinuousLegendTicks as dt } from "../utils/getContinuousLegendTicks.js";
+import { TextMeasurer as ut } from "../utils/TextMeasurer/TextMeasurer.js";
+import { ChartsGroup as pt } from "./components/ChartsGroup.js";
+import { PADDINGS as B, MIN_MARGIN as D, DEFAULT_DOT_AES as _, LEGEND_OFFSET as gt, TICK_OFFSET as X, DEFAULT_TICKS_SIZE as U, MIN_PADDING as H, FACET_TITLE_OFFSET as ft, TITLE_LINE as G, FACET_AXIS_OFFSET as $ } from "./constants.js";
+import { createAesGetter as F } from "./utils/createAesGetter.js";
+import { getTicksAndFormat as xt } from "./utils/getTicksAndFormat.js";
+import { isContinuousAxis as K } from "./utils/isNumericScale.js";
+import { createMultilineDiscreteLabels as q } from "../utils/createMultilineDiscreteLabels.js";
+import { measureMultilineDiscreteLabels as Q } from "../utils/measureMultilineDiscreteLabels.js";
+import R from "../node_modules/d3-scale/src/linear.js";
+import { point as Z } from "../node_modules/d3-scale/src/band.js";
+import J from "../node_modules/d3-scale/src/log.js";
+import St from "../node_modules/d3-scale/src/ordinal.js";
+import Tt from "../node_modules/d3-scale/src/symlog.js";
+import { sqrt as Ct } from "../node_modules/d3-scale/src/pow.js";
+var zt = Object.defineProperty, bt = (n, t, e) => t in n ? zt(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e, M = (n, t, e) => bt(n, typeof t != "symbol" ? t + "" : t, e);
+function tt(n, t) {
+  if (n === void 0)
+    return !0;
+  {
+    const e = n.domain(), i = n.range(), s = t.domain(), a = t.range();
+    if (e.length !== s.length || e.some((p, S) => p !== s[S]) || i[0] !== a[0] || i[1] !== a[1])
+      return !0;
+  }
+  return !1;
+}
+function yt(n, t, e, i) {
+  const s = [];
+  return n % e === e - 1 && s.push("right"), n % e === 0 && s.push("left"), n < e && s.push("top"), (Math.ceil((n + 1) / e) === i || Math.ceil((n + 1) / e) === i - 1 && n % e > (t - 1) % e) && s.push("bottom"), s;
 }
-function ft(h, t, e, s, i, a, m) {
-  const g = a.includes("left") || !(m != null && m.sharedY), M = a.includes("left") && t.title !== "", F = a.includes("bottom") || !(m != null && m.sharedX), N = a.includes("bottom") && h.title !== "", n = e.yAxisCaptionsWidth + 2 * G, o = (t.showTicks ? k : 0) + G, d = M ? j + H : 0, T = e.xAxisCaptionsWidth + 2 * G, z = h.showTicks ? k : 0, c = N ? j + H : 0, l = n + o + d + P, f = T + z + c + P, C = Math.max(...s.map((u) => i[u].length));
+function At(n, t, e, i, s, a, p, S, C, g) {
+  const N = n.scale === "discrete", m = t.scale === "discrete", o = a.includes("left") || !(g != null && g.sharedY), r = a.includes("left") && t.title !== "", c = a.includes("bottom") || !(g != null && g.sharedX), f = a.includes("bottom") && n.title !== "", h = m ? e.leftAxisCaptionsWidthByColumns[S] : e.yAxisCaptionsWidth + 2 * X, d = (t.showTicks ? U : 0) + X, T = r ? G + H : 0, b = N ? e.bottomAxisCaptionsWidthByRows[p] : e.xAxisCaptionsWidth + 2 * X, z = n.showTicks ? U : 0, w = f ? G + H : 0, x = h + d + T + $, l = b + z + w + $, E = Math.max(...i.map((u) => s[u].length));
   return {
-    left: g ? l : H,
-    top: C === 0 ? 0 : ht * 2 + C * et,
-    bottom: F ? f + 8 : H,
-    right: H
+    left: o ? x : H,
+    top: E === 0 ? 0 : ft * 2 + E * lt,
+    bottom: c ? l + 8 : H,
+    right: C ? 0 : H
   };
 }
-function St(h, t, e) {
-  const s = [];
-  for (let i = 0; i < t; i++)
-    s.push(h.slice(i * e, i * e + e));
-  return s;
+function Mt(n, t, e) {
+  const i = [];
+  for (let s = 0; s < t; s++)
+    i.push(n.slice(s * e, s * e + e));
+  return i;
 }
-function Tt(h, t) {
-  const e = Math.floor(h / t), s = h - e * t;
-  return [e, s];
+function vt(n, t) {
+  const e = Math.floor(n / t), i = n - e * t;
+  return [e, i];
 }
-function xt(h, t, e, s) {
-  const i = e.find((m) => m.type === "dots"), a = e.find((m) => m.type === "curve");
+function Nt(n, t, e, i) {
+  const s = e.find((p) => p.type === "dots"), a = e.find((p) => p.type === "curve");
   return {
-    dotShape: Y(h, t, (i == null ? void 0 : i.aes.dotShape) ?? W.shape, "dotShape"),
-    dotColor: Y(h, t, (i == null ? void 0 : i.aes.dotFill) ?? W.color, "dotFill"),
-    dotSize: Y(h, t, (i == null ? void 0 : i.aes.dotSize) ?? W.size, "dotSize"),
-    lineShape: Y(h, t, (a == null ? void 0 : a.aes.lineShape) ?? "solid", "lineShape"),
-    lineColor: Y(h, t, (a == null ? void 0 : a.aes.lineColor) ?? B, "lineColor"),
-    trendColor: Y(h, t, (s == null ? void 0 : s.color) ?? W.color, "fillColor")
+    dotShape: F(n, t, (s == null ? void 0 : s.aes.dotShape) ?? _.shape, "dotShape"),
+    dotColor: F(n, t, (s == null ? void 0 : s.aes.dotFill) ?? _.color, "dotFill"),
+    dotSize: F(n, t, (s == null ? void 0 : s.aes.dotSize) ?? _.size, "dotSize"),
+    lineShape: F(n, t, (a == null ? void 0 : a.aes.lineShape) ?? "solid", "lineShape"),
+    lineColor: F(n, t, (a == null ? void 0 : a.aes.lineColor) ?? st, "lineColor"),
+    trendColor: F(n, t, (i == null ? void 0 : i.color) ?? _.color, "fillColor")
   };
 }
-class Ut {
+const Et = Math.cos(Math.PI / 4), wt = 5;
+function et(n, t) {
+  return t.scale === "discrete" ? t.labelsPosition === "90deg" ? n : t.labelsPosition === "45deg" ? n * Et + (n > 0 ? 2 * wt : 0) : G : n;
+}
+class re {
   constructor() {
-    E(this, "reactRoot", null), E(this, "parentNode", null), E(this, "rootNode", null), E(this, "component", /* @__PURE__ */ b.jsx(b.Fragment, {})), E(this, "margins", {
+    M(this, "reactRoot", null), M(this, "parentNode", null), M(this, "rootNode", null), M(this, "component", /* @__PURE__ */ Y.jsx(Y.Fragment, {})), M(this, "margins", {
       top: D,
       bottom: D,
       left: D,
       right: D
-    }), E(this, "chartsDimensions", {}), E(this, "chartSizes", {
-      chartWidth: R,
+    }), M(this, "chartsDimensions", {}), M(this, "chartSizes", {
+      chartWidth: k,
       // width of single chart
-      chartHeight: $,
+      chartHeight: P,
       // height of single chart
-      chartsWidth: R,
+      chartsWidth: k,
       // width of all charts in charts row
-      chartsHeight: $,
+      chartsHeight: P,
       // width of all charts in charts column, without axes
-      totalWidth: R,
+      totalWidth: k,
       // width of all charts in charts row, plus left axis, plus legend
-      totalHeight: $
+      totalHeight: P
       // width of all charts in charts height, plus bottom axis, plus top title
-    }), E(this, "columnsCount", 1), E(this, "rowsCount", 1), E(this, "scales", {
-      x: { null: L().domain([0, 10]).range([0, R]) },
-      y: { null: L().domain([0, 10]).range([$, 0]) }
-    }), E(this, "captionsSizes", {
+    }), M(this, "columnsCount", 1), M(this, "rowsCount", 1), M(this, "scales", {
+      x: { null: R().domain([0, 1]).range([0, k]) },
+      y: { null: R().domain([0, 1]).range([P, 0]) }
+    }), M(this, "captionsSizes", {
       xAxisCaptionsWidth: 30,
-      yAxisCaptionsWidth: 100
-    }), E(this, "facetTitles", {}), E(this, "mainTitle", []), E(this, "legend", { width: 0, height: 0, items: [] });
+      yAxisCaptionsWidth: 100,
+      bottomAxisCaptionsWidthByRows: [],
+      leftAxisCaptionsWidthByColumns: [],
+      bottomCaptionsTail: 0,
+      leftCaptionsTail: 0
+    }), M(this, "facetTitles", {}), M(this, "mainTitle", []), M(this, "discreteAxesLabels", { x: {}, y: {} }), M(this, "legend", { width: 0, height: 0, items: [] });
   }
   clear() {
     var t;
@@ -96,215 +118,270 @@ class Ut {
     });
   }
   init(t) {
-    this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = K(this.rootNode));
+    this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = it(this.rootNode));
   }
   updateChartSizes(t) {
     this.chartSizes.chartWidth = t.width, this.chartSizes.chartHeight = t.height;
   }
-  updateChartDimensions(t, e, s, i) {
-    const { chartWidth: a, chartHeight: m } = this.chartSizes;
-    let g = 0, M = 0;
-    this.chartsDimensions = t.reduce((n, o, d) => {
-      const [T, z] = Tt(d, this.columnsCount), c = gt(d, t.length, this.columnsCount, this.rowsCount), l = ft(
-        s,
+  updateChartDimensions(t, e, i, s) {
+    const { chartWidth: a, chartHeight: p } = this.chartSizes;
+    let S = 0, C = 0;
+    const g = Mt(t, this.rowsCount, this.columnsCount);
+    this.chartsDimensions = t.reduce((o, r, c) => {
+      const [f, h] = vt(c, this.columnsCount), d = yt(c, t.length, this.columnsCount, this.rowsCount), T = At(
         i,
+        s,
         this.captionsSizes,
-        St(t, this.rowsCount, this.columnsCount)[T],
+        g[f],
         this.facetTitles,
-        c,
+        d,
+        f,
+        h,
+        h === this.columnsCount - 1,
         e
-      ), f = a + l.left + l.right, C = m + l.top + l.bottom;
-      return n[o] = {
-        left: g,
-        top: M,
-        chartEdgeSides: c,
-        padding: l,
-        inner: { width: a, height: m },
-        outer: { width: f, height: C }
-      }, g += f, z === this.columnsCount - 1 && (g = 0, M += C), n;
+      ), b = a + T.left + T.right, z = p + T.top + T.bottom;
+      return o[r] = {
+        left: S,
+        top: C,
+        chartEdgeSides: d,
+        padding: T,
+        inner: { width: a, height: p },
+        outer: { width: b, height: z }
+      }, S += b, h === this.columnsCount - 1 && (S = 0, C += z), o;
     }, {});
-    const F = Math.max(
-      ...t.map((n) => this.chartsDimensions[n].outer.width + this.chartsDimensions[n].left)
-    ), N = Math.max(
-      ...t.map((n) => this.chartsDimensions[n].outer.height + this.chartsDimensions[n].top)
+    const N = Math.max(
+      ...t.map((o) => this.chartsDimensions[o].outer.width + this.chartsDimensions[o].left)
+    ), m = Math.max(
+      ...t.map((o) => this.chartsDimensions[o].outer.height + this.chartsDimensions[o].top)
     );
-    this.chartSizes.chartsWidth = F, this.chartSizes.chartsHeight = N;
+    this.chartSizes.chartsWidth = N, this.chartSizes.chartsHeight = m;
   }
-  updateViewport(t, e, s, i, a, m) {
-    const g = t.length, M = Math.min(e.nRows ?? g, g), F = Math.min(e.nCols ?? g, g);
-    this.columnsCount = e.nRows ? Math.ceil(g / M) : F, this.rowsCount = Math.ceil(g / this.columnsCount);
-    let [N, n] = [1 / 0, -1 / 0], [o, d] = [1 / 0, -1 / 0];
-    const T = t.reduce((u, r) => {
-      const w = a[r], { minX: p, minY: S, maxX: A, maxY: y } = w;
-      return N = Math.min(N, p), o = Math.min(o, S), n = Math.max(n, A), d = Math.max(d, y), u[r] = { minX: p, maxX: A, minY: S, maxY: y }, u;
-    }, {}), z = {}, c = {};
-    let l = !1, f = !1;
-    t.forEach((u) => {
-      const r = s.scale === "log" ? U() : L(), w = T[u];
-      let p = s.lowerValue ? Number(s.lowerValue) : e.sharedX ? N : w.minX, S = s.upperValue ? Number(s.upperValue) : e.sharedX ? n : w.maxX;
-      if (typeof s.symmetricRange < "u") {
-        const v = s.symmetricRange;
-        if (v >= p && v <= S) {
-          const x = Math.max(v - p, S - v);
-          p = v - x, S = v + x;
+  updateViewport(t, e, i, s, a, p, S, C) {
+    const g = t.length, N = Math.min(e.nRows ?? g, g), m = Math.min(e.nCols ?? g, g);
+    this.columnsCount = e.nRows ? Math.ceil(g / N) : m, this.rowsCount = Math.ceil(g / this.columnsCount);
+    let [o, r] = [1 / 0, -1 / 0], [c, f] = [1 / 0, -1 / 0];
+    const h = t.reduce((x, l) => {
+      const E = S[l], { minX: u, minY: y, maxX: A, maxY: v } = E;
+      return o = Math.min(o, u), c = Math.min(c, y), r = Math.max(r, A), f = Math.max(f, v), x[l] = { minX: u, maxX: A, minY: y, maxY: v }, x;
+    }, {}), d = {}, T = {};
+    let b = !1, z = !1;
+    t.forEach((x) => {
+      let l;
+      if (!K(i))
+        l = Z().range([0, this.chartSizes.chartWidth]).domain(a.keys ?? []).padding(0.5);
+      else {
+        l = i.scale === "log" ? J() : R();
+        const u = h[x];
+        let y = i.lowerValue ? Number(i.lowerValue) : e.sharedX ? o : u.minX, A = i.upperValue ? Number(i.upperValue) : e.sharedX ? r : u.maxX;
+        if (typeof i.symmetricRange < "u") {
+          const W = i.symmetricRange;
+          if (W >= y && W <= A) {
+            const L = Math.max(W - y, A - W);
+            y = W - L, A = W + L;
+          }
         }
+        const v = [0, this.chartSizes.chartWidth], I = l.copy().domain([y, A]).range([B.LEFT, this.chartSizes.chartWidth - B.RIGHT]);
+        l.domain([I.invert(0), I.invert(this.chartSizes.chartWidth)]).range(v).nice();
       }
-      const A = [0, this.chartSizes.chartWidth], y = r.copy().domain([p, S]).range([X.LEFT, this.chartSizes.chartWidth - X.RIGHT]);
-      r.domain([y.invert(0), y.invert(this.chartSizes.chartWidth)]).range(A).nice();
-      const I = this.scales.x[u];
-      if (I === void 0)
-        l = !0;
-      else if (!l) {
-        const v = I.domain(), x = I.range();
-        (v[0] !== r.domain()[0] || v[1] !== r.domain()[1] || x[0] !== r.range()[0] || x[1] !== r.range()[1]) && (l = !0);
-      }
-      z[u] = r;
+      const E = this.scales.x[x];
+      d[x] = l, b = b || tt(E, l);
     });
-    const C = t.reduce((u, r) => {
-      const w = m ? m[r] : [];
-      return u[r] = w.reduce(
-        (p, S) => {
-          const A = S.bounded ? S.xBounds : this.scales.x[r].domain(), y = S.getInterval(A[0]), I = S.getInterval(A[1]);
-          return p.minY = Math.min(p.minY, isNaN(y.left) ? p.minY : y.left, isNaN(I.left) ? p.minY : I.left), p.maxY = Math.max(p.maxY, isNaN(y.right) ? p.maxY : y.right, isNaN(I.right) ? p.maxY : I.right), p;
+    const w = t.reduce((x, l) => {
+      const E = C ? C[l] : [];
+      return x[l] = E.reduce(
+        (u, y) => {
+          const A = y.bounded ? y.xBounds : this.scales.x[l].domain(), v = y.getInterval(A[0]), I = y.getInterval(A[1]);
+          return u.minY = Math.min(u.minY, isNaN(v.left) ? u.minY : v.left, isNaN(I.left) ? u.minY : I.left), u.maxY = Math.max(u.maxY, isNaN(v.right) ? u.maxY : v.right, isNaN(I.right) ? u.maxY : I.right), u;
         },
         { minY: 1 / 0, maxY: -1 / 0 }
-      ), o = Math.min(o, u[r].minY), d = Math.max(d, u[r].maxY), u;
+      ), c = Math.min(c, x[l].minY), f = Math.max(f, x[l].maxY), x;
     }, {});
-    t.forEach((u) => {
-      const r = i.scale === "log" ? U() : L(), w = T[u], p = C[u];
-      let S = i.lowerValue ? Number(i.lowerValue) : e.sharedY ? o : Math.min(w.minY, p.minY), A = i.upperValue ? Number(i.upperValue) : e.sharedY ? d : Math.max(w.maxY, p.maxY);
-      if (typeof i.symmetricRange < "u") {
-        const x = i.symmetricRange;
-        if (x >= S && x <= A) {
-          const _ = Math.max(x - S, A - x);
-          S = x - _, A = x + _;
+    t.forEach((x) => {
+      let l;
+      if (!K(s))
+        l = Z().range([this.chartSizes.chartHeight, 0]).domain(p.keys ?? []).padding(0.5);
+      else {
+        l = s.scale === "log" ? J() : R();
+        const u = h[x], y = w[x];
+        let A = s.lowerValue ? Number(s.lowerValue) : e.sharedY ? c : Math.min(u.minY, y.minY), v = s.upperValue ? Number(s.upperValue) : e.sharedY ? f : Math.max(u.maxY, y.maxY);
+        if (typeof s.symmetricRange < "u") {
+          const L = s.symmetricRange;
+          if (L >= A && L <= v) {
+            const O = Math.max(L - A, v - L);
+            A = L - O, v = L + O;
+          }
         }
+        const I = [this.chartSizes.chartHeight, 0], W = l.copy().domain([A, v]).range([this.chartSizes.chartHeight - B.BOTTOM, B.TOP]);
+        l.domain([W.invert(this.chartSizes.chartHeight), W.invert(0)]).range(I).nice();
       }
-      const y = [this.chartSizes.chartHeight, 0], I = r.copy().domain([S, A]).range([this.chartSizes.chartHeight - X.BOTTOM, X.TOP]);
-      r.domain([I.invert(this.chartSizes.chartHeight), I.invert(0)]).range(y).nice();
-      const v = this.scales.y[u];
-      if (v === void 0)
-        f = !0;
-      else if (!f) {
-        const x = v.domain(), _ = v.range();
-        (x[0] !== r.domain()[0] || x[1] !== r.domain()[1] || _[0] !== r.range()[0] || _[1] !== r.range()[1]) && (f = !0);
-      }
-      c[u] = r;
-    }), l && (this.scales.x = z), f && (this.scales.y = c);
+      const E = this.scales.y[x];
+      T[x] = l, z = z || tt(E, l);
+    }), b && (this.scales.x = d), z && (this.scales.y = T);
   }
-  updateCaptionsSize(t) {
-    const e = new ot("600 14px Arial");
-    let s = 0;
-    function i(a) {
-      return Math.max(...a.map((m) => e.getTextWidth(m)));
+  updateCaptionsSize(t, e, i, s) {
+    const a = new ut("600 14px Manrope");
+    function p(r) {
+      return Math.max(...r.map((c) => a.getTextWidth(c)));
     }
-    Object.values(this.scales.y).forEach((a) => {
-      const { ticks: m, format: g } = lt(a, t);
-      s = Math.max(s, i(m.map(g)));
-    }), this.captionsSizes = {
-      xAxisCaptionsWidth: 20,
-      yAxisCaptionsWidth: s
+    let S = 0, C = 0, g = [], N = [], m = 0, o = 0;
+    if (e.scale === "discrete") {
+      const r = Q(
+        t,
+        this.rowsCount,
+        this.columnsCount,
+        e.labelsPosition ?? "center",
+        this.discreteAxesLabels.x,
+        "vertical",
+        this.scales.x
+      );
+      S = r.xTail, g = r.axisCaptionsWidthByRows;
+    } else
+      m = 20;
+    if (i.scale === "discrete") {
+      const r = Q(
+        t,
+        this.rowsCount,
+        this.columnsCount,
+        i.labelsPosition ?? "center",
+        this.discreteAxesLabels.y,
+        "horizontal",
+        this.scales.y
+      );
+      C = r.yTail, N = r.axisCaptionsWidthByColumns;
+    } else
+      Object.values(this.scales.y).forEach((r) => {
+        const { ticks: c, format: f } = xt(r, s);
+        o = Math.max(o, p(c.map(f)));
+      });
+    this.captionsSizes = {
+      xAxisCaptionsWidth: et(m, e),
+      yAxisCaptionsWidth: et(o, i),
+      bottomAxisCaptionsWidthByRows: g,
+      leftAxisCaptionsWidthByColumns: N,
+      bottomCaptionsTail: S,
+      leftCaptionsTail: C
     };
   }
   createMainTitle(t, e) {
-    const s = this.chartsDimensions[t[0]], i = this.chartsDimensions[t[t.length - 1]];
-    this.mainTitle = O(
+    const i = this.chartsDimensions[t[0]], s = this.chartsDimensions[t[t.length - 1]];
+    this.mainTitle = V(
       e.name,
-      this.chartSizes.chartsWidth - s.padding.left - i.padding.right,
+      this.chartSizes.chartsWidth - i.padding.left - s.padding.right,
       20
     );
   }
   createFacetTitles(t, e) {
-    this.facetTitles = t.reduce((s, i, a) => (e[a].length === 1 && e[a][0] === "null" ? s[i] = [] : s[i] = O(e[a].join(", "), this.chartSizes.chartWidth, 14), s), {});
+    this.facetTitles = t.reduce((i, s, a) => (e[a].length === 1 && e[a][0] === "null" ? i[s] = [] : i[s] = V(e[a].join(", "), this.chartSizes.chartWidth, 14), i), {});
   }
-  updateMargins() {
-    const t = J * this.mainTitle.length, e = t > 0 ? t + tt * 2 : 0;
+  createAxisLabels(t, e, i, s, a) {
+    this.discreteAxesLabels = {
+      x: e.scale !== "discrete" ? {} : q(
+        t,
+        (e == null ? void 0 : e.labelsPosition) ?? "center",
+        s.labels,
+        !1,
+        "vertical",
+        this.scales.x
+      ),
+      y: i.scale !== "discrete" ? {} : q(
+        t,
+        i.labelsPosition ?? "center",
+        a.labels,
+        !1,
+        "horizontal",
+        this.scales.y
+      )
+    };
+  }
+  updateMargins(t) {
+    const e = nt * this.mainTitle.length, i = e > 0 ? e + ht * 2 : 0, s = this.chartsDimensions[t[0]], a = this.chartsDimensions[t[t.length - 1]];
     this.margins = {
-      top: Math.max(e, D),
-      bottom: D,
-      left: D,
+      top: Math.max(i, D),
+      bottom: Math.max(D, this.captionsSizes.leftCaptionsTail - a.padding.bottom),
+      left: Math.max(D, this.captionsSizes.bottomCaptionsTail - s.padding.left),
       right: this.legend.width + D
     }, 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(t, e, s, i) {
+  updateLegendSize(t, e, i, s) {
     if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const a = [], m = { width: 0, height: 0, left: 0, top: 0 };
-    if (s.forEach((n) => {
-      const o = e[n.value];
+    const a = [], p = { width: 0, height: 0, left: 0, top: 0 };
+    if (i.forEach((m) => {
+      const o = e[m.value];
       if (o.usedAes.length === 0 || !o.aesMap)
         return;
-      if (o.values.length > Q) {
+      if (o.values.length > rt) {
         console.warn(`Too many values for discrete legend (${o.values.length})`);
         return;
       }
-      const d = {};
-      o.values.forEach((c) => {
-        d[c] || (d[c] = { ...W }), o.usedAes.forEach((l) => {
-          (l === "dotFill" || l === "lineColor") && (d[c].color = o.aesMap(c, l) ?? B), l === "dotShape" && (d[c].shape = o.aesMap(c, l) ?? "21"), l === "dotSize" && (d[c].size = o.aesMap(c, l) ?? 3);
+      const r = {};
+      o.values.forEach((h) => {
+        r[h] || (r[h] = { ..._ }), o.usedAes.forEach((d) => {
+          (d === "dotFill" || d === "lineColor") && (r[h].color = o.aesMap(h, d) ?? st), d === "dotShape" && (r[h].shape = o.aesMap(h, d) ?? "21"), d === "dotSize" && (r[h].size = o.aesMap(h, d) ?? 3);
         });
       });
-      const T = n.label ?? n.value, z = ct().domain(o.values).range(o.values.map((c) => d[c])).unknown(W);
-      a.push({ ...m, id: n.value, type: "dots", title: T, scale: z, values: o.values, labels: o.labels });
-    }), i.forEach((n) => {
-      if (n.type === "dots" && V(n.aes.dotFill)) {
-        const { domain: o, range: d, columnName: T, type: z = "linear" } = n.aes.dotFill, c = T.label ?? T.value, l = st(d, o, "linear"), f = (z === "log" ? mt() : L()).domain(o).range([this.chartSizes.chartHeight, 0]), C = at(f, o);
-        a.push({ ...m, id: "dotFill", type: "continuous", title: c, scale: l, tickPositionScale: f, values: C });
+      const c = m.label ?? m.value, f = St().domain(o.values).range(o.values.map((h) => r[h])).unknown(_);
+      a.push({ ...p, id: m.value, type: "dots", title: c, scale: f, values: o.values, labels: o.labels });
+    }), s.forEach((m) => {
+      if (m.type === "dots" && j(m.aes.dotFill)) {
+        const { domain: o, range: r, columnName: c, type: f = "linear" } = m.aes.dotFill, h = c.label ?? c.value, d = mt(r, o, "linear"), T = (f === "log" ? Tt() : R()).domain(o).range([this.chartSizes.chartHeight, 0]), b = dt(T, o);
+        a.push({ ...p, id: "dotFill", type: "continuous", title: h, scale: d, tickPositionScale: T, values: b });
       }
-      if (n.type === "dots" && V(n.aes.dotSize)) {
-        const { columnName: o, domain: d, range: T } = n.aes.dotSize, z = o.label ?? o.value, c = dt(d, T), l = c.ticks(3), f = c.tickFormat(3), C = l.reduce((u, r) => (u[String(r)] = f(r), u), {});
-        a.push({ ...m, id: o.value, type: "size", title: z, scale: c, values: l, labels: C });
+      if (m.type === "dots" && j(m.aes.dotSize)) {
+        const { columnName: o, domain: r, range: c } = m.aes.dotSize, f = o.label ?? o.value, h = Ct(r, c), d = h.ticks(3), T = h.tickFormat(3), b = d.reduce((z, w) => (z[String(w)] = T(w), z), {});
+        a.push({ ...p, id: o.value, type: "size", title: f, scale: h, values: d, labels: b });
       }
     }), !a.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const g = it(a, this.chartSizes.chartHeight), M = g[g.length - 1], F = M.left + M.width + rt, N = this.chartSizes.chartHeight;
+    const S = ct(a, this.chartSizes.chartHeight), C = S[S.length - 1], g = C.left + C.width + gt, N = this.chartSizes.chartHeight;
     this.legend = {
-      width: F,
+      width: g,
       height: N,
-      items: g
+      items: S
     };
   }
-  render(t, e, s, i, a, m, g, M, F, N, n, o, d, T, z, c) {
-    var l;
-    const { xAxis: f, yAxis: C, size: u, title: r, legend: w } = s;
-    this.updateChartSizes(u), this.updateViewport(a, i, f, C, g, M), this.updateCaptionsSize(N.y), this.createFacetTitles(a, m), this.updateChartDimensions(a, i, f, C), this.updateLegendSize(w, n, d, T), this.createMainTitle(a, r), this.updateMargins();
-    const p = /* @__PURE__ */ b.jsx(q, { dataFrame: t, children: /* @__PURE__ */ b.jsx(
-      nt,
+  render(t, e, i, s, a, p, S, C, g, N, m, o, r, c, f, h, d, T) {
+    var b;
+    const { xAxis: z, yAxis: w, size: x, title: l, legend: E } = i;
+    this.updateChartSizes(x), this.updateViewport(a, s, z, w, h, d, S, C), this.createAxisLabels(a, z, w, h, d), this.updateCaptionsSize(a, z, w, N.y), this.createFacetTitles(a, p), this.updateChartDimensions(a, s, z, w), this.updateLegendSize(E, m, r, c), this.createMainTitle(a, l), this.updateMargins(a);
+    const u = /* @__PURE__ */ Y.jsx(ot, { dataFrame: t, children: /* @__PURE__ */ Y.jsx(
+      pt,
       {
         settingsId: e,
-        chartSettings: s,
+        chartSettings: i,
         facetKeys: a,
-        facetSettings: i,
+        facetSettings: s,
         chartSizes: this.chartSizes,
         chartsDimensions: this.chartsDimensions,
         scales: this.scales,
-        groupedDots: g,
-        trendsData: M,
+        groupedDots: S,
+        trendsData: C,
         legendData: this.legend,
         columnsCount: this.columnsCount,
         margins: this.margins,
-        keyColumn: F,
+        keyColumn: g,
         mainTitle: this.mainTitle,
         facetTitles: this.facetTitles,
         captionsSizes: this.captionsSizes,
         onlyPositive: N,
         layersData: o,
-        aesGetters: xt(t, n, T, z),
-        onTooltipHintSwitch: c
+        aesGetters: Nt(t, m, c, f),
+        onTooltipHintSwitch: T,
+        discreteAxesLabels: this.discreteAxesLabels
       }
     ) });
-    this.component = p, (l = this.reactRoot) == null || l.render(p);
+    this.component = u, (b = this.reactRoot) == null || b.render(u);
   }
   renderError(t) {
     var e;
-    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ b.jsx(Z, { message: t }));
+    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ Y.jsx(at, { message: t }));
   }
 }
 export {
-  Ut as default
+  re as default
 };
 //# sourceMappingURL=ChartRenderer.js.map