bd084543322a4a3367d2552846301ae7782e7457090259850cfd4a6696423ea43faf0acfd310da7d8803a37e677b7fc9ec8816cc52bba5d9c56c1878c4a6e5 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.line = line;
  7. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  8. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  9. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  10. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  11. var _updater = require("../class/updater.class");
  12. var _config = require("../config");
  13. var _bezierCurve = _interopRequireDefault(require("@jiaminghi/bezier-curve"));
  14. var _util = require("../util");
  15. function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
  16. function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  17. var polylineToBezierCurve = _bezierCurve["default"].polylineToBezierCurve,
  18. getBezierCurveLength = _bezierCurve["default"].getBezierCurveLength;
  19. function line(chart) {
  20. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  21. var xAxis = option.xAxis,
  22. yAxis = option.yAxis,
  23. series = option.series;
  24. var lines = [];
  25. if (xAxis && yAxis && series) {
  26. lines = (0, _util.initNeedSeries)(series, _config.lineConfig, 'line');
  27. lines = calcLinesPosition(lines, chart);
  28. }
  29. (0, _updater.doUpdate)({
  30. chart: chart,
  31. series: lines,
  32. key: 'lineArea',
  33. getGraphConfig: getLineAreaConfig,
  34. getStartGraphConfig: getStartLineAreaConfig,
  35. beforeUpdate: beforeUpdateLineAndArea,
  36. beforeChange: beforeChangeLineAndArea
  37. });
  38. (0, _updater.doUpdate)({
  39. chart: chart,
  40. series: lines,
  41. key: 'line',
  42. getGraphConfig: getLineConfig,
  43. getStartGraphConfig: getStartLineConfig,
  44. beforeUpdate: beforeUpdateLineAndArea,
  45. beforeChange: beforeChangeLineAndArea
  46. });
  47. (0, _updater.doUpdate)({
  48. chart: chart,
  49. series: lines,
  50. key: 'linePoint',
  51. getGraphConfig: getPointConfig,
  52. getStartGraphConfig: getStartPointConfig
  53. });
  54. (0, _updater.doUpdate)({
  55. chart: chart,
  56. series: lines,
  57. key: 'lineLabel',
  58. getGraphConfig: getLabelConfig
  59. });
  60. }
  61. function calcLinesPosition(lines, chart) {
  62. var axisData = chart.axisData;
  63. return lines.map(function (lineItem) {
  64. var lineData = (0, _util.mergeSameStackData)(lineItem, lines);
  65. lineData = mergeNonNumber(lineItem, lineData);
  66. var lineAxis = getLineAxis(lineItem, axisData);
  67. var linePosition = getLinePosition(lineData, lineAxis);
  68. var lineFillBottomPos = getLineFillBottomPos(lineAxis);
  69. return _objectSpread(_objectSpread({}, lineItem), {}, {
  70. linePosition: linePosition.filter(function (p) {
  71. return p;
  72. }),
  73. lineFillBottomPos: lineFillBottomPos
  74. });
  75. });
  76. }
  77. function mergeNonNumber(lineItem, lineData) {
  78. var data = lineItem.data;
  79. return lineData.map(function (v, i) {
  80. return typeof data[i] === 'number' ? v : null;
  81. });
  82. }
  83. function getLineAxis(line, axisData) {
  84. var xAxisIndex = line.xAxisIndex,
  85. yAxisIndex = line.yAxisIndex;
  86. var xAxis = axisData.find(function (_ref) {
  87. var axis = _ref.axis,
  88. index = _ref.index;
  89. return axis === 'x' && index === xAxisIndex;
  90. });
  91. var yAxis = axisData.find(function (_ref2) {
  92. var axis = _ref2.axis,
  93. index = _ref2.index;
  94. return axis === 'y' && index === yAxisIndex;
  95. });
  96. return [xAxis, yAxis];
  97. }
  98. function getLinePosition(lineData, lineAxis) {
  99. var valueAxisIndex = lineAxis.findIndex(function (_ref3) {
  100. var data = _ref3.data;
  101. return data === 'value';
  102. });
  103. var valueAxis = lineAxis[valueAxisIndex];
  104. var labelAxis = lineAxis[1 - valueAxisIndex];
  105. var linePosition = valueAxis.linePosition,
  106. axis = valueAxis.axis;
  107. var tickPosition = labelAxis.tickPosition;
  108. var tickNum = tickPosition.length;
  109. var valueAxisPosIndex = axis === 'x' ? 0 : 1;
  110. var valueAxisStartPos = linePosition[0][valueAxisPosIndex];
  111. var valueAxisEndPos = linePosition[1][valueAxisPosIndex];
  112. var valueAxisPosMinus = valueAxisEndPos - valueAxisStartPos;
  113. var maxValue = valueAxis.maxValue,
  114. minValue = valueAxis.minValue;
  115. var valueMinus = maxValue - minValue;
  116. var position = new Array(tickNum).fill(0).map(function (foo, i) {
  117. var v = lineData[i];
  118. if (typeof v !== 'number') return null;
  119. var valuePercent = (v - minValue) / valueMinus;
  120. if (valueMinus === 0) valuePercent = 0;
  121. return valuePercent * valueAxisPosMinus + valueAxisStartPos;
  122. });
  123. return position.map(function (vPos, i) {
  124. if (i >= tickNum || typeof vPos !== 'number') return null;
  125. var pos = [vPos, tickPosition[i][1 - valueAxisPosIndex]];
  126. if (valueAxisPosIndex === 0) return pos;
  127. pos.reverse();
  128. return pos;
  129. });
  130. }
  131. function getLineFillBottomPos(lineAxis) {
  132. var valueAxis = lineAxis.find(function (_ref4) {
  133. var data = _ref4.data;
  134. return data === 'value';
  135. });
  136. var axis = valueAxis.axis,
  137. linePosition = valueAxis.linePosition,
  138. minValue = valueAxis.minValue,
  139. maxValue = valueAxis.maxValue;
  140. var changeIndex = axis === 'x' ? 0 : 1;
  141. var changeValue = linePosition[0][changeIndex];
  142. if (minValue < 0 && maxValue > 0) {
  143. var valueMinus = maxValue - minValue;
  144. var posMinus = Math.abs(linePosition[0][changeIndex] - linePosition[1][changeIndex]);
  145. var offset = Math.abs(minValue) / valueMinus * posMinus;
  146. if (axis === 'y') offset *= -1;
  147. changeValue += offset;
  148. }
  149. return {
  150. changeIndex: changeIndex,
  151. changeValue: changeValue
  152. };
  153. }
  154. function getLineAreaConfig(lineItem) {
  155. var animationCurve = lineItem.animationCurve,
  156. animationFrame = lineItem.animationFrame,
  157. lineFillBottomPos = lineItem.lineFillBottomPos,
  158. rLevel = lineItem.rLevel;
  159. return [{
  160. name: getLineGraphName(lineItem),
  161. index: rLevel,
  162. animationCurve: animationCurve,
  163. animationFrame: animationFrame,
  164. visible: lineItem.lineArea.show,
  165. lineFillBottomPos: lineFillBottomPos,
  166. shape: getLineAndAreaShape(lineItem),
  167. style: getLineAreaStyle(lineItem),
  168. drawed: lineAreaDrawed
  169. }];
  170. }
  171. function getLineAndAreaShape(lineItem) {
  172. var linePosition = lineItem.linePosition;
  173. return {
  174. points: linePosition
  175. };
  176. }
  177. function getLineAreaStyle(lineItem) {
  178. var lineArea = lineItem.lineArea,
  179. color = lineItem.color;
  180. var gradient = lineArea.gradient,
  181. style = lineArea.style;
  182. var fillColor = [style.fill || color];
  183. var gradientColor = (0, _util.deepMerge)(fillColor, gradient);
  184. if (gradientColor.length === 1) gradientColor.push(gradientColor[0]);
  185. var gradientParams = getGradientParams(lineItem);
  186. style = _objectSpread(_objectSpread({}, style), {}, {
  187. stroke: 'rgba(0, 0, 0, 0)'
  188. });
  189. return (0, _util.deepMerge)({
  190. gradientColor: gradientColor,
  191. gradientParams: gradientParams,
  192. gradientType: 'linear',
  193. gradientWith: 'fill'
  194. }, style);
  195. }
  196. function getGradientParams(lineItem) {
  197. var lineFillBottomPos = lineItem.lineFillBottomPos,
  198. linePosition = lineItem.linePosition;
  199. var changeIndex = lineFillBottomPos.changeIndex,
  200. changeValue = lineFillBottomPos.changeValue;
  201. var mainPos = linePosition.map(function (p) {
  202. return p[changeIndex];
  203. });
  204. var maxPos = Math.max.apply(Math, (0, _toConsumableArray2["default"])(mainPos));
  205. var minPos = Math.min.apply(Math, (0, _toConsumableArray2["default"])(mainPos));
  206. var beginPos = maxPos;
  207. if (changeIndex === 1) beginPos = minPos;
  208. if (changeIndex === 1) {
  209. return [0, beginPos, 0, changeValue];
  210. } else {
  211. return [beginPos, 0, changeValue, 0];
  212. }
  213. }
  214. function lineAreaDrawed(_ref5, _ref6) {
  215. var lineFillBottomPos = _ref5.lineFillBottomPos,
  216. shape = _ref5.shape;
  217. var ctx = _ref6.ctx;
  218. var points = shape.points;
  219. var changeIndex = lineFillBottomPos.changeIndex,
  220. changeValue = lineFillBottomPos.changeValue;
  221. var linePoint1 = (0, _toConsumableArray2["default"])(points[points.length - 1]);
  222. var linePoint2 = (0, _toConsumableArray2["default"])(points[0]);
  223. linePoint1[changeIndex] = changeValue;
  224. linePoint2[changeIndex] = changeValue;
  225. ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(linePoint1));
  226. ctx.lineTo.apply(ctx, (0, _toConsumableArray2["default"])(linePoint2));
  227. ctx.closePath();
  228. ctx.fill();
  229. }
  230. function getStartLineAreaConfig(lineItem) {
  231. var config = getLineAreaConfig(lineItem)[0];
  232. var style = _objectSpread({}, config.style);
  233. style.opacity = 0;
  234. config.style = style;
  235. return [config];
  236. }
  237. function beforeUpdateLineAndArea(graphs, lineItem, i, updater) {
  238. var cache = graphs[i];
  239. if (!cache) return;
  240. var currentName = getLineGraphName(lineItem);
  241. var render = updater.chart.render;
  242. var name = cache[0].name;
  243. var delAll = currentName !== name;
  244. if (!delAll) return;
  245. cache.forEach(function (g) {
  246. return render.delGraph(g);
  247. });
  248. graphs[i] = null;
  249. }
  250. function beforeChangeLineAndArea(graph, config) {
  251. var points = config.shape.points;
  252. var graphPoints = graph.shape.points;
  253. var graphPointsNum = graphPoints.length;
  254. var pointsNum = points.length;
  255. if (pointsNum > graphPointsNum) {
  256. var lastPoint = graphPoints.slice(-1)[0];
  257. var newAddPoints = new Array(pointsNum - graphPointsNum).fill(0).map(function (foo) {
  258. return (0, _toConsumableArray2["default"])(lastPoint);
  259. });
  260. graphPoints.push.apply(graphPoints, (0, _toConsumableArray2["default"])(newAddPoints));
  261. } else if (pointsNum < graphPointsNum) {
  262. graphPoints.splice(pointsNum);
  263. }
  264. }
  265. function getLineConfig(lineItem) {
  266. var animationCurve = lineItem.animationCurve,
  267. animationFrame = lineItem.animationFrame,
  268. rLevel = lineItem.rLevel;
  269. return [{
  270. name: getLineGraphName(lineItem),
  271. index: rLevel + 1,
  272. animationCurve: animationCurve,
  273. animationFrame: animationFrame,
  274. shape: getLineAndAreaShape(lineItem),
  275. style: getLineStyle(lineItem)
  276. }];
  277. }
  278. function getLineGraphName(lineItem) {
  279. var smooth = lineItem.smooth;
  280. return smooth ? 'smoothline' : 'polyline';
  281. }
  282. function getLineStyle(lineItem) {
  283. var lineStyle = lineItem.lineStyle,
  284. color = lineItem.color,
  285. smooth = lineItem.smooth,
  286. linePosition = lineItem.linePosition;
  287. var lineLength = getLineLength(linePosition, smooth);
  288. return (0, _util.deepMerge)({
  289. stroke: color,
  290. lineDash: [lineLength, 0]
  291. }, lineStyle);
  292. }
  293. function getLineLength(points) {
  294. var smooth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  295. if (!smooth) return (0, _util.getPolylineLength)(points);
  296. var curve = polylineToBezierCurve(points);
  297. return getBezierCurveLength(curve);
  298. }
  299. function getStartLineConfig(lineItem) {
  300. var lineDash = lineItem.lineStyle.lineDash;
  301. var config = getLineConfig(lineItem)[0];
  302. var realLineDash = config.style.lineDash;
  303. if (lineDash) {
  304. realLineDash = [0, 0];
  305. } else {
  306. realLineDash = (0, _toConsumableArray2["default"])(realLineDash).reverse();
  307. }
  308. config.style.lineDash = realLineDash;
  309. return [config];
  310. }
  311. function getPointConfig(lineItem) {
  312. var animationCurve = lineItem.animationCurve,
  313. animationFrame = lineItem.animationFrame,
  314. rLevel = lineItem.rLevel;
  315. var shapes = getPointShapes(lineItem);
  316. var style = getPointStyle(lineItem);
  317. return shapes.map(function (shape) {
  318. return {
  319. name: 'circle',
  320. index: rLevel + 2,
  321. visible: lineItem.linePoint.show,
  322. animationCurve: animationCurve,
  323. animationFrame: animationFrame,
  324. shape: shape,
  325. style: style
  326. };
  327. });
  328. }
  329. function getPointShapes(lineItem) {
  330. var linePosition = lineItem.linePosition,
  331. radius = lineItem.linePoint.radius;
  332. return linePosition.map(function (_ref7) {
  333. var _ref8 = (0, _slicedToArray2["default"])(_ref7, 2),
  334. rx = _ref8[0],
  335. ry = _ref8[1];
  336. return {
  337. r: radius,
  338. rx: rx,
  339. ry: ry
  340. };
  341. });
  342. }
  343. function getPointStyle(lineItem) {
  344. var color = lineItem.color,
  345. style = lineItem.linePoint.style;
  346. return (0, _util.deepMerge)({
  347. stroke: color
  348. }, style);
  349. }
  350. function getStartPointConfig(lineItem) {
  351. var configs = getPointConfig(lineItem);
  352. configs.forEach(function (config) {
  353. config.shape.r = 0.1;
  354. });
  355. return configs;
  356. }
  357. function getLabelConfig(lineItem) {
  358. var animationCurve = lineItem.animationCurve,
  359. animationFrame = lineItem.animationFrame,
  360. rLevel = lineItem.rLevel;
  361. var shapes = getLabelShapes(lineItem);
  362. var style = getLabelStyle(lineItem);
  363. return shapes.map(function (shape, i) {
  364. return {
  365. name: 'text',
  366. index: rLevel + 3,
  367. visible: lineItem.label.show,
  368. animationCurve: animationCurve,
  369. animationFrame: animationFrame,
  370. shape: shape,
  371. style: style
  372. };
  373. });
  374. }
  375. function getLabelShapes(lineItem) {
  376. var contents = formatterLabel(lineItem);
  377. var position = getLabelPosition(lineItem);
  378. return contents.map(function (content, i) {
  379. return {
  380. content: content,
  381. position: position[i]
  382. };
  383. });
  384. }
  385. function getLabelPosition(lineItem) {
  386. var linePosition = lineItem.linePosition,
  387. lineFillBottomPos = lineItem.lineFillBottomPos,
  388. label = lineItem.label;
  389. var position = label.position,
  390. offset = label.offset;
  391. var changeIndex = lineFillBottomPos.changeIndex,
  392. changeValue = lineFillBottomPos.changeValue;
  393. return linePosition.map(function (pos) {
  394. if (position === 'bottom') {
  395. pos = (0, _toConsumableArray2["default"])(pos);
  396. pos[changeIndex] = changeValue;
  397. }
  398. if (position === 'center') {
  399. var bottom = (0, _toConsumableArray2["default"])(pos);
  400. bottom[changeIndex] = changeValue;
  401. pos = getCenterLabelPoint(pos, bottom);
  402. }
  403. return getOffsetedPoint(pos, offset);
  404. });
  405. }
  406. function getOffsetedPoint(_ref9, _ref10) {
  407. var _ref11 = (0, _slicedToArray2["default"])(_ref9, 2),
  408. x = _ref11[0],
  409. y = _ref11[1];
  410. var _ref12 = (0, _slicedToArray2["default"])(_ref10, 2),
  411. ox = _ref12[0],
  412. oy = _ref12[1];
  413. return [x + ox, y + oy];
  414. }
  415. function getCenterLabelPoint(_ref13, _ref14) {
  416. var _ref15 = (0, _slicedToArray2["default"])(_ref13, 2),
  417. ax = _ref15[0],
  418. ay = _ref15[1];
  419. var _ref16 = (0, _slicedToArray2["default"])(_ref14, 2),
  420. bx = _ref16[0],
  421. by = _ref16[1];
  422. return [(ax + bx) / 2, (ay + by) / 2];
  423. }
  424. function formatterLabel(lineItem) {
  425. var data = lineItem.data,
  426. formatter = lineItem.label.formatter;
  427. data = data.filter(function (d) {
  428. return typeof d === 'number';
  429. }).map(function (d) {
  430. return d.toString();
  431. });
  432. if (!formatter) return data;
  433. var type = (0, _typeof2["default"])(formatter);
  434. if (type === 'string') return data.map(function (d) {
  435. return formatter.replace('{value}', d);
  436. });
  437. if (type === 'function') return data.map(function (value, index) {
  438. return formatter({
  439. value: value,
  440. index: index
  441. });
  442. });
  443. return data;
  444. }
  445. function getLabelStyle(lineItem) {
  446. var color = lineItem.color,
  447. style = lineItem.label.style;
  448. return (0, _util.deepMerge)({
  449. fill: color
  450. }, style);
  451. }