From eaf8822510b5b87599133e51584c5d3efb416fb8 Mon Sep 17 00:00:00 2001
From: Redaloukil <loukil.red@gmail.com>
Date: Tue, 1 Jan 2019 16:25:00 +0100
Subject: [PATCH] add new ip array

---
 app.js          | 62 ++++++++++++++++++++++++++++---------------------
 style/style.css |  3 ++-
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/app.js b/app.js
index c49ea4f..c2482d7 100644
--- a/app.js
+++ b/app.js
@@ -3,7 +3,7 @@ const regex = RegExp(/^((([0–9A-Fa-f]{1,4}:){7}[0–9A-Fa-f]{1,4})|(([0–9A-F
 
 var addresses = []
 var date = []
-var ipv4_v6 = []
+var ipv4_v6 = [[], [] , []]
 
 //colors object for different graphs
 var chartColors = {
@@ -19,12 +19,15 @@ var chartColors = {
 //test function for ip addresses 
 function Ip4OrIp6(ipAddress){
     if(ipAddress.length == 39){
-        ipv4_v6.push(1);
+        return 1;
     }else{
-        ipv4_v6.push(-1);
+        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(){
@@ -37,10 +40,24 @@ function getData(){
 };
 
 getData().then((data)=>{
-    data.forEach(element => {
-         date.push(element.date);
+    //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);
@@ -55,36 +72,27 @@ getData().then((data)=>{
     var chart = new Chart(ctx, {
         type: 'line',
         data: {
-            labels:date ,
+            labels:date,
             datasets: [
                 {
                     label: "My First dataset",
-                    backgroundColor: chartColors.red,
+                    // backgroundColor: chartColors.red,
                     borderColor: chartColors.red,
-                    data: [
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor()
-                    ],
+                    data:ipv4_v6[0],
                     fill: false,
                   }, {
                     label: "My Second dataset",
                     fill: false,
-                    backgroundColor: chartColors.blue,
+                    // backgroundColor: chartColors.blue,
                     borderColor: chartColors.blue,
-                    data: [
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor(),
-                      randomScalingFactor()
-                    ],
+                    data:ipv4_v6[1],
+                  },
+                  {
+                    label: "My Second dataset",
+                    fill: false,
+                    // backgroundColor: chartColors.orange,
+                    borderColor: chartColors.orange,
+                    data: ipv4_v6[2],
                   }
             ]
         },
diff --git a/style/style.css b/style/style.css
index 8c9564c..62be1b5 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,3 +1,4 @@
 #myChart {
-    height: 85vh!important;
+    margin:10% 0;
+    height: 60vh!important;
 }
\ No newline at end of file