Monitoring-Speed-App/src/components/dashboard/ChartData.jsx
2025-02-14 23:48:37 +07:00

51 lines
1.6 KiB
JavaScript

/* eslint-disable react/prop-types */
import { Card, Row, Col } from 'react-bootstrap';
import DownloadChart from '../charts/DownloadChart';
import UploadChart from '../charts/UploadChart';
import PingChart from '../charts/PingChart';
import { FaDownload, FaUpload, FaTachometerAlt } from 'react-icons/fa';
const Chart = ({ data, theme }) => {
return (
<>
<Row>
<Col md="4">
<Card className="mb-4 shadow-sm">
<Card.Body>
<Card.Title>
<FaDownload style={{ marginRight: '10px', color: '#28a745'}} />
Download
</Card.Title>
<DownloadChart theme={theme} data={data} title="Download Speed" type="download" />
</Card.Body>
</Card>
</Col>
<Col md="4">
<Card className="mb-4 shadow-sm">
<Card.Body>
<Card.Title>
<FaUpload style={{ marginRight: '10px', width: '15px', color: '#00bcd4' }} />
Upload
</Card.Title>
<UploadChart theme={theme} data={data} title="Upload Speed" type="upload" />
</Card.Body>
</Card>
</Col>
<Col md="4">
<Card className="mb-4 shadow-sm">
<Card.Body>
<Card.Title>
<FaTachometerAlt style={{ marginRight: '10px', width: '15px', color: '#ffc107' }} />
Ping
</Card.Title>
<PingChart theme={theme} data={data} title="Ping" type="ping" />
</Card.Body>
</Card>
</Col>
</Row>
</>
);
};
export default Chart;