4b5861a8c71c40d2b41039530b86180606f571fd86e94a202760b1e5ef666c42349523b4bad3a25d74d8e3391d402f59acc79c72b0471f9727eab48e6c7243 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.legend = legend;
  7. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  8. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  9. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  10. var _updater = require("../class/updater.class");
  11. var _util = require("@jiaminghi/c-render/lib/plugin/util");
  12. var _config = require("../config");
  13. var _util2 = require("../util");
  14. function legend(chart) {
  15. var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  16. var legend = option.legend;
  17. if (legend) {
  18. legend = (0, _util2.deepMerge)((0, _util.deepClone)(_config.legendConfig, true), legend);
  19. legend = initLegendData(legend);
  20. legend = filterInvalidData(legend, option, chart);
  21. legend = calcLegendTextWidth(legend, chart);
  22. legend = calcLegendPosition(legend, chart);
  23. legend = [legend];
  24. } else {
  25. legend = [];
  26. }
  27. (0, _updater.doUpdate)({
  28. chart: chart,
  29. series: legend,
  30. key: 'legendIcon',
  31. getGraphConfig: getIconConfig
  32. });
  33. (0, _updater.doUpdate)({
  34. chart: chart,
  35. series: legend,
  36. key: 'legendText',
  37. getGraphConfig: getTextConfig
  38. });
  39. }
  40. function initLegendData(legend) {
  41. var data = legend.data;
  42. legend.data = data.map(function (item) {
  43. var itemType = (0, _typeof2["default"])(item);
  44. if (itemType === 'string') {
  45. return {
  46. name: item
  47. };
  48. } else if (itemType === 'object') {
  49. return item;
  50. }
  51. return {
  52. name: ''
  53. };
  54. });
  55. return legend;
  56. }
  57. function filterInvalidData(legend, option, chart) {
  58. var series = option.series;
  59. var legendStatus = chart.legendStatus;
  60. var data = legend.data.filter(function (item) {
  61. var name = item.name;
  62. var result = series.find(function (_ref) {
  63. var sn = _ref.name;
  64. return name === sn;
  65. });
  66. if (!result) return false;
  67. if (!item.color) item.color = result.color;
  68. if (!item.icon) item.icon = result.type;
  69. return item;
  70. });
  71. if (!legendStatus || legendStatus.length !== legend.data.length) legendStatus = new Array(legend.data.length).fill(true);
  72. data.forEach(function (item, i) {
  73. return item.status = legendStatus[i];
  74. });
  75. legend.data = data;
  76. chart.legendStatus = legendStatus;
  77. return legend;
  78. }
  79. function calcLegendTextWidth(legend, chart) {
  80. var ctx = chart.render.ctx;
  81. var data = legend.data,
  82. textStyle = legend.textStyle,
  83. textUnselectedStyle = legend.textUnselectedStyle;
  84. data.forEach(function (item) {
  85. var status = item.status,
  86. name = item.name;
  87. item.textWidth = getTextWidth(ctx, name, status ? textStyle : textUnselectedStyle);
  88. });
  89. return legend;
  90. }
  91. function getTextWidth(ctx, text, style) {
  92. ctx.font = getFontConfig(style);
  93. return ctx.measureText(text).width;
  94. }
  95. function getFontConfig(style) {
  96. var fontFamily = style.fontFamily,
  97. fontSize = style.fontSize;
  98. return "".concat(fontSize, "px ").concat(fontFamily);
  99. }
  100. function calcLegendPosition(legend, chart) {
  101. var orient = legend.orient;
  102. if (orient === 'vertical') {
  103. calcVerticalPosition(legend, chart);
  104. } else {
  105. calcHorizontalPosition(legend, chart);
  106. }
  107. return legend;
  108. }
  109. function calcHorizontalPosition(legend, chart) {
  110. var iconHeight = legend.iconHeight,
  111. itemGap = legend.itemGap;
  112. var lines = calcDefaultHorizontalPosition(legend, chart);
  113. var xOffsets = lines.map(function (line) {
  114. return getHorizontalXOffset(line, legend, chart);
  115. });
  116. var yOffset = getHorizontalYOffset(legend, chart);
  117. var align = {
  118. textAlign: 'left',
  119. textBaseline: 'middle'
  120. };
  121. lines.forEach(function (line, i) {
  122. return line.forEach(function (item) {
  123. var iconPosition = item.iconPosition,
  124. textPosition = item.textPosition;
  125. var xOffset = xOffsets[i];
  126. var realYOffset = yOffset + i * (itemGap + iconHeight);
  127. item.iconPosition = mergeOffset(iconPosition, [xOffset, realYOffset]);
  128. item.textPosition = mergeOffset(textPosition, [xOffset, realYOffset]);
  129. item.align = align;
  130. });
  131. });
  132. }
  133. function calcDefaultHorizontalPosition(legend, chart) {
  134. var data = legend.data,
  135. iconWidth = legend.iconWidth;
  136. var w = chart.render.area[0];
  137. var startIndex = 0;
  138. var lines = [[]];
  139. data.forEach(function (item, i) {
  140. var beforeWidth = getBeforeWidth(startIndex, i, legend);
  141. var endXPos = beforeWidth + iconWidth + 5 + item.textWidth;
  142. if (endXPos >= w) {
  143. startIndex = i;
  144. beforeWidth = getBeforeWidth(startIndex, i, legend);
  145. lines.push([]);
  146. }
  147. item.iconPosition = [beforeWidth, 0];
  148. item.textPosition = [beforeWidth + iconWidth + 5, 0];
  149. lines.slice(-1)[0].push(item);
  150. });
  151. return lines;
  152. }
  153. function getBeforeWidth(startIndex, currentIndex, legend) {
  154. var data = legend.data,
  155. iconWidth = legend.iconWidth,
  156. itemGap = legend.itemGap;
  157. var beforeItem = data.slice(startIndex, currentIndex);
  158. return (0, _util2.mulAdd)(beforeItem.map(function (_ref2) {
  159. var textWidth = _ref2.textWidth;
  160. return textWidth;
  161. })) + (currentIndex - startIndex) * (itemGap + 5 + iconWidth);
  162. }
  163. function getHorizontalXOffset(data, legend, chart) {
  164. var left = legend.left,
  165. right = legend.right,
  166. iconWidth = legend.iconWidth,
  167. itemGap = legend.itemGap;
  168. var w = chart.render.area[0];
  169. var dataNum = data.length;
  170. var allWidth = (0, _util2.mulAdd)(data.map(function (_ref3) {
  171. var textWidth = _ref3.textWidth;
  172. return textWidth;
  173. })) + dataNum * (5 + iconWidth) + (dataNum - 1) * itemGap;
  174. var horizontal = [left, right].findIndex(function (pos) {
  175. return pos !== 'auto';
  176. });
  177. if (horizontal === -1) {
  178. return (w - allWidth) / 2;
  179. } else if (horizontal === 0) {
  180. if (typeof left === 'number') return left;
  181. return parseInt(left) / 100 * w;
  182. } else {
  183. if (typeof right !== 'number') right = parseInt(right) / 100 * w;
  184. return w - (allWidth + right);
  185. }
  186. }
  187. function getHorizontalYOffset(legend, chart) {
  188. var top = legend.top,
  189. bottom = legend.bottom,
  190. iconHeight = legend.iconHeight;
  191. var h = chart.render.area[1];
  192. var vertical = [top, bottom].findIndex(function (pos) {
  193. return pos !== 'auto';
  194. });
  195. var halfIconHeight = iconHeight / 2;
  196. if (vertical === -1) {
  197. var _chart$gridArea = chart.gridArea,
  198. y = _chart$gridArea.y,
  199. height = _chart$gridArea.h;
  200. return y + height + 45 - halfIconHeight;
  201. } else if (vertical === 0) {
  202. if (typeof top === 'number') return top - halfIconHeight;
  203. return parseInt(top) / 100 * h - halfIconHeight;
  204. } else {
  205. if (typeof bottom !== 'number') bottom = parseInt(bottom) / 100 * h;
  206. return h - bottom - halfIconHeight;
  207. }
  208. }
  209. function mergeOffset(_ref4, _ref5) {
  210. var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
  211. x = _ref6[0],
  212. y = _ref6[1];
  213. var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
  214. ox = _ref7[0],
  215. oy = _ref7[1];
  216. return [x + ox, y + oy];
  217. }
  218. function calcVerticalPosition(legend, chart) {
  219. var _getVerticalXOffset = getVerticalXOffset(legend, chart),
  220. _getVerticalXOffset2 = (0, _slicedToArray2["default"])(_getVerticalXOffset, 2),
  221. isRight = _getVerticalXOffset2[0],
  222. xOffset = _getVerticalXOffset2[1];
  223. var yOffset = getVerticalYOffset(legend, chart);
  224. calcDefaultVerticalPosition(legend, isRight);
  225. var align = {
  226. textAlign: 'left',
  227. textBaseline: 'middle'
  228. };
  229. legend.data.forEach(function (item) {
  230. var textPosition = item.textPosition,
  231. iconPosition = item.iconPosition;
  232. item.textPosition = mergeOffset(textPosition, [xOffset, yOffset]);
  233. item.iconPosition = mergeOffset(iconPosition, [xOffset, yOffset]);
  234. item.align = align;
  235. });
  236. }
  237. function getVerticalXOffset(legend, chart) {
  238. var left = legend.left,
  239. right = legend.right;
  240. var w = chart.render.area[0];
  241. var horizontal = [left, right].findIndex(function (pos) {
  242. return pos !== 'auto';
  243. });
  244. if (horizontal === -1) {
  245. return [true, w - 10];
  246. } else {
  247. var offset = [left, right][horizontal];
  248. if (typeof offset !== 'number') offset = parseInt(offset) / 100 * w;
  249. return [Boolean(horizontal), offset];
  250. }
  251. }
  252. function getVerticalYOffset(legend, chart) {
  253. var iconHeight = legend.iconHeight,
  254. itemGap = legend.itemGap,
  255. data = legend.data,
  256. top = legend.top,
  257. bottom = legend.bottom;
  258. var h = chart.render.area[1];
  259. var dataNum = data.length;
  260. var allHeight = dataNum * iconHeight + (dataNum - 1) * itemGap;
  261. var vertical = [top, bottom].findIndex(function (pos) {
  262. return pos !== 'auto';
  263. });
  264. if (vertical === -1) {
  265. return (h - allHeight) / 2;
  266. } else {
  267. var offset = [top, bottom][vertical];
  268. if (typeof offset !== 'number') offset = parseInt(offset) / 100 * h;
  269. if (vertical === 1) offset = h - offset - allHeight;
  270. return offset;
  271. }
  272. }
  273. function calcDefaultVerticalPosition(legend, isRight) {
  274. var data = legend.data,
  275. iconWidth = legend.iconWidth,
  276. iconHeight = legend.iconHeight,
  277. itemGap = legend.itemGap;
  278. var halfIconHeight = iconHeight / 2;
  279. data.forEach(function (item, i) {
  280. var textWidth = item.textWidth;
  281. var yPos = (iconHeight + itemGap) * i + halfIconHeight;
  282. var iconXPos = isRight ? 0 - iconWidth : 0;
  283. var textXpos = isRight ? iconXPos - 5 - textWidth : iconWidth + 5;
  284. item.iconPosition = [iconXPos, yPos];
  285. item.textPosition = [textXpos, yPos];
  286. });
  287. }
  288. function getIconConfig(legendItem, updater) {
  289. var data = legendItem.data,
  290. selectAble = legendItem.selectAble,
  291. animationCurve = legendItem.animationCurve,
  292. animationFrame = legendItem.animationFrame,
  293. rLevel = legendItem.rLevel;
  294. return data.map(function (item, i) {
  295. return (0, _defineProperty2["default"])({
  296. name: item.icon === 'line' ? 'lineIcon' : 'rect',
  297. index: rLevel,
  298. visible: legendItem.show,
  299. hover: selectAble,
  300. click: selectAble,
  301. animationCurve: animationCurve,
  302. animationFrame: animationFrame,
  303. shape: getIconShape(legendItem, i),
  304. style: getIconStyle(legendItem, i)
  305. }, "click", createClickCallBack(legendItem, i, updater));
  306. });
  307. }
  308. function getIconShape(legendItem, i) {
  309. var data = legendItem.data,
  310. iconWidth = legendItem.iconWidth,
  311. iconHeight = legendItem.iconHeight;
  312. var _data$i$iconPosition = (0, _slicedToArray2["default"])(data[i].iconPosition, 2),
  313. x = _data$i$iconPosition[0],
  314. y = _data$i$iconPosition[1];
  315. var halfIconHeight = iconHeight / 2;
  316. return {
  317. x: x,
  318. y: y - halfIconHeight,
  319. w: iconWidth,
  320. h: iconHeight
  321. };
  322. }
  323. function getIconStyle(legendItem, i) {
  324. var data = legendItem.data,
  325. iconStyle = legendItem.iconStyle,
  326. iconUnselectedStyle = legendItem.iconUnselectedStyle;
  327. var _data$i = data[i],
  328. status = _data$i.status,
  329. color = _data$i.color;
  330. var style = status ? iconStyle : iconUnselectedStyle;
  331. return (0, _util2.deepMerge)({
  332. fill: color
  333. }, style);
  334. }
  335. function getTextConfig(legendItem, updater) {
  336. var data = legendItem.data,
  337. selectAble = legendItem.selectAble,
  338. animationCurve = legendItem.animationCurve,
  339. animationFrame = legendItem.animationFrame,
  340. rLevel = legendItem.rLevel;
  341. return data.map(function (foo, i) {
  342. return {
  343. name: 'text',
  344. index: rLevel,
  345. visible: legendItem.show,
  346. hover: selectAble,
  347. animationCurve: animationCurve,
  348. animationFrame: animationFrame,
  349. hoverRect: getTextHoverRect(legendItem, i),
  350. shape: getTextShape(legendItem, i),
  351. style: getTextStyle(legendItem, i),
  352. click: createClickCallBack(legendItem, i, updater)
  353. };
  354. });
  355. }
  356. function getTextShape(legendItem, i) {
  357. var _legendItem$data$i = legendItem.data[i],
  358. textPosition = _legendItem$data$i.textPosition,
  359. name = _legendItem$data$i.name;
  360. return {
  361. content: name,
  362. position: textPosition
  363. };
  364. }
  365. function getTextStyle(legendItem, i) {
  366. var textStyle = legendItem.textStyle,
  367. textUnselectedStyle = legendItem.textUnselectedStyle;
  368. var _legendItem$data$i2 = legendItem.data[i],
  369. status = _legendItem$data$i2.status,
  370. align = _legendItem$data$i2.align;
  371. var style = status ? textStyle : textUnselectedStyle;
  372. return (0, _util2.deepMerge)((0, _util.deepClone)(style, true), align);
  373. }
  374. function getTextHoverRect(legendItem, i) {
  375. var textStyle = legendItem.textStyle,
  376. textUnselectedStyle = legendItem.textUnselectedStyle;
  377. var _legendItem$data$i3 = legendItem.data[i],
  378. status = _legendItem$data$i3.status,
  379. _legendItem$data$i3$t = (0, _slicedToArray2["default"])(_legendItem$data$i3.textPosition, 2),
  380. x = _legendItem$data$i3$t[0],
  381. y = _legendItem$data$i3$t[1],
  382. textWidth = _legendItem$data$i3.textWidth;
  383. var style = status ? textStyle : textUnselectedStyle;
  384. var fontSize = style.fontSize;
  385. return [x, y - fontSize / 2, textWidth, fontSize];
  386. }
  387. function createClickCallBack(legendItem, index, updater) {
  388. var name = legendItem.data[index].name;
  389. return function () {
  390. var _updater$chart = updater.chart,
  391. legendStatus = _updater$chart.legendStatus,
  392. option = _updater$chart.option;
  393. var status = !legendStatus[index];
  394. var change = option.series.find(function (_ref9) {
  395. var sn = _ref9.name;
  396. return sn === name;
  397. });
  398. change.show = status;
  399. legendStatus[index] = status;
  400. updater.chart.setOption(option);
  401. };
  402. }