@milaboratories/graph-maker 1.1.145 → 1.1.147

package/dist/node_modules/@milaboratories/miplots4/dist/scatterplot-umap/ChartRenderer.js

@@ -9,13 +9,13 @@ import q from "../node_modules/d3-zoom/src/zoom.js";
 import "../node_modules/d3-zoom/src/transform.js";
 import { createRoot as X } from "../node_modules/react-dom/client.js";
 import { Error as Y } from "../common/Error.js";
-import { DEFAULT_HEIGHT as w, DEFAULT_WIDTH as E, TITLE_LINE_HEIGHT as Q, BLACK as $, TITLE_MARGIN as J } from "../constants.js";
+import { DEFAULT_HEIGHT as w, DEFAULT_WIDTH as D, TITLE_LINE_HEIGHT as Q, BLACK as M, TITLE_MARGIN as J } from "../constants.js";
 import { splitTextByWidth as Z } from "../utils/splitTextByWidth.js";
-import { MIN_MARGIN as C, DEFAULT_DOT_AES as M } from "../scatterplot/constants.js";
-import { createAesGetter as P } from "../scatterplot/utils/createAesGetter.js";
+import { MIN_MARGIN as L, DEFAULT_DOT_AES as H } from "../scatterplot/constants.js";
+import { createAesGetter as F } from "../scatterplot/utils/createAesGetter.js";
 import { getTicksAndFormat as tt } from "../scatterplot/utils/getTicksAndFormat.js";
 import { createLabelPositioner as et } from "../scatterplot/utils/getVisibleLabels.js";
-import { isContinuousAes as F } from "../types/common.js";
+import { isContinuousAes as $ } from "../types/common.js";
 import "../types/discrete.js";
 import "../types/scatterplot.js";
 import "../types/heatmap.js";
@@ -26,66 +26,67 @@ import { getContinuousColorScale as st } from "../utils/getContinuousColorScale.
 import { getContinuousLegendTicks as it } from "../utils/getContinuousLegendTicks.js";
 import { TextMeasurer as G } from "../utils/TextMeasurer/TextMeasurer.js";
 import { SVGLayer as at } from "./components/SVGLayer.js";
-import { PADDINGS as D, TITLE_LINE as I, LEGEND_OFFSET as ot } from "./constants.js";
-import lt from "../node_modules/@d3fc/d3fc-pointer/src/pointer.js";
-import rt from "../node_modules/kdbush/index.js";
+import { PADDINGS as E, TITLE_LINE as I, LEGEND_OFFSET as ot } from "./constants.js";
+import rt from "../node_modules/@d3fc/d3fc-pointer/src/pointer.js";
+import lt from "../node_modules/kdbush/index.js";
 import { DataFrameProvider as nt } from "../common/useDataFrame.js";
-import { arrangeLegendParts as ht } from "../utils/arrangeLegendParts.js";
-import { stringToNumberRgba as W, getColorWithFakeOpacity as H, GET_BLACK as O } from "./colors.js";
+import { DataFrame as ht } from "../DataFrame.js";
+import { arrangeLegendParts as dt } from "../utils/arrangeLegendParts.js";
+import { stringToNumberRgba as P, getColorWithFakeOpacity as W, GET_BLACK as O } from "./colors.js";
 import T from "../node_modules/d3-scale/src/linear.js";
 import _ from "../node_modules/d3-scale/src/log.js";
 import N from "../node_modules/d3-selection/src/select.js";
