@milaboratories/miplots4 1.0.160 → 1.0.162

package/dist/heatmap/ChartRenderer.js

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