From: David Schoonover Date: Fri, 6 Jul 2012 23:24:41 +0000 (-0700) Subject: Updates to multi-dashboard with Evan. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=699ba06329ac45dbffa6d14af46339c53dda1f19;p=limn.git Updates to multi-dashboard with Evan. --- diff --git a/lib/base/base-model.co b/lib/base/base-model.co index 260c398..54b725e 100644 --- a/lib/base/base-model.co +++ b/lib/base/base-model.co @@ -25,6 +25,9 @@ BaseModel = exports.BaseModel = Backbone.Model.extend mixinBase do # {{{ ### Accessors + url: -> + "#{@urlRoot}/#{@get('id')}.json" + has: (key) -> @get(key)? diff --git a/lib/dashboard/dashboard-model.co b/lib/dashboard/dashboard-model.co index a1e9544..d4e3fbf 100644 --- a/lib/dashboard/dashboard-model.co +++ b/lib/dashboard/dashboard-model.co @@ -24,65 +24,15 @@ Dashboard = exports.Dashboard = BaseModel.extend do # {{{ initialize: -> BaseModel::initialize ... - @getGraphs() + # @getGraphs() defaults: -> name : null tabs : [ { name:"Main", graph_ids:[] } ] - - graph_ids : <[ - unique_visitors - reach - pageviews - pageviews_mobile - pageviews_mobile_target - commons - articles - articles_per_day - edits - new_editors - active_editors - active_editors_target - very_active_editors - ]> - - - tabs : { - core : - graph_ids : <[ - unique_visitors - pageviews - pageviews_mobile - pageviews_mobile_target - new_editors - active_editors - active_editors_target - ]> - name: ".core-graphs-pane" - - other : - graph_ids : <[ - reach - commons - articles - articles_per_day - edits - very_active_editors - ]> - name: ".other-graphs-pane" - - dev : - graph_ids : <[ - mobile_devices - mobile_devices_browsers - mobile_devices_applications - ]> - name: ".dev-graphs-pane" - } - - addTab: (tabName) -> - ... + load: -> + @once 'fetch-success', (~> @getGraphs()) .loadModel() + this /** @@ -127,7 +77,8 @@ Dashboard = exports.Dashboard = BaseModel.extend do # {{{ graph.once 'ready', -> next.ok tuple .unflatten() .seq_ (next, graph_tuples) ~> - @graphs = _.generate graph_tuples + # @graphs = _.generate graph_tuples + @graphs.reset _.pluck graph_tuples, 1 console.log('[setter]\tcalling ready') @triggerReady() this diff --git a/lib/dashboard/dashboard-view.co b/lib/dashboard/dashboard-view.co index 2831d17..eada37e 100644 --- a/lib/dashboard/dashboard-view.co +++ b/lib/dashboard/dashboard-view.co @@ -2,7 +2,7 @@ Seq = require 'seq' { _, op, } = require 'kraken/util' -{ BaseView, +{ BaseModel, BaseView, } = require 'kraken/base' { Graph, GraphList, GraphDisplayView, } = require 'kraken/graph' @@ -34,17 +34,15 @@ DashboardView = exports.DashboardView = BaseView.extend do # {{{ constructor: function DashboardView(options={}) - @model = options.model - # @subviews = [] - @graphs = new GraphList + @graphs = new GraphList BaseView ... initialize: -> @model or= new Dashboard - BaseView::initialize ... + DashboardView.__super__.initialize ... # @graphs.on 'add', @attachGraphs, this # @graphs.on 'add', @attachGraph, this - @model.on 'ready', @load, this + @model.once 'ready', @load, this .load() # FIXME: @@ -54,28 +52,40 @@ DashboardView = exports.DashboardView = BaseView.extend do # {{{ # - only render graph when scrolling makes it visible load: -> console.log "#this.load! Model ready!", @model - _.map @model.tabs, @addTab + Seq @model.get('tabs') + .seqEach_ @addTab + .seq ~> + console.log "#{this}.load! Done adding tabs!" + @triggerReady() - addTab: (tab) -> + addTab: (nextTab, tab) -> # self = this - graphs = _(tab.graph_ids).map((graph_id) ~> @model.graphs[graph_id]) - Seq(graphs) + # a(href="#core-graphs", data-toggle="tab") Core + tabModel = new BaseModel tab + tabView = @addSubview new DashboardTabView {model:tabModel} + tabId = tabView.getTabId() + @$ "nav > ul.nav" + .append "
  • #{tab.name}
    • " + + graphs = _(tab.graph_ids).map (graph_id) ~> @model.graphs.get graph_id + Seq graphs .parMap_ (next, graph) ~> @graphs.add graph next null, new GraphDisplayView {model:graph} - .parMap_ (next, view) ~> - return next.ok() if view.isAttached - @addSubview view - tabEl = @$ tab.name - if tabEl.length - tabEl.append view.$el - view.isAttached = true - else - console.log "#this.addTab: Unable to find bind-point for #view!", view + .parMap_ (next, graphView) ~> + return next.ok() if graphView.isAttached + tabView.addSubview graphView + # tabEl = @$ tab.name + # if tabEl.length + # tabEl.append view.$el + # view.isAttached = true + # else + # console.log "#this.addTab: Unable to find bind-point for #view!", view next.ok() .seq ~> - console.log "#this.addTab: All graphs added!" - @render() + console.log "#{this}.addTab: All graphs added!" + # @render() + nextTab.ok() this ### Tabs {{{ @@ -128,3 +138,37 @@ DashboardView = exports.DashboardView = BaseView.extend do # {{{ ### }}} + +/** + * @class + * @extends BaseView + */ +DashboardTabView = exports.DashboardTabView = BaseView.extend do # {{{ + __bind__ : <[ ]> + className : 'tab-pane' + tag : 'div' + template : require 'kraken/template/dashboard/dashboard-tab' + + + constructor: function DashboardTabView + BaseView ... + + initialize: -> + BaseView::initialize ... + + getTabId: -> + _.underscored @model.get('name') .toLowerCase() + '-graphs-tab' + + toTemplateLocals: -> + json = DashboardTabView.__super__.toTemplateLocals ... + tab_name = _.underscored @model.get('name') .toLowerCase() + json import + tab_cls : "#tab_name-graphs-pane" + tab_id : "#tab_name-graphs-tab" + +# }}} + + + + + diff --git a/lib/main-dashboard.co b/lib/main-dashboard.co index 9f92800..40aee2b 100644 --- a/lib/main-dashboard.co +++ b/lib/main-dashboard.co @@ -20,10 +20,17 @@ root = this # Create the Graph Scaffold main = -> + # Process URL + loc = String root.location + data = {} + if match = /\/dashboards\/([^\/?]+)/i.exec loc + id = match[1] + data.id = data.slug = id unless _ <[ edit new ]> .contains id + # Instantiate model & view root.app = new AppView -> - @model = root.dashboard = new Dashboard - @view = root.view = new DashboardView {@model} + @model = root.dashboard = new Dashboard data, {+parse} + @view = root.view = new DashboardView {@model} jQuery main diff --git a/lib/template/dashboard/dashboard-tab.jade b/lib/template/dashboard/dashboard-tab.jade new file mode 100644 index 0000000..dcb281c --- /dev/null +++ b/lib/template/dashboard/dashboard-tab.jade @@ -0,0 +1 @@ +.tab-pane(id=tab_id, class=tab_cls, data-subview="GraphDisplayView") diff --git a/lib/template/dashboard/dashboard.jade b/lib/template/dashboard/dashboard.jade index 2445010..b2e760c 100644 --- a/lib/template/dashboard/dashboard.jade +++ b/lib/template/dashboard/dashboard.jade @@ -6,18 +6,12 @@ section#dashboard.centered .row .graphs.tabbable nav + //- Dashboard Tab Buttons appended here ul.nav.subnav.nav-pills - li: h3 Graphs - li.active: a(href="#core-graphs", data-toggle="tab") Core - li: a(href="#other-graphs", data-toggle="tab") Others - if IS_DEV - li: a(href="#dev-graphs", data-toggle="tab") Dev - - .tab-content - .core-graphs-pane.tab-pane.active(id="core-graphs") - .other-graphs-pane.tab-pane(id="other-graphs") - if IS_DEV - .dev-graphs-pane.tab-pane(id="dev-graphs") + li: h3 Graphs + + //- Dashboard Tabs (each with a collection of GraphDisplayViews) appended here + .tab-content(data-subview="DashboardTabView") diff --git a/www/dashboard.jade b/www/dashboard/view.jade similarity index 87% rename from www/dashboard.jade rename to www/dashboard/view.jade index f7245fa..78a56fa 100644 --- a/www/dashboard.jade +++ b/www/dashboard/view.jade @@ -1,7 +1,7 @@ -extends layout +extends ../layout block title - title Wikimedia Report Card - April 2012 + title Dashboard | Limn append styles mixin css('graph-display.css') diff --git a/www/modules.yaml b/www/modules.yaml index b538834..f136df3 100644 --- a/www/modules.yaml +++ b/www/modules.yaml @@ -52,6 +52,7 @@ development: - chart-scaffold.jade - dashboard: - dashboard.jade + - dashboard-tab.jade - data: - dataset.jade - dataset-metric.jade