<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/themes/default/style.min.css">
- <link rel="stylesheet" href="{{template_dir}}/nsb_report.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.7/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
+ <style>
+ {% include 'nsb_report.css' %}
+ </style>
+ <script>
+ {% include 'nsb_report.js' %}
+ </script>
</head>
<body>
</div>
<script>
- var None = null;
- var arr, tab, tr, td, tbody, keys, key, curr_data, val;
+ var arr, jstree_data, timestamps;
arr = {{table|safe}};
-
- tab = document.getElementsByTagName('table')[0];
- tbody = document.createElement('tbody');
- keys = Object.keys(arr);
- // for each metric
- for (var i = 0; i < keys.length; i++) {
- tr = document.createElement('tr');
- td = document.createElement('td');
- key = keys[i];
- td.append(key);
- tr.append(td);
- curr_data = arr[key];
- // add each piece of data as its own column
- for (var j = 0; j < curr_data.length; j++) {
- val = curr_data[j];
- td = document.createElement('td');
- td.append(val === None ? '' : val);
- tr.append(td);
- }
- tbody.append(tr);
- }
- tab.appendChild(tbody);
+ timestamps = {{Timestamps|safe}};
+ jstree_data = {{jstree_nodes|safe}};
$(function() {
- $('#data_selector').jstree({
- plugins: ['checkbox'],
- checkbox: {
- three_state: false,
- whole_node: true,
- tie_selection: false,
- },
- core: {
- themes: {
- icons: false,
- stripes: true,
- },
- data: {{jstree_nodes|safe}},
- },
- });
-
- var objGraph = new Chart($('#cnvGraph'), {
- type: 'line',
- data: {
- labels: {{Timestamps|safe}},
- 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,
- },
- });
+ create_table(arr);
+ create_tree(jstree_data);
+ var objGraph = create_graph($('#cnvGraph'), timestamps);
$('#data_selector').on('check_node.jstree uncheck_node.jstree', function(e, data) {
var selected_datasets = [];
selected_datasets.push(dataset);
}
}
-
- 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},
- ];
-
- selected_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 = selected_datasets;
- objGraph.update();
+ update_graph(objGraph, selected_datasets);
});
});
</script>
--- /dev/null
+/*******************************************************************************
+ * 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();
+}
Code Review / yardstick.git / commitdiff