@milaboratories/graph-maker 1.1.154 → 1.1.156

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

@@ -1,94 +1,94 @@
-import { j as F } from "../node_modules/react/jsx-runtime.js";
-import et from "../node_modules/lodash/lodash.js";
-import { createRoot as st } from "../node_modules/react-dom/client.js";
-import { Error as ot } from "../common/Error.js";
-import { DataFrameProvider as it } from "../common/useDataFrame.js";
-import { TITLE_LINE_HEIGHT as at, TITLE_MARGIN as rt, DEFAULT_HEIGHT as P, DEFAULT_WIDTH as U } from "../constants.js";
-import { arrangeLegendParts as nt } from "../utils/arrangeLegendParts.js";
-import { getChartEdgeSides as lt } from "../utils/getChartEdgeSides.js";
-import { getContinuousLegendTicks as q } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as ht } from "../utils/TextMeasurer/TextMeasurer.js";
-import { ChartsGroup as ct } from "./components/ChartsGroup.js";
-import { MIN_MARGIN as N, LEGEND_OFFSET as ut, DEFAULT_AES as Y, CHART_SIDE_ELEMENTS as dt, MIN_PADDING as pt, TITLE_LINE as X } from "./constants.js";
-import { calculateChartSideElementSizes as mt } from "./utils/calculateChartSideElementSizes.js";
-import { calculateSideElementsBBoxes as gt } from "./utils/calculateSideElementsBBoxes.js";
-import { createDiscreteColorScale as V, createContinuousColorScale as yt } from "./utils/createColorScales.js";
-import { calculateAnnotationTitleSizes as ft } from "./utils/calculateAnnotationTitleSizes.js";
+import { j } from "../node_modules/react/jsx-runtime.js";
+import ot from "../node_modules/lodash/lodash.js";
+import { createRoot as at } from "../node_modules/react-dom/client.js";
+import { Error as rt } from "../common/Error.js";
+import { DataFrameProvider as nt } from "../common/useDataFrame.js";
+import { TITLE_LINE_HEIGHT as ht, TITLE_MARGIN as lt, DEFAULT_HEIGHT as X, DEFAULT_WIDTH as V } from "../constants.js";
+import { arrangeLegendParts as ct } from "../utils/arrangeLegendParts.js";
+import { getChartEdgeSides as ut } from "../utils/getChartEdgeSides.js";
+import { getContinuousLegendTicks as J } from "../utils/getContinuousLegendTicks.js";
+import { TextMeasurer as dt } from "../utils/TextMeasurer/TextMeasurer.js";
+import { ChartsGroup as pt } from "./components/ChartsGroup.js";
+import { LEGEND_OFFSET as mt, DEFAULT_AES as Q, CHART_SIDE_ELEMENTS as gt, TITLE_LINE as Y, MIN_MARGIN as O } from "./constants.js";
+import { calculateChartSideElementSizes as yt } from "./utils/calculateChartSideElementSizes.js";
+import { calculateSideElementsBBoxes as ft } from "./utils/calculateSideElementsBBoxes.js";
+import { createDiscreteColorScale as Z, createContinuousColorScale as xt } from "./utils/createColorScales.js";
+import { calculateAnnotationTitleSizes as St } from "./utils/calculateAnnotationTitleSizes.js";
 import { calculateCaptionTails as Ct } from "./utils/calculateCaptionTails.js";
