@alicloud/cloud-charts
Version:
226 lines (216 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.clearHighlight = _clearHighlight;
exports["default"] = void 0;
exports.filterLegend = _filterLegend;
exports.getLegendItems = _getLegendItems;
exports.getStatistics = getStatistics;
exports.highlightLegend = _highlightLegend;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
/** 计算每个legend的统计数据 */
function getStatistics(chart, statistics, legendField) {
var _chart$options$data, _chart$options, _chart$widgetsCtx;
// 业务偶现chart为null，导致filteredData无法获取的报错，暂不清楚原因，这里增加兜底逻辑
// @ts-ignore
var data = [].concat((_chart$options$data = chart === null || chart === void 0 ? void 0 : (_chart$options = chart.options) === null || _chart$options === void 0 ? void 0 : _chart$options.data) !== null && _chart$options$data !== void 0 ? _chart$options$data : []);
chart === null || chart === void 0 ? void 0 : chart.views.map(function (view) {
var _view$options$data, _view$options;
// @ts-ignore
data = [].concat(data, (_view$options$data = view === null || view === void 0 ? void 0 : (_view$options = view.options) === null || _view$options === void 0 ? void 0 : _view$options.data) !== null && _view$options$data !== void 0 ? _view$options$data : []);
});
// 将每类数据分类
var items = {};
data.forEach(function (item) {
var _ref, _item$value;
var legendName = item[legendField];
if (!(legendName in items)) {
items[legendName] = [];
}
items[legendName].push((0, _extends2["default"])({}, item, {
// 解决树类型数据遍历的时候value值计算出现undefined得问题
value: (_ref = (_item$value = item === null || item === void 0 ? void 0 : item.value) !== null && _item$value !== void 0 ? _item$value : item === null || item === void 0 ? void 0 : item.rawValue) !== null && _ref !== void 0 ? _ref : item === null || item === void 0 ? void 0 : item.y
}));
});
// @ts-ignore
var chartName = chart === null || chart === void 0 ? void 0 : (_chart$widgetsCtx = chart.widgetsCtx) === null || _chart$widgetsCtx === void 0 ? void 0 : _chart$widgetsCtx.chartName;
var res = {};
Object.keys(items).forEach(function (name) {
var yValues = items[name].map(function (item) {
var _ref2, _item$y;
return (_ref2 = (_item$y = item.y) !== null && _item$y !== void 0 ? _item$y : item.y0) !== null && _ref2 !== void 0 ? _ref2 : item.y1;
}).filter(function (val) {
return typeof val === 'number';
});
if (['G2MultiPie', 'G2Map'].includes(chartName)) {
yValues = items[name].map(function (item) {
var _item$value2;
return (_item$value2 = item.value) !== null && _item$value2 !== void 0 ? _item$value2 : item === null || item === void 0 ? void 0 : item.rawValue;
});
}
var statisticsRes = {};
statistics.forEach(function (statistic) {
if (statistic === 'min') {
statisticsRes.min = Math.min.apply(Math, yValues);
} else if (statistic === 'max') {
statisticsRes.max = Math.max.apply(Math, yValues);
} else if (statistic === 'avg') {
statisticsRes.avg = yValues.reduce(function (pre, cur) {
return pre + cur;
}, 0) / yValues.length;
} else {
statisticsRes.current = yValues[yValues.length - 1];
}
});
res[name] = (0, _extends2["default"])({}, statisticsRes, {
data: items[name]
});
});
return res;
}
/** 获取legend信息 */
function _getLegendItems(chart, legendField, statistics, config) {
var _chart$options2, _chart$options2$legen, _chart$widgetsCtx2;
if (statistics === void 0) {
statistics = [];
}
if (config === void 0) {
config = {};
}
var statisticsRes = getStatistics(chart, statistics, legendField);
// 对线柱图、线点图等配置了items的情况，直接读取items
if (chart !== null && chart !== void 0 && (_chart$options2 = chart.options) !== null && _chart$options2 !== void 0 && (_chart$options2$legen = _chart$options2.legends) !== null && _chart$options2$legen !== void 0 && _chart$options2$legen.items) {
var _chart$options3, _chart$options3$legen;
return chart === null || chart === void 0 ? void 0 : (_chart$options3 = chart.options) === null || _chart$options3 === void 0 ? void 0 : (_chart$options3$legen = _chart$options3.legends) === null || _chart$options3$legen === void 0 ? void 0 : _chart$options3$legen.items.map(function (item) {
var _item$marker, _item$marker$style, _item$marker2, _item$marker2$style;
return (0, _extends2["default"])({
name: item.id || item.name,
color: (item === null || item === void 0 ? void 0 : (_item$marker = item.marker) === null || _item$marker === void 0 ? void 0 : (_item$marker$style = _item$marker.style) === null || _item$marker$style === void 0 ? void 0 : _item$marker$style.fill) || (item === null || item === void 0 ? void 0 : (_item$marker2 = item.marker) === null || _item$marker2 === void 0 ? void 0 : (_item$marker2$style = _item$marker2.style) === null || _item$marker2$style === void 0 ? void 0 : _item$marker2$style.stroke)
}, statisticsRes[item.id || item.name]);
});
}
// @ts-ignore
var chartName = chart === null || chart === void 0 ? void 0 : (_chart$widgetsCtx2 = chart.widgetsCtx) === null || _chart$widgetsCtx2 === void 0 ? void 0 : _chart$widgetsCtx2.chartName;
return Object.keys(statisticsRes).map(function (name, index) {
var _config, _config2;
var colors = chartName === 'G2Map' ? (_config = config) === null || _config === void 0 ? void 0 : _config.pointColors : (_config2 = config) === null || _config2 === void 0 ? void 0 : _config2.colors;
var color = typeof colors === 'function' ? colors(name) : Array.isArray(colors) ? colors[index % colors.length] : colors;
return (0, _extends2["default"])({
name: name,
color: color
}, statisticsRes[name]);
});
}
/** 过滤legend */
function _filterLegend(chart, condition, legendField) {
var views = [].concat(chart === null || chart === void 0 ? void 0 : chart.views, [chart]);
views.forEach(function (view) {
var _view$getComponents;
view === null || view === void 0 ? void 0 : (_view$getComponents = view.getComponents()) === null || _view$getComponents === void 0 ? void 0 : _view$getComponents.forEach(function (co) {
if (co.type === 'legend') {
var items = co.component.getItems();
items === null || items === void 0 ? void 0 : items.forEach(function (item) {
if (condition(item.id || item.name)) {
co.component.setItemState(item, 'checked', true);
co.component.setItemState(item, 'unchecked', false);
} else {
co.component.setItemState(item, 'checked', false);
co.component.setItemState(item, 'unchecked', true);
}
});
}
});
view.filter(legendField, condition);
});
chart.render();
}
/** 高亮legend */
function _highlightLegend(chart, condition, legendField) {
var views = [].concat(chart === null || chart === void 0 ? void 0 : chart.views, [chart]);
views.forEach(function (view) {
var _view$getComponents2;
view === null || view === void 0 ? void 0 : (_view$getComponents2 = view.getComponents()) === null || _view$getComponents2 === void 0 ? void 0 : _view$getComponents2.forEach(function (co) {
if (co.type === 'legend') {
var items = co.component.getItems();
items.forEach(function (item) {
if (condition(item.id || item.name)) {
co.component.setItemState(item, 'active', true);
co.component.setItemState(item, 'inactive', false);
} else {
co.component.setItemState(item, 'active', false);
co.component.setItemState(item, 'inactive', true);
}
});
}
});
view.getElements().forEach(function (element) {
var _data$legendField, _data$;
var data = element.getData();
var name = (_data$legendField = data === null || data === void 0 ? void 0 : data[legendField]) !== null && _data$legendField !== void 0 ? _data$legendField : data === null || data === void 0 ? void 0 : (_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$[legendField];
if (condition(name)) {
element.setState('active', true);
} else {
element.setState('inactive', true);
}
});
});
}
/** 清除高亮 */
function _clearHighlight(chart) {
var views = [].concat(chart === null || chart === void 0 ? void 0 : chart.views, [chart]);
views.forEach(function (view) {
var _view$getComponents3;
view === null || view === void 0 ? void 0 : (_view$getComponents3 = view.getComponents()) === null || _view$getComponents3 === void 0 ? void 0 : _view$getComponents3.forEach(function (co) {
if (co.type === 'legend') {
var items = co.component.getItems();
items.forEach(function (item) {
co.component.setItemState(item, 'active', false);
co.component.setItemState(item, 'inactive', false);
});
}
});
view.getElements().forEach(function (element) {
element.clearStates();
});
});
}
/** 通过chartRef对外暴露的函数 */
var getFunctions = function getFunctions(base, config) {
return {
/** 获取chart实例 */
getChart: function getChart() {
return base.chart;
},
/** 获取legend信息，包括名称、颜色及改列数据统计信息 */
getLegendItems: function getLegendItems(statistics) {
if (statistics === void 0) {
statistics = [];
}
var chart = base.chart,
_base$legendField = base.legendField,
legendField = _base$legendField === void 0 ? 'type' : _base$legendField;
return _getLegendItems(chart, legendField, statistics, config);
},
/** 过滤数据 */
filterLegend: function filterLegend(condition) {
var _base$legendField2 = base.legendField,
legendField = _base$legendField2 === void 0 ? 'type' : _base$legendField2;
_filterLegend(base.chart, condition, legendField);
},
/** 高亮元素 */
highlightLegend: function highlightLegend(condition) {
var _base$legendField3 = base.legendField,
legendField = _base$legendField3 === void 0 ? 'type' : _base$legendField3;
_highlightLegend(base.chart, condition, legendField);
},
/** 清除所有高亮状态 */
clearHighlight: function clearHighlight() {
_clearHighlight(base.chart);
}
};
};
var _default = exports["default"] = function _default(base, config) {
var ctx = {};
Object.assign(ctx, getFunctions(base, config));
return ctx;
};