29 lines
1.1 KiB
JavaScript
29 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import { ScatterChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Scatter, ResponsiveContainer } from 'recharts';
|
|
|
|
const ScatterChartComponent = ({ chartData, metricName, metricType, colors }) => {
|
|
return (
|
|
<div>
|
|
<h2>{metricName} ({metricType})</h2>
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<ScatterChart>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey="time" />
|
|
<YAxis dataKey="value" />
|
|
<Tooltip />
|
|
<Legend />
|
|
{Object.keys(chartData).map((instance, index) => (
|
|
<Scatter
|
|
key={instance}
|
|
data={chartData[instance]}
|
|
name={instance}
|
|
fill={colors[index % colors.length]}
|
|
/>
|
|
))}
|
|
</ScatterChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScatterChartComponent; |