mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-10-22 08:05:56 +02:00
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
This commit is contained in:
Ingo Schommer
parent
dd02cd2945
commit
bdb4e5ae65
@ -3,6 +3,7 @@
|
||||
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
|
||||
@ -11,7 +12,8 @@ class StatisticsAdmin extends LeftAndMain {
|
||||
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");
|
||||
}
|
||||
@ -24,44 +26,34 @@ class StatisticsAdmin extends LeftAndMain {
|
||||
* 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() {
|
||||
return $this->getSiteTreeFor("SiteTree");
|
||||
function BrowserPie() {
|
||||
return Statistics::BrowserChart();
|
||||
}
|
||||
|
||||
function UserCount($date = null) {
|
||||
$allUsers = DataObject::get('Member');
|
||||
return $allUsers->TotalItems();
|
||||
function UserTable() {
|
||||
//Statistics::getBrowserChart();
|
||||
return Statistics::UserRecordTable();
|
||||
}
|
||||
|
||||
function UserTableRecords() {
|
||||
return DataObject::get('Member');
|
||||
function ViewTable() {
|
||||
return Statistics::getViews('all');
|
||||
}
|
||||
|
||||
public function users($params) {
|
||||
return Statistics::UserRecordTable();
|
||||
}
|
||||
|
||||
public function overview($params) {
|
||||
return $this->BrowserPie();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,44 +1,125 @@
|
||||
table.statstable {
|
||||
border-collapse: collapse;
|
||||
width: 90%;
|
||||
margin: 20px 0 20px 0;
|
||||
font-size: 12px;
|
||||
|
||||
font-family:arial;
|
||||
background-color: #cdcdcd;
|
||||
margin:10px 0pt 15px;
|
||||
font-size: 10pt;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.statstable td,.statstable th {
|
||||
padding: 0.2em;
|
||||
border: 1px solid #CCC;
|
||||
.statstable thead tr th {
|
||||
background-color: #B8CDE4;
|
||||
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 {
|
||||
background: #CAE8EA url(../images/statistics/bg_header.jpg) no-repeat;
|
||||
|
||||
.statstable thead th a {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.statstable th.nobg {
|
||||
background: #fff;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
.statstable th.forwardSort {
|
||||
background-color: #69A3F2;
|
||||
background-image: url(../images/statistics/desc.gif);
|
||||
}
|
||||
|
||||
.statstable thead,.statstable tfoot {
|
||||
background-color: #DDD;
|
||||
|
||||
.statstable th.reverseSort {
|
||||
background-color: #69A3F2;
|
||||
background-image: url(../images/statistics/asc.gif);
|
||||
}
|
||||
|
||||
.statstable tr.rowodd {
|
||||
background-color: #fff;
|
||||
|
||||
.statstable tr.alt td {
|
||||
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;
|
||||
}
|
||||
|
||||
BIN
images/statistics/asc.gif
Normal file
BIN
images/statistics/asc.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 B |
BIN
images/statistics/bg.gif
Normal file
BIN
images/statistics/bg.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 64 B |
BIN
images/statistics/desc.gif
Normal file
BIN
images/statistics/desc.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 B |
43
javascript/StatisticsAdmin.js
Normal file
43
javascript/StatisticsAdmin.js
Normal file
@ -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());
|
||||
});
|
||||
@ -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>
|
||||
@ -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">
|
||||
<li><a href="$rootLink">Overview</a></li>
|
||||
<li><a href="$rootLink">Users</a></li>
|
||||
<ul id="sitetree" class="tree unformatted">
|
||||
<li class="Root"><a href="#">Report Types</a>
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
<p>Welcome to the $ApplicationName newsletter admininistration section. Please choose a folder from the left.</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 %>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<p id="statusMessage" style="visibility:hidden"></p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user