Updates to multi-dashboard with Evan.
authorDavid Schoonover <dsc@wikimedia.org>
Fri, 6 Jul 2012 23:24:41 +0000 (16:24 -0700)
committerDavid Schoonover <dsc@wikimedia.org>
Fri, 6 Jul 2012 23:24:41 +0000 (16:24 -0700)
lib/base/base-model.co
lib/dashboard/dashboard-model.co
lib/dashboard/dashboard-view.co
lib/main-dashboard.co
lib/template/dashboard/dashboard-tab.jade [new file with mode: 0644]
lib/template/dashboard/dashboard.jade
www/dashboard/view.jade [moved from www/dashboard.jade with 87% similarity]
www/modules.yaml

index 260c398..54b725e 100644 (file)
@@ -25,6 +25,9 @@ BaseModel = exports.BaseModel = Backbone.Model.extend mixinBase do # {{{
     
     ### Accessors
     
+    url: ->
+        "#{@urlRoot}/#{@get('id')}.json"
+    
     has: (key) ->
         @get(key)?
     
index a1e9544..d4e3fbf 100644 (file)
@@ -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
index 2831d17..eada37e 100644 (file)
@@ -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 "<li class='#tabId-button'><a href='##tabId' data-toggle='tab'>#{tab.name}</a></li>"
+        
+        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"
+    
+# }}}
+
+
+
+
+
index 9f92800..40aee2b 100644 (file)
@@ -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 (file)
index 0000000..dcb281c
--- /dev/null
@@ -0,0 +1 @@
+.tab-pane(id=tab_id, class=tab_cls, data-subview="GraphDisplayView")
index 2445010..b2e760c 100644 (file)
@@ -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")
         
 
 
similarity index 87%
rename from www/dashboard.jade
rename to www/dashboard/view.jade
index f7245fa..78a56fa 100644 (file)
@@ -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')
index b538834..f136df3 100644 (file)
@@ -52,6 +52,7 @@ development:
                     - chart-scaffold.jade
                 - dashboard:
                     - dashboard.jade
+                    - dashboard-tab.jade
                 - data:
                     - dataset.jade
                     - dataset-metric.jade