webif/graph/graph.svg

   1 <?xml-stylesheet type="text/css" href="site.css" ?>
   2 <svg
   3         xmlns='http://www.w3.org/2000/svg'
   4         width='100%'
   5         height='100%'
   6         viewBox='0 0 800 400'
   7         preserveAspectRatio='XMaxYMid'
   8         onload='init(evt)'
   9         class='graph' >
  10  <title>##HTTPOSCAMLABEL## r##CS_SVN_VERSION## (ECM Graph)</title>
  11  <g id='graph' >
  12         <rect id='g' class='graph_bg' x='0' y='0' width='800' height='400' />
  13         <text id='graph_error' class='graph_error' x='400' y='125' visibility='hidden'>Error occured!</text>
  14         <path id='graph_grid' class='graph_grid' d='M 2 125 L 798 125 M 2 200 L 798 200 M 2 275 L 798 275 M 2 350 L 798 350'/>
  15
  16         <rect id='graph_grid_button_back' class='graph_button' cursor='pointer' x='425' y='5' rx='5' ry='5' width='40' height='20'/>
  17         <text id='graph_grid_button_text' cursor='pointer' class='graph_top_txt' x='460' y='17'>Change</text>
  18         <text id='graph_grid_interval' class='graph_top_txt' x='420' y='17'>-</text>
  19         <rect id='graph_grid_button' style='opacity:0;' cursor='pointer' x='340' y='5' rx='5' ry='5' width='130' height='20'/>
  20
  21         <text id='graph_grid_txt1' class='graph_grid_txt' x='798' y='123'>-</text>
  22         <text id='graph_grid_txt2' class='graph_grid_txt' x='798' y='198'>-</text>
  23         <text id='graph_grid_txt3' class='graph_grid_txt' x='798' y='273'>-</text>
  24         <text id='graph_grid_txt4' class='graph_grid_txt' x='798' y='348'>-</text>
  25  </g>
  26 <script type='text/ecmascript'>
  27 <![CDATA[
  28 if (typeof getURL == 'undefined') {
  29         getURL = function(url, callback) {
  30                 try {
  31                         if (typeof callback.operationComplete == 'function') {
  32                                 callback = callback.operationComplete;
  33                         }
  34                 } catch (e) {}
  35                 if (typeof callback != 'function') {
  36                         throw 'No callback function for getURL';
  37                 }
  38                 var http_request = null;
  39                 if (typeof XMLHttpRequest != 'undefined') {
  40                         http_request = new XMLHttpRequest();
  41                 } else if (typeof ActiveXObject != 'undefined') {
  42                         try {
  43                                 http_request = new ActiveXObject('Msxml2.XMLHTTP');
  44                         } catch (e) {
  45                                 try {
  46                                         http_request = new ActiveXObject('Microsoft.XMLHTTP');
  47                                 } catch (e) {}
  48                         }
  49                 }
  50                 if (!http_request) {
  51                         throw 'Both getURL and XMLHttpRequest are undefined';
  52                 }
  53                 http_request.onreadystatechange = function() {
  54                         if (http_request.readyState == 4) {
  55                                 callback(
  56                                         {
  57                                                 success : true,
  58                                                 content : http_request.responseXML,
  59                                                 contentType : http_request.getResponseHeader('Content-Type')
  60                                         }
  61                                 );
  62                         }
  63                 }
  64                 http_request.open('GET', url, true);
  65                 http_request.send(null);
  66         }
  67 }
  68 var SVGDoc = null;
  69 var svgNS = 'http://www.w3.org/2000/svg';
  70 var max = 0;
  71 var plots = new Array();
  72 var Color = new Array('blue','green','orange','brown','fuchsia','red','cyan','yellow','purple','turquoise','coral','khaki','greenyellow','thistle','tan','silver','darkgreen','darkviolet','gold','indianred','black');
  73 var max_num_points = 799;
  74 var step = 799 / max_num_points ;
  75 var fetch_url='';
  76 var interval = 3500;
  77 var activesecs = 15;
  78 var activeTask = null;
  79 var hideLabels = false;
  80 function init(evt) {
  81         fetch_url=location.search.split('?');
  82         fetch_url='oscamapi.html?part=ecmhistory&' + fetch_url[fetch_url.length-1];
  83         if ( location.search.indexOf('hidelabels=1') > 0 ) hideLabels = true;
  84         SVGDoc = evt.target.ownerDocument;
  85         SVGDoc.getElementById('graph_grid_button').addEventListener('mousedown', switch_interval, false);
  86         SVGDoc.getElementById('graph_grid_button_text').addEventListener('mousedown', switch_interval, false);
  87         fetch_data();
  88         switch_interval();
  89 }
  90 function switch_interval() {
  91         if (interval<=1000) {
  92                 interval -= 250;
  93         } else if (interval<=5000) {
  94                 interval -= 500;
  95         } else {
  96                 interval -= 1000;
  97         }
  98         if ( interval<250 ) interval = 10000;
  99         SVGDoc.getElementById('graph_grid_interval').firstChild.data = 'Refresh: '+interval+'ms';
 100         window.clearInterval(activeTask);
 101         activeTask = setInterval('fetch_data()', interval);
 102 }
 103 function fetch_data() {
 104         if (fetch_url) {
 105                 getURL(fetch_url, plot_data);
 106         } else {
 107                 handle_error();
 108         }
 109 }
 110 function showlabel(evt) {
 111         var id = evt.target.id.split('_');
 112         var obj = SVGDoc.getElementById('graph_txt_'+id[2]);
 113         if ( evt.type=='mouseover' ) {
 114                         obj.setAttributeNS(null,'style','');
 115         } else if ( evt.type=='mouseout' ) {
 116                 obj.setAttributeNS(null,'style','display:none;');
 117         }
 118 }
 119 function plot_data(obj) {
 120         if (!obj.success) return handle_error();
 121         if (!obj.content) return handle_error();
 122         var readers = obj.content.getElementsByTagName('oscam')[0].getElementsByTagName('status')[0].getElementsByTagName('client');
 123         i=0;
 124         max=0;
 125         rdx=0;
 126         while (rdx < readers.length) {
 127                 if ( plots[i] == null ) {
 128                         plots[i] = new Array();
 129                         plots[i]['data'] = new Array();
 130                         plots[i]['ecmmin'] = -1;
 131                         plots[i]['ecmmax'] = 0;
 132                         plots[i]['last_fetched_timestamp'] = 0;
 133                         plots[i]['last_valid_ecm_duration'] = -1;
 134                 }
 135                 plots[i]['name'] = readers[rdx].getAttribute('name');
 136                 var ecmhistory = readers[rdx].getElementsByTagName('request')[0].getAttribute('ecmhistory').split(',');
 137                 var maxecm = -1;
 138                 for (var ii = ecmhistory.length-1; ii >= 0; ii--) {
 139                         var ecm = ecmhistory[ii].split(':');
 140                         if ( ecm[0]>-1 ) {
 141                                 if ( ecm[1]==0 ) {
 142                                         if ( parseInt( ecm[2] ) > plots[i]['last_fetched_timestamp'] ) {
 143                                                 if ( parseInt( ecm[0] ) > maxecm ) maxecm = parseInt( ecm[0] );
 144                                                 plots[i]['last_fetched_timestamp'] = parseInt( ecm[2] );
 145                                         }
 146                                 }
 147                         }
 148                 }
 149                 if ( maxecm == -1 ) {
 150                         maxecm = plots[i]['last_valid_ecm_duration'];
 151                 } else {
 152                         plots[i]['last_valid_ecm_duration'] = maxecm;
 153                 }
 154                 plots[i]['ecmtime'] = maxecm;
 155                 plots[i]['idletime'] = parseInt( readers[rdx].getElementsByTagName('times')[0].getAttribute('idle') );
 156                 if (!isNumber(plots[i]['ecmtime'])) {
 157                         plots[i]['ecmtime'] = -1;
 158                 } else {
 159                         if ( plots[i]['ecmmax'] < plots[i]['ecmtime'] ) plots[i]['ecmmax'] = plots[i]['ecmtime'] ;
 160                         if ( ( plots[i]['ecmmin'] > plots[i]['ecmtime']) || (plots[i]['ecmmin'] == -1 ) ) plots[i]['ecmmin'] = plots[i]['ecmtime'] ;
 161                 }
 162                 if (!isNumber(plots[i]['idletime'])) {
 163                         plots[i]['ecmtime'] = -1;
 164                 } else if (plots[i]['idletime']>activesecs) {
 165                         plots[i]['ecmtime'] = -1;
 166                 }
 167                 plots[i]['idle'] = readers[rdx].getElementsByTagName('times')[0].getAttribute('idle');
 168                 if ( plots[i]['data'].length==max_num_points ) {
 169                         var ii = 0;
 170                         while (ii < max_num_points) {
 171                                 plots[i]['data'][ii] = plots[i]['data'][ii+1];
 172                                 ii++;
 173                         }
 174                         plots[i]['data'].length--;
 175                 }
 176                 plots[i]['data'][plots[i]['data'].length] = plots[i]['ecmtime'];
 177                 if ( SVGDoc.getElementById('graph_txt_'+i) == null ) {
 178                         var newText = document.createElementNS(svgNS,'text');
 179                         newText.setAttributeNS(null,'x',3);
 180                         newText.setAttributeNS(null,'fill',Color[ i - (parseInt(i/Color.length)*Color.length)]);
 181                         newText.setAttributeNS(null,'id','graph_txt_'+i);
 182                         if ( hideLabels ) {
 183                                 newText.setAttributeNS(null,'y',13);
 184                                 newText.setAttributeNS(null,'style','display:none;');
 185                         } else {
 186                                 newText.setAttributeNS(null,'y',13+(10*i));
 187                         }
 188                         var textNode = document.createTextNode(plots[i]['name']);
 189                         newText.appendChild(textNode);
 190                         document.getElementById('graph').appendChild(newText);
 191                 }
 192                 if ( plots[i]['ecmtime']==-1 ) {                        SVGDoc.getElementById('graph_txt_'+i).firstChild.data = plots[i]['name'] + ':idle';
 193                 } else {                        SVGDoc.getElementById('graph_txt_'+i).firstChild.data = plots[i]['name'] + ':' + plots[i]['ecmtime'];
 194                 }               if ( plots[i]['ecmmin'] != -1 ) SVGDoc.getElementById('graph_txt_'+i).firstChild.data += ' (Max:'+plots[i]['ecmmax']+'/Min:'+plots[i]['ecmmin']+')';
 195                 if ( SVGDoc.getElementById('graph_path_'+i) == null ) {
 196                         var newPath = document.createElementNS(svgNS,'path');
 197                         newPath.setAttributeNS(null,'id','graph_path_'+i);
 198                         newPath.setAttributeNS(null,'class','graph_curve');
 199                         newPath.setAttributeNS(null,'stroke',Color[ i - (parseInt(i/Color.length)*Color.length)]);
 200                         if ( hideLabels ) {
 201                                 newPath.addEventListener('mouseover', showlabel, false);
 202                                 newPath.addEventListener('mouseout', showlabel, false);
 203                         }
 204                         document.getElementById('graph').appendChild(newPath);
 205                 }
 206                 a=0;
 207                 var plot = plots[i]['data'];
 208                 while (a < plot.length) {
 209                         if (plot[a] > max) max = plot[a];
 210                         a++;
 211                 }
 212                 i++;
 213                 rdx++;
 214         }
 215         var rmax=makeRoundMax(max);
 216         var height = 350;
 217         var scale = (height-50) / rmax;
 218         i=0;
 219         while (i < plots.length) {
 220                 var plot = plots[i]['data'];
 221                 var path = 'M 2 '+ (plot[0] > 0 ? Math.round((height - (plot[0] * scale))*10)/10 : height);
 222                 for (b = 3; b < plot.length; b++) {
 223                         var x = step * b;
 224                         var y_in = plot[b] > 0 ? Math.round((height - (plot[b] * scale))*10)/10 : height;
 225                         path += ' L' + x + ' ' + y_in;
 226                 }
 227                 SVGDoc.getElementById('graph_path_'+i).setAttributeNS(null, 'd', path);
 228                 i++;
 229         }
 230         SVGDoc.getElementById('graph_grid_txt1').firstChild.data = 3*rmax/4 + 'ms';
 231         SVGDoc.getElementById('graph_grid_txt2').firstChild.data = 2*rmax/4 + 'ms';
 232         SVGDoc.getElementById('graph_grid_txt3').firstChild.data = rmax/4 + 'ms';
 233         SVGDoc.getElementById('graph_grid_txt4').firstChild.data = '0ms';
 234         SVGDoc.getElementById('graph_error').setAttributeNS(null, 'visibility', 'hidden');
 235 }
 236 function makeRoundMax(max) {
 237                 rmax = 100;
 238                 i = 0;
 239                 while (max > rmax) {
 240                         i++;
 241                         if (i && (i % 4 == 0)) {
 242                                 rmax *= 1.25;
 243                         } else {
 244                                 rmax *= 2;
 245                         }
 246                 }
 247         return rmax;
 248 }
 249 function handle_error() {
 250         SVGDoc.getElementById('graph_error').setAttributeNS(null, 'visibility', 'visible');
 251 }
 252 function isNumber(a) {
 253         return typeof a == 'number' && isFinite(a);
 254 }
 255 ]]>
 256 </script>
 257 </svg>