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 var vWidth = 310;
  38 var vHeight = 310;
  39 var abc = ['Unclassified', 'Highest', 'High', 'Medium', 'Low', 'Lowest', 'Class A', 'Class B', 'Class C', 'Class D', 'Class E'];
  40 var tipInfo = [];
  41 var tipTimer = null;
  42 var tipLastN = null;
  43 var ready = 0;
  44
  45 function init(evt)
  46 {
  47         var e, i, l, s;
  48
  49     if (typeof(svgDocument) == 'undefined') svgDocument = evt.target.ownerDocument;
  50
  51         e = document.getElementsByTagName('path');
  52         for (i = 0; i < 11; ++i) {
  53                 l = document.getElementById('lg' + i);
  54                 l.setAttribute('x1', '0%');
  55                 l.setAttribute('x2', '100%');
  56                 l.setAttribute('y1', '0%');
  57                 l.setAttribute('y2', '100%');
  58
  59                 s = l.getElementsByTagName('stop');
  60                 s.item(0).setAttribute('offset', '0');
  61                 s.item(0).setAttribute('stop-opacity', '0.7');
  62                 s.item(0).setAttribute('stop-color', '#' + top.colors[i]);
  63                 s.item(1).setAttribute('offset', '100%');
  64                 s.item(1).setAttribute('stop-opacity', '1');
  65                 s.item(1).setAttribute('stop-color', '#' + top.colors[i]);
  66
  67                 e.item(i).setAttribute('fill', 'url(#lg' + i + ')');
  68         }
  69
  70         info = document.getElementById('info');
  71         tipGroup = document.getElementById('tip-group');
  72         tipMask = document.getElementById('tip-mask')
  73         tipText = document.getElementById('tip-text')
  74
  75         ready = 1;
  76 }
  77
  78 function updateSVG(data)
  79 {
  80         var path, i, e, r, x, y, cx, cy, nx, ny, t, p, total;
  81
  82         mOut();
  83
  84         total = 0;
  85         for (i = 0; i < 11; ++i)
  86                 total += data[i] || 0;
  87         if (total == 0) return;
  88
  89         r = 150;
  90         cx = cy = r + 5;
  91         t = 0;
  92         nx = cx;
  93         ny = cy + r;
  94         path = document.getElementsByTagName('path');
  95
  96         for (i = 0; i < 11; ++i) {
  97                 e = path.item(i);
  98
  99                 p = (data[i] || 0) / total;
 100                 t += p;
 101
 102                 x = nx;
 103                 y = ny;
 104                 nx = cx + (r * Math.sin(t * Math.PI * 2));
 105                 ny = cy + (r * Math.cos(t * Math.PI * 2));
 106
 107                 if (data[i] == 0) {
 108                         e.setAttribute('d', '');
 109                 }
 110                 else if (p == 1) {
 111                         e.setAttribute('d', 'M5,' + cy + 'A' + r + ',' + r + ' 0 1,1 5,' + (cy + 1) + 'z');
 112                 }
 113                 else {
 114                         e.setAttribute('d', 'M' + cx + ',' + cy + 'L' + x + ',' + y + 'A' + r + ',' + r + ' 0 ' + ((p > 0.5) ? '1' : '0') + ',0 ' + nx + ',' + ny + 'Z');
 115                 }
 116
 117                 tipInfo[i] = abc[i] + ' ' + (p * 100).toFixed(2) + '% (' + (data[i] || 0) + ')';
 118
 119                 e.setAttribute('onclick', 'mClick(' + i + ')');
 120                 e.setAttribute('onmousemove', 'mMove(evt,' + i + ')');
 121                 e.setAttribute('onmouseout', 'mOut()');
 122         }
 123 }
 124
 125 function mClick(n)
 126 {
 127         top.mClick(n);
 128 }
 129
 130 function setText(e, text)
 131 {
 132         if (e.firstChild) e.removeChild(e.firstChild);
 133         e.appendChild(document.createTextNode(text));
 134 }
 135
 136 function showTip()
 137 {
 138         setText(tipText, tipInfo[tipT]);
 139
 140         tipMask.setAttribute('width', tipText.getComputedTextLength() + 10);
 141
 142         if (tipY > (vHeight - 35)) tipY -= 20;
 143                 else tipY += 20;
 144         if (tipX > (vWidth - 165)) tipX = vWidth - 170;
 145         tipGroup.setAttribute('transform', 'translate(' + tipX + ',' + tipY + ')');
 146         tipGroup.setAttribute('visibility', 'visible');
 147
 148         tipLastN = tipT;
 149
 150         clearTimeout(tipTimer);
 151         tipTimer = null;
 152 }
 153
 154 function mMove(evt, n)
 155 {
 156         if (n == tipLastN) return;
 157         tipT = n;
 158         tipX = evt.clientX;
 159         tipY = evt.clientY;
 160         setText(tipText, tipT + ' ' + tipX + 'x' + tipY );
 161
 162         if (tipTimer) clearTimeout(tipTimer);
 163         tipTimer = setTimeout(showTip, 250);    // doesn't work properly under Adobe/IE
 164 }
 165
 166 function mOut()
 167 {
 168         if (tipLastN != -1) {
 169                 tipLastN = -1;
 170                 tipGroup.setAttribute('visibility', 'hidden');
 171         }
 172         if (tipTimer) {
 173                 clearTimeout(tipTimer);
 174                 tipTimer = null;
 175         }
 176 }
 177
 178 ]]></script>
 179
 180 <defs>
 181         <linearGradient id="lg0"><stop/><stop/></linearGradient>
 182         <linearGradient id="lg1"><stop/><stop/></linearGradient>
 183         <linearGradient id="lg2"><stop/><stop/></linearGradient>
 184         <linearGradient id="lg3"><stop/><stop/></linearGradient>
 185         <linearGradient id="lg4"><stop/><stop/></linearGradient>
 186         <linearGradient id="lg5"><stop/><stop/></linearGradient>
 187         <linearGradient id="lg6"><stop/><stop/></linearGradient>
 188         <linearGradient id="lg7"><stop/><stop/></linearGradient>
 189         <linearGradient id="lg8"><stop/><stop/></linearGradient>
 190         <linearGradient id="lg9"><stop/><stop/></linearGradient>
 191         <linearGradient id="lg10"><stop/><stop/></linearGradient>
 192 </defs>
 193
 194
 195 <g transform="rotate(135, 155, 155)">
 196         <path />
 197         <path />
 198         <path />
 199         <path />
 200         <path />
 201         <path />
 202         <path />
 203         <path />
 204         <path />
 205         <path />
 206         <path />
 207 </g>
 208
 209 <g id="tip-group" visibility="hidden">
 210         <rect id="tip-mask" x="0" y="0" width="160" height="18" />
 211         <text id="tip-text" x="5" y="13">Unclassified 100.00% (9999)</text>
 212 </g>
 213 </svg>