knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[view][s]: (refs #12, refs #11) add non-functioning FlotGraph view (in previous commit mostly -- by accident) and support toggling between Data Table and Graph.

Browse Source
This commit is contained in:
rgrp 2011-11-09 01:58:51 +00:00
parent 3bf7d9ceb4
commit 65656975a5
1 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/view.js
View File

@ -4,17 +4,18 @@ recline.DataExplorer = Backbone.View.extend({
tagName: 'div',
className: 'data-explorer',
template: ' \
<div class="dataexplorer-tableview-nav"> \
<span class="dataexplorer-tableview-nav-toggle"> \
<input type="radio" id="dataexplorer-tableview-nav-grid" name="dataexplorer-tableview-nav-toggle" value="grid" checked="checked" /> \
<label for="dataexplorer-tableview-nav-grid">Grid</label> \
<input type="radio" id="dataexplorer-tableview-nav-graph" name="dataexplorer-tableview-nav-toggle" value="chart" /> \
<label for="dataexplorer-tableview-nav-graph">Graph</label> \
<div class="nav"> \
<span class="nav-toggle"> \
<input type="radio" id="datatable" name="nav-toggle" value="datatable" checked="checked" /> \
<label for="nav-datatable">Data Table</label> \
<input type="radio" id="nav-graph" name="nav-toggle" value="graph" /> \
<label for="nav-graph">Graph</label> \
</span> \
</div> \
',
events: {
'change input[name="nav-toggle"]': 'navChange'
},
initialize: function() {
@ -24,11 +25,28 @@ recline.DataExplorer = Backbone.View.extend({
this.dataTable = new recline.DataTable({
model: this.model
});
this.flotGraph = new recline.FlotGraph({
model: this.model
});
this.flotGraph.el.hide();
this.el.append(this.dataTable.el)
this.el.append(this.flotGraph.el);
},
render: function() {
$(this.el).html($(this.template));
},
navChange: function(e) {
// TODO: really ugly and will not scale to more widgets ...
var widgetToShow = $(e.target).val();
if (widgetToShow == 'datatable') {
this.flotGraph.el.hide();
this.dataTable.el.show();
} else if (widgetToShow == 'graph') {
this.flotGraph.el.show();
this.dataTable.el.hide();
}
}
});
@ -43,6 +61,7 @@ recline.DataTable = Backbone.View.extend({
},
initialize: function() {
this.el = $(this.el);
var that = this;
this.model.fetch().then(function() {
that.model.getRows().then(function(rows) {
@ -78,9 +97,9 @@ recline.FlotGraph = Backbone.View.extend({
// TODO: normalize css
template: ' \
<div class="dataexplorer-tableview-panel dataexplorer-tableview-graph"></div> \
<div class="dataexplorer-tableview-editor"> \
<div class="dataexplorer-tableview-editor-info dataexplorer-tableview-editor-hide-info"> \
<div class="panel graph"></div> \
<div class="editor"> \
<div class="editor-info editor-hide-info"> \
<h1><span></span>Help</h1> \
<p>To create a chart select a column (group) to use as the x-axis \
then another column (Series A) to plot against it.</p> \
@ -90,25 +109,25 @@ recline.FlotGraph = Backbone.View.extend({
</div> \
<form> \
<ul> \
<li class="dataexplorer-tableview-editor-type"> \
<li class="editor-type"> \
<label>Graph Type</label> \
<select></select> \
</li> \
<li class="dataexplorer-tableview-editor-group"> \
<li class="editor-group"> \
<label>Group Column (x-axis)</label> \
<select></select> \
</li> \
<li class="dataexplorer-tableview-editor-series"> \
<li class="editor-series"> \
<label>Series <span>A (y-axis)</span></label> \
<select></select> \
</li> \
</ul> \
<div class="dataexplorer-tableview-editor-buttons"> \
<button class="dataexplorer-tableview-editor-add">Add Series</button> \
<div class="editor-buttons"> \
<button class="editor-add">Add Series</button> \
</div> \
<div class="dataexplorer-tableview-editor-buttons dataexplorer-tableview-editor-submit"> \
<button class="dataexplorer-tableview-editor-save">Save</button> \
<input type="hidden" class="dataexplorer-tableview-editor-id" value="chart-1" /> \
<div class="editor-buttons editor-submit"> \
<button class="editor-save">Save</button> \
<input type="hidden" class="editor-id" value="chart-1" /> \
</div> \
</form> \
</div> \
@ -119,6 +138,7 @@ recline.FlotGraph = Backbone.View.extend({
},
initialize: function() {
this.el = $(this.el);
},
toTemplateJSON: function() {
return {};