图表updateColumns/指标看板emptyContent

src/components/chartDesigner/charts/indicatorView.jsx

@@ -86,7 +86,7 @@ class IndicatorView extends React.Component {
         const { chartOption } = this.props;
         const { data, themeConfig } = chartOption;
         const { name: themeName } = themeConfig || {};
-        if(!chartOption || !chartOption.data || !chartOption.data.length === 0) {
+        if(!data || data.length === 0) {
             return <div className='indicator-container empty' ref={ node => this.containerRef = node }>
                 <div className='indicator-body'>
                     <EmptyContent />

src/models/chartDesigner.js

@@ -301,10 +301,10 @@ export default {
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
                     const newGroupByColumn = groupBy ? columns.find(c => c.name === groupBy.key) : null;
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
-                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label, type: newGroupByColumn.type } :void(0);
-                    yield put({ type: 'silentSetField', name: 'barConfig', value: deepAssign(barConfig, { ...fields }) });
+                    fields.xAxis = newXAxisColumn ? { column: { value: newXAxisColumn.name, label: newXAxisColumn.label, type: newXAxisColumn.type }, granularity: xAxis.granularity } : {column:{}, granularity:{}};
+                    fields.yAxis = newYAxisColumn ? { column: { value: newYAxisColumn.name, label: newYAxisColumn.label, type: newYAxisColumn.type }, gauge: yAxis.gauge } : {column:{}, gauge:{}};
+                    fields.groupBy = newGroupByColumn ? { key: newGroupByColumn.name, label: newGroupByColumn.label, type: newGroupByColumn.type } : {key:''};
+                    yield put({ type: 'silentSetField', name: 'barConfig', value: { ...barConfig, ...fields } });
                 }else if(viewType === 'line') {
                     const { lineConfig } = chartDesigner;
                     const { xAxis, yAxis, groupBy } = lineConfig;
@@ -312,19 +312,19 @@ export default {
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
                     const newGroupByColumn = groupBy ? columns.find(c => c.name === groupBy.key) : null;
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
-                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label, type: newGroupByColumn.type } :void(0);
-                    yield put({ type: 'silentSetField', name: 'lineConfig', value: deepAssign(lineConfig, { ...fields }) });
+                    fields.xAxis = newXAxisColumn ? { column: { value: newXAxisColumn.name, label: newXAxisColumn.label, type: newXAxisColumn.type }, granularity: xAxis.granularity } : {column:{}, granularity:{}};
+                    fields.yAxis = newYAxisColumn ? { column: { value: newYAxisColumn.name, label: newYAxisColumn.label, type: newYAxisColumn.type }, gauge: yAxis.gauge } : {column:{}, gauge:{}};
+                    fields.groupBy = newGroupByColumn ? { key: newGroupByColumn.name, label: newGroupByColumn.label, type: newGroupByColumn.type } : {key:''};
+                    yield put({ type: 'silentSetField', name: 'lineConfig', value: { ...lineConfig, ...fields }});
                 }else if(viewType === 'pie') {
                     const { pieConfig } = chartDesigner;
                     const { xAxis, yAxis } = pieConfig;
                     const newXAxisColumn = columns.find(c => c.name === xAxis.column.value);
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
-                    yield put({ type: 'silentSetField', name: 'pieConfig', value: deepAssign(pieConfig, { ...fields }) });
+                    fields.xAxis = newXAxisColumn ? { column: { value: newXAxisColumn.name, label: newXAxisColumn.label, type: newXAxisColumn.type }, granularity: xAxis.granularity } : {column: {}, granularity:{}};
+                    fields.yAxis = newYAxisColumn ? { column: { value: newYAxisColumn.name, label: newYAxisColumn.label, type: newYAxisColumn.type }, gauge: yAxis.gauge } : {column:{}, gauge:{}};
+                    yield put({ type: 'silentSetField', name: 'pieConfig', value: { ...pieConfig, ...fields } });
                 }else if(viewType === 'scatter') {
                     const { scatterConfig } = chartDesigner;
                     const { xAxis, yAxis, groupBy } = scatterConfig;
@@ -332,10 +332,10 @@ export default {
                     const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
                     const newGroupByColumn = groupBy ? columns.find(c => c.name === groupBy.key) : null;
                     let fields = {};
-                    newXAxisColumn ? fields.xAxis = { column: { label: newXAxisColumn.label, type: newXAxisColumn.type } } : void(0);
-                    newYAxisColumn ? fields.yAxis = { column: { label: newYAxisColumn.label, type: newYAxisColumn.type } } : void(0);
-                    newGroupByColumn ? fields.groupBy = { label: newGroupByColumn.label, type: newGroupByColumn.type } :void(0);
-                    yield put({ type: 'silentSetField', name: 'scatterConfig', value: deepAssign(scatterConfig, { ...fields }) });
+                    fields.xAxis = newXAxisColumn ? { column: { value: newXAxisColumn.name, label: newXAxisColumn.label, type: newXAxisColumn.type }, granularity: xAxis.granularity } : {column:{},granularity:{}};
+                    fields.yAxis = newYAxisColumn ? { column: { value: newYAxisColumn.name, label: newYAxisColumn.label, type: newYAxisColumn.type }, gauge: yAxis.gauge } : {column:{}, gauge:{}};
+                    fields.groupBy = newGroupByColumn ? { key: newGroupByColumn.name, label: newGroupByColumn.label, type: newGroupByColumn.type } : {key:''};
+                    yield put({ type: 'silentSetField', name: 'scatterConfig', value: { ...scatterConfig, ...fields } });
                 }else if(viewType === 'dataView') {
                     const { dataViewConfig } = chartDesigner;
                     const { sortColumn, viewColumns } = dataViewConfig;
@@ -345,7 +345,7 @@ export default {
                         const newViewColumn = columns.find(c => c.name === v.name);
                         return newViewColumn ? newViewColumn : null;
                     }).filter(c => !!c);
-                    newSortColumn ? fields.sortColumn = { label: newSortColumn.label, key: newSortColumn.name } : fields.sortColumn = {key:''};
+                    fields.sortColumn = newSortColumn ? { label: newSortColumn.label, key: newSortColumn.name } : {key:''};
                     fields.viewColumns = arr;
                     yield put({ type: 'silentSetField', name: 'dataViewConfig', value: { ...dataViewConfig, ...fields } });
                 }else if(viewType === 'aggregateTable') {
@@ -355,24 +355,43 @@ export default {
                     const newTargetColumn = columns.find(c => c.name === targetColumn.name);
                     let arr = groupBy ? groupBy.map(g => {
                         const newGroupByColumn = columns.find(c => c.name === g.key);
-                        return newGroupByColumn ? { label: newGroupByColumn.label, type: newGroupByColumn.type } : {};
-                    }) : [];
-                    newTargetColumn ? fields.targetColumn = { label: newTargetColumn.label, type: newTargetColumn.type } : void(0);
+                        return newGroupByColumn ? { key: newGroupByColumn.name, label: newGroupByColumn.label, type: newGroupByColumn.type } : null;
+                    }).filter(c => !!c) : [];
+                    fields.targetColumn = newTargetColumn ? { name: newTargetColumn.name, label: newTargetColumn.label, type: newTargetColumn.type } : {name:''};
                     fields.groupBy = arr;
-                    yield put({ type: 'silentSetField', name: 'aggregateTableConfig', value: deepAssign(aggregateTableConfig, { ...fields }) });
+                    yield put({ type: 'silentSetField', name: 'aggregateTableConfig', value: { ...aggregateTableConfig, ...fields } });
+                }else if(viewType === 'indicator') {
+                    const { indicatorConfig } = chartDesigner;
+                    const { xAxis, yAxis, otherColumn, sortColumn } = indicatorConfig;
+                    const newXAxisColumn = columns.find(c => c.name === xAxis.column.value);
+                    const newYAxisColumn = columns.find(c => c.name === yAxis.column.value);
+                    const newOtherColumns = otherColumn.filter(oc => !!columns.find(c => c.name === oc.value)).map(oc => {
+                        let t = columns.find(c => c.name === oc.value);
+                        return {
+                            value: t.name,
+                            label: t.label,
+                            type: t.type
+                        }
+                    });
+                    const newSortColumn = columns.find(c => c.name === sortColumn.key);
+                    let fields = {};
+                    fields.xAxis = newXAxisColumn ? { column: { value: newXAxisColumn.name, label: newXAxisColumn.label, type: newXAxisColumn.type } } : { column: {} };
+                    fields.yAxis = newYAxisColumn ? { column: { value: newYAxisColumn.name, label: newYAxisColumn.label, type: newYAxisColumn.type }, gauge: yAxis.gauge } : {column:{}, gauge:{}};
+                    fields.otherColumn = newOtherColumns;
+                    fields.sortColumn = newSortColumn ? { key: newSortColumn.name, label: newSortColumn.label }: {key:''}
+                    yield put({ type: 'silentSetField', name: 'indicatorConfig', value: { ...indicatorConfig, ...fields } });
                 }
                 const { filters } = chartDesigner;
-                let fields = filters.map(f => {
+                let newFilters = filters.map(f => {
                     const newFilterColumn = columns.find(c => c.name === f.name);
-                    return newFilterColumn ? { label: newFilterColumn.label, type: newFilterColumn.type } : {};
-                });
-                yield put({ type: 'silentSetField', name: 'filters', value: deepAssign(filters, fields) });
+                    return newFilterColumn ? deepAssign(f, { label: newFilterColumn.label, type: newFilterColumn.type }) : null;
+                }).filter(c => !!c);
+                yield put({ type: 'silentSetField', name: 'filters', value: newFilters });
             }catch(e) {
                 console.error(e.message);
             }
         },
         *fetchChartData(action, { select, call, put }) {
-            console.log('fetchChartData');
             const chartDesigner = yield select(state => state.present.chartDesigner);
             const { baseConfig } = chartDesigner;
             const { viewType } = baseConfig;