Checkpoint on Data UI.
authordsc <dsc@wikimedia.org>
Mon, 16 Apr 2012 23:20:42 +0000 (16:20 -0700)
committerdsc <dsc@wikimedia.org>
Mon, 16 Apr 2012 23:20:42 +0000 (16:20 -0700)
lib/dataset/datasource-model.co
lib/dataset/metric-model.co
lib/graph/graph-display-view.co
lib/graph/graph-edit-view.co
lib/template/dashboard.jade
lib/template/datasource-ui.jade
lib/util/csv.co
www/css/data.styl

index 7d3ef82..e06d0d5 100644 (file)
@@ -1,7 +1,9 @@
-{ _, op,
+{ _, op, CSVData,
 } = require 'kraken/util'
 { BaseModel, BaseList, BaseView,
 } = require 'kraken/base'
+{ Metric, MetricList,
+} = require 'kraken/dataset/metric-model'
 
 
 /**
@@ -18,20 +20,6 @@ DataSource = exports.DataSource = BaseModel.extend do # {{{
      */
     data : null
     
-    
-    
-    
-    
-    constructor: function DataSource
-        BaseModel ...
-    
-    initialize: ->
-        @attributes = @canonicalize @attributes
-        BaseModel::initialize ...
-        @constructor.register this
-        @on 'load-success', @onLoadSuccess, this
-    
-    
     defaults: ->
         id            : ''
         url           : ''
@@ -58,6 +46,22 @@ DataSource = exports.DataSource = BaseModel.extend do # {{{
     url: ->
         "/datasources/#{@id}.json"
     
+    
+    
+    
+    
+    constructor: function DataSource
+        BaseModel ...
+    
+    initialize: ->
+        @attributes = @canonicalize @attributes
+        BaseModel::initialize ...
+        @constructor.register this
+        @metrics = new MetricList @attributes.metrics
+        @on 'change:metrics', @onMetricChange, this
+        @on 'load-success', @onLoadSuccess, this
+    
+    
     canonicalize: (ds) ->
         ds.shortName    or= ds.name
         ds.title        or= ds.name
@@ -90,16 +94,6 @@ DataSource = exports.DataSource = BaseModel.extend do # {{{
             @trigger 'load-error', this, 'Unknown Data Format!'
         this
     
-    onLoadSuccess: ->
-        return if @ready
-        @ready = true
-        @trigger 'ready', this
-    
-    onLoadError: (jqXHR, txtStatus, err) ->
-        @_loadError = true
-        console.error "#this Error loading data! -- #msg: #{err or ''}"
-    
-    
     loadJSON: (url) ->
         $.ajax do
             url      : url
@@ -114,14 +108,25 @@ DataSource = exports.DataSource = BaseModel.extend do # {{{
         $.ajax do
             url      : url
             dataType : 'text'
-            success : (@data) ->
+            success : (data) ->
+                @data = new CSVData data
                 @trigger 'load-success', this
             error : (jqXHR, txtStatus, err) ->
                 @trigger 'load-error', this, txtStatus, err
         this
     
-    parseCSV: (data) ->
-        ...
+    onLoadSuccess: ->
+        return if @ready
+        @ready = true
+        @trigger 'ready', this
+    
+    onLoadError: (jqXHR, txtStatus, err) ->
+        @_errorLoading = true
+        console.error "#this Error loading data! -- #msg: #{err or ''}"
+    
+    
+    getData: ->
+        @data.toJSON?() or @data
     
     
     getColumnName: (idx) ->
@@ -131,6 +136,9 @@ DataSource = exports.DataSource = BaseModel.extend do # {{{
         return that.idx if _.find @get('metrics'), -> it.label is name
         -1
     
+    onMetricChange: ->
+        @metrics.reset @get 'metrics'
+    
     
 # }}}
 
index 8d22de8..b953a20 100644 (file)
@@ -2,9 +2,7 @@
 } = require 'kraken/util'
 { BaseModel, BaseList,
 } = require 'kraken/base'
