HeatmapView.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import * as graphic from '../../util/graphic.js';
  42. import { toggleHoverEmphasis } from '../../util/states.js';
  43. import HeatmapLayer from './HeatmapLayer.js';
  44. import * as zrUtil from 'zrender/lib/core/util.js';
  45. import ChartView from '../../view/Chart.js';
  46. import { isCoordinateSystemType } from '../../coord/CoordinateSystem.js';
  47. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  48. function getIsInPiecewiseRange(dataExtent, pieceList, selected) {
  49. var dataSpan = dataExtent[1] - dataExtent[0];
  50. pieceList = zrUtil.map(pieceList, function (piece) {
  51. return {
  52. interval: [(piece.interval[0] - dataExtent[0]) / dataSpan, (piece.interval[1] - dataExtent[0]) / dataSpan]
  53. };
  54. });
  55. var len = pieceList.length;
  56. var lastIndex = 0;
  57. return function (val) {
  58. var i;
  59. // Try to find in the location of the last found
  60. for (i = lastIndex; i < len; i++) {
  61. var interval = pieceList[i].interval;
  62. if (interval[0] <= val && val <= interval[1]) {
  63. lastIndex = i;
  64. break;
  65. }
  66. }
  67. if (i === len) {
  68. // Not found, back interation
  69. for (i = lastIndex - 1; i >= 0; i--) {
  70. var interval = pieceList[i].interval;
  71. if (interval[0] <= val && val <= interval[1]) {
  72. lastIndex = i;
  73. break;
  74. }
  75. }
  76. }
  77. return i >= 0 && i < len && selected[i];
  78. };
  79. }
  80. function getIsInContinuousRange(dataExtent, range) {
  81. var dataSpan = dataExtent[1] - dataExtent[0];
  82. range = [(range[0] - dataExtent[0]) / dataSpan, (range[1] - dataExtent[0]) / dataSpan];
  83. return function (val) {
  84. return val >= range[0] && val <= range[1];
  85. };
  86. }
  87. function isGeoCoordSys(coordSys) {
  88. var dimensions = coordSys.dimensions;
  89. // Not use coordSys.type === 'geo' because coordSys maybe extended
  90. return dimensions[0] === 'lng' && dimensions[1] === 'lat';
  91. }
  92. var HeatmapView = /** @class */function (_super) {
  93. __extends(HeatmapView, _super);
  94. function HeatmapView() {
  95. var _this = _super !== null && _super.apply(this, arguments) || this;
  96. _this.type = HeatmapView.type;
  97. return _this;
  98. }
  99. HeatmapView.prototype.render = function (seriesModel, ecModel, api) {
  100. var visualMapOfThisSeries;
  101. ecModel.eachComponent('visualMap', function (visualMap) {
  102. visualMap.eachTargetSeries(function (targetSeries) {
  103. if (targetSeries === seriesModel) {
  104. visualMapOfThisSeries = visualMap;
  105. }
  106. });
  107. });
  108. if (process.env.NODE_ENV !== 'production') {
  109. if (!visualMapOfThisSeries) {
  110. throw new Error('Heatmap must use with visualMap');
  111. }
  112. }
  113. // Clear previously rendered progressive elements.
  114. this._progressiveEls = null;
  115. this.group.removeAll();
  116. var coordSys = seriesModel.coordinateSystem;
  117. if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar' || coordSys.type === 'matrix') {
  118. this._renderOnGridLike(seriesModel, api, 0, seriesModel.getData().count());
  119. } else if (isGeoCoordSys(coordSys)) {
  120. this._renderOnGeo(coordSys, seriesModel, visualMapOfThisSeries, api);
  121. }
  122. };
  123. HeatmapView.prototype.incrementalPrepareRender = function (seriesModel, ecModel, api) {
  124. this.group.removeAll();
  125. };
  126. HeatmapView.prototype.incrementalRender = function (params, seriesModel, ecModel, api) {
  127. var coordSys = seriesModel.coordinateSystem;
  128. if (coordSys) {
  129. // geo does not support incremental rendering?
  130. if (isGeoCoordSys(coordSys)) {
  131. this.render(seriesModel, ecModel, api);
  132. } else {
  133. this._progressiveEls = [];
  134. this._renderOnGridLike(seriesModel, api, params.start, params.end, true);
  135. }
  136. }
  137. };
  138. HeatmapView.prototype.eachRendered = function (cb) {
  139. graphic.traverseElements(this._progressiveEls || this.group, cb);
  140. };
  141. HeatmapView.prototype._renderOnGridLike = function (seriesModel, api, start, end, incremental) {
  142. var coordSys = seriesModel.coordinateSystem;
  143. var isCartesian2d = isCoordinateSystemType(coordSys, 'cartesian2d');
  144. var isMatrix = isCoordinateSystemType(coordSys, 'matrix');
  145. var width;
  146. var height;
  147. var xAxisExtent;
  148. var yAxisExtent;
  149. if (isCartesian2d) {
  150. var xAxis = coordSys.getAxis('x');
  151. var yAxis = coordSys.getAxis('y');
  152. if (process.env.NODE_ENV !== 'production') {
  153. if (!(xAxis.type === 'category' && yAxis.type === 'category')) {
  154. throw new Error('Heatmap on cartesian must have two category axes');
  155. }
  156. if (!(xAxis.onBand && yAxis.onBand)) {
  157. throw new Error('Heatmap on cartesian must have two axes with boundaryGap true');
  158. }
  159. }
  160. // add 0.5px to avoid the gaps
  161. width = xAxis.getBandWidth() + .5;
  162. height = yAxis.getBandWidth() + .5;
  163. xAxisExtent = xAxis.scale.getExtent();
  164. yAxisExtent = yAxis.scale.getExtent();
  165. }
  166. var group = this.group;
  167. var data = seriesModel.getData();
  168. var emphasisStyle = seriesModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
  169. var blurStyle = seriesModel.getModel(['blur', 'itemStyle']).getItemStyle();
  170. var selectStyle = seriesModel.getModel(['select', 'itemStyle']).getItemStyle();
  171. var borderRadius = seriesModel.get(['itemStyle', 'borderRadius']);
  172. var labelStatesModels = getLabelStatesModels(seriesModel);
  173. var emphasisModel = seriesModel.getModel('emphasis');
  174. var focus = emphasisModel.get('focus');
  175. var blurScope = emphasisModel.get('blurScope');
  176. var emphasisDisabled = emphasisModel.get('disabled');
  177. var dataDims = isCartesian2d || isMatrix ? [data.mapDimension('x'), data.mapDimension('y'), data.mapDimension('value')] : [data.mapDimension('time'), data.mapDimension('value')];
  178. for (var idx = start; idx < end; idx++) {
  179. var rect = void 0;
  180. var style = data.getItemVisual(idx, 'style');
  181. if (isCartesian2d) {
  182. var dataDimX = data.get(dataDims[0], idx);
  183. var dataDimY = data.get(dataDims[1], idx);
  184. // Ignore empty data and out of extent data
  185. if (isNaN(data.get(dataDims[2], idx)) || isNaN(dataDimX) || isNaN(dataDimY) || dataDimX < xAxisExtent[0] || dataDimX > xAxisExtent[1] || dataDimY < yAxisExtent[0] || dataDimY > yAxisExtent[1]) {
  186. continue;
  187. }
  188. var point = coordSys.dataToPoint([dataDimX, dataDimY]);
  189. rect = new graphic.Rect({
  190. shape: {
  191. x: point[0] - width / 2,
  192. y: point[1] - height / 2,
  193. width: width,
  194. height: height
  195. },
  196. style: style
  197. });
  198. } else if (isMatrix) {
  199. var shape = coordSys.dataToLayout([data.get(dataDims[0], idx), data.get(dataDims[1], idx)]).rect;
  200. if (zrUtil.eqNaN(shape.x)) {
  201. continue;
  202. }
  203. rect = new graphic.Rect({
  204. z2: 1,
  205. shape: shape,
  206. style: style
  207. });
  208. } else {
  209. // Calendar
  210. // Ignore empty data
  211. if (isNaN(data.get(dataDims[1], idx))) {
  212. continue;
  213. }
  214. var layout = coordSys.dataToLayout([data.get(dataDims[0], idx)]);
  215. var shape = layout.contentRect || layout.rect;
  216. if (zrUtil.eqNaN(shape.x) || zrUtil.eqNaN(shape.y)) {
  217. continue;
  218. }
  219. rect = new graphic.Rect({
  220. z2: 1,
  221. shape: shape,
  222. style: style
  223. });
  224. }
  225. // Optimization for large dataset
  226. if (data.hasItemOption) {
  227. var itemModel = data.getItemModel(idx);
  228. var emphasisModel_1 = itemModel.getModel('emphasis');
  229. emphasisStyle = emphasisModel_1.getModel('itemStyle').getItemStyle();
  230. blurStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
  231. selectStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle();
  232. // Each item value struct in the data would be firstly
  233. // {
  234. // itemStyle: { borderRadius: [30, 30] },
  235. // value: [2022, 02, 22]
  236. // }
  237. borderRadius = itemModel.get(['itemStyle', 'borderRadius']);
  238. focus = emphasisModel_1.get('focus');
  239. blurScope = emphasisModel_1.get('blurScope');
  240. emphasisDisabled = emphasisModel_1.get('disabled');
  241. labelStatesModels = getLabelStatesModels(itemModel);
  242. }
  243. rect.shape.r = borderRadius;
  244. var rawValue = seriesModel.getRawValue(idx);
  245. var defaultText = '-';
  246. if (rawValue && rawValue[2] != null) {
  247. defaultText = rawValue[2] + '';
  248. }
  249. setLabelStyle(rect, labelStatesModels, {
  250. labelFetcher: seriesModel,
  251. labelDataIndex: idx,
  252. defaultOpacity: style.opacity,
  253. defaultText: defaultText
  254. });
  255. rect.ensureState('emphasis').style = emphasisStyle;
  256. rect.ensureState('blur').style = blurStyle;
  257. rect.ensureState('select').style = selectStyle;
  258. toggleHoverEmphasis(rect, focus, blurScope, emphasisDisabled);
  259. rect.incremental = incremental;
  260. // PENDING
  261. if (incremental) {
  262. // Rect must use hover layer if it's incremental.
  263. rect.states.emphasis.hoverLayer = true;
  264. }
  265. group.add(rect);
  266. data.setItemGraphicEl(idx, rect);
  267. if (this._progressiveEls) {
  268. this._progressiveEls.push(rect);
  269. }
  270. }
  271. };
  272. HeatmapView.prototype._renderOnGeo = function (geo, seriesModel, visualMapModel, api) {
  273. var inRangeVisuals = visualMapModel.targetVisuals.inRange;
  274. var outOfRangeVisuals = visualMapModel.targetVisuals.outOfRange;
  275. // if (!visualMapping) {
  276. // throw new Error('Data range must have color visuals');
  277. // }
  278. var data = seriesModel.getData();
  279. var hmLayer = this._hmLayer || this._hmLayer || new HeatmapLayer();
  280. hmLayer.blurSize = seriesModel.get('blurSize');
  281. hmLayer.pointSize = seriesModel.get('pointSize');
  282. hmLayer.minOpacity = seriesModel.get('minOpacity');
  283. hmLayer.maxOpacity = seriesModel.get('maxOpacity');
  284. var rect = geo.getViewRect().clone();
  285. var roamTransform = geo.getRoamTransform();
  286. rect.applyTransform(roamTransform);
  287. // Clamp on viewport
  288. var x = Math.max(rect.x, 0);
  289. var y = Math.max(rect.y, 0);
  290. var x2 = Math.min(rect.width + rect.x, api.getWidth());
  291. var y2 = Math.min(rect.height + rect.y, api.getHeight());
  292. var width = x2 - x;
  293. var height = y2 - y;
  294. var dims = [data.mapDimension('lng'), data.mapDimension('lat'), data.mapDimension('value')];
  295. var points = data.mapArray(dims, function (lng, lat, value) {
  296. var pt = geo.dataToPoint([lng, lat]);
  297. pt[0] -= x;
  298. pt[1] -= y;
  299. pt.push(value);
  300. return pt;
  301. });
  302. var dataExtent = visualMapModel.getExtent();
  303. var isInRange = visualMapModel.type === 'visualMap.continuous' ? getIsInContinuousRange(dataExtent, visualMapModel.option.range) : getIsInPiecewiseRange(dataExtent, visualMapModel.getPieceList(), visualMapModel.option.selected);
  304. hmLayer.update(points, width, height, inRangeVisuals.color.getNormalizer(), {
  305. inRange: inRangeVisuals.color.getColorMapper(),
  306. outOfRange: outOfRangeVisuals.color.getColorMapper()
  307. }, isInRange);
  308. var img = new graphic.Image({
  309. style: {
  310. width: width,
  311. height: height,
  312. x: x,
  313. y: y,
  314. image: hmLayer.canvas
  315. },
  316. silent: true
  317. });
  318. this.group.add(img);
  319. };
  320. HeatmapView.type = 'heatmap';
  321. return HeatmapView;
  322. }(ChartView);
  323. export default HeatmapView;