platform-bi-web/src/models/parseChartOption.js

/**
 * 将请求返回的图表展示数据解析为前台展示用的config
 */
import moment from 'moment'
import EllipsisTooltip from '../components/common/ellipsisTooltip/index'
import { deepAssign } from '../utils/baseUtils'
import STATISTICS_OPTION from '../components/chartDesigner/sections/statisticsOption.json'
import themes from './theme/index'

export default function(viewType, data, chartConfig, themeName, styleConfig) {
    if(!data) {
        return {};
    }
    try {
        let theme = themes[themeName] || themes['default']
        let o, themeConfig;
        switch(viewType) {
            case 'bar': {
                themeConfig = Object.assign({}, theme.base, theme.bar);
                o = barOption(data, chartConfig, themeConfig, styleConfig);
                break;
            }
            case 'pie': {
                themeConfig = Object.assign({}, theme.base, theme.pie);
                o = pieOption(data, chartConfig, themeConfig, styleConfig);
                break;
            }
            case 'line': {
                themeConfig = Object.assign({}, theme.base, theme.line);
                o = lineOption(data, chartConfig, themeConfig, styleConfig);
                break;
            }
            case 'scatter': {
                themeConfig = Object.assign({}, theme.base, theme.scatter);
                o = scatterOption(data, chartConfig, themeConfig, styleConfig);
                break;
            }
            case 'aggregateTable': {
                themeConfig = theme.aggregateTable;
                o = aggregateTableOption(data, chartConfig, themeConfig, styleConfig);
                break;
            }case 'dataView' : {
                themeConfig = theme.dataView;
                o = dataViewOption(data, chartConfig, themeConfig, styleConfig);
                break;
            }
            default:{
                o = {};
                break;
            }
        }
        return o;
    }catch(e) {
        console.error(e);
    }
}

function barOption(data, barConfig, themeConfig, styleConfig) {
    let xTitle = barConfig.xAxis?`${barConfig.xAxis.column.label}${barConfig.xAxis.granularity.value?'('+barConfig.xAxis.granularity.label+')':''}`:null
    let yTitle = barConfig.yAxis?`${barConfig.yAxis.column.label}${barConfig.yAxis.gauge.value?'('+barConfig.yAxis.gauge.label+')':''}`:null
    data.serieses = data.serieses || [];

    let option = deepAssign({
        tooltip : {
            trigger: "axis",
            axisPointer: {
                type: "cross",
                label: {
                    backgroundColor: "#6a7985"
                }
            }
        },
        legend: {
            show: data.serieses.length > 1
        },
        grid: {
            left: '10%',
            right: '10%',
            top: 60,
            bottom: 60,
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: data.xAxis.map(d => {
                let gv= barConfig.xAxis.granularity.value;
                let xv = d || '空';
                if(gv === 'halfYear') {
                    let arr = d.split('-H');
                    xv = arr[0] + ['上半年', '下半年'][arr[1] - 1]
                }else if(gv === 'month') {
                    xv = d.replace('-M', '-');
                }else if(gv === 'quarter') {
                    let arr = d.split('-Q');
                    xv = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
                }else if(gv === 'week') {
                    let arr = d.split('-W');
                    xv = arr[0] + '-' + arr[1] + '周'
                }
                return xv;
            }),
            name: xTitle || '横轴',
        }],
        yAxis: [{
            name: yTitle || '纵轴',
            type: 'value'
        }],
        series: data.serieses.map(s => {
            return {
                name: barConfig.groupBy ? s.name : (barConfig.yAxis.column.label || s.name),
                type: 'bar',
                data: s.value,
                // stack: s.stack
            }
        }),
        dataZoom: {
            show: false
        }
    }, themeConfig, styleConfig);
    
    return option;
}