-{ DataSource, DataSourceList,
-} = require 'kraken/dataset/datasource-model'
-
+DataSource = DataSourceList = null
 
 /**
  * @class
@@ -97,3 +95,9 @@ MetricList = exports.MetricList = BaseList.extend do # {{{
         metric.get('index') ? Infinity
     
 # }}}
+
+### FIXME: LOLHACKS ###
+setTimeout do
+    -> { DataSource, DataSourceList, } := require 'kraken/dataset/datasource-model'
+    10
+
index 15156cc..c4da4d8 100644 (file)
@@ -34,13 +34,14 @@ GraphDisplayView = exports.GraphDisplayView = BaseView.extend do # {{{
     
     events:
         # Select the whole permalink URI text when it receives focus.
-        'focus      .graph-permalink input'             : 'onPermalinkFocus'     
+        'focus      .graph-permalink input'             : 'onPermalinkFocus'
         #     'click    .redraw-button'                  : 'stopAndRender'
         #     'click    .load-button'                    : 'load'
-
+    
     data  : {}
     ready : false
-
+    
+    
     constructor: function GraphDisplayView
         BaseView ...
     
index 5547400..6f50b41 100644 (file)
@@ -43,10 +43,10 @@ GraphEditView = exports.GraphEditView = BaseView.extend do # {{{
         'click    .save-button'                    : 'save'
         'click    .done-button'                    : 'done'
         'keypress .graph-details input[type="text"]'     : 'onKeypress'
-        'submit   .graph-details'                        : 'onDetailsSubmit'
+        'submit   form.graph-details'                    : 'onDetailsSubmit'
         'change   :not(.chart-options) select'           : 'onDetailsSubmit'
         'keypress .chart-options .value'                 : 'onKeypress'
-        'submit   .chart-options'                        : 'onOptionsSubmit'
+        'submit   form.chart-options'                    : 'onOptionsSubmit'
         'change   .chart-options input[type="checkbox"]' : 'onOptionsSubmit'
     
     
index 654be23..3688666 100644 (file)
@@ -1,4 +1,4 @@
-section#graph-list
+section#dashboard
     .page-header
         h1 Wikimedia Report Card 
             small February 2012
index 83be803..193b4eb 100644 (file)
@@ -22,24 +22,22 @@ section.datasource-ui
                         - var ds_target = "#"+graph_id+" .datasource-ui .datasource-selector .datasource-source.datasource-source-"+ds.id
                         li(class=activeClass): a(href="#datasource-selector_datasource-source-#{ds.id}", data-toggle="tab", data-target=ds_target) #{ds.shortName}
                 
-                .datasource-sources-details.tab-content
+                .datasource-sources-info.tab-content
                     for source, k in datasources.models
                         - var ds = source.attributes
                         - var activeClass = (source_id === ds.id ? 'active' : '')
                         .datasource-source.tab-pane(class="datasource-source-#{ds.id} #{activeClass}")
-                            .well
-                                .datasource-source-details
-                                    .source-name #{ds.name}
-                                    .source-id #{ds.id}
-                                    .source-format #{ds.format}
-                                    .source-charttype #{ds.chart.chartType}
-                                    input.source-url(type="text", name="source-url", value=ds.url)
+                            .datasource-source-details.well
+                                .source-name #{ds.name}
+                                .source-id #{ds.id}
+                                .source-format #{ds.format}
+                                .source-charttype #{ds.chart.chartType}
+                                input.source-url(type="text", name="source-url", value=ds.url)
                                 .datasource-source-time
                                     .source-time-start #{ds.timespan.start}
                                     .source-time-end #{ds.timespan.end}
                                     .source-time-step #{ds.timespan.step}
                             .datasource-source-metrics
-                                h6 Metrics
                                 table.table.table-striped
                                     thead
                                         tr
index cdab5ae..58fa779 100644 (file)
@@ -186,6 +186,10 @@ class CSVData
         @data = _.merge [], @origData
         @rebuildColumns()
     
+    
+    toJSON: ->
+        _.merge [], @data
+    
 
 module.exports = CSVData
 
index 7a83db6..42f2b26 100644 (file)
@@ -189,15 +189,20 @@ section.graph section.data-ui
                 li a
                     min-width 150px
             
-            .well
-                padding 0.75em
-            
-            .datasource-sources-details
+            .datasource-sources-info
                 display table-cell
                 padding 1em
+                
+                .well
+                    padding 0.75em
+                
                 .source-id, .source-format, .source-charttype,
-                thead, .source-metric-idx, .source-metric-type
+                thead, .source-metric-idx
                     display none
+                
+                .datasource-source-details
+                    font-size 12px
+                
                 .source-name
                     font-size 15px
                     margin-bottom 0.75em
@@ -205,11 +210,13 @@ section.graph section.data-ui
                     display block
                     width 95%
                     font-family menlo, monospace
+                    font-size 11px
                 .datasource-source-time
                     margin 0.5em
                     & > *
                         display inline-block
                         margin-right 1em
+                
                 .datasource-source-metric
                     &, &:hover
                         cursor pointer
@@ -218,6 +225,8 @@ section.graph section.data-ui
                         background-color #d9edf7
                         border 1px solid #3a87ad
                         border-width 1px 0
+                    .source-metric-type
+                        font-family menlo, monospace