Use precompiled Jade templates for views.
authordsc <david.schoonover@gmail.com>
Mon, 20 Feb 2012 14:58:07 +0000 (06:58 -0800)
committerdsc <david.schoonover@gmail.com>
Mon, 20 Feb 2012 14:58:29 +0000 (06:58 -0800)
lib/graph.co
lib/scaffold.co
lib/server/server.co
lib/template/graph-option.jade [new file with mode: 0644]
lib/template/graph.jade [new file with mode: 0644]
www/dashboard.jade [new file with mode: 0644]
www/graph.jade [deleted file]
www/graph/dygraph-options.json [moved from www/dygraph-options.json with 100% similarity]
www/graph/dygraph-options.yaml [new file with mode: 0644]
www/graph/test.jade [new file with mode: 0644]
www/modules.yaml

index 97c534d..0d109d3 100644 (file)
@@ -3,7 +3,60 @@ _ = require 'kraken/underscore'
 } = require 'kraken/scaffold'
 
 
-GraphModel = exports.GraphModel = Backbone.Model.extend do
+/**
+ * Field with graph-option-specific handling for validation, parsing, tags, etc.
+ */
+GraphOption = exports.GraphOption = Field.extend do # {{{
+    initialize : ->
+        Field..initialize ...
+# }}}
+
+
+GraphOptionList = exports.GraphOptionList = FieldList.extend do # {{{
+    model : GraphOption
+    # initialize : -> FieldList..initialize ...
+# }}}
+
+
+GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{
+    tagName        : 'form'
+    className      : 'field graph_option'
+    template       : require 'kraken/template/graph-option'
+    
+    events :
+        'blur .value' : 'update'
+    
+    initialize: ->
+        FieldView..initialize ...
+    
+    update: ->
+        val     = @$el.find('.value').val()
+        current = @model.get 'value'
+        return if val is current
+        
+        console.log "#this.update( #current -> #val )"
+        @model.setValue val, {+silent}
+    
+    render: ->
+        @$el.html @template @model.toJSON()
+        this
+    
+    toString: -> "GraphOptionView(#{@model.id})"
+    
+# }}}
+
+
+
+GraphOptionsScaffold = exports.GraphOptionsScaffold = Scaffold.extend do # {{{
+    className      : 'options scaffold'
+    collectionType : GraphOptionList
+    subviewType    : GraphOptionView
+    
+    toString: -> "GraphOptionsScaffold()"
+# }}}
+
+
+GraphModel = exports.GraphModel = Backbone.Model.extend do # {{{
     urlRoot : '/graphs'
     
     initialize : ->
@@ -17,12 +70,13 @@ GraphModel = exports.GraphModel = Backbone.Model.extend do
             dataset : 'data/page_views_by_language.csv'
             options : {}
         }
-    
+# }}}
 
 
-Graph = exports.Graph = Backbone.View.extend do
-    tagName : 'section'
+Graph = exports.Graph = Backbone.View.extend do # {{{
+    tagName   : 'section'
     className : 'graph'
+    template  : require 'kraken/template/graph'
     
     events:
         'keypress input'       : 'onKeypress'
@@ -37,7 +91,7 @@ Graph = exports.Graph = Backbone.View.extend do
         @model.on 'destroy', @remove, this
         
         @viewport = @$el.find '.viewport'
-        @scaffold = new Scaffold do
+        @scaffold = new GraphOptionsScaffold do
             el: @$el.find 'form.settings'
         @scaffold.collection.reset CHART_OPTIONS_SPEC
         
@@ -87,10 +141,7 @@ Graph = exports.Graph = Backbone.View.extend do
     
     toString: ->
         "Graph()"
+# }}}
 
 
 
-
-    
-    
-
index 78f1f20..b8f6cc0 100644 (file)
@@ -64,21 +64,13 @@ FieldList = exports.FieldList = Backbone.Collection.extend do # {{{
     model : Field
     
     /**
-     * 
+     * Collects a map of fields to their values, excluding those set to `null` or their default.
+     * @returns {Object}
      */
     values: ->
         _.synthesize do
             @models.filter -> not it.isDefault()
             -> [ it.get('name'), it.getValue() ]
-        
-        # @reduce do
-        #     (acc, field) ->
-        #         k = field.get 'name'
-        #         v = field.getValue()
-        #         if k and not field.isDefault() and v?
-        #             acc[k] = v
-        #         acc
-        #     {}
     
 # }}}
 
