feat: 计算时禁用表单

LeafYeeXYZ · Oct 8, 2024 · be75423 · be75423
1 parent 11b0dd9
commit be75423
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/src/components/PaintView.tsx b/src/components/PaintView.tsx
@@ -97,6 +97,7 @@ export function PaintView() {
             defaultValue={CASCADER_DEFAULT_VALUE}
             options={CASCADER_OPTIONS}
             onChange={(value) => CASCADER_ONCHANGE(value, setPage)}
+            expandTrigger='hover'
           />
         </div>
         {/* 画图界面 */}

diff --git a/src/components/StatisticsView.tsx b/src/components/StatisticsView.tsx
@@ -116,6 +116,7 @@ export function StatisticsView() {
             defaultValue={CASCADER_DEFAULT_VALUE}
             options={CASCADER_OPTIONS}
             onChange={(value) => CASCADER_ONCHANGE(value, setPage)}
+            expandTrigger='hover'
           />
         </div>
         {/* 统计界面 */}

diff --git a/src/plots/BasicBoxPlot.tsx b/src/plots/BasicBoxPlot.tsx
@@ -1,7 +1,8 @@
 import { Box } from '@ant-design/plots'
-import { Select, Button, Form } from 'antd'
+import { Select, Button, Form, Radio } from 'antd'
 import { useZustand } from '../lib/useZustand'
 import { useState } from 'react'
+import { flushSync } from 'react-dom'
 
 type Option = {
   /** 分组变量 */
@@ -26,6 +27,7 @@ export function BasicBoxPlot() {
 
   const { dataCols, dataRows } = useZustand()
   const [config, setConfig] = useState<Config | null>(null)
+  const [disabled, setDisabled] = useState<boolean>(false)
   const handleFinish = (values: Option) => {
     try {
       const data = dataRows
@@ -53,11 +55,16 @@ export function BasicBoxPlot() {
         <Form<Option>
           className='w-full'
           layout='vertical'
-          onFinish={handleFinish}
+          onFinish={(values) => {
+            flushSync(() => setDisabled(true))
+            handleFinish(values)
+            flushSync(() => setDisabled(false))
+          }}
           autoComplete='off'
           initialValues={{
             showOutliers: true,
           }}
+          disabled={disabled}
         >
           <Form.Item
             label='选择分组变量'
@@ -96,13 +103,10 @@ export function BasicBoxPlot() {
             name='showOutliers'
             rules={[{ required: true, message: '请选择是否显示异常点' }]}
           >
-            <Select
-              className='w-full'
-              placeholder='请选择是否显示异常点'
-            >
-              <Select.Option value={true}>是</Select.Option>
-              <Select.Option value={false}>否</Select.Option>
-            </Select>
+            <Radio.Group block>
+              <Radio.Button value={true}>标注并排除异常点</Radio.Button>
+              <Radio.Button value={false}>不特殊处理异常点</Radio.Button>
+            </Radio.Group>
           </Form.Item>
           <div
             className='flex flex-row flex-nowrap justify-center items-center gap-4'

diff --git a/src/statistics/OneSampleTTest.tsx b/src/statistics/OneSampleTTest.tsx
@@ -2,6 +2,7 @@ import { useZustand } from '../lib/useZustand'
 import { Select, Input, Button, Form } from 'antd'
 import { useState } from 'react'
 import { ttest } from '@stdlib/stats'
+import { flushSync } from 'react-dom'
 
 type Option = {
   /** 变量名 */
@@ -21,6 +22,7 @@ export function OneSampleTTest() {
 
   const { dataCols, dataRows } = useZustand()
   const [result, setResult] = useState<Result | null>(null)
+  const [disabled, setDisabled] = useState<boolean>(false)
   const handleCalculate = (values: Option) => {
     try {
       const data = dataRows.map((row) => +row[values.variable] as number)
@@ -39,13 +41,18 @@ export function OneSampleTTest() {
         <Form<Option>
           className='w-full'
           layout='vertical'
-          onFinish={handleCalculate}
+          onFinish={(values) => {
+            flushSync(() => setDisabled(true))
+            handleCalculate(values)
+            flushSync(() => setDisabled(false))
+          }}
           autoComplete='off'
           initialValues={{
             expect: 0,
             alpha: 0.05,
             alternative: 'two-sided',
           }}
+          disabled={disabled}
         >
           <Form.Item
             label='选择变量'

diff --git a/src/statistics/PeerSampleTTest.tsx b/src/statistics/PeerSampleTTest.tsx
@@ -2,6 +2,7 @@ import { useZustand } from '../lib/useZustand'
 import { Select, Input, Button, Form } from 'antd'
 import { useState } from 'react'
 import { ttest } from '@stdlib/stats'
+import { flushSync } from 'react-dom'
 
 type Option = {
   /** 变量名1 */
@@ -23,6 +24,7 @@ export function PeerSampleTTest() {
 
   const { dataCols, dataRows } = useZustand()
   const [result, setResult] = useState<Result | null>(null)
+  const [disabled, setDisabled] = useState<boolean>(false)
   const handleCalculate = (values: Option) => {
     try {
       const data1 = dataRows.map((row) => +row[values.variable1] as number)
@@ -42,13 +44,18 @@ export function PeerSampleTTest() {
         <Form<Option>
           className='w-full'
           layout='vertical'
-          onFinish={handleCalculate}
+          onFinish={(values) => {
+            flushSync(() => setDisabled(true))
+            handleCalculate(values)
+            flushSync(() => setDisabled(false))
+          }}
           autoComplete='off'
           initialValues={{
             expect: 0,
             alpha: 0.05,
             alternative: 'two-sided',
           }}
+          disabled={disabled}
         >
           <Form.Item
             label='选择配对变量'