HeatmapView.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  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') {
  118. this._renderOnCartesianAndCalendar(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._renderOnCartesianAndCalendar(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._renderOnCartesianAndCalendar = function (seriesModel, api, start, end, incremental) {
  142. var coordSys = seriesModel.coordinateSystem;
  143. var isCartesian2d = isCoordinateSystemType(coordSys, 'cartesian2d');
  144. var width;
  145. var height;
  146. var xAxisExtent;
  147. var yAxisExtent;
  148. if (isCartesian2d) {
  149. var xAxis = coordSys.getAxis('x');
  150. var yAxis = coordSys.getAxis('y');
  151. if (process.env.NODE_ENV !== 'production') {
  152. if (!(xAxis.type === 'category' && yAxis.type === 'category')) {
  153. throw new Error('Heatmap on cartesian must have two category axes');
  154. }
  155. if (!(xAxis.onBand && yAxis.onBand)) {
  156. throw new Error('Heatmap on cartesian must have two axes with boundaryGap true');
  157. }
  158. }
  159. // add 0.5px to avoid the gaps
  160. width = xAxis.getBandWidth() + .5;
  161. height = yAxis.getBandWidth() + .5;
  162. xAxisExtent = xAxis.scale.getExtent();
  163. yAxisExtent = yAxis.scale.getExtent();
  164. }
  165. var group = this.group;
  166. var data = seriesModel.getData();
  167. var emphasisStyle = seriesModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
  168. var blurStyle = seriesModel.getModel(['blur', 'itemStyle']).getItemStyle();
  169. var selectStyle = seriesModel.getModel(['select', 'itemStyle']).getItemStyle();
  170. var borderRadius = seriesModel.get(['itemStyle', 'borderRadius']);
  171. var labelStatesModels = getLabelStatesModels(seriesModel);
  172. var emphasisModel = seriesModel.getModel('emphasis');
  173. var focus = emphasisModel.get('focus');
  174. var blurScope = emphasisModel.get('blurScope');
  175. var emphasisDisabled = emphasisModel.get('disabled');
  176. var dataDims = isCartesian2d ? [data.mapDimension('x'), data.mapDimension('y'), data.mapDimension('value')] : [data.mapDimension('time'), data.mapDimension('value')];
  177. for (var idx = start; idx < end; idx++) {
  178. var rect = void 0;
  179. var style = data.getItemVisual(idx, 'style');
  180. if (isCartesian2d) {
  181. var dataDimX = data.get(dataDims[0], idx);
  182. var dataDimY = data.get(dataDims[1], idx);
  183. // Ignore empty data and out of extent data
  184. if (isNaN(data.get(dataDims[2], idx)) || isNaN(dataDimX) || isNaN(dataDimY) || dataDimX < xAxisExtent[0] || dataDimX > xAxisExtent[1] || dataDimY < yAxisExtent[0] || dataDimY > yAxisExtent[1]) {
  185. continue;
  186. }
  187. var point = coordSys.dataToPoint([dataDimX, dataDimY]);
  188. rect = new graphic.Rect({
  189. shape: {
  190. x: point[0] - width / 2,
  191. y: point[1] - height / 2,
  192. width: width,
  193. height: height
  194. },
  195. style: style
  196. });
  197. } else {
  198. // Ignore empty data
  199. if (isNaN(data.get(dataDims[1], idx))) {
  200. continue;
  201. }
  202. rect = new graphic.Rect({
  203. z2: 1,
  204. shape: coordSys.dataToRect([data.get(dataDims[0], idx)]).contentShape,
  205. style: style
  206. });
  207. }
  208. // Optimization for large dataset
  209. if (data.hasItemOption) {
  210. var itemModel = data.getItemModel(idx);
  211. var emphasisModel_1 = itemModel.getModel('emphasis');
  212. emphasisStyle = emphasisModel_1.getModel('itemStyle').getItemStyle();
  213. blurStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
  214. selectStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle();
  215. // Each item value struct in the data would be firstly
  216. // {
  217. // itemStyle: { borderRadius: [30, 30] },
  218. // value: [2022, 02, 22]
  219. // }
  220. borderRadius = itemModel.get(['itemStyle', 'borderRadius']);
  221. focus = emphasisModel_1.get('focus');
  222. blurScope = emphasisModel_1.get('blurScope');
  223. emphasisDisabled = emphasisModel_1.get('disabled');
  224. labelStatesModels = getLabelStatesModels(itemModel);
  225. }
  226. rect.shape.r = borderRadius;
  227. var rawValue = seriesModel.getRawValue(idx);
  228. var defaultText = '-';
  229. if (rawValue && rawValue[2] != null) {
  230. defaultText = rawValue[2] + '';
  231. }
  232. setLabelStyle(rect, labelStatesModels, {
  233. labelFetcher: seriesModel,
  234. labelDataIndex: idx,
  235. defaultOpacity: style.opacity,
  236. defaultText: defaultText
  237. });
  238. rect.ensureState('emphasis').style = emphasisStyle;
  239. rect.ensureState('blur').style = blurStyle;
  240. rect.ensureState('select').style = selectStyle;
  241. toggleHoverEmphasis(rect, focus, blurScope, emphasisDisabled);
  242. rect.incremental = incremental;
  243. // PENDING
  244. if (incremental) {
  245. // Rect must use hover layer if it's incremental.
  246. rect.states.emphasis.hoverLayer = true;
  247. }
  248. group.add(rect);
  249. data.setItemGraphicEl(idx, rect);
  250. if (this._progressiveEls) {
  251. this._progressiveEls.push(rect);
  252. }
  253. }
  254. };
  255. HeatmapView.prototype._renderOnGeo = function (geo, seriesModel, visualMapModel, api) {
  256. var inRangeVisuals = visualMapModel.targetVisuals.inRange;
  257. var outOfRangeVisuals = visualMapModel.targetVisuals.outOfRange;
  258. // if (!visualMapping) {
  259. // throw new Error('Data range must have color visuals');
  260. // }
  261. var data = seriesModel.getData();
  262. var hmLayer = this._hmLayer || this._hmLayer || new HeatmapLayer();
  263. hmLayer.blurSize = seriesModel.get('blurSize');
  264. hmLayer.pointSize = seriesModel.get('pointSize');
  265. hmLayer.minOpacity = seriesModel.get('minOpacity');
  266. hmLayer.maxOpacity = seriesModel.get('maxOpacity');
  267. var rect = geo.getViewRect().clone();
  268. var roamTransform = geo.getRoamTransform();
  269. rect.applyTransform(roamTransform);
  270. // Clamp on viewport
  271. var x = Math.max(rect.x, 0);
  272. var y = Math.max(rect.y, 0);
  273. var x2 = Math.min(rect.width + rect.x, api.getWidth());
  274. var y2 = Math.min(rect.height + rect.y, api.getHeight());
  275. var width = x2 - x;
  276. var height = y2 - y;
  277. var dims = [data.mapDimension('lng'), data.mapDimension('lat'), data.mapDimension('value')];
  278. var points = data.mapArray(dims, function (lng, lat, value) {
  279. var pt = geo.dataToPoint([lng, lat]);
  280. pt[0] -= x;
  281. pt[1] -= y;
  282. pt.push(value);
  283. return pt;
  284. });
  285. var dataExtent = visualMapModel.getExtent();
  286. var isInRange = visualMapModel.type === 'visualMap.continuous' ? getIsInContinuousRange(dataExtent, visualMapModel.option.range) : getIsInPiecewiseRange(dataExtent, visualMapModel.getPieceList(), visualMapModel.option.selected);
  287. hmLayer.update(points, width, height, inRangeVisuals.color.getNormalizer(), {
  288. inRange: inRangeVisuals.color.getColorMapper(),
  289. outOfRange: outOfRangeVisuals.color.getColorMapper()
  290. }, isInRange);
  291. var img = new graphic.Image({
  292. style: {
  293. width: width,
  294. height: height,
  295. x: x,
  296. y: y,
  297. image: hmLayer.canvas
  298. },
  299. silent: true
  300. });
  301. this.group.add(img);
  302. };
  303. HeatmapView.type = 'heatmap';
  304. return HeatmapView;
  305. }(ChartView);
  306. export default HeatmapView;