Updates legend & label formatting, adds isotope sorting, adds tab-container.

diff --git a/lib/graph/graph-view.co b/lib/graph/graph-view.co
index 42a66f3..8e7cccc 100644 (file)
--- a/lib/graph/graph-view.co
+++ b/lib/graph/graph-view.co
@@ -77,11 +77,14 @@ GraphOptionsScaffold = exports.GraphOptionsScaffold = Scaffold.extend do # {{{
         # @__super__.render ...
         return this unless @ready
         container = if @fields then @$el.find @fields else @$el
+        container
+            .addClass 'isotope'
+            .find '.field.option' .addClass 'isotope-item'
         container.isotope do
+            # itemPositionDataEnabled : true
             itemSelector    : '.field.option'
             layoutMode      : 'masonry'
             masonry         : columnWidth : 10
-            itemPositionDataEnabled : true
             getSortData :
                 category: ($el) ->
                     $el.data 'model' .getCategory()

diff --git a/lib/template/graph-scaffold.jade b/lib/template/graph-scaffold.jade
index 6c9993c..ba4d6a6 100644 (file)
--- a/lib/template/graph-scaffold.jade
+++ b/lib/template/graph-scaffold.jade
@@ -1,6 +1,3 @@
 form.options.scaffold
-    fieldset
-        legend Graph Options
-        
-        .fields.control-group
+    .fields.control-group
 

diff --git a/lib/template/graph.jade b/lib/template/graph.jade
index 0216850..02e8e49 100644 (file)
--- a/lib/template/graph.jade
+++ b/lib/template/graph.jade
@@ -1,4 +1,5 @@
-- var id = model.id || model.cid, graph_id = _.domize('graph', id)
+- var id = model.id || model.cid
+- var graph_id = view.id
 section.graph(id=graph_id)
     form.details.form-horizontal
         
@@ -6,30 +7,44 @@ section.graph(id=graph_id)
             //- label.name.control-label(for="#{id}_name"): h3 Graph Name
             input.span6.name(type='text', id="#{id}_name", name="name", placeholder='Graph Name', value=name)
         
-        .viewport
-        .graph-label
-        
         .row-fluid
-            .half.control-group
-                label.slug.control-label(for='slug') Slug
-                .controls
-                    input.span3.slug(type='text', id='slug', name='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', name='dataset', placeholder='URL to dataset file', value=dataset)
-                    p.help-block This dataset filename will soon be replaced by a friendly UI.
+            .viewport
+            .graph-label
         
-        .row-fluid
-            .half.control-group
-                label.width.control-label(for='width') Width
-                .controls
-                    input.span1.width(type='text', id='width', name='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', name='height', value=height)
+        .tabbable
+            ul.nav.subnav.nav-pills
+                li.active:  a(href="#graph-#{graph_id}-info", data-toggle="tab") Info
+                li:         a(href="#graph-#{graph_id}-data", data-toggle="tab") Data
+                li:         a(href="#graph-#{graph_id}-options", data-toggle="tab") Options
+            
+            .tab-content
+                .graph-info-pane.tab-pane.active(id="graph-#{graph_id}-info")
+                    h3 Graph Info
+                    .row-fluid
+                        .half.control-group
+                            label.slug.control-label(for='slug') Slug
+                            .controls
+                                input.span3.slug(type='text', id='slug', name='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', name='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', name='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', name='height', value=height)
+                
+                .graph-data-pane.tab-pane(id="graph-#{graph_id}-data")
+                
+                .graph-options-pane.tab-pane(id="graph-#{graph_id}-options")
+                
         
     
 

diff --git a/lib/vis/vis-view.co b/lib/vis/vis-view.co
index 788aa80..6ff0119 100644 (file)
--- a/lib/vis/vis-view.co
+++ b/lib/vis/vis-view.co
@@ -19,7 +19,7 @@ _ = require 'kraken/underscore'
  * - Graph metadata, such as name, description, slug
  */
 VisView = exports.VisView = BaseView.extend do # {{{
-    __bind__  : <[ resizeViewport render renderAll onReady ]>
+    __bind__  : <[ resizeViewport render renderAll onReady formatter axisFormatter ]>
     ctorName  : 'VisView'
     tagName   : 'section'
     className : 'graph'
