feat(KLineModule): 添加日K时间范围选择器
This commit is contained in:
@@ -13,12 +13,13 @@ import {
|
|||||||
Center,
|
Center,
|
||||||
Spinner,
|
Spinner,
|
||||||
Icon,
|
Icon,
|
||||||
|
Select,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import { RepeatIcon, InfoIcon } from '@chakra-ui/icons';
|
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 ReactECharts from 'echarts-for-react';
|
||||||
|
|
||||||
import { darkGoldTheme } from '../../../constants';
|
import { darkGoldTheme, PERIOD_OPTIONS } from '../../../constants';
|
||||||
import { getKLineOption, getMinuteKLineOption } from '../../../utils/chartOptions';
|
import { getKLineOption, getMinuteKLineOption } from '../../../utils/chartOptions';
|
||||||
import type { KLineModuleProps } from '../../../types';
|
import type { KLineModuleProps } from '../../../types';
|
||||||
|
|
||||||
@@ -48,6 +49,8 @@ const KLineModule: React.FC<KLineModuleProps> = ({
|
|||||||
analysisMap,
|
analysisMap,
|
||||||
onLoadMinuteData,
|
onLoadMinuteData,
|
||||||
onChartClick,
|
onChartClick,
|
||||||
|
selectedPeriod,
|
||||||
|
onPeriodChange,
|
||||||
}) => {
|
}) => {
|
||||||
const [mode, setMode] = useState<ChartMode>('daily');
|
const [mode, setMode] = useState<ChartMode>('daily');
|
||||||
const hasMinuteData = minuteData && minuteData.data && minuteData.data.length > 0;
|
const hasMinuteData = minuteData && minuteData.data && minuteData.data.length > 0;
|
||||||
@@ -128,6 +131,36 @@ const KLineModule: React.FC<KLineModuleProps> = ({
|
|||||||
</HStack>
|
</HStack>
|
||||||
|
|
||||||
<HStack spacing={3}>
|
<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' && (
|
{mode === 'minute' && (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -14,6 +14,8 @@ export interface TradeDataPanelProps {
|
|||||||
analysisMap: Record<number, RiseAnalysis>;
|
analysisMap: Record<number, RiseAnalysis>;
|
||||||
onLoadMinuteData: () => void;
|
onLoadMinuteData: () => void;
|
||||||
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
|
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => void;
|
||||||
|
selectedPeriod?: number;
|
||||||
|
onPeriodChange?: (period: number) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
||||||
@@ -24,6 +26,8 @@ const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
|||||||
analysisMap,
|
analysisMap,
|
||||||
onLoadMinuteData,
|
onLoadMinuteData,
|
||||||
onChartClick,
|
onChartClick,
|
||||||
|
selectedPeriod,
|
||||||
|
onPeriodChange,
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<KLineModule
|
<KLineModule
|
||||||
@@ -34,6 +38,8 @@ const TradeDataPanel: React.FC<TradeDataPanelProps> = ({
|
|||||||
analysisMap={analysisMap}
|
analysisMap={analysisMap}
|
||||||
onLoadMinuteData={onLoadMinuteData}
|
onLoadMinuteData={onLoadMinuteData}
|
||||||
onChartClick={onChartClick}
|
onChartClick={onChartClick}
|
||||||
|
selectedPeriod={selectedPeriod}
|
||||||
|
onPeriodChange={onPeriodChange}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -297,6 +297,8 @@ export interface KLineModuleProps {
|
|||||||
analysisMap: Record<number, RiseAnalysis>;
|
analysisMap: Record<number, RiseAnalysis>;
|
||||||
onLoadMinuteData: () => void;
|
onLoadMinuteData: () => void;
|
||||||
onChartClick: (params: { seriesName?: string; data?: [number, number] }) => 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 {
|
export interface UseMarketDataReturn {
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
|
tradeLoading: boolean;
|
||||||
summary: MarketSummary | null;
|
summary: MarketSummary | null;
|
||||||
tradeData: TradeDayData[];
|
tradeData: TradeDayData[];
|
||||||
fundingData: FundingDayData[];
|
fundingData: FundingDayData[];
|
||||||
@@ -365,4 +368,5 @@ export interface UseMarketDataReturn {
|
|||||||
analysisMap: Record<number, RiseAnalysis>;
|
analysisMap: Record<number, RiseAnalysis>;
|
||||||
refetch: () => Promise<void>;
|
refetch: () => Promise<void>;
|
||||||
loadMinuteData: () => Promise<void>;
|
loadMinuteData: () => Promise<void>;
|
||||||
|
refreshTradeData: () => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user