1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
"use client";
import dynamic from "next/dynamic";
import type { Data, Layout } from "plotly.js";
import type { HistoryPoint } from "@/types/api";
const Plot = dynamic(() => import("react-plotly.js"), { ssr: false });
type Props = {
symbol: string;
points: HistoryPoint[];
};
export function PriceChart({ symbol, points }: Props) {
if (!points.length) {
return <div className="psm-card-empty">No price history available for this range.</div>;
}
const x = points.map((point) => point.date);
const y = points.map((point) => point.close ?? null);
const data: Data[] = [
{
x,
y,
type: "scatter",
mode: "lines",
name: symbol,
line: { color: "#C2AA7A", width: 2.5 },
fill: "tozeroy",
fillcolor: "rgba(194,170,122,0.08)",
hovertemplate: "%{x}<br>$%{y:.2f}<extra></extra>"
}
];
const layout: Partial<Layout> = {
autosize: true,
height: 360,
margin: { l: 52, r: 24, t: 20, b: 42 },
paper_bgcolor: "rgba(0,0,0,0)",
plot_bgcolor: "rgba(0,0,0,0)",
hovermode: "x unified",
font: { family: "IBM Plex Mono, monospace", color: "#8E8676" },
xaxis: {
showgrid: false,
zeroline: false,
color: "#8E8676"
},
yaxis: {
showgrid: true,
gridcolor: "#232934",
color: "#8E8676",
tickprefix: "$",
tickformat: ",.2f"
}
};
return <Plot data={data} layout={layout} config={{ displayModeBar: false, responsive: true }} className="chart" useResizeHandler />;
}
|
