59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
|
import { LineChart, XAxis, YAxis, Line, Tooltip, Legend } from "recharts";
|
||
|
|
import { timeFormat } from "d3-time-format";
|
||
|
|
|
||
|
|
export default function Chart({ data, color, unit }) {
|
||
|
|
const CustomizedTooltip = (props) => {
|
||
|
|
const { active, payload } = props;
|
||
|
|
if (active && payload && payload[0]) {
|
||
|
|
const time = payload[0].payload
|
||
|
|
? timeFormat("%I:%M")(new Date(payload[0].payload.time), {
|
||
|
|
nearestTo: 1,
|
||
|
|
})
|
||
|
|
: "";
|
||
|
|
return (
|
||
|
|
<div className="custom-tooltip">
|
||
|
|
<p className="label">
|
||
|
|
<strong>{time}</strong> {payload[0].payload.value} %
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
};
|
||
|
|
|
||
|
|
const timeFormatter = (tick) => {
|
||
|
|
return timeFormat("%I:%M")(new Date(tick), {
|
||
|
|
nearestTo: 1,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<LineChart width={1200} height={400} data={data}>
|
||
|
|
<XAxis
|
||
|
|
dataKey="time"
|
||
|
|
// type="number"
|
||
|
|
tickFormatter={timeFormatter}
|
||
|
|
interval="preserveStartEnd"
|
||
|
|
tickCount={5}
|
||
|
|
minTickGap={15}
|
||
|
|
domain={["dataMin", "dataMax"]}
|
||
|
|
/>
|
||
|
|
<YAxis
|
||
|
|
dataKey="value"
|
||
|
|
interval="preserveStartEnd"
|
||
|
|
unit={unit}
|
||
|
|
domain={["dataMin", "dataMax"]}
|
||
|
|
/>
|
||
|
|
<Tooltip content={<CustomizedTooltip />} />
|
||
|
|
<Legend />
|
||
|
|
<Line
|
||
|
|
type="monotone"
|
||
|
|
dataKey="value"
|
||
|
|
stroke={color}
|
||
|
|
dot={null}
|
||
|
|
strokeWidth={3}
|
||
|
|
/>
|
||
|
|
</LineChart>
|
||
|
|
);
|
||
|
|
}
|
