From ce6a77233f90a4d4c0ae9793c43d9f4db30ac130 Mon Sep 17 00:00:00 2001 From: Andrew Otto Date: Mon, 16 Apr 2012 16:54:27 -0400 Subject: [PATCH] Added /graphs view for viewing list of saved graphs. --- lib/graph/graph-index-view.co | 30 ++++++++++++++++++++++++++++++ lib/graph/index.co | 4 +++- lib/main-graph-list.co | 28 ++++++++++++++++++++++++++++ lib/server/controllers/graph.co | 2 +- lib/server/server.co | 11 +++++++++++ lib/template/graph-index.jade | 5 +++++ www/graph/index.jade | 7 +++++++ www/modules.yaml | 2 ++ 8 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 lib/graph/graph-index-view.co create mode 100644 lib/main-graph-list.co create mode 100644 lib/template/graph-index.jade create mode 100644 www/graph/index.jade diff --git a/lib/graph/graph-index-view.co b/lib/graph/graph-index-view.co new file mode 100644 index 0000000..7c352f8 --- /dev/null +++ b/lib/graph/graph-index-view.co @@ -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!" diff --git a/lib/graph/index.co b/lib/graph/index.co index 41c4e11..978ece3 100644 --- a/lib/graph/index.co +++ b/lib/graph/index.co @@ -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 index 0000000..f4eda3b --- /dev/null +++ b/lib/main-graph-list.co @@ -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 diff --git a/lib/server/controllers/graph.co b/lib/server/controllers/graph.co index d3921ce..3503779 100644 --- a/lib/server/controllers/graph.co +++ b/lib/server/controllers/graph.co @@ -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) -> diff --git a/lib/server/server.co b/lib/server/server.co index 4d46085..df23a8c 100755 --- a/lib/server/server.co +++ b/lib/server/server.co @@ -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 index 0000000..4c3bef0 --- /dev/null +++ b/lib/template/graph-index.jade @@ -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 index 0000000..9e89670 --- /dev/null +++ b/www/graph/index.jade @@ -0,0 +1,7 @@ +extends ../layout + +block title + title Graph | GraphKit + +block main-scripts + script(src="/js/kraken/main-graph-list.js?"+version) diff --git a/www/modules.yaml b/www/modules.yaml index c217b2d..28d37b3 100644 --- a/www/modules.yaml +++ b/www/modules.yaml @@ -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 -- 1.7.0.4