146 lines
7.0 KiB
Plaintext
Executable File
146 lines
7.0 KiB
Plaintext
Executable File
The file /home/project/src/routes/stock.$code.tsx has been updated. Made 1 replacement.
|
||
|
||
Here's the result of running `cat -n` on a snippet of the edited file:
|
||
288→ </div>
|
||
289→ </CardContent>
|
||
290→ </Card>
|
||
291→
|
||
292→ {/* Chart */}
|
||
293→ <Card className="shadow-lg">
|
||
294→ <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
|
||
295→ <CardTitle className="text-base md:text-lg">
|
||
296→ K线图
|
||
297→ <span className="text-xs md:text-sm font-normal text-muted-foreground ml-2">
|
||
298→ （{chartData.length}个交易日）
|
||
299→ </span>
|
||
300→ </CardTitle>
|
||
301→ </CardHeader>
|
||
302→ <CardContent className="px-3 md:px-6 pb-4 md:pb-6">
|
||
303→ <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full">
|
||
304→ <ResponsiveContainer width="100%" height="100%">
|
||
305→ <ComposedChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
|
||
306→ <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
|
||
307→ <XAxis
|
||
308→ dataKey="date"
|
||
309→ stroke="var(--muted-foreground)"
|
||
310→ fontSize={10}
|
||
311→ tickCount={6}
|
||
312→ angle={-45}
|
||
313→ textAnchor="end"
|
||
314→ height={60}
|
||
315→ interval="preserveStartEnd"
|
||
316→ tick={(props: any) => {
|
||
317→ const { x, y, payload } = props;
|
||
318→ // 查找该日期对应的数据点，判断是否为添加日期
|
||
319→ const dataPoint = chartData.find(d => d.date === payload.value);
|
||
320→ const isAddedDate = dataPoint?.isAddedDate;
|
||
321→
|
||
322→ return (
|
||
323→ <text
|
||
324→ x={x}
|
||
325→ y={y}
|
||
326→ dy={16}
|
||
327→ textAnchor="end"
|
||
328→ fill={isAddedDate ? '#f59e0b' : 'var(--muted-foreground)'}
|
||
329→ fontWeight={isAddedDate ? 'bold' : 'normal'}
|
||
330→ fontSize={isAddedDate ? 11 : 10}
|
||
331→ >
|
||
332→ {payload.value}
|
||
333→ </text>
|
||
334→ );
|
||
335→ }}
|
||
336→ />
|
||
337→ <YAxis
|
||
338→ yAxisId="left"
|
||
339→ stroke="var(--muted-foreground)"
|
||
340→ fontSize={10}
|
||
341→ domain={["auto", "auto"]}
|
||
342→ tickCount={5}
|
||
343→ width={45}
|
||
344→ />
|
||
345→ <YAxis
|
||
346→ yAxisId="right"
|
||
347→ orientation="right"
|
||
348→ stroke="var(--muted-foreground)"
|
||
349→ fontSize={10}
|
||
350→ tickCount={5}
|
||
351→ width={45}
|
||
352→ />
|
||
353→ <Tooltip
|
||
354→ contentStyle={{
|
||
355→ backgroundColor: "var(--card)",
|
||
356→ border: "1px solid var(--border)",
|
||
357→ borderRadius: "8px",
|
||
358→ fontSize: "12px",
|
||
359→ padding: "8px 12px",
|
||
360→ }}
|
||
361→ labelFormatter={(label) => `日期: ${label}`}
|
||
362→ formatter={(value: any, name: string) => {
|
||
363→ if (name === 'close') return [`¥${Number(value).toFixed(2)}`, '收盘价'];
|
||
364→ if (name === 'volume') return [Number(value).toLocaleString(), '成交量'];
|
||
365→ return [value, name];
|
||
366→ }}
|
||
367→ />
|
||
368→ <Bar
|
||
369→ yAxisId="right"
|
||
370→ dataKey="volume"
|
||
371→ fill="var(--primary)"
|
||
372→ opacity={0.2}
|
||
373→ />
|
||
374→ <Line
|
||
375→ yAxisId="left"
|
||
376→ type="monotone"
|
||
377→ dataKey="close"
|
||
378→ stroke="var(--primary)"
|
||
379→ strokeWidth={2}
|
||
380→ dot={false}
|
||
381→ />
|
||
382→ {/* 高亮添加日期的K线点 */}
|
||
383→ <Scatter
|
||
384→ yAxisId="left"
|
||
385→ dataKey="close"
|
||
386→ fill="#fbbf24"
|
||
387→ shape={(props: any) => {
|
||
388→ const { cx, cy, payload } = props;
|
||
389→ // 非添加日期返回透明小圆点（不可见）
|
||
390→ if (!payload.isAddedDate) {
|
||
391→ return <circle cx={cx} cy={cy} r={0} fill="transparent" />;
|
||
392→ }
|
||
393→ return (
|
||
394→ <circle
|
||
395→ cx={cx}
|
||
396→ cy={cy}
|
||
397→ r={6}
|
||
398→ fill="#fbbf24"
|
||
399→ stroke="#f59e0b"
|
||
400→ strokeWidth={2}
|
||
401→ />
|
||
402→ );
|
||
403→ }}
|
||
404→ />
|
||
405→ </ComposedChart>
|
||
406→ </ResponsiveContainer>
|
||
407→ </div>
|
||
408→
|
||
409→ {/* Legend */}
|
||
410→ <div className="flex flex-wrap justify-center gap-3 md:gap-6 mt-3 md:mt-4 text-xs md:text-sm">
|
||
411→ <div className="flex items-center gap-1.5 md:gap-2">
|
||
412→ <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-primary"></div>
|
||
413→ <span>收盘价</span>
|
||
414→ </div>
|
||
415→ <div className="flex items-center gap-1.5 md:gap-2">
|
||
416→ <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-primary opacity-20"></div>
|
||
417→ <span>成交量</span>
|
||
418→ </div>
|
||
419→ <div className="flex items-center gap-1.5 md:gap-2">
|
||
420→ <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full" style={{ backgroundColor: '#fbbf24' }}></div>
|
||
421→ <span>添加日期</span>
|
||
422→ </div>
|
||
423→ </div>
|
||
424→ </CardContent>
|
||
425→ </Card>
|
||
426→
|
||
427→ {/* Price Details */}
|
||
428→ <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mt-4 md:mt-6">
|
||
429→ <Card>
|
||
430→ <CardContent className="p-3 md:p-4 text-center"> |