From 4a71606d25d63e9208e8bc63e21ba2429ac1036b Mon Sep 17 00:00:00 2001 From: Patrice Buriez Date: Fri, 9 Nov 2018 11:29:36 +0100 Subject: Add JS file to NSB report template Moved function definitions into separate nsb_report.js file for ease of editing, while keeping generated HTML reports self-contained, for storage and publishing purposes. JIRA: YARDSTICK-1367 Topic: report/html_table (7 of 12) Change-Id: I3b3cf8aae8425b486a711a76f4bb2bf8d7fe5ab5 Signed-off-by: Emma Foley Signed-off-by: Patrice Buriez --- yardstick/common/nsb_report.html.j2 | 133 ++++---------------------------- yardstick/common/nsb_report.js | 146 ++++++++++++++++++++++++++++++++++++ 2 files changed, 159 insertions(+), 120 deletions(-) create mode 100644 yardstick/common/nsb_report.js diff --git a/yardstick/common/nsb_report.html.j2 b/yardstick/common/nsb_report.html.j2 index 0b4719b09..a3087d746 100644 --- a/yardstick/common/nsb_report.html.j2 +++ b/yardstick/common/nsb_report.html.j2 @@ -16,11 +16,16 @@ - + + @@ -47,94 +52,15 @@ diff --git a/yardstick/common/nsb_report.js b/yardstick/common/nsb_report.js new file mode 100644 index 000000000..cc5e14ee7 --- /dev/null +++ b/yardstick/common/nsb_report.js @@ -0,0 +1,146 @@ +/******************************************************************************* + * Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com> + * Copyright (c) 2018 Intel Corporation. + * + * All rights reserved. This program and the accompanying materials + * are made available under the terms of the Apache License, Version 2.0 + * which accompanies this distribution, and is available at + * http://www.apache.org/licenses/LICENSE-2.0 + ******************************************************************************/ + +var None = null; + +function create_tree(jstree_data) +{ + $('#data_selector').jstree({ + plugins: ['checkbox'], + checkbox: { + three_state: false, + whole_node: true, + tie_selection: false, + }, + core: { + themes: { + icons: false, + stripes: true, + }, + data: jstree_data, + }, + }); +} + +// may need to pass timestamps too... +function create_table(table_data) +{ + var tab, tr, td, tn, tbody, keys, key, curr_data, val; + // create table + tab = document.getElementsByTagName('table')[0]; + tbody = document.createElement('tbody'); + // for each metric + keys = Object.keys(table_data); + for (var i = 0; i < keys.length; i++) { + key = keys[i]; + tr = document.createElement('tr'); + td = document.createElement('td'); + tn = document.createTextNode(key); + td.appendChild(tn); + tr.appendChild(td); + // add each piece of data as its own column + curr_data = table_data[key]; + for (var j = 0; j < curr_data.length; j++) { + val = curr_data[j]; + td = document.createElement('td'); + tn = document.createTextNode(val === None ? '' : val); + td.appendChild(tn); + tr.appendChild(td); + } + tbody.appendChild(tr); + } + tab.appendChild(tbody); +} + +function create_graph(cnvGraph, timestamps) +{ + return new Chart(cnvGraph, { + type: 'line', + data: { + labels: timestamps, + datasets: [], + }, + options: { + elements: { + line: { + borderWidth: 2, + fill: false, + tension: 0, + }, + }, + scales: { + xAxes: [{ + type: 'category', + }], + yAxes: [{ + type: 'linear', + }], + }, + tooltips: { + mode: 'point', + intersect: true, + }, + hover: { + mode: 'index', + intersect: false, + animationDuration: 0, + }, + legend: { + position: 'bottom', + labels: { + usePointStyle: true, + }, + }, + animation: { + duration: 0, + }, + responsive: true, + responsiveAnimationDuration: 0, + maintainAspectRatio: false, + }, + }); +} + +function update_graph(objGraph, datasets) +{ + var colors = [ + '#FF0000', // Red + '#228B22', // ForestGreen + '#FF8C00', // DarkOrange + '#00008B', // DarkBlue + '#FF00FF', // Fuchsia + '#9ACD32', // YellowGreen + '#FFD700', // Gold + '#4169E1', // RoyalBlue + '#A0522D', // Sienna + '#20B2AA', // LightSeaGreen + '#8A2BE2', // BlueViolet + ]; + + var points = [ + {s: 'circle', r: 3}, + {s: 'rect', r: 4}, + {s: 'triangle', r: 4}, + {s: 'star', r: 4}, + {s: 'rectRot', r: 5}, + ]; + + datasets.forEach(function(d, i) { + var color = colors[i % colors.length]; + var point = points[i % points.length]; + d.borderColor = color; + d.backgroundColor = color; + d.pointStyle = point.s; + d.pointRadius = point.r; + d.pointHoverRadius = point.r + 1; + }); + objGraph.data.datasets = datasets; + objGraph.update(); +} -- cgit 1.2.3-korg