@anov/3d-ability 0.0.91 → 0.0.93
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/business/HeatMap/HeatMap.d.ts +103 -0
- package/dist/business/HeatMap/HeatMap.js +376 -0
- package/dist/business/HeatMap/HeatMap.js.map +1 -0
- package/dist/business/HeatMap/core.d.ts +30 -0
- package/dist/business/HeatMap/core.js +640 -0
- package/dist/business/HeatMap/core.js.map +1 -0
- package/dist/business/HeatMap/index.d.ts +12 -0
- package/dist/business/HeatMap/index.js +2 -0
- package/dist/business/HeatMap/index.js.map +1 -0
- package/dist/business/HeatMap/shader.d.ts +2 -0
- package/dist/business/HeatMap/shader.js +4 -0
- package/dist/business/HeatMap/shader.js.map +1 -0
- package/dist/business/index.d.ts +1 -0
- package/dist/business/index.js +1 -0
- package/dist/business/index.js.map +1 -1
- package/package.json +8 -4
|
@@ -0,0 +1,640 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
6
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
7
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
8
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
|
+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
11
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
12
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
13
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
14
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
15
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
16
|
+
var HeatmapConfig = {
|
|
17
|
+
defaultRadius: 40,
|
|
18
|
+
defaultRenderer: 'canvas2d',
|
|
19
|
+
defaultGradient: {
|
|
20
|
+
0.25: 'rgb(0,0,255)',
|
|
21
|
+
0.55: 'rgb(0,255,0)',
|
|
22
|
+
0.85: 'yellow',
|
|
23
|
+
1.0: 'rgb(255,0,0)'
|
|
24
|
+
},
|
|
25
|
+
defaultMaxOpacity: 1,
|
|
26
|
+
defaultMinOpacity: 0,
|
|
27
|
+
defaultBlur: 0.85,
|
|
28
|
+
defaultXField: 'x',
|
|
29
|
+
defaultYField: 'y',
|
|
30
|
+
defaultValueField: 'value',
|
|
31
|
+
plugins: {}
|
|
32
|
+
};
|
|
33
|
+
var Store = /*#__PURE__*/function () {
|
|
34
|
+
function Store(config) {
|
|
35
|
+
_classCallCheck(this, Store);
|
|
36
|
+
_defineProperty(this, "_coordinator", {});
|
|
37
|
+
_defineProperty(this, "_data", []);
|
|
38
|
+
_defineProperty(this, "_radi", []);
|
|
39
|
+
_defineProperty(this, "_min", 10);
|
|
40
|
+
_defineProperty(this, "_max", 1);
|
|
41
|
+
_defineProperty(this, "_xField", void 0);
|
|
42
|
+
_defineProperty(this, "_yField", void 0);
|
|
43
|
+
_defineProperty(this, "_valueField", void 0);
|
|
44
|
+
_defineProperty(this, "_cfgRadius", void 0);
|
|
45
|
+
this._xField = config.xField || config.defaultXField;
|
|
46
|
+
this._yField = config.yField || config.defaultYField;
|
|
47
|
+
this._valueField = config.valueField || config.defaultValueField;
|
|
48
|
+
if (config.radius) this._cfgRadius = config.radius;
|
|
49
|
+
}
|
|
50
|
+
_createClass(Store, [{
|
|
51
|
+
key: "_organiseData",
|
|
52
|
+
value: function _organiseData(dataPoint, forceRender) {
|
|
53
|
+
var x = dataPoint[this._xField];
|
|
54
|
+
var y = dataPoint[this._yField];
|
|
55
|
+
var radi = this._radi;
|
|
56
|
+
var store = this._data;
|
|
57
|
+
var max = this._max;
|
|
58
|
+
var min = this._min;
|
|
59
|
+
var value = dataPoint[this._valueField] || 1;
|
|
60
|
+
var radius = dataPoint.radius || this._cfgRadius || HeatmapConfig.defaultRadius;
|
|
61
|
+
if (!store[x]) {
|
|
62
|
+
store[x] = [];
|
|
63
|
+
radi[x] = [];
|
|
64
|
+
}
|
|
65
|
+
if (!store[x][y]) {
|
|
66
|
+
store[x][y] = value;
|
|
67
|
+
radi[x][y] = radius;
|
|
68
|
+
} else {
|
|
69
|
+
store[x][y] += value;
|
|
70
|
+
}
|
|
71
|
+
var storedVal = store[x][y];
|
|
72
|
+
if (storedVal > max) {
|
|
73
|
+
if (!forceRender) this._max = storedVal;else this.setDataMax(storedVal);
|
|
74
|
+
return false;
|
|
75
|
+
} else if (storedVal < min) {
|
|
76
|
+
if (!forceRender) this._min = storedVal;else this.setDataMin(storedVal);
|
|
77
|
+
return false;
|
|
78
|
+
} else {
|
|
79
|
+
return {
|
|
80
|
+
x: x,
|
|
81
|
+
y: y,
|
|
82
|
+
value: value,
|
|
83
|
+
radius: radius,
|
|
84
|
+
min: min,
|
|
85
|
+
max: max
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}, {
|
|
90
|
+
key: "_unOrganizeData",
|
|
91
|
+
value: function _unOrganizeData() {
|
|
92
|
+
var unorganizedData = [];
|
|
93
|
+
var data = this._data;
|
|
94
|
+
var radi = this._radi;
|
|
95
|
+
for (var x in data) {
|
|
96
|
+
for (var y in data[x]) {
|
|
97
|
+
unorganizedData.push({
|
|
98
|
+
x: x,
|
|
99
|
+
y: y,
|
|
100
|
+
radius: radi[x][y],
|
|
101
|
+
value: data[x][y]
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
return {
|
|
106
|
+
min: this._min,
|
|
107
|
+
max: this._max,
|
|
108
|
+
data: unorganizedData
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
}, {
|
|
112
|
+
key: "_onExtremaChange",
|
|
113
|
+
value: function _onExtremaChange() {
|
|
114
|
+
this._coordinator.emit('extremachange', {
|
|
115
|
+
min: this._min,
|
|
116
|
+
max: this._max
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
}, {
|
|
120
|
+
key: "addData",
|
|
121
|
+
value: function addData() {
|
|
122
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
123
|
+
args[_key] = arguments[_key];
|
|
124
|
+
}
|
|
125
|
+
if (args[0].length > 0) {
|
|
126
|
+
var dataArr = args[0];
|
|
127
|
+
var dataLen = dataArr.length;
|
|
128
|
+
while (dataLen--) this.addData(dataArr[dataLen]);
|
|
129
|
+
} else {
|
|
130
|
+
// add to store
|
|
131
|
+
var organisedEntry = this._organiseData(args[0], true);
|
|
132
|
+
if (organisedEntry) {
|
|
133
|
+
// if it's the first datapoint initialize the extremas with it
|
|
134
|
+
if (this._data.length === 0) this._min = this._max = organisedEntry.value;
|
|
135
|
+
this._coordinator.emit('renderpartial', {
|
|
136
|
+
min: this._min,
|
|
137
|
+
max: this._max,
|
|
138
|
+
data: [organisedEntry]
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
return this;
|
|
143
|
+
}
|
|
144
|
+
}, {
|
|
145
|
+
key: "setData",
|
|
146
|
+
value: function setData(data) {
|
|
147
|
+
var dataPoints = data.data;
|
|
148
|
+
var pointsLen = dataPoints.length;
|
|
149
|
+
|
|
150
|
+
// reset data arrays
|
|
151
|
+
this._data = [];
|
|
152
|
+
this._radi = [];
|
|
153
|
+
for (var i = 0; i < pointsLen; i++) this._organiseData(dataPoints[i], false);
|
|
154
|
+
this._max = data.max;
|
|
155
|
+
this._min = data.min || 0;
|
|
156
|
+
this._onExtremaChange();
|
|
157
|
+
this._coordinator.emit('renderall', this.getInternalData());
|
|
158
|
+
return this;
|
|
159
|
+
}
|
|
160
|
+
}, {
|
|
161
|
+
key: "removeData",
|
|
162
|
+
value: function removeData() {
|
|
163
|
+
// TODO: implement
|
|
164
|
+
}
|
|
165
|
+
}, {
|
|
166
|
+
key: "setDataMax",
|
|
167
|
+
value: function setDataMax(max) {
|
|
168
|
+
this._max = max;
|
|
169
|
+
this._onExtremaChange();
|
|
170
|
+
this._coordinator.emit('renderall', this.getInternalData());
|
|
171
|
+
return this;
|
|
172
|
+
}
|
|
173
|
+
}, {
|
|
174
|
+
key: "setDataMin",
|
|
175
|
+
value: function setDataMin(min) {
|
|
176
|
+
this._min = min;
|
|
177
|
+
this._onExtremaChange();
|
|
178
|
+
this._coordinator.emit('renderall', this.getInternalData());
|
|
179
|
+
return this;
|
|
180
|
+
}
|
|
181
|
+
}, {
|
|
182
|
+
key: "setCoordinator",
|
|
183
|
+
value: function setCoordinator(coordinator) {
|
|
184
|
+
this._coordinator = coordinator;
|
|
185
|
+
}
|
|
186
|
+
}, {
|
|
187
|
+
key: "getInternalData",
|
|
188
|
+
value: function getInternalData() {
|
|
189
|
+
return {
|
|
190
|
+
max: this._max,
|
|
191
|
+
min: this._min,
|
|
192
|
+
data: this._data,
|
|
193
|
+
radi: this._radi
|
|
194
|
+
};
|
|
195
|
+
}
|
|
196
|
+
}, {
|
|
197
|
+
key: "getData",
|
|
198
|
+
value: function getData() {
|
|
199
|
+
return this._unOrganizeData();
|
|
200
|
+
}
|
|
201
|
+
}, {
|
|
202
|
+
key: "getValueAt",
|
|
203
|
+
value: function getValueAt(point) {
|
|
204
|
+
var _renderer;
|
|
205
|
+
var shadowCtx = (_renderer = this._renderer) === null || _renderer === void 0 ? void 0 : _renderer.shadowCtx;
|
|
206
|
+
if (!shadowCtx) return null;
|
|
207
|
+
var img = shadowCtx.getImageData(point.x, point.y, 1, 1);
|
|
208
|
+
var data = img.data[3];
|
|
209
|
+
var max = this._max;
|
|
210
|
+
var min = this._min;
|
|
211
|
+
var value = Math.abs(max - min) * (data / 255) >> 0;
|
|
212
|
+
return value;
|
|
213
|
+
}
|
|
214
|
+
}]);
|
|
215
|
+
return Store;
|
|
216
|
+
}();
|
|
217
|
+
var Canvas2dRenderer = /*#__PURE__*/function () {
|
|
218
|
+
function Canvas2dRenderer(config) {
|
|
219
|
+
var _width, _height;
|
|
220
|
+
_classCallCheck(this, Canvas2dRenderer);
|
|
221
|
+
_defineProperty(this, "shadowCanvas", void 0);
|
|
222
|
+
_defineProperty(this, "canvas", void 0);
|
|
223
|
+
_defineProperty(this, "_renderBoundaries", void 0);
|
|
224
|
+
_defineProperty(this, "_width", void 0);
|
|
225
|
+
_defineProperty(this, "_height", void 0);
|
|
226
|
+
_defineProperty(this, "shadowCtx", void 0);
|
|
227
|
+
_defineProperty(this, "ctx", void 0);
|
|
228
|
+
_defineProperty(this, "_palette", void 0);
|
|
229
|
+
_defineProperty(this, "_templates", void 0);
|
|
230
|
+
_defineProperty(this, "_blur", void 0);
|
|
231
|
+
_defineProperty(this, "_opacity", void 0);
|
|
232
|
+
_defineProperty(this, "_maxOpacity", void 0);
|
|
233
|
+
_defineProperty(this, "_minOpacity", void 0);
|
|
234
|
+
_defineProperty(this, "_useGradientOpacity", void 0);
|
|
235
|
+
_defineProperty(this, "_min", void 0);
|
|
236
|
+
_defineProperty(this, "_max", void 0);
|
|
237
|
+
var container = config.container;
|
|
238
|
+
this.shadowCanvas = document.createElement('canvas');
|
|
239
|
+
this.canvas = config.canvas || document.createElement('canvas');
|
|
240
|
+
this._renderBoundaries = [10000, 10000, 0, 0];
|
|
241
|
+
var computed = getComputedStyle(config.container) || {};
|
|
242
|
+
this.canvas.className = 'heatmap-canvas';
|
|
243
|
+
this._width = this.canvas.width = this.shadowCanvas.width = config.width || +((_width = computed.width) === null || _width === void 0 ? void 0 : _width.replace(/px/, '')) || 0;
|
|
244
|
+
this._height = this.canvas.height = this.shadowCanvas.height = config.height || +((_height = computed.height) === null || _height === void 0 ? void 0 : _height.replace(/px/, '')) || 0;
|
|
245
|
+
this.shadowCtx = this.shadowCanvas.getContext('2d');
|
|
246
|
+
this.ctx = this.canvas.getContext('2d');
|
|
247
|
+
this.canvas.style.cssText = this.shadowCanvas.style.cssText = 'position:absolute;left:0;top:0;';
|
|
248
|
+
container.style.position = 'relative';
|
|
249
|
+
container.appendChild(this.canvas);
|
|
250
|
+
this._palette = this._getColorPalette(config);
|
|
251
|
+
this._templates = {};
|
|
252
|
+
this._setStyles(config);
|
|
253
|
+
}
|
|
254
|
+
_createClass(Canvas2dRenderer, [{
|
|
255
|
+
key: "_getColorPalette",
|
|
256
|
+
value: function _getColorPalette(config) {
|
|
257
|
+
var _config$gradient;
|
|
258
|
+
var gradientConfig = (_config$gradient = config.gradient) !== null && _config$gradient !== void 0 ? _config$gradient : config.defaultGradient;
|
|
259
|
+
var paletteCanvas = document.createElement('canvas');
|
|
260
|
+
var paletteCtx = paletteCanvas.getContext('2d');
|
|
261
|
+
paletteCanvas.width = 256;
|
|
262
|
+
paletteCanvas.height = 1;
|
|
263
|
+
var gradient = paletteCtx.createLinearGradient(0, 0, 256, 1);
|
|
264
|
+
for (var _key2 in gradientConfig) gradient.addColorStop(+_key2, gradientConfig[_key2]);
|
|
265
|
+
paletteCtx.fillStyle = gradient;
|
|
266
|
+
paletteCtx.fillRect(0, 0, 256, 1);
|
|
267
|
+
return paletteCtx.getImageData(0, 0, 256, 1).data;
|
|
268
|
+
}
|
|
269
|
+
}, {
|
|
270
|
+
key: "_getPointTemplate",
|
|
271
|
+
value: function _getPointTemplate(radius, blurFactor) {
|
|
272
|
+
var tplCanvas = document.createElement('canvas');
|
|
273
|
+
var tplCtx = tplCanvas.getContext('2d');
|
|
274
|
+
var x = radius;
|
|
275
|
+
var y = radius;
|
|
276
|
+
tplCanvas.width = tplCanvas.height = radius * 2;
|
|
277
|
+
if (blurFactor === 1) {
|
|
278
|
+
tplCtx.beginPath();
|
|
279
|
+
tplCtx.arc(x, y, radius, 0, 2 * Math.PI, false);
|
|
280
|
+
tplCtx.fillStyle = 'rgba(0,0,0,1)';
|
|
281
|
+
tplCtx.fill();
|
|
282
|
+
} else {
|
|
283
|
+
var gradient = tplCtx.createRadialGradient(x, y, radius * blurFactor, x, y, radius);
|
|
284
|
+
gradient.addColorStop(0, 'rgba(0,0,0,1)');
|
|
285
|
+
gradient.addColorStop(1, 'rgba(0,0,0,0)');
|
|
286
|
+
tplCtx.fillStyle = gradient;
|
|
287
|
+
tplCtx.fillRect(0, 0, 2 * radius, 2 * radius);
|
|
288
|
+
}
|
|
289
|
+
return tplCanvas;
|
|
290
|
+
}
|
|
291
|
+
}, {
|
|
292
|
+
key: "_prepareData",
|
|
293
|
+
value: function _prepareData(data) {
|
|
294
|
+
var renderData = [];
|
|
295
|
+
var min = data.min;
|
|
296
|
+
var max = data.max;
|
|
297
|
+
var radi = data.radi;
|
|
298
|
+
var data2 = data.data;
|
|
299
|
+
var xValues = Object.keys(data2);
|
|
300
|
+
var xValuesLen = xValues.length;
|
|
301
|
+
while (xValuesLen--) {
|
|
302
|
+
var xValue = xValues[xValuesLen];
|
|
303
|
+
var yValues = Object.keys(data2[xValue]);
|
|
304
|
+
var yValuesLen = yValues.length;
|
|
305
|
+
while (yValuesLen--) {
|
|
306
|
+
var yValue = yValues[yValuesLen];
|
|
307
|
+
var value = data2[xValue][yValue];
|
|
308
|
+
var radius = radi[xValue][yValue];
|
|
309
|
+
renderData.push({
|
|
310
|
+
x: xValue,
|
|
311
|
+
y: yValue,
|
|
312
|
+
value: value,
|
|
313
|
+
radius: radius
|
|
314
|
+
});
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
return {
|
|
318
|
+
min: min,
|
|
319
|
+
max: max,
|
|
320
|
+
data: renderData
|
|
321
|
+
};
|
|
322
|
+
}
|
|
323
|
+
}, {
|
|
324
|
+
key: "renderPartial",
|
|
325
|
+
value: function renderPartial(data) {
|
|
326
|
+
if (data.data.length > 0) {
|
|
327
|
+
this._drawAlpha(data);
|
|
328
|
+
this._colorize();
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
}, {
|
|
332
|
+
key: "renderAll",
|
|
333
|
+
value: function renderAll(data) {
|
|
334
|
+
this._clear();
|
|
335
|
+
if (data.data.length > 0) {
|
|
336
|
+
this._drawAlpha(this._prepareData(data));
|
|
337
|
+
this._colorize();
|
|
338
|
+
}
|
|
339
|
+
}
|
|
340
|
+
}, {
|
|
341
|
+
key: "_updateGradient",
|
|
342
|
+
value: function _updateGradient(config) {
|
|
343
|
+
this._palette = this._getColorPalette(config);
|
|
344
|
+
}
|
|
345
|
+
}, {
|
|
346
|
+
key: "updateConfig",
|
|
347
|
+
value: function updateConfig(config) {
|
|
348
|
+
if (config.gradient) this._updateGradient(config);
|
|
349
|
+
this._setStyles(config);
|
|
350
|
+
}
|
|
351
|
+
}, {
|
|
352
|
+
key: "setDimensions",
|
|
353
|
+
value: function setDimensions(width, height) {
|
|
354
|
+
this._width = width;
|
|
355
|
+
this._height = height;
|
|
356
|
+
this.canvas.width = this.shadowCanvas.width = width;
|
|
357
|
+
this.canvas.height = this.shadowCanvas.height = height;
|
|
358
|
+
}
|
|
359
|
+
}, {
|
|
360
|
+
key: "_clear",
|
|
361
|
+
value: function _clear() {
|
|
362
|
+
this.shadowCtx.clearRect(0, 0, this._width, this._height);
|
|
363
|
+
this.ctx.clearRect(0, 0, this._width, this._height);
|
|
364
|
+
}
|
|
365
|
+
}, {
|
|
366
|
+
key: "_setStyles",
|
|
367
|
+
value: function _setStyles(config) {
|
|
368
|
+
this._blur = config.blur === 0 ? 0 : config.blur || config.defaultBlur;
|
|
369
|
+
if (config.backgroundColor) this.canvas.style.backgroundColor = config.backgroundColor;
|
|
370
|
+
this._width = this.canvas.width = this.shadowCanvas.width = config.width || this._width;
|
|
371
|
+
this._height = this.canvas.height = this.shadowCanvas.height = config.height || this._height;
|
|
372
|
+
this._opacity = (config.opacity || 0) * 255;
|
|
373
|
+
this._maxOpacity = (config.maxOpacity || config.defaultMaxOpacity) * 255;
|
|
374
|
+
this._minOpacity = (config.minOpacity || config.defaultMinOpacity) * 255;
|
|
375
|
+
this._useGradientOpacity = !!config.useGradientOpacity;
|
|
376
|
+
}
|
|
377
|
+
}, {
|
|
378
|
+
key: "_drawAlpha",
|
|
379
|
+
value: function _drawAlpha(data) {
|
|
380
|
+
this._min = data.min;
|
|
381
|
+
this._max = data.max;
|
|
382
|
+
var data2 = data.data || [];
|
|
383
|
+
var dataLen = data2.length;
|
|
384
|
+
// on a point basis?
|
|
385
|
+
var blur = 1 - this._blur;
|
|
386
|
+
while (dataLen--) {
|
|
387
|
+
var point = data2[dataLen];
|
|
388
|
+
var x = point.x;
|
|
389
|
+
var y = point.y;
|
|
390
|
+
var radius = point.radius;
|
|
391
|
+
// if value is bigger than max
|
|
392
|
+
// use max as value
|
|
393
|
+
var value = Math.min(point.value, this._max);
|
|
394
|
+
var rectX = x - radius;
|
|
395
|
+
var rectY = y - radius;
|
|
396
|
+
var shadowCtx = this.shadowCtx;
|
|
397
|
+
var tpl = void 0;
|
|
398
|
+
if (!this._templates[radius]) this._templates[radius] = tpl = this._getPointTemplate(radius, blur);else tpl = this._templates[radius];
|
|
399
|
+
|
|
400
|
+
// value from minimum / value range
|
|
401
|
+
// => [0, 1]
|
|
402
|
+
var templateAlpha = (value - this._min) / (this._max - this._min);
|
|
403
|
+
// this fixes #176: small values are not visible because globalAlpha < .01 cannot be read from imageData
|
|
404
|
+
shadowCtx.globalAlpha = templateAlpha < 0.01 ? 0.01 : templateAlpha;
|
|
405
|
+
shadowCtx.drawImage(tpl, rectX, rectY);
|
|
406
|
+
|
|
407
|
+
// update renderBoundaries
|
|
408
|
+
if (rectX < this._renderBoundaries[0]) this._renderBoundaries[0] = rectX;
|
|
409
|
+
if (rectY < this._renderBoundaries[1]) this._renderBoundaries[1] = rectY;
|
|
410
|
+
if (rectX + 2 * radius > this._renderBoundaries[2]) this._renderBoundaries[2] = rectX + 2 * radius;
|
|
411
|
+
if (rectY + 2 * radius > this._renderBoundaries[3]) this._renderBoundaries[3] = rectY + 2 * radius;
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
}, {
|
|
415
|
+
key: "_colorize",
|
|
416
|
+
value: function _colorize() {
|
|
417
|
+
var x = this._renderBoundaries[0];
|
|
418
|
+
var y = this._renderBoundaries[1];
|
|
419
|
+
var width = this._renderBoundaries[2] - x;
|
|
420
|
+
var height = this._renderBoundaries[3] - y;
|
|
421
|
+
var maxWidth = this._width;
|
|
422
|
+
var maxHeight = this._height;
|
|
423
|
+
var opacity = this._opacity;
|
|
424
|
+
var maxOpacity = this._maxOpacity;
|
|
425
|
+
var minOpacity = this._minOpacity;
|
|
426
|
+
var useGradientOpacity = this._useGradientOpacity;
|
|
427
|
+
if (x < 0) x = 0;
|
|
428
|
+
if (y < 0) y = 0;
|
|
429
|
+
if (x + width > maxWidth) width = maxWidth - x;
|
|
430
|
+
if (y + height > maxHeight) height = maxHeight - y;
|
|
431
|
+
var img = this.shadowCtx.getImageData(x, y, width, height);
|
|
432
|
+
var imgData = img.data;
|
|
433
|
+
var len = imgData.length;
|
|
434
|
+
var palette = this._palette;
|
|
435
|
+
for (var i = 3; i < len; i += 4) {
|
|
436
|
+
var alpha = imgData[i];
|
|
437
|
+
var offset = alpha * 4;
|
|
438
|
+
if (!offset) continue;
|
|
439
|
+
var finalAlpha = void 0;
|
|
440
|
+
if (opacity > 0) {
|
|
441
|
+
finalAlpha = opacity;
|
|
442
|
+
} else {
|
|
443
|
+
if (alpha < maxOpacity) {
|
|
444
|
+
if (alpha < minOpacity) finalAlpha = minOpacity;else finalAlpha = alpha;
|
|
445
|
+
} else {
|
|
446
|
+
finalAlpha = maxOpacity;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
imgData[i - 3] = palette[offset];
|
|
450
|
+
imgData[i - 2] = palette[offset + 1];
|
|
451
|
+
imgData[i - 1] = palette[offset + 2];
|
|
452
|
+
imgData[i] = useGradientOpacity ? palette[offset + 3] : finalAlpha;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
// 创建新的ImageData对象
|
|
456
|
+
var newImg = new ImageData(imgData, width, height);
|
|
457
|
+
this.ctx.putImageData(newImg, x, y);
|
|
458
|
+
this._renderBoundaries = [1000, 1000, 0, 0];
|
|
459
|
+
}
|
|
460
|
+
}, {
|
|
461
|
+
key: "getValueAt",
|
|
462
|
+
value: function getValueAt(point) {
|
|
463
|
+
var shadowCtx = this.shadowCtx;
|
|
464
|
+
var img = shadowCtx.getImageData(point.x, point.y, 1, 1);
|
|
465
|
+
var data = img.data[3];
|
|
466
|
+
var max = this._max;
|
|
467
|
+
var min = this._min;
|
|
468
|
+
var value = Math.abs(max - min) * (data / 255) >> 0;
|
|
469
|
+
return value;
|
|
470
|
+
}
|
|
471
|
+
}, {
|
|
472
|
+
key: "getDataURL",
|
|
473
|
+
value: function getDataURL() {
|
|
474
|
+
return this.canvas.toDataURL();
|
|
475
|
+
}
|
|
476
|
+
}]);
|
|
477
|
+
return Canvas2dRenderer;
|
|
478
|
+
}();
|
|
479
|
+
var Coordinator = /*#__PURE__*/function () {
|
|
480
|
+
function Coordinator() {
|
|
481
|
+
_classCallCheck(this, Coordinator);
|
|
482
|
+
_defineProperty(this, "cStore", void 0);
|
|
483
|
+
this.cStore = {};
|
|
484
|
+
}
|
|
485
|
+
_createClass(Coordinator, [{
|
|
486
|
+
key: "on",
|
|
487
|
+
value: function on(evtName, callback, scope) {
|
|
488
|
+
var cStore = this.cStore;
|
|
489
|
+
if (!cStore[evtName]) cStore[evtName] = [];
|
|
490
|
+
cStore[evtName].push(function (data) {
|
|
491
|
+
return callback.call(scope, data);
|
|
492
|
+
});
|
|
493
|
+
}
|
|
494
|
+
}, {
|
|
495
|
+
key: "emit",
|
|
496
|
+
value: function emit(evtName, data) {
|
|
497
|
+
var cStore = this.cStore;
|
|
498
|
+
if (cStore[evtName]) {
|
|
499
|
+
var len = cStore[evtName].length;
|
|
500
|
+
for (var i = 0; i < len; i++) {
|
|
501
|
+
var callback = cStore[evtName][i];
|
|
502
|
+
callback(data);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}]);
|
|
507
|
+
return Coordinator;
|
|
508
|
+
}();
|
|
509
|
+
var Heatmap = /*#__PURE__*/function () {
|
|
510
|
+
function Heatmap(config) {
|
|
511
|
+
_classCallCheck(this, Heatmap);
|
|
512
|
+
_defineProperty(this, "_config", void 0);
|
|
513
|
+
_defineProperty(this, "_coordinator", void 0);
|
|
514
|
+
_defineProperty(this, "_renderer", void 0);
|
|
515
|
+
_defineProperty(this, "_store", void 0);
|
|
516
|
+
this._config = _objectSpread(_objectSpread({}, HeatmapConfig), config);
|
|
517
|
+
this._coordinator = new Coordinator();
|
|
518
|
+
if (config.plugin) {
|
|
519
|
+
var pluginToLoad = config.plugin;
|
|
520
|
+
if (!HeatmapConfig.plugins[pluginToLoad]) {
|
|
521
|
+
throw new Error("Plugin '".concat(pluginToLoad, "' not found. Maybe it was not registered."));
|
|
522
|
+
} else {
|
|
523
|
+
var plugin = HeatmapConfig.plugins[pluginToLoad];
|
|
524
|
+
// set plugin renderer and store
|
|
525
|
+
var Renderer = plugin.renderer;
|
|
526
|
+
var _Store = plugin.store;
|
|
527
|
+
this._renderer = new Renderer(config);
|
|
528
|
+
this._store = new _Store(config);
|
|
529
|
+
}
|
|
530
|
+
} else {
|
|
531
|
+
this._renderer = new Canvas2dRenderer(config);
|
|
532
|
+
this._store = new Store(config);
|
|
533
|
+
}
|
|
534
|
+
this._connect();
|
|
535
|
+
}
|
|
536
|
+
_createClass(Heatmap, [{
|
|
537
|
+
key: "_connect",
|
|
538
|
+
value: function _connect() {
|
|
539
|
+
var _this = this;
|
|
540
|
+
var renderer = this._renderer;
|
|
541
|
+
var coordinator = this._coordinator;
|
|
542
|
+
var store = this._store;
|
|
543
|
+
coordinator.on('renderpartial', renderer.renderPartial, renderer);
|
|
544
|
+
coordinator.on('renderall', renderer.renderAll, renderer);
|
|
545
|
+
coordinator.on('extremachange', function (data) {
|
|
546
|
+
_this._config.onExtremaChange && _this._config.onExtremaChange({
|
|
547
|
+
min: data.min,
|
|
548
|
+
max: data.max,
|
|
549
|
+
gradient: _this._config.gradient || _this._config.defaultGradient
|
|
550
|
+
});
|
|
551
|
+
});
|
|
552
|
+
store.setCoordinator(coordinator);
|
|
553
|
+
}
|
|
554
|
+
}, {
|
|
555
|
+
key: "addData",
|
|
556
|
+
value: function addData() {
|
|
557
|
+
var _this$_store;
|
|
558
|
+
for (var _len2 = arguments.length, args = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
|
|
559
|
+
args[_key3] = arguments[_key3];
|
|
560
|
+
}
|
|
561
|
+
if (args.length === 1) this._store.addData(args[0]);else (_this$_store = this._store).addData.apply(_this$_store, _toConsumableArray(args));
|
|
562
|
+
return this;
|
|
563
|
+
}
|
|
564
|
+
}, {
|
|
565
|
+
key: "removeData",
|
|
566
|
+
value: function removeData() {
|
|
567
|
+
if (this._store.removeData) this._store.removeData();
|
|
568
|
+
return this;
|
|
569
|
+
}
|
|
570
|
+
}, {
|
|
571
|
+
key: "setData",
|
|
572
|
+
value: function setData() {
|
|
573
|
+
var _this$_store2;
|
|
574
|
+
for (var _len3 = arguments.length, args = new Array(_len3), _key4 = 0; _key4 < _len3; _key4++) {
|
|
575
|
+
args[_key4] = arguments[_key4];
|
|
576
|
+
}
|
|
577
|
+
if (args.length === 1) this._store.setData(args[0]);else (_this$_store2 = this._store).setData.apply(_this$_store2, _toConsumableArray(args));
|
|
578
|
+
return this;
|
|
579
|
+
}
|
|
580
|
+
}, {
|
|
581
|
+
key: "setDataMax",
|
|
582
|
+
value: function setDataMax() {
|
|
583
|
+
var _this$_store3;
|
|
584
|
+
for (var _len4 = arguments.length, args = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) {
|
|
585
|
+
args[_key5] = arguments[_key5];
|
|
586
|
+
}
|
|
587
|
+
if (args.length === 1) this._store.setDataMax(args[0]);else (_this$_store3 = this._store).setDataMax.apply(_this$_store3, _toConsumableArray(args));
|
|
588
|
+
return this;
|
|
589
|
+
}
|
|
590
|
+
}, {
|
|
591
|
+
key: "setDataMin",
|
|
592
|
+
value: function setDataMin() {
|
|
593
|
+
var _this$_store4;
|
|
594
|
+
for (var _len5 = arguments.length, args = new Array(_len5), _key6 = 0; _key6 < _len5; _key6++) {
|
|
595
|
+
args[_key6] = arguments[_key6];
|
|
596
|
+
}
|
|
597
|
+
if (args.length === 1) this._store.setDataMin(args[0]);else (_this$_store4 = this._store).setDataMin.apply(_this$_store4, _toConsumableArray(args));
|
|
598
|
+
return this;
|
|
599
|
+
}
|
|
600
|
+
}, {
|
|
601
|
+
key: "configure",
|
|
602
|
+
value: function configure(config) {
|
|
603
|
+
this._config = _objectSpread(_objectSpread({}, this._config), config);
|
|
604
|
+
this._renderer.updateConfig(this._config);
|
|
605
|
+
this._coordinator.emit('renderall', this._store.getInternalData());
|
|
606
|
+
return this;
|
|
607
|
+
}
|
|
608
|
+
}, {
|
|
609
|
+
key: "repaint",
|
|
610
|
+
value: function repaint() {
|
|
611
|
+
this._coordinator.emit('renderall', this._store.getInternalData());
|
|
612
|
+
return this;
|
|
613
|
+
}
|
|
614
|
+
}, {
|
|
615
|
+
key: "getData",
|
|
616
|
+
value: function getData() {
|
|
617
|
+
return this._store.getData();
|
|
618
|
+
}
|
|
619
|
+
}, {
|
|
620
|
+
key: "getDataURL",
|
|
621
|
+
value: function getDataURL() {
|
|
622
|
+
return this._renderer.getDataURL();
|
|
623
|
+
}
|
|
624
|
+
}, {
|
|
625
|
+
key: "getValueAt",
|
|
626
|
+
value: function getValueAt(point) {
|
|
627
|
+
if (this._store.getValueAt) return this._store.getValueAt(point);else if (this._renderer.getValueAt) return this._renderer.getValueAt(point);else return null;
|
|
628
|
+
}
|
|
629
|
+
}]);
|
|
630
|
+
return Heatmap;
|
|
631
|
+
}();
|
|
632
|
+
export var heatmapFactory = {
|
|
633
|
+
create: function create(config) {
|
|
634
|
+
return new Heatmap(config);
|
|
635
|
+
},
|
|
636
|
+
register: function register(pluginKey, plugin) {
|
|
637
|
+
HeatmapConfig.plugins[pluginKey] = plugin;
|
|
638
|
+
}
|
|
639
|
+
};
|
|
640
|
+
//# sourceMappingURL=core.js.map
|