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)
data/graphs/ohai.json
data/graphs/root.yaml
docs/todo.md
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 6dbc35f..a38457a 100644 (file)
     
     "chartType": "dygraphs",
     "options": {
-        "animatedZooms": true,
-        "avoidMinZero": false,
-        "axis": null,
-        "axisLabelColor": "#666666",
-        "axisLabelFontSize": 14,
-        "axisLabelFormatter": null,
-        "axisLabelWidth": 50,
-        "axisLineColor": "#AAAAAA",
-        "axisLineWidth": 0.3,
-        "axisTickSize": 3,
-        "colorSaturation": 1,
-        "colorValue": 0.5,
-        "colors": [ "#FF0097", "#EF8158", "#83BB32", "#182B53", "#4596FF", "#553DC9", "#AD3238", "#00FFBC", "#F1D950" ],
-        "connectSeparatedPoints": false,
-        "customBars": false,
-        "dateWindow": null,
-        "delimiter": ",",
         "digitsAfterDecimal": 2,
-        "displayAnnotations": false,
         "drawPoints": true,
-        "drawXAxis": true,
-        "drawXGrid": true,
-        "drawYAxis": true,
-        "drawYGrid": true,
-        "errorBars": false,
-        "file": null,
-        "fillAlpha": 0.15,
-        "fillGraph": false,
-        "fractions": false,
-        "gridLineColor": "#D8D8D8",
-        "gridLineWidth": 0.3,
-        "hideOverlayOnMouseOut": true,
-        "highlightCircleSize": 4,
-        "includeZero": false,
-        "interactionModel": null,
-        "isZoomedIgnoreProgrammaticZoom": false,
-        "labels": null,
-        "labelsDiv": null,
-        "labelsDivStyles": null,
-        "labelsDivWidth": 250,
         "labelsKMB": true,
-        "labelsKMG2": false,
-        "labelsSeparateLines": true,
-        "labelsShowZeroValues": true,
-        "legend": "always",
         "logscale": true,
-        "maxNumberWidth": 30,
-        "panEdgeFraction": null,
-        "pixelsPerLabel": null,
-        "pixelsPerXLabel": null,
-        "pixelsPerYLabel": null,
         "pointSize": 1,
-        "rangeSelectorHeight": 40,
-        "rangeSelectorPlotFillColor": "#A7B1C4",
-        "rangeSelectorPlotStrokeColor": "#808FAB",
-        "rightGap": 20,
-        "rollPeriod": 1,
-        "showLabelsOnHighlight": true,
-        "showRangeSelector": false,
-        "showRoller": false,
-        "sigFigs": null,
-        "sigma": 2,
-        "stackedGraph": false,
-        "stepPlot": false,
-        "strokePattern": null,
-        "strokeWidth": 4,
-        "ticker": null,
-        "title": null,
-        "titleHeight": 18,
-        "valueFormatter": null,
-        "valueRange": null,
-        "visibility": null,
-        "wilsonInterval": true,
-        "xAxisHeight": null,
-        "xAxisLabelFormatter": null,
-        "xAxisLabelWidth": 55,
-        "xLabelHeight": 18,
-        "xValueFormatter": null,
-        "xValueParser": null,
-        "xlabel": null,
-        "y2label": null,
-        "yAxisLabelFormatter": null,
-        "yAxisLabelWidth": 50,
-        "yLabelWidth": 18,
-        "yValueFormatter": null,
-        "ylabel": null
+        "strokeWidth": 4
     }
 }
index e5d252d..bbfcfa6 100644 (file)
@@ -39,7 +39,7 @@ options   :
     fractions                       : false
     gridLineColor                   : "#D8D8D8"
     gridLineWidth                   : 0.3
-    hideOverlayOnMouseOut           : true
+    hideOverlayOnMouseOut           : false
     highlightCircleSize             : 4
     includeZero                     : false
     interactionModel                : null
index b421a5e..3f51a7e 100644 (file)
 
 ### Data UI
 - CSV cache: Load and parse
+- Split `transform` out from `CSVData` as a wrapper
+- `ModelCache.lookup(id | ids[], cb, ctx)`
+- Add CacheableModel & List w/ instance methods:
+    - `CacheableModelList.lookup(id | ids[], cb, ctx)`
+
 - Sources Selector: list datasets via YAML metadata descriptor files (`/datasources/list` -> UI)
 - Metric Selector: select metrics out of multiple dataset & graph together
 - Metric Presentation:
     - `palette`: String | { name:String, length:Number }
         - `name`: Infer colors from ColorBrewer + index
         - `columns`: Use this as column-length
-    - 
 - Apply `meta.chart.{type, options}`
 - Should data files have timespan in name?
-- Add `shortName`, `desc`, `title` to metadata files
 
 
 ### Charting
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