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 // may need to pass timestamps too...
  33 function create_table(table_data)
  34 {
  35     var tab, tr, td, tn, tbody, keys, key, curr_data, val;
  36     // create table
  37     tab = document.getElementsByTagName('table')[0];
  38     tbody = document.createElement('tbody');
  39     // for each metric
  40     keys = Object.keys(table_data);
  41     for (var i = 0; i < keys.length; i++) {
  42         key = keys[i];
  43         tr = document.createElement('tr');
  44         td = document.createElement('td');
  45         tn = document.createTextNode(key);
  46         td.appendChild(tn);
  47         tr.appendChild(td);
  48         // add each piece of data as its own column
  49         curr_data = table_data[key];
  50         for (var j = 0; j < curr_data.length; j++) {
  51             val = curr_data[j];
  52             td = document.createElement('td');
  53             tn = document.createTextNode(val === None ? '' : val);
  54             td.appendChild(tn);
  55             tr.appendChild(td);
  56         }
  57         tbody.appendChild(tr);
  58     }
  59     tab.appendChild(tbody);
  60 }
  61
  62 function create_graph(cnvGraph, timestamps)
  63 {
  64     return new Chart(cnvGraph, {
  65         type: 'line',
  66         data: {
  67             labels: timestamps,
  68             datasets: [],
  69         },
  70         options: {
  71             elements: {
  72                 line: {
  73                     borderWidth: 2,
  74                     fill: false,
  75                     tension: 0,
  76                 },
  77             },
  78             scales: {
  79                 xAxes: [{
  80                     type: 'category',
  81                 }],
  82                 yAxes: [{
  83                     type: 'linear',
  84                 }],
  85             },
  86             tooltips: {
  87                 mode: 'point',
  88                 intersect: true,
  89             },
  90             hover: {
  91                 mode: 'index',
  92                 intersect: false,
  93                 animationDuration: 0,
  94             },
  95             legend: {
  96                 position: 'bottom',
  97                 labels: {
  98                     usePointStyle: true,
  99                 },
 100             },
 101             animation: {
 102                 duration: 0,
 103             },
 104             responsive: true,
 105             responsiveAnimationDuration: 0,
 106             maintainAspectRatio: false,
 107         },
 108     });
 109 }
 110
 111 function update_graph(objGraph, datasets)
 112 {
 113     var colors = [
 114         '#FF0000',  // Red
 115         '#228B22',  // ForestGreen
 116         '#FF8C00',  // DarkOrange
 117         '#00008B',  // DarkBlue
 118         '#FF00FF',  // Fuchsia
 119         '#9ACD32',  // YellowGreen
 120         '#FFD700',  // Gold
 121         '#4169E1',  // RoyalBlue
 122         '#A0522D',  // Sienna
 123         '#20B2AA',  // LightSeaGreen
 124         '#8A2BE2',  // BlueViolet
 125     ];
 126
 127     var points = [
 128         {s: 'circle',   r: 3},
 129         {s: 'rect',     r: 4},
 130         {s: 'triangle', r: 4},
 131         {s: 'star',     r: 4},
 132         {s: 'rectRot',  r: 5},
 133     ];
 134
 135     datasets.forEach(function(d, i) {
 136         var color = colors[i % colors.length];
 137         var point = points[i % points.length];
 138         d.borderColor = color;
 139         d.backgroundColor = color;
 140         d.pointStyle = point.s;
 141         d.pointRadius = point.r;
 142         d.pointHoverRadius = point.r + 1;
 143     });
 144     objGraph.data.datasets = datasets;
 145     objGraph.update();
 146 }