@milaboratories/miplots4 1.0.134 → 1.0.135

package/dist/scatterplot/ChartRenderer.js

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