@@ -109,11 +101,16 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{
         @model.setValue val, {+silent}
     
     render: ->
+        if @template
+            @$el.html @template @model.toJSON()
+            return this
+        
         return @remove() if @model.get 'hidden'
         
         name  = @model.get 'name'
         id    = _.camelize name
-        label = _.humanize name
+        label = name
+        # label = _.humanize name
         @$el.html """
             <label class="name" for="#id">#label</label>
             <input class="value" type="text" id="#id" name="#id">
@@ -175,5 +172,7 @@ Scaffold = exports.Scaffold = Backbone.View.extend do # {{{
         @collection.each @addOne
         this
     
+    toString: ->
+        "Scaffold()"
 # }}}
 
index d21c21d..c52a44d 100755 (executable)
@@ -61,9 +61,9 @@ app.configure ->
     app.use express.methodOverride()
     
     app.use compiler do
+        enabled : <[ stylus coco jade-browser pyyaml ]>
         src     : WWW
         dest    : VAR
-        enabled : <[ stylus coco pyyaml ]>
         options : stylus : { nib:true, include:"#WWW/css" }
         log_level : LOG_LEVEL
     
@@ -72,7 +72,7 @@ app.configure ->
         enabled : 'commonjs'
         src     : [ VAR, WWW, STATIC ]
         dest    : VAR
-        options : commonjs : drop_path_parts:1
+        options : commonjs : { drop_path_parts:1, drop_full_ext:true }
         log_level : LOG_LEVEL
     
     app.use require('browserify') do
@@ -93,10 +93,14 @@ app.configure ->
 ### Routes
 
 app.get '/', (req, res) ->
-    res.render 'graph'
-
-app.get '/:page', (req, res) ->
-    res.render req.params.page
+    res.render 'dashboard'
+
+app.get '/:type/:action', (req, res, next) ->
+    {type, action} = req.params
+    if path.existsSync "#WWW/#type/#action.jade"
+        res.render "#type/#action"
+    else
+        next()
 
 
 
diff --git a/lib/template/graph-option.jade b/lib/template/graph-option.jade
new file mode 100644 (file)
index 0000000..e69de29
diff --git a/lib/template/graph.jade b/lib/template/graph.jade
new file mode 100644 (file)
index 0000000..43d6443
--- /dev/null
@@ -0,0 +1,11 @@
+section.graph(id=id)
+    .graph-label
+    .viewport
+    
+    //- 
+        form.details
+            label.name(for='#{id}_name') Name
+    
+    fieldset.options
+        legend Graph Options
+        
diff --git a/www/dashboard.jade b/www/dashboard.jade
new file mode 100644 (file)
index 0000000..e69de29
diff --git a/www/graph.jade b/www/graph.jade
deleted file mode 100644 (file)
index 1d72f73..0000000
+++ /dev/null
@@ -1,23 +0,0 @@
-extends layout
-
-block title
-    title Kraken: Graph Test Page
-
-append styles
-    mixin css('forms.css')
-    mixin css('graph.css')
-
-block content
-    section.graph
-        .viewport
-        fieldset
-            legend Settings
-            form.settings
-                //- mixin text_field('data', 'data/page_views_by_project.csv')
-    
-
-block page-scripts
-    script
-        var CHART_OPTIONS_SPEC = !{ fs.readFileSync('www/dygraph-options.json', 'utf8') };
-    
-
diff --git a/www/graph/dygraph-options.yaml b/www/graph/dygraph-options.yaml
new file mode 100644 (file)
index 0000000..1df4c49
--- /dev/null
@@ -0,0 +1,1338 @@
+
+-   name: width
+    type: Integer
+    default: 480
+    desc: Width, in pixels, of the chart. If the container div has been explicitly sized, this will be
+        ignored.
+    category: Overall display
+    tags:
+    - overall display
+    examples:
+    - linear-regression-addseries
+    - annotation
+    - century-scale
+    - color-visibility
+    - daylight-savings
+    - demo
+    - drawing
+    - independent-series
+    - link-interaction
+    - linear-regression-fractions
+    - linear-regression
+    - no-range
+    - small-range-zero
+    - reverse-y-axis
+    - color-cycle
+    - multi-scale
+    - value-axis-formatters
+
+-   name: height
+    type: Integer
+    default: 320
+    desc: Height, in pixels, of the chart. If the container div has been explicitly sized, this will be
+        ignored.
+    category: Overall display
+    tags:
+    - overall display
+    examples:
+    - annotation
+    - century-scale
+    - color-visibility
+    - demo
+    - drawing
+    - link-interaction
+    - no-range
+    - small-range-zero
+    - reverse-y-axis
+    - color-cycle
+    - multi-scale
+    - value-axis-formatters
+
+-   name: annotationClickHandler
+    type: function(annotation, point, dygraph, event)
+    default: null
+    desc: If provided, this function is called whenever the user clicks on an annotation.
+    category: Annotations
+    tags:
+    - annotations
+    - handler
+    examples:
+    - annotation
+
+-   name: annotationDblClickHandler
+    type: function(annotation, point, dygraph, event)
+    default: null
+    desc: If provided, this function is called whenever the user double-clicks on an annotation.
+    category: Annotations
+    tags:
+    - annotations
+    - handler
+    examples:
+    - annotation
+
+-   name: annotationMouseOutHandler
+    type: function(annotation, point, dygraph, event)
+    default: null
+    desc: If provided, this function is called whenever the user mouses out of an annotation.
+    category: Annotations
+    tags:
+    - annotations
+    - handler
+    examples:
+    - annotation
+
+-   name: annotationMouseOverHandler
+    type: function(annotation, point, dygraph, event)
+    default: null
+    desc: If provided, this function is called whenever the user mouses over an annotation.
+    category: Annotations
+    tags:
+    - annotations
+    - handler
+    examples:
+    - annotation
+
+-   name: displayAnnotations
+    type: Boolean
+    default: false
+    desc: Only applies when Dygraphs is used as a GViz chart. Causes string columns following a data series
+        to be interpreted as annotations on points in that series. This is the same format used by Google's
+        AnnotatedTimeLine chart.
+    category: Annotations
+    tags:
+    - annotations
+    examples:
+    - annotation-gviz
+
+-   name: avoidMinZero
+    type: Boolean
+    default: false
+    desc: "When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value\
+        \ of zero is disabled. \nThis is particularly useful for data sets that contain many zero values,\
+        \ especially for step plots which may otherwise have lines not visible running along the bottom\
+        \ axis."
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - avoidMinZero
+
+-   name: axis
+    type: String or Object
+    default: null
+    desc: Set to either an object ({}) filled with options for this axis or to the name of an existing
+        data series with its own axis to re-use that axis. See tests for usage.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - two-axes
+    - steps
+    - two-axes-vr
+    - value-axis-formatters
+
+-   name: axisLabelColor
+    type: String
+    default: black
+    desc: Color for x- and y-axis labels. This is a CSS color string.
+    category: Axes
+    tags:
+    - axes
+
+-   name: axisLabelFontSize
+    type: Integer
+    default: 14
+    desc: Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
+    category: Axes
+    tags:
+    - axes
+
+-   name: axisLabelFormatter
+    type: function(number or Date, granularity, opts, dygraph)
+    default: null
+    desc: Function to call to format the tick values that appear along an axis. This is usually set on
+        a per-axis basis. The first parameter is either a number (for a numeric axis) or a Date object
+        (for a date axis). The second argument specifies how fine-grained the axis is. For date axes,
+        this is a reference to the time granularity enumeration, defined in dygraph-tickers.js, e.g. Dygraph.WEEKLY.
+        opts is a function which provides access to various options on the dygraph, e.g. opts('labelsKMB').
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - x-axis-formatter
+    - y-axis-formatter
+    - value-axis-formatters
+
+-   name: axisLabelWidth
+    type: Integer
+    default: 50
+    desc: Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also
+        controls
+    category: Axes
+    tags:
+    - axes
+    - labels
+
+-   name: axisLineColor
+    type: String
+    default: black
+    desc: Color of the x- and y-axis lines. Accepts any value which the HTML canvas strokeStyle attribute
+        understands, e.g. 'black' or 'rgb(0, 100, 255)'.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - demo
+
+-   name: axisLineWidth
+    type: Float
+    default: 0.3
+    desc: Thickness (in pixels) of the x- and y-axis lines.
+    category: Axes
+    tags:
+    - axes
+
+-   name: axisTickSize
+    type: Number
+    default: '3.0'
+    desc: The size of the line to display next to each tick mark on x- or y-axes.
+    category: Axes
+    tags:
+    - axes
+
+-   name: dateWindow
+    type: Array of two Dates or numbers
+    default: null
+    desc: Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest
+        are milliseconds since epoch. If the data for the x-axis is numeric, the values in dateWindow
+        must also be numbers. By default, the full range of the input is shown.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - dateWindow
+    - drawing
+    - is-zoomed-ignore-programmatic-zoom
+    - link-interaction
+    - synchronize
+    - zoom
+
+-   name: drawXAxis
+    type: Boolean
+    default: true
+    desc: Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn
+        and reclaims the space for the chart grid/lines.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - unboxed-spark
+
+-   name: drawYAxis
+    type: Boolean
+    default: true
+    desc: Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn
+        and reclaims the space for the chart grid/lines.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - drawing
+    - unboxed-spark
+
+-   name: includeZero
+    type: Boolean
+    default: false
+    desc: Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis.
+        If this option is set, the y-axis will always include zero, typically as the lowest value. This
+        can be used to avoid exaggerating the variance in the data
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - no-range
+    - numeric-gviz
+    - small-range-zero
+
+-   name: logscale
+    type: Boolean
+    default: false
+    desc: When set for a y-axis, the graph shows that axis in log scale. Any values less than or equal
+        to zero are not displayed. Not compatible with showZero, and ignores connectSeparatedPoints. 
+        Also, showing log scale with valueRanges that are less than zero will result in an unviewable graph.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - logscale
+    - stock
+
+-   name: panEdgeFraction
+    type: Float
+    default: null
+    desc: A value representing the farthest a graph may be panned, in percent of the display. For example,
+        a value of 0.1 means that the graph can only be panned 10% pased the edges of the displayed values.
+        null means no bounds.
+    category: Axes
+    tags:
+    - axes
+    - interactive elements
+    examples:
+    - zoom
+
+-   name: pixelsPerLabel
+    type: Integer
+    default: null
+    desc: Number of pixels to require between each x- and y-label. Larger values will yield a sparser
+        axis with fewer ticks. This is set on a per-axis basis. By default, values are 60 (x-axis) or 30 (y-axes).
+    category: Axes
+    tags:
+    - axes
+    - grid
+    examples:
+    - value-axis-formatters
+
+-   name: ticker
+    type: "function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...}, ...]"
+    default: null
+    desc: This lets you specify an arbitrary function to generate tick marks on an axis. The tick marks
+        are an array of (value, label) pairs. The built-in functions go to great lengths to choose good
+        tick marks so, if you set this option, you'll most likely want to call one of them and modify
+        the result. By default, uses Dygraph.dateTicker or Dygraph.numericTicks, but see
+        dygraph-tickers.js for an extensive discussion. This is set on a per-axis basis.
+    category: Axes
+    tags:
+    - axes
+
+-   name: valueRange
+    type: Array of two numbers
+    default: null
+    desc: Explicitly set the vertical range of the graph to [low, high]. This may be set on a per-axis
+        basis to define each y-axis separately. By default, the full range of the input is shown.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - drawing
+    - dynamic-update
+    - is-zoomed-ignore-programmatic-zoom
+    - no-visibility
+    - reverse-y-axis
+    - synchronize
+    - zoom
+    - two-axes-vr
+
+-   name: xAxisHeight
+    type: Integer
+    default: null
+    desc: Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize
+        and axisTickSize.
+    category: Axes
+    tags:
+    - axes
+
+-   name: xAxisLabelWidth
+    type: Integer
+    default: 50
+    desc: Width, in pixels, of the x-axis labels.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - x-axis-formatter
+    - value-axis-formatters
+
+-   name: yAxisLabelWidth
+    type: Integer
+    default: 50
+    desc: Width, in pixels, of the y-axis labels. This also affects the amount of space available for
+        a y-axis chart label.
+    category: Axes
+    tags:
+    - axes
+    examples:
+    - customLabel
+    - two-axes
+    - multi-scale
+    - two-axes-vr
+    - value-axis-formatters
+
+-   name: delimiter
+    type: String
+    default: ','
+    desc: The delimiter to look for when separating fields of a CSV file. Setting this to a tab is not
+        usually necessary, since tab-delimited data is auto-detected.
+    category: CSV parsing
+    tags:
+    - csv parsing
+
+-   name: xValueParser
+    type: function(str) -> number
+    default: null
+    desc: A function which parses x-values (i.e. the dependent series). Must return a number, even when
+        the values are dates. In this case, millis since epoch are used. This is used primarily for parsing
+        CSV data. *=Dygraphs is slightly more accepting in the dates which it will parse. See code for
+        details.
+    category: CSV parsing
+    tags:
+    - csv parsing
+
+-   name: clickCallback
+    type: function(e, x, points)
+    default: null
+    desc: "A function to call when the canvas is clicked. The function should take three arguments, the\
+        \ event object for the click, the x-value that was clicked (for dates this is millis since epoch),\
+        \ and the closest points along that date. The points have these properties:\n * xval/yval: The\
+        \ data coordinates of the point (with dates/times as millis since epoch) \n * canvasx/canvasy:\
+        \ The canvas coordinates at which the point is drawn. \n name: The name of the data series to\
+        \ which the point belongs"
+    category: Callbacks
+    tags:
+    - callbacks
+    examples:
+    - callback
+
+-   name: drawCallback
+    type: function(dygraph, is_initial)
+    default: null
+    desc: When set, this callback gets called every time the dygraph is drawn. This includes the initial
+        draw, after zooming and repeatedly while panning. The first parameter is the dygraph being drawn.
+        The second is a boolean value indicating whether this is the initial draw.
+    category: Callbacks
+    tags:
+    - callbacks
+    examples:
+    - linear-regression-addseries
+    - annotation
+    - callback
+    - is-zoomed
+    - is-zoomed-ignore-programmatic-zoom
+    - synchronize
+    - zoom
+
+-   name: highlightCallback
+    type: function(event, x, points,row)
+    default: null
+    desc: 'When set, this callback gets called every time a new point is highlighted. The parameters are
+        the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted
+        points: [ {name: ''series'', yval: y-value}, ... ]'
+    category: Callbacks
+    tags:
+    - callbacks
+    examples:
+    - callback
+    - crosshair
+
+-   name: underlayCallback
+    type: function(canvas, area, dygraph)
+    default: null
+    desc: When set, this callback gets called before the chart is drawn. It details on how to use this.
+    category: Callbacks
+    tags:
+    - callbacks
+    examples:
+    - highlighted-region
+    - interaction
+    - linear-regression-fractions
+    - linear-regression
+    - underlay-callback
+
+-   name: unhighlightCallback
+    type: function(event)
+    default: null
+    desc: When set, this callback gets called every time the user stops highlighting any point by mousing
+        out of the graph.  The parameter is the mouseout event.
+    category: Callbacks
+    tags:
+    - callbacks
+    examples:
+    - callback
+    - crosshair
+
+-   name: zoomCallback
+    type: function(minDate, maxDate, yRanges)
+    default: null
+    desc: A function to call when the zoom window is changed (either by zooming in or out). minDate and
+        maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each
+        y-axis.
+    category: Callbacks
+    tags:
+    - callbacks
+    examples:
+    - callback
+    - is-zoomed-ignore-programmatic-zoom
+    - zoom
+
+-   name: title
+    type: String
+    default: null
+    desc: Text to display above the chart. You can supply any HTML for this value, not just text. If you
+        wish to style it using CSS, use the 'dygraph-label' or 'dygraph-title' classes.
+    category: Chart labels
+    tags:
+    - chart labels
+    examples:
+    - border
+    - demo
+    - noise
+    - styled-chart-labels
+    - multi-scale
+    - range-selector
+    - temperature-sf-ny
+
+-   name: titleHeight
+    type: Integer
+    default: 18
+    desc: Height of the chart title, in pixels. This also controls the default font size of the title.
+        If you style the title on your own, this controls how much space is set aside above the chart
+        for the title's div.
+    category: Chart labels
+    tags:
+    - chart labels
+    examples:
+    - styled-chart-labels
+
+-   name: xLabelHeight
+    type: Integer
+    default: 18
+    desc: Height of the x-axis label, in pixels. This also controls the default font size of the x-axis
+        label. If you style the label on your own, this controls how much space is set aside below the
+        chart for the x-axis label's div.
+    category: Chart labels
+    tags:
+    - chart labels
+
+-   name: xlabel
+    type: String
+    default: null
+    desc: Text to display below the chart's x-axis. You can supply any HTML for this value, not just text.
+        If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-xlabel' classes.
+    category: Chart labels
+    tags:
+    - chart labels
+    examples:
+    - border
+    - demo
+    - styled-chart-labels
+    - multi-scale
+
+-   name: y2label
+    type: String
+    default: null
+    desc: Text to display to the right of the chart's secondary y-axis. This label is only displayed if
+        a secondary y-axis is present. See this test for an example of how to do this. The comments for
+        the 'ylabel' option generally apply here as well. This label gets a 'dygraph-y2label' instead
+        of a 'dygraph-ylabel' class.
+    category: Chart labels
+    tags:
+    - chart labels
+    examples:
+    - two-axes
+    - two-axes-vr
+
+-   name: yLabelWidth
+    type: Integer
+    default: 18
+    desc: Width of the div which contains the y-axis label. Since the y-axis label appears rotated 90
+        degrees, this actually affects the height of its div.
+    category: Chart labels
+    tags:
+    - chart labels
+
+-   name: ylabel
+    type: String
+    default: null
+    desc: Text to display to the left of the chart's y-axis. You can supply any HTML for this value, not
+        just text. If you wish to style it using CSS, use the 'dygraph-label' or 'dygraph-ylabel' classes.
+        The text will be rotated 90 degrees by default, so CSS rules may behave in unintuitive ways. No
+        additional space is set aside for a y-axis label. If you need more space, increase the width of
+        the y-axis tick labels using the yAxisLabelWidth option. If you need a wider div for the y-axis
+        label, either style it that way with CSS (but remember that it's rotated, so width is controlled
+        by the 'height' property) or set the yLabelWidth option.
+    category: Chart labels
+    tags:
+    - chart labels
+    examples:
+    - border
+    - demo
+    - two-axes
+    - noise
+    - styled-chart-labels
+    - multi-scale
+    - range-selector
+    - temperature-sf-ny
+    - two-axes-vr
+
+-   name: file
+    type: String (URL of CSV or CSV), GViz DataTable or 2D Array
+    default: null
+    desc: Sets the data being displayed in the chart. This can only be set when calling updateOptions;
+        it cannot be set from the constructor. For a full description of valid data formats, see the Data
+        Formats page.
+    category: Data
+    tags:
+    - data
+    examples:
+    - drawing
+    - dygraph-many-points-benchmark
+
+-   name: connectSeparatedPoints
+    type: Boolean
+    default: false
+    desc: Usually, when Dygraphs encounters a missing value in a data series, it interprets this as a
+        gap and draws it as such. If, instead, the missing values represents an x-value for which only
+        a different series has data, then you'll want to connect the dots by setting this to true. To
+        explicitly include a gap with this option set, use a value of NaN.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - connect-separated
+    - independent-series
+
+-   name: drawPoints
+    type: Boolean
+    default: false
+    desc: Draw a small dot at each point, in addition to a line going through the point. This makes the
+        individual data points easier to see, but can increase visual clutter in the chart.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - linear-regression-addseries
+    - draw-points
+    - dynamic-update
+    - independent-series
+    - interaction
+    - linear-regression-fractions
+    - linear-regression
+    - per-series
+
+-   name: fillGraph
+    type: Boolean
+    default: false
+    desc: Should the area underneath the graph be filled? This option is not compatible with error bars.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - fillGraph
+    - two-axes
+    - steps
+
+-   name: pointSize
+    type: Integer
+    default: 1
+    desc: The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn
+        when a point is "isolated", i.e. there is a missing point on either side of it. This also controls
+        the size of those dots.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - per-series
+
+-   name: stackedGraph
+    type: Boolean
+    default: false
+    desc: If set, stack series on top of one another rather than drawing them independently.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - stacked
+
+-   name: stepPlot
+    type: Boolean
+    default: false
+    desc: When set, display the graph as a step plot instead of a line plot.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - avoidMinZero
+    - steps
+    - y-axis-formatter
+
+-   name: strokePattern
+    type: Array
+    default: null
+    desc: A custom pattern array where the even index is a draw and odd is a space in pixels. If null
+        then it draws a solid line. The array should have a even length as any odd lengthed array could
+        be expressed as a smaller even length array.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - per-series
+
+-   name: strokeWidth
+    type: Integer
+    default: 1
+    desc: The width of the lines connecting data points. This can be used to increase the contrast or
+        some graphs.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - linear-regression-addseries
+    - drawing
+    - grid_dot
+    - layout-options
+    - linear-regression-fractions
+    - linear-regression
+    - per-series
+    - unboxed-spark
+    - styled-chart-labels
+
+-   name: visibility
+    type: Array of booleans
+    default: true
+    desc: Which series should initially be visible? Once the Dygraph has been constructed, you can access
+        and modify the visibility of each series using the visibility and setVisibility methods.
+    category: Data Line display
+    tags:
+    - data line display
+    examples:
+    - color-visibility
+    - no-visibility
+    - visibility
+
+-   name: colorSaturation
+    type: Float (0.0 - 1.0)
+    default: 1.0
+    desc: If colors is not specified, saturation of the automatically-generated data series colors.
+    category: Data Series Colors
+    tags:
+    - data series colors
+
+-   name: colorValue
+    type: Float (0.0 - 1.0)
+    default: 1.0
+    desc: If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0,
+        default 0.5)
+    category: Data Series Colors
+    tags:
+    - data series colors
+
+-   name: colors
+    type: Array
+    default: null
+    desc: List of colors for the data series. These can be of the form "#AABBCC" or "rgb(255,100,200)"
+        or "yellow", etc. If not specified, equally-spaced points around a color wheel are used.
+    category: Data Series Colors
+    tags:
+    - data series colors
+    examples:
+    - century-scale
+    - color-visibility
+    - demo
+    - reverse-y-axis
+    - color-cycle
+
+-   name: fillAlpha
+    type: Float (0.0 - 1.0)
+    default: 0.15
+    desc: Error bars (or custom bars) for each series are drawn in the same color as the series, but with
+        partial transparency. This sets the transparency. A value of 0.0 means that the error bars will
+        not be drawn, whereas a value of 1.0 means that the error bars will be as dark as the line for
+        the series itself. This can be used to produce chart lines whose thickness varies at each point.
+    category: Data Series Colors
+    tags:
+    - data series colors
+    - error bars
+
+-   name: timingName
+    type: String
+    default: null
+    desc: Set this option to log timing information. The value of the option will be logged along with
+        the timimg, so that you can distinguish multiple dygraphs on the same page.
+    category: Debugging
+    tags:
+    - debugging
+    examples:
+    - dygraph-many-points-benchmark
+
+-   name: pixelsPerXLabel
+    type: Integer
+    default: null
+    desc: 'Prefer axes { x: { pixelsPerLabel } }'
+    category: Deprecated
+    tags:
+    - deprecated
+
+-   name: pixelsPerYLabel
+    type: Integer
+    default: null
+    desc: 'Prefer axes: { y: { pixelsPerLabel } }'
+    category: Deprecated
+    tags:
+    - deprecated
+    examples:
+    - spacing
+
+-   name: xAxisLabelFormatter
+    type: function
+    default: null
+    desc: 'Prefer axes { x: { axisLabelFormatter } }'
+    category: Deprecated
+    tags:
+    - deprecated
+
+-   name: xValueFormatter
+    type: function
+    default: null
+    desc: 'Prefer axes: { x: { valueFormatter } }'
+    category: Deprecated
+    tags:
+    - deprecated
+
+-   name: yAxisLabelFormatter
+    type: function
+    default: null
+    desc: 'Prefer axes: { y: { axisLabelFormatter } }'
+    category: Deprecated
+    tags:
+    - deprecated
+
+-   name: yValueFormatter
+    type: function
+    default: null
+    desc: 'Prefer axes: { y: { valueFormatter } }'
+    category: Deprecated
+    tags:
+    - deprecated
+    examples:
+    - labelsKMB
+    - multi-scale
+
+-   name: customBars
+    type: Boolean
+    default: false
+    desc: When set, parse each CSV cell as "low;middle;high". Error bars will be drawn for each point
+        between low and high, with the series itself going through middle.
+    category: Error Bars
+    tags:
+    - error bar
+    - bars
+    - csv
+    - parsing
+    examples:
+    - custom-bars
+    - zero-series
+    - stock
+    - range-selector
+    - temperature-sf-ny
+
+-   name: errorBars
+    type: Boolean
+    default: false
+    desc: Does the data contain standard deviations? Setting this to true alters the input format (see
+        above).
+    category: Error Bars
+    tags:
+    - error bars
+    - bars
+    - csv parsing
+    - csv
+    - parsing
+    examples:
+    - callback
+    - crosshair
+    - custom-bars
+    - customLabel
+    - draw-points
+    - fillGraph
+    - fractions
+    - grid_dot
+    - interaction
+    - is-zoomed-ignore-programmatic-zoom
+    - link-interaction
+    - linear-regression-fractions
+    - missing-data
+    - resize
+    - no-visibility
+    - noise
+    - numeric-gviz
+    - perf
+    - steps
+    - synchronize
+    - underlay-callback
+    - visibility
+    - zoom
+
+-   name: fractions
+    type: Boolean
+    default: false
+    desc: When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers. The
+        ratio will be plotted. This allows computation of Wilson confidence intervals (see below).
+    category: Error Bars
+    tags:
+    - error bars
+    - bars
+    - csv parsing
+    - csv
+    - parsing
+    examples:
+    - fractions
+    - linear-regression-fractions
+
+-   name: sigma
+    type: Float
+    default: 2.0
+    desc: When errorBars is set, shade this many standard deviations above/below each point.
+    category: Error Bars
+    tags:
+    - error bars
+
+-   name: wilsonInterval
+    type: Boolean
+    default: true
+    desc: Use in conjunction with the "fractions" option. Instead of plotting +/- N standard deviations,
+        dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior
+        for ratios close to 0 or 1.
+    category: Error Bars
+    tags:
+    - error bars
+
+-   name: drawXGrid
+    type: Boolean
+    default: true
+    desc: Whether to display vertical gridlines under the chart.
+    category: Grid
+    tags:
+    - grid
+    examples:
+    - demo
+    - unboxed-spark
+
+-   name: drawYGrid
+    type: Boolean
+    default: true
+    desc: Whether to display horizontal gridlines under the chart.
+    category: Grid
+    tags:
+    - grid
+    examples:
+    - drawing
+    - unboxed-spark
+
+-   name: gridLineColor
+    type: String
+    default: rgb(128,128,128)
+    desc: The color of the gridlines. This can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow".
+    category: Grid
+    tags:
+    - grid
+    examples:
+    - drawing
+    - grid_dot
+
+-   name: gridLineWidth
+    type: Float
+    default: 0.3
+    desc: Thickness (in pixels) of the gridlines drawn under the chart. The vertical/horizontal gridlines
+        can be turned off entirely by using the drawXGrid and drawYGrid options.
+    category: Grid
+    tags:
+    - grid
+
+-   name: animatedZooms
+    type: Boolean
+    default: false
+    desc: Set this option to animate the transition between zoom windows. Applies to programmatic and
+        interactive zooms. Note that if you also set a drawCallback, it will be called several times on
+        each zoom. If you set a zoomCallback, it will only be called after the animation is complete.
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - highlighted-region
+    - link-interaction
+
+-   name: highlightCircleSize
+    type: Integer
+    default: 3
+    desc: The size in pixels of the dot drawn over highlighted points.
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - dygraph-many-points-benchmark
+    - grid_dot
+    - per-series
+    - unboxed-spark
+
+-   name: interactionModel
+    hidden: true
+    type: Object
+    default: null
+    desc: 'TODO(konigsberg): document this'
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - drawing
+    - interaction
+
+-   name: pointClickCallback
+    type: function(e, point)
+    default: null
+    desc: "A function to call when a data point is clicked. The function should take two arguments, the\
+        \ event object for the click, and the point that was clicked. The 'point' argument has these properties:\n\
+        \ * xval/yval: The data coordinates of the point (with dates/times as millis since epoch) \n *\
+        \ canvasx/canvasy: The canvas coordinates at which the point is drawn. \n name: The name of the\
+        \ data series to which the point belongs"
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    - callback
+    examples:
+    - annotation
+    - callback
+
+-   name: rangeSelectorHeight
+    type: Integer
+    default: 40
+    desc: Height, in pixels, of the range selector widget. This option can only be specified at Dygraph
+        creation time.
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - range-selector
+
+-   name: rangeSelectorPlotFillColor
+    type: String
+    default: '#A7B1C4'
+    desc: The range selector mini plot fill color. This can be of the form "#AABBCC" or "rgb(255,100,200)"
+        or "yellow". You can also specify null or "" to turn off fill.
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - range-selector
+
+-   name: rangeSelectorPlotStrokeColor
+    type: String
+    default: '#808FAB'
+    desc: The range selector mini plot stroke color. This can be of the form "#AABBCC" or "rgb(255,100,200)"
+        or "yellow". You can also specify null or "" to turn off stroke.
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - range-selector
+
+-   name: showRangeSelector
+    type: Boolean
+    default: false
+    desc: Show the range selector widget. This option can only be specified at Dygraph creation time.
+    category: Interactive Elements
+    tags:
+    - interactive elements
+    examples:
+    - range-selector
+
+-   name: hideOverlayOnMouseOut
+    type: Boolean
+    default: true
+    desc: Whether to hide the legend when the mouse leaves the chart area.
+    category: Legend
+    tags:
+    - legend
+    - interactive elements
+    examples:
+    - gviz-selection
+
+-   name: labels
+    type: Array
+    default: null
+    desc: A name for each data series, including the independent (X) series. For CSV files and DataTable
+        objections, this is determined by context. For raw data, this must be specified. If it is not,
+        default values are supplied and a warning is logged. By default, labels roughly follow
+        ["X", "Y1", "Y2", ...]*
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - linear-regression-addseries
+    - connect-separated
+    - drawing
+    - dygraph
+    - dygraph-many-points-benchmark
+    - dynamic-update
+    - highlighted-region
+    - independent-series
+    - isolated-points
+    - label-div
+    - link-interaction
+    - linear-regression
+    - negative
+    - missing-data
+    - native-format
+    - two-axes
+    - perf
+    - small-range-zero
+    - steps
+    - y-axis-formatter
+    - annotation-native
+    - multi-scale
+    - two-axes-vr
+    - value-axis-formatters
+
+-   name: labelsDiv
+    type: DOM element or string
+    default: null
+    desc: Show data labels in an external div, rather than on the graph.  This value can either be a div
+        element or a div id.
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - century-scale
+    - demo
+    - label-div
+    - reverse-y-axis
+    - unboxed-spark
+
+-   name: labelsDivStyles
+    type: Object
+    default: null
+    desc: 'Additional styles to apply to the currently-highlighted points div. For example, { ''font-weight'':
+        ''bold'' } will make the labels bold.'
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - border
+    - customLabel
+    - noise
+    - styled-chart-labels
+    - range-selector
+    - temperature-sf-ny
+
+-   name: labelsDivWidth
+    type: Integer
+    default: 250
+    desc: Width (in pixels) of the div which shows information on the currently-highlighted points.
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - customLabel
+    - noise
+
+-   name: labelsSeparateLines
+    type: Boolean
+    default: false
+    desc: Put <br/> between lines in the label string. Often used in conjunction with labelsDiv.
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - century-scale
+    - customLabel
+    - demo
+    - reverse-y-axis
+
+-   name: labelsShowZeroValues
+    type: Boolean
+    default: true
+    desc: Show zero value labels in the labelsDiv.
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - label-div
+
+-   name: legend
+    type: String
+    default: onmouseover
+    desc: When to display the legend. By default, it only appears when a user mouses over the chart. Set
+        it to "always" to always display a legend of some sort.
+    category: Legend
+    tags:
+    - legend
+    examples:
+    - demo
+    - noise
+    - per-series
+    - styled-chart-labels
+    - multi-scale
+    - range-selector
+    - temperature-sf-ny
+
+-   name: showLabelsOnHighlight
+    type: Boolean
+    default: true
+    desc: Whether to show the legend upon mouseover.
+    category: Legend
+    tags:
+    - legend
+    - interactive elements
+    examples:
+    - callback
+
+-   name: rightGap
+    type: Integer
+    default: 5
+    desc: Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight
+        the right-most data point.
+    category: Overall display
+    tags:
+    - overall display
+
+-   name: rollPeriod
+    type: Integer >= 1
+    default: 1
+    desc: Number of days over which to average data. Discussed extensively above.
+    category: Rolling Averages
+    tags:
+    - rolling averages
+    - error bars
+    examples:
+    - annotation
+    - callback
+    - century-scale
+    - crosshair
+    - customLabel
+    - draw-points
+    - dygraph-many-points-benchmark
+    - grid_dot
+    - link-interaction
+    - missing-data
+    - resize
+    - no-visibility
+    - noise
+    - perf
+    - reverse-y-axis
+    - unboxed-spark
+    - spacing
+    - styled-chart-labels
+    - synchronize
+    - two-series
+    - underlay-callback
+    - visibility
+    - range-selector
+    - temperature-sf-ny
+
+-   name: showRoller
+    type: Boolean
+    default: false
+    desc: If the rolling average period text box should be shown.
+    category: Rolling Averages
+    tags:
+    - rolling averages
+    - interactive elements
+    examples:
+    - annotation
+    - callback
+    - crosshair
+    - dynamic-update
+    - fractions
+    - isolated-points
+    - missing-data
+    - numeric-gviz
+    - steps
+    - underlay-callback
+    - range-selector
+    - temperature-sf-ny
+
+-   name: digitsAfterDecimal
+    type: Integer
+    default: 2
+    desc: Unless it's run in scientific mode (see the sigFigs option), dygraphs displays numbers with
+        digitsAfterDecimal digits after the decimal point. Trailing zeros are not displayed, so with a
+        value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46').
+        Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as
+        '0.00') will be displayed in scientific notation.
+    category: Value display/formatting
+    tags:
+    - value display/formatting
+    examples:
+    - number-display
+
+-   name: labelsKMB
+    type: Boolean
+    default: false
+    desc: Show K/M/B for thousands/millions/billions on y-axis.
+    category: Value display/formatting
+    tags:
+    - value display/formatting
+    examples:
+    - annotation-gviz
+    - century-scale
+    - demo
+    - labelsKMB
+    - no-range
+    - two-axes
+    - reverse-y-axis
+    - two-axes-vr
+
+-   name: labelsKMG2
+    type: Boolean
+    default: false
+    desc: Show k/M/G for kilo/Mega/Giga on y-axis. This is different than labelsKMB in that it uses base
+        2, not 10.
+    category: Value display/formatting
+    tags:
+    - value display/formatting
+    examples:
+    - labelsKMB
+
+-   name: maxNumberWidth
+    type: Integer
+    default: 6
+    desc: When displaying numbers in normal (not scientific) mode, large numbers will be displayed with
+        many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels.
+        If there are more than maxNumberWidth digits to the left of the decimal in a number, dygraphs
+        will switch to scientific notation, even when not operating in scientific mode. If you'd like
+        to see all those digits, set this to something large, like 20 or 30.
+    category: Value display/formatting
+    tags:
+    - value display/formatting
+    examples:
+    - number-display
+
+-   name: sigFigs
+    type: Integer
+    default: null
+    desc: By default, dygraphs displays numbers with a fixed number of digits after the decimal point.
+        If you'd prefer to have a fixed number of significant figures, set this option to that number
+        of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed
+        as 1.23e+3.
+    category: Value display/formatting
+    tags:
+    - value display/formatting
+    examples:
+    - number-display
+
+-   name: valueFormatter
+    type: function(num or millis, opts, dygraph)
+    default: null
+    desc: Function to provide a custom display format for the values displayed on mouseover. This does
+        not affect the values that appear on tick marks next to the axes. To format those, see axisLabelFormatter.
+        This is usually set on a per-axis basis. For date axes, you can call new Date(millis) to get a
+        Date object. opts is a function you can call to access various options (e.g. opts('labelsKMB')). Default
+        formatter will depend on the type of your data.
+    category: Value display/formatting
+    tags:
+    - value display/formatting
+    - legend
+    examples:
+    - y-axis-formatter
+    - value-axis-formatters
+
+-   name: isZoomedIgnoreProgrammaticZoom
+    type: Boolean
+    default: false
+    desc: When this option is passed to updateOptions() along with either the dateWindow or valueRange
+        options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for
+        when the display area of a chart is changed programmatically and also where manual zooming is
+        allowed and use is made of the isZoomed method to determine this.
+    category: Zooming
+    tags:
+    - zooming
+    examples:
+    - is-zoomed-ignore-programmatic-zoom
diff --git a/www/graph/test.jade b/www/graph/test.jade
new file mode 100644 (file)
index 0000000..b66d268
--- /dev/null
@@ -0,0 +1,23 @@
+extends ../layout
+
+block title
+    title Kraken: Graph Test Page
+
+append styles
+    mixin css('forms.css')
+    mixin css('graph.css')
+
+//- 
+    block content
+        section.graph
+            .viewport
+            fieldset
+                legend Settings
+                form.settings
+                    //- mixin text_field('data', 'data/page_views_by_project.csv')
+
+block page-scripts
+    script
+        var CHART_OPTIONS_SPEC = !{ fs.readFileSync('www/graph/dygraph-options.json', 'utf8') };
+    
+
index d5dcc3a..edacf36 100644 (file)
@@ -15,7 +15,7 @@ all:
         - require
         - underscore.mod
         - underscore.string.mod
-        - jade.min
+        - jade.runtime.min
         - backbone
         - u.min
         - dygraph
@@ -32,6 +32,9 @@ all:
             - util:
                 - op
                 - index
+            - template:
+                - graph.jade
+                - graph-option.jade
             - scaffold
             - graph