@milaboratories/graph-maker 1.1.137 → 1.1.139

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

@@ -1,92 +1,94 @@
-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 rt } from "./utils/calculateSideElementsBBoxes.js";
-import { createDiscreteColorScale as q, createContinuousColorScale as nt } from "./utils/createColorScales.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 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 { 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 { 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, 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);
+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) {
+  function t(r) {
+    r[s] = e(r.data.height), r.children && r.children.forEach(t);
   }
-  e(d);
+  t(u);
 }
-function Q(d, s, t, e = t) {
-  function l(i) {
-    i[e] = i[t] + s, i.children && i.children.forEach(l);
+function Q(u, e, s, t = s) {
+  function r(i) {
+    i[t] = i[s] + e, i.children && i.children.forEach(r);
   }
-  l(d);
+  r(u);
 }
-const Gt = (d, s) => {
-  const t = Math.min(...s), e = Math.max(...s);
-  if (t === e) {
-    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;
+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);
+    return n;
   }
-  if (d < 2)
-    return [t, e];
-  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;
+  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;
 };
-function tt(d, s, t) {
-  let e = t;
-  return d && (d.colorRange && (e = d.colorRange), d.method === "standardScaling" && (e = [-2, 2]), d.method === "meanNormalization" && (e = [-0.75, 0.75])), Gt(s, e);
+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 P(d, s, t) {
-  let e = 0;
-  for (const l of d) {
-    const i = t.getTextWidth(s[l]);
-    i > e && (e = i);
+function k(u, e, s) {
+  let t = 0;
+  for (const r of u) {
+    if (e[r] === void 0) continue;
+    const i = s.getTextWidth(e[r]);
+    i > t && (t = i);
   }
-  return e;
+  return t;
 }
-function F(d, s) {
-  return s === 90 ? d : s === 45 ? d * bt + (d > 0 ? 2 * At : 0) : U;
+function O(u, e) {
+  return e === 90 ? u : e === 45 ? u * At + (u > 0 ? 2 * Gt : 0) : X;
 }
-class Ft {
+class Ut {
   constructor() {
-    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,
+    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,
       // width of single chart
-      chartHeight: O,
+      chartHeight: P,
       // height of single chart
-      chartsWidth: X,
+      chartsWidth: U,
       // width of all charts in charts row
-      chartsHeight: O,
+      chartsHeight: P,
       // width of all charts in charts column, without axes
-      totalWidth: X,
+      totalWidth: U,
       // width of all charts in charts row, plus left axis, plus legend
-      totalHeight: O
+      totalHeight: P
       // width of all charts in charts height, plus bottom axis, plus top title
     }), A(this, "margins", {
-      top: M,
-      bottom: M,
-      left: M,
-      right: M
+      top: N,
+      bottom: N,
+      left: N,
+      right: N
     }), A(this, "captionsSizes", {
       xAxisCaptions: 100,
       yAxisCaptions: 100,
-      xGroupCaptions: U,
-      yGroupCaptions: U,
+      xGroupCaptions: X,
+      yGroupCaptions: X,
       xCaptionTail: 0,
       yCaptionTail: 0
     }), A(this, "labelAngles", {
@@ -96,279 +98,279 @@ class Ft {
       yGroupLabels: 0
     }), A(this, "columnsCount", 1), A(this, "rowsCount", 1), A(this, "scales", {
       // scales grouped by facet
-      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", {
+      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", {
       width: 0,
       height: 0,
       items: []
     }), A(this, "dendrograms", {});
   }
   clear() {
-    var s;
-    this.parentNode && this.rootNode && ((s = this.parentNode) == null || s.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
-      var t;
-      (t = this.reactRoot) == null || t.unmount(), this.reactRoot = null;
+    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;
     });
   }
-  init(s) {
-    this.parentNode === null && (this.parentNode = s, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = mt(this.rootNode));
+  init(e) {
+    this.parentNode === null && (this.parentNode = e, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = st(this.rootNode));
   }
-  updateMargins(s) {
+  updateMargins(e) {
     this.margins = {
-      top: s.show ? pt + dt * 2 : M,
-      bottom: M,
-      left: M,
-      right: this.legend.width + M
+      top: e.show ? at + rt * 2 : N,
+      bottom: N,
+      left: N,
+      right: this.legend.width + N
     }, 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, l, i) {
-    if (!t.show) {
+  updateLegendSize(e, s, t, r, i) {
+    if (!s.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    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 c = this.colorScale, n = V(c, i), a = D([n[0], n[n.length - 1]], [r, 0]), o = l.label ?? l.value;
-      h.push({
+    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,
         type: "continuous",
         id: "heatmapValue",
         scale: c,
-        values: n,
+        values: h,
         title: o,
         tickPositionScale: a
       });
-    } else if (s === "discrete") {
-      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 });
+    } 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 });
     }
-    if (e.forEach((c) => {
-      const n = c.valueColumn.label ?? c.valueColumn.value;
+    if (t.forEach((c) => {
+      const h = 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 });
+        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 });
       }
       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 });
+        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 });
       }
-    }), !h.length) {
+    }), !l.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const S = ft(h, this.chartSizes.chartHeight), m = S[S.length - 1], C = m.left + m.width + st;
+    const y = nt(l, this.chartSizes.chartHeight), g = y[y.length - 1], S = g.left + g.width + ut;
     this.legend = {
-      width: C,
-      height: r,
-      items: S
+      width: S,
+      height: n,
+      items: y
     };
   }
