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 var vWidth = 310;
  44 var vHeight = 310;
  45
  46 var tipInfo = [];
  47 var tipTimer = null;
  48 var tipLastN = null;
  49 var ready = 0;
  50
  51 function init(evt)
  52
  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 < 11; ++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 < 11; ++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 < 11; ++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] || 0) + ')';
 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 </defs>
 200
 201
 202 <g transform="rotate(135, 155, 155)">
 203         <path />
 204         <path />
 205         <path />
 206         <path />
 207         <path />
 208         <path />
 209         <path />
 210         <path />
 211         <path />
 212         <path />
 213         <path />
 214 </g>
 215
 216 <g id="tip-group" visibility="hidden">
 217         <rect id="tip-mask" x="0" y="0" width="160" height="18" />
 218         <text id="tip-text" x="5" y="13">Unclassified 100.00% (9999)</text>
 219 </g>
 220 </svg>