'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; const WIDTH = 1000; const HEIGHT = 600; const PADDING = { top: 60, right: 100, bottom: 100, left: 60 }; const CHART_WIDTH = WIDTH - PADDING.left - PADDING.right; const CHART_HEIGHT = HEIGHT - PADDING.top - PADDING.bottom; const PRICE_HEIGHT = CHART_HEIGHT * 0.7; const VOL_HEIGHT = CHART_HEIGHT * 0.25; const VOL_TOP = PRICE_HEIGHT + 30; // Helper: Generate realistic market data with a specific narrative const generateData = () => { const data = []; let price = 100; // Phase 1: Long decline (Downtrend) - "长期下跌" for (let i = 0; i < 20; i++) { const vol = 20 + Math.random() * 30; const change = -2 + Math.random() * 3; // Mostly down const open = price; const close = price + change; const high = Math.max(open, close) + Math.random() * 2; const low = Math.min(open, close) - Math.random() * 2; data.push({ open, close, high, low, volume: vol, type: 'bear', phase: 'drop' }); price = close; } // Phase 2: Sideways / Consolidation / Panic Dip - "横盘震荡 & 恐慌割肉" for (let i = 0; i < 15; i++) { const isPanic = i === 13 || i === 14; // The last two before the pump are scary const vol = isPanic ? 80 : 15 + Math.random() * 20; // Panic selling volume const change = isPanic ? -4 : -1 + Math.random() * 2; const open = price; const close = price + change; const high = Math.max(open, close) + Math.random() * 1; const low = Math.min(open, close) - (isPanic ? 3 : Math.random() * 1); data.push({ open, close, high, low, volume: vol, type: close < open ? 'bear' : 'bull', phase: isPanic ? 'panic' : 'sideways' }); price = close; } // Phase 3: The Golden Signal - "平地惊雷" (Double Volume, No Shadow, Big Body) const signalOpen = price; const signalClose = price * 1.08; // 8% move data.push({ open: signalOpen, close: signalClose, high: signalClose, // No upper shadow (光头) low: signalOpen - 0.5, volume: 250, // Massive volume type: 'bull', phase: 'signal', isKey: true }); price = signalClose; // Phase 4: Follow up - "上涨趋势" for (let i = 0; i < 10; i++) { const vol = 100 + Math.random() * 50; const change = 0.5 + Math.random() * 2; const open = price; const close = price + change; const high = close + Math.random() * 1; const low = open - Math.random() * 1; data.push({ open, close, high, low, volume: vol, type: 'bull', phase: 'rise' }); price = close; } return data; }; const SmartMoneyAnimation = () => { const [data, setData] = useState([]); const [visibleCount, setVisibleCount] = useState(0); const [annotations, setAnnotations] = useState([]); const requestRef = useRef(); const [radarAngle, setRadarAngle] = useState(0); // Initialize data useEffect(() => { setData(generateData()); }, []); // Animation Loop useEffect(() => { if (data.length === 0) return; let lastTime = Date.now(); const animate = () => { const now = Date.now(); const dt = now - lastTime; // Rotate Radar setRadarAngle(prev => (prev + 2) % 360); if (dt > 200) { // Update candle visibility every 200ms setVisibleCount(prev => { if (prev < data.length) return prev + 1; // Reset logic for infinite loop if (prev > data.length + 20) { setAnnotations([]); return 0; } return prev + 1; }); lastTime = now; } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [data]); // Handle Annotations based on visible candles useEffect(() => { if (visibleCount === 0) return; const currentIdx = visibleCount - 1; if (currentIdx >= data.length) return; const candle = data[currentIdx]; if (candle.phase === 'drop' && currentIdx === 10) { setAnnotations(prev => [...prev, { text: "位置判断：长期下跌后", x: 200, y: 100, id: 1 }]); } if (candle.phase === 'panic' && !annotations.find(a => a.id === 2)) { setAnnotations(prev => [...prev, { text: "反人性：恐慌割肉盘", x: 450, y: 350, id: 2, color: "#ef4444" }]); } if (candle.isKey) { setAnnotations(prev => [ ...prev.filter(a => a.id !== 2), // Remove panic text { text: "主力动作：平地惊雷", x: 550, y: 150, id: 3, color: "#10b981", size: 24 }, { text: "特征：倍量光头阳线", x: 550, y: 190, id: 4, color: "#fff" } ]); } }, [visibleCount, data]); // Scaling logic const visibleData = data.slice(0, visibleCount); const maxPrice = Math.max(...data.map(d => d.high), 110); const minPrice = Math.min(...data.map(d => d.low), 80); const maxVol = Math.max(...data.map(d => d.volume)); const getX = (i: number) => PADDING.left + i * (CHART_WIDTH / data.length); const getY = (p: number) => PADDING.top + PRICE_HEIGHT - ((p - minPrice) / (maxPrice - minPrice)) * PRICE_HEIGHT; const getVolH = (v: number) => (v / maxVol) * VOL_HEIGHT; const candleWidth = (CHART_WIDTH / data.length) * 0.7; return ( ); }; export const SmartMoneyChart = SmartMoneyAnimation;