@milaboratories/miplots4 1.0.129 → 1.0.131

package/dist/scatterplot/ChartRenderer.js

@@ -1,80 +1,81 @@
 var $ = Object.defineProperty;
-var J = (h, i, t) => i in h ? $(h, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[i] = t;
-var E = (h, i, t) => J(h, typeof i != "symbol" ? i + "" : i, t);
-import { j as L } from "../node_modules/react/jsx-runtime.js";
-import { Error as k } from "../common/Error.js";
-import { DEFAULT_HEIGHT as X, DEFAULT_WIDTH as G, TITLE_LINE_HEIGHT as K, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as y, BLACK as Z, TITLE_MARGIN as tt } from "../constants.js";
-import { FACET_TITLE_LINE as it } from "../discrete/constants.js";
+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 { MIN_MARGIN as W, PADDINGS as B, DEFAULT_DOT_AES as R, LEGEND_OFFSET as et, TICK_OFFSET as O, DEFAULT_TICKS_SIZE as j, MIN_PADDING as D, FACET_TITLE_OFFSET as st, FACET_AXIS_OFFSET as P, TITLE_LINE as V } from "./constants.js";
-import { createAesGetter as _ } from "./utils/createAesGetter.js";
-import { getTicksAndFormat as ot } from "./utils/getTicksAndFormat.js";
-import { isContinuousAes as q } from "../types/common.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 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.js";
-import { createRoot as rt } from "../node_modules/react-dom/client.js";
-import { ChartsGroup as lt } from "./components/ChartsGroup.js";
-import { arrangeLegendParts as ct } from "../utils/arrangeLegendParts.js";
-import b from "../node_modules/d3-scale/src/linear.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 mt from "../node_modules/d3-scale/src/ordinal.js";
-import dt from "../node_modules/d3-scale/src/symlog.js";
-import { sqrt as pt } from "../node_modules/d3-scale/src/pow.js";
-function ut(h, i, t, e) {
-  const s = [];
-  return h % t === t - 1 && s.push("right"), h % t === 0 && s.push("left"), h < t && s.push("top"), (Math.ceil((h + 1) / t) === e || Math.ceil((h + 1) / t) === e - 1 && h % t > (i - 1) % t) && s.push("bottom"), s;
+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) {
+  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;
 }
-function gt(h, i, t, e, s, a, p) {
-  const u = a.includes("left") || !(p != null && p.sharedY), F = a.includes("left") && i.title !== "", H = a.includes("bottom") || !(p != null && p.sharedX), N = a.includes("bottom") && h.title !== "", r = t.yAxisCaptionsWidth + 2 * O, o = (i.showTicks ? j : 0) + O, d = F ? V + D : 0, x = t.xAxisCaptionsWidth + 2 * O, z = h.showTicks ? j : 0, l = N ? V + D : 0, c = r + o + d + P, f = x + z + l + P, S = Math.max(...e.map((m) => s[m].length));
+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));
   return {
-    left: u ? c : D,
-    top: S === 0 ? 0 : st * 2 + S * it,
-    bottom: H ? f + 8 : D,
-    right: D
+    left: g ? l : b,
+    top: z === 0 ? 0 : ct * 2 + z * st,
+    bottom: W ? f + 8 : b,
+    right: b
   };
 }
