| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.legend = legend;
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
- var _updater = require("../class/updater.class");
- var _util = require("@jiaminghi/c-render/lib/plugin/util");
- var _config = require("../config");
- var _util2 = require("../util");
- function legend(chart) {
- var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
- var legend = option.legend;
- if (legend) {
- legend = (0, _util2.deepMerge)((0, _util.deepClone)(_config.legendConfig, true), legend);
- legend = initLegendData(legend);
- legend = filterInvalidData(legend, option, chart);
- legend = calcLegendTextWidth(legend, chart);
- legend = calcLegendPosition(legend, chart);
- legend = [legend];
- } else {
- legend = [];
- }
- (0, _updater.doUpdate)({
- chart: chart,
- series: legend,
- key: 'legendIcon',
- getGraphConfig: getIconConfig
- });
- (0, _updater.doUpdate)({
- chart: chart,
- series: legend,
- key: 'legendText',
- getGraphConfig: getTextConfig
- });
- }
- function initLegendData(legend) {
- var data = legend.data;
- legend.data = data.map(function (item) {
- var itemType = (0, _typeof2["default"])(item);
- if (itemType === 'string') {
- return {
- name: item
- };
- } else if (itemType === 'object') {
- return item;
- }
- return {
- name: ''
- };
- });
- return legend;
- }
- function filterInvalidData(legend, option, chart) {
- var series = option.series;
- var legendStatus = chart.legendStatus;
- var data = legend.data.filter(function (item) {
- var name = item.name;
- var result = series.find(function (_ref) {
- var sn = _ref.name;
- return name === sn;
- });
- if (!result) return false;
- if (!item.color) item.color = result.color;
- if (!item.icon) item.icon = result.type;
- return item;
- });
- if (!legendStatus || legendStatus.length !== legend.data.length) legendStatus = new Array(legend.data.length).fill(true);
- data.forEach(function (item, i) {
- return item.status = legendStatus[i];
- });
- legend.data = data;
- chart.legendStatus = legendStatus;
- return legend;
- }
- function calcLegendTextWidth(legend, chart) {
- var ctx = chart.render.ctx;
- var data = legend.data,
- textStyle = legend.textStyle,
- textUnselectedStyle = legend.textUnselectedStyle;
- data.forEach(function (item) {
- var status = item.status,
- name = item.name;
- item.textWidth = getTextWidth(ctx, name, status ? textStyle : textUnselectedStyle);
- });
- return legend;
- }
- function getTextWidth(ctx, text, style) {
- ctx.font = getFontConfig(style);
- return ctx.measureText(text).width;
- }
- function getFontConfig(style) {
- var fontFamily = style.fontFamily,
- fontSize = style.fontSize;
- return "".concat(fontSize, "px ").concat(fontFamily);
- }
- function calcLegendPosition(legend, chart) {
- var orient = legend.orient;
- if (orient === 'vertical') {
- calcVerticalPosition(legend, chart);
- } else {
- calcHorizontalPosition(legend, chart);
- }
- return legend;
- }
- function calcHorizontalPosition(legend, chart) {
- var iconHeight = legend.iconHeight,
- itemGap = legend.itemGap;
- var lines = calcDefaultHorizontalPosition(legend, chart);
- var xOffsets = lines.map(function (line) {
- return getHorizontalXOffset(line, legend, chart);
- });
- var yOffset = getHorizontalYOffset(legend, chart);
- var align = {
- textAlign: 'left',
- textBaseline: 'middle'
- };
- lines.forEach(function (line, i) {
- return line.forEach(function (item) {
- var iconPosition = item.iconPosition,
- textPosition = item.textPosition;
- var xOffset = xOffsets[i];
- var realYOffset = yOffset + i * (itemGap + iconHeight);
- item.iconPosition = mergeOffset(iconPosition, [xOffset, realYOffset]);
- item.textPosition = mergeOffset(textPosition, [xOffset, realYOffset]);
- item.align = align;
- });
- });
- }
- function calcDefaultHorizontalPosition(legend, chart) {
- var data = legend.data,
- iconWidth = legend.iconWidth;
- var w = chart.render.area[0];
- var startIndex = 0;
- var lines = [[]];
- data.forEach(function (item, i) {
- var beforeWidth = getBeforeWidth(startIndex, i, legend);
- var endXPos = beforeWidth + iconWidth + 5 + item.textWidth;
- if (endXPos >= w) {
- startIndex = i;
- beforeWidth = getBeforeWidth(startIndex, i, legend);
- lines.push([]);
- }
- item.iconPosition = [beforeWidth, 0];
- item.textPosition = [beforeWidth + iconWidth + 5, 0];
- lines.slice(-1)[0].push(item);
- });
- return lines;
- }
- function getBeforeWidth(startIndex, currentIndex, legend) {
- var data = legend.data,
- iconWidth = legend.iconWidth,
- itemGap = legend.itemGap;
- var beforeItem = data.slice(startIndex, currentIndex);
- return (0, _util2.mulAdd)(beforeItem.map(function (_ref2) {
- var textWidth = _ref2.textWidth;
- return textWidth;
- })) + (currentIndex - startIndex) * (itemGap + 5 + iconWidth);
- }
- function getHorizontalXOffset(data, legend, chart) {
- var left = legend.left,
- right = legend.right,
- iconWidth = legend.iconWidth,
- itemGap = legend.itemGap;
- var w = chart.render.area[0];
- var dataNum = data.length;
- var allWidth = (0, _util2.mulAdd)(data.map(function (_ref3) {
- var textWidth = _ref3.textWidth;
- return textWidth;
- })) + dataNum * (5 + iconWidth) + (dataNum - 1) * itemGap;
- var horizontal = [left, right].findIndex(function (pos) {
- return pos !== 'auto';
- });
- if (horizontal === -1) {
- return (w - allWidth) / 2;
- } else if (horizontal === 0) {
- if (typeof left === 'number') return left;
- return parseInt(left) / 100 * w;
- } else {
- if (typeof right !== 'number') right = parseInt(right) / 100 * w;
- return w - (allWidth + right);
- }
- }
- function getHorizontalYOffset(legend, chart) {
- var top = legend.top,
- bottom = legend.bottom,
- iconHeight = legend.iconHeight;
- var h = chart.render.area[1];
- var vertical = [top, bottom].findIndex(function (pos) {
- return pos !== 'auto';
- });
- var halfIconHeight = iconHeight / 2;
- if (vertical === -1) {
- var _chart$gridArea = chart.gridArea,
- y = _chart$gridArea.y,
- height = _chart$gridArea.h;
- return y + height + 45 - halfIconHeight;
- } else if (vertical === 0) {
- if (typeof top === 'number') return top - halfIconHeight;
- return parseInt(top) / 100 * h - halfIconHeight;
- } else {
- if (typeof bottom !== 'number') bottom = parseInt(bottom) / 100 * h;
- return h - bottom - halfIconHeight;
- }
- }
- function mergeOffset(_ref4, _ref5) {
- var _ref6 = (0, _slicedToArray2["default"])(_ref4, 2),
- x = _ref6[0],
- y = _ref6[1];
- var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
- ox = _ref7[0],
- oy = _ref7[1];
- return [x + ox, y + oy];
- }
- function calcVerticalPosition(legend, chart) {
- var _getVerticalXOffset = getVerticalXOffset(legend, chart),
- _getVerticalXOffset2 = (0, _slicedToArray2["default"])(_getVerticalXOffset, 2),
- isRight = _getVerticalXOffset2[0],
- xOffset = _getVerticalXOffset2[1];
- var yOffset = getVerticalYOffset(legend, chart);
- calcDefaultVerticalPosition(legend, isRight);
- var align = {
- textAlign: 'left',
- textBaseline: 'middle'
- };
- legend.data.forEach(function (item) {
- var textPosition = item.textPosition,
- iconPosition = item.iconPosition;
- item.textPosition = mergeOffset(textPosition, [xOffset, yOffset]);
- item.iconPosition = mergeOffset(iconPosition, [xOffset, yOffset]);
- item.align = align;
- });
- }
- function getVerticalXOffset(legend, chart) {
- var left = legend.left,
- right = legend.right;
- var w = chart.render.area[0];
- var horizontal = [left, right].findIndex(function (pos) {
- return pos !== 'auto';
- });
- if (horizontal === -1) {
- return [true, w - 10];
- } else {
- var offset = [left, right][horizontal];
- if (typeof offset !== 'number') offset = parseInt(offset) / 100 * w;
- return [Boolean(horizontal), offset];
- }
- }
- function getVerticalYOffset(legend, chart) {
- var iconHeight = legend.iconHeight,
- itemGap = legend.itemGap,
- data = legend.data,
- top = legend.top,
- bottom = legend.bottom;
- var h = chart.render.area[1];
- var dataNum = data.length;
- var allHeight = dataNum * iconHeight + (dataNum - 1) * itemGap;
- var vertical = [top, bottom].findIndex(function (pos) {
- return pos !== 'auto';
- });
- if (vertical === -1) {
- return (h - allHeight) / 2;
- } else {
- var offset = [top, bottom][vertical];
- if (typeof offset !== 'number') offset = parseInt(offset) / 100 * h;
- if (vertical === 1) offset = h - offset - allHeight;
- return offset;
- }
- }
- function calcDefaultVerticalPosition(legend, isRight) {
- var data = legend.data,
- iconWidth = legend.iconWidth,
- iconHeight = legend.iconHeight,
- itemGap = legend.itemGap;
- var halfIconHeight = iconHeight / 2;
- data.forEach(function (item, i) {
- var textWidth = item.textWidth;
- var yPos = (iconHeight + itemGap) * i + halfIconHeight;
- var iconXPos = isRight ? 0 - iconWidth : 0;
- var textXpos = isRight ? iconXPos - 5 - textWidth : iconWidth + 5;
- item.iconPosition = [iconXPos, yPos];
- item.textPosition = [textXpos, yPos];
- });
- }
- function getIconConfig(legendItem, updater) {
- var data = legendItem.data,
- selectAble = legendItem.selectAble,
- animationCurve = legendItem.animationCurve,
- animationFrame = legendItem.animationFrame,
- rLevel = legendItem.rLevel;
- return data.map(function (item, i) {
- return (0, _defineProperty2["default"])({
- name: item.icon === 'line' ? 'lineIcon' : 'rect',
- index: rLevel,
- visible: legendItem.show,
- hover: selectAble,
- click: selectAble,
- animationCurve: animationCurve,
- animationFrame: animationFrame,
- shape: getIconShape(legendItem, i),
- style: getIconStyle(legendItem, i)
- }, "click", createClickCallBack(legendItem, i, updater));
- });
- }
- function getIconShape(legendItem, i) {
- var data = legendItem.data,
- iconWidth = legendItem.iconWidth,
- iconHeight = legendItem.iconHeight;
- var _data$i$iconPosition = (0, _slicedToArray2["default"])(data[i].iconPosition, 2),
- x = _data$i$iconPosition[0],
- y = _data$i$iconPosition[1];
- var halfIconHeight = iconHeight / 2;
- return {
- x: x,
- y: y - halfIconHeight,
- w: iconWidth,
- h: iconHeight
- };
- }
- function getIconStyle(legendItem, i) {
- var data = legendItem.data,
- iconStyle = legendItem.iconStyle,
- iconUnselectedStyle = legendItem.iconUnselectedStyle;
- var _data$i = data[i],
- status = _data$i.status,
- color = _data$i.color;
- var style = status ? iconStyle : iconUnselectedStyle;
- return (0, _util2.deepMerge)({
- fill: color
- }, style);
- }
- function getTextConfig(legendItem, updater) {
- var data = legendItem.data,
- selectAble = legendItem.selectAble,
- animationCurve = legendItem.animationCurve,
- animationFrame = legendItem.animationFrame,
- rLevel = legendItem.rLevel;
- return data.map(function (foo, i) {
- return {
- name: 'text',
- index: rLevel,
- visible: legendItem.show,
- hover: selectAble,
- animationCurve: animationCurve,
- animationFrame: animationFrame,
- hoverRect: getTextHoverRect(legendItem, i),
- shape: getTextShape(legendItem, i),
- style: getTextStyle(legendItem, i),
- click: createClickCallBack(legendItem, i, updater)
- };
- });
- }
- function getTextShape(legendItem, i) {
- var _legendItem$data$i = legendItem.data[i],
- textPosition = _legendItem$data$i.textPosition,
- name = _legendItem$data$i.name;
- return {
- content: name,
- position: textPosition
- };
- }
- function getTextStyle(legendItem, i) {
- var textStyle = legendItem.textStyle,
- textUnselectedStyle = legendItem.textUnselectedStyle;
- var _legendItem$data$i2 = legendItem.data[i],
- status = _legendItem$data$i2.status,
- align = _legendItem$data$i2.align;
- var style = status ? textStyle : textUnselectedStyle;
- return (0, _util2.deepMerge)((0, _util.deepClone)(style, true), align);
- }
- function getTextHoverRect(legendItem, i) {
- var textStyle = legendItem.textStyle,
- textUnselectedStyle = legendItem.textUnselectedStyle;
- var _legendItem$data$i3 = legendItem.data[i],
- status = _legendItem$data$i3.status,
- _legendItem$data$i3$t = (0, _slicedToArray2["default"])(_legendItem$data$i3.textPosition, 2),
- x = _legendItem$data$i3$t[0],
- y = _legendItem$data$i3$t[1],
- textWidth = _legendItem$data$i3.textWidth;
- var style = status ? textStyle : textUnselectedStyle;
- var fontSize = style.fontSize;
- return [x, y - fontSize / 2, textWidth, fontSize];
- }
- function createClickCallBack(legendItem, index, updater) {
- var name = legendItem.data[index].name;
- return function () {
- var _updater$chart = updater.chart,
- legendStatus = _updater$chart.legendStatus,
- option = _updater$chart.option;
- var status = !legendStatus[index];
- var change = option.series.find(function (_ref9) {
- var sn = _ref9.name;
- return sn === name;
- });
- change.show = status;
- legendStatus[index] = status;
- updater.chart.setOption(option);
- };
- }
|