barGrid.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  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 { each, defaults, keys } from 'zrender/lib/core/util.js';
  41. import { parsePercent } from '../util/number.js';
  42. import { isDimensionStacked } from '../data/helper/dataStackHelper.js';
  43. import createRenderPlanner from '../chart/helper/createRenderPlanner.js';
  44. import { createFloat32Array } from '../util/vendor.js';
  45. var STACK_PREFIX = '__ec_stack_';
  46. function getSeriesStackId(seriesModel) {
  47. return seriesModel.get('stack') || STACK_PREFIX + seriesModel.seriesIndex;
  48. }
  49. function getAxisKey(axis) {
  50. return axis.dim + axis.index;
  51. }
  52. /**
  53. * @return {Object} {width, offset, offsetCenter} If axis.type is not 'category', return undefined.
  54. */
  55. export function getLayoutOnAxis(opt) {
  56. var params = [];
  57. var baseAxis = opt.axis;
  58. var axisKey = 'axis0';
  59. if (baseAxis.type !== 'category') {
  60. return;
  61. }
  62. var bandWidth = baseAxis.getBandWidth();
  63. for (var i = 0; i < opt.count || 0; i++) {
  64. params.push(defaults({
  65. bandWidth: bandWidth,
  66. axisKey: axisKey,
  67. stackId: STACK_PREFIX + i
  68. }, opt));
  69. }
  70. var widthAndOffsets = doCalBarWidthAndOffset(params);
  71. var result = [];
  72. for (var i = 0; i < opt.count; i++) {
  73. var item = widthAndOffsets[axisKey][STACK_PREFIX + i];
  74. item.offsetCenter = item.offset + item.width / 2;
  75. result.push(item);
  76. }
  77. return result;
  78. }
  79. export function prepareLayoutBarSeries(seriesType, ecModel) {
  80. var seriesModels = [];
  81. ecModel.eachSeriesByType(seriesType, function (seriesModel) {
  82. // Check series coordinate, do layout for cartesian2d only
  83. if (isOnCartesian(seriesModel)) {
  84. seriesModels.push(seriesModel);
  85. }
  86. });
  87. return seriesModels;
  88. }
  89. /**
  90. * Map from (baseAxis.dim + '_' + baseAxis.index) to min gap of two adjacent
  91. * values.
  92. * This works for time axes, value axes, and log axes.
  93. * For a single time axis, return value is in the form like
  94. * {'x_0': [1000000]}.
  95. * The value of 1000000 is in milliseconds.
  96. */
  97. function getValueAxesMinGaps(barSeries) {
  98. /**
  99. * Map from axis.index to values.
  100. * For a single time axis, axisValues is in the form like
  101. * {'x_0': [1495555200000, 1495641600000, 1495728000000]}.
  102. * Items in axisValues[x], e.g. 1495555200000, are time values of all
  103. * series.
  104. */
  105. var axisValues = {};
  106. each(barSeries, function (seriesModel) {
  107. var cartesian = seriesModel.coordinateSystem;
  108. var baseAxis = cartesian.getBaseAxis();
  109. if (baseAxis.type !== 'time' && baseAxis.type !== 'value') {
  110. return;
  111. }
  112. var data = seriesModel.getData();
  113. var key = baseAxis.dim + '_' + baseAxis.index;
  114. var dimIdx = data.getDimensionIndex(data.mapDimension(baseAxis.dim));
  115. var store = data.getStore();
  116. for (var i = 0, cnt = store.count(); i < cnt; ++i) {
  117. var value = store.get(dimIdx, i);
  118. if (!axisValues[key]) {
  119. // No previous data for the axis
  120. axisValues[key] = [value];
  121. } else {
  122. // No value in previous series
  123. axisValues[key].push(value);
  124. }
  125. // Ignore duplicated time values in the same axis
  126. }
  127. });
  128. var axisMinGaps = {};
  129. for (var key in axisValues) {
  130. if (axisValues.hasOwnProperty(key)) {
  131. var valuesInAxis = axisValues[key];
  132. if (valuesInAxis) {
  133. // Sort axis values into ascending order to calculate gaps
  134. valuesInAxis.sort(function (a, b) {
  135. return a - b;
  136. });
  137. var min = null;
  138. for (var j = 1; j < valuesInAxis.length; ++j) {
  139. var delta = valuesInAxis[j] - valuesInAxis[j - 1];
  140. if (delta > 0) {
  141. // Ignore 0 delta because they are of the same axis value
  142. min = min === null ? delta : Math.min(min, delta);
  143. }
  144. }
  145. // Set to null if only have one data
  146. axisMinGaps[key] = min;
  147. }
  148. }
  149. }
  150. return axisMinGaps;
  151. }
  152. export function makeColumnLayout(barSeries) {
  153. var axisMinGaps = getValueAxesMinGaps(barSeries);
  154. var seriesInfoList = [];
  155. each(barSeries, function (seriesModel) {
  156. var cartesian = seriesModel.coordinateSystem;
  157. var baseAxis = cartesian.getBaseAxis();
  158. var axisExtent = baseAxis.getExtent();
  159. var bandWidth;
  160. if (baseAxis.type === 'category') {
  161. bandWidth = baseAxis.getBandWidth();
  162. } else if (baseAxis.type === 'value' || baseAxis.type === 'time') {
  163. var key = baseAxis.dim + '_' + baseAxis.index;
  164. var minGap = axisMinGaps[key];
  165. var extentSpan = Math.abs(axisExtent[1] - axisExtent[0]);
  166. var scale = baseAxis.scale.getExtent();
  167. var scaleSpan = Math.abs(scale[1] - scale[0]);
  168. bandWidth = minGap ? extentSpan / scaleSpan * minGap : extentSpan; // When there is only one data value
  169. } else {
  170. var data = seriesModel.getData();
  171. bandWidth = Math.abs(axisExtent[1] - axisExtent[0]) / data.count();
  172. }
  173. var barWidth = parsePercent(seriesModel.get('barWidth'), bandWidth);
  174. var barMaxWidth = parsePercent(seriesModel.get('barMaxWidth'), bandWidth);
  175. var barMinWidth = parsePercent(
  176. // barMinWidth by default is 0.5 / 1 in cartesian. Because in value axis,
  177. // the auto-calculated bar width might be less than 0.5 / 1.
  178. seriesModel.get('barMinWidth') || (isInLargeMode(seriesModel) ? 0.5 : 1), bandWidth);
  179. var barGap = seriesModel.get('barGap');
  180. var barCategoryGap = seriesModel.get('barCategoryGap');
  181. var defaultBarGap = seriesModel.get('defaultBarGap');
  182. seriesInfoList.push({
  183. bandWidth: bandWidth,
  184. barWidth: barWidth,
  185. barMaxWidth: barMaxWidth,
  186. barMinWidth: barMinWidth,
  187. barGap: barGap,
  188. barCategoryGap: barCategoryGap,
  189. defaultBarGap: defaultBarGap,
  190. axisKey: getAxisKey(baseAxis),
  191. stackId: getSeriesStackId(seriesModel)
  192. });
  193. });
  194. return doCalBarWidthAndOffset(seriesInfoList);
  195. }
  196. function doCalBarWidthAndOffset(seriesInfoList) {
  197. // Columns info on each category axis. Key is cartesian name
  198. var columnsMap = {};
  199. each(seriesInfoList, function (seriesInfo, idx) {
  200. var axisKey = seriesInfo.axisKey;
  201. var bandWidth = seriesInfo.bandWidth;
  202. var columnsOnAxis = columnsMap[axisKey] || {
  203. bandWidth: bandWidth,
  204. remainedWidth: bandWidth,
  205. autoWidthCount: 0,
  206. categoryGap: null,
  207. gap: seriesInfo.defaultBarGap || 0,
  208. stacks: {}
  209. };
  210. var stacks = columnsOnAxis.stacks;
  211. columnsMap[axisKey] = columnsOnAxis;
  212. var stackId = seriesInfo.stackId;
  213. if (!stacks[stackId]) {
  214. columnsOnAxis.autoWidthCount++;
  215. }
  216. stacks[stackId] = stacks[stackId] || {
  217. width: 0,
  218. maxWidth: 0
  219. };
  220. // Caution: In a single coordinate system, these barGrid attributes
  221. // will be shared by series. Consider that they have default values,
  222. // only the attributes set on the last series will work.
  223. // Do not change this fact unless there will be a break change.
  224. var barWidth = seriesInfo.barWidth;
  225. if (barWidth && !stacks[stackId].width) {
  226. // See #6312, do not restrict width.
  227. stacks[stackId].width = barWidth;
  228. barWidth = Math.min(columnsOnAxis.remainedWidth, barWidth);
  229. columnsOnAxis.remainedWidth -= barWidth;
  230. }
  231. var barMaxWidth = seriesInfo.barMaxWidth;
  232. barMaxWidth && (stacks[stackId].maxWidth = barMaxWidth);
  233. var barMinWidth = seriesInfo.barMinWidth;
  234. barMinWidth && (stacks[stackId].minWidth = barMinWidth);
  235. var barGap = seriesInfo.barGap;
  236. barGap != null && (columnsOnAxis.gap = barGap);
  237. var barCategoryGap = seriesInfo.barCategoryGap;
  238. barCategoryGap != null && (columnsOnAxis.categoryGap = barCategoryGap);
  239. });
  240. var result = {};
  241. each(columnsMap, function (columnsOnAxis, coordSysName) {
  242. result[coordSysName] = {};
  243. var stacks = columnsOnAxis.stacks;
  244. var bandWidth = columnsOnAxis.bandWidth;
  245. var categoryGapPercent = columnsOnAxis.categoryGap;
  246. if (categoryGapPercent == null) {
  247. var columnCount = keys(stacks).length;
  248. // More columns in one group
  249. // the spaces between group is smaller. Or the column will be too thin.
  250. categoryGapPercent = Math.max(35 - columnCount * 4, 15) + '%';
  251. }
  252. var categoryGap = parsePercent(categoryGapPercent, bandWidth);
  253. var barGapPercent = parsePercent(columnsOnAxis.gap, 1);
  254. var remainedWidth = columnsOnAxis.remainedWidth;
  255. var autoWidthCount = columnsOnAxis.autoWidthCount;
  256. var autoWidth = (remainedWidth - categoryGap) / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
  257. autoWidth = Math.max(autoWidth, 0);
  258. // Find if any auto calculated bar exceeded maxBarWidth
  259. each(stacks, function (column) {
  260. var maxWidth = column.maxWidth;
  261. var minWidth = column.minWidth;
  262. if (!column.width) {
  263. var finalWidth = autoWidth;
  264. if (maxWidth && maxWidth < finalWidth) {
  265. finalWidth = Math.min(maxWidth, remainedWidth);
  266. }
  267. // `minWidth` has higher priority. `minWidth` decide that whether the
  268. // bar is able to be visible. So `minWidth` should not be restricted
  269. // by `maxWidth` or `remainedWidth` (which is from `bandWidth`). In
  270. // the extreme cases for `value` axis, bars are allowed to overlap
  271. // with each other if `minWidth` specified.
  272. if (minWidth && minWidth > finalWidth) {
  273. finalWidth = minWidth;
  274. }
  275. if (finalWidth !== autoWidth) {
  276. column.width = finalWidth;
  277. remainedWidth -= finalWidth + barGapPercent * finalWidth;
  278. autoWidthCount--;
  279. }
  280. } else {
  281. // `barMinWidth/barMaxWidth` has higher priority than `barWidth`, as
  282. // CSS does. Because barWidth can be a percent value, where
  283. // `barMaxWidth` can be used to restrict the final width.
  284. var finalWidth = column.width;
  285. if (maxWidth) {
  286. finalWidth = Math.min(finalWidth, maxWidth);
  287. }
  288. // `minWidth` has higher priority, as described above
  289. if (minWidth) {
  290. finalWidth = Math.max(finalWidth, minWidth);
  291. }
  292. column.width = finalWidth;
  293. remainedWidth -= finalWidth + barGapPercent * finalWidth;
  294. autoWidthCount--;
  295. }
  296. });
  297. // Recalculate width again
  298. autoWidth = (remainedWidth - categoryGap) / (autoWidthCount + (autoWidthCount - 1) * barGapPercent);
  299. autoWidth = Math.max(autoWidth, 0);
  300. var widthSum = 0;
  301. var lastColumn;
  302. each(stacks, function (column, idx) {
  303. if (!column.width) {
  304. column.width = autoWidth;
  305. }
  306. lastColumn = column;
  307. widthSum += column.width * (1 + barGapPercent);
  308. });
  309. if (lastColumn) {
  310. widthSum -= lastColumn.width * barGapPercent;
  311. }
  312. var offset = -widthSum / 2;
  313. each(stacks, function (column, stackId) {
  314. result[coordSysName][stackId] = result[coordSysName][stackId] || {
  315. bandWidth: bandWidth,
  316. offset: offset,
  317. width: column.width
  318. };
  319. offset += column.width * (1 + barGapPercent);
  320. });
  321. });
  322. return result;
  323. }
  324. function retrieveColumnLayout(barWidthAndOffset, axis, seriesModel) {
  325. if (barWidthAndOffset && axis) {
  326. var result = barWidthAndOffset[getAxisKey(axis)];
  327. if (result != null && seriesModel != null) {
  328. return result[getSeriesStackId(seriesModel)];
  329. }
  330. return result;
  331. }
  332. }
  333. export { retrieveColumnLayout };
  334. export function layout(seriesType, ecModel) {
  335. var seriesModels = prepareLayoutBarSeries(seriesType, ecModel);
  336. var barWidthAndOffset = makeColumnLayout(seriesModels);
  337. each(seriesModels, function (seriesModel) {
  338. var data = seriesModel.getData();
  339. var cartesian = seriesModel.coordinateSystem;
  340. var baseAxis = cartesian.getBaseAxis();
  341. var stackId = getSeriesStackId(seriesModel);
  342. var columnLayoutInfo = barWidthAndOffset[getAxisKey(baseAxis)][stackId];
  343. var columnOffset = columnLayoutInfo.offset;
  344. var columnWidth = columnLayoutInfo.width;
  345. data.setLayout({
  346. bandWidth: columnLayoutInfo.bandWidth,
  347. offset: columnOffset,
  348. size: columnWidth
  349. });
  350. });
  351. }
  352. // TODO: Do not support stack in large mode yet.
  353. export function createProgressiveLayout(seriesType) {
  354. return {
  355. seriesType: seriesType,
  356. plan: createRenderPlanner(),
  357. reset: function (seriesModel) {
  358. if (!isOnCartesian(seriesModel)) {
  359. return;
  360. }
  361. var data = seriesModel.getData();
  362. var cartesian = seriesModel.coordinateSystem;
  363. var baseAxis = cartesian.getBaseAxis();
  364. var valueAxis = cartesian.getOtherAxis(baseAxis);
  365. var valueDimIdx = data.getDimensionIndex(data.mapDimension(valueAxis.dim));
  366. var baseDimIdx = data.getDimensionIndex(data.mapDimension(baseAxis.dim));
  367. var drawBackground = seriesModel.get('showBackground', true);
  368. var valueDim = data.mapDimension(valueAxis.dim);
  369. var stackResultDim = data.getCalculationInfo('stackResultDimension');
  370. var stacked = isDimensionStacked(data, valueDim) && !!data.getCalculationInfo('stackedOnSeries');
  371. var isValueAxisH = valueAxis.isHorizontal();
  372. var valueAxisStart = getValueAxisStart(baseAxis, valueAxis);
  373. var isLarge = isInLargeMode(seriesModel);
  374. var barMinHeight = seriesModel.get('barMinHeight') || 0;
  375. var stackedDimIdx = stackResultDim && data.getDimensionIndex(stackResultDim);
  376. // Layout info.
  377. var columnWidth = data.getLayout('size');
  378. var columnOffset = data.getLayout('offset');
  379. return {
  380. progress: function (params, data) {
  381. var count = params.count;
  382. var largePoints = isLarge && createFloat32Array(count * 3);
  383. var largeBackgroundPoints = isLarge && drawBackground && createFloat32Array(count * 3);
  384. var largeDataIndices = isLarge && createFloat32Array(count);
  385. var coordLayout = cartesian.master.getRect();
  386. var bgSize = isValueAxisH ? coordLayout.width : coordLayout.height;
  387. var dataIndex;
  388. var store = data.getStore();
  389. var idxOffset = 0;
  390. while ((dataIndex = params.next()) != null) {
  391. var value = store.get(stacked ? stackedDimIdx : valueDimIdx, dataIndex);
  392. var baseValue = store.get(baseDimIdx, dataIndex);
  393. var baseCoord = valueAxisStart;
  394. var stackStartValue = void 0;
  395. // Because of the barMinHeight, we can not use the value in
  396. // stackResultDimension directly.
  397. if (stacked) {
  398. stackStartValue = +value - store.get(valueDimIdx, dataIndex);
  399. }
  400. var x = void 0;
  401. var y = void 0;
  402. var width = void 0;
  403. var height = void 0;
  404. if (isValueAxisH) {
  405. var coord = cartesian.dataToPoint([value, baseValue]);
  406. if (stacked) {
  407. var startCoord = cartesian.dataToPoint([stackStartValue, baseValue]);
  408. baseCoord = startCoord[0];
  409. }
  410. x = baseCoord;
  411. y = coord[1] + columnOffset;
  412. width = coord[0] - baseCoord;
  413. height = columnWidth;
  414. if (Math.abs(width) < barMinHeight) {
  415. width = (width < 0 ? -1 : 1) * barMinHeight;
  416. }
  417. } else {
  418. var coord = cartesian.dataToPoint([baseValue, value]);
  419. if (stacked) {
  420. var startCoord = cartesian.dataToPoint([baseValue, stackStartValue]);
  421. baseCoord = startCoord[1];
  422. }
  423. x = coord[0] + columnOffset;
  424. y = baseCoord;
  425. width = columnWidth;
  426. height = coord[1] - baseCoord;
  427. if (Math.abs(height) < barMinHeight) {
  428. // Include zero to has a positive bar
  429. height = (height <= 0 ? -1 : 1) * barMinHeight;
  430. }
  431. }
  432. if (!isLarge) {
  433. data.setItemLayout(dataIndex, {
  434. x: x,
  435. y: y,
  436. width: width,
  437. height: height
  438. });
  439. } else {
  440. largePoints[idxOffset] = x;
  441. largePoints[idxOffset + 1] = y;
  442. largePoints[idxOffset + 2] = isValueAxisH ? width : height;
  443. if (largeBackgroundPoints) {
  444. largeBackgroundPoints[idxOffset] = isValueAxisH ? coordLayout.x : x;
  445. largeBackgroundPoints[idxOffset + 1] = isValueAxisH ? y : coordLayout.y;
  446. largeBackgroundPoints[idxOffset + 2] = bgSize;
  447. }
  448. largeDataIndices[dataIndex] = dataIndex;
  449. }
  450. idxOffset += 3;
  451. }
  452. if (isLarge) {
  453. data.setLayout({
  454. largePoints: largePoints,
  455. largeDataIndices: largeDataIndices,
  456. largeBackgroundPoints: largeBackgroundPoints,
  457. valueAxisHorizontal: isValueAxisH
  458. });
  459. }
  460. }
  461. };
  462. }
  463. };
  464. }
  465. function isOnCartesian(seriesModel) {
  466. return seriesModel.coordinateSystem && seriesModel.coordinateSystem.type === 'cartesian2d';
  467. }
  468. function isInLargeMode(seriesModel) {
  469. return seriesModel.pipelineContext && seriesModel.pipelineContext.large;
  470. }
  471. // See cases in `test/bar-start.html` and `#7412`, `#8747`.
  472. function getValueAxisStart(baseAxis, valueAxis) {
  473. var startValue = valueAxis.model.get('startValue');
  474. if (!startValue) {
  475. startValue = 0;
  476. }
  477. return valueAxis.toGlobalCoord(valueAxis.dataToCoord(valueAxis.type === 'log' ? startValue > 0 ? startValue : 1 : startValue));
  478. }