@milaboratories/miplots4 1.0.170 → 1.0.172

package/README.md

@@ -4,14 +4,19 @@
 
 ### Install ###
 
-`npm i @milaboratories/miplots4 --save`
+`pnpm install`
 
 ### Build and install locally ###
 
-`npm run build && npm pack`
+`pnpm run build && pnpm do-pack`
 
-This command will generate a .tgz file at the directory's root like this ./milaboratories-miplots4-1.0.0.tgz
+This command will generate a .tgz file at the directory's root: ./package.tgz
 
-In the directory of the project that you want to test the MiPlots package, just run an `npm install` with the path to this .tgz file:
-
-`npm i /abs/path/to/the/file/milaboratory-miplots4-1.0.0.tgz --save`
+It can be installed in another project using 'overrides' in package.json:
+```
+"pnpm": {
+    "overrides": {
+        "@milaboratories/miplots4": "/path/to/folder/visualizations/packages/miplots4/package.tgz"
+     }
+}
+```

package/dist/_virtual/client.js

@@ -1,4 +1,4 @@
-import { __require as r } from "../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/client.js";
+import { __require as r } from "../node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/client.js";
 var i = r();
 export {
   i as c

package/dist/_virtual/client2.js

@@ -1,5 +1,5 @@
-var e = {};
+var e = { exports: {} };
 export {
-  e as __exports
+  e as __module
 };
 //# sourceMappingURL=client2.js.map

package/dist/_virtual/index.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
-import { __require as t } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js";
+import { __require as t } from "../node_modules/.pnpm/react@19.2.4/node_modules/react/index.js";
 var e = t();
 const s = /* @__PURE__ */ r(e);
 export {

package/dist/_virtual/index2.js

@@ -1,4 +1,4 @@
-import { __require as r } from "../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/index.js";
+import { __require as r } from "../node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/index.js";
 var o = r();
 export {
   o as r

package/dist/_virtual/jsx-runtime.js

@@ -1,4 +1,4 @@
-import { __require as r } from "../node_modules/.pnpm/react@18.3.1/node_modules/react/jsx-runtime.js";
+import { __require as r } from "../node_modules/.pnpm/react@19.2.4/node_modules/react/jsx-runtime.js";
 var i = r();
 export {
   i as j

package/dist/_virtual/react-dom-client.development.js

@@ -0,0 +1,5 @@
+var e = {};
+export {
+  e as __exports
+};
+//# sourceMappingURL=react-dom-client.development.js.map

package/dist/_virtual/react-dom-client.development.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-dom-client.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-dom-client.production.js

@@ -0,0 +1,5 @@
+var o = {};
+export {
+  o as __exports
+};
+//# sourceMappingURL=react-dom-client.production.js.map

package/dist/_virtual/react-dom-client.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-dom-client.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/{react-dom-server-legacy.browser.production.min.js → react-dom-server-legacy.browser.production.js}

@@ -2,4 +2,4 @@ var r = {};
 export {
   r as __exports
 };
-//# sourceMappingURL=react-dom-server-legacy.browser.production.min.js.map
+//# sourceMappingURL=react-dom-server-legacy.browser.production.js.map

package/dist/_virtual/react-dom-server-legacy.browser.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-dom-server-legacy.browser.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-dom-server.browser.production.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=react-dom-server.browser.production.js.map

package/dist/_virtual/react-dom-server.browser.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-dom-server.browser.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-dom.production.js

@@ -0,0 +1,5 @@
+var o = {};
+export {
+  o as __exports
+};
+//# sourceMappingURL=react-dom.production.js.map

package/dist/_virtual/react-dom.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-dom.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react-jsx-runtime.production.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=react-jsx-runtime.production.js.map

package/dist/_virtual/react-jsx-runtime.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-jsx-runtime.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/react.production.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=react.production.js.map

package/dist/_virtual/react.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/scheduler.production.js

@@ -0,0 +1,5 @@
+var r = {};
+export {
+  r as __exports
+};
+//# sourceMappingURL=scheduler.production.js.map

package/dist/_virtual/scheduler.production.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduler.production.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/_virtual/server.browser.js

@@ -1,4 +1,4 @@
-import { __require as r } from "../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/server.browser.js";
+import { __require as r } from "../node_modules/.pnpm/react-dom@19.2.4_react@19.2.4/node_modules/react-dom/server.browser.js";
 var s = r();
 export {
   s

package/dist/bubble/ChartRenderer.js

@@ -1,89 +1,90 @@
 var W = Object.defineProperty;
 var K = (c, t, e) => t in c ? W(c, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[t] = e;
-var p = (c, t, e) => K(c, typeof t != "symbol" ? t + "" : t, e);
+var d = (c, t, e) => K(c, typeof t != "symbol" ? t + "" : t, e);
 import { j as N } from "../_virtual/jsx-runtime.js";
 import { c as P } from "../_virtual/client.js";
 import { Error as v } from "../common/Error.js";
-import { DataFrameProvider as F } from "../common/useDataFrame.js";
-import { DEFAULT_HEIGHT as H, DEFAULT_WIDTH as b, TITLE_LINE_HEIGHT as j, TITLE_MARGIN as k, MIN_LEGEND_GRADIENT_HEIGHT as B, MAX_LEGEND_GRADIENT_HEIGHT as V } from "../constants.js";
+import { DataFrameProvider as j } from "../common/useDataFrame.js";
+import { DEFAULT_HEIGHT as H, DEFAULT_WIDTH as w, TITLE_LINE_HEIGHT as B, TITLE_MARGIN as F, MIN_LEGEND_GRADIENT_HEIGHT as k, MAX_LEGEND_GRADIENT_HEIGHT as V } from "../constants.js";
 import { arrangeLegendParts as X } from "../utils/arrangeLegendParts.js";
-import { getChartEdgeSides as U } from "../utils/getChartEdgeSides.js";
-import { getContinuousLegendTicks as Y } from "../utils/getContinuousLegendTicks.js";
-import { TextMeasurer as q } from "../utils/TextMeasurer/TextMeasurer.js";
-import { ChartsGroup as J } from "./components/ChartsGroup.js";
-import { MIN_MARGIN as L, TITLE_LINE as G, LEGEND_OFFSET as O, CHART_SIDE_ELEMENTS as Q, MIN_PADDING as Z } from "./constants.js";
-import { calculateChartSideElementSizes as $ } from "./utils/calculateChartSideElementSizes.js";
-import { calculateSideElementsBBoxes as tt } from "./utils/calculateSideElementsBBoxes.js";
-import { calculateCaptionTails as et } from "./utils/calculateCaptionTails.js";
+import { getSizeLegendItem as U } from "../utils/getSizeLegendItem.js";
+import { getChartEdgeSides as Y } from "../utils/getChartEdgeSides.js";
+import { getContinuousLegendTicks as q } from "../utils/getContinuousLegendTicks.js";
+import { TextMeasurer as J } from "../utils/TextMeasurer/TextMeasurer.js";
+import { ChartsGroup as O } from "./components/ChartsGroup.js";
+import { MIN_MARGIN as T, TITLE_LINE as G, LEGEND_OFFSET as Q, CHART_SIDE_ELEMENTS as Z, MIN_PADDING as $ } from "./constants.js";
+import { calculateChartSideElementSizes as tt } from "./utils/calculateChartSideElementSizes.js";
+import { calculateSideElementsBBoxes as et } from "./utils/calculateSideElementsBBoxes.js";
+import { calculateCaptionTails as st } from "./utils/calculateCaptionTails.js";
 import M from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/ordinal.js";
-import w from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
-import { sqrt as I } from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/pow.js";
-const st = (c, t) => {
-  const e = Math.min(...t), s = Math.max(...t);
-  if (e === s) {
-    const r = c % 2 === 0 ? [] : [e];
-    for (let d = 1; d < c / 2 + 1; d++)
-      r.push(e + d), r.unshift(e - d);
-    return r;
+import I from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
+import { sqrt as b } from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/pow.js";
+const it = (c, t) => {
+  const e = Math.min(...t), i = Math.max(...t);
+  if (e === i) {
+    const a = c % 2 === 0 ? [] : [e];
+    for (let p = 1; p < c / 2 + 1; p++)
+      a.push(e + p), a.unshift(e - p);
+    return a;
   }
   if (c < 2)
-    return [e, s];
-  const l = (s - e) / (c - 1), i = [];
-  for (let r = 0; r < c - 1; r++)
-    i.push(e + l * r);
-  return i.push(s), i;
+    return [e, i];
+  const r = (i - e) / (c - 1), s = [];
+  for (let a = 0; a < c - 1; a++)
+    s.push(e + r * a);
+  return s.push(i), s;
 };
-function it(c, t, e) {
-  let s = e;
-  return c && (c.colorRange && (s = c.colorRange), c.method === "standardScaling" && (s = [-2, 2]), c.method === "meanNormalization" && (s = [-0.75, 0.75])), st(t, s);
+function ot(c, t, e) {
+  let i = e;
+  return c && (c.colorRange && (i = c.colorRange), c.method === "standardScaling" && (i = [-2, 2]), c.method === "meanNormalization" && (i = [-0.75, 0.75])), it(t, i);
 }
-class At {
+class Lt {
   constructor() {
-    p(this, "reactRoot", null);
-    p(this, "parentNode", null);
-    p(this, "rootNode", null);
-    p(this, "component", /* @__PURE__ */ N.jsx(N.Fragment, {}));
-    p(this, "chartsDimensions", {});
-    p(this, "chartSizes", {
-      chartWidth: b,
+    d(this, "reactRoot", null);
+    d(this, "parentNode", null);
+    d(this, "rootNode", null);
+    d(this, "component", /* @__PURE__ */ N.jsx(N.Fragment, {}));
+    d(this, "chartsDimensions", {});
+    d(this, "chartSizes", {
+      chartWidth: w,
       // width of single chart
       chartHeight: H,
       // height of single chart
-      chartsWidth: b,
+      chartsWidth: w,
       // width of all charts in charts row
       chartsHeight: H,
       // width of all charts in charts column, without axes
-      totalWidth: b,
+      totalWidth: w,
       // width of all charts in charts row, plus left axis, plus legend
       totalHeight: H
       // width of all charts in charts height, plus bottom axis, plus top title
     });
-    p(this, "margins", {
-      top: L,
-      bottom: L,
-      left: L,
-      right: L
+    d(this, "margins", {
+      top: T,
+      bottom: T,
+      left: T,
+      right: T
     });
-    p(this, "captionsSizes", {
+    d(this, "captionsSizes", {
       xAxisCaptions: 100,
       yAxisCaptions: 100,
       xCaptionTail: 0,
       yCaptionTail: 0
     });
-    p(this, "labelAngles", {
+    d(this, "labelAngles", {
       xAxisLabels: 0,
       yAxisLabels: 0
     });
-    p(this, "columnsCount", 1);
-    p(this, "rowsCount", 1);
-    p(this, "scales", {
+    d(this, "columnsCount", 1);
+    d(this, "rowsCount", 1);
+    d(this, "scales", {
       x: M().domain(["null"]).range([1]),
       y: M().domain(["null"]).range([1])
     });
-    p(this, "step", { x: 10, y: 10 });
-    p(this, "colorScale", w().domain([0, 1]).range(["white", "black"]));
-    p(this, "sizeScale", I().domain([0, 1]).range([3, 20]));
-    p(this, "legend", {
+    d(this, "step", { x: 10, y: 10 });
+    d(this, "colorScale", I().domain([0, 1]).range(["white", "black"]));
+    d(this, "sizeScale", b().domain([0, 1]).range([3, 20]));
+    d(this, "legend", {
       width: 0,
       height: 0,
       items: []
@@ -101,170 +102,166 @@ class At {
   }
   updateMargins(t) {
     this.margins = {
-      top: t.show ? j + k * 2 : L,
-      bottom: L,
-      left: L,
+      top: t.show ? B + F * 2 : T,
+      bottom: T,
+      left: T,
       right: this.legend.width
     }, 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, e, s, l) {
+  updateLegendSize(t, e, i, r) {
     if (!t.show) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const i = [], r = Math.min(
-      Math.max(this.chartSizes.chartHeight, B),
+    const s = [], a = Math.min(
+      Math.max(this.chartSizes.chartHeight, k),
       V
-    ), d = Math.max(this.chartSizes.chartHeight, r), x = { width: 0, height: 0, left: 0, top: 0 }, h = this.colorScale.domain(), g = Y(this.colorScale, [
+    ), p = Math.max(this.chartSizes.chartHeight, a), S = { width: 0, height: 0, left: 0, top: 0 }, h = this.colorScale.domain(), u = q(this.colorScale, [
       h[0],
       h[h.length - 1]
-    ]), C = e.label ?? e.value, S = w([g[0], g[g.length - 1]], [r, 0]);
-    i.push({
+    ]), A = e.label ?? e.value, x = I([u[0], u[u.length - 1]], [a, 0]);
+    s.push({
       id: "colorValue",
       type: "continuous",
       scale: this.colorScale,
-      tickPositionScale: S,
-      values: g,
-      title: C,
-      ...x
+      tickPositionScale: x,
+      values: u,
+      title: A,
+      ...S
     });
-    const u = s.label ?? s.value, A = this.sizeScale.ticks(3), f = this.sizeScale.tickFormat(3), m = A.reduce((n, a) => (n[String(a)] = f(a), n), {});
-    if (i.push({
-      id: "sizeValue",
-      type: "size",
-      title: u,
-      scale: this.sizeScale,
-      values: A,
-      labels: m,
-      ...x
-    }), !i.length) {
+    const m = U({
+      columnName: i,
+      domain: this.sizeScale.domain(),
+      range: this.sizeScale.range()
+    });
+    if (s.push({ ...m, id: "sizeValue" }), !s.length) {
       this.legend = { width: 0, height: 0, items: [] };
       return;
     }
-    const y = X(i, d, r), E = y.reduce((n, a) => Math.max(n, a.left + a.width), 0) + 2 * O, o = this.chartsDimensions[l[0]].padding;
+    const E = X(s, p, a), l = E.reduce((L, C) => Math.max(L, C.left + C.width), 0) + 2 * Q, y = this.chartsDimensions[r[0]].padding;
     this.legend = {
-      width: E,
-      height: d + o.top,
-      items: y
+      width: l,
+      height: p + y.top,
+      items: E
     };
   }
-  updateCaptionsSize(t, e, s) {
-    const l = new q("bold 14px Arial"), { xKeys: i, yKeys: r, xLabels: d, yLabels: x } = t.meta;
+  updateCaptionsSize(t, e, i) {
+    const r = new J("bold 14px Arial"), { xKeys: s, yKeys: a, xLabels: p, yLabels: S } = t.meta;
     this.labelAngles = {
       xAxisLabels: e.axisLabelsAngle,
-      yAxisLabels: s.axisLabelsAngle
+      yAxisLabels: i.axisLabelsAngle
     };
-    let h = 0, g = 0;
-    for (const f of i) {
-      const m = l.getTextWidth(d[f]);
-      m > h && (h = m);
+    let h = 0, u = 0;
+    for (const f of s) {
+      const l = r.getTextWidth(p[f]);
+      l > h && (h = l);
     }
-    for (const f of r) {
-      const m = l.getTextWidth(x[f]);
-      m > g && (g = m);
+    for (const f of a) {
+      const l = r.getTextWidth(S[f]);
+      l > u && (u = l);
     }
-    const { xCaptionTail: C, yCaptionTail: S } = et(
+    const { xCaptionTail: A, yCaptionTail: x } = st(
       this.labelAngles,
       this.step,
       t,
-      l
-    ), u = this.labelAngles.xAxisLabels / 180 * Math.PI, A = this.labelAngles.yAxisLabels / 180 * Math.PI;
+      r
+    ), m = this.labelAngles.xAxisLabels / 180 * Math.PI, E = this.labelAngles.yAxisLabels / 180 * Math.PI;
     this.captionsSizes = {
-      xCaptionTail: C,
-      yCaptionTail: S,
-      xAxisCaptions: h * Math.sin(u) || G,
-      yAxisCaptions: g * Math.sin(A) || G
+      xCaptionTail: A,
+      yCaptionTail: x,
+      xAxisCaptions: h * Math.sin(m) || G,
+      yAxisCaptions: u * Math.sin(E) || G
     };
   }
-  updateChartDimensions(t, e, s, l) {
-    const i = t.length, r = Math.min(e.nRows ?? i, i), d = Math.min(e.nCols ?? i, i);
-    this.columnsCount = e.nRows ? Math.ceil(i / r) : d, this.rowsCount = Math.ceil(i / this.columnsCount), this.chartsDimensions = {};
-    let x = 0, h = 0;
-    t.forEach((S, u) => {
-      const A = u % this.columnsCount + 1, f = U(u, t.length, this.columnsCount, this.rowsCount), m = this.chartSizes.chartWidth, y = this.chartSizes.chartHeight, T = $(
-        s,
-        l,
+  updateChartDimensions(t, e, i, r) {
+    const s = t.length, a = Math.min(e.nRows ?? s, s), p = Math.min(e.nCols ?? s, s);
+    this.columnsCount = e.nRows ? Math.ceil(s / a) : p, this.rowsCount = Math.ceil(s / this.columnsCount), this.chartsDimensions = {};
+    let S = 0, h = 0;
+    t.forEach((x, m) => {
+      const E = m % this.columnsCount + 1, f = Y(m, t.length, this.columnsCount, this.rowsCount), l = this.chartSizes.chartWidth, y = this.chartSizes.chartHeight, L = tt(
+        i,
+        r,
         this.captionsSizes,
         f,
         t,
         this.step.x,
         this.step.y
       );
-      function E(R) {
+      function C(R) {
         return Math.max(
-          Q[R].reduce((_, D) => _ + T[R][D], 0),
-          Z
+          Z[R].reduce((_, D) => _ + L[R][D], 0),
+          $
         );
       }
       const o = {
-        left: E("left"),
-        right: E("right"),
-        top: E("top"),
-        bottom: E("bottom")
+        left: C("left"),
+        right: C("right"),
+        top: C("top"),
+        bottom: C("bottom")
       };
       o.left < this.captionsSizes.xCaptionTail && (o.left = this.captionsSizes.xCaptionTail), o.bottom < this.captionsSizes.yCaptionTail && (o.bottom = this.captionsSizes.yCaptionTail);
-      const n = tt(T, m, y), a = m + o.left + o.right, z = y + o.top + o.bottom;
-      this.chartsDimensions[S] = {
-        left: x,
+      const n = et(L, l, y), g = l + o.left + o.right, z = y + o.top + o.bottom;
+      this.chartsDimensions[x] = {
+        left: S,
         top: h,
-        inner: { width: m, height: y },
-        outer: { width: a, height: z },
+        inner: { width: l, height: y },
+        outer: { width: g, height: z },
         padding: o,
         sideElementBBoxes: n,
         chartEdgeSides: f
-      }, x += a, A === this.columnsCount && (x = 0, h += z);
+      }, S += g, E === this.columnsCount && (S = 0, h += z);
     });
-    const g = t.slice(0, this.columnsCount).reduce((S, u) => S + this.chartsDimensions[u].outer.width, 0), C = t.filter((S, u) => u % this.columnsCount === 0).reduce((S, u) => S + this.chartsDimensions[u].outer.height, 0);
-    this.chartSizes.chartsWidth = g, this.chartSizes.chartsHeight = C;
+    const u = t.slice(0, this.columnsCount).reduce((x, m) => x + this.chartsDimensions[m].outer.width, 0), A = t.filter((x, m) => m % this.columnsCount === 0).reduce((x, m) => x + this.chartsDimensions[m].outer.height, 0);
+    this.chartSizes.chartsWidth = u, this.chartSizes.chartsHeight = A;
   }
   updateChartsSizes(t, e) {
-    const { width: s, height: l, cellSize: i } = e;
-    i && (this.chartSizes.chartWidth = t.meta.xKeys.length * i, this.chartSizes.chartHeight = t.meta.yKeys.length * i), s && l && (this.chartSizes.chartWidth = s, this.chartSizes.chartHeight = l);
+    const { width: i, height: r, cellSize: s } = e;
+    s && (this.chartSizes.chartWidth = t.meta.xKeys.length * s, this.chartSizes.chartHeight = t.meta.yKeys.length * s), i && r && (this.chartSizes.chartWidth = i, this.chartSizes.chartHeight = r);
   }
   // update scales for cell positions, x and y for each facet
-  updateScales(t, e, s, l, i) {
-    const { width: r, height: d, cellSize: x } = e, { meta: h } = t, g = (o, n = {}) => [...o].sort(
-      (a, z) => s.sorting === "asc" ? (n[a] ?? a).localeCompare(n[z] ?? z, "en", { numeric: !0 }) : (n[z] ?? z).localeCompare(n[a] ?? a, "en", { numeric: !0 })
-    ), C = (o, n = {}) => [...o].sort(
-      (a, z) => l.sorting === "asc" ? (n[a] ?? a).localeCompare(n[z] ?? z, "en", { numeric: !0 }) : (n[z] ?? z).localeCompare(n[a] ?? a, "en", { numeric: !0 })
-    ), S = i.xGroup ? h.xGroupKeys : g(h.xGroupKeys), u = i.yGroup ? h.yGroupKeys : C(h.yGroupKeys), { xKeysByGroups: A, yKeysByGroups: f } = h, m = S.reduce((o, n) => (o = o.concat(g(A[n], h.xLabels)), o), []), y = u.reduce((o, n) => (o = o.concat(C(f[n], h.yLabels)), o), []);
-    x ? (this.step.x = x, this.step.y = x) : r && d && (this.step.x = r / m.length, this.step.y = d / y.length);
-    const T = new Array(m.length).fill(null).map((o, n) => n * this.step.x), E = new Array(y.length).fill(null).map((o, n) => n * this.step.y);
-    this.scales.x = M().domain(m).range(T), this.scales.y = M().domain(y).range(E);
+  updateScales(t, e, i, r, s) {
+    const { width: a, height: p, cellSize: S } = e, { meta: h } = t, u = (o, n = {}) => [...o].sort(
+      (g, z) => i.sorting === "asc" ? (n[g] ?? g).localeCompare(n[z] ?? z, "en", { numeric: !0 }) : (n[z] ?? z).localeCompare(n[g] ?? g, "en", { numeric: !0 })
+    ), A = (o, n = {}) => [...o].sort(
+      (g, z) => r.sorting === "asc" ? (n[g] ?? g).localeCompare(n[z] ?? z, "en", { numeric: !0 }) : (n[z] ?? z).localeCompare(n[g] ?? g, "en", { numeric: !0 })
+    ), x = s.xGroup ? h.xGroupKeys : u(h.xGroupKeys), m = s.yGroup ? h.yGroupKeys : A(h.yGroupKeys), { xKeysByGroups: E, yKeysByGroups: f } = h, l = x.reduce((o, n) => (o = o.concat(u(E[n], h.xLabels)), o), []), y = m.reduce((o, n) => (o = o.concat(A(f[n], h.yLabels)), o), []);
+    S ? (this.step.x = S, this.step.y = S) : a && p && (this.step.x = a / l.length, this.step.y = p / y.length);
+    const L = new Array(l.length).fill(null).map((o, n) => n * this.step.x), C = new Array(y.length).fill(null).map((o, n) => n * this.step.y);
+    this.scales.x = M().domain(l).range(L), this.scales.y = M().domain(y).range(C);
   }
-  updateAesScale(t, e, s, l) {
-    this.colorScale = w().domain(it(l, t.colorsList.length, s)).range(t.colorsList), this.sizeScale = I(e, [t.minRadius, t.maxRadius]);
+  updateAesScale(t, e, i, r) {
+    this.colorScale = I().domain(ot(r, t.colorsList.length, i)).range(t.colorsList), this.sizeScale = b(e, [t.minRadius, t.maxRadius]);
   }
-  render(t, e, s, l, i, r, d, x, h, g, C, S) {
-    var a;
-    const { meta: u, facets: A, meta: { facetKeys: f } } = i, { valueExtent: m } = u, { xAxis: y, yAxis: T, title: E, size: o } = s;
-    this.updateChartsSizes(i, o), this.updateAesScale(h, m.sizeValue, m.colorValue, x), this.updateScales(i, o, s.xAxis, s.yAxis, S), this.updateCaptionsSize(i, y, T), this.updateChartDimensions(f, l, y, T), this.updateLegendSize(s.legend, r, d, f), this.updateMargins(E);
-    const n = /* @__PURE__ */ N.jsx(F, { dataFrame: t, children: /* @__PURE__ */ N.jsx(
-      J,
+  render(t, e, i, r, s, a, p, S, h, u, A, x) {
+    var g;
+    const { meta: m, facets: E, meta: { facetKeys: f } } = s, { valueExtent: l } = m, { xAxis: y, yAxis: L, title: C, size: o } = i;
+    this.updateChartsSizes(s, o), this.updateAesScale(h, l.sizeValue, l.colorValue, S), this.updateScales(s, o, i.xAxis, i.yAxis, x), this.updateCaptionsSize(s, y, L), this.updateChartDimensions(f, r, y, L), this.updateLegendSize(i.legend, a, p, f), this.updateMargins(C);
+    const n = /* @__PURE__ */ N.jsx(j, { dataFrame: t, children: /* @__PURE__ */ N.jsx(
+      O,
       {
         aes: h,
         captionsSizes: this.captionsSizes,
-        cellsMeta: u,
+        cellsMeta: m,
         columnsCount: this.columnsCount,
         chartsDimensions: this.chartsDimensions,
-        chartSettings: s,
+        chartSettings: i,
         chartSizes: this.chartSizes,
         sizeScale: this.sizeScale,
         colorScale: this.colorScale,
         facetKeys: f,
-        facetSettings: l,
-        groupedCells: A,
+        facetSettings: r,
+        groupedCells: E,
         labelAngles: this.labelAngles,
         legend: this.legend,
         margins: this.margins,
         scales: this.scales,
         settingsId: e,
         step: this.step,
-        getCellTooltip: g,
-        onTooltipHintSwitch: C
+        getCellTooltip: u,
+        onTooltipHintSwitch: A
       }
     ) });
-    this.component = n, (a = this.reactRoot) == null || a.render(n);
+    this.component = n, (g = this.reactRoot) == null || g.render(n);
   }
   renderError(t) {
     var e;
@@ -272,6 +269,6 @@ class At {
   }
 }
 export {
-  At as default
+  Lt as default
 };
 //# sourceMappingURL=ChartRenderer.js.map