65 lines
1.8 KiB
JavaScript
65 lines
1.8 KiB
JavaScript
/* eslint-disable react/prop-types */
|
|
import ReactApexChart from 'react-apexcharts';
|
|
|
|
const PingChart = ({ data, theme }) => {
|
|
|
|
const isDark = theme === 'dark';
|
|
|
|
const chartData = {
|
|
series: [
|
|
{
|
|
name: 'Ping',
|
|
data: data.map((item) => ({
|
|
x: new Date(new Date(item.datetime).getTime() + 7 * 60 * 60 * 1000).getTime(),
|
|
y: (item.data.ping.latency).toFixed(1),
|
|
})),
|
|
},
|
|
],
|
|
options: {
|
|
chart: {
|
|
height: 250,
|
|
type: 'area',
|
|
background: isDark ? '#1e1e1e' : '#ffffff',
|
|
toolbar: { show: false },
|
|
},
|
|
dataLabels: { enabled: false },
|
|
stroke: {
|
|
curve: 'smooth',
|
|
colors: [ isDark ? '#ffc107' : '#d4a307'],
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
labels: { style: { fontFamily: 'Poppins, sans-serif', colors: isDark ? '#ffffff' : '#333333' } },
|
|
axisBorder: { color: isDark ? '#777777' : '#cccccc' },
|
|
axisTicks: { color: isDark ? '#777777' : '#cccccc' },
|
|
},
|
|
yaxis: {
|
|
labels: { style: { fontFamily: 'Poppins, sans-serif', colors: isDark ? '#ffffff' : '#333333' } },
|
|
},
|
|
grid: {
|
|
borderColor: isDark ? '#777777' : '#cccccc',
|
|
strokeDashArray: 4,
|
|
},
|
|
tooltip: {
|
|
theme: isDark ? 'dark' : 'light',
|
|
x: { format: 'dd/MM/yy HH:mm' },
|
|
y: { formatter: (val) => `${val} Mbps` },
|
|
},
|
|
colors: [ isDark ? '#ffc107' : '#d4a307'],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shade: isDark ? 'dark' : 'light',
|
|
type: 'vertical',
|
|
gradientToColors: [ isDark ? '#ffc107' : '#d4a307'],
|
|
stops: [0, 100],
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
return <ReactApexChart options={chartData.options} series={chartData.series} type="area" height={250} />;
|
|
};
|
|
|
|
export default PingChart;
|