release/src/router/www/qos-graph.svg

   1 <?xml version="1.0" standalone="no"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   3 <!--
   4         Tomato GUI
   5         Copyright (C) 2006 Jonathan Zarate
   6         http://www.polarcloud.com/tomato/
   7
   8         For use with Tomato Firmware only.
   9         No part of this file may be used without permission.
  10 -->
  11 <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" onload="init(evt)" onmouseout="mOut()">
  12 <style type='text/css'>
  13 * {
  14         cursor: pointer;
  15 }
  16 path {
  17         stroke: #000;
  18         stroke-width: 1px;
  19         stroke-opacity: 0.3;
  20 }
  21 #info {
  22         font: 11px sans-serif;
  23 }
  24 #tip-mask {
  25         fill: #ffffff;
  26         stroke: #777;
  27         stroke-width: 1px;
  28         stroke-opacity: 0.2;
  29 }
  30 #tip-text {
  31         font: 11px sans-serif;
  32         font-weight: normal;
  33 }
  34 </style>
  35 <script type='text/ecmascript'><![CDATA[
  36
  37 //      <% nvram("qos_classnames,qos_enable,qos_orules"); %>
  38
  39 //      var Unclassified = ['Unclassified'];                    //      Todo - Toastman - assign Class Labels
  40 //      var classNames = nvram.qos_classnames.split(' ');       //      How to fetch nvram variable in SVG ?
  41 //      var abc = Unclassified.concat(classNames);              //      var abc = Unclassified + the NVRAM variable
  42
  43 var abc = ['Unclassified', 'Class 1', 'Class 2', 'Class 3', 'Class 4', 'Class 5', 'Class 6','Class 7','Class 8','Class 9','Class 10', 'Unused'];
  44
  45 var vWidth = 310;
  46 var vHeight = 310;
  47 var tipInfo = [];
  48 var tipTimer = null;
  49 var tipLastN = null;
  50 var ready = 0;
  51
  52 function init(evt)
  53 {
  54         var e, i, l, s;
  55
  56     if (typeof(svgDocument) == 'undefined') svgDocument = evt.target.ownerDocument;
  57
  58         e = document.getElementsByTagName('path');
  59         for (i = 0; i < 12; ++i) {
  60                 l = document.getElementById('lg' + i);
  61                 l.setAttribute('x1', '0%');
  62                 l.setAttribute('x2', '100%');
  63                 l.setAttribute('y1', '0%');
  64                 l.setAttribute('y2', '100%');
  65
  66                 s = l.getElementsByTagName('stop');
  67                 s.item(0).setAttribute('offset', '0');
  68                 s.item(0).setAttribute('stop-opacity', '0.7');
  69                 s.item(0).setAttribute('stop-color', '#' + top.colors[i]);
  70                 s.item(1).setAttribute('offset', '100%');
  71                 s.item(1).setAttribute('stop-opacity', '1');
  72                 s.item(1).setAttribute('stop-color', '#' + top.colors[i]);
  73
  74                 e.item(i).setAttribute('fill', 'url(#lg' + i + ')');
  75         }
  76
  77         info = document.getElementById('info');
  78         tipGroup = document.getElementById('tip-group');
  79         tipMask = document.getElementById('tip-mask')
  80         tipText = document.getElementById('tip-text')
  81
  82         ready = 1;
  83 }
  84
  85 function updateSVG(data, abc)
  86 {
  87         var path, i, e, r, x, y, cx, cy, nx, ny, t, p, total;
  88
  89         mOut();
  90
  91         total = 0;
  92         for (i = 0; i < 12; ++i)
  93                 total += data[i] || 0;
  94         if (total == 0) return;
  95
  96         r = 150;
  97         cx = cy = r + 5;
  98         t = 0;
  99         nx = cx;
 100         ny = cy + r;
 101         path = document.getElementsByTagName('path');
 102
 103         for (i = 0; i < 12; ++i) {
 104                 e = path.item(i);
 105
 106                 p = (data[i] || 0) / total;
 107                 t += p;
 108
 109                 x = nx;
 110                 y = ny;
 111                 nx = cx + (r * Math.sin(t * Math.PI * 2));
 112                 ny = cy + (r * Math.cos(t * Math.PI * 2));
 113
 114                 if (data[i] == 0) {
 115                         e.setAttribute('d', '');
 116                 }
 117                 else if (p == 1) {
 118                         e.setAttribute('d', 'M5,' + cy + 'A' + r + ',' + r + ' 0 1,1 5,' + (cy + 1) + 'z');
 119                 }
 120                 else {
 121                         e.setAttribute('d', 'M' + cx + ',' + cy + 'L' + x + ',' + y + 'A' + r + ',' + r + ' 0 ' + ((p > 0.5) ? '1' : '0') + ',0 ' + nx + ',' + ny + 'Z');
 122                 }
 123
 124                 tipInfo[i] = abc[i] + ' ' + (p * 100).toFixed(2) + '% (' + (data[i] / 1000 || 0).toFixed(2) + ')';
 125
 126                 e.setAttribute('onclick', 'mClick(' + i + ')');
 127                 e.setAttribute('onmousemove', 'mMove(evt,' + i + ')');
 128                 e.setAttribute('onmouseout', 'mOut()');
 129         }
 130 }
 131
 132 function mClick(n)
 133 {
 134         top.mClick(n);
 135 }
 136
 137 function setText(e, text)
 138 {
 139         if (e.firstChild) e.removeChild(e.firstChild);
 140         e.appendChild(document.createTextNode(text));
 141 }
 142
 143 function showTip()
 144 {
 145         setText(tipText, tipInfo[tipT]);
 146
 147         tipMask.setAttribute('width', tipText.getComputedTextLength() + 10);
 148
 149         if (tipY > (vHeight - 35)) tipY -= 20;
 150                 else tipY += 20;
 151         if (tipX > (vWidth - 165)) tipX = vWidth - 170;
 152         tipGroup.setAttribute('transform', 'translate(' + tipX + ',' + tipY + ')');
 153         tipGroup.setAttribute('visibility', 'visible');
 154
 155         tipLastN = tipT;
 156
 157         clearTimeout(tipTimer);
 158         tipTimer = null;
 159 }
 160
 161 function mMove(evt, n)
 162 {
 163         if (n == tipLastN) return;
 164         tipT = n;
 165         tipX = evt.clientX;
 166         tipY = evt.clientY;
 167         setText(tipText, tipT + ' ' + tipX + 'x' + tipY );
 168
 169         if (tipTimer) clearTimeout(tipTimer);
 170         tipTimer = setTimeout(showTip, 250);    // doesn't work properly under Adobe/IE
 171 }
 172
 173 function mOut()
 174 {
 175         if (tipLastN != -1) {
 176                 tipLastN = -1;
 177                 tipGroup.setAttribute('visibility', 'hidden');
 178         }
 179         if (tipTimer) {
 180                 clearTimeout(tipTimer);
 181                 tipTimer = null;
 182         }
 183 }
 184
 185 ]]></script>
 186
 187 <defs>
 188         <linearGradient id="lg0"><stop/><stop/></linearGradient>
 189         <linearGradient id="lg1"><stop/><stop/></linearGradient>
 190         <linearGradient id="lg2"><stop/><stop/></linearGradient>
 191         <linearGradient id="lg3"><stop/><stop/></linearGradient>
 192         <linearGradient id="lg4"><stop/><stop/></linearGradient>
 193         <linearGradient id="lg5"><stop/><stop/></linearGradient>
 194         <linearGradient id="lg6"><stop/><stop/></linearGradient>
 195         <linearGradient id="lg7"><stop/><stop/></linearGradient>
 196         <linearGradient id="lg8"><stop/><stop/></linearGradient>
 197         <linearGradient id="lg9"><stop/><stop/></linearGradient>
 198         <linearGradient id="lg10"><stop/><stop/></linearGradient>
 199         <linearGradient id="lg11"><stop/><stop/></linearGradient>
 200 </defs>
 201
 202
 203 <g transform="rotate(135, 155, 155)">
 204         <path />
 205         <path />
 206         <path />
 207         <path />
 208         <path />
 209         <path />
 210         <path />
 211         <path />
 212         <path />
 213         <path />
 214         <path />
 215         <path />
 216 </g>
 217
 218 <g id="tip-group" visibility="hidden">
 219         <rect id="tip-mask" x="0" y="0" width="160" height="18" />
 220         <text id="tip-text" x="5" y="13">Unclassified 100.00% (9999)</text>
 221 </g>
 222 </svg>