datatable.html revision 98c7a407991cdb0caa6bce97544759d7d56b39e0
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<html>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<head>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<title>Datatable Tests</title>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<style>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte html {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte font-family: sans-serif;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte font-size: smaller;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte }
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte .message {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte padding: 5px;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte font-size:120%;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte background: #FFFCB6;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte border:1px solid #C9C675;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte }
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte #results dt {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte font-weight:bold;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte padding:3px;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte display:block;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte }
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte #results dd {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte font-weight:normal;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte color:grey;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte }
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte #results dd span {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte color: red;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte font-weight:bold;
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte }
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte</style>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte</head>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<body class="yui3-skin-sam">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h1>Datatable Tests</h1>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p>To test the performance of various datatables, look at the following sections in the code:
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte <pre>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte//large or small dataset.
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Fortedata: large,
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte//---------------------------------------------
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte// Special instructions
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte//---------------------------------------------
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte_should: {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte ignore: {
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte //ignore following tests (good to do if you are doing a large dataset)
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte testBaseDatatable: true,
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte testXYDatatable: true,
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte testXDatatable: true,
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte testYDatatable_FixedCol: true,
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte testYDatatable_AutoCol: true,
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte testXYDatatable_BigHeaders: false
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte }
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte}
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte </pre>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte Toggle <code>data</code> from <code>large</code> to <code>small</code> to get a different sized dataset. The <code>ignore</code> object determines which table to load. If testing performance, it is recommended that you only enable 1 table at a time.</p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte <hr>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p><input type="button" value="Run Tests" id="btnRun" disabled=true></p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte <hr>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<div id="results">
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte <h3>Test Results</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte</div>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>Base Datatable</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<div id="base"></div>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>Scrolling XY Datatable (Set columnwidths)</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<P>A general XY scrolling datatable. Column widths are provided for all columns, table width and height is provided.</p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<div id="scrolling-xy"></div>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>Scrolling X Datatable (Auto Columns)</h3>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<p>A X-scrolling datatable. Column A and B have specified widths. The rest of the columns do not have any widths specified. Only a height of 200px is specified.</p>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<div id="scrolling-x"></div>
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte
fcf3ce441efd61da9bb2884968af01cb7c1452ccJohn Forte<h3>Scrolling Y Datatable</h3>
<p>A Y-scrolling datatable. Column widths are provided for all columns, table height is provided. Since all cols have specified width, you may see this table overflowing past its container div (the blue div in the background). </p>
<div id="scrolling-y"></div>
<h3>Scrolling Datatable with no ColumnWidth</h3>
<p>A Y-scrolling datatable, where only the first 2 columns have a specified width. Only the table height is provided.</p>
<div id="scrolling-colwidth"></div>
<h3>Scrolling Datatable with Big Headers</h3>
<p>A XY-scrolling datatable, where only the first 2 columns have a specified width. Table height and width is provided. The table headers are of larger width than the table contents</p>
<div id="scrolling-bigcols"></div>
<script type="text/javascript">
(function() {
YUI({
base: "/build/",
filter: "debug",
logInclude:{"TestRunner":true},
useConsole: true
}).use("console", "test", "dump", "datatable", "profiler","node","json-parse", function(Y) {
// Set up the page
var ASSERT = Y.Assert,
ARRAYASSERT = Y.ArrayAssert,
BTNRUN = Y.one("#btnRun"),
TestRunner = Y.Test.Runner;
BTNRUN.set("disabled", false);
TestRunner.subscribe(TestRunner.TEST_CASE_COMPLETE_EVENT, testCompleted);
Y.on("click", function(e){
TestRunner.run();
BTNRUN.set("value", 'Running...');
BTNRUN.set("disabled", true);
}, BTNRUN);
function testCompleted() {
BTNRUN.set("value", 'Test Completed');
Y.log('Test Completed');
}
var myConsole = new Y.Console().render();
//large data set
var large = [];
for (var i=0; i<500; i++) {
large[i] = {a: i+1, b:i+2, c:i+3, d: i+4, e: i+5, f: i+6, g:i+7};
}
//small data set
var small = [{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0},
{a:3, b:2, c:1, d:6, e:7, f:2, g:0}, {a:9, b:8, c:7, d:6, e:7, f:2, g:0}, {a:1, b:2, c:3, d:6, e:7, f:2, g:0}];
var testBasic = new Y.Test.Case({
name: "API Tests",
nestedcols: [
{label:"Grandparent", children:[
{key: "a"},
{label:"Parent", children: [
{key:"b"},
{key:"c"}
]}
]}
],
cols: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width: '120px'},{key:"c", width:'75px'},{key:"d", width:'150px'},{key:"3", width:'75px'},{key:"f", width:'150px'},{key:"g", width:'75px'}],
cols2: [{key:"a", field:"a", label:"AAA", sortable:true, className: ["oneClass", "anotherClass"], width:'75px'},{key:"b", abbr:"bbb", className:"myClass", width:'75px'},{key:"c"},{key:"d"},{key:"e"},{key:"f"},{key:"g"}],
cols3: [{key:"a", field:"a", label:"Lorem Ipsum Dolor SIt Amet", sortable:true, className: ["oneClass", "anotherClass"], width:'5px'},{key:"b", abbr:"Lorem Ipsum Dolor SIt Amet", className:"myClass", width:'75px'},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"},{key:"Lorem Ipsum Dolor SIt Amet"}],
//large or small dataset.
data: small,
//---------------------------------------------
// Special instructions
//---------------------------------------------
_should: {
ignore: {
//ignore following tests (good to do if you are doing a large dataset)
testBaseDatatable: true,
testXYDatatable: true,
testXDatatable: true,
testYDatatable_FixedCol: true,
testYDatatable_AutoCol: true,
testXYDatatable_BigHeaders: false
}
},
//---------------------------------------------
// Setup and tear down
//---------------------------------------------
setUp : function () {
//create recordset
//this.rs = new Y.Recordset({records:this.initialData});
//Some Ways to access recordset properties
//Y.log(rs.getRecordByIndex(0).getValue('a'));
//Y.log(rs.get('records').length);
},
tearDown : function () {
delete this.dt;
},
/////////////////////////////////////////////////////////////////////////////
//
// Displaying Report
//
/////////////////////////////////////////////////////////////////////////////
displayReport: function(data) {
var dl = Y.Node.create('<dl></dl>'),
results = Y.one('#results');
Y.each(data, function(v,k,o) {
var dt = Y.Node.create('<dt>'+k+'</dt>');
var dd = Y.Node.create('<dd>' + v.calls + ' call(s) at ' + v.avg + ' ms/call = <span>' + Math.round(v.avg*v.calls) + '</span> ms total</dd>');
dt.appendChild(dd);
dl.appendChild(dt);
});
results.appendChild(dl);
},
reportParser: function(report) {
return (report.calls > 0 && report.avg > 0.2);
},
/////////////////////////////////////////////////////////////////////////////
//
// Tests
//
/////////////////////////////////////////////////////////////////////////////
testBaseDatatable: function() {
var sel = "#base";
Y.Profiler.start('dtBase');
this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, caption:"Base"});
Y.Profiler.registerObject('dt', this.dt);
this.dt.render(sel);
Y.Profiler.stop('dtBase');
var msg = Y.Profiler.getAverage('dtBase') + 'ms taken to display';
var report = Y.Profiler.getFullReport(this.reportParser);
this.displayReport(report);
Y.Profiler.unregisterObject('dt');
Y.log(msg, "time");
Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
},
testXYDatatable: function() {
var sel = '#scrolling-xy';
Y.Profiler.start('dtXY');
this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption: "ScrollingDataTable"});
Y.Profiler.registerObject('dt', this.dt);
this.dt.plug(Y.Plugin.DataTableScroll, {width:"200px", height:"300px", scroll:"xy"});
this.dt.render(sel);
Y.Profiler.stop('dtXY');
var msg = Y.Profiler.getAverage('dtXY') + 'ms taken to display';
var report = Y.Profiler.getFullReport(this.reportParser);
this.displayReport(report);
Y.Profiler.unregisterObject('dt');
Y.log(msg, "time");
Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
},
testXDatatable: function() {
var sel = "#scrolling-x";
Y.Profiler.start('dtX');
this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, caption:"ScrollingDataTable"});
Y.Profiler.registerObject('dt', this.dt);
this.dt.plug(Y.Plugin.DataTableScroll, {width:"150px", scroll:"x"});
this.dt.render(sel);
Y.Profiler.stop('dtX');
var msg = Y.Profiler.getAverage('dtX') + 'ms taken to display';
var report = Y.Profiler.getFullReport(this.reportParser);
this.displayReport(report);
Y.Profiler.unregisterObject('dt');
Y.log(msg, "time");
Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
},
testYDatatable_FixedCol: function() {
var sel = "#scrolling-y";
Y.Profiler.start('dtY1');
this.dt = new Y.DataTable.Base({columnset:this.cols, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
Y.Profiler.registerObject('dt', this.dt);
this.dt.plug(Y.Plugin.DataTableScroll, {height:"300px", scroll:"y"});
this.dt.render(sel);
Y.Profiler.stop('dtY1');
var msg = Y.Profiler.getAverage('dtY1') + 'ms taken to display';
var report = Y.Profiler.getFullReport(this.reportParser);
this.displayReport(report);
Y.Profiler.unregisterObject('dt');
Y.log(msg, 'time');
Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
},
testYDatatable_AutoCol: function() {
var sel = "#scrolling-colwidth";
Y.Profiler.start('dtY2');
this.dt = new Y.DataTable.Base({columnset:this.cols2, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
Y.Profiler.registerObject('dt', this.dt);
this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", scroll:"y"});
this.dt.render(sel);
Y.Profiler.stop('dtY2');
var msg = Y.Profiler.getAverage('dtY2') + 'ms taken to display';
var report = Y.Profiler.getFullReport(this.reportParser);
this.displayReport(report);
Y.Profiler.unregisterObject('dt');
Y.log(msg, 'time');
Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
},
testXYDatatable_BigHeaders: function() {
var sel = "#scrolling-bigcols";
Y.Profiler.start('dtHeaders');
this.dt = new Y.DataTable.Base({columnset:this.cols3, recordset:this.data, tdValueTemplate:"plug then render {value}", caption:"ScrollingDataTable"});
Y.Profiler.registerObject('dt', this.dt);
this.dt.plug(Y.Plugin.DataTableScroll, {height:"250px", width:"400px", scroll:"xy"});
this.dt.render(sel);
Y.Profiler.stop('dtHeaders');
var msg = Y.Profiler.getAverage('dtHeaders') + 'ms taken to display';
var report = Y.Profiler.getFullReport(this.reportParser);
this.displayReport(report);
Y.Profiler.unregisterObject('dt');
Y.log(msg, 'time');
Y.one(sel).appendChild('<p class="message">'+msg+'</p>');
}
});
var suite = new Y.Test.Suite({name:"Datatable Test Suite"});
suite.add(testBasic);
Y.Test.Runner.setName("Datatable Test Runner");
Y.Test.Runner.add(suite);
//Y.Test.Runner.run();
});
})();
</script>
</body>
</html>