From: dsc Date: Mon, 20 Feb 2012 14:58:07 +0000 (-0800) Subject: Use precompiled Jade templates for views. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=ee821282b254386c97913b7ceccf31cf0e5b76ca;p=limn-bak.git Use precompiled Jade templates for views. --- diff --git a/lib/graph.co b/lib/graph.co index 97c534d..0d109d3 100644 --- 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 --- 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 """ @@ -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 --- 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 index 0000000..e69de29 diff --git a/lib/template/graph.jade b/lib/template/graph.jade new file mode 100644 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 index 0000000..e69de29 diff --git a/www/graph.jade b/www/graph.jade deleted file mode 100644 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 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) + 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
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 index 0000000..b66d268 --- /dev/null +++ b/www/graph/test.jade @@ -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') }; + + diff --git a/www/modules.yaml b/www/modules.yaml index d5dcc3a..edacf36 100644 --- a/www/modules.yaml +++ b/www/modules.yaml @@ -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