From: dsc Date: Thu, 23 Feb 2012 02:54:25 +0000 (-0800) Subject: Adds directory indices, code comments. X-Git-Url: http://git.less.ly:3516/?a=commitdiff_plain;h=191fb9be625cd0e6728afab9025ceae70cc0c725;p=kraken-ui.git Adds directory indices, code comments. --- diff --git a/kraken-ui.tmproj b/kraken-ui.tmproj index 39eb08a..66b50f6 100644 --- a/kraken-ui.tmproj +++ b/kraken-ui.tmproj @@ -12,9 +12,9 @@ name kraken-ui regexFileFilter - !(?x: lib/version.js|package\.json |license\.md|paver-minilib\.zip|\.([oa]|dylib|fla|py[co]|mako\.py|pch|cm[oix]|cache|(xcode)proj)|(fish(_read)?_history|fishd\..*)|/Icon\r|/svn-commit(\.[2-9])?\.tmp|/\.(?!(git|svn|npm)ignore|htaccess|gitmodules)[^/]*)$ + !(?x: lib/version.js|package\.json |license\.md | \.(png|jpg|gif|ico|psd|ai|zip|tar|gz | [oa]|dylib|fla|py[co]|mako\.py|pch|cm[oix]|cache|(tm|xcode)proj)|(fish(_read)?_history|fishd\..*)|/Icon\r|/svn-commit(\.[2-9])?\.tmp|/\.(?!(git|svn|npm)ignore|htaccess|gitmodules)[^/]*)$ regexFolderFilter - !.*/(?x: tmp/dygraphs | data | static/vendor|www/js/kraken-ui | var|target|node_modules|html-template|bin-debug | \.((?!git-hooks)[^/]+) | .*\.(egg-info|framework|app|(pbx?|xcode)proj|xcode|bundle) | CVS|_darcs|_MTN|\{arch\}|blib | .*~\.nib )$ + !.*/(?x: tmp/dygraphs | data | static/(vendor|tmp)|www/js/kraken | var|target|node_modules|html-template|bin-debug | \.((?!git-hooks)[^/]+) | .*\.(egg-info|framework|app|(pbx?|xcode)proj|xcode|bundle) | CVS|_darcs|_MTN|\{arch\}|blib | .*~\.nib )$ selected sourceDirectory diff --git a/lib/graph.co b/lib/graph.co index 4b1ee61..0d23855 100644 --- a/lib/graph.co +++ b/lib/graph.co @@ -1,5 +1,5 @@ _ = require 'kraken/underscore' -{ Field, FieldList, FieldView, Scaffold +{ Field, FieldList, BaseView, FieldView, Scaffold } = require 'kraken/scaffold' @@ -11,6 +11,13 @@ GraphOption = exports.GraphOption = Field.extend do # {{{ # initialize : -> # # console.log "#this.initialize!" # Field::initialize ... + + toJSON: -> + o = Field::toJSON ... + for k, v in o + o[k] = '' if v!? + o + # }}} @@ -53,11 +60,13 @@ GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{ @model.setValue val, {+silent} render: -> - outer = $ @template @model.toJSON() - @$el.html outer.html() - .attr do - id : outer.attr 'id' - class : outer.attr('class') + if @isCollapsed then ' collapsed' else '' + FieldView::render.call this + @$el.addClass 'collapsed' if @isCollapsed + # outer = $ @template @model.toJSON() + # @$el.html outer.html() + # .attr do + # id : outer.attr 'id' + # class : outer.attr('class') + if @isCollapsed then ' collapsed' else '' this toggleCollapsed: -> @@ -71,18 +80,23 @@ GraphOptionView = exports.GraphOptionView = FieldView.extend do # {{{ GraphOptionsScaffold = exports.GraphOptionsScaffold = Scaffold.extend do # {{{ ctorName : 'GraphOptionsScaffold' + tagName : 'form' className : 'options scaffold' collectionType : GraphOptionList subviewType : GraphOptionView # initialize : -> # Scaffold::initialize ... - # @$el.isotope do - # itemSelector : '.field.option' - # layoutMode : 'masonry' - # masonry : columnWidth : 10 - # animationEngine : 'jquery' - # + + render: -> + @__super__.render ... + @$el.isotope do + itemSelector : '.field.option' + layoutMode : 'masonry' + masonry : columnWidth : 100 + # animationEngine : 'jquery' + itemPositionDataEnabled : true + # }}} @@ -113,8 +127,8 @@ GraphModel = exports.GraphModel = Backbone.Model.extend do # {{{ # }}} -GraphView = exports.GraphView = Backbone.View.extend do # {{{ - ctorName : 'Graph' +GraphView = exports.GraphView = BaseView.extend do # {{{ + ctorName : 'GraphView' tagName : 'section' className : 'graph' template : require 'kraken/template/graph' @@ -125,19 +139,22 @@ GraphView = exports.GraphView = Backbone.View.extend do # {{{ initialize : (o={}) -> - {graph_spec} = o @model or= new GraphModel + BaseView::initialize ... - @$el.data { model:@model, view:this } @model.on 'change', @render, this @model.on 'destroy', @remove, this + @build() @viewport = @$el.find '.viewport' - @scaffold = new GraphOptionsScaffold do - el: @$el.find 'form.settings' - @scaffold.collection.reset graph_spec - @render() + @scaffold = new GraphOptionsScaffold + @$el.find 'fieldset' .append @scaffold.el + @scaffold.collection.reset that if o.graph_spec + + setTimeout do + ~> @render() + 50 chartOptions: (values) -> @@ -155,23 +172,36 @@ GraphView = exports.GraphView = Backbone.View.extend do # {{{ options.values() render: -> - @viewport.empty() + # BaseView::render ... + + options = @chartOptions() + w = options.width or= @scaffold.get 'width' .getValue() or 480 + h = options.height or= @scaffold.get 'height' .getValue() or 320 + @viewport.css { width:w, height:h } # Remove old style, as it confuses dygraph after options update @viewport.attr 'style', '' + console.log "#this" console.log do " .viewport.{ width=%s, height=%s, style=%s }" @viewport.css('width') @viewport.css('height') @viewport.attr 'style' - console.log ' .options:', JSON.stringify @chartOptions() + @viewport + console.log ' .options:', JSON.stringify options - @chart?.destroy() - @chart = new Dygraph do - @viewport.0 - @model.get 'dataset' - @chartOptions() + # @chart?.destroy() + unless @chart + @chart = new Dygraph do + @viewport.0 + @model.get 'dataset' + options + else + @chart.updateOptions options + @chart.resize w, h + + this onKeypress: (evt) -> $(evt.target).submit() if evt.keyCode is 13 diff --git a/lib/main.co b/lib/main.co index cda2b9b..c995cc4 100644 --- a/lib/main.co +++ b/lib/main.co @@ -1,5 +1,5 @@ -_ = require 'kraken/underscore' -{ Field, FieldList, FieldView, Scaffold +{_, op} = require 'kraken/util' +{ Field, FieldList, BaseView, FieldView, Scaffold } = require 'kraken/scaffold' { GraphView, GraphModel, GraphOption, GraphOptionList, GraphOptionView, @@ -11,10 +11,10 @@ root = do -> this # Create the Graph Scaffold main = -> - graph = root.graph = new GraphView { + graph = root.graph = new GraphView { graph_spec: CHART_OPTIONS_SPEC - el: $ 'section.graph' .eq 0 } + $ '#content' .append graph.el jQuery.ajax do diff --git a/lib/scaffold.co b/lib/scaffold.co index 7bf758f..474ff3c 100644 --- a/lib/scaffold.co +++ b/lib/scaffold.co @@ -3,6 +3,8 @@ op = require 'kraken/util/op' +### Scaffold Models + Field = exports.Field = Backbone.Model.extend do # {{{ ctorName : 'Field' idAttribute : 'name' @@ -18,6 +20,7 @@ Field = exports.Field = Backbone.Model.extend do # {{{ default : null desc : '' category : 'General' + include : 'diff' tags : [] examples : [] } @@ -42,8 +45,8 @@ Field = exports.Field = Backbone.Model.extend do # {{{ parser - getValue: -> - @getParser() @get 'value' + getValue: (def) -> + @getParser() @get 'value', def setValue: (v, options) -> def = @get 'default' @@ -63,7 +66,7 @@ Field = exports.Field = Backbone.Model.extend do # {{{ {id:@id} import do _.clone(@attributes) import { value:@getValue(), def:@get('default') } - toString: -> "#{@ctorName}(id=#{@id}, value=#{@get 'value'})" + toString: -> "(#{@id}: #{@get 'value'})" # }}} @@ -84,9 +87,73 @@ FieldList = exports.FieldList = Backbone.Collection.extend do # {{{ # }}} + + ### Views -FieldView = exports.FieldView = Backbone.View.extend do # {{{ +BaseView = exports.BaseView = Backbone.View.extend do # {{{ + # List of methods to bind on initialize; set on subclass + __bind__ : [] + + + initialize: -> + _.bindAll this, ...@__bind__ + @__super__ = @constructor.__super__ + Backbone.View::initialize ... + + @model.view = this + @$el.data { @model, view:this } + @model.on 'change', @render, this + @model.on 'destroy', @remove, this + + + toTemplateLocals: -> + { $, _, op, @model, view:this } import @model.toJSON() + + $template: (locals={}) -> + $ @template @toTemplateLocals() import locals + + build: -> + return this unless @template + + outer = @$template() + @$el.html outer.html() + .attr do + id : outer.attr 'id' + class : outer.attr('class') + + # @$parent = p if (p = @$el.parent()).length + this + + render: -> + @build() + + hide : -> @$el.hide(); this + show : -> @$el.show(); this + remove : -> @$el.remove(); this + clear : -> @model.destroy(); @remove() + + + # remove : -> + # if (p = @$el.parent()).length + # @$parent or= p + # # @parent_index = p.children().indexOf @$el + # @$el.remove() + # this + # + # reparent : (parent=@$parent) -> + # parent = $ parent + # @$el.appendTo parent if parent?.length + # this + + toString : -> "#{@ctorName}(model=#{@model})" + + +# }}} + + + +FieldView = exports.FieldView = BaseView.extend do # {{{ tagName : 'div' className : 'field' @@ -97,10 +164,7 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{ initialize: -> # console.log "#this.initialize!" - @model.view = this - @$el.data { model:@model, view:this } - @model.on 'change', @render, this - @model.on 'destroy', @remove, this + BaseView::initialize ... onUIChange: -> val = @$el.find('.value').val() @@ -110,37 +174,30 @@ FieldView = exports.FieldView = Backbone.View.extend do # {{{ @model.setValue val, {+silent} render: -> - if @template - t = $ @template @model.toJSON() - @$el.html t.html() - .attr { id:t.attr('id'), class:t.attr('class') } - return this - return @remove() if @model.get 'hidden' + return BaseView::render ... if @template name = @model.get 'name' id = _.camelize name label = name - # label = _.humanize name + value = @model.get 'value' + value = '' if value!? + @$el.html """ - + """ - # @$el.find '.value' .attr 'value', @model.get 'value' - @$el.find '.value' .val @model.get 'value' + this - remove : -> @$el.remove(); this - clear : -> @model.destroy(); this - toString : -> "#{@ctorName}(model=#{@model})" - # }}} # There are several special options that, if passed, will be attached directly to the view: # model, collection, el, id, className, tagName, attributes -Scaffold = exports.Scaffold = Backbone.View.extend do # {{{ +Scaffold = exports.Scaffold = BaseView.extend do # {{{ + __bind__ : <[ addOne addAll ]> tagName : 'form' className : 'scaffold' @@ -149,11 +206,12 @@ Scaffold = exports.Scaffold = Backbone.View.extend do # {{{ initialize: -> - _.bindAll this, 'addOne', 'addAll' @subviews = [] - CollectionType = @collectionType @model = @collection or= new CollectionType + + BaseView::initialize ... + @collection.on 'add', @addOne @collection.on 'reset', @addAll diff --git a/lib/server/server.co b/lib/server/server.co index c933e63..d9a6c44 100755 --- a/lib/server/server.co +++ b/lib/server/server.co @@ -45,23 +45,26 @@ app.start = -> app.configure -> mime.define 'text/plain' : <[ jade co styl stylus ]> + # Set up app.set 'views', WWW app.set 'view engine', 'jade' app.set 'view options', { layout : false pretty : true version : VERSION - WWW : WWW - VAR : VAR - STATIC : STATIC } import require './view-helpers' app.use express.logger() if LOG_LEVEL is 'DEBUG' + + # Parse form submits into req.params app.use express.bodyParser() + + # Allow "spoofing" HTTP methods that IE doesn't support app.use express.methodOverride() + # Transparently recompile modules that have changed app.use compiler do - enabled : <[ stylus coco jade-browser yaml ]> + enabled : <[ coco jade-browser stylus yaml ]> src : WWW dest : VAR options : stylus : { nib:true, include:"#WWW/css" } @@ -80,17 +83,23 @@ app.configure -> dest : VAR options : commonjs : { drop_path_parts:1, drop_full_ext:true } log_level : LOG_LEVEL - app.use require('browserify') do mount : '/vendor/browserify.js' require : <[ events seq ]> + # Serve static files app.use express.static WWW app.use express.static VAR app.use express.static STATIC + # Route to the web services app.use app.router + # Serve directory listings + app.use express.directory WWW + app.use express.directory VAR + app.use express.directory STATIC + app.use express.errorHandler do dumpExceptions : true showStack : true diff --git a/lib/server/view-helpers.co b/lib/server/view-helpers.co index e33cfa7..e54fde6 100644 --- a/lib/server/view-helpers.co +++ b/lib/server/view-helpers.co @@ -1,25 +1,35 @@ # Utilities for use in templates +CWD = exports.CWD = process.cwd() +WWW = exports.WWW = "#CWD/www" +VAR = exports.VAR = "#CWD/var" +STATIC = exports.STATIC = "#CWD/static" + +VERSION = 'dev' +try VERSION = require '../version' catch e +exports.VERSION = VERSION + # maybe! exports.require = require fs = exports.fs = require 'fs' path = exports.path = require 'path' - -_ = exports._ = require 'underscore' + +_ = exports._ = require 'underscore' _.str = require 'underscore.string' _.mixin _.str.exports() + yaml = exports.yaml = require 'js-yaml' jade = exports.jade = require 'jade' - + exports.env = process.env -NODE_ENV = (process.env.NODE_ENV or 'dev').toLowerCase() -IS_PROD = exports.IS_PROD = _ NODE_ENV .startsWith 'prod' -IS_TEST = exports.IS_TEST = _ NODE_ENV .startsWith 'test' -IS_DEV = exports.IS_DEV = not (IS_PROD or IS_TEST) # _.startsWith NODE_ENV, 'dev' -# Canonicalize -NODE_ENV = exports.NODE_ENV = if IS_PROD then 'prod' else if IS_TEST then 'test' else 'dev' +NODE_ENV = exports.NODE_ENV = (process.env.NODE_ENV or 'dev').toLowerCase() +# IS_PROD = exports.IS_PROD = _ NODE_ENV .startsWith 'prod' +# IS_TEST = exports.IS_TEST = _ NODE_ENV .startsWith 'test' +# IS_DEV = exports.IS_DEV = not (IS_PROD or IS_TEST) # _.startsWith NODE_ENV, 'dev' +# # Canonicalize +# NODE_ENV = exports.NODE_ENV = if IS_PROD then 'prod' else if IS_TEST then 'test' else 'dev' sources = exports.sources = (modulesFile, node_env=NODE_ENV) -> diff --git a/lib/template/graph.jade b/lib/template/graph.jade index 7dd5df7..29b193a 100644 --- a/lib/template/graph.jade +++ b/lib/template/graph.jade @@ -7,6 +7,6 @@ section.graph(id=id) form.details label.name(for='#{id}_name') Name - fieldset.options + fieldset legend Graph Options diff --git a/lib/util/backbone.co b/lib/util/backbone.co new file mode 100644 index 0000000..4dbe1ed --- /dev/null +++ b/lib/util/backbone.co @@ -0,0 +1,52 @@ +_ = require 'underscore' +# Backbone = require 'backbone' + + +_backbone = do + + /** + * @returns {Array} The list of all superclasses for this class or object. + */ + getSuperClasses: function getSuperClasses(cls) + cls .= constructor if cls and typeof cls is not 'function' + if superclass = cls?.__super__?.constructor + [superclass].concat getSuperClasses superclass + else + [] + + +exports import _backbone + + +/** + * Decorates a function so that its receiver (`this`) is always added as the + * first argument, followed by the call arguments. + * @returns {Function} + */ +methodize = exports.methodize = (fn) -> + m = fn.__methodized__ + return m if m + + g = fn.__genericized__ + return that if g?.__wraps__ + + m = fn.__methodized__ = (...args) -> + args.unshift this + fn.apply this, args + + m.__wraps__ = fn + m + + +# Add the class extensions as static methods of the Backbone classes +_methodized = exports._methodized = _.reduce do + _backbone + (o, v, k) -> + o[k] = if typeof v is 'function' then methodize v else v + o + {} + +for Cls of Backbone.<[ Model Collection View ]> + Cls import _methodized + Cls:: import _methodized + diff --git a/lib/util/index.co b/lib/util/index.co index 30d12d9..9c24959 100644 --- a/lib/util/index.co +++ b/lib/util/index.co @@ -1,4 +1,4 @@ -_ = require 'kraken/underscore' +_ = require 'kraken/underscore' root = do -> this root.console or= _ <[ log info warn error dir table group groupCollapsed groupEnd ]> .synthesize -> [it, nop] @@ -9,10 +9,11 @@ root.jQuery?.fn.invoke = (method, ...args) -> el[method] ...args op = require 'kraken/util/op' +backbone = require 'kraken/util/backbone' # HashSet = require 'kraken/util/hashset' # BitString = require 'kraken/util/bitstring' # {crc32} = require 'kraken/util/crc' -exports import { root, _, op, } +exports import { root, _, op, backbone } # exports import { root, _, op, HashSet, BitString, crc32, } diff --git a/msc/dygraph-options/data.yaml b/msc/dygraph-options/data.yaml index 1df4c49..92e3213 100644 --- a/msc/dygraph-options/data.yaml +++ b/msc/dygraph-options/data.yaml @@ -7,24 +7,6 @@ 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 @@ -34,19 +16,6 @@ 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) diff --git a/static/vendor/crc.js b/static/vendor/crc.js deleted file mode 100644 index 8f2a2a0..0000000 --- a/static/vendor/crc.js +++ /dev/null @@ -1,37 +0,0 @@ -function crc32 (str) { - - function Utf8Encode(string) { - string = string.replace(/\r\n/g,"\n"); - var utftext = ""; - - for (var n = 0; n < string.length; n++) { - var c = string.charCodeAt(n); - if (c < 128) { - utftext += String.fromCharCode(c); - } else if((c > 127) && (c < 2048)) { - utftext += String.fromCharCode((c >> 6) | 192); - utftext += String.fromCharCode((c & 63) | 128); - } else { - utftext += String.fromCharCode((c >> 12) | 224); - utftext += String.fromCharCode(((c >> 6) & 63) | 128); - utftext += String.fromCharCode((c & 63) | 128); - } - } - return utftext; - }; - - str = Utf8Encode(str); - var table = "00000000 77073096 EE0E612C 990951BA 076DC419 706AF48F E963A535 9E6495A3 0EDB8832 79DCB8A4 E0D5E91E 97D2D988 09B64C2B 7EB17CBD E7B82D07 90BF1D91 1DB71064 6AB020F2 F3B97148 84BE41DE 1ADAD47D 6DDDE4EB F4D4B551 83D385C7 136C9856 646BA8C0 FD62F97A 8A65C9EC 14015C4F 63066CD9 FA0F3D63 8D080DF5 3B6E20C8 4C69105E D56041E4 A2677172 3C03E4D1 4B04D447 D20D85FD A50AB56B 35B5A8FA 42B2986C DBBBC9D6 ACBCF940 32D86CE3 45DF5C75 DCD60DCF ABD13D59 26D930AC 51DE003A C8D75180 BFD06116 21B4F4B5 56B3C423 CFBA9599 B8BDA50F 2802B89E 5F058808 C60CD9B2 B10BE924 2F6F7C87 58684C11 C1611DAB B6662D3D 76DC4190 01DB7106 98D220BC EFD5102A 71B18589 06B6B51F 9FBFE4A5 E8B8D433 7807C9A2 0F00F934 9609A88E E10E9818 7F6A0DBB 086D3D2D 91646C97 E6635C01 6B6B51F4 1C6C6162 856530D8 F262004E 6C0695ED 1B01A57B 8208F4C1 F50FC457 65B0D9C6 12B7E950 8BBEB8EA FCB9887C 62DD1DDF 15DA2D49 8CD37CF3 FBD44C65 4DB26158 3AB551CE A3BC0074 D4BB30E2 4ADFA541 3DD895D7 A4D1C46D D3D6F4FB 4369E96A 346ED9FC AD678846 DA60B8D0 44042D73 33031DE5 AA0A4C5F DD0D7CC9 5005713C 270241AA BE0B1010 C90C2086 5768B525 206F85B3 B966D409 CE61E49F 5EDEF90E 29D9C998 B0D09822 C7D7A8B4 59B33D17 2EB40D81 B7BD5C3B C0BA6CAD EDB88320 9ABFB3B6 03B6E20C 74B1D29A EAD54739 9DD277AF 04DB2615 73DC1683 E3630B12 94643B84 0D6D6A3E 7A6A5AA8 E40ECF0B 9309FF9D 0A00AE27 7D079EB1 F00F9344 8708A3D2 1E01F268 6906C2FE F762575D 806567CB 196C3671 6E6B06E7 FED41B76 89D32BE0 10DA7A5A 67DD4ACC F9B9DF6F 8EBEEFF9 17B7BE43 60B08ED5 D6D6A3E8 A1D1937E 38D8C2C4 4FDFF252 D1BB67F1 A6BC5767 3FB506DD 48B2364B D80D2BDA AF0A1B4C 36034AF6 41047A60 DF60EFC3 A867DF55 316E8EEF 4669BE79 CB61B38C BC66831A 256FD2A0 5268E236 CC0C7795 BB0B4703 220216B9 5505262F C5BA3BBE B2BD0B28 2BB45A92 5CB36A04 C2D7FFA7 B5D0CF31 2CD99E8B 5BDEAE1D 9B64C2B0 EC63F226 756AA39C 026D930A 9C0906A9 EB0E363F 72076785 05005713 95BF4A82 E2B87A14 7BB12BAE 0CB61B38 92D28E9B E5D5BE0D 7CDCEFB7 0BDBDF21 86D3D2D4 F1D4E242 68DDB3F8 1FDA836E 81BE16CD F6B9265B 6FB077E1 18B74777 88085AE6 FF0F6A70 66063BCA 11010B5C 8F659EFF F862AE69 616BFFD3 166CCF45 A00AE278 D70DD2EE 4E048354 3903B3C2 A7672661 D06016F7 4969474D 3E6E77DB AED16A4A D9D65ADC 40DF0B66 37D83BF0 A9BCAE53 DEBB9EC5 47B2CF7F 30B5FFE9 BDBDF21C CABAC28A 53B39330 24B4A3A6 BAD03605 CDD70693 54DE5729 23D967BF B3667A2E C4614AB8 5D681B02 2A6F2B94 B40BBE37 C30C8EA1 5A05DF1B 2D02EF8D"; - - if (typeof(crc) == "undefined") { crc = 0; } - var x = 0, y = 0; - - crc = crc ^ (-1); - for( var i = 0, iTop = str.length; i < iTop; i++ ) { - y = ( crc ^ str.charCodeAt( i ) ) & 0xFF; - x = "0x" + table.substr( y * 9, 8 ); - crc = ( crc >>> 8 ) ^ x; - } - - return crc ^ (-1); -}; \ No newline at end of file diff --git a/www/css/colors.styl b/www/css/colors.styl index e6bd3b2..767a8cf 100644 --- a/www/css/colors.styl +++ b/www/css/colors.styl @@ -1,17 +1,17 @@ /** Project Colors **/ /* background colors */ -$main_bgcolor = #fff -$page_bgcolor = #eee -$foot_bgcolor = #3b3b3b +$main_bgcolor = #fff +$page_bgcolor = #eee +$foot_bgcolor = #3b3b3b /* text & link colors */ -$body_text = #333 -$foot_text = #505050 -$body_link = #2d588f -$foot_link = #666 +$body_text = #333 +$foot_text = #505050 +$body_link = #2d588f +$foot_link = #666 -$border_color = #ccc +$border_color = #ccc /* spot colors */ $hilite_dkblue = #182B53 diff --git a/www/css/graph.styl b/www/css/graph.styl index bb36172..f23bf6b 100644 --- a/www/css/graph.styl +++ b/www/css/graph.styl @@ -7,6 +7,8 @@ section.graph .viewport position relative + min-width 200px + min-height 100px form.details position relative @@ -18,6 +20,8 @@ section.graph .field.option padding 0.5em margin 0.5em + width 200px + min-height 2em .shortname display none diff --git a/www/graph/_dygraph-options.json b/www/graph/_dygraph-options.json deleted file mode 100644 index 71a3aa6..0000000 --- a/www/graph/_dygraph-options.json +++ /dev/null @@ -1 +0,0 @@ -[{"category": "Overall display", "name": "width", "tags": ["overall display"], "default": 480, "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"], "type": "Integer", "desc": "Width, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."}, {"category": "Overall display", "name": "height", "tags": ["overall display"], "default": 320, "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"], "type": "Integer", "desc": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."}, {"category": "Annotations", "name": "annotationClickHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user clicks on an annotation."}, {"category": "Annotations", "name": "annotationDblClickHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user double-clicks on an annotation."}, {"category": "Annotations", "name": "annotationMouseOutHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user mouses out of an annotation."}, {"category": "Annotations", "name": "annotationMouseOverHandler", "tags": ["annotations", "handler"], "default": null, "examples": ["annotation"], "type": "function(annotation, point, dygraph, event)", "desc": "If provided, this function is called whenever the user mouses over an annotation."}, {"category": "Annotations", "name": "displayAnnotations", "tags": ["annotations"], "default": false, "examples": ["annotation-gviz"], "type": "Boolean", "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": "Axes", "name": "avoidMinZero", "tags": ["axes"], "default": false, "examples": ["avoidMinZero"], "type": "Boolean", "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", "name": "axis", "tags": ["axes"], "default": null, "examples": ["two-axes", "steps", "two-axes-vr", "value-axis-formatters"], "type": "String or Object", "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", "name": "axisLabelColor", "tags": ["axes"], "default": "black", "type": "String", "desc": "Color for x- and y-axis labels. This is a CSS color string."}, {"category": "Axes", "name": "axisLabelFontSize", "tags": ["axes"], "default": 14, "type": "Integer", "desc": "Size of the font (in pixels) to use in the axis labels, both x- and y-axis."}, {"category": "Axes", "name": "axisLabelFormatter", "tags": ["axes"], "default": null, "examples": ["x-axis-formatter", "y-axis-formatter", "value-axis-formatters"], "type": "function(number or Date, granularity, opts, dygraph)", "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", "name": "axisLabelWidth", "tags": ["axes", "labels"], "default": 50, "type": "Integer", "desc": "Width (in pixels) of the containing divs for x- and y-axis labels. For the y-axis, this also controls"}, {"category": "Axes", "name": "axisLineColor", "tags": ["axes"], "default": "black", "examples": ["demo"], "type": "String", "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", "name": "axisLineWidth", "tags": ["axes"], "default": 0.3, "type": "Float", "desc": "Thickness (in pixels) of the x- and y-axis lines."}, {"category": "Axes", "name": "axisTickSize", "tags": ["axes"], "default": "3.0", "type": "Number", "desc": "The size of the line to display next to each tick mark on x- or y-axes."}, {"category": "Axes", "name": "dateWindow", "tags": ["axes"], "default": null, "examples": ["dateWindow", "drawing", "is-zoomed-ignore-programmatic-zoom", "link-interaction", "synchronize", "zoom"], "type": "Array of two Dates or numbers", "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", "name": "drawXAxis", "tags": ["axes"], "default": true, "examples": ["unboxed-spark"], "type": "Boolean", "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", "name": "drawYAxis", "tags": ["axes"], "default": true, "examples": ["drawing", "unboxed-spark"], "type": "Boolean", "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", "name": "includeZero", "tags": ["axes"], "default": false, "examples": ["no-range", "numeric-gviz", "small-range-zero"], "type": "Boolean", "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", "name": "logscale", "tags": ["axes"], "default": false, "examples": ["logscale", "stock"], "type": "Boolean", "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", "name": "panEdgeFraction", "tags": ["axes", "interactive elements"], "default": null, "examples": ["zoom"], "type": "Float", "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", "name": "pixelsPerLabel", "tags": ["axes", "grid"], "default": null, "examples": ["value-axis-formatters"], "type": "Integer", "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", "name": "ticker", "tags": ["axes"], "default": null, "type": "function(min, max, pixels, opts, dygraph, vals) -> [{v: ..., label: ...}, ...]", "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", "name": "valueRange", "tags": ["axes"], "default": null, "examples": ["drawing", "dynamic-update", "is-zoomed-ignore-programmatic-zoom", "no-visibility", "reverse-y-axis", "synchronize", "zoom", "two-axes-vr"], "type": "Array of two numbers", "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", "name": "xAxisHeight", "tags": ["axes"], "default": null, "type": "Integer", "desc": "Height, in pixels, of the x-axis. If not set explicitly, this is computed based on axisLabelFontSize and axisTickSize."}, {"category": "Axes", "name": "xAxisLabelWidth", "tags": ["axes"], "default": 50, "examples": ["x-axis-formatter", "value-axis-formatters"], "type": "Integer", "desc": "Width, in pixels, of the x-axis labels."}, {"category": "Axes", "name": "yAxisLabelWidth", "tags": ["axes"], "default": 50, "examples": ["customLabel", "two-axes", "multi-scale", "two-axes-vr", "value-axis-formatters"], "type": "Integer", "desc": "Width, in pixels, of the y-axis labels. This also affects the amount of space available for a y-axis chart label."}, {"category": "CSV parsing", "name": "delimiter", "tags": ["csv parsing"], "default": ",", "type": "String", "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", "name": "xValueParser", "tags": ["csv parsing"], "default": null, "type": "function(str) -> number", "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": "Callbacks", "name": "clickCallback", "tags": ["callbacks"], "default": null, "examples": ["callback"], "type": "function(e, x, points)", "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", "name": "drawCallback", "tags": ["callbacks"], "default": null, "examples": ["linear-regression-addseries", "annotation", "callback", "is-zoomed", "is-zoomed-ignore-programmatic-zoom", "synchronize", "zoom"], "type": "function(dygraph, is_initial)", "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", "name": "highlightCallback", "tags": ["callbacks"], "default": null, "examples": ["callback", "crosshair"], "type": "function(event, x, points,row)", "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", "name": "underlayCallback", "tags": ["callbacks"], "default": null, "examples": ["highlighted-region", "interaction", "linear-regression-fractions", "linear-regression", "underlay-callback"], "type": "function(canvas, area, dygraph)", "desc": "When set, this callback gets called before the chart is drawn. It details on how to use this."}, {"category": "Callbacks", "name": "unhighlightCallback", "tags": ["callbacks"], "default": null, "examples": ["callback", "crosshair"], "type": "function(event)", "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", "name": "zoomCallback", "tags": ["callbacks"], "default": null, "examples": ["callback", "is-zoomed-ignore-programmatic-zoom", "zoom"], "type": "function(minDate, maxDate, yRanges)", "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": "Chart labels", "name": "title", "tags": ["chart labels"], "default": null, "examples": ["border", "demo", "noise", "styled-chart-labels", "multi-scale", "range-selector", "temperature-sf-ny"], "type": "String", "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", "name": "titleHeight", "tags": ["chart labels"], "default": 18, "examples": ["styled-chart-labels"], "type": "Integer", "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", "name": "xLabelHeight", "tags": ["chart labels"], "default": 18, "type": "Integer", "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", "name": "xlabel", "tags": ["chart labels"], "default": null, "examples": ["border", "demo", "styled-chart-labels", "multi-scale"], "type": "String", "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", "name": "y2label", "tags": ["chart labels"], "default": null, "examples": ["two-axes", "two-axes-vr"], "type": "String", "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", "name": "yLabelWidth", "tags": ["chart labels"], "default": 18, "type": "Integer", "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", "name": "ylabel", "tags": ["chart labels"], "default": null, "examples": ["border", "demo", "two-axes", "noise", "styled-chart-labels", "multi-scale", "range-selector", "temperature-sf-ny", "two-axes-vr"], "type": "String", "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": "Data", "name": "file", "tags": ["data"], "default": null, "examples": ["drawing", "dygraph-many-points-benchmark"], "type": "String (URL of CSV or CSV), GViz DataTable or 2D Array", "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 Line display", "name": "connectSeparatedPoints", "tags": ["data line display"], "default": false, "examples": ["connect-separated", "independent-series"], "type": "Boolean", "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", "name": "drawPoints", "tags": ["data line display"], "default": false, "examples": ["linear-regression-addseries", "draw-points", "dynamic-update", "independent-series", "interaction", "linear-regression-fractions", "linear-regression", "per-series"], "type": "Boolean", "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", "name": "fillGraph", "tags": ["data line display"], "default": false, "examples": ["fillGraph", "two-axes", "steps"], "type": "Boolean", "desc": "Should the area underneath the graph be filled? This option is not compatible with error bars."}, {"category": "Data Line display", "name": "pointSize", "tags": ["data line display"], "default": 1, "examples": ["per-series"], "type": "Integer", "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", "name": "stackedGraph", "tags": ["data line display"], "default": false, "examples": ["stacked"], "type": "Boolean", "desc": "If set, stack series on top of one another rather than drawing them independently."}, {"category": "Data Line display", "name": "stepPlot", "tags": ["data line display"], "default": false, "examples": ["avoidMinZero", "steps", "y-axis-formatter"], "type": "Boolean", "desc": "When set, display the graph as a step plot instead of a line plot."}, {"category": "Data Line display", "name": "strokePattern", "tags": ["data line display"], "default": null, "examples": ["per-series"], "type": "Array", "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", "name": "strokeWidth", "tags": ["data line display"], "default": 1, "examples": ["linear-regression-addseries", "drawing", "grid_dot", "layout-options", "linear-regression-fractions", "linear-regression", "per-series", "unboxed-spark", "styled-chart-labels"], "type": "Integer", "desc": "The width of the lines connecting data points. This can be used to increase the contrast or some graphs."}, {"category": "Data Line display", "name": "visibility", "tags": ["data line display"], "default": true, "examples": ["color-visibility", "no-visibility", "visibility"], "type": "Array of booleans", "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 Series Colors", "name": "colorSaturation", "tags": ["data series colors"], "default": 1.0, "type": "Float (0.0 - 1.0)", "desc": "If colors is not specified, saturation of the automatically-generated data series colors."}, {"category": "Data Series Colors", "name": "colorValue", "tags": ["data series colors"], "default": 1.0, "type": "Float (0.0 - 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", "name": "colors", "tags": ["data series colors"], "default": null, "examples": ["century-scale", "color-visibility", "demo", "reverse-y-axis", "color-cycle"], "type": "Array", "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", "name": "fillAlpha", "tags": ["data series colors", "error bars"], "default": 0.15, "type": "Float (0.0 - 1.0)", "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": "Debugging", "name": "timingName", "tags": ["debugging"], "default": null, "examples": ["dygraph-many-points-benchmark"], "type": "String", "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": "Deprecated", "name": "pixelsPerXLabel", "tags": ["deprecated"], "default": null, "type": "Integer", "desc": "Prefer axes { x: { pixelsPerLabel } }"}, {"category": "Deprecated", "name": "pixelsPerYLabel", "tags": ["deprecated"], "default": null, "examples": ["spacing"], "type": "Integer", "desc": "Prefer axes: { y: { pixelsPerLabel } }"}, {"category": "Deprecated", "name": "xAxisLabelFormatter", "tags": ["deprecated"], "default": null, "type": "function", "desc": "Prefer axes { x: { axisLabelFormatter } }"}, {"category": "Deprecated", "name": "xValueFormatter", "tags": ["deprecated"], "default": null, "type": "function", "desc": "Prefer axes: { x: { valueFormatter } }"}, {"category": "Deprecated", "name": "yAxisLabelFormatter", "tags": ["deprecated"], "default": null, "type": "function", "desc": "Prefer axes: { y: { axisLabelFormatter } }"}, {"category": "Deprecated", "name": "yValueFormatter", "tags": ["deprecated"], "default": null, "examples": ["labelsKMB", "multi-scale"], "type": "function", "desc": "Prefer axes: { y: { valueFormatter } }"}, {"category": "Error Bars", "name": "customBars", "tags": ["error bar", "bars", "csv", "parsing"], "default": false, "examples": ["custom-bars", "zero-series", "stock", "range-selector", "temperature-sf-ny"], "type": "Boolean", "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", "name": "errorBars", "tags": ["error bars", "bars", "csv parsing", "csv", "parsing"], "default": false, "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"], "type": "Boolean", "desc": "Does the data contain standard deviations? Setting this to true alters the input format (see above)."}, {"category": "Error Bars", "name": "fractions", "tags": ["error bars", "bars", "csv parsing", "csv", "parsing"], "default": false, "examples": ["fractions", "linear-regression-fractions"], "type": "Boolean", "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", "name": "sigma", "tags": ["error bars"], "default": 2.0, "type": "Float", "desc": "When errorBars is set, shade this many standard deviations above/below each point."}, {"category": "Error Bars", "name": "wilsonInterval", "tags": ["error bars"], "default": true, "type": "Boolean", "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": "Grid", "name": "drawXGrid", "tags": ["grid"], "default": true, "examples": ["demo", "unboxed-spark"], "type": "Boolean", "desc": "Whether to display vertical gridlines under the chart."}, {"category": "Grid", "name": "drawYGrid", "tags": ["grid"], "default": true, "examples": ["drawing", "unboxed-spark"], "type": "Boolean", "desc": "Whether to display horizontal gridlines under the chart."}, {"category": "Grid", "name": "gridLineColor", "tags": ["grid"], "default": "rgb(128,128,128)", "examples": ["drawing", "grid_dot"], "type": "red, blue", "desc": "The color of the gridlines."}, {"category": "Grid", "name": "gridLineWidth", "tags": ["grid"], "default": 0.3, "type": "Float", "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": "Interactive Elements", "name": "animatedZooms", "tags": ["interactive elements"], "default": false, "examples": ["highlighted-region", "link-interaction"], "type": "Boolean", "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", "name": "highlightCircleSize", "tags": ["interactive elements"], "default": 3, "examples": ["dygraph-many-points-benchmark", "grid_dot", "per-series", "unboxed-spark"], "type": "Integer", "desc": "The size in pixels of the dot drawn over highlighted points."}, {"category": "Interactive Elements", "name": "interactionModel", "tags": ["interactive elements"], "default": null, "examples": ["drawing", "interaction"], "hidden": true, "type": "Object", "desc": "TODO(konigsberg): document this"}, {"category": "Interactive Elements", "name": "pointClickCallback", "tags": ["interactive elements", "callback"], "default": null, "examples": ["annotation", "callback"], "type": "function(e, point)", "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", "name": "rangeSelectorHeight", "tags": ["interactive elements"], "default": 40, "examples": ["range-selector"], "type": "Integer", "desc": "Height, in pixels, of the range selector widget. This option can only be specified at Dygraph creation time."}, {"category": "Interactive Elements", "name": "rangeSelectorPlotFillColor", "tags": ["interactive elements"], "default": "#A7B1C4", "examples": ["range-selector"], "type": "String", "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", "name": "rangeSelectorPlotStrokeColor", "tags": ["interactive elements"], "default": "#808FAB", "examples": ["range-selector"], "type": "String", "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", "name": "showRangeSelector", "tags": ["interactive elements"], "default": false, "examples": ["range-selector"], "type": "Boolean", "desc": "Show the range selector widget. This option can only be specified at Dygraph creation time."}, {"category": "Legend", "name": "hideOverlayOnMouseOut", "tags": ["legend", "interactive elements"], "default": true, "examples": ["gviz-selection"], "type": "Boolean", "desc": "Whether to hide the legend when the mouse leaves the chart area."}, {"category": "Legend", "name": "labels", "tags": ["legend"], "default": null, "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"], "type": "Array", "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", "name": "labelsDiv", "tags": ["legend"], "default": null, "examples": ["century-scale", "demo", "label-div", "reverse-y-axis", "unboxed-spark"], "type": "DOM element or string", "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", "name": "labelsDivStyles", "tags": ["legend"], "default": null, "examples": ["border", "customLabel", "noise", "styled-chart-labels", "range-selector", "temperature-sf-ny"], "type": "{}", "desc": "Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold."}, {"category": "Legend", "name": "labelsDivWidth", "tags": ["legend"], "default": 250, "examples": ["customLabel", "noise"], "type": "Integer", "desc": "Width (in pixels) of the div which shows information on the currently-highlighted points."}, {"category": "Legend", "name": "labelsSeparateLines", "tags": ["legend"], "default": false, "examples": ["century-scale", "customLabel", "demo", "reverse-y-axis"], "type": "Boolean", "desc": "Put
between lines in the label string. Often used in conjunction with labelsDiv."}, {"category": "Legend", "name": "labelsShowZeroValues", "tags": ["legend"], "default": true, "examples": ["label-div"], "type": "Boolean", "desc": "Show zero value labels in the labelsDiv."}, {"category": "Legend", "name": "legend", "tags": ["legend"], "default": "onmouseover", "examples": ["demo", "noise", "per-series", "styled-chart-labels", "multi-scale", "range-selector", "temperature-sf-ny"], "type": "String", "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", "name": "showLabelsOnHighlight", "tags": ["legend", "interactive elements"], "default": true, "examples": ["callback"], "type": "Boolean", "desc": "Whether to show the legend upon mouseover."}, {"category": "Overall display", "name": "rightGap", "tags": ["overall display"], "default": 5, "type": "Integer", "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": "Rolling Averages", "name": "rollPeriod", "tags": ["rolling averages", "error bars"], "default": 1, "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"], "type": "Integer >= 1", "desc": "Number of days over which to average data. Discussed extensively above."}, {"category": "Rolling Averages", "name": "showRoller", "tags": ["rolling averages", "interactive elements"], "default": false, "examples": ["annotation", "callback", "crosshair", "dynamic-update", "fractions", "isolated-points", "missing-data", "numeric-gviz", "steps", "underlay-callback", "range-selector", "temperature-sf-ny"], "type": "Boolean", "desc": "If the rolling average period text box should be shown."}, {"category": "Value display/formatting", "name": "digitsAfterDecimal", "tags": ["value display/formatting"], "default": 2, "examples": ["number-display"], "type": "Integer", "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", "name": "labelsKMB", "tags": ["value display/formatting"], "default": false, "examples": ["annotation-gviz", "century-scale", "demo", "labelsKMB", "no-range", "two-axes", "reverse-y-axis", "two-axes-vr"], "type": "Boolean", "desc": "Show K/M/B for thousands/millions/billions on y-axis."}, {"category": "Value display/formatting", "name": "labelsKMG2", "tags": ["value display/formatting"], "default": false, "examples": ["labelsKMB"], "type": "Boolean", "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", "name": "maxNumberWidth", "tags": ["value display/formatting"], "default": 6, "examples": ["number-display"], "type": "Integer", "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", "name": "sigFigs", "tags": ["value display/formatting"], "default": null, "examples": ["number-display"], "type": "Integer", "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", "name": "valueFormatter", "tags": ["value display/formatting", "legend"], "default": null, "examples": ["y-axis-formatter", "value-axis-formatters"], "type": "function(num or millis, opts, dygraph)", "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": "Zooming", "name": "isZoomedIgnoreProgrammaticZoom", "tags": ["zooming"], "default": false, "examples": ["is-zoomed-ignore-programmatic-zoom"], "type": "Boolean", "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."}] \ No newline at end of file diff --git a/www/graph/test.jade b/www/graph/test.jade index 579a64a..4a30559 100644 --- a/www/graph/test.jade +++ b/www/graph/test.jade @@ -7,18 +7,4 @@ 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/layout.jade b/www/layout.jade index e1373e4..f9b910a 100644 --- a/www/layout.jade +++ b/www/layout.jade @@ -6,9 +6,11 @@ html head block head meta(http-equiv="content-type", content="text/html; charset=utf-8") + meta(name="viewport", content="width=device-width, initial-scale=1.0") block styles - link(type='text/css', rel='stylesheet', media='screen', href='/css/reset.min.css') + mixin css('reset.min.css') + mixin css('/vendor/bootstrap/css/bootstrap.css') mixin css('layout.css') link(type="image/ico", rel="icon", href="/favicon.ico") @@ -41,7 +43,7 @@ html var VERSION = !{ JSON.stringify(version) }; var ENV = !{ JSON.stringify(NODE_ENV) }; - if IS_PROD + if NODE_ENV == 'production' script(src='/vendor/lib-bundle.min.js?'+version) script(src='/js/kraken/app-bundle.min.js?'+version) else diff --git a/www/mixins/helpers.jade b/www/mixins/helpers.jade index 39d433b..75c71aa 100644 --- a/www/mixins/helpers.jade +++ b/www/mixins/helpers.jade @@ -4,7 +4,7 @@ mixin css(href, media, root) - media = media || 'screen' - root = root || '/css' - var ver = (version ? '?'+version : '') - - href = (root ? root+'/' : '') + href + ver + - href = ((root && href.charAt(0) !== '/') ? root+'/' : '') + href + ver link(type='text/css', rel='stylesheet', media=media, href=href) diff --git a/www/modules.yaml b/www/modules.yaml index 7843f42..6671c68 100644 --- a/www/modules.yaml +++ b/www/modules.yaml @@ -4,21 +4,21 @@ all: - vendor: - es5-shim.min - modernizr.min + - browserify + - require - json2.min - jquery.min - - jquery.isotope.min - - jquery.hotkeys.min - jquery.history.min + - jquery.hotkeys.min + - jquery.isotope.min - jquery.tipsy.min - spin.min - jquery.spin.min - - browserify - - require + - bootstrap.min - underscore.mod - underscore.string.mod - - jade.runtime.min - backbone - - u.min + - jade.runtime.min - dygraph - suffix: .mod.js @@ -32,6 +32,7 @@ all: - index - util: - op + - backbone - index - template: - graph.jade