From: dsc Date: Mon, 5 Mar 2012 08:09:53 +0000 (-0800) Subject: Updates legend & label formatting, adds isotope sorting, adds tab-container. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=120fc9c1105b9f26c28de3fb0fdfae5f14db9874;p=kraken-ui.git 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 --- 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 --- 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 --- 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 --- 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 --- 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 --- 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