Added /graphs view for viewing list of saved graphs.
authorAndrew Otto <acotto@gmail.com>
Mon, 16 Apr 2012 20:54:27 +0000 (16:54 -0400)
committerAndrew Otto <acotto@gmail.com>
Mon, 16 Apr 2012 20:54:27 +0000 (16:54 -0400)
lib/graph/graph-index-view.co [new file with mode: 0644]
lib/graph/index.co
lib/main-graph-list.co [new file with mode: 0644]
lib/server/controllers/graph.co
lib/server/server.co
lib/template/graph-index.jade [new file with mode: 0644]
www/graph/index.jade [new file with mode: 0644]
www/modules.yaml

diff --git a/lib/graph/graph-index-view.co b/lib/graph/graph-index-view.co
new file mode 100644 (file)
index 0000000..7c352f8
--- /dev/null
@@ -0,0 +1,30 @@
+{ _, op,
+} = require 'kraken/util'
+{ BaseView,
+} = require 'kraken/base'
+{ Graph, GraphList
+} = require 'kraken/graph/graph-model'
+
+root = do -> this
+DEBOUNCE_RENDER = 100ms
+
+/**
+ * @class View for a showing a list of all saved graphs
+ */
+GraphIndexView = exports.GraphIndexView = BaseView.extend do # {{{
+    __bind__  : <[
+        render
+    ]>
+    __debounce__: <[ render ]>
+    
+    tagName   : 'section'
+    className : 'graph-index-view'
+    template  : require 'kraken/template/graph-index'
+    
+    data  : {}
+    ready : false
+
+    initialize : (o={}) ->
+        @model = new GraphList (o['graph_list_data'])
+        BaseView::initialize ...
+        console.log "#this.initialize!"
index 41c4e11..978ece3 100644 (file)
@@ -1,4 +1,6 @@
 models        = require 'kraken/graph/graph-model'
 display_views = require 'kraken/graph/graph-display-view'
 edit_views    = require 'kraken/graph/graph-edit-view'
-exports import models import display_views import edit_views
+index_views    = require 'kraken/graph/graph-index-view'
+
+exports import models import display_views import edit_views import index_views
diff --git a/lib/main-graph-list.co b/lib/main-graph-list.co
new file mode 100644 (file)
index 0000000..f4eda3b
--- /dev/null
@@ -0,0 +1,28 @@
+{ _, op,
+} = require 'kraken/util'
+{ BaseView, BaseModel, BaseList,
+} = require 'kraken/base'
+{ Graph, GraphList, GraphIndexView
+} = require 'kraken/graph'
+
+root = this
+
+# instantiates a new GraphIndexView with the
+# passed in JSON graph_list_data, and then
+# appends the rendered view to the DOM.
+main = (graph_list_data) ->
+    view = new GraphIndexView { 'graph_list_data': graph_list_data }
+    $ '#content .inner' .append view.el
+
+# URL to query for saved graph JSON data.
+graph_list_url = 'http://localhost:8081/graphslist'
+
+jQuery.ajax do
+    url : 'http://localhost:8081/graphslist'
+    dataType : 'json'
+    success : (res) ->
+        console.log("got %o", res)
+        # result will be the returned JSON
+        # data of all of the saved graphs
+        jQuery main res
+    error : (err) -> console.error err
index d3921ce..3503779 100644 (file)
@@ -61,7 +61,7 @@ class GraphController extends Controller
     
     # GET /graphs
     index: (req, res) ->
-        res.render 'dashboard'
+        res.render 'graph/index'
     
     # GET /graphs/:graph
     show: (req, res) ->
index 4d46085..df23a8c 100755 (executable)
@@ -186,6 +186,17 @@ app.get '/datasources/all', (req, res, next) ->
             res.send { error:String(err), partial_data:data }
 
 
+# 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'
 
diff --git a/lib/template/graph-index.jade b/lib/template/graph-index.jade
new file mode 100644 (file)
index 0000000..4c3bef0
--- /dev/null
@@ -0,0 +1,5 @@
+ul
+    - model.forEach(function(graph) {
+      li
+        a(href="#{graph.toLink()}") #{graph.attributes.name}
+    - })
diff --git a/www/graph/index.jade b/www/graph/index.jade
new file mode 100644 (file)
index 0000000..9e89670
--- /dev/null
@@ -0,0 +1,7 @@
+extends ../layout
+
+block title
+    title Graph | GraphKit
+
+block main-scripts
+    script(src="/js/kraken/main-graph-list.js?"+version)
index c217b2d..28d37b3 100644 (file)
@@ -72,6 +72,7 @@ dev:
                 - graph-display.jade
                 - graph-edit.jade
                 - dashboard.jade
+                - graph-index.jade
             - chart:
                 - chart-type
                 - dygraphs
@@ -93,6 +94,7 @@ dev:
                 - graph-model
                 - graph-display-view
                 - graph-edit-view
+                - graph-index-view
                 - index
             - dashboard:
                 - dashboard-model