-import H from "../node_modules/d3-scale/src/ordinal.js";
-import I from "../node_modules/d3-scale/src/linear.js";
-import xt from "../node_modules/d3-array/src/extent.js";
-import J from "../node_modules/d3-hierarchy/src/cluster.js";
-var St = Object.defineProperty, bt = (u, e, s) => e in u ? St(u, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : u[e] = s, A = (u, e, s) => bt(u, typeof e != "symbol" ? e + "" : e, s);
-const At = Math.cos(Math.PI / 4), Gt = 5;
-function Z(u, e, s) {
+import B from "../node_modules/d3-scale/src/ordinal.js";
+import H from "../node_modules/d3-scale/src/linear.js";
+import bt from "../node_modules/d3-array/src/extent.js";
+import tt from "../node_modules/d3-hierarchy/src/cluster.js";
+var At = Object.defineProperty, Et = (m, s, e) => s in m ? At(m, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : m[s] = e, A = (m, s, e) => Et(m, typeof s != "symbol" ? s + "" : s, e);
+const Gt = Math.cos(Math.PI / 4), zt = 5;
+function et(m, s, e) {
   function t(r) {
-    r[s] = e(r.data.height), r.children && r.children.forEach(t);
+    r[e] = s(r.data.height), r.children && r.children.forEach(t);
   }
-  t(u);
+  t(m);
 }
-function Q(u, e, s, t = s) {
-  function r(i) {
-    i[t] = i[s] + e, i.children && i.children.forEach(r);
+function st(m, s, e, t = e) {
+  function r(o) {
+    o[t] = o[e] + s, o.children && o.children.forEach(r);
   }
-  r(u);
+  r(m);
 }
-const zt = (u, e) => {
-  const s = Math.min(...e), t = Math.max(...e);
-  if (s === t) {
-    const n = u % 2 === 0 ? [] : [s];
-    for (let l = 1; l < u / 2 + 1; l++)
-      n.push(s + l), n.unshift(s - l);
+const Lt = (m, s) => {
+  const e = Math.min(...s), t = Math.max(...s);
+  if (e === t) {
+    const n = m % 2 === 0 ? [] : [e];
+    for (let h = 1; h < m / 2 + 1; h++)
+      n.push(e + h), n.unshift(e - h);
     return n;
   }
-  if (u < 2)
-    return [s, t];
-  const r = (t - s) / (u - 1), i = [];
-  for (let n = 0; n < u - 1; n++)
-    i.push(s + r * n);
-  return i.push(t), i;
+  if (m < 2)
+    return [e, t];
+  const r = (t - e) / (m - 1), o = [];
+  for (let n = 0; n < m - 1; n++)
+    o.push(e + r * n);
+  return o.push(t), o;
 };
-function tt(u, e, s) {
-  let t = s;
-  return u && (u.colorRange && (t = u.colorRange), u.method === "standardScaling" && (t = [-2, 2]), u.method === "meanNormalization" && (t = [-0.75, 0.75])), zt(e, t);
+function it(m, s, e) {
+  let t = e;
+  return m && (m.colorRange && (t = m.colorRange), m.method === "standardScaling" && (t = [-2, 2]), m.method === "meanNormalization" && (t = [-0.75, 0.75])), Lt(s, t);
 }
-function k(u, e, s) {
+function $(m, s, e) {
   let t = 0;
-  for (const r of u) {
-    if (e[r] === void 0) continue;
-    const i = s.getTextWidth(e[r]);
-    i > t && (t = i);
+  for (const r of m) {
+    if (s[r] === void 0) continue;
+    const o = e.getTextWidth(s[r]);
+    o > t && (t = o);
   }
   return t;
 }
-function O(u, e) {
-  return e === 90 ? u : e === 45 ? u * At + (u > 0 ? 2 * Gt : 0) : X;
+function F(m, s) {
+  return s === 90 ? m : s === 45 ? m * Gt + (m > 0 ? 2 * zt : 0) : Y;
 }
-class Ut {
+class Yt {
   constructor() {
-    A(this, "reactRoot", null), A(this, "parentNode", null), A(this, "rootNode", null), A(this, "component", /* @__PURE__ */ F.jsx(F.Fragment, {})), A(this, "chartsDimensions", {}), A(this, "chartSizes", {
-      chartWidth: U,
+    A(this, "reactRoot", null), A(this, "parentNode", null), A(this, "rootNode", null), A(this, "component", /* @__PURE__ */ j.jsx(j.Fragment, {})), A(this, "chartsDimensions", {}), A(this, "chartSizes", {
+      chartWidth: V,
       // width of single chart
-      chartHeight: P,
+      chartHeight: X,
       // height of single chart
-      chartsWidth: U,
+      chartsWidth: V,
       // width of all charts in charts row
-      chartsHeight: P,
+      chartsHeight: X,
       // width of all charts in charts column, without axes
-      totalWidth: U,
+      totalWidth: V,
       // width of all charts in charts row, plus left axis, plus legend
-      totalHeight: P
+      totalHeight: X
       // width of all charts in charts height, plus bottom axis, plus top title
     }), A(this, "margins", {
-      top: N,
-      bottom: N,
-      left: N,
-      right: N
+      top: O,
+      bottom: O,
+      left: O,
+      right: O
     }), A(this, "captionsSizes", {
       xAxisCaptions: 100,
       yAxisCaptions: 100,
-      xGroupCaptions: X,
-      yGroupCaptions: X,
+      xGroupCaptions: Y,
+      yGroupCaptions: Y,
       xCaptionTail: 0,
       yCaptionTail: 0
     }), A(this, "labelAngles", {
@@ -98,279 +98,288 @@ class Ut {
       yGroupLabels: 0
     }), A(this, "columnsCount", 1), A(this, "rowsCount", 1), A(this, "scales", {
       // scales grouped by facet
-      x: { null: H().domain(["null"]).range([1]) },
-      y: { null: H().domain(["null"]).range([1]) }
-    }), A(this, "step", { x: {}, y: {} }), A(this, "colorScale", I().domain([0, 1]).range(["white", "black"])), A(this, "annotationColorScales", {}), A(this, "dendrogramAesScales", {}), A(this, "legend", {
+      x: { null: B().domain(["null"]).range([1]) },
+      y: { null: B().domain(["null"]).range([1]) }
+    }), A(this, "step", { x: {}, y: {} }), A(this, "colorScale", H().domain([0, 1]).range(["white", "black"])), A(this, "annotationColorScales", {}), A(this, "dendrogramAesScales", {}), A(this, "legend", {
       width: 0,
       height: 0,
       items: []
     }), A(this, "dendrograms", {});
   }
   clear() {
-    var e;
-    this.parentNode && this.rootNode && ((e = this.parentNode) == null || e.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
-      var s;
-      (s = this.reactRoot) == null || s.unmount(), this.reactRoot = null;
+    var s;
+    this.parentNode && this.rootNode && ((s = this.parentNode) == null || s.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
+      var e;
+      (e = this.reactRoot) == null || e.unmount(), this.reactRoot = null;
     });
   }
-  init(e) {
-    this.parentNode === null && (this.parentNode = e, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = st(this.rootNode));
+  init(s) {
+    this.parentNode === null && (this.parentNode = s, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = at(this.rootNode));
   }
-  updateMargins(e) {
+  updateMargins(s, e) {
     this.margins = {
-      top: e.show ? at + rt * 2 : N,
-      bottom: N,
-      left: N,
-      right: this.legend.width + N
+      top: s.show ? ht + lt * 2 : e.outerOffset,
+      bottom: e.outerOffset,
+      left: e.outerOffset,
+      right: this.legend.width + e.outerOffset
     }, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartsHeight + this.margins.bottom, this.legend.height);
   }
-  updateLegendSize(e, s, t, r, i) {
-    if (!s.show) {
+  updateLegendSize(s, e, t, r, o) {
+    if (!e.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const n = this.chartSizes.chartHeight, l = [], p = { width: 0, height: 0, left: 0, top: 0 }, G = (c) => c.reduce((h, a) => (h[a] = String(a), h), {});
-    if (e === "continuous") {
-      const c = this.colorScale, h = q(c, i), a = I([h[0], h[h.length - 1]], [n, 0]), o = r.label ?? r.value;
-      l.push({
-        ...p,
+    const n = this.chartSizes.chartHeight, h = [], u = { width: 0, height: 0, left: 0, top: 0 }, f = (c) => c.reduce((l, i) => (l[i] = String(i), l), {});
+    if (s === "continuous") {
+      const c = this.colorScale, l = J(c, o), i = H([l[0], l[l.length - 1]], [n, 0]), a = r.label ?? r.value;
+      h.push({
+        ...u,
         type: "continuous",
         id: "heatmapValue",
         scale: c,
-        values: h,
-        title: o,
-        tickPositionScale: a
+        values: l,
+        title: a,
+        tickPositionScale: i
       });
-    } else if (e === "discrete") {
-      const c = this.colorScale, h = r.label ?? r.value, a = c.domain(), o = G(a);
-      l.push({ ...p, type: "discreteColor", id: "heatmapValue", title: h, scale: c, values: a, labels: o });
+    } else if (s === "discrete") {
+      const c = this.colorScale, l = r.label ?? r.value, i = c.domain(), a = f(i);
+      h.push({ ...u, type: "discreteColor", id: "heatmapValue", title: l, scale: c, values: i, labels: a });
     }
     if (t.forEach((c) => {
-      const h = c.valueColumn.label ?? c.valueColumn.value;
+      const l = c.valueColumn.label ?? c.valueColumn.value;
       if (c.type === "continuous") {
-        const a = this.annotationColorScales[c.id].scale, o = q(a, i), f = I([o[0], o[o.length - 1]], [n, 0]);
-        l.push({ ...p, type: "continuous", id: c.id, tickPositionScale: f, title: h, scale: a, values: o });
+        const i = this.annotationColorScales[c.id].scale, a = J(i, o), y = H([a[0], a[a.length - 1]], [n, 0]);
+        h.push({ ...u, type: "continuous", id: c.id, tickPositionScale: y, title: l, scale: i, values: a });
       }
       if (c.type === "discrete") {
-        const a = this.annotationColorScales[c.id].scale, o = a.domain(), f = G(o);
-        l.push({ ...p, type: "discreteColor", id: c.id, title: h, scale: a, values: o, labels: f });
+        const i = this.annotationColorScales[c.id].scale, a = i.domain(), y = f(a);
+        h.push({ ...u, type: "discreteColor", id: c.id, title: l, scale: i, values: a, labels: y });
       }
-    }), !l.length) {
+    }), !h.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const y = nt(l, this.chartSizes.chartHeight), g = y[y.length - 1], S = g.left + g.width + ut;
+    const d = ct(h, this.chartSizes.chartHeight), p = d[d.length - 1], z = p.left + p.width + mt;
     this.legend = {
-      width: S,
+      width: z,
       height: n,
-      items: y
+      items: d
     };
   }
-  updateCaptionsSize(e, s, t, r) {
-    const i = new ht("bold 16px Manrope"), { xGroupKeys: n, yGroupKeys: l, xGroupLabels: p, yGroupLabels: G, xKeysByGroups: y, yKeysByGroups: g, xLabels: S, yLabels: c } = e.meta;
+  updateCaptionsSize(s, e, t, r) {
+    const o = new dt("bold 16px Manrope"), { xGroupKeys: n, yGroupKeys: h, xGroupLabels: u, yGroupLabels: f, xKeysByGroups: d, yKeysByGroups: p, xLabels: z, yLabels: c } = s.meta;
     this.labelAngles = {
-      xAxisLabels: s.axisLabelsAngle,
+      xAxisLabels: e.axisLabelsAngle,
       yAxisLabels: t.axisLabelsAngle,
-      xGroupLabels: s.groupLabelsAngle,
+      xGroupLabels: e.groupLabelsAngle,
       yGroupLabels: t.groupLabelsAngle
     };
-    const h = n.reduce((C, x) => Math.max(C, k(y[x], S, i)), 0), a = l.reduce((C, x) => Math.max(C, k(g[x], c, i)), 0), o = k(n, p, i), f = k(l, G, i), { xCaptionTail: d, yCaptionTail: m } = Ct(
+    const l = n.reduce((x, g) => Math.max(x, $(d[g], z, o)), 0), i = h.reduce((x, g) => Math.max(x, $(p[g], c, o)), 0), a = $(n, u, o), y = $(h, f, o), { xCaptionTail: S, yCaptionTail: v } = Ct(
       this.labelAngles,
       r,
       this.scales,
       this.step,
-      e,
-      i
+      s,
+      o
     );
     this.captionsSizes = {
-      xCaptionTail: d,
-      yCaptionTail: m,
-      xGroupCaptions: O(o, this.labelAngles.xGroupLabels),
-      yGroupCaptions: O(f, this.labelAngles.yGroupLabels),
-      xAxisCaptions: O(h, this.labelAngles.xAxisLabels),
-      yAxisCaptions: O(a, this.labelAngles.yAxisLabels)
+      xCaptionTail: S,
+      yCaptionTail: v,
+      xGroupCaptions: F(a, this.labelAngles.xGroupLabels),
+      yGroupCaptions: F(y, this.labelAngles.yGroupLabels),
+      xAxisCaptions: F(l, this.labelAngles.xAxisLabels),
+      yAxisCaptions: F(i, this.labelAngles.yAxisLabels)
     };
   }
-  updateChartDimensions(e, s, t, r, i, n, l, p, G, y) {
-    const g = s.length, S = Math.min(i.nRows ?? g, g), c = Math.min(i.nCols ?? g, g);
-    this.columnsCount = i.nRows ? Math.ceil(g / S) : c, this.rowsCount = Math.ceil(g / this.columnsCount);
-    const { width: h, height: a } = e, { sharedX: o, sharedY: f } = i;
+  updateChartDimensions(s, e, t, r, o, n, h, u, f, d) {
+    const p = e.length, z = Math.min(o.nRows ?? p, p), c = Math.min(o.nCols ?? p, p);
+    this.columnsCount = o.nRows ? Math.ceil(p / z) : c, this.rowsCount = Math.ceil(p / this.columnsCount);
+    const { sharedX: l, sharedY: i } = o;
     this.chartsDimensions = {};
-    let d = 0, m = 0;
-    s.forEach((z, E) => {
-      const w = E % this.columnsCount + 1, v = lt(E, s.length, this.columnsCount, this.rowsCount), D = this.step.x[z], R = this.step.y[z], M = mt(
+    let a = 0, y = 0;
+    e.forEach((x, g) => {
+      const b = g % this.columnsCount + 1, C = ut(g, e.length, this.columnsCount, this.rowsCount), E = this.step.x[x], M = this.step.y[x], N = yt(
         n,
-        l,
+        h,
         this.captionsSizes,
-        p,
-        G,
-        y,
-        v,
-        o,
+        u,
         f,
-        s,
+        d,
+        C,
+        l,
+        i,
+        e,
         t,
         r,
-        D,
-        R
-      ), W = ft(p, v, o, f);
-      function B(K) {
+        E,
+        M
+      ), w = St(u, C, l, i);
+      function K(D) {
         return Math.max(
-          dt[K].reduce((b, L) => b + M[K][L], 0),
-          W[K],
-          pt
+          gt[D].reduce((_, I) => _ + N[D][I], 0),
+          w[D],
+          s.innerOffset
         );
       }
-      const T = {
-        left: B("left"),
-        right: B("right"),
-        top: B("top"),
-        bottom: B("bottom")
+      const L = {
+        left: K("left"),
+        right: K("right"),
+        top: K("top"),
+        bottom: K("bottom")
       };
-      T.left < this.captionsSizes.xCaptionTail && (T.left = this.captionsSizes.xCaptionTail), T.bottom < this.captionsSizes.yCaptionTail && (T.bottom = this.captionsSizes.yCaptionTail);
-      const j = gt(M, h, a), _ = h + T.left + T.right, $ = a + T.top + T.bottom;
-      this.chartsDimensions[z] = {
-        left: d,
-        top: m,
-        inner: { width: h, height: a },
-        outer: { width: _, height: $ },
-        padding: T,
-        sideElementBBoxes: j,
-        chartEdgeSides: v
-      }, d += _, w === this.columnsCount && (d = 0, m += $);
+      L.left < this.captionsSizes.xCaptionTail && (L.left = this.captionsSizes.xCaptionTail), L.bottom < this.captionsSizes.yCaptionTail && (L.bottom = this.captionsSizes.yCaptionTail);
+      const k = ft(N, this.chartSizes.chartWidth, this.chartSizes.chartHeight), W = this.chartSizes.chartWidth + L.left + L.right, R = this.chartSizes.chartHeight + L.top + L.bottom;
+      this.chartsDimensions[x] = {
+        left: a,
+        top: y,
+        inner: { width: this.chartSizes.chartWidth, height: this.chartSizes.chartHeight },
+        outer: { width: W, height: R },
+        padding: L,
+        sideElementBBoxes: k,
+        chartEdgeSides: C
+      }, a += W, b === this.columnsCount && (a = 0, y += R);
     });
-    const C = s.slice(0, this.columnsCount).reduce((z, E) => z + this.chartsDimensions[E].outer.width, 0), x = s.filter((z, E) => E % this.columnsCount === 0).reduce((z, E) => z + this.chartsDimensions[E].outer.height, 0);
-    this.chartSizes.chartsWidth = C, this.chartSizes.chartsHeight = x;
+    const S = e.slice(0, this.columnsCount).reduce((x, g) => x + this.chartsDimensions[g].outer.width, 0), v = e.filter((x, g) => g % this.columnsCount === 0).reduce((x, g) => x + this.chartsDimensions[g].outer.height, 0);
+    this.chartSizes.chartsWidth = S, this.chartSizes.chartsHeight = v;
   }
-  updateChartsSizes(e) {
-    const { width: s, height: t } = e;
-    this.chartSizes.chartWidth = s, this.chartSizes.chartHeight = t;
+  updateChartsSizes(s, e, t, r) {
+    const { width: o, height: n, cellWidth: h, cellHeight: u } = s, f = t.meta.facetKeys[0];
+    if (h && e.sharedX && f) {
+      const d = t.facets[f].xKeys.length, p = t.meta.xGroupKeys.length;
+      this.chartSizes.chartWidth = d * h + r * (p - 1);
+    } else
+      this.chartSizes.chartWidth = o;
+    if (u && e.sharedY && f) {
+      const d = t.facets[f].yKeys.length, p = t.meta.yGroupKeys.length;
+      this.chartSizes.chartHeight = d * u + r * (p - 1);
+    } else
+      this.chartSizes.chartHeight = n;
   }
   // update scales for cell positions, x and y for each facet
-  updateScales(e, s, t, r, i, n, l, p, G) {
-    const { width: y, height: g } = i, { meta: S, facets: c } = s, { sharedX: h, sharedY: a } = r, o = (d, m = {}) => d.sort(
-      (C, x) => n.sorting === "asc" ? (m[C] ?? C).localeCompare(m[x] ?? x, "en", { numeric: !0 }) : (m[x] ?? x).localeCompare(m[C] ?? C, "en", { numeric: !0 })
-    ), f = (d, m = {}) => d.sort(
-      (C, x) => l.sorting === "asc" ? (m[C] ?? C).localeCompare(m[x] ?? x, "en", { numeric: !0 }) : (m[x] ?? x).localeCompare(m[C] ?? C, "en", { numeric: !0 })
+  updateScales(s, e, t, r, o, n, h, u, f, d) {
+    const { width: p, height: z, cellWidth: c, cellHeight: l } = o, { meta: i, facets: a } = e, { sharedX: y, sharedY: S } = r, v = (g, b = {}) => g.sort(
+      (C, E) => n.sorting === "asc" ? (b[C] ?? C).localeCompare(b[E] ?? E, "en", { numeric: !0 }) : (b[E] ?? E).localeCompare(b[C] ?? C, "en", { numeric: !0 })
+    ), x = (g, b = {}) => g.sort(
+      (C, E) => h.sorting === "asc" ? (b[C] ?? C).localeCompare(b[E] ?? E, "en", { numeric: !0 }) : (b[E] ?? E).localeCompare(b[C] ?? C, "en", { numeric: !0 })
     );
-    e.forEach((d) => {
-      const m = c[d], C = o(S.xGroupKeys), x = f(S.yGroupKeys), { xKeysByGroups: z } = h ? S : m, { yKeysByGroups: E } = a ? S : m, w = C.map((b) => z[b].length), v = x.map((b) => E[b].length), D = w.reduce((b, L) => b + L, 0), R = v.reduce((b, L) => b + L, 0), M = (y - (w.filter((b) => b > 0).length - 1) * t) / D, W = (g - (v.filter((b) => b > 0).length - 1) * t) / R, B = [], T = [];
-      let j = 0;
-      C.forEach((b) => {
-        const L = p ? z[b] : o(z[b], S.xLabels);
-        T.push(...L), L.forEach(() => {
-          B.push(j), j += M;
-        }), L.length > 0 && (j += t);
+    s.forEach((g) => {
+      const b = a[g], C = d.xGroup ? i.xGroupKeys : v(i.xGroupKeys), E = d.yGroup ? i.yGroupKeys : x(i.yGroupKeys), { xKeysByGroups: M } = y ? i : b, { yKeysByGroups: N } = S ? i : b, w = C.map((G) => M[G].length), K = E.map((G) => N[G].length), L = w.reduce((G, T) => G + T, 0), k = K.reduce((G, T) => G + T, 0), W = y && c ? c : (p - (w.filter((G) => G > 0).length - 1) * t) / L, R = S && l ? l : (z - (K.filter((G) => G > 0).length - 1) * t) / k, D = [], _ = [];
+      let I = 0;
+      C.forEach((G) => {
+        const T = u || d.x ? M[G] : v(M[G], i.xLabels);
+        _.push(...T), T.forEach(() => {
+          D.push(I), I += W;
+        }), T.length > 0 && (I += t);
       });
-      const _ = [], $ = [];
-      let K = 0;
-      x.forEach((b) => {
-        const L = G ? E[b] : f(E[b], S.yLabels);
-        $.push(...L), L.forEach(() => {
-          _.push(K), K += W;
-        }), L.length > 0 && (K += t);
-      }), this.scales.x[d] = H().domain(T).range(B), this.scales.y[d] = H().domain($).range(_), this.step.x[d] = M, this.step.y[d] = W;
+      const U = [], q = [];
+      let P = 0;
+      E.forEach((G) => {
+        const T = f || d.y ? N[G] : x(N[G], i.yLabels);
+        q.push(...T), T.forEach(() => {
+          U.push(P), P += R;
+        }), T.length > 0 && (P += t);
+      }), this.scales.x[g] = B().domain(_).range(D), this.scales.y[g] = B().domain(q).range(U), this.step.x[g] = W, this.step.y[g] = R;
     });
   }
-  updateAesScale(e, s, t, r, i, n, l) {
-    if (e === "continuous")
-      t.valueColors ? this.colorScale = I().domain(t.valuesByColors ?? tt(l, t.valueColors.length, s)).range(t.valueColors) : t.colorsList && (this.colorScale = I().domain(tt(l, t.colorsList.length, s)).range(t.colorsList));
+  updateAesScale(s, e, t, r, o, n, h) {
+    if (s === "continuous")
+      t.valueColors ? this.colorScale = H().domain(t.valuesByColors ?? it(h, t.valueColors.length, e)).range(t.valueColors) : t.colorsList && (this.colorScale = H().domain(it(h, t.colorsList.length, e)).range(t.colorsList));
     else if (t.colorsMap) {
-      const y = Object.entries(t.colorsMap);
-      this.colorScale = H().domain(y.map((g) => g[0])).range(y.map((g) => g[1])).unknown("#ccc");
-    } else t.colorsList && (this.colorScale = V(t.colorsList, n.map(String)));
-    const { xDataByKeys: p, yDataByKeys: G } = i.meta;
-    r.forEach((y) => {
-      const { colors: g, type: S, axis: c, valueColumn: h } = y, a = (c === "x" ? p : G)[h.value];
-      if (S === "discrete") {
-        const o = et.uniq(Object.values(a).map(String)).sort();
-        this.annotationColorScales[y.id] = {
+      const d = Object.entries(t.colorsMap);
+      this.colorScale = B().domain(d.map((p) => p[0])).range(d.map((p) => p[1])).unknown("#ccc");
+    } else t.colorsList && (this.colorScale = Z(t.colorsList, n.map(String)));
+    const { xDataByKeys: u, yDataByKeys: f } = o.meta;
+    r.forEach((d) => {
+      const { colors: p, type: z, axis: c, valueColumn: l } = d, i = (c === "x" ? u : f)[l.value];
+      if (z === "discrete") {
+        const a = ot.uniq(Object.values(i).map(String)).sort();
+        this.annotationColorScales[d.id] = {
           type: "discrete",
-          scale: V(g, o)
+          scale: Z(p, a)
         };
       } else {
-        const o = Object.values(a).map(Number);
-        if (!o.length)
+        const a = Object.values(i).map(Number);
+        if (!a.length)
           return;
-        const [f = o[0], d = o[0]] = xt(o);
-        this.annotationColorScales[y.id] = {
+        const [y = a[0], S = a[0]] = bt(a);
+        this.annotationColorScales[d.id] = {
           type: "continuous",
-          scale: yt(g, f, d, 0, 0.5, 1)
+          scale: xt(p, y, S, 0, 0.5, 1)
         };
       }
     });
   }
-  updateDendrogram(e, s, t, r, i, n, l) {
-    e.forEach((p) => {
-      this.dendrograms[p] = { x: { treesByGroupKey: {}, data: n }, y: { treesByGroupKey: {}, data: l } };
-      const { xKeysByGroups: G, yKeysByGroups: y } = r[p], { hierarchyByGroupX: g, hierarchyByGroupY: S } = i[p];
+  updateDendrogram(s, e, t, r, o, n, h) {
+    s.forEach((u) => {
+      this.dendrograms[u] = { x: { treesByGroupKey: {}, data: n }, y: { treesByGroupKey: {}, data: h } };
+      const { xKeysByGroups: f, yKeysByGroups: d } = r[u], { hierarchyByGroupX: p, hierarchyByGroupY: z } = o[u];
       if (n) {
-        const c = s.reduce((h, a) => {
-          var o;
-          return Math.max(h, (o = g[a]) == null ? void 0 : o.data.height);
+        const c = e.reduce((l, i) => {
+          var a;
+          return Math.max(l, (a = p[i]) == null ? void 0 : a.data.height);
         }, 0);
-        this.dendrograms[p].x.treesByGroupKey = s.reduce((h, a) => {
-          const o = g[a], f = G[a];
-          J().separation(() => 1).size([f.length * this.step.x[p], n.size])(
-            o
+        this.dendrograms[u].x.treesByGroupKey = e.reduce((l, i) => {
+          const a = p[i], y = f[i];
+          tt().separation(() => 1).size([y.length * this.step.x[u], n.size])(
+            a
           );
-          const d = o, m = I().domain(n.position === "top" ? [0, c] : [c, 0]).range([n.size, 0]);
-          return Z(d, m, "y"), Q(d, this.scales.x[p](f[0]), "x"), h[a] = d, h;
-        }, {}), this.dendrograms[p].x.data = n;
+          const S = a, v = H().domain(n.position === "top" ? [0, c] : [c, 0]).range([n.size, 0]);
+          return et(S, v, "y"), st(S, this.scales.x[u](y[0]), "x"), l[i] = S, l;
+        }, {}), this.dendrograms[u].x.data = n;
       }
-      if (l) {
-        const c = t.reduce((h, a) => {
-          var o;
-          return Math.max(h, (o = S[a]) == null ? void 0 : o.data.height);
+      if (h) {
+        const c = t.reduce((l, i) => {
+          var a;
+          return Math.max(l, (a = z[i]) == null ? void 0 : a.data.height);
         }, 0);
-        this.dendrograms[p].y.treesByGroupKey = t.reduce((h, a) => {
-          const o = S[a], f = y[a];
-          J().separation(() => 1).size([f.length * this.step.y[p], l.size])(
-            o
+        this.dendrograms[u].y.treesByGroupKey = t.reduce((l, i) => {
+          const a = z[i], y = d[i];
+          tt().separation(() => 1).size([y.length * this.step.y[u], h.size])(
+            a
           );
-          const d = o, m = I().domain(l.position === "left" ? [0, c] : [c, 0]).range([l.size, 0]);
-          return Q(d, this.scales.y[p](f[0]), "x", "y"), Z(d, m, "x"), h[a] = d, h;
-        }, {}), this.dendrograms[p].y.data = l;
+          const S = a, v = H().domain(h.position === "left" ? [0, c] : [c, 0]).range([h.size, 0]);
+          return st(S, this.scales.y[u](y[0]), "x", "y"), et(S, v, "x"), l[i] = S, l;
+        }, {}), this.dendrograms[u].y.data = h;
       }
     });
   }
-  updateDendrogramAesScales(e) {
-    if (!e)
+  updateDendrogramAesScales(s) {
+    if (!s)
       return;
-    const s = Object.keys(e);
-    this.dendrogramAesScales = s.reduce((t, r) => {
-      const i = e[r], n = Object.keys(i);
-      return t[r] = H().domain(n).range(
-        n.map((l) => ({
-          ...Y,
-          ...i[l]
+    const e = Object.keys(s);
+    this.dendrogramAesScales = e.reduce((t, r) => {
+      const o = s[r], n = Object.keys(o);
+      return t[r] = B().domain(n).range(
+        n.map((h) => ({
+          ...Q,
+          ...o[h]
         }))
-      ).unknown(Y), t;
+      ).unknown(Q), t;
     }, {});
   }
-  render(e, s, t, r, i, n, l, p, G, y, g, S, c, h, a) {
-    var o;
-    const { meta: f, facets: d } = n, { facetKeys: m, xGroupKeys: C, yGroupKeys: x, valueExtent: z } = f, { xAxis: E, yAxis: w, title: v, size: D, valueType: R } = t;
-    this.updateChartsSizes(D), this.updateAesScale(R, z, i, l, n, c, h), this.updateScales(m, n, i.groupGap, r, D, t.xAxis, t.yAxis, G, y), this.updateCaptionsSize(n, E, w, r), this.updateChartDimensions(
-      D,
-      m,
-      C,
+  render(s, e, t, r, o, n, h, u, f, d, p, z, c, l, i, a) {
+    var y;
+    const { meta: S, facets: v } = n, { facetKeys: x, xGroupKeys: g, yGroupKeys: b, valueExtent: C } = S, { xAxis: E, yAxis: M, title: N, size: w, valueType: K } = t;
+    this.updateChartsSizes(w, r, n, o.groupGap), this.updateAesScale(K, C, o, h, n, c, l), this.updateScales(x, n, o.groupGap, r, w, t.xAxis, t.yAxis, f, d, a), this.updateCaptionsSize(n, E, M, r), this.updateChartDimensions(
+      w,
       x,
+      g,
+      b,
       r,
       E,
-      w,
-      l,
-      G,
-      y
-    ), this.updateLegendSize(R, t.legend, l, p, z), this.updateMargins(v), this.updateDendrogram(m, C, x, d, g, G, y), this.updateDendrogramAesScales(S);
-    const M = /* @__PURE__ */ F.jsx(it, { dataFrame: e, children: /* @__PURE__ */ F.jsx(
-      ct,
+      M,
+      h,
+      f,
+      d
+    ), this.updateLegendSize(K, t.legend, h, u, C), this.updateMargins(N, w), this.updateDendrogram(x, g, b, v, p, f, d), this.updateDendrogramAesScales(z);
+    const L = /* @__PURE__ */ j.jsx(nt, { dataFrame: s, children: /* @__PURE__ */ j.jsx(
+      pt,
       {
-        aes: i,
-        annotations: l,
+        aes: o,
+        annotations: h,
         annotationColorScales: this.annotationColorScales,
         captionsSizes: this.captionsSizes,
-        cellsMeta: f,
+        cellsMeta: S,
         columnsCount: this.columnsCount,
         chartsDimensions: this.chartsDimensions,
         chartSettings: t,
@@ -378,28 +387,28 @@ class Ut {
         colorScale: this.colorScale,
         dendrogramAesScales: this.dendrogramAesScales,
         dendrograms: this.dendrograms,
-        facetKeys: m,
+        facetKeys: x,
         facetSettings: r,
-        groupedCells: d,
+        groupedCells: v,
         labelAngles: this.labelAngles,
         legend: this.legend,
         margins: this.margins,
         scales: this.scales,
-        settingsId: s,
+        settingsId: e,
         step: this.step,
-        xGroupKeys: C,
-        yGroupKeys: x,
-        onTooltipHintSwitch: a
+        xGroupKeys: g,
+        yGroupKeys: b,
+        onTooltipHintSwitch: i
       }
     ) });
-    this.component = M, (o = this.reactRoot) == null || o.render(M);
+    this.component = L, (y = this.reactRoot) == null || y.render(L);
   }
-  renderError(e) {
-    var s;
-    (s = this.reactRoot) == null || s.render(/* @__PURE__ */ F.jsx(ot, { message: e }));
+  renderError(s) {
+    var e;
+    (e = this.reactRoot) == null || e.render(/* @__PURE__ */ j.jsx(rt, { message: s }));
   }
 }
 export {
-  Ut as default
+  Yt as default
 };
 //# sourceMappingURL=ChartRenderer.js.map