-  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;
+  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;
     this.labelAngles = {
-      xAxisLabels: t.axisLabelsAngle,
-      yAxisLabels: e.axisLabelsAngle,
-      xGroupLabels: t.groupLabelsAngle,
-      yGroupLabels: e.groupLabelsAngle
+      xAxisLabels: s.axisLabelsAngle,
+      yAxisLabels: t.axisLabelsAngle,
+      xGroupLabels: s.groupLabelsAngle,
+      yGroupLabels: t.groupLabelsAngle
     };
-    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(
+    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(
       this.labelAngles,
-      l,
+      r,
       this.scales,
       this.step,
-      s,
+      e,
       i
     );
     this.captionsSizes = {
-      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)
+      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)
     };
   }
-  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;
+  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;
     this.chartsDimensions = {};
-    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,
+    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(
+        n,
+        l,
         this.captionsSizes,
         p,
         G,
-        S,
-        T,
-        o,
         y,
+        v,
+        o,
+        f,
+        s,
         t,
-        e,
-        l,
-        K,
-        H
-      ), k = lt(p, T, o, y);
-      function N(w) {
+        r,
+        D,
+        R
+      ), W = ft(p, v, o, f);
+      function B(K) {
         return Math.max(
-          ot[w].reduce((b, E) => b + _[w][E], 0),
-          k[w],
-          it
+          dt[K].reduce((b, L) => b + M[K][L], 0),
+          W[K],
+          pt
         );
       }
-      const v = {
-        left: N("left"),
-        right: N("right"),
-        top: N("top"),
-        bottom: N("bottom")
+      const T = {
+        left: B("left"),
+        right: B("right"),
+        top: B("top"),
+        bottom: B("bottom")
       };
-      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);
+      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 += $);
     });
-    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;
+    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;
   }
-  updateChartsSizes(s) {
-    const { width: t, height: e } = s;
-    this.chartSizes.chartWidth = t, this.chartSizes.chartHeight = e;
+  updateChartsSizes(e) {
+    const { width: s, height: t } = e;
+    this.chartSizes.chartWidth = s, this.chartSizes.chartHeight = t;
   }
   // update scales for cell positions, x and y for each facet
-  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 })
+  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 })
     );
-    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);
+    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);
       });
