# @__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()
form.options.scaffold
- fieldset
- legend Graph Options
-
- .fields.control-group
+ .fields.control-group
-- 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
//- 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")
+
* - 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'
'keypress form.options .value' : 'onKeypress'
'submit form.details' : 'onDetailsSubmit'
'submit form.options' : 'onOptionsSubmit'
+ 'change input[type="checkbox"]' : 'onOptionsSubmit'
ready: false
# 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', ~>
@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) ~>
# 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 }
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
.graph-label
position absolute
z-index 100
- top 3em
+ top 1em
right 1em
- max-width 300px
+ width 200px
padding 1em
border-radius 5px
width auto
min-width 50px
min-height 1.5em
+ max-width none
line-height 1.5
cursor pointer
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
projects / kraken-ui.git / commitdiff