5 Copyright (c) 2017 Rajesh Kudaka <4k.rajesh@gmail.com>
6 Copyright (c) 2018 Intel Corporation.
8 All rights reserved. This program and the accompanying materials
9 are made available under the terms of the Apache License, Version 2.0
10 which accompanies this distribution, and is available at
11 http://www.apache.org/licenses/LICENSE-2.0
15 <meta charset="utf-8">
16 <meta name="viewport" content="width=device-width, initial-scale=1">
17 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
18 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
19 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
20 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
29 font-family: Frutiger, "Helvetica Neue", Helvetica, Arial, sans-serif;
37 <header class="jumbotron text-center">
38 <h1>Yardstick User Interface</h1>
39 <h4>Report of {{task_id}} Generated</h4>
42 <div class="container">
44 <div class="col-md-4">
45 <div class="table-responsive">
46 <table class="table table-hover"></table>
49 <div class="col-md-8">
50 <canvas id="cnvGraph" style="width: 100%; height: 500px"></canvas>
57 var arr, tab, th, tr, td, tn, row, col, thead, tbody, val;
59 tab = document.getElementsByTagName('table')[0];
61 thead = document.createElement('thead');
62 tr = document.createElement('tr');
63 for (col = 0; col < Object.keys(arr).length; col++) {
64 th = document.createElement('th');
65 tn = document.createTextNode(Object.keys(arr).sort()[col]);
69 thead.appendChild(tr);
70 tab.appendChild(thead);
72 tbody = document.createElement('tbody');
73 for (row = 0; row < arr[Object.keys(arr)[0]].length; row++) {
74 tr = document.createElement('tr');
75 for (col = 0; col < Object.keys(arr).length; col++) {
76 val = arr[Object.keys(arr).sort()[col]][row];
77 td = document.createElement('td');
78 tn = document.createTextNode(val === None ? '' : val);
82 tbody.appendChild(tr);
84 tab.appendChild(tbody);
87 var datasets = {{datasets|safe}};
91 '#228B22', // ForestGreen
92 '#FF8C00', // DarkOrange
93 '#00008B', // DarkBlue
95 '#9ACD32', // YellowGreen
97 '#4169E1', // RoyalBlue
99 '#20B2AA', // LightSeaGreen
100 '#8A2BE2', // BlueViolet
106 {s: 'triangle', r: 4},
108 {s: 'rectRot', r: 5},
111 datasets.forEach(function(d, i) {
112 var color = colors[i % colors.length];
113 var point = points[i % points.length];
114 d.borderColor = color;
115 d.backgroundColor = color;
116 d.pointStyle = point.s;
117 d.pointRadius = point.r;
118 d.pointHoverRadius = point.r + 1;
121 new Chart($('#cnvGraph'), {
124 labels: {{Timestamps|safe}},
137 'Yardstick test results',
138 'Report of {{task_id}} Task Generated',
147 labelString: 'Timestamp',
154 labelString: 'Values',
165 animationDuration: 0,
177 responsiveAnimationDuration: 0,
178 maintainAspectRatio: false,