68 lines
2.2 KiB
JavaScript
68 lines
2.2 KiB
JavaScript
import React from 'react';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
|
|
const LineChartComponent = ({
|
|
data,
|
|
title,
|
|
description,
|
|
metaInfo,
|
|
dataKey = 'value',
|
|
lineColor = '#8884d8',
|
|
height = 400,
|
|
showLegend = true,
|
|
showGrid = true,
|
|
customTooltip,
|
|
customXAxisFormatter,
|
|
customYAxis,
|
|
additionalLines = []
|
|
}) => {
|
|
return (
|
|
<div style={{ width: '100%', height: `${height}px` }}>
|
|
{title && <h3>{title}</h3>}
|
|
{description && (
|
|
<p style={{ marginTop: -10, color: '#666' }}>{description}</p>
|
|
)}
|
|
{metaInfo && (
|
|
<div style={{ fontSize: 12, color: '#888', marginBottom: 10 }}>
|
|
{metaInfo}
|
|
</div>
|
|
)}
|
|
|
|
<ResponsiveContainer width="100%" height="80%">
|
|
<LineChart
|
|
data={data}
|
|
margin={{
|
|
top: 5,
|
|
right: 30,
|
|
left: 20,
|
|
bottom: 5,
|
|
}}
|
|
>
|
|
{showGrid && <CartesianGrid strokeDasharray="3 3" />}
|
|
<XAxis
|
|
dataKey="timestamp"
|
|
tickFormatter={customXAxisFormatter || ((timestamp) => new Date(timestamp).toLocaleTimeString())}
|
|
/>
|
|
{customYAxis || <YAxis />}
|
|
<Tooltip
|
|
content={customTooltip}
|
|
labelFormatter={(timestamp) => new Date(timestamp).toLocaleString()}
|
|
/>
|
|
{showLegend && <Legend />}
|
|
<Line
|
|
type="monotone"
|
|
dataKey={dataKey}
|
|
stroke={lineColor}
|
|
activeDot={{ r: 8 }}
|
|
name={title}
|
|
/>
|
|
{additionalLines.map((lineProps, index) => (
|
|
<Line key={index} {...lineProps} />
|
|
))}
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LineChartComponent; |