@milaboratories/miplots4 1.0.127 → 1.0.129

package/dist/heatmap/ChartRenderer.js

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