@milaboratories/miplots4 1.0.176 → 1.0.178

package/dist/scatterplot/ChartRenderer.js

@@ -1,406 +1,356 @@
-var st = Object.defineProperty;
-var ot = (a, t, i) => t in a ? st(a, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[t] = i;
-var M = (a, t, i) => ot(a, typeof t != "symbol" ? t + "" : t, i);
-import { j as F } from "../_virtual/jsx-runtime.js";
-import { c as nt } from "../_virtual/client.js";
-import { Error as at } from "../common/Error.js";
-import { DataFrameProvider as ht } from "../common/useDataFrame.js";
-import { DEFAULT_HEIGHT as X, DEFAULT_WIDTH as G, TITLE_LINE_HEIGHT as rt, MIN_LEGEND_GRADIENT_HEIGHT as lt, MAX_LEGEND_GRADIENT_HEIGHT as ct, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as mt, BLACK as et, TITLE_MARGIN as dt } from "../constants.js";
-import { FACET_TITLE_LINE as pt } from "../discrete/constants.js";
-import { splitTextByWidth as V } from "../utils/splitTextByWidth.js";
-import { isContinuousAes as Q } from "../types/common.js";
-import "../types/discrete.js";
-import "../types/scatterplot.js";
-import "../types/heatmap.js";
-import "../types/dendro.js";
-import "../types/histogram.js";
-import "../types/bubble.js";
-import { arrangeLegendParts as ut } from "../utils/arrangeLegendParts.js";
-import { getSizeLegendItem as gt } from "../utils/getSizeLegendItem.js";
-import { getContinuousColorScale as ft } from "../utils/getContinuousColorScale.js";
-import { getContinuousLegendTicks as Tt } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as Ct } from "../utils/TextMeasurer/TextMeasurer.js";
-import { ChartsGroup as Et } from "./components/ChartsGroup.js";
-import { MIN_MARGIN as H, PADDINGS as P, DEFAULT_DOT_AES as Y, LEGEND_OFFSET as Mt, TICK_OFFSET as v, DEFAULT_TICKS_SIZE as Z, MIN_PADDING as U, FACET_TITLE_OFFSET as xt, TITLE_LINE as O, FACET_AXIS_OFFSET as $ } from "./constants.js";
-import { createAesGetter as D } from "./utils/createAesGetter.js";
-import { getTicksAndFormat as St } from "./utils/getTicksAndFormat.js";
-import { isContinuousAxis as q } from "./utils/isNumericScale.js";
-import { createMultilineDiscreteLabels as J } from "../utils/createMultilineDiscreteLabels.js";
-import { measureMultilineDiscreteLabels as k } from "../utils/measureMultilineDiscreteLabels.js";
-import B from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
-import { point as y } from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js";
-import K from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/log.js";
-import Nt from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/ordinal.js";
-import bt from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/symlog.js";
-function tt(a, t) {
-  if (a === void 0)
-    return !0;
-  {
-    const i = a.domain(), s = a.range(), e = t.domain(), o = t.range();
-    if (i.length !== e.length || i.some((g, f) => g !== e[f]) || s[0] !== o[0] || s[1] !== o[1])
-      return !0;
-  }
-  return !1;
+import { Error as e } from "../common/Error.js";
+import "../constants.js";
+import { DEFAULT_DOT_AES as t, PADDINGS as n } from "./constants.js";
+import { isContinuousAes as r } from "../types/common.js";
+import "../types/index.js";
+import { getContinuousLegendTicks as i } from "../utils/getContinuousLegendTicks.js";
+import { TextMeasurer as a } from "../utils/TextMeasurer/TextMeasurer.js";
+import { getSizeLegendItem as o } from "../utils/getSizeLegendItem.js";
+import { DataFrameProvider as s } from "../common/useDataFrame.js";
+import { arrangeLegendParts as c } from "../utils/arrangeLegendParts.js";
+import { splitTextByWidth as l } from "../utils/splitTextByWidth.js";
+import "../discrete/utils/index.js";
+import { createMultilineDiscreteLabels as u } from "../utils/createMultilineDiscreteLabels.js";
+import { measureMultilineDiscreteLabels as d } from "../utils/measureMultilineDiscreteLabels.js";
+import { getTicksAndFormat as f } from "./utils/getTicksAndFormat.js";
+import { getContinuousColorScale as p } from "../utils/getContinuousColorScale.js";
+import { isContinuousAxis as m } from "./utils/isNumericScale.js";
+import { ChartsGroup as h } from "./components/ChartsGroup.js";
+import { createAesGetter as g } from "./utils/createAesGetter.js";
+import { scaleLinear as _, scaleLog as v, scaleOrdinal as y, scalePoint as b, scaleSymlog as x } from "d3-scale";
+import { createRoot as S } from "react-dom/client";
+import { Fragment as C, jsx as w } from "react/jsx-runtime";
+function T(e, t) {
+	if (e === void 0) return !0;
+	{
+		let n = e.domain(), r = e.range(), i = t.domain(), a = t.range();
+		if (n.length !== i.length || n.some((e, t) => e !== i[t]) || r[0] !== a[0] || r[1] !== a[1]) return !0;
+	}
+	return !1;
 }
-function zt(a, t, i, s) {
-  const e = [];
-  return a % i === i - 1 && e.push("right"), a % i === 0 && e.push("left"), a < i && e.push("top"), (Math.ceil((a + 1) / i) === s || Math.ceil((a + 1) / i) === s - 1 && a % i > (t - 1) % i) && e.push("bottom"), e;
+function E(e, t, n, r) {
+	let i = [];
+	return e % n === n - 1 && i.push("right"), e % n === 0 && i.push("left"), e < n && i.push("top"), (Math.ceil((e + 1) / n) === r || Math.ceil((e + 1) / n) === r - 1 && e % n > (t - 1) % n) && i.push("bottom"), i;
 }
-function wt(a, t, i, s, e, o, g, f, C, c) {
-  const I = a.scale === "discrete", w = t.scale === "discrete", h = o.includes("left") || !(c != null && c.sharedY), n = o.includes("left") && t.title !== "", r = o.includes("bottom") || !(c != null && c.sharedX), T = o.includes("bottom") && a.title !== "", x = t.hiddenLabels ? 0 : w ? i.leftAxisCaptionsWidthByColumns[f] + 2 * v : i.yAxisCaptionsWidth + 2 * v, m = (t.showTicks ? Z : 0) + v, p = n ? O : 0, E = a.hiddenLabels ? 0 : I ? i.bottomAxisCaptionsWidthByRows[g] + 2 * v : i.xAxisCaptionsWidth + 2 * v, S = a.showTicks ? Z : 0, A = T ? O : 0, u = x + m + p + $, l = E + S + A + $, W = Math.max(...s.map((d) => e[d].length));
-  return {
-    left: h ? u : U,
-    top: W === 0 ? 0 : xt * 2 + W * pt,
-    bottom: r ? l + 8 : U,
-    right: C ? 0 : U
-  };
+function D(e, t, n, r, i, a, o, s, c, l) {
+	let u = e.scale === "discrete", d = t.scale === "discrete", f = a.includes("left") || !l?.sharedY, p = a.includes("left") && t.title !== "", m = a.includes("bottom") || !l?.sharedX, h = a.includes("bottom") && e.title !== "", g = t.hiddenLabels ? 0 : d ? n.leftAxisCaptionsWidthByColumns[s] + 12 : n.yAxisCaptionsWidth + 12, _ = (t.showTicks ? 4 : 0) + 6, v = p ? 20 : 0, y = e.hiddenLabels ? 0 : u ? n.bottomAxisCaptionsWidthByRows[o] + 12 : n.xAxisCaptionsWidth + 12, b = e.showTicks ? 4 : 0, x = h ? 20 : 0, S = g + _ + v + 8, C = y + b + x + 8, w = Math.max(...r.map((e) => i[e].length));
+	return {
+		left: f ? S : 12,
+		top: w === 0 ? 0 : 12 + w * 20,
+		bottom: m ? C + 8 : 12,
+		right: c ? 0 : 12
+	};
 }
-function Wt(a, t, i) {
-  const s = [];
-  for (let e = 0; e < t; e++)
-    s.push(a.slice(e * i, e * i + i));
-  return s;
+function O(e, t, n) {
+	let r = [];
+	for (let i = 0; i < t; i++) r.push(e.slice(i * n, i * n + n));
+	return r;
 }
-function It(a, t) {
-  const i = Math.floor(a / t), s = a - i * t;
-  return [i, s];
+function k(e, t) {
+	let n = Math.floor(e / t);
+	return [n, e - n * t];
 }
-function Lt(a, t, i, s) {
-  const e = i.find((g) => g.type === "dots"), o = i.find((g) => g.type === "curve");
-  return {
-    dotShape: D(a, t, (e == null ? void 0 : e.aes.dotShape) ?? Y.shape, "dotShape"),
-    dotColor: D(a, t, (e == null ? void 0 : e.aes.dotFill) ?? Y.color, "dotFill"),
-    dotSize: D(a, t, (e == null ? void 0 : e.aes.dotSize) ?? Y.size, "dotSize"),
-    lineShape: D(a, t, (o == null ? void 0 : o.aes.lineShape) ?? "solid", "lineShape"),
-    lineColor: D(a, t, (o == null ? void 0 : o.aes.lineColor) ?? et, "lineColor"),
-    trendColor: D(a, t, (s == null ? void 0 : s.color) ?? Y.color, "fillColor")
-  };
+function A(e, n, r, i) {
+	let a = r.find((e) => e.type === "dots"), o = r.find((e) => e.type === "curve");
+	return {
+		dotShape: g(e, n, a?.aes.dotShape ?? t.shape, "dotShape"),
+		dotColor: g(e, n, a?.aes.dotFill ?? t.color, "dotFill"),
+		dotSize: g(e, n, a?.aes.dotSize ?? t.size, "dotSize"),
+		lineShape: g(e, n, o?.aes.lineShape ?? "solid", "lineShape"),
+		lineColor: g(e, n, o?.aes.lineColor ?? "#110529", "lineColor"),
+		trendColor: g(e, n, i?.color ?? t.color, "fillColor")
+	};
 }
-const Rt = Math.cos(Math.PI / 4), _t = 5;
-function it(a, t) {
-  return t.scale === "discrete" ? t.labelsPosition === "90deg" ? a : t.labelsPosition === "45deg" ? a * Rt + (a > 0 ? 2 * _t : 0) : O : Math.max(a, O);
+var j = Math.cos(Math.PI / 4), M = 5;
+function N(e, t) {
+	return t.scale === "discrete" ? t.labelsPosition === "90deg" ? e : t.labelsPosition === "45deg" ? e * j + (e > 0 ? 2 * M : 0) : 20 : Math.max(e, 20);
 }
-class ci {
-  constructor() {
-    M(this, "reactRoot", null);
-    M(this, "parentNode", null);
-    M(this, "rootNode", null);
-    M(this, "component", /* @__PURE__ */ F.jsx(F.Fragment, {}));
-    M(this, "margins", {
-      top: H,
-      bottom: H,
-      left: H,
-      right: H
-    });
-    M(this, "chartsDimensions", {});
-    M(this, "chartSizes", {
-      chartWidth: G,
-      // width of single chart
-      chartHeight: X,
-      // height of single chart
-      chartsWidth: G,
-      // width of all charts in charts row
-      chartsHeight: X,
-      // width of all charts in charts column, without axes
-      totalWidth: G,
-      // width of all charts in charts row, plus left axis, plus legend
-      totalHeight: X
-      // width of all charts in charts height, plus bottom axis, plus top title
-    });
-    M(this, "columnsCount", 1);
-    M(this, "rowsCount", 1);
-    M(this, "scales", {
-      x: { null: B().domain([0, 1]).range([0, G]) },
-      y: { null: B().domain([0, 1]).range([X, 0]) }
-    });
-    M(this, "captionsSizes", {
-      xAxisCaptionsWidth: 30,
-      yAxisCaptionsWidth: 100,
-      bottomAxisCaptionsWidthByRows: [],
-      leftAxisCaptionsWidthByColumns: [],
-      bottomCaptionsTail: 0,
-      leftCaptionsTail: 0
-    });
-    M(this, "facetTitles", {});
-    // can be multiline
-    M(this, "mainTitle", []);
-    // can be multiline
-    M(this, "discreteAxesLabels", { x: {}, y: {} });
-    // only for discrete axes, by facets, can be multiline
-    M(this, "legend", { width: 0, height: 0, items: [] });
-  }
-  clear() {
-    var t;
-    this.parentNode && this.rootNode && ((t = this.parentNode) == null || t.removeChild(this.rootNode), this.parentNode = null, this.rootNode = null), setTimeout(() => {
-      var i;
-      (i = this.reactRoot) == null || i.unmount(), this.reactRoot = null;
-    });
-  }
-  init(t) {
-    this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.reactRoot = nt.createRoot(this.rootNode));
-  }
-  updateChartSizes(t) {
-    this.chartSizes.chartWidth = t.width, this.chartSizes.chartHeight = t.height;
-  }
-  updateChartDimensions(t, i, s, e) {
-    const { chartWidth: o, chartHeight: g } = this.chartSizes;
-    let f = 0, C = 0;
-    const c = Wt(t, this.rowsCount, this.columnsCount);
-    this.chartsDimensions = t.reduce((h, n, r) => {
-      const [T, x] = It(r, this.columnsCount), m = zt(r, t.length, this.columnsCount, this.rowsCount), p = wt(
-        s,
-        e,
-        this.captionsSizes,
-        c[T],
-        this.facetTitles,
-        m,
-        T,
-        x,
-        x === this.columnsCount - 1,
-        i
-      ), E = o + p.left + p.right, S = g + p.top + p.bottom;
-      return h[n] = {
-        left: f,
-        top: C,
-        chartEdgeSides: m,
-        padding: p,
-        inner: { width: o, height: g },
-        outer: { width: E, height: S }
-      }, f += E, x === this.columnsCount - 1 && (f = 0, C += S), h;
-    }, {});
-    const I = Math.max(
-      ...t.map((h) => this.chartsDimensions[h].outer.width + this.chartsDimensions[h].left)
-    ), w = Math.max(
-      ...t.map((h) => this.chartsDimensions[h].outer.height + this.chartsDimensions[h].top)
-    );
-    this.chartSizes.chartsWidth = I, this.chartSizes.chartsHeight = w;
-  }
-  updateViewport(t, i, s, e, o, g, f, C) {
-    const c = t.length, I = Math.min(i.nRows ?? c, c), w = Math.min(i.nCols ?? c, c);
-    this.columnsCount = i.nRows ? Math.ceil(c / I) : w, this.rowsCount = Math.ceil(c / this.columnsCount);
-    let [h, n] = [1 / 0, -1 / 0], [r, T] = [1 / 0, -1 / 0];
-    const x = t.reduce((u, l) => {
-      const W = f[l], { minX: d, minY: N, maxX: b, maxY: z } = W;
-      return h = Math.min(h, d), r = Math.min(r, N), n = Math.max(n, b), T = Math.max(T, z), u[l] = { minX: d, maxX: b, minY: N, maxY: z }, u;
-    }, {}), m = {}, p = {};
-    let E = !1, S = !1;
-    t.forEach((u) => {
-      let l;
-      if (!q(s))
-        l = y().range([0, this.chartSizes.chartWidth]).domain(o.keys ?? []).padding(0.5);
-      else {
-        l = s.scale === "log" ? K() : B();
-        const d = x[u];
-        let N = s.lowerValue ? Number(s.lowerValue) : i.sharedX ? h : d.minX, b = s.upperValue ? Number(s.upperValue) : i.sharedX ? n : d.maxX;
-        if (typeof s.symmetricRange < "u") {
-          const R = s.symmetricRange;
-          if (R >= N && R <= b) {
-            const _ = Math.max(R - N, b - R);
-            N = R - _, b = R + _;
-          }
-        }
-        const z = [0, this.chartSizes.chartWidth], L = l.copy().domain([N, b]).range([P.LEFT, this.chartSizes.chartWidth - P.RIGHT]);
-        l.domain([L.invert(0), L.invert(this.chartSizes.chartWidth)]).range(z).nice();
-      }
-      const W = this.scales.x[u];
-      m[u] = l, E = E || tt(W, l);
-    });
-    const A = t.reduce((u, l) => {
-      const W = C ? C[l] : [];
-      return u[l] = W.reduce(
-        (d, N) => {
-          const b = N.bounded ? N.xBounds : this.scales.x[l].domain(), z = N.getInterval(b[0]), L = N.getInterval(b[1]);
-          return d.minY = Math.min(d.minY, isNaN(z.left) ? d.minY : z.left, isNaN(L.left) ? d.minY : L.left), d.maxY = Math.max(d.maxY, isNaN(z.right) ? d.maxY : z.right, isNaN(L.right) ? d.maxY : L.right), d;
-        },
-        { minY: 1 / 0, maxY: -1 / 0 }
-      ), r = Math.min(r, u[l].minY), T = Math.max(T, u[l].maxY), u;
-    }, {});
-    t.forEach((u) => {
-      let l;
-      if (!q(e))
-        l = y().range([this.chartSizes.chartHeight, 0]).domain(g.keys ?? []).padding(0.5);
-      else {
-        l = e.scale === "log" ? K() : B();
-        const d = x[u], N = A[u];
-        let b = e.lowerValue ? Number(e.lowerValue) : i.sharedY ? r : Math.min(d.minY, N.minY), z = e.upperValue ? Number(e.upperValue) : i.sharedY ? T : Math.max(d.maxY, N.maxY);
-        if (typeof e.symmetricRange < "u") {
-          const _ = e.symmetricRange;
-          if (_ >= b && _ <= z) {
-            const j = Math.max(_ - b, z - _);
-            b = _ - j, z = _ + j;
-          }
-        }
-        const L = [this.chartSizes.chartHeight, 0], R = l.copy().domain([b, z]).range([this.chartSizes.chartHeight - P.BOTTOM, P.TOP]);
-        l.domain([R.invert(this.chartSizes.chartHeight), R.invert(0)]).range(L).nice();
-      }
-      const W = this.scales.y[u];
-      p[u] = l, S = S || tt(W, l);
-    }), E && (this.scales.x = m), S && (this.scales.y = p);
-  }
-  updateCaptionsSize(t, i, s, e) {
-    const o = new Ct("600 14px Manrope");
-    function g(n) {
-      return Math.max(...n.map((r) => o.getTextWidth(r)));
-    }
-    let f = 0, C = 0, c = [], I = [], w = 0, h = 0;
-    if (i.scale === "discrete") {
-      const n = k(
-        t,
-        this.rowsCount,
-        this.columnsCount,
-        i.labelsPosition ?? "center",
-        this.discreteAxesLabels.x,
-        "vertical",
-        this.scales.x
-      );
-      f = n.xTail, c = n.axisCaptionsWidthByRows;
-    } else
-      w = 20;
-    if (s.scale === "discrete") {
-      const n = k(
-        t,
-        this.rowsCount,
-        this.columnsCount,
-        s.labelsPosition ?? "center",
-        this.discreteAxesLabels.y,
-        "horizontal",
-        this.scales.y
-      );
-      C = n.yTail, I = n.axisCaptionsWidthByColumns;
-    } else
-      Object.values(this.scales.y).forEach((n) => {
-        const { ticks: r, format: T } = St(n, e);
-        h = Math.max(h, g(r.map(T)));
-      });
-    this.captionsSizes = {
-      xAxisCaptionsWidth: i.hiddenLabels ? 0 : it(w, i),
-      yAxisCaptionsWidth: s.hiddenLabels ? 0 : it(h, s),
-      bottomAxisCaptionsWidthByRows: c,
-      leftAxisCaptionsWidthByColumns: I,
-      bottomCaptionsTail: f,
-      leftCaptionsTail: C
-    };
-  }
-  createMainTitle(t, i) {
-    const s = this.chartsDimensions[t[0]], e = this.chartsDimensions[t[t.length - 1]];
-    this.mainTitle = V(
-      i.name,
-      this.chartSizes.chartsWidth - s.padding.left - e.padding.right,
-      20
-    );
-  }
-  createFacetTitles(t, i) {
-    this.facetTitles = t.reduce((s, e, o) => (i[o].length === 1 && i[o][0] === "null" ? s[e] = [] : s[e] = V(i[o].join(", "), this.chartSizes.chartWidth, 14), s), {});
-  }
-  createAxisLabels(t, i, s, e, o) {
-    this.discreteAxesLabels = {
-      x: i.scale !== "discrete" ? {} : J(
-        t,
-        (i == null ? void 0 : i.labelsPosition) ?? "center",
-        e.labels,
-        !1,
-        "vertical",
-        this.scales.x
-      ),
-      y: s.scale !== "discrete" ? {} : J(
-        t,
-        s.labelsPosition ?? "center",
-        o.labels,
-        !1,
-        "horizontal",
-        this.scales.y
-      )
-    };
-  }
-  updateMargins(t) {
-    const i = rt * this.mainTitle.length, s = i > 0 ? i + dt * 2 : 0, e = this.chartsDimensions[t[0]], o = this.chartsDimensions[t[t.length - 1]];
-    this.margins = {
-      top: Math.max(s, H),
-      bottom: Math.max(H, this.captionsSizes.leftCaptionsTail - o.padding.bottom),
-      left: Math.max(H, this.captionsSizes.bottomCaptionsTail - e.padding.left),
-      right: this.legend.width + H
-    }, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartsHeight, this.legend.height) + this.margins.bottom;
-  }
-  updateLegendSize(t, i, s, e) {
-    if (!t.show) {
-      this.legend = { width: 0, height: 0, items: [] };
-      return;
-    }
-    const o = [], g = { width: 0, height: 0, left: 0, top: 0 }, f = Math.min(
-      Math.max(this.chartSizes.chartHeight, lt),
-      ct
-    ), C = Math.max(this.chartSizes.chartHeight, f);
-    if (s.forEach((h) => {
-      const n = i[h.value];
-      if (n.usedAes.length === 0 || !n.aesMap)
-        return;
-      if (n.values.length > mt) {
-        console.warn(`Too many values for discrete legend (${n.values.length})`);
-        return;
-      }
-      const r = {};
-      n.values.forEach((m) => {
-        r[m] || (r[m] = { ...Y }), n.usedAes.forEach((p) => {
-          (p === "dotFill" || p === "lineColor") && (r[m].color = n.aesMap(m, p) ?? et), p === "dotShape" && (r[m].shape = n.aesMap(m, p) ?? "21"), p === "dotSize" && (r[m].size = n.aesMap(m, p) ?? 3);
-        });
-      });
-      const T = h.label ?? h.value, x = Nt().domain(n.values).range(n.values.map((m) => r[m])).unknown(Y);
-      o.push({ ...g, id: h.value, type: "dots", title: T, scale: x, values: n.values, labels: n.labels });
-    }), e.forEach((h) => {
-      if (h.type === "dots" && Q(h.aes.dotFill)) {
-        const { domain: n, range: r, columnName: T, type: x = "linear" } = h.aes.dotFill, m = T.label ?? T.value, p = ft(r, n, "linear"), E = (x === "log" ? bt() : B()).domain(n).range([f, 0]), S = Tt(E, n);
-        o.push({ ...g, id: "dotFill", type: "continuous", title: m, scale: p, tickPositionScale: E, values: S });
-      }
-      h.type === "dots" && Q(h.aes.dotSize) && o.push(gt(h.aes.dotSize));
-    }), !o.length) {
-      this.legend = { width: 0, height: 0, items: [] };
-      return;
-    }
-    const c = ut(o, C, f), w = c.reduce((h, n) => Math.max(h, n.left + n.width), 0) + Mt;
-    this.legend = {
-      width: w,
-      height: C,
-      items: c
-    };
-  }
-  render(t, i, s, e, o, g, f, C, c, I, w, h, n, r, T, x, m, p) {
-    var d;
-    const { xAxis: E, yAxis: S, size: A, title: u, legend: l } = s;
-    this.updateChartSizes(A), this.updateViewport(o, e, E, S, x, m, f, C), this.createAxisLabels(o, E, S, x, m), this.updateCaptionsSize(o, E, S, I.y), this.createFacetTitles(o, g), this.updateChartDimensions(o, e, E, S), this.updateLegendSize(l, w, n, r), this.createMainTitle(o, u), this.updateMargins(o);
-    const W = /* @__PURE__ */ F.jsx(ht, { dataFrame: t, children: /* @__PURE__ */ F.jsx(
-      Et,
-      {
-        settingsId: i,
-        chartSettings: s,
-        facetKeys: o,
-        facetSettings: e,
-        chartSizes: this.chartSizes,
-        chartsDimensions: this.chartsDimensions,
-        scales: this.scales,
-        groupedDots: f,
-        trendsData: C,
-        legendData: this.legend,
-        columnsCount: this.columnsCount,
-        margins: this.margins,
-        keyColumn: c,
-        mainTitle: this.mainTitle,
-        facetTitles: this.facetTitles,
-        captionsSizes: this.captionsSizes,
-        onlyPositive: I,
-        layersData: h,
-        aesGetters: Lt(t, w, r, T),
-        onTooltipHintSwitch: p,
-        discreteAxesLabels: this.discreteAxesLabels
-      }
-    ) });
-    this.component = W, (d = this.reactRoot) == null || d.render(W);
-  }
-  renderError(t) {
-    var i;
-    (i = this.reactRoot) == null || i.render(/* @__PURE__ */ F.jsx(at, { message: t }));
-  }
-}
-export {
-  ci as default
+var P = class {
+	reactRoot = null;
+	parentNode = null;
+	rootNode = null;
+	component = /* @__PURE__ */ w(C, {});
+	margins = {
+		top: 24,
+		bottom: 24,
+		left: 24,
+		right: 24
+	};
+	chartsDimensions = {};
+	chartSizes = {
+		chartWidth: 600,
+		chartHeight: 350,
+		chartsWidth: 600,
+		chartsHeight: 350,
+		totalWidth: 600,
+		totalHeight: 350
+	};
+	columnsCount = 1;
+	rowsCount = 1;
+	scales = {
+		x: { null: _().domain([0, 1]).range([0, 600]) },
+		y: { null: _().domain([0, 1]).range([350, 0]) }
+	};
+	captionsSizes = {
+		xAxisCaptionsWidth: 30,
+		yAxisCaptionsWidth: 100,
+		bottomAxisCaptionsWidthByRows: [],
+		leftAxisCaptionsWidthByColumns: [],
+		bottomCaptionsTail: 0,
+		leftCaptionsTail: 0
+	};
+	facetTitles = {};
+	mainTitle = [];
+	discreteAxesLabels = {
+		x: {},
+		y: {}
+	};
+	legend = {
+		width: 0,
+		height: 0,
+		items: []
+	};
+	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 = S(this.rootNode));
+	}
+	updateChartSizes(e) {
+		this.chartSizes.chartWidth = e.width, this.chartSizes.chartHeight = e.height;
+	}
+	updateChartDimensions(e, t, n, r) {
+		let { chartWidth: i, chartHeight: a } = this.chartSizes, o = 0, s = 0, c = O(e, this.rowsCount, this.columnsCount);
+		this.chartsDimensions = e.reduce((l, u, d) => {
+			let [f, p] = k(d, this.columnsCount), m = E(d, e.length, this.columnsCount, this.rowsCount), h = D(n, r, this.captionsSizes, c[f], this.facetTitles, m, f, p, p === this.columnsCount - 1, t), g = i + h.left + h.right, _ = a + h.top + h.bottom;
+			return l[u] = {
+				left: o,
+				top: s,
+				chartEdgeSides: m,
+				padding: h,
+				inner: {
+					width: i,
+					height: a
+				},
+				outer: {
+					width: g,
+					height: _
+				}
+			}, o += g, p === this.columnsCount - 1 && (o = 0, s += _), l;
+		}, {});
+		let l = Math.max(...e.map((e) => this.chartsDimensions[e].outer.width + this.chartsDimensions[e].left)), u = Math.max(...e.map((e) => this.chartsDimensions[e].outer.height + this.chartsDimensions[e].top));
+		this.chartSizes.chartsWidth = l, this.chartSizes.chartsHeight = u;
+	}
+	updateViewport(e, t, r, i, a, o, s, c) {
+		let l = e.length, u = Math.min(t.nRows ?? l, l), d = Math.min(t.nCols ?? l, l);
+		this.columnsCount = t.nRows ? Math.ceil(l / u) : d, this.rowsCount = Math.ceil(l / this.columnsCount);
+		let [f, p] = [Infinity, -Infinity], [h, g] = [Infinity, -Infinity], y = e.reduce((e, t) => {
+			let { minX: n, minY: r, maxX: i, maxY: a } = s[t];
+			return f = Math.min(f, n), h = Math.min(h, r), p = Math.max(p, i), g = Math.max(g, a), e[t] = {
+				minX: n,
+				maxX: i,
+				minY: r,
+				maxY: a
+			}, e;
+		}, {}), x = {}, S = {}, C = !1, w = !1;
+		e.forEach((e) => {
+			let i;
+			if (!m(r)) i = b().range([0, this.chartSizes.chartWidth]).domain(a.keys ?? []).padding(.5);
+			else {
+				i = r.scale === "log" ? v() : _();
+				let a = y[e], o = r.lowerValue ? Number(r.lowerValue) : t.sharedX ? f : a.minX, s = r.upperValue ? Number(r.upperValue) : t.sharedX ? p : a.maxX;
+				if (r.symmetricRange !== void 0) {
+					let e = r.symmetricRange;
+					if (e >= o && e <= s) {
+						let t = Math.max(e - o, s - e);
+						o = e - t, s = e + t;
+					}
+				}
+				let c = [0, this.chartSizes.chartWidth], l = i.copy().domain([o, s]).range([n.LEFT, this.chartSizes.chartWidth - n.RIGHT]);
+				i.domain([l.invert(0), l.invert(this.chartSizes.chartWidth)]).range(c).nice();
+			}
+			let o = this.scales.x[e];
+			x[e] = i, C ||= T(o, i);
+		});
+		let E = e.reduce((e, t) => (e[t] = (c ? c[t] : []).reduce((e, n) => {
+			let r = n.bounded ? n.xBounds : this.scales.x[t].domain(), i = n.getInterval(r[0]), a = n.getInterval(r[1]);
+			return e.minY = Math.min(e.minY, isNaN(i.left) ? e.minY : i.left, isNaN(a.left) ? e.minY : a.left), e.maxY = Math.max(e.maxY, isNaN(i.right) ? e.maxY : i.right, isNaN(a.right) ? e.maxY : a.right), e;
+		}, {
+			minY: Infinity,
+			maxY: -Infinity
+		}), h = Math.min(h, e[t].minY), g = Math.max(g, e[t].maxY), e), {});
+		e.forEach((e) => {
+			let r;
+			if (!m(i)) r = b().range([this.chartSizes.chartHeight, 0]).domain(o.keys ?? []).padding(.5);
+			else {
+				r = i.scale === "log" ? v() : _();
+				let a = y[e], o = E[e], s = i.lowerValue ? Number(i.lowerValue) : t.sharedY ? h : Math.min(a.minY, o.minY), c = i.upperValue ? Number(i.upperValue) : t.sharedY ? g : Math.max(a.maxY, o.maxY);
+				if (i.symmetricRange !== void 0) {
+					let e = i.symmetricRange;
+					if (e >= s && e <= c) {
+						let t = Math.max(e - s, c - e);
+						s = e - t, c = e + t;
+					}
+				}
+				let l = [this.chartSizes.chartHeight, 0], u = r.copy().domain([s, c]).range([this.chartSizes.chartHeight - n.BOTTOM, n.TOP]);
+				r.domain([u.invert(this.chartSizes.chartHeight), u.invert(0)]).range(l).nice();
+			}
+			let a = this.scales.y[e];
+			S[e] = r, w ||= T(a, r);
+		}), C && (this.scales.x = x), w && (this.scales.y = S);
+	}
+	updateCaptionsSize(e, t, n, r) {
+		let i = new a("600 14px Manrope");
+		function o(e) {
+			return Math.max(...e.map((e) => i.getTextWidth(e)));
+		}
+		let s = 0, c = 0, l = [], u = [], p = 0, m = 0;
+		if (t.scale === "discrete") {
+			let n = d(e, this.rowsCount, this.columnsCount, t.labelsPosition ?? "center", this.discreteAxesLabels.x, "vertical", this.scales.x);
+			s = n.xTail, l = n.axisCaptionsWidthByRows;
+		} else p = 20;
+		if (n.scale === "discrete") {
+			let t = d(e, this.rowsCount, this.columnsCount, n.labelsPosition ?? "center", this.discreteAxesLabels.y, "horizontal", this.scales.y);
+			c = t.yTail, u = t.axisCaptionsWidthByColumns;
+		} else Object.values(this.scales.y).forEach((e) => {
+			let { ticks: t, format: n } = f(e, r);
+			m = Math.max(m, o(t.map(n)));
+		});
+		this.captionsSizes = {
+			xAxisCaptionsWidth: t.hiddenLabels ? 0 : N(p, t),
+			yAxisCaptionsWidth: n.hiddenLabels ? 0 : N(m, n),
+			bottomAxisCaptionsWidthByRows: l,
+			leftAxisCaptionsWidthByColumns: u,
+			bottomCaptionsTail: s,
+			leftCaptionsTail: c
+		};
+	}
+	createMainTitle(e, t) {
+		let n = this.chartsDimensions[e[0]], r = this.chartsDimensions[e[e.length - 1]];
+		this.mainTitle = l(t.name, this.chartSizes.chartsWidth - n.padding.left - r.padding.right, 20);
+	}
+	createFacetTitles(e, t) {
+		this.facetTitles = e.reduce((e, n, r) => (t[r].length === 1 && t[r][0] === "null" ? e[n] = [] : e[n] = l(t[r].join(", "), this.chartSizes.chartWidth, 14), e), {});
+	}
+	createAxisLabels(e, t, n, r, i) {
+		this.discreteAxesLabels = {
+			x: t.scale === "discrete" ? u(e, t?.labelsPosition ?? "center", r.labels, !1, "vertical", this.scales.x) : {},
+			y: n.scale === "discrete" ? u(e, n.labelsPosition ?? "center", i.labels, !1, "horizontal", this.scales.y) : {}
+		};
+	}
+	updateMargins(e) {
+		let t = 24 * this.mainTitle.length, n = t > 0 ? t + 48 : 0, r = this.chartsDimensions[e[0]], i = this.chartsDimensions[e[e.length - 1]];
+		this.margins = {
+			top: Math.max(n, 24),
+			bottom: Math.max(24, this.captionsSizes.leftCaptionsTail - i.padding.bottom),
+			left: Math.max(24, this.captionsSizes.bottomCaptionsTail - r.padding.left),
+			right: this.legend.width + 24
+		}, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartsWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartsHeight, this.legend.height) + this.margins.bottom;
+	}
+	updateLegendSize(e, n, a, s) {
+		if (!e.show) {
+			this.legend = {
+				width: 0,
+				height: 0,
+				items: []
+			};
+			return;
+		}
+		let l = [], u = {
+			width: 0,
+			height: 0,
+			left: 0,
+			top: 0
+		}, d = Math.min(Math.max(this.chartSizes.chartHeight, 250), 400), f = Math.max(this.chartSizes.chartHeight, d);
+		if (a.forEach((e) => {
+			let r = n[e.value];
+			if (r.usedAes.length === 0 || !r.aesMap) return;
+			if (r.values.length > 100) {
+				console.warn(`Too many values for discrete legend (${r.values.length})`);
+				return;
+			}
+			let i = {};
+			r.values.forEach((e) => {
+				i[e] || (i[e] = { ...t }), r.usedAes.forEach((t) => {
+					(t === "dotFill" || t === "lineColor") && (i[e].color = r.aesMap(e, t) ?? "#110529"), t === "dotShape" && (i[e].shape = r.aesMap(e, t) ?? "21"), t === "dotSize" && (i[e].size = r.aesMap(e, t) ?? 3);
+				});
+			});
+			let a = e.label ?? e.value, o = y().domain(r.values).range(r.values.map((e) => i[e])).unknown(t);
+			l.push({
+				...u,
+				id: e.value,
+				type: "dots",
+				title: a,
+				scale: o,
+				values: r.values,
+				labels: r.labels
+			});
+		}), s.forEach((e) => {
+			if (e.type === "dots" && r(e.aes.dotFill)) {
+				let { domain: t, range: n, columnName: r, type: a = "linear" } = e.aes.dotFill, o = r.label ?? r.value, s = p(n, t, "linear"), c = (a === "log" ? x() : _()).domain(t).range([d, 0]), f = i(c, t);
+				l.push({
+					...u,
+					id: "dotFill",
+					type: "continuous",
+					title: o,
+					scale: s,
+					tickPositionScale: c,
+					values: f
+				});
+			}
+			e.type === "dots" && r(e.aes.dotSize) && l.push(o(e.aes.dotSize));
+		}), !l.length) {
+			this.legend = {
+				width: 0,
+				height: 0,
+				items: []
+			};
+			return;
+		}
+		let m = c(l, f, d);
+		this.legend = {
+			width: m.reduce((e, t) => Math.max(e, t.left + t.width), 0) + 20,
+			height: f,
+			items: m
+		};
+	}
+	render(e, t, n, r, i, a, o, c, l, u, d, f, p, m, g, _, v, y) {
+		let { xAxis: b, yAxis: x, size: S, title: C, legend: T } = n;
+		this.updateChartSizes(S), this.updateViewport(i, r, b, x, _, v, o, c), this.createAxisLabels(i, b, x, _, v), this.updateCaptionsSize(i, b, x, u.y), this.createFacetTitles(i, a), this.updateChartDimensions(i, r, b, x), this.updateLegendSize(T, d, p, m), this.createMainTitle(i, C), this.updateMargins(i);
+		let E = /* @__PURE__ */ w(s, {
+			dataFrame: e,
+			children: /* @__PURE__ */ w(h, {
+				settingsId: t,
+				chartSettings: n,
+				facetKeys: i,
+				facetSettings: r,
+				chartSizes: this.chartSizes,
+				chartsDimensions: this.chartsDimensions,
+				scales: this.scales,
+				groupedDots: o,
+				trendsData: c,
+				legendData: this.legend,
+				columnsCount: this.columnsCount,
+				margins: this.margins,
+				keyColumn: l,
+				mainTitle: this.mainTitle,
+				facetTitles: this.facetTitles,
+				captionsSizes: this.captionsSizes,
+				onlyPositive: u,
+				layersData: f,
+				aesGetters: A(e, d, m, g),
+				onTooltipHintSwitch: y,
+				discreteAxesLabels: this.discreteAxesLabels
+			})
+		});
+		this.component = E, this.reactRoot?.render(E);
+	}
+	renderError(t) {
+		this.reactRoot?.render(/* @__PURE__ */ w(e, { message: t }));
+	}
 };
-//# sourceMappingURL=ChartRenderer.js.map
+export { P as default };
+
+//# sourceMappingURL=ChartRenderer.js.map