yardstick/common/nsb_report.js

   1 /*******************************************************************************
   2  * Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com>
   3  * Copyright (c) 2018 Intel Corporation.
   4  *
   5  * All rights reserved. This program and the accompanying materials
   6  * are made available under the terms of the Apache License, Version 2.0
   7  * which accompanies this distribution, and is available at
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  ******************************************************************************/
  10
  11 var None = null;
  12
  13 function create_tree(jstree_data)
  14 {
  15     $('#data_selector').jstree({
  16         plugins: ['checkbox'],
  17         checkbox: {
  18             three_state: false,
  19             whole_node: true,
  20             tie_selection: false,
  21         },
  22         core: {
  23             themes: {
  24                 icons: false,
  25                 stripes: true,
  26             },
  27             data: jstree_data,
  28         },
  29     });
  30 }
  31
  32 function create_table(table_data, timestamps)
  33 {
  34     var tab, tr, td, tn, tbody, keys, key, curr_data, val;
  35     // create table
  36     tab = document.getElementsByTagName('table')[0];
  37     tbody = document.createElement('tbody');
  38     // create table headings using timestamps
  39     tr = document.createElement('tr');
  40     td = document.createElement('td');
  41     tn = document.createTextNode('Timestamps');
  42     td.appendChild(tn);
  43     tr.appendChild(td);
  44     for (var k = 0; k < timestamps.length; k++) {
  45         td = document.createElement('td');
  46         tn = document.createTextNode(timestamps[k]);
  47         td.appendChild(tn);
  48         tr.appendChild(td);
  49     }
  50     tbody.appendChild(tr);
  51     // for each metric
  52     keys = Object.keys(table_data);
  53     for (var i = 0; i < keys.length; i++) {
  54         key = keys[i];
  55         tr = document.createElement('tr');
  56         td = document.createElement('td');
  57         tn = document.createTextNode(key);
  58         td.appendChild(tn);
  59         tr.appendChild(td);
  60         // add each piece of data as its own column
  61         curr_data = table_data[key];
  62         for (var j = 0; j < curr_data.length; j++) {
  63             val = curr_data[j];
  64             td = document.createElement('td');
  65             tn = document.createTextNode(val === None ? '' : val);
  66             td.appendChild(tn);
  67             tr.appendChild(td);
  68         }
  69         tbody.appendChild(tr);
  70     }
  71     tab.appendChild(tbody);
  72 }
  73
  74 function deleteRows()
  75 {
  76     // delete rows of the table
  77     var tab = document.getElementsByTagName('table')[0];
  78     for (var i = tab.rows.length - 1; i >= 0; i--) {
  79         tab.deleteRow(i);
  80     }
  81 }
  82
  83 function create_graph(cnvGraph, timestamps)
  84 {
  85     return new Chart(cnvGraph, {
  86         type: 'line',
  87         data: {
  88             labels: timestamps,
  89             datasets: [],
  90         },
  91         options: {
  92             elements: {
  93                 line: {
  94                     borderWidth: 2,
  95                     fill: false,
  96                     tension: 0,
  97                 },
  98             },
  99             scales: {
 100                 xAxes: [{
 101                     type: 'category',
 102                 }],
 103                 yAxes: [{
 104                     type: 'linear',
 105                 }],
 106             },
 107             tooltips: {
 108                 mode: 'point',
 109                 intersect: true,
 110             },
 111             hover: {
 112                 mode: 'index',
 113                 intersect: false,
 114                 animationDuration: 0,
 115             },
 116             legend: {
 117                 position: 'bottom',
 118                 labels: {
 119                     usePointStyle: true,
 120                 },
 121             },
 122             animation: {
 123                 duration: 0,
 124             },
 125             responsive: true,
 126             responsiveAnimationDuration: 0,
 127             maintainAspectRatio: false,
 128         },
 129     });
 130 }
 131
 132 function update_graph(objGraph, datasets)
 133 {
 134     var colors = [
 135         '#FF0000',  // Red
 136         '#228B22',  // ForestGreen
 137         '#FF8C00',  // DarkOrange
 138         '#00008B',  // DarkBlue
 139         '#FF00FF',  // Fuchsia
 140         '#9ACD32',  // YellowGreen
 141         '#FFD700',  // Gold
 142         '#4169E1',  // RoyalBlue
 143         '#A0522D',  // Sienna
 144         '#20B2AA',  // LightSeaGreen
 145         '#8A2BE2',  // BlueViolet
 146     ];
 147
 148     var points = [
 149         {s: 'circle',   r: 3},
 150         {s: 'rect',     r: 4},
 151         {s: 'triangle', r: 4},
 152         {s: 'star',     r: 4},
 153         {s: 'rectRot',  r: 5},
 154     ];
 155
 156     datasets.forEach(function(d, i) {
 157         var color = colors[i % colors.length];
 158         var point = points[i % points.length];
 159         d.borderColor = color;
 160         d.backgroundColor = color;
 161         d.pointStyle = point.s;
 162         d.pointRadius = point.r;
 163         d.pointHoverRadius = point.r + 1;
 164     });
 165     objGraph.data.datasets = datasets;
 166     objGraph.update();
 167 }