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

import { message } from 'antd'
import * as service from '../services/index'
import URLS from '../constants/url'
import STATISTICS_OPTION from '../components/chartDesigner/sections/statisticsOption.json'

export default {
    namespace: 'chartDesigner',
    state: {
        originData: {
            code: null,
            header: { label: '未命名' },
            baseConfig: { dataSource: '', viewType: '' },
            preparing: { groupBy: {} },
            aggregateTableConfig: {},
            dataViewConfig: {},
            barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
            lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
            pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
            scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} } },
            style: {},
            filters: [],
            chartOption: {},
            autoRefresh: true
        },
        columns: [],
        allPermission: [
			{ value: 'owner', name: '创建人' },
			{ value: 'anyone', name: '所有人' }
        ],
        header: {
            label: '标题'
        },
        baseConfig: {
            dataSource: '',
            viewType: ''
        },
        preparing: {
            groupBy: []
        },
        aggregateTableConfig: {

        },
        dataViewConfig: {
            viewColumns: [],
            sortColumn: {
                
            }
        },
        barConfig: {
            xAxis: {
                column: {},
                granularity: {}
            },
            yAxis: {
                column: {},
                gauge: {}
            }
        },
        lineConfig: {
            xAxis: {
                column: {},
                granularity: {}
            },
            yAxis: {
                column: {},
                gauge: {}
            }
        },
        pieConfig: {
            xAxis: {
                column: {},
                granularity: {}
            },
            yAxis: {
                column: {},
                gauge: {}
            }
        },
        scatterConfig: {
            xAxis: {
                column: {},
                granularity: {}
            },
            yAxis: {
                column: {},
                gauge: {}
            }
        },
        styleConfig: {

        },
        otherConfig:{
        },
        description: '',
        filters: [],
        chartOption: {},
        autoRefresh: true,
        dirty: false
    },
    reducers: {
        /**
         * 更新model字段值
         * 1. 进入撤销重做历史
         */
        setField(state, action) {
            const { name, value } = action;
            let obj = {};
            obj[name] = value;
            let newState = Object.assign({}, state, obj);
            return Object.assign({}, newState, {dirty: true});
        },
        /**
         * 批量更新model字段值
         * 1. 进入撤销重做历史
         */
        setFields(state, action) {
            const { fields } = action;
            let obj = {};
            fields.map(f => (obj[f.name] = f.value));
            let newState = Object.assign({}, state, obj);
            return Object.assign({}, newState, {dirty: true});
        },
        /**
         * 更新model字段值
         * 1. 不进入撤销重做历史
         */
        silentSetField(state, action) {
            const { name, value } = action;
            let obj = {};
            obj[name] = value;
            let newState = Object.assign({}, state, obj);
            return newState;
        },
        /**
         * 批量更新model字段值
         * 1. 不进入撤销重做历史
         */
        silentSetFields(state, action) {
            const { fields } = action;
            let obj = {};
            fields.map(f => (obj[f.name] = f.value));
            let newState = Object.assign({}, state, obj);
            return newState;
        },
        reset(state, action) {
            let newState = Object.assign({}, state, state.originData);
            return Object.assign({}, newState, {dirty: false});
        },
        setDirty(state, action) {
            const { dirty } = action;
            let newState = Object.assign({}, state, { dirty });
            console.log(newState);
            return newState;
        }
    },
    effects: {
        /**
         * 初始化批量更新model字段值
         * 触发数据刷新、不进入撤销重做历史
         */
        *defaultChangeFields(action, { select, call, put }) {
            const { fields } = action;
            yield put({ type: 'silentSetFields', fields });

            const chartDesigner = yield select(state => state.present.chartDesigner);
            const { autoRefresh } = chartDesigner;
            if(autoRefresh) {
                yield put({ type: 'fetchChartData' });
            }
        },
        /**
         * 更新model字段值
         * 可能影响到数据刷新的model字段改变一般用该action
         */
        *changeField(action, { select, call, put }) {
            const { name, value } = action;
            yield put({ type: 'setField', name, value });

            const chartDesigner = yield select(state => state.present.chartDesigner);
            const { autoRefresh } = chartDesigner;
            
            if(autoRefresh) {
                yield put({ type: 'fetchChartData' });
            }
        },
        /**
         * 批量更新model字段值
         */
        *changeFields(action, { select, call, put }) {
            const { fields } = action;
            yield put({ type: 'setFields', fields });

            const chartDesigner = yield select(state => state.present.chartDesigner);
            const { autoRefresh } = chartDesigner;
            if(autoRefresh) {
                yield put({ type: 'fetchChartData' });
            }
        },
        *changeDataSource(action, { select, call, put }) {
            const { value } = action;
            yield put({ type: 'silentSetField', name: 'baseConfig', value });
            yield put({ type: 'remoteDataColumn', code: value.dataSource });
        },
        *remoteQucikAdd(action, { select, call, put }) {
            try{
                const { dataSource } = action;

                yield put({ type: 'silentSetFields', fields: [
                    { name: 'baseConfig', value: { dataSource: dataSource.code, viewType: '' } }
                ] });
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { baseConfig, preparing } = chartDesigner;

                let body = {
                    chartName: dataSource.name + '(未命名)',
                    dataId: baseConfig.dataSource,
                    groupBy: preparing.groupBy && preparing.groupBy.key ? [{
                        columnName: preparing.groupBy.key,
                        columnRamane: preparing.groupBy.label
                    }] : [],
                    createBy: 'zhuth',
                    describes: '',
                    style: '',
                    chartConfig: '{}',
                    chartType: ''
                };
                const res = yield call(service.fetch, {
                    url: URLS.CHART_ADD,
                    body: body
                })
                if(!res.err && res.data.data > 0) {
                    yield put({ type: 'chart/fetchList', mandatory: true });
                    yield put({ type: 'main/redirect', path: '/chart/' + res.data.data });
                }else {
                    message.error('新增失败');
                }
            }catch(e) {
                console.error(e);
                message.error('新增失败');
            }
        },
        *remoteDataColumn(action, { select, call, put }) {
            const code = action.code;
            try {
                const res = yield call(service.fetch, {
                    url: URLS.DATASOURCE_QUERY_DATACOLUMNS,
                    body: code
                });
                console.log(code, res);
                if(!res.err && res.data.code > 0) {
                    let resData = res.data.data;

                    let columns = resData.map((c, i) => {
                        return {
                            key: i,
                            name: c.columnName,
                            label: c.columnRaname,
                            type: c.columnType,
                            selection: []
                        }
                    })
                    yield put({ type: 'silentSetField', name: 'columns', value: columns });
                }else {
                    message.error('请求列数据失败');
                    yield put({ type: 'silentSetField', name: 'columns', value: [] });
                }
            }catch(e) {
                message.error('请求列数据失败');
                yield put({ type: 'silentSetField', name: 'columns', value: [] });
            }
        },
        *fetchChartData(action, { select, call, put }) {
            const chartDesigner = yield select(state => state.present.chartDesigner);
            const { baseConfig } = chartDesigner;
            const { viewType } = baseConfig;

            if(viewType === 'bar') {
                yield put({ type: 'fetchBarData' });
            }else if(viewType === 'pie') {
                yield put({ type: 'fetchPieData' });
            }else if(viewType === 'line') {
                yield put({ type: 'fetchLineData' });
            }else if(viewType === 'scatter') {
                yield put({ type: 'fetchScatterData' })
            }else if(viewType === 'dataView') {
                yield put({ type: 'fetchDataViewData' });
            }else if(viewType === 'aggregateTable') {
                yield put({ type: 'fetchAggregateTableData' });
            }else {
                console.log('nothing.......')
            }
        },
        *fetchBarData(action, { select, call, put }) {
            try {
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { code, barConfig, preparing } = chartDesigner;
                const body = {
                    id: code,
                    groups: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
                    xAxis: {
                        columnRename: barConfig.xAxis.column.value,
                        columnType: barConfig.xAxis.column.type,
                        showDataType: barConfig.xAxis.granularity.value
                    },
                    yAxis: {
                        columnRename: barConfig.yAxis.column.value,
                        showDataType: barConfig.yAxis.gauge.value
                    }
                };
                console.log(body);
                
                let res = yield call(service.fetch, {
                    url: URLS.CHART_BAR_OPTION,
                    body: body
                });
                if(!res.err && res.data.code > 0) {
                    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
                    
                    let config = {
                        viewType: 'bar',
                        option: {
                            xAxis: res.data.data.xAxis,
                            serieses: res.data.data.serieses,
                            xTitle,
                            yTitle,
                        }
                    }
                    yield put({ type: 'silentSetField', name: 'chartOption', value: config });
                }else {
                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                }
            }catch(e) {
                console.error(e);
                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
            }
        },
        *fetchPieData(action, { select, call, put }) {
            try {
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { code, pieConfig } = chartDesigner;
                const body = {
                    id: code,
                    legendData: {
                        columnRename: pieConfig.xAxis.column.value,
                        columnType: pieConfig.xAxis.column.type,
                        showDataType: pieConfig.xAxis.granularity.value
                    },
                    series: {
                        columnRename: pieConfig.yAxis.column.value,
                        columnName: pieConfig.yAxis.column.label,
                        showDataType: pieConfig.yAxis.gauge.value
                    }
                };
                let res = yield call(service.fetch, {
                    url: URLS.CHART_PIE_OPTION,
                    body: body
                });

                if(!res.err && res.data.code > 0) {
                    let columnName = pieConfig.xAxis.column.label + (pieConfig.xAxis.granularity.value ? '('+pieConfig.xAxis.granularity.label+')' : '');
                    
                    let config = {
                        viewType: 'pie',
                        option: {
                            xAxis: res.data.data.xAxis,
                            columnName: columnName,
                            serieses: res.data.data.serieses
                        }
                    }
                    yield put({ type: 'silentSetField', name: 'chartOption', value: config });
                }else {
                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                }
            }catch(e) {
                console.error(e);
                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
            }
        },
        *fetchLineData(action, { select, call, put }) {
            try {
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { code, lineConfig, preparing } = chartDesigner;
                const body = {
                    id: code,
                    xAxis: {
                        columnRename: lineConfig.xAxis.column.value,
                        columnType: lineConfig.xAxis.column.type
                    },
                    yAxis: {
                        columnRename: lineConfig.yAxis.column.value,
                        showDataType: lineConfig.yAxis.gauge.value
                    },
                    groups: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
                };
                let res = yield call(service.fetch, {
                    url: URLS.CHART_LINE_OPTION,
                    body: body
                });
                if(!res.err && res.data.code > 0) {
                    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
                    
                    let config = {
                        viewType: 'line',
                        option: {
                            viewType: 'line',
                            serieses: res.data.data.serieses,
                            xTitle,
                            yTitle
                        }
                    }
                    yield put({ type: 'silentSetField', name: 'chartOption', value: config });
                }else {
                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                }
            }catch(e) {
                console.error(e);
                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
            }
        },
        *fetchScatterData(action, { select, call, put }) {
            try {
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { code, scatterConfig, preparing } = chartDesigner;
                const body = {
                    id: code,
                    xAxis: {
                        columnRename: scatterConfig.xAxis.column.value,
                        columnType: scatterConfig.xAxis.column.type
                    },
                    yAxis: {
                        columnRename: scatterConfig.yAxis.column.value,
                        showDataType: scatterConfig.yAxis.gauge.value
                    },
                    groups: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
                };
                console.log(body);
                let res = yield call(service.fetch, {
                    url: URLS.CHART_SCATTER_OPTION,
                    body: body
                });
                console.log(res);
                if(!res.err && res.data.code > 0) {
                    res.viewType = 'scatter';
                    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 config = {
                        viewType: 'scatter',
                        option: {
                            serieses: res.data.data.serieses,
                            xTitle,
                            yTitle,
                        }
                    }
                    yield put({ type: 'silentSetField', name: 'chartOption', value: config });
                }else {
                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                }
            }catch(e) {
                console.error(e);
                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
            }
        },
        *fetchDataViewData(action, { select, call, put }) {
            try {
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { code, dataViewConfig } = chartDesigner;
                const body = {
                    id: code,
                    columnName: dataViewConfig.targetColumn,
                    columnListName: dataViewConfig.viewColumns,
                    sort: "desc",
                    showLine: dataViewConfig.maxRows,
                    operation: ''
                };
                console.log(body);return;
            }catch(e) {
                console.error(e);
                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
            }
        },
        *fetchAggregateTableData(action, { select, call, put }) {
            try {
                const chartDesigner = yield select(state => state.present.chartDesigner);
                const { code, aggregateTableConfig, preparing } = chartDesigner;

                const { targetColumn, statistics } = aggregateTableConfig;
                const body = {
                    id: code,
                    columnName: "Y_",
                    operatorList: statistics,
                    groupByList: preparing.groupBy && preparing.groupBy.key ? [preparing.groupBy.key] : [],
                };
                let res = yield call(service.fetch, {
                    url: URLS.CHART_AGGREGATETABLE_OPTION,
                    body: body
                });
                console.log(body, res);return;
                if(!res.err && res.data.code > 0) {
                    let c = chartDesigner.columns.filter(c => c.name === targetColumn)[0];
                    const resData = res.data.data;

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

                    let columns = [{
                        title: '分析目标',
                        dataIndex: 'targetColumn'
                    }].concat(stypes.map(st => {
                        return {
                            title: st.label,
                            dataIndex: st.value
                        }
                    }));
                    let data = {
                        targetColumn: c.label
                    }

                    let d = resData.valueList;
                    for(let k in d) {
                        data[k] = d[k]
                    }

                    let config = {
                        viewType: 'aggregateTable',
                        option: {
                            columns: columns,
                            data: [data]
                        }
                    }
                    yield put({ type: 'silentSetField', name: 'chartOption', value: config });
                }else {
                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                }
            }catch(e) {
                console.error(e);
                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
            }
        }
    },
    subscriptions: {
        setup({ dispatch, history }) {
          return history.listen(({ pathname, query }) => {
          });
        },
    },
};