HeatmapView.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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; // Try to find in the location of the last found
  59. for (i = lastIndex; i < len; i++) {
  60. var interval = pieceList[i].interval;
  61. if (interval[0] <= val && val <= interval[1]) {
  62. lastIndex = i;
  63. break;
  64. }
  65. }
  66. if (i === len) {
  67. // Not found, back interation
  68. for (i = lastIndex - 1; i >= 0; i--) {
  69. var interval = pieceList[i].interval;
  70. if (interval[0] <= val && val <= interval[1]) {
  71. lastIndex = i;
  72. break;
  73. }
  74. }
  75. }
  76. return i >= 0 && i < len && selected[i];
  77. };
  78. }
  79. function getIsInContinuousRange(dataExtent, range) {
  80. var dataSpan = dataExtent[1] - dataExtent[0];
  81. range = [(range[0] - dataExtent[0]) / dataSpan, (range[1] - dataExtent[0]) / dataSpan];
  82. return function (val) {
  83. return val >= range[0] && val <= range[1];
  84. };
  85. }
  86. function isGeoCoordSys(coordSys) {
  87. var dimensions = coordSys.dimensions; // Not use coorSys.type === 'geo' because coordSys maybe extended
  88. return dimensions[0] === 'lng' && dimensions[1] === 'lat';
  89. }
  90. var HeatmapView =
  91. /** @class */
  92. 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. } // Clear previously rendered progressive elements.
  113. this._progressiveEls = null;
  114. this.group.removeAll();
  115. var coordSys = seriesModel.coordinateSystem;
  116. if (coordSys.type === 'cartesian2d' || coordSys.type === 'calendar') {
  117. this._renderOnCartesianAndCalendar(seriesModel, api, 0, seriesModel.getData().count());
  118. } else if (isGeoCoordSys(coordSys)) {
  119. this._renderOnGeo(coordSys, seriesModel, visualMapOfThisSeries, api);
  120. }
  121. };
  122. HeatmapView.prototype.incrementalPrepareRender = function (seriesModel, ecModel, api) {
  123. this.group.removeAll();
  124. };
  125. HeatmapView.prototype.incrementalRender = function (params, seriesModel, ecModel, api) {
  126. var coordSys = seriesModel.coordinateSystem;
  127. if (coordSys) {
  128. // geo does not support incremental rendering?
  129. if (isGeoCoordSys(coordSys)) {
  130. this.render(seriesModel, ecModel, api);
  131. } else {
  132. this._progressiveEls = [];
  133. this._renderOnCartesianAndCalendar(seriesModel, api, params.start, params.end, true);
  134. }
  135. }
  136. };
  137. HeatmapView.prototype.eachRendered = function (cb) {
  138. graphic.traverseElements(this._progressiveEls || this.group, cb);
  139. };
  140. HeatmapView.prototype._renderOnCartesianAndCalendar = function (seriesModel, api, start, end, incremental) {
  141. var coordSys = seriesModel.coordinateSystem;
  142. var isCartesian2d = isCoordinateSystemType(coordSys, 'cartesian2d');
  143. var width;
  144. var height;
  145. var xAxisExtent;
  146. var yAxisExtent;
  147. if (isCartesian2d) {
  148. var xAxis = coordSys.getAxis('x');
  149. var yAxis = coordSys.getAxis('y');
  150. if (process.env.NODE_ENV !== 'production') {
  151. if (!(xAxis.type === 'category' && yAxis.type === 'category')) {
  152. throw new Error('Heatmap on cartesian must have two category axes');
  153. }
  154. if (!(xAxis.onBand && yAxis.onBand)) {
  155. throw new Error('Heatmap on cartesian must have two axes with boundaryGap true');
  156. }
  157. } // add 0.5px to avoid the gaps
  158. width = xAxis.getBandWidth() + .5;
  159. height = yAxis.getBandWidth() + .5;
  160. xAxisExtent = xAxis.scale.getExtent();
  161. yAxisExtent = yAxis.scale.getExtent();
  162. }
  163. var group = this.group;
  164. var data = seriesModel.getData();
  165. var emphasisStyle = seriesModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
  166. var blurStyle = seriesModel.getModel(['blur', 'itemStyle']).getItemStyle();
  167. var selectStyle = seriesModel.getModel(['select', 'itemStyle']).getItemStyle();
  168. var borderRadius = seriesModel.get(['itemStyle', 'borderRadius']);
  169. var labelStatesModels = getLabelStatesModels(seriesModel);
  170. var emphasisModel = seriesModel.getModel('emphasis');
  171. var focus = emphasisModel.get('focus');
  172. var blurScope = emphasisModel.get('blurScope');
  173. var emphasisDisabled = emphasisModel.get('disabled');
  174. var dataDims = isCartesian2d ? [data.mapDimension('x'), data.mapDimension('y'), data.mapDimension('value')] : [data.mapDimension('time'), data.mapDimension('value')];
  175. for (var idx = start; idx < end; idx++) {
  176. var rect = void 0;
  177. var style = data.getItemVisual(idx, 'style');
  178. if (isCartesian2d) {
  179. var dataDimX = data.get(dataDims[0], idx);
  180. var dataDimY = data.get(dataDims[1], idx); // Ignore empty data and out of extent data
  181. if (isNaN(data.get(dataDims[2], idx)) || dataDimX < xAxisExtent[0] || dataDimX > xAxisExtent[1] || dataDimY < yAxisExtent[0] || dataDimY > yAxisExtent[1]) {
  182. continue;
  183. }
  184. var point = coordSys.dataToPoint([dataDimX, dataDimY]);
  185. rect = new graphic.Rect({
  186. shape: {
  187. x: point[0] - width / 2,
  188. y: point[1] - height / 2,
  189. width: width,
  190. height: height
  191. },
  192. style: style
  193. });
  194. } else {
  195. // Ignore empty data
  196. if (isNaN(data.get(dataDims[1], idx))) {
  197. continue;
  198. }
  199. rect = new graphic.Rect({
  200. z2: 1,
  201. shape: coordSys.dataToRect([data.get(dataDims[0], idx)]).contentShape,
  202. style: style
  203. });
  204. } // Optimization for large datset
  205. if (data.hasItemOption) {
  206. var itemModel = data.getItemModel(idx);
  207. var emphasisModel_1 = itemModel.getModel('emphasis');
  208. emphasisStyle = emphasisModel_1.getModel('itemStyle').getItemStyle();
  209. blurStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
  210. selectStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle(); // Each item value struct in the data would be firstly
  211. // {
  212. // itemStyle: { borderRadius: [30, 30] },
  213. // value: [2022, 02, 22]
  214. // }
  215. borderRadius = itemModel.get(['itemStyle', 'borderRadius']);
  216. focus = emphasisModel_1.get('focus');
  217. blurScope = emphasisModel_1.get('blurScope');
  218. emphasisDisabled = emphasisModel_1.get('disabled');
  219. labelStatesModels = getLabelStatesModels(itemModel);
  220. }
  221. rect.shape.r = borderRadius;
  222. var rawValue = seriesModel.getRawValue(idx);
  223. var defaultText = '-';
  224. if (rawValue && rawValue[2] != null) {
  225. defaultText = rawValue[2] + '';
  226. }
  227. setLabelStyle(rect, labelStatesModels, {
  228. labelFetcher: seriesModel,
  229. labelDataIndex: idx,
  230. defaultOpacity: style.opacity,
  231. defaultText: defaultText
  232. });
  233. rect.ensureState('emphasis').style = emphasisStyle;
  234. rect.ensureState('blur').style = blurStyle;
  235. rect.ensureState('select').style = selectStyle;
  236. toggleHoverEmphasis(rect, focus, blurScope, emphasisDisabled);
  237. rect.incremental = incremental; // PENDING
  238. if (incremental) {
  239. // Rect must use hover layer if it's incremental.
  240. rect.states.emphasis.hoverLayer = true;
  241. }
  242. group.add(rect);
  243. data.setItemGraphicEl(idx, rect);
  244. if (this._progressiveEls) {
  245. this._progressiveEls.push(rect);
  246. }
  247. }
  248. };
  249. HeatmapView.prototype._renderOnGeo = function (geo, seriesModel, visualMapModel, api) {
  250. var inRangeVisuals = visualMapModel.targetVisuals.inRange;
  251. var outOfRangeVisuals = visualMapModel.targetVisuals.outOfRange; // if (!visualMapping) {
  252. // throw new Error('Data range must have color visuals');
  253. // }
  254. var data = seriesModel.getData();
  255. var hmLayer = this._hmLayer || this._hmLayer || new HeatmapLayer();
  256. hmLayer.blurSize = seriesModel.get('blurSize');
  257. hmLayer.pointSize = seriesModel.get('pointSize');
  258. hmLayer.minOpacity = seriesModel.get('minOpacity');
  259. hmLayer.maxOpacity = seriesModel.get('maxOpacity');
  260. var rect = geo.getViewRect().clone();
  261. var roamTransform = geo.getRoamTransform();
  262. rect.applyTransform(roamTransform); // Clamp on viewport
  263. var x = Math.max(rect.x, 0);
  264. var y = Math.max(rect.y, 0);
  265. var x2 = Math.min(rect.width + rect.x, api.getWidth());
  266. var y2 = Math.min(rect.height + rect.y, api.getHeight());
  267. var width = x2 - x;
  268. var height = y2 - y;
  269. var dims = [data.mapDimension('lng'), data.mapDimension('lat'), data.mapDimension('value')];
  270. var points = data.mapArray(dims, function (lng, lat, value) {
  271. var pt = geo.dataToPoint([lng, lat]);
  272. pt[0] -= x;
  273. pt[1] -= y;
  274. pt.push(value);
  275. return pt;
  276. });
  277. var dataExtent = visualMapModel.getExtent();
  278. var isInRange = visualMapModel.type === 'visualMap.continuous' ? getIsInContinuousRange(dataExtent, visualMapModel.option.range) : getIsInPiecewiseRange(dataExtent, visualMapModel.getPieceList(), visualMapModel.option.selected);
  279. hmLayer.update(points, width, height, inRangeVisuals.color.getNormalizer(), {
  280. inRange: inRangeVisuals.color.getColorMapper(),
  281. outOfRange: outOfRangeVisuals.color.getColorMapper()
  282. }, isInRange);
  283. var img = new graphic.Image({
  284. style: {
  285. width: width,
  286. height: height,
  287. x: x,
  288. y: y,
  289. image: hmLayer.canvas
  290. },
  291. silent: true
  292. });
  293. this.group.add(img);
  294. };
  295. HeatmapView.type = 'heatmap';
  296. return HeatmapView;
  297. }(ChartView);
  298. export default HeatmapView;