128 lines
3 KiB
TypeScript
128 lines
3 KiB
TypeScript
"use client";
|
|
|
|
import { ResponsiveLine } from "@nivo/line";
|
|
import { FC } from "react";
|
|
|
|
// make sure parent container have a defined height when using
|
|
// responsive component, otherwise height will be 0 and
|
|
// no chart will be rendered.
|
|
// website examples showcase many properties,
|
|
// you'll often use just a few of them.
|
|
|
|
type MyResponsiveLineProps = {
|
|
data: LineChartData[];
|
|
};
|
|
|
|
export const MyResponsiveLine: FC<MyResponsiveLineProps> = ({ data }) => (
|
|
<ResponsiveLine
|
|
curve="monotoneX"
|
|
lineWidth={3}
|
|
margin={{ top: 20, right: 54, bottom: 68, left: 50 }}
|
|
data={data}
|
|
xFormat="time:%Y-%m-%d"
|
|
yScale={{
|
|
type: "linear",
|
|
}}
|
|
yFormat=" >-.2f"
|
|
axisTop={null}
|
|
axisRight={null}
|
|
axisBottom={{
|
|
// format: "%b %d",
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 30,
|
|
// legend: "Date",
|
|
legendOffset: 36,
|
|
legendPosition: "middle",
|
|
truncateTickAt: 0,
|
|
}}
|
|
axisLeft={{
|
|
tickSize: 5,
|
|
tickPadding: 5,
|
|
tickRotation: 0,
|
|
legend: "Score (%)",
|
|
legendOffset: -45,
|
|
legendPosition: "middle",
|
|
truncateTickAt: 0,
|
|
}}
|
|
enableTouchCrosshair={true}
|
|
pointSize={10}
|
|
pointColor={{ from: "color", modifiers: [] }}
|
|
pointBorderWidth={2}
|
|
pointBorderColor={{ from: "serieColor" }}
|
|
pointLabel="data.yFormatted"
|
|
pointLabelYOffset={-12}
|
|
useMesh={true}
|
|
colors={[
|
|
"#fb7185",
|
|
// "#FCCCD4",
|
|
"#a8a29e",
|
|
// "#e7e5e4",
|
|
"#22c55e",
|
|
// "#CCFBDD",
|
|
]}
|
|
legends={[
|
|
{
|
|
anchor: "bottom",
|
|
direction: "row",
|
|
justify: false,
|
|
translateX: -20,
|
|
translateY: 70,
|
|
itemsSpacing: 10,
|
|
itemDirection: "left-to-right",
|
|
itemWidth: 65,
|
|
itemHeight: 20,
|
|
itemOpacity: 1,
|
|
symbolSize: 16,
|
|
symbolShape: "circle",
|
|
symbolBorderColor: "rgba(0, 0, 0, .9)",
|
|
effects: [
|
|
{
|
|
on: "hover",
|
|
style: {
|
|
itemBackground: "rgba(0, 0, 0, .03)",
|
|
itemOpacity: 1,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
tooltip={({ point }) => {
|
|
const series = data.find((serie) => serie.id === point.serieId);
|
|
return (
|
|
<div className="bg-white p-2 rounded-lg shadow-md text-sm border">
|
|
<strong>{series?.name}</strong>
|
|
<br />
|
|
{/* <strong>id:</strong> {point.data.xFormatted} */}
|
|
{/* <br /> */}
|
|
<strong>score:</strong> {point.data.yFormatted}
|
|
</div>
|
|
);
|
|
}}
|
|
theme={{
|
|
axis: {
|
|
legend: {
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
fill: "#4b5563",
|
|
},
|
|
},
|
|
ticks: {
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: 500,
|
|
fill: "#4b5563",
|
|
},
|
|
},
|
|
},
|
|
legends: {
|
|
text: {
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
fill: "#4b5563",
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
);
|