@@ -30,6 +30,7 @@ VisView = exports.VisView = BaseView.extend do # {{{
         'keypress form.options .value'             : 'onKeypress'
         'submit   form.details'                    : 'onDetailsSubmit'
         'submit   form.options'                    : 'onOptionsSubmit'
+        'change   input[type="checkbox"]'          : 'onOptionsSubmit'
     
     ready: false
     
@@ -46,6 +47,8 @@ VisView = exports.VisView = BaseView.extend do # {{{
         # Resize graph on window resize
         $ root .on 'resize', @resizeViewport
         
+        @id = _.domize 'graph', (@model.id or @model.cid)
+        
         @model.on 'destroy', @remove, this
         @model.on 'change',  @render, this
         @model.on 'change:dataset', ~>
@@ -60,7 +63,7 @@ VisView = exports.VisView = BaseView.extend do # {{{
         @viewport = @$el.find '.viewport'
         
         @scaffold = new GraphOptionsScaffold
-        @$el.append @scaffold.el
+        @$el.find '.graph-options-pane' .append @scaffold.el
         @scaffold.collection.reset that if o.graph_spec
         
         @scaffold.on 'change', (scaffold, value, key, field) ~>
@@ -110,9 +113,12 @@ VisView = exports.VisView = BaseView.extend do # {{{
         
         # Remove old style, as it confuses dygraph after options update
         @viewport.attr 'style', ''
+        label = @$el.find '.graph-label'
         
         if (width = @model.get 'width')  is 'auto'
-            width = @viewport.innerWidth()
+            vpWidth = @viewport.innerWidth()
+            labelW = label.outerWidth()
+            width = vpWidth - labelW - 10 - (vpWidth - label.position().left - labelW)
         if (height = @model.get 'height') is 'auto'
             height = @viewport.innerHeight()
         size = { width, height }
@@ -122,13 +128,31 @@ VisView = exports.VisView = BaseView.extend do # {{{
         size
     
     
+    
+    axisFormatter: (n, granularity, opts, g) ->
+        @formatter n, opts, g
+    
+    formatter: (n, opts, g) ->
+        return n if n instanceof Date
+        sigFigs = opts 'sigFigs'
+        maxW    = opts 'maxNumberWidth'
+        digits  = opts 'digitsAfterDecimal'
+        v = Dygraph.round_ n, digits
+        # Dygraph.floatFormat n, sigFigs
+        # console.log n, "->", v, "?= %#{maxW}.#{digits}g (sigFigs=#sigFigs)"
+        v
+    
+    
     render: ->
         return this unless @ready
         console.log "#this.render!"
         
         size = @resizeViewport()
         options = @chartOptions() import size
-        options.labelsDiv = @$el.find '.graph-label' .0
+        options import do
+            labelsDiv          : @$el.find '.graph-label' .0
+            # axisLabelFormatter : @axisFormatter
+            # valueFormatter     : @formatter
         
         # @chart?.destroy()
         unless @chart

diff --git a/www/css/graph.styl b/www/css/graph.styl
index d261cb6..d784be4 100644 (file)
--- a/www/css/graph.styl
+++ b/www/css/graph.styl
@@ -10,9 +10,9 @@ section.graph
     .graph-label
         position absolute
         z-index 100
-        top 3em
+        top 1em
         right 1em
-        max-width 300px
+        width 200px
         
         padding 1em
         border-radius 5px
@@ -145,6 +145,7 @@ section.graph
             width auto
             min-width 50px
             min-height 1.5em
+            max-width none
             line-height 1.5
             
             cursor pointer

diff --git a/www/css/layout.styl b/www/css/layout.styl
index 75f082d..f4c23a0 100644 (file)
--- a/www/css/layout.styl
+++ b/www/css/layout.styl
@@ -59,7 +59,15 @@ nav
         display inline-block
         top -0.75em
         margin 0 0.5em
-    
+
+.nav
+    a, a:link, a:visited, a:active
+        text-decoration none
+    &.nav-pills
+        background-color white
+        border-bottom 1px solid #ccc
+        padding-bottom 0.25em
+        // box-shadow 0px 0px 6px 0px rgba(0,0,0,0.3)
 
 header
     z-index 1000