From 8f358720bea126dcf0b22d7912c28c23a3563429 Mon Sep 17 00:00:00 2001 From: dsc Date: Tue, 28 Feb 2012 15:14:07 -0800 Subject: [PATCH] Adds forms for GraphModel info. --- lib/graph/model.co | 16 +++++++++------- lib/graph/view.co | 41 +++++++++++++++++++++++++++++++---------- lib/server/server.co | 1 + lib/template/graph.jade | 35 ++++++++++++++++++++++++++++++----- www/css/graph.styl | 22 +++++++++++++++++++++- www/css/layout.styl | 1 + www/css/text.styl | 2 ++ 7 files changed, 95 insertions(+), 23 deletions(-) diff --git a/lib/graph/model.co b/lib/graph/model.co index 9a0cf32..53fa6a9 100644 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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 -- 1.7.0.4