BarView.js 34 KB

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