-function ft(h, i, t) {
-  const e = [];
-  for (let s = 0; s < i; s++)
-    e.push(h.slice(s * t, s * t + t));
-  return e;
+function Tt(r, t, i) {
+  const s = [];
+  for (let e = 0; e < t; e++)
+    s.push(r.slice(e * i, e * i + i));
+  return s;
 }
-function Tt(h, i) {
-  const t = Math.floor(h / i), e = h - t * i;
-  return [t, e];
+function St(r, t) {
+  const i = Math.floor(r / t), s = r - i * t;
+  return [i, s];
 }
-function St(h, i, t) {
-  const e = i.find((a) => a.type === "dots"), s = i.find((a) => a.type === "curve");
+function xt(r, t, i, s) {
+  const e = i.find((c) => c.type === "dots"), o = i.find((c) => c.type === "curve");
   return {
-    dotShape: _(h, (e == null ? void 0 : e.aes.dotShape) ?? R.shape, "dotShape"),
-    dotColor: _(h, (e == null ? void 0 : e.aes.dotFill) ?? R.color, "dotFill"),
-    dotSize: _(h, (e == null ? void 0 : e.aes.dotSize) ?? R.size, "dotSize"),
-    lineShape: _(h, (s == null ? void 0 : s.aes.lineShape) ?? "solid", "lineShape"),
-    lineColor: _(h, (s == null ? void 0 : s.aes.lineColor) ?? Z, "lineColor"),
-    trendColor: _(h, (t == null ? void 0 : t.color) ?? R.color, "fillColor")
+    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")
   };
 }
-class qt {
+class Zt {
   constructor() {
-    E(this, "reactRoot", null);
-    E(this, "parentNode", null);
-    E(this, "rootNode", null);
-    E(this, "component", /* @__PURE__ */ L.jsx(L.Fragment, {}));
-    E(this, "margins", {
-      top: W,
-      bottom: W,
-      left: W,
-      right: W
+    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
     });
-    E(this, "chartsDimensions", {});
-    E(this, "chartSizes", {
+    C(this, "chartsDimensions", {});
+    C(this, "chartSizes", {
       chartWidth: G,
       // width of single chart
       chartHeight: X,
@@ -88,236 +89,239 @@ class qt {
       totalHeight: X
       // 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: b().domain([0, 10]).range([0, G]) },
-      y: { null: b().domain([0, 10]).range([X, 0]) }
+    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]) }
     });
-    E(this, "captionsSizes", {
+    C(this, "captionsSizes", {
       xAxisCaptionsWidth: 30,
       yAxisCaptionsWidth: 100
     });
-    E(this, "facetTitles", {});
+    C(this, "facetTitles", {});
     // can be multiline
-    E(this, "mainTitle", []);
+    C(this, "mainTitle", []);
     // can be multiline
-    E(this, "legend", { width: 0, height: 0, items: [] });
+    C(this, "legend", { width: 0, height: 0, items: [] });
   }
   clear() {
-    var i;
-    this.parentNode && this.rootNode && ((i = this.parentNode) == null || i.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
-      var t;
-      (t = this.reactRoot) == null || t.unmount(), this.reactRoot = null;
+    var t;
+    this.parentNode && this.rootNode && ((t = this.parentNode) == null || t.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
+      var i;
+      (i = this.reactRoot) == null || i.unmount(), this.reactRoot = null;
     });
   }
-  init(i) {
-    this.parentNode === null && (this.parentNode = i, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = rt(this.rootNode));
+  init(t) {
+    this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = k(this.rootNode));
   }
-  updateChartSizes(i) {
-    this.chartSizes.chartWidth = i.width, this.chartSizes.chartHeight = i.height;
+  updateChartSizes(t) {
+    this.chartSizes.chartWidth = t.width, this.chartSizes.chartHeight = t.height;
   }
-  updateChartDimensions(i, t, e, s) {
-    const { chartWidth: a, chartHeight: p } = this.chartSizes;
-    let u = 0, F = 0;
-    this.chartsDimensions = i.reduce((r, o, d) => {
-      const [x, z] = Tt(d, this.columnsCount), l = ut(d, i.length, this.columnsCount, this.rowsCount), c = gt(
-        e,
+  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(
         s,
+        e,
         this.captionsSizes,
-        ft(i, this.rowsCount, this.columnsCount)[x],
+        Tt(t, this.rowsCount, this.columnsCount)[S],
         this.facetTitles,
-        l,
-        t
-      ), f = a + c.left + c.right, S = p + c.top + c.bottom;
-      return r[o] = {
-        left: u,
-        top: F,
-        chartEdgeSides: l,
-        padding: c,
-        inner: { width: a, height: p },
-        outer: { width: f, height: S }
-      }, u += f, z === this.columnsCount - 1 && (u = 0, F += S), r;
+        m,
+        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;
     }, {});
-    const H = Math.max(
-      ...i.map((r) => this.chartsDimensions[r].outer.width + this.chartsDimensions[r].left)
-    ), N = Math.max(
-      ...i.map((r) => this.chartsDimensions[r].outer.height + this.chartsDimensions[r].top)
+    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)
     );
-    this.chartSizes.chartsWidth = H, this.chartSizes.chartsHeight = N;
+    this.chartSizes.chartsWidth = W, this.chartSizes.chartsHeight = w;
   }
-  updateViewport(i, t, e, s, a, p) {
-    const u = i.length, F = Math.min(t.nRows ?? u, u), H = Math.min(t.nCols ?? u, u);
-    this.columnsCount = t.nRows ? Math.ceil(u / F) : H, this.rowsCount = Math.ceil(u / this.columnsCount);
-    let [N, r] = [1 / 0, -1 / 0], [o, d] = [1 / 0, -1 / 0];
-    const x = i.reduce((m, n) => {
-      const w = a[n], { minX: g, minY: T, maxX: Y, maxY: A } = w;
-      return N = Math.min(N, g), o = Math.min(o, T), r = Math.max(r, Y), d = Math.max(d, A), m[n] = { minX: g, maxX: Y, minY: T, maxY: A }, m;
-    }, {}), z = {}, l = {};
-    let c = !1, f = !1;
-    i.forEach((m) => {
-      const n = e.scale === "log" ? Q() : b(), w = x[m];
-      let g = e.lowerValue ? Number(e.lowerValue) : t.sharedX ? N : w.minX, T = e.upperValue ? Number(e.upperValue) : t.sharedX ? r : w.maxX;
-      if (typeof e.symmetricRange < "u") {
-        const M = e.symmetricRange;
-        if (M >= g && M <= T) {
-          const C = Math.max(M - g, T - M);
-          g = M - C, T = M + C;
+  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;
         }
       }
-      const Y = [0, this.chartSizes.chartWidth], A = n.copy().domain([g, T]).range([B.LEFT, this.chartSizes.chartWidth - B.RIGHT]);
-      n.domain([A.invert(0), A.invert(this.chartSizes.chartWidth)]).range(Y).nice();
-      const I = this.scales.x[m];
-      if (I && !c) {
-        const M = I.domain(), C = I.domain();
-        (M[0] !== n.domain()[0] || M[1] !== n.domain()[1] || C[0] !== n.range()[0] || C[1] !== n.range()[1]) && (c = !0);
+      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);
       }
-      z[m] = n;
+      E[p] = h;
     });
-    const S = i.reduce((m, n) => {
-      const w = p ? p[n] : [];
-      return m[n] = w.reduce(
-        (g, T) => {
-          const Y = T.bounded ? T.xBounds : this.scales.x[n].domain(), A = T.getInterval(Y[0]), I = T.getInterval(Y[1]);
-          return g.minY = Math.min(g.minY, isNaN(A.left) ? g.minY : A.left, isNaN(I.left) ? g.minY : I.left), g.maxY = Math.max(g.maxY, isNaN(A.right) ? g.maxY : A.right, isNaN(I.right) ? g.maxY : I.right), g;
+    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;
         },
         { minY: 1 / 0, maxY: -1 / 0 }
-      ), o = Math.min(o, m[n].minY), d = Math.max(d, m[n].maxY), m;
+      ), n = Math.min(n, p[h].minY), d = Math.max(d, p[h].maxY), p;
     }, {});
-    i.forEach((m) => {
-      const n = s.scale === "log" ? Q() : b(), w = x[m], g = S[m];
-      let T = s.lowerValue ? Number(s.lowerValue) : t.sharedY ? o : Math.min(w.minY, g.minY), Y = s.upperValue ? Number(s.upperValue) : t.sharedY ? d : Math.max(w.maxY, g.maxY);
-      if (typeof s.symmetricRange < "u") {
-        const C = s.symmetricRange;
-        if (C >= T && C <= Y) {
-          const v = Math.max(C - T, Y - C);
-          T = C - v, Y = C + v;
+    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;
         }
       }
-      const A = [this.chartSizes.chartHeight, 0], I = n.copy().domain([T, Y]).range([this.chartSizes.chartHeight - B.BOTTOM, B.TOP]);
-      n.domain([I.invert(this.chartSizes.chartHeight), I.invert(0)]).range(A).nice();
-      const M = this.scales.y[m];
-      if (M && !f) {
-        const C = M.domain(), v = M.domain();
-        (C[0] !== n.domain()[0] || C[1] !== n.domain()[1] || v[0] !== n.range()[0] || v[1] !== n.range()[1]) && (f = !0);
+      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);
       }
-      l[m] = n;
-    }), c && (this.scales.x = z), f && (this.scales.y = l);
+      m[p] = h;
+    }), l && (this.scales.x = E), f && (this.scales.y = m);
   }
-  updateCaptionsSize(i) {
-    const t = new ht("600 14px Arial");
-    let e = 0;
-    function s(a) {
-      return Math.max(...a.map((p) => t.getTextWidth(p)));
+  updateCaptionsSize(t) {
+    const i = new ht("600 14px Arial");
+    let s = 0;
+    function e(o) {
+      return Math.max(...o.map((c) => i.getTextWidth(c)));
     }
-    Object.values(this.scales.y).forEach((a) => {
-      const { ticks: p, format: u } = ot(a, i);
-      e = Math.max(e, s(p.map(u)));
+    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: e
+      yAxisCaptionsWidth: s
     };
   }
-  createMainTitle(i, t) {
-    const e = this.chartsDimensions[i[0]], s = this.chartsDimensions[i[i.length - 1]];
+  createMainTitle(t, i) {
+    const s = this.chartsDimensions[t[0]], e = this.chartsDimensions[t[t.length - 1]];
     this.mainTitle = U(
-      t.name,
-      this.chartSizes.chartsWidth - e.padding.left - s.padding.right,
+      i.name,
+      this.chartSizes.chartsWidth - s.padding.left - e.padding.right,
       20
     );
   }
-  createFacetTitles(i, t) {
-    this.facetTitles = i.reduce((e, s, a) => (t[a].length === 1 && t[a][0] === "null" ? e[s] = [] : e[s] = U(t[a].join(", "), this.chartSizes.chartWidth, 14), e), {});
+  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), {});
   }
   updateMargins() {
-    const i = K * this.mainTitle.length, t = i > 0 ? i + tt * 2 : 0;
+    const t = tt * this.mainTitle.length, i = t > 0 ? t + et * 2 : 0;
     this.margins = {
-      top: Math.max(t, W),
-      bottom: W,
-      left: W,
-      right: this.legend.width + W
+      top: Math.max(i, v),
+      bottom: v,
+      left: v,
+      right: this.legend.width + v
     }, 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, e, s) {
-    if (!i.show) {
+  updateLegendSize(t, i, s, e) {
+    if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const a = [], p = { width: 0, height: 0, left: 0, top: 0 };
-    if (e.forEach((r) => {
-      const o = t[r.value];
-      if (o.usedAes.length === 0 || !o.aesMap)
+    const o = [], c = { width: 0, height: 0, left: 0, top: 0 };
+    if (s.forEach((a) => {
+      const n = i[a.value];
+      if (n.usedAes.length === 0 || !n.aesMap)
         return;
-      if (o.values.length > y) {
-        console.warn(`Too many values for discrete legend (${o.values.length})`);
+      if (n.values.length > it) {
+        console.warn(`Too many values for discrete legend (${n.values.length})`);
         return;
       }
       const d = {};
-      o.values.forEach((l) => {
-        d[l] || (d[l] = { ...R }), o.usedAes.forEach((c) => {
-          var f, S, m;
-          (c === "dotFill" || c === "lineColor") && (d[l].color = ((f = o.aesMap[l]) == null ? void 0 : f[c]) ?? Z), c === "dotShape" && (d[l].shape = ((S = o.aesMap[l]) == null ? void 0 : S[c]) ?? "21"), c === "dotSize" && (d[l].size = ((m = o.aesMap[l]) == null ? void 0 : m[c]) ?? 3);
+      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 x = r.label ?? r.value, z = mt().domain(o.values).range(o.values.map((l) => d[l])).unknown(R);
-      a.push({ ...p, id: r.value, type: "dots", title: x, scale: z, values: o.values, labels: o.labels });
-    }), s.forEach((r) => {
-      if (r.type === "dots" && q(r.aes.dotFill)) {
-        const { domain: o, range: d, columnName: x, type: z = "linear" } = r.aes.dotFill, l = x.label ?? x.value, c = nt(d, o, "linear"), f = (z === "log" ? dt() : b()).domain(o).range([this.chartSizes.chartHeight, 0]), S = at(f, o);
-        a.push({ ...p, id: "dotFill", type: "continuous", title: l, scale: c, tickPositionScale: f, values: S });
+      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 });
       }
-      if (r.type === "dots" && q(r.aes.dotSize)) {
-        const { columnName: o, domain: d, range: x } = r.aes.dotSize, z = o.label ?? o.value, l = pt(d, x), c = l.ticks(3), f = l.tickFormat(3), S = c.reduce((m, n) => (m[String(n)] = f(n), m), {});
-        a.push({ ...p, id: o.value, type: "size", title: z, scale: l, values: c, labels: S });
+      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 });
       }
-    }), !a.length) {
+    }), !o.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const u = ct(a, this.chartSizes.chartHeight), F = u[u.length - 1], H = F.left + F.width + et, N = this.chartSizes.chartHeight;
+    const g = ot(o, this.chartSizes.chartHeight), N = g[g.length - 1], W = N.left + N.width + lt, w = this.chartSizes.chartHeight;
     this.legend = {
-      width: H,
-      height: N,
-      items: u
+      width: W,
+      height: w,
+      items: g
     };
   }
-  render(i, t, e, s, a, p, u, F, H, N, r, o, d, x, z) {
-    var w;
-    const { xAxis: l, yAxis: c, size: f, title: S, legend: m } = t;
-    this.updateChartSizes(f), this.updateViewport(s, e, l, c, p, u), this.updateCaptionsSize(H.y), this.createFacetTitles(s, a), this.updateChartDimensions(s, e, l, c), this.updateLegendSize(m, N, o, d), this.createMainTitle(s, S), this.updateMargins();
-    const n = /* @__PURE__ */ L.jsx(
-      lt,
+  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,
       {
         settingsId: i,
-        chartSettings: t,
-        facetKeys: s,
+        chartSettings: s,
+        facetKeys: o,
         facetSettings: e,
         chartSizes: this.chartSizes,
         chartsDimensions: this.chartsDimensions,
         scales: this.scales,
-        groupedDots: p,
-        trendsData: u,
+        groupedDots: g,
+        trendsData: N,
         legendData: this.legend,
         columnsCount: this.columnsCount,
         margins: this.margins,
-        keyColumn: F,
+        keyColumn: W,
         mainTitle: this.mainTitle,
         facetTitles: this.facetTitles,
         captionsSizes: this.captionsSizes,
-        onlyPositive: H,
-        layersData: r,
-        aesGetters: St(N, d, x),
-        onTooltipHintSwitch: z
+        onlyPositive: w,
+        layersData: n,
+        aesGetters: xt(t, a, S, E),
+        onTooltipHintSwitch: m
       }
-    );
-    this.component = n, (w = this.reactRoot) == null || w.render(n);
+    ) });
+    this.component = Y, (u = this.reactRoot) == null || u.render(Y);
   }
-  renderError(i) {
-    var t;
-    (t = this.reactRoot) == null || t.render(/* @__PURE__ */ L.jsx(k, { message: i }));
+  renderError(t) {
+    var i;
+    (i = this.reactRoot) == null || i.render(/* @__PURE__ */ F.jsx(K, { message: t }));
   }
 }
 export {
-  qt as default
+  Zt as default
 };
 //# sourceMappingURL=ChartRenderer.js.map