From: dsc Date: Mon, 16 Apr 2012 23:20:42 +0000 (-0700) Subject: Checkpoint on Data UI. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=89cda938fdf9257f37914af2f24d099be3ec98dd;p=kraken-ui.git Checkpoint on Data UI. --- diff --git a/data/graphs/ohai.json b/data/graphs/ohai.json index 6dbc35f..a38457a 100644 --- a/data/graphs/ohai.json +++ b/data/graphs/ohai.json @@ -31,91 +31,11 @@ "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 } } diff --git a/data/graphs/root.yaml b/data/graphs/root.yaml index e5d252d..bbfcfa6 100644 --- a/data/graphs/root.yaml +++ b/data/graphs/root.yaml @@ -39,7 +39,7 @@ options : fractions : false gridLineColor : "#D8D8D8" gridLineWidth : 0.3 - hideOverlayOnMouseOut : true + hideOverlayOnMouseOut : false highlightCircleSize : 4 includeZero : false interactionModel : null diff --git a/docs/todo.md b/docs/todo.md index b421a5e..3f51a7e 100644 --- a/docs/todo.md +++ b/docs/todo.md @@ -68,6 +68,11 @@ ### 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: @@ -85,10 +90,8 @@ - `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 diff --git a/lib/dataset/datasource-model.co b/lib/dataset/datasource-model.co index 7d3ef82..e06d0d5 100644 --- a/lib/dataset/datasource-model.co +++ b/lib/dataset/datasource-model.co @@ -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' + # }}} diff --git a/lib/dataset/metric-model.co b/lib/dataset/metric-model.co index 8d22de8..b953a20 100644 --- a/lib/dataset/metric-model.co +++ b/lib/dataset/metric-model.co @@ -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 + diff --git a/lib/graph/graph-display-view.co b/lib/graph/graph-display-view.co index 15156cc..c4da4d8 100644 --- a/lib/graph/graph-display-view.co +++ b/lib/graph/graph-display-view.co @@ -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 ... diff --git a/lib/graph/graph-edit-view.co b/lib/graph/graph-edit-view.co index 5547400..6f50b41 100644 --- a/lib/graph/graph-edit-view.co +++ b/lib/graph/graph-edit-view.co @@ -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' diff --git a/lib/template/dashboard.jade b/lib/template/dashboard.jade index 654be23..3688666 100644 --- a/lib/template/dashboard.jade +++ b/lib/template/dashboard.jade @@ -1,4 +1,4 @@ -section#graph-list +section#dashboard .page-header h1 Wikimedia Report Card small February 2012 diff --git a/lib/template/datasource-ui.jade b/lib/template/datasource-ui.jade index 83be803..193b4eb 100644 --- a/lib/template/datasource-ui.jade +++ b/lib/template/datasource-ui.jade @@ -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 diff --git a/lib/util/csv.co b/lib/util/csv.co index cdab5ae..58fa779 100644 --- a/lib/util/csv.co +++ b/lib/util/csv.co @@ -186,6 +186,10 @@ class CSVData @data = _.merge [], @origData @rebuildColumns() + + toJSON: -> + _.merge [], @data + module.exports = CSVData diff --git a/www/css/data.styl b/www/css/data.styl index 7a83db6..42f2b26 100644 --- a/www/css/data.styl +++ b/www/css/data.styl @@ -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