@milaboratories/miplots4 1.0.176 → 1.0.178

package/dist/heatmap/ChartRenderer.js

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