From 359f1331ee170f8ad0e8f6233f01f87cc0b34da3 Mon Sep 17 00:00:00 2001
From: Dinnn <dinnn@linksysinfo.org>
Date: Thu, 20 Dec 2012 11:18:52 +0700
Subject: [PATCH] Switchable QOS Pie Chart

Many thanks to Dinnn

Chart shows bandwidth as %age of total, with
zoom function as original tomato.
---
 release/src/router/www/qos-graph.svg  | 20 +++++++--
 release/src/router/www/qos-graphs.asp | 80 +++++++++++++++++++++++++++--------
 2 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/release/src/router/www/qos-graph.svg b/release/src/router/www/qos-graph.svg
index 5cb24dbe8d..3d8689ae79 100644
--- a/release/src/router/www/qos-graph.svg
+++ b/release/src/router/www/qos-graph.svg
@@ -40,6 +40,16 @@ path {
 
 <script type='text/ecmascript'><![CDATA[
 
+
+//	<% nvram("qos_classnames,qos_enable,qos_orules"); %>
+
+//	var Unclassified = ['Unclassified'];			//	Todo - Toastman - assign Class Labels
+//	var classNames = nvram.qos_classnames.split(' ');	// 	How to fetch nvram variable in SVG ?
+//	var abc = Unclassified.concat(classNames);		//	var abc = Unclassified + the NVRAM variable
+
+var abc = ['Unclassified', 'Class 1', 'Class 2', 'Class 3', 'Class 4', 'Class 5', 'Class 6','Class 7','Class 8','Class 9','Class 10', 'Unused'];
+
+
 var vWidth = 310;
 var vHeight = 310;
 
@@ -56,7 +66,7 @@ function init(evt)
     if (typeof(svgDocument) == 'undefined') svgDocument = evt.target.ownerDocument;
 
 	e = document.getElementsByTagName('path');
-	for (i = 0; i < 11; ++i) {
+	for (i = 0; i < 12; ++i) {
 		l = document.getElementById('lg' + i);
 		l.setAttribute('x1', '0%');
 		l.setAttribute('x2', '100%');
@@ -89,7 +99,7 @@ function updateSVG(data, abc)
 	mOut();
 	
 	total = 0;
-	for (i = 0; i < 11; ++i)
+	for (i = 0; i < 12; ++i)
 		total += data[i] || 0;
 	if (total == 0) return;
 
@@ -100,7 +110,7 @@ function updateSVG(data, abc)
 	ny = cy + r;
 	path = document.getElementsByTagName('path');
 	
-	for (i = 0; i < 11; ++i) {
+	for (i = 0; i < 12; ++i) {
 		e = path.item(i);
 
 		p = (data[i] || 0) / total;
@@ -121,7 +131,7 @@ function updateSVG(data, abc)
 			e.setAttribute('d', 'M' + cx + ',' + cy + 'L' + x + ',' + y + 'A' + r + ',' + r + ' 0 ' + ((p > 0.5) ? '1' : '0') + ',0 ' + nx + ',' + ny + 'Z');
 		}
 		
-		tipInfo[i] = abc[i] + ' ' + (p * 100).toFixed(2) + '% (' + (data[i] || 0) + ')';
+		tipInfo[i] = abc[i] + ' ' + (p * 100).toFixed(2) + '% (' + (data[i] / 1000 || 0).toFixed(2) + ')';
 
 		e.setAttribute('onclick', 'mClick(' + i + ')');
 		e.setAttribute('onmousemove', 'mMove(evt,' + i + ')');
@@ -196,6 +206,7 @@ function mOut()
 	<linearGradient id="lg8"><stop/><stop/></linearGradient>
 	<linearGradient id="lg9"><stop/><stop/></linearGradient>
 	<linearGradient id="lg10"><stop/><stop/></linearGradient>
+	<linearGradient id="lg11"><stop/><stop/></linearGradient>	
 </defs>
 
 
@@ -211,6 +222,7 @@ function mOut()
 	<path />
 	<path />
 	<path />
+	<path />
 </g>
 
 <g id="tip-group" visibility="hidden">
diff --git a/release/src/router/www/qos-graphs.asp b/release/src/router/www/qos-graphs.asp
index fc3ce6089c..0603a10bf7 100644
--- a/release/src/router/www/qos-graphs.asp
+++ b/release/src/router/www/qos-graphs.asp
@@ -44,15 +44,16 @@
 </style>
 
 <script type='text/javascript'>
-// <% nvram("qos_classnames,web_svg,qos_enable"); %>
+// <% nvram("qos_classnames,web_svg,qos_enable,qos_obw,qos_ibw"); %>
 
 //<% qrate(); %>
 
 var svgReady = 0;
 
 var Unclassified = ['Unclassified'];
-var classNames = nvram.qos_classnames.split(' ');		// Toastman - configurable class names
-var abc = Unclassified.concat(classNames);
+var Unused = ['Unused'];
+var classNames = nvram.qos_classnames.split(' ');		//Toastman Class Labels
+var abc = Unclassified.concat(classNames,Unused);
 
 var colors = [
 	'c6e2ff',
@@ -65,9 +66,12 @@ var colors = [
 	'deb887',
 	'F08080',
 	'ffa500',
-	'ffd700'
+	'ffd700',
+	'D8D8D8'
 ];
 
+var toggle=true;
+
 function mClick(n)
 {
 	location.href = 'qos-detailed.asp?class=' + n;
@@ -98,31 +102,53 @@ function showData()
 		E('cpct' + i).innerHTML = p.toFixed(2) + '%';
 	}
 	E('ccnt-total').innerHTML = totalConnections;
+		
+	obwrate = nvram.qos_obw * 1000;
+	ibwrate = nvram.qos_ibw * 1000;
+	
+	if(toggle == false)
+	{
+		totalorate = totalOutgoingBandwidth;
+		totalirate = totalIncomingBandwidth;
+		totalrateout = '100%';
+		totalratein = '100%';
+	} else 
+	{
+		FreeOutgoing = (obwrate - totalOutgoingBandwidth);
+		qrates_out.push(FreeOutgoing);
+		FreeIncoming = (ibwrate - totalIncomingBandwidth);
+		qrates_in.push(FreeIncoming);
+		totalorate = obwrate;
+		totalirate = ibwrate;
+		totalrateout = ((totalOutgoingBandwidth / totalorate) * 100).toFixed(2) + '%';
+		totalratein = ((totalIncomingBandwidth / totalirate) * 100).toFixed(2) + '%';
+	}
 
 	for (i = 1; i < 11; ++i) {
 		n = qrates_out[i];
 		E('bocnt' + i).innerHTML = (n / 1000).toFixed(2)
 		E('bocntx' + i).innerHTML = (n / 8192).toFixed(2)
-		if (totalOutgoingBandwidth > 0) p = (n / totalOutgoingBandwidth) * 100;
+		if (totalOutgoingBandwidth > 0) p = (n / totalorate) * 100;
 			else p = 0;
 		E('bopct' + i).innerHTML = p.toFixed(2) + '%';
 	}
 	E('bocnt-total').innerHTML = (totalOutgoingBandwidth / 1000).toFixed(2)
 	E('bocntx-total').innerHTML = (totalOutgoingBandwidth / 8192).toFixed(2)
-	
+	E('rateout').innerHTML = totalrateout;
+
 	for (i = 1; i < 11; ++i) {
 		n = qrates_in[i];
 		E('bicnt' + i).innerHTML = (n / 1000).toFixed(2)
 		E('bicntx' + i).innerHTML = (n / 8192).toFixed(2)
-		if (totalIncomingBandwidth > 0) p = (n / totalIncomingBandwidth) * 100;
+		if (totalIncomingBandwidth > 0) p = (n / totalirate) * 100;
 			else p = 0;
 		E('bipct' + i).innerHTML = p.toFixed(2) + '%';
 	}
 	E('bicnt-total').innerHTML = (totalIncomingBandwidth / 1000).toFixed(2)
 	E('bicntx-total').innerHTML = (totalIncomingBandwidth / 8192).toFixed(2)
+	E('ratein').innerHTML = totalratein;
 }
 
-
 var ref = new TomatoRefresh('update.cgi', 'exec=qrate', 2, 'qos_graphs');
 
 ref.refresh = function(text)
@@ -212,11 +238,29 @@ function checkSVG()
 	}
 }
 
+function showGraph()
+{
+	if(toggle == true)
+	{
+		toggle=false;
+		qrates_out = qrates_out.slice(0, -1);	
+		qrates_in = qrates_in.slice(0, -1);
+		showData();
+		checkSVG();
+	} else 
+	{
+		toggle=true;
+		showData();
+		checkSVG();
+	}
+}
+
 function init()
 {
 	nbase = fixInt(cookie.get('qnbase'), 0, 1, 0);
 	showData();
 	checkSVG();
+	showGraph();
 	ref.initPage(2000, 3);
 }
 </script>
@@ -224,12 +268,12 @@ function init()
 <body onload='init()'>
 <form id='_fom' action='javascript:{}'>
 <table id='container' cellspacing=0>
-<tr><td colspan=2 id='header'>
+<tr><td colspan=3 id='header'>
 	<div class='title'>Tomato</div>
 	<div class='version'>Version <% version(); %></div>
 </td></tr>
 <tr id='body'><td id='navi'><script type='text/javascript'>navi()</script></td>
-<td id='content'>
+<td id='content'colspan=2>
 <div id='ident'><% ident(); %></div>
 
 <!-- / / / -->
@@ -263,7 +307,7 @@ if (nvram.web_svg != '0') {
 <div class="section">
 <table border=0 width="100%"><tr><td>
 	<table style="width:250px">
-	<tr><td class='color' style="height:1em"></td><td class='title' style="width:45px">&nbsp;</td><td class='thead count'>kbit/s</td><td class='thead count'>KB/s</td><td class='pct'>&nbsp;</td></tr>
+	<tr><td class='color' style="height:1em"></td><td class='title' style="width:45px">&nbsp;</td><td class='thead count'>kbit/s</td><td class='thead count'>KB/s</td><td class='thead pct'>Rate</td></tr>
 <script type='text/javascript'>
 for (i = 1; i < 11; ++i) {
 	W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
@@ -274,7 +318,7 @@ for (i = 1; i < 11; ++i) {
 		'<td id="bopct' + i + '" class="pct"></td></tr>');
 }
 </script>
-	<tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bocnt-total" class="total count"></td><td id="bocntx-total" class="total count"></td><td class="total pct">100%</td></tr>
+	<tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bocnt-total" class="total count"></td><td id="bocntx-total" class="total count"></td><td id="rateout" class="total pct"></td></tr>
 	</table>
 </td><td style="margin-right:150px">
 <script type='text/javascript'>
@@ -290,7 +334,7 @@ if (nvram.web_svg != '0') {
 <div class="section">
 <table border=0 width="100%"><tr><td>
 	<table style="width:250px">
-	<tr><td class='color' style="height:1em"></td><td class='title' style="width:45px">&nbsp;</td><td class='thead count'>kbit/s</td><td class='thead count'>KB/s</td><td class='pct'>&nbsp;</td></tr>
+	<tr><td class='color' style="height:1em"></td><td class='title' style="width:45px">&nbsp;</td><td class='thead count'>kbit/s</td><td class='thead count'>KB/s</td><td class='thead pct'>Rate</td></tr>
 <script type='text/javascript'>
 for (i = 1; i < 11; ++i) {
 	W('<tr style="cursor:pointer" onclick="mClick(' + i + ')">' +
@@ -301,7 +345,7 @@ for (i = 1; i < 11; ++i) {
 		'<td id="bipct' + i + '" class="pct"></td></tr>');
 }
 </script>
-	<tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bicnt-total" class="total count"></td><td id="bicntx-total" class="total count"></td><td class="total pct">100%</td></tr>
+	<tr><td>&nbsp;</td><td class="total">Total</a></td><td id="bicnt-total" class="total count"></td><td id="bicntx-total" class="total count"></td><td id="ratein" class="total pct"></td></tr>
 	</table>
 </td><td style="margin-right:150px">
 <script type='text/javascript'>
@@ -313,7 +357,6 @@ if (nvram.web_svg != '0') {
 </table>
 </div>
 
-
 <script type='text/javascript'>
 if (nvram.qos_enable != '1') {
 	W('<div class="note-disabled"><b>QoS disabled.</b> &nbsp; <a href="qos-settings.asp">Enable &raquo;</a></div>');
@@ -323,9 +366,10 @@ if (nvram.qos_enable != '1') {
 <!-- / / / -->
 
 </td></tr>
-<tr><td id='footer' colspan=2>
-	<script type='text/javascript'>genStdRefresh(1,2,'ref.toggle()');</script>
-</td></tr>
+<tr><td id='footer'></td>
+	<td id='footer' width="528"><input name="mybtn" style="width:100px" value="Switch Graph" type="button" onclick="showGraph()" ></td>
+	<td id='footer' width="237"><script type='text/javascript'>genStdRefresh(1,2,'ref.toggle()');</script></td>
+	</tr>
 </table>
 </form>
 </body>
-- 
2.11.4.GIT