*/
ChartOptionView = exports.ChartOptionView = FieldView.extend do # {{{
# __bind__ : <[ onClick ]>
- tagName : 'div'
- className : 'field option'
- ctorName : 'ChartOptionView'
+ tagName : 'section'
+ className : 'chart-option field'
template : require 'kraken/template/chart-option'
isCollapsed : true
* @class View for configuring a chart type.
*/
ChartOptionScaffold = exports.ChartOptionScaffold = Scaffold.extend do # {{{
- ctorName : 'ChartOptionScaffold'
+ __bind__ : <[ collapseAll expandAll ]>
tagName : 'form'
- className : 'options scaffold'
+ className : 'chart-options scaffold'
template : require 'kraken/template/chart-scaffold'
+
collectionType : ChartOptionList
subviewType : ChartOptionView
fields : '.fields'
container = if @fields then @$el.find @fields else @$el
container
.addClass 'isotope'
- .find '.field.option' .addClass 'isotope-item'
+ .find '.chart-option.field' .addClass 'isotope-item'
container.isotope do
# itemPositionDataEnabled : true
- itemSelector : '.field.option'
- itemSelector : '.chart-option.field'
- layoutMode : 'masonry'
- masonry : columnWidth : 10
- getSortData :
++ itemSelector : '.chart-option.field'
+ layoutMode : 'masonry'
+ masonry : { columnWidth:10 }
+ filter : @getOptionsFilter()
+ sortBy : 'category'
+ getSortData :
category: ($el) ->
$el.data 'model' .getCategory()
- sortBy: 'category'
+ this
+
+ getOptionsFilter: ->
+ data = @$el.find '.options-filter-button.active' .toArray().map -> $ it .data()
+ sel = data.reduce do
+ (sel, d) ->
+ sel += that if d.filter
+ sel
+ ''
+ sel
+
+ collapseAll: ->
+ _.invoke @_subviews, 'collapse', true
+ # @renderSubviews()
+ false
+
+ expandAll: ->
+ _.invoke @_subviews, 'collapse', false
+ # @renderSubviews()
+ false
+
/**
* Add a ChartOption to this scaffold, rerendering the isotope
console.error that if err.stack
res.send { error:String(err), partial_data:data }
- ds = app.controller require './controllers/datasource'
- # ds.map 'get', 'all', ds.allData.bind(ds)
++app.controller require './controllers/datasource'
-# temporarily hardcoded until funciton to get JSON out of
-# files in a directory is finished. Also need to fix
-# controller method action mapping.
-app.get '/graphslist' (req, res) ->
- data = [
- {"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"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":false,"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":2,"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":"Number of Editors"},"slug":"active_editors","name":"Active Wikimedia Editors for All Wikimedia Projects (5+ edits per month)","desc":"","dataset":"/data/datasources/rc/rc_active_editors_count.csv","width":"auto","height":320,"chartType":"dygraphs","parents":["root"],"id":"active_editors"},
- {"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"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":false,"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":2,"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":"Number of visitors"},"slug":"unique_visitors","name":"Unique Visitors per Region (comScore)","desc":"","dataset":"/data/datasources/rc/rc_comscore_region_uv.csv","width":"auto","height":320,"chartType":"dygraphs","parents":["root"],"id":"unique_visitors"},
- {"options":{"animatedZooms":true,"avoidMinZero":false,"axis":null,"axisLabelColor":"#666666","axisLabelFontSize":11,"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":false,"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":2,"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":"Number of Articles"},"slug":"articles","name":"Wikipedia Articles","desc":"","dataset":"/data/datasources/rc/rc_article_count.csv","width":"auto","height":320,"chartType":"dygraphs","parents":["root"],"id":"articles"},
- ]
- res.send data
app.get '/', (req, res) ->
res.render 'dashboard'
- var graph_id = view.id || model.id || model.cid
- section.graph.graph-edit(id=graph_id)
+ section.graph-edit.graph(id=graph_id)
- form.graph-details.form-horizontal
-
- .name-row.row-fluid.control-group
- //- label.name.control-label(for="#{id}_name"): h3 Graph Name
- input.span6.name(type='text', id="#{graph_id}_name", name="name", placeholder='Graph Name', value=name)
-
- .row-fluid
- .viewport
- .graph-label
-
- .row-fluid
- .graph-settings.tabbable
- //- nav.navbar: div.navbar-inner: div.container
- nav
- .graph-controls.pull-right
- .btn-group
- a.redraw-button.btn(href="#")
- i.icon-refresh
- | Redraw
- .btn-group
- a.load-button.btn(href="#")
- i.icon-download
- | Revert
- a.save-button.btn(href="#")
- i.icon-upload
- | Save
- a.done-button.btn-primary.btn(href="#")
- i.icon-ok-sign.icon-white
- | Done
- ul.nav.subnav.nav-pills
- li: h3 Graph
- li.active: a(href="##{graph_id}-tab-info", data-toggle="tab") Info
- li: a(href="##{graph_id}-tab-data", data-toggle="tab") Data
- li: a.graph-options-tab(href="##{graph_id}-tab-options", data-toggle="tab") Options
-
-
- .tab-content
- .graph-info-pane.tab-pane.active(id="#{graph_id}-tab-info")
+
+ //- Graph Name field is not part of the form due to the layout.
- .graph-name-row.row-fluid.control-group
++ .graph-name-row.graph-details.row-fluid.control-group
+ //- label.name.control-label(for="#{id}_name"): h3 Graph Name
+ input.span6.graph-name(type='text', id="#{graph_id}_name", name="name", placeholder='Graph Name', value=name)
+
+ .graph-viewport-row.row-fluid
+ .viewport
+ .graph-label
+
+ .graph-settings-row.row-fluid
+ .graph-settings.tabbable
+
+ //--- Main Tabs ---//
+ nav.graph-settings-nav
+ .graph-controls.pull-right
+ .btn-group
+ a.redraw-button.btn(href="#")
+ i.icon-refresh
+ | Redraw
+ .btn-group
+ a.load-button.btn(href="#")
+ i.icon-download
+ | Revert
+ a.save-button.btn(href="#")
+ i.icon-upload
+ | Save
+ a.done-button.btn-primary.btn(href="#")
+ i.icon-ok-sign.icon-white
+ | Done
+ ul.nav.subnav.nav-pills
+ li
+ .graph-spinner
+ h3 Graph
+ li.active: a.graph-info-tab(href="##{graph_id}-tab-info", data-toggle="tab") Info
+ li: a.graph-data-tab(href="##{graph_id}-tab-data", data-toggle="tab") Data
+ li: a.graph-options-tab(href="##{graph_id}-tab-options", data-toggle="tab") Options
+ .nav-shadow-shim
+ .nav-shadow
+
+
+ //--- Tab Panes ---//
+ .graph-tab-content.tab-content
+ .graph-info-pane.tab-pane.active(id="#{graph_id}-tab-info")
+ form.graph-details.form-horizontal
.row-fluid
.half.control-group
.control-group