From e02188e01b7f117c21eea72c6a9ee9b8ad716dab Mon Sep 17 00:00:00 2001 From: rgrp Date: Wed, 9 Nov 2011 02:54:31 +0000 Subject: [PATCH] [view/chart][m]: (refs #11) chart view working a bit more (e.g. chart renders (though empty) and drop downs have column names). --- demo/index.html | 1 + demo/style/flot-graph.css | 114 ++++++++++++++++++++++++++++++++++++++ src/view.js | 89 ++++++++++++++++++++++------- 3 files changed, 185 insertions(+), 19 deletions(-) create mode 100644 demo/style/flot-graph.css diff --git a/demo/index.html b/demo/index.html index 990697f2..db4f5548 100755 --- a/demo/index.html +++ b/demo/index.html @@ -5,6 +5,7 @@ Data Explorer + diff --git a/demo/style/flot-graph.css b/demo/style/flot-graph.css new file mode 100644 index 00000000..1c8920ba --- /dev/null +++ b/demo/style/flot-graph.css @@ -0,0 +1,114 @@ +.data-graph-container .graph { + width: 650px; + height: 400px; + float: left; +} + +.data-graph-container .editor { + z-index: 1; + background-color: #efefef; + right: 0; + left: auto; + width: 198px; + padding: 5px 10px; + border: 1px solid #ccc; + overflow: auto; + overflow-x: hidden; +} + +.data-graph-container .editor ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +.data-graph-container .editor li { + margin-bottom: 10px; +} + +.data-graph-container .editor .data-graph-container .editor-group { + padding-bottom: 10px; + margin-bottom: 10px; + border-bottom: 1px solid #ddd; +} + +.data-graph-container .editor label { + display: block; + font-weight: bold; + color: #555; + line-height: 1.4; +} + +.data-graph-container .editor label a { + float: right; + font-size: 11px; + color: #999; + font-weight: normal; +} + +.data-graph-container .editor select { + width: 100%; +} + +.data-graph-container .editor button { + float: right; +} + +.data-graph-container .editor-buttons { + clear: right; + overflow: hidden; +} + +.data-graph-container .editor-submit { + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid #ddd; +} + +.data-graph-container .editor-info { + border-bottom: 1px solid #ddd; + margin-bottom: 10px; +} + +.data-graph-container .editor-info h1, +.data-graph-container .editor-info p { + font-size: 12px; + margin: 0 0 10px; + color: #555; +} + +.data-graph-container .editor-info h1 { + line-height: 16px; + cursor: pointer; + font-family: sans-serif; + font-size: 13px; + font-weight: bold; + margin: 0 0 4px; +} + +.data-graph-container .editor-info h1 span { + position: relative; + top: 1px; + display: inline-block; + width: 12px; + height: 12px; + background: url(jquery-ui/css/ckan/images/ui-icons_444444_256x240.png) no-repeat -68px -17px; +} + +.data-graph-container .editor-hide-info h1 span { + background-position: -36px -18px; +} + +.data-graph-container .editor-hide-info p { + display: none; +} + +.dataexplorer-tableview-hide-editor .data-graph-container .editor { + display: none; +} + +.dataexplorer-tableview-hide-editor .dataexplorer-tableview-panel { + right: 0; +} + diff --git a/src/view.js b/src/view.js index 6e6cf111..fd4e974b 100644 --- a/src/view.js +++ b/src/view.js @@ -21,16 +21,21 @@ recline.DataExplorer = Backbone.View.extend({ initialize: function() { this.el = $(this.el); this.render(); - // initialize of dataTable calls render - this.dataTable = new recline.DataTable({ - model: this.model + var self = this; + // retrieve basic data like headers etc + // note this.model and dataset returned are the same + this.model.fetch().then(function(dataset) { + // initialize of dataTable calls render + self.dataTable = new recline.DataTable({ + model: dataset + }); + self.flotGraph = new recline.FlotGraph({ + model: dataset + }); + self.flotGraph.el.hide(); + self.el.append(self.dataTable.el) + self.el.append(self.flotGraph.el); }); - 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() { @@ -46,6 +51,11 @@ recline.DataExplorer = Backbone.View.extend({ } else if (widgetToShow == 'graph') { this.flotGraph.el.show(); this.dataTable.el.hide(); + // Have to call this here + // If you attempt to render with flot when graph is hidden / invisible flot will complain with + // Invalid dimensions for plot, width = 0, height = 0 + // (Could hack this by moving plot left -1000 or similar ...) + this.flotGraph.createPlot(); } } }); @@ -63,12 +73,10 @@ 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) { - that._currentRows = rows; - that.render() - }); - }) + this.model.getRows().then(function(rows) { + that._currentRows = rows; + that.render() + }); }, toTemplateJSON: function() { var modelData = this.model.toJSON() @@ -115,11 +123,19 @@ recline.FlotGraph = Backbone.View.extend({ \
  • \ \ - \ + \
    • \
  • \ \ - \ + \
    • \ \
    \ @@ -135,17 +151,52 @@ recline.FlotGraph = Backbone.View.extend({ ', events: { + 'change select': 'onEditorSubmit' }, - initialize: function() { + onEditorSubmit: function(e) { + var select = this.el.find('.editor-group select'); + }, + + initialize: function(options, chart) { this.el = $(this.el); + this.chart = chart; + this.render(); }, toTemplateJSON: function() { - return {}; + return this.model.toJSON(); }, render: function() { htmls = $.mustache(this.template, this.toTemplateJSON()); $(this.el).html(htmls); + this.$graph = this.el.find('.panel.graph'); return this; + }, + createPlot: function () { + // only lines for the present + options = { + id: 'line', + name: 'Line Chart' + }; + this.plot = $.plot(this.$graph, this.createSeries(), options); + return this; + }, + + createSeries: function () { + var series = [], view = this; + if (this.chart) { + $.each(this.chart.series, function (seriesIndex, field) { + var points = []; + $.each(view.data, function (index) { + var x = this[view.chart.groups], y = this[field]; + if (typeof x === 'string') { + x = index; + } + points.push([x, y]); + }); + series.push({data: points, label: field}); + }); + } + return series; } });