@milaboratories/miplots4 1.0.171 → 1.0.172
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bubble/ChartRenderer.js +143 -146
- package/dist/bubble/ChartRenderer.js.map +1 -1
- package/dist/dendro/ChartRenderer.js +175 -174
- package/dist/dendro/ChartRenderer.js.map +1 -1
- package/dist/scatterplot/ChartRenderer.js +149 -152
- package/dist/scatterplot/ChartRenderer.js.map +1 -1
- package/dist/scatterplot-umap/ChartRenderer.js +152 -155
- package/dist/scatterplot-umap/ChartRenderer.js.map +1 -1
- package/dist/utils/arrangeLegendParts.js +35 -35
- package/dist/utils/arrangeLegendParts.js.map +1 -1
- package/dist/utils/getContinuousLegendTicks.js +5 -8
- package/dist/utils/getContinuousLegendTicks.js.map +1 -1
- package/dist/utils/getSizeLegendItem.d.ts +3 -0
- package/dist/utils/getSizeLegendItem.js +15 -0
- package/dist/utils/getSizeLegendItem.js.map +1 -0
- package/dist/utils/numberFormat.d.ts +1 -0
- package/dist/utils/numberFormat.js +9 -4
- package/dist/utils/numberFormat.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
var
|
|
2
|
-
var X = (y, t, e) => t in y ?
|
|
1
|
+
var B = Object.defineProperty;
|
|
2
|
+
var X = (y, t, e) => t in y ? B(y, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : y[t] = e;
|
|
3
3
|
var h = (y, t, e) => X(y, typeof t != "symbol" ? t + "" : t, e);
|
|
4
4
|
import { j as N } from "../_virtual/jsx-runtime.js";
|
|
5
5
|
import K from "../node_modules/.pnpm/@d3fc_d3fc-chart@5.1.9_d3-array@3.2.4_d3-path@3.1.0_d3-scale-chromatic@3.1.0_d3-scale@4.0.2_d_kyhwsugamw24x7v3obvyiw5jfe/node_modules/@d3fc/d3fc-chart/src/cartesian.js";
|
|
6
|
-
import { seriesWebglPoint as Y, seriesSvgMulti as
|
|
6
|
+
import { seriesWebglPoint as Y, seriesSvgMulti as k, seriesWebglMulti as j } from "@d3fc/d3fc-series";
|
|
7
7
|
import $ from "../node_modules/.pnpm/d3-zoom@3.0.0/node_modules/d3-zoom/src/zoom.js";
|
|
8
|
-
import { identity as
|
|
9
|
-
import { c as
|
|
10
|
-
import { Error as
|
|
11
|
-
import { BLACK as
|
|
12
|
-
import { splitTextByWidth as
|
|
13
|
-
import { MIN_MARGIN as
|
|
8
|
+
import { identity as q } from "../node_modules/.pnpm/d3-zoom@3.0.0/node_modules/d3-zoom/src/transform.js";
|
|
9
|
+
import { c as Q } from "../_virtual/client.js";
|
|
10
|
+
import { Error as Z } from "../common/Error.js";
|
|
11
|
+
import { BLACK as F, DEFAULT_HEIGHT as E, DEFAULT_WIDTH as w, TITLE_LINE_HEIGHT as J, MIN_LEGEND_GRADIENT_HEIGHT as tt, MAX_LEGEND_GRADIENT_HEIGHT as et, MAX_SHOWN_UNIQUE_VALUES_IN_LABELS as it, TITLE_MARGIN as st } from "../constants.js";
|
|
12
|
+
import { splitTextByWidth as ot } from "../utils/splitTextByWidth.js";
|
|
13
|
+
import { MIN_MARGIN as v, DEFAULT_DOT_AES as G } from "../scatterplot/constants.js";
|
|
14
14
|
import { createAesGetter as H } from "../scatterplot/utils/createAesGetter.js";
|
|
15
|
-
import { getTicksAndFormat as
|
|
16
|
-
import { createLabelPositioner as
|
|
17
|
-
import { isContinuousAes as
|
|
15
|
+
import { getTicksAndFormat as at } from "../scatterplot/utils/getTicksAndFormat.js";
|
|
16
|
+
import { createLabelPositioner as nt } from "../scatterplot/utils/getVisibleLabels.js";
|
|
17
|
+
import { isContinuousAes as A } from "../types/common.js";
|
|
18
18
|
import "../types/discrete.js";
|
|
19
19
|
import "../types/scatterplot.js";
|
|
20
20
|
import "../types/heatmap.js";
|
|
21
21
|
import "../types/dendro.js";
|
|
22
22
|
import "../types/histogram.js";
|
|
23
23
|
import "../types/bubble.js";
|
|
24
|
-
import { getContinuousColorScale as
|
|
25
|
-
import { getContinuousLegendTicks as
|
|
26
|
-
import { TextMeasurer as
|
|
27
|
-
import { SVGLayer as
|
|
28
|
-
import { PADDINGS as D, TITLE_LINE as I, LEGEND_OFFSET as
|
|
24
|
+
import { getContinuousColorScale as rt } from "../utils/getContinuousColorScale.js";
|
|
25
|
+
import { getContinuousLegendTicks as lt } from "../utils/getContinuousLegendTicks.js";
|
|
26
|
+
import { TextMeasurer as R } from "../utils/TextMeasurer/TextMeasurer.js";
|
|
27
|
+
import { SVGLayer as ht } from "./components/SVGLayer.js";
|
|
28
|
+
import { PADDINGS as D, TITLE_LINE as I, LEGEND_OFFSET as ct } from "./constants.js";
|
|
29
29
|
import "../node_modules/.pnpm/@d3fc_d3fc-webgl@3.2.1_d3-scale@4.0.2_d3-shape@3.2.0/node_modules/@d3fc/d3fc-webgl/src/scale/scaleMapper.js";
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
import { DataFrameProvider as
|
|
34
|
-
import { DataFrame as
|
|
35
|
-
import { arrangeLegendParts as
|
|
36
|
-
import { stringToNumberRgba as W, getColorWithFakeOpacity as P, GET_BLACK as
|
|
37
|
-
import
|
|
38
|
-
import
|
|
39
|
-
import
|
|
30
|
+
import dt from "../node_modules/.pnpm/@d3fc_d3fc-webgl@3.2.1_d3-scale@4.0.2_d3-shape@3.2.0/node_modules/@d3fc/d3fc-webgl/src/style/fillColor.js";
|
|
31
|
+
import mt from "../node_modules/.pnpm/@d3fc_d3fc-pointer@3.0.3_d3-dispatch@3.0.1_d3-selection@3.0.0/node_modules/@d3fc/d3fc-pointer/src/pointer.js";
|
|
32
|
+
import pt from "../node_modules/.pnpm/kdbush@4.0.2/node_modules/kdbush/index.js";
|
|
33
|
+
import { DataFrameProvider as gt } from "../common/useDataFrame.js";
|
|
34
|
+
import { DataFrame as ut } from "../DataFrame.js";
|
|
35
|
+
import { arrangeLegendParts as ft } from "../utils/arrangeLegendParts.js";
|
|
36
|
+
import { stringToNumberRgba as W, getColorWithFakeOpacity as P, GET_BLACK as _ } from "./colors.js";
|
|
37
|
+
import { getSizeLegendItem as yt } from "../utils/getSizeLegendItem.js";
|
|
38
|
+
import C from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/linear.js";
|
|
39
|
+
import U from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/log.js";
|
|
40
|
+
import b from "../node_modules/.pnpm/d3-selection@3.0.0/node_modules/d3-selection/src/select.js";
|
|
40
41
|
import St from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/ordinal.js";
|
|
41
42
|
import xt from "../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/symlog.js";
|
|
42
|
-
import
|
|
43
|
-
|
|
44
|
-
function V(y) {
|
|
43
|
+
import zt from "../node_modules/.pnpm/d3-polygon@3.0.1/node_modules/d3-polygon/src/contains.js";
|
|
44
|
+
function O(y) {
|
|
45
45
|
return y / 2.35 * (y / 2.35) * 64;
|
|
46
46
|
}
|
|
47
47
|
function M(y, t, e) {
|
|
48
|
-
return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 &&
|
|
48
|
+
return e.length === 0 ? !0 : e.some((i) => i.closed && i.points.length > 2 && zt(i.points, [y, t]));
|
|
49
49
|
}
|
|
50
|
-
function
|
|
51
|
-
const i = e.find((o) => o.type === "dots"),
|
|
50
|
+
function V(y, t, e) {
|
|
51
|
+
const i = e.find((o) => o.type === "dots"), a = e.find((o) => o.type === "curve");
|
|
52
52
|
return {
|
|
53
53
|
dotFill: H(y, t, (i == null ? void 0 : i.aes.dotFill) ?? G.color, "dotFill"),
|
|
54
54
|
dotSize: H(y, t, (i == null ? void 0 : i.aes.dotSize) ?? G.size, "dotSize"),
|
|
55
|
-
lineType: H(y, t, (
|
|
55
|
+
lineType: H(y, t, (a == null ? void 0 : a.aes.lineShape) ?? "solid", "lineShape")
|
|
56
56
|
};
|
|
57
57
|
}
|
|
58
|
-
class
|
|
58
|
+
class le {
|
|
59
59
|
constructor() {
|
|
60
60
|
h(this, "reactRoot", null);
|
|
61
61
|
h(this, "parentNode", null);
|
|
@@ -65,15 +65,15 @@ class he {
|
|
|
65
65
|
h(this, "svgLayerComponent", /* @__PURE__ */ N.jsx(N.Fragment, {}));
|
|
66
66
|
h(this, "aesGetters", {
|
|
67
67
|
dotSize: () => 2,
|
|
68
|
-
dotFill: () =>
|
|
68
|
+
dotFill: () => F,
|
|
69
69
|
lineType: () => "solid"
|
|
70
70
|
});
|
|
71
71
|
h(this, "tools", null);
|
|
72
72
|
h(this, "margins", {
|
|
73
|
-
top:
|
|
74
|
-
bottom:
|
|
75
|
-
left:
|
|
76
|
-
right:
|
|
73
|
+
top: v,
|
|
74
|
+
bottom: v,
|
|
75
|
+
left: v,
|
|
76
|
+
right: v
|
|
77
77
|
});
|
|
78
78
|
h(this, "chartSizes", {
|
|
79
79
|
chartWidth: w,
|
|
@@ -86,10 +86,10 @@ class he {
|
|
|
86
86
|
// width of all charts in charts height, plus bottom axis, plus top title
|
|
87
87
|
});
|
|
88
88
|
h(this, "scales", {
|
|
89
|
-
x:
|
|
90
|
-
y:
|
|
91
|
-
xOriginal:
|
|
92
|
-
yOriginal:
|
|
89
|
+
x: C().domain([0, 10]).range([0, w]),
|
|
90
|
+
y: C().domain([0, 10]).range([E, 0]),
|
|
91
|
+
xOriginal: C().domain([0, 10]).range([0, w]),
|
|
92
|
+
yOriginal: C().domain([0, 10]).range([E, 0])
|
|
93
93
|
});
|
|
94
94
|
h(this, "polygons", []);
|
|
95
95
|
h(this, "onPolygonUpdateOutside", () => {
|
|
@@ -111,7 +111,7 @@ class he {
|
|
|
111
111
|
h(this, "notCalculatedProps", {});
|
|
112
112
|
h(this, "allDots", []);
|
|
113
113
|
h(this, "visibleLabels", []);
|
|
114
|
-
h(this, "dataFrame", new
|
|
114
|
+
h(this, "dataFrame", new ut("", {}));
|
|
115
115
|
h(this, "onPolygonUpdate", (t) => {
|
|
116
116
|
this.polygons = t, this.updateByLasso();
|
|
117
117
|
const e = this.allDots.filter((i) => M(i.x, i.y, this.polygons)).map((i) => i.idx);
|
|
@@ -126,211 +126,208 @@ class he {
|
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
128
|
init(t) {
|
|
129
|
-
this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.canvasNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.parentNode.appendChild(this.canvasNode), this.reactRoot =
|
|
129
|
+
this.parentNode === null && (this.parentNode = t, this.rootNode = document.createElement("div"), this.canvasNode = document.createElement("div"), this.parentNode.appendChild(this.rootNode), this.parentNode.appendChild(this.canvasNode), this.reactRoot = Q.createRoot(this.rootNode));
|
|
130
130
|
}
|
|
131
131
|
updateChartSizes(t) {
|
|
132
132
|
(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]));
|
|
133
133
|
}
|
|
134
134
|
updateViewport(t, e, i) {
|
|
135
|
-
const
|
|
136
|
-
let { minX: o, minY:
|
|
137
|
-
if (t.lowerValue !== void 0 && (o = Math.max(o, t.lowerValue)), t.upperValue !== void 0 && (m = Math.min(m, t.upperValue)), e.lowerValue !== void 0 && (
|
|
138
|
-
const
|
|
139
|
-
if (
|
|
140
|
-
const
|
|
141
|
-
o =
|
|
135
|
+
const a = t.scale === "log" ? U() : C();
|
|
136
|
+
let { minX: o, minY: d, maxX: m, maxY: p } = i;
|
|
137
|
+
if (t.lowerValue !== void 0 && (o = Math.max(o, t.lowerValue)), t.upperValue !== void 0 && (m = Math.min(m, 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) {
|
|
138
|
+
const r = t.symmetricRange;
|
|
139
|
+
if (r >= o && r <= m) {
|
|
140
|
+
const g = Math.max(r - o, m - r);
|
|
141
|
+
o = r - g, m = r + g;
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
if (typeof e.symmetricRange < "u") {
|
|
145
|
-
const
|
|
146
|
-
if (
|
|
147
|
-
const
|
|
148
|
-
|
|
145
|
+
const r = e.symmetricRange;
|
|
146
|
+
if (r >= d && r <= p) {
|
|
147
|
+
const g = Math.max(r - d, p - r);
|
|
148
|
+
d = r - g, p = r + g;
|
|
149
149
|
}
|
|
150
150
|
}
|
|
151
|
-
const f = [0, this.chartSizes.chartWidth],
|
|
152
|
-
|
|
153
|
-
const S = e.scale === "log" ?
|
|
154
|
-
S.domain([
|
|
151
|
+
const f = [0, this.chartSizes.chartWidth], x = a.copy().domain([o, m]).range([D.LEFT, this.chartSizes.chartWidth - D.RIGHT]);
|
|
152
|
+
a.domain([x.invert(0), x.invert(this.chartSizes.chartWidth)]).range(f).nice(), this.scales.x.domain(a.domain()), this.scales.xOriginal.domain(a.domain());
|
|
153
|
+
const S = e.scale === "log" ? U() : C(), c = [this.chartSizes.chartHeight, 0], n = S.copy().domain([d, p]).range([this.chartSizes.chartHeight - D.BOTTOM, D.TOP]);
|
|
154
|
+
S.domain([n.invert(this.chartSizes.chartHeight), n.invert(0)]).range(c).nice(), this.scales.y.domain(S.domain()), this.scales.yOriginal.domain(S.domain());
|
|
155
155
|
}
|
|
156
156
|
updateCaptionsSize() {
|
|
157
|
-
const t = new
|
|
158
|
-
function e(
|
|
159
|
-
return Math.max(...
|
|
157
|
+
const t = new R("600 14px Arial");
|
|
158
|
+
function e(d) {
|
|
159
|
+
return Math.max(...d.map((m) => t.getTextWidth(m)));
|
|
160
160
|
}
|
|
161
|
-
const { ticks: i, format:
|
|
161
|
+
const { ticks: i, format: a } = at(this.scales.y, !1), o = e(i.map(a));
|
|
162
162
|
this.captionsSizes = {
|
|
163
163
|
xAxisCaptionsWidth: 20,
|
|
164
164
|
yAxisCaptionsWidth: o
|
|
165
165
|
};
|
|
166
166
|
}
|
|
167
167
|
createMainTitle(t) {
|
|
168
|
-
this.mainTitle =
|
|
168
|
+
this.mainTitle = ot(
|
|
169
169
|
t.name,
|
|
170
170
|
this.chartSizes.totalWidth - this.margins.left - this.margins.right,
|
|
171
171
|
20
|
|
172
172
|
);
|
|
173
173
|
}
|
|
174
174
|
updateMargins(t, e) {
|
|
175
|
-
const i =
|
|
175
|
+
const i = J * this.mainTitle.length, a = i > 0 ? i + st * 2 : 0;
|
|
176
176
|
this.margins = {
|
|
177
|
-
top: Math.max(
|
|
178
|
-
bottom:
|
|
179
|
-
left:
|
|
180
|
-
right: this.legend.width +
|
|
181
|
-
}, 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,
|
|
177
|
+
top: Math.max(a, v),
|
|
178
|
+
bottom: v + (t.hiddenLabels ? 0 : this.captionsSizes.xAxisCaptionsWidth) + I,
|
|
179
|
+
left: v + (e.hiddenLabels ? 0 : this.captionsSizes.yAxisCaptionsWidth) + I,
|
|
180
|
+
right: this.legend.width + v
|
|
181
|
+
}, 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, b(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");
|
|
182
182
|
}
|
|
183
|
-
updateLegendSize(t, e, i,
|
|
183
|
+
updateLegendSize(t, e, i, a) {
|
|
184
184
|
if (!t.show) {
|
|
185
185
|
this.legend = { width: 0, height: 0, items: [] };
|
|
186
186
|
return;
|
|
187
187
|
}
|
|
188
|
-
const o = [],
|
|
189
|
-
Math.max(this.chartSizes.chartHeight,
|
|
190
|
-
|
|
188
|
+
const o = [], d = { width: 0, height: 0, left: 0, top: 0 }, m = Math.min(
|
|
189
|
+
Math.max(this.chartSizes.chartHeight, tt),
|
|
190
|
+
et
|
|
191
191
|
), p = Math.max(this.chartSizes.chartHeight, m);
|
|
192
|
-
if (i.forEach((
|
|
193
|
-
const
|
|
194
|
-
if (
|
|
192
|
+
if (i.forEach((c) => {
|
|
193
|
+
const n = e[c.value];
|
|
194
|
+
if (n.usedAes.length === 0 || !n.aesMap)
|
|
195
195
|
return;
|
|
196
|
-
if (
|
|
197
|
-
console.warn(`Too many values for discrete legend (${
|
|
196
|
+
if (n.values.length > it) {
|
|
197
|
+
console.warn(`Too many values for discrete legend (${n.values.length})`);
|
|
198
198
|
return;
|
|
199
199
|
}
|
|
200
|
-
const
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
s === "dotFill" && (
|
|
200
|
+
const r = {};
|
|
201
|
+
n.values.forEach((u) => {
|
|
202
|
+
r[u] || (r[u] = { ...G }), n.usedAes.forEach((s) => {
|
|
203
|
+
s === "dotFill" && (r[u].color = n.aesMap(u, s) ?? F), s === "dotSize" && (r[u].size = Number(n.aesMap(u, s) ?? 3));
|
|
204
204
|
});
|
|
205
205
|
});
|
|
206
|
-
const
|
|
207
|
-
o.push({ ...
|
|
208
|
-
}),
|
|
209
|
-
if (
|
|
210
|
-
const { domain:
|
|
211
|
-
o.push({ ...
|
|
212
|
-
}
|
|
213
|
-
if (d.type === "dots" && R(d.aes.dotSize)) {
|
|
214
|
-
const { columnName: a, domain: n, range: u } = d.aes.dotSize, x = a.label ?? a.value, g = zt(n, u), s = g.ticks(3), l = g.tickFormat(3), L = s.reduce((v, F) => (v[String(F)] = l(F), v), {});
|
|
215
|
-
o.push({ ...c, id: a.value, type: "size", title: x, scale: g, values: s, labels: L });
|
|
206
|
+
const g = c.label ?? c.value, z = St().domain(n.values).range(n.values.map((u) => r[u]));
|
|
207
|
+
o.push({ ...d, id: c.value, type: "dots", title: g, scale: z, values: n.values, labels: n.labels });
|
|
208
|
+
}), a.forEach((c) => {
|
|
209
|
+
if (c.type === "dots" && A(c.aes.dotFill)) {
|
|
210
|
+
const { domain: n, range: r, columnName: g, type: z = "linear" } = c.aes.dotFill, u = g.label ?? g.value, s = rt(r, n, "linear"), l = (z === "log" ? xt() : C()).domain(n).range([m, 0]), L = lt(l, n);
|
|
211
|
+
o.push({ ...d, id: "dotFill", type: "continuous", title: u, scale: s, tickPositionScale: l, values: L });
|
|
216
212
|
}
|
|
213
|
+
c.type === "dots" && A(c.aes.dotSize) && o.push(yt(c.aes.dotSize));
|
|
217
214
|
}), !o.length) {
|
|
218
215
|
this.legend = { width: 0, height: 0, items: [] };
|
|
219
216
|
return;
|
|
220
217
|
}
|
|
221
|
-
const f =
|
|
218
|
+
const f = ft(o, p, m), S = f.reduce((c, n) => Math.max(c, n.left + n.width), 0) + ct;
|
|
222
219
|
this.legend = {
|
|
223
220
|
width: S,
|
|
224
221
|
height: p,
|
|
225
222
|
items: f
|
|
226
223
|
};
|
|
227
224
|
}
|
|
228
|
-
initSettings(t, e, i,
|
|
229
|
-
const { xAxis: p, yAxis: f, size:
|
|
230
|
-
this.updateChartSizes(
|
|
231
|
-
const
|
|
225
|
+
initSettings(t, e, i, a, o, d, m) {
|
|
226
|
+
const { xAxis: p, yAxis: f, size: x, title: S, legend: c } = e;
|
|
227
|
+
this.updateChartSizes(x), this.updateViewport(p, f, i), this.updateCaptionsSize(), this.updateLegendSize(c, a, d, o), this.createMainTitle(S), this.updateMargins(p, f), this.aesGetters = V(this.dataFrame, a, o);
|
|
228
|
+
const n = dt().data(t).value((s) => {
|
|
232
229
|
const l = W(this.aesGetters.dotFill(s.idx));
|
|
233
230
|
return l[3] = !s.dimmed && M(s.x, s.y, this.polygons) ? 1 : 0.4, P(l, l);
|
|
234
|
-
}),
|
|
231
|
+
}), r = Y().equals((s, l) => s === l).size((s) => O(this.aesGetters.dotSize(s.idx))).crossValue((s) => s.x).mainValue((s) => s.y).decorate((s) => n(s)), g = $().scaleExtent([0.1, 1e3]).filter((s) => s.type === "wheel" || s.metaKey || s.ctrlKey).on("start", () => {
|
|
235
232
|
this.selectedDot = null;
|
|
236
233
|
}).on("zoom", (s) => {
|
|
237
|
-
const l = s.transform, L = l.rescaleX(this.scales.xOriginal),
|
|
238
|
-
this.scales.x.domain(L.domain()), this.scales.y.domain(
|
|
234
|
+
const l = s.transform, L = l.rescaleX(this.scales.xOriginal), T = l.rescaleY(this.scales.yOriginal);
|
|
235
|
+
this.scales.x.domain(L.domain()), this.scales.y.domain(T.domain()), this.zoomTransform = l, this.zoomStateKey = `${l.x}_${l.y}_${l.k}`, this.updateLabelsPosition(this.visibleLabels), this.renderSvgLayer(), this.renderWebglLayer();
|
|
239
236
|
}).on("end", () => {
|
|
240
237
|
this.visibleLabels = this.computeLabels(this.allDots), this.renderSvgLayer(), m(!0);
|
|
241
|
-
}),
|
|
242
|
-
var
|
|
238
|
+
}), z = mt().on("point", ([s]) => {
|
|
239
|
+
var T;
|
|
243
240
|
let l;
|
|
244
241
|
s && (l = this.getClosestDot(s.x, s.y));
|
|
245
|
-
const L = this.selectedDot && !l || !this.selectedDot && l || ((
|
|
242
|
+
const L = this.selectedDot && !l || !this.selectedDot && l || ((T = this.selectedDot) == null ? void 0 : T.idx) !== (l == null ? void 0 : l.idx);
|
|
246
243
|
this.selectedDot = l ?? null, L && this.renderSvgLayer();
|
|
247
|
-
}),
|
|
244
|
+
}), u = K({
|
|
248
245
|
xScale: this.scales.x,
|
|
249
246
|
yScale: this.scales.y
|
|
250
|
-
}).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(
|
|
247
|
+
}).xAxisHeight(() => "0").yAxisWidth(() => "0").svgPlotArea(k()).webglPlotArea(
|
|
251
248
|
// only render the point series on the WebGL layer
|
|
252
|
-
|
|
249
|
+
j().series([r]).mapping((s) => s)
|
|
253
250
|
).decorate((s) => {
|
|
254
251
|
const l = s.enter();
|
|
255
|
-
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(
|
|
252
|
+
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(g).call(z);
|
|
256
253
|
});
|
|
257
254
|
this.tools = {
|
|
258
|
-
webglChart:
|
|
259
|
-
zoom:
|
|
260
|
-
fillColor:
|
|
261
|
-
pointSeries:
|
|
262
|
-
},
|
|
255
|
+
webglChart: u,
|
|
256
|
+
zoom: g,
|
|
257
|
+
fillColor: n,
|
|
258
|
+
pointSeries: r
|
|
259
|
+
}, b(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"), this.onPolygonUpdate(this.polygons);
|
|
263
260
|
}
|
|
264
261
|
resetZoom(t, e, i) {
|
|
265
|
-
var
|
|
266
|
-
!((
|
|
262
|
+
var a;
|
|
263
|
+
!((a = this.tools) != null && a.zoom) || !i || (this.updateViewport(t, e, i), b(".miplots-scatterplot-plot-area").call(this.tools.zoom.transform, q));
|
|
267
264
|
}
|
|
268
265
|
updateAes(t, e) {
|
|
269
|
-
this.tools !== null && (this.aesGetters =
|
|
270
|
-
const
|
|
266
|
+
this.tools !== null && (this.aesGetters = V(this.dataFrame, t, e), this.tools.fillColor.value((i) => {
|
|
267
|
+
const a = this.aesGetters.dotFill ?? _, o = W(a(i.idx));
|
|
271
268
|
return o[3] = !i.dimmed && M(i.x, i.y, this.polygons) ? 1 : 0.4, P(o, o);
|
|
272
269
|
}));
|
|
273
270
|
}
|
|
274
271
|
updatePointSize(t, e) {
|
|
275
|
-
this.tools !== null && (this.updateAes(t, e),
|
|
272
|
+
this.tools !== null && (this.updateAes(t, e), b(this.canvasNode).datum([...this.allDots]), this.tools.pointSeries.size((i) => O(this.aesGetters.dotSize(i.idx))));
|
|
276
273
|
}
|
|
277
274
|
updateByLasso() {
|
|
278
275
|
var t;
|
|
279
276
|
this.tools !== null && ((t = this.tools) == null || t.fillColor.value((e) => {
|
|
280
|
-
const i = this.aesGetters.dotFill ??
|
|
281
|
-
return
|
|
277
|
+
const i = this.aesGetters.dotFill ?? _, a = W(i(e.idx));
|
|
278
|
+
return a[3] = !e.dimmed && M(e.x, e.y, this.polygons) ? 1 : 0.4, P(a, a);
|
|
282
279
|
}), this.renderWebglLayer());
|
|
283
280
|
}
|
|
284
281
|
createQuadtree(t) {
|
|
285
|
-
const e = new
|
|
282
|
+
const e = new pt(t.length, 512);
|
|
286
283
|
for (let i = 0; i < t.length; i++)
|
|
287
284
|
e.add(t[i].x, t[i].y);
|
|
288
285
|
return e.finish();
|
|
289
286
|
}
|
|
290
287
|
getClosestDot(t, e) {
|
|
291
|
-
var
|
|
292
|
-
const i = (
|
|
288
|
+
var r, g;
|
|
289
|
+
const i = (r = this.tools) == null ? void 0 : r.qt;
|
|
293
290
|
if (!i) return null;
|
|
294
|
-
const
|
|
295
|
-
const s =
|
|
296
|
-
return (
|
|
291
|
+
const a = this.allDots, o = this.scales.x.invert(t), d = this.scales.y.invert(e), m = 1 / (((g = this.zoomTransform) == null ? void 0 : g.k) || 1), p = o - m, f = o + m, x = d - m, S = d + m, c = i.range(p, x, f, S), n = c.reduce((z, u) => {
|
|
292
|
+
const s = a[u], l = this.scales.x(s.x) - t, L = this.scales.y(s.y) - e, T = Math.hypot(l, L);
|
|
293
|
+
return (z === null || T < z.distance) && (z.index = u, z.distance = T), z;
|
|
297
294
|
}, {
|
|
298
295
|
index: -1,
|
|
299
296
|
distance: 1 / 0
|
|
300
297
|
});
|
|
301
|
-
return
|
|
298
|
+
return c.length === 0 || n.index === -1 ? null : a[n.index];
|
|
302
299
|
}
|
|
303
300
|
updateDots(t) {
|
|
304
|
-
this.tools !== null && (
|
|
301
|
+
this.tools !== null && (b(this.canvasNode).datum(t), this.tools.fillColor.data(t), this.tools.qt = this.createQuadtree(t), this.allDots = t);
|
|
305
302
|
}
|
|
306
|
-
render(t, e, i,
|
|
303
|
+
render(t, e, i, a, o, d, m, p, f, x, S, c, n, r) {
|
|
307
304
|
this.dataFrame = t;
|
|
308
|
-
const
|
|
305
|
+
const g = i.size.width !== this.chartSizes.chartWidth || i.size.height !== this.chartSizes.chartHeight;
|
|
309
306
|
if (this.tools === null)
|
|
310
307
|
this.initSettings(
|
|
311
308
|
o,
|
|
312
309
|
i,
|
|
313
|
-
|
|
310
|
+
d,
|
|
314
311
|
f,
|
|
315
312
|
p,
|
|
316
|
-
|
|
317
|
-
|
|
313
|
+
x,
|
|
314
|
+
r
|
|
318
315
|
);
|
|
319
316
|
else {
|
|
320
|
-
const { title:
|
|
321
|
-
this.updateChartSizes(s), this.updateLegendSize(
|
|
317
|
+
const { title: z, legend: u, size: s } = i;
|
|
318
|
+
this.updateChartSizes(s), this.updateLegendSize(u, f, x, p), this.createMainTitle(z), this.updateMargins(i.xAxis, i.yAxis), this.updateAes(f, p);
|
|
322
319
|
}
|
|
323
|
-
this.onPolygonUpdateOutside = S, this.onTooltipHintSwitch =
|
|
320
|
+
this.onPolygonUpdateOutside = S, this.onTooltipHintSwitch = c, this.onLassoControlsStateUpdate = n, this.allDots !== o ? (this.updateDots(o), this.visibleLabels = this.computeLabels(o), this.onPolygonUpdate(this.polygons)) : g && (this.visibleLabels = this.computeLabels(o)), this.notCalculatedProps = {
|
|
324
321
|
settingsId: e,
|
|
325
322
|
chartSettings: i,
|
|
326
|
-
keyColumn:
|
|
323
|
+
keyColumn: a,
|
|
327
324
|
dotsByGrouping: m,
|
|
328
325
|
layers: p
|
|
329
326
|
}, this.renderWebglLayer(), this.renderSvgLayer();
|
|
330
327
|
}
|
|
331
328
|
renderWebglLayer() {
|
|
332
329
|
var t, e;
|
|
333
|
-
(t = this.tools) != null && t.webglChart &&
|
|
330
|
+
(t = this.tools) != null && t.webglChart && b(this.canvasNode).call((e = this.tools) == null ? void 0 : e.webglChart);
|
|
334
331
|
}
|
|
335
332
|
renderSvgLayer() {
|
|
336
333
|
var e;
|
|
@@ -356,32 +353,32 @@ class he {
|
|
|
356
353
|
onTooltipHintSwitch: this.onTooltipHintSwitch,
|
|
357
354
|
onLassoControlsStateUpdate: this.onLassoControlsStateUpdate
|
|
358
355
|
};
|
|
359
|
-
this.svgLayerComponent = /* @__PURE__ */ N.jsx(
|
|
356
|
+
this.svgLayerComponent = /* @__PURE__ */ N.jsx(gt, { dataFrame: this.dataFrame, children: /* @__PURE__ */ N.jsx(ht, { ...t }) }), (e = this.reactRoot) == null || e.render(this.svgLayerComponent);
|
|
360
357
|
}
|
|
361
358
|
renderError(t) {
|
|
362
359
|
var e;
|
|
363
|
-
(e = this.reactRoot) == null || e.render(/* @__PURE__ */ N.jsx(
|
|
360
|
+
(e = this.reactRoot) == null || e.render(/* @__PURE__ */ N.jsx(Z, { message: t }));
|
|
364
361
|
}
|
|
365
362
|
computeLabels(t) {
|
|
366
|
-
const e = new
|
|
363
|
+
const e = new R("16px Manrope"), i = nt(this.chartSizes.chartWidth, this.chartSizes.chartHeight), a = [];
|
|
367
364
|
for (let o = 0; o < t.length; o++) {
|
|
368
|
-
const
|
|
369
|
-
if (
|
|
365
|
+
const d = t[o];
|
|
366
|
+
if (d.label == null)
|
|
370
367
|
continue;
|
|
371
|
-
const m = String(
|
|
372
|
-
|
|
368
|
+
const m = String(d.label), p = e.getTextMetrics(m), f = this.scales.x(d.x), x = this.scales.y(d.y), S = p.width, c = p.actualBoundingBoxAscent + p.actualBoundingBoxDescent, n = 10, r = i(f, x, S, c, n);
|
|
369
|
+
r && a.push({
|
|
373
370
|
x: f,
|
|
374
|
-
y:
|
|
375
|
-
dot:
|
|
371
|
+
y: x,
|
|
372
|
+
dot: d,
|
|
376
373
|
name: m,
|
|
377
374
|
width: S,
|
|
378
|
-
height:
|
|
379
|
-
padding:
|
|
380
|
-
xPosition:
|
|
381
|
-
yPosition:
|
|
375
|
+
height: c,
|
|
376
|
+
padding: n,
|
|
377
|
+
xPosition: r[0],
|
|
378
|
+
yPosition: r[1]
|
|
382
379
|
});
|
|
383
380
|
}
|
|
384
|
-
return
|
|
381
|
+
return a;
|
|
385
382
|
}
|
|
386
383
|
updateLabelsPosition(t) {
|
|
387
384
|
for (let e = 0; e < t.length; e++) {
|
|
@@ -391,6 +388,6 @@ class he {
|
|
|
391
388
|
}
|
|
392
389
|
}
|
|
393
390
|
export {
|
|
394
|
-
|
|
391
|
+
le as default
|
|
395
392
|
};
|
|
396
393
|
//# sourceMappingURL=ChartRenderer.js.map
|