MarkLineView.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  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 List = require("../../data/List");
  21. var numberUtil = require("../../util/number");
  22. var markerHelper = require("./markerHelper");
  23. var LineDraw = require("../../chart/helper/LineDraw");
  24. var MarkerView = require("./MarkerView");
  25. var _dataStackHelper = require("../../data/helper/dataStackHelper");
  26. var getStackedDimension = _dataStackHelper.getStackedDimension;
  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. var markLineTransform = function (seriesModel, coordSys, mlModel, item) {
  46. var data = seriesModel.getData(); // Special type markLine like 'min', 'max', 'average', 'median'
  47. var mlType = item.type;
  48. if (!zrUtil.isArray(item) && (mlType === 'min' || mlType === 'max' || mlType === 'average' || mlType === 'median' // In case
  49. // data: [{
  50. // yAxis: 10
  51. // }]
  52. || item.xAxis != null || item.yAxis != null)) {
  53. var valueAxis;
  54. var value;
  55. if (item.yAxis != null || item.xAxis != null) {
  56. valueAxis = coordSys.getAxis(item.yAxis != null ? 'y' : 'x');
  57. value = zrUtil.retrieve(item.yAxis, item.xAxis);
  58. } else {
  59. var axisInfo = markerHelper.getAxisInfo(item, data, coordSys, seriesModel);
  60. valueAxis = axisInfo.valueAxis;
  61. var valueDataDim = getStackedDimension(data, axisInfo.valueDataDim);
  62. value = markerHelper.numCalculate(data, valueDataDim, mlType);
  63. }
  64. var valueIndex = valueAxis.dim === 'x' ? 0 : 1;
  65. var baseIndex = 1 - valueIndex;
  66. var mlFrom = zrUtil.clone(item);
  67. var mlTo = {};
  68. mlFrom.type = null;
  69. mlFrom.coord = [];
  70. mlTo.coord = [];
  71. mlFrom.coord[baseIndex] = -Infinity;
  72. mlTo.coord[baseIndex] = Infinity;
  73. var precision = mlModel.get('precision');
  74. if (precision >= 0 && typeof value === 'number') {
  75. value = +value.toFixed(Math.min(precision, 20));
  76. }
  77. mlFrom.coord[valueIndex] = mlTo.coord[valueIndex] = value;
  78. item = [mlFrom, mlTo, {
  79. // Extra option for tooltip and label
  80. type: mlType,
  81. valueIndex: item.valueIndex,
  82. // Force to use the value of calculated value.
  83. value: value
  84. }];
  85. }
  86. item = [markerHelper.dataTransform(seriesModel, item[0]), markerHelper.dataTransform(seriesModel, item[1]), zrUtil.extend({}, item[2])]; // Avoid line data type is extended by from(to) data type
  87. item[2].type = item[2].type || ''; // Merge from option and to option into line option
  88. zrUtil.merge(item[2], item[0]);
  89. zrUtil.merge(item[2], item[1]);
  90. return item;
  91. };
  92. function isInifinity(val) {
  93. return !isNaN(val) && !isFinite(val);
  94. } // If a markLine has one dim
  95. function ifMarkLineHasOnlyDim(dimIndex, fromCoord, toCoord, coordSys) {
  96. var otherDimIndex = 1 - dimIndex;
  97. var dimName = coordSys.dimensions[dimIndex];
  98. return isInifinity(fromCoord[otherDimIndex]) && isInifinity(toCoord[otherDimIndex]) && fromCoord[dimIndex] === toCoord[dimIndex] && coordSys.getAxis(dimName).containData(fromCoord[dimIndex]);
  99. }
  100. function markLineFilter(coordSys, item) {
  101. if (coordSys.type === 'cartesian2d') {
  102. var fromCoord = item[0].coord;
  103. var toCoord = item[1].coord; // In case
  104. // {
  105. // markLine: {
  106. // data: [{ yAxis: 2 }]
  107. // }
  108. // }
  109. if (fromCoord && toCoord && (ifMarkLineHasOnlyDim(1, fromCoord, toCoord, coordSys) || ifMarkLineHasOnlyDim(0, fromCoord, toCoord, coordSys))) {
  110. return true;
  111. }
  112. }
  113. return markerHelper.dataFilter(coordSys, item[0]) && markerHelper.dataFilter(coordSys, item[1]);
  114. }
  115. function updateSingleMarkerEndLayout(data, idx, isFrom, seriesModel, api) {
  116. var coordSys = seriesModel.coordinateSystem;
  117. var itemModel = data.getItemModel(idx);
  118. var point;
  119. var xPx = numberUtil.parsePercent(itemModel.get('x'), api.getWidth());
  120. var yPx = numberUtil.parsePercent(itemModel.get('y'), api.getHeight());
  121. if (!isNaN(xPx) && !isNaN(yPx)) {
  122. point = [xPx, yPx];
  123. } else {
  124. // Chart like bar may have there own marker positioning logic
  125. if (seriesModel.getMarkerPosition) {
  126. // Use the getMarkerPoisition
  127. point = seriesModel.getMarkerPosition(data.getValues(data.dimensions, idx));
  128. } else {
  129. var dims = coordSys.dimensions;
  130. var x = data.get(dims[0], idx);
  131. var y = data.get(dims[1], idx);
  132. point = coordSys.dataToPoint([x, y]);
  133. } // Expand line to the edge of grid if value on one axis is Inifnity
  134. // In case
  135. // markLine: {
  136. // data: [{
  137. // yAxis: 2
  138. // // or
  139. // type: 'average'
  140. // }]
  141. // }
  142. if (coordSys.type === 'cartesian2d') {
  143. var xAxis = coordSys.getAxis('x');
  144. var yAxis = coordSys.getAxis('y');
  145. var dims = coordSys.dimensions;
  146. if (isInifinity(data.get(dims[0], idx))) {
  147. point[0] = xAxis.toGlobalCoord(xAxis.getExtent()[isFrom ? 0 : 1]);
  148. } else if (isInifinity(data.get(dims[1], idx))) {
  149. point[1] = yAxis.toGlobalCoord(yAxis.getExtent()[isFrom ? 0 : 1]);
  150. }
  151. } // Use x, y if has any
  152. if (!isNaN(xPx)) {
  153. point[0] = xPx;
  154. }
  155. if (!isNaN(yPx)) {
  156. point[1] = yPx;
  157. }
  158. }
  159. data.setItemLayout(idx, point);
  160. }
  161. var _default = MarkerView.extend({
  162. type: 'markLine',
  163. // updateLayout: function (markLineModel, ecModel, api) {
  164. // ecModel.eachSeries(function (seriesModel) {
  165. // var mlModel = seriesModel.markLineModel;
  166. // if (mlModel) {
  167. // var mlData = mlModel.getData();
  168. // var fromData = mlModel.__from;
  169. // var toData = mlModel.__to;
  170. // // Update visual and layout of from symbol and to symbol
  171. // fromData.each(function (idx) {
  172. // updateSingleMarkerEndLayout(fromData, idx, true, seriesModel, api);
  173. // updateSingleMarkerEndLayout(toData, idx, false, seriesModel, api);
  174. // });
  175. // // Update layout of line
  176. // mlData.each(function (idx) {
  177. // mlData.setItemLayout(idx, [
  178. // fromData.getItemLayout(idx),
  179. // toData.getItemLayout(idx)
  180. // ]);
  181. // });
  182. // this.markerGroupMap.get(seriesModel.id).updateLayout();
  183. // }
  184. // }, this);
  185. // },
  186. updateTransform: function (markLineModel, ecModel, api) {
  187. ecModel.eachSeries(function (seriesModel) {
  188. var mlModel = seriesModel.markLineModel;
  189. if (mlModel) {
  190. var mlData = mlModel.getData();
  191. var fromData = mlModel.__from;
  192. var toData = mlModel.__to; // Update visual and layout of from symbol and to symbol
  193. fromData.each(function (idx) {
  194. updateSingleMarkerEndLayout(fromData, idx, true, seriesModel, api);
  195. updateSingleMarkerEndLayout(toData, idx, false, seriesModel, api);
  196. }); // Update layout of line
  197. mlData.each(function (idx) {
  198. mlData.setItemLayout(idx, [fromData.getItemLayout(idx), toData.getItemLayout(idx)]);
  199. });
  200. this.markerGroupMap.get(seriesModel.id).updateLayout();
  201. }
  202. }, this);
  203. },
  204. renderSeries: function (seriesModel, mlModel, ecModel, api) {
  205. var coordSys = seriesModel.coordinateSystem;
  206. var seriesId = seriesModel.id;
  207. var seriesData = seriesModel.getData();
  208. var lineDrawMap = this.markerGroupMap;
  209. var lineDraw = lineDrawMap.get(seriesId) || lineDrawMap.set(seriesId, new LineDraw());
  210. this.group.add(lineDraw.group);
  211. var mlData = createList(coordSys, seriesModel, mlModel);
  212. var fromData = mlData.from;
  213. var toData = mlData.to;
  214. var lineData = mlData.line;
  215. mlModel.__from = fromData;
  216. mlModel.__to = toData; // Line data for tooltip and formatter
  217. mlModel.setData(lineData);
  218. var symbolType = mlModel.get('symbol');
  219. var symbolSize = mlModel.get('symbolSize');
  220. if (!zrUtil.isArray(symbolType)) {
  221. symbolType = [symbolType, symbolType];
  222. }
  223. if (typeof symbolSize === 'number') {
  224. symbolSize = [symbolSize, symbolSize];
  225. } // Update visual and layout of from symbol and to symbol
  226. mlData.from.each(function (idx) {
  227. updateDataVisualAndLayout(fromData, idx, true);
  228. updateDataVisualAndLayout(toData, idx, false);
  229. }); // Update visual and layout of line
  230. lineData.each(function (idx) {
  231. var lineColor = lineData.getItemModel(idx).get('lineStyle.color');
  232. lineData.setItemVisual(idx, {
  233. color: lineColor || fromData.getItemVisual(idx, 'color')
  234. });
  235. lineData.setItemLayout(idx, [fromData.getItemLayout(idx), toData.getItemLayout(idx)]);
  236. lineData.setItemVisual(idx, {
  237. 'fromSymbolRotate': fromData.getItemVisual(idx, 'symbolRotate'),
  238. 'fromSymbolSize': fromData.getItemVisual(idx, 'symbolSize'),
  239. 'fromSymbol': fromData.getItemVisual(idx, 'symbol'),
  240. 'toSymbolRotate': toData.getItemVisual(idx, 'symbolRotate'),
  241. 'toSymbolSize': toData.getItemVisual(idx, 'symbolSize'),
  242. 'toSymbol': toData.getItemVisual(idx, 'symbol')
  243. });
  244. });
  245. lineDraw.updateData(lineData); // Set host model for tooltip
  246. // FIXME
  247. mlData.line.eachItemGraphicEl(function (el, idx) {
  248. el.traverse(function (child) {
  249. child.dataModel = mlModel;
  250. });
  251. });
  252. function updateDataVisualAndLayout(data, idx, isFrom) {
  253. var itemModel = data.getItemModel(idx);
  254. updateSingleMarkerEndLayout(data, idx, isFrom, seriesModel, api);
  255. data.setItemVisual(idx, {
  256. symbolRotate: itemModel.get('symbolRotate'),
  257. symbolSize: itemModel.get('symbolSize') || symbolSize[isFrom ? 0 : 1],
  258. symbol: itemModel.get('symbol', true) || symbolType[isFrom ? 0 : 1],
  259. color: itemModel.get('itemStyle.color') || seriesData.getVisual('color')
  260. });
  261. }
  262. lineDraw.__keep = true;
  263. lineDraw.group.silent = mlModel.get('silent') || seriesModel.get('silent');
  264. }
  265. });
  266. /**
  267. * @inner
  268. * @param {module:echarts/coord/*} coordSys
  269. * @param {module:echarts/model/Series} seriesModel
  270. * @param {module:echarts/model/Model} mpModel
  271. */
  272. function createList(coordSys, seriesModel, mlModel) {
  273. var coordDimsInfos;
  274. if (coordSys) {
  275. coordDimsInfos = zrUtil.map(coordSys && coordSys.dimensions, function (coordDim) {
  276. var info = seriesModel.getData().getDimensionInfo(seriesModel.getData().mapDimension(coordDim)) || {}; // In map series data don't have lng and lat dimension. Fallback to same with coordSys
  277. return zrUtil.defaults({
  278. name: coordDim
  279. }, info);
  280. });
  281. } else {
  282. coordDimsInfos = [{
  283. name: 'value',
  284. type: 'float'
  285. }];
  286. }
  287. var fromData = new List(coordDimsInfos, mlModel);
  288. var toData = new List(coordDimsInfos, mlModel); // No dimensions
  289. var lineData = new List([], mlModel);
  290. var optData = zrUtil.map(mlModel.get('data'), zrUtil.curry(markLineTransform, seriesModel, coordSys, mlModel));
  291. if (coordSys) {
  292. optData = zrUtil.filter(optData, zrUtil.curry(markLineFilter, coordSys));
  293. }
  294. var dimValueGetter = coordSys ? markerHelper.dimValueGetter : function (item) {
  295. return item.value;
  296. };
  297. fromData.initData(zrUtil.map(optData, function (item) {
  298. return item[0];
  299. }), null, dimValueGetter);
  300. toData.initData(zrUtil.map(optData, function (item) {
  301. return item[1];
  302. }), null, dimValueGetter);
  303. lineData.initData(zrUtil.map(optData, function (item) {
  304. return item[2];
  305. }));
  306. lineData.hasItemOption = true;
  307. return {
  308. from: fromData,
  309. to: toData,
  310. line: lineData
  311. };
  312. }
  313. module.exports = _default;