fastlion-amis
Version:
一种MIS页面生成工具
452 lines (451 loc) • 20.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.getChartSchema = void 0;
var helper_1 = require("../../../utils/helper");
var getChartSchema = function (_a, datas) {
var _b, _c, _d, _e, _f, _g;
var type = _a.type, selectedXAxisData = _a.selectedXAxisData, selectedYAxisData = _a.selectedYAxisData, data = _a.data, columns = _a.columns, primaryField = _a.primaryField, barValue = _a.barValue, chartTitle = _a.chartTitle, tableName = _a.tableName;
var defaultSchame = {};
var name = "".concat(tableName || (0, helper_1.uuid)(), "_chart");
if (['line', 'bar', 'area', 'bar-vertical', 'line-bar'].includes(type)) {
defaultSchame = {
"height": "100%",
"width": "100%",
"type": "chart",
"name": name,
"className": "w-full",
"config": {
"title": [
{
// subtext: chartTitle,
left: "4%",
text: chartTitle
}
],
"legend": {
// "top": "2%",
"bottom": "2%",
"show": true,
"data": ['a']
},
"tooltip": {
"show": true,
"trigger": "axis"
},
"series": [],
"xAxis": {
data: ['1'],
type: 'category'
},
"yAxis": {},
"grid": {
"left": "5%",
"containLabel": true
},
"dataZoom": [],
"toolbox": {
"feature": {
"saveAsImage": {
"show": true,
"type": "png"
},
// "myExport": {
// "show": true,
// "api": {
// "method": "post",
// "url": "/api/v1/export/PAGE_CHARTS_LINE/download/default_export?keepDataFormat=true&exportType=1&exportFields=REPORT_DATE,CREATE_ORDER_CNT,SENT_ORDER_CNT,COMMIT_ORDER_CNT&dataFilterPageId=PAGE_CHARTS_LINE&p_n=PAGE_CHARTS_LIST,PAGE_CHARTS_LINE"
// },
// "title": chartTitle
// }
}
},
"color": colorList
}
};
var xAxis = data.map(function (item) { return item[selectedXAxisData]; });
var targetCol = columns.find(function (item) { return item.name === selectedXAxisData; });
if (type === 'bar-vertical') {
var targetCol_1 = columns.find(function (item) { return item.name === selectedXAxisData; });
defaultSchame.config.yAxis = {
data: xAxis,
type: 'category',
name: targetCol_1.label || selectedXAxisData,
nameLocation: 'end'
};
defaultSchame.config.xAxis = {};
}
else {
defaultSchame.config.xAxis = {
data: xAxis,
type: 'category',
name: targetCol.label || selectedXAxisData,
nameLocation: 'end'
};
}
if (type === 'line-bar') {
// 柱状图和折线图同时存在时，柱状图默认展示第一个y轴数据
if ((barValue === null || barValue === void 0 ? void 0 : barValue.length) && (barValue === null || barValue === void 0 ? void 0 : barValue.length) < selectedYAxisData.length) {
var lineValue_1 = selectedYAxisData.filter(function (item) { return !(barValue === null || barValue === void 0 ? void 0 : barValue.includes(item)); });
var barCol = columns.find(function (col) { return col.name === (barValue === null || barValue === void 0 ? void 0 : barValue[0]); });
var lineCol = columns.find(function (col) { return col.name === (lineValue_1 === null || lineValue_1 === void 0 ? void 0 : lineValue_1[0]); });
defaultSchame.config.yAxis = [
{
type: 'value',
name: barCol.label,
axisLabel: {
formatter: "".concat(barCol.prefix || '', "{value}").concat(barCol.suffix || '')
},
splitLine: {
show: false // 隐藏网格线
},
},
{
type: 'value',
name: lineCol.label,
position: 'right',
axisLabel: {
formatter: "".concat(barCol.prefix || '', "{value}").concat(lineCol.suffix || '')
}
}
];
}
}
defaultSchame.config.legend.data = selectedYAxisData.map(function (item) { var _a; return ((_a = columns.find(function (col) { return col.name === item; })) === null || _a === void 0 ? void 0 : _a.label) || item; });
// abc分析需要配置参考线
var needMarkLine = (selectedYAxisData === null || selectedYAxisData === void 0 ? void 0 : selectedYAxisData[1]) === 'countPer';
var y1Line_1 = needMarkLine ? (_b = datas === null || datas === void 0 ? void 0 : datas[0]) === null || _b === void 0 ? void 0 : _b.sumPer : 0;
var y2Line_1 = needMarkLine ? y1Line_1 + ((_c = datas === null || datas === void 0 ? void 0 : datas[1]) === null || _c === void 0 ? void 0 : _c.sumPer) : 0;
var x1Line_1 = needMarkLine ? (_d = datas === null || datas === void 0 ? void 0 : datas[0]) === null || _d === void 0 ? void 0 : _d.sum : 0;
var x2Line_1 = needMarkLine ? x1Line_1 + ((_e = datas === null || datas === void 0 ? void 0 : datas[1]) === null || _e === void 0 ? void 0 : _e.sum) : 0;
var x1LineLabel_1 = needMarkLine ? (_f = datas === null || datas === void 0 ? void 0 : datas[0]) === null || _f === void 0 ? void 0 : _f.per : 0;
var x2LineLabel_1 = needMarkLine ? x1LineLabel_1 + ((_g = datas === null || datas === void 0 ? void 0 : datas[1]) === null || _g === void 0 ? void 0 : _g.per) : 0;
var series = selectedYAxisData.map(function (yAxisItem, index) {
var oriCol = columns.find(function (col) { return col.name === yAxisItem; });
return {
data: data.map(function (item) { return item[yAxisItem]; }),
yAxisIndex: (type === 'line-bar' && (barValue === null || barValue === void 0 ? void 0 : barValue.length) && (barValue === null || barValue === void 0 ? void 0 : barValue.length) < selectedYAxisData.length) ? ((barValue === null || barValue === void 0 ? void 0 : barValue.includes(yAxisItem)) ? 0 : 1) : undefined,
type: getItemType(type === 'line-bar' ? ((barValue === null || barValue === void 0 ? void 0 : barValue.includes(yAxisItem)) ? 'bar' : 'line') : type),
smooth: type === 'area' ? 0.5 : 0,
markLine: yAxisItem === 'countPer' ? {
data: [
{
name: 'A类',
yAxis: y1Line_1,
label: {
formatter: y1Line_1.toFixed(3) + oriCol.suffix,
position: index === 0 ? 'begin' : 'end'
}
},
{
name: 'B类',
yAxis: y2Line_1,
label: {
formatter: y2Line_1.toFixed(3) + oriCol.suffix,
position: 'end'
}
},
{
name: 'A类项数',
xAxis: x1Line_1 - 1,
label: {
formatter: x1LineLabel_1.toFixed(3) + oriCol.suffix,
position: 'end'
}
},
{
name: 'B类项数',
xAxis: x2Line_1 - 1,
label: {
formatter: x2LineLabel_1.toFixed(3) + oriCol.suffix,
position: 'end'
}
}
]
} : undefined,
name: (oriCol === null || oriCol === void 0 ? void 0 : oriCol.label) || yAxisItem,
areaStyle: type === 'area' ? { "color": areaColorList[index] } : null,
label: {
formatter: function (params) {
var findCol = columns.find(function (col) { return col.name === yAxisItem; });
var prefix = findCol.prefix, suffix = findCol.suffix, kilobitSeparator = findCol.kilobitSeparator, precision = findCol.precision, pristine = findCol.pristine;
return (0, helper_1.standardValueText)(params.value, {
prefix: prefix || (pristine === null || pristine === void 0 ? void 0 : pristine.prefix) || '',
suffix: suffix || (pristine === null || pristine === void 0 ? void 0 : pristine.suffix) || '',
kilobitSeparator: kilobitSeparator || (pristine === null || pristine === void 0 ? void 0 : pristine.kilobitSeparator) || false,
precision: precision || (pristine === null || pristine === void 0 ? void 0 : pristine.precision)
});
},
position: type === 'line-bar' && (barValue === null || barValue === void 0 ? void 0 : barValue.includes(yAxisItem)) ? 'inside' : 'top',
show: true
},
tooltip: {
valueFormatter: function (value) {
var _a = formatValue(value, yAxisItem, columns), _ = _a[0], val = _a[1];
return val;
}
}
};
});
defaultSchame.config.series = series;
}
//散点图
if (['scatter', 'scatter-size'].includes(type)) {
defaultSchame = {
"height": "100%",
"width": "100%",
"type": "chart",
"name": name,
"className": "w-full",
config: {
"title": [
{
// subtext: chartTitle,
left: "4%",
text: chartTitle
}
],
"legend": {
"bottom": "2%"
},
"tooltip": {
formatter: function (params) {
var _a = formatValue(params.value[2], primaryField, columns), keyCol = _a[0], keyValue = _a[1];
var _b = formatValue(params.value[0], selectedXAxisData[0], columns), xCol = _b[0], xColValue = _b[1];
var _c = formatValue(params.value[1], selectedXAxisData[1], columns), yCol = _c[0], yColValue = _c[1];
var showValue = '';
var showField = {};
if (selectedYAxisData[0]) {
var _d = formatValue(params.value[3], selectedYAxisData[0], columns), col = _d[0], val = _d[1];
showField = col;
showValue = val;
}
return keyCol.label + ': ' + keyValue + '<br/>' + xCol.label + ': ' + xColValue + '<br/>' + yCol.label + ': ' + yColValue + (showValue ? '<br/>' + showField.label + ': ' + showValue : '');
},
"show": true,
"trigger": "item"
},
"series": [
{
"data": [],
"symbolSize": 20,
"type": "scatter"
}
],
"xAxis": {
"type": "value"
},
"yAxis": {
"type": "value"
},
"grid": {
"left": "5%",
"containLabel": true
},
"dataZoom": [],
"toolbox": {
"feature": {
"saveAsImage": {
"show": true,
"type": "png"
},
}
}
}
};
var series = data.map(function (item) { return [item[selectedXAxisData[0]], item[selectedXAxisData[1]], item[primaryField || selectedXAxisData[0]], item[selectedYAxisData[0]]]; });
defaultSchame.config.series = [
{
symbolSize: type === 'scatter-size' ? function (data) {
return data[3];
} : 20,
type: "scatter",
data: series
}
];
var xCol = columns.find(function (item) { return item.name === (selectedXAxisData[0]); });
var yCol = columns.find(function (item) { return item.name === (selectedXAxisData[1]); });
defaultSchame.config.xAxis = {
type: "value",
name: (xCol === null || xCol === void 0 ? void 0 : xCol.label) || selectedXAxisData[0],
nameLocation: 'end'
};
defaultSchame.config.yAxis = {
type: "value",
name: (yCol === null || yCol === void 0 ? void 0 : yCol.label) || selectedXAxisData[1],
nameLocation: 'end'
};
}
//饼图，环形图
if (['pie', 'ring'].includes(type)) {
defaultSchame = {
"height": "100%",
"width": "100%",
"type": "chart",
"name": name,
"className": "w-full",
config: {
"title": [
{
// "subtext": chartTitle,
"left": "4%",
"text": chartTitle
}
],
"legend": {
"bottom": "2%"
},
"tooltip": {
"trigger": "item"
},
"series": [
{
"data": [],
"avoidLabelOverlap": true,
"tooltip": {
"valueFormatter": "function (value) { return window._standardValueText(value, {prefix:'',suffix:'',kilobitSeparator:null,precision:0}) }"
},
"label": {
"formatter": "{b} {d}%"
},
"type": "pie",
"radius": "20%"
}
],
"toolbox": {
"feature": {
"saveAsImage": {
"show": true,
"type": "png"
},
}
}
}
};
var series = data.map(function (item) { return ({
value: item[selectedYAxisData[0]],
name: item[selectedXAxisData]
}); });
defaultSchame.config.series = [{
"avoidLabelOverlap": true,
"tooltip": {
"valueFormatter": function (value) {
var _a = formatValue(value, selectedYAxisData[0], columns), _ = _a[0], val = _a[1];
return val;
}
},
"label": {
"formatter": "{b} {d}%"
},
"type": getItemType(type),
"radius": type === 'ring' ? ["50%", "70%"] : "40%",
data: series
}];
}
//漏斗图
if (['funnel'].includes(type)) {
defaultSchame = {
"height": "100%",
"width": "100%",
"type": "chart",
"name": name,
"className": "w-full",
config: {
"title": [
{
"subtext": chartTitle,
"left": "4%"
}
],
"legend": {
"bottom": "2%"
},
"tooltip": {
"trigger": "item"
},
"series": [
{
"data": [],
"type": "funnel"
}
],
"toolbox": {
"feature": {
"saveAsImage": {
"show": true,
"type": "png"
},
}
},
"color": colorList
}
};
var series = data.map(function (dataItem) {
return {
name: dataItem[selectedXAxisData],
value: dataItem[selectedYAxisData[0]],
tooltip: {
valueFormatter: function (value) {
var _a = formatValue(value, selectedYAxisData[0], columns), _ = _a[0], val = _a[1];
return val;
}
}
};
});
defaultSchame.config.series = [{
data: series,
type: getItemType(type)
}];
}
return defaultSchame;
};
exports.getChartSchema = getChartSchema;
var getItemType = function (type) {
switch (type) {
case 'area':
case 'line':
return 'line';
case 'bar-vertical':
case 'bar':
return 'bar';
case 'scatter':
case 'scatter-size':
return 'scatter';
case 'pie':
case 'ring':
return 'pie';
case 'funnel':
return 'funnel';
default:
return 'line';
}
};
var formatValue = function (value, fieldName, columns) {
var targetCol = columns.find(function (item) { return item.name === fieldName; });
var prefix = targetCol.prefix, suffix = targetCol.suffix, kilobitSeparator = targetCol.kilobitSeparator, precision = targetCol.precision, pristine = targetCol.pristine;
var keyValue = (0, helper_1.standardValueText)(value, {
prefix: prefix || (pristine === null || pristine === void 0 ? void 0 : pristine.prefix) || '',
suffix: suffix || (pristine === null || pristine === void 0 ? void 0 : pristine.suffix) || '',
kilobitSeparator: kilobitSeparator || (pristine === null || pristine === void 0 ? void 0 : pristine.kilobitSeparator),
precision: precision || (pristine === null || pristine === void 0 ? void 0 : pristine.precision)
});
return [targetCol, keyValue];
};
var colorList = [
"#F5222D",
"#9254DE",
"#0958D9",
"#08979C",
"#EB2F96",
"#FAAD14",
"#ee6666",
"#7CB305",
"#ADC6FF",
"#fc8452",
"#5CDBD3"
];
var areaColorList = [
'rgba(245,34,45, 0.5)', 'rgba(146,84,222, 0.5)', 'rgba(9, 88, 217, 0.5)', 'rgba(8, 151, 156, 0.5)',
'rgba(235,47,150, 0.5)', 'rgba(250,173,20, 0.5)', 'rgba(238,102,102, 0.5)', 'rgba(124,179,5, 0.5)',
'rgba(173, 198, 255, 0.5)', 'rgba(252,132,82, 0.5)', 'rgba(92,219,211, 0.5)'
];
//# sourceMappingURL=./renderers/Table/DataCharts/chartTools.js.map