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
/**
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
{ _, op,
} = require 'kraken/util'
-{ BaseView,
+{ BaseModel, BaseView,
} = require 'kraken/base'
{ Graph, GraphList, GraphDisplayView,
} = require 'kraken/graph'
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:
# - 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 {{{
### }}}
+
+/**
+ * @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"
+
+# }}}
+
+
+
+
+
# 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
.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")