feat(KLineModule): 添加日K时间范围选择器
This commit is contained in:
@@ -13,12 +13,13 @@ import {
|
||||
Center,
|
||||
Spinner,
|
||||
Icon,
|
||||
Select,
|
||||
} from '@chakra-ui/react';
|
||||
import { RepeatIcon, InfoIcon } from '@chakra-ui/icons';
|
||||
import { BarChart2, Clock, TrendingUp } from 'lucide-react';
|
||||
import { BarChart2, Clock, TrendingUp, Calendar } from 'lucide-react';
|
||||
import ReactECharts from 'echarts-for-react';
|
||||
|
||||
import { darkGoldTheme } from '../../../constants';
|
||||
import { darkGoldTheme, PERIOD_OPTIONS } from '../../../constants';
|
||||
import { getKLineOption, getMinuteKLineOption } from '../../../utils/chartOptions';
|
||||
import type { KLineModuleProps } from '../../../types';
|
||||
|
||||
@@ -48,6 +49,8 @@ const KLineModule: React.FC<KLineModuleProps> = ({
|
||||
analysisMap,
|
||||
onLoadMinuteData,
|
||||
onChartClick,
|
||||
selectedPeriod,
|
||||
onPeriodChange,
|
||||
}) => {
|
||||
const [mode, setMode] = useState<ChartMode>('daily');
|
||||
const hasMinuteData = minuteData && minuteData.data && minuteData.data.length > 0;
|
||||
@@ -128,6 +131,36 @@ const KLineModule: React.FC<KLineModuleProps> = ({
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={3}>
|
||||
{/* 日K模式下显示时间范围选择器 */}
|
||||
{mode === 'daily' && onPeriodChange && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={Calendar} boxSize={4} color={darkGoldTheme.textMuted} />
|
||||
<Select
|
||||
size="sm"
|
||||
value={selectedPeriod}
|
||||
onChange={(e) => onPeriodChange(Number(e.target.value))}
|
||||
bg="transparent"
|
||||
borderColor={darkGoldTheme.border}
|
||||
color={darkGoldTheme.textPrimary}
|
||||
maxW="100px"
|
||||
_hover={{ borderColor: darkGoldTheme.gold }}
|
||||
_focus={{ borderColor: darkGoldTheme.gold, boxShadow: 'none' }}
|
||||
sx={{
|
||||
option: {
|
||||
background: '#1a1a2e',
|
||||
color: darkGoldTheme.textPrimary,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{PERIOD_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{/* 分钟模式下的刷新按钮 */}
|
||||
{mode === 'minute' && (
|
||||
<Button
|
||||
|
||||
@@ -14,6 +14,8 @@ export interface TradeDataPanelProps {
|
||||
analysisMap: Record<number, RiseAnalysis>;
|
||||
onLoadMinuteData: () => void;
|
||||
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
|
||||
selectedPeriod?: number;
|
||||
onPeriodChange?: (period: number) => void;
|
||||
}
|
||||
|
||||
const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
||||
@@ -24,6 +26,8 @@ const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
||||
analysisMap,
|
||||
onLoadMinuteData,
|
||||
onChartClick,
|
||||
selectedPeriod,
|
||||
onPeriodChange,
|
||||
}) => {
|
||||
return (
|
||||
<KLineModule
|
||||
@@ -34,6 +38,8 @@ const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
||||
analysisMap={analysisMap}
|
||||
onLoadMinuteData={onLoadMinuteData}
|
||||
onChartClick={onChartClick}
|
||||
selectedPeriod={selectedPeriod}
|
||||
onPeriodChange={onPeriodChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -297,6 +297,8 @@ export interface KLineModuleProps {
|
||||
analysisMap: Record<number, RiseAnalysis>;
|
||||
onLoadMinuteData: () => void;
|
||||
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
|
||||
selectedPeriod?: number;
|
||||
onPeriodChange?: (period: number) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -354,6 +356,7 @@ export interface AnalysisModalContentProps {
|
||||
*/
|
||||
export interface UseMarketDataReturn {
|
||||
loading: boolean;
|
||||
tradeLoading: boolean;
|
||||
summary: MarketSummary | null;
|
||||
tradeData: TradeDayData[];
|
||||
fundingData: FundingDayData[];
|
||||
@@ -365,4 +368,5 @@ export interface UseMarketDataReturn {
|
||||
analysisMap: Record<number, RiseAnalysis>;
|
||||
refetch: () => Promise<void>;
|
||||
loadMinuteData: () => Promise<void>;
|
||||
refreshTradeData: () => Promise<void>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user