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