feat: 允许设置折线图的Y轴范围

Author: LeafYeeXYZ

src/components/plots/BasicLinePlot.tsx

@@ -1,5 +1,5 @@
 import { max, mean, median, min, sum } from '@psych/lib'
-import { Button, Form, Input, Radio, Select, Space } from 'antd'
+import { Button, Form, Input, InputNumber, Radio, Select, Space } from 'antd'
 import type { EChartsOption } from 'echarts'
 import * as echarts from 'echarts'
 import { useId, useState } from 'react'
@@ -38,6 +38,11 @@ type Option = {
 	smooth: boolean
 	/** 是否显示数据标签 */
 	label: boolean
+
+	/** 最大 y 值 */
+	maxY?: number
+	/** 最小 y 值 */
+	minY?: number
 }
 
 export function BasicLinePlot() {
@@ -66,6 +71,8 @@ export function BasicLinePlot() {
 				statistic,
 				smooth,
 				label,
+				maxY,
+				minY,
 			} = values
 			const ele = document.getElementById(plotId)
 			if (!ele) {
@@ -124,6 +131,8 @@ export function BasicLinePlot() {
 						name: yLabel || dataVar,
 						nameLocation: 'middle',
 						nameGap: 35,
+						max: maxY,
+						min: minY,
 					},
 					series: [
 						{
@@ -163,6 +172,8 @@ export function BasicLinePlot() {
 						name: dataLabel || 'Y',
 						nameLocation: 'middle',
 						nameGap: 35,
+						max: maxY,
+						min: minY,
 					},
 					series: [
 						{
@@ -377,6 +388,24 @@ export function BasicLinePlot() {
 							</Form.Item>
 						</Space.Compact>
 					</Form.Item>
+					<Form.Item label='Y轴数值范围'>
+						<Space.Compact className='w-full'>
+							<Form.Item noStyle name='minY'>
+								<InputNumber
+									className='w-full'
+									addonBefore='Y轴最小为'
+									placeholder='默认自动'
+								/>
+							</Form.Item>
+							<Form.Item noStyle name='maxY'>
+								<InputNumber
+									className='w-full'
+									addonBefore='Y轴最大为'
+									placeholder='默认自动'
+								/>
+							</Form.Item>
+						</Space.Compact>
+					</Form.Item>
 					<div className='flex flex-row flex-nowrap justify-center items-center gap-4'>
 						<Button
 							className='w-full mt-4'

src/components/plots/StackLinePlot.tsx

@@ -1,5 +1,5 @@
 import { max, mean, median, min, sum } from '@psych/lib'
-import { Button, Form, Input, Radio, Select, Space } from 'antd'
+import { Button, Form, Input, InputNumber, Radio, Select, Space } from 'antd'
 import type { EChartsOption } from 'echarts'
 import * as echarts from 'echarts'
 import { useId, useState } from 'react'
@@ -41,6 +41,11 @@ type Option = {
 	smooth: boolean
 	/** 是否显示数据标签 */
 	label: boolean
+
+	/** 最大 y 值 */
+	maxY?: number
+	/** 最小 y 值 */
+	minY?: number
 }
 
 export function StackLinePlot() {
@@ -70,6 +75,8 @@ export function StackLinePlot() {
 				smooth,
 				label,
 				stackVar,
+				maxY,
+				minY,
 			} = values
 			const ele = document.getElementById(plotId)
 			if (!ele) {
@@ -162,13 +169,17 @@ export function StackLinePlot() {
 						name: yLabel || dataVar,
 						nameLocation: 'middle',
 						nameGap: 35,
+						max: maxY,
+						min: minY,
 					},
 					series: linesData,
 					legend: {
 						data: linesData.map((line) => line.name),
 					},
 				}
+
 				chart.setOption(option, true)
+
 				// 被试内数据处理
 			} else {
 				if (!variables?.length) {
@@ -220,6 +231,8 @@ export function StackLinePlot() {
 						name: dataLabel || 'Y',
 						nameLocation: 'middle',
 						nameGap: 35,
+						max: maxY,
+						min: minY,
 					},
 					series: linesData,
 					legend: {
@@ -430,6 +443,24 @@ export function StackLinePlot() {
 							</Form.Item>
 						</Space.Compact>
 					</Form.Item>
+					<Form.Item label='Y轴数值范围'>
+						<Space.Compact className='w-full'>
+							<Form.Item noStyle name='minY'>
+								<InputNumber
+									className='w-full'
+									addonBefore='Y轴最小为'
+									placeholder='默认自动'
+								/>
+							</Form.Item>
+							<Form.Item noStyle name='maxY'>
+								<InputNumber
+									className='w-full'
+									addonBefore='Y轴最大为'
+									placeholder='默认自动'
+								/>
+							</Form.Item>
+						</Space.Compact>
+					</Form.Item>
 					<div className='flex flex-row flex-nowrap justify-center items-center gap-4'>
 						<Button
 							className='w-full mt-4'