Adds forms for GraphModel info.

diff --git a/lib/graph/model.co b/lib/graph/model.co
index 9a0cf32..53fa6a9 100644 (file)
--- a/lib/graph/model.co
+++ b/lib/graph/model.co
@@ -103,22 +103,24 @@ GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{
  * other settings for both its content and presentation.
  */
 GraphModel = exports.GraphModel = BaseModel.extend do # {{{
-    ctorName : 'GraphModel'
-    urlRoot  : '/graphs'
+    ctorName    : 'GraphModel'
+    urlRoot     : '/graphs'
+    idAttribute : 'slug'
+    
     
     initialize : ->
         name = @get 'name'
-        if name and not (@id or @has 'id')
-            @id = @attributes.id = _.underscored name
+        if name and not (@id or @get('slug'))
+            @set 'slug', _.underscored name
     
     defaults: ->
         {
-            id      : 'graph'
-            name    : 'Kraken Graph'
+            slug    : ''
+            name    : ''
             dataset : '/data/pageviews_by.timestamp.language.csv'
             desc    : ''
             width   : 'auto'
-            height  : 'auto'
+            height  : 320
             options : {}
         }
     

diff --git a/lib/graph/view.co b/lib/graph/view.co
index e1ccadc..0e32474 100644 (file)
--- a/lib/graph/view.co
+++ b/lib/graph/view.co
@@ -96,7 +96,7 @@ GraphOptionsScaffold = exports.GraphOptionsScaffold = Scaffold.extend do # {{{
 
 
 GraphView = exports.GraphView = BaseView.extend do # {{{
-    __bind__  : <[ render renderAll onReady ]>
+    __bind__  : <[ resizeViewport render renderAll onReady ]>
     ctorName  : 'GraphView'
     tagName   : 'section'
     className : 'graph'
@@ -114,8 +114,12 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
         @model or= new GraphModel
         BaseView::initialize ...
         # console.log "#this.initialize!"
-        @render    = _.debounce @render,    DEBOUNCE_RENDER
-        @renderAll = _.debounce @renderAll, DEBOUNCE_RENDER
+        
+        for name of <[ resizeViewport render renderAll ]>
+            @[name] = _.debounce @[name], DEBOUNCE_RENDER
+        
+        # Resize graph on window resize
+        $ root .on 'resize', @resizeViewport
         
         @model.on 'destroy', @remove, this
         @model.on 'change',  @render, this
@@ -140,10 +144,12 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
         
         _.delay @onReady, DEBOUNCE_RENDER
     
+    
     onReady: ->
         @ready = @scaffold.ready = true
         @renderAll()
     
+    
     chartOptions: (values, opts) ->
         # Handle @chartOptions(k, v, opts)
         if arguments.length > 1 and typeof values is 'string'
@@ -159,16 +165,29 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
             options.values()
     
     
-    render: ->
-        return this unless @ready
-        options = @chartOptions()
-        w = options.width  or= @scaffold.get 'width'  .getValue() or 480
-        h = options.height or= @scaffold.get 'height' .getValue() or 320
-        @viewport.css { width:w, height:h }
+    /**
+     * Resizes chart according to the model's width and height.
+     * @return { width, height }
+     */
+    resizeViewport: ->
+        return this unless @ready and @chart
         
         # Remove old style, as it confuses dygraph after options update
         @viewport.attr 'style', ''
         
+        if (width = @model.get 'width')  is 'auto'
+            width = @viewport.width()
+        if (height = @model.get 'height') is 'auto'
+            height = @viewport.height()
+        size = { width, height }
+        @viewport.css size
+        console.log 'resizeViewport!', JSON.stringify size
+        # @chart.resize size if forceRedraw
+        size
+    
+    render: ->
+        return this unless @ready
+        
         # console.log "#this"
         # console.log do 
         #     "  .viewport.{ width=%s, height=%s, style=%s }"
@@ -177,6 +196,8 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
         #     @viewport.attr 'style'
         # console.log '  .options:', JSON.stringify options
         
+        size = @resizeViewport()
+        options = @chartOptions()
         # @chart?.destroy()
         unless @chart
             @chart = new Dygraph do
@@ -185,7 +206,7 @@ GraphView = exports.GraphView = BaseView.extend do # {{{
                 options
         else
             @chart.updateOptions options
-            @chart.resize w, h
+            @chart.resize size
         
         path = root.location?.path or '/'
         url = "#path?#{@toKVPairs()}"

diff --git a/lib/server/server.co b/lib/server/server.co
index b036c70..db5df45 100755 (executable)
--- a/lib/server/server.co
+++ b/lib/server/server.co
@@ -43,6 +43,7 @@ app.start = ->
     console.log "starting Kraken dev server (port=#PORT, env=#NODE_ENV, version=#VERSION)"
     console.log "========================================================================"
     app.listen PORT
+    app
 
 app.configure ->
     mime.define 'text/plain' : <[ jade co styl stylus ]>

diff --git a/lib/template/graph.jade b/lib/template/graph.jade
index 7dd5df7..962f9e7 100644 (file)
--- a/lib/template/graph.jade
+++ b/lib/template/graph.jade
@@ -1,11 +1,36 @@
-- var _ = require('kraken/underscore');
-section.graph(id=id)
+- var id = model.id || model.cid, graph_id = _.domize('graph', id)
+section.graph(id=graph_id)
     .graph-label
     .viewport
     
-    //- 
-        form.details
-            label.name(for='#{id}_name') Name
+    form.details.form-horizontal
+        
+        .name-row.row-fluid.control-group
+            //- label.name.control-label(for="#{id}_name"): h3 Graph Name
+            .controls: input.span6.name(type='text', id="#{id}_name", placeholder='Graph Name', value=name)
+        
+        .row-fluid
+            .half.control-group
+                label.slug.control-label(for='slug') Slug
+                .controls
+                    input.span3.slug(type='text', id='slug', placeholder='graph_slug', value=slug)
+                    p.help-block The slug uniquely identifies this graph and will be displayed in the URL.
+            .half.control-group
+                label.dataset.control-label(for='dataset') Data Set
+                .controls
+                    input.span3.dataset(type='text', id='dataset', placeholder='URL to dataset file', value=dataset)
+                    p.help-block This dataset filename will soon be replaced by a friendly UI.
+        
+        .row-fluid
+            .half.control-group
+                label.width.control-label(for='width') Width
+                .controls
+                    input.span1.width(type='text', id='width', value=width)
+                    p.help-block Choosing 'auto' will size the graph to the viewport bounds.
+            .half.control-group
+                label.height.control-label(for='height') Height
+                .controls: input.span1.height(type='text', id='height', value=height)
+        
     
     fieldset.options
         legend Graph Options

diff --git a/www/css/graph.styl b/www/css/graph.styl
index f9a37b6..749129b 100644 (file)
--- a/www/css/graph.styl
+++ b/www/css/graph.styl
@@ -13,10 +13,30 @@ section.graph
     .viewport
         position relative
         min-width 200px
-        min-height 100px
+        min-height 320px
+        margin-bottom 1.5em
+        overflow hidden
     
     form.details
         position relative
+        
+        .help-block
+            font-size 11px
+            line-height 1.3
+        .row-fluid
+            .half.control-group
+                width 50%
+                float left
+                margin-left 0
+                margin-right 0
+            label
+                width 100px
+            .controls
+                margin-left 110px
+        .name-row
+            line-height 2em
+            input.name
+                width 95%
     
     fieldset.options
         border-radius 5px

diff --git a/www/css/layout.styl b/www/css/layout.styl
index 69f28cd..75f082d 100644 (file)
--- a/www/css/layout.styl
+++ b/www/css/layout.styl
@@ -1,5 +1,6 @@
 @import 'nib'
 @import 'colors'
+@import 'text'
 
 
 

diff --git a/www/css/text.styl b/www/css/text.styl
index 889f999..32134cc 100644 (file)
--- a/www/css/text.styl
+++ b/www/css/text.styl
@@ -1,3 +1,5 @@
+@import 'colors'
+
 $font_size     = 16px
 $fonts_body    = helvetica, arial, sans-serif
 $fonts_headers = "gotham rounded", "helvetica neue", helvetica, arial, sans-serif