-import dt from "../node_modules/d3-scale/src/ordinal.js";
-import ct from "../node_modules/d3-scale/src/symlog.js";
-import { sqrt as mt } from "../node_modules/d3-scale/src/pow.js";
-import pt from "../node_modules/d3-polygon/src/contains.js";
-var ut = Object.defineProperty, gt = (S, t, e) => t in S ? ut(S, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : S[t] = e, c = (S, t, e) => gt(S, typeof t != "symbol" ? t + "" : t, e);
+import ct from "../node_modules/d3-scale/src/ordinal.js";
+import mt from "../node_modules/d3-scale/src/symlog.js";
+import { sqrt as pt } from "../node_modules/d3-scale/src/pow.js";
+import ut from "../node_modules/d3-polygon/src/contains.js";
+var gt = Object.defineProperty, yt = (S, t, e) => t in S ? gt(S, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : S[t] = e, h = (S, t, e) => yt(S, typeof t != "symbol" ? t + "" : t, e);
 function R(S) {
   return S / 2.35 * (S / 2.35) * 64;
 }
 function A(S, t, e) {
-  return e.length === 0 ? !0 : e.some((s) => s.closed && s.points.length > 2 && pt(s.points, [S, t]));
+  return e.length === 0 ? !0 : e.some((s) => s.closed && s.points.length > 2 && ut(s.points, [S, t]));
 }
 function k(S, t, e) {
-  const s = e.find((a) => a.type === "dots"), l = e.find((a) => a.type === "curve");
+  const s = e.find((a) => a.type === "dots"), n = e.find((a) => a.type === "curve");
   return {
-    dotFill: P(S, t, (s == null ? void 0 : s.aes.dotFill) ?? M.color, "dotFill"),
-    dotSize: P(S, t, (s == null ? void 0 : s.aes.dotSize) ?? M.size, "dotSize"),
-    lineType: P(S, t, (l == null ? void 0 : l.aes.lineShape) ?? "solid", "lineShape")
+    dotFill: F(S, t, (s == null ? void 0 : s.aes.dotFill) ?? H.color, "dotFill"),
+    dotSize: F(S, t, (s == null ? void 0 : s.aes.dotSize) ?? H.size, "dotSize"),
+    lineType: F(S, t, (n == null ? void 0 : n.aes.lineShape) ?? "solid", "lineShape")
   };
 }
-class ie {
+class oe {
   constructor() {
-    c(this, "reactRoot", null), c(this, "parentNode", null), c(this, "rootNode", null), c(this, "canvasNode", null), c(this, "svgLayerElement", null), c(this, "svgLayerComponent", /* @__PURE__ */ b.jsx(b.Fragment, {})), c(this, "aesGetters", {
+    h(this, "reactRoot", null), h(this, "parentNode", null), h(this, "rootNode", null), h(this, "canvasNode", null), h(this, "svgLayerElement", null), h(this, "svgLayerComponent", /* @__PURE__ */ b.jsx(b.Fragment, {})), h(this, "aesGetters", {
       dotSize: () => 2,
-      dotFill: () => $,
+      dotFill: () => M,
       lineType: () => "solid"
-    }), c(this, "tools", null), c(this, "margins", {
-      top: C,
-      bottom: C,
-      left: C,
-      right: C
-    }), c(this, "chartSizes", {
-      chartWidth: E,
+    }), h(this, "tools", null), h(this, "margins", {
+      top: L,
+      bottom: L,
+      left: L,
+      right: L
+    }), h(this, "chartSizes", {
+      chartWidth: D,
       // width of single chart
       chartHeight: w,
       // height of single chart
-      totalWidth: E,
+      totalWidth: D,
       // width of all charts in charts row, plus left axis, plus legend
       totalHeight: w
       // width of all charts in charts height, plus bottom axis, plus top title
-    }), c(this, "scales", {
-      x: T().domain([0, 10]).range([0, E]),
+    }), h(this, "scales", {
+      x: T().domain([0, 10]).range([0, D]),
       y: T().domain([0, 10]).range([w, 0]),
-      xOriginal: T().domain([0, 10]).range([0, E]),
+      xOriginal: T().domain([0, 10]).range([0, D]),
       yOriginal: T().domain([0, 10]).range([w, 0])
-    }), c(this, "polygons", []), c(this, "onPolygonUpdateOutside", () => {
-    }), c(this, "onTooltipHintSwitch", () => {
-    }), c(this, "onLassoControlsStateUpdate", () => {
-    }), c(this, "zoomTransform", null), c(this, "zoomStateKey", ""), c(this, "selectedDot", null), c(this, "captionsSizes", {
+    }), h(this, "polygons", []), h(this, "onPolygonUpdateOutside", () => {
+    }), h(this, "onTooltipHintSwitch", () => {
+    }), h(this, "onLassoControlsStateUpdate", () => {
+    }), h(this, "zoomTransform", null), h(this, "zoomStateKey", ""), h(this, "selectedDot", null), h(this, "captionsSizes", {
       xAxisCaptionsWidth: 30,
       yAxisCaptionsWidth: 100
-    }), c(this, "mainTitle", []), c(this, "legend", { width: 0, height: 0, items: [] }), c(this, "notCalculatedProps", {}), c(this, "allDots", []), c(this, "visibleLabels", []), c(this, "onPolygonUpdate", (t) => {
+    }), h(this, "mainTitle", []), h(this, "legend", { width: 0, height: 0, items: [] }), h(this, "notCalculatedProps", {}), h(this, "allDots", []), h(this, "visibleLabels", []), h(this, "dataFrame", new ht("", {})), h(this, "onPolygonUpdate", (t) => {
       this.polygons = t, this.updateByLasso();
       const e = this.allDots.filter((s) => A(s.x, s.y, this.polygons)).map((s) => s.idx);
       this.onPolygonUpdateOutside(e, t);
@@ -105,9 +106,9 @@ class ie {
     (t.width !== this.chartSizes.chartWidth || t.height !== this.chartSizes.chartHeight) && (this.chartSizes.chartWidth = t.width, this.chartSizes.chartHeight = t.height, this.scales.x.range([0, this.chartSizes.chartWidth]), this.scales.y.range([this.chartSizes.chartHeight, 0]));
   }
   updateViewport(t, e, s) {
-    const l = t.scale === "log" ? _() : T();
-    let { minX: a, minY: r, maxX: u, maxY: p } = s;
-    if (t.lowerValue !== void 0 && (a = Math.max(a, t.lowerValue)), t.upperValue !== void 0 && (u = Math.min(u, t.upperValue)), e.lowerValue !== void 0 && (r = Math.max(r, e.lowerValue)), e.upperValue !== void 0 && (p = Math.min(p, e.upperValue)), t.symmetricRange !== void 0) {
+    const n = t.scale === "log" ? _() : T();
+    let { minX: a, minY: d, maxX: u, maxY: p } = s;
+    if (t.lowerValue !== void 0 && (a = Math.max(a, t.lowerValue)), t.upperValue !== void 0 && (u = Math.min(u, t.upperValue)), e.lowerValue !== void 0 && (d = Math.max(d, e.lowerValue)), e.upperValue !== void 0 && (p = Math.min(p, e.upperValue)), t.symmetricRange !== void 0) {
       const o = t.symmetricRange;
       if (o >= a && o <= u) {
         const y = Math.max(o - a, u - o);
@@ -116,22 +117,22 @@ class ie {
     }
     if (typeof e.symmetricRange < "u") {
       const o = e.symmetricRange;
-      if (o >= r && o <= p) {
-        const y = Math.max(o - r, p - o);
-        r = o - y, p = o + y;
+      if (o >= d && o <= p) {
+        const y = Math.max(o - d, p - o);
+        d = o - y, p = o + y;
       }
     }
-    const f = [0, this.chartSizes.chartWidth], x = l.copy().domain([a, u]).range([D.LEFT, this.chartSizes.chartWidth - D.RIGHT]);
-    l.domain([x.invert(0), x.invert(this.chartSizes.chartWidth)]).range(f).nice(), this.scales.x = l, this.scales.xOriginal = l.copy();
-    const d = e.scale === "log" ? _() : T(), n = [this.chartSizes.chartHeight, 0], g = d.copy().domain([r, p]).range([this.chartSizes.chartHeight - D.BOTTOM, D.TOP]);
-    d.domain([g.invert(this.chartSizes.chartHeight), g.invert(0)]).range(n).nice(), this.scales.y = d, this.scales.yOriginal = d.copy();
+    const f = [0, this.chartSizes.chartWidth], v = n.copy().domain([a, u]).range([E.LEFT, this.chartSizes.chartWidth - E.RIGHT]);
+    n.domain([v.invert(0), v.invert(this.chartSizes.chartWidth)]).range(f).nice(), this.scales.x = n, this.scales.xOriginal = n.copy();
+    const c = e.scale === "log" ? _() : T(), r = [this.chartSizes.chartHeight, 0], g = c.copy().domain([d, p]).range([this.chartSizes.chartHeight - E.BOTTOM, E.TOP]);
+    c.domain([g.invert(this.chartSizes.chartHeight), g.invert(0)]).range(r).nice(), this.scales.y = c, this.scales.yOriginal = c.copy();
   }
   updateCaptionsSize() {
     const t = new G("600 14px Arial");
-    function e(r) {
-      return Math.max(...r.map((u) => t.getTextWidth(u)));
+    function e(d) {
+      return Math.max(...d.map((u) => t.getTextWidth(u)));
     }
-    const { ticks: s, format: l } = tt(this.scales.y, !1), a = e(s.map(l));
+    const { ticks: s, format: n } = tt(this.scales.y, !1), a = e(s.map(n));
     this.captionsSizes = {
       xAxisCaptionsWidth: 20,
       yAxisCaptionsWidth: a
@@ -147,90 +148,90 @@ class ie {
   updateMargins() {
     const t = Q * this.mainTitle.length, e = t > 0 ? t + J * 2 : 0;
     this.margins = {
-      top: Math.max(e, C),
-      bottom: C + this.captionsSizes.xAxisCaptionsWidth + I,
-      left: C + this.captionsSizes.yAxisCaptionsWidth + I,
-      right: this.legend.width + C
+      top: Math.max(e, L),
+      bottom: L + this.captionsSizes.xAxisCaptionsWidth + I,
+      left: L + this.captionsSizes.yAxisCaptionsWidth + I,
+      right: this.legend.width + L
     }, this.chartSizes.totalWidth = this.margins.left + this.chartSizes.chartWidth + this.margins.right, this.chartSizes.totalHeight = this.margins.top + Math.max(this.chartSizes.chartHeight, this.legend.height) + this.margins.bottom, N(this.canvasNode).style("width", this.chartSizes.chartWidth + "px").style("height", this.chartSizes.chartHeight + "px").style("top", this.margins.top + "px").style("left", this.margins.left + "px");
   }
-  updateLegendSize(t, e, s, l) {
+  updateLegendSize(t, e, s, n) {
     if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const a = [], r = { width: 0, height: 0, left: 0, top: 0 };
-    if (s.forEach((d) => {
-      const n = e[d.value];
-      if (n.usedAes.length === 0 || !n.aesMap)
+    const a = [], d = { width: 0, height: 0, left: 0, top: 0 };
+    if (s.forEach((c) => {
+      const r = e[c.value];
+      if (r.usedAes.length === 0 || !r.aesMap)
         return;
       const g = {};
-      n.values.forEach((m) => {
-        g[m] || (g[m] = { ...M }), n.usedAes.forEach((v) => {
-          v === "dotFill" && (g[m].color = n.aesMap(m, v) ?? $), v === "dotSize" && (g[m].size = Number(n.aesMap(m, v) ?? 3));
+      r.values.forEach((m) => {
+        g[m] || (g[m] = { ...H }), r.usedAes.forEach((i) => {
+          i === "dotFill" && (g[m].color = r.aesMap(m, i) ?? M), i === "dotSize" && (g[m].size = Number(r.aesMap(m, i) ?? 3));
         });
       });
-      const o = d.label ?? d.value, y = dt().domain(n.values).range(n.values.map((m) => g[m]));
-      a.push({ ...r, id: d.value, type: "dots", title: o, scale: y, values: n.values, labels: n.labels });
-    }), l.forEach((d) => {
-      if (d.type === "dots" && F(d.aes.dotFill)) {
-        const { domain: n, range: g, columnName: o, type: y = "linear" } = d.aes.dotFill, m = o.label ?? o.value, v = st(g, n, "linear"), i = (y === "log" ? ct() : T()).domain(n).range([this.chartSizes.chartHeight, 0]), h = it(i, n);
-        a.push({ ...r, id: "dotFill", type: "continuous", title: m, scale: v, tickPositionScale: i, values: h });
+      const o = c.label ?? c.value, y = ct().domain(r.values).range(r.values.map((m) => g[m]));
+      a.push({ ...d, id: c.value, type: "dots", title: o, scale: y, values: r.values, labels: r.labels });
+    }), n.forEach((c) => {
+      if (c.type === "dots" && $(c.aes.dotFill)) {
+        const { domain: r, range: g, columnName: o, type: y = "linear" } = c.aes.dotFill, m = o.label ?? o.value, i = st(g, r, "linear"), l = (y === "log" ? mt() : T()).domain(r).range([this.chartSizes.chartHeight, 0]), x = it(l, r);
+        a.push({ ...d, id: "dotFill", type: "continuous", title: m, scale: i, tickPositionScale: l, values: x });
       }
-      if (d.type === "dots" && F(d.aes.dotSize)) {
-        const { columnName: n, domain: g, range: o } = d.aes.dotSize, y = n.label ?? n.value, m = mt(g, o), v = m.ticks(3), i = m.tickFormat(3), h = v.reduce((z, L) => (z[String(L)] = i(L), z), {});
-        a.push({ ...r, id: n.value, type: "size", title: y, scale: m, values: v, labels: h });
+      if (c.type === "dots" && $(c.aes.dotSize)) {
+        const { columnName: r, domain: g, range: o } = c.aes.dotSize, y = r.label ?? r.value, m = pt(g, o), i = m.ticks(3), l = m.tickFormat(3), x = i.reduce((z, C) => (z[String(C)] = l(C), z), {});
+        a.push({ ...d, id: r.value, type: "size", title: y, scale: m, values: i, labels: x });
       }
     }), !a.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const u = ht(a, this.chartSizes.chartHeight), p = u[u.length - 1], f = p.left + p.width + ot, x = this.chartSizes.chartHeight;
+    const u = dt(a, this.chartSizes.chartHeight), p = u[u.length - 1], f = p.left + p.width + ot, v = this.chartSizes.chartHeight;
     this.legend = {
       width: f,
-      height: x,
+      height: v,
       items: u
     };
   }
-  initSettings(t, e, s, l, a, r, u) {
-    const { xAxis: p, yAxis: f, size: x, title: d, legend: n } = s;
-    this.updateChartSizes(x), this.updateViewport(p, f, l), this.updateCaptionsSize(), this.updateLegendSize(n, a, u, r), this.createMainTitle(d), this.updateMargins(), this.aesGetters = k(t, a, r);
-    const g = U().data(e).value((i) => {
-      const h = W(this.aesGetters.dotFill(i.idx));
-      return h[3] = !i.dimmed && A(i.x, i.y, this.polygons) ? 1 : 0.4, H(h, h);
-    }), o = V().equals((i, h) => i === h).size((i) => R(this.aesGetters.dotSize(i.idx))).crossValue((i) => i.x).mainValue((i) => i.y).decorate((i) => g(i)), y = q().scaleExtent([0.1, 1e3]).filter((i) => i.type === "wheel" || i.metaKey || i.ctrlKey).on("start", () => {
+  initSettings(t, e, s, n, a, d) {
+    const { xAxis: u, yAxis: p, size: f, title: v, legend: c } = e;
+    this.updateChartSizes(f), this.updateViewport(u, p, s), this.updateCaptionsSize(), this.updateLegendSize(c, n, d, a), this.createMainTitle(v), this.updateMargins(), this.aesGetters = k(this.dataFrame, n, a);
+    const r = U().data(t).value((i) => {
+      const l = P(this.aesGetters.dotFill(i.idx));
+      return l[3] = !i.dimmed && A(i.x, i.y, this.polygons) ? 1 : 0.4, W(l, l);
+    }), g = V().equals((i, l) => i === l).size((i) => R(this.aesGetters.dotSize(i.idx))).crossValue((i) => i.x).mainValue((i) => i.y).decorate((i) => r(i)), o = q().scaleExtent([0.1, 1e3]).filter((i) => i.type === "wheel" || i.metaKey || i.ctrlKey).on("start", () => {
       this.selectedDot = null;
     }).on("zoom", (i) => {
-      const h = i.transform, z = h.rescaleX(this.scales.xOriginal), L = h.rescaleY(this.scales.yOriginal);
-      this.scales.x.domain(z.domain()), this.scales.y.domain(L.domain()), this.zoomTransform = h, this.zoomStateKey = `${h.x}_${h.y}_${h.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(t), this.renderWebglLayer();
+      const l = i.transform, x = l.rescaleX(this.scales.xOriginal), z = l.rescaleY(this.scales.yOriginal);
+      this.scales.x.domain(x.domain()), this.scales.y.domain(z.domain()), this.zoomTransform = l, this.zoomStateKey = `${l.x}_${l.y}_${l.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(), this.renderWebglLayer();
     }).on("end", () => {
-      this.visibleLabels = this.computeLabels(this.allDots), this.renderSvgLayer(t);
-    }), m = lt().on("point", ([i]) => {
-      var h;
-      let z;
-      i && (z = this.getClosestDot(i.x, i.y));
-      const L = this.selectedDot && !z || !this.selectedDot && z || ((h = this.selectedDot) == null ? void 0 : h.idx) !== (z == null ? void 0 : z.idx);
-      this.selectedDot = z ?? null, L && this.renderSvgLayer(t);
-    }), v = B({
+      this.visibleLabels = this.computeLabels(this.allDots), this.renderSvgLayer();
+    }), y = rt().on("point", ([i]) => {
+      var l;
+      let x;
+      i && (x = this.getClosestDot(i.x, i.y));
+      const z = this.selectedDot && !x || !this.selectedDot && x || ((l = this.selectedDot) == null ? void 0 : l.idx) !== (x == null ? void 0 : x.idx);
+      this.selectedDot = x ?? null, z && this.renderSvgLayer();
+    }), m = B({
       xScale: this.scales.x,
       yScale: this.scales.y
     }).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(K()).webglPlotArea(
       // only render the point series on the WebGL layer
-      j().series([o]).mapping((i) => i)
+      j().series([g]).mapping((i) => i)
     ).decorate((i) => {
-      const h = i.enter();
-      h && !this.svgLayerElement && (h.style("grid-template-columns", "0 auto 1fr auto 0"), h.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = h.select(".svg-plot-area.plot-area svg").node()), h.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(y).call(m);
+      const l = i.enter();
+      l && !this.svgLayerElement && (l.style("grid-template-columns", "0 auto 1fr auto 0"), l.style("grid-template-rows", "0 auto 1fr auto 0"), this.svgLayerElement = l.select(".svg-plot-area.plot-area svg").node()), l.select(".svg-plot-area.plot-area").attr("class", "svg-plot-area plot-area miplots-scatterplot-plot-area").call(o).call(y);
     });
     this.tools = {
-      webglChart: v,
-      zoom: y,
-      fillColor: g,
-      pointSeries: o
-    }, N(this.canvasNode).datum(e).style("position", "absolute").style("width", this.chartSizes.chartWidth + "px").style("height", this.chartSizes.chartHeight + "px").style("top", this.margins.top + "px").style("left", this.margins.left + "px");
+      webglChart: m,
+      zoom: o,
+      fillColor: r,
+      pointSeries: g
+    }, N(this.canvasNode).datum(t).style("position", "absolute").style("width", this.chartSizes.chartWidth + "px").style("height", this.chartSizes.chartHeight + "px").style("top", this.margins.top + "px").style("left", this.margins.left + "px");
   }
-  updateAes(t, e, s) {
-    this.tools !== null && (this.aesGetters = k(t, e, s), this.tools.fillColor.value((l) => {
-      const a = this.aesGetters.dotFill ?? O, r = W(a(l.idx));
-      return r[3] = !l.dimmed && A(l.x, l.y, this.polygons) ? 1 : 0.4, H(r, r);
+  updateAes(t, e) {
+    this.tools !== null && (this.aesGetters = k(this.dataFrame, t, e), this.tools.fillColor.value((s) => {
+      const n = this.aesGetters.dotFill ?? O, a = P(n(s.idx));
+      return a[3] = !s.dimmed && A(s.x, s.y, this.polygons) ? 1 : 0.4, W(a, a);
     }));
   }
   updatePointSize() {
@@ -239,62 +240,61 @@ class ie {
   updateByLasso() {
     var t;
     this.tools !== null && ((t = this.tools) == null || t.fillColor.value((e) => {
-      const s = this.aesGetters.dotFill ?? O, l = W(s(e.idx));
-      return l[3] = !e.dimmed && A(e.x, e.y, this.polygons) ? 1 : 0.4, H(l, l);
+      const s = this.aesGetters.dotFill ?? O, n = P(s(e.idx));
+      return n[3] = !e.dimmed && A(e.x, e.y, this.polygons) ? 1 : 0.4, W(n, n);
     }), this.renderWebglLayer());
   }
   createQuadtree(t) {
-    const e = new rt(t.length, 512);
+    const e = new lt(t.length, 512);
     for (let s = 0; s < t.length; s++)
       e.add(t[s].x, t[s].y);
     return e.finish();
   }
   getClosestDot(t, e) {
-    var s, l;
+    var s, n;
     const a = (s = this.tools) == null ? void 0 : s.qt;
     if (!a) return null;
-    const r = this.allDots, u = this.scales.x.invert(t), p = this.scales.y.invert(e), f = 1 / (((l = this.zoomTransform) == null ? void 0 : l.k) || 1), x = u - f, d = u + f, n = p - f, g = p + f, o = a.range(x, n, d, g), y = o.reduce((m, v) => {
-      const i = r[v], h = this.scales.x(i.x) - t, z = this.scales.y(i.y) - e, L = Math.hypot(h, z);
-      return (m === null || L < m.distance) && (m.index = v, m.distance = L), m;
+    const d = this.allDots, u = this.scales.x.invert(t), p = this.scales.y.invert(e), f = 1 / (((n = this.zoomTransform) == null ? void 0 : n.k) || 1), v = u - f, c = u + f, r = p - f, g = p + f, o = a.range(v, r, c, g), y = o.reduce((m, i) => {
+      const l = d[i], x = this.scales.x(l.x) - t, z = this.scales.y(l.y) - e, C = Math.hypot(x, z);
+      return (m === null || C < m.distance) && (m.index = i, m.distance = C), m;
     }, {
       index: -1,
       distance: 1 / 0
     });
-    return o.length === 0 || y.index === -1 ? null : r[y.index];
+    return o.length === 0 || y.index === -1 ? null : d[y.index];
   }
   updateDots(t) {
     this.tools !== null && (N(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = this.createQuadtree(t), this.allDots = t);
   }
-  render(t, e, s, l, a, r, u, p, f, x, d, n, g) {
-    if (this.tools === null)
+  render(t, e, s, n, a, d, u, p, f, v, c, r, g) {
+    if (this.dataFrame = t, this.tools === null)
       this.initSettings(
-        t,
         a,
         s,
-        r,
+        d,
         f,
         p,
-        x
+        v
       );
     else {
       const { title: o, legend: y, size: m } = s;
-      this.updateChartSizes(m), this.updateLegendSize(y, f, x, p), this.createMainTitle(o), this.updateMargins(), this.updateAes(t, f, p);
+      this.updateChartSizes(m), this.updateLegendSize(y, f, v, p), this.createMainTitle(o), this.updateMargins(), this.updateAes(f, p);
     }
-    this.onPolygonUpdateOutside = d, this.onTooltipHintSwitch = n, this.onLassoControlsStateUpdate = g, this.allDots !== a && (this.updateDots(a), this.visibleLabels = this.computeLabels(a)), this.notCalculatedProps = {
+    this.onPolygonUpdateOutside = c, this.onTooltipHintSwitch = r, this.onLassoControlsStateUpdate = g, this.allDots !== a && (this.updateDots(a), this.visibleLabels = this.computeLabels(a)), this.notCalculatedProps = {
       settingsId: e,
       chartSettings: s,
-      keyColumn: l,
+      keyColumn: n,
       dotsByGrouping: u,
       layers: p
-    }, this.renderWebglLayer(), this.renderSvgLayer(t);
+    }, this.renderWebglLayer(), this.renderSvgLayer();
   }
   renderWebglLayer() {
     var t, e;
     (t = this.tools) != null && t.webglChart && N(this.canvasNode).call((e = this.tools) == null ? void 0 : e.webglChart);
   }
-  renderSvgLayer(t) {
-    var e;
-    const s = {
+  renderSvgLayer() {
+    var t;
+    const e = {
       settingsId: this.notCalculatedProps.settingsId,
       chartSettings: this.notCalculatedProps.chartSettings,
       keyColumn: this.notCalculatedProps.keyColumn,
@@ -316,32 +316,32 @@ class ie {
       onTooltipHintSwitch: this.onTooltipHintSwitch,
       onLassoControlsStateUpdate: this.onLassoControlsStateUpdate
     };
-    this.svgLayerComponent = /* @__PURE__ */ b.jsx(nt, { dataFrame: t, children: /* @__PURE__ */ b.jsx(at, { ...s }) }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
+    this.svgLayerComponent = /* @__PURE__ */ b.jsx(nt, { dataFrame: this.dataFrame, children: /* @__PURE__ */ b.jsx(at, { ...e }) }), (t = this.reactRoot) == null || t.render(this.svgLayerComponent);
   }
   renderError(t) {
     var e;
     (e = this.reactRoot) == null || e.render(/* @__PURE__ */ b.jsx(Y, { message: t }));
   }
   computeLabels(t) {
-    const e = new G("16px Manrope"), s = et(this.chartSizes.chartWidth, this.chartSizes.chartHeight), l = [];
+    const e = new G("16px Manrope"), s = et(this.chartSizes.chartWidth, this.chartSizes.chartHeight), n = [];
     for (let a = 0; a < t.length; a++) {
-      const r = t[a];
-      if (r.label == null)
+      const d = t[a];
+      if (d.label == null)
         continue;
-      const u = String(r.label), p = e.getTextMetrics(u), f = this.scales.x(r.x), x = this.scales.y(r.y), d = p.width, n = p.actualBoundingBoxAscent + p.actualBoundingBoxDescent, g = 10, o = s(f, x, d, n, g);
-      o && l.push({
+      const u = String(d.label), p = e.getTextMetrics(u), f = this.scales.x(d.x), v = this.scales.y(d.y), c = p.width, r = p.actualBoundingBoxAscent + p.actualBoundingBoxDescent, g = 10, o = s(f, v, c, r, g);
+      o && n.push({
         x: f,
-        y: x,
-        dot: r,
+        y: v,
+        dot: d,
         name: u,
-        width: d,
-        height: n,
+        width: c,
+        height: r,
         padding: g,
         xPosition: o[0],
         yPosition: o[1]
       });
     }
-    return l;
+    return n;
   }
   updateLabelsPosition(t) {
     for (let e = 0; e < t.length; e++) {
@@ -351,6 +351,6 @@ class ie {
   }
 }
 export {
-  ie as default
+  oe as default
 };
 //# sourceMappingURL=ChartRenderer.js.map