61 lines
1.5 KiB
JavaScript
61 lines
1.5 KiB
JavaScript
import ReactApexChart from 'react-apexcharts';
|
|
|
|
const UploadChart = ({ data }) => {
|
|
const chartData = {
|
|
series: [
|
|
{
|
|
name: 'Bandwidth Speed',
|
|
data: data.map((item) => ({
|
|
x: new Date(new Date(item.datetime).getTime() + 7 * 60 * 60 * 1000).getTime(),
|
|
y: parseFloat((item.data.upload.bandwidth/1000000).toFixed(2)),
|
|
})),
|
|
},
|
|
],
|
|
options: {
|
|
chart: {
|
|
height: 250,
|
|
type: 'area',
|
|
background: '#ececec',
|
|
toolbar: { show: false },
|
|
},
|
|
dataLabels: { enabled: false },
|
|
stroke: {
|
|
curve: 'smooth',
|
|
colors: ['#00bcd4'],
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: { style: { fontFamily: 'Poppins, sans-serif' } },
|
|
axisBorder: { color: '#555555' },
|
|
axisTicks: { color: '#555555' },
|
|
},
|
|
yaxis: {
|
|
labels: { style: { fontFamily: 'Poppins, sans-serif' } },
|
|
},
|
|
grid: {
|
|
borderColor: '#555555',
|
|
strokeDashArray: 4,
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
x: { format: 'dd/MM/yy HH:mm' },
|
|
y: { formatter: (val) => `${val} Mbps` },
|
|
},
|
|
colors: ['#00bcd4'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: 'dark',
|
|
type: 'vertical',
|
|
gradientToColors: ['#007bff'],
|
|
stops: [0, 100],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return <ReactApexChart options={chartData.options} series={chartData.series} type="area" height={250} />;
|
|
};
|
|
|
|
export default UploadChart;
|