qhoxie: revamped tablesorting, copious js fixes, cms stats reword progress

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@42126 467b73ca-7a2a-4603-9d3b-597d59a354a9

code/StatisticsAdmin.php

@@ -3,67 +3,59 @@
 class StatisticsAdmin extends LeftAndMain {
 	static $tree_class = "SiteTree";
 	static $subitem_class = "Member";
+	var $charts = array();
 
 	/**
 	 * Initialisation method called before accessing any functionality that BulkLoaderAdmin has to offer
 	 */
 	public function init() {
 		parent::init();
-		
+
 		Requirements::javascript("jsparty/plotr.js");
-		Requirements::javascript("jsparty/tablekit.js");
+		Requirements::javascript("jsparty/tablesort.js");
-		
+		Requirements::javascript("cms/javascript/StatisticsAdmin.js");
+
 		Requirements::css("cms/css/StatisticsAdmin.css");
 	}
- 
+
 	public function Link($action=null) {
 		return "admin/statistics/$action";
 	}
- 
+
 	/**
 	 * Form that will be shown when we open one of the items
-	 */	 
+	 */
 	public function EditForm() {
-		
+		return $this->Trend();
 	}
-	
-	function getSiteTreeFor($className) {
-		$obj = singleton($className);
-		$obj->markPartialTree();
-		if($p = $this->currentPage()) $obj->markToExpose($p);
 
-		// getChildrenAsUL is a flexible and complex way of traversing the tree
-		$siteTree = $obj->getChildrenAsUL("", '
-					"<li id=\"record-$child->ID\" class=\"" . $child->CMSTreeClasses($extraArg) . "\">" .
-					"<a href=\"" . Director::link(substr($extraArg->Link(),0,-1), "show", $child->ID) . "\" " . (($child->canEdit() || $child->canAddChildren()) ? "" : "class=\"disabled\"") . " title=\"Page type: ".$child->class."\" >" .
-					($child->TreeTitle()) .
-					"</a>"
-'
-					,$this, true);
 
-		// Wrap the root if needs be.
-	
-		$rootLink = $this->Link() . '0';
-		$siteTree = "<ul id=\"sitetree\" class=\"tree unformatted\"><li id=\"record-0\" class=\"Root nodelete\"><a href=\"$rootLink\">Pages</a>"
-			. $siteTree . "</li></ul>";
-		
 
-		return $siteTree;
+	function Trend() {
+		return Statistics::TrendChart(array('Member', 'SiteTree', 'Group'), 'day', 'mchart', 'Line', 'red');
 	}
-	
+
-	public function SiteTreeAsUL() {
+	function BrowserPie() {
-		return $this->getSiteTreeFor("SiteTree");
+		return Statistics::BrowserChart();
 	}
-	
+
-	function UserCount($date = null) {
+	function UserTable() {
-		$allUsers = DataObject::get('Member');
+		//Statistics::getBrowserChart();
-		return $allUsers->TotalItems();
+		return Statistics::UserRecordTable();
 	}
-	
+
-	function UserTableRecords() {
+	function ViewTable() {
-		return DataObject::get('Member');
+		return Statistics::getViews('all');
 	}
-	
+
+	public function users($params) {
+		return Statistics::UserRecordTable();
+	}
+
+	public function overview($params) {
+		return $this->BrowserPie();
+	}
+
 }
 
 ?>

css/StatisticsAdmin.css

@@ -1,44 +1,125 @@
 table.statstable {
-    border-collapse: collapse;
+    font-family:arial;
-    width: 90%;
+	background-color: #cdcdcd;
-    margin: 20px 0 20px 0;
+	margin:10px 0pt 15px;
-    font-size: 12px;
+	font-size: 10pt;
-
+	width: 100%;
+	text-align: left;
 }
 
-.statstable td,.statstable th {
+.statstable thead tr th {
-    padding: 0.2em;
+	background-color: #B8CDE4;
-    border: 1px solid #CCC;
+	border: 1px solid #fff;
+	font-size: 11pt;
+	padding: 4px;
+}
 
+.statstable td {
+    background-color: #e6EEEE;
+	border: 1px solid #FFF;
+	font-size: 10pt;
+	padding: 4px;
 }
 
 .statstable th {
-    background: #CAE8EA url(../images/statistics/bg_header.jpg) no-repeat;
+    background-image: url(../images/statistics/bg.gif);
-
+    background-color: #8dbdd8;
+	background-repeat: no-repeat;
+	background-position: center right;
+	cursor: pointer;
 }
 
-.statstable td.id {
+.statstable thead th a {
-    background: #CAE8EA url(../images/statistics/bg_header.jpg) no-repeat;
+	text-decoration:none;
-
 }
 
-.statstable th.nobg {
+.statstable th.forwardSort {
-	background: #fff;
+	background-color: #69A3F2;
-	border-top: none;
+    background-image: url(../images/statistics/desc.gif);
-	border-left: none;
 }
 
-.statstable thead,.statstable tfoot {
+.statstable th.reverseSort {
-    background-color: #DDD;
+	background-color: #69A3F2;
-
+    background-image: url(../images/statistics/asc.gif);
 }
 
-.statstable tr.rowodd {
+.statstable tr.alt td {
-    background-color: #fff;
+    background-color:#D8D8FF;
-
 }
 
-.statstable tr.roweven {
-    background-color: #F0FBFD;
 
-}
+ul.tablePaginater
+        {
+        display:block;
+        list-style:none;
+        padding:0;
+        margin:1px 0 1em 0;
+        text-align:left;
+        }
+ul.tablePaginater li
+        {
+        display:inline;
+        width:2.1em;
+        height:2.1em;
+        line-height:2em;
+        vertical-align:middle;
+        margin-right:4px;
+        color:#666;
+        list-style:none;
+        cursor:pointer;
+        }
+ul.tablePaginater li.currentPage p
+        {
+        border-color:#1786FF !important;
+        background-color: #C2DAF4;
+        color:#000;
+        }
+ul.tablePaginater li p
+        {
+        display:table-cell !important;
+        display:inline-block;
+        text-align:center;
+        width:2em;
+        height:2em;
+        color:#666;
+        min-width:2em;
+        min-height:2em;
+        text-decoration:none;
+        outline:none;
+        border:1px solid #ccc;
+        cursor:pointer;
+        }
+
+ul.tablePaginater li p:hover
+        {
+        background-color: #C2DAF4;
+        }
+
+ul.tablePaginater li p:focus
+        {
+        color:#333;
+        text-decoration:none;
+        outline:none;
+        border-color:#aaa;
+        }
+td.sized1
+        {
+        width:16em;
+        text-align:left;
+        }
+td.sized2
+        {
+        width:10em;
+        text-align:left;
+        }
+td.sized3
+        {
+        width:7em;
+        text-align:left;
+        }
+
+.statstable tbody tr:hover td,
+.statstable tbody tr.ieRowHover td
+        {
+        background-color: #A0BDF7;
+        }

javascript/StatisticsAdmin.js

@@ -0,0 +1,43 @@
+defaultOpts = {
+	fillOpacity:			1.0,
+	axis: {
+				lineWidth:			1.0,
+				lineColor:			'#000000',
+				tickSize:			3.0,
+				labelColor:			'#666666',
+				labelFont:			'Tahoma',
+				labelFontSize:		20,
+				labelWidth: 		50.0
+		},
+
+	padding: {left: 30, right: 0, top: 10, bottom: 30},
+
+	backgroundColor:		'#cccccc',
+	colorScheme:			'blue'
+}
+
+showCT = function() {
+	console.log('asdg');
+	if($('browserchart')) {
+		var bchart = new Plotr.PieChart('bchart', defaultOpts);
+		bchart.addDataset(bchartdata);
+		bchart.render();
+		console.log('bchart rendered');
+	}
+	if($('trendchart')) {
+		var tchart = new Plotr.LineChart('tchart', defaultOpts);
+		tchart.addDataset(tchartdata);
+		tchart.render();
+		console.log('tchart rendered');
+	}
+	if($('usertable') || $('viewtable')) {
+		fdTableSort.init();
+		tablePaginater.init();
+		console.log('table rendered');
+	}
+}
+
+
+Event.observe(window, 'load', function() {
+	var stob = $('sitetree').observeMethod('SelectionChanged', showCT());
+});

templates/Includes/StatisticsAdmin_Graph.ss

@@ -1,44 +0,0 @@
-<script>
-// Define a dataset.
-var dataset = {
-	<% control DataSets %>
-	'$SetName':		
-	'myFirstDataset': 	[[0, 3], [1, 2], [2, 1.414], [3, 2.3]],
-	'mySecondDataset': 	[[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]],
-	'myThirdDataset': 	[[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]],
-	'myFourthDataset': 	[[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]]
-	<% end_control %>
-};
-
-// Define options.
-var options = {
-	// Define a padding for the canvas node
-	padding: {left: 30, right: 0, top: 10, bottom: 30},
-
-	// Background color to render.
-	backgroundColor: '#f2f2f2',
-
-	// Use the predefined blue colorscheme.
-	colorScheme: '$colorScheme',
-
-	// Set the labels.
-   	xTicks: [
-		{v:0, label:'January'},
-      		{v:1, label:'February'},
-      		{v:2, label:'March'},
-      		{v:3, label:'April'}
-	]
-};
-
-<% if $chartType = line %>
-	var chart = new Plotr.LineChart('$',options);
-<% else_if $chartType = bar %>
-	var chart = new Plotr.BarChart('$',options);
-<% else_if $chartType = pie %>
-	var chart = new Plotr.PieChart('$',options);
-<% end_if %>
-
-chart.addDataset(dataset);
-
-chart.render();
-</script>

templates/Includes/StatisticsAdmin_left.ss

@@ -1,10 +1,21 @@
-<h2>Report Types</h2>
+<style>
+ul.tree li.ReportType span.ReportType a {
+	background-image: url(cms/images/treeicons/sent-folder.png);
+	font-weight: bold;
+	margin: 0pt;
+}
+
+</style>
+
+<h2>Statistics</h2>
 
 <div id="treepanes">
 	<div id="sitetree_holder">
-		<ul id="statsleft_tree" class="tree unformatted">
+		<ul id="sitetree" class="tree unformatted">
-			<li><a href="$rootLink">Overview</a></li>
+			<li class="Root"><a href="#">Report Types</a>
-			<li><a href="$rootLink">Users</a></li>
+				<li id="1"><a href="$baseURL/admin/statistics/overview">Overview</a></li>
+				<li id="1"><a href="$baseURL/admin/statistics/users">Users</a></li>
+			</li>
 		</ul>
 	</div>
 </div>

templates/Includes/StatisticsAdmin_right.ss

@@ -1,31 +1,14 @@
 <!-- <div class="title"><div>Statistics</div></div> -->
 
+<form id="Form_EditForm" action="" method="post" enctype="multipart/form-data">
 <% if EditForm %>
 	$EditForm
 <% else %>
-	<form id="Form_EditForm" action="" method="post" enctype="multipart/form-data">
-		<p>Total users: $UserCount</p>
-				
-		
-		<% if UserTableRecords %>
-		<table class="sortable statstable" cellspacing="0">
-			<thead>
-				<tr><th class="nobg"></th><th>Email</th><th>Type</th></tr>
-			</thead>
-			<tbody>
-				<% control UserTableRecords %>
-				<tr><td class="id">$Iteration</td><td>$Email</td><td>$ClassName</td></tr>
-				<% end_control %>
-			</tbody>
-		</table>
-		<% else %>
-		<p>No tabular data available!</p>
-		<% end_if %>
-		
-		
-	</form>
-<% end_if %>
 
+<p>Welcome to the $ApplicationName newsletter admininistration section.  Please choose a folder from the left.</p>
+
+<% end_if %>
+</form>
 
 
 <p id="statusMessage" style="visibility:hidden"></p>