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
|
"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) {
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.4 },
fill: "tozeroy",
fillcolor: "rgba(194,170,122,0.10)"
}
];
const layout: Partial<Layout> = {
autosize: true,
height: 360,
margin: { l: 52, r: 18, t: 18, b: 38 },
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 },
yaxis: { showgrid: true, gridcolor: "#232934", tickprefix: "$", tickformat: ",.2f" }
};
if (!points.length) {
return <div className="empty-panel">No price history available for this period.</div>;
}
return <Plot data={data} layout={layout} config={{ displayModeBar: false, responsive: true }} className="chart" useResizeHandler />;
}
|
