github.com/perlchild/DBShield@v0.0.0-20170924200059-c888d9e40e13/assets/js/app.js (about)

     1  "use strict";
     2  // Graph Labels
     3  var names = ['Queries', 'Abnormal'];
     4  var groups = new vis.DataSet();
     5  
     6  //Initialize Groups
     7  groups.add({
     8    id: 0,
     9    content: names[0],
    10    options: {
    11      drawPoints: false,
    12      interpolation: false
    13    }
    14  });
    15  
    16  groups.add({
    17    id: 1,
    18    content: names[1],
    19    options: {
    20      drawPoints: false,
    21      interpolation: false
    22    }
    23  });
    24  
    25  // Chart id in Body
    26  var container = document.getElementById('visualization');
    27  var dataset = new vis.DataSet();
    28  
    29  //Option For Group
    30  var options = {
    31    dataAxis: {
    32      left: {
    33        range: {
    34          min: 0
    35        },
    36      },
    37      showMinorLabels: false
    38    },
    39    drawPoints: false,
    40    legend: true,
    41    start: vis.moment().add(-30, 'seconds'),
    42    end: vis.moment(),
    43  };
    44  
    45  
    46  var graph2d = new vis.Graph2d(container, dataset, groups, options);
    47  
    48  //Initilase Queries & Abnormal Values
    49  var yValuesOld = {
    50    Total: 0,
    51    Abnormal: 0
    52  }
    53  var yValues = {
    54    Total: 0,
    55    Abnormal: 0
    56  }
    57  
    58  //Return diff of last Two Queries
    59  function yQueries() {
    60    return yValues["Total"] - yValuesOld["Total"];
    61  }
    62  
    63  //Return diff of last Two Abnormals
    64  function yAbnormal() {
    65    return yValues["Abnormal"] - yValuesOld["Abnormal"];
    66  }
    67  
    68  function renderStep() {
    69    // move the window (you can think of different strategies).
    70    var now = vis.moment();
    71    var range = graph2d.getWindow();
    72    var interval = range.end - range.start;
    73  
    74    // move the window 90% to the left when now is larger than the end of the window
    75    if (now > range.end) {
    76      //graph2d.setWindow(now - interval, now, {animation: true});
    77      graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval, {
    78        animation: true
    79      });
    80    }
    81  }
    82  
    83  
    84  //Add datapoint to the graph
    85  function addDataPoint() {
    86    var now = vis.moment();
    87    dataset.add([{
    88      x: now,
    89      y: yQueries(),
    90      group: 0
    91    }, {
    92      x: now,
    93      y: yAbnormal(),
    94      group: 1
    95    }]);
    96    setTimeout(addDataPoint, 1000);
    97  }
    98  
    99  //Get Value from Api
   100  function ajax(init) {
   101    var xhttp = new XMLHttpRequest();
   102    xhttp.onreadystatechange = function() {
   103      if (this.readyState == 4 && this.status == 200) {
   104        yValuesOld = yValues;
   105        yValues = JSON.parse(this.responseText);
   106        if (init) {
   107          // To filter the first request
   108          yValuesOld = yValues;
   109        }
   110        renderStep()
   111      }
   112    };
   113    xhttp.onerror = function() {
   114      yValues = {
   115        Total: 0,
   116        Abnormal: 0
   117      }
   118    }
   119    xhttp.open("GET", '/api?_=' + new Date().getTime(), true);
   120    xhttp.send();
   121    setTimeout(function() {
   122      ajax(false)
   123    }, 1000);
   124  }
   125  
   126  addDataPoint();
   127  ajax(true);