饼图柱状图添加阈值设置/柱状图无分组时排序规则设置

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Form, Select, Tag, Cascader, Dropdown, Menu } from 'antd'
+import { Form, Select, Tag, Cascader, Dropdown, Menu, InputNumber } from 'antd'
+import { deepAssign } from '../../../utils/baseUtils'
 import { connect } from 'dva'
 import GAUGE from './gauge.json'
 import GRANULARITY from './granularity.json'
@@ -10,14 +11,14 @@ const formItemLayout = {
 	wrapperCol: { span: 16 },
 };
 const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
-	const columns = chartDesigner.columns;
+	const { columns, baseConfig, barConfig } = chartDesigner;
 
 	return (
 		<Form hideRequiredMark={true}>
 			<FormItem label='横轴' {...formItemLayout}>
 				<Cascader
 					className='barconfig-yaxis'
-					value={[chartDesigner.barConfig.xAxis.column.value, chartDesigner.barConfig.xAxis.granularity.value]}
+					value={[barConfig.xAxis.column.value, barConfig.xAxis.granularity.value]}
 					allowClear={true}
 					showSearch={{
 						filter: (inputValue, path) => {
@@ -59,7 +60,7 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 						if(items.length > 1) {
 							granularity = { value: items[1].value, label: items[1].label };
 						}
-						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...chartDesigner.barConfig, xAxis: { column, granularity } }, autoRefresh });
+						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...barConfig, xAxis: { column, granularity } }, autoRefresh });
 					}}
 					displayRender={(label, selectedOptions) => {
 						let text = '';
@@ -82,7 +83,7 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 			<FormItem label='纵轴' {...formItemLayout}>
 				<Cascader
 					className='gauge-item'
-					value={[chartDesigner.barConfig.yAxis.column.value, chartDesigner.barConfig.yAxis.gauge.value]}
+					value={[barConfig.yAxis.column.value, barConfig.yAxis.gauge.value]}
 					allowClear={true}
 					showSearch={{
 						filter: (inputValue, path) => {
@@ -111,7 +112,7 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 							value: c.name,
 							label: c.label,
 							type: c.type,
-							children: GAUGE[chartDesigner.baseConfig.viewType].map(g => {
+							children: GAUGE[baseConfig.viewType].map(g => {
 								if(g.columnType.indexOf(c.type) !== -1) {
 									return g;
 								}else {
@@ -127,11 +128,11 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 							column = { type: items[0].type, value: items[0].value, label: items[0].label };
 							gauge = { value: items[1].value, label: items[1].label };
 						}
-						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...chartDesigner.barConfig, yAxis: { column, gauge } }, autoRefresh });
+						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...barConfig, yAxis: { column, gauge } }, autoRefresh });
 					}}
 					displayRender={(label, selectedOptions) => {
 						let menu = selectedOptions.length > 0 ? <Menu
-							selectedKeys={[chartDesigner.barConfig.yAxis.gauge.value]}
+							selectedKeys={[barConfig.yAxis.gauge.value]}
 							selectable={true}
 						>
 							{selectedOptions[0].children.map((c, i) => {
@@ -139,9 +140,9 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 									let value = e.domEvent.target.getAttribute('data-value');
 									let label = e.domEvent.target.getAttribute('data-label');
 									dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { 
-										...chartDesigner.barConfig,
+										...barConfig,
 										yAxis: {
-											column: chartDesigner.barConfig.yAxis.column,
+											column: barConfig.yAxis.column,
 											gauge: { value, label }
 										}
 									}, autoRefresh });
@@ -175,21 +176,69 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 					onChange={(value) => {
 						const column = value ? columns.find(c => c.name === value.key) : null;
 						const groupBy = column ? { ...value, type: column.type } : undefined;
-						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...chartDesigner.barConfig, groupBy }, autoRefresh });
+						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...barConfig, groupBy }, autoRefresh });
 					}}
-					value={chartDesigner.barConfig.groupBy}
+					value={barConfig.groupBy}
 				>
 					{columns.filter(c => c.groupable).map((c, i)=>{
 						return (<Option key={i} value={c.name}>{c.label}</Option>)
 					})}
 				</Select>
 			</FormItem>
