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(divTree, jstree_data)
  14 {
  15     divTree.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(tblMetrics, table_data, timestamps, table_keys)
  33 {
  34     var tbody = $('<tbody></tbody>');
  35     var tr0 = $('<tr></tr>');
  36     var th0 = $('<th></th>');
  37     var td0 = $('<td></td>');
  38     var tr;
  39
  40     // create table headings using timestamps
  41     tr = tr0.clone().append(th0.clone().text('Timestamp'));
  42     timestamps.forEach(function(t) {
  43         tr.append(th0.clone().text(t));
  44     });
  45     tbody.append(tr);
  46
  47     // for each metric
  48     table_keys.forEach(function(key) {
  49         tr = tr0.clone().append(td0.clone().text(key));
  50         // add each piece of data as its own column
  51         table_data[key].forEach(function(val) {
  52             tr.append(td0.clone().text(val === None ? '' : val));
  53         });
  54         tbody.append(tr);
  55     });
  56
  57     // re-create table
  58     tblMetrics.empty().append(tbody);
  59 }
  60
  61 function create_graph(cnvGraph, timestamps)
  62 {
  63     return new Chart(cnvGraph, {
  64         type: 'line',
  65         data: {
  66             labels: timestamps,
  67             datasets: [],
  68         },
  69         options: {
  70             elements: {
  71                 line: {
  72                     borderWidth: 2,
  73                     fill: false,
  74                     tension: 0,
  75                 },
  76             },
  77             scales: {
  78                 xAxes: [{
  79                     type: 'category',
  80                 }],
  81                 yAxes: [{
  82                     type: 'linear',
  83                 }],
  84             },
  85             tooltips: {
  86                 mode: 'point',
  87                 intersect: true,
  88             },
  89             hover: {
  90                 mode: 'index',
  91                 intersect: false,
  92                 animationDuration: 0,
  93             },
  94             legend: {
  95                 position: 'bottom',
  96                 labels: {
  97                     usePointStyle: true,
  98                 },
  99             },
 100             animation: {
 101                 duration: 0,
 102             },
 103             responsive: true,
 104             responsiveAnimationDuration: 0,
 105             maintainAspectRatio: false,
 106         },
 107     });
 108 }
 109
 110 function update_graph(objGraph, datasets)
 111 {
 112     var colors = [
 113         '#FF0000',  // Red
 114         '#228B22',  // ForestGreen
 115         '#FF8C00',  // DarkOrange
 116         '#00008B',  // DarkBlue
 117         '#FF00FF',  // Fuchsia
 118         '#9ACD32',  // YellowGreen
 119         '#FFD700',  // Gold
 120         '#4169E1',  // RoyalBlue
 121         '#A0522D',  // Sienna
 122         '#20B2AA',  // LightSeaGreen
 123         '#8A2BE2',  // BlueViolet
 124     ];
 125
 126     var points = [
 127         {s: 'circle',   r: 3},
 128         {s: 'rect',     r: 4},
 129         {s: 'triangle', r: 4},
 130         {s: 'star',     r: 4},
 131         {s: 'rectRot',  r: 5},
 132     ];
 133
 134     datasets.forEach(function(d, i) {
 135         var color = colors[i % colors.length];
 136         var point = points[i % points.length];
 137         d.borderColor = color;
 138         d.backgroundColor = color;
 139         d.pointStyle = point.s;
 140         d.pointRadius = point.r;
 141         d.pointHoverRadius = point.r + 1;
 142     });
 143     objGraph.data.datasets = datasets;
 144     objGraph.update();
 145 }
 146
 147 function handle_tree(divTree, tblMetrics, objGraph, table_data, timestamps)
 148 {
 149     divTree.on('check_node.jstree uncheck_node.jstree', function(e, data) {
 150         var selected_keys = [];
 151         var selected_datasets = [];
 152         data.selected.forEach(function(sel) {
 153             var node = data.instance.get_node(sel);
 154             if (node.children.length == 0) {
 155                 selected_keys.push(node.id);
 156                 selected_datasets.push({
 157                     label: node.id,
 158                     data: table_data[node.id],
 159                 });
 160             }
 161         });
 162         create_table(tblMetrics, table_data, timestamps, selected_keys);
 163         update_graph(objGraph, selected_datasets);
 164     });
 165 }