Use precompiled Jade templates for views.

diff --git a/lib/graph.co b/lib/graph.co
index 97c534d..0d109d3 100644 (file)
--- a/lib/graph.co
+++ b/lib/graph.co
@@ -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()"
+# }}}
 
 
 
-
-    
-    
-

diff --git a/lib/scaffold.co b/lib/scaffold.co
index 78f1f20..b8f6cc0 100644 (file)
--- a/lib/scaffold.co
+++ b/lib/scaffold.co
@@ -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()"
 # }}}
 

diff --git a/lib/server/server.co b/lib/server/server.co
index d21c21d..c52a44d 100755 (executable)
--- a/lib/server/server.co
+++ b/lib/server/server.co
@@ -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
+++ b/lib/template/graph.jade
@@ -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
--- a/www/graph.jade
+++ /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/dygraph-options.json b/www/graph/dygraph-options.json
similarity index 100%
rename from www/dygraph-options.json
rename to www/graph/dygraph-options.json

diff --git a/www/graph/dygraph-options.yaml b/www/graph/dygraph-options.yaml
new file mode 100644 (file)
index 0000000..1df4c49
--- /dev/null
+++ b/www/graph/dygraph-options.yaml
@@ -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)