BarView.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032
  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 Path from 'zrender/lib/graphic/Path.js';
  42. import Group from 'zrender/lib/graphic/Group.js';
  43. import { extend, each, map } from 'zrender/lib/core/util.js';
  44. import { Rect, Sector, updateProps, initProps, removeElementWithFadeOut, traverseElements } from '../../util/graphic.js';
  45. import { getECData } from '../../util/innerStore.js';
  46. import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states.js';
  47. import { setLabelStyle, getLabelStatesModels, setLabelValueAnimation, labelInner } from '../../label/labelStyle.js';
  48. import { throttle } from '../../util/throttle.js';
  49. import { createClipPath } from '../helper/createClipPathFromCoordSys.js';
  50. import Sausage from '../../util/shape/sausage.js';
  51. import ChartView from '../../view/Chart.js';
  52. import { isCoordinateSystemType } from '../../coord/CoordinateSystem.js';
  53. import { getDefaultLabel, getDefaultInterpolatedLabel } from '../helper/labelHelper.js';
  54. import { warn } from '../../util/log.js';
  55. import { createSectorCalculateTextPosition, setSectorTextRotation } from '../../label/sectorLabel.js';
  56. import { saveOldStyle } from '../../animation/basicTrasition.js';
  57. var mathMax = Math.max;
  58. var mathMin = Math.min;
  59. function getClipArea(coord, data) {
  60. var coordSysClipArea = coord.getArea && coord.getArea();
  61. if (isCoordinateSystemType(coord, 'cartesian2d')) {
  62. var baseAxis = coord.getBaseAxis(); // When boundaryGap is false or using time axis. bar may exceed the grid.
  63. // We should not clip this part.
  64. // See test/bar2.html
  65. if (baseAxis.type !== 'category' || !baseAxis.onBand) {
  66. var expandWidth = data.getLayout('bandWidth');
  67. if (baseAxis.isHorizontal()) {
  68. coordSysClipArea.x -= expandWidth;
  69. coordSysClipArea.width += expandWidth * 2;
  70. } else {
  71. coordSysClipArea.y -= expandWidth;
  72. coordSysClipArea.height += expandWidth * 2;
  73. }
  74. }
  75. }
  76. return coordSysClipArea;
  77. }
  78. var BarView =
  79. /** @class */
  80. function (_super) {
  81. __extends(BarView, _super);
  82. function BarView() {
  83. var _this = _super.call(this) || this;
  84. _this.type = BarView.type;
  85. _this._isFirstFrame = true;
  86. return _this;
  87. }
  88. BarView.prototype.render = function (seriesModel, ecModel, api, payload) {
  89. this._model = seriesModel;
  90. this._removeOnRenderedListener(api);
  91. this._updateDrawMode(seriesModel);
  92. var coordinateSystemType = seriesModel.get('coordinateSystem');
  93. if (coordinateSystemType === 'cartesian2d' || coordinateSystemType === 'polar') {
  94. // Clear previously rendered progressive elements.
  95. this._progressiveEls = null;
  96. this._isLargeDraw ? this._renderLarge(seriesModel, ecModel, api) : this._renderNormal(seriesModel, ecModel, api, payload);
  97. } else if (process.env.NODE_ENV !== 'production') {
  98. warn('Only cartesian2d and polar supported for bar.');
  99. }
  100. };
  101. BarView.prototype.incrementalPrepareRender = function (seriesModel) {
  102. this._clear();
  103. this._updateDrawMode(seriesModel); // incremental also need to clip, otherwise might be overlow.
  104. // But must not set clip in each frame, otherwise all of the children will be marked redraw.
  105. this._updateLargeClip(seriesModel);
  106. };
  107. BarView.prototype.incrementalRender = function (params, seriesModel) {
  108. // Reset
  109. this._progressiveEls = []; // Do not support progressive in normal mode.
  110. this._incrementalRenderLarge(params, seriesModel);
  111. };
  112. BarView.prototype.eachRendered = function (cb) {
  113. traverseElements(this._progressiveEls || this.group, cb);
  114. };
  115. BarView.prototype._updateDrawMode = function (seriesModel) {
  116. var isLargeDraw = seriesModel.pipelineContext.large;
  117. if (this._isLargeDraw == null || isLargeDraw !== this._isLargeDraw) {
  118. this._isLargeDraw = isLargeDraw;
  119. this._clear();
  120. }
  121. };
  122. BarView.prototype._renderNormal = function (seriesModel, ecModel, api, payload) {
  123. var group = this.group;
  124. var data = seriesModel.getData();
  125. var oldData = this._data;
  126. var coord = seriesModel.coordinateSystem;
  127. var baseAxis = coord.getBaseAxis();
  128. var isHorizontalOrRadial;
  129. if (coord.type === 'cartesian2d') {
  130. isHorizontalOrRadial = baseAxis.isHorizontal();
  131. } else if (coord.type === 'polar') {
  132. isHorizontalOrRadial = baseAxis.dim === 'angle';
  133. }
  134. var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
  135. var realtimeSortCfg = shouldRealtimeSort(seriesModel, coord);
  136. if (realtimeSortCfg) {
  137. this._enableRealtimeSort(realtimeSortCfg, data, api);
  138. }
  139. var needsClip = seriesModel.get('clip', true) || realtimeSortCfg;
  140. var coordSysClipArea = getClipArea(coord, data); // If there is clipPath created in large mode. Remove it.
  141. group.removeClipPath(); // We don't use clipPath in normal mode because we needs a perfect animation
  142. // And don't want the label are clipped.
  143. var roundCap = seriesModel.get('roundCap', true);
  144. var drawBackground = seriesModel.get('showBackground', true);
  145. var backgroundModel = seriesModel.getModel('backgroundStyle');
  146. var barBorderRadius = backgroundModel.get('borderRadius') || 0;
  147. var bgEls = [];
  148. var oldBgEls = this._backgroundEls;
  149. var isInitSort = payload && payload.isInitSort;
  150. var isChangeOrder = payload && payload.type === 'changeAxisOrder';
  151. function createBackground(dataIndex) {
  152. var bgLayout = getLayout[coord.type](data, dataIndex);
  153. var bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
  154. bgEl.useStyle(backgroundModel.getItemStyle()); // Only cartesian2d support borderRadius.
  155. if (coord.type === 'cartesian2d') {
  156. bgEl.setShape('r', barBorderRadius);
  157. }
  158. bgEls[dataIndex] = bgEl;
  159. return bgEl;
  160. }
  161. ;
  162. data.diff(oldData).add(function (dataIndex) {
  163. var itemModel = data.getItemModel(dataIndex);
  164. var layout = getLayout[coord.type](data, dataIndex, itemModel);
  165. if (drawBackground) {
  166. createBackground(dataIndex);
  167. } // If dataZoom in filteMode: 'empty', the baseValue can be set as NaN in "axisProxy".
  168. if (!data.hasValue(dataIndex) || !isValidLayout[coord.type](layout)) {
  169. return;
  170. }
  171. var isClipped = false;
  172. if (needsClip) {
  173. // Clip will modify the layout params.
  174. // And return a boolean to determine if the shape are fully clipped.
  175. isClipped = clip[coord.type](coordSysClipArea, layout);
  176. }
  177. var el = elementCreator[coord.type](seriesModel, data, dataIndex, layout, isHorizontalOrRadial, animationModel, baseAxis.model, false, roundCap);
  178. if (realtimeSortCfg) {
  179. /**
  180. * Force label animation because even if the element is
  181. * ignored because it's clipped, it may not be clipped after
  182. * changing order. Then, if not using forceLabelAnimation,
  183. * the label animation was never started, in which case,
  184. * the label will be the final value and doesn't have label
  185. * animation.
  186. */
  187. el.forceLabelAnimation = true;
  188. }
  189. updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
  190. if (isInitSort) {
  191. el.attr({
  192. shape: layout
  193. });
  194. } else if (realtimeSortCfg) {
  195. updateRealtimeAnimation(realtimeSortCfg, animationModel, el, layout, dataIndex, isHorizontalOrRadial, false, false);
  196. } else {
  197. initProps(el, {
  198. shape: layout
  199. }, seriesModel, dataIndex);
  200. }
  201. data.setItemGraphicEl(dataIndex, el);
  202. group.add(el);
  203. el.ignore = isClipped;
  204. }).update(function (newIndex, oldIndex) {
  205. var itemModel = data.getItemModel(newIndex);
  206. var layout = getLayout[coord.type](data, newIndex, itemModel);
  207. if (drawBackground) {
  208. var bgEl = void 0;
  209. if (oldBgEls.length === 0) {
  210. bgEl = createBackground(oldIndex);
  211. } else {
  212. bgEl = oldBgEls[oldIndex];
  213. bgEl.useStyle(backgroundModel.getItemStyle()); // Only cartesian2d support borderRadius.
  214. if (coord.type === 'cartesian2d') {
  215. bgEl.setShape('r', barBorderRadius);
  216. }
  217. bgEls[newIndex] = bgEl;
  218. }
  219. var bgLayout = getLayout[coord.type](data, newIndex);
  220. var shape = createBackgroundShape(isHorizontalOrRadial, bgLayout, coord);
  221. updateProps(bgEl, {
  222. shape: shape
  223. }, animationModel, newIndex);
  224. }
  225. var el = oldData.getItemGraphicEl(oldIndex);
  226. if (!data.hasValue(newIndex) || !isValidLayout[coord.type](layout)) {
  227. group.remove(el);
  228. return;
  229. }
  230. var isClipped = false;
  231. if (needsClip) {
  232. isClipped = clip[coord.type](coordSysClipArea, layout);
  233. if (isClipped) {
  234. group.remove(el);
  235. }
  236. }
  237. if (!el) {
  238. el = elementCreator[coord.type](seriesModel, data, newIndex, layout, isHorizontalOrRadial, animationModel, baseAxis.model, !!el, roundCap);
  239. } else {
  240. saveOldStyle(el);
  241. }
  242. if (realtimeSortCfg) {
  243. el.forceLabelAnimation = true;
  244. }
  245. if (isChangeOrder) {
  246. var textEl = el.getTextContent();
  247. if (textEl) {
  248. var labelInnerStore = labelInner(textEl);
  249. if (labelInnerStore.prevValue != null) {
  250. /**
  251. * Set preValue to be value so that no new label
  252. * should be started, otherwise, it will take a full
  253. * `animationDurationUpdate` time to finish the
  254. * animation, which is not expected.
  255. */
  256. labelInnerStore.prevValue = labelInnerStore.value;
  257. }
  258. }
  259. } // Not change anything if only order changed.
  260. // Especially not change label.
  261. else {
  262. updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
  263. }
  264. if (isInitSort) {
  265. el.attr({
  266. shape: layout
  267. });
  268. } else if (realtimeSortCfg) {
  269. updateRealtimeAnimation(realtimeSortCfg, animationModel, el, layout, newIndex, isHorizontalOrRadial, true, isChangeOrder);
  270. } else {
  271. updateProps(el, {
  272. shape: layout
  273. }, seriesModel, newIndex, null);
  274. }
  275. data.setItemGraphicEl(newIndex, el);
  276. el.ignore = isClipped;
  277. group.add(el);
  278. }).remove(function (dataIndex) {
  279. var el = oldData.getItemGraphicEl(dataIndex);
  280. el && removeElementWithFadeOut(el, seriesModel, dataIndex);
  281. }).execute();
  282. var bgGroup = this._backgroundGroup || (this._backgroundGroup = new Group());
  283. bgGroup.removeAll();
  284. for (var i = 0; i < bgEls.length; ++i) {
  285. bgGroup.add(bgEls[i]);
  286. }
  287. group.add(bgGroup);
  288. this._backgroundEls = bgEls;
  289. this._data = data;
  290. };
  291. BarView.prototype._renderLarge = function (seriesModel, ecModel, api) {
  292. this._clear();
  293. createLarge(seriesModel, this.group);
  294. this._updateLargeClip(seriesModel);
  295. };
  296. BarView.prototype._incrementalRenderLarge = function (params, seriesModel) {
  297. this._removeBackground();
  298. createLarge(seriesModel, this.group, this._progressiveEls, true);
  299. };
  300. BarView.prototype._updateLargeClip = function (seriesModel) {
  301. // Use clipPath in large mode.
  302. var clipPath = seriesModel.get('clip', true) && createClipPath(seriesModel.coordinateSystem, false, seriesModel);
  303. var group = this.group;
  304. if (clipPath) {
  305. group.setClipPath(clipPath);
  306. } else {
  307. group.removeClipPath();
  308. }
  309. };
  310. BarView.prototype._enableRealtimeSort = function (realtimeSortCfg, data, api) {
  311. var _this = this; // If no data in the first frame, wait for data to initSort
  312. if (!data.count()) {
  313. return;
  314. }
  315. var baseAxis = realtimeSortCfg.baseAxis;
  316. if (this._isFirstFrame) {
  317. this._dispatchInitSort(data, realtimeSortCfg, api);
  318. this._isFirstFrame = false;
  319. } else {
  320. var orderMapping_1 = function (idx) {
  321. var el = data.getItemGraphicEl(idx);
  322. var shape = el && el.shape;
  323. return shape && // The result should be consistent with the initial sort by data value.
  324. // Do not support the case that both positive and negative exist.
  325. Math.abs(baseAxis.isHorizontal() ? shape.height : shape.width) // If data is NaN, shape.xxx may be NaN, so use || 0 here in case
  326. || 0;
  327. };
  328. this._onRendered = function () {
  329. _this._updateSortWithinSameData(data, orderMapping_1, baseAxis, api);
  330. };
  331. api.getZr().on('rendered', this._onRendered);
  332. }
  333. };
  334. BarView.prototype._dataSort = function (data, baseAxis, orderMapping) {
  335. var info = [];
  336. data.each(data.mapDimension(baseAxis.dim), function (ordinalNumber, dataIdx) {
  337. var mappedValue = orderMapping(dataIdx);
  338. mappedValue = mappedValue == null ? NaN : mappedValue;
  339. info.push({
  340. dataIndex: dataIdx,
  341. mappedValue: mappedValue,
  342. ordinalNumber: ordinalNumber
  343. });
  344. });
  345. info.sort(function (a, b) {
  346. // If NaN, it will be treated as min val.
  347. return b.mappedValue - a.mappedValue;
  348. });
  349. return {
  350. ordinalNumbers: map(info, function (item) {
  351. return item.ordinalNumber;
  352. })
  353. };
  354. };
  355. BarView.prototype._isOrderChangedWithinSameData = function (data, orderMapping, baseAxis) {
  356. var scale = baseAxis.scale;
  357. var ordinalDataDim = data.mapDimension(baseAxis.dim);
  358. var lastValue = Number.MAX_VALUE;
  359. for (var tickNum = 0, len = scale.getOrdinalMeta().categories.length; tickNum < len; ++tickNum) {
  360. var rawIdx = data.rawIndexOf(ordinalDataDim, scale.getRawOrdinalNumber(tickNum));
  361. var value = rawIdx < 0 // If some tick have no bar, the tick will be treated as min.
  362. ? Number.MIN_VALUE // PENDING: if dataZoom on baseAxis exits, is it a performance issue?
  363. : orderMapping(data.indexOfRawIndex(rawIdx));
  364. if (value > lastValue) {
  365. return true;
  366. }
  367. lastValue = value;
  368. }
  369. return false;
  370. };
  371. /*
  372. * Consider the case when A and B changed order, whose representing
  373. * bars are both out of sight, we don't wish to trigger reorder action
  374. * as long as the order in the view doesn't change.
  375. */
  376. BarView.prototype._isOrderDifferentInView = function (orderInfo, baseAxis) {
  377. var scale = baseAxis.scale;
  378. var extent = scale.getExtent();
  379. var tickNum = Math.max(0, extent[0]);
  380. var tickMax = Math.min(extent[1], scale.getOrdinalMeta().categories.length - 1);
  381. for (; tickNum <= tickMax; ++tickNum) {
  382. if (orderInfo.ordinalNumbers[tickNum] !== scale.getRawOrdinalNumber(tickNum)) {
  383. return true;
  384. }
  385. }
  386. };
  387. BarView.prototype._updateSortWithinSameData = function (data, orderMapping, baseAxis, api) {
  388. if (!this._isOrderChangedWithinSameData(data, orderMapping, baseAxis)) {
  389. return;
  390. }
  391. var sortInfo = this._dataSort(data, baseAxis, orderMapping);
  392. if (this._isOrderDifferentInView(sortInfo, baseAxis)) {
  393. this._removeOnRenderedListener(api);
  394. api.dispatchAction({
  395. type: 'changeAxisOrder',
  396. componentType: baseAxis.dim + 'Axis',
  397. axisId: baseAxis.index,
  398. sortInfo: sortInfo
  399. });
  400. }
  401. };
  402. BarView.prototype._dispatchInitSort = function (data, realtimeSortCfg, api) {
  403. var baseAxis = realtimeSortCfg.baseAxis;
  404. var sortResult = this._dataSort(data, baseAxis, function (dataIdx) {
  405. return data.get(data.mapDimension(realtimeSortCfg.otherAxis.dim), dataIdx);
  406. });
  407. api.dispatchAction({
  408. type: 'changeAxisOrder',
  409. componentType: baseAxis.dim + 'Axis',
  410. isInitSort: true,
  411. axisId: baseAxis.index,
  412. sortInfo: sortResult
  413. });
  414. };
  415. BarView.prototype.remove = function (ecModel, api) {
  416. this._clear(this._model);
  417. this._removeOnRenderedListener(api);
  418. };
  419. BarView.prototype.dispose = function (ecModel, api) {
  420. this._removeOnRenderedListener(api);
  421. };
  422. BarView.prototype._removeOnRenderedListener = function (api) {
  423. if (this._onRendered) {
  424. api.getZr().off('rendered', this._onRendered);
  425. this._onRendered = null;
  426. }
  427. };
  428. BarView.prototype._clear = function (model) {
  429. var group = this.group;
  430. var data = this._data;
  431. if (model && model.isAnimationEnabled() && data && !this._isLargeDraw) {
  432. this._removeBackground();
  433. this._backgroundEls = [];
  434. data.eachItemGraphicEl(function (el) {
  435. removeElementWithFadeOut(el, model, getECData(el).dataIndex);
  436. });
  437. } else {
  438. group.removeAll();
  439. }
  440. this._data = null;
  441. this._isFirstFrame = true;
  442. };
  443. BarView.prototype._removeBackground = function () {
  444. this.group.remove(this._backgroundGroup);
  445. this._backgroundGroup = null;
  446. };
  447. BarView.type = 'bar';
  448. return BarView;
  449. }(ChartView);
  450. var clip = {
  451. cartesian2d: function (coordSysBoundingRect, layout) {
  452. var signWidth = layout.width < 0 ? -1 : 1;
  453. var signHeight = layout.height < 0 ? -1 : 1; // Needs positive width and height
  454. if (signWidth < 0) {
  455. layout.x += layout.width;
  456. layout.width = -layout.width;
  457. }
  458. if (signHeight < 0) {
  459. layout.y += layout.height;
  460. layout.height = -layout.height;
  461. }
  462. var coordSysX2 = coordSysBoundingRect.x + coordSysBoundingRect.width;
  463. var coordSysY2 = coordSysBoundingRect.y + coordSysBoundingRect.height;
  464. var x = mathMax(layout.x, coordSysBoundingRect.x);
  465. var x2 = mathMin(layout.x + layout.width, coordSysX2);
  466. var y = mathMax(layout.y, coordSysBoundingRect.y);
  467. var y2 = mathMin(layout.y + layout.height, coordSysY2);
  468. var xClipped = x2 < x;
  469. var yClipped = y2 < y; // When xClipped or yClipped, the element will be marked as `ignore`.
  470. // But we should also place the element at the edge of the coord sys bounding rect.
  471. // Beause if data changed and the bar show again, its transition animaiton
  472. // will begin at this place.
  473. layout.x = xClipped && x > coordSysX2 ? x2 : x;
  474. layout.y = yClipped && y > coordSysY2 ? y2 : y;
  475. layout.width = xClipped ? 0 : x2 - x;
  476. layout.height = yClipped ? 0 : y2 - y; // Reverse back
  477. if (signWidth < 0) {
  478. layout.x += layout.width;
  479. layout.width = -layout.width;
  480. }
  481. if (signHeight < 0) {
  482. layout.y += layout.height;
  483. layout.height = -layout.height;
  484. }
  485. return xClipped || yClipped;
  486. },
  487. polar: function (coordSysClipArea, layout) {
  488. var signR = layout.r0 <= layout.r ? 1 : -1; // Make sure r is larger than r0
  489. if (signR < 0) {
  490. var tmp = layout.r;
  491. layout.r = layout.r0;
  492. layout.r0 = tmp;
  493. }
  494. var r = mathMin(layout.r, coordSysClipArea.r);
  495. var r0 = mathMax(layout.r0, coordSysClipArea.r0);
  496. layout.r = r;
  497. layout.r0 = r0;
  498. var clipped = r - r0 < 0; // Reverse back
  499. if (signR < 0) {
  500. var tmp = layout.r;
  501. layout.r = layout.r0;
  502. layout.r0 = tmp;
  503. }
  504. return clipped;
  505. }
  506. };
  507. var elementCreator = {
  508. cartesian2d: function (seriesModel, data, newIndex, layout, isHorizontal, animationModel, axisModel, isUpdate, roundCap) {
  509. var rect = new Rect({
  510. shape: extend({}, layout),
  511. z2: 1
  512. });
  513. rect.__dataIndex = newIndex;
  514. rect.name = 'item';
  515. if (animationModel) {
  516. var rectShape = rect.shape;
  517. var animateProperty = isHorizontal ? 'height' : 'width';
  518. rectShape[animateProperty] = 0;
  519. }
  520. return rect;
  521. },
  522. polar: function (seriesModel, data, newIndex, layout, isRadial, animationModel, axisModel, isUpdate, roundCap) {
  523. var ShapeClass = !isRadial && roundCap ? Sausage : Sector;
  524. var sector = new ShapeClass({
  525. shape: layout,
  526. z2: 1
  527. });
  528. sector.name = 'item';
  529. var positionMap = createPolarPositionMapping(isRadial);
  530. sector.calculateTextPosition = createSectorCalculateTextPosition(positionMap, {
  531. isRoundCap: ShapeClass === Sausage
  532. }); // Animation
  533. if (animationModel) {
  534. var sectorShape = sector.shape;
  535. var animateProperty = isRadial ? 'r' : 'endAngle';
  536. var animateTarget = {};
  537. sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
  538. animateTarget[animateProperty] = layout[animateProperty];
  539. (isUpdate ? updateProps : initProps)(sector, {
  540. shape: animateTarget // __value: typeof dataValue === 'string' ? parseInt(dataValue, 10) : dataValue
  541. }, animationModel);
  542. }
  543. return sector;
  544. }
  545. };
  546. function shouldRealtimeSort(seriesModel, coordSys) {
  547. var realtimeSortOption = seriesModel.get('realtimeSort', true);
  548. var baseAxis = coordSys.getBaseAxis();
  549. if (process.env.NODE_ENV !== 'production') {
  550. if (realtimeSortOption) {
  551. if (baseAxis.type !== 'category') {
  552. warn('`realtimeSort` will not work because this bar series is not based on a category axis.');
  553. }
  554. if (coordSys.type !== 'cartesian2d') {
  555. warn('`realtimeSort` will not work because this bar series is not on cartesian2d.');
  556. }
  557. }
  558. }
  559. if (realtimeSortOption && baseAxis.type === 'category' && coordSys.type === 'cartesian2d') {
  560. return {
  561. baseAxis: baseAxis,
  562. otherAxis: coordSys.getOtherAxis(baseAxis)
  563. };
  564. }
  565. }
  566. function updateRealtimeAnimation(realtimeSortCfg, seriesAnimationModel, el, layout, newIndex, isHorizontal, isUpdate, isChangeOrder) {
  567. var seriesTarget;
  568. var axisTarget;
  569. if (isHorizontal) {
  570. axisTarget = {
  571. x: layout.x,
  572. width: layout.width
  573. };
  574. seriesTarget = {
  575. y: layout.y,
  576. height: layout.height
  577. };
  578. } else {
  579. axisTarget = {
  580. y: layout.y,
  581. height: layout.height
  582. };
  583. seriesTarget = {
  584. x: layout.x,
  585. width: layout.width
  586. };
  587. }
  588. if (!isChangeOrder) {
  589. // Keep the original growth animation if only axis order changed.
  590. // Not start a new animation.
  591. (isUpdate ? updateProps : initProps)(el, {
  592. shape: seriesTarget
  593. }, seriesAnimationModel, newIndex, null);
  594. }
  595. var axisAnimationModel = seriesAnimationModel ? realtimeSortCfg.baseAxis.model : null;
  596. (isUpdate ? updateProps : initProps)(el, {
  597. shape: axisTarget
  598. }, axisAnimationModel, newIndex);
  599. }
  600. function checkPropertiesNotValid(obj, props) {
  601. for (var i = 0; i < props.length; i++) {
  602. if (!isFinite(obj[props[i]])) {
  603. return true;
  604. }
  605. }
  606. return false;
  607. }
  608. var rectPropties = ['x', 'y', 'width', 'height'];
  609. var polarPropties = ['cx', 'cy', 'r', 'startAngle', 'endAngle'];
  610. var isValidLayout = {
  611. cartesian2d: function (layout) {
  612. return !checkPropertiesNotValid(layout, rectPropties);
  613. },
  614. polar: function (layout) {
  615. return !checkPropertiesNotValid(layout, polarPropties);
  616. }
  617. };
  618. var getLayout = {
  619. // itemModel is only used to get borderWidth, which is not needed
  620. // when calculating bar background layout.
  621. cartesian2d: function (data, dataIndex, itemModel) {
  622. var layout = data.getItemLayout(dataIndex);
  623. var fixedLineWidth = itemModel ? getLineWidth(itemModel, layout) : 0; // fix layout with lineWidth
  624. var signX = layout.width > 0 ? 1 : -1;
  625. var signY = layout.height > 0 ? 1 : -1;
  626. return {
  627. x: layout.x + signX * fixedLineWidth / 2,
  628. y: layout.y + signY * fixedLineWidth / 2,
  629. width: layout.width - signX * fixedLineWidth,
  630. height: layout.height - signY * fixedLineWidth
  631. };
  632. },
  633. polar: function (data, dataIndex, itemModel) {
  634. var layout = data.getItemLayout(dataIndex);
  635. return {
  636. cx: layout.cx,
  637. cy: layout.cy,
  638. r0: layout.r0,
  639. r: layout.r,
  640. startAngle: layout.startAngle,
  641. endAngle: layout.endAngle,
  642. clockwise: layout.clockwise
  643. };
  644. }
  645. };
  646. function isZeroOnPolar(layout) {
  647. return layout.startAngle != null && layout.endAngle != null && layout.startAngle === layout.endAngle;
  648. }
  649. function createPolarPositionMapping(isRadial) {
  650. return function (isRadial) {
  651. var arcOrAngle = isRadial ? 'Arc' : 'Angle';
  652. return function (position) {
  653. switch (position) {
  654. case 'start':
  655. case 'insideStart':
  656. case 'end':
  657. case 'insideEnd':
  658. return position + arcOrAngle;
  659. default:
  660. return position;
  661. }
  662. };
  663. }(isRadial);
  664. }
  665. function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, isPolar) {
  666. var style = data.getItemVisual(dataIndex, 'style');
  667. if (!isPolar) {
  668. el.setShape('r', itemModel.get(['itemStyle', 'borderRadius']) || 0);
  669. }
  670. el.useStyle(style);
  671. var cursorStyle = itemModel.getShallow('cursor');
  672. cursorStyle && el.attr('cursor', cursorStyle);
  673. var labelPositionOutside = isPolar ? isHorizontalOrRadial ? layout.r >= layout.r0 ? 'endArc' : 'startArc' : layout.endAngle >= layout.startAngle ? 'endAngle' : 'startAngle' : isHorizontalOrRadial ? layout.height >= 0 ? 'bottom' : 'top' : layout.width >= 0 ? 'right' : 'left';
  674. var labelStatesModels = getLabelStatesModels(itemModel);
  675. setLabelStyle(el, labelStatesModels, {
  676. labelFetcher: seriesModel,
  677. labelDataIndex: dataIndex,
  678. defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
  679. inheritColor: style.fill,
  680. defaultOpacity: style.opacity,
  681. defaultOutsidePosition: labelPositionOutside
  682. });
  683. var label = el.getTextContent();
  684. if (isPolar && label) {
  685. var position = itemModel.get(['label', 'position']);
  686. el.textConfig.inside = position === 'middle' ? true : null;
  687. setSectorTextRotation(el, position === 'outside' ? labelPositionOutside : position, createPolarPositionMapping(isHorizontalOrRadial), itemModel.get(['label', 'rotate']));
  688. }
  689. setLabelValueAnimation(label, labelStatesModels, seriesModel.getRawValue(dataIndex), function (value) {
  690. return getDefaultInterpolatedLabel(data, value);
  691. });
  692. var emphasisModel = itemModel.getModel(['emphasis']);
  693. toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  694. setStatesStylesFromModel(el, itemModel);
  695. if (isZeroOnPolar(layout)) {
  696. el.style.fill = 'none';
  697. el.style.stroke = 'none';
  698. each(el.states, function (state) {
  699. if (state.style) {
  700. state.style.fill = state.style.stroke = 'none';
  701. }
  702. });
  703. }
  704. } // In case width or height are too small.
  705. function getLineWidth(itemModel, rawLayout) {
  706. // Has no border.
  707. var borderColor = itemModel.get(['itemStyle', 'borderColor']);
  708. if (!borderColor || borderColor === 'none') {
  709. return 0;
  710. }
  711. var lineWidth = itemModel.get(['itemStyle', 'borderWidth']) || 0; // width or height may be NaN for empty data
  712. var width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
  713. var height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
  714. return Math.min(lineWidth, width, height);
  715. }
  716. var LagePathShape =
  717. /** @class */
  718. function () {
  719. function LagePathShape() {}
  720. return LagePathShape;
  721. }();
  722. var LargePath =
  723. /** @class */
  724. function (_super) {
  725. __extends(LargePath, _super);
  726. function LargePath(opts) {
  727. var _this = _super.call(this, opts) || this;
  728. _this.type = 'largeBar';
  729. return _this;
  730. }
  731. LargePath.prototype.getDefaultShape = function () {
  732. return new LagePathShape();
  733. };
  734. LargePath.prototype.buildPath = function (ctx, shape) {
  735. // Drawing lines is more efficient than drawing
  736. // a whole line or drawing rects.
  737. var points = shape.points;
  738. var baseDimIdx = this.baseDimIdx;
  739. var valueDimIdx = 1 - this.baseDimIdx;
  740. var startPoint = [];
  741. var size = [];
  742. var barWidth = this.barWidth;
  743. for (var i = 0; i < points.length; i += 3) {
  744. size[baseDimIdx] = barWidth;
  745. size[valueDimIdx] = points[i + 2];
  746. startPoint[baseDimIdx] = points[i + baseDimIdx];
  747. startPoint[valueDimIdx] = points[i + valueDimIdx];
  748. ctx.rect(startPoint[0], startPoint[1], size[0], size[1]);
  749. }
  750. };
  751. return LargePath;
  752. }(Path);
  753. function createLarge(seriesModel, group, progressiveEls, incremental) {
  754. // TODO support polar
  755. var data = seriesModel.getData();
  756. var baseDimIdx = data.getLayout('valueAxisHorizontal') ? 1 : 0;
  757. var largeDataIndices = data.getLayout('largeDataIndices');
  758. var barWidth = data.getLayout('size');
  759. var backgroundModel = seriesModel.getModel('backgroundStyle');
  760. var bgPoints = data.getLayout('largeBackgroundPoints');
  761. if (bgPoints) {
  762. var bgEl = new LargePath({
  763. shape: {
  764. points: bgPoints
  765. },
  766. incremental: !!incremental,
  767. silent: true,
  768. z2: 0
  769. });
  770. bgEl.baseDimIdx = baseDimIdx;
  771. bgEl.largeDataIndices = largeDataIndices;
  772. bgEl.barWidth = barWidth;
  773. bgEl.useStyle(backgroundModel.getItemStyle());
  774. group.add(bgEl);
  775. progressiveEls && progressiveEls.push(bgEl);
  776. }
  777. var el = new LargePath({
  778. shape: {
  779. points: data.getLayout('largePoints')
  780. },
  781. incremental: !!incremental,
  782. z2: 1
  783. });
  784. el.baseDimIdx = baseDimIdx;
  785. el.largeDataIndices = largeDataIndices;
  786. el.barWidth = barWidth;
  787. group.add(el);
  788. el.useStyle(data.getVisual('style')); // Enable tooltip and user mouse/touch event handlers.
  789. getECData(el).seriesIndex = seriesModel.seriesIndex;
  790. if (!seriesModel.get('silent')) {
  791. el.on('mousedown', largePathUpdateDataIndex);
  792. el.on('mousemove', largePathUpdateDataIndex);
  793. }
  794. progressiveEls && progressiveEls.push(el);
  795. } // Use throttle to avoid frequently traverse to find dataIndex.
  796. var largePathUpdateDataIndex = throttle(function (event) {
  797. var largePath = this;
  798. var dataIndex = largePathFindDataIndex(largePath, event.offsetX, event.offsetY);
  799. getECData(largePath).dataIndex = dataIndex >= 0 ? dataIndex : null;
  800. }, 30, false);
  801. function largePathFindDataIndex(largePath, x, y) {
  802. var baseDimIdx = largePath.baseDimIdx;
  803. var valueDimIdx = 1 - baseDimIdx;
  804. var points = largePath.shape.points;
  805. var largeDataIndices = largePath.largeDataIndices;
  806. var startPoint = [];
  807. var size = [];
  808. var barWidth = largePath.barWidth;
  809. for (var i = 0, len = points.length / 3; i < len; i++) {
  810. var ii = i * 3;
  811. size[baseDimIdx] = barWidth;
  812. size[valueDimIdx] = points[ii + 2];
  813. startPoint[baseDimIdx] = points[ii + baseDimIdx];
  814. startPoint[valueDimIdx] = points[ii + valueDimIdx];
  815. if (size[valueDimIdx] < 0) {
  816. startPoint[valueDimIdx] += size[valueDimIdx];
  817. size[valueDimIdx] = -size[valueDimIdx];
  818. }
  819. if (x >= startPoint[0] && x <= startPoint[0] + size[0] && y >= startPoint[1] && y <= startPoint[1] + size[1]) {
  820. return largeDataIndices[i];
  821. }
  822. }
  823. return -1;
  824. }
  825. function createBackgroundShape(isHorizontalOrRadial, layout, coord) {
  826. if (isCoordinateSystemType(coord, 'cartesian2d')) {
  827. var rectShape = layout;
  828. var coordLayout = coord.getArea();
  829. return {
  830. x: isHorizontalOrRadial ? rectShape.x : coordLayout.x,
  831. y: isHorizontalOrRadial ? coordLayout.y : rectShape.y,
  832. width: isHorizontalOrRadial ? rectShape.width : coordLayout.width,
  833. height: isHorizontalOrRadial ? coordLayout.height : rectShape.height
  834. };
  835. } else {
  836. var coordLayout = coord.getArea();
  837. var sectorShape = layout;
  838. return {
  839. cx: coordLayout.cx,
  840. cy: coordLayout.cy,
  841. r0: isHorizontalOrRadial ? coordLayout.r0 : sectorShape.r0,
  842. r: isHorizontalOrRadial ? coordLayout.r : sectorShape.r,
  843. startAngle: isHorizontalOrRadial ? sectorShape.startAngle : 0,
  844. endAngle: isHorizontalOrRadial ? sectorShape.endAngle : Math.PI * 2
  845. };
  846. }
  847. }
  848. function createBackgroundEl(coord, isHorizontalOrRadial, layout) {
  849. var ElementClz = coord.type === 'polar' ? Sector : Rect;
  850. return new ElementClz({
  851. shape: createBackgroundShape(isHorizontalOrRadial, layout, coord),
  852. silent: true,
  853. z2: 0
  854. });
  855. }
  856. export default BarView;