"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
}
}
fractions : false
gridLineColor : "#D8D8D8"
gridLineWidth : 0.3
- hideOverlayOnMouseOut : true
+ hideOverlayOnMouseOut : false
highlightCircleSize : 4
includeZero : false
interactionModel : null
### 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
-{ _, op,
+{ _, op, CSVData,
} = require 'kraken/util'
{ BaseModel, BaseList, BaseView,
} = require 'kraken/base'
+{ Metric, MetricList,
+} = require 'kraken/dataset/metric-model'
/**
*/
data : null
-
-
-
-
- constructor: function DataSource
- BaseModel ...
-
- initialize: ->
- @attributes = @canonicalize @attributes
- BaseModel::initialize ...
- @constructor.register this
- @on 'load-success', @onLoadSuccess, this
-
-
defaults: ->
id : ''
url : ''
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
@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
$.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) ->
return that.idx if _.find @get('metrics'), -> it.label is name
-1
+ onMetricChange: ->
+ @metrics.reset @get 'metrics'
+
# }}}
} = require 'kraken/util'
{ BaseModel, BaseList,
} = require 'kraken/base'
-{ DataSource, DataSourceList,
-} = require 'kraken/dataset/datasource-model'
-
+DataSource = DataSourceList = null
/**
* @class
metric.get('index') ? Infinity
# }}}
+
+### FIXME: LOLHACKS ###
+setTimeout do
+ -> { DataSource, DataSourceList, } := require 'kraken/dataset/datasource-model'
+ 10
+
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 ...
'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'
-section#graph-list
+section#dashboard
.page-header
h1 Wikimedia Report Card
small February 2012
- 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
@data = _.merge [], @origData
@rebuildColumns()
+
+ toJSON: ->
+ _.merge [], @data
+
module.exports = CSVData
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
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
background-color #d9edf7
border 1px solid #3a87ad
border-width 1px 0
+ .source-metric-type
+ font-family menlo, monospace