new pie chart

git-svn-id: file:///root/webif/svn/humax/pkg/src/webif/trunk@2055 2a923420-c742-0410-a762-8d5b09965624

CONTROL/control

@@ -1,7 +1,7 @@
 Package: webif
 Priority: optional
 Section: web
-Version: 1.0.17-3
+Version: 1.0.17-5
 Architecture: mipsel
 Maintainer: af123@hummypkg.org.uk
 Depends: webif-channelicons(>=1.1.13),lighttpd(>=1.4.35-2),jim(>=0.75-1),jim-oo,jim-sqlite3(>=0.75),jim-cgi(>=0.7),jim-binary(>=0.75),service-control(>=1.2),busybox(>=1.20.2-1),lsof(>=4.87),epg(>=1.0.13),hmt(>=1.1.21),ssmtp,anacron,trm(>=1.1),openssl-command,nicesplice,id3v2,file,rsvsync(>=1.0.2),webif-charts(>=1.2-1),stripts(>=1.2.5-3),smartmontools,tmenu(>=1.08),ffmpeg,id3v2,multienv(>=1.6),tcpping(>=1.1),mongoose

webif/html/css/style.css

@@ -394,6 +394,11 @@ div.toolbar
 	padding: 6px;
 }
 
+#status
+{
+	width: 60%;
+}
+
 span.toolbarcell
 {
 	float: left;
@@ -501,3 +506,17 @@ span.foldernum
 	padding-top: 1.2em;
 }
 
+#tbdiskpie
+{
+	float: right;
+	width: 150px;
+	height: 150px;
+	margin-left: 10px;
+}
+
+.tbdiskpie
+{
+	top: -10px !important;
+}
+
+

webif/html/diskspace/diskspace.jim

@@ -0,0 +1,71 @@
+#!/mod/bin/jimsh
+
+source /mod/webif/lib/setup
+require system.class pretty_size
+
+lassign [system diskspace 1] size used perc free fperc tsrbuf tsrused
+
+# Calculate the TSR reserve
+set tsrreserve $($tsrbuf - $tsrused)
+# Adjust values to account for the TSR reserve
+set free $($free - $tsrreserve)
+set used $($size - $free)
+
+set dbs 0
+if {[system pkginst undelete]} {
+	set dbs [system dustbinsize]
+	set used $($used - $dbs)
+}
+
+set uperc $($used * 100 / $size)
+set dperc $($dbs * 100 / $size)
+set fperc $(100 - $uperc - $dperc)
+
+set usedstr [pretty_size $used]
+set freestr [pretty_size $free]
+set dbsstr [pretty_size $dbs]
+
+puts "
+	<script type=text/javascript>
+diskspace_data = \[
+	{
+		name: 'Used',
+		y: $($used - $dbs),
+		sliced: false,
+		pretty: '$usedstr'
+	},
+	{
+		name: 'Dustbin',
+		y: $dbs,
+		sliced: false,
+		pretty: '$dbsstr'
+	},
+	{
+		name: 'Free',
+		y: $free,
+		sliced: false,
+		pretty: '$freestr'
+	}
+];
+	</script>
+	<span id=tbdiskpie></span>
+"
+
+puts "
+	<span id=tbdiskspace>
+		Total space: [pretty_size $size]<br>
+		<img src=/img/pie-blue.png height=10>
+		    Used: $usedstr ($uperc%)<br>
+		<img src=/img/pie-grey.png height=10>
+		    Free: $freestr ($fperc%)
+"
+if {$dbs} {
+	puts "<br>
+		<img src=/img/pie-yellow.png height=10>
+		    Dustbin: $dbsstr ($dperc%)"
+}
+puts "
+	</span>
+	<script src=/diskspace/diskspace.js type=text/javascript></script>
+"
+

webif/html/diskspace/diskspace.js

@@ -0,0 +1,59 @@
+//$(function () {
+
+$('#tbdiskpie')
+    .hover(function(e) { e.stopPropagation(); $(this).stop(true, true); })
+    .highcharts({
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: null,
+	    backgroundColor: 'transparent',
+            plotShadow: false,
+	    spacing: [0, 0, 0, 0],
+	    className: 'tbdiskpie',
+//	    height: 150, width: 150,
+	    events: {
+		click: function(e) {
+			window.location = '/diag/dspace/index.jim';
+		}
+	    }
+        },
+	colors:
+	  Highcharts.map(['#7cb5ec', '#e4d354', '#cccccc'], function(color) {
+		return {
+		    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
+		    stops: [
+			[0, color],
+			[1, Highcharts.Color(color).brighten(-0.3).get('rgb')]
+		    ]
+		};
+	}),
+	title: { text: '' },
+	credits: false,
+        plotOptions: {
+            pie: {
+		animation: { duration: 300 },
+                allowPointSelect: false,
+                cursor: 'pointer',
+                dataLabels: {
+                    enabled: false
+                },
+		shadow: false,
+		borderWidth: 0,
+		states: { hover: false }
+            }
+        },
+	tooltip: {
+		enabled: true,
+		formatter: function() {
+			return this.point.name + ': ' + this.point.pretty;
+		}
+	},
+        series: [{
+            type: 'pie',
+            name: 'Disk Space',
+            data: diskspace_data
+        }]
+    });
+
+//});
+

webif/html/lib/header.jim

@@ -24,6 +24,7 @@ puts {
 <link href="/css/EXTRA.css" rel="Stylesheet" type="text/css" />
 <script type="text/javascript" src="/js/jquery.js"></script>
 <script type="text/javascript" src="/lib/jquery.ui/js/jquery-ui.js"></script>
+<script type="text/javascript" src="/charts/high/highcharts.js"></script>
 }
 if {[info exists _mws_js]} {
 	foreach js $::_mws_js {

webif/html/lib/topbar.jim

@@ -8,7 +8,8 @@ puts {
 	<div class=middle>
 <!-- Start include diskspace - above other items to work around IE feature.. -->
 }
-source /mod/webif/include/diskspace.jim
+#source /mod/webif/include/diskspace.jim
+source /mod/webif/html/diskspace/diskspace.jim
 puts {
 <!-- End include diskspace -->
 		<img border=0 src=/images/516_1_26_Freeview_Logo.png>