up
This commit is contained in:
Sakurasan
+146
@@ -0,0 +1,146 @@
|
||||
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">
|
||||
Reference in New Issue
Block a user