Parallel.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  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. var zrUtil = require("zrender/lib/core/util");
  20. var matrix = require("zrender/lib/core/matrix");
  21. var layoutUtil = require("../../util/layout");
  22. var axisHelper = require("../../coord/axisHelper");
  23. var ParallelAxis = require("./ParallelAxis");
  24. var graphic = require("../../util/graphic");
  25. var numberUtil = require("../../util/number");
  26. var sliderMove = require("../../component/helper/sliderMove");
  27. /*
  28. * Licensed to the Apache Software Foundation (ASF) under one
  29. * or more contributor license agreements. See the NOTICE file
  30. * distributed with this work for additional information
  31. * regarding copyright ownership. The ASF licenses this file
  32. * to you under the Apache License, Version 2.0 (the
  33. * "License"); you may not use this file except in compliance
  34. * with the License. You may obtain a copy of the License at
  35. *
  36. * http://www.apache.org/licenses/LICENSE-2.0
  37. *
  38. * Unless required by applicable law or agreed to in writing,
  39. * software distributed under the License is distributed on an
  40. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  41. * KIND, either express or implied. See the License for the
  42. * specific language governing permissions and limitations
  43. * under the License.
  44. */
  45. /**
  46. * Parallel Coordinates
  47. * <https://en.wikipedia.org/wiki/Parallel_coordinates>
  48. */
  49. var each = zrUtil.each;
  50. var mathMin = Math.min;
  51. var mathMax = Math.max;
  52. var mathFloor = Math.floor;
  53. var mathCeil = Math.ceil;
  54. var round = numberUtil.round;
  55. var PI = Math.PI;
  56. function Parallel(parallelModel, ecModel, api) {
  57. /**
  58. * key: dimension
  59. * @type {Object.<string, module:echarts/coord/parallel/Axis>}
  60. * @private
  61. */
  62. this._axesMap = zrUtil.createHashMap();
  63. /**
  64. * key: dimension
  65. * value: {position: [], rotation, }
  66. * @type {Object.<string, Object>}
  67. * @private
  68. */
  69. this._axesLayout = {};
  70. /**
  71. * Always follow axis order.
  72. * @type {Array.<string>}
  73. * @readOnly
  74. */
  75. this.dimensions = parallelModel.dimensions;
  76. /**
  77. * @type {module:zrender/core/BoundingRect}
  78. */
  79. this._rect;
  80. /**
  81. * @type {module:echarts/coord/parallel/ParallelModel}
  82. */
  83. this._model = parallelModel;
  84. this._init(parallelModel, ecModel, api);
  85. }
  86. Parallel.prototype = {
  87. type: 'parallel',
  88. constructor: Parallel,
  89. /**
  90. * Initialize cartesian coordinate systems
  91. * @private
  92. */
  93. _init: function (parallelModel, ecModel, api) {
  94. var dimensions = parallelModel.dimensions;
  95. var parallelAxisIndex = parallelModel.parallelAxisIndex;
  96. each(dimensions, function (dim, idx) {
  97. var axisIndex = parallelAxisIndex[idx];
  98. var axisModel = ecModel.getComponent('parallelAxis', axisIndex);
  99. var axis = this._axesMap.set(dim, new ParallelAxis(dim, axisHelper.createScaleByModel(axisModel), [0, 0], axisModel.get('type'), axisIndex));
  100. var isCategory = axis.type === 'category';
  101. axis.onBand = isCategory && axisModel.get('boundaryGap');
  102. axis.inverse = axisModel.get('inverse'); // Injection
  103. axisModel.axis = axis;
  104. axis.model = axisModel;
  105. axis.coordinateSystem = axisModel.coordinateSystem = this;
  106. }, this);
  107. },
  108. /**
  109. * Update axis scale after data processed
  110. * @param {module:echarts/model/Global} ecModel
  111. * @param {module:echarts/ExtensionAPI} api
  112. */
  113. update: function (ecModel, api) {
  114. this._updateAxesFromSeries(this._model, ecModel);
  115. },
  116. /**
  117. * @override
  118. */
  119. containPoint: function (point) {
  120. var layoutInfo = this._makeLayoutInfo();
  121. var axisBase = layoutInfo.axisBase;
  122. var layoutBase = layoutInfo.layoutBase;
  123. var pixelDimIndex = layoutInfo.pixelDimIndex;
  124. var pAxis = point[1 - pixelDimIndex];
  125. var pLayout = point[pixelDimIndex];
  126. return pAxis >= axisBase && pAxis <= axisBase + layoutInfo.axisLength && pLayout >= layoutBase && pLayout <= layoutBase + layoutInfo.layoutLength;
  127. },
  128. getModel: function () {
  129. return this._model;
  130. },
  131. /**
  132. * Update properties from series
  133. * @private
  134. */
  135. _updateAxesFromSeries: function (parallelModel, ecModel) {
  136. ecModel.eachSeries(function (seriesModel) {
  137. if (!parallelModel.contains(seriesModel, ecModel)) {
  138. return;
  139. }
  140. var data = seriesModel.getData();
  141. each(this.dimensions, function (dim) {
  142. var axis = this._axesMap.get(dim);
  143. axis.scale.unionExtentFromData(data, data.mapDimension(dim));
  144. axisHelper.niceScaleExtent(axis.scale, axis.model);
  145. }, this);
  146. }, this);
  147. },
  148. /**
  149. * Resize the parallel coordinate system.
  150. * @param {module:echarts/coord/parallel/ParallelModel} parallelModel
  151. * @param {module:echarts/ExtensionAPI} api
  152. */
  153. resize: function (parallelModel, api) {
  154. this._rect = layoutUtil.getLayoutRect(parallelModel.getBoxLayoutParams(), {
  155. width: api.getWidth(),
  156. height: api.getHeight()
  157. });
  158. this._layoutAxes();
  159. },
  160. /**
  161. * @return {module:zrender/core/BoundingRect}
  162. */
  163. getRect: function () {
  164. return this._rect;
  165. },
  166. /**
  167. * @private
  168. */
  169. _makeLayoutInfo: function () {
  170. var parallelModel = this._model;
  171. var rect = this._rect;
  172. var xy = ['x', 'y'];
  173. var wh = ['width', 'height'];
  174. var layout = parallelModel.get('layout');
  175. var pixelDimIndex = layout === 'horizontal' ? 0 : 1;
  176. var layoutLength = rect[wh[pixelDimIndex]];
  177. var layoutExtent = [0, layoutLength];
  178. var axisCount = this.dimensions.length;
  179. var axisExpandWidth = restrict(parallelModel.get('axisExpandWidth'), layoutExtent);
  180. var axisExpandCount = restrict(parallelModel.get('axisExpandCount') || 0, [0, axisCount]);
  181. var axisExpandable = parallelModel.get('axisExpandable') && axisCount > 3 && axisCount > axisExpandCount && axisExpandCount > 1 && axisExpandWidth > 0 && layoutLength > 0; // `axisExpandWindow` is According to the coordinates of [0, axisExpandLength],
  182. // for sake of consider the case that axisCollapseWidth is 0 (when screen is narrow),
  183. // where collapsed axes should be overlapped.
  184. var axisExpandWindow = parallelModel.get('axisExpandWindow');
  185. var winSize;
  186. if (!axisExpandWindow) {
  187. winSize = restrict(axisExpandWidth * (axisExpandCount - 1), layoutExtent);
  188. var axisExpandCenter = parallelModel.get('axisExpandCenter') || mathFloor(axisCount / 2);
  189. axisExpandWindow = [axisExpandWidth * axisExpandCenter - winSize / 2];
  190. axisExpandWindow[1] = axisExpandWindow[0] + winSize;
  191. } else {
  192. winSize = restrict(axisExpandWindow[1] - axisExpandWindow[0], layoutExtent);
  193. axisExpandWindow[1] = axisExpandWindow[0] + winSize;
  194. }
  195. var axisCollapseWidth = (layoutLength - winSize) / (axisCount - axisExpandCount); // Avoid axisCollapseWidth is too small.
  196. axisCollapseWidth < 3 && (axisCollapseWidth = 0); // Find the first and last indices > ewin[0] and < ewin[1].
  197. var winInnerIndices = [mathFloor(round(axisExpandWindow[0] / axisExpandWidth, 1)) + 1, mathCeil(round(axisExpandWindow[1] / axisExpandWidth, 1)) - 1]; // Pos in ec coordinates.
  198. var axisExpandWindow0Pos = axisCollapseWidth / axisExpandWidth * axisExpandWindow[0];
  199. return {
  200. layout: layout,
  201. pixelDimIndex: pixelDimIndex,
  202. layoutBase: rect[xy[pixelDimIndex]],
  203. layoutLength: layoutLength,
  204. axisBase: rect[xy[1 - pixelDimIndex]],
  205. axisLength: rect[wh[1 - pixelDimIndex]],
  206. axisExpandable: axisExpandable,
  207. axisExpandWidth: axisExpandWidth,
  208. axisCollapseWidth: axisCollapseWidth,
  209. axisExpandWindow: axisExpandWindow,
  210. axisCount: axisCount,
  211. winInnerIndices: winInnerIndices,
  212. axisExpandWindow0Pos: axisExpandWindow0Pos
  213. };
  214. },
  215. /**
  216. * @private
  217. */
  218. _layoutAxes: function () {
  219. var rect = this._rect;
  220. var axes = this._axesMap;
  221. var dimensions = this.dimensions;
  222. var layoutInfo = this._makeLayoutInfo();
  223. var layout = layoutInfo.layout;
  224. axes.each(function (axis) {
  225. var axisExtent = [0, layoutInfo.axisLength];
  226. var idx = axis.inverse ? 1 : 0;
  227. axis.setExtent(axisExtent[idx], axisExtent[1 - idx]);
  228. });
  229. each(dimensions, function (dim, idx) {
  230. var posInfo = (layoutInfo.axisExpandable ? layoutAxisWithExpand : layoutAxisWithoutExpand)(idx, layoutInfo);
  231. var positionTable = {
  232. horizontal: {
  233. x: posInfo.position,
  234. y: layoutInfo.axisLength
  235. },
  236. vertical: {
  237. x: 0,
  238. y: posInfo.position
  239. }
  240. };
  241. var rotationTable = {
  242. horizontal: PI / 2,
  243. vertical: 0
  244. };
  245. var position = [positionTable[layout].x + rect.x, positionTable[layout].y + rect.y];
  246. var rotation = rotationTable[layout];
  247. var transform = matrix.create();
  248. matrix.rotate(transform, transform, rotation);
  249. matrix.translate(transform, transform, position); // TODO
  250. // tick等排布信息。
  251. // TODO
  252. // 根据axis order 更新 dimensions顺序。
  253. this._axesLayout[dim] = {
  254. position: position,
  255. rotation: rotation,
  256. transform: transform,
  257. axisNameAvailableWidth: posInfo.axisNameAvailableWidth,
  258. axisLabelShow: posInfo.axisLabelShow,
  259. nameTruncateMaxWidth: posInfo.nameTruncateMaxWidth,
  260. tickDirection: 1,
  261. labelDirection: 1
  262. };
  263. }, this);
  264. },
  265. /**
  266. * Get axis by dim.
  267. * @param {string} dim
  268. * @return {module:echarts/coord/parallel/ParallelAxis} [description]
  269. */
  270. getAxis: function (dim) {
  271. return this._axesMap.get(dim);
  272. },
  273. /**
  274. * Convert a dim value of a single item of series data to Point.
  275. * @param {*} value
  276. * @param {string} dim
  277. * @return {Array}
  278. */
  279. dataToPoint: function (value, dim) {
  280. return this.axisCoordToPoint(this._axesMap.get(dim).dataToCoord(value), dim);
  281. },
  282. /**
  283. * Travel data for one time, get activeState of each data item.
  284. * @param {module:echarts/data/List} data
  285. * @param {Functio} cb param: {string} activeState 'active' or 'inactive' or 'normal'
  286. * {number} dataIndex
  287. * @param {number} [start=0] the start dataIndex that travel from.
  288. * @param {number} [end=data.count()] the next dataIndex of the last dataIndex will be travel.
  289. */
  290. eachActiveState: function (data, callback, start, end) {
  291. start == null && (start = 0);
  292. end == null && (end = data.count());
  293. var axesMap = this._axesMap;
  294. var dimensions = this.dimensions;
  295. var dataDimensions = [];
  296. var axisModels = [];
  297. zrUtil.each(dimensions, function (axisDim) {
  298. dataDimensions.push(data.mapDimension(axisDim));
  299. axisModels.push(axesMap.get(axisDim).model);
  300. });
  301. var hasActiveSet = this.hasAxisBrushed();
  302. for (var dataIndex = start; dataIndex < end; dataIndex++) {
  303. var activeState;
  304. if (!hasActiveSet) {
  305. activeState = 'normal';
  306. } else {
  307. activeState = 'active';
  308. var values = data.getValues(dataDimensions, dataIndex);
  309. for (var j = 0, lenj = dimensions.length; j < lenj; j++) {
  310. var state = axisModels[j].getActiveState(values[j]);
  311. if (state === 'inactive') {
  312. activeState = 'inactive';
  313. break;
  314. }
  315. }
  316. }
  317. callback(activeState, dataIndex);
  318. }
  319. },
  320. /**
  321. * Whether has any activeSet.
  322. * @return {boolean}
  323. */
  324. hasAxisBrushed: function () {
  325. var dimensions = this.dimensions;
  326. var axesMap = this._axesMap;
  327. var hasActiveSet = false;
  328. for (var j = 0, lenj = dimensions.length; j < lenj; j++) {
  329. if (axesMap.get(dimensions[j]).model.getActiveState() !== 'normal') {
  330. hasActiveSet = true;
  331. }
  332. }
  333. return hasActiveSet;
  334. },
  335. /**
  336. * Convert coords of each axis to Point.
  337. * Return point. For example: [10, 20]
  338. * @param {Array.<number>} coords
  339. * @param {string} dim
  340. * @return {Array.<number>}
  341. */
  342. axisCoordToPoint: function (coord, dim) {
  343. var axisLayout = this._axesLayout[dim];
  344. return graphic.applyTransform([coord, 0], axisLayout.transform);
  345. },
  346. /**
  347. * Get axis layout.
  348. */
  349. getAxisLayout: function (dim) {
  350. return zrUtil.clone(this._axesLayout[dim]);
  351. },
  352. /**
  353. * @param {Array.<number>} point
  354. * @return {Object} {axisExpandWindow, delta, behavior: 'jump' | 'slide' | 'none'}.
  355. */
  356. getSlidedAxisExpandWindow: function (point) {
  357. var layoutInfo = this._makeLayoutInfo();
  358. var pixelDimIndex = layoutInfo.pixelDimIndex;
  359. var axisExpandWindow = layoutInfo.axisExpandWindow.slice();
  360. var winSize = axisExpandWindow[1] - axisExpandWindow[0];
  361. var extent = [0, layoutInfo.axisExpandWidth * (layoutInfo.axisCount - 1)]; // Out of the area of coordinate system.
  362. if (!this.containPoint(point)) {
  363. return {
  364. behavior: 'none',
  365. axisExpandWindow: axisExpandWindow
  366. };
  367. } // Conver the point from global to expand coordinates.
  368. var pointCoord = point[pixelDimIndex] - layoutInfo.layoutBase - layoutInfo.axisExpandWindow0Pos; // For dragging operation convenience, the window should not be
  369. // slided when mouse is the center area of the window.
  370. var delta;
  371. var behavior = 'slide';
  372. var axisCollapseWidth = layoutInfo.axisCollapseWidth;
  373. var triggerArea = this._model.get('axisExpandSlideTriggerArea'); // But consider touch device, jump is necessary.
  374. var useJump = triggerArea[0] != null;
  375. if (axisCollapseWidth) {
  376. if (useJump && axisCollapseWidth && pointCoord < winSize * triggerArea[0]) {
  377. behavior = 'jump';
  378. delta = pointCoord - winSize * triggerArea[2];
  379. } else if (useJump && axisCollapseWidth && pointCoord > winSize * (1 - triggerArea[0])) {
  380. behavior = 'jump';
  381. delta = pointCoord - winSize * (1 - triggerArea[2]);
  382. } else {
  383. (delta = pointCoord - winSize * triggerArea[1]) >= 0 && (delta = pointCoord - winSize * (1 - triggerArea[1])) <= 0 && (delta = 0);
  384. }
  385. delta *= layoutInfo.axisExpandWidth / axisCollapseWidth;
  386. delta ? sliderMove(delta, axisExpandWindow, extent, 'all') // Avoid nonsense triger on mousemove.
  387. : behavior = 'none';
  388. } // When screen is too narrow, make it visible and slidable, although it is hard to interact.
  389. else {
  390. var winSize = axisExpandWindow[1] - axisExpandWindow[0];
  391. var pos = extent[1] * pointCoord / winSize;
  392. axisExpandWindow = [mathMax(0, pos - winSize / 2)];
  393. axisExpandWindow[1] = mathMin(extent[1], axisExpandWindow[0] + winSize);
  394. axisExpandWindow[0] = axisExpandWindow[1] - winSize;
  395. }
  396. return {
  397. axisExpandWindow: axisExpandWindow,
  398. behavior: behavior
  399. };
  400. }
  401. };
  402. function restrict(len, extent) {
  403. return mathMin(mathMax(len, extent[0]), extent[1]);
  404. }
  405. function layoutAxisWithoutExpand(axisIndex, layoutInfo) {
  406. var step = layoutInfo.layoutLength / (layoutInfo.axisCount - 1);
  407. return {
  408. position: step * axisIndex,
  409. axisNameAvailableWidth: step,
  410. axisLabelShow: true
  411. };
  412. }
  413. function layoutAxisWithExpand(axisIndex, layoutInfo) {
  414. var layoutLength = layoutInfo.layoutLength;
  415. var axisExpandWidth = layoutInfo.axisExpandWidth;
  416. var axisCount = layoutInfo.axisCount;
  417. var axisCollapseWidth = layoutInfo.axisCollapseWidth;
  418. var winInnerIndices = layoutInfo.winInnerIndices;
  419. var position;
  420. var axisNameAvailableWidth = axisCollapseWidth;
  421. var axisLabelShow = false;
  422. var nameTruncateMaxWidth;
  423. if (axisIndex < winInnerIndices[0]) {
  424. position = axisIndex * axisCollapseWidth;
  425. nameTruncateMaxWidth = axisCollapseWidth;
  426. } else if (axisIndex <= winInnerIndices[1]) {
  427. position = layoutInfo.axisExpandWindow0Pos + axisIndex * axisExpandWidth - layoutInfo.axisExpandWindow[0];
  428. axisNameAvailableWidth = axisExpandWidth;
  429. axisLabelShow = true;
  430. } else {
  431. position = layoutLength - (axisCount - 1 - axisIndex) * axisCollapseWidth;
  432. nameTruncateMaxWidth = axisCollapseWidth;
  433. }
  434. return {
  435. position: position,
  436. axisNameAvailableWidth: axisNameAvailableWidth,
  437. axisLabelShow: axisLabelShow,
  438. nameTruncateMaxWidth: nameTruncateMaxWidth
  439. };
  440. }
  441. var _default = Parallel;
  442. module.exports = _default;