You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
45 lines
1.2 KiB
import React from "react";
|
|
import {
|
|
ResponsiveContainer,
|
|
LineChart as LC,
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
Legend,
|
|
Line,
|
|
} from "recharts";
|
|
import { ChartProps } from "../types";
|
|
|
|
export default function LineChart(props: ChartProps) {
|
|
return (
|
|
<ResponsiveContainer height={300}>
|
|
<LC
|
|
width={600}
|
|
height={300}
|
|
data={props.data.map((d) => {
|
|
return {
|
|
name: d.name,
|
|
...d.values,
|
|
};
|
|
})}
|
|
>
|
|
{Object.keys(props.data[0].values).map((k, i) => (
|
|
<Line
|
|
type="monotone"
|
|
key={i}
|
|
dataKey={k}
|
|
stroke="#8884d8"
|
|
name={k}
|
|
dot={false}
|
|
/>
|
|
))}
|
|
<CartesianGrid stroke="#ccc" />
|
|
<XAxis dataKey="name" />
|
|
<YAxis scale={props.scale ?? "auto"} />
|
|
<Tooltip />
|
|
<Legend verticalAlign="top" />
|
|
</LC>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|