饼图阈值添加是否显示 其他 设置

src/components/chartDesigner/sections/barConfigForm.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Form, Select, Checkbox, InputNumber } from 'antd';
-import { deepAssign } from '../../../utils/baseUtils';
+import { Form, Select, Checkbox } from 'antd';
 import { connect } from 'dva';
 import XAxisItem from './xAxisItem';
 import YAxisItem from './yAxisItem';
 import DrillList from './drillList';
+import Threshold from './threshold';
 import GRANULARITY from './granularity.json';
 const FormItem = Form.Item;
 const { Option } = Select;
@@ -79,28 +79,15 @@ const BarConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 					<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>
+			<Threshold
+				other={false}
+				threshold={chartDesigner.barConfig.threshold}
+				defaultThreshold={chartDesigner.defaultBarThreshold}
+				onChange={value => {
+					let fields = [{ name: 'barConfig', value: { ...barConfig, threshold: value } }];
+					dispatch({ type: 'chartDesigner/changeFields', fields, autoRefresh });
+				}}
+			/>
 			{barConfig.xAxis.column.value && <FormItem label='钻取' {...formItemLayout}>
 				<Checkbox
 					checked={!!barConfig.drillable}

src/components/chartDesigner/sections/pieConfigForm.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { Form, InputNumber, Select, Checkbox } from 'antd'
+import { Form, Select, Checkbox } from 'antd'
 import { connect } from 'dva'
 import XAxisItem from './xAxisItem';
 import YAxisItem from './yAxisItem';
 import DrillList from './drillList';
+import Threshold from './threshold';
 import GRANULARITY from './granularity.json';
 
 const { Option } = Select;
@@ -60,28 +61,19 @@ const PieConfigForm = ({ autoRefresh, chartDesigner, dispatch }) => {
 					<Option value='DESC'>降序</Option>
 				</Select>
 			</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: { ...pieConfig, threshold: value } }];
-							dispatch({ type: 'chartDesigner/changeFields', fields, autoRefresh });
-						}
-                    }}
-                    onKeyDown={e => {
-                        if(e.keyCode === 13) {
-                            let value = e.target.value;
-							if(value !== chartDesigner.pieConfig.threshold) {
-								let fields = [{ name: 'pieConfig', value: { ...pieConfig, threshold: value } }];
-								dispatch({ type: 'chartDesigner/changeFields', fields, autoRefresh });
-							}
-                        }
-                    }}
-				/>
-			</FormItem>
+			<Threshold
+				other={true}
+				threshold={chartDesigner.pieConfig.threshold}
+				defaultThreshold={chartDesigner.defaultPieThreshold}
+				hiddenOverThreshold={!!pieConfig.hiddenOverThreshold}
+				onChange={value => {
+					let fields = [{ name: 'pieConfig', value: { ...pieConfig, threshold: value } }];
+					dispatch({ type: 'chartDesigner/changeFields', fields, autoRefresh });
+				}}
+				onCheckedChange={checked => {
+					dispatch({ type: 'chartDesigner/changeField', name: 'pieConfig', value: { ...pieConfig, hiddenOverThreshold: checked }, autoRefresh });
+				}}
+			/>
 			{pieConfig.xAxis.column.value && <FormItem label='钻取' {...formItemLayout}>
 				<Checkbox
 					checked={!!pieConfig.drillable}

src/components/chartDesigner/sections/threshold.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Row, Col, Form, InputNumber, Checkbox } from 'antd';
+const FormItem = Form.Item;
+
+const Threshold = ({ other, threshold, defaultThreshold, hiddenOverThreshold, onChange, onCheckedChange }) => <Row>
+    <Col span={other ? 16 : 24}>
+        <FormItem label='阈值' labelCol={{ span: other ? 12 : 8 }} wrapperCol={{ span: other ? 8 : 16 }}>
+            <InputNumber
+                defaultValue={threshold}
+                placeholder={defaultThreshold}
+                min={0}
+                onBlur={e => {
+                    let value = e.target.value;
+                    if(value !== threshold) {
+                        onChange(value, e)
+                    }
+                }}
+                onKeyDown={e => {
+                    if(e.keyCode === 13) {
+                        let value = e.target.value;
+                        if(value < 0) {
+                            e.target.blur();
+                            return;
+                        }
+                        if(value !== threshold) {
+                            onChange(value, e)
+                        }
+                    }
+                }}
+            />
+        </FormItem>
+    </Col>
+    {other && <Col span={8}>
+        <FormItem label='隐藏其他' labelCol={{ span: 16 }} wrapperCol={{ span: 8 }}>
+            <Checkbox
+                checked={hiddenOverThreshold}
+                onChange={e => {
+                    let checked = e.target.checked;
+                    onCheckedChange(checked, e);
+                }}
+            />
+        </FormItem>
+    </Col>}
+</Row>
+
+exports = module.exports = Threshold;

src/models/chartDesigner.js

@@ -595,6 +595,7 @@ export default {
                     },
                     filters: getBodyFilters(filters),
                     maxCount: pieConfig.threshold || defaultPieThreshold,
+                    hiddenOther: pieConfig.hiddenOverThreshold === undefined ? false : pieConfig.hiddenOverThreshold,
                     sort: pieConfig.sortTarget ? (pieConfig.sortTarget === 'y' ? pieConfig.yAxis.column.value : pieConfig.xAxis.column.value) : pieConfig.xAxis.column.value,
                     rule: pieConfig.sortType || 'ASC',
                 };