-      const j = [], W = [];
-      let w = 0;
+      const _ = [], $ = [];
+      let K = 0;
       x.forEach((b) => {
-        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;
+        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;
     });
   }
-  updateAesScale(s, t, e, l, i, r, h) {
-    if (s === "continuous")
-      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 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)));
+  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));
+    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;
-    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] = {
+    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] = {
           type: "discrete",
-          scale: q(m, o)
+          scale: V(g, o)
         };
       } else {
         const o = Object.values(a).map(Number);
         if (!o.length)
           return;
-        const [y = o[0], u = o[0]] = xt(o);
-        this.annotationColorScales[S.id] = {
+        const [f = o[0], d = o[0]] = xt(o);
+        this.annotationColorScales[y.id] = {
           type: "continuous",
-          scale: nt(m, y, u, 0, 0.5, 1)
+          scale: yt(g, f, d, 0, 0.5, 1)
         };
       }
     });
   }
-  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) => {
+  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];
+      if (n) {
+        const c = s.reduce((h, a) => {
           var o;
-          return Math.max(n, (o = m[a]) == null ? void 0 : o.data.height);
+          return Math.max(h, (o = g[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])(
+        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
           );
-          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;
+          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;
       }
-      if (h) {
-        const c = e.reduce((n, a) => {
+      if (l) {
+        const c = t.reduce((h, a) => {
           var o;
-          return Math.max(n, (o = C[a]) == null ? void 0 : o.data.height);
+          return Math.max(h, (o = S[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])(
+        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
           );
-          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;
+          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;
       }
     });
   }
-  updateDendrogramAesScales(s) {
-    if (!s)
+  updateDendrogramAesScales(e) {
+    if (!e)
       return;
-    const t = Object.keys(s);
-    this.dendrogramAesScales = t.reduce((e, l) => {
-      const i = s[l], r = Object.keys(i);
-      return e[l] = I().domain(r).range(
-        r.map((h) => ({
+    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[h]
+          ...i[l]
         }))
-      ).unknown(Y), e;
+      ).unknown(Y), t;
     }, {});
   }
-  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,
+  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,
+      x,
       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,
+      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,
       {
-        aes: l,
-        annotations: r,
+        aes: i,
+        annotations: l,
         annotationColorScales: this.annotationColorScales,
         captionsSizes: this.captionsSizes,
-        cellsMeta: o,
+        cellsMeta: f,
         columnsCount: this.columnsCount,
         chartsDimensions: this.chartsDimensions,
         chartSettings: t,
@@ -376,28 +378,28 @@ class Ft {
         colorScale: this.colorScale,
         dendrogramAesScales: this.dendrogramAesScales,
         dendrograms: this.dendrograms,
-        facetKeys: u,
-        facetSettings: e,
-        groupedCells: y,
+        facetKeys: m,
+        facetSettings: r,
+        groupedCells: d,
         labelAngles: this.labelAngles,
         legend: this.legend,
         margins: this.margins,
         scales: this.scales,
         settingsId: s,
         step: this.step,
-        xGroupKeys: g,
-        yGroupKeys: f,
-        onTooltipHintSwitch: n
+        xGroupKeys: C,
+        yGroupKeys: x,
+        onTooltipHintSwitch: a
       }
-    );
-    this.component = H, (a = this.reactRoot) == null || a.render(H);
+    ) });
+    this.component = M, (o = this.reactRoot) == null || o.render(M);
   }
-  renderError(s) {
-    var t;
-    (t = this.reactRoot) == null || t.render(/* @__PURE__ */ $.jsx(et, { message: s }));
+  renderError(e) {
+    var s;
+    (s = this.reactRoot) == null || s.render(/* @__PURE__ */ F.jsx(ot, { message: e }));
   }
 }
 export {
-  Ft as default
+  Ut as default
 };
 //# sourceMappingURL=ChartRenderer.js.map