function pieOption(data, pieConfig, themeConfig, styleConfig) {
    let columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
      
    let option = deepAssign({
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            show: true,
            orient: 'vertical',
            right: '30%',
            top: '100',
            data: data.xAxis.map(d => {
                let gv= pieConfig.xAxis.granularity.value;
                let xv = d || '空';
                if(gv === 'halfYear') {
                    let arr = d.split('-H');
                    xv = arr[0] + ['上半年', '下半年'][arr[1] - 1]
                }else if(gv === 'month') {
                    xv = d.replace('-M', '-');
                }else if(gv === 'quarter') {
                    let arr = d.split('-Q');
                    xv = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
                }else if(gv === 'week') {
                    let arr = d.split('-W');
                    xv = arr[0] + '-' + arr[1] + '周'
                }
                return xv;
            }),
        },
        grid: {
            left: '10%',
            right: '10%',
            top: 100,
            bottom: 60,
            containLabel: true
        },
        series : [
            {
                name: columnName,
                type: 'pie',
                center: ['30%', '50%'],
                radius: [0, '65%'],
                // radius : '55%',
                // center: ['50%', '60%'],
                // data: (data.serieses || [{ value: [] }])[0].value,
                // data: (data.serieses || [{ value: [] }])[0].value.map(v => ({ ...v, name: v.name || '空' })),
                data: (data.serieses || [{ value: [] }])[0].value.map(v => {
                    let obj = { ...v };
                    if(!v.name) {
                        obj.name = '空'
                    }else {
                        let gv= pieConfig.xAxis.granularity.value;
                        if(gv === 'halfYear') {
                            let arr = v.name.split('-H');
                            obj.name = arr[0] + ['上半年', '下半年'][arr[1] - 1]
                        }else if(gv === 'month') {
                            obj.name = v.name.replace('-M', '-');
                        }else if(gv === 'quarter') {
                            let arr = v.name.split('-');
                            obj.name = arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度'
                        }else if(gv === 'week') {
                            let arr = v.name.split('-');
                            obj.name = arr[0] + '-' + arr[1] + '周'
                        }
                    }
                    return obj;
                }),
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }, themeConfig, styleConfig);

    return option;
}

function lineOption(data, lineConfig, themeConfig, styleConfig) {
    let xTitle = lineConfig.xAxis?`${lineConfig.xAxis.column.label}${lineConfig.xAxis.granularity.value?'('+lineConfig.xAxis.granularity.label+')':''}`:null
    let yTitle = lineConfig.yAxis?`${lineConfig.yAxis.column.label}${lineConfig.yAxis.gauge.value?'('+lineConfig.yAxis.gauge.label+')':''}`:null
    data.serieses = data.serieses || [];

    let option = deepAssign({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            show: data.serieses.length > 1
        },
        xAxis:  {
            name: xTitle || '横轴',
            type: 'time'
        },
        yAxis: {
            name: yTitle || '纵轴',
            type: 'value'
        },
        
        series: (data.serieses || []).map(s => {
            return {
                name: s.name,
                type: 'line',
                data: s.mdata.map(m => {
                    return [m.date, m.value]
                }).sort((a, b) => {return new Date(a[0]).getTime() - new Date(b[0]).getTime()} )
            }
        }),
        dataZoom: {
            show: false
        }
    }, themeConfig, styleConfig);

    return option;
}

function scatterOption(data, scatterConfig, themeConfig, styleConfig) {
    let xTitle = scatterConfig.xAxis?`${scatterConfig.xAxis.column.label}${scatterConfig.xAxis.granularity.value?'('+scatterConfig.xAxis.granularity.label+')':''}`:null
    let yTitle = scatterConfig.yAxis?`${scatterConfig.yAxis.column.label}${scatterConfig.yAxis.gauge.value?'('+scatterConfig.yAxis.gauge.label+')':''}`:null
    
    let option = deepAssign({
        tooltip : {
            showDelay : 0,
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            }
        },
        legend: {
            show: true
        },
        xAxis : [
            {
                type : 'value',
                name: xTitle || '横轴',
                scale:true,
                splitLine: {
                    show: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                name: yTitle || '纵轴',
                scale:true,
                splitLine: {
                    show: true
                }
            }
        ],
        series : (data.serieses || []).map(s => {
            return {
                name: s.name,
                type: 'scatter',
                data: s.mdata.map(m => {
                    return [m.date, m.value]
                })
            }
        }),
        dataZoom: {
            show: false
        }
    }, themeConfig, styleConfig);

    return option;
}

function aggregateTableOption( data, aggregateTableConfig, themeConfig, styleConfig) {
    const resData = data.valueList;
    const { targetColumn, statistics: statisticsNames } = aggregateTableConfig;
    const { direction } = styleConfig;

    
    let statistics = STATISTICS_OPTION.filter(o => statisticsNames.indexOf(o.value) !== -1);

    let option = {
        targetColumn: targetColumn,
        statistics: statistics.map(s => ({
            name: s.value,
            label: s.label,
            value: resData[s.value]
        })),
        direction: direction || 'vertical'
    };

    return option;
}

function dataViewOption(data, dataViewConfig, themeConfig, styleConfig) {
    const { list, pageNum, pageSize, pages, total } = data.valueList;

    let columns = dataViewConfig.viewColumns || [];
    let dataSource = list || [];

    let option = {
        columns: columns.map(c => {
            let obj = {
                title: c.label,
                dataIndex: c.name,
            }
            if(c.type === 'time') {
                obj.render = (v, r, i) => {
                    let text = v === null ? '空' : moment(v).isValid() ? moment(v).format('YYYY-MM-DD') : v
                    return <EllipsisTooltip title={text}>{text}</EllipsisTooltip>
                }
            }else {
                obj.render = v => {
                    let text = v === null ? '空' : v
                    return <EllipsisTooltip title={text}>{text}</EllipsisTooltip>
                }
            }
            return obj;
        }),
        dataSource: dataSource.map((d, i) => {
            return { ...d, key: i}
        }),
        page: pageNum,
        pageSize,
        pages,
        total,
    };

    return option;
}