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