+			{(!barConfig.groupBy || !barConfig.groupBy.key) && <FormItem label='排序目标' {...formItemLayout}>
+				<Select
+					placeholder='横轴名称'
+					allowClear={true}
+					onChange={(value) => {
+						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...barConfig, sortTarget: value }, autoRefresh });
+					}}
+					value={barConfig.sortTarget}
+				>
+					<Option value='x'>横轴名称</Option>
+					<Option value='y'>纵轴数值</Option>
+				</Select>
+			</FormItem>}
+			{(!barConfig.groupBy || !barConfig.groupBy.key) && <FormItem label='排序方式' {...formItemLayout}>
+				<Select
+					placeholder='升序'
+					allowClear={true}
+					onChange={(value) => {
+						dispatch({ type: 'chartDesigner/changeField', name: 'barConfig', value: { ...barConfig, sortType: value }, autoRefresh });
+					}}
+					value={barConfig.sortType}
+				>
+					<Option value='ASC'>升序</Option>
+					<Option value='DESC'>降序</Option>
+				</Select>
+			</FormItem>}
+			<FormItem label='阈值' {...formItemLayout}>
+				<InputNumber
+					defaultValue={chartDesigner.barConfig.threshold}
+					placeholder={chartDesigner.defaultBarThreshold}
+                    onBlur={e => {
+						let value = e.target.value;
+						if(value !== chartDesigner.barConfig.threshold) {
+							let fields = [{ name: 'barConfig', value: deepAssign(chartDesigner.barConfig, { threshold: value }) }];
+							dispatch({ type: 'chartDesigner/changeFields', fields });
+						}
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+							if(value !== chartDesigner.barConfig.threshold) {
+								let fields = [{ name: 'barConfig', value: deepAssign(chartDesigner.barConfig, { threshold: value }) }];
+								dispatch({ type: 'chartDesigner/changeFields', fields });
+							}
+                        }
+                    }}
+				/>
+			</FormItem>
 		</Form>
 	);
 }
 
 function mapStateToProps({ present: { chartDesigner } }) {
-    return { chartDesigner: chartDesigner }
+    return { chartDesigner }
 }
 
 export default connect(mapStateToProps)(BarConfigForm);

src/components/chartDesigner/sections/pieConfigForm.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import { Form, Tag, Cascader, Dropdown, Menu } from 'antd'
+import { Form, Tag, Cascader, Dropdown, Menu, InputNumber } from 'antd'
 import { connect } from 'dva'
 import '../../../models/chartDesigner'
+import { deepAssign } from '../../../utils/baseUtils'
 import GAUGE from './gauge.json'
 import GRANULARITY from './granularity.json'
 const FormItem = Form.Item
@@ -165,6 +166,28 @@ const PieConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 				>
 				</Cascader>
 			</FormItem>
+			<FormItem label='阈值' {...formItemLayout}>
+				<InputNumber
+					defaultValue={chartDesigner.pieConfig.threshold}
+					placeholder={chartDesigner.defaultPieThreshold}
+                    onBlur={e => {
+						let value = e.target.value;
+						if(value !== chartDesigner.pieConfig.threshold) {
+							let fields = [{ name: 'pieConfig', value: deepAssign(chartDesigner.pieConfig, { threshold: value }) }];
+							dispatch({ type: 'chartDesigner/changeFields', fields });
+						}
+                    }}
+                    onKeyDown={e => {
+                        if(e.keyCode === 13) {
+                            let value = e.target.value;
+							if(value !== chartDesigner.pieConfig.threshold) {
+								let fields = [{ name: 'pieConfig', value: deepAssign(chartDesigner.pieConfig, { threshold: value }) }];
+								dispatch({ type: 'chartDesigner/changeFields', fields });
+							}
+                        }
+                    }}
+				/>
+			</FormItem>
 		</Form>
 	);
 }

src/models/EChartsMedia.js

