1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | var tslib_1 = require("tslib");
|
4 | var color_util_1 = (0, tslib_1.__importDefault)(require("@antv/color-util"));
|
5 | var util_1 = require("@antv/util");
|
6 | var constant_1 = require("../constant");
|
7 | var base_1 = (0, tslib_1.__importDefault)(require("./base"));
|
8 |
|
9 |
|
10 |
|
11 | var Heatmap = (function (_super) {
|
12 | (0, tslib_1.__extends)(Heatmap, _super);
|
13 | function Heatmap() {
|
14 | var _this = _super !== null && _super.apply(this, arguments) || this;
|
15 | _this.type = 'heatmap';
|
16 | _this.paletteCache = {};
|
17 | return _this;
|
18 | }
|
19 | Heatmap.prototype.updateElements = function (mappingDataArray, isUpdate) {
|
20 | if (isUpdate === void 0) { isUpdate = false; }
|
21 | for (var i = 0; i < mappingDataArray.length; i++) {
|
22 | var mappingData = mappingDataArray[i];
|
23 | var range = this.prepareRange(mappingData);
|
24 | var radius = this.prepareSize();
|
25 | var blur_1 = (0, util_1.get)(this.styleOption, ['cfg', 'shadowBlur']);
|
26 | if (!(0, util_1.isNumber)(blur_1)) {
|
27 | blur_1 = radius / 2;
|
28 | }
|
29 | this.prepareGreyScaleBlurredCircle(radius, blur_1);
|
30 | this.drawWithRange(mappingData, range, radius, blur_1);
|
31 | }
|
32 | };
|
33 |
|
34 | Heatmap.prototype.color = function (field, cfg) {
|
35 | this.createAttrOption('color', field, typeof cfg !== 'function' ? cfg : '');
|
36 | return this;
|
37 | };
|
38 | |
39 |
|
40 |
|
41 | Heatmap.prototype.clear = function () {
|
42 | _super.prototype.clear.call(this);
|
43 | this.clearShadowCanvasCtx();
|
44 | this.paletteCache = {};
|
45 | };
|
46 | Heatmap.prototype.prepareRange = function (data) {
|
47 | var colorAttr = this.getAttribute('color');
|
48 | var colorField = colorAttr.getFields()[0];
|
49 | var min = Infinity;
|
50 | var max = -Infinity;
|
51 | data.forEach(function (row) {
|
52 | var value = row[constant_1.FIELD_ORIGIN][colorField];
|
53 | if (value > max) {
|
54 | max = value;
|
55 | }
|
56 | if (value < min) {
|
57 | min = value;
|
58 | }
|
59 | });
|
60 | if (min === max) {
|
61 | min = max - 1;
|
62 | }
|
63 | return [min, max];
|
64 | };
|
65 | Heatmap.prototype.prepareSize = function () {
|
66 | var radius = this.getDefaultValue('size');
|
67 | if (!(0, util_1.isNumber)(radius)) {
|
68 | radius = this.getDefaultSize();
|
69 | }
|
70 | return radius;
|
71 | };
|
72 | Heatmap.prototype.prepareGreyScaleBlurredCircle = function (radius, blur) {
|
73 | var grayScaleBlurredCanvas = this.getGrayScaleBlurredCanvas();
|
74 | var r2 = radius + blur;
|
75 | var ctx = grayScaleBlurredCanvas.getContext('2d');
|
76 | grayScaleBlurredCanvas.width = grayScaleBlurredCanvas.height = r2 * 2;
|
77 | ctx.clearRect(0, 0, grayScaleBlurredCanvas.width, grayScaleBlurredCanvas.height);
|
78 | ctx.shadowOffsetX = ctx.shadowOffsetY = r2 * 2;
|
79 | ctx.shadowBlur = blur;
|
80 | ctx.shadowColor = 'black';
|
81 | ctx.beginPath();
|
82 | ctx.arc(-r2, -r2, radius, 0, Math.PI * 2, true);
|
83 | ctx.closePath();
|
84 | ctx.fill();
|
85 | };
|
86 | Heatmap.prototype.drawWithRange = function (data, range, radius, blur) {
|
87 |
|
88 | var _a = this.coordinate, start = _a.start, end = _a.end;
|
89 | var width = this.coordinate.getWidth();
|
90 | var height = this.coordinate.getHeight();
|
91 |
|
92 | var colorAttr = this.getAttribute('color');
|
93 | var valueField = colorAttr.getFields()[0];
|
94 |
|
95 | this.clearShadowCanvasCtx();
|
96 | var ctx = this.getShadowCanvasCtx();
|
97 |
|
98 | if (range) {
|
99 | data = data.filter(function (row) {
|
100 | return row[constant_1.FIELD_ORIGIN][valueField] <= range[1] && row[constant_1.FIELD_ORIGIN][valueField] >= range[0];
|
101 | });
|
102 | }
|
103 |
|
104 | var scale = this.scales[valueField];
|
105 | for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
|
106 | var obj = data_1[_i];
|
107 | var _b = this.getDrawCfg(obj), x = _b.x, y = _b.y;
|
108 | var alpha = scale.scale(obj[constant_1.FIELD_ORIGIN][valueField]);
|
109 | this.drawGrayScaleBlurredCircle(x - start.x, y - end.y, radius + blur, alpha, ctx);
|
110 | }
|
111 |
|
112 | var colored = ctx.getImageData(0, 0, width, height);
|
113 | this.clearShadowCanvasCtx();
|
114 | this.colorize(colored);
|
115 | ctx.putImageData(colored, 0, 0);
|
116 | var imageShape = this.getImageShape();
|
117 | imageShape.attr('x', start.x);
|
118 | imageShape.attr('y', end.y);
|
119 | imageShape.attr('width', width);
|
120 | imageShape.attr('height', height);
|
121 | imageShape.attr('img', ctx.canvas);
|
122 | imageShape.set('origin', this.getShapeInfo(data));
|
123 | };
|
124 | Heatmap.prototype.getDefaultSize = function () {
|
125 | var position = this.getAttribute('position');
|
126 | var coordinate = this.coordinate;
|
127 | return Math.min(coordinate.getWidth() / (position.scales[0].ticks.length * 4), coordinate.getHeight() / (position.scales[1].ticks.length * 4));
|
128 | };
|
129 | Heatmap.prototype.clearShadowCanvasCtx = function () {
|
130 | var ctx = this.getShadowCanvasCtx();
|
131 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
132 | };
|
133 | Heatmap.prototype.getShadowCanvasCtx = function () {
|
134 | var canvas = this.shadowCanvas;
|
135 | if (!canvas) {
|
136 | canvas = document.createElement('canvas');
|
137 | this.shadowCanvas = canvas;
|
138 | }
|
139 | canvas.width = this.coordinate.getWidth();
|
140 | canvas.height = this.coordinate.getHeight();
|
141 | return canvas.getContext('2d');
|
142 | };
|
143 | Heatmap.prototype.getGrayScaleBlurredCanvas = function () {
|
144 | if (!this.grayScaleBlurredCanvas) {
|
145 | this.grayScaleBlurredCanvas = document.createElement('canvas');
|
146 | }
|
147 | return this.grayScaleBlurredCanvas;
|
148 | };
|
149 | Heatmap.prototype.drawGrayScaleBlurredCircle = function (x, y, r, alpha, ctx) {
|
150 | var grayScaleBlurredCanvas = this.getGrayScaleBlurredCanvas();
|
151 | ctx.globalAlpha = alpha;
|
152 | ctx.drawImage(grayScaleBlurredCanvas, x - r, y - r);
|
153 | };
|
154 | Heatmap.prototype.colorize = function (img) {
|
155 | var colorAttr = this.getAttribute('color');
|
156 | var pixels = img.data;
|
157 | var paletteCache = this.paletteCache;
|
158 | for (var i = 3; i < pixels.length; i += 4) {
|
159 | var alpha = pixels[i];
|
160 | if ((0, util_1.isNumber)(alpha)) {
|
161 | var palette = paletteCache[alpha] ? paletteCache[alpha] : color_util_1.default.rgb2arr(colorAttr.gradient(alpha / 256));
|
162 | pixels[i - 3] = palette[0];
|
163 | pixels[i - 2] = palette[1];
|
164 | pixels[i - 1] = palette[2];
|
165 | pixels[i] = alpha;
|
166 | }
|
167 | }
|
168 | };
|
169 | Heatmap.prototype.getImageShape = function () {
|
170 | var imageShape = this.imageShape;
|
171 | if (imageShape) {
|
172 | return imageShape;
|
173 | }
|
174 | var container = this.container;
|
175 | imageShape = container.addShape({
|
176 | type: 'image',
|
177 | attrs: {},
|
178 | });
|
179 | this.imageShape = imageShape;
|
180 | return imageShape;
|
181 | };
|
182 | Heatmap.prototype.getShapeInfo = function (mappingData) {
|
183 | var shapeCfg = this.getDrawCfg(mappingData[0]);
|
184 | var data = mappingData.map(function (obj) {
|
185 | return obj[constant_1.FIELD_ORIGIN];
|
186 | });
|
187 | return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, shapeCfg), { mappingData: mappingData, data: data });
|
188 | };
|
189 | return Heatmap;
|
190 | }(base_1.default));
|
191 | exports.default = Heatmap;
|
192 |
|
\ | No newline at end of file |