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