@@ -13,7 +13,7 @@ export default function(chartType, legendVisible, dataZoomVisible) {
     if(chartType === 'bar' || chartType === 'line' || chartType === 'scatter') {
         return legendVisible ? [{
             query: { minWidth: 1000, minHeight: 1000 }, // I
-            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', height: '80%', width: '35%' }, grid: { right: '20%'} }
         }, {
             query: { maxWidth: 1000, minHeight: 1000 }, // H
             option: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, } :
@@ -24,7 +24,7 @@ export default function(chartType, legendVisible, dataZoomVisible) {
                 { legend: { type: 'scroll', right: 'center', top: 50, orient: 'horizontal', width: '90%' }, }
         }, {
             query: { minWidth: 1000, maxHeight: 1000 }, // F
-            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '16%' } }
+            option: { legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', height: '80%', width: '35%' }, grid: { right: '16%' } }
         }, {
             query: { maxWidth: 1000, maxHeight: 1000 }, // E
             option: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, } :
@@ -35,7 +35,7 @@ export default function(chartType, legendVisible, dataZoomVisible) {
                 { legend: { type: 'scroll', right: 'center', top: 0, orient: 'horizontal', width: '90%' }, }
         }, {
             query: { minWidth: 1000, maxHeight: 500 }, // C
-            option: { legend: {  type: 'scroll', top: 50, right: 50, orient: 'vertical', width: '35%' }, grid: { right: '20%'} }
+            option: { legend: {  type: 'scroll', top: 50, right: 50, orient: 'vertical', height: '80%', width: '35%' }, grid: { right: '20%'} }
         }, {
             query: { maxWidth: 1000, maxHeight: 500 }, // B
             option: !dataZoomVisible ? { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 50, left: 80, right: 80 } } :
@@ -48,7 +48,7 @@ export default function(chartType, legendVisible, dataZoomVisible) {
     }else if(chartType === 'pie') {
         return [{
             query: { minWidth: 1000, minHeight: 1000 }, // I
-            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
+            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', height: '80%', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
         }, {
             query: { maxWidth: 1000, minHeight: 1000 }, // H
             option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '55%'], center: ['50%', '40%'] }] }
@@ -57,7 +57,7 @@ export default function(chartType, legendVisible, dataZoomVisible) {
             option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '65%'], center: ['50%', '55%'] }] }
         }, {
             query: { minWidth: 1000, maxHeight: 1000 }, // F
-            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
+            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', height: '80%', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
         }, {
             query: { maxWidth: 1000, maxHeight: 1000 }, // E
             option: { legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '55%'], center: ['50%', '40%'] }] }
@@ -66,7 +66,7 @@ export default function(chartType, legendVisible, dataZoomVisible) {
             option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '55%'], center: ['50%', '40%'] }] }
         }, {
             query: { minWidth: 1000, maxHeight: 500 }, // C
-            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
+            option: { legend: { type: 'scroll', top: 'center', right: 50, orient: 'vertical', height: '80%', width: '35%' }, series: [{ radius: [0, '65%'], center: ['35%', '50%'] }] }
         }, {
             query: { maxWidth: 1000, maxHeight: 500 }, // B
             option: { legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, series: [{ radius: [0, '65%'], center: ['50%', '45%'] }] }

src/models/chartDesigner.js

@@ -50,11 +50,15 @@ export default {
             creatorName: null,
             header: { label: '无标题' },
             columns: [],
+            defaultBarThreshold: 20,
+            defaultLineThreshold: 200,
+            defaultPieThreshold: 20,
+            defaultScatterThreshold: 1000,
             baseConfig: { dataSource: { code: '' }, viewType: '' },
             aggregateTableConfig: { targetColumn: {}, statistics: [], groupBy: [] },
             dataViewConfig: { viewColumns: [], sortColumn: {key: ''}, sortType: 'asc' },
-            barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 20 },
-            lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 1000 },
+            barConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, sortTarget: 'x', sortType: 'ASC', threshold: 20 },
+            lineConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 200 },
             pieConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, threshold: 20 },
             scatterConfig: { xAxis: { column: {}, granularity: {} }, yAxis: { column: {}, gauge: {} }, groupBy: {key:''}, threshold: 1000 },
             theme: 'default',
@@ -344,21 +348,24 @@ export default {
         *fetchBarData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, barConfig, filters, theme, styleConfig } = chartDesigner;
