@milaboratories/graph-maker 1.1.135 → 1.1.137

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

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