146 lines
4.2 KiB
JavaScript
146 lines
4.2 KiB
JavaScript
const IPV4_EX = new RegExp("")
|
||
const regex = RegExp(/^((([0–9A-Fa-f]{1,4}:){7}[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){6}:[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){5}:([0–9A-Fa-f]{1,4}:)?[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){4}:([0–9A-Fa-f]{1,4}:){0,2}[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){3}:([0–9A-Fa-f]{1,4}:){0,3}[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){2}:([0–9A-Fa-f]{1,4}:){0,4}[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){6}((b((25[0–5])|(1d{2})|(2[0–4]d)|(d{1,2}))b).){3}(b((25[0–5])|(1d{2})|(2[0–4]d)|(d{1,2}))b))|(([0–9A-Fa-f]{1,4}:){0,5}:((b((25[0–5])|(1d{2})|(2[0–4]d)|(d{1,2}))b).){3}(b((25[0–5])|(1d{2})|(2[0–4]d)|(d{1,2}))b))|(::([0–9A-Fa-f]{1,4}:){0,5}((b((25[0–5])|(1d{2})|(2[0–4]d)|(d{1,2}))b).){3}(b((25[0–5])|(1d{2})|(2[0–4]d)|(d{1,2}))b))|([0–9A-Fa-f]{1,4}::([0–9A-Fa-f]{1,4}:){0,5}[0–9A-Fa-f]{1,4})|(::([0–9A-Fa-f]{1,4}:){0,6}[0–9A-Fa-f]{1,4})|(([0–9A-Fa-f]{1,4}:){1,7}:))$/)
|
||
|
||
var addresses = []
|
||
var date = []
|
||
var ipv4_v6 = [[], [] , []]
|
||
|
||
//colors object for different graphs
|
||
var chartColors = {
|
||
red: 'rgb(255, 99, 132)',
|
||
orange: 'rgb(255, 159, 64)',
|
||
yellow: 'rgb(255, 205, 86)',
|
||
green: 'rgb(75, 192, 192)',
|
||
blue: 'rgb(54, 162, 235)',
|
||
purple: 'rgb(153, 102, 255)',
|
||
grey: 'rgb(231,233,237)'
|
||
};
|
||
|
||
//test function for ip addresses
|
||
function Ip4OrIp6(ipAddress){
|
||
if(ipAddress.length == 39){
|
||
return 1;
|
||
}else{
|
||
return -1;
|
||
}
|
||
}
|
||
|
||
var randomScalingFactor = function() {
|
||
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
||
}
|
||
|
||
// Refactor getStudents and getScores to return Promise for their response bodies
|
||
function getData(){
|
||
return fetch(`address.json`, {
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json',
|
||
}
|
||
}).then((response) => response.json())
|
||
};
|
||
|
||
getData().then((data)=>{
|
||
//pushing the dates
|
||
data[0].forEach(element => {
|
||
date.push(element.date)
|
||
|
||
// Ip4OrIp6(element.ip);
|
||
});
|
||
data.forEach((element ,i) =>{
|
||
element.map((e) =>{
|
||
ipv4_v6[i].push(Ip4OrIp6(e.ip));
|
||
})
|
||
})
|
||
|
||
// data[1].forEach(element =>{
|
||
// ipv4_v6[1].push(Ip4OrIp6(element.ip))
|
||
// })
|
||
// data[2].forEach(element =>{
|
||
// ipv4_v6[2].push(Ip4OrIp6(element.ip))
|
||
// })
|
||
|
||
// console.log(date);
|
||
// console.log(ipv4_v6);
|
||
|
||
date.sort((a, b)=>{
|
||
return new Date(a) - new Date(b)
|
||
})
|
||
|
||
|
||
|
||
var ctx = document.getElementById("myChart").getContext('2d');
|
||
var chart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels:date,
|
||
datasets: [
|
||
{
|
||
label: "My First dataset",
|
||
// backgroundColor: chartColors.red,
|
||
borderColor: chartColors.red,
|
||
data:ipv4_v6[0],
|
||
fill: false,
|
||
}, {
|
||
label: "My Second dataset",
|
||
fill: false,
|
||
// backgroundColor: chartColors.blue,
|
||
borderColor: chartColors.blue,
|
||
data:ipv4_v6[1],
|
||
},
|
||
{
|
||
label: "My Second dataset",
|
||
fill: false,
|
||
// backgroundColor: chartColors.orange,
|
||
borderColor: chartColors.orange,
|
||
data: ipv4_v6[2],
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
legend: { display: false },
|
||
title: {
|
||
display: true,
|
||
text: 'Statistics for IPV4 and IPV6'
|
||
},
|
||
scales: {
|
||
xAxes: [{
|
||
display: true,
|
||
gridLines: {
|
||
display: false ,
|
||
color: "blue"
|
||
},
|
||
scaleLabel: {
|
||
display: true,
|
||
labelString: 'Time',
|
||
|
||
}
|
||
}],
|
||
yAxes: [{
|
||
display: true,
|
||
gridLines: {
|
||
display: false ,
|
||
color: "blue"
|
||
},
|
||
scaleLabel: {
|
||
display: true,
|
||
labelString: 'Ipv4 or Ipv6',
|
||
|
||
}
|
||
}]
|
||
}
|
||
} }
|
||
)});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|