+                const { code, barConfig, filters, theme, styleConfig, defaultBarThreshold } = chartDesigner;
+                const { groupBy, xAxis, yAxis, sortTarget, sortType, threshold } = barConfig;
                 const body = {
                     id: code,
-                    groups: barConfig.groupBy && barConfig.groupBy.key ? [barConfig.groupBy.key] : [],
+                    groups: groupBy && groupBy.key ? [groupBy.key] : [],
                     xAxis: {
-                        columnRename: barConfig.xAxis.column.value,
-                        columnType: barConfig.xAxis.column.type,
-                        showDataType: barConfig.xAxis.granularity.value
+                        columnRename: xAxis.column.value,
+                        columnType: xAxis.column.type,
+                        showDataType: xAxis.granularity.value
                     },
                     yAxis: {
-                        columnRename: barConfig.yAxis.column.value,
-                        showDataType: barConfig.yAxis.gauge.value
+                        columnRename: yAxis.column.value,
+                        showDataType: yAxis.gauge.value
                     },
                     filters: getBodyFilters(filters),
-                    maxCount: barConfig.threshold
+                    sort: groupBy && groupBy.key ? undefined : (sortTarget ? (sortTarget === 'y' ? yAxis.column.value : xAxis.column.value) : xAxis.column.value),
+                    rule: groupBy && groupBy.key ? undefined : (sortType || 'ASC'),
+                    maxCount: threshold || defaultBarThreshold
                 };
                 
                 let res = yield call(service.fetch, {
@@ -382,7 +389,7 @@ export default {
         *fetchPieData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, pieConfig, filters, theme, styleConfig } = chartDesigner;
+                const { code, pieConfig, filters, theme, styleConfig, defaultPieThreshold } = chartDesigner;
                 const body = {
                     id: code,
                     legendData: {
@@ -396,7 +403,7 @@ export default {
                         showDataType: pieConfig.yAxis.gauge.value
                     },
                     filters: getBodyFilters(filters),
-                    maxCount: pieConfig.threshold
+                    maxCount: pieConfig.threshold || defaultPieThreshold
                 };
 
                 let res = yield call(service.fetch, {
@@ -420,7 +427,7 @@ export default {
         *fetchLineData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, lineConfig, filters, theme, styleConfig } = chartDesigner;
+                const { code, lineConfig, filters, theme, styleConfig, defaultLineThreshold } = chartDesigner;
                 const body = {
                     id: code,
                     xAxis: {
@@ -434,7 +441,7 @@ export default {
                     },
                     groups: lineConfig.groupBy && lineConfig.groupBy.key ? [lineConfig.groupBy.key] : [],
                     filters: getBodyFilters(filters),
-                    maxCount: lineConfig.threshold
+                    maxCount: lineConfig.threshold || defaultLineThreshold
                 };
 
                 let res = yield call(service.fetch, {
@@ -458,7 +465,7 @@ export default {
         *fetchScatterData(action, { select, call, put }) {
             try {
                 const chartDesigner = yield select(state => state.present.chartDesigner);
-                const { code, scatterConfig, filters, theme, styleConfig } = chartDesigner;
+                const { code, scatterConfig, filters, theme, styleConfig, defaultScatterThreshold } = chartDesigner;
                 const body = {
                     id: code,
                     xAxis: {
@@ -471,7 +478,7 @@ export default {
                     },
                     groups: scatterConfig.groupBy && scatterConfig.groupBy.key ? [scatterConfig.groupBy.key] : [],
                     filters: getBodyFilters(filters),
-                    maxCount: scatterConfig.threshold
+                    maxCount: scatterConfig.threshold || defaultScatterThreshold
                 };
 
                 let res = yield call(service.fetch, {

src/models/parseChartOption.js

@@ -284,15 +284,15 @@ function pieOption(data, pieConfig, themeConfig, styleConfig) {
                     let gv= pieConfig.xAxis.granularity.value;
                     if(gv === 'halfYear') {
                         let arr = v.name.split('-H');
-                        obj.name = arr[0] + ['上半年', '下半年'][arr[1] - 1]
+                        obj.name = arr.length === 2 ? arr[0] + ['上半年', '下半年'][arr[1] - 1] : v.name;
                     }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] + '季度'
+                        obj.name = arr.length === 2 ? arr[0] + '-' + ['一', '二', '三', '四'][arr[1] - 1] + '季度' : v.name
                     }else if(gv === 'week') {
                         let arr = v.name.split('-');
-                        obj.name = arr[0] + '-' + arr[1] + '周'
+                        obj.name = arr.length === 2 ? arr[0] + '-' + arr[1] + '周' : v.name
                     }
                 }
                 return obj;