diff options
author | Lennart Weller <lhw@ring0.de> | 2016-05-25 17:46:59 +0000 |
---|---|---|
committer | Lennart Weller <lhw@ring0.de> | 2016-06-14 14:16:55 +0000 |
commit | b46c0d1ff2a3be7139a1d9df3bd2aa37b7595e23 (patch) | |
tree | 3984918eec169697a90369928156e36e475537b9 | |
parent | Merge branch 'dfsg_clean' (diff) | |
download | netdata-b46c0d1ff2a3be7139a1d9df3bd2aa37b7595e23.tar.xz netdata-b46c0d1ff2a3be7139a1d9df3bd2aa37b7595e23.zip |
inital import of missing-sources
Diffstat (limited to '')
-rw-r--r-- | debian/missing-sources/bootstrap-toggle.css | 83 | ||||
-rw-r--r-- | debian/missing-sources/bootstrap-toggle.js | 180 | ||||
-rw-r--r-- | debian/missing-sources/bootstrap.slate.css | 7271 | ||||
-rw-r--r-- | debian/missing-sources/c3.css | 163 | ||||
-rw-r--r-- | debian/missing-sources/c3.js | 7315 | ||||
-rw-r--r-- | debian/missing-sources/dygraph-combined.js | 11219 | ||||
-rw-r--r-- | debian/missing-sources/gauge.coffee | 542 | ||||
-rw-r--r-- | debian/missing-sources/jquery.easypiechart.js | 364 | ||||
-rw-r--r-- | debian/missing-sources/jquery.nanoscroller.js | 1000 | ||||
-rw-r--r-- | debian/missing-sources/jquery.peity.js | 383 | ||||
-rw-r--r-- | debian/missing-sources/jquery.sparkline.js | 3054 | ||||
-rw-r--r-- | debian/missing-sources/morris.css | 2 | ||||
-rw-r--r-- | debian/missing-sources/morris.js | 1895 | ||||
-rw-r--r-- | debian/source/lintian-overrides | 3 |
14 files changed, 33474 insertions, 0 deletions
diff --git a/debian/missing-sources/bootstrap-toggle.css b/debian/missing-sources/bootstrap-toggle.css new file mode 100644 index 00000000..057d08b3 --- /dev/null +++ b/debian/missing-sources/bootstrap-toggle.css @@ -0,0 +1,83 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + +.checkbox label .toggle, +.checkbox-inline .toggle { + margin-left: -20px; + margin-right: 5px; +} + +.toggle { + position: relative; + overflow: hidden; +} +.toggle input[type="checkbox"] { + display: none; +} +.toggle-group { + position: absolute; + width: 200%; + top: 0; + bottom: 0; + left: 0; + transition: left 0.35s; + -webkit-transition: left 0.35s; + -moz-user-select: none; + -webkit-user-select: none; +} +.toggle.off .toggle-group { + left: -100%; +} +.toggle-on { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 50%; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 0; + margin: 0; + border: 0; + border-radius: 0; +} +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0px; + padding-bottom: 0px; + height: 100%; + width: 0px; + border-width: 0 1px; +} + +.toggle.btn { min-width: 59px; min-height: 34px; } +.toggle-on.btn { padding-right: 24px; } +.toggle-off.btn { padding-left: 24px; } + +.toggle.btn-lg { min-width: 79px; min-height: 45px; } +.toggle-on.btn-lg { padding-right: 31px; } +.toggle-off.btn-lg { padding-left: 31px; } +.toggle-handle.btn-lg { width: 40px; } + +.toggle.btn-sm { min-width: 50px; min-height: 30px;} +.toggle-on.btn-sm { padding-right: 20px; } +.toggle-off.btn-sm { padding-left: 20px; } + +.toggle.btn-xs { min-width: 35px; min-height: 22px;} +.toggle-on.btn-xs { padding-right: 12px; } +.toggle-off.btn-xs { padding-left: 12px; } + diff --git a/debian/missing-sources/bootstrap-toggle.js b/debian/missing-sources/bootstrap-toggle.js new file mode 100644 index 00000000..533914ed --- /dev/null +++ b/debian/missing-sources/bootstrap-toggle.js @@ -0,0 +1,180 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap-toggle.js v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + + +function ($) { + 'use strict'; + + // TOGGLE PUBLIC CLASS DEFINITION + // ============================== + + var Toggle = function (element, options) { + this.$element = $(element) + this.options = $.extend({}, this.defaults(), options) + this.render() + } + + Toggle.VERSION = '2.2.0' + + Toggle.DEFAULTS = { + on: 'On', + off: 'Off', + onstyle: 'primary', + offstyle: 'default', + size: 'normal', + style: '', + width: null, + height: null + } + + Toggle.prototype.defaults = function() { + return { + on: this.$element.attr('data-on') || Toggle.DEFAULTS.on, + off: this.$element.attr('data-off') || Toggle.DEFAULTS.off, + onstyle: this.$element.attr('data-onstyle') || Toggle.DEFAULTS.onstyle, + offstyle: this.$element.attr('data-offstyle') || Toggle.DEFAULTS.offstyle, + size: this.$element.attr('data-size') || Toggle.DEFAULTS.size, + style: this.$element.attr('data-style') || Toggle.DEFAULTS.style, + width: this.$element.attr('data-width') || Toggle.DEFAULTS.width, + height: this.$element.attr('data-height') || Toggle.DEFAULTS.height + } + } + + Toggle.prototype.render = function () { + this._onstyle = 'btn-' + this.options.onstyle + this._offstyle = 'btn-' + this.options.offstyle + var size = this.options.size === 'large' ? 'btn-lg' + : this.options.size === 'small' ? 'btn-sm' + : this.options.size === 'mini' ? 'btn-xs' + : '' + var $toggleOn = $('<label class="btn">').html(this.options.on) + .addClass(this._onstyle + ' ' + size) + var $toggleOff = $('<label class="btn">').html(this.options.off) + .addClass(this._offstyle + ' ' + size + ' active') + var $toggleHandle = $('<span class="toggle-handle btn btn-default">') + .addClass(size) + var $toggleGroup = $('<div class="toggle-group">') + .append($toggleOn, $toggleOff, $toggleHandle) + var $toggle = $('<div class="toggle btn" data-toggle="toggle">') + .addClass( this.$element.prop('checked') ? this._onstyle : this._offstyle+' off' ) + .addClass(size).addClass(this.options.style) + + this.$element.wrap($toggle) + $.extend(this, { + $toggle: this.$element.parent(), + $toggleOn: $toggleOn, + $toggleOff: $toggleOff, + $toggleGroup: $toggleGroup + }) + this.$toggle.append($toggleGroup) + + var width = this.options.width || Math.max($toggleOn.outerWidth(), $toggleOff.outerWidth())+($toggleHandle.outerWidth()/2) + var height = this.options.height || Math.max($toggleOn.outerHeight(), $toggleOff.outerHeight()) + $toggleOn.addClass('toggle-on') + $toggleOff.addClass('toggle-off') + this.$toggle.css({ width: width, height: height }) + if (this.options.height) { + $toggleOn.css('line-height', $toggleOn.height() + 'px') + $toggleOff.css('line-height', $toggleOff.height() + 'px') + } + this.update(true) + this.trigger(true) + } + + Toggle.prototype.toggle = function () { + if (this.$element.prop('checked')) this.off() + else this.on() + } + + Toggle.prototype.on = function (silent) { + if (this.$element.prop('disabled')) return false + this.$toggle.removeClass(this._offstyle + ' off').addClass(this._onstyle) + this.$element.prop('checked', true) + if (!silent) this.trigger() + } + + Toggle.prototype.off = function (silent) { + if (this.$element.prop('disabled')) return false + this.$toggle.removeClass(this._onstyle).addClass(this._offstyle + ' off') + this.$element.prop('checked', false) + if (!silent) this.trigger() + } + + Toggle.prototype.enable = function () { + this.$toggle.removeAttr('disabled') + this.$element.prop('disabled', false) + } + + Toggle.prototype.disable = function () { + this.$toggle.attr('disabled', 'disabled') + this.$element.prop('disabled', true) + } + + Toggle.prototype.update = function (silent) { + if (this.$element.prop('disabled')) this.disable() + else this.enable() + if (this.$element.prop('checked')) this.on(silent) + else this.off(silent) + } + + Toggle.prototype.trigger = function (silent) { + this.$element.off('change.bs.toggle') + if (!silent) this.$element.change() + this.$element.on('change.bs.toggle', $.proxy(function() { + this.update() + }, this)) + } + + Toggle.prototype.destroy = function() { + this.$element.off('change.bs.toggle') + this.$toggleGroup.remove() + this.$element.removeData('bs.toggle') + this.$element.unwrap() + } + + // TOGGLE PLUGIN DEFINITION + // ======================== + + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.toggle') + var options = typeof option == 'object' && option + + if (!data) $this.data('bs.toggle', (data = new Toggle(this, options))) + if (typeof option == 'string' && data[option]) data[option]() + }) + } + + var old = $.fn.bootstrapToggle + + $.fn.bootstrapToggle = Plugin + $.fn.bootstrapToggle.Constructor = Toggle + + // TOGGLE NO CONFLICT + // ================== + + $.fn.toggle.noConflict = function () { + $.fn.bootstrapToggle = old + return this + } + + // TOGGLE DATA-API + // =============== + + $(function() { + $('input[type=checkbox][data-toggle^=toggle]').bootstrapToggle() + }) + + $(document).on('click.bs.toggle', 'div[data-toggle^=toggle]', function(e) { + var $checkbox = $(this).find('input[type=checkbox]') + $checkbox.bootstrapToggle('toggle') + e.preventDefault() + }) + +}(jQuery); diff --git a/debian/missing-sources/bootstrap.slate.css b/debian/missing-sources/bootstrap.slate.css new file mode 100644 index 00000000..1e255597 --- /dev/null +++ b/debian/missing-sources/bootstrap.slate.css @@ -0,0 +1,7271 @@ +/*! + * bootswatch v3.3.6 + * Homepage: http://bootswatch.com + * Copyright 2012-2016 Thomas Park + * Licensed under MIT + * Based on Bootstrap +*/ +/*! + * Bootstrap v3.3.6 (http://getbootstrap.com) + * Copyright 2011-2015 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; + vertical-align: baseline; +} +audio:not([controls]) { + display: none; + height: 0; +} +[hidden], +template { + display: none; +} +a { + background-color: transparent; +} +a:active, +a:hover { + outline: 0; +} +abbr[title] { + border-bottom: 1px dotted; +} +b, +strong { + font-weight: bold; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sup { + top: -0.5em; +} +sub { + bottom: -0.25em; +} +img { + border: 0; +} +svg:not(:root) { + overflow: hidden; +} +figure { + margin: 1em 40px; +} +hr { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} +pre { + overflow: auto; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +button, +input, +optgroup, +select, +textarea { + color: inherit; + font: inherit; + margin: 0; +} +button { + overflow: visible; +} +button, +select { + text-transform: none; +} +button, +html input[type="button"], +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; +} +button[disabled], +html input[disabled] { + cursor: default; +} +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} +input { + line-height: normal; +} +input[type="checkbox"], +input[type="radio"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; +} +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} +input[type="search"] { + -webkit-appearance: textfield; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; +} +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + border: 0; + padding: 0; +} +textarea { + overflow: auto; +} +optgroup { + font-weight: bold; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +td, +th { + padding: 0; +} +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; + } + a, + a:visited { + text-decoration: underline; + } + a[href]:after { + content: " (" attr(href) ")"; + } + abbr[title]:after { + content: " (" attr(title) ")"; + } + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + thead { + display: table-header-group; + } + tr, + img { + page-break-inside: avoid; + } + img { + max-width: 100% !important; + } + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + h2, + h3 { + page-break-after: avoid; + } + .navbar { + display: none; + } + .btn > .caret, + .dropup > .btn > .caret { + border-top-color: #000 !important; + } + .label { + border: 1px solid #000; + } + .table { + border-collapse: collapse !important; + } + .table td, + .table th { + background-color: #fff !important; + } + .table-bordered th, + .table-bordered td { + border: 1px solid #ddd !important; + } +} +@font-face { + font-family: 'Glyphicons Halflings'; + src: url('../fonts/glyphicons-halflings-regular.eot'); + src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); +} +.glyphicon { + position: relative; + top: 1px; + display: inline-block; + font-family: 'Glyphicons Halflings'; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.glyphicon-asterisk:before { + content: "\002a"; +} +.glyphicon-plus:before { + content: "\002b"; +} +.glyphicon-euro:before, +.glyphicon-eur:before { + content: "\20ac"; +} +.glyphicon-minus:before { + content: "\2212"; +} +.glyphicon-cloud:before { + content: "\2601"; +} +.glyphicon-envelope:before { + content: "\2709"; +} +.glyphicon-pencil:before { + content: "\270f"; +} +.glyphicon-glass:before { + content: "\e001"; +} +.glyphicon-music:before { + content: "\e002"; +} +.glyphicon-search:before { + content: "\e003"; +} +.glyphicon-heart:before { + content: "\e005"; +} +.glyphicon-star:before { + content: "\e006"; +} +.glyphicon-star-empty:before { + content: "\e007"; +} +.glyphicon-user:before { + content: "\e008"; +} +.glyphicon-film:before { + content: "\e009"; +} +.glyphicon-th-large:before { + content: "\e010"; +} +.glyphicon-th:before { + content: "\e011"; +} +.glyphicon-th-list:before { + content: "\e012"; +} +.glyphicon-ok:before { + content: "\e013"; +} +.glyphicon-remove:before { + content: "\e014"; +} +.glyphicon-zoom-in:before { + content: "\e015"; +} +.glyphicon-zoom-out:before { + content: "\e016"; +} +.glyphicon-off:before { + content: "\e017"; +} +.glyphicon-signal:before { + content: "\e018"; +} +.glyphicon-cog:before { + content: "\e019"; +} +.glyphicon-trash:before { + content: "\e020"; +} +.glyphicon-home:before { + content: "\e021"; +} +.glyphicon-file:before { + content: "\e022"; +} +.glyphicon-time:before { + content: "\e023"; +} +.glyphicon-road:before { + content: "\e024"; +} +.glyphicon-download-alt:before { + content: "\e025"; +} +.glyphicon-download:before { + content: "\e026"; +} +.glyphicon-upload:before { + content: "\e027"; +} +.glyphicon-inbox:before { + content: "\e028"; +} +.glyphicon-play-circle:before { + content: "\e029"; +} +.glyphicon-repeat:before { + content: "\e030"; +} +.glyphicon-refresh:before { + content: "\e031"; +} +.glyphicon-list-alt:before { + content: "\e032"; +} +.glyphicon-lock:before { + content: "\e033"; +} +.glyphicon-flag:before { + content: "\e034"; +} +.glyphicon-headphones:before { + content: "\e035"; +} +.glyphicon-volume-off:before { + content: "\e036"; +} +.glyphicon-volume-down:before { + content: "\e037"; +} +.glyphicon-volume-up:before { + content: "\e038"; +} +.glyphicon-qrcode:before { + content: "\e039"; +} +.glyphicon-barcode:before { + content: "\e040"; +} +.glyphicon-tag:before { + content: "\e041"; +} +.glyphicon-tags:before { + content: "\e042"; +} +.glyphicon-book:before { + content: "\e043"; +} +.glyphicon-bookmark:before { + content: "\e044"; +} +.glyphicon-print:before { + content: "\e045"; +} +.glyphicon-camera:before { + content: "\e046"; +} +.glyphicon-font:before { + content: "\e047"; +} +.glyphicon-bold:before { + content: "\e048"; +} +.glyphicon-italic:before { + content: "\e049"; +} +.glyphicon-text-height:before { + content: "\e050"; +} +.glyphicon-text-width:before { + content: "\e051"; +} +.glyphicon-align-left:before { + content: "\e052"; +} +.glyphicon-align-center:before { + content: "\e053"; +} +.glyphicon-align-right:before { + content: "\e054"; +} +.glyphicon-align-justify:before { + content: "\e055"; +} +.glyphicon-list:before { + content: "\e056"; +} +.glyphicon-indent-left:before { + content: "\e057"; +} +.glyphicon-indent-right:before { + content: "\e058"; +} +.glyphicon-facetime-video:before { + content: "\e059"; +} +.glyphicon-picture:before { + content: "\e060"; +} +.glyphicon-map-marker:before { + content: "\e062"; +} +.glyphicon-adjust:before { + content: "\e063"; +} +.glyphicon-tint:before { + content: "\e064"; +} +.glyphicon-edit:before { + content: "\e065"; +} +.glyphicon-share:before { + content: "\e066"; +} +.glyphicon-check:before { + content: "\e067"; +} +.glyphicon-move:before { + content: "\e068"; +} +.glyphicon-step-backward:before { + content: "\e069"; +} +.glyphicon-fast-backward:before { + content: "\e070"; +} +.glyphicon-backward:before { + content: "\e071"; +} +.glyphicon-play:before { + content: "\e072"; +} +.glyphicon-pause:before { + content: "\e073"; +} +.glyphicon-stop:before { + content: "\e074"; +} +.glyphicon-forward:before { + content: "\e075"; +} +.glyphicon-fast-forward:before { + content: "\e076"; +} +.glyphicon-step-forward:before { + content: "\e077"; +} +.glyphicon-eject:before { + content: "\e078"; +} +.glyphicon-chevron-left:before { + content: "\e079"; +} +.glyphicon-chevron-right:before { + content: "\e080"; +} +.glyphicon-plus-sign:before { + content: "\e081"; +} +.glyphicon-minus-sign:before { + content: "\e082"; +} +.glyphicon-remove-sign:before { + content: "\e083"; +} +.glyphicon-ok-sign:before { + content: "\e084"; +} +.glyphicon-question-sign:before { + content: "\e085"; +} +.glyphicon-info-sign:before { + content: "\e086"; +} +.glyphicon-screenshot:before { + content: "\e087"; +} +.glyphicon-remove-circle:before { + content: "\e088"; +} +.glyphicon-ok-circle:before { + content: "\e089"; +} +.glyphicon-ban-circle:before { + content: "\e090"; +} +.glyphicon-arrow-left:before { + content: "\e091"; +} +.glyphicon-arrow-right:before { + content: "\e092"; +} +.glyphicon-arrow-up:before { + content: "\e093"; +} +.glyphicon-arrow-down:before { + content: "\e094"; +} +.glyphicon-share-alt:before { + content: "\e095"; +} +.glyphicon-resize-full:before { + content: "\e096"; +} +.glyphicon-resize-small:before { + content: "\e097"; +} +.glyphicon-exclamation-sign:before { + content: "\e101"; +} +.glyphicon-gift:before { + content: "\e102"; +} +.glyphicon-leaf:before { + content: "\e103"; +} +.glyphicon-fire:before { + content: "\e104"; +} +.glyphicon-eye-open:before { + content: "\e105"; +} +.glyphicon-eye-close:before { + content: "\e106"; +} +.glyphicon-warning-sign:before { + content: "\e107"; +} +.glyphicon-plane:before { + content: "\e108"; +} +.glyphicon-calendar:before { + content: "\e109"; +} +.glyphicon-random:before { + content: "\e110"; +} +.glyphicon-comment:before { + content: "\e111"; +} +.glyphicon-magnet:before { + content: "\e112"; +} +.glyphicon-chevron-up:before { + content: "\e113"; +} +.glyphicon-chevron-down:before { + content: "\e114"; +} +.glyphicon-retweet:before { + content: "\e115"; +} +.glyphicon-shopping-cart:before { + content: "\e116"; +} +.glyphicon-folder-close:before { + content: "\e117"; +} +.glyphicon-folder-open:before { + content: "\e118"; +} +.glyphicon-resize-vertical:before { + content: "\e119"; +} +.glyphicon-resize-horizontal:before { + content: "\e120"; +} +.glyphicon-hdd:before { + content: "\e121"; +} +.glyphicon-bullhorn:before { + content: "\e122"; +} +.glyphicon-bell:before { + content: "\e123"; +} +.glyphicon-certificate:before { + content: "\e124"; +} +.glyphicon-thumbs-up:before { + content: "\e125"; +} +.glyphicon-thumbs-down:before { + content: "\e126"; +} +.glyphicon-hand-right:before { + content: "\e127"; +} +.glyphicon-hand-left:before { + content: "\e128"; +} +.glyphicon-hand-up:before { + content: "\e129"; +} +.glyphicon-hand-down:before { + content: "\e130"; +} +.glyphicon-circle-arrow-right:before { + content: "\e131"; +} +.glyphicon-circle-arrow-left:before { + content: "\e132"; +} +.glyphicon-circle-arrow-up:before { + content: "\e133"; +} +.glyphicon-circle-arrow-down:before { + content: "\e134"; +} +.glyphicon-globe:before { + content: "\e135"; +} +.glyphicon-wrench:before { + content: "\e136"; +} +.glyphicon-tasks:before { + content: "\e137"; +} +.glyphicon-filter:before { + content: "\e138"; +} +.glyphicon-briefcase:before { + content: "\e139"; +} +.glyphicon-fullscreen:before { + content: "\e140"; +} +.glyphicon-dashboard:before { + content: "\e141"; +} +.glyphicon-paperclip:before { + content: "\e142"; +} +.glyphicon-heart-empty:before { + content: "\e143"; +} +.glyphicon-link:before { + content: "\e144"; +} +.glyphicon-phone:before { + content: "\e145"; +} +.glyphicon-pushpin:before { + content: "\e146"; +} +.glyphicon-usd:before { + content: "\e148"; +} +.glyphicon-gbp:before { + content: "\e149"; +} +.glyphicon-sort:before { + content: "\e150"; +} +.glyphicon-sort-by-alphabet:before { + content: "\e151"; +} +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; +} +.glyphicon-sort-by-order:before { + content: "\e153"; +} +.glyphicon-sort-by-order-alt:before { + content: "\e154"; +} +.glyphicon-sort-by-attributes:before { + content: "\e155"; +} +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; +} +.glyphicon-unchecked:before { + content: "\e157"; +} +.glyphicon-expand:before { + content: "\e158"; +} +.glyphicon-collapse-down:before { + content: "\e159"; +} +.glyphicon-collapse-up:before { + content: "\e160"; +} +.glyphicon-log-in:before { + content: "\e161"; +} +.glyphicon-flash:before { + content: "\e162"; +} +.glyphicon-log-out:before { + content: "\e163"; +} +.glyphicon-new-window:before { + content: "\e164"; +} +.glyphicon-record:before { + content: "\e165"; +} +.glyphicon-save:before { + content: "\e166"; +} +.glyphicon-open:before { + content: "\e167"; +} +.glyphicon-saved:before { + content: "\e168"; +} +.glyphicon-import:before { + content: "\e169"; +} +.glyphicon-export:before { + content: "\e170"; +} +.glyphicon-send:before { + content: "\e171"; +} +.glyphicon-floppy-disk:before { + content: "\e172"; +} +.glyphicon-floppy-saved:before { + content: "\e173"; +} +.glyphicon-floppy-remove:before { + content: "\e174"; +} +.glyphicon-floppy-save:before { + content: "\e175"; +} +.glyphicon-floppy-open:before { + content: "\e176"; +} +.glyphicon-credit-card:before { + content: "\e177"; +} +.glyphicon-transfer:before { + content: "\e178"; +} +.glyphicon-cutlery:before { + content: "\e179"; +} +.glyphicon-header:before { + content: "\e180"; +} +.glyphicon-compressed:before { + content: "\e181"; +} +.glyphicon-earphone:before { + content: "\e182"; +} +.glyphicon-phone-alt:before { + content: "\e183"; +} +.glyphicon-tower:before { + content: "\e184"; +} +.glyphicon-stats:before { + content: "\e185"; +} +.glyphicon-sd-video:before { + content: "\e186"; +} +.glyphicon-hd-video:before { + content: "\e187"; +} +.glyphicon-subtitles:before { + content: "\e188"; +} +.glyphicon-sound-stereo:before { + content: "\e189"; +} +.glyphicon-sound-dolby:before { + content: "\e190"; +} +.glyphicon-sound-5-1:before { + content: "\e191"; +} +.glyphicon-sound-6-1:before { + content: "\e192"; +} +.glyphicon-sound-7-1:before { + content: "\e193"; +} +.glyphicon-copyright-mark:before { + content: "\e194"; +} +.glyphicon-registration-mark:before { + content: "\e195"; +} +.glyphicon-cloud-download:before { + content: "\e197"; +} +.glyphicon-cloud-upload:before { + content: "\e198"; +} +.glyphicon-tree-conifer:before { + content: "\e199"; +} +.glyphicon-tree-deciduous:before { + content: "\e200"; +} +.glyphicon-cd:before { + content: "\e201"; +} +.glyphicon-save-file:before { + content: "\e202"; +} +.glyphicon-open-file:before { + content: "\e203"; +} +.glyphicon-level-up:before { + content: "\e204"; +} +.glyphicon-copy:before { + content: "\e205"; +} +.glyphicon-paste:before { + content: "\e206"; +} +.glyphicon-alert:before { + content: "\e209"; +} +.glyphicon-equalizer:before { + content: "\e210"; +} +.glyphicon-king:before { + content: "\e211"; +} +.glyphicon-queen:before { + content: "\e212"; +} +.glyphicon-pawn:before { + content: "\e213"; +} +.glyphicon-bishop:before { + content: "\e214"; +} +.glyphicon-knight:before { + content: "\e215"; +} +.glyphicon-baby-formula:before { + content: "\e216"; +} +.glyphicon-tent:before { + content: "\26fa"; +} +.glyphicon-blackboard:before { + content: "\e218"; +} +.glyphicon-bed:before { + content: "\e219"; +} +.glyphicon-apple:before { + content: "\f8ff"; +} +.glyphicon-erase:before { + content: "\e221"; +} +.glyphicon-hourglass:before { + content: "\231b"; +} +.glyphicon-lamp:before { + content: "\e223"; +} +.glyphicon-duplicate:before { + content: "\e224"; +} +.glyphicon-piggy-bank:before { + content: "\e225"; +} +.glyphicon-scissors:before { + content: "\e226"; +} +.glyphicon-bitcoin:before { + content: "\e227"; +} +.glyphicon-btc:before { + content: "\e227"; +} +.glyphicon-xbt:before { + content: "\e227"; +} +.glyphicon-yen:before { + content: "\00a5"; +} +.glyphicon-jpy:before { + content: "\00a5"; +} +.glyphicon-ruble:before { + content: "\20bd"; +} +.glyphicon-rub:before { + content: "\20bd"; +} +.glyphicon-scale:before { + content: "\e230"; +} +.glyphicon-ice-lolly:before { + content: "\e231"; +} +.glyphicon-ice-lolly-tasted:before { + content: "\e232"; +} +.glyphicon-education:before { + content: "\e233"; +} +.glyphicon-option-horizontal:before { + content: "\e234"; +} +.glyphicon-option-vertical:before { + content: "\e235"; +} +.glyphicon-menu-hamburger:before { + content: "\e236"; +} +.glyphicon-modal-window:before { + content: "\e237"; +} +.glyphicon-oil:before { + content: "\e238"; +} +.glyphicon-grain:before { + content: "\e239"; +} +.glyphicon-sunglasses:before { + content: "\e240"; +} +.glyphicon-text-size:before { + content: "\e241"; +} +.glyphicon-text-color:before { + content: "\e242"; +} +.glyphicon-text-background:before { + content: "\e243"; +} +.glyphicon-object-align-top:before { + content: "\e244"; +} +.glyphicon-object-align-bottom:before { + content: "\e245"; +} +.glyphicon-object-align-horizontal:before { + content: "\e246"; +} +.glyphicon-object-align-left:before { + content: "\e247"; +} +.glyphicon-object-align-vertical:before { + content: "\e248"; +} +.glyphicon-object-align-right:before { + content: "\e249"; +} +.glyphicon-triangle-right:before { + content: "\e250"; +} +.glyphicon-triangle-left:before { + content: "\e251"; +} +.glyphicon-triangle-bottom:before { + content: "\e252"; +} +.glyphicon-triangle-top:before { + content: "\e253"; +} +.glyphicon-console:before { + content: "\e254"; +} +.glyphicon-superscript:before { + content: "\e255"; +} +.glyphicon-subscript:before { + content: "\e256"; +} +.glyphicon-menu-left:before { + content: "\e257"; +} +.glyphicon-menu-right:before { + content: "\e258"; +} +.glyphicon-menu-down:before { + content: "\e259"; +} +.glyphicon-menu-up:before { + content: "\e260"; +} +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + color: #c8c8c8; + background-color: #272b30; +} +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +a { + color: #ffffff; + text-decoration: none; +} +a:hover, +a:focus { + color: #ffffff; + text-decoration: underline; +} +a:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +figure { + margin: 0; +} +img { + vertical-align: middle; +} +.img-responsive, +.thumbnail > img, +.thumbnail a > img, +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + display: block; + max-width: 100%; + height: auto; +} +.img-rounded { + border-radius: 6px; +} +.img-thumbnail { + padding: 4px; + line-height: 1.42857143; + background-color: #1c1e22; + border: 1px solid #0c0d0e; + border-radius: 4px; + -webkit-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + display: inline-block; + max-width: 100%; + height: auto; +} +.img-circle { + border-radius: 50%; +} +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #1c1e22; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.sr-only-focusable:active, +.sr-only-focusable:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; +} +[role="button"] { + cursor: pointer; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 500; + line-height: 1.1; + color: inherit; +} +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small, +.h1 small, +.h2 small, +.h3 small, +.h4 small, +.h5 small, +.h6 small, +h1 .small, +h2 .small, +h3 .small, +h4 .small, +h5 .small, +h6 .small, +.h1 .small, +.h2 .small, +.h3 .small, +.h4 .small, +.h5 .small, +.h6 .small { + font-weight: normal; + line-height: 1; + color: #7a8288; +} +h1, +.h1, +h2, +.h2, +h3, +.h3 { + margin-top: 20px; + margin-bottom: 10px; +} +h1 small, +.h1 small, +h2 small, +.h2 small, +h3 small, +.h3 small, +h1 .small, +.h1 .small, +h2 .small, +.h2 .small, +h3 .small, +.h3 .small { + font-size: 65%; +} +h4, +.h4, +h5, +.h5, +h6, +.h6 { + margin-top: 10px; + margin-bottom: 10px; +} +h4 small, +.h4 small, +h5 small, +.h5 small, +h6 small, +.h6 small, +h4 .small, +.h4 .small, +h5 .small, +.h5 .small, +h6 .small, +.h6 .small { + font-size: 75%; +} +h1, +.h1 { + font-size: 36px; +} +h2, +.h2 { + font-size: 30px; +} +h3, +.h3 { + font-size: 24px; +} +h4, +.h4 { + font-size: 18px; +} +h5, +.h5 { + font-size: 14px; +} +h6, +.h6 { + font-size: 12px; +} +p { + margin: 0 0 10px; +} +.lead { + margin-bottom: 20px; + font-size: 16px; + font-weight: 300; + line-height: 1.4; +} +@media (min-width: 768px) { + .lead { + font-size: 21px; + } +} +small, +.small { + font-size: 85%; +} +mark, +.mark { + background-color: #f89406; + padding: .2em; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.text-center { + text-align: center; +} +.text-justify { + text-align: justify; +} +.text-nowrap { + white-space: nowrap; +} +.text-lowercase { + text-transform: lowercase; +} +.text-uppercase { + text-transform: uppercase; +} +.text-capitalize { + text-transform: capitalize; +} +.text-muted { + color: #7a8288; +} +.text-primary { + color: #7a8288; +} +a.text-primary:hover, +a.text-primary:focus { + color: #62686d; +} +.text-success { + color: #ffffff; +} +a.text-success:hover, +a.text-success:focus { + color: #e6e6e6; +} +.text-info { + color: #ffffff; +} +a.text-info:hover, +a.text-info:focus { + color: #e6e6e6; +} +.text-warning { + color: #ffffff; +} +a.text-warning:hover, +a.text-warning:focus { + color: #e6e6e6; +} +.text-danger { + color: #ffffff; +} +a.text-danger:hover, +a.text-danger:focus { + color: #e6e6e6; +} +.bg-primary { + color: #fff; + background-color: #7a8288; +} +a.bg-primary:hover, +a.bg-primary:focus { + background-color: #62686d; +} +.bg-success { + background-color: #62c462; +} +a.bg-success:hover, +a.bg-success:focus { + background-color: #42b142; +} +.bg-info { + background-color: #5bc0de; +} +a.bg-info:hover, +a.bg-info:focus { + background-color: #31b0d5; +} +.bg-warning { + background-color: #f89406; +} +a.bg-warning:hover, +a.bg-warning:focus { + background-color: #c67605; +} +.bg-danger { + background-color: #ee5f5b; +} +a.bg-danger:hover, +a.bg-danger:focus { + background-color: #e9322d; +} +.page-header { + padding-bottom: 9px; + margin: 40px 0 20px; + border-bottom: 1px solid #1c1e22; +} +ul, +ol { + margin-top: 0; + margin-bottom: 10px; +} +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; +} +.list-unstyled { + padding-left: 0; + list-style: none; +} +.list-inline { + padding-left: 0; + list-style: none; + margin-left: -5px; +} +.list-inline > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; +} +dl { + margin-top: 0; + margin-bottom: 20px; +} +dt, +dd { + line-height: 1.42857143; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; +} +@media (min-width: 768px) { + .dl-horizontal dt { + float: left; + width: 160px; + clear: left; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .dl-horizontal dd { + margin-left: 180px; + } +} +abbr[title], +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted #7a8288; +} +.initialism { + font-size: 90%; + text-transform: uppercase; +} +blockquote { + padding: 10px 20px; + margin: 0 0 20px; + font-size: 17.5px; + border-left: 5px solid #7a8288; +} +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} +blockquote footer, +blockquote small, +blockquote .small { + display: block; + font-size: 80%; + line-height: 1.42857143; + color: #7a8288; +} +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '\2014 \00A0'; +} +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #7a8288; + border-left: 0; + text-align: right; +} +.blockquote-reverse footer:before, +blockquote.pull-right footer:before, +.blockquote-reverse small:before, +blockquote.pull-right small:before, +.blockquote-reverse .small:before, +blockquote.pull-right .small:before { + content: ''; +} +.blockquote-reverse footer:after, +blockquote.pull-right footer:after, +.blockquote-reverse small:after, +blockquote.pull-right small:after, +.blockquote-reverse .small:after, +blockquote.pull-right .small:after { + content: '\00A0 \2014'; +} +address { + margin-bottom: 20px; + font-style: normal; + line-height: 1.42857143; +} +code, +kbd, +pre, +samp { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; +} +code { + padding: 2px 4px; + font-size: 90%; + color: #c7254e; + background-color: #f9f2f4; + border-radius: 4px; +} +kbd { + padding: 2px 4px; + font-size: 90%; + color: #ffffff; + background-color: #333333; + border-radius: 3px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); +} +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + -webkit-box-shadow: none; + box-shadow: none; +} +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 1.42857143; + word-break: break-all; + word-wrap: break-word; + color: #3a3f44; + background-color: #f5f5f5; + border: 1px solid #cccccc; + border-radius: 4px; +} +pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; +} +.pre-scrollable { + max-height: 340px; + overflow-y: scroll; +} +.container { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; +} +@media (min-width: 768px) { + .container { + width: 750px; + } +} +@media (min-width: 992px) { + .container { + width: 970px; + } +} +@media (min-width: 1200px) { + .container { + width: 1170px; + } +} +.container-fluid { + margin-right: auto; + margin-left: auto; + padding-left: 15px; + padding-right: 15px; +} +.row { + margin-left: -15px; + margin-right: -15px; +} +.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { + position: relative; + min-height: 1px; + padding-left: 15px; + padding-right: 15px; +} +.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { + float: left; +} +.col-xs-12 { + width: 100%; +} +.col-xs-11 { + width: 91.66666667%; +} +.col-xs-10 { + width: 83.33333333%; +} +.col-xs-9 { + width: 75%; +} +.col-xs-8 { + width: 66.66666667%; +} +.col-xs-7 { + width: 58.33333333%; +} +.col-xs-6 { + width: 50%; +} +.col-xs-5 { + width: 41.66666667%; +} +.col-xs-4 { + width: 33.33333333%; +} +.col-xs-3 { + width: 25%; +} +.col-xs-2 { + width: 16.66666667%; +} +.col-xs-1 { + width: 8.33333333%; +} +.col-xs-pull-12 { + right: 100%; +} +.col-xs-pull-11 { + right: 91.66666667%; +} +.col-xs-pull-10 { + right: 83.33333333%; +} +.col-xs-pull-9 { + right: 75%; +} +.col-xs-pull-8 { + right: 66.66666667%; +} +.col-xs-pull-7 { + right: 58.33333333%; +} +.col-xs-pull-6 { + right: 50%; +} +.col-xs-pull-5 { + right: 41.66666667%; +} +.col-xs-pull-4 { + right: 33.33333333%; +} +.col-xs-pull-3 { + right: 25%; +} +.col-xs-pull-2 { + right: 16.66666667%; +} +.col-xs-pull-1 { + right: 8.33333333%; +} +.col-xs-pull-0 { + right: auto; +} +.col-xs-push-12 { + left: 100%; +} +.col-xs-push-11 { + left: 91.66666667%; +} +.col-xs-push-10 { + left: 83.33333333%; +} +.col-xs-push-9 { + left: 75%; +} +.col-xs-push-8 { + left: 66.66666667%; +} +.col-xs-push-7 { + left: 58.33333333%; +} +.col-xs-push-6 { + left: 50%; +} +.col-xs-push-5 { + left: 41.66666667%; +} +.col-xs-push-4 { + left: 33.33333333%; +} +.col-xs-push-3 { + left: 25%; +} +.col-xs-push-2 { + left: 16.66666667%; +} +.col-xs-push-1 { + left: 8.33333333%; +} +.col-xs-push-0 { + left: auto; +} +.col-xs-offset-12 { + margin-left: 100%; +} +.col-xs-offset-11 { + margin-left: 91.66666667%; +} +.col-xs-offset-10 { + margin-left: 83.33333333%; +} +.col-xs-offset-9 { + margin-left: 75%; +} +.col-xs-offset-8 { + margin-left: 66.66666667%; +} +.col-xs-offset-7 { + margin-left: 58.33333333%; +} +.col-xs-offset-6 { + margin-left: 50%; +} +.col-xs-offset-5 { + margin-left: 41.66666667%; +} +.col-xs-offset-4 { + margin-left: 33.33333333%; +} +.col-xs-offset-3 { + margin-left: 25%; +} +.col-xs-offset-2 { + margin-left: 16.66666667%; +} +.col-xs-offset-1 { + margin-left: 8.33333333%; +} +.col-xs-offset-0 { + margin-left: 0%; +} +@media (min-width: 768px) { + .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { + float: left; + } + .col-sm-12 { + width: 100%; + } + .col-sm-11 { + width: 91.66666667%; + } + .col-sm-10 { + width: 83.33333333%; + } + .col-sm-9 { + width: 75%; + } + .col-sm-8 { + width: 66.66666667%; + } + .col-sm-7 { + width: 58.33333333%; + } + .col-sm-6 { + width: 50%; + } + .col-sm-5 { + width: 41.66666667%; + } + .col-sm-4 { + width: 33.33333333%; + } + .col-sm-3 { + width: 25%; + } + .col-sm-2 { + width: 16.66666667%; + } + .col-sm-1 { + width: 8.33333333%; + } + .col-sm-pull-12 { + right: 100%; + } + .col-sm-pull-11 { + right: 91.66666667%; + } + .col-sm-pull-10 { + right: 83.33333333%; + } + .col-sm-pull-9 { + right: 75%; + } + .col-sm-pull-8 { + right: 66.66666667%; + } + .col-sm-pull-7 { + right: 58.33333333%; + } + .col-sm-pull-6 { + right: 50%; + } + .col-sm-pull-5 { + right: 41.66666667%; + } + .col-sm-pull-4 { + right: 33.33333333%; + } + .col-sm-pull-3 { + right: 25%; + } + .col-sm-pull-2 { + right: 16.66666667%; + } + .col-sm-pull-1 { + right: 8.33333333%; + } + .col-sm-pull-0 { + right: auto; + } + .col-sm-push-12 { + left: 100%; + } + .col-sm-push-11 { + left: 91.66666667%; + } + .col-sm-push-10 { + left: 83.33333333%; + } + .col-sm-push-9 { + left: 75%; + } + .col-sm-push-8 { + left: 66.66666667%; + } + .col-sm-push-7 { + left: 58.33333333%; + } + .col-sm-push-6 { + left: 50%; + } + .col-sm-push-5 { + left: 41.66666667%; + } + .col-sm-push-4 { + left: 33.33333333%; + } + .col-sm-push-3 { + left: 25%; + } + .col-sm-push-2 { + left: 16.66666667%; + } + .col-sm-push-1 { + left: 8.33333333%; + } + .col-sm-push-0 { + left: auto; + } + .col-sm-offset-12 { + margin-left: 100%; + } + .col-sm-offset-11 { + margin-left: 91.66666667%; + } + .col-sm-offset-10 { + margin-left: 83.33333333%; + } + .col-sm-offset-9 { + margin-left: 75%; + } + .col-sm-offset-8 { + margin-left: 66.66666667%; + } + .col-sm-offset-7 { + margin-left: 58.33333333%; + } + .col-sm-offset-6 { + margin-left: 50%; + } + .col-sm-offset-5 { + margin-left: 41.66666667%; + } + .col-sm-offset-4 { + margin-left: 33.33333333%; + } + .col-sm-offset-3 { + margin-left: 25%; + } + .col-sm-offset-2 { + margin-left: 16.66666667%; + } + .col-sm-offset-1 { + margin-left: 8.33333333%; + } + .col-sm-offset-0 { + margin-left: 0%; + } +} +@media (min-width: 992px) { + .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { + float: left; + } + .col-md-12 { + width: 100%; + } + .col-md-11 { + width: 91.66666667%; + } + .col-md-10 { + width: 83.33333333%; + } + .col-md-9 { + width: 75%; + } + .col-md-8 { + width: 66.66666667%; + } + .col-md-7 { + width: 58.33333333%; + } + .col-md-6 { + width: 50%; + } + .col-md-5 { + width: 41.66666667%; + } + .col-md-4 { + width: 33.33333333%; + } + .col-md-3 { + width: 25%; + } + .col-md-2 { + width: 16.66666667%; + } + .col-md-1 { + width: 8.33333333%; + } + .col-md-pull-12 { + right: 100%; + } + .col-md-pull-11 { + right: 91.66666667%; + } + .col-md-pull-10 { + right: 83.33333333%; + } + .col-md-pull-9 { + right: 75%; + } + .col-md-pull-8 { + right: 66.66666667%; + } + .col-md-pull-7 { + right: 58.33333333%; + } + .col-md-pull-6 { + right: 50%; + } + .col-md-pull-5 { + right: 41.66666667%; + } + .col-md-pull-4 { + right: 33.33333333%; + } + .col-md-pull-3 { + right: 25%; + } + .col-md-pull-2 { + right: 16.66666667%; + } + .col-md-pull-1 { + right: 8.33333333%; + } + .col-md-pull-0 { + right: auto; + } + .col-md-push-12 { + left: 100%; + } + .col-md-push-11 { + left: 91.66666667%; + } + .col-md-push-10 { + left: 83.33333333%; + } + .col-md-push-9 { + left: 75%; + } + .col-md-push-8 { + left: 66.66666667%; + } + .col-md-push-7 { + left: 58.33333333%; + } + .col-md-push-6 { + left: 50%; + } + .col-md-push-5 { + left: 41.66666667%; + } + .col-md-push-4 { + left: 33.33333333%; + } + .col-md-push-3 { + left: 25%; + } + .col-md-push-2 { + left: 16.66666667%; + } + .col-md-push-1 { + left: 8.33333333%; + } + .col-md-push-0 { + left: auto; + } + .col-md-offset-12 { + margin-left: 100%; + } + .col-md-offset-11 { + margin-left: 91.66666667%; + } + .col-md-offset-10 { + margin-left: 83.33333333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-offset-8 { + margin-left: 66.66666667%; + } + .col-md-offset-7 { + margin-left: 58.33333333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-offset-5 { + margin-left: 41.66666667%; + } + .col-md-offset-4 { + margin-left: 33.33333333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-offset-2 { + margin-left: 16.66666667%; + } + .col-md-offset-1 { + margin-left: 8.33333333%; + } + .col-md-offset-0 { + margin-left: 0%; + } +} +@media (min-width: 1200px) { + .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { + float: left; + } + .col-lg-12 { + width: 100%; + } + .col-lg-11 { + width: 91.66666667%; + } + .col-lg-10 { + width: 83.33333333%; + } + .col-lg-9 { + width: 75%; + } + .col-lg-8 { + width: 66.66666667%; + } + .col-lg-7 { + width: 58.33333333%; + } + .col-lg-6 { + width: 50%; + } + .col-lg-5 { + width: 41.66666667%; + } + .col-lg-4 { + width: 33.33333333%; + } + .col-lg-3 { + width: 25%; + } + .col-lg-2 { + width: 16.66666667%; + } + .col-lg-1 { + width: 8.33333333%; + } + .col-lg-pull-12 { + right: 100%; + } + .col-lg-pull-11 { + right: 91.66666667%; + } + .col-lg-pull-10 { + right: 83.33333333%; + } + .col-lg-pull-9 { + right: 75%; + } + .col-lg-pull-8 { + right: 66.66666667%; + } + .col-lg-pull-7 { + right: 58.33333333%; + } + .col-lg-pull-6 { + right: 50%; + } + .col-lg-pull-5 { + right: 41.66666667%; + } + .col-lg-pull-4 { + right: 33.33333333%; + } + .col-lg-pull-3 { + right: 25%; + } + .col-lg-pull-2 { + right: 16.66666667%; + } + .col-lg-pull-1 { + right: 8.33333333%; + } + .col-lg-pull-0 { + right: auto; + } + .col-lg-push-12 { + left: 100%; + } + .col-lg-push-11 { + left: 91.66666667%; + } + .col-lg-push-10 { + left: 83.33333333%; + } + .col-lg-push-9 { + left: 75%; + } + .col-lg-push-8 { + left: 66.66666667%; + } + .col-lg-push-7 { + left: 58.33333333%; + } + .col-lg-push-6 { + left: 50%; + } + .col-lg-push-5 { + left: 41.66666667%; + } + .col-lg-push-4 { + left: 33.33333333%; + } + .col-lg-push-3 { + left: 25%; + } + .col-lg-push-2 { + left: 16.66666667%; + } + .col-lg-push-1 { + left: 8.33333333%; + } + .col-lg-push-0 { + left: auto; + } + .col-lg-offset-12 { + margin-left: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66666667%; + } + .col-lg-offset-10 { + margin-left: 83.33333333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66666667%; + } + .col-lg-offset-7 { + margin-left: 58.33333333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66666667%; + } + .col-lg-offset-4 { + margin-left: 33.33333333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66666667%; + } + .col-lg-offset-1 { + margin-left: 8.33333333%; + } + .col-lg-offset-0 { + margin-left: 0%; + } +} +table { + background-color: #2e3338; +} +caption { + padding-top: 8px; + padding-bottom: 8px; + color: #7a8288; + text-align: left; +} +th { + text-align: left; +} +.table { + width: 100%; + max-width: 100%; + margin-bottom: 20px; +} +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + padding: 8px; + line-height: 1.42857143; + vertical-align: top; + border-top: 1px solid #1c1e22; +} +.table > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid #1c1e22; +} +.table > caption + thead > tr:first-child > th, +.table > colgroup + thead > tr:first-child > th, +.table > thead:first-child > tr:first-child > th, +.table > caption + thead > tr:first-child > td, +.table > colgroup + thead > tr:first-child > td, +.table > thead:first-child > tr:first-child > td { + border-top: 0; +} +.table > tbody + tbody { + border-top: 2px solid #1c1e22; +} +.table .table { + background-color: #272b30; +} +.table-condensed > thead > tr > th, +.table-condensed > tbody > tr > th, +.table-condensed > tfoot > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > tbody > tr > td, +.table-condensed > tfoot > tr > td { + padding: 5px; +} +.table-bordered { + border: 1px solid #1c1e22; +} +.table-bordered > thead > tr > th, +.table-bordered > tbody > tr > th, +.table-bordered > tfoot > tr > th, +.table-bordered > thead > tr > td, +.table-bordered > tbody > tr > td, +.table-bordered > tfoot > tr > td { + border: 1px solid #1c1e22; +} +.table-bordered > thead > tr > th, +.table-bordered > thead > tr > td { + border-bottom-width: 2px; +} +.table-striped > tbody > tr:nth-of-type(odd) { + background-color: #353a41; +} +.table-hover > tbody > tr:hover { + background-color: #49515a; +} +table col[class*="col-"] { + position: static; + float: none; + display: table-column; +} +table td[class*="col-"], +table th[class*="col-"] { + position: static; + float: none; + display: table-cell; +} +.table > thead > tr > td.active, +.table > tbody > tr > td.active, +.table > tfoot > tr > td.active, +.table > thead > tr > th.active, +.table > tbody > tr > th.active, +.table > tfoot > tr > th.active, +.table > thead > tr.active > td, +.table > tbody > tr.active > td, +.table > tfoot > tr.active > td, +.table > thead > tr.active > th, +.table > tbody > tr.active > th, +.table > tfoot > tr.active > th { + background-color: #49515a; +} +.table-hover > tbody > tr > td.active:hover, +.table-hover > tbody > tr > th.active:hover, +.table-hover > tbody > tr.active:hover > td, +.table-hover > tbody > tr:hover > .active, +.table-hover > tbody > tr.active:hover > th { + background-color: #3e444c; +} +.table > thead > tr > td.success, +.table > tbody > tr > td.success, +.table > tfoot > tr > td.success, +.table > thead > tr > th.success, +.table > tbody > tr > th.success, +.table > tfoot > tr > th.success, +.table > thead > tr.success > td, +.table > tbody > tr.success > td, +.table > tfoot > tr.success > td, +.table > thead > tr.success > th, +.table > tbody > tr.success > th, +.table > tfoot > tr.success > th { + background-color: #62c462; +} +.table-hover > tbody > tr > td.success:hover, +.table-hover > tbody > tr > th.success:hover, +.table-hover > tbody > tr.success:hover > td, +.table-hover > tbody > tr:hover > .success, +.table-hover > tbody > tr.success:hover > th { + background-color: #4fbd4f; +} +.table > thead > tr > td.info, +.table > tbody > tr > td.info, +.table > tfoot > tr > td.info, +.table > thead > tr > th.info, +.table > tbody > tr > th.info, +.table > tfoot > tr > th.info, +.table > thead > tr.info > td, +.table > tbody > tr.info > td, +.table > tfoot > tr.info > td, +.table > thead > tr.info > th, +.table > tbody > tr.info > th, +.table > tfoot > tr.info > th { + background-color: #5bc0de; +} +.table-hover > tbody > tr > td.info:hover, +.table-hover > tbody > tr > th.info:hover, +.table-hover > tbody > tr.info:hover > td, +.table-hover > tbody > tr:hover > .info, +.table-hover > tbody > tr.info:hover > th { + background-color: #46b8da; +} +.table > thead > tr > td.warning, +.table > tbody > tr > td.warning, +.table > tfoot > tr > td.warning, +.table > thead > tr > th.warning, +.table > tbody > tr > th.warning, +.table > tfoot > tr > th.warning, +.table > thead > tr.warning > td, +.table > tbody > tr.warning > td, +.table > tfoot > tr.warning > td, +.table > thead > tr.warning > th, +.table > tbody > tr.warning > th, +.table > tfoot > tr.warning > th { + background-color: #f89406; +} +.table-hover > tbody > tr > td.warning:hover, +.table-hover > tbody > tr > th.warning:hover, +.table-hover > tbody > tr.warning:hover > td, +.table-hover > tbody > tr:hover > .warning, +.table-hover > tbody > tr.warning:hover > th { + background-color: #df8505; +} +.table > thead > tr > td.danger, +.table > tbody > tr > td.danger, +.table > tfoot > tr > td.danger, +.table > thead > tr > th.danger, +.table > tbody > tr > th.danger, +.table > tfoot > tr > th.danger, +.table > thead > tr.danger > td, +.table > tbody > tr.danger > td, +.table > tfoot > tr.danger > td, +.table > thead > tr.danger > th, +.table > tbody > tr.danger > th, +.table > tfoot > tr.danger > th { + background-color: #ee5f5b; +} +.table-hover > tbody > tr > td.danger:hover, +.table-hover > tbody > tr > th.danger:hover, +.table-hover > tbody > tr.danger:hover > td, +.table-hover > tbody > tr:hover > .danger, +.table-hover > tbody > tr.danger:hover > th { + background-color: #ec4844; +} +.table-responsive { + overflow-x: auto; + min-height: 0.01%; +} +@media screen and (max-width: 767px) { + .table-responsive { + width: 100%; + margin-bottom: 15px; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid #1c1e22; + } + .table-responsive > .table { + margin-bottom: 0; + } + .table-responsive > .table > thead > tr > th, + .table-responsive > .table > tbody > tr > th, + .table-responsive > .table > tfoot > tr > th, + .table-responsive > .table > thead > tr > td, + .table-responsive > .table > tbody > tr > td, + .table-responsive > .table > tfoot > tr > td { + white-space: nowrap; + } + .table-responsive > .table-bordered { + border: 0; + } + .table-responsive > .table-bordered > thead > tr > th:first-child, + .table-responsive > .table-bordered > tbody > tr > th:first-child, + .table-responsive > .table-bordered > tfoot > tr > th:first-child, + .table-responsive > .table-bordered > thead > tr > td:first-child, + .table-responsive > .table-bordered > tbody > tr > td:first-child, + .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; + } + .table-responsive > .table-bordered > thead > tr > th:last-child, + .table-responsive > .table-bordered > tbody > tr > th:last-child, + .table-responsive > .table-bordered > tfoot > tr > th:last-child, + .table-responsive > .table-bordered > thead > tr > td:last-child, + .table-responsive > .table-bordered > tbody > tr > td:last-child, + .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; + } + .table-responsive > .table-bordered > tbody > tr:last-child > th, + .table-responsive > .table-bordered > tfoot > tr:last-child > th, + .table-responsive > .table-bordered > tbody > tr:last-child > td, + .table-responsive > .table-bordered > tfoot > tr:last-child > td { + border-bottom: 0; + } +} +fieldset { + padding: 0; + margin: 0; + border: 0; + min-width: 0; +} +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: inherit; + color: #c8c8c8; + border: 0; + border-bottom: 1px solid #1c1e22; +} +label { + display: inline-block; + max-width: 100%; + margin-bottom: 5px; + font-weight: bold; +} +input[type="search"] { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + line-height: normal; +} +input[type="file"] { + display: block; +} +input[type="range"] { + display: block; + width: 100%; +} +select[multiple], +select[size] { + height: auto; +} +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +output { + display: block; + padding-top: 9px; + font-size: 14px; + line-height: 1.42857143; + color: #272b30; +} +.form-control { + display: block; + width: 100%; + height: 38px; + padding: 8px 12px; + font-size: 14px; + line-height: 1.42857143; + color: #272b30; + background-color: #ffffff; + background-image: none; + border: 1px solid #000000; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} +.form-control:focus { + border-color: #66afe9; + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); +} +.form-control::-moz-placeholder { + color: #7a8288; + opacity: 1; +} +.form-control:-ms-input-placeholder { + color: #7a8288; +} +.form-control::-webkit-input-placeholder { + color: #7a8288; +} +.form-control::-ms-expand { + border: 0; + background-color: transparent; +} +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: #999999; + opacity: 1; +} +.form-control[disabled], +fieldset[disabled] .form-control { + cursor: not-allowed; +} +textarea.form-control { + height: auto; +} +input[type="search"] { + -webkit-appearance: none; +} +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="date"].form-control, + input[type="time"].form-control, + input[type="datetime-local"].form-control, + input[type="month"].form-control { + line-height: 38px; + } + input[type="date"].input-sm, + input[type="time"].input-sm, + input[type="datetime-local"].input-sm, + input[type="month"].input-sm, + .input-group-sm input[type="date"], + .input-group-sm input[type="time"], + .input-group-sm input[type="datetime-local"], + .input-group-sm input[type="month"] { + line-height: 30px; + } + input[type="date"].input-lg, + input[type="time"].input-lg, + input[type="datetime-local"].input-lg, + input[type="month"].input-lg, + .input-group-lg input[type="date"], + .input-group-lg input[type="time"], + .input-group-lg input[type="datetime-local"], + .input-group-lg input[type="month"] { + line-height: 54px; + } +} +.form-group { + margin-bottom: 15px; +} +.radio, +.checkbox { + position: relative; + display: block; + margin-top: 10px; + margin-bottom: 10px; +} +.radio label, +.checkbox label { + min-height: 20px; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; +} +.radio input[type="radio"], +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + position: absolute; + margin-left: -20px; + margin-top: 4px \9; +} +.radio + .radio, +.checkbox + .checkbox { + margin-top: -5px; +} +.radio-inline, +.checkbox-inline { + position: relative; + display: inline-block; + padding-left: 20px; + margin-bottom: 0; + vertical-align: middle; + font-weight: normal; + cursor: pointer; +} +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"].disabled, +input[type="checkbox"].disabled, +fieldset[disabled] input[type="radio"], +fieldset[disabled] input[type="checkbox"] { + cursor: not-allowed; +} +.radio-inline.disabled, +.checkbox-inline.disabled, +fieldset[disabled] .radio-inline, +fieldset[disabled] .checkbox-inline { + cursor: not-allowed; +} +.radio.disabled label, +.checkbox.disabled label, +fieldset[disabled] .radio label, +fieldset[disabled] .checkbox label { + cursor: not-allowed; +} +.form-control-static { + padding-top: 9px; + padding-bottom: 9px; + margin-bottom: 0; + min-height: 34px; +} +.form-control-static.input-lg, +.form-control-static.input-sm { + padding-left: 0; + padding-right: 0; +} +.input-sm { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-sm { + height: 30px; + line-height: 30px; +} +textarea.input-sm, +select[multiple].input-sm { + height: auto; +} +.form-group-sm .form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.form-group-sm select.form-control { + height: 30px; + line-height: 30px; +} +.form-group-sm textarea.form-control, +.form-group-sm select[multiple].form-control { + height: auto; +} +.form-group-sm .form-control-static { + height: 30px; + min-height: 32px; + padding: 6px 10px; + font-size: 12px; + line-height: 1.5; +} +.input-lg { + height: 54px; + padding: 14px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +select.input-lg { + height: 54px; + line-height: 54px; +} +textarea.input-lg, +select[multiple].input-lg { + height: auto; +} +.form-group-lg .form-control { + height: 54px; + padding: 14px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +.form-group-lg select.form-control { + height: 54px; + line-height: 54px; +} +.form-group-lg textarea.form-control, +.form-group-lg select[multiple].form-control { + height: auto; +} +.form-group-lg .form-control-static { + height: 54px; + min-height: 38px; + padding: 15px 16px; + font-size: 18px; + line-height: 1.3333333; +} +.has-feedback { + position: relative; +} +.has-feedback .form-control { + padding-right: 47.5px; +} +.form-control-feedback { + position: absolute; + top: 0; + right: 0; + z-index: 2; + display: block; + width: 38px; + height: 38px; + line-height: 38px; + text-align: center; + pointer-events: none; +} +.input-lg + .form-control-feedback, +.input-group-lg + .form-control-feedback, +.form-group-lg .form-control + .form-control-feedback { + width: 54px; + height: 54px; + line-height: 54px; +} +.input-sm + .form-control-feedback, +.input-group-sm + .form-control-feedback, +.form-group-sm .form-control + .form-control-feedback { + width: 30px; + height: 30px; + line-height: 30px; +} +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline, +.has-success.radio label, +.has-success.checkbox label, +.has-success.radio-inline label, +.has-success.checkbox-inline label { + color: #ffffff; +} +.has-success .form-control { + border-color: #ffffff; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-success .form-control:focus { + border-color: #e6e6e6; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff; +} +.has-success .input-group-addon { + color: #ffffff; + border-color: #ffffff; + background-color: #62c462; +} +.has-success .form-control-feedback { + color: #ffffff; +} +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline, +.has-warning.radio label, +.has-warning.checkbox label, +.has-warning.radio-inline label, +.has-warning.checkbox-inline label { + color: #ffffff; +} +.has-warning .form-control { + border-color: #ffffff; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-warning .form-control:focus { + border-color: #e6e6e6; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff; +} +.has-warning .input-group-addon { + color: #ffffff; + border-color: #ffffff; + background-color: #f89406; +} +.has-warning .form-control-feedback { + color: #ffffff; +} +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline, +.has-error.radio label, +.has-error.checkbox label, +.has-error.radio-inline label, +.has-error.checkbox-inline label { + color: #ffffff; +} +.has-error .form-control { + border-color: #ffffff; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} +.has-error .form-control:focus { + border-color: #e6e6e6; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff; +} +.has-error .input-group-addon { + color: #ffffff; + border-color: #ffffff; + background-color: #ee5f5b; +} +.has-error .form-control-feedback { + color: #ffffff; +} +.has-feedback label ~ .form-control-feedback { + top: 25px; +} +.has-feedback label.sr-only ~ .form-control-feedback { + top: 0; +} +.help-block { + display: block; + margin-top: 5px; + margin-bottom: 10px; + color: #ffffff; +} +@media (min-width: 768px) { + .form-inline .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .form-inline .form-control-static { + display: inline-block; + } + .form-inline .input-group { + display: inline-table; + vertical-align: middle; + } + .form-inline .input-group .input-group-addon, + .form-inline .input-group .input-group-btn, + .form-inline .input-group .form-control { + width: auto; + } + .form-inline .input-group > .form-control { + width: 100%; + } + .form-inline .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio, + .form-inline .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .form-inline .radio label, + .form-inline .checkbox label { + padding-left: 0; + } + .form-inline .radio input[type="radio"], + .form-inline .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .form-inline .has-feedback .form-control-feedback { + top: 0; + } +} +.form-horizontal .radio, +.form-horizontal .checkbox, +.form-horizontal .radio-inline, +.form-horizontal .checkbox-inline { + margin-top: 0; + margin-bottom: 0; + padding-top: 9px; +} +.form-horizontal .radio, +.form-horizontal .checkbox { + min-height: 29px; +} +.form-horizontal .form-group { + margin-left: -15px; + margin-right: -15px; +} +@media (min-width: 768px) { + .form-horizontal .control-label { + text-align: right; + margin-bottom: 0; + padding-top: 9px; + } +} +.form-horizontal .has-feedback .form-control-feedback { + right: 15px; +} +@media (min-width: 768px) { + .form-horizontal .form-group-lg .control-label { + padding-top: 15px; + font-size: 18px; + } +} +@media (min-width: 768px) { + .form-horizontal .form-group-sm .control-label { + padding-top: 6px; + font-size: 12px; + } +} +.btn { + display: inline-block; + margin-bottom: 0; + font-weight: normal; + text-align: center; + vertical-align: middle; + -ms-touch-action: manipulation; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + white-space: nowrap; + padding: 8px 12px; + font-size: 14px; + line-height: 1.42857143; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.btn:focus, +.btn:active:focus, +.btn.active:focus, +.btn.focus, +.btn:active.focus, +.btn.active.focus { + outline: thin dotted; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} +.btn:hover, +.btn:focus, +.btn.focus { + color: #ffffff; + text-decoration: none; +} +.btn:active, +.btn.active { + outline: 0; + background-image: none; + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn.disabled, +.btn[disabled], +fieldset[disabled] .btn { + cursor: not-allowed; + opacity: 0.65; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; +} +a.btn.disabled, +fieldset[disabled] a.btn { + pointer-events: none; +} +.btn-default { + color: #ffffff; + background-color: #3a3f44; + border-color: #3a3f44; +} +.btn-default:focus, +.btn-default.focus { + color: #ffffff; + background-color: #232628; + border-color: #000000; +} +.btn-default:hover { + color: #ffffff; + background-color: #232628; + border-color: #1e2023; +} +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + color: #ffffff; + background-color: #232628; + border-color: #1e2023; +} +.btn-default:active:hover, +.btn-default.active:hover, +.open > .dropdown-toggle.btn-default:hover, +.btn-default:active:focus, +.btn-default.active:focus, +.open > .dropdown-toggle.btn-default:focus, +.btn-default:active.focus, +.btn-default.active.focus, +.open > .dropdown-toggle.btn-default.focus { + color: #ffffff; + background-color: #121415; + border-color: #000000; +} +.btn-default:active, +.btn-default.active, +.open > .dropdown-toggle.btn-default { + background-image: none; +} +.btn-default.disabled:hover, +.btn-default[disabled]:hover, +fieldset[disabled] .btn-default:hover, +.btn-default.disabled:focus, +.btn-default[disabled]:focus, +fieldset[disabled] .btn-default:focus, +.btn-default.disabled.focus, +.btn-default[disabled].focus, +fieldset[disabled] .btn-default.focus { + background-color: #3a3f44; + border-color: #3a3f44; +} +.btn-default .badge { + color: #3a3f44; + background-color: #ffffff; +} +.btn-primary { + color: #ffffff; + background-color: #7a8288; + border-color: #7a8288; +} +.btn-primary:focus, +.btn-primary.focus { + color: #ffffff; + background-color: #62686d; + border-color: #3e4245; +} +.btn-primary:hover { + color: #ffffff; + background-color: #62686d; + border-color: #5d6368; +} +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + color: #ffffff; + background-color: #62686d; + border-color: #5d6368; +} +.btn-primary:active:hover, +.btn-primary.active:hover, +.open > .dropdown-toggle.btn-primary:hover, +.btn-primary:active:focus, +.btn-primary.active:focus, +.open > .dropdown-toggle.btn-primary:focus, +.btn-primary:active.focus, +.btn-primary.active.focus, +.open > .dropdown-toggle.btn-primary.focus { + color: #ffffff; + background-color: #51565a; + border-color: #3e4245; +} +.btn-primary:active, +.btn-primary.active, +.open > .dropdown-toggle.btn-primary { + background-image: none; +} +.btn-primary.disabled:hover, +.btn-primary[disabled]:hover, +fieldset[disabled] .btn-primary:hover, +.btn-primary.disabled:focus, +.btn-primary[disabled]:focus, +fieldset[disabled] .btn-primary:focus, +.btn-primary.disabled.focus, +.btn-primary[disabled].focus, +fieldset[disabled] .btn-primary.focus { + background-color: #7a8288; + border-color: #7a8288; +} +.btn-primary .badge { + color: #7a8288; + background-color: #ffffff; +} +.btn-success { + color: #ffffff; + background-color: #62c462; + border-color: #62c462; +} +.btn-success:focus, +.btn-success.focus { + color: #ffffff; + background-color: #42b142; + border-color: #2d792d; +} +.btn-success:hover { + color: #ffffff; + background-color: #42b142; + border-color: #40a940; +} +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + color: #ffffff; + background-color: #42b142; + border-color: #40a940; +} +.btn-success:active:hover, +.btn-success.active:hover, +.open > .dropdown-toggle.btn-success:hover, +.btn-success:active:focus, +.btn-success.active:focus, +.open > .dropdown-toggle.btn-success:focus, +.btn-success:active.focus, +.btn-success.active.focus, +.open > .dropdown-toggle.btn-success.focus { + color: #ffffff; + background-color: #399739; + border-color: #2d792d; +} +.btn-success:active, +.btn-success.active, +.open > .dropdown-toggle.btn-success { + background-image: none; +} +.btn-success.disabled:hover, +.btn-success[disabled]:hover, +fieldset[disabled] .btn-success:hover, +.btn-success.disabled:focus, +.btn-success[disabled]:focus, +fieldset[disabled] .btn-success:focus, +.btn-success.disabled.focus, +.btn-success[disabled].focus, +fieldset[disabled] .btn-success.focus { + background-color: #62c462; + border-color: #62c462; +} +.btn-success .badge { + color: #62c462; + background-color: #ffffff; +} +.btn-info { + color: #ffffff; + background-color: #5bc0de; + border-color: #5bc0de; +} +.btn-info:focus, +.btn-info.focus { + color: #ffffff; + background-color: #31b0d5; + border-color: #1f7e9a; +} +.btn-info:hover { + color: #ffffff; + background-color: #31b0d5; + border-color: #2aabd2; +} +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + color: #ffffff; + background-color: #31b0d5; + border-color: #2aabd2; +} +.btn-info:active:hover, +.btn-info.active:hover, +.open > .dropdown-toggle.btn-info:hover, +.btn-info:active:focus, +.btn-info.active:focus, +.open > .dropdown-toggle.btn-info:focus, +.btn-info:active.focus, +.btn-info.active.focus, +.open > .dropdown-toggle.btn-info.focus { + color: #ffffff; + background-color: #269abc; + border-color: #1f7e9a; +} +.btn-info:active, +.btn-info.active, +.open > .dropdown-toggle.btn-info { + background-image: none; +} +.btn-info.disabled:hover, +.btn-info[disabled]:hover, +fieldset[disabled] .btn-info:hover, +.btn-info.disabled:focus, +.btn-info[disabled]:focus, +fieldset[disabled] .btn-info:focus, +.btn-info.disabled.focus, +.btn-info[disabled].focus, +fieldset[disabled] .btn-info.focus { + background-color: #5bc0de; + border-color: #5bc0de; +} +.btn-info .badge { + color: #5bc0de; + background-color: #ffffff; +} +.btn-warning { + color: #ffffff; + background-color: #f89406; + border-color: #f89406; +} +.btn-warning:focus, +.btn-warning.focus { + color: #ffffff; + background-color: #c67605; + border-color: #7c4a03; +} +.btn-warning:hover { + color: #ffffff; + background-color: #c67605; + border-color: #bc7005; +} +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + color: #ffffff; + background-color: #c67605; + border-color: #bc7005; +} +.btn-warning:active:hover, +.btn-warning.active:hover, +.open > .dropdown-toggle.btn-warning:hover, +.btn-warning:active:focus, +.btn-warning.active:focus, +.open > .dropdown-toggle.btn-warning:focus, +.btn-warning:active.focus, +.btn-warning.active.focus, +.open > .dropdown-toggle.btn-warning.focus { + color: #ffffff; + background-color: #a36104; + border-color: #7c4a03; +} +.btn-warning:active, +.btn-warning.active, +.open > .dropdown-toggle.btn-warning { + background-image: none; +} +.btn-warning.disabled:hover, +.btn-warning[disabled]:hover, +fieldset[disabled] .btn-warning:hover, +.btn-warning.disabled:focus, +.btn-warning[disabled]:focus, +fieldset[disabled] .btn-warning:focus, +.btn-warning.disabled.focus, +.btn-warning[disabled].focus, +fieldset[disabled] .btn-warning.focus { + background-color: #f89406; + border-color: #f89406; +} +.btn-warning .badge { + color: #f89406; + background-color: #ffffff; +} +.btn-danger { + color: #ffffff; + background-color: #ee5f5b; + border-color: #ee5f5b; +} +.btn-danger:focus, +.btn-danger.focus { + color: #ffffff; + background-color: #e9322d; + border-color: #b71713; +} +.btn-danger:hover { + color: #ffffff; + background-color: #e9322d; + border-color: #e82924; +} +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + color: #ffffff; + background-color: #e9322d; + border-color: #e82924; +} +.btn-danger:active:hover, +.btn-danger.active:hover, +.open > .dropdown-toggle.btn-danger:hover, +.btn-danger:active:focus, +.btn-danger.active:focus, +.open > .dropdown-toggle.btn-danger:focus, +.btn-danger:active.focus, +.btn-danger.active.focus, +.open > .dropdown-toggle.btn-danger.focus { + color: #ffffff; + background-color: #dc1c17; + border-color: #b71713; +} +.btn-danger:active, +.btn-danger.active, +.open > .dropdown-toggle.btn-danger { + background-image: none; +} +.btn-danger.disabled:hover, +.btn-danger[disabled]:hover, +fieldset[disabled] .btn-danger:hover, +.btn-danger.disabled:focus, +.btn-danger[disabled]:focus, +fieldset[disabled] .btn-danger:focus, +.btn-danger.disabled.focus, +.btn-danger[disabled].focus, +fieldset[disabled] .btn-danger.focus { + background-color: #ee5f5b; + border-color: #ee5f5b; +} +.btn-danger .badge { + color: #ee5f5b; + background-color: #ffffff; +} +.btn-link { + color: #ffffff; + font-weight: normal; + border-radius: 0; +} +.btn-link, +.btn-link:active, +.btn-link.active, +.btn-link[disabled], +fieldset[disabled] .btn-link { + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.btn-link, +.btn-link:hover, +.btn-link:focus, +.btn-link:active { + border-color: transparent; +} +.btn-link:hover, +.btn-link:focus { + color: #ffffff; + text-decoration: underline; + background-color: transparent; +} +.btn-link[disabled]:hover, +fieldset[disabled] .btn-link:hover, +.btn-link[disabled]:focus, +fieldset[disabled] .btn-link:focus { + color: #7a8288; + text-decoration: none; +} +.btn-lg, +.btn-group-lg > .btn { + padding: 14px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +.btn-sm, +.btn-group-sm > .btn { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-xs, +.btn-group-xs > .btn { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +.btn-block { + display: block; + width: 100%; +} +.btn-block + .btn-block { + margin-top: 5px; +} +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + -o-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} +.fade.in { + opacity: 1; +} +.collapse { + display: none; +} +.collapse.in { + display: block; +} +tr.collapse.in { + display: table-row; +} +tbody.collapse.in { + display: table-row-group; +} +.collapsing { + position: relative; + height: 0; + overflow: hidden; + -webkit-transition-property: height, visibility; + -o-transition-property: height, visibility; + transition-property: height, visibility; + -webkit-transition-duration: 0.35s; + -o-transition-duration: 0.35s; + transition-duration: 0.35s; + -webkit-transition-timing-function: ease; + -o-transition-timing-function: ease; + transition-timing-function: ease; +} +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid \9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; +} +.dropup, +.dropdown { + position: relative; +} +.dropdown-toggle:focus { + outline: 0; +} +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: 1000; + display: none; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + list-style: none; + font-size: 14px; + text-align: left; + background-color: #3a3f44; + border: 1px solid #272b30; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + -webkit-background-clip: padding-box; + background-clip: padding-box; +} +.dropdown-menu.pull-right { + right: 0; + left: auto; +} +.dropdown-menu .divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #272b30; +} +.dropdown-menu > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: 1.42857143; + color: #c8c8c8; + white-space: nowrap; +} +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + text-decoration: none; + color: #ffffff; + background-color: #272b30; +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: #ffffff; + text-decoration: none; + outline: 0; + background-color: #272b30; +} +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: #7a8288; +} +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; + filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + cursor: not-allowed; +} +.open > .dropdown-menu { + display: block; +} +.open > a { + outline: 0; +} +.dropdown-menu-right { + left: auto; + right: 0; +} +.dropdown-menu-left { + left: 0; + right: auto; +} +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: 12px; + line-height: 1.42857143; + color: #7a8288; + white-space: nowrap; +} +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: 990; +} +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} +.dropup .caret, +.navbar-fixed-bottom .dropdown .caret { + border-top: 0; + border-bottom: 4px dashed; + border-bottom: 4px solid \9; + content: ""; +} +.dropup .dropdown-menu, +.navbar-fixed-bottom .dropdown .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; +} +@media (min-width: 768px) { + .navbar-right .dropdown-menu { + left: auto; + right: 0; + } + .navbar-right .dropdown-menu-left { + left: 0; + right: auto; + } +} +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; +} +.btn-group > .btn, +.btn-group-vertical > .btn { + position: relative; + float: left; +} +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover, +.btn-group > .btn:focus, +.btn-group-vertical > .btn:focus, +.btn-group > .btn:active, +.btn-group-vertical > .btn:active, +.btn-group > .btn.active, +.btn-group-vertical > .btn.active { + z-index: 2; +} +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { + margin-left: -1px; +} +.btn-toolbar { + margin-left: -5px; +} +.btn-toolbar .btn, +.btn-toolbar .btn-group, +.btn-toolbar .input-group { + float: left; +} +.btn-toolbar > .btn, +.btn-toolbar > .btn-group, +.btn-toolbar > .input-group { + margin-left: 5px; +} +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} +.btn-group > .btn:first-child { + margin-left: 0; +} +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} +.btn-group.open .dropdown-toggle { + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); +} +.btn-group.open .dropdown-toggle.btn-link { + -webkit-box-shadow: none; + box-shadow: none; +} +.btn .caret { + margin-left: 0; +} +.btn-lg .caret { + border-width: 5px 5px 0; + border-bottom-width: 0; +} +.dropup .btn-lg .caret { + border-width: 0 5px 5px; +} +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group, +.btn-group-vertical > .btn-group > .btn { + display: block; + float: none; + width: 100%; + max-width: 100%; +} +.btn-group-vertical > .btn-group > .btn { + float: none; +} +.btn-group-vertical > .btn + .btn, +.btn-group-vertical > .btn + .btn-group, +.btn-group-vertical > .btn-group + .btn, +.btn-group-vertical > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; +} +.btn-group-vertical > .btn:not(:first-child):not(:last-child) { + border-radius: 0; +} +.btn-group-vertical > .btn:first-child:not(:last-child) { + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn:last-child:not(:first-child) { + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, +.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; +} +.btn-group-justified > .btn, +.btn-group-justified > .btn-group { + float: none; + display: table-cell; + width: 1%; +} +.btn-group-justified > .btn-group .btn { + width: 100%; +} +.btn-group-justified > .btn-group .dropdown-menu { + left: auto; +} +[data-toggle="buttons"] > .btn input[type="radio"], +[data-toggle="buttons"] > .btn-group > .btn input[type="radio"], +[data-toggle="buttons"] > .btn input[type="checkbox"], +[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] { + position: absolute; + clip: rect(0, 0, 0, 0); + pointer-events: none; +} +.input-group { + position: relative; + display: table; + border-collapse: separate; +} +.input-group[class*="col-"] { + float: none; + padding-left: 0; + padding-right: 0; +} +.input-group .form-control { + position: relative; + z-index: 2; + float: left; + width: 100%; + margin-bottom: 0; +} +.input-group .form-control:focus { + z-index: 3; +} +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { + height: 54px; + padding: 14px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +} +select.input-group-lg > .form-control, +select.input-group-lg > .input-group-addon, +select.input-group-lg > .input-group-btn > .btn { + height: 54px; + line-height: 54px; +} +textarea.input-group-lg > .form-control, +textarea.input-group-lg > .input-group-addon, +textarea.input-group-lg > .input-group-btn > .btn, +select[multiple].input-group-lg > .form-control, +select[multiple].input-group-lg > .input-group-addon, +select[multiple].input-group-lg > .input-group-btn > .btn { + height: auto; +} +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} +select.input-group-sm > .form-control, +select.input-group-sm > .input-group-addon, +select.input-group-sm > .input-group-btn > .btn { + height: 30px; + line-height: 30px; +} +textarea.input-group-sm > .form-control, +textarea.input-group-sm > .input-group-addon, +textarea.input-group-sm > .input-group-btn > .btn, +select[multiple].input-group-sm > .form-control, +select[multiple].input-group-sm > .input-group-addon, +select[multiple].input-group-sm > .input-group-btn > .btn { + height: auto; +} +.input-group-addon, +.input-group-btn, +.input-group .form-control { + display: table-cell; +} +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group .form-control:not(:first-child):not(:last-child) { + border-radius: 0; +} +.input-group-addon, +.input-group-btn { + width: 1%; + white-space: nowrap; + vertical-align: middle; +} +.input-group-addon { + padding: 8px 12px; + font-size: 14px; + font-weight: normal; + line-height: 1; + color: #272b30; + text-align: center; + background-color: #999999; + border: 1px solid rgba(0, 0, 0, 0.6); + border-radius: 4px; +} +.input-group-addon.input-sm { + padding: 5px 10px; + font-size: 12px; + border-radius: 3px; +} +.input-group-addon.input-lg { + padding: 14px 16px; + font-size: 18px; + border-radius: 6px; +} +.input-group-addon input[type="radio"], +.input-group-addon input[type="checkbox"] { + margin-top: 0; +} +.input-group .form-control:first-child, +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle), +.input-group-btn:last-child > .btn-group:not(:last-child) > .btn { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} +.input-group-addon:first-child { + border-right: 0; +} +.input-group .form-control:last-child, +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child), +.input-group-btn:first-child > .btn-group:not(:first-child) > .btn { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} +.input-group-addon:last-child { + border-left: 0; +} +.input-group-btn { + position: relative; + font-size: 0; + white-space: nowrap; +} +.input-group-btn > .btn { + position: relative; +} +.input-group-btn > .btn + .btn { + margin-left: -1px; +} +.input-group-btn > .btn:hover, +.input-group-btn > .btn:focus, +.input-group-btn > .btn:active { + z-index: 2; +} +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .btn-group { + margin-right: -1px; +} +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .btn-group { + z-index: 2; + margin-left: -1px; +} +.nav { + margin-bottom: 0; + padding-left: 0; + list-style: none; +} +.nav > li { + position: relative; + display: block; +} +.nav > li > a { + position: relative; + display: block; + padding: 10px 15px; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: #3e444c; +} +.nav > li.disabled > a { + color: #7a8288; +} +.nav > li.disabled > a:hover, +.nav > li.disabled > a:focus { + color: #7a8288; + text-decoration: none; + background-color: transparent; + cursor: not-allowed; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + background-color: #3e444c; + border-color: #ffffff; +} +.nav .nav-divider { + height: 1px; + margin: 9px 0; + overflow: hidden; + background-color: #e5e5e5; +} +.nav > li > a > img { + max-width: none; +} +.nav-tabs { + border-bottom: 1px solid #1c1e22; +} +.nav-tabs > li { + float: left; + margin-bottom: -1px; +} +.nav-tabs > li > a { + margin-right: 2px; + line-height: 1.42857143; + border: 1px solid transparent; + border-radius: 4px 4px 0 0; +} +.nav-tabs > li > a:hover { + border-color: #1c1e22 #1c1e22 #1c1e22; +} +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:hover, +.nav-tabs > li.active > a:focus { + color: #ffffff; + background-color: #3e444c; + border: 1px solid #1c1e22; + border-bottom-color: transparent; + cursor: default; +} +.nav-tabs.nav-justified { + width: 100%; + border-bottom: 0; +} +.nav-tabs.nav-justified > li { + float: none; +} +.nav-tabs.nav-justified > li > a { + text-align: center; + margin-bottom: 5px; +} +.nav-tabs.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-tabs.nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs.nav-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs.nav-justified > .active > a, +.nav-tabs.nav-justified > .active > a:hover, +.nav-tabs.nav-justified > .active > a:focus { + border: 1px solid #1c1e22; +} +@media (min-width: 768px) { + .nav-tabs.nav-justified > li > a { + border-bottom: 1px solid #1c1e22; + border-radius: 4px 4px 0 0; + } + .nav-tabs.nav-justified > .active > a, + .nav-tabs.nav-justified > .active > a:hover, + .nav-tabs.nav-justified > .active > a:focus { + border-bottom-color: #272b30; + } +} +.nav-pills > li { + float: left; +} +.nav-pills > li > a { + border-radius: 4px; +} +.nav-pills > li + li { + margin-left: 2px; +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover, +.nav-pills > li.active > a:focus { + color: #ffffff; + background-color: transparent; +} +.nav-stacked > li { + float: none; +} +.nav-stacked > li + li { + margin-top: 2px; + margin-left: 0; +} +.nav-justified { + width: 100%; +} +.nav-justified > li { + float: none; +} +.nav-justified > li > a { + text-align: center; + margin-bottom: 5px; +} +.nav-justified > .dropdown .dropdown-menu { + top: auto; + left: auto; +} +@media (min-width: 768px) { + .nav-justified > li { + display: table-cell; + width: 1%; + } + .nav-justified > li > a { + margin-bottom: 0; + } +} +.nav-tabs-justified { + border-bottom: 0; +} +.nav-tabs-justified > li > a { + margin-right: 0; + border-radius: 4px; +} +.nav-tabs-justified > .active > a, +.nav-tabs-justified > .active > a:hover, +.nav-tabs-justified > .active > a:focus { + border: 1px solid #1c1e22; +} +@media (min-width: 768px) { + .nav-tabs-justified > li > a { + border-bottom: 1px solid #1c1e22; + border-radius: 4px 4px 0 0; + } + .nav-tabs-justified > .active > a, + .nav-tabs-justified > .active > a:hover, + .nav-tabs-justified > .active > a:focus { + border-bottom-color: #272b30; + } +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.nav-tabs .dropdown-menu { + margin-top: -1px; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.navbar { + position: relative; + min-height: 50px; + margin-bottom: 20px; + border: 1px solid transparent; +} +@media (min-width: 768px) { + .navbar { + border-radius: 4px; + } +} +@media (min-width: 768px) { + .navbar-header { + float: left; + } +} +.navbar-collapse { + overflow-x: visible; + padding-right: 15px; + padding-left: 15px; + border-top: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); + -webkit-overflow-scrolling: touch; +} +.navbar-collapse.in { + overflow-y: auto; +} +@media (min-width: 768px) { + .navbar-collapse { + width: auto; + border-top: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-collapse.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; + overflow: visible !important; + } + .navbar-collapse.in { + overflow-y: visible; + } + .navbar-fixed-top .navbar-collapse, + .navbar-static-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + padding-left: 0; + padding-right: 0; + } +} +.navbar-fixed-top .navbar-collapse, +.navbar-fixed-bottom .navbar-collapse { + max-height: 340px; +} +@media (max-device-width: 480px) and (orientation: landscape) { + .navbar-fixed-top .navbar-collapse, + .navbar-fixed-bottom .navbar-collapse { + max-height: 200px; + } +} +.container > .navbar-header, +.container-fluid > .navbar-header, +.container > .navbar-collapse, +.container-fluid > .navbar-collapse { + margin-right: -15px; + margin-left: -15px; +} +@media (min-width: 768px) { + .container > .navbar-header, + .container-fluid > .navbar-header, + .container > .navbar-collapse, + .container-fluid > .navbar-collapse { + margin-right: 0; + margin-left: 0; + } +} +.navbar-static-top { + z-index: 1000; + border-width: 0 0 1px; +} +@media (min-width: 768px) { + .navbar-static-top { + border-radius: 0; + } +} +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: 1030; +} +@media (min-width: 768px) { + .navbar-fixed-top, + .navbar-fixed-bottom { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; + border-width: 1px 0 0; +} +.navbar-brand { + float: left; + padding: 15px 15px; + font-size: 18px; + line-height: 20px; + height: 50px; +} +.navbar-brand:hover, +.navbar-brand:focus { + text-decoration: none; +} +.navbar-brand > img { + display: block; +} +@media (min-width: 768px) { + .navbar > .container .navbar-brand, + .navbar > .container-fluid .navbar-brand { + margin-left: -15px; + } +} +.navbar-toggle { + position: relative; + float: right; + margin-right: 15px; + padding: 9px 10px; + margin-top: 8px; + margin-bottom: 8px; + background-color: transparent; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; +} +.navbar-toggle:focus { + outline: 0; +} +.navbar-toggle .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; +} +.navbar-toggle .icon-bar + .icon-bar { + margin-top: 4px; +} +@media (min-width: 768px) { + .navbar-toggle { + display: none; + } +} +.navbar-nav { + margin: 7.5px -15px; +} +.navbar-nav > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: 20px; +} +@media (max-width: 767px) { + .navbar-nav .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + .navbar-nav .open .dropdown-menu > li > a, + .navbar-nav .open .dropdown-menu .dropdown-header { + padding: 5px 15px 5px 25px; + } + .navbar-nav .open .dropdown-menu > li > a { + line-height: 20px; + } + .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-nav .open .dropdown-menu > li > a:focus { + background-image: none; + } +} +@media (min-width: 768px) { + .navbar-nav { + float: left; + margin: 0; + } + .navbar-nav > li { + float: left; + } + .navbar-nav > li > a { + padding-top: 15px; + padding-bottom: 15px; + } +} +.navbar-form { + margin-left: -15px; + margin-right: -15px; + padding: 10px 15px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); + margin-top: 6px; + margin-bottom: 6px; +} +@media (min-width: 768px) { + .navbar-form .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .form-control { + display: inline-block; + width: auto; + vertical-align: middle; + } + .navbar-form .form-control-static { + display: inline-block; + } + .navbar-form .input-group { + display: inline-table; + vertical-align: middle; + } + .navbar-form .input-group .input-group-addon, + .navbar-form .input-group .input-group-btn, + .navbar-form .input-group .form-control { + width: auto; + } + .navbar-form .input-group > .form-control { + width: 100%; + } + .navbar-form .control-label { + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio, + .navbar-form .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + .navbar-form .radio label, + .navbar-form .checkbox label { + padding-left: 0; + } + .navbar-form .radio input[type="radio"], + .navbar-form .checkbox input[type="checkbox"] { + position: relative; + margin-left: 0; + } + .navbar-form .has-feedback .form-control-feedback { + top: 0; + } +} +@media (max-width: 767px) { + .navbar-form .form-group { + margin-bottom: 5px; + } + .navbar-form .form-group:last-child { + margin-bottom: 0; + } +} +@media (min-width: 768px) { + .navbar-form { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + -webkit-box-shadow: none; + box-shadow: none; + } +} +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.navbar-btn { + margin-top: 6px; + margin-bottom: 6px; +} +.navbar-btn.btn-sm { + margin-top: 10px; + margin-bottom: 10px; +} +.navbar-btn.btn-xs { + margin-top: 14px; + margin-bottom: 14px; +} +.navbar-text { + margin-top: 15px; + margin-bottom: 15px; +} +@media (min-width: 768px) { + .navbar-text { + float: left; + margin-left: 15px; + margin-right: 15px; + } +} +@media (min-width: 768px) { + .navbar-left { + float: left !important; + } + .navbar-right { + float: right !important; + margin-right: -15px; + } + .navbar-right ~ .navbar-right { + margin-right: 0; + } +} +.navbar-default { + background-color: #3a3f44; + border-color: #2b2e32; +} +.navbar-default .navbar-brand { + color: #c8c8c8; +} +.navbar-default .navbar-brand:hover, +.navbar-default .navbar-brand:focus { + color: #ffffff; + background-color: none; +} +.navbar-default .navbar-text { + color: #c8c8c8; +} +.navbar-default .navbar-nav > li > a { + color: #c8c8c8; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: #ffffff; + background-color: #272b2e; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: #ffffff; + background-color: #272b2e; +} +.navbar-default .navbar-nav > .disabled > a, +.navbar-default .navbar-nav > .disabled > a:hover, +.navbar-default .navbar-nav > .disabled > a:focus { + color: #cccccc; + background-color: transparent; +} +.navbar-default .navbar-toggle { + border-color: #272b2e; +} +.navbar-default .navbar-toggle:hover, +.navbar-default .navbar-toggle:focus { + background-color: #272b2e; +} +.navbar-default .navbar-toggle .icon-bar { + background-color: #c8c8c8; +} +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: #2b2e32; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + background-color: #272b2e; + color: #ffffff; +} +@media (max-width: 767px) { + .navbar-default .navbar-nav .open .dropdown-menu > li > a { + color: #c8c8c8; + } + .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { + color: #ffffff; + background-color: #272b2e; + } + .navbar-default .navbar-nav .open .dropdown-menu > .active > a, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #ffffff; + background-color: #272b2e; + } + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #cccccc; + background-color: transparent; + } +} +.navbar-default .navbar-link { + color: #c8c8c8; +} +.navbar-default .navbar-link:hover { + color: #ffffff; +} +.navbar-default .btn-link { + color: #c8c8c8; +} +.navbar-default .btn-link:hover, +.navbar-default .btn-link:focus { + color: #ffffff; +} +.navbar-default .btn-link[disabled]:hover, +fieldset[disabled] .navbar-default .btn-link:hover, +.navbar-default .btn-link[disabled]:focus, +fieldset[disabled] .navbar-default .btn-link:focus { + color: #cccccc; +} +.navbar-inverse { + background-color: #7a8288; + border-color: #62686d; +} +.navbar-inverse .navbar-brand { + color: #cccccc; +} +.navbar-inverse .navbar-brand:hover, +.navbar-inverse .navbar-brand:focus { + color: #ffffff; + background-color: none; +} +.navbar-inverse .navbar-text { + color: #cccccc; +} +.navbar-inverse .navbar-nav > li > a { + color: #cccccc; +} +.navbar-inverse .navbar-nav > li > a:hover, +.navbar-inverse .navbar-nav > li > a:focus { + color: #ffffff; + background-color: #5d6368; +} +.navbar-inverse .navbar-nav > .active > a, +.navbar-inverse .navbar-nav > .active > a:hover, +.navbar-inverse .navbar-nav > .active > a:focus { + color: #ffffff; + background-color: #5d6368; +} +.navbar-inverse .navbar-nav > .disabled > a, +.navbar-inverse .navbar-nav > .disabled > a:hover, +.navbar-inverse .navbar-nav > .disabled > a:focus { + color: #cccccc; + background-color: transparent; +} +.navbar-inverse .navbar-toggle { + border-color: #5d6368; +} +.navbar-inverse .navbar-toggle:hover, +.navbar-inverse .navbar-toggle:focus { + background-color: #5d6368; +} +.navbar-inverse .navbar-toggle .icon-bar { + background-color: #ffffff; +} +.navbar-inverse .navbar-collapse, +.navbar-inverse .navbar-form { + border-color: #697075; +} +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + background-color: #5d6368; + color: #ffffff; +} +@media (max-width: 767px) { + .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { + border-color: #62686d; + } + .navbar-inverse .navbar-nav .open .dropdown-menu .divider { + background-color: #62686d; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { + color: #cccccc; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { + color: #ffffff; + background-color: #5d6368; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { + color: #ffffff; + background-color: #5d6368; + } + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover, + .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus { + color: #cccccc; + background-color: transparent; + } +} +.navbar-inverse .navbar-link { + color: #cccccc; +} +.navbar-inverse .navbar-link:hover { + color: #ffffff; +} +.navbar-inverse .btn-link { + color: #cccccc; +} +.navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link:focus { + color: #ffffff; +} +.navbar-inverse .btn-link[disabled]:hover, +fieldset[disabled] .navbar-inverse .btn-link:hover, +.navbar-inverse .btn-link[disabled]:focus, +fieldset[disabled] .navbar-inverse .btn-link:focus { + color: #cccccc; +} +.breadcrumb { + padding: 8px 15px; + margin-bottom: 20px; + list-style: none; + background-color: transparent; + border-radius: 4px; +} +.breadcrumb > li { + display: inline-block; +} +.breadcrumb > li + li:before { + content: "/\00a0"; + padding: 0 5px; + color: #cccccc; +} +.breadcrumb > .active { + color: #7a8288; +} +.pagination { + display: inline-block; + padding-left: 0; + margin: 20px 0; + border-radius: 4px; +} +.pagination > li { + display: inline; +} +.pagination > li > a, +.pagination > li > span { + position: relative; + float: left; + padding: 8px 12px; + line-height: 1.42857143; + text-decoration: none; + color: #ffffff; + background-color: #3a3f44; + border: 1px solid rgba(0, 0, 0, 0.6); + margin-left: -1px; +} +.pagination > li:first-child > a, +.pagination > li:first-child > span { + margin-left: 0; + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} +.pagination > li:last-child > a, +.pagination > li:last-child > span { + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; +} +.pagination > li > a:hover, +.pagination > li > span:hover, +.pagination > li > a:focus, +.pagination > li > span:focus { + z-index: 2; + color: #ffffff; + background-color: transparent; + border-color: rgba(0, 0, 0, 0.6); +} +.pagination > .active > a, +.pagination > .active > span, +.pagination > .active > a:hover, +.pagination > .active > span:hover, +.pagination > .active > a:focus, +.pagination > .active > span:focus { + z-index: 3; + color: #ffffff; + background-color: #232628; + border-color: rgba(0, 0, 0, 0.6); + cursor: default; +} +.pagination > .disabled > span, +.pagination > .disabled > span:hover, +.pagination > .disabled > span:focus, +.pagination > .disabled > a, +.pagination > .disabled > a:hover, +.pagination > .disabled > a:focus { + color: #7a8288; + background-color: #ffffff; + border-color: rgba(0, 0, 0, 0.6); + cursor: not-allowed; +} +.pagination-lg > li > a, +.pagination-lg > li > span { + padding: 14px 16px; + font-size: 18px; + line-height: 1.3333333; +} +.pagination-lg > li:first-child > a, +.pagination-lg > li:first-child > span { + border-bottom-left-radius: 6px; + border-top-left-radius: 6px; +} +.pagination-lg > li:last-child > a, +.pagination-lg > li:last-child > span { + border-bottom-right-radius: 6px; + border-top-right-radius: 6px; +} +.pagination-sm > li > a, +.pagination-sm > li > span { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; +} +.pagination-sm > li:first-child > a, +.pagination-sm > li:first-child > span { + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; +} +.pagination-sm > li:last-child > a, +.pagination-sm > li:last-child > span { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; +} +.pager { + padding-left: 0; + margin: 20px 0; + list-style: none; + text-align: center; +} +.pager li { + display: inline; +} +.pager li > a, +.pager li > span { + display: inline-block; + padding: 5px 14px; + background-color: #3a3f44; + border: 1px solid rgba(0, 0, 0, 0.6); + border-radius: 15px; +} +.pager li > a:hover, +.pager li > a:focus { + text-decoration: none; + background-color: transparent; +} +.pager .next > a, +.pager .next > span { + float: right; +} +.pager .previous > a, +.pager .previous > span { + float: left; +} +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > a:focus, +.pager .disabled > span { + color: #7a8288; + background-color: #3a3f44; + cursor: not-allowed; +} +.label { + display: inline; + padding: .2em .6em .3em; + font-size: 75%; + font-weight: bold; + line-height: 1; + color: #ffffff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: .25em; +} +a.label:hover, +a.label:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} +.label:empty { + display: none; +} +.btn .label { + position: relative; + top: -1px; +} +.label-default { + background-color: #3a3f44; +} +.label-default[href]:hover, +.label-default[href]:focus { + background-color: #232628; +} +.label-primary { + background-color: #7a8288; +} +.label-primary[href]:hover, +.label-primary[href]:focus { + background-color: #62686d; +} +.label-success { + background-color: #62c462; +} +.label-success[href]:hover, +.label-success[href]:focus { + background-color: #42b142; +} +.label-info { + background-color: #5bc0de; +} +.label-info[href]:hover, +.label-info[href]:focus { + background-color: #31b0d5; +} +.label-warning { + background-color: #f89406; +} +.label-warning[href]:hover, +.label-warning[href]:focus { + background-color: #c67605; +} +.label-danger { + background-color: #ee5f5b; +} +.label-danger[href]:hover, +.label-danger[href]:focus { + background-color: #e9322d; +} +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: 12px; + font-weight: bold; + color: #ffffff; + line-height: 1; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: #7a8288; + border-radius: 10px; +} +.badge:empty { + display: none; +} +.btn .badge { + position: relative; + top: -1px; +} +.btn-xs .badge, +.btn-group-xs > .btn .badge { + top: 0; + padding: 1px 5px; +} +a.badge:hover, +a.badge:focus { + color: #ffffff; + text-decoration: none; + cursor: pointer; +} +.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: #ffffff; + background-color: #7a8288; +} +.list-group-item > .badge { + float: right; +} +.list-group-item > .badge + .badge { + margin-right: 5px; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} +.jumbotron { + padding-top: 30px; + padding-bottom: 30px; + margin-bottom: 30px; + color: inherit; + background-color: #1c1e22; +} +.jumbotron h1, +.jumbotron .h1 { + color: inherit; +} +.jumbotron p { + margin-bottom: 15px; + font-size: 21px; + font-weight: 200; +} +.jumbotron > hr { + border-top-color: #050506; +} +.container .jumbotron, +.container-fluid .jumbotron { + border-radius: 6px; + padding-left: 15px; + padding-right: 15px; +} +.jumbotron .container { + max-width: 100%; +} +@media screen and (min-width: 768px) { + .jumbotron { + padding-top: 48px; + padding-bottom: 48px; + } + .container .jumbotron, + .container-fluid .jumbotron { + padding-left: 60px; + padding-right: 60px; + } + .jumbotron h1, + .jumbotron .h1 { + font-size: 63px; + } +} +.thumbnail { + display: block; + padding: 4px; + margin-bottom: 20px; + line-height: 1.42857143; + background-color: #1c1e22; + border: 1px solid #0c0d0e; + border-radius: 4px; + -webkit-transition: border 0.2s ease-in-out; + -o-transition: border 0.2s ease-in-out; + transition: border 0.2s ease-in-out; +} +.thumbnail > img, +.thumbnail a > img { + margin-left: auto; + margin-right: auto; +} +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: #ffffff; +} +.thumbnail .caption { + padding: 9px; + color: #c8c8c8; +} +.alert { + padding: 15px; + margin-bottom: 20px; + border: 1px solid transparent; + border-radius: 4px; +} +.alert h4 { + margin-top: 0; + color: inherit; +} +.alert .alert-link { + font-weight: bold; +} +.alert > p, +.alert > ul { + margin-bottom: 0; +} +.alert > p + p { + margin-top: 5px; +} +.alert-dismissable, +.alert-dismissible { + padding-right: 35px; +} +.alert-dismissable .close, +.alert-dismissible .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; +} +.alert-success { + background-color: #62c462; + border-color: #62bd4f; + color: #ffffff; +} +.alert-success hr { + border-top-color: #55b142; +} +.alert-success .alert-link { + color: #e6e6e6; +} +.alert-info { + background-color: #5bc0de; + border-color: #3dced8; + color: #ffffff; +} +.alert-info hr { + border-top-color: #2ac7d2; +} +.alert-info .alert-link { + color: #e6e6e6; +} +.alert-warning { + background-color: #f89406; + border-color: #e96506; + color: #ffffff; +} +.alert-warning hr { + border-top-color: #d05a05; +} +.alert-warning .alert-link { + color: #e6e6e6; +} +.alert-danger { + background-color: #ee5f5b; + border-color: #ed4d63; + color: #ffffff; +} +.alert-danger hr { + border-top-color: #ea364f; +} +.alert-danger .alert-link { + color: #e6e6e6; +} +@-webkit-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@-o-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +@keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} +.progress { + overflow: hidden; + height: 20px; + margin-bottom: 20px; + background-color: #1c1e22; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); +} +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: 12px; + line-height: 20px; + color: #ffffff; + text-align: center; + background-color: #7a8288; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); + -webkit-transition: width 0.6s ease; + -o-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.progress-striped .progress-bar, +.progress-bar-striped { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + -webkit-background-size: 40px 40px; + background-size: 40px 40px; +} +.progress.active .progress-bar, +.progress-bar.active { + -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; + animation: progress-bar-stripes 2s linear infinite; +} +.progress-bar-success { + background-color: #62c462; +} +.progress-striped .progress-bar-success { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress-bar-info { + background-color: #5bc0de; +} +.progress-striped .progress-bar-info { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress-bar-warning { + background-color: #f89406; +} +.progress-striped .progress-bar-warning { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.progress-bar-danger { + background-color: #ee5f5b; +} +.progress-striped .progress-bar-danger { + background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); +} +.media { + margin-top: 15px; +} +.media:first-child { + margin-top: 0; +} +.media, +.media-body { + zoom: 1; + overflow: hidden; +} +.media-body { + width: 10000px; +} +.media-object { + display: block; +} +.media-object.img-thumbnail { + max-width: none; +} +.media-right, +.media > .pull-right { + padding-left: 10px; +} +.media-left, +.media > .pull-left { + padding-right: 10px; +} +.media-left, +.media-right, +.media-body { + display: table-cell; + vertical-align: top; +} +.media-middle { + vertical-align: middle; +} +.media-bottom { + vertical-align: bottom; +} +.media-heading { + margin-top: 0; + margin-bottom: 5px; +} +.media-list { + padding-left: 0; + list-style: none; +} +.list-group { + margin-bottom: 20px; + padding-left: 0; +} +.list-group-item { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #32383e; + border: 1px solid rgba(0, 0, 0, 0.6); +} +.list-group-item:first-child { + border-top-right-radius: 4px; + border-top-left-radius: 4px; +} +.list-group-item:last-child { + margin-bottom: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +a.list-group-item, +button.list-group-item { + color: #c8c8c8; +} +a.list-group-item .list-group-item-heading, +button.list-group-item .list-group-item-heading { + color: #ffffff; +} +a.list-group-item:hover, +button.list-group-item:hover, +a.list-group-item:focus, +button.list-group-item:focus { + text-decoration: none; + color: #c8c8c8; + background-color: #3e444c; +} +button.list-group-item { + width: 100%; + text-align: left; +} +.list-group-item.disabled, +.list-group-item.disabled:hover, +.list-group-item.disabled:focus { + background-color: #999999; + color: #7a8288; + cursor: not-allowed; +} +.list-group-item.disabled .list-group-item-heading, +.list-group-item.disabled:hover .list-group-item-heading, +.list-group-item.disabled:focus .list-group-item-heading { + color: inherit; +} +.list-group-item.disabled .list-group-item-text, +.list-group-item.disabled:hover .list-group-item-text, +.list-group-item.disabled:focus .list-group-item-text { + color: #7a8288; +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + z-index: 2; + color: #ffffff; + background-color: #3e444c; + border-color: rgba(0, 0, 0, 0.6); +} +.list-group-item.active .list-group-item-heading, +.list-group-item.active:hover .list-group-item-heading, +.list-group-item.active:focus .list-group-item-heading, +.list-group-item.active .list-group-item-heading > small, +.list-group-item.active:hover .list-group-item-heading > small, +.list-group-item.active:focus .list-group-item-heading > small, +.list-group-item.active .list-group-item-heading > .small, +.list-group-item.active:hover .list-group-item-heading > .small, +.list-group-item.active:focus .list-group-item-heading > .small { + color: inherit; +} +.list-group-item.active .list-group-item-text, +.list-group-item.active:hover .list-group-item-text, +.list-group-item.active:focus .list-group-item-text { + color: #a2aab4; +} +.list-group-item-success { + color: #ffffff; + background-color: #62c462; +} +a.list-group-item-success, +button.list-group-item-success { + color: #ffffff; +} +a.list-group-item-success .list-group-item-heading, +button.list-group-item-success .list-group-item-heading { + color: inherit; +} +a.list-group-item-success:hover, +button.list-group-item-success:hover, +a.list-group-item-success:focus, +button.list-group-item-success:focus { + color: #ffffff; + background-color: #4fbd4f; +} +a.list-group-item-success.active, +button.list-group-item-success.active, +a.list-group-item-success.active:hover, +button.list-group-item-success.active:hover, +a.list-group-item-success.active:focus, +button.list-group-item-success.active:focus { + color: #fff; + background-color: #ffffff; + border-color: #ffffff; +} +.list-group-item-info { + color: #ffffff; + background-color: #5bc0de; +} +a.list-group-item-info, +button.list-group-item-info { + color: #ffffff; +} +a.list-group-item-info .list-group-item-heading, +button.list-group-item-info .list-group-item-heading { + color: inherit; +} +a.list-group-item-info:hover, +button.list-group-item-info:hover, +a.list-group-item-info:focus, +button.list-group-item-info:focus { + color: #ffffff; + background-color: #46b8da; +} +a.list-group-item-info.active, +button.list-group-item-info.active, +a.list-group-item-info.active:hover, +button.list-group-item-info.active:hover, +a.list-group-item-info.active:focus, +button.list-group-item-info.active:focus { + color: #fff; + background-color: #ffffff; + border-color: #ffffff; +} +.list-group-item-warning { + color: #ffffff; + background-color: #f89406; +} +a.list-group-item-warning, +button.list-group-item-warning { + color: #ffffff; +} +a.list-group-item-warning .list-group-item-heading, +button.list-group-item-warning .list-group-item-heading { + color: inherit; +} +a.list-group-item-warning:hover, +button.list-group-item-warning:hover, +a.list-group-item-warning:focus, +button.list-group-item-warning:focus { + color: #ffffff; + background-color: #df8505; +} +a.list-group-item-warning.active, +button.list-group-item-warning.active, +a.list-group-item-warning.active:hover, +button.list-group-item-warning.active:hover, +a.list-group-item-warning.active:focus, +button.list-group-item-warning.active:focus { + color: #fff; + background-color: #ffffff; + border-color: #ffffff; +} +.list-group-item-danger { + color: #ffffff; + background-color: #ee5f5b; +} +a.list-group-item-danger, +button.list-group-item-danger { + color: #ffffff; +} +a.list-group-item-danger .list-group-item-heading, +button.list-group-item-danger .list-group-item-heading { + color: inherit; +} +a.list-group-item-danger:hover, +button.list-group-item-danger:hover, +a.list-group-item-danger:focus, +button.list-group-item-danger:focus { + color: #ffffff; + background-color: #ec4844; +} +a.list-group-item-danger.active, +button.list-group-item-danger.active, +a.list-group-item-danger.active:hover, +button.list-group-item-danger.active:hover, +a.list-group-item-danger.active:focus, +button.list-group-item-danger.active:focus { + color: #fff; + background-color: #ffffff; + border-color: #ffffff; +} +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} +.panel { + margin-bottom: 20px; + background-color: #2e3338; + border: 1px solid transparent; + border-radius: 4px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} +.panel-body { + padding: 15px; +} +.panel-heading { + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel-heading > .dropdown .dropdown-toggle { + color: inherit; +} +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: 16px; + color: inherit; +} +.panel-title > a, +.panel-title > small, +.panel-title > .small, +.panel-title > small > a, +.panel-title > .small > a { + color: inherit; +} +.panel-footer { + padding: 10px 15px; + background-color: #3e444c; + border-top: 1px solid rgba(0, 0, 0, 0.6); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .list-group, +.panel > .panel-collapse > .list-group { + margin-bottom: 0; +} +.panel > .list-group .list-group-item, +.panel > .panel-collapse > .list-group .list-group-item { + border-width: 1px 0; + border-radius: 0; +} +.panel > .list-group:first-child .list-group-item:first-child, +.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child { + border-top: 0; + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel > .list-group:last-child .list-group-item:last-child, +.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child { + border-bottom: 0; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child { + border-top-right-radius: 0; + border-top-left-radius: 0; +} +.panel-heading + .list-group .list-group-item:first-child { + border-top-width: 0; +} +.list-group + .panel-footer { + border-top-width: 0; +} +.panel > .table, +.panel > .table-responsive > .table, +.panel > .panel-collapse > .table { + margin-bottom: 0; +} +.panel > .table caption, +.panel > .table-responsive > .table caption, +.panel > .panel-collapse > .table caption { + padding-left: 15px; + padding-right: 15px; +} +.panel > .table:first-child, +.panel > .table-responsive:first-child > .table:first-child { + border-top-right-radius: 3px; + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child { + border-top-left-radius: 3px; + border-top-right-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { + border-top-left-radius: 3px; +} +.panel > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child, +.panel > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, +.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, +.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { + border-top-right-radius: 3px; +} +.panel > .table:last-child, +.panel > .table-responsive:last-child > .table:last-child { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child { + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { + border-bottom-left-radius: 3px; +} +.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child, +.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, +.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, +.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { + border-bottom-right-radius: 3px; +} +.panel > .panel-body + .table, +.panel > .panel-body + .table-responsive, +.panel > .table + .panel-body, +.panel > .table-responsive + .panel-body { + border-top: 1px solid #1c1e22; +} +.panel > .table > tbody:first-child > tr:first-child th, +.panel > .table > tbody:first-child > tr:first-child td { + border-top: 0; +} +.panel > .table-bordered, +.panel > .table-responsive > .table-bordered { + border: 0; +} +.panel > .table-bordered > thead > tr > th:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:first-child, +.panel > .table-bordered > tbody > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child, +.panel > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child, +.panel > .table-bordered > thead > tr > td:first-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:first-child, +.panel > .table-bordered > tbody > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child, +.panel > .table-bordered > tfoot > tr > td:first-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child { + border-left: 0; +} +.panel > .table-bordered > thead > tr > th:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > th:last-child, +.panel > .table-bordered > tbody > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child, +.panel > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child, +.panel > .table-bordered > thead > tr > td:last-child, +.panel > .table-responsive > .table-bordered > thead > tr > td:last-child, +.panel > .table-bordered > tbody > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child, +.panel > .table-bordered > tfoot > tr > td:last-child, +.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child { + border-right: 0; +} +.panel > .table-bordered > thead > tr:first-child > td, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > td, +.panel > .table-bordered > tbody > tr:first-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td, +.panel > .table-bordered > thead > tr:first-child > th, +.panel > .table-responsive > .table-bordered > thead > tr:first-child > th, +.panel > .table-bordered > tbody > tr:first-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th { + border-bottom: 0; +} +.panel > .table-bordered > tbody > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td, +.panel > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td, +.panel > .table-bordered > tbody > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th, +.panel > .table-bordered > tfoot > tr:last-child > th, +.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th { + border-bottom: 0; +} +.panel > .table-responsive { + border: 0; + margin-bottom: 0; +} +.panel-group { + margin-bottom: 20px; +} +.panel-group .panel { + margin-bottom: 0; + border-radius: 4px; +} +.panel-group .panel + .panel { + margin-top: 5px; +} +.panel-group .panel-heading { + border-bottom: 0; +} +.panel-group .panel-heading + .panel-collapse > .panel-body, +.panel-group .panel-heading + .panel-collapse > .list-group { + border-top: 1px solid rgba(0, 0, 0, 0.6); +} +.panel-group .panel-footer { + border-top: 0; +} +.panel-group .panel-footer + .panel-collapse .panel-body { + border-bottom: 1px solid rgba(0, 0, 0, 0.6); +} +.panel-default { + border-color: rgba(0, 0, 0, 0.6); +} +.panel-default > .panel-heading { + color: #c8c8c8; + background-color: #3e444c; + border-color: rgba(0, 0, 0, 0.6); +} +.panel-default > .panel-heading + .panel-collapse > .panel-body { + border-top-color: rgba(0, 0, 0, 0.6); +} +.panel-default > .panel-heading .badge { + color: #3e444c; + background-color: #c8c8c8; +} +.panel-default > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: rgba(0, 0, 0, 0.6); +} +.panel-primary { + border-color: rgba(0, 0, 0, 0.6); +} +.panel-primary > .panel-heading { + color: #ffffff; + background-color: #7a8288; + border-color: rgba(0, 0, 0, 0.6); +} +.panel-primary > .panel-heading + .panel-collapse > .panel-body { + border-top-color: rgba(0, 0, 0, 0.6); +} +.panel-primary > .panel-heading .badge { + color: #7a8288; + background-color: #ffffff; +} +.panel-primary > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: rgba(0, 0, 0, 0.6); +} +.panel-success { + border-color: rgba(0, 0, 0, 0.6); +} +.panel-success > .panel-heading { + color: #ffffff; + background-color: #62c462; + border-color: rgba(0, 0, 0, 0.6); +} +.panel-success > .panel-heading + .panel-collapse > .panel-body { + border-top-color: rgba(0, 0, 0, 0.6); +} +.panel-success > .panel-heading .badge { + color: #62c462; + background-color: #ffffff; +} +.panel-success > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: rgba(0, 0, 0, 0.6); +} +.panel-info { + border-color: rgba(0, 0, 0, 0.6); +} +.panel-info > .panel-heading { + color: #ffffff; + background-color: #5bc0de; + border-color: rgba(0, 0, 0, 0.6); +} +.panel-info > .panel-heading + .panel-collapse > .panel-body { + border-top-color: rgba(0, 0, 0, 0.6); +} +.panel-info > .panel-heading .badge { + color: #5bc0de; + background-color: #ffffff; +} +.panel-info > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: rgba(0, 0, 0, 0.6); +} +.panel-warning { + border-color: rgba(0, 0, 0, 0.6); +} +.panel-warning > .panel-heading { + color: #ffffff; + background-color: #f89406; + border-color: rgba(0, 0, 0, 0.6); +} +.panel-warning > .panel-heading + .panel-collapse > .panel-body { + border-top-color: rgba(0, 0, 0, 0.6); +} +.panel-warning > .panel-heading .badge { + color: #f89406; + background-color: #ffffff; +} +.panel-warning > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: rgba(0, 0, 0, 0.6); +} +.panel-danger { + border-color: rgba(0, 0, 0, 0.6); +} +.panel-danger > .panel-heading { + color: #ffffff; + background-color: #ee5f5b; + border-color: rgba(0, 0, 0, 0.6); +} +.panel-danger > .panel-heading + .panel-collapse > .panel-body { + border-top-color: rgba(0, 0, 0, 0.6); +} +.panel-danger > .panel-heading .badge { + color: #ee5f5b; + background-color: #ffffff; +} +.panel-danger > .panel-footer + .panel-collapse > .panel-body { + border-bottom-color: rgba(0, 0, 0, 0.6); +} +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; +} +.embed-responsive .embed-responsive-item, +.embed-responsive iframe, +.embed-responsive embed, +.embed-responsive object, +.embed-responsive video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; +} +.embed-responsive-16by9 { + padding-bottom: 56.25%; +} +.embed-responsive-4by3 { + padding-bottom: 75%; +} +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: #1c1e22; + border: 1px solid #0c0d0e; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); +} +.well blockquote { + border-color: #ddd; + border-color: rgba(0, 0, 0, 0.15); +} +.well-lg { + padding: 24px; + border-radius: 6px; +} +.well-sm { + padding: 9px; + border-radius: 3px; +} +.close { + float: right; + font-size: 21px; + font-weight: bold; + line-height: 1; + color: #000000; + text-shadow: 0 1px 0 #ffffff; + opacity: 0.2; + filter: alpha(opacity=20); +} +.close:hover, +.close:focus { + color: #000000; + text-decoration: none; + cursor: pointer; + opacity: 0.5; + filter: alpha(opacity=50); +} +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} +.modal-open { + overflow: hidden; +} +.modal { + display: none; + overflow: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1050; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.modal.fade .modal-dialog { + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); + transform: translate(0, -25%); + -webkit-transition: -webkit-transform 0.3s ease-out; + -o-transition: -o-transform 0.3s ease-out; + transition: transform 0.3s ease-out; +} +.modal.in .modal-dialog { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); + transform: translate(0, 0); +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} +.modal-content { + position: relative; + background-color: #2e3338; + border: 1px solid #999999; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + -webkit-background-clip: padding-box; + background-clip: padding-box; + outline: 0; +} +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1040; + background-color: #000000; +} +.modal-backdrop.fade { + opacity: 0; + filter: alpha(opacity=0); +} +.modal-backdrop.in { + opacity: 0.5; + filter: alpha(opacity=50); +} +.modal-header { + padding: 15px; + border-bottom: 1px solid #1c1e22; +} +.modal-header .close { + margin-top: -2px; +} +.modal-title { + margin: 0; + line-height: 1.42857143; +} +.modal-body { + position: relative; + padding: 20px; +} +.modal-footer { + padding: 20px; + text-align: right; + border-top: 1px solid #1c1e22; +} +.modal-footer .btn + .btn { + margin-left: 5px; + margin-bottom: 0; +} +.modal-footer .btn-group .btn + .btn { + margin-left: -1px; +} +.modal-footer .btn-block + .btn-block { + margin-left: 0; +} +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} +@media (min-width: 768px) { + .modal-dialog { + width: 600px; + margin: 30px auto; + } + .modal-content { + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); + } + .modal-sm { + width: 300px; + } +} +@media (min-width: 992px) { + .modal-lg { + width: 900px; + } +} +.tooltip { + position: absolute; + z-index: 1070; + display: block; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 12px; + opacity: 0; + filter: alpha(opacity=0); +} +.tooltip.in { + opacity: 0.9; + filter: alpha(opacity=90); +} +.tooltip.top { + margin-top: -3px; + padding: 5px 0; +} +.tooltip.right { + margin-left: 3px; + padding: 0 5px; +} +.tooltip.bottom { + margin-top: 3px; + padding: 5px 0; +} +.tooltip.left { + margin-left: -3px; + padding: 0 5px; +} +.tooltip-inner { + max-width: 200px; + padding: 3px 8px; + color: #ffffff; + text-align: center; + background-color: #000000; + border-radius: 4px; +} +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-left .tooltip-arrow { + bottom: 0; + right: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.top-right .tooltip-arrow { + bottom: 0; + left: 5px; + margin-bottom: -5px; + border-width: 5px 5px 0; + border-top-color: #000000; +} +.tooltip.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -5px; + border-width: 5px 5px 5px 0; + border-right-color: #000000; +} +.tooltip.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -5px; + border-width: 5px 0 5px 5px; + border-left-color: #000000; +} +.tooltip.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-left .tooltip-arrow { + top: 0; + right: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.tooltip.bottom-right .tooltip-arrow { + top: 0; + left: 5px; + margin-top: -5px; + border-width: 0 5px 5px; + border-bottom-color: #000000; +} +.popover { + position: absolute; + top: 0; + left: 0; + z-index: 1060; + display: none; + max-width: 276px; + padding: 1px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: 1.42857143; + text-align: left; + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; + font-size: 14px; + background-color: #2e3338; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #999999; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 6px; + -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); +} +.popover.top { + margin-top: -10px; +} +.popover.right { + margin-left: 10px; +} +.popover.bottom { + margin-top: 10px; +} +.popover.left { + margin-left: -10px; +} +.popover-title { + margin: 0; + padding: 8px 14px; + font-size: 14px; + background-color: #2e3338; + border-bottom: 1px solid #22262a; + border-radius: 5px 5px 0 0; +} +.popover-content { + padding: 9px 14px; +} +.popover > .arrow, +.popover > .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover > .arrow { + border-width: 11px; +} +.popover > .arrow:after { + border-width: 10px; + content: ""; +} +.popover.top > .arrow { + left: 50%; + margin-left: -11px; + border-bottom-width: 0; + border-top-color: #666666; + border-top-color: rgba(0, 0, 0, 0.25); + bottom: -11px; +} +.popover.top > .arrow:after { + content: " "; + bottom: 1px; + margin-left: -10px; + border-bottom-width: 0; + border-top-color: #2e3338; +} +.popover.right > .arrow { + top: 50%; + left: -11px; + margin-top: -11px; + border-left-width: 0; + border-right-color: #666666; + border-right-color: rgba(0, 0, 0, 0.25); +} +.popover.right > .arrow:after { + content: " "; + left: 1px; + bottom: -10px; + border-left-width: 0; + border-right-color: #2e3338; +} +.popover.bottom > .arrow { + left: 50%; + margin-left: -11px; + border-top-width: 0; + border-bottom-color: #666666; + border-bottom-color: rgba(0, 0, 0, 0.25); + top: -11px; +} +.popover.bottom > .arrow:after { + content: " "; + top: 1px; + margin-left: -10px; + border-top-width: 0; + border-bottom-color: #2e3338; +} +.popover.left > .arrow { + top: 50%; + right: -11px; + margin-top: -11px; + border-right-width: 0; + border-left-color: #666666; + border-left-color: rgba(0, 0, 0, 0.25); +} +.popover.left > .arrow:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: #2e3338; + bottom: -10px; +} +.carousel { + position: relative; +} +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; +} +.carousel-inner > .item { + display: none; + position: relative; + -webkit-transition: 0.6s ease-in-out left; + -o-transition: 0.6s ease-in-out left; + transition: 0.6s ease-in-out left; +} +.carousel-inner > .item > img, +.carousel-inner > .item > a > img { + line-height: 1; +} +@media all and (transform-3d), (-webkit-transform-3d) { + .carousel-inner > .item { + -webkit-transition: -webkit-transform 0.6s ease-in-out; + -o-transition: -o-transform 0.6s ease-in-out; + transition: transform 0.6s ease-in-out; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000px; + perspective: 1000px; + } + .carousel-inner > .item.next, + .carousel-inner > .item.active.right { + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + left: 0; + } + .carousel-inner > .item.prev, + .carousel-inner > .item.active.left { + -webkit-transform: translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0); + left: 0; + } + .carousel-inner > .item.next.left, + .carousel-inner > .item.prev.right, + .carousel-inner > .item.active { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + left: 0; + } +} +.carousel-inner > .active, +.carousel-inner > .next, +.carousel-inner > .prev { + display: block; +} +.carousel-inner > .active { + left: 0; +} +.carousel-inner > .next, +.carousel-inner > .prev { + position: absolute; + top: 0; + width: 100%; +} +.carousel-inner > .next { + left: 100%; +} +.carousel-inner > .prev { + left: -100%; +} +.carousel-inner > .next.left, +.carousel-inner > .prev.right { + left: 0; +} +.carousel-inner > .active.left { + left: -100%; +} +.carousel-inner > .active.right { + left: 100%; +} +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 15%; + opacity: 0.5; + filter: alpha(opacity=50); + font-size: 20px; + color: #ffffff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); + background-color: rgba(0, 0, 0, 0); +} +.carousel-control.left { + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001))); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); +} +.carousel-control.right { + left: auto; + right: 0; + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5))); + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); +} +.carousel-control:hover, +.carousel-control:focus { + outline: 0; + color: #ffffff; + text-decoration: none; + opacity: 0.9; + filter: alpha(opacity=90); +} +.carousel-control .icon-prev, +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-left, +.carousel-control .glyphicon-chevron-right { + position: absolute; + top: 50%; + margin-top: -10px; + z-index: 5; + display: inline-block; +} +.carousel-control .icon-prev, +.carousel-control .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; +} +.carousel-control .icon-next, +.carousel-control .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; +} +.carousel-control .icon-prev, +.carousel-control .icon-next { + width: 20px; + height: 20px; + line-height: 1; + font-family: serif; +} +.carousel-control .icon-prev:before { + content: '\2039'; +} +.carousel-control .icon-next:before { + content: '\203a'; +} +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; +} +.carousel-indicators li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + border: 1px solid #ffffff; + border-radius: 10px; + cursor: pointer; + background-color: #000 \9; + background-color: rgba(0, 0, 0, 0); +} +.carousel-indicators .active { + margin: 0; + width: 12px; + height: 12px; + background-color: #ffffff; +} +.carousel-caption { + position: absolute; + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: #ffffff; + text-align: center; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); +} +.carousel-caption .btn { + text-shadow: none; +} +@media screen and (min-width: 768px) { + .carousel-control .glyphicon-chevron-left, + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-prev, + .carousel-control .icon-next { + width: 30px; + height: 30px; + margin-top: -10px; + font-size: 30px; + } + .carousel-control .glyphicon-chevron-left, + .carousel-control .icon-prev { + margin-left: -10px; + } + .carousel-control .glyphicon-chevron-right, + .carousel-control .icon-next { + margin-right: -10px; + } + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + .carousel-indicators { + bottom: 20px; + } +} +.clearfix:before, +.clearfix:after, +.dl-horizontal dd:before, +.dl-horizontal dd:after, +.container:before, +.container:after, +.container-fluid:before, +.container-fluid:after, +.row:before, +.row:after, +.form-horizontal .form-group:before, +.form-horizontal .form-group:after, +.btn-toolbar:before, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:before, +.btn-group-vertical > .btn-group:after, +.nav:before, +.nav:after, +.navbar:before, +.navbar:after, +.navbar-header:before, +.navbar-header:after, +.navbar-collapse:before, +.navbar-collapse:after, +.pager:before, +.pager:after, +.panel-body:before, +.panel-body:after, +.modal-header:before, +.modal-header:after, +.modal-footer:before, +.modal-footer:after { + content: " "; + display: table; +} +.clearfix:after, +.dl-horizontal dd:after, +.container:after, +.container-fluid:after, +.row:after, +.form-horizontal .form-group:after, +.btn-toolbar:after, +.btn-group-vertical > .btn-group:after, +.nav:after, +.navbar:after, +.navbar-header:after, +.navbar-collapse:after, +.pager:after, +.panel-body:after, +.modal-header:after, +.modal-footer:after { + clear: both; +} +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} +.hidden { + display: none !important; +} +.affix { + position: fixed; +} +@-ms-viewport { + width: device-width; +} +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + display: none !important; +} +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} +@media (max-width: 767px) { + .visible-xs { + display: block !important; + } + table.visible-xs { + display: table !important; + } + tr.visible-xs { + display: table-row !important; + } + th.visible-xs, + td.visible-xs { + display: table-cell !important; + } +} +@media (max-width: 767px) { + .visible-xs-block { + display: block !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline { + display: inline !important; + } +} +@media (max-width: 767px) { + .visible-xs-inline-block { + display: inline-block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm { + display: block !important; + } + table.visible-sm { + display: table !important; + } + tr.visible-sm { + display: table-row !important; + } + th.visible-sm, + td.visible-sm { + display: table-cell !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-block { + display: block !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline { + display: inline !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .visible-sm-inline-block { + display: inline-block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md { + display: block !important; + } + table.visible-md { + display: table !important; + } + tr.visible-md { + display: table-row !important; + } + th.visible-md, + td.visible-md { + display: table-cell !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-block { + display: block !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline { + display: inline !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .visible-md-inline-block { + display: inline-block !important; + } +} +@media (min-width: 1200px) { + .visible-lg { + display: block !important; + } + table.visible-lg { + display: table !important; + } + tr.visible-lg { + display: table-row !important; + } + th.visible-lg, + td.visible-lg { + display: table-cell !important; + } +} +@media (min-width: 1200px) { + .visible-lg-block { + display: block !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline { + display: inline !important; + } +} +@media (min-width: 1200px) { + .visible-lg-inline-block { + display: inline-block !important; + } +} +@media (max-width: 767px) { + .hidden-xs { + display: none !important; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none !important; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none !important; + } +} +@media (min-width: 1200px) { + .hidden-lg { + display: none !important; + } +} +.visible-print { + display: none !important; +} +@media print { + .visible-print { + display: block !important; + } + table.visible-print { + display: table !important; + } + tr.visible-print { + display: table-row !important; + } + th.visible-print, + td.visible-print { + display: table-cell !important; + } +} +.visible-print-block { + display: none !important; +} +@media print { + .visible-print-block { + display: block !important; + } +} +.visible-print-inline { + display: none !important; +} +@media print { + .visible-print-inline { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; +} +@media print { + .visible-print-inline-block { + display: inline-block !important; + } +} +@media print { + .hidden-print { + display: none !important; + } +} +.navbar { + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; + border: 1px solid rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} +.navbar .navbar-nav > li > a { + border-right: 1px solid rgba(0, 0, 0, 0.2); + border-left: 1px solid rgba(255, 255, 255, 0.1); +} +.navbar .navbar-nav > li > a:hover { + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; + border-left-color: transparent; +} +.navbar-inverse { + background-image: -webkit-linear-gradient(#8a9196, #7a8288 60%, #70787d); + background-image: -o-linear-gradient(#8a9196, #7a8288 60%, #70787d); + background-image: -webkit-gradient(linear, left top, left bottom, from(#8a9196), color-stop(60%, #7a8288), to(#70787d)); + background-image: linear-gradient(#8a9196, #7a8288 60%, #70787d); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8a9196', endColorstr='#ff70787d', GradientType=0); + -webkit-filter: none; + filter: none; +} +.navbar-inverse .badge { + background-color: #5d6368; +} +.navbar-inverse .navbar-nav > li > a:hover { + background-image: -webkit-linear-gradient(#404448, #4e5458 40%, #53595d); + background-image: -o-linear-gradient(#404448, #4e5458 40%, #53595d); + background-image: -webkit-gradient(linear, left top, left bottom, from(#404448), color-stop(40%, #4e5458), to(#53595d)); + background-image: linear-gradient(#404448, #4e5458 40%, #53595d); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff404448', endColorstr='#ff53595d', GradientType=0); + -webkit-filter: none; + filter: none; +} +.navbar .nav .open > a { + border-color: transparent; +} +.navbar-nav > li.active > a { + border-left-color: transparent; +} +.navbar-form { + margin-left: 5px; + margin-right: 5px; +} +.btn, +.btn:hover { + border-color: rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} +.btn-default { + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-default:hover { + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-primary { + background-image: -webkit-linear-gradient(#8a9196, #7a8288 60%, #70787d); + background-image: -o-linear-gradient(#8a9196, #7a8288 60%, #70787d); + background-image: -webkit-gradient(linear, left top, left bottom, from(#8a9196), color-stop(60%, #7a8288), to(#70787d)); + background-image: linear-gradient(#8a9196, #7a8288 60%, #70787d); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8a9196', endColorstr='#ff70787d', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-primary:hover { + background-image: -webkit-linear-gradient(#404448, #4e5458 40%, #53595d); + background-image: -o-linear-gradient(#404448, #4e5458 40%, #53595d); + background-image: -webkit-gradient(linear, left top, left bottom, from(#404448), color-stop(40%, #4e5458), to(#53595d)); + background-image: linear-gradient(#404448, #4e5458 40%, #53595d); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff404448', endColorstr='#ff53595d', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-success { + background-image: -webkit-linear-gradient(#78cc78, #62c462 60%, #53be53); + background-image: -o-linear-gradient(#78cc78, #62c462 60%, #53be53); + background-image: -webkit-gradient(linear, left top, left bottom, from(#78cc78), color-stop(60%, #62c462), to(#53be53)); + background-image: linear-gradient(#78cc78, #62c462 60%, #53be53); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff78cc78', endColorstr='#ff53be53', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-success:hover { + background-image: -webkit-linear-gradient(#2f7d2f, #379337 40%, #3a9a3a); + background-image: -o-linear-gradient(#2f7d2f, #379337 40%, #3a9a3a); + background-image: -webkit-gradient(linear, left top, left bottom, from(#2f7d2f), color-stop(40%, #379337), to(#3a9a3a)); + background-image: linear-gradient(#2f7d2f, #379337 40%, #3a9a3a); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f7d2f', endColorstr='#ff3a9a3a', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-info { + background-image: -webkit-linear-gradient(#74cae3, #5bc0de 60%, #4ab9db); + background-image: -o-linear-gradient(#74cae3, #5bc0de 60%, #4ab9db); + background-image: -webkit-gradient(linear, left top, left bottom, from(#74cae3), color-stop(60%, #5bc0de), to(#4ab9db)); + background-image: linear-gradient(#74cae3, #5bc0de 60%, #4ab9db); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff74cae3', endColorstr='#ff4ab9db', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-info:hover { + background-image: -webkit-linear-gradient(#20829f, #2596b8 40%, #279dc1); + background-image: -o-linear-gradient(#20829f, #2596b8 40%, #279dc1); + background-image: -webkit-gradient(linear, left top, left bottom, from(#20829f), color-stop(40%, #2596b8), to(#279dc1)); + background-image: linear-gradient(#20829f, #2596b8 40%, #279dc1); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff20829f', endColorstr='#ff279dc1', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-warning { + background-image: -webkit-linear-gradient(#faa123, #f89406 60%, #e48806); + background-image: -o-linear-gradient(#faa123, #f89406 60%, #e48806); + background-image: -webkit-gradient(linear, left top, left bottom, from(#faa123), color-stop(60%, #f89406), to(#e48806)); + background-image: linear-gradient(#faa123, #f89406 60%, #e48806); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffaa123', endColorstr='#ffe48806', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-warning:hover { + background-image: -webkit-linear-gradient(#804d03, #9e5f04 40%, #a86404); + background-image: -o-linear-gradient(#804d03, #9e5f04 40%, #a86404); + background-image: -webkit-gradient(linear, left top, left bottom, from(#804d03), color-stop(40%, #9e5f04), to(#a86404)); + background-image: linear-gradient(#804d03, #9e5f04 40%, #a86404); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff804d03', endColorstr='#ffa86404', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-danger { + background-image: -webkit-linear-gradient(#f17a77, #ee5f5b 60%, #ec4d49); + background-image: -o-linear-gradient(#f17a77, #ee5f5b 60%, #ec4d49); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f17a77), color-stop(60%, #ee5f5b), to(#ec4d49)); + background-image: linear-gradient(#f17a77, #ee5f5b 60%, #ec4d49); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff17a77', endColorstr='#ffec4d49', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-danger:hover { + background-image: -webkit-linear-gradient(#bb1813, #d71c16 40%, #e01d17); + background-image: -o-linear-gradient(#bb1813, #d71c16 40%, #e01d17); + background-image: -webkit-gradient(linear, left top, left bottom, from(#bb1813), color-stop(40%, #d71c16), to(#e01d17)); + background-image: linear-gradient(#bb1813, #d71c16 40%, #e01d17); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbb1813', endColorstr='#ffe01d17', GradientType=0); + -webkit-filter: none; + filter: none; +} +.btn-link, +.btn-link:hover { + border-color: transparent; +} +h1, +h2, +h3, +h4, +h5, +h6 { + text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3); +} +.text-primary, +.text-primary:hover { + color: #7a8288; +} +.text-success, +.text-success:hover { + color: #62c462; +} +.text-danger, +.text-danger:hover { + color: #ee5f5b; +} +.text-warning, +.text-warning:hover { + color: #f89406; +} +.text-info, +.text-info:hover { + color: #5bc0de; +} +.table .success, +.table .warning, +.table .danger, +.table .info { + color: #fff; +} +.table-bordered tbody tr.success td, +.table-bordered tbody tr.warning td, +.table-bordered tbody tr.danger td, +.table-bordered tbody tr.success:hover td, +.table-bordered tbody tr.warning:hover td, +.table-bordered tbody tr.danger:hover td { + border-color: #1c1e22; +} +.table-responsive > .table { + background-color: #2e3338; +} +input, +textarea { + color: #272b30; +} +.has-warning .help-block, +.has-warning .control-label, +.has-warning .radio, +.has-warning .checkbox, +.has-warning .radio-inline, +.has-warning .checkbox-inline, +.has-warning.radio label, +.has-warning.checkbox label, +.has-warning.radio-inline label, +.has-warning.checkbox-inline label, +.has-warning .form-control-feedback { + color: #f89406; +} +.has-warning .form-control, +.has-warning .form-control:focus { + border-color: #f89406; +} +.has-warning .input-group-addon { + background-color: #3a3f44; + border-color: rgba(0, 0, 0, 0.6); +} +.has-error .help-block, +.has-error .control-label, +.has-error .radio, +.has-error .checkbox, +.has-error .radio-inline, +.has-error .checkbox-inline, +.has-error.radio label, +.has-error.checkbox label, +.has-error.radio-inline label, +.has-error.checkbox-inline label, +.has-error .form-control-feedback { + color: #ee5f5b; +} +.has-error .form-control, +.has-error .form-control:focus { + border-color: #ee5f5b; +} +.has-error .input-group-addon { + background-color: #3a3f44; + border-color: rgba(0, 0, 0, 0.6); +} +.has-success .help-block, +.has-success .control-label, +.has-success .radio, +.has-success .checkbox, +.has-success .radio-inline, +.has-success .checkbox-inline, +.has-success.radio label, +.has-success.checkbox label, +.has-success.radio-inline label, +.has-success.checkbox-inline label, +.has-success .form-control-feedback { + color: #62c462; +} +.has-success .form-control, +.has-success .form-control:focus { + border-color: #62c462; +} +.has-success .input-group-addon { + background-color: #3a3f44; + border-color: rgba(0, 0, 0, 0.6); +} +legend { + color: #fff; +} +.input-group-addon { + background-color: #3a3f44; + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + color: #ffffff; +} +.nav .open > a, +.nav .open > a:hover, +.nav .open > a:focus { + border-color: rgba(0, 0, 0, 0.6); +} +.nav-pills > li > a { + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; + border: 1px solid rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} +.nav-pills > li > a:hover { + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; + border: 1px solid rgba(0, 0, 0, 0.6); +} +.nav-pills > li.active > a, +.nav-pills > li.active > a:hover { + background-color: none; + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; + border: 1px solid rgba(0, 0, 0, 0.6); +} +.nav-pills > li.disabled > a, +.nav-pills > li.disabled > a:hover { + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; +} +.pagination > li > a, +.pagination > li > span { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; +} +.pagination > li > a:hover, +.pagination > li > span:hover { + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; +} +.pagination > li.active > a, +.pagination > li.active > span { + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; +} +.pagination > li.disabled > a, +.pagination > li.disabled > a:hover, +.pagination > li.disabled > span, +.pagination > li.disabled > span:hover { + background-color: transparent; + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; +} +.pager > li > a { + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); +} +.pager > li > a:hover { + background-image: -webkit-linear-gradient(#020202, #101112 40%, #141618); + background-image: -o-linear-gradient(#020202, #101112 40%, #141618); + background-image: -webkit-gradient(linear, left top, left bottom, from(#020202), color-stop(40%, #101112), to(#141618)); + background-image: linear-gradient(#020202, #101112 40%, #141618); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff020202', endColorstr='#ff141618', GradientType=0); + -webkit-filter: none; + filter: none; +} +.pager > li.disabled > a, +.pager > li.disabled > a:hover { + background-color: transparent; + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; +} +.breadcrumb { + border: 1px solid rgba(0, 0, 0, 0.6); + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); + background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539); + background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539)); + background-image: linear-gradient(#484e55, #3a3f44 60%, #313539); + background-repeat: no-repeat; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0); + -webkit-filter: none; + filter: none; +} +.alert .alert-link, +.alert a { + color: #fff; + text-decoration: underline; +} +.alert .close { + color: #000000; + text-decoration: none; +} +a.thumbnail:hover, +a.thumbnail:focus, +a.thumbnail.active { + border-color: #0c0d0e; +} +a.list-group-item.active, +a.list-group-item.active:hover, +a.list-group-item.active:focus { + border-color: rgba(0, 0, 0, 0.6); +} +a.list-group-item-success.active { + background-color: #62c462; +} +a.list-group-item-success.active:hover, +a.list-group-item-success.active:focus { + background-color: #4fbd4f; +} +a.list-group-item-warning.active { + background-color: #f89406; +} +a.list-group-item-warning.active:hover, +a.list-group-item-warning.active:focus { + background-color: #df8505; +} +a.list-group-item-danger.active { + background-color: #ee5f5b; +} +a.list-group-item-danger.active:hover, +a.list-group-item-danger.active:focus { + background-color: #ec4844; +} +.jumbotron { + border: 1px solid rgba(0, 0, 0, 0.6); +} +.panel-primary .panel-heading, +.panel-success .panel-heading, +.panel-danger .panel-heading, +.panel-warning .panel-heading, +.panel-info .panel-heading { + border-color: #000; +} diff --git a/debian/missing-sources/c3.css b/debian/missing-sources/c3.css new file mode 100644 index 00000000..5de1edfa --- /dev/null +++ b/debian/missing-sources/c3.css @@ -0,0 +1,163 @@ +/*-- Chart --*/ +.c3 svg { + font: 10px sans-serif; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } + +.c3 path, .c3 line { + fill: none; + stroke: #000; } + +.c3 text { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } + +.c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path { + shape-rendering: crispEdges; } + +.c3-chart-arc path { + stroke: #fff; } + +.c3-chart-arc text { + fill: #fff; + font-size: 13px; } + +/*-- Axis --*/ +/*-- Grid --*/ +.c3-grid line { + stroke: #aaa; } + +.c3-grid text { + fill: #aaa; } + +.c3-xgrid, .c3-ygrid { + stroke-dasharray: 3 3; } + +/*-- Text on Chart --*/ +.c3-text.c3-empty { + fill: #808080; + font-size: 2em; } + +/*-- Line --*/ +.c3-line { + stroke-width: 1px; } + +/*-- Point --*/ +.c3-circle._expanded_ { + stroke-width: 1px; + stroke: white; } + +.c3-selected-circle { + fill: white; + stroke-width: 2px; } + +/*-- Bar --*/ +.c3-bar { + stroke-width: 0; } + +.c3-bar._expanded_ { + fill-opacity: 0.75; } + +/*-- Focus --*/ +.c3-target.c3-focused { + opacity: 1; } + +.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step { + stroke-width: 2px; } + +.c3-target.c3-defocused { + opacity: 0.3 !important; } + +/*-- Region --*/ +.c3-region { + fill: steelblue; + fill-opacity: 0.1; } + +/*-- Brush --*/ +.c3-brush .extent { + fill-opacity: 0.1; } + +/*-- Select - Drag --*/ +/*-- Legend --*/ +.c3-legend-item { + font-size: 12px; } + +.c3-legend-item-hidden { + opacity: 0.15; } + +.c3-legend-background { + opacity: 0.75; + fill: white; + stroke: lightgray; + stroke-width: 1; } + +/*-- Title --*/ +.c3-title { + font: 14px sans-serif; } + +/*-- Tooltip --*/ +.c3-tooltip-container { + z-index: 10; } + +.c3-tooltip { + border-collapse: collapse; + border-spacing: 0; + background-color: #fff; + empty-cells: show; + -webkit-box-shadow: 7px 7px 12px -9px #777777; + -moz-box-shadow: 7px 7px 12px -9px #777777; + box-shadow: 7px 7px 12px -9px #777777; + opacity: 0.9; } + +.c3-tooltip tr { + border: 1px solid #CCC; } + +.c3-tooltip th { + background-color: #aaa; + font-size: 14px; + padding: 2px 5px; + text-align: left; + color: #FFF; } + +.c3-tooltip td { + font-size: 13px; + padding: 3px 6px; + background-color: #fff; + border-left: 1px dotted #999; } + +.c3-tooltip td > span { + display: inline-block; + width: 10px; + height: 10px; + margin-right: 6px; } + +.c3-tooltip td.value { + text-align: right; } + +/*-- Area --*/ +.c3-area { + stroke-width: 0; + opacity: 0.2; } + +/*-- Arc --*/ +.c3-chart-arcs-title { + dominant-baseline: middle; + font-size: 1.3em; } + +.c3-chart-arcs .c3-chart-arcs-background { + fill: #e0e0e0; + stroke: none; } + +.c3-chart-arcs .c3-chart-arcs-gauge-unit { + fill: #000; + font-size: 16px; } + +.c3-chart-arcs .c3-chart-arcs-gauge-max { + fill: #777; } + +.c3-chart-arcs .c3-chart-arcs-gauge-min { + fill: #777; } + +.c3-chart-arc .c3-gauge-value { + fill: #000; + /* font-size: 28px !important;*/ } diff --git a/debian/missing-sources/c3.js b/debian/missing-sources/c3.js new file mode 100644 index 00000000..aca979c0 --- /dev/null +++ b/debian/missing-sources/c3.js @@ -0,0 +1,7315 @@ +(function (window) { + 'use strict'; + + /*global define, module, exports, require */ + + var c3 = { version: "0.4.11-rc4" }; + + var c3_chart_fn, + c3_chart_internal_fn, + c3_chart_internal_axis_fn; + + function API(owner) { + this.owner = owner; + } + + function inherit(base, derived) { + + if (Object.create) { + derived.prototype = Object.create(base.prototype); + } else { + var f = function f() {}; + f.prototype = base.prototype; + derived.prototype = new f(); + } + + derived.prototype.constructor = derived; + + return derived; + } + + function Chart(config) { + var $$ = this.internal = new ChartInternal(this); + $$.loadConfig(config); + + $$.beforeInit(config); + $$.init(); + $$.afterInit(config); + + // bind "this" to nested API + (function bindThis(fn, target, argThis) { + Object.keys(fn).forEach(function (key) { + target[key] = fn[key].bind(argThis); + if (Object.keys(fn[key]).length > 0) { + bindThis(fn[key], target[key], argThis); + } + }); + })(c3_chart_fn, this, this); + } + + function ChartInternal(api) { + var $$ = this; + $$.d3 = window.d3 ? window.d3 : typeof require !== 'undefined' ? require("d3") : undefined; + $$.api = api; + $$.config = $$.getDefaultConfig(); + $$.data = {}; + $$.cache = {}; + $$.axes = {}; + } + + c3.generate = function (config) { + return new Chart(config); + }; + + c3.chart = { + fn: Chart.prototype, + internal: { + fn: ChartInternal.prototype, + axis: { + fn: Axis.prototype + } + } + }; + c3_chart_fn = c3.chart.fn; + c3_chart_internal_fn = c3.chart.internal.fn; + c3_chart_internal_axis_fn = c3.chart.internal.axis.fn; + + c3_chart_internal_fn.beforeInit = function () { + // can do something + }; + c3_chart_internal_fn.afterInit = function () { + // can do something + }; + c3_chart_internal_fn.init = function () { + var $$ = this, config = $$.config; + + $$.initParams(); + + if (config.data_url) { + $$.convertUrlToData(config.data_url, config.data_mimeType, config.data_keys, $$.initWithData); + } + else if (config.data_json) { + $$.initWithData($$.convertJsonToData(config.data_json, config.data_keys)); + } + else if (config.data_rows) { + $$.initWithData($$.convertRowsToData(config.data_rows)); + } + else if (config.data_columns) { + $$.initWithData($$.convertColumnsToData(config.data_columns)); + } + else { + throw Error('url or json or rows or columns is required.'); + } + }; + + c3_chart_internal_fn.initParams = function () { + var $$ = this, d3 = $$.d3, config = $$.config; + + // MEMO: clipId needs to be unique because it conflicts when multiple charts exist + $$.clipId = "c3-" + (+new Date()) + '-clip', + $$.clipIdForXAxis = $$.clipId + '-xaxis', + $$.clipIdForYAxis = $$.clipId + '-yaxis', + $$.clipIdForGrid = $$.clipId + '-grid', + $$.clipIdForSubchart = $$.clipId + '-subchart', + $$.clipPath = $$.getClipPath($$.clipId), + $$.clipPathForXAxis = $$.getClipPath($$.clipIdForXAxis), + $$.clipPathForYAxis = $$.getClipPath($$.clipIdForYAxis); + $$.clipPathForGrid = $$.getClipPath($$.clipIdForGrid), + $$.clipPathForSubchart = $$.getClipPath($$.clipIdForSubchart), + + $$.dragStart = null; + $$.dragging = false; + $$.flowing = false; + $$.cancelClick = false; + $$.mouseover = false; + $$.transiting = false; + + $$.color = $$.generateColor(); + $$.levelColor = $$.generateLevelColor(); + + $$.dataTimeFormat = config.data_xLocaltime ? d3.time.format : d3.time.format.utc; + $$.axisTimeFormat = config.axis_x_localtime ? d3.time.format : d3.time.format.utc; + $$.defaultAxisTimeFormat = $$.axisTimeFormat.multi([ + [".%L", function (d) { return d.getMilliseconds(); }], + [":%S", function (d) { return d.getSeconds(); }], + ["%I:%M", function (d) { return d.getMinutes(); }], + ["%I %p", function (d) { return d.getHours(); }], + ["%-m/%-d", function (d) { return d.getDay() && d.getDate() !== 1; }], + ["%-m/%-d", function (d) { return d.getDate() !== 1; }], + ["%-m/%-d", function (d) { return d.getMonth(); }], + ["%Y/%-m/%-d", function () { return true; }] + ]); + + $$.hiddenTargetIds = []; + $$.hiddenLegendIds = []; + $$.focusedTargetIds = []; + $$.defocusedTargetIds = []; + + $$.xOrient = config.axis_rotated ? "left" : "bottom"; + $$.yOrient = config.axis_rotated ? (config.axis_y_inner ? "top" : "bottom") : (config.axis_y_inner ? "right" : "left"); + $$.y2Orient = config.axis_rotated ? (config.axis_y2_inner ? "bottom" : "top") : (config.axis_y2_inner ? "left" : "right"); + $$.subXOrient = config.axis_rotated ? "left" : "bottom"; + + $$.isLegendRight = config.legend_position === 'right'; + $$.isLegendInset = config.legend_position === 'inset'; + $$.isLegendTop = config.legend_inset_anchor === 'top-left' || config.legend_inset_anchor === 'top-right'; + $$.isLegendLeft = config.legend_inset_anchor === 'top-left' || config.legend_inset_anchor === 'bottom-left'; + $$.legendStep = 0; + $$.legendItemWidth = 0; + $$.legendItemHeight = 0; + + $$.currentMaxTickWidths = { + x: 0, + y: 0, + y2: 0 + }; + + $$.rotated_padding_left = 30; + $$.rotated_padding_right = config.axis_rotated && !config.axis_x_show ? 0 : 30; + $$.rotated_padding_top = 5; + + $$.withoutFadeIn = {}; + + $$.intervalForObserveInserted = undefined; + + $$.axes.subx = d3.selectAll([]); // needs when excluding subchart.js + }; + + c3_chart_internal_fn.initChartElements = function () { + if (this.initBar) { this.initBar(); } + if (this.initLine) { this.initLine(); } + if (this.initArc) { this.initArc(); } + if (this.initGauge) { this.initGauge(); } + if (this.initText) { this.initText(); } + }; + + c3_chart_internal_fn.initWithData = function (data) { + var $$ = this, d3 = $$.d3, config = $$.config; + var defs, main, binding = true; + + $$.axis = new Axis($$); + + if ($$.initPie) { $$.initPie(); } + if ($$.initBrush) { $$.initBrush(); } + if ($$.initZoom) { $$.initZoom(); } + + if (!config.bindto) { + $$.selectChart = d3.selectAll([]); + } + else if (typeof config.bindto.node === 'function') { + $$.selectChart = config.bindto; + } + else { + $$.selectChart = d3.select(config.bindto); + } + if ($$.selectChart.empty()) { + $$.selectChart = d3.select(document.createElement('div')).style('opacity', 0); + $$.observeInserted($$.selectChart); + binding = false; + } + $$.selectChart.html("").classed("c3", true); + + // Init data as targets + $$.data.xs = {}; + $$.data.targets = $$.convertDataToTargets(data); + + if (config.data_filter) { + $$.data.targets = $$.data.targets.filter(config.data_filter); + } + + // Set targets to hide if needed + if (config.data_hide) { + $$.addHiddenTargetIds(config.data_hide === true ? $$.mapToIds($$.data.targets) : config.data_hide); + } + if (config.legend_hide) { + $$.addHiddenLegendIds(config.legend_hide === true ? $$.mapToIds($$.data.targets) : config.legend_hide); + } + + // when gauge, hide legend // TODO: fix + if ($$.hasType('gauge')) { + config.legend_show = false; + } + + // Init sizes and scales + $$.updateSizes(); + $$.updateScales(); + + // Set domains for each scale + $$.x.domain(d3.extent($$.getXDomain($$.data.targets))); + $$.y.domain($$.getYDomain($$.data.targets, 'y')); + $$.y2.domain($$.getYDomain($$.data.targets, 'y2')); + $$.subX.domain($$.x.domain()); + $$.subY.domain($$.y.domain()); + $$.subY2.domain($$.y2.domain()); + + // Save original x domain for zoom update + $$.orgXDomain = $$.x.domain(); + + // Set initialized scales to brush and zoom + if ($$.brush) { $$.brush.scale($$.subX); } + if (config.zoom_enabled) { $$.zoom.scale($$.x); } + + /*-- Basic Elements --*/ + + // Define svgs + $$.svg = $$.selectChart.append("svg") + .style("overflow", "hidden") + .on('mouseenter', function () { return config.onmouseover.call($$); }) + .on('mouseleave', function () { return config.onmouseout.call($$); }); + + if ($$.config.svg_classname) { + $$.svg.attr('class', $$.config.svg_classname); + } + + // Define defs + defs = $$.svg.append("defs"); + $$.clipChart = $$.appendClip(defs, $$.clipId); + $$.clipXAxis = $$.appendClip(defs, $$.clipIdForXAxis); + $$.clipYAxis = $$.appendClip(defs, $$.clipIdForYAxis); + $$.clipGrid = $$.appendClip(defs, $$.clipIdForGrid); + $$.clipSubchart = $$.appendClip(defs, $$.clipIdForSubchart); + $$.updateSvgSize(); + + // Define regions + main = $$.main = $$.svg.append("g").attr("transform", $$.getTranslate('main')); + + if ($$.initSubchart) { $$.initSubchart(); } + if ($$.initTooltip) { $$.initTooltip(); } + if ($$.initLegend) { $$.initLegend(); } + if ($$.initTitle) { $$.initTitle(); } + + /*-- Main Region --*/ + + // text when empty + main.append("text") + .attr("class", CLASS.text + ' ' + CLASS.empty) + .attr("text-anchor", "middle") // horizontal centering of text at x position in all browsers. + .attr("dominant-baseline", "middle"); // vertical centering of text at y position in all browsers, except IE. + + // Regions + $$.initRegion(); + + // Grids + $$.initGrid(); + + // Define g for chart area + main.append('g') + .attr("clip-path", $$.clipPath) + .attr('class', CLASS.chart); + + // Grid lines + if (config.grid_lines_front) { $$.initGridLines(); } + + // Cover whole with rects for events + $$.initEventRect(); + + // Define g for chart + $$.initChartElements(); + + // if zoom privileged, insert rect to forefront + // TODO: is this needed? + main.insert('rect', config.zoom_privileged ? null : 'g.' + CLASS.regions) + .attr('class', CLASS.zoomRect) + .attr('width', $$.width) + .attr('height', $$.height) + .style('opacity', 0) + .on("dblclick.zoom", null); + + // Set default extent if defined + if (config.axis_x_extent) { $$.brush.extent($$.getDefaultExtent()); } + + // Add Axis + $$.axis.init(); + + // Set targets + $$.updateTargets($$.data.targets); + + // Draw with targets + if (binding) { + $$.updateDimension(); + $$.config.oninit.call($$); + $$.redraw({ + withTransition: false, + withTransform: true, + withUpdateXDomain: true, + withUpdateOrgXDomain: true, + withTransitionForAxis: false + }); + } + + // Bind resize event + $$.bindResize(); + + // export element of the chart + $$.api.element = $$.selectChart.node(); + }; + + c3_chart_internal_fn.smoothLines = function (el, type) { + var $$ = this; + if (type === 'grid') { + el.each(function () { + var g = $$.d3.select(this), + x1 = g.attr('x1'), + x2 = g.attr('x2'), + y1 = g.attr('y1'), + y2 = g.attr('y2'); + g.attr({ + 'x1': Math.ceil(x1), + 'x2': Math.ceil(x2), + 'y1': Math.ceil(y1), + 'y2': Math.ceil(y2) + }); + }); + } + }; + + + c3_chart_internal_fn.updateSizes = function () { + var $$ = this, config = $$.config; + var legendHeight = $$.legend ? $$.getLegendHeight() : 0, + legendWidth = $$.legend ? $$.getLegendWidth() : 0, + legendHeightForBottom = $$.isLegendRight || $$.isLegendInset ? 0 : legendHeight, + hasArc = $$.hasArcType(), + xAxisHeight = config.axis_rotated || hasArc ? 0 : $$.getHorizontalAxisHeight('x'), + subchartHeight = config.subchart_show && !hasArc ? (config.subchart_size_height + xAxisHeight) : 0; + + $$.currentWidth = $$.getCurrentWidth(); + $$.currentHeight = $$.getCurrentHeight(); + + // for main + $$.margin = config.axis_rotated ? { + top: $$.getHorizontalAxisHeight('y2') + $$.getCurrentPaddingTop(), + right: hasArc ? 0 : $$.getCurrentPaddingRight(), + bottom: $$.getHorizontalAxisHeight('y') + legendHeightForBottom + $$.getCurrentPaddingBottom(), + left: subchartHeight + (hasArc ? 0 : $$.getCurrentPaddingLeft()) + } : { + top: 4 + $$.getCurrentPaddingTop(), // for top tick text + right: hasArc ? 0 : $$.getCurrentPaddingRight(), + bottom: xAxisHeight + subchartHeight + legendHeightForBottom + $$.getCurrentPaddingBottom(), + left: hasArc ? 0 : $$.getCurrentPaddingLeft() + }; + + // for subchart + $$.margin2 = config.axis_rotated ? { + top: $$.margin.top, + right: NaN, + bottom: 20 + legendHeightForBottom, + left: $$.rotated_padding_left + } : { + top: $$.currentHeight - subchartHeight - legendHeightForBottom, + right: NaN, + bottom: xAxisHeight + legendHeightForBottom, + left: $$.margin.left + }; + + // for legend + $$.margin3 = { + top: 0, + right: NaN, + bottom: 0, + left: 0 + }; + if ($$.updateSizeForLegend) { $$.updateSizeForLegend(legendHeight, legendWidth); } + + $$.width = $$.currentWidth - $$.margin.left - $$.margin.right; + $$.height = $$.currentHeight - $$.margin.top - $$.margin.bottom; + if ($$.width < 0) { $$.width = 0; } + if ($$.height < 0) { $$.height = 0; } + + $$.width2 = config.axis_rotated ? $$.margin.left - $$.rotated_padding_left - $$.rotated_padding_right : $$.width; + $$.height2 = config.axis_rotated ? $$.height : $$.currentHeight - $$.margin2.top - $$.margin2.bottom; + if ($$.width2 < 0) { $$.width2 = 0; } + if ($$.height2 < 0) { $$.height2 = 0; } + + // for arc + $$.arcWidth = $$.width - ($$.isLegendRight ? legendWidth + 10 : 0); + $$.arcHeight = $$.height - ($$.isLegendRight ? 0 : 10); + if ($$.hasType('gauge')) { + $$.arcHeight += $$.height - $$.getGaugeLabelHeight(); + } + if ($$.updateRadius) { $$.updateRadius(); } + + if ($$.isLegendRight && hasArc) { + $$.margin3.left = $$.arcWidth / 2 + $$.radiusExpanded * 1.1; + } + }; + + c3_chart_internal_fn.updateTargets = function (targets) { + var $$ = this; + + /*-- Main --*/ + + //-- Text --// + $$.updateTargetsForText(targets); + + //-- Bar --// + $$.updateTargetsForBar(targets); + + //-- Line --// + $$.updateTargetsForLine(targets); + + //-- Arc --// + if ($$.hasArcType() && $$.updateTargetsForArc) { $$.updateTargetsForArc(targets); } + + /*-- Sub --*/ + + if ($$.updateTargetsForSubchart) { $$.updateTargetsForSubchart(targets); } + + // Fade-in each chart + $$.showTargets(); + }; + c3_chart_internal_fn.showTargets = function () { + var $$ = this; + $$.svg.selectAll('.' + CLASS.target).filter(function (d) { return $$.isTargetToShow(d.id); }) + .transition().duration($$.config.transition_duration) + .style("opacity", 1); + }; + + c3_chart_internal_fn.redraw = function (options, transitions) { + var $$ = this, main = $$.main, d3 = $$.d3, config = $$.config; + var areaIndices = $$.getShapeIndices($$.isAreaType), barIndices = $$.getShapeIndices($$.isBarType), lineIndices = $$.getShapeIndices($$.isLineType); + var withY, withSubchart, withTransition, withTransitionForExit, withTransitionForAxis, + withTransform, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain, withLegend, + withEventRect, withDimension, withUpdateXAxis; + var hideAxis = $$.hasArcType(); + var drawArea, drawBar, drawLine, xForText, yForText; + var duration, durationForExit, durationForAxis; + var waitForDraw, flow; + var targetsToShow = $$.filterTargetsToShow($$.data.targets), tickValues, i, intervalForCulling, xDomainForZoom; + var xv = $$.xv.bind($$), cx, cy; + + options = options || {}; + withY = getOption(options, "withY", true); + withSubchart = getOption(options, "withSubchart", true); + withTransition = getOption(options, "withTransition", true); + withTransform = getOption(options, "withTransform", false); + withUpdateXDomain = getOption(options, "withUpdateXDomain", false); + withUpdateOrgXDomain = getOption(options, "withUpdateOrgXDomain", false); + withTrimXDomain = getOption(options, "withTrimXDomain", true); + withUpdateXAxis = getOption(options, "withUpdateXAxis", withUpdateXDomain); + withLegend = getOption(options, "withLegend", false); + withEventRect = getOption(options, "withEventRect", true); + withDimension = getOption(options, "withDimension", true); + withTransitionForExit = getOption(options, "withTransitionForExit", withTransition); + withTransitionForAxis = getOption(options, "withTransitionForAxis", withTransition); + + duration = withTransition ? config.transition_duration : 0; + durationForExit = withTransitionForExit ? duration : 0; + durationForAxis = withTransitionForAxis ? duration : 0; + + transitions = transitions || $$.axis.generateTransitions(durationForAxis); + + // update legend and transform each g + if (withLegend && config.legend_show) { + $$.updateLegend($$.mapToIds($$.data.targets), options, transitions); + } else if (withDimension) { + // need to update dimension (e.g. axis.y.tick.values) because y tick values should change + // no need to update axis in it because they will be updated in redraw() + $$.updateDimension(true); + } + + // MEMO: needed for grids calculation + if ($$.isCategorized() && targetsToShow.length === 0) { + $$.x.domain([0, $$.axes.x.selectAll('.tick').size()]); + } + + if (targetsToShow.length) { + $$.updateXDomain(targetsToShow, withUpdateXDomain, withUpdateOrgXDomain, withTrimXDomain); + if (!config.axis_x_tick_values) { + tickValues = $$.axis.updateXAxisTickValues(targetsToShow); + } + } else { + $$.xAxis.tickValues([]); + $$.subXAxis.tickValues([]); + } + + if (config.zoom_rescale && !options.flow) { + xDomainForZoom = $$.x.orgDomain(); + } + + $$.y.domain($$.getYDomain(targetsToShow, 'y', xDomainForZoom)); + $$.y2.domain($$.getYDomain(targetsToShow, 'y2', xDomainForZoom)); + + if (!config.axis_y_tick_values && config.axis_y_tick_count) { + $$.yAxis.tickValues($$.axis.generateTickValues($$.y.domain(), config.axis_y_tick_count)); + } + if (!config.axis_y2_tick_values && config.axis_y2_tick_count) { + $$.y2Axis.tickValues($$.axis.generateTickValues($$.y2.domain(), config.axis_y2_tick_count)); + } + + // axes + $$.axis.redraw(transitions, hideAxis); + + // Update axis label + $$.axis.updateLabels(withTransition); + + // show/hide if manual culling needed + if ((withUpdateXDomain || withUpdateXAxis) && targetsToShow.length) { + if (config.axis_x_tick_culling && tickValues) { + for (i = 1; i < tickValues.length; i++) { + if (tickValues.length / i < config.axis_x_tick_culling_max) { + intervalForCulling = i; + break; + } + } + $$.svg.selectAll('.' + CLASS.axisX + ' .tick text').each(function (e) { + var index = tickValues.indexOf(e); + if (index >= 0) { + d3.select(this).style('display', index % intervalForCulling ? 'none' : 'block'); + } + }); + } else { + $$.svg.selectAll('.' + CLASS.axisX + ' .tick text').style('display', 'block'); + } + } + + // setup drawer - MEMO: these must be called after axis updated + drawArea = $$.generateDrawArea ? $$.generateDrawArea(areaIndices, false) : undefined; + drawBar = $$.generateDrawBar ? $$.generateDrawBar(barIndices) : undefined; + drawLine = $$.generateDrawLine ? $$.generateDrawLine(lineIndices, false) : undefined; + xForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, true); + yForText = $$.generateXYForText(areaIndices, barIndices, lineIndices, false); + + // Update sub domain + if (withY) { + $$.subY.domain($$.getYDomain(targetsToShow, 'y')); + $$.subY2.domain($$.getYDomain(targetsToShow, 'y2')); + } + + // xgrid focus + $$.updateXgridFocus(); + + // Data empty label positioning and text. + main.select("text." + CLASS.text + '.' + CLASS.empty) + .attr("x", $$.width / 2) + .attr("y", $$.height / 2) + .text(config.data_empty_label_text) + .transition() + .style('opacity', targetsToShow.length ? 0 : 1); + + // grid + $$.updateGrid(duration); + + // rect for regions + $$.updateRegion(duration); + + // bars + $$.updateBar(durationForExit); + + // lines, areas and cricles + $$.updateLine(durationForExit); + $$.updateArea(durationForExit); + $$.updateCircle(); + + // text + if ($$.hasDataLabel()) { + $$.updateText(durationForExit); + } + + // title + if ($$.redrawTitle) { $$.redrawTitle(); } + + // arc + if ($$.redrawArc) { $$.redrawArc(duration, durationForExit, withTransform); } + + // subchart + if ($$.redrawSubchart) { + $$.redrawSubchart(withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices); + } + + // circles for select + main.selectAll('.' + CLASS.selectedCircles) + .filter($$.isBarType.bind($$)) + .selectAll('circle') + .remove(); + + // event rects will redrawn when flow called + if (config.interaction_enabled && !options.flow && withEventRect) { + $$.redrawEventRect(); + if ($$.updateZoom) { $$.updateZoom(); } + } + + // update circleY based on updated parameters + $$.updateCircleY(); + + // generate circle x/y functions depending on updated params + cx = ($$.config.axis_rotated ? $$.circleY : $$.circleX).bind($$); + cy = ($$.config.axis_rotated ? $$.circleX : $$.circleY).bind($$); + + if (options.flow) { + flow = $$.generateFlow({ + targets: targetsToShow, + flow: options.flow, + duration: options.flow.duration, + drawBar: drawBar, + drawLine: drawLine, + drawArea: drawArea, + cx: cx, + cy: cy, + xv: xv, + xForText: xForText, + yForText: yForText + }); + } + + if ((duration || flow) && $$.isTabVisible()) { // Only use transition if tab visible. See #938. + // transition should be derived from one transition + d3.transition().duration(duration).each(function () { + var transitionsToWait = []; + + // redraw and gather transitions + [ + $$.redrawBar(drawBar, true), + $$.redrawLine(drawLine, true), + $$.redrawArea(drawArea, true), + $$.redrawCircle(cx, cy, true), + $$.redrawText(xForText, yForText, options.flow, true), + $$.redrawRegion(true), + $$.redrawGrid(true), + ].forEach(function (transitions) { + transitions.forEach(function (transition) { + transitionsToWait.push(transition); + }); + }); + + // Wait for end of transitions to call flow and onrendered callback + waitForDraw = $$.generateWait(); + transitionsToWait.forEach(function (t) { + waitForDraw.add(t); + }); + }) + .call(waitForDraw, function () { + if (flow) { + flow(); + } + if (config.onrendered) { + config.onrendered.call($$); + } + }); + } + else { + $$.redrawBar(drawBar); + $$.redrawLine(drawLine); + $$.redrawArea(drawArea); + $$.redrawCircle(cx, cy); + $$.redrawText(xForText, yForText, options.flow); + $$.redrawRegion(); + $$.redrawGrid(); + if (config.onrendered) { + config.onrendered.call($$); + } + } + + // update fadein condition + $$.mapToIds($$.data.targets).forEach(function (id) { + $$.withoutFadeIn[id] = true; + }); + }; + + c3_chart_internal_fn.updateAndRedraw = function (options) { + var $$ = this, config = $$.config, transitions; + options = options || {}; + // same with redraw + options.withTransition = getOption(options, "withTransition", true); + options.withTransform = getOption(options, "withTransform", false); + options.withLegend = getOption(options, "withLegend", false); + // NOT same with redraw + options.withUpdateXDomain = true; + options.withUpdateOrgXDomain = true; + options.withTransitionForExit = false; + options.withTransitionForTransform = getOption(options, "withTransitionForTransform", options.withTransition); + // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called) + $$.updateSizes(); + // MEMO: called in updateLegend in redraw if withLegend + if (!(options.withLegend && config.legend_show)) { + transitions = $$.axis.generateTransitions(options.withTransitionForAxis ? config.transition_duration : 0); + // Update scales + $$.updateScales(); + $$.updateSvgSize(); + // Update g positions + $$.transformAll(options.withTransitionForTransform, transitions); + } + // Draw with new sizes & scales + $$.redraw(options, transitions); + }; + c3_chart_internal_fn.redrawWithoutRescale = function () { + this.redraw({ + withY: false, + withSubchart: false, + withEventRect: false, + withTransitionForAxis: false + }); + }; + + c3_chart_internal_fn.isTimeSeries = function () { + return this.config.axis_x_type === 'timeseries'; + }; + c3_chart_internal_fn.isCategorized = function () { + return this.config.axis_x_type.indexOf('categor') >= 0; + }; + c3_chart_internal_fn.isCustomX = function () { + var $$ = this, config = $$.config; + return !$$.isTimeSeries() && (config.data_x || notEmpty(config.data_xs)); + }; + + c3_chart_internal_fn.isTimeSeriesY = function () { + return this.config.axis_y_type === 'timeseries'; + }; + + c3_chart_internal_fn.getTranslate = function (target) { + var $$ = this, config = $$.config, x, y; + if (target === 'main') { + x = asHalfPixel($$.margin.left); + y = asHalfPixel($$.margin.top); + } else if (target === 'context') { + x = asHalfPixel($$.margin2.left); + y = asHalfPixel($$.margin2.top); + } else if (target === 'legend') { + x = $$.margin3.left; + y = $$.margin3.top; + } else if (target === 'x') { + x = 0; + y = config.axis_rotated ? 0 : $$.height; + } else if (target === 'y') { + x = 0; + y = config.axis_rotated ? $$.height : 0; + } else if (target === 'y2') { + x = config.axis_rotated ? 0 : $$.width; + y = config.axis_rotated ? 1 : 0; + } else if (target === 'subx') { + x = 0; + y = config.axis_rotated ? 0 : $$.height2; + } else if (target === 'arc') { + x = $$.arcWidth / 2; + y = $$.arcHeight / 2; + } + return "translate(" + x + "," + y + ")"; + }; + c3_chart_internal_fn.initialOpacity = function (d) { + return d.value !== null && this.withoutFadeIn[d.id] ? 1 : 0; + }; + c3_chart_internal_fn.initialOpacityForCircle = function (d) { + return d.value !== null && this.withoutFadeIn[d.id] ? this.opacityForCircle(d) : 0; + }; + c3_chart_internal_fn.opacityForCircle = function (d) { + var opacity = this.config.point_show ? 1 : 0; + return isValue(d.value) ? (this.isScatterType(d) ? 0.5 : opacity) : 0; + }; + c3_chart_internal_fn.opacityForText = function () { + return this.hasDataLabel() ? 1 : 0; + }; + c3_chart_internal_fn.xx = function (d) { + return d ? this.x(d.x) : null; + }; + c3_chart_internal_fn.xv = function (d) { + var $$ = this, value = d.value; + if ($$.isTimeSeries()) { + value = $$.parseDate(d.value); + } + else if ($$.isCategorized() && typeof d.value === 'string') { + value = $$.config.axis_x_categories.indexOf(d.value); + } + return Math.ceil($$.x(value)); + }; + c3_chart_internal_fn.yv = function (d) { + var $$ = this, + yScale = d.axis && d.axis === 'y2' ? $$.y2 : $$.y; + return Math.ceil(yScale(d.value)); + }; + c3_chart_internal_fn.subxx = function (d) { + return d ? this.subX(d.x) : null; + }; + + c3_chart_internal_fn.transformMain = function (withTransition, transitions) { + var $$ = this, + xAxis, yAxis, y2Axis; + if (transitions && transitions.axisX) { + xAxis = transitions.axisX; + } else { + xAxis = $$.main.select('.' + CLASS.axisX); + if (withTransition) { xAxis = xAxis.transition(); } + } + if (transitions && transitions.axisY) { + yAxis = transitions.axisY; + } else { + yAxis = $$.main.select('.' + CLASS.axisY); + if (withTransition) { yAxis = yAxis.transition(); } + } + if (transitions && transitions.axisY2) { + y2Axis = transitions.axisY2; + } else { + y2Axis = $$.main.select('.' + CLASS.axisY2); + if (withTransition) { y2Axis = y2Axis.transition(); } + } + (withTransition ? $$.main.transition() : $$.main).attr("transform", $$.getTranslate('main')); + xAxis.attr("transform", $$.getTranslate('x')); + yAxis.attr("transform", $$.getTranslate('y')); + y2Axis.attr("transform", $$.getTranslate('y2')); + $$.main.select('.' + CLASS.chartArcs).attr("transform", $$.getTranslate('arc')); + }; + c3_chart_internal_fn.transformAll = function (withTransition, transitions) { + var $$ = this; + $$.transformMain(withTransition, transitions); + if ($$.config.subchart_show) { $$.transformContext(withTransition, transitions); } + if ($$.legend) { $$.transformLegend(withTransition); } + }; + + c3_chart_internal_fn.updateSvgSize = function () { + var $$ = this, + brush = $$.svg.select(".c3-brush .background"); + $$.svg.attr('width', $$.currentWidth).attr('height', $$.currentHeight); + $$.svg.selectAll(['#' + $$.clipId, '#' + $$.clipIdForGrid]).select('rect') + .attr('width', $$.width) + .attr('height', $$.height); + $$.svg.select('#' + $$.clipIdForXAxis).select('rect') + .attr('x', $$.getXAxisClipX.bind($$)) + .attr('y', $$.getXAxisClipY.bind($$)) + .attr('width', $$.getXAxisClipWidth.bind($$)) + .attr('height', $$.getXAxisClipHeight.bind($$)); + $$.svg.select('#' + $$.clipIdForYAxis).select('rect') + .attr('x', $$.getYAxisClipX.bind($$)) + .attr('y', $$.getYAxisClipY.bind($$)) + .attr('width', $$.getYAxisClipWidth.bind($$)) + .attr('height', $$.getYAxisClipHeight.bind($$)); + $$.svg.select('#' + $$.clipIdForSubchart).select('rect') + .attr('width', $$.width) + .attr('height', brush.size() ? brush.attr('height') : 0); + $$.svg.select('.' + CLASS.zoomRect) + .attr('width', $$.width) + .attr('height', $$.height); + // MEMO: parent div's height will be bigger than svg when <!DOCTYPE html> + $$.selectChart.style('max-height', $$.currentHeight + "px"); + }; + + + c3_chart_internal_fn.updateDimension = function (withoutAxis) { + var $$ = this; + if (!withoutAxis) { + if ($$.config.axis_rotated) { + $$.axes.x.call($$.xAxis); + $$.axes.subx.call($$.subXAxis); + } else { + $$.axes.y.call($$.yAxis); + $$.axes.y2.call($$.y2Axis); + } + } + $$.updateSizes(); + $$.updateScales(); + $$.updateSvgSize(); + $$.transformAll(false); + }; + + c3_chart_internal_fn.observeInserted = function (selection) { + var $$ = this, observer; + if (typeof MutationObserver === 'undefined') { + window.console.error("MutationObserver not defined."); + return; + } + observer= new MutationObserver(function (mutations) { + mutations.forEach(function (mutation) { + if (mutation.type === 'childList' && mutation.previousSibling) { + observer.disconnect(); + // need to wait for completion of load because size calculation requires the actual sizes determined after that completion + $$.intervalForObserveInserted = window.setInterval(function () { + // parentNode will NOT be null when completed + if (selection.node().parentNode) { + window.clearInterval($$.intervalForObserveInserted); + $$.updateDimension(); + if ($$.brush) { $$.brush.update(); } + $$.config.oninit.call($$); + $$.redraw({ + withTransform: true, + withUpdateXDomain: true, + withUpdateOrgXDomain: true, + withTransition: false, + withTransitionForTransform: false, + withLegend: true + }); + selection.transition().style('opacity', 1); + } + }, 10); + } + }); + }); + observer.observe(selection.node(), {attributes: true, childList: true, characterData: true}); + }; + + c3_chart_internal_fn.bindResize = function () { + var $$ = this, config = $$.config; + + $$.resizeFunction = $$.generateResize(); + + $$.resizeFunction.add(function () { + config.onresize.call($$); + }); + if (config.resize_auto) { + $$.resizeFunction.add(function () { + if ($$.resizeTimeout !== undefined) { + window.clearTimeout($$.resizeTimeout); + } + $$.resizeTimeout = window.setTimeout(function () { + delete $$.resizeTimeout; + $$.api.flush(); + }, 100); + }); + } + $$.resizeFunction.add(function () { + config.onresized.call($$); + }); + + if (window.attachEvent) { + window.attachEvent('onresize', $$.resizeFunction); + } else if (window.addEventListener) { + window.addEventListener('resize', $$.resizeFunction, false); + } else { + // fallback to this, if this is a very old browser + var wrapper = window.onresize; + if (!wrapper) { + // create a wrapper that will call all charts + wrapper = $$.generateResize(); + } else if (!wrapper.add || !wrapper.remove) { + // there is already a handler registered, make sure we call it too + wrapper = $$.generateResize(); + wrapper.add(window.onresize); + } + // add this graph to the wrapper, we will be removed if the user calls destroy + wrapper.add($$.resizeFunction); + window.onresize = wrapper; + } + }; + + c3_chart_internal_fn.generateResize = function () { + var resizeFunctions = []; + function callResizeFunctions() { + resizeFunctions.forEach(function (f) { + f(); + }); + } + callResizeFunctions.add = function (f) { + resizeFunctions.push(f); + }; + callResizeFunctions.remove = function (f) { + for (var i = 0; i < resizeFunctions.length; i++) { + if (resizeFunctions[i] === f) { + resizeFunctions.splice(i, 1); + break; + } + } + }; + return callResizeFunctions; + }; + + c3_chart_internal_fn.endall = function (transition, callback) { + var n = 0; + transition + .each(function () { ++n; }) + .each("end", function () { + if (!--n) { callback.apply(this, arguments); } + }); + }; + c3_chart_internal_fn.generateWait = function () { + var transitionsToWait = [], + f = function (transition, callback) { + var timer = setInterval(function () { + var done = 0; + transitionsToWait.forEach(function (t) { + if (t.empty()) { + done += 1; + return; + } + try { + t.transition(); + } catch (e) { + done += 1; + } + }); + if (done === transitionsToWait.length) { + clearInterval(timer); + if (callback) { callback(); } + } + }, 10); + }; + f.add = function (transition) { + transitionsToWait.push(transition); + }; + return f; + }; + + c3_chart_internal_fn.parseDate = function (date) { + var $$ = this, parsedDate; + if (date instanceof Date) { + parsedDate = date; + } else if (typeof date === 'string') { + parsedDate = $$.dataTimeFormat($$.config.data_xFormat).parse(date); + } else if (typeof date === 'number' && !isNaN(date)) { + parsedDate = new Date(+date); + } + if (!parsedDate || isNaN(+parsedDate)) { + window.console.error("Failed to parse x '" + date + "' to Date object"); + } + return parsedDate; + }; + + c3_chart_internal_fn.isTabVisible = function () { + var hidden; + if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support + hidden = "hidden"; + } else if (typeof document.mozHidden !== "undefined") { + hidden = "mozHidden"; + } else if (typeof document.msHidden !== "undefined") { + hidden = "msHidden"; + } else if (typeof document.webkitHidden !== "undefined") { + hidden = "webkitHidden"; + } + + return document[hidden] ? false : true; + }; + + c3_chart_internal_fn.getDefaultConfig = function () { + var config = { + bindto: '#chart', + svg_classname: undefined, + size_width: undefined, + size_height: undefined, + padding_left: undefined, + padding_right: undefined, + padding_top: undefined, + padding_bottom: undefined, + resize_auto: true, + zoom_enabled: false, + zoom_extent: undefined, + zoom_privileged: false, + zoom_rescale: false, + zoom_onzoom: function () {}, + zoom_onzoomstart: function () {}, + zoom_onzoomend: function () {}, + zoom_x_min: undefined, + zoom_x_max: undefined, + interaction_enabled: true, + onmouseover: function () {}, + onmouseout: function () {}, + onresize: function () {}, + onresized: function () {}, + oninit: function () {}, + onrendered: function () {}, + transition_duration: 350, + data_x: undefined, + data_xs: {}, + data_xFormat: '%Y-%m-%d', + data_xLocaltime: true, + data_xSort: true, + data_idConverter: function (id) { return id; }, + data_names: {}, + data_classes: {}, + data_groups: [], + data_axes: {}, + data_type: undefined, + data_types: {}, + data_labels: {}, + data_order: 'desc', + data_regions: {}, + data_color: undefined, + data_colors: {}, + data_hide: false, + data_filter: undefined, + data_selection_enabled: false, + data_selection_grouped: false, + data_selection_isselectable: function () { return true; }, + data_selection_multiple: true, + data_selection_draggable: false, + data_onclick: function () {}, + data_onmouseover: function () {}, + data_onmouseout: function () {}, + data_onselected: function () {}, + data_onunselected: function () {}, + data_url: undefined, + data_json: undefined, + data_rows: undefined, + data_columns: undefined, + data_mimeType: undefined, + data_keys: undefined, + // configuration for no plot-able data supplied. + data_empty_label_text: "", + // subchart + subchart_show: false, + subchart_size_height: 60, + subchart_axis_x_show: true, + subchart_onbrush: function () {}, + // color + color_pattern: [], + color_threshold: {}, + // legend + legend_show: true, + legend_hide: false, + legend_position: 'bottom', + legend_inset_anchor: 'top-left', + legend_inset_x: 10, + legend_inset_y: 0, + legend_inset_step: undefined, + legend_item_onclick: undefined, + legend_item_onmouseover: undefined, + legend_item_onmouseout: undefined, + legend_equally: false, + legend_padding: 0, + legend_item_tile_width: 10, + legend_item_tile_height: 10, + // axis + axis_rotated: false, + axis_x_show: true, + axis_x_type: 'indexed', + axis_x_localtime: true, + axis_x_categories: [], + axis_x_tick_centered: false, + axis_x_tick_format: undefined, + axis_x_tick_culling: {}, + axis_x_tick_culling_max: 10, + axis_x_tick_count: undefined, + axis_x_tick_fit: true, + axis_x_tick_values: null, + axis_x_tick_rotate: 0, + axis_x_tick_outer: true, + axis_x_tick_multiline: true, + axis_x_tick_width: null, + axis_x_max: undefined, + axis_x_min: undefined, + axis_x_padding: {}, + axis_x_height: undefined, + axis_x_extent: undefined, + axis_x_label: {}, + axis_y_show: true, + axis_y_type: undefined, + axis_y_max: undefined, + axis_y_min: undefined, + axis_y_inverted: false, + axis_y_center: undefined, + axis_y_inner: undefined, + axis_y_label: {}, + axis_y_tick_format: undefined, + axis_y_tick_outer: true, + axis_y_tick_values: null, + axis_y_tick_count: undefined, + axis_y_tick_time_value: undefined, + axis_y_tick_time_interval: undefined, + axis_y_padding: {}, + axis_y_default: undefined, + axis_y2_show: false, + axis_y2_max: undefined, + axis_y2_min: undefined, + axis_y2_inverted: false, + axis_y2_center: undefined, + axis_y2_inner: undefined, + axis_y2_label: {}, + axis_y2_tick_format: undefined, + axis_y2_tick_outer: true, + axis_y2_tick_values: null, + axis_y2_tick_count: undefined, + axis_y2_padding: {}, + axis_y2_default: undefined, + // grid + grid_x_show: false, + grid_x_type: 'tick', + grid_x_lines: [], + grid_y_show: false, + // not used + // grid_y_type: 'tick', + grid_y_lines: [], + grid_y_ticks: 10, + grid_focus_show: true, + grid_lines_front: true, + // point - point of each data + point_show: true, + point_r: 2.5, + point_sensitivity: 10, + point_focus_expand_enabled: true, + point_focus_expand_r: undefined, + point_select_r: undefined, + // line + line_connectNull: false, + line_step_type: 'step', + // bar + bar_width: undefined, + bar_width_ratio: 0.6, + bar_width_max: undefined, + bar_zerobased: true, + // area + area_zerobased: true, + // pie + pie_label_show: true, + pie_label_format: undefined, + pie_label_threshold: 0.05, + pie_expand: {}, + pie_expand_duration: 50, + // gauge + gauge_label_show: true, + gauge_label_format: undefined, + gauge_min: 0, + gauge_max: 100, + gauge_units: undefined, + gauge_width: undefined, + gauge_expand: {}, + gauge_expand_duration: 50, + // donut + donut_label_show: true, + donut_label_format: undefined, + donut_label_threshold: 0.05, + donut_width: undefined, + donut_title: "", + donut_expand: {}, + donut_expand_duration: 50, + // spline + spline_interpolation_type: 'cardinal', + // region - region to change style + regions: [], + // tooltip - show when mouseover on each data + tooltip_show: true, + tooltip_grouped: true, + tooltip_format_title: undefined, + tooltip_format_name: undefined, + tooltip_format_value: undefined, + tooltip_position: undefined, + tooltip_contents: function (d, defaultTitleFormat, defaultValueFormat, color) { + return this.getTooltipContent ? this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color) : ''; + }, + tooltip_init_show: false, + tooltip_init_x: 0, + tooltip_init_position: {top: '0px', left: '50px'}, + tooltip_onshow: function () {}, + tooltip_onhide: function () {}, + // title + title_text: undefined, + title_padding: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + title_position: 'top-center', + }; + + Object.keys(this.additionalConfig).forEach(function (key) { + config[key] = this.additionalConfig[key]; + }, this); + + return config; + }; + c3_chart_internal_fn.additionalConfig = {}; + + c3_chart_internal_fn.loadConfig = function (config) { + var this_config = this.config, target, keys, read; + function find() { + var key = keys.shift(); + // console.log("key =>", key, ", target =>", target); + if (key && target && typeof target === 'object' && key in target) { + target = target[key]; + return find(); + } + else if (!key) { + return target; + } + else { + return undefined; + } + } + Object.keys(this_config).forEach(function (key) { + target = config; + keys = key.split('_'); + read = find(); + // console.log("CONFIG : ", key, read); + if (isDefined(read)) { + this_config[key] = read; + } + }); + }; + + c3_chart_internal_fn.getScale = function (min, max, forTimeseries) { + return (forTimeseries ? this.d3.time.scale() : this.d3.scale.linear()).range([min, max]); + }; + c3_chart_internal_fn.getX = function (min, max, domain, offset) { + var $$ = this, + scale = $$.getScale(min, max, $$.isTimeSeries()), + _scale = domain ? scale.domain(domain) : scale, key; + // Define customized scale if categorized axis + if ($$.isCategorized()) { + offset = offset || function () { return 0; }; + scale = function (d, raw) { + var v = _scale(d) + offset(d); + return raw ? v : Math.ceil(v); + }; + } else { + scale = function (d, raw) { + var v = _scale(d); + return raw ? v : Math.ceil(v); + }; + } + // define functions + for (key in _scale) { + scale[key] = _scale[key]; + } + scale.orgDomain = function () { + return _scale.domain(); + }; + // define custom domain() for categorized axis + if ($$.isCategorized()) { + scale.domain = function (domain) { + if (!arguments.length) { + domain = this.orgDomain(); + return [domain[0], domain[1] + 1]; + } + _scale.domain(domain); + return scale; + }; + } + return scale; + }; + c3_chart_internal_fn.getY = function (min, max, domain) { + var scale = this.getScale(min, max, this.isTimeSeriesY()); + if (domain) { scale.domain(domain); } + return scale; + }; + c3_chart_internal_fn.getYScale = function (id) { + return this.axis.getId(id) === 'y2' ? this.y2 : this.y; + }; + c3_chart_internal_fn.getSubYScale = function (id) { + return this.axis.getId(id) === 'y2' ? this.subY2 : this.subY; + }; + c3_chart_internal_fn.updateScales = function () { + var $$ = this, config = $$.config, + forInit = !$$.x; + // update edges + $$.xMin = config.axis_rotated ? 1 : 0; + $$.xMax = config.axis_rotated ? $$.height : $$.width; + $$.yMin = config.axis_rotated ? 0 : $$.height; + $$.yMax = config.axis_rotated ? $$.width : 1; + $$.subXMin = $$.xMin; + $$.subXMax = $$.xMax; + $$.subYMin = config.axis_rotated ? 0 : $$.height2; + $$.subYMax = config.axis_rotated ? $$.width2 : 1; + // update scales + $$.x = $$.getX($$.xMin, $$.xMax, forInit ? undefined : $$.x.orgDomain(), function () { return $$.xAxis.tickOffset(); }); + $$.y = $$.getY($$.yMin, $$.yMax, forInit ? config.axis_y_default : $$.y.domain()); + $$.y2 = $$.getY($$.yMin, $$.yMax, forInit ? config.axis_y2_default : $$.y2.domain()); + $$.subX = $$.getX($$.xMin, $$.xMax, $$.orgXDomain, function (d) { return d % 1 ? 0 : $$.subXAxis.tickOffset(); }); + $$.subY = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y_default : $$.subY.domain()); + $$.subY2 = $$.getY($$.subYMin, $$.subYMax, forInit ? config.axis_y2_default : $$.subY2.domain()); + // update axes + $$.xAxisTickFormat = $$.axis.getXAxisTickFormat(); + $$.xAxisTickValues = $$.axis.getXAxisTickValues(); + $$.yAxisTickValues = $$.axis.getYAxisTickValues(); + $$.y2AxisTickValues = $$.axis.getY2AxisTickValues(); + + $$.xAxis = $$.axis.getXAxis($$.x, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer); + $$.subXAxis = $$.axis.getXAxis($$.subX, $$.subXOrient, $$.xAxisTickFormat, $$.xAxisTickValues, config.axis_x_tick_outer); + $$.yAxis = $$.axis.getYAxis($$.y, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, config.axis_y_tick_outer); + $$.y2Axis = $$.axis.getYAxis($$.y2, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, config.axis_y2_tick_outer); + + // Set initialized scales to brush and zoom + if (!forInit) { + if ($$.brush) { $$.brush.scale($$.subX); } + if (config.zoom_enabled) { $$.zoom.scale($$.x); } + } + // update for arc + if ($$.updateArc) { $$.updateArc(); } + }; + + c3_chart_internal_fn.getYDomainMin = function (targets) { + var $$ = this, config = $$.config, + ids = $$.mapToIds(targets), ys = $$.getValuesAsIdKeyed(targets), + j, k, baseId, idsInGroup, id, hasNegativeValue; + if (config.data_groups.length > 0) { + hasNegativeValue = $$.hasNegativeValueInTargets(targets); + for (j = 0; j < config.data_groups.length; j++) { + // Determine baseId + idsInGroup = config.data_groups[j].filter(function (id) { return ids.indexOf(id) >= 0; }); + if (idsInGroup.length === 0) { continue; } + baseId = idsInGroup[0]; + // Consider negative values + if (hasNegativeValue && ys[baseId]) { + ys[baseId].forEach(function (v, i) { + ys[baseId][i] = v < 0 ? v : 0; + }); + } + // Compute min + for (k = 1; k < idsInGroup.length; k++) { + id = idsInGroup[k]; + if (! ys[id]) { continue; } + ys[id].forEach(function (v, i) { + if ($$.axis.getId(id) === $$.axis.getId(baseId) && ys[baseId] && !(hasNegativeValue && +v > 0)) { + ys[baseId][i] += +v; + } + }); + } + } + } + return $$.d3.min(Object.keys(ys).map(function (key) { return $$.d3.min(ys[key]); })); + }; + c3_chart_internal_fn.getYDomainMax = function (targets) { + var $$ = this, config = $$.config, + ids = $$.mapToIds(targets), ys = $$.getValuesAsIdKeyed(targets), + j, k, baseId, idsInGroup, id, hasPositiveValue; + if (config.data_groups.length > 0) { + hasPositiveValue = $$.hasPositiveValueInTargets(targets); + for (j = 0; j < config.data_groups.length; j++) { + // Determine baseId + idsInGroup = config.data_groups[j].filter(function (id) { return ids.indexOf(id) >= 0; }); + if (idsInGroup.length === 0) { continue; } + baseId = idsInGroup[0]; + // Consider positive values + if (hasPositiveValue && ys[baseId]) { + ys[baseId].forEach(function (v, i) { + ys[baseId][i] = v > 0 ? v : 0; + }); + } + // Compute max + for (k = 1; k < idsInGroup.length; k++) { + id = idsInGroup[k]; + if (! ys[id]) { continue; } + ys[id].forEach(function (v, i) { + if ($$.axis.getId(id) === $$.axis.getId(baseId) && ys[baseId] && !(hasPositiveValue && +v < 0)) { + ys[baseId][i] += +v; + } + }); + } + } + } + return $$.d3.max(Object.keys(ys).map(function (key) { return $$.d3.max(ys[key]); })); + }; + c3_chart_internal_fn.getYDomain = function (targets, axisId, xDomain) { + var $$ = this, config = $$.config, + targetsByAxisId = targets.filter(function (t) { return $$.axis.getId(t.id) === axisId; }), + yTargets = xDomain ? $$.filterByXDomain(targetsByAxisId, xDomain) : targetsByAxisId, + yMin = axisId === 'y2' ? config.axis_y2_min : config.axis_y_min, + yMax = axisId === 'y2' ? config.axis_y2_max : config.axis_y_max, + yDomainMin = $$.getYDomainMin(yTargets), + yDomainMax = $$.getYDomainMax(yTargets), + domain, domainLength, padding, padding_top, padding_bottom, + center = axisId === 'y2' ? config.axis_y2_center : config.axis_y_center, + yDomainAbs, lengths, diff, ratio, isAllPositive, isAllNegative, + isZeroBased = ($$.hasType('bar', yTargets) && config.bar_zerobased) || ($$.hasType('area', yTargets) && config.area_zerobased), + isInverted = axisId === 'y2' ? config.axis_y2_inverted : config.axis_y_inverted, + showHorizontalDataLabel = $$.hasDataLabel() && config.axis_rotated, + showVerticalDataLabel = $$.hasDataLabel() && !config.axis_rotated; + + // MEMO: avoid inverting domain unexpectedly + yDomainMin = isValue(yMin) ? yMin : isValue(yMax) ? (yDomainMin < yMax ? yDomainMin : yMax - 10) : yDomainMin; + yDomainMax = isValue(yMax) ? yMax : isValue(yMin) ? (yMin < yDomainMax ? yDomainMax : yMin + 10) : yDomainMax; + + if (yTargets.length === 0) { // use current domain if target of axisId is none + return axisId === 'y2' ? $$.y2.domain() : $$.y.domain(); + } + if (isNaN(yDomainMin)) { // set minimum to zero when not number + yDomainMin = 0; + } + if (isNaN(yDomainMax)) { // set maximum to have same value as yDomainMin + yDomainMax = yDomainMin; + } + if (yDomainMin === yDomainMax) { + yDomainMin < 0 ? yDomainMax = 0 : yDomainMin = 0; + } + isAllPositive = yDomainMin >= 0 && yDomainMax >= 0; + isAllNegative = yDomainMin <= 0 && yDomainMax <= 0; + + // Cancel zerobased if axis_*_min / axis_*_max specified + if ((isValue(yMin) && isAllPositive) || (isValue(yMax) && isAllNegative)) { + isZeroBased = false; + } + + // Bar/Area chart should be 0-based if all positive|negative + if (isZeroBased) { + if (isAllPositive) { yDomainMin = 0; } + if (isAllNegative) { yDomainMax = 0; } + } + + domainLength = Math.abs(yDomainMax - yDomainMin); + padding = padding_top = padding_bottom = domainLength * 0.1; + + if (typeof center !== 'undefined') { + yDomainAbs = Math.max(Math.abs(yDomainMin), Math.abs(yDomainMax)); + yDomainMax = center + yDomainAbs; + yDomainMin = center - yDomainAbs; + } + // add padding for data label + if (showHorizontalDataLabel) { + lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'width'); + diff = diffDomain($$.y.range()); + ratio = [lengths[0] / diff, lengths[1] / diff]; + padding_top += domainLength * (ratio[1] / (1 - ratio[0] - ratio[1])); + padding_bottom += domainLength * (ratio[0] / (1 - ratio[0] - ratio[1])); + } else if (showVerticalDataLabel) { + lengths = $$.getDataLabelLength(yDomainMin, yDomainMax, 'height'); + padding_top += $$.axis.convertPixelsToAxisPadding(lengths[1], domainLength); + padding_bottom += $$.axis.convertPixelsToAxisPadding(lengths[0], domainLength); + } + if (axisId === 'y' && notEmpty(config.axis_y_padding)) { + padding_top = $$.axis.getPadding(config.axis_y_padding, 'top', padding_top, domainLength); + padding_bottom = $$.axis.getPadding(config.axis_y_padding, 'bottom', padding_bottom, domainLength); + } + if (axisId === 'y2' && notEmpty(config.axis_y2_padding)) { + padding_top = $$.axis.getPadding(config.axis_y2_padding, 'top', padding_top, domainLength); + padding_bottom = $$.axis.getPadding(config.axis_y2_padding, 'bottom', padding_bottom, domainLength); + } + // Bar/Area chart should be 0-based if all positive|negative + if (isZeroBased) { + if (isAllPositive) { padding_bottom = yDomainMin; } + if (isAllNegative) { padding_top = -yDomainMax; } + } + domain = [yDomainMin - padding_bottom, yDomainMax + padding_top]; + return isInverted ? domain.reverse() : domain; + }; + c3_chart_internal_fn.getXDomainMin = function (targets) { + var $$ = this, config = $$.config; + return isDefined(config.axis_x_min) ? + ($$.isTimeSeries() ? this.parseDate(config.axis_x_min) : config.axis_x_min) : + $$.d3.min(targets, function (t) { return $$.d3.min(t.values, function (v) { return v.x; }); }); + }; + c3_chart_internal_fn.getXDomainMax = function (targets) { + var $$ = this, config = $$.config; + return isDefined(config.axis_x_max) ? + ($$.isTimeSeries() ? this.parseDate(config.axis_x_max) : config.axis_x_max) : + $$.d3.max(targets, function (t) { return $$.d3.max(t.values, function (v) { return v.x; }); }); + }; + c3_chart_internal_fn.getXDomainPadding = function (domain) { + var $$ = this, config = $$.config, + diff = domain[1] - domain[0], + maxDataCount, padding, paddingLeft, paddingRight; + if ($$.isCategorized()) { + padding = 0; + } else if ($$.hasType('bar')) { + maxDataCount = $$.getMaxDataCount(); + padding = maxDataCount > 1 ? (diff / (maxDataCount - 1)) / 2 : 0.5; + } else { + padding = diff * 0.01; + } + if (typeof config.axis_x_padding === 'object' && notEmpty(config.axis_x_padding)) { + paddingLeft = isValue(config.axis_x_padding.left) ? config.axis_x_padding.left : padding; + paddingRight = isValue(config.axis_x_padding.right) ? config.axis_x_padding.right : padding; + } else if (typeof config.axis_x_padding === 'number') { + paddingLeft = paddingRight = config.axis_x_padding; + } else { + paddingLeft = paddingRight = padding; + } + return {left: paddingLeft, right: paddingRight}; + }; + c3_chart_internal_fn.getXDomain = function (targets) { + var $$ = this, + xDomain = [$$.getXDomainMin(targets), $$.getXDomainMax(targets)], + firstX = xDomain[0], lastX = xDomain[1], + padding = $$.getXDomainPadding(xDomain), + min = 0, max = 0; + // show center of x domain if min and max are the same + if ((firstX - lastX) === 0 && !$$.isCategorized()) { + if ($$.isTimeSeries()) { + firstX = new Date(firstX.getTime() * 0.5); + lastX = new Date(lastX.getTime() * 1.5); + } else { + firstX = firstX === 0 ? 1 : (firstX * 0.5); + lastX = lastX === 0 ? -1 : (lastX * 1.5); + } + } + if (firstX || firstX === 0) { + min = $$.isTimeSeries() ? new Date(firstX.getTime() - padding.left) : firstX - padding.left; + } + if (lastX || lastX === 0) { + max = $$.isTimeSeries() ? new Date(lastX.getTime() + padding.right) : lastX + padding.right; + } + return [min, max]; + }; + c3_chart_internal_fn.updateXDomain = function (targets, withUpdateXDomain, withUpdateOrgXDomain, withTrim, domain) { + var $$ = this, config = $$.config; + + if (withUpdateOrgXDomain) { + $$.x.domain(domain ? domain : $$.d3.extent($$.getXDomain(targets))); + $$.orgXDomain = $$.x.domain(); + if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); } + $$.subX.domain($$.x.domain()); + if ($$.brush) { $$.brush.scale($$.subX); } + } + if (withUpdateXDomain) { + $$.x.domain(domain ? domain : (!$$.brush || $$.brush.empty()) ? $$.orgXDomain : $$.brush.extent()); + if (config.zoom_enabled) { $$.zoom.scale($$.x).updateScaleExtent(); } + } + + // Trim domain when too big by zoom mousemove event + if (withTrim) { $$.x.domain($$.trimXDomain($$.x.orgDomain())); } + + return $$.x.domain(); + }; + c3_chart_internal_fn.trimXDomain = function (domain) { + var zoomDomain = this.getZoomDomain(), + min = zoomDomain[0], max = zoomDomain[1]; + if (domain[0] <= min) { + domain[1] = +domain[1] + (min - domain[0]); + domain[0] = min; + } + if (max <= domain[1]) { + domain[0] = +domain[0] - (domain[1] - max); + domain[1] = max; + } + return domain; + }; + + c3_chart_internal_fn.isX = function (key) { + var $$ = this, config = $$.config; + return (config.data_x && key === config.data_x) || (notEmpty(config.data_xs) && hasValue(config.data_xs, key)); + }; + c3_chart_internal_fn.isNotX = function (key) { + return !this.isX(key); + }; + c3_chart_internal_fn.getXKey = function (id) { + var $$ = this, config = $$.config; + return config.data_x ? config.data_x : notEmpty(config.data_xs) ? config.data_xs[id] : null; + }; + c3_chart_internal_fn.getXValuesOfXKey = function (key, targets) { + var $$ = this, + xValues, ids = targets && notEmpty(targets) ? $$.mapToIds(targets) : []; + ids.forEach(function (id) { + if ($$.getXKey(id) === key) { + xValues = $$.data.xs[id]; + } + }); + return xValues; + }; + c3_chart_internal_fn.getIndexByX = function (x) { + var $$ = this, + data = $$.filterByX($$.data.targets, x); + return data.length ? data[0].index : null; + }; + c3_chart_internal_fn.getXValue = function (id, i) { + var $$ = this; + return id in $$.data.xs && $$.data.xs[id] && isValue($$.data.xs[id][i]) ? $$.data.xs[id][i] : i; + }; + c3_chart_internal_fn.getOtherTargetXs = function () { + var $$ = this, + idsForX = Object.keys($$.data.xs); + return idsForX.length ? $$.data.xs[idsForX[0]] : null; + }; + c3_chart_internal_fn.getOtherTargetX = function (index) { + var xs = this.getOtherTargetXs(); + return xs && index < xs.length ? xs[index] : null; + }; + c3_chart_internal_fn.addXs = function (xs) { + var $$ = this; + Object.keys(xs).forEach(function (id) { + $$.config.data_xs[id] = xs[id]; + }); + }; + c3_chart_internal_fn.hasMultipleX = function (xs) { + return this.d3.set(Object.keys(xs).map(function (id) { return xs[id]; })).size() > 1; + }; + c3_chart_internal_fn.isMultipleX = function () { + return notEmpty(this.config.data_xs) || !this.config.data_xSort || this.hasType('scatter'); + }; + c3_chart_internal_fn.addName = function (data) { + var $$ = this, name; + if (data) { + name = $$.config.data_names[data.id]; + data.name = name !== undefined ? name : data.id; + } + return data; + }; + c3_chart_internal_fn.getValueOnIndex = function (values, index) { + var valueOnIndex = values.filter(function (v) { return v.index === index; }); + return valueOnIndex.length ? valueOnIndex[0] : null; + }; + c3_chart_internal_fn.updateTargetX = function (targets, x) { + var $$ = this; + targets.forEach(function (t) { + t.values.forEach(function (v, i) { + v.x = $$.generateTargetX(x[i], t.id, i); + }); + $$.data.xs[t.id] = x; + }); + }; + c3_chart_internal_fn.updateTargetXs = function (targets, xs) { + var $$ = this; + targets.forEach(function (t) { + if (xs[t.id]) { + $$.updateTargetX([t], xs[t.id]); + } + }); + }; + c3_chart_internal_fn.generateTargetX = function (rawX, id, index) { + var $$ = this, x; + if ($$.isTimeSeries()) { + x = rawX ? $$.parseDate(rawX) : $$.parseDate($$.getXValue(id, index)); + } + else if ($$.isCustomX() && !$$.isCategorized()) { + x = isValue(rawX) ? +rawX : $$.getXValue(id, index); + } + else { + x = index; + } + return x; + }; + c3_chart_internal_fn.cloneTarget = function (target) { + return { + id : target.id, + id_org : target.id_org, + values : target.values.map(function (d) { + return {x: d.x, value: d.value, id: d.id}; + }) + }; + }; + c3_chart_internal_fn.updateXs = function () { + var $$ = this; + if ($$.data.targets.length) { + $$.xs = []; + $$.data.targets[0].values.forEach(function (v) { + $$.xs[v.index] = v.x; + }); + } + }; + c3_chart_internal_fn.getPrevX = function (i) { + var x = this.xs[i - 1]; + return typeof x !== 'undefined' ? x : null; + }; + c3_chart_internal_fn.getNextX = function (i) { + var x = this.xs[i + 1]; + return typeof x !== 'undefined' ? x : null; + }; + c3_chart_internal_fn.getMaxDataCount = function () { + var $$ = this; + return $$.d3.max($$.data.targets, function (t) { return t.values.length; }); + }; + c3_chart_internal_fn.getMaxDataCountTarget = function (targets) { + var length = targets.length, max = 0, maxTarget; + if (length > 1) { + targets.forEach(function (t) { + if (t.values.length > max) { + maxTarget = t; + max = t.values.length; + } + }); + } else { + maxTarget = length ? targets[0] : null; + } + return maxTarget; + }; + c3_chart_internal_fn.getEdgeX = function (targets) { + var $$ = this; + return !targets.length ? [0, 0] : [ + $$.d3.min(targets, function (t) { return t.values[0].x; }), + $$.d3.max(targets, function (t) { return t.values[t.values.length - 1].x; }) + ]; + }; + c3_chart_internal_fn.mapToIds = function (targets) { + return targets.map(function (d) { return d.id; }); + }; + c3_chart_internal_fn.mapToTargetIds = function (ids) { + var $$ = this; + return ids ? [].concat(ids) : $$.mapToIds($$.data.targets); + }; + c3_chart_internal_fn.hasTarget = function (targets, id) { + var ids = this.mapToIds(targets), i; + for (i = 0; i < ids.length; i++) { + if (ids[i] === id) { + return true; + } + } + return false; + }; + c3_chart_internal_fn.isTargetToShow = function (targetId) { + return this.hiddenTargetIds.indexOf(targetId) < 0; + }; + c3_chart_internal_fn.isLegendToShow = function (targetId) { + return this.hiddenLegendIds.indexOf(targetId) < 0; + }; + c3_chart_internal_fn.filterTargetsToShow = function (targets) { + var $$ = this; + return targets.filter(function (t) { return $$.isTargetToShow(t.id); }); + }; + c3_chart_internal_fn.mapTargetsToUniqueXs = function (targets) { + var $$ = this; + var xs = $$.d3.set($$.d3.merge(targets.map(function (t) { return t.values.map(function (v) { return +v.x; }); }))).values(); + xs = $$.isTimeSeries() ? xs.map(function (x) { return new Date(+x); }) : xs.map(function (x) { return +x; }); + return xs.sort(function (a, b) { return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN; }); + }; + c3_chart_internal_fn.addHiddenTargetIds = function (targetIds) { + this.hiddenTargetIds = this.hiddenTargetIds.concat(targetIds); + }; + c3_chart_internal_fn.removeHiddenTargetIds = function (targetIds) { + this.hiddenTargetIds = this.hiddenTargetIds.filter(function (id) { return targetIds.indexOf(id) < 0; }); + }; + c3_chart_internal_fn.addHiddenLegendIds = function (targetIds) { + this.hiddenLegendIds = this.hiddenLegendIds.concat(targetIds); + }; + c3_chart_internal_fn.removeHiddenLegendIds = function (targetIds) { + this.hiddenLegendIds = this.hiddenLegendIds.filter(function (id) { return targetIds.indexOf(id) < 0; }); + }; + c3_chart_internal_fn.getValuesAsIdKeyed = function (targets) { + var ys = {}; + targets.forEach(function (t) { + ys[t.id] = []; + t.values.forEach(function (v) { + ys[t.id].push(v.value); + }); + }); + return ys; + }; + c3_chart_internal_fn.checkValueInTargets = function (targets, checker) { + var ids = Object.keys(targets), i, j, values; + for (i = 0; i < ids.length; i++) { + values = targets[ids[i]].values; + for (j = 0; j < values.length; j++) { + if (checker(values[j].value)) { + return true; + } + } + } + return false; + }; + c3_chart_internal_fn.hasNegativeValueInTargets = function (targets) { + return this.checkValueInTargets(targets, function (v) { return v < 0; }); + }; + c3_chart_internal_fn.hasPositiveValueInTargets = function (targets) { + return this.checkValueInTargets(targets, function (v) { return v > 0; }); + }; + c3_chart_internal_fn.isOrderDesc = function () { + var config = this.config; + return typeof(config.data_order) === 'string' && config.data_order.toLowerCase() === 'desc'; + }; + c3_chart_internal_fn.isOrderAsc = function () { + var config = this.config; + return typeof(config.data_order) === 'string' && config.data_order.toLowerCase() === 'asc'; + }; + c3_chart_internal_fn.orderTargets = function (targets) { + var $$ = this, config = $$.config, orderAsc = $$.isOrderAsc(), orderDesc = $$.isOrderDesc(); + if (orderAsc || orderDesc) { + targets.sort(function (t1, t2) { + var reducer = function (p, c) { return p + Math.abs(c.value); }; + var t1Sum = t1.values.reduce(reducer, 0), + t2Sum = t2.values.reduce(reducer, 0); + return orderAsc ? t2Sum - t1Sum : t1Sum - t2Sum; + }); + } else if (isFunction(config.data_order)) { + targets.sort(config.data_order); + } // TODO: accept name array for order + return targets; + }; + c3_chart_internal_fn.filterByX = function (targets, x) { + return this.d3.merge(targets.map(function (t) { return t.values; })).filter(function (v) { return v.x - x === 0; }); + }; + c3_chart_internal_fn.filterRemoveNull = function (data) { + return data.filter(function (d) { return isValue(d.value); }); + }; + c3_chart_internal_fn.filterByXDomain = function (targets, xDomain) { + return targets.map(function (t) { + return { + id: t.id, + id_org: t.id_org, + values: t.values.filter(function (v) { + return xDomain[0] <= v.x && v.x <= xDomain[1]; + }) + }; + }); + }; + c3_chart_internal_fn.hasDataLabel = function () { + var config = this.config; + if (typeof config.data_labels === 'boolean' && config.data_labels) { + return true; + } else if (typeof config.data_labels === 'object' && notEmpty(config.data_labels)) { + return true; + } + return false; + }; + c3_chart_internal_fn.getDataLabelLength = function (min, max, key) { + var $$ = this, + lengths = [0, 0], paddingCoef = 1.3; + $$.selectChart.select('svg').selectAll('.dummy') + .data([min, max]) + .enter().append('text') + .text(function (d) { return $$.dataLabelFormat(d.id)(d); }) + .each(function (d, i) { + lengths[i] = this.getBoundingClientRect()[key] * paddingCoef; + }) + .remove(); + return lengths; + }; + c3_chart_internal_fn.isNoneArc = function (d) { + return this.hasTarget(this.data.targets, d.id); + }, + c3_chart_internal_fn.isArc = function (d) { + return 'data' in d && this.hasTarget(this.data.targets, d.data.id); + }; + c3_chart_internal_fn.findSameXOfValues = function (values, index) { + var i, targetX = values[index].x, sames = []; + for (i = index - 1; i >= 0; i--) { + if (targetX !== values[i].x) { break; } + sames.push(values[i]); + } + for (i = index; i < values.length; i++) { + if (targetX !== values[i].x) { break; } + sames.push(values[i]); + } + return sames; + }; + + c3_chart_internal_fn.findClosestFromTargets = function (targets, pos) { + var $$ = this, candidates; + + // map to array of closest points of each target + candidates = targets.map(function (target) { + return $$.findClosest(target.values, pos); + }); + + // decide closest point and return + return $$.findClosest(candidates, pos); + }; + c3_chart_internal_fn.findClosest = function (values, pos) { + var $$ = this, minDist = $$.config.point_sensitivity, closest; + + // find mouseovering bar + values.filter(function (v) { return v && $$.isBarType(v.id); }).forEach(function (v) { + var shape = $$.main.select('.' + CLASS.bars + $$.getTargetSelectorSuffix(v.id) + ' .' + CLASS.bar + '-' + v.index).node(); + if (!closest && $$.isWithinBar(shape)) { + closest = v; + } + }); + + // find closest point from non-bar + values.filter(function (v) { return v && !$$.isBarType(v.id); }).forEach(function (v) { + var d = $$.dist(v, pos); + if (d < minDist) { + minDist = d; + closest = v; + } + }); + + return closest; + }; + c3_chart_internal_fn.dist = function (data, pos) { + var $$ = this, config = $$.config, + xIndex = config.axis_rotated ? 1 : 0, + yIndex = config.axis_rotated ? 0 : 1, + y = $$.circleY(data, data.index), + x = $$.x(data.x); + return Math.sqrt(Math.pow(x - pos[xIndex], 2) + Math.pow(y - pos[yIndex], 2)); + }; + c3_chart_internal_fn.convertValuesToStep = function (values) { + var converted = [].concat(values), i; + + if (!this.isCategorized()) { + return values; + } + + for (i = values.length + 1; 0 < i; i--) { + converted[i] = converted[i - 1]; + } + + converted[0] = { + x: converted[0].x - 1, + value: converted[0].value, + id: converted[0].id + }; + converted[values.length + 1] = { + x: converted[values.length].x + 1, + value: converted[values.length].value, + id: converted[values.length].id + }; + + return converted; + }; + c3_chart_internal_fn.updateDataAttributes = function (name, attrs) { + var $$ = this, config = $$.config, current = config['data_' + name]; + if (typeof attrs === 'undefined') { return current; } + Object.keys(attrs).forEach(function (id) { + current[id] = attrs[id]; + }); + $$.redraw({withLegend: true}); + return current; + }; + + c3_chart_internal_fn.convertUrlToData = function (url, mimeType, keys, done) { + var $$ = this, type = mimeType ? mimeType : 'csv'; + $$.d3.xhr(url, function (error, data) { + var d; + if (!data) { + throw new Error(error.responseURL + ' ' + error.status + ' (' + error.statusText + ')'); + } + if (type === 'json') { + d = $$.convertJsonToData(JSON.parse(data.response), keys); + } else if (type === 'tsv') { + d = $$.convertTsvToData(data.response); + } else { + d = $$.convertCsvToData(data.response); + } + done.call($$, d); + }); + }; + c3_chart_internal_fn.convertXsvToData = function (xsv, parser) { + var rows = parser.parseRows(xsv), d; + if (rows.length === 1) { + d = [{}]; + rows[0].forEach(function (id) { + d[0][id] = null; + }); + } else { + d = parser.parse(xsv); + } + return d; + }; + c3_chart_internal_fn.convertCsvToData = function (csv) { + return this.convertXsvToData(csv, this.d3.csv); + }; + c3_chart_internal_fn.convertTsvToData = function (tsv) { + return this.convertXsvToData(tsv, this.d3.tsv); + }; + c3_chart_internal_fn.convertJsonToData = function (json, keys) { + var $$ = this, + new_rows = [], targetKeys, data; + if (keys) { // when keys specified, json would be an array that includes objects + if (keys.x) { + targetKeys = keys.value.concat(keys.x); + $$.config.data_x = keys.x; + } else { + targetKeys = keys.value; + } + new_rows.push(targetKeys); + json.forEach(function (o) { + var new_row = []; + targetKeys.forEach(function (key) { + // convert undefined to null because undefined data will be removed in convertDataToTargets() + var v = isUndefined(o[key]) ? null : o[key]; + new_row.push(v); + }); + new_rows.push(new_row); + }); + data = $$.convertRowsToData(new_rows); + } else { + Object.keys(json).forEach(function (key) { + new_rows.push([key].concat(json[key])); + }); + data = $$.convertColumnsToData(new_rows); + } + return data; + }; + c3_chart_internal_fn.convertRowsToData = function (rows) { + var keys = rows[0], new_row = {}, new_rows = [], i, j; + for (i = 1; i < rows.length; i++) { + new_row = {}; + for (j = 0; j < rows[i].length; j++) { + if (isUndefined(rows[i][j])) { + throw new Error("Source data is missing a component at (" + i + "," + j + ")!"); + } + new_row[keys[j]] = rows[i][j]; + } + new_rows.push(new_row); + } + return new_rows; + }; + c3_chart_internal_fn.convertColumnsToData = function (columns) { + var new_rows = [], i, j, key; + for (i = 0; i < columns.length; i++) { + key = columns[i][0]; + for (j = 1; j < columns[i].length; j++) { + if (isUndefined(new_rows[j - 1])) { + new_rows[j - 1] = {}; + } + if (isUndefined(columns[i][j])) { + throw new Error("Source data is missing a component at (" + i + "," + j + ")!"); + } + new_rows[j - 1][key] = columns[i][j]; + } + } + return new_rows; + }; + c3_chart_internal_fn.convertDataToTargets = function (data, appendXs) { + var $$ = this, config = $$.config, + ids = $$.d3.keys(data[0]).filter($$.isNotX, $$), + xs = $$.d3.keys(data[0]).filter($$.isX, $$), + targets; + + // save x for update data by load when custom x and c3.x API + ids.forEach(function (id) { + var xKey = $$.getXKey(id); + + if ($$.isCustomX() || $$.isTimeSeries()) { + // if included in input data + if (xs.indexOf(xKey) >= 0) { + $$.data.xs[id] = (appendXs && $$.data.xs[id] ? $$.data.xs[id] : []).concat( + data.map(function (d) { return d[xKey]; }) + .filter(isValue) + .map(function (rawX, i) { return $$.generateTargetX(rawX, id, i); }) + ); + } + // if not included in input data, find from preloaded data of other id's x + else if (config.data_x) { + $$.data.xs[id] = $$.getOtherTargetXs(); + } + // if not included in input data, find from preloaded data + else if (notEmpty(config.data_xs)) { + $$.data.xs[id] = $$.getXValuesOfXKey(xKey, $$.data.targets); + } + // MEMO: if no x included, use same x of current will be used + } else { + $$.data.xs[id] = data.map(function (d, i) { return i; }); + } + }); + + + // check x is defined + ids.forEach(function (id) { + if (!$$.data.xs[id]) { + throw new Error('x is not defined for id = "' + id + '".'); + } + }); + + // convert to target + targets = ids.map(function (id, index) { + var convertedId = config.data_idConverter(id); + return { + id: convertedId, + id_org: id, + values: data.map(function (d, i) { + var xKey = $$.getXKey(id), rawX = d[xKey], x = $$.generateTargetX(rawX, id, i), + value = d[id] !== null && !isNaN(d[id]) ? +d[id] : null; + // use x as categories if custom x and categorized + if ($$.isCustomX() && $$.isCategorized() && index === 0 && rawX) { + if (i === 0) { config.axis_x_categories = []; } + config.axis_x_categories.push(rawX); + } + // mark as x = undefined if value is undefined and filter to remove after mapped + if (isUndefined(d[id]) || $$.data.xs[id].length <= i) { + x = undefined; + } + return {x: x, value: value, id: convertedId}; + }).filter(function (v) { return isDefined(v.x); }) + }; + }); + + // finish targets + targets.forEach(function (t) { + var i; + // sort values by its x + if (config.data_xSort) { + t.values = t.values.sort(function (v1, v2) { + var x1 = v1.x || v1.x === 0 ? v1.x : Infinity, + x2 = v2.x || v2.x === 0 ? v2.x : Infinity; + return x1 - x2; + }); + } + // indexing each value + i = 0; + t.values.forEach(function (v) { + v.index = i++; + }); + // this needs to be sorted because its index and value.index is identical + $$.data.xs[t.id].sort(function (v1, v2) { + return v1 - v2; + }); + }); + + // cache information about values + $$.hasNegativeValue = $$.hasNegativeValueInTargets(targets); + $$.hasPositiveValue = $$.hasPositiveValueInTargets(targets); + + // set target types + if (config.data_type) { + $$.setTargetType($$.mapToIds(targets).filter(function (id) { return ! (id in config.data_types); }), config.data_type); + } + + // cache as original id keyed + targets.forEach(function (d) { + $$.addCache(d.id_org, d); + }); + + return targets; + }; + + c3_chart_internal_fn.load = function (targets, args) { + var $$ = this; + if (targets) { + // filter loading targets if needed + if (args.filter) { + targets = targets.filter(args.filter); + } + // set type if args.types || args.type specified + if (args.type || args.types) { + targets.forEach(function (t) { + var type = args.types && args.types[t.id] ? args.types[t.id] : args.type; + $$.setTargetType(t.id, type); + }); + } + // Update/Add data + $$.data.targets.forEach(function (d) { + for (var i = 0; i < targets.length; i++) { + if (d.id === targets[i].id) { + d.values = targets[i].values; + targets.splice(i, 1); + break; + } + } + }); + $$.data.targets = $$.data.targets.concat(targets); // add remained + } + + // Set targets + $$.updateTargets($$.data.targets); + + // Redraw with new targets + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true, withLegend: true}); + + if (args.done) { args.done(); } + }; + c3_chart_internal_fn.loadFromArgs = function (args) { + var $$ = this; + if (args.data) { + $$.load($$.convertDataToTargets(args.data), args); + } + else if (args.url) { + $$.convertUrlToData(args.url, args.mimeType, args.keys, function (data) { + $$.load($$.convertDataToTargets(data), args); + }); + } + else if (args.json) { + $$.load($$.convertDataToTargets($$.convertJsonToData(args.json, args.keys)), args); + } + else if (args.rows) { + $$.load($$.convertDataToTargets($$.convertRowsToData(args.rows)), args); + } + else if (args.columns) { + $$.load($$.convertDataToTargets($$.convertColumnsToData(args.columns)), args); + } + else { + $$.load(null, args); + } + }; + c3_chart_internal_fn.unload = function (targetIds, done) { + var $$ = this; + if (!done) { + done = function () {}; + } + // filter existing target + targetIds = targetIds.filter(function (id) { return $$.hasTarget($$.data.targets, id); }); + // If no target, call done and return + if (!targetIds || targetIds.length === 0) { + done(); + return; + } + $$.svg.selectAll(targetIds.map(function (id) { return $$.selectorTarget(id); })) + .transition() + .style('opacity', 0) + .remove() + .call($$.endall, done); + targetIds.forEach(function (id) { + // Reset fadein for future load + $$.withoutFadeIn[id] = false; + // Remove target's elements + if ($$.legend) { + $$.legend.selectAll('.' + CLASS.legendItem + $$.getTargetSelectorSuffix(id)).remove(); + } + // Remove target + $$.data.targets = $$.data.targets.filter(function (t) { + return t.id !== id; + }); + }); + }; + + c3_chart_internal_fn.categoryName = function (i) { + var config = this.config; + return i < config.axis_x_categories.length ? config.axis_x_categories[i] : i; + }; + + c3_chart_internal_fn.initEventRect = function () { + var $$ = this; + $$.main.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.eventRects) + .style('fill-opacity', 0); + }; + c3_chart_internal_fn.redrawEventRect = function () { + var $$ = this, config = $$.config, + eventRectUpdate, maxDataCountTarget, + isMultipleX = $$.isMultipleX(); + + // rects for mouseover + var eventRects = $$.main.select('.' + CLASS.eventRects) + .style('cursor', config.zoom_enabled ? config.axis_rotated ? 'ns-resize' : 'ew-resize' : null) + .classed(CLASS.eventRectsMultiple, isMultipleX) + .classed(CLASS.eventRectsSingle, !isMultipleX); + + // clear old rects + eventRects.selectAll('.' + CLASS.eventRect).remove(); + + // open as public variable + $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect); + + if (isMultipleX) { + eventRectUpdate = $$.eventRect.data([0]); + // enter : only one rect will be added + $$.generateEventRectsForMultipleXs(eventRectUpdate.enter()); + // update + $$.updateEventRect(eventRectUpdate); + // exit : not needed because always only one rect exists + } + else { + // Set data and update $$.eventRect + maxDataCountTarget = $$.getMaxDataCountTarget($$.data.targets); + eventRects.datum(maxDataCountTarget ? maxDataCountTarget.values : []); + $$.eventRect = eventRects.selectAll('.' + CLASS.eventRect); + eventRectUpdate = $$.eventRect.data(function (d) { return d; }); + // enter + $$.generateEventRectsForSingleX(eventRectUpdate.enter()); + // update + $$.updateEventRect(eventRectUpdate); + // exit + eventRectUpdate.exit().remove(); + } + }; + c3_chart_internal_fn.updateEventRect = function (eventRectUpdate) { + var $$ = this, config = $$.config, + x, y, w, h, rectW, rectX; + + // set update selection if null + eventRectUpdate = eventRectUpdate || $$.eventRect.data(function (d) { return d; }); + + if ($$.isMultipleX()) { + // TODO: rotated not supported yet + x = 0; + y = 0; + w = $$.width; + h = $$.height; + } + else { + if (($$.isCustomX() || $$.isTimeSeries()) && !$$.isCategorized()) { + + // update index for x that is used by prevX and nextX + $$.updateXs(); + + rectW = function (d) { + var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index); + + // if there this is a single data point make the eventRect full width (or height) + if (prevX === null && nextX === null) { + return config.axis_rotated ? $$.height : $$.width; + } + + if (prevX === null) { prevX = $$.x.domain()[0]; } + if (nextX === null) { nextX = $$.x.domain()[1]; } + + return Math.max(0, ($$.x(nextX) - $$.x(prevX)) / 2); + }; + rectX = function (d) { + var prevX = $$.getPrevX(d.index), nextX = $$.getNextX(d.index), + thisX = $$.data.xs[d.id][d.index]; + + // if there this is a single data point position the eventRect at 0 + if (prevX === null && nextX === null) { + return 0; + } + + if (prevX === null) { prevX = $$.x.domain()[0]; } + + return ($$.x(thisX) + $$.x(prevX)) / 2; + }; + } else { + rectW = $$.getEventRectWidth(); + rectX = function (d) { + return $$.x(d.x) - (rectW / 2); + }; + } + x = config.axis_rotated ? 0 : rectX; + y = config.axis_rotated ? rectX : 0; + w = config.axis_rotated ? $$.width : rectW; + h = config.axis_rotated ? rectW : $$.height; + } + + eventRectUpdate + .attr('class', $$.classEvent.bind($$)) + .attr("x", x) + .attr("y", y) + .attr("width", w) + .attr("height", h); + }; + c3_chart_internal_fn.generateEventRectsForSingleX = function (eventRectEnter) { + var $$ = this, d3 = $$.d3, config = $$.config; + eventRectEnter.append("rect") + .attr("class", $$.classEvent.bind($$)) + .style("cursor", config.data_selection_enabled && config.data_selection_grouped ? "pointer" : null) + .on('mouseover', function (d) { + var index = d.index; + + if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing + if ($$.hasArcType()) { return; } + + // Expand shapes for selection + if (config.point_focus_expand_enabled) { $$.expandCircles(index, null, true); } + $$.expandBars(index, null, true); + + // Call event handler + $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { + config.data_onmouseover.call($$.api, d); + }); + }) + .on('mouseout', function (d) { + var index = d.index; + if (!$$.config) { return; } // chart is destroyed + if ($$.hasArcType()) { return; } + $$.hideXGridFocus(); + $$.hideTooltip(); + // Undo expanded shapes + $$.unexpandCircles(); + $$.unexpandBars(); + // Call event handler + $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { + config.data_onmouseout.call($$.api, d); + }); + }) + .on('mousemove', function (d) { + var selectedData, index = d.index, + eventRect = $$.svg.select('.' + CLASS.eventRect + '-' + index); + + if ($$.dragging || $$.flowing) { return; } // do nothing while dragging/flowing + if ($$.hasArcType()) { return; } + + if ($$.isStepType(d) && $$.config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) { + index -= 1; + } + + // Show tooltip + selectedData = $$.filterTargetsToShow($$.data.targets).map(function (t) { + return $$.addName($$.getValueOnIndex(t.values, index)); + }); + + if (config.tooltip_grouped) { + $$.showTooltip(selectedData, this); + $$.showXGridFocus(selectedData); + } + + if (config.tooltip_grouped && (!config.data_selection_enabled || config.data_selection_grouped)) { + return; + } + + $$.main.selectAll('.' + CLASS.shape + '-' + index) + .each(function () { + d3.select(this).classed(CLASS.EXPANDED, true); + if (config.data_selection_enabled) { + eventRect.style('cursor', config.data_selection_grouped ? 'pointer' : null); + } + if (!config.tooltip_grouped) { + $$.hideXGridFocus(); + $$.hideTooltip(); + if (!config.data_selection_grouped) { + $$.unexpandCircles(index); + $$.unexpandBars(index); + } + } + }) + .filter(function (d) { + return $$.isWithinShape(this, d); + }) + .each(function (d) { + if (config.data_selection_enabled && (config.data_selection_grouped || config.data_selection_isselectable(d))) { + eventRect.style('cursor', 'pointer'); + } + if (!config.tooltip_grouped) { + $$.showTooltip([d], this); + $$.showXGridFocus([d]); + if (config.point_focus_expand_enabled) { $$.expandCircles(index, d.id, true); } + $$.expandBars(index, d.id, true); + } + }); + }) + .on('click', function (d) { + var index = d.index; + if ($$.hasArcType() || !$$.toggleShape) { return; } + if ($$.cancelClick) { + $$.cancelClick = false; + return; + } + if ($$.isStepType(d) && config.line_step_type === 'step-after' && d3.mouse(this)[0] < $$.x($$.getXValue(d.id, index))) { + index -= 1; + } + $$.main.selectAll('.' + CLASS.shape + '-' + index).each(function (d) { + if (config.data_selection_grouped || $$.isWithinShape(this, d)) { + $$.toggleShape(this, d, index); + $$.config.data_onclick.call($$.api, d, this); + } + }); + }) + .call( + config.data_selection_draggable && $$.drag ? ( + d3.behavior.drag().origin(Object) + .on('drag', function () { $$.drag(d3.mouse(this)); }) + .on('dragstart', function () { $$.dragstart(d3.mouse(this)); }) + .on('dragend', function () { $$.dragend(); }) + ) : function () {} + ); + }; + + c3_chart_internal_fn.generateEventRectsForMultipleXs = function (eventRectEnter) { + var $$ = this, d3 = $$.d3, config = $$.config; + + function mouseout() { + $$.svg.select('.' + CLASS.eventRect).style('cursor', null); + $$.hideXGridFocus(); + $$.hideTooltip(); + $$.unexpandCircles(); + $$.unexpandBars(); + } + + eventRectEnter.append('rect') + .attr('x', 0) + .attr('y', 0) + .attr('width', $$.width) + .attr('height', $$.height) + .attr('class', CLASS.eventRect) + .on('mouseout', function () { + if (!$$.config) { return; } // chart is destroyed + if ($$.hasArcType()) { return; } + mouseout(); + }) + .on('mousemove', function () { + var targetsToShow = $$.filterTargetsToShow($$.data.targets); + var mouse, closest, sameXData, selectedData; + + if ($$.dragging) { return; } // do nothing when dragging + if ($$.hasArcType(targetsToShow)) { return; } + + mouse = d3.mouse(this); + closest = $$.findClosestFromTargets(targetsToShow, mouse); + + if ($$.mouseover && (!closest || closest.id !== $$.mouseover.id)) { + config.data_onmouseout.call($$.api, $$.mouseover); + $$.mouseover = undefined; + } + + if (! closest) { + mouseout(); + return; + } + + if ($$.isScatterType(closest) || !config.tooltip_grouped) { + sameXData = [closest]; + } else { + sameXData = $$.filterByX(targetsToShow, closest.x); + } + + // show tooltip when cursor is close to some point + selectedData = sameXData.map(function (d) { + return $$.addName(d); + }); + $$.showTooltip(selectedData, this); + + // expand points + if (config.point_focus_expand_enabled) { + $$.expandCircles(closest.index, closest.id, true); + } + $$.expandBars(closest.index, closest.id, true); + + // Show xgrid focus line + $$.showXGridFocus(selectedData); + + // Show cursor as pointer if point is close to mouse position + if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) { + $$.svg.select('.' + CLASS.eventRect).style('cursor', 'pointer'); + if (!$$.mouseover) { + config.data_onmouseover.call($$.api, closest); + $$.mouseover = closest; + } + } + }) + .on('click', function () { + var targetsToShow = $$.filterTargetsToShow($$.data.targets); + var mouse, closest; + if ($$.hasArcType(targetsToShow)) { return; } + + mouse = d3.mouse(this); + closest = $$.findClosestFromTargets(targetsToShow, mouse); + if (! closest) { return; } + // select if selection enabled + if ($$.isBarType(closest.id) || $$.dist(closest, mouse) < config.point_sensitivity) { + $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(closest.id)).selectAll('.' + CLASS.shape + '-' + closest.index).each(function () { + if (config.data_selection_grouped || $$.isWithinShape(this, closest)) { + $$.toggleShape(this, closest, closest.index); + $$.config.data_onclick.call($$.api, closest, this); + } + }); + } + }) + .call( + config.data_selection_draggable && $$.drag ? ( + d3.behavior.drag().origin(Object) + .on('drag', function () { $$.drag(d3.mouse(this)); }) + .on('dragstart', function () { $$.dragstart(d3.mouse(this)); }) + .on('dragend', function () { $$.dragend(); }) + ) : function () {} + ); + }; + c3_chart_internal_fn.dispatchEvent = function (type, index, mouse) { + var $$ = this, + selector = '.' + CLASS.eventRect + (!$$.isMultipleX() ? '-' + index : ''), + eventRect = $$.main.select(selector).node(), + box = eventRect.getBoundingClientRect(), + x = box.left + (mouse ? mouse[0] : 0), + y = box.top + (mouse ? mouse[1] : 0), + event = document.createEvent("MouseEvents"); + + event.initMouseEvent(type, true, true, window, 0, x, y, x, y, + false, false, false, false, 0, null); + eventRect.dispatchEvent(event); + }; + + c3_chart_internal_fn.getCurrentWidth = function () { + var $$ = this, config = $$.config; + return config.size_width ? config.size_width : $$.getParentWidth(); + }; + c3_chart_internal_fn.getCurrentHeight = function () { + var $$ = this, config = $$.config, + h = config.size_height ? config.size_height : $$.getParentHeight(); + return h > 0 ? h : 320 / ($$.hasType('gauge') ? 2 : 1); + }; + c3_chart_internal_fn.getCurrentPaddingTop = function () { + var $$ = this, + config = $$.config, + padding = isValue(config.padding_top) ? config.padding_top : 0; + if ($$.title && $$.title.node()) { + padding += $$.getTitlePadding(); + } + return padding; + }; + c3_chart_internal_fn.getCurrentPaddingBottom = function () { + var config = this.config; + return isValue(config.padding_bottom) ? config.padding_bottom : 0; + }; + c3_chart_internal_fn.getCurrentPaddingLeft = function (withoutRecompute) { + var $$ = this, config = $$.config; + if (isValue(config.padding_left)) { + return config.padding_left; + } else if (config.axis_rotated) { + return !config.axis_x_show ? 1 : Math.max(ceil10($$.getAxisWidthByAxisId('x', withoutRecompute)), 40); + } else if (!config.axis_y_show || config.axis_y_inner) { // && !config.axis_rotated + return $$.axis.getYAxisLabelPosition().isOuter ? 30 : 1; + } else { + return ceil10($$.getAxisWidthByAxisId('y', withoutRecompute)); + } + }; + c3_chart_internal_fn.getCurrentPaddingRight = function () { + var $$ = this, config = $$.config, + defaultPadding = 10, legendWidthOnRight = $$.isLegendRight ? $$.getLegendWidth() + 20 : 0; + if (isValue(config.padding_right)) { + return config.padding_right + 1; // 1 is needed not to hide tick line + } else if (config.axis_rotated) { + return defaultPadding + legendWidthOnRight; + } else if (!config.axis_y2_show || config.axis_y2_inner) { // && !config.axis_rotated + return 2 + legendWidthOnRight + ($$.axis.getY2AxisLabelPosition().isOuter ? 20 : 0); + } else { + return ceil10($$.getAxisWidthByAxisId('y2')) + legendWidthOnRight; + } + }; + + c3_chart_internal_fn.getParentRectValue = function (key) { + var parent = this.selectChart.node(), v; + while (parent && parent.tagName !== 'BODY') { + try { + v = parent.getBoundingClientRect()[key]; + } catch(e) { + if (key === 'width') { + // In IE in certain cases getBoundingClientRect + // will cause an "unspecified error" + v = parent.offsetWidth; + } + } + if (v) { + break; + } + parent = parent.parentNode; + } + return v; + }; + c3_chart_internal_fn.getParentWidth = function () { + return this.getParentRectValue('width'); + }; + c3_chart_internal_fn.getParentHeight = function () { + var h = this.selectChart.style('height'); + return h.indexOf('px') > 0 ? +h.replace('px', '') : 0; + }; + + + c3_chart_internal_fn.getSvgLeft = function (withoutRecompute) { + var $$ = this, config = $$.config, + hasLeftAxisRect = config.axis_rotated || (!config.axis_rotated && !config.axis_y_inner), + leftAxisClass = config.axis_rotated ? CLASS.axisX : CLASS.axisY, + leftAxis = $$.main.select('.' + leftAxisClass).node(), + svgRect = leftAxis && hasLeftAxisRect ? leftAxis.getBoundingClientRect() : {right: 0}, + chartRect = $$.selectChart.node().getBoundingClientRect(), + hasArc = $$.hasArcType(), + svgLeft = svgRect.right - chartRect.left - (hasArc ? 0 : $$.getCurrentPaddingLeft(withoutRecompute)); + return svgLeft > 0 ? svgLeft : 0; + }; + + + c3_chart_internal_fn.getAxisWidthByAxisId = function (id, withoutRecompute) { + var $$ = this, position = $$.axis.getLabelPositionById(id); + return $$.axis.getMaxTickWidth(id, withoutRecompute) + (position.isInner ? 20 : 40); + }; + c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) { + var $$ = this, config = $$.config, h = 30; + if (axisId === 'x' && !config.axis_x_show) { return 8; } + if (axisId === 'x' && config.axis_x_height) { return config.axis_x_height; } + if (axisId === 'y' && !config.axis_y_show) { return config.legend_show && !$$.isLegendRight && !$$.isLegendInset ? 10 : 1; } + if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; } + // Calculate x axis height when tick rotated + if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) { + h = 30 + $$.axis.getMaxTickWidth(axisId) * Math.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180); + } + return h + ($$.axis.getLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0); + }; + + c3_chart_internal_fn.getEventRectWidth = function () { + return Math.max(0, this.xAxis.tickInterval()); + }; + + c3_chart_internal_fn.getShapeIndices = function (typeFilter) { + var $$ = this, config = $$.config, + indices = {}, i = 0, j, k; + $$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$)).forEach(function (d) { + for (j = 0; j < config.data_groups.length; j++) { + if (config.data_groups[j].indexOf(d.id) < 0) { continue; } + for (k = 0; k < config.data_groups[j].length; k++) { + if (config.data_groups[j][k] in indices) { + indices[d.id] = indices[config.data_groups[j][k]]; + break; + } + } + } + if (isUndefined(indices[d.id])) { indices[d.id] = i++; } + }); + indices.__max__ = i - 1; + return indices; + }; + c3_chart_internal_fn.getShapeX = function (offset, targetsNum, indices, isSub) { + var $$ = this, scale = isSub ? $$.subX : $$.x; + return function (d) { + var index = d.id in indices ? indices[d.id] : 0; + return d.x || d.x === 0 ? scale(d.x) - offset * (targetsNum / 2 - index) : 0; + }; + }; + c3_chart_internal_fn.getShapeY = function (isSub) { + var $$ = this; + return function (d) { + var scale = isSub ? $$.getSubYScale(d.id) : $$.getYScale(d.id); + return scale(d.value); + }; + }; + c3_chart_internal_fn.getShapeOffset = function (typeFilter, indices, isSub) { + var $$ = this, + targets = $$.orderTargets($$.filterTargetsToShow($$.data.targets.filter(typeFilter, $$))), + targetIds = targets.map(function (t) { return t.id; }); + return function (d, i) { + var scale = isSub ? $$.getSubYScale(d.id) : $$.getYScale(d.id), + y0 = scale(0), offset = y0; + targets.forEach(function (t) { + var values = $$.isStepType(d) ? $$.convertValuesToStep(t.values) : t.values; + if (t.id === d.id || indices[t.id] !== indices[d.id]) { return; } + if (targetIds.indexOf(t.id) < targetIds.indexOf(d.id)) { + // check if the x values line up + if (typeof values[i] === 'undefined' || +values[i].x !== +d.x) { // "+" for timeseries + // if not, try to find the value that does line up + i = -1; + values.forEach(function (v, j) { + if (v.x === d.x) { + i = j; + } + }); + } + if (i in values && values[i].value * d.value >= 0) { + offset += scale(values[i].value) - y0; + } + } + }); + return offset; + }; + }; + c3_chart_internal_fn.isWithinShape = function (that, d) { + var $$ = this, + shape = $$.d3.select(that), isWithin; + if (!$$.isTargetToShow(d.id)) { + isWithin = false; + } + else if (that.nodeName === 'circle') { + isWithin = $$.isStepType(d) ? $$.isWithinStep(that, $$.getYScale(d.id)(d.value)) : $$.isWithinCircle(that, $$.pointSelectR(d) * 1.5); + } + else if (that.nodeName === 'path') { + isWithin = shape.classed(CLASS.bar) ? $$.isWithinBar(that) : true; + } + return isWithin; + }; + + + c3_chart_internal_fn.getInterpolate = function (d) { + var $$ = this, + interpolation = $$.isInterpolationType($$.config.spline_interpolation_type) ? $$.config.spline_interpolation_type : 'cardinal'; + return $$.isSplineType(d) ? interpolation : $$.isStepType(d) ? $$.config.line_step_type : "linear"; + }; + + c3_chart_internal_fn.initLine = function () { + var $$ = this; + $$.main.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.chartLines); + }; + c3_chart_internal_fn.updateTargetsForLine = function (targets) { + var $$ = this, config = $$.config, + mainLineUpdate, mainLineEnter, + classChartLine = $$.classChartLine.bind($$), + classLines = $$.classLines.bind($$), + classAreas = $$.classAreas.bind($$), + classCircles = $$.classCircles.bind($$), + classFocus = $$.classFocus.bind($$); + mainLineUpdate = $$.main.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) + .data(targets) + .attr('class', function (d) { return classChartLine(d) + classFocus(d); }); + mainLineEnter = mainLineUpdate.enter().append('g') + .attr('class', classChartLine) + .style('opacity', 0) + .style("pointer-events", "none"); + // Lines for each data + mainLineEnter.append('g') + .attr("class", classLines); + // Areas + mainLineEnter.append('g') + .attr('class', classAreas); + // Circles for each data point on lines + mainLineEnter.append('g') + .attr("class", function (d) { return $$.generateClass(CLASS.selectedCircles, d.id); }); + mainLineEnter.append('g') + .attr("class", classCircles) + .style("cursor", function (d) { return config.data_selection_isselectable(d) ? "pointer" : null; }); + // Update date for selected circles + targets.forEach(function (t) { + $$.main.selectAll('.' + CLASS.selectedCircles + $$.getTargetSelectorSuffix(t.id)).selectAll('.' + CLASS.selectedCircle).each(function (d) { + d.value = t.values[d.index].value; + }); + }); + // MEMO: can not keep same color... + //mainLineUpdate.exit().remove(); + }; + c3_chart_internal_fn.updateLine = function (durationForExit) { + var $$ = this; + $$.mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line) + .data($$.lineData.bind($$)); + $$.mainLine.enter().append('path') + .attr('class', $$.classLine.bind($$)) + .style("stroke", $$.color); + $$.mainLine + .style("opacity", $$.initialOpacity.bind($$)) + .style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; }) + .attr('transform', null); + $$.mainLine.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) { + return [ + (withTransition ? this.mainLine.transition(Math.random().toString()) : this.mainLine) + .attr("d", drawLine) + .style("stroke", this.color) + .style("opacity", 1) + ]; + }; + c3_chart_internal_fn.generateDrawLine = function (lineIndices, isSub) { + var $$ = this, config = $$.config, + line = $$.d3.svg.line(), + getPoints = $$.generateGetLinePoints(lineIndices, isSub), + yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale, + xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); }, + yValue = function (d, i) { + return config.data_groups.length > 0 ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)(d.value); + }; + + line = config.axis_rotated ? line.x(yValue).y(xValue) : line.x(xValue).y(yValue); + if (!config.line_connectNull) { line = line.defined(function (d) { return d.value != null; }); } + return function (d) { + var values = config.line_connectNull ? $$.filterRemoveNull(d.values) : d.values, + x = isSub ? $$.x : $$.subX, y = yScaleGetter.call($$, d.id), x0 = 0, y0 = 0, path; + if ($$.isLineType(d)) { + if (config.data_regions[d.id]) { + path = $$.lineWithRegions(values, x, y, config.data_regions[d.id]); + } else { + if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); } + path = line.interpolate($$.getInterpolate(d))(values); + } + } else { + if (values[0]) { + x0 = x(values[0].x); + y0 = y(values[0].value); + } + path = config.axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; + } + return path ? path : "M 0 0"; + }; + }; + c3_chart_internal_fn.generateGetLinePoints = function (lineIndices, isSub) { // partial duplication of generateGetBarPoints + var $$ = this, config = $$.config, + lineTargetsNum = lineIndices.__max__ + 1, + x = $$.getShapeX(0, lineTargetsNum, lineIndices, !!isSub), + y = $$.getShapeY(!!isSub), + lineOffset = $$.getShapeOffset($$.isLineType, lineIndices, !!isSub), + yScale = isSub ? $$.getSubYScale : $$.getYScale; + return function (d, i) { + var y0 = yScale.call($$, d.id)(0), + offset = lineOffset(d, i) || y0, // offset is for stacked area chart + posX = x(d), posY = y(d); + // fix posY not to overflow opposite quadrant + if (config.axis_rotated) { + if ((0 < d.value && posY < y0) || (d.value < 0 && y0 < posY)) { posY = y0; } + } + // 1 point that marks the line position + return [ + [posX, posY - (y0 - offset)], + [posX, posY - (y0 - offset)], // needed for compatibility + [posX, posY - (y0 - offset)], // needed for compatibility + [posX, posY - (y0 - offset)] // needed for compatibility + ]; + }; + }; + + + c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) { + var $$ = this, config = $$.config, + prev = -1, i, j, + s = "M", sWithRegion, + xp, yp, dx, dy, dd, diff, diffx2, + xOffset = $$.isCategorized() ? 0.5 : 0, + xValue, yValue, + regions = []; + + function isWithinRegions(x, regions) { + var i; + for (i = 0; i < regions.length; i++) { + if (regions[i].start < x && x <= regions[i].end) { return true; } + } + return false; + } + + // Check start/end of regions + if (isDefined(_regions)) { + for (i = 0; i < _regions.length; i++) { + regions[i] = {}; + if (isUndefined(_regions[i].start)) { + regions[i].start = d[0].x; + } else { + regions[i].start = $$.isTimeSeries() ? $$.parseDate(_regions[i].start) : _regions[i].start; + } + if (isUndefined(_regions[i].end)) { + regions[i].end = d[d.length - 1].x; + } else { + regions[i].end = $$.isTimeSeries() ? $$.parseDate(_regions[i].end) : _regions[i].end; + } + } + } + + // Set scales + xValue = config.axis_rotated ? function (d) { return y(d.value); } : function (d) { return x(d.x); }; + yValue = config.axis_rotated ? function (d) { return x(d.x); } : function (d) { return y(d.value); }; + + // Define svg generator function for region + function generateM(points) { + return 'M' + points[0][0] + ' ' + points[0][1] + ' ' + points[1][0] + ' ' + points[1][1]; + } + if ($$.isTimeSeries()) { + sWithRegion = function (d0, d1, j, diff) { + var x0 = d0.x.getTime(), x_diff = d1.x - d0.x, + xv0 = new Date(x0 + x_diff * j), + xv1 = new Date(x0 + x_diff * (j + diff)), + points; + if (config.axis_rotated) { + points = [[y(yp(j)), x(xv0)], [y(yp(j + diff)), x(xv1)]]; + } else { + points = [[x(xv0), y(yp(j))], [x(xv1), y(yp(j + diff))]]; + } + return generateM(points); + }; + } else { + sWithRegion = function (d0, d1, j, diff) { + var points; + if (config.axis_rotated) { + points = [[y(yp(j), true), x(xp(j))], [y(yp(j + diff), true), x(xp(j + diff))]]; + } else { + points = [[x(xp(j), true), y(yp(j))], [x(xp(j + diff), true), y(yp(j + diff))]]; + } + return generateM(points); + }; + } + + // Generate + for (i = 0; i < d.length; i++) { + + // Draw as normal + if (isUndefined(regions) || ! isWithinRegions(d[i].x, regions)) { + s += " " + xValue(d[i]) + " " + yValue(d[i]); + } + // Draw with region // TODO: Fix for horizotal charts + else { + xp = $$.getScale(d[i - 1].x + xOffset, d[i].x + xOffset, $$.isTimeSeries()); + yp = $$.getScale(d[i - 1].value, d[i].value); + + dx = x(d[i].x) - x(d[i - 1].x); + dy = y(d[i].value) - y(d[i - 1].value); + dd = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2)); + diff = 2 / dd; + diffx2 = diff * 2; + + for (j = diff; j <= 1; j += diffx2) { + s += sWithRegion(d[i - 1], d[i], j, diff); + } + } + prev = d[i].x; + } + + return s; + }; + + + c3_chart_internal_fn.updateArea = function (durationForExit) { + var $$ = this, d3 = $$.d3; + $$.mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area) + .data($$.lineData.bind($$)); + $$.mainArea.enter().append('path') + .attr("class", $$.classArea.bind($$)) + .style("fill", $$.color) + .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }); + $$.mainArea + .style("opacity", $$.orgAreaOpacity); + $$.mainArea.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) { + return [ + (withTransition ? this.mainArea.transition(Math.random().toString()) : this.mainArea) + .attr("d", drawArea) + .style("fill", this.color) + .style("opacity", this.orgAreaOpacity) + ]; + }; + c3_chart_internal_fn.generateDrawArea = function (areaIndices, isSub) { + var $$ = this, config = $$.config, area = $$.d3.svg.area(), + getPoints = $$.generateGetAreaPoints(areaIndices, isSub), + yScaleGetter = isSub ? $$.getSubYScale : $$.getYScale, + xValue = function (d) { return (isSub ? $$.subxx : $$.xx).call($$, d); }, + value0 = function (d, i) { + return config.data_groups.length > 0 ? getPoints(d, i)[0][1] : yScaleGetter.call($$, d.id)($$.getAreaBaseValue(d.id)); + }, + value1 = function (d, i) { + return config.data_groups.length > 0 ? getPoints(d, i)[1][1] : yScaleGetter.call($$, d.id)(d.value); + }; + + area = config.axis_rotated ? area.x0(value0).x1(value1).y(xValue) : area.x(xValue).y0(value0).y1(value1); + if (!config.line_connectNull) { + area = area.defined(function (d) { return d.value !== null; }); + } + + return function (d) { + var values = config.line_connectNull ? $$.filterRemoveNull(d.values) : d.values, + x0 = 0, y0 = 0, path; + if ($$.isAreaType(d)) { + if ($$.isStepType(d)) { values = $$.convertValuesToStep(values); } + path = area.interpolate($$.getInterpolate(d))(values); + } else { + if (values[0]) { + x0 = $$.x(values[0].x); + y0 = $$.getYScale(d.id)(values[0].value); + } + path = config.axis_rotated ? "M " + y0 + " " + x0 : "M " + x0 + " " + y0; + } + return path ? path : "M 0 0"; + }; + }; + c3_chart_internal_fn.getAreaBaseValue = function () { + return 0; + }; + c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { // partial duplication of generateGetBarPoints + var $$ = this, config = $$.config, + areaTargetsNum = areaIndices.__max__ + 1, + x = $$.getShapeX(0, areaTargetsNum, areaIndices, !!isSub), + y = $$.getShapeY(!!isSub), + areaOffset = $$.getShapeOffset($$.isAreaType, areaIndices, !!isSub), + yScale = isSub ? $$.getSubYScale : $$.getYScale; + return function (d, i) { + var y0 = yScale.call($$, d.id)(0), + offset = areaOffset(d, i) || y0, // offset is for stacked area chart + posX = x(d), posY = y(d); + // fix posY not to overflow opposite quadrant + if (config.axis_rotated) { + if ((0 < d.value && posY < y0) || (d.value < 0 && y0 < posY)) { posY = y0; } + } + // 1 point that marks the area position + return [ + [posX, offset], + [posX, posY - (y0 - offset)], + [posX, posY - (y0 - offset)], // needed for compatibility + [posX, offset] // needed for compatibility + ]; + }; + }; + + + c3_chart_internal_fn.updateCircle = function () { + var $$ = this; + $$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle) + .data($$.lineOrScatterData.bind($$)); + $$.mainCircle.enter().append("circle") + .attr("class", $$.classCircle.bind($$)) + .attr("r", $$.pointR.bind($$)) + .style("fill", $$.color); + $$.mainCircle + .style("opacity", $$.initialOpacityForCircle.bind($$)); + $$.mainCircle.exit().remove(); + }; + c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) { + var selectedCircles = this.main.selectAll('.' + CLASS.selectedCircle); + return [ + (withTransition ? this.mainCircle.transition(Math.random().toString()) : this.mainCircle) + .style('opacity', this.opacityForCircle.bind(this)) + .style("fill", this.color) + .attr("cx", cx) + .attr("cy", cy), + (withTransition ? selectedCircles.transition(Math.random().toString()) : selectedCircles) + .attr("cx", cx) + .attr("cy", cy) + ]; + }; + c3_chart_internal_fn.circleX = function (d) { + return d.x || d.x === 0 ? this.x(d.x) : null; + }; + c3_chart_internal_fn.updateCircleY = function () { + var $$ = this, lineIndices, getPoints; + if ($$.config.data_groups.length > 0) { + lineIndices = $$.getShapeIndices($$.isLineType), + getPoints = $$.generateGetLinePoints(lineIndices); + $$.circleY = function (d, i) { + return getPoints(d, i)[0][1]; + }; + } else { + $$.circleY = function (d) { + return $$.getYScale(d.id)(d.value); + }; + } + }; + c3_chart_internal_fn.getCircles = function (i, id) { + var $$ = this; + return (id ? $$.main.selectAll('.' + CLASS.circles + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS.circle + (isValue(i) ? '-' + i : '')); + }; + c3_chart_internal_fn.expandCircles = function (i, id, reset) { + var $$ = this, + r = $$.pointExpandedR.bind($$); + if (reset) { $$.unexpandCircles(); } + $$.getCircles(i, id) + .classed(CLASS.EXPANDED, true) + .attr('r', r); + }; + c3_chart_internal_fn.unexpandCircles = function (i) { + var $$ = this, + r = $$.pointR.bind($$); + $$.getCircles(i) + .filter(function () { return $$.d3.select(this).classed(CLASS.EXPANDED); }) + .classed(CLASS.EXPANDED, false) + .attr('r', r); + }; + c3_chart_internal_fn.pointR = function (d) { + var $$ = this, config = $$.config; + return $$.isStepType(d) ? 0 : (isFunction(config.point_r) ? config.point_r(d) : config.point_r); + }; + c3_chart_internal_fn.pointExpandedR = function (d) { + var $$ = this, config = $$.config; + return config.point_focus_expand_enabled ? (config.point_focus_expand_r ? config.point_focus_expand_r : $$.pointR(d) * 1.75) : $$.pointR(d); + }; + c3_chart_internal_fn.pointSelectR = function (d) { + var $$ = this, config = $$.config; + return config.point_select_r ? config.point_select_r : $$.pointR(d) * 4; + }; + c3_chart_internal_fn.isWithinCircle = function (that, r) { + var d3 = this.d3, + mouse = d3.mouse(that), d3_this = d3.select(that), + cx = +d3_this.attr("cx"), cy = +d3_this.attr("cy"); + return Math.sqrt(Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)) < r; + }; + c3_chart_internal_fn.isWithinStep = function (that, y) { + return Math.abs(y - this.d3.mouse(that)[1]) < 30; + }; + + c3_chart_internal_fn.initBar = function () { + var $$ = this; + $$.main.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.chartBars); + }; + c3_chart_internal_fn.updateTargetsForBar = function (targets) { + var $$ = this, config = $$.config, + mainBarUpdate, mainBarEnter, + classChartBar = $$.classChartBar.bind($$), + classBars = $$.classBars.bind($$), + classFocus = $$.classFocus.bind($$); + mainBarUpdate = $$.main.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar) + .data(targets) + .attr('class', function (d) { return classChartBar(d) + classFocus(d); }); + mainBarEnter = mainBarUpdate.enter().append('g') + .attr('class', classChartBar) + .style('opacity', 0) + .style("pointer-events", "none"); + // Bars for each data + mainBarEnter.append('g') + .attr("class", classBars) + .style("cursor", function (d) { return config.data_selection_isselectable(d) ? "pointer" : null; }); + + }; + c3_chart_internal_fn.updateBar = function (durationForExit) { + var $$ = this, + barData = $$.barData.bind($$), + classBar = $$.classBar.bind($$), + initialOpacity = $$.initialOpacity.bind($$), + color = function (d) { return $$.color(d.id); }; + $$.mainBar = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) + .data(barData); + $$.mainBar.enter().append('path') + .attr("class", classBar) + .style("stroke", color) + .style("fill", color); + $$.mainBar + .style("opacity", initialOpacity); + $$.mainBar.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) { + return [ + (withTransition ? this.mainBar.transition(Math.random().toString()) : this.mainBar) + .attr('d', drawBar) + .style("fill", this.color) + .style("opacity", 1) + ]; + }; + c3_chart_internal_fn.getBarW = function (axis, barTargetsNum) { + var $$ = this, config = $$.config, + w = typeof config.bar_width === 'number' ? config.bar_width : barTargetsNum ? (axis.tickInterval() * config.bar_width_ratio) / barTargetsNum : 0; + return config.bar_width_max && w > config.bar_width_max ? config.bar_width_max : w; + }; + c3_chart_internal_fn.getBars = function (i, id) { + var $$ = this; + return (id ? $$.main.selectAll('.' + CLASS.bars + $$.getTargetSelectorSuffix(id)) : $$.main).selectAll('.' + CLASS.bar + (isValue(i) ? '-' + i : '')); + }; + c3_chart_internal_fn.expandBars = function (i, id, reset) { + var $$ = this; + if (reset) { $$.unexpandBars(); } + $$.getBars(i, id).classed(CLASS.EXPANDED, true); + }; + c3_chart_internal_fn.unexpandBars = function (i) { + var $$ = this; + $$.getBars(i).classed(CLASS.EXPANDED, false); + }; + c3_chart_internal_fn.generateDrawBar = function (barIndices, isSub) { + var $$ = this, config = $$.config, + getPoints = $$.generateGetBarPoints(barIndices, isSub); + return function (d, i) { + // 4 points that make a bar + var points = getPoints(d, i); + + // switch points if axis is rotated, not applicable for sub chart + var indexX = config.axis_rotated ? 1 : 0; + var indexY = config.axis_rotated ? 0 : 1; + + var path = 'M ' + points[0][indexX] + ',' + points[0][indexY] + ' ' + + 'L' + points[1][indexX] + ',' + points[1][indexY] + ' ' + + 'L' + points[2][indexX] + ',' + points[2][indexY] + ' ' + + 'L' + points[3][indexX] + ',' + points[3][indexY] + ' ' + + 'z'; + + return path; + }; + }; + c3_chart_internal_fn.generateGetBarPoints = function (barIndices, isSub) { + var $$ = this, + axis = isSub ? $$.subXAxis : $$.xAxis, + barTargetsNum = barIndices.__max__ + 1, + barW = $$.getBarW(axis, barTargetsNum), + barX = $$.getShapeX(barW, barTargetsNum, barIndices, !!isSub), + barY = $$.getShapeY(!!isSub), + barOffset = $$.getShapeOffset($$.isBarType, barIndices, !!isSub), + yScale = isSub ? $$.getSubYScale : $$.getYScale; + return function (d, i) { + var y0 = yScale.call($$, d.id)(0), + offset = barOffset(d, i) || y0, // offset is for stacked bar chart + posX = barX(d), posY = barY(d); + // fix posY not to overflow opposite quadrant + if ($$.config.axis_rotated) { + if ((0 < d.value && posY < y0) || (d.value < 0 && y0 < posY)) { posY = y0; } + } + // 4 points that make a bar + return [ + [posX, offset], + [posX, posY - (y0 - offset)], + [posX + barW, posY - (y0 - offset)], + [posX + barW, offset] + ]; + }; + }; + c3_chart_internal_fn.isWithinBar = function (that) { + var mouse = this.d3.mouse(that), box = that.getBoundingClientRect(), + seg0 = that.pathSegList.getItem(0), seg1 = that.pathSegList.getItem(1), + x = Math.min(seg0.x, seg1.x), y = Math.min(seg0.y, seg1.y), + w = box.width, h = box.height, offset = 2, + sx = x - offset, ex = x + w + offset, sy = y + h + offset, ey = y - offset; + return sx < mouse[0] && mouse[0] < ex && ey < mouse[1] && mouse[1] < sy; + }; + + c3_chart_internal_fn.initText = function () { + var $$ = this; + $$.main.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.chartTexts); + $$.mainText = $$.d3.selectAll([]); + }; + c3_chart_internal_fn.updateTargetsForText = function (targets) { + var $$ = this, mainTextUpdate, mainTextEnter, + classChartText = $$.classChartText.bind($$), + classTexts = $$.classTexts.bind($$), + classFocus = $$.classFocus.bind($$); + mainTextUpdate = $$.main.select('.' + CLASS.chartTexts).selectAll('.' + CLASS.chartText) + .data(targets) + .attr('class', function (d) { return classChartText(d) + classFocus(d); }); + mainTextEnter = mainTextUpdate.enter().append('g') + .attr('class', classChartText) + .style('opacity', 0) + .style("pointer-events", "none"); + mainTextEnter.append('g') + .attr('class', classTexts); + }; + c3_chart_internal_fn.updateText = function (durationForExit) { + var $$ = this, config = $$.config, + barOrLineData = $$.barOrLineData.bind($$), + classText = $$.classText.bind($$); + $$.mainText = $$.main.selectAll('.' + CLASS.texts).selectAll('.' + CLASS.text) + .data(barOrLineData); + $$.mainText.enter().append('text') + .attr("class", classText) + .attr('text-anchor', function (d) { return config.axis_rotated ? (d.value < 0 ? 'end' : 'start') : 'middle'; }) + .style("stroke", 'none') + .style("fill", function (d) { return $$.color(d); }) + .style("fill-opacity", 0); + $$.mainText + .text(function (d, i, j) { return $$.dataLabelFormat(d.id)(d.value, d.id, i, j); }); + $$.mainText.exit() + .transition().duration(durationForExit) + .style('fill-opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawText = function (xForText, yForText, forFlow, withTransition) { + return [ + (withTransition ? this.mainText.transition() : this.mainText) + .attr('x', xForText) + .attr('y', yForText) + .style("fill", this.color) + .style("fill-opacity", forFlow ? 0 : this.opacityForText.bind(this)) + ]; + }; + c3_chart_internal_fn.getTextRect = function (text, cls, element) { + var dummy = this.d3.select('body').append('div').classed('c3', true), + svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), + font = this.d3.select(element).style('font'), + rect; + svg.selectAll('.dummy') + .data([text]) + .enter().append('text') + .classed(cls ? cls : "", true) + .style('font', font) + .text(text) + .each(function () { rect = this.getBoundingClientRect(); }); + dummy.remove(); + return rect; + }; + c3_chart_internal_fn.generateXYForText = function (areaIndices, barIndices, lineIndices, forX) { + var $$ = this, + getAreaPoints = $$.generateGetAreaPoints(areaIndices, false), + getBarPoints = $$.generateGetBarPoints(barIndices, false), + getLinePoints = $$.generateGetLinePoints(lineIndices, false), + getter = forX ? $$.getXForText : $$.getYForText; + return function (d, i) { + var getPoints = $$.isAreaType(d) ? getAreaPoints : $$.isBarType(d) ? getBarPoints : getLinePoints; + return getter.call($$, getPoints(d, i), d, this); + }; + }; + c3_chart_internal_fn.getXForText = function (points, d, textElement) { + var $$ = this, + box = textElement.getBoundingClientRect(), xPos, padding; + if ($$.config.axis_rotated) { + padding = $$.isBarType(d) ? 4 : 6; + xPos = points[2][1] + padding * (d.value < 0 ? -1 : 1); + } else { + xPos = $$.hasType('bar') ? (points[2][0] + points[0][0]) / 2 : points[0][0]; + } + // show labels regardless of the domain if value is null + if (d.value === null) { + if (xPos > $$.width) { + xPos = $$.width - box.width; + } else if (xPos < 0) { + xPos = 4; + } + } + return xPos; + }; + c3_chart_internal_fn.getYForText = function (points, d, textElement) { + var $$ = this, + box = textElement.getBoundingClientRect(), + yPos; + if ($$.config.axis_rotated) { + yPos = (points[0][0] + points[2][0] + box.height * 0.6) / 2; + } else { + yPos = points[2][1]; + if (d.value < 0 || (d.value === 0 && !$$.hasPositiveValue)) { + yPos += box.height; + if ($$.isBarType(d) && $$.isSafari()) { + yPos -= 3; + } + else if (!$$.isBarType(d) && $$.isChrome()) { + yPos += 3; + } + } else { + yPos += $$.isBarType(d) ? -3 : -6; + } + } + // show labels regardless of the domain if value is null + if (d.value === null && !$$.config.axis_rotated) { + if (yPos < box.height) { + yPos = box.height; + } else if (yPos > this.height) { + yPos = this.height - 4; + } + } + return yPos; + }; + + c3_chart_internal_fn.setTargetType = function (targetIds, type) { + var $$ = this, config = $$.config; + $$.mapToTargetIds(targetIds).forEach(function (id) { + $$.withoutFadeIn[id] = (type === config.data_types[id]); + config.data_types[id] = type; + }); + if (!targetIds) { + config.data_type = type; + } + }; + c3_chart_internal_fn.hasType = function (type, targets) { + var $$ = this, types = $$.config.data_types, has = false; + targets = targets || $$.data.targets; + if (targets && targets.length) { + targets.forEach(function (target) { + var t = types[target.id]; + if ((t && t.indexOf(type) >= 0) || (!t && type === 'line')) { + has = true; + } + }); + } else if (Object.keys(types).length) { + Object.keys(types).forEach(function (id) { + if (types[id] === type) { has = true; } + }); + } else { + has = $$.config.data_type === type; + } + return has; + }; + c3_chart_internal_fn.hasArcType = function (targets) { + return this.hasType('pie', targets) || this.hasType('donut', targets) || this.hasType('gauge', targets); + }; + c3_chart_internal_fn.isLineType = function (d) { + var config = this.config, id = isString(d) ? d : d.id; + return !config.data_types[id] || ['line', 'spline', 'area', 'area-spline', 'step', 'area-step'].indexOf(config.data_types[id]) >= 0; + }; + c3_chart_internal_fn.isStepType = function (d) { + var id = isString(d) ? d : d.id; + return ['step', 'area-step'].indexOf(this.config.data_types[id]) >= 0; + }; + c3_chart_internal_fn.isSplineType = function (d) { + var id = isString(d) ? d : d.id; + return ['spline', 'area-spline'].indexOf(this.config.data_types[id]) >= 0; + }; + c3_chart_internal_fn.isAreaType = function (d) { + var id = isString(d) ? d : d.id; + return ['area', 'area-spline', 'area-step'].indexOf(this.config.data_types[id]) >= 0; + }; + c3_chart_internal_fn.isBarType = function (d) { + var id = isString(d) ? d : d.id; + return this.config.data_types[id] === 'bar'; + }; + c3_chart_internal_fn.isScatterType = function (d) { + var id = isString(d) ? d : d.id; + return this.config.data_types[id] === 'scatter'; + }; + c3_chart_internal_fn.isPieType = function (d) { + var id = isString(d) ? d : d.id; + return this.config.data_types[id] === 'pie'; + }; + c3_chart_internal_fn.isGaugeType = function (d) { + var id = isString(d) ? d : d.id; + return this.config.data_types[id] === 'gauge'; + }; + c3_chart_internal_fn.isDonutType = function (d) { + var id = isString(d) ? d : d.id; + return this.config.data_types[id] === 'donut'; + }; + c3_chart_internal_fn.isArcType = function (d) { + return this.isPieType(d) || this.isDonutType(d) || this.isGaugeType(d); + }; + c3_chart_internal_fn.lineData = function (d) { + return this.isLineType(d) ? [d] : []; + }; + c3_chart_internal_fn.arcData = function (d) { + return this.isArcType(d.data) ? [d] : []; + }; + /* not used + function scatterData(d) { + return isScatterType(d) ? d.values : []; + } + */ + c3_chart_internal_fn.barData = function (d) { + return this.isBarType(d) ? d.values : []; + }; + c3_chart_internal_fn.lineOrScatterData = function (d) { + return this.isLineType(d) || this.isScatterType(d) ? d.values : []; + }; + c3_chart_internal_fn.barOrLineData = function (d) { + return this.isBarType(d) || this.isLineType(d) ? d.values : []; + }; + c3_chart_internal_fn.isInterpolationType = function (type) { + return ['linear', 'linear-closed', 'basis', 'basis-open', 'basis-closed', 'bundle', 'cardinal', 'cardinal-open', 'cardinal-closed', 'monotone'].indexOf(type) >= 0; + }; + + c3_chart_internal_fn.initGrid = function () { + var $$ = this, config = $$.config, d3 = $$.d3; + $$.grid = $$.main.append('g') + .attr("clip-path", $$.clipPathForGrid) + .attr('class', CLASS.grid); + if (config.grid_x_show) { + $$.grid.append("g").attr("class", CLASS.xgrids); + } + if (config.grid_y_show) { + $$.grid.append('g').attr('class', CLASS.ygrids); + } + if (config.grid_focus_show) { + $$.grid.append('g') + .attr("class", CLASS.xgridFocus) + .append('line') + .attr('class', CLASS.xgridFocus); + } + $$.xgrid = d3.selectAll([]); + if (!config.grid_lines_front) { $$.initGridLines(); } + }; + c3_chart_internal_fn.initGridLines = function () { + var $$ = this, d3 = $$.d3; + $$.gridLines = $$.main.append('g') + .attr("clip-path", $$.clipPathForGrid) + .attr('class', CLASS.grid + ' ' + CLASS.gridLines); + $$.gridLines.append('g').attr("class", CLASS.xgridLines); + $$.gridLines.append('g').attr('class', CLASS.ygridLines); + $$.xgridLines = d3.selectAll([]); + }; + c3_chart_internal_fn.updateXGrid = function (withoutUpdate) { + var $$ = this, config = $$.config, d3 = $$.d3, + xgridData = $$.generateGridData(config.grid_x_type, $$.x), + tickOffset = $$.isCategorized() ? $$.xAxis.tickOffset() : 0; + + $$.xgridAttr = config.axis_rotated ? { + 'x1': 0, + 'x2': $$.width, + 'y1': function (d) { return $$.x(d) - tickOffset; }, + 'y2': function (d) { return $$.x(d) - tickOffset; } + } : { + 'x1': function (d) { return $$.x(d) + tickOffset; }, + 'x2': function (d) { return $$.x(d) + tickOffset; }, + 'y1': 0, + 'y2': $$.height + }; + + $$.xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid) + .data(xgridData); + $$.xgrid.enter().append('line').attr("class", CLASS.xgrid); + if (!withoutUpdate) { + $$.xgrid.attr($$.xgridAttr) + .style("opacity", function () { return +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1') === (config.axis_rotated ? $$.height : 0) ? 0 : 1; }); + } + $$.xgrid.exit().remove(); + }; + + c3_chart_internal_fn.updateYGrid = function () { + var $$ = this, config = $$.config, + gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks); + $$.ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid) + .data(gridValues); + $$.ygrid.enter().append('line') + .attr('class', CLASS.ygrid); + $$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0) + .attr("x2", config.axis_rotated ? $$.y : $$.width) + .attr("y1", config.axis_rotated ? 0 : $$.y) + .attr("y2", config.axis_rotated ? $$.height : $$.y); + $$.ygrid.exit().remove(); + $$.smoothLines($$.ygrid, 'grid'); + }; + + c3_chart_internal_fn.gridTextAnchor = function (d) { + return d.position ? d.position : "end"; + }; + c3_chart_internal_fn.gridTextDx = function (d) { + return d.position === 'start' ? 4 : d.position === 'middle' ? 0 : -4; + }; + c3_chart_internal_fn.xGridTextX = function (d) { + return d.position === 'start' ? -this.height : d.position === 'middle' ? -this.height / 2 : 0; + }; + c3_chart_internal_fn.yGridTextX = function (d) { + return d.position === 'start' ? 0 : d.position === 'middle' ? this.width / 2 : this.width; + }; + c3_chart_internal_fn.updateGrid = function (duration) { + var $$ = this, main = $$.main, config = $$.config, + xgridLine, ygridLine, yv; + + // hide if arc type + $$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible'); + + main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden"); + if (config.grid_x_show) { + $$.updateXGrid(); + } + $$.xgridLines = main.select('.' + CLASS.xgridLines).selectAll('.' + CLASS.xgridLine) + .data(config.grid_x_lines); + // enter + xgridLine = $$.xgridLines.enter().append('g') + .attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); }); + xgridLine.append('line') + .style("opacity", 0); + xgridLine.append('text') + .attr("text-anchor", $$.gridTextAnchor) + .attr("transform", config.axis_rotated ? "" : "rotate(-90)") + .attr('dx', $$.gridTextDx) + .attr('dy', -5) + .style("opacity", 0); + // udpate + // done in d3.transition() of the end of this function + // exit + $$.xgridLines.exit().transition().duration(duration) + .style("opacity", 0) + .remove(); + + // Y-Grid + if (config.grid_y_show) { + $$.updateYGrid(); + } + $$.ygridLines = main.select('.' + CLASS.ygridLines).selectAll('.' + CLASS.ygridLine) + .data(config.grid_y_lines); + // enter + ygridLine = $$.ygridLines.enter().append('g') + .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); }); + ygridLine.append('line') + .style("opacity", 0); + ygridLine.append('text') + .attr("text-anchor", $$.gridTextAnchor) + .attr("transform", config.axis_rotated ? "rotate(-90)" : "") + .attr('dx', $$.gridTextDx) + .attr('dy', -5) + .style("opacity", 0); + // update + yv = $$.yv.bind($$); + $$.ygridLines.select('line') + .transition().duration(duration) + .attr("x1", config.axis_rotated ? yv : 0) + .attr("x2", config.axis_rotated ? yv : $$.width) + .attr("y1", config.axis_rotated ? 0 : yv) + .attr("y2", config.axis_rotated ? $$.height : yv) + .style("opacity", 1); + $$.ygridLines.select('text') + .transition().duration(duration) + .attr("x", config.axis_rotated ? $$.xGridTextX.bind($$) : $$.yGridTextX.bind($$)) + .attr("y", yv) + .text(function (d) { return d.text; }) + .style("opacity", 1); + // exit + $$.ygridLines.exit().transition().duration(duration) + .style("opacity", 0) + .remove(); + }; + c3_chart_internal_fn.redrawGrid = function (withTransition) { + var $$ = this, config = $$.config, xv = $$.xv.bind($$), + lines = $$.xgridLines.select('line'), + texts = $$.xgridLines.select('text'); + return [ + (withTransition ? lines.transition() : lines) + .attr("x1", config.axis_rotated ? 0 : xv) + .attr("x2", config.axis_rotated ? $$.width : xv) + .attr("y1", config.axis_rotated ? xv : 0) + .attr("y2", config.axis_rotated ? xv : $$.height) + .style("opacity", 1), + (withTransition ? texts.transition() : texts) + .attr("x", config.axis_rotated ? $$.yGridTextX.bind($$) : $$.xGridTextX.bind($$)) + .attr("y", xv) + .text(function (d) { return d.text; }) + .style("opacity", 1) + ]; + }; + c3_chart_internal_fn.showXGridFocus = function (selectedData) { + var $$ = this, config = $$.config, + dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); }), + focusEl = $$.main.selectAll('line.' + CLASS.xgridFocus), + xx = $$.xx.bind($$); + if (! config.tooltip_show) { return; } + // Hide when scatter plot exists + if ($$.hasType('scatter') || $$.hasArcType()) { return; } + focusEl + .style("visibility", "visible") + .data([dataToShow[0]]) + .attr(config.axis_rotated ? 'y1' : 'x1', xx) + .attr(config.axis_rotated ? 'y2' : 'x2', xx); + $$.smoothLines(focusEl, 'grid'); + }; + c3_chart_internal_fn.hideXGridFocus = function () { + this.main.select('line.' + CLASS.xgridFocus).style("visibility", "hidden"); + }; + c3_chart_internal_fn.updateXgridFocus = function () { + var $$ = this, config = $$.config; + $$.main.select('line.' + CLASS.xgridFocus) + .attr("x1", config.axis_rotated ? 0 : -10) + .attr("x2", config.axis_rotated ? $$.width : -10) + .attr("y1", config.axis_rotated ? -10 : 0) + .attr("y2", config.axis_rotated ? -10 : $$.height); + }; + c3_chart_internal_fn.generateGridData = function (type, scale) { + var $$ = this, + gridData = [], xDomain, firstYear, lastYear, i, + tickNum = $$.main.select("." + CLASS.axisX).selectAll('.tick').size(); + if (type === 'year') { + xDomain = $$.getXDomain(); + firstYear = xDomain[0].getFullYear(); + lastYear = xDomain[1].getFullYear(); + for (i = firstYear; i <= lastYear; i++) { + gridData.push(new Date(i + '-01-01 00:00:00')); + } + } else { + gridData = scale.ticks(10); + if (gridData.length > tickNum) { // use only int + gridData = gridData.filter(function (d) { return ("" + d).indexOf('.') < 0; }); + } + } + return gridData; + }; + c3_chart_internal_fn.getGridFilterToRemove = function (params) { + return params ? function (line) { + var found = false; + [].concat(params).forEach(function (param) { + if ((('value' in param && line.value === param.value) || ('class' in param && line['class'] === param['class']))) { + found = true; + } + }); + return found; + } : function () { return true; }; + }; + c3_chart_internal_fn.removeGridLines = function (params, forX) { + var $$ = this, config = $$.config, + toRemove = $$.getGridFilterToRemove(params), + toShow = function (line) { return !toRemove(line); }, + classLines = forX ? CLASS.xgridLines : CLASS.ygridLines, + classLine = forX ? CLASS.xgridLine : CLASS.ygridLine; + $$.main.select('.' + classLines).selectAll('.' + classLine).filter(toRemove) + .transition().duration(config.transition_duration) + .style('opacity', 0).remove(); + if (forX) { + config.grid_x_lines = config.grid_x_lines.filter(toShow); + } else { + config.grid_y_lines = config.grid_y_lines.filter(toShow); + } + }; + + c3_chart_internal_fn.initTooltip = function () { + var $$ = this, config = $$.config, i; + $$.tooltip = $$.selectChart + .style("position", "relative") + .append("div") + .attr('class', CLASS.tooltipContainer) + .style("position", "absolute") + .style("pointer-events", "none") + .style("display", "none"); + // Show tooltip if needed + if (config.tooltip_init_show) { + if ($$.isTimeSeries() && isString(config.tooltip_init_x)) { + config.tooltip_init_x = $$.parseDate(config.tooltip_init_x); + for (i = 0; i < $$.data.targets[0].values.length; i++) { + if (($$.data.targets[0].values[i].x - config.tooltip_init_x) === 0) { break; } + } + config.tooltip_init_x = i; + } + $$.tooltip.html(config.tooltip_contents.call($$, $$.data.targets.map(function (d) { + return $$.addName(d.values[config.tooltip_init_x]); + }), $$.axis.getXAxisTickFormat(), $$.getYFormat($$.hasArcType()), $$.color)); + $$.tooltip.style("top", config.tooltip_init_position.top) + .style("left", config.tooltip_init_position.left) + .style("display", "block"); + } + }; + c3_chart_internal_fn.getTooltipContent = function (d, defaultTitleFormat, defaultValueFormat, color) { + var $$ = this, config = $$.config, + titleFormat = config.tooltip_format_title || defaultTitleFormat, + nameFormat = config.tooltip_format_name || function (name) { return name; }, + valueFormat = config.tooltip_format_value || defaultValueFormat, + text, i, title, value, name, bgcolor, + orderAsc = $$.isOrderAsc(); + + if (config.data_groups.length === 0) { + d.sort(function(a,b){ + return orderAsc ? a.value - b.value : b.value - a.value; + }); + } else { + var ids = $$.orderTargets($$.data.targets).map(function (i) { + return i.id; + }); + d.sort(function(a, b) { + if (a.value > 0 && b.value > 0) { + return orderAsc ? ids.indexOf(a.id) - ids.indexOf(b.id) : ids.indexOf(b.id) - ids.indexOf(a.id); + } else { + return orderAsc ? a.value - b.value : b.value - a.value; + } + }); + } + + for (i = 0; i < d.length; i++) { + if (! (d[i] && (d[i].value || d[i].value === 0))) { continue; } + + if (! text) { + title = titleFormat ? titleFormat(d[i].x) : d[i].x; + text = "<table class='" + $$.CLASS.tooltip + "'>" + (title || title === 0 ? "<tr><th colspan='2'>" + title + "</th></tr>" : ""); + } + + value = valueFormat(d[i].value, d[i].ratio, d[i].id, d[i].index); + if (value !== undefined) { + // Skip elements when their name is set to null + if (d[i].name === null) { continue; } + name = nameFormat(d[i].name, d[i].ratio, d[i].id, d[i].index); + bgcolor = $$.levelColor ? $$.levelColor(d[i].value) : color(d[i].id); + + text += "<tr class='" + $$.CLASS.tooltipName + "-" + $$.getTargetSelectorSuffix(d[i].id) + "'>"; + text += "<td class='name'><span style='background-color:" + bgcolor + "'></span>" + name + "</td>"; + text += "<td class='value'>" + value + "</td>"; + text += "</tr>"; + } + } + return text + "</table>"; + }; + c3_chart_internal_fn.tooltipPosition = function (dataToShow, tWidth, tHeight, element) { + var $$ = this, config = $$.config, d3 = $$.d3; + var svgLeft, tooltipLeft, tooltipRight, tooltipTop, chartRight; + var forArc = $$.hasArcType(), + mouse = d3.mouse(element); + // Determin tooltip position + if (forArc) { + tooltipLeft = (($$.width - ($$.isLegendRight ? $$.getLegendWidth() : 0)) / 2) + mouse[0]; + tooltipTop = ($$.height / 2) + mouse[1] + 20; + } else { + svgLeft = $$.getSvgLeft(true); + if (config.axis_rotated) { + tooltipLeft = svgLeft + mouse[0] + 100; + tooltipRight = tooltipLeft + tWidth; + chartRight = $$.currentWidth - $$.getCurrentPaddingRight(); + tooltipTop = $$.x(dataToShow[0].x) + 20; + } else { + tooltipLeft = svgLeft + $$.getCurrentPaddingLeft(true) + $$.x(dataToShow[0].x) + 20; + tooltipRight = tooltipLeft + tWidth; + chartRight = svgLeft + $$.currentWidth - $$.getCurrentPaddingRight(); + tooltipTop = mouse[1] + 15; + } + + if (tooltipRight > chartRight) { + // 20 is needed for Firefox to keep tooltip width + tooltipLeft -= tooltipRight - chartRight + 20; + } + if (tooltipTop + tHeight > $$.currentHeight) { + tooltipTop -= tHeight + 30; + } + } + if (tooltipTop < 0) { + tooltipTop = 0; + } + return {top: tooltipTop, left: tooltipLeft}; + }; + c3_chart_internal_fn.showTooltip = function (selectedData, element) { + var $$ = this, config = $$.config; + var tWidth, tHeight, position; + var forArc = $$.hasArcType(), + dataToShow = selectedData.filter(function (d) { return d && isValue(d.value); }), + positionFunction = config.tooltip_position || c3_chart_internal_fn.tooltipPosition; + if (dataToShow.length === 0 || !config.tooltip_show) { + return; + } + $$.tooltip.html(config.tooltip_contents.call($$, selectedData, $$.axis.getXAxisTickFormat(), $$.getYFormat(forArc), $$.color)).style("display", "block"); + + // Get tooltip dimensions + tWidth = $$.tooltip.property('offsetWidth'); + tHeight = $$.tooltip.property('offsetHeight'); + + position = positionFunction.call(this, dataToShow, tWidth, tHeight, element); + // Set tooltip + $$.tooltip + .style("top", position.top + "px") + .style("left", position.left + 'px'); + }; + c3_chart_internal_fn.hideTooltip = function () { + this.tooltip.style("display", "none"); + }; + + c3_chart_internal_fn.initLegend = function () { + var $$ = this; + $$.legendItemTextBox = {}; + $$.legendHasRendered = false; + $$.legend = $$.svg.append("g").attr("transform", $$.getTranslate('legend')); + if (!$$.config.legend_show) { + $$.legend.style('visibility', 'hidden'); + $$.hiddenLegendIds = $$.mapToIds($$.data.targets); + return; + } + // MEMO: call here to update legend box and tranlate for all + // MEMO: translate will be upated by this, so transform not needed in updateLegend() + $$.updateLegendWithDefaults(); + }; + c3_chart_internal_fn.updateLegendWithDefaults = function () { + var $$ = this; + $$.updateLegend($$.mapToIds($$.data.targets), {withTransform: false, withTransitionForTransform: false, withTransition: false}); + }; + c3_chart_internal_fn.updateSizeForLegend = function (legendHeight, legendWidth) { + var $$ = this, config = $$.config, insetLegendPosition = { + top: $$.isLegendTop ? $$.getCurrentPaddingTop() + config.legend_inset_y + 5.5 : $$.currentHeight - legendHeight - $$.getCurrentPaddingBottom() - config.legend_inset_y, + left: $$.isLegendLeft ? $$.getCurrentPaddingLeft() + config.legend_inset_x + 0.5 : $$.currentWidth - legendWidth - $$.getCurrentPaddingRight() - config.legend_inset_x + 0.5 + }; + + $$.margin3 = { + top: $$.isLegendRight ? 0 : $$.isLegendInset ? insetLegendPosition.top : $$.currentHeight - legendHeight, + right: NaN, + bottom: 0, + left: $$.isLegendRight ? $$.currentWidth - legendWidth : $$.isLegendInset ? insetLegendPosition.left : 0 + }; + }; + c3_chart_internal_fn.transformLegend = function (withTransition) { + var $$ = this; + (withTransition ? $$.legend.transition() : $$.legend).attr("transform", $$.getTranslate('legend')); + }; + c3_chart_internal_fn.updateLegendStep = function (step) { + this.legendStep = step; + }; + c3_chart_internal_fn.updateLegendItemWidth = function (w) { + this.legendItemWidth = w; + }; + c3_chart_internal_fn.updateLegendItemHeight = function (h) { + this.legendItemHeight = h; + }; + c3_chart_internal_fn.getLegendWidth = function () { + var $$ = this; + return $$.config.legend_show ? $$.isLegendRight || $$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0; + }; + c3_chart_internal_fn.getLegendHeight = function () { + var $$ = this, h = 0; + if ($$.config.legend_show) { + if ($$.isLegendRight) { + h = $$.currentHeight; + } else { + h = Math.max(20, $$.legendItemHeight) * ($$.legendStep + 1); + } + } + return h; + }; + c3_chart_internal_fn.opacityForLegend = function (legendItem) { + return legendItem.classed(CLASS.legendItemHidden) ? null : 1; + }; + c3_chart_internal_fn.opacityForUnfocusedLegend = function (legendItem) { + return legendItem.classed(CLASS.legendItemHidden) ? null : 0.3; + }; + c3_chart_internal_fn.toggleFocusLegend = function (targetIds, focus) { + var $$ = this; + targetIds = $$.mapToTargetIds(targetIds); + $$.legend.selectAll('.' + CLASS.legendItem) + .filter(function (id) { return targetIds.indexOf(id) >= 0; }) + .classed(CLASS.legendItemFocused, focus) + .transition().duration(100) + .style('opacity', function () { + var opacity = focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend; + return opacity.call($$, $$.d3.select(this)); + }); + }; + c3_chart_internal_fn.revertLegend = function () { + var $$ = this, d3 = $$.d3; + $$.legend.selectAll('.' + CLASS.legendItem) + .classed(CLASS.legendItemFocused, false) + .transition().duration(100) + .style('opacity', function () { return $$.opacityForLegend(d3.select(this)); }); + }; + c3_chart_internal_fn.showLegend = function (targetIds) { + var $$ = this, config = $$.config; + if (!config.legend_show) { + config.legend_show = true; + $$.legend.style('visibility', 'visible'); + if (!$$.legendHasRendered) { + $$.updateLegendWithDefaults(); + } + } + $$.removeHiddenLegendIds(targetIds); + $$.legend.selectAll($$.selectorLegends(targetIds)) + .style('visibility', 'visible') + .transition() + .style('opacity', function () { return $$.opacityForLegend($$.d3.select(this)); }); + }; + c3_chart_internal_fn.hideLegend = function (targetIds) { + var $$ = this, config = $$.config; + if (config.legend_show && isEmpty(targetIds)) { + config.legend_show = false; + $$.legend.style('visibility', 'hidden'); + } + $$.addHiddenLegendIds(targetIds); + $$.legend.selectAll($$.selectorLegends(targetIds)) + .style('opacity', 0) + .style('visibility', 'hidden'); + }; + c3_chart_internal_fn.clearLegendItemTextBoxCache = function () { + this.legendItemTextBox = {}; + }; + c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) { + var $$ = this, config = $$.config; + var xForLegend, xForLegendText, xForLegendRect, yForLegend, yForLegendText, yForLegendRect, x1ForLegendTile, x2ForLegendTile, yForLegendTile; + var paddingTop = 4, paddingRight = 10, maxWidth = 0, maxHeight = 0, posMin = 10, tileWidth = config.legend_item_tile_width + 5; + var l, totalLength = 0, offsets = {}, widths = {}, heights = {}, margins = [0], steps = {}, step = 0; + var withTransition, withTransitionForTransform; + var texts, rects, tiles, background; + + // Skip elements when their name is set to null + targetIds = targetIds.filter(function(id) { + return !isDefined(config.data_names[id]) || config.data_names[id] !== null; + }); + + options = options || {}; + withTransition = getOption(options, "withTransition", true); + withTransitionForTransform = getOption(options, "withTransitionForTransform", true); + + function getTextBox(textElement, id) { + if (!$$.legendItemTextBox[id]) { + $$.legendItemTextBox[id] = $$.getTextRect(textElement.textContent, CLASS.legendItem, textElement); + } + return $$.legendItemTextBox[id]; + } + + function updatePositions(textElement, id, index) { + var reset = index === 0, isLast = index === targetIds.length - 1, + box = getTextBox(textElement, id), + itemWidth = box.width + tileWidth + (isLast && !($$.isLegendRight || $$.isLegendInset) ? 0 : paddingRight) + config.legend_padding, + itemHeight = box.height + paddingTop, + itemLength = $$.isLegendRight || $$.isLegendInset ? itemHeight : itemWidth, + areaLength = $$.isLegendRight || $$.isLegendInset ? $$.getLegendHeight() : $$.getLegendWidth(), + margin, maxLength; + + // MEMO: care about condifion of step, totalLength + function updateValues(id, withoutStep) { + if (!withoutStep) { + margin = (areaLength - totalLength - itemLength) / 2; + if (margin < posMin) { + margin = (areaLength - itemLength) / 2; + totalLength = 0; + step++; + } + } + steps[id] = step; + margins[step] = $$.isLegendInset ? 10 : margin; + offsets[id] = totalLength; + totalLength += itemLength; + } + + if (reset) { + totalLength = 0; + step = 0; + maxWidth = 0; + maxHeight = 0; + } + + if (config.legend_show && !$$.isLegendToShow(id)) { + widths[id] = heights[id] = steps[id] = offsets[id] = 0; + return; + } + + widths[id] = itemWidth; + heights[id] = itemHeight; + + if (!maxWidth || itemWidth >= maxWidth) { maxWidth = itemWidth; } + if (!maxHeight || itemHeight >= maxHeight) { maxHeight = itemHeight; } + maxLength = $$.isLegendRight || $$.isLegendInset ? maxHeight : maxWidth; + + if (config.legend_equally) { + Object.keys(widths).forEach(function (id) { widths[id] = maxWidth; }); + Object.keys(heights).forEach(function (id) { heights[id] = maxHeight; }); + margin = (areaLength - maxLength * targetIds.length) / 2; + if (margin < posMin) { + totalLength = 0; + step = 0; + targetIds.forEach(function (id) { updateValues(id); }); + } + else { + updateValues(id, true); + } + } else { + updateValues(id); + } + } + + if ($$.isLegendInset) { + step = config.legend_inset_step ? config.legend_inset_step : targetIds.length; + $$.updateLegendStep(step); + } + + if ($$.isLegendRight) { + xForLegend = function (id) { return maxWidth * steps[id]; }; + yForLegend = function (id) { return margins[steps[id]] + offsets[id]; }; + } else if ($$.isLegendInset) { + xForLegend = function (id) { return maxWidth * steps[id] + 10; }; + yForLegend = function (id) { return margins[steps[id]] + offsets[id]; }; + } else { + xForLegend = function (id) { return margins[steps[id]] + offsets[id]; }; + yForLegend = function (id) { return maxHeight * steps[id]; }; + } + xForLegendText = function (id, i) { return xForLegend(id, i) + 4 + config.legend_item_tile_width; }; + yForLegendText = function (id, i) { return yForLegend(id, i) + 9; }; + xForLegendRect = function (id, i) { return xForLegend(id, i); }; + yForLegendRect = function (id, i) { return yForLegend(id, i) - 5; }; + x1ForLegendTile = function (id, i) { return xForLegend(id, i) - 2; }; + x2ForLegendTile = function (id, i) { return xForLegend(id, i) - 2 + config.legend_item_tile_width; }; + yForLegendTile = function (id, i) { return yForLegend(id, i) + 4; }; + + // Define g for legend area + l = $$.legend.selectAll('.' + CLASS.legendItem) + .data(targetIds) + .enter().append('g') + .attr('class', function (id) { return $$.generateClass(CLASS.legendItem, id); }) + .style('visibility', function (id) { return $$.isLegendToShow(id) ? 'visible' : 'hidden'; }) + .style('cursor', 'pointer') + .on('click', function (id) { + if (config.legend_item_onclick) { + config.legend_item_onclick.call($$, id); + } else { + if ($$.d3.event.altKey) { + $$.api.hide(); + $$.api.show(id); + } else { + $$.api.toggle(id); + $$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert(); + } + } + }) + .on('mouseover', function (id) { + if (config.legend_item_onmouseover) { + config.legend_item_onmouseover.call($$, id); + } + else { + $$.d3.select(this).classed(CLASS.legendItemFocused, true); + if (!$$.transiting && $$.isTargetToShow(id)) { + $$.api.focus(id); + } + } + }) + .on('mouseout', function (id) { + if (config.legend_item_onmouseout) { + config.legend_item_onmouseout.call($$, id); + } + else { + $$.d3.select(this).classed(CLASS.legendItemFocused, false); + $$.api.revert(); + } + }); + l.append('text') + .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) + .each(function (id, i) { updatePositions(this, id, i); }) + .style("pointer-events", "none") + .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendText : -200) + .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendText); + l.append('rect') + .attr("class", CLASS.legendItemEvent) + .style('fill-opacity', 0) + .attr('x', $$.isLegendRight || $$.isLegendInset ? xForLegendRect : -200) + .attr('y', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendRect); + l.append('line') + .attr('class', CLASS.legendItemTile) + .style('stroke', $$.color) + .style("pointer-events", "none") + .attr('x1', $$.isLegendRight || $$.isLegendInset ? x1ForLegendTile : -200) + .attr('y1', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendTile) + .attr('x2', $$.isLegendRight || $$.isLegendInset ? x2ForLegendTile : -200) + .attr('y2', $$.isLegendRight || $$.isLegendInset ? -200 : yForLegendTile) + .attr('stroke-width', config.legend_item_tile_height); + + // Set background for inset legend + background = $$.legend.select('.' + CLASS.legendBackground + ' rect'); + if ($$.isLegendInset && maxWidth > 0 && background.size() === 0) { + background = $$.legend.insert('g', '.' + CLASS.legendItem) + .attr("class", CLASS.legendBackground) + .append('rect'); + } + + texts = $$.legend.selectAll('text') + .data(targetIds) + .text(function (id) { return isDefined(config.data_names[id]) ? config.data_names[id] : id; }) // MEMO: needed for update + .each(function (id, i) { updatePositions(this, id, i); }); + (withTransition ? texts.transition() : texts) + .attr('x', xForLegendText) + .attr('y', yForLegendText); + + rects = $$.legend.selectAll('rect.' + CLASS.legendItemEvent) + .data(targetIds); + (withTransition ? rects.transition() : rects) + .attr('width', function (id) { return widths[id]; }) + .attr('height', function (id) { return heights[id]; }) + .attr('x', xForLegendRect) + .attr('y', yForLegendRect); + + tiles = $$.legend.selectAll('line.' + CLASS.legendItemTile) + .data(targetIds); + (withTransition ? tiles.transition() : tiles) + .style('stroke', $$.color) + .attr('x1', x1ForLegendTile) + .attr('y1', yForLegendTile) + .attr('x2', x2ForLegendTile) + .attr('y2', yForLegendTile); + + if (background) { + (withTransition ? background.transition() : background) + .attr('height', $$.getLegendHeight() - 12) + .attr('width', maxWidth * (step + 1) + 10); + } + + // toggle legend state + $$.legend.selectAll('.' + CLASS.legendItem) + .classed(CLASS.legendItemHidden, function (id) { return !$$.isTargetToShow(id); }); + + // Update all to reflect change of legend + $$.updateLegendItemWidth(maxWidth); + $$.updateLegendItemHeight(maxHeight); + $$.updateLegendStep(step); + // Update size and scale + $$.updateSizes(); + $$.updateScales(); + $$.updateSvgSize(); + // Update g positions + $$.transformAll(withTransitionForTransform, transitions); + $$.legendHasRendered = true; + }; + + c3_chart_internal_fn.initTitle = function () { + var $$ = this; + $$.title = $$.svg.append("text") + .text($$.config.title_text) + .attr("class", $$.CLASS.title); + }; + c3_chart_internal_fn.redrawTitle = function () { + var $$ = this; + $$.title + .attr("x", $$.xForTitle.bind($$)) + .attr("y", $$.yForTitle.bind($$)); + }; + c3_chart_internal_fn.xForTitle = function () { + var $$ = this, config = $$.config, position = config.title_position || 'left', x; + if (position.indexOf('right') >= 0) { + x = $$.currentWidth - $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).width - config.title_padding.right; + } else if (position.indexOf('center') >= 0) { + x = ($$.currentWidth - $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).width) / 2; + } else { // left + x = config.title_padding.left; + } + return x; + }; + c3_chart_internal_fn.yForTitle = function () { + var $$ = this; + return $$.config.title_padding.top + $$.getTextRect($$.title.node().textContent, $$.CLASS.title, $$.title.node()).height; + }; + c3_chart_internal_fn.getTitlePadding = function() { + var $$ = this; + return $$.yForTitle() + $$.config.title_padding.bottom; + }; + + function Axis(owner) { + API.call(this, owner); + } + + inherit(API, Axis); + + Axis.prototype.init = function init() { + + var $$ = this.owner, config = $$.config, main = $$.main; + $$.axes.x = main.append("g") + .attr("class", CLASS.axis + ' ' + CLASS.axisX) + .attr("clip-path", $$.clipPathForXAxis) + .attr("transform", $$.getTranslate('x')) + .style("visibility", config.axis_x_show ? 'visible' : 'hidden'); + $$.axes.x.append("text") + .attr("class", CLASS.axisXLabel) + .attr("transform", config.axis_rotated ? "rotate(-90)" : "") + .style("text-anchor", this.textAnchorForXAxisLabel.bind(this)); + $$.axes.y = main.append("g") + .attr("class", CLASS.axis + ' ' + CLASS.axisY) + .attr("clip-path", config.axis_y_inner ? "" : $$.clipPathForYAxis) + .attr("transform", $$.getTranslate('y')) + .style("visibility", config.axis_y_show ? 'visible' : 'hidden'); + $$.axes.y.append("text") + .attr("class", CLASS.axisYLabel) + .attr("transform", config.axis_rotated ? "" : "rotate(-90)") + .style("text-anchor", this.textAnchorForYAxisLabel.bind(this)); + + $$.axes.y2 = main.append("g") + .attr("class", CLASS.axis + ' ' + CLASS.axisY2) + // clip-path? + .attr("transform", $$.getTranslate('y2')) + .style("visibility", config.axis_y2_show ? 'visible' : 'hidden'); + $$.axes.y2.append("text") + .attr("class", CLASS.axisY2Label) + .attr("transform", config.axis_rotated ? "" : "rotate(-90)") + .style("text-anchor", this.textAnchorForY2AxisLabel.bind(this)); + }; + Axis.prototype.getXAxis = function getXAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition, withoutRotateTickText) { + var $$ = this.owner, config = $$.config, + axisParams = { + isCategory: $$.isCategorized(), + withOuterTick: withOuterTick, + tickMultiline: config.axis_x_tick_multiline, + tickWidth: config.axis_x_tick_width, + tickTextRotate: withoutRotateTickText ? 0 : config.axis_x_tick_rotate, + withoutTransition: withoutTransition, + }, + axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient); + + if ($$.isTimeSeries() && tickValues && typeof tickValues !== "function") { + tickValues = tickValues.map(function (v) { return $$.parseDate(v); }); + } + + // Set tick + axis.tickFormat(tickFormat).tickValues(tickValues); + if ($$.isCategorized()) { + axis.tickCentered(config.axis_x_tick_centered); + if (isEmpty(config.axis_x_tick_culling)) { + config.axis_x_tick_culling = false; + } + } + + return axis; + }; + Axis.prototype.updateXAxisTickValues = function updateXAxisTickValues(targets, axis) { + var $$ = this.owner, config = $$.config, tickValues; + if (config.axis_x_tick_fit || config.axis_x_tick_count) { + tickValues = this.generateTickValues($$.mapTargetsToUniqueXs(targets), config.axis_x_tick_count, $$.isTimeSeries()); + } + if (axis) { + axis.tickValues(tickValues); + } else { + $$.xAxis.tickValues(tickValues); + $$.subXAxis.tickValues(tickValues); + } + return tickValues; + }; + Axis.prototype.getYAxis = function getYAxis(scale, orient, tickFormat, tickValues, withOuterTick, withoutTransition) { + var axisParams = { + withOuterTick: withOuterTick, + withoutTransition: withoutTransition, + }, + $$ = this.owner, + d3 = $$.d3, + config = $$.config, + axis = c3_axis(d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat); + if ($$.isTimeSeriesY()) { + axis.ticks(d3.time[config.axis_y_tick_time_value], config.axis_y_tick_time_interval); + } else { + axis.tickValues(tickValues); + } + return axis; + }; + Axis.prototype.getId = function getId(id) { + var config = this.owner.config; + return id in config.data_axes ? config.data_axes[id] : 'y'; + }; + Axis.prototype.getXAxisTickFormat = function getXAxisTickFormat() { + var $$ = this.owner, config = $$.config, + format = $$.isTimeSeries() ? $$.defaultAxisTimeFormat : $$.isCategorized() ? $$.categoryName : function (v) { return v < 0 ? v.toFixed(0) : v; }; + if (config.axis_x_tick_format) { + if (isFunction(config.axis_x_tick_format)) { + format = config.axis_x_tick_format; + } else if ($$.isTimeSeries()) { + format = function (date) { + return date ? $$.axisTimeFormat(config.axis_x_tick_format)(date) : ""; + }; + } + } + return isFunction(format) ? function (v) { return format.call($$, v); } : format; + }; + Axis.prototype.getTickValues = function getTickValues(tickValues, axis) { + return tickValues ? tickValues : axis ? axis.tickValues() : undefined; + }; + Axis.prototype.getXAxisTickValues = function getXAxisTickValues() { + return this.getTickValues(this.owner.config.axis_x_tick_values, this.owner.xAxis); + }; + Axis.prototype.getYAxisTickValues = function getYAxisTickValues() { + return this.getTickValues(this.owner.config.axis_y_tick_values, this.owner.yAxis); + }; + Axis.prototype.getY2AxisTickValues = function getY2AxisTickValues() { + return this.getTickValues(this.owner.config.axis_y2_tick_values, this.owner.y2Axis); + }; + Axis.prototype.getLabelOptionByAxisId = function getLabelOptionByAxisId(axisId) { + var $$ = this.owner, config = $$.config, option; + if (axisId === 'y') { + option = config.axis_y_label; + } else if (axisId === 'y2') { + option = config.axis_y2_label; + } else if (axisId === 'x') { + option = config.axis_x_label; + } + return option; + }; + Axis.prototype.getLabelText = function getLabelText(axisId) { + var option = this.getLabelOptionByAxisId(axisId); + return isString(option) ? option : option ? option.text : null; + }; + Axis.prototype.setLabelText = function setLabelText(axisId, text) { + var $$ = this.owner, config = $$.config, + option = this.getLabelOptionByAxisId(axisId); + if (isString(option)) { + if (axisId === 'y') { + config.axis_y_label = text; + } else if (axisId === 'y2') { + config.axis_y2_label = text; + } else if (axisId === 'x') { + config.axis_x_label = text; + } + } else if (option) { + option.text = text; + } + }; + Axis.prototype.getLabelPosition = function getLabelPosition(axisId, defaultPosition) { + var option = this.getLabelOptionByAxisId(axisId), + position = (option && typeof option === 'object' && option.position) ? option.position : defaultPosition; + return { + isInner: position.indexOf('inner') >= 0, + isOuter: position.indexOf('outer') >= 0, + isLeft: position.indexOf('left') >= 0, + isCenter: position.indexOf('center') >= 0, + isRight: position.indexOf('right') >= 0, + isTop: position.indexOf('top') >= 0, + isMiddle: position.indexOf('middle') >= 0, + isBottom: position.indexOf('bottom') >= 0 + }; + }; + Axis.prototype.getXAxisLabelPosition = function getXAxisLabelPosition() { + return this.getLabelPosition('x', this.owner.config.axis_rotated ? 'inner-top' : 'inner-right'); + }; + Axis.prototype.getYAxisLabelPosition = function getYAxisLabelPosition() { + return this.getLabelPosition('y', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top'); + }; + Axis.prototype.getY2AxisLabelPosition = function getY2AxisLabelPosition() { + return this.getLabelPosition('y2', this.owner.config.axis_rotated ? 'inner-right' : 'inner-top'); + }; + Axis.prototype.getLabelPositionById = function getLabelPositionById(id) { + return id === 'y2' ? this.getY2AxisLabelPosition() : id === 'y' ? this.getYAxisLabelPosition() : this.getXAxisLabelPosition(); + }; + Axis.prototype.textForXAxisLabel = function textForXAxisLabel() { + return this.getLabelText('x'); + }; + Axis.prototype.textForYAxisLabel = function textForYAxisLabel() { + return this.getLabelText('y'); + }; + Axis.prototype.textForY2AxisLabel = function textForY2AxisLabel() { + return this.getLabelText('y2'); + }; + Axis.prototype.xForAxisLabel = function xForAxisLabel(forHorizontal, position) { + var $$ = this.owner; + if (forHorizontal) { + return position.isLeft ? 0 : position.isCenter ? $$.width / 2 : $$.width; + } else { + return position.isBottom ? -$$.height : position.isMiddle ? -$$.height / 2 : 0; + } + }; + Axis.prototype.dxForAxisLabel = function dxForAxisLabel(forHorizontal, position) { + if (forHorizontal) { + return position.isLeft ? "0.5em" : position.isRight ? "-0.5em" : "0"; + } else { + return position.isTop ? "-0.5em" : position.isBottom ? "0.5em" : "0"; + } + }; + Axis.prototype.textAnchorForAxisLabel = function textAnchorForAxisLabel(forHorizontal, position) { + if (forHorizontal) { + return position.isLeft ? 'start' : position.isCenter ? 'middle' : 'end'; + } else { + return position.isBottom ? 'start' : position.isMiddle ? 'middle' : 'end'; + } + }; + Axis.prototype.xForXAxisLabel = function xForXAxisLabel() { + return this.xForAxisLabel(!this.owner.config.axis_rotated, this.getXAxisLabelPosition()); + }; + Axis.prototype.xForYAxisLabel = function xForYAxisLabel() { + return this.xForAxisLabel(this.owner.config.axis_rotated, this.getYAxisLabelPosition()); + }; + Axis.prototype.xForY2AxisLabel = function xForY2AxisLabel() { + return this.xForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition()); + }; + Axis.prototype.dxForXAxisLabel = function dxForXAxisLabel() { + return this.dxForAxisLabel(!this.owner.config.axis_rotated, this.getXAxisLabelPosition()); + }; + Axis.prototype.dxForYAxisLabel = function dxForYAxisLabel() { + return this.dxForAxisLabel(this.owner.config.axis_rotated, this.getYAxisLabelPosition()); + }; + Axis.prototype.dxForY2AxisLabel = function dxForY2AxisLabel() { + return this.dxForAxisLabel(this.owner.config.axis_rotated, this.getY2AxisLabelPosition()); + }; + Axis.prototype.dyForXAxisLabel = function dyForXAxisLabel() { + var $$ = this.owner, config = $$.config, + position = this.getXAxisLabelPosition(); + if (config.axis_rotated) { + return position.isInner ? "1.2em" : -25 - this.getMaxTickWidth('x'); + } else { + return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em"; + } + }; + Axis.prototype.dyForYAxisLabel = function dyForYAxisLabel() { + var $$ = this.owner, + position = this.getYAxisLabelPosition(); + if ($$.config.axis_rotated) { + return position.isInner ? "-0.5em" : "3em"; + } else { + return position.isInner ? "1.2em" : -10 - ($$.config.axis_y_inner ? 0 : (this.getMaxTickWidth('y') + 10)); + } + }; + Axis.prototype.dyForY2AxisLabel = function dyForY2AxisLabel() { + var $$ = this.owner, + position = this.getY2AxisLabelPosition(); + if ($$.config.axis_rotated) { + return position.isInner ? "1.2em" : "-2.2em"; + } else { + return position.isInner ? "-0.5em" : 15 + ($$.config.axis_y2_inner ? 0 : (this.getMaxTickWidth('y2') + 15)); + } + }; + Axis.prototype.textAnchorForXAxisLabel = function textAnchorForXAxisLabel() { + var $$ = this.owner; + return this.textAnchorForAxisLabel(!$$.config.axis_rotated, this.getXAxisLabelPosition()); + }; + Axis.prototype.textAnchorForYAxisLabel = function textAnchorForYAxisLabel() { + var $$ = this.owner; + return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getYAxisLabelPosition()); + }; + Axis.prototype.textAnchorForY2AxisLabel = function textAnchorForY2AxisLabel() { + var $$ = this.owner; + return this.textAnchorForAxisLabel($$.config.axis_rotated, this.getY2AxisLabelPosition()); + }; + Axis.prototype.getMaxTickWidth = function getMaxTickWidth(id, withoutRecompute) { + var $$ = this.owner, config = $$.config, + maxWidth = 0, targetsToShow, scale, axis, dummy, svg; + if (withoutRecompute && $$.currentMaxTickWidths[id]) { + return $$.currentMaxTickWidths[id]; + } + if ($$.svg) { + targetsToShow = $$.filterTargetsToShow($$.data.targets); + if (id === 'y') { + scale = $$.y.copy().domain($$.getYDomain(targetsToShow, 'y')); + axis = this.getYAxis(scale, $$.yOrient, config.axis_y_tick_format, $$.yAxisTickValues, false, true); + } else if (id === 'y2') { + scale = $$.y2.copy().domain($$.getYDomain(targetsToShow, 'y2')); + axis = this.getYAxis(scale, $$.y2Orient, config.axis_y2_tick_format, $$.y2AxisTickValues, false, true); + } else { + scale = $$.x.copy().domain($$.getXDomain(targetsToShow)); + axis = this.getXAxis(scale, $$.xOrient, $$.xAxisTickFormat, $$.xAxisTickValues, false, true, true); + this.updateXAxisTickValues(targetsToShow, axis); + } + dummy = $$.d3.select('body').append('div').classed('c3', true); + svg = dummy.append("svg").style('visibility', 'hidden').style('position', 'fixed').style('top', 0).style('left', 0), + svg.append('g').call(axis).each(function () { + $$.d3.select(this).selectAll('text').each(function () { + var box = this.getBoundingClientRect(); + if (maxWidth < box.width) { maxWidth = box.width; } + }); + dummy.remove(); + }); + } + $$.currentMaxTickWidths[id] = maxWidth <= 0 ? $$.currentMaxTickWidths[id] : maxWidth; + return $$.currentMaxTickWidths[id]; + }; + + Axis.prototype.updateLabels = function updateLabels(withTransition) { + var $$ = this.owner; + var axisXLabel = $$.main.select('.' + CLASS.axisX + ' .' + CLASS.axisXLabel), + axisYLabel = $$.main.select('.' + CLASS.axisY + ' .' + CLASS.axisYLabel), + axisY2Label = $$.main.select('.' + CLASS.axisY2 + ' .' + CLASS.axisY2Label); + (withTransition ? axisXLabel.transition() : axisXLabel) + .attr("x", this.xForXAxisLabel.bind(this)) + .attr("dx", this.dxForXAxisLabel.bind(this)) + .attr("dy", this.dyForXAxisLabel.bind(this)) + .text(this.textForXAxisLabel.bind(this)); + (withTransition ? axisYLabel.transition() : axisYLabel) + .attr("x", this.xForYAxisLabel.bind(this)) + .attr("dx", this.dxForYAxisLabel.bind(this)) + .attr("dy", this.dyForYAxisLabel.bind(this)) + .text(this.textForYAxisLabel.bind(this)); + (withTransition ? axisY2Label.transition() : axisY2Label) + .attr("x", this.xForY2AxisLabel.bind(this)) + .attr("dx", this.dxForY2AxisLabel.bind(this)) + .attr("dy", this.dyForY2AxisLabel.bind(this)) + .text(this.textForY2AxisLabel.bind(this)); + }; + Axis.prototype.getPadding = function getPadding(padding, key, defaultValue, domainLength) { + var p = typeof padding === 'number' ? padding : padding[key]; + if (!isValue(p)) { + return defaultValue; + } + if (padding.unit === 'ratio') { + return padding[key] * domainLength; + } + // assume padding is pixels if unit is not specified + return this.convertPixelsToAxisPadding(p, domainLength); + }; + Axis.prototype.convertPixelsToAxisPadding = function convertPixelsToAxisPadding(pixels, domainLength) { + var $$ = this.owner, + length = $$.config.axis_rotated ? $$.width : $$.height; + return domainLength * (pixels / length); + }; + Axis.prototype.generateTickValues = function generateTickValues(values, tickCount, forTimeSeries) { + var tickValues = values, targetCount, start, end, count, interval, i, tickValue; + if (tickCount) { + targetCount = isFunction(tickCount) ? tickCount() : tickCount; + // compute ticks according to tickCount + if (targetCount === 1) { + tickValues = [values[0]]; + } else if (targetCount === 2) { + tickValues = [values[0], values[values.length - 1]]; + } else if (targetCount > 2) { + count = targetCount - 2; + start = values[0]; + end = values[values.length - 1]; + interval = (end - start) / (count + 1); + // re-construct unique values + tickValues = [start]; + for (i = 0; i < count; i++) { + tickValue = +start + interval * (i + 1); + tickValues.push(forTimeSeries ? new Date(tickValue) : tickValue); + } + tickValues.push(end); + } + } + if (!forTimeSeries) { tickValues = tickValues.sort(function (a, b) { return a - b; }); } + return tickValues; + }; + Axis.prototype.generateTransitions = function generateTransitions(duration) { + var $$ = this.owner, axes = $$.axes; + return { + axisX: duration ? axes.x.transition().duration(duration) : axes.x, + axisY: duration ? axes.y.transition().duration(duration) : axes.y, + axisY2: duration ? axes.y2.transition().duration(duration) : axes.y2, + axisSubX: duration ? axes.subx.transition().duration(duration) : axes.subx + }; + }; + Axis.prototype.redraw = function redraw(transitions, isHidden) { + var $$ = this.owner; + $$.axes.x.style("opacity", isHidden ? 0 : 1); + $$.axes.y.style("opacity", isHidden ? 0 : 1); + $$.axes.y2.style("opacity", isHidden ? 0 : 1); + $$.axes.subx.style("opacity", isHidden ? 0 : 1); + transitions.axisX.call($$.xAxis); + transitions.axisY.call($$.yAxis); + transitions.axisY2.call($$.y2Axis); + transitions.axisSubX.call($$.subXAxis); + }; + + c3_chart_internal_fn.getClipPath = function (id) { + var isIE9 = window.navigator.appVersion.toLowerCase().indexOf("msie 9.") >= 0; + return "url(" + (isIE9 ? "" : document.URL.split('#')[0]) + "#" + id + ")"; + }; + c3_chart_internal_fn.appendClip = function (parent, id) { + return parent.append("clipPath").attr("id", id).append("rect"); + }; + c3_chart_internal_fn.getAxisClipX = function (forHorizontal) { + // axis line width + padding for left + var left = Math.max(30, this.margin.left); + return forHorizontal ? -(1 + left) : -(left - 1); + }; + c3_chart_internal_fn.getAxisClipY = function (forHorizontal) { + return forHorizontal ? -20 : -this.margin.top; + }; + c3_chart_internal_fn.getXAxisClipX = function () { + var $$ = this; + return $$.getAxisClipX(!$$.config.axis_rotated); + }; + c3_chart_internal_fn.getXAxisClipY = function () { + var $$ = this; + return $$.getAxisClipY(!$$.config.axis_rotated); + }; + c3_chart_internal_fn.getYAxisClipX = function () { + var $$ = this; + return $$.config.axis_y_inner ? -1 : $$.getAxisClipX($$.config.axis_rotated); + }; + c3_chart_internal_fn.getYAxisClipY = function () { + var $$ = this; + return $$.getAxisClipY($$.config.axis_rotated); + }; + c3_chart_internal_fn.getAxisClipWidth = function (forHorizontal) { + var $$ = this, + left = Math.max(30, $$.margin.left), + right = Math.max(30, $$.margin.right); + // width + axis line width + padding for left/right + return forHorizontal ? $$.width + 2 + left + right : $$.margin.left + 20; + }; + c3_chart_internal_fn.getAxisClipHeight = function (forHorizontal) { + // less than 20 is not enough to show the axis label 'outer' without legend + return (forHorizontal ? this.margin.bottom : (this.margin.top + this.height)) + 20; + }; + c3_chart_internal_fn.getXAxisClipWidth = function () { + var $$ = this; + return $$.getAxisClipWidth(!$$.config.axis_rotated); + }; + c3_chart_internal_fn.getXAxisClipHeight = function () { + var $$ = this; + return $$.getAxisClipHeight(!$$.config.axis_rotated); + }; + c3_chart_internal_fn.getYAxisClipWidth = function () { + var $$ = this; + return $$.getAxisClipWidth($$.config.axis_rotated) + ($$.config.axis_y_inner ? 20 : 0); + }; + c3_chart_internal_fn.getYAxisClipHeight = function () { + var $$ = this; + return $$.getAxisClipHeight($$.config.axis_rotated); + }; + + c3_chart_internal_fn.initPie = function () { + var $$ = this, d3 = $$.d3, config = $$.config; + $$.pie = d3.layout.pie().value(function (d) { + return d.values.reduce(function (a, b) { return a + b.value; }, 0); + }); + if (!config.data_order) { + $$.pie.sort(null); + } + }; + + c3_chart_internal_fn.updateRadius = function () { + var $$ = this, config = $$.config, + w = config.gauge_width || config.donut_width; + $$.radiusExpanded = Math.min($$.arcWidth, $$.arcHeight) / 2; + $$.radius = $$.radiusExpanded * 0.95; + $$.innerRadiusRatio = w ? ($$.radius - w) / $$.radius : 0.6; + $$.innerRadius = $$.hasType('donut') || $$.hasType('gauge') ? $$.radius * $$.innerRadiusRatio : 0; + }; + + c3_chart_internal_fn.updateArc = function () { + var $$ = this; + $$.svgArc = $$.getSvgArc(); + $$.svgArcExpanded = $$.getSvgArcExpanded(); + $$.svgArcExpandedSub = $$.getSvgArcExpanded(0.98); + }; + + c3_chart_internal_fn.updateAngle = function (d) { + var $$ = this, config = $$.config, + found = false, index = 0, + gMin, gMax, gTic, gValue; + + if (!config) { + return null; + } + + $$.pie($$.filterTargetsToShow($$.data.targets)).forEach(function (t) { + if (! found && t.data.id === d.data.id) { + found = true; + d = t; + d.index = index; + } + index++; + }); + if (isNaN(d.startAngle)) { + d.startAngle = 0; + } + if (isNaN(d.endAngle)) { + d.endAngle = d.startAngle; + } + if ($$.isGaugeType(d.data)) { + gMin = config.gauge_min; + gMax = config.gauge_max; + gTic = (Math.PI) / (gMax - gMin); + gValue = d.value < gMin ? 0 : d.value < gMax ? d.value - gMin : (gMax - gMin); + d.startAngle = -1 * (Math.PI / 2); + d.endAngle = d.startAngle + gTic * gValue; + } + return found ? d : null; + }; + + c3_chart_internal_fn.getSvgArc = function () { + var $$ = this, + arc = $$.d3.svg.arc().outerRadius($$.radius).innerRadius($$.innerRadius), + newArc = function (d, withoutUpdate) { + var updated; + if (withoutUpdate) { return arc(d); } // for interpolate + updated = $$.updateAngle(d); + return updated ? arc(updated) : "M 0 0"; + }; + // TODO: extends all function + newArc.centroid = arc.centroid; + return newArc; + }; + + c3_chart_internal_fn.getSvgArcExpanded = function (rate) { + var $$ = this, + arc = $$.d3.svg.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius); + return function (d) { + var updated = $$.updateAngle(d); + return updated ? arc(updated) : "M 0 0"; + }; + }; + + c3_chart_internal_fn.getArc = function (d, withoutUpdate, force) { + return force || this.isArcType(d.data) ? this.svgArc(d, withoutUpdate) : "M 0 0"; + }; + + + c3_chart_internal_fn.transformForArcLabel = function (d) { + var $$ = this, + updated = $$.updateAngle(d), c, x, y, h, ratio, translate = ""; + if (updated && !$$.hasType('gauge')) { + c = this.svgArc.centroid(updated); + x = isNaN(c[0]) ? 0 : c[0]; + y = isNaN(c[1]) ? 0 : c[1]; + h = Math.sqrt(x * x + y * y); + // TODO: ratio should be an option? + ratio = $$.radius && h ? (36 / $$.radius > 0.375 ? 1.175 - 36 / $$.radius : 0.8) * $$.radius / h : 0; + translate = "translate(" + (x * ratio) + ',' + (y * ratio) + ")"; + } + return translate; + }; + + c3_chart_internal_fn.getArcRatio = function (d) { + var $$ = this, + whole = $$.hasType('gauge') ? Math.PI : (Math.PI * 2); + return d ? (d.endAngle - d.startAngle) / whole : null; + }; + + c3_chart_internal_fn.convertToArcData = function (d) { + return this.addName({ + id: d.data.id, + value: d.value, + ratio: this.getArcRatio(d), + index: d.index + }); + }; + + c3_chart_internal_fn.textForArcLabel = function (d) { + var $$ = this, + updated, value, ratio, id, format; + if (! $$.shouldShowArcLabel()) { return ""; } + updated = $$.updateAngle(d); + value = updated ? updated.value : null; + ratio = $$.getArcRatio(updated); + id = d.data.id; + if (! $$.hasType('gauge') && ! $$.meetsArcLabelThreshold(ratio)) { return ""; } + format = $$.getArcLabelFormat(); + return format ? format(value, ratio, id) : $$.defaultArcValueFormat(value, ratio); + }; + + c3_chart_internal_fn.expandArc = function (targetIds) { + var $$ = this, interval; + + // MEMO: avoid to cancel transition + if ($$.transiting) { + interval = window.setInterval(function () { + if (!$$.transiting) { + window.clearInterval(interval); + if ($$.legend.selectAll('.c3-legend-item-focused').size() > 0) { + $$.expandArc(targetIds); + } + } + }, 10); + return; + } + + targetIds = $$.mapToTargetIds(targetIds); + + $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).each(function (d) { + if (! $$.shouldExpand(d.data.id)) { return; } + $$.d3.select(this).selectAll('path') + .transition().duration($$.expandDuration(d.data.id)) + .attr("d", $$.svgArcExpanded) + .transition().duration($$.expandDuration(d.data.id) * 2) + .attr("d", $$.svgArcExpandedSub) + .each(function (d) { + if ($$.isDonutType(d.data)) { + // callback here + } + }); + }); + }; + + c3_chart_internal_fn.unexpandArc = function (targetIds) { + var $$ = this; + + if ($$.transiting) { return; } + + targetIds = $$.mapToTargetIds(targetIds); + + $$.svg.selectAll($$.selectorTargets(targetIds, '.' + CLASS.chartArc)).selectAll('path') + .transition().duration(function(d) { + return $$.expandDuration(d.data.id); + }) + .attr("d", $$.svgArc); + $$.svg.selectAll('.' + CLASS.arc) + .style("opacity", 1); + }; + + c3_chart_internal_fn.expandDuration = function (id) { + var $$ = this, config = $$.config; + + if ($$.isDonutType(id)) { + return config.donut_expand_duration; + } else if ($$.isGaugeType(id)) { + return config.gauge_expand_duration; + } else if ($$.isPieType(id)) { + return config.pie_expand_duration; + } else { + return 50; + } + + }; + + c3_chart_internal_fn.shouldExpand = function (id) { + var $$ = this, config = $$.config; + return ($$.isDonutType(id) && config.donut_expand) || + ($$.isGaugeType(id) && config.gauge_expand) || + ($$.isPieType(id) && config.pie_expand); + }; + + c3_chart_internal_fn.shouldShowArcLabel = function () { + var $$ = this, config = $$.config, shouldShow = true; + if ($$.hasType('donut')) { + shouldShow = config.donut_label_show; + } else if ($$.hasType('pie')) { + shouldShow = config.pie_label_show; + } + // when gauge, always true + return shouldShow; + }; + + c3_chart_internal_fn.meetsArcLabelThreshold = function (ratio) { + var $$ = this, config = $$.config, + threshold = $$.hasType('donut') ? config.donut_label_threshold : config.pie_label_threshold; + return ratio >= threshold; + }; + + c3_chart_internal_fn.getArcLabelFormat = function () { + var $$ = this, config = $$.config, + format = config.pie_label_format; + if ($$.hasType('gauge')) { + format = config.gauge_label_format; + } else if ($$.hasType('donut')) { + format = config.donut_label_format; + } + return format; + }; + + c3_chart_internal_fn.getArcTitle = function () { + var $$ = this; + return $$.hasType('donut') ? $$.config.donut_title : ""; + }; + + c3_chart_internal_fn.updateTargetsForArc = function (targets) { + var $$ = this, main = $$.main, + mainPieUpdate, mainPieEnter, + classChartArc = $$.classChartArc.bind($$), + classArcs = $$.classArcs.bind($$), + classFocus = $$.classFocus.bind($$); + mainPieUpdate = main.select('.' + CLASS.chartArcs).selectAll('.' + CLASS.chartArc) + .data($$.pie(targets)) + .attr("class", function (d) { return classChartArc(d) + classFocus(d.data); }); + mainPieEnter = mainPieUpdate.enter().append("g") + .attr("class", classChartArc); + mainPieEnter.append('g') + .attr('class', classArcs); + mainPieEnter.append("text") + .attr("dy", $$.hasType('gauge') ? "-.1em" : ".35em") + .style("opacity", 0) + .style("text-anchor", "middle") + .style("pointer-events", "none"); + // MEMO: can not keep same color..., but not bad to update color in redraw + //mainPieUpdate.exit().remove(); + }; + + c3_chart_internal_fn.initArc = function () { + var $$ = this; + $$.arcs = $$.main.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.chartArcs) + .attr("transform", $$.getTranslate('arc')); + $$.arcs.append('text') + .attr('class', CLASS.chartArcsTitle) + .style("text-anchor", "middle") + .text($$.getArcTitle()); + }; + + c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) { + var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main, + mainArc; + mainArc = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc) + .data($$.arcData.bind($$)); + mainArc.enter().append('path') + .attr("class", $$.classArc.bind($$)) + .style("fill", function (d) { return $$.color(d.data); }) + .style("cursor", function (d) { return config.interaction_enabled && config.data_selection_isselectable(d) ? "pointer" : null; }) + .style("opacity", 0) + .each(function (d) { + if ($$.isGaugeType(d.data)) { + d.startAngle = d.endAngle = -1 * (Math.PI / 2); + } + this._current = d; + }); + mainArc + .attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; }) + .style("opacity", function (d) { return d === this._current ? 0 : 1; }) + .on('mouseover', config.interaction_enabled ? function (d) { + var updated, arcData; + if ($$.transiting) { // skip while transiting + return; + } + updated = $$.updateAngle(d); + if (updated) { + arcData = $$.convertToArcData(updated); + // transitions + $$.expandArc(updated.data.id); + $$.api.focus(updated.data.id); + $$.toggleFocusLegend(updated.data.id, true); + $$.config.data_onmouseover(arcData, this); + } + } : null) + .on('mousemove', config.interaction_enabled ? function (d) { + var updated = $$.updateAngle(d), arcData, selectedData; + if (updated) { + arcData = $$.convertToArcData(updated), + selectedData = [arcData]; + $$.showTooltip(selectedData, this); + } + } : null) + .on('mouseout', config.interaction_enabled ? function (d) { + var updated, arcData; + if ($$.transiting) { // skip while transiting + return; + } + updated = $$.updateAngle(d); + if (updated) { + arcData = $$.convertToArcData(updated); + // transitions + $$.unexpandArc(updated.data.id); + $$.api.revert(); + $$.revertLegend(); + $$.hideTooltip(); + $$.config.data_onmouseout(arcData, this); + } + } : null) + .on('click', config.interaction_enabled ? function (d, i) { + var updated = $$.updateAngle(d), arcData; + if (updated) { + arcData = $$.convertToArcData(updated); + if ($$.toggleShape) { + $$.toggleShape(this, arcData, i); + } + $$.config.data_onclick.call($$.api, arcData, this); + } + } : null) + .each(function () { $$.transiting = true; }) + .transition().duration(duration) + .attrTween("d", function (d) { + var updated = $$.updateAngle(d), interpolate; + if (! updated) { + return function () { return "M 0 0"; }; + } + // if (this._current === d) { + // this._current = { + // startAngle: Math.PI*2, + // endAngle: Math.PI*2, + // }; + // } + if (isNaN(this._current.startAngle)) { + this._current.startAngle = 0; + } + if (isNaN(this._current.endAngle)) { + this._current.endAngle = this._current.startAngle; + } + interpolate = d3.interpolate(this._current, updated); + this._current = interpolate(0); + return function (t) { + var interpolated = interpolate(t); + interpolated.data = d.data; // data.id will be updated by interporator + return $$.getArc(interpolated, true); + }; + }) + .attr("transform", withTransform ? "scale(1)" : "") + .style("fill", function (d) { + return $$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data.id); + }) // Where gauge reading color would receive customization. + .style("opacity", 1) + .call($$.endall, function () { + $$.transiting = false; + }); + mainArc.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + main.selectAll('.' + CLASS.chartArc).select('text') + .style("opacity", 0) + .attr('class', function (d) { return $$.isGaugeType(d.data) ? CLASS.gaugeValue : ''; }) + .text($$.textForArcLabel.bind($$)) + .attr("transform", $$.transformForArcLabel.bind($$)) + .style('font-size', function (d) { return $$.isGaugeType(d.data) ? Math.round($$.radius / 5) + 'px' : ''; }) + .transition().duration(duration) + .style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; }); + main.select('.' + CLASS.chartArcsTitle) + .style("opacity", $$.hasType('donut') || $$.hasType('gauge') ? 1 : 0); + + if ($$.hasType('gauge')) { + $$.arcs.select('.' + CLASS.chartArcsBackground) + .attr("d", function () { + var d = { + data: [{value: config.gauge_max}], + startAngle: -1 * (Math.PI / 2), + endAngle: Math.PI / 2 + }; + return $$.getArc(d, true, true); + }); + $$.arcs.select('.' + CLASS.chartArcsGaugeUnit) + .attr("dy", ".75em") + .text(config.gauge_label_show ? config.gauge_units : ''); + $$.arcs.select('.' + CLASS.chartArcsGaugeMin) + .attr("dx", -1 * ($$.innerRadius + (($$.radius - $$.innerRadius) / 2)) + "px") + .attr("dy", "1.2em") + .text(config.gauge_label_show ? config.gauge_min : ''); + $$.arcs.select('.' + CLASS.chartArcsGaugeMax) + .attr("dx", $$.innerRadius + (($$.radius - $$.innerRadius) / 2) + "px") + .attr("dy", "1.2em") + .text(config.gauge_label_show ? config.gauge_max : ''); + } + }; + c3_chart_internal_fn.initGauge = function () { + var arcs = this.arcs; + if (this.hasType('gauge')) { + arcs.append('path') + .attr("class", CLASS.chartArcsBackground); + arcs.append("text") + .attr("class", CLASS.chartArcsGaugeUnit) + .style("text-anchor", "middle") + .style("pointer-events", "none"); + arcs.append("text") + .attr("class", CLASS.chartArcsGaugeMin) + .style("text-anchor", "middle") + .style("pointer-events", "none"); + arcs.append("text") + .attr("class", CLASS.chartArcsGaugeMax) + .style("text-anchor", "middle") + .style("pointer-events", "none"); + } + }; + c3_chart_internal_fn.getGaugeLabelHeight = function () { + return this.config.gauge_label_show ? 20 : 0; + }; + + c3_chart_internal_fn.initRegion = function () { + var $$ = this; + $$.region = $$.main.append('g') + .attr("clip-path", $$.clipPath) + .attr("class", CLASS.regions); + }; + c3_chart_internal_fn.updateRegion = function (duration) { + var $$ = this, config = $$.config; + + // hide if arc type + $$.region.style('visibility', $$.hasArcType() ? 'hidden' : 'visible'); + + $$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region) + .data(config.regions); + $$.mainRegion.enter().append('g') + .attr('class', $$.classRegion.bind($$)) + .append('rect') + .style("fill-opacity", 0); + $$.mainRegion.exit().transition().duration(duration) + .style("opacity", 0) + .remove(); + }; + c3_chart_internal_fn.redrawRegion = function (withTransition) { + var $$ = this, + regions = $$.mainRegion.selectAll('rect'), + x = $$.regionX.bind($$), + y = $$.regionY.bind($$), + w = $$.regionWidth.bind($$), + h = $$.regionHeight.bind($$); + return [ + (withTransition ? regions.transition() : regions) + .attr("x", x) + .attr("y", y) + .attr("width", w) + .attr("height", h) + .style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; }) + ]; + }; + c3_chart_internal_fn.regionX = function (d) { + var $$ = this, config = $$.config, + xPos, yScale = d.axis === 'y' ? $$.y : $$.y2; + if (d.axis === 'y' || d.axis === 'y2') { + xPos = config.axis_rotated ? ('start' in d ? yScale(d.start) : 0) : 0; + } else { + xPos = config.axis_rotated ? 0 : ('start' in d ? $$.x($$.isTimeSeries() ? $$.parseDate(d.start) : d.start) : 0); + } + return xPos; + }; + c3_chart_internal_fn.regionY = function (d) { + var $$ = this, config = $$.config, + yPos, yScale = d.axis === 'y' ? $$.y : $$.y2; + if (d.axis === 'y' || d.axis === 'y2') { + yPos = config.axis_rotated ? 0 : ('end' in d ? yScale(d.end) : 0); + } else { + yPos = config.axis_rotated ? ('start' in d ? $$.x($$.isTimeSeries() ? $$.parseDate(d.start) : d.start) : 0) : 0; + } + return yPos; + }; + c3_chart_internal_fn.regionWidth = function (d) { + var $$ = this, config = $$.config, + start = $$.regionX(d), end, yScale = d.axis === 'y' ? $$.y : $$.y2; + if (d.axis === 'y' || d.axis === 'y2') { + end = config.axis_rotated ? ('end' in d ? yScale(d.end) : $$.width) : $$.width; + } else { + end = config.axis_rotated ? $$.width : ('end' in d ? $$.x($$.isTimeSeries() ? $$.parseDate(d.end) : d.end) : $$.width); + } + return end < start ? 0 : end - start; + }; + c3_chart_internal_fn.regionHeight = function (d) { + var $$ = this, config = $$.config, + start = this.regionY(d), end, yScale = d.axis === 'y' ? $$.y : $$.y2; + if (d.axis === 'y' || d.axis === 'y2') { + end = config.axis_rotated ? $$.height : ('start' in d ? yScale(d.start) : $$.height); + } else { + end = config.axis_rotated ? ('end' in d ? $$.x($$.isTimeSeries() ? $$.parseDate(d.end) : d.end) : $$.height) : $$.height; + } + return end < start ? 0 : end - start; + }; + c3_chart_internal_fn.isRegionOnX = function (d) { + return !d.axis || d.axis === 'x'; + }; + + c3_chart_internal_fn.drag = function (mouse) { + var $$ = this, config = $$.config, main = $$.main, d3 = $$.d3; + var sx, sy, mx, my, minX, maxX, minY, maxY; + + if ($$.hasArcType()) { return; } + if (! config.data_selection_enabled) { return; } // do nothing if not selectable + if (config.zoom_enabled && ! $$.zoom.altDomain) { return; } // skip if zoomable because of conflict drag dehavior + if (!config.data_selection_multiple) { return; } // skip when single selection because drag is used for multiple selection + + sx = $$.dragStart[0]; + sy = $$.dragStart[1]; + mx = mouse[0]; + my = mouse[1]; + minX = Math.min(sx, mx); + maxX = Math.max(sx, mx); + minY = (config.data_selection_grouped) ? $$.margin.top : Math.min(sy, my); + maxY = (config.data_selection_grouped) ? $$.height : Math.max(sy, my); + + main.select('.' + CLASS.dragarea) + .attr('x', minX) + .attr('y', minY) + .attr('width', maxX - minX) + .attr('height', maxY - minY); + // TODO: binary search when multiple xs + main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape) + .filter(function (d) { return config.data_selection_isselectable(d); }) + .each(function (d, i) { + var shape = d3.select(this), + isSelected = shape.classed(CLASS.SELECTED), + isIncluded = shape.classed(CLASS.INCLUDED), + _x, _y, _w, _h, toggle, isWithin = false, box; + if (shape.classed(CLASS.circle)) { + _x = shape.attr("cx") * 1; + _y = shape.attr("cy") * 1; + toggle = $$.togglePoint; + isWithin = minX < _x && _x < maxX && minY < _y && _y < maxY; + } + else if (shape.classed(CLASS.bar)) { + box = getPathBox(this); + _x = box.x; + _y = box.y; + _w = box.width; + _h = box.height; + toggle = $$.togglePath; + isWithin = !(maxX < _x || _x + _w < minX) && !(maxY < _y || _y + _h < minY); + } else { + // line/area selection not supported yet + return; + } + if (isWithin ^ isIncluded) { + shape.classed(CLASS.INCLUDED, !isIncluded); + // TODO: included/unincluded callback here + shape.classed(CLASS.SELECTED, !isSelected); + toggle.call($$, !isSelected, shape, d, i); + } + }); + }; + + c3_chart_internal_fn.dragstart = function (mouse) { + var $$ = this, config = $$.config; + if ($$.hasArcType()) { return; } + if (! config.data_selection_enabled) { return; } // do nothing if not selectable + $$.dragStart = mouse; + $$.main.select('.' + CLASS.chart).append('rect') + .attr('class', CLASS.dragarea) + .style('opacity', 0.1); + $$.dragging = true; + }; + + c3_chart_internal_fn.dragend = function () { + var $$ = this, config = $$.config; + if ($$.hasArcType()) { return; } + if (! config.data_selection_enabled) { return; } // do nothing if not selectable + $$.main.select('.' + CLASS.dragarea) + .transition().duration(100) + .style('opacity', 0) + .remove(); + $$.main.selectAll('.' + CLASS.shape) + .classed(CLASS.INCLUDED, false); + $$.dragging = false; + }; + + c3_chart_internal_fn.selectPoint = function (target, d, i) { + var $$ = this, config = $$.config, + cx = (config.axis_rotated ? $$.circleY : $$.circleX).bind($$), + cy = (config.axis_rotated ? $$.circleX : $$.circleY).bind($$), + r = $$.pointSelectR.bind($$); + config.data_onselected.call($$.api, d, target.node()); + // add selected-circle on low layer g + $$.main.select('.' + CLASS.selectedCircles + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS.selectedCircle + '-' + i) + .data([d]) + .enter().append('circle') + .attr("class", function () { return $$.generateClass(CLASS.selectedCircle, i); }) + .attr("cx", cx) + .attr("cy", cy) + .attr("stroke", function () { return $$.color(d); }) + .attr("r", function (d) { return $$.pointSelectR(d) * 1.4; }) + .transition().duration(100) + .attr("r", r); + }; + c3_chart_internal_fn.unselectPoint = function (target, d, i) { + var $$ = this; + $$.config.data_onunselected.call($$.api, d, target.node()); + // remove selected-circle from low layer g + $$.main.select('.' + CLASS.selectedCircles + $$.getTargetSelectorSuffix(d.id)).selectAll('.' + CLASS.selectedCircle + '-' + i) + .transition().duration(100).attr('r', 0) + .remove(); + }; + c3_chart_internal_fn.togglePoint = function (selected, target, d, i) { + selected ? this.selectPoint(target, d, i) : this.unselectPoint(target, d, i); + }; + c3_chart_internal_fn.selectPath = function (target, d) { + var $$ = this; + $$.config.data_onselected.call($$, d, target.node()); + target.transition().duration(100) + .style("fill", function () { return $$.d3.rgb($$.color(d)).brighter(0.75); }); + }; + c3_chart_internal_fn.unselectPath = function (target, d) { + var $$ = this; + $$.config.data_onunselected.call($$, d, target.node()); + target.transition().duration(100) + .style("fill", function () { return $$.color(d); }); + }; + c3_chart_internal_fn.togglePath = function (selected, target, d, i) { + selected ? this.selectPath(target, d, i) : this.unselectPath(target, d, i); + }; + c3_chart_internal_fn.getToggle = function (that, d) { + var $$ = this, toggle; + if (that.nodeName === 'circle') { + if ($$.isStepType(d)) { + // circle is hidden in step chart, so treat as within the click area + toggle = function () {}; // TODO: how to select step chart? + } else { + toggle = $$.togglePoint; + } + } + else if (that.nodeName === 'path') { + toggle = $$.togglePath; + } + return toggle; + }; + c3_chart_internal_fn.toggleShape = function (that, d, i) { + var $$ = this, d3 = $$.d3, config = $$.config, + shape = d3.select(that), isSelected = shape.classed(CLASS.SELECTED), + toggle = $$.getToggle(that, d).bind($$); + + if (config.data_selection_enabled && config.data_selection_isselectable(d)) { + if (!config.data_selection_multiple) { + $$.main.selectAll('.' + CLASS.shapes + (config.data_selection_grouped ? $$.getTargetSelectorSuffix(d.id) : "")).selectAll('.' + CLASS.shape).each(function (d, i) { + var shape = d3.select(this); + if (shape.classed(CLASS.SELECTED)) { toggle(false, shape.classed(CLASS.SELECTED, false), d, i); } + }); + } + shape.classed(CLASS.SELECTED, !isSelected); + toggle(!isSelected, shape, d, i); + } + }; + + c3_chart_internal_fn.initBrush = function () { + var $$ = this, d3 = $$.d3; + $$.brush = d3.svg.brush().on("brush", function () { $$.redrawForBrush(); }); + $$.brush.update = function () { + if ($$.context) { $$.context.select('.' + CLASS.brush).call(this); } + return this; + }; + $$.brush.scale = function (scale) { + return $$.config.axis_rotated ? this.y(scale) : this.x(scale); + }; + }; + c3_chart_internal_fn.initSubchart = function () { + var $$ = this, config = $$.config, + context = $$.context = $$.svg.append("g").attr("transform", $$.getTranslate('context')), + visibility = config.subchart_show ? 'visible' : 'hidden'; + + context.style('visibility', visibility); + + // Define g for chart area + context.append('g') + .attr("clip-path", $$.clipPathForSubchart) + .attr('class', CLASS.chart); + + // Define g for bar chart area + context.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.chartBars); + + // Define g for line chart area + context.select('.' + CLASS.chart).append("g") + .attr("class", CLASS.chartLines); + + // Add extent rect for Brush + context.append("g") + .attr("clip-path", $$.clipPath) + .attr("class", CLASS.brush) + .call($$.brush); + + // ATTENTION: This must be called AFTER chart added + // Add Axis + $$.axes.subx = context.append("g") + .attr("class", CLASS.axisX) + .attr("transform", $$.getTranslate('subx')) + .attr("clip-path", config.axis_rotated ? "" : $$.clipPathForXAxis) + .style("visibility", config.subchart_axis_x_show ? visibility : 'hidden'); + }; + c3_chart_internal_fn.updateTargetsForSubchart = function (targets) { + var $$ = this, context = $$.context, config = $$.config, + contextLineEnter, contextLineUpdate, contextBarEnter, contextBarUpdate, + classChartBar = $$.classChartBar.bind($$), + classBars = $$.classBars.bind($$), + classChartLine = $$.classChartLine.bind($$), + classLines = $$.classLines.bind($$), + classAreas = $$.classAreas.bind($$); + + if (config.subchart_show) { + //-- Bar --// + contextBarUpdate = context.select('.' + CLASS.chartBars).selectAll('.' + CLASS.chartBar) + .data(targets) + .attr('class', classChartBar); + contextBarEnter = contextBarUpdate.enter().append('g') + .style('opacity', 0) + .attr('class', classChartBar); + // Bars for each data + contextBarEnter.append('g') + .attr("class", classBars); + + //-- Line --// + contextLineUpdate = context.select('.' + CLASS.chartLines).selectAll('.' + CLASS.chartLine) + .data(targets) + .attr('class', classChartLine); + contextLineEnter = contextLineUpdate.enter().append('g') + .style('opacity', 0) + .attr('class', classChartLine); + // Lines for each data + contextLineEnter.append("g") + .attr("class", classLines); + // Area + contextLineEnter.append("g") + .attr("class", classAreas); + + //-- Brush --// + context.selectAll('.' + CLASS.brush + ' rect') + .attr(config.axis_rotated ? "width" : "height", config.axis_rotated ? $$.width2 : $$.height2); + } + }; + c3_chart_internal_fn.updateBarForSubchart = function (durationForExit) { + var $$ = this; + $$.contextBar = $$.context.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar) + .data($$.barData.bind($$)); + $$.contextBar.enter().append('path') + .attr("class", $$.classBar.bind($$)) + .style("stroke", 'none') + .style("fill", $$.color); + $$.contextBar + .style("opacity", $$.initialOpacity.bind($$)); + $$.contextBar.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawBarForSubchart = function (drawBarOnSub, withTransition, duration) { + (withTransition ? this.contextBar.transition(Math.random().toString()).duration(duration) : this.contextBar) + .attr('d', drawBarOnSub) + .style('opacity', 1); + }; + c3_chart_internal_fn.updateLineForSubchart = function (durationForExit) { + var $$ = this; + $$.contextLine = $$.context.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line) + .data($$.lineData.bind($$)); + $$.contextLine.enter().append('path') + .attr('class', $$.classLine.bind($$)) + .style('stroke', $$.color); + $$.contextLine + .style("opacity", $$.initialOpacity.bind($$)); + $$.contextLine.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawLineForSubchart = function (drawLineOnSub, withTransition, duration) { + (withTransition ? this.contextLine.transition(Math.random().toString()).duration(duration) : this.contextLine) + .attr("d", drawLineOnSub) + .style('opacity', 1); + }; + c3_chart_internal_fn.updateAreaForSubchart = function (durationForExit) { + var $$ = this, d3 = $$.d3; + $$.contextArea = $$.context.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area) + .data($$.lineData.bind($$)); + $$.contextArea.enter().append('path') + .attr("class", $$.classArea.bind($$)) + .style("fill", $$.color) + .style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }); + $$.contextArea + .style("opacity", 0); + $$.contextArea.exit().transition().duration(durationForExit) + .style('opacity', 0) + .remove(); + }; + c3_chart_internal_fn.redrawAreaForSubchart = function (drawAreaOnSub, withTransition, duration) { + (withTransition ? this.contextArea.transition(Math.random().toString()).duration(duration) : this.contextArea) + .attr("d", drawAreaOnSub) + .style("fill", this.color) + .style("opacity", this.orgAreaOpacity); + }; + c3_chart_internal_fn.redrawSubchart = function (withSubchart, transitions, duration, durationForExit, areaIndices, barIndices, lineIndices) { + var $$ = this, d3 = $$.d3, config = $$.config, + drawAreaOnSub, drawBarOnSub, drawLineOnSub; + + $$.context.style('visibility', config.subchart_show ? 'visible' : 'hidden'); + + // subchart + if (config.subchart_show) { + // reflect main chart to extent on subchart if zoomed + if (d3.event && d3.event.type === 'zoom') { + $$.brush.extent($$.x.orgDomain()).update(); + } + // update subchart elements if needed + if (withSubchart) { + + // extent rect + if (!$$.brush.empty()) { + $$.brush.extent($$.x.orgDomain()).update(); + } + // setup drawer - MEMO: this must be called after axis updated + drawAreaOnSub = $$.generateDrawArea(areaIndices, true); + drawBarOnSub = $$.generateDrawBar(barIndices, true); + drawLineOnSub = $$.generateDrawLine(lineIndices, true); + + $$.updateBarForSubchart(duration); + $$.updateLineForSubchart(duration); + $$.updateAreaForSubchart(duration); + + $$.redrawBarForSubchart(drawBarOnSub, duration, duration); + $$.redrawLineForSubchart(drawLineOnSub, duration, duration); + $$.redrawAreaForSubchart(drawAreaOnSub, duration, duration); + } + } + }; + c3_chart_internal_fn.redrawForBrush = function () { + var $$ = this, x = $$.x; + $$.redraw({ + withTransition: false, + withY: $$.config.zoom_rescale, + withSubchart: false, + withUpdateXDomain: true, + withDimension: false + }); + $$.config.subchart_onbrush.call($$.api, x.orgDomain()); + }; + c3_chart_internal_fn.transformContext = function (withTransition, transitions) { + var $$ = this, subXAxis; + if (transitions && transitions.axisSubX) { + subXAxis = transitions.axisSubX; + } else { + subXAxis = $$.context.select('.' + CLASS.axisX); + if (withTransition) { subXAxis = subXAxis.transition(); } + } + $$.context.attr("transform", $$.getTranslate('context')); + subXAxis.attr("transform", $$.getTranslate('subx')); + }; + c3_chart_internal_fn.getDefaultExtent = function () { + var $$ = this, config = $$.config, + extent = isFunction(config.axis_x_extent) ? config.axis_x_extent($$.getXDomain($$.data.targets)) : config.axis_x_extent; + if ($$.isTimeSeries()) { + extent = [$$.parseDate(extent[0]), $$.parseDate(extent[1])]; + } + return extent; + }; + + c3_chart_internal_fn.initZoom = function () { + var $$ = this, d3 = $$.d3, config = $$.config, startEvent; + + $$.zoom = d3.behavior.zoom() + .on("zoomstart", function () { + startEvent = d3.event.sourceEvent; + $$.zoom.altDomain = d3.event.sourceEvent.altKey ? $$.x.orgDomain() : null; + config.zoom_onzoomstart.call($$.api, d3.event.sourceEvent); + }) + .on("zoom", function () { + $$.redrawForZoom.call($$); + }) + .on('zoomend', function () { + var event = d3.event.sourceEvent; + // if click, do nothing. otherwise, click interaction will be canceled. + if (event && startEvent.clientX === event.clientX && startEvent.clientY === event.clientY) { + return; + } + $$.redrawEventRect(); + $$.updateZoom(); + config.zoom_onzoomend.call($$.api, $$.x.orgDomain()); + }); + $$.zoom.scale = function (scale) { + return config.axis_rotated ? this.y(scale) : this.x(scale); + }; + $$.zoom.orgScaleExtent = function () { + var extent = config.zoom_extent ? config.zoom_extent : [1, 10]; + return [extent[0], Math.max($$.getMaxDataCount() / extent[1], extent[1])]; + }; + $$.zoom.updateScaleExtent = function () { + var ratio = diffDomain($$.x.orgDomain()) / diffDomain($$.getZoomDomain()), + extent = this.orgScaleExtent(); + this.scaleExtent([extent[0] * ratio, extent[1] * ratio]); + return this; + }; + }; + c3_chart_internal_fn.getZoomDomain = function () { + var $$ = this, config = $$.config, d3 = $$.d3, + min = d3.min([$$.orgXDomain[0], config.zoom_x_min]), + max = d3.max([$$.orgXDomain[1], config.zoom_x_max]); + return [min, max]; + }; + c3_chart_internal_fn.updateZoom = function () { + var $$ = this, z = $$.config.zoom_enabled ? $$.zoom : function () {}; + $$.main.select('.' + CLASS.zoomRect).call(z).on("dblclick.zoom", null); + $$.main.selectAll('.' + CLASS.eventRect).call(z).on("dblclick.zoom", null); + }; + c3_chart_internal_fn.redrawForZoom = function () { + var $$ = this, d3 = $$.d3, config = $$.config, zoom = $$.zoom, x = $$.x; + if (!config.zoom_enabled) { + return; + } + if ($$.filterTargetsToShow($$.data.targets).length === 0) { + return; + } + if (d3.event.sourceEvent.type === 'mousemove' && zoom.altDomain) { + x.domain(zoom.altDomain); + zoom.scale(x).updateScaleExtent(); + return; + } + if ($$.isCategorized() && x.orgDomain()[0] === $$.orgXDomain[0]) { + x.domain([$$.orgXDomain[0] - 1e-10, x.orgDomain()[1]]); + } + $$.redraw({ + withTransition: false, + withY: config.zoom_rescale, + withSubchart: false, + withEventRect: false, + withDimension: false + }); + if (d3.event.sourceEvent.type === 'mousemove') { + $$.cancelClick = true; + } + config.zoom_onzoom.call($$.api, x.orgDomain()); + }; + + c3_chart_internal_fn.generateColor = function () { + var $$ = this, config = $$.config, d3 = $$.d3, + colors = config.data_colors, + pattern = notEmpty(config.color_pattern) ? config.color_pattern : d3.scale.category10().range(), + callback = config.data_color, + ids = []; + + return function (d) { + var id = d.id || (d.data && d.data.id) || d, color; + + // if callback function is provided + if (colors[id] instanceof Function) { + color = colors[id](d); + } + // if specified, choose that color + else if (colors[id]) { + color = colors[id]; + } + // if not specified, choose from pattern + else { + if (ids.indexOf(id) < 0) { ids.push(id); } + color = pattern[ids.indexOf(id) % pattern.length]; + colors[id] = color; + } + return callback instanceof Function ? callback(color, d) : color; + }; + }; + c3_chart_internal_fn.generateLevelColor = function () { + var $$ = this, config = $$.config, + colors = config.color_pattern, + threshold = config.color_threshold, + asValue = threshold.unit === 'value', + values = threshold.values && threshold.values.length ? threshold.values : [], + max = threshold.max || 100; + return notEmpty(config.color_threshold) ? function (value) { + var i, v, color = colors[colors.length - 1]; + for (i = 0; i < values.length; i++) { + v = asValue ? value : (value * 100 / max); + if (v < values[i]) { + color = colors[i]; + break; + } + } + return color; + } : null; + }; + + c3_chart_internal_fn.getYFormat = function (forArc) { + var $$ = this, + formatForY = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.yFormat, + formatForY2 = forArc && !$$.hasType('gauge') ? $$.defaultArcValueFormat : $$.y2Format; + return function (v, ratio, id) { + var format = $$.axis.getId(id) === 'y2' ? formatForY2 : formatForY; + return format.call($$, v, ratio); + }; + }; + c3_chart_internal_fn.yFormat = function (v) { + var $$ = this, config = $$.config, + format = config.axis_y_tick_format ? config.axis_y_tick_format : $$.defaultValueFormat; + return format(v); + }; + c3_chart_internal_fn.y2Format = function (v) { + var $$ = this, config = $$.config, + format = config.axis_y2_tick_format ? config.axis_y2_tick_format : $$.defaultValueFormat; + return format(v); + }; + c3_chart_internal_fn.defaultValueFormat = function (v) { + return isValue(v) ? +v : ""; + }; + c3_chart_internal_fn.defaultArcValueFormat = function (v, ratio) { + return (ratio * 100).toFixed(1) + '%'; + }; + c3_chart_internal_fn.dataLabelFormat = function (targetId) { + var $$ = this, data_labels = $$.config.data_labels, + format, defaultFormat = function (v) { return isValue(v) ? +v : ""; }; + // find format according to axis id + if (typeof data_labels.format === 'function') { + format = data_labels.format; + } else if (typeof data_labels.format === 'object') { + if (data_labels.format[targetId]) { + format = data_labels.format[targetId] === true ? defaultFormat : data_labels.format[targetId]; + } else { + format = function () { return ''; }; + } + } else { + format = defaultFormat; + } + return format; + }; + + c3_chart_internal_fn.hasCaches = function (ids) { + for (var i = 0; i < ids.length; i++) { + if (! (ids[i] in this.cache)) { return false; } + } + return true; + }; + c3_chart_internal_fn.addCache = function (id, target) { + this.cache[id] = this.cloneTarget(target); + }; + c3_chart_internal_fn.getCaches = function (ids) { + var targets = [], i; + for (i = 0; i < ids.length; i++) { + if (ids[i] in this.cache) { targets.push(this.cloneTarget(this.cache[ids[i]])); } + } + return targets; + }; + + var CLASS = c3_chart_internal_fn.CLASS = { + target: 'c3-target', + chart: 'c3-chart', + chartLine: 'c3-chart-line', + chartLines: 'c3-chart-lines', + chartBar: 'c3-chart-bar', + chartBars: 'c3-chart-bars', + chartText: 'c3-chart-text', + chartTexts: 'c3-chart-texts', + chartArc: 'c3-chart-arc', + chartArcs: 'c3-chart-arcs', + chartArcsTitle: 'c3-chart-arcs-title', + chartArcsBackground: 'c3-chart-arcs-background', + chartArcsGaugeUnit: 'c3-chart-arcs-gauge-unit', + chartArcsGaugeMax: 'c3-chart-arcs-gauge-max', + chartArcsGaugeMin: 'c3-chart-arcs-gauge-min', + selectedCircle: 'c3-selected-circle', + selectedCircles: 'c3-selected-circles', + eventRect: 'c3-event-rect', + eventRects: 'c3-event-rects', + eventRectsSingle: 'c3-event-rects-single', + eventRectsMultiple: 'c3-event-rects-multiple', + zoomRect: 'c3-zoom-rect', + brush: 'c3-brush', + focused: 'c3-focused', + defocused: 'c3-defocused', + region: 'c3-region', + regions: 'c3-regions', + title: 'c3-title', + tooltipContainer: 'c3-tooltip-container', + tooltip: 'c3-tooltip', + tooltipName: 'c3-tooltip-name', + shape: 'c3-shape', + shapes: 'c3-shapes', + line: 'c3-line', + lines: 'c3-lines', + bar: 'c3-bar', + bars: 'c3-bars', + circle: 'c3-circle', + circles: 'c3-circles', + arc: 'c3-arc', + arcs: 'c3-arcs', + area: 'c3-area', + areas: 'c3-areas', + empty: 'c3-empty', + text: 'c3-text', + texts: 'c3-texts', + gaugeValue: 'c3-gauge-value', + grid: 'c3-grid', + gridLines: 'c3-grid-lines', + xgrid: 'c3-xgrid', + xgrids: 'c3-xgrids', + xgridLine: 'c3-xgrid-line', + xgridLines: 'c3-xgrid-lines', + xgridFocus: 'c3-xgrid-focus', + ygrid: 'c3-ygrid', + ygrids: 'c3-ygrids', + ygridLine: 'c3-ygrid-line', + ygridLines: 'c3-ygrid-lines', + axis: 'c3-axis', + axisX: 'c3-axis-x', + axisXLabel: 'c3-axis-x-label', + axisY: 'c3-axis-y', + axisYLabel: 'c3-axis-y-label', + axisY2: 'c3-axis-y2', + axisY2Label: 'c3-axis-y2-label', + legendBackground: 'c3-legend-background', + legendItem: 'c3-legend-item', + legendItemEvent: 'c3-legend-item-event', + legendItemTile: 'c3-legend-item-tile', + legendItemHidden: 'c3-legend-item-hidden', + legendItemFocused: 'c3-legend-item-focused', + dragarea: 'c3-dragarea', + EXPANDED: '_expanded_', + SELECTED: '_selected_', + INCLUDED: '_included_' + }; + c3_chart_internal_fn.generateClass = function (prefix, targetId) { + return " " + prefix + " " + prefix + this.getTargetSelectorSuffix(targetId); + }; + c3_chart_internal_fn.classText = function (d) { + return this.generateClass(CLASS.text, d.index); + }; + c3_chart_internal_fn.classTexts = function (d) { + return this.generateClass(CLASS.texts, d.id); + }; + c3_chart_internal_fn.classShape = function (d) { + return this.generateClass(CLASS.shape, d.index); + }; + c3_chart_internal_fn.classShapes = function (d) { + return this.generateClass(CLASS.shapes, d.id); + }; + c3_chart_internal_fn.classLine = function (d) { + return this.classShape(d) + this.generateClass(CLASS.line, d.id); + }; + c3_chart_internal_fn.classLines = function (d) { + return this.classShapes(d) + this.generateClass(CLASS.lines, d.id); + }; + c3_chart_internal_fn.classCircle = function (d) { + return this.classShape(d) + this.generateClass(CLASS.circle, d.index); + }; + c3_chart_internal_fn.classCircles = function (d) { + return this.classShapes(d) + this.generateClass(CLASS.circles, d.id); + }; + c3_chart_internal_fn.classBar = function (d) { + return this.classShape(d) + this.generateClass(CLASS.bar, d.index); + }; + c3_chart_internal_fn.classBars = function (d) { + return this.classShapes(d) + this.generateClass(CLASS.bars, d.id); + }; + c3_chart_internal_fn.classArc = function (d) { + return this.classShape(d.data) + this.generateClass(CLASS.arc, d.data.id); + }; + c3_chart_internal_fn.classArcs = function (d) { + return this.classShapes(d.data) + this.generateClass(CLASS.arcs, d.data.id); + }; + c3_chart_internal_fn.classArea = function (d) { + return this.classShape(d) + this.generateClass(CLASS.area, d.id); + }; + c3_chart_internal_fn.classAreas = function (d) { + return this.classShapes(d) + this.generateClass(CLASS.areas, d.id); + }; + c3_chart_internal_fn.classRegion = function (d, i) { + return this.generateClass(CLASS.region, i) + ' ' + ('class' in d ? d['class'] : ''); + }; + c3_chart_internal_fn.classEvent = function (d) { + return this.generateClass(CLASS.eventRect, d.index); + }; + c3_chart_internal_fn.classTarget = function (id) { + var $$ = this; + var additionalClassSuffix = $$.config.data_classes[id], additionalClass = ''; + if (additionalClassSuffix) { + additionalClass = ' ' + CLASS.target + '-' + additionalClassSuffix; + } + return $$.generateClass(CLASS.target, id) + additionalClass; + }; + c3_chart_internal_fn.classFocus = function (d) { + return this.classFocused(d) + this.classDefocused(d); + }; + c3_chart_internal_fn.classFocused = function (d) { + return ' ' + (this.focusedTargetIds.indexOf(d.id) >= 0 ? CLASS.focused : ''); + }; + c3_chart_internal_fn.classDefocused = function (d) { + return ' ' + (this.defocusedTargetIds.indexOf(d.id) >= 0 ? CLASS.defocused : ''); + }; + c3_chart_internal_fn.classChartText = function (d) { + return CLASS.chartText + this.classTarget(d.id); + }; + c3_chart_internal_fn.classChartLine = function (d) { + return CLASS.chartLine + this.classTarget(d.id); + }; + c3_chart_internal_fn.classChartBar = function (d) { + return CLASS.chartBar + this.classTarget(d.id); + }; + c3_chart_internal_fn.classChartArc = function (d) { + return CLASS.chartArc + this.classTarget(d.data.id); + }; + c3_chart_internal_fn.getTargetSelectorSuffix = function (targetId) { + return targetId || targetId === 0 ? ('-' + targetId).replace(/[\s?!@#$%^&*()_=+,.<>'":;\[\]\/|~`{}\\]/g, '-') : ''; + }; + c3_chart_internal_fn.selectorTarget = function (id, prefix) { + return (prefix || '') + '.' + CLASS.target + this.getTargetSelectorSuffix(id); + }; + c3_chart_internal_fn.selectorTargets = function (ids, prefix) { + var $$ = this; + ids = ids || []; + return ids.length ? ids.map(function (id) { return $$.selectorTarget(id, prefix); }) : null; + }; + c3_chart_internal_fn.selectorLegend = function (id) { + return '.' + CLASS.legendItem + this.getTargetSelectorSuffix(id); + }; + c3_chart_internal_fn.selectorLegends = function (ids) { + var $$ = this; + return ids && ids.length ? ids.map(function (id) { return $$.selectorLegend(id); }) : null; + }; + + var isValue = c3_chart_internal_fn.isValue = function (v) { + return v || v === 0; + }, + isFunction = c3_chart_internal_fn.isFunction = function (o) { + return typeof o === 'function'; + }, + isString = c3_chart_internal_fn.isString = function (o) { + return typeof o === 'string'; + }, + isUndefined = c3_chart_internal_fn.isUndefined = function (v) { + return typeof v === 'undefined'; + }, + isDefined = c3_chart_internal_fn.isDefined = function (v) { + return typeof v !== 'undefined'; + }, + ceil10 = c3_chart_internal_fn.ceil10 = function (v) { + return Math.ceil(v / 10) * 10; + }, + asHalfPixel = c3_chart_internal_fn.asHalfPixel = function (n) { + return Math.ceil(n) + 0.5; + }, + diffDomain = c3_chart_internal_fn.diffDomain = function (d) { + return d[1] - d[0]; + }, + isEmpty = c3_chart_internal_fn.isEmpty = function (o) { + return typeof o === 'undefined' || o === null || (isString(o) && o.length === 0) || (typeof o === 'object' && Object.keys(o).length === 0); + }, + notEmpty = c3_chart_internal_fn.notEmpty = function (o) { + return !c3_chart_internal_fn.isEmpty(o); + }, + getOption = c3_chart_internal_fn.getOption = function (options, key, defaultValue) { + return isDefined(options[key]) ? options[key] : defaultValue; + }, + hasValue = c3_chart_internal_fn.hasValue = function (dict, value) { + var found = false; + Object.keys(dict).forEach(function (key) { + if (dict[key] === value) { found = true; } + }); + return found; + }, + getPathBox = c3_chart_internal_fn.getPathBox = function (path) { + var box = path.getBoundingClientRect(), + items = [path.pathSegList.getItem(0), path.pathSegList.getItem(1)], + minX = items[0].x, minY = Math.min(items[0].y, items[1].y); + return {x: minX, y: minY, width: box.width, height: box.height}; + }; + + c3_chart_fn.focus = function (targetIds) { + var $$ = this.internal, candidates; + + targetIds = $$.mapToTargetIds(targetIds); + candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))), + + this.revert(); + this.defocus(); + candidates.classed(CLASS.focused, true).classed(CLASS.defocused, false); + if ($$.hasArcType()) { + $$.expandArc(targetIds); + } + $$.toggleFocusLegend(targetIds, true); + + $$.focusedTargetIds = targetIds; + $$.defocusedTargetIds = $$.defocusedTargetIds.filter(function (id) { + return targetIds.indexOf(id) < 0; + }); + }; + + c3_chart_fn.defocus = function (targetIds) { + var $$ = this.internal, candidates; + + targetIds = $$.mapToTargetIds(targetIds); + candidates = $$.svg.selectAll($$.selectorTargets(targetIds.filter($$.isTargetToShow, $$))), + + candidates.classed(CLASS.focused, false).classed(CLASS.defocused, true); + if ($$.hasArcType()) { + $$.unexpandArc(targetIds); + } + $$.toggleFocusLegend(targetIds, false); + + $$.focusedTargetIds = $$.focusedTargetIds.filter(function (id) { + return targetIds.indexOf(id) < 0; + }); + $$.defocusedTargetIds = targetIds; + }; + + c3_chart_fn.revert = function (targetIds) { + var $$ = this.internal, candidates; + + targetIds = $$.mapToTargetIds(targetIds); + candidates = $$.svg.selectAll($$.selectorTargets(targetIds)); // should be for all targets + + candidates.classed(CLASS.focused, false).classed(CLASS.defocused, false); + if ($$.hasArcType()) { + $$.unexpandArc(targetIds); + } + if ($$.config.legend_show) { + $$.showLegend(targetIds.filter($$.isLegendToShow.bind($$))); + $$.legend.selectAll($$.selectorLegends(targetIds)) + .filter(function () { + return $$.d3.select(this).classed(CLASS.legendItemFocused); + }) + .classed(CLASS.legendItemFocused, false); + } + + $$.focusedTargetIds = []; + $$.defocusedTargetIds = []; + }; + + c3_chart_fn.show = function (targetIds, options) { + var $$ = this.internal, targets; + + targetIds = $$.mapToTargetIds(targetIds); + options = options || {}; + + $$.removeHiddenTargetIds(targetIds); + targets = $$.svg.selectAll($$.selectorTargets(targetIds)); + + targets.transition() + .style('opacity', 1, 'important') + .call($$.endall, function () { + targets.style('opacity', null).style('opacity', 1); + }); + + if (options.withLegend) { + $$.showLegend(targetIds); + } + + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true, withLegend: true}); + }; + + c3_chart_fn.hide = function (targetIds, options) { + var $$ = this.internal, targets; + + targetIds = $$.mapToTargetIds(targetIds); + options = options || {}; + + $$.addHiddenTargetIds(targetIds); + targets = $$.svg.selectAll($$.selectorTargets(targetIds)); + + targets.transition() + .style('opacity', 0, 'important') + .call($$.endall, function () { + targets.style('opacity', null).style('opacity', 0); + }); + + if (options.withLegend) { + $$.hideLegend(targetIds); + } + + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true, withLegend: true}); + }; + + c3_chart_fn.toggle = function (targetIds, options) { + var that = this, $$ = this.internal; + $$.mapToTargetIds(targetIds).forEach(function (targetId) { + $$.isTargetToShow(targetId) ? that.hide(targetId, options) : that.show(targetId, options); + }); + }; + + c3_chart_fn.zoom = function (domain) { + var $$ = this.internal; + if (domain) { + if ($$.isTimeSeries()) { + domain = domain.map(function (x) { return $$.parseDate(x); }); + } + $$.brush.extent(domain); + $$.redraw({withUpdateXDomain: true, withY: $$.config.zoom_rescale}); + $$.config.zoom_onzoom.call(this, $$.x.orgDomain()); + } + return $$.brush.extent(); + }; + c3_chart_fn.zoom.enable = function (enabled) { + var $$ = this.internal; + $$.config.zoom_enabled = enabled; + $$.updateAndRedraw(); + }; + c3_chart_fn.unzoom = function () { + var $$ = this.internal; + $$.brush.clear().update(); + $$.redraw({withUpdateXDomain: true}); + }; + + c3_chart_fn.zoom.max = function (max) { + var $$ = this.internal, config = $$.config, d3 = $$.d3; + if (max === 0 || max) { + config.zoom_x_max = d3.max([$$.orgXDomain[1], max]); + } + else { + return config.zoom_x_max; + } + }; + + c3_chart_fn.zoom.min = function (min) { + var $$ = this.internal, config = $$.config, d3 = $$.d3; + if (min === 0 || min) { + config.zoom_x_min = d3.min([$$.orgXDomain[0], min]); + } + else { + return config.zoom_x_min; + } + }; + + c3_chart_fn.zoom.range = function (range) { + if (arguments.length) { + if (isDefined(range.max)) { this.domain.max(range.max); } + if (isDefined(range.min)) { this.domain.min(range.min); } + } else { + return { + max: this.domain.max(), + min: this.domain.min() + }; + } + }; + + c3_chart_fn.load = function (args) { + var $$ = this.internal, config = $$.config; + // update xs if specified + if (args.xs) { + $$.addXs(args.xs); + } + // update classes if exists + if ('classes' in args) { + Object.keys(args.classes).forEach(function (id) { + config.data_classes[id] = args.classes[id]; + }); + } + // update categories if exists + if ('categories' in args && $$.isCategorized()) { + config.axis_x_categories = args.categories; + } + // update axes if exists + if ('axes' in args) { + Object.keys(args.axes).forEach(function (id) { + config.data_axes[id] = args.axes[id]; + }); + } + // update colors if exists + if ('colors' in args) { + Object.keys(args.colors).forEach(function (id) { + config.data_colors[id] = args.colors[id]; + }); + } + // use cache if exists + if ('cacheIds' in args && $$.hasCaches(args.cacheIds)) { + $$.load($$.getCaches(args.cacheIds), args.done); + return; + } + // unload if needed + if ('unload' in args) { + // TODO: do not unload if target will load (included in url/rows/columns) + $$.unload($$.mapToTargetIds((typeof args.unload === 'boolean' && args.unload) ? null : args.unload), function () { + $$.loadFromArgs(args); + }); + } else { + $$.loadFromArgs(args); + } + }; + + c3_chart_fn.unload = function (args) { + var $$ = this.internal; + args = args || {}; + if (args instanceof Array) { + args = {ids: args}; + } else if (typeof args === 'string') { + args = {ids: [args]}; + } + $$.unload($$.mapToTargetIds(args.ids), function () { + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true, withLegend: true}); + if (args.done) { args.done(); } + }); + }; + + c3_chart_fn.flow = function (args) { + var $$ = this.internal, + targets, data, notfoundIds = [], orgDataCount = $$.getMaxDataCount(), + dataCount, domain, baseTarget, baseValue, length = 0, tail = 0, diff, to; + + if (args.json) { + data = $$.convertJsonToData(args.json, args.keys); + } + else if (args.rows) { + data = $$.convertRowsToData(args.rows); + } + else if (args.columns) { + data = $$.convertColumnsToData(args.columns); + } + else { + return; + } + targets = $$.convertDataToTargets(data, true); + + // Update/Add data + $$.data.targets.forEach(function (t) { + var found = false, i, j; + for (i = 0; i < targets.length; i++) { + if (t.id === targets[i].id) { + found = true; + + if (t.values[t.values.length - 1]) { + tail = t.values[t.values.length - 1].index + 1; + } + length = targets[i].values.length; + + for (j = 0; j < length; j++) { + targets[i].values[j].index = tail + j; + if (!$$.isTimeSeries()) { + targets[i].values[j].x = tail + j; + } + } + t.values = t.values.concat(targets[i].values); + + targets.splice(i, 1); + break; + } + } + if (!found) { notfoundIds.push(t.id); } + }); + + // Append null for not found targets + $$.data.targets.forEach(function (t) { + var i, j; + for (i = 0; i < notfoundIds.length; i++) { + if (t.id === notfoundIds[i]) { + tail = t.values[t.values.length - 1].index + 1; + for (j = 0; j < length; j++) { + t.values.push({ + id: t.id, + index: tail + j, + x: $$.isTimeSeries() ? $$.getOtherTargetX(tail + j) : tail + j, + value: null + }); + } + } + } + }); + + // Generate null values for new target + if ($$.data.targets.length) { + targets.forEach(function (t) { + var i, missing = []; + for (i = $$.data.targets[0].values[0].index; i < tail; i++) { + missing.push({ + id: t.id, + index: i, + x: $$.isTimeSeries() ? $$.getOtherTargetX(i) : i, + value: null + }); + } + t.values.forEach(function (v) { + v.index += tail; + if (!$$.isTimeSeries()) { + v.x += tail; + } + }); + t.values = missing.concat(t.values); + }); + } + $$.data.targets = $$.data.targets.concat(targets); // add remained + + // check data count because behavior needs to change when it's only one + dataCount = $$.getMaxDataCount(); + baseTarget = $$.data.targets[0]; + baseValue = baseTarget.values[0]; + + // Update length to flow if needed + if (isDefined(args.to)) { + length = 0; + to = $$.isTimeSeries() ? $$.parseDate(args.to) : args.to; + baseTarget.values.forEach(function (v) { + if (v.x < to) { length++; } + }); + } else if (isDefined(args.length)) { + length = args.length; + } + + // If only one data, update the domain to flow from left edge of the chart + if (!orgDataCount) { + if ($$.isTimeSeries()) { + if (baseTarget.values.length > 1) { + diff = baseTarget.values[baseTarget.values.length - 1].x - baseValue.x; + } else { + diff = baseValue.x - $$.getXDomain($$.data.targets)[0]; + } + } else { + diff = 1; + } + domain = [baseValue.x - diff, baseValue.x]; + $$.updateXDomain(null, true, true, false, domain); + } else if (orgDataCount === 1) { + if ($$.isTimeSeries()) { + diff = (baseTarget.values[baseTarget.values.length - 1].x - baseValue.x) / 2; + domain = [new Date(+baseValue.x - diff), new Date(+baseValue.x + diff)]; + $$.updateXDomain(null, true, true, false, domain); + } + } + + // Set targets + $$.updateTargets($$.data.targets); + + // Redraw with new targets + $$.redraw({ + flow: { + index: baseValue.index, + length: length, + duration: isValue(args.duration) ? args.duration : $$.config.transition_duration, + done: args.done, + orgDataCount: orgDataCount, + }, + withLegend: true, + withTransition: orgDataCount > 1, + withTrimXDomain: false, + withUpdateXAxis: true, + }); + }; + + c3_chart_internal_fn.generateFlow = function (args) { + var $$ = this, config = $$.config, d3 = $$.d3; + + return function () { + var targets = args.targets, + flow = args.flow, + drawBar = args.drawBar, + drawLine = args.drawLine, + drawArea = args.drawArea, + cx = args.cx, + cy = args.cy, + xv = args.xv, + xForText = args.xForText, + yForText = args.yForText, + duration = args.duration; + + var translateX, scaleX = 1, transform, + flowIndex = flow.index, + flowLength = flow.length, + flowStart = $$.getValueOnIndex($$.data.targets[0].values, flowIndex), + flowEnd = $$.getValueOnIndex($$.data.targets[0].values, flowIndex + flowLength), + orgDomain = $$.x.domain(), domain, + durationForFlow = flow.duration || duration, + done = flow.done || function () {}, + wait = $$.generateWait(); + + var xgrid = $$.xgrid || d3.selectAll([]), + xgridLines = $$.xgridLines || d3.selectAll([]), + mainRegion = $$.mainRegion || d3.selectAll([]), + mainText = $$.mainText || d3.selectAll([]), + mainBar = $$.mainBar || d3.selectAll([]), + mainLine = $$.mainLine || d3.selectAll([]), + mainArea = $$.mainArea || d3.selectAll([]), + mainCircle = $$.mainCircle || d3.selectAll([]); + + // set flag + $$.flowing = true; + + // remove head data after rendered + $$.data.targets.forEach(function (d) { + d.values.splice(0, flowLength); + }); + + // update x domain to generate axis elements for flow + domain = $$.updateXDomain(targets, true, true); + // update elements related to x scale + if ($$.updateXGrid) { $$.updateXGrid(true); } + + // generate transform to flow + if (!flow.orgDataCount) { // if empty + if ($$.data.targets[0].values.length !== 1) { + translateX = $$.x(orgDomain[0]) - $$.x(domain[0]); + } else { + if ($$.isTimeSeries()) { + flowStart = $$.getValueOnIndex($$.data.targets[0].values, 0); + flowEnd = $$.getValueOnIndex($$.data.targets[0].values, $$.data.targets[0].values.length - 1); + translateX = $$.x(flowStart.x) - $$.x(flowEnd.x); + } else { + translateX = diffDomain(domain) / 2; + } + } + } else if (flow.orgDataCount === 1 || flowStart.x === flowEnd.x) { + translateX = $$.x(orgDomain[0]) - $$.x(domain[0]); + } else { + if ($$.isTimeSeries()) { + translateX = ($$.x(orgDomain[0]) - $$.x(domain[0])); + } else { + translateX = ($$.x(flowStart.x) - $$.x(flowEnd.x)); + } + } + scaleX = (diffDomain(orgDomain) / diffDomain(domain)); + transform = 'translate(' + translateX + ',0) scale(' + scaleX + ',1)'; + + $$.hideXGridFocus(); + + d3.transition().ease('linear').duration(durationForFlow).each(function () { + wait.add($$.axes.x.transition().call($$.xAxis)); + wait.add(mainBar.transition().attr('transform', transform)); + wait.add(mainLine.transition().attr('transform', transform)); + wait.add(mainArea.transition().attr('transform', transform)); + wait.add(mainCircle.transition().attr('transform', transform)); + wait.add(mainText.transition().attr('transform', transform)); + wait.add(mainRegion.filter($$.isRegionOnX).transition().attr('transform', transform)); + wait.add(xgrid.transition().attr('transform', transform)); + wait.add(xgridLines.transition().attr('transform', transform)); + }) + .call(wait, function () { + var i, shapes = [], texts = [], eventRects = []; + + // remove flowed elements + if (flowLength) { + for (i = 0; i < flowLength; i++) { + shapes.push('.' + CLASS.shape + '-' + (flowIndex + i)); + texts.push('.' + CLASS.text + '-' + (flowIndex + i)); + eventRects.push('.' + CLASS.eventRect + '-' + (flowIndex + i)); + } + $$.svg.selectAll('.' + CLASS.shapes).selectAll(shapes).remove(); + $$.svg.selectAll('.' + CLASS.texts).selectAll(texts).remove(); + $$.svg.selectAll('.' + CLASS.eventRects).selectAll(eventRects).remove(); + $$.svg.select('.' + CLASS.xgrid).remove(); + } + + // draw again for removing flowed elements and reverting attr + xgrid + .attr('transform', null) + .attr($$.xgridAttr); + xgridLines + .attr('transform', null); + xgridLines.select('line') + .attr("x1", config.axis_rotated ? 0 : xv) + .attr("x2", config.axis_rotated ? $$.width : xv); + xgridLines.select('text') + .attr("x", config.axis_rotated ? $$.width : 0) + .attr("y", xv); + mainBar + .attr('transform', null) + .attr("d", drawBar); + mainLine + .attr('transform', null) + .attr("d", drawLine); + mainArea + .attr('transform', null) + .attr("d", drawArea); + mainCircle + .attr('transform', null) + .attr("cx", cx) + .attr("cy", cy); + mainText + .attr('transform', null) + .attr('x', xForText) + .attr('y', yForText) + .style('fill-opacity', $$.opacityForText.bind($$)); + mainRegion + .attr('transform', null); + mainRegion.select('rect').filter($$.isRegionOnX) + .attr("x", $$.regionX.bind($$)) + .attr("width", $$.regionWidth.bind($$)); + + if (config.interaction_enabled) { + $$.redrawEventRect(); + } + + // callback for end of flow + done(); + + $$.flowing = false; + }); + }; + }; + + c3_chart_fn.selected = function (targetId) { + var $$ = this.internal, d3 = $$.d3; + return d3.merge( + $$.main.selectAll('.' + CLASS.shapes + $$.getTargetSelectorSuffix(targetId)).selectAll('.' + CLASS.shape) + .filter(function () { return d3.select(this).classed(CLASS.SELECTED); }) + .map(function (d) { return d.map(function (d) { var data = d.__data__; return data.data ? data.data : data; }); }) + ); + }; + c3_chart_fn.select = function (ids, indices, resetOther) { + var $$ = this.internal, d3 = $$.d3, config = $$.config; + if (! config.data_selection_enabled) { return; } + $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) { + var shape = d3.select(this), id = d.data ? d.data.id : d.id, + toggle = $$.getToggle(this, d).bind($$), + isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0, + isTargetIndex = !indices || indices.indexOf(i) >= 0, + isSelected = shape.classed(CLASS.SELECTED); + // line/area selection not supported yet + if (shape.classed(CLASS.line) || shape.classed(CLASS.area)) { + return; + } + if (isTargetId && isTargetIndex) { + if (config.data_selection_isselectable(d) && !isSelected) { + toggle(true, shape.classed(CLASS.SELECTED, true), d, i); + } + } else if (isDefined(resetOther) && resetOther) { + if (isSelected) { + toggle(false, shape.classed(CLASS.SELECTED, false), d, i); + } + } + }); + }; + c3_chart_fn.unselect = function (ids, indices) { + var $$ = this.internal, d3 = $$.d3, config = $$.config; + if (! config.data_selection_enabled) { return; } + $$.main.selectAll('.' + CLASS.shapes).selectAll('.' + CLASS.shape).each(function (d, i) { + var shape = d3.select(this), id = d.data ? d.data.id : d.id, + toggle = $$.getToggle(this, d).bind($$), + isTargetId = config.data_selection_grouped || !ids || ids.indexOf(id) >= 0, + isTargetIndex = !indices || indices.indexOf(i) >= 0, + isSelected = shape.classed(CLASS.SELECTED); + // line/area selection not supported yet + if (shape.classed(CLASS.line) || shape.classed(CLASS.area)) { + return; + } + if (isTargetId && isTargetIndex) { + if (config.data_selection_isselectable(d)) { + if (isSelected) { + toggle(false, shape.classed(CLASS.SELECTED, false), d, i); + } + } + } + }); + }; + + c3_chart_fn.transform = function (type, targetIds) { + var $$ = this.internal, + options = ['pie', 'donut'].indexOf(type) >= 0 ? {withTransform: true} : null; + $$.transformTo(targetIds, type, options); + }; + + c3_chart_internal_fn.transformTo = function (targetIds, type, optionsForRedraw) { + var $$ = this, + withTransitionForAxis = !$$.hasArcType(), + options = optionsForRedraw || {withTransitionForAxis: withTransitionForAxis}; + options.withTransitionForTransform = false; + $$.transiting = false; + $$.setTargetType(targetIds, type); + $$.updateTargets($$.data.targets); // this is needed when transforming to arc + $$.updateAndRedraw(options); + }; + + c3_chart_fn.groups = function (groups) { + var $$ = this.internal, config = $$.config; + if (isUndefined(groups)) { return config.data_groups; } + config.data_groups = groups; + $$.redraw(); + return config.data_groups; + }; + + c3_chart_fn.xgrids = function (grids) { + var $$ = this.internal, config = $$.config; + if (! grids) { return config.grid_x_lines; } + config.grid_x_lines = grids; + $$.redrawWithoutRescale(); + return config.grid_x_lines; + }; + c3_chart_fn.xgrids.add = function (grids) { + var $$ = this.internal; + return this.xgrids($$.config.grid_x_lines.concat(grids ? grids : [])); + }; + c3_chart_fn.xgrids.remove = function (params) { // TODO: multiple + var $$ = this.internal; + $$.removeGridLines(params, true); + }; + + c3_chart_fn.ygrids = function (grids) { + var $$ = this.internal, config = $$.config; + if (! grids) { return config.grid_y_lines; } + config.grid_y_lines = grids; + $$.redrawWithoutRescale(); + return config.grid_y_lines; + }; + c3_chart_fn.ygrids.add = function (grids) { + var $$ = this.internal; + return this.ygrids($$.config.grid_y_lines.concat(grids ? grids : [])); + }; + c3_chart_fn.ygrids.remove = function (params) { // TODO: multiple + var $$ = this.internal; + $$.removeGridLines(params, false); + }; + + c3_chart_fn.regions = function (regions) { + var $$ = this.internal, config = $$.config; + if (!regions) { return config.regions; } + config.regions = regions; + $$.redrawWithoutRescale(); + return config.regions; + }; + c3_chart_fn.regions.add = function (regions) { + var $$ = this.internal, config = $$.config; + if (!regions) { return config.regions; } + config.regions = config.regions.concat(regions); + $$.redrawWithoutRescale(); + return config.regions; + }; + c3_chart_fn.regions.remove = function (options) { + var $$ = this.internal, config = $$.config, + duration, classes, regions; + + options = options || {}; + duration = $$.getOption(options, "duration", config.transition_duration); + classes = $$.getOption(options, "classes", [CLASS.region]); + + regions = $$.main.select('.' + CLASS.regions).selectAll(classes.map(function (c) { return '.' + c; })); + (duration ? regions.transition().duration(duration) : regions) + .style('opacity', 0) + .remove(); + + config.regions = config.regions.filter(function (region) { + var found = false; + if (!region['class']) { + return true; + } + region['class'].split(' ').forEach(function (c) { + if (classes.indexOf(c) >= 0) { found = true; } + }); + return !found; + }); + + return config.regions; + }; + + c3_chart_fn.data = function (targetIds) { + var targets = this.internal.data.targets; + return typeof targetIds === 'undefined' ? targets : targets.filter(function (t) { + return [].concat(targetIds).indexOf(t.id) >= 0; + }); + }; + c3_chart_fn.data.shown = function (targetIds) { + return this.internal.filterTargetsToShow(this.data(targetIds)); + }; + c3_chart_fn.data.values = function (targetId) { + var targets, values = null; + if (targetId) { + targets = this.data(targetId); + values = targets[0] ? targets[0].values.map(function (d) { return d.value; }) : null; + } + return values; + }; + c3_chart_fn.data.names = function (names) { + this.internal.clearLegendItemTextBoxCache(); + return this.internal.updateDataAttributes('names', names); + }; + c3_chart_fn.data.colors = function (colors) { + return this.internal.updateDataAttributes('colors', colors); + }; + c3_chart_fn.data.axes = function (axes) { + return this.internal.updateDataAttributes('axes', axes); + }; + + c3_chart_fn.category = function (i, category) { + var $$ = this.internal, config = $$.config; + if (arguments.length > 1) { + config.axis_x_categories[i] = category; + $$.redraw(); + } + return config.axis_x_categories[i]; + }; + c3_chart_fn.categories = function (categories) { + var $$ = this.internal, config = $$.config; + if (!arguments.length) { return config.axis_x_categories; } + config.axis_x_categories = categories; + $$.redraw(); + return config.axis_x_categories; + }; + + // TODO: fix + c3_chart_fn.color = function (id) { + var $$ = this.internal; + return $$.color(id); // more patterns + }; + + c3_chart_fn.x = function (x) { + var $$ = this.internal; + if (arguments.length) { + $$.updateTargetX($$.data.targets, x); + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true}); + } + return $$.data.xs; + }; + c3_chart_fn.xs = function (xs) { + var $$ = this.internal; + if (arguments.length) { + $$.updateTargetXs($$.data.targets, xs); + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true}); + } + return $$.data.xs; + }; + + c3_chart_fn.axis = function () {}; + c3_chart_fn.axis.labels = function (labels) { + var $$ = this.internal; + if (arguments.length) { + Object.keys(labels).forEach(function (axisId) { + $$.axis.setLabelText(axisId, labels[axisId]); + }); + $$.axis.updateLabels(); + } + // TODO: return some values? + }; + c3_chart_fn.axis.max = function (max) { + var $$ = this.internal, config = $$.config; + if (arguments.length) { + if (typeof max === 'object') { + if (isValue(max.x)) { config.axis_x_max = max.x; } + if (isValue(max.y)) { config.axis_y_max = max.y; } + if (isValue(max.y2)) { config.axis_y2_max = max.y2; } + } else { + config.axis_y_max = config.axis_y2_max = max; + } + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true}); + } else { + return { + x: config.axis_x_max, + y: config.axis_y_max, + y2: config.axis_y2_max + }; + } + }; + c3_chart_fn.axis.min = function (min) { + var $$ = this.internal, config = $$.config; + if (arguments.length) { + if (typeof min === 'object') { + if (isValue(min.x)) { config.axis_x_min = min.x; } + if (isValue(min.y)) { config.axis_y_min = min.y; } + if (isValue(min.y2)) { config.axis_y2_min = min.y2; } + } else { + config.axis_y_min = config.axis_y2_min = min; + } + $$.redraw({withUpdateOrgXDomain: true, withUpdateXDomain: true}); + } else { + return { + x: config.axis_x_min, + y: config.axis_y_min, + y2: config.axis_y2_min + }; + } + }; + c3_chart_fn.axis.range = function (range) { + if (arguments.length) { + if (isDefined(range.max)) { this.axis.max(range.max); } + if (isDefined(range.min)) { this.axis.min(range.min); } + } else { + return { + max: this.axis.max(), + min: this.axis.min() + }; + } + }; + + c3_chart_fn.legend = function () {}; + c3_chart_fn.legend.show = function (targetIds) { + var $$ = this.internal; + $$.showLegend($$.mapToTargetIds(targetIds)); + $$.updateAndRedraw({withLegend: true}); + }; + c3_chart_fn.legend.hide = function (targetIds) { + var $$ = this.internal; + $$.hideLegend($$.mapToTargetIds(targetIds)); + $$.updateAndRedraw({withLegend: true}); + }; + + c3_chart_fn.resize = function (size) { + var $$ = this.internal, config = $$.config; + config.size_width = size ? size.width : null; + config.size_height = size ? size.height : null; + this.flush(); + }; + + c3_chart_fn.flush = function () { + var $$ = this.internal; + $$.updateAndRedraw({withLegend: true, withTransition: false, withTransitionForTransform: false}); + }; + + c3_chart_fn.destroy = function () { + var $$ = this.internal; + + window.clearInterval($$.intervalForObserveInserted); + + if ($$.resizeTimeout !== undefined) { + window.clearTimeout($$.resizeTimeout); + } + + if (window.detachEvent) { + window.detachEvent('onresize', $$.resizeFunction); + } else if (window.removeEventListener) { + window.removeEventListener('resize', $$.resizeFunction); + } else { + var wrapper = window.onresize; + // check if no one else removed our wrapper and remove our resizeFunction from it + if (wrapper && wrapper.add && wrapper.remove) { + wrapper.remove($$.resizeFunction); + } + } + + $$.selectChart.classed('c3', false).html(""); + + // MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen. + Object.keys($$).forEach(function (key) { + $$[key] = null; + }); + + return null; + }; + + c3_chart_fn.tooltip = function () {}; + c3_chart_fn.tooltip.show = function (args) { + var $$ = this.internal, index, mouse; + + // determine mouse position on the chart + if (args.mouse) { + mouse = args.mouse; + } + + // determine focus data + if (args.data) { + if ($$.isMultipleX()) { + // if multiple xs, target point will be determined by mouse + mouse = [$$.x(args.data.x), $$.getYScale(args.data.id)(args.data.value)]; + index = null; + } else { + // TODO: when tooltip_grouped = false + index = isValue(args.data.index) ? args.data.index : $$.getIndexByX(args.data.x); + } + } + else if (typeof args.x !== 'undefined') { + index = $$.getIndexByX(args.x); + } + else if (typeof args.index !== 'undefined') { + index = args.index; + } + + // emulate mouse events to show + $$.dispatchEvent('mouseover', index, mouse); + $$.dispatchEvent('mousemove', index, mouse); + + $$.config.tooltip_onshow.call($$, args.data); + }; + c3_chart_fn.tooltip.hide = function () { + // TODO: get target data by checking the state of focus + this.internal.dispatchEvent('mouseout', 0); + + this.internal.config.tooltip_onhide.call(this); + }; + + // Features: + // 1. category axis + // 2. ceil values of translate/x/y to int for half pixel antialiasing + // 3. multiline tick text + var tickTextCharSize; + function c3_axis(d3, params) { + var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize, tickPadding = 3, tickValues = null, tickFormat, tickArguments; + + var tickOffset = 0, tickCulling = true, tickCentered; + + params = params || {}; + outerTickSize = params.withOuterTick ? 6 : 0; + + function axisX(selection, x) { + selection.attr("transform", function (d) { + return "translate(" + Math.ceil(x(d) + tickOffset) + ", 0)"; + }); + } + function axisY(selection, y) { + selection.attr("transform", function (d) { + return "translate(0," + Math.ceil(y(d)) + ")"; + }); + } + function scaleExtent(domain) { + var start = domain[0], stop = domain[domain.length - 1]; + return start < stop ? [ start, stop ] : [ stop, start ]; + } + function generateTicks(scale) { + var i, domain, ticks = []; + if (scale.ticks) { + return scale.ticks.apply(scale, tickArguments); + } + domain = scale.domain(); + for (i = Math.ceil(domain[0]); i < domain[1]; i++) { + ticks.push(i); + } + if (ticks.length > 0 && ticks[0] > 0) { + ticks.unshift(ticks[0] - (ticks[1] - ticks[0])); + } + return ticks; + } + function copyScale() { + var newScale = scale.copy(), domain; + if (params.isCategory) { + domain = scale.domain(); + newScale.domain([domain[0], domain[1] - 1]); + } + return newScale; + } + function textFormatted(v) { + var formatted = tickFormat ? tickFormat(v) : v; + return typeof formatted !== 'undefined' ? formatted : ''; + } + function getSizeFor1Char(tick) { + if (tickTextCharSize) { + return tickTextCharSize; + } + var size = { + h: 11.5, + w: 5.5 + }; + tick.select('text').text(textFormatted).each(function (d) { + var box = this.getBoundingClientRect(), + text = textFormatted(d), + h = box.height, + w = text ? (box.width / text.length) : undefined; + if (h && w) { + size.h = h; + size.w = w; + } + }).text(''); + tickTextCharSize = size; + return size; + } + function transitionise(selection) { + return params.withoutTransition ? selection : d3.transition(selection); + } + function axis(g) { + g.each(function () { + var g = axis.g = d3.select(this); + + var scale0 = this.__chart__ || scale, scale1 = this.__chart__ = copyScale(); + + var ticks = tickValues ? tickValues : generateTicks(scale1), + tick = g.selectAll(".tick").data(ticks, scale1), + tickEnter = tick.enter().insert("g", ".domain").attr("class", "tick").style("opacity", 1e-6), + // MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks. + tickExit = tick.exit().remove(), + tickUpdate = transitionise(tick).style("opacity", 1), + tickTransform, tickX, tickY; + + var range = scale.rangeExtent ? scale.rangeExtent() : scaleExtent(scale.range()), + path = g.selectAll(".domain").data([ 0 ]), + pathUpdate = (path.enter().append("path").attr("class", "domain"), transitionise(path)); + tickEnter.append("line"); + tickEnter.append("text"); + + var lineEnter = tickEnter.select("line"), + lineUpdate = tickUpdate.select("line"), + textEnter = tickEnter.select("text"), + textUpdate = tickUpdate.select("text"); + + if (params.isCategory) { + tickOffset = Math.ceil((scale1(1) - scale1(0)) / 2); + tickX = tickCentered ? 0 : tickOffset; + tickY = tickCentered ? tickOffset : 0; + } else { + tickOffset = tickX = 0; + } + + var text, tspan, sizeFor1Char = getSizeFor1Char(g.select('.tick')), counts = []; + var tickLength = Math.max(innerTickSize, 0) + tickPadding, + isVertical = orient === 'left' || orient === 'right'; + + // this should be called only when category axis + function splitTickText(d, maxWidth) { + var tickText = textFormatted(d), + subtext, spaceIndex, textWidth, splitted = []; + + if (Object.prototype.toString.call(tickText) === "[object Array]") { + return tickText; + } + + if (!maxWidth || maxWidth <= 0) { + maxWidth = isVertical ? 95 : params.isCategory ? (Math.ceil(scale1(ticks[1]) - scale1(ticks[0])) - 12) : 110; + } + + function split(splitted, text) { + spaceIndex = undefined; + for (var i = 1; i < text.length; i++) { + if (text.charAt(i) === ' ') { + spaceIndex = i; + } + subtext = text.substr(0, i + 1); + textWidth = sizeFor1Char.w * subtext.length; + // if text width gets over tick width, split by space index or crrent index + if (maxWidth < textWidth) { + return split( + splitted.concat(text.substr(0, spaceIndex ? spaceIndex : i)), + text.slice(spaceIndex ? spaceIndex + 1 : i) + ); + } + } + return splitted.concat(text); + } + + return split(splitted, tickText + ""); + } + + function tspanDy(d, i) { + var dy = sizeFor1Char.h; + if (i === 0) { + if (orient === 'left' || orient === 'right') { + dy = -((counts[d.index] - 1) * (sizeFor1Char.h / 2) - 3); + } else { + dy = ".71em"; + } + } + return dy; + } + + function tickSize(d) { + var tickPosition = scale(d) + (tickCentered ? 0 : tickOffset); + return range[0] < tickPosition && tickPosition < range[1] ? innerTickSize : 0; + } + + text = tick.select("text"); + tspan = text.selectAll('tspan') + .data(function (d, i) { + var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [].concat(textFormatted(d)); + counts[i] = splitted.length; + return splitted.map(function (s) { + return { index: i, splitted: s }; + }); + }); + tspan.enter().append('tspan'); + tspan.exit().remove(); + tspan.text(function (d) { return d.splitted; }); + + var rotate = params.tickTextRotate; + + function textAnchorForText(rotate) { + if (!rotate) { + return 'middle'; + } + return rotate > 0 ? "start" : "end"; + } + function textTransform(rotate) { + if (!rotate) { + return ''; + } + return "rotate(" + rotate + ")"; + } + function dxForText(rotate) { + if (!rotate) { + return 0; + } + return 8 * Math.sin(Math.PI * (rotate / 180)); + } + function yForText(rotate) { + if (!rotate) { + return tickLength; + } + return 11.5 - 2.5 * (rotate / 15) * (rotate > 0 ? 1 : -1); + } + + switch (orient) { + case "bottom": + { + tickTransform = axisX; + lineEnter.attr("y2", innerTickSize); + textEnter.attr("y", tickLength); + lineUpdate.attr("x1", tickX).attr("x2", tickX).attr("y2", tickSize); + textUpdate.attr("x", 0).attr("y", yForText(rotate)) + .style("text-anchor", textAnchorForText(rotate)) + .attr("transform", textTransform(rotate)); + tspan.attr('x', 0).attr("dy", tspanDy).attr('dx', dxForText(rotate)); + pathUpdate.attr("d", "M" + range[0] + "," + outerTickSize + "V0H" + range[1] + "V" + outerTickSize); + break; + } + case "top": + { + // TODO: rotated tick text + tickTransform = axisX; + lineEnter.attr("y2", -innerTickSize); + textEnter.attr("y", -tickLength); + lineUpdate.attr("x2", 0).attr("y2", -innerTickSize); + textUpdate.attr("x", 0).attr("y", -tickLength); + text.style("text-anchor", "middle"); + tspan.attr('x', 0).attr("dy", "0em"); + pathUpdate.attr("d", "M" + range[0] + "," + -outerTickSize + "V0H" + range[1] + "V" + -outerTickSize); + break; + } + case "left": + { + tickTransform = axisY; + lineEnter.attr("x2", -innerTickSize); + textEnter.attr("x", -tickLength); + lineUpdate.attr("x2", -innerTickSize).attr("y1", tickY).attr("y2", tickY); + textUpdate.attr("x", -tickLength).attr("y", tickOffset); + text.style("text-anchor", "end"); + tspan.attr('x', -tickLength).attr("dy", tspanDy); + pathUpdate.attr("d", "M" + -outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + -outerTickSize); + break; + } + case "right": + { + tickTransform = axisY; + lineEnter.attr("x2", innerTickSize); + textEnter.attr("x", tickLength); + lineUpdate.attr("x2", innerTickSize).attr("y2", 0); + textUpdate.attr("x", tickLength).attr("y", 0); + text.style("text-anchor", "start"); + tspan.attr('x', tickLength).attr("dy", tspanDy); + pathUpdate.attr("d", "M" + outerTickSize + "," + range[0] + "H0V" + range[1] + "H" + outerTickSize); + break; + } + } + if (scale1.rangeBand) { + var x = scale1, dx = x.rangeBand() / 2; + scale0 = scale1 = function (d) { + return x(d) + dx; + }; + } else if (scale0.rangeBand) { + scale0 = scale1; + } else { + tickExit.call(tickTransform, scale1); + } + tickEnter.call(tickTransform, scale0); + tickUpdate.call(tickTransform, scale1); + }); + } + axis.scale = function (x) { + if (!arguments.length) { return scale; } + scale = x; + return axis; + }; + axis.orient = function (x) { + if (!arguments.length) { return orient; } + orient = x in {top: 1, right: 1, bottom: 1, left: 1} ? x + "" : "bottom"; + return axis; + }; + axis.tickFormat = function (format) { + if (!arguments.length) { return tickFormat; } + tickFormat = format; + return axis; + }; + axis.tickCentered = function (isCentered) { + if (!arguments.length) { return tickCentered; } + tickCentered = isCentered; + return axis; + }; + axis.tickOffset = function () { + return tickOffset; + }; + axis.tickInterval = function () { + var interval, length; + if (params.isCategory) { + interval = tickOffset * 2; + } + else { + length = axis.g.select('path.domain').node().getTotalLength() - outerTickSize * 2; + interval = length / axis.g.selectAll('line').size(); + } + return interval === Infinity ? 0 : interval; + }; + axis.ticks = function () { + if (!arguments.length) { return tickArguments; } + tickArguments = arguments; + return axis; + }; + axis.tickCulling = function (culling) { + if (!arguments.length) { return tickCulling; } + tickCulling = culling; + return axis; + }; + axis.tickValues = function (x) { + if (typeof x === 'function') { + tickValues = function () { + return x(scale.domain()); + }; + } + else { + if (!arguments.length) { return tickValues; } + tickValues = x; + } + return axis; + }; + return axis; + } + + c3_chart_internal_fn.isSafari = function () { + var ua = window.navigator.userAgent; + return ua.indexOf('Safari') >= 0 && ua.indexOf('Chrome') < 0; + }; + c3_chart_internal_fn.isChrome = function () { + var ua = window.navigator.userAgent; + return ua.indexOf('Chrome') >= 0; + }; + + // PhantomJS doesn't have support for Function.prototype.bind, which has caused confusion. Use + // this polyfill to avoid the confusion. + // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill + + if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; + } + + if (typeof define === 'function' && define.amd) { + define("c3", ["d3"], function () { return c3; }); + } else if ('undefined' !== typeof exports && 'undefined' !== typeof module) { + module.exports = c3; + } else { + window.c3 = c3; + } + +})(window); diff --git a/debian/missing-sources/dygraph-combined.js b/debian/missing-sources/dygraph-combined.js new file mode 100644 index 00000000..5316fe49 --- /dev/null +++ b/debian/missing-sources/dygraph-combined.js @@ -0,0 +1,11219 @@ +/*! @license Copyright 2014 Dan Vanderkam (danvdk@gmail.com) MIT-licensed (http://opensource.org/licenses/MIT) */ +// Console-polyfill. MIT license. +// https://github.com/paulmillr/console-polyfill +// Make it safe to do console.log() always. +(function(con) { + 'use strict'; + var prop, method; + var empty = {}; + var dummy = function() {}; + var properties = 'memory'.split(','); + var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' + + 'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' + + 'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(','); + while (prop = properties.pop()) con[prop] = con[prop] || empty; + while (method = methods.pop()) con[method] = con[method] || dummy; +})(this.console = this.console || {}); // Using `this` for web workers. +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +(function() { +'use strict'; + +/** + * @fileoverview Adds support for dashed lines to the HTML5 canvas. + * + * Usage: + * var ctx = canvas.getContext("2d"); + * ctx.installPattern([10, 5]) // draw 10 pixels, skip 5 pixels, repeat. + * ctx.beginPath(); + * ctx.moveTo(100, 100); // start the first line segment. + * ctx.lineTo(150, 200); + * ctx.lineTo(200, 100); + * ctx.moveTo(300, 150); // start a second, unconnected line + * ctx.lineTo(400, 250); + * ... + * ctx.stroke(); // draw the dashed line. + * ctx.uninstallPattern(); + * + * This is designed to leave the canvas untouched when it's not used. + * If you never install a pattern, or call uninstallPattern(), then the canvas + * will be exactly as it would have if you'd never used this library. The only + * difference from the standard canvas will be the "installPattern" method of + * the drawing context. + */ + +/** + * Change the stroking style of the canvas drawing context from a solid line to + * a pattern (e.g. dashes, dash-dot-dash, etc.) + * + * Once you've installed the pattern, you can draw with it by using the + * beginPath(), moveTo(), lineTo() and stroke() method calls. Note that some + * more advanced methods (e.g. quadraticCurveTo() and bezierCurveTo()) are not + * supported. See file overview for a working example. + * + * Side effects of calling this method include adding an "isPatternInstalled" + * property and "uninstallPattern" method to this particular canvas context. + * You must call uninstallPattern() before calling installPattern() again. + * + * @param {Array.<number>} pattern A description of the stroke pattern. Even + * indices indicate a draw and odd indices indicate a gap (in pixels). The + * array should have a even length as any odd lengthed array could be expressed + * as a smaller even length array. + */ +CanvasRenderingContext2D.prototype.installPattern = function(pattern) { + if (typeof(this.isPatternInstalled) !== 'undefined') { + throw "Must un-install old line pattern before installing a new one."; + } + this.isPatternInstalled = true; + + var dashedLineToHistory = [0, 0]; + + // list of connected line segements: + // [ [x1, y1], ..., [xn, yn] ], [ [x1, y1], ..., [xn, yn] ] + var segments = []; + + // Stash away copies of the unmodified line-drawing functions. + var realBeginPath = this.beginPath; + var realLineTo = this.lineTo; + var realMoveTo = this.moveTo; + var realStroke = this.stroke; + + /** @type {function()|undefined} */ + this.uninstallPattern = function() { + this.beginPath = realBeginPath; + this.lineTo = realLineTo; + this.moveTo = realMoveTo; + this.stroke = realStroke; + this.uninstallPattern = undefined; + this.isPatternInstalled = undefined; + }; + + // Keep our own copies of the line segments as they're drawn. + this.beginPath = function() { + segments = []; + realBeginPath.call(this); + }; + this.moveTo = function(x, y) { + segments.push([[x, y]]); + realMoveTo.call(this, x, y); + }; + this.lineTo = function(x, y) { + var last = segments[segments.length - 1]; + last.push([x, y]); + }; + + this.stroke = function() { + if (segments.length === 0) { + // Maybe the user is drawing something other than a line. + // TODO(danvk): test this case. + realStroke.call(this); + return; + } + + for (var i = 0; i < segments.length; i++) { + var seg = segments[i]; + var x1 = seg[0][0], y1 = seg[0][1]; + for (var j = 1; j < seg.length; j++) { + // Draw a dashed line from (x1, y1) - (x2, y2) + var x2 = seg[j][0], y2 = seg[j][1]; + this.save(); + + // Calculate transformation parameters + var dx = (x2-x1); + var dy = (y2-y1); + var len = Math.sqrt(dx*dx + dy*dy); + var rot = Math.atan2(dy, dx); + + // Set transformation + this.translate(x1, y1); + realMoveTo.call(this, 0, 0); + this.rotate(rot); + + // Set last pattern index we used for this pattern. + var patternIndex = dashedLineToHistory[0]; + var x = 0; + while (len > x) { + // Get the length of the pattern segment we are dealing with. + var segment = pattern[patternIndex]; + // If our last draw didn't complete the pattern segment all the way + // we will try to finish it. Otherwise we will try to do the whole + // segment. + if (dashedLineToHistory[1]) { + x += dashedLineToHistory[1]; + } else { + x += segment; + } + + if (x > len) { + // We were unable to complete this pattern index all the way, keep + // where we are the history so our next draw continues where we + // left off in the pattern. + dashedLineToHistory = [patternIndex, x-len]; + x = len; + } else { + // We completed this patternIndex, we put in the history that we + // are on the beginning of the next segment. + dashedLineToHistory = [(patternIndex+1)%pattern.length, 0]; + } + + // We do a line on a even pattern index and just move on a odd + // pattern index. The move is the empty space in the dash. + if (patternIndex % 2 === 0) { + realLineTo.call(this, x, 0); + } else { + realMoveTo.call(this, x, 0); + } + + // If we are not done, next loop process the next pattern segment, or + // the first segment again if we are at the end of the pattern. + patternIndex = (patternIndex+1) % pattern.length; + } + + this.restore(); + x1 = x2; + y1 = y2; + } + } + realStroke.call(this); + segments = []; + }; +}; + +/** + * Removes the previously-installed pattern. + * You must call installPattern() before calling this. You can install at most + * one pattern at a time--there is no pattern stack. + */ +CanvasRenderingContext2D.prototype.uninstallPattern = function() { + // This will be replaced by a non-error version when a pattern is installed. + throw "Must install a line pattern before uninstalling it."; +}; + +})(); +/** + * @license + * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DygraphOptions is responsible for parsing and returning information about options. + * + * Still tightly coupled to Dygraphs, we could remove some of that, you know. + */ + +var DygraphOptions = (function() { +/*jshint strict:false */ + +// For "production" code, this gets set to false by uglifyjs. +// Need to define it outside of "use strict", hence the nested IIFEs. +if (typeof(DEBUG) === 'undefined') DEBUG=true; + +return (function() { + +// TODO: remove this jshint directive & fix the warnings. +/*jshint sub:true */ +/*global Dygraph:false */ +"use strict"; + +/* + * Interesting member variables: (REMOVING THIS LIST AS I CLOSURIZE) + * global_ - global attributes (common among all graphs, AIUI) + * user - attributes set by the user + * series_ - { seriesName -> { idx, yAxis, options }} + */ + +/** + * This parses attributes into an object that can be easily queried. + * + * It doesn't necessarily mean that all options are available, specifically + * if labels are not yet available, since those drive details of the per-series + * and per-axis options. + * + * @param {Dygraph} dygraph The chart to which these options belong. + * @constructor + */ +var DygraphOptions = function(dygraph) { + /** + * The dygraph. + * @type {!Dygraph} + */ + this.dygraph_ = dygraph; + + /** + * Array of axis index to { series : [ series names ] , options : { axis-specific options. } + * @type {Array.<{series : Array.<string>, options : Object}>} @private + */ + this.yAxes_ = []; + + /** + * Contains x-axis specific options, which are stored in the options key. + * This matches the yAxes_ object structure (by being a dictionary with an + * options element) allowing for shared code. + * @type {options: Object} @private + */ + this.xAxis_ = {}; + this.series_ = {}; + + // Once these two objects are initialized, you can call get(); + this.global_ = this.dygraph_.attrs_; + this.user_ = this.dygraph_.user_attrs_ || {}; + + /** + * A list of series in columnar order. + * @type {Array.<string>} + */ + this.labels_ = []; + + this.highlightSeries_ = this.get("highlightSeriesOpts") || {}; + this.reparseSeries(); +}; + +/** + * Not optimal, but does the trick when you're only using two axes. + * If we move to more axes, this can just become a function. + * + * @type {Object.<number>} + * @private + */ +DygraphOptions.AXIS_STRING_MAPPINGS_ = { + 'y' : 0, + 'Y' : 0, + 'y1' : 0, + 'Y1' : 0, + 'y2' : 1, + 'Y2' : 1 +}; + +/** + * @param {string|number} axis + * @private + */ +DygraphOptions.axisToIndex_ = function(axis) { + if (typeof(axis) == "string") { + if (DygraphOptions.AXIS_STRING_MAPPINGS_.hasOwnProperty(axis)) { + return DygraphOptions.AXIS_STRING_MAPPINGS_[axis]; + } + throw "Unknown axis : " + axis; + } + if (typeof(axis) == "number") { + if (axis === 0 || axis === 1) { + return axis; + } + throw "Dygraphs only supports two y-axes, indexed from 0-1."; + } + if (axis) { + throw "Unknown axis : " + axis; + } + // No axis specification means axis 0. + return 0; +}; + +/** + * Reparses options that are all related to series. This typically occurs when + * options are either updated, or source data has been made available. + * + * TODO(konigsberg): The method name is kind of weak; fix. + */ +DygraphOptions.prototype.reparseSeries = function() { + var labels = this.get("labels"); + if (!labels) { + return; // -- can't do more for now, will parse after getting the labels. + } + + this.labels_ = labels.slice(1); + + this.yAxes_ = [ { series : [], options : {}} ]; // Always one axis at least. + this.xAxis_ = { options : {} }; + this.series_ = {}; + + // Traditionally, per-series options were specified right up there with the options. For instance + // { + // labels: [ "X", "foo", "bar" ], + // pointSize: 3, + // foo : {}, // options for foo + // bar : {} // options for bar + // } + // + // Moving forward, series really should be specified in the series element, separating them. + // like so: + // + // { + // labels: [ "X", "foo", "bar" ], + // pointSize: 3, + // series : { + // foo : {}, // options for foo + // bar : {} // options for bar + // } + // } + // + // So, if series is found, it's expected to contain per-series data, otherwise we fall + // back. + var oldStyleSeries = !this.user_["series"]; + + if (oldStyleSeries) { + var axisId = 0; // 0-offset; there's always one. + // Go through once, add all the series, and for those with {} axis options, add a new axis. + for (var idx = 0; idx < this.labels_.length; idx++) { + var seriesName = this.labels_[idx]; + + var optionsForSeries = this.user_[seriesName] || {}; + + var yAxis = 0; + var axis = optionsForSeries["axis"]; + if (typeof(axis) == 'object') { + yAxis = ++axisId; + this.yAxes_[yAxis] = { series : [ seriesName ], options : axis }; + } + + // Associate series without axis options with axis 0. + if (!axis) { // undefined + this.yAxes_[0].series.push(seriesName); + } + + this.series_[seriesName] = { idx: idx, yAxis: yAxis, options : optionsForSeries }; + } + + // Go through one more time and assign series to an axis defined by another + // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } } + for (var idx = 0; idx < this.labels_.length; idx++) { + var seriesName = this.labels_[idx]; + var optionsForSeries = this.series_[seriesName]["options"]; + var axis = optionsForSeries["axis"]; + + if (typeof(axis) == 'string') { + if (!this.series_.hasOwnProperty(axis)) { + console.error("Series " + seriesName + " wants to share a y-axis with " + + "series " + axis + ", which does not define its own axis."); + return; + } + var yAxis = this.series_[axis].yAxis; + this.series_[seriesName].yAxis = yAxis; + this.yAxes_[yAxis].series.push(seriesName); + } + } + } else { + for (var idx = 0; idx < this.labels_.length; idx++) { + var seriesName = this.labels_[idx]; + var optionsForSeries = this.user_.series[seriesName] || {}; + var yAxis = DygraphOptions.axisToIndex_(optionsForSeries["axis"]); + + this.series_[seriesName] = { + idx: idx, + yAxis: yAxis, + options : optionsForSeries }; + + if (!this.yAxes_[yAxis]) { + this.yAxes_[yAxis] = { series : [ seriesName ], options : {} }; + } else { + this.yAxes_[yAxis].series.push(seriesName); + } + } + } + + var axis_opts = this.user_["axes"] || {}; + Dygraph.update(this.yAxes_[0].options, axis_opts["y"] || {}); + if (this.yAxes_.length > 1) { + Dygraph.update(this.yAxes_[1].options, axis_opts["y2"] || {}); + } + Dygraph.update(this.xAxis_.options, axis_opts["x"] || {}); + + if (DEBUG) this.validateOptions_(); +}; + +/** + * Get a global value. + * + * @param {string} name the name of the option. + */ +DygraphOptions.prototype.get = function(name) { + var result = this.getGlobalUser_(name); + if (result !== null) { + return result; + } + return this.getGlobalDefault_(name); +}; + +DygraphOptions.prototype.getGlobalUser_ = function(name) { + if (this.user_.hasOwnProperty(name)) { + return this.user_[name]; + } + return null; +}; + +DygraphOptions.prototype.getGlobalDefault_ = function(name) { + if (this.global_.hasOwnProperty(name)) { + return this.global_[name]; + } + if (Dygraph.DEFAULT_ATTRS.hasOwnProperty(name)) { + return Dygraph.DEFAULT_ATTRS[name]; + } + return null; +}; + +/** + * Get a value for a specific axis. If there is no specific value for the axis, + * the global value is returned. + * + * @param {string} name the name of the option. + * @param {string|number} axis the axis to search. Can be the string representation + * ("y", "y2") or the axis number (0, 1). + */ +DygraphOptions.prototype.getForAxis = function(name, axis) { + var axisIdx; + var axisString; + + // Since axis can be a number or a string, straighten everything out here. + if (typeof(axis) == 'number') { + axisIdx = axis; + axisString = axisIdx === 0 ? "y" : "y2"; + } else { + if (axis == "y1") { axis = "y"; } // Standardize on 'y'. Is this bad? I think so. + if (axis == "y") { + axisIdx = 0; + } else if (axis == "y2") { + axisIdx = 1; + } else if (axis == "x") { + axisIdx = -1; // simply a placeholder for below. + } else { + throw "Unknown axis " + axis; + } + axisString = axis; + } + + var userAxis = (axisIdx == -1) ? this.xAxis_ : this.yAxes_[axisIdx]; + + // Search the user-specified axis option first. + if (userAxis) { // This condition could be removed if we always set up this.yAxes_ for y2. + var axisOptions = userAxis.options; + if (axisOptions.hasOwnProperty(name)) { + return axisOptions[name]; + } + } + + // User-specified global options second. + // But, hack, ignore globally-specified 'logscale' for 'x' axis declaration. + if (!(axis === 'x' && name === 'logscale')) { + var result = this.getGlobalUser_(name); + if (result !== null) { + return result; + } + } + // Default axis options third. + var defaultAxisOptions = Dygraph.DEFAULT_ATTRS.axes[axisString]; + if (defaultAxisOptions.hasOwnProperty(name)) { + return defaultAxisOptions[name]; + } + + // Default global options last. + return this.getGlobalDefault_(name); +}; + +/** + * Get a value for a specific series. If there is no specific value for the series, + * the value for the axis is returned (and afterwards, the global value.) + * + * @param {string} name the name of the option. + * @param {string} series the series to search. + */ +DygraphOptions.prototype.getForSeries = function(name, series) { + // Honors indexes as series. + if (series === this.dygraph_.getHighlightSeries()) { + if (this.highlightSeries_.hasOwnProperty(name)) { + return this.highlightSeries_[name]; + } + } + + if (!this.series_.hasOwnProperty(series)) { + throw "Unknown series: " + series; + } + + var seriesObj = this.series_[series]; + var seriesOptions = seriesObj["options"]; + if (seriesOptions.hasOwnProperty(name)) { + return seriesOptions[name]; + } + + return this.getForAxis(name, seriesObj["yAxis"]); +}; + +/** + * Returns the number of y-axes on the chart. + * @return {number} the number of axes. + */ +DygraphOptions.prototype.numAxes = function() { + return this.yAxes_.length; +}; + +/** + * Return the y-axis for a given series, specified by name. + */ +DygraphOptions.prototype.axisForSeries = function(series) { + return this.series_[series].yAxis; +}; + +/** + * Returns the options for the specified axis. + */ +// TODO(konigsberg): this is y-axis specific. Support the x axis. +DygraphOptions.prototype.axisOptions = function(yAxis) { + return this.yAxes_[yAxis].options; +}; + +/** + * Return the series associated with an axis. + */ +DygraphOptions.prototype.seriesForAxis = function(yAxis) { + return this.yAxes_[yAxis].series; +}; + +/** + * Return the list of all series, in their columnar order. + */ +DygraphOptions.prototype.seriesNames = function() { + return this.labels_; +}; + +if (DEBUG) { + +/** + * Validate all options. + * This requires Dygraph.OPTIONS_REFERENCE, which is only available in debug builds. + * @private + */ +DygraphOptions.prototype.validateOptions_ = function() { + if (typeof Dygraph.OPTIONS_REFERENCE === 'undefined') { + throw 'Called validateOptions_ in prod build.'; + } + + var that = this; + var validateOption = function(optionName) { + if (!Dygraph.OPTIONS_REFERENCE[optionName]) { + that.warnInvalidOption_(optionName); + } + }; + + var optionsDicts = [this.xAxis_.options, + this.yAxes_[0].options, + this.yAxes_[1] && this.yAxes_[1].options, + this.global_, + this.user_, + this.highlightSeries_]; + var names = this.seriesNames(); + for (var i = 0; i < names.length; i++) { + var name = names[i]; + if (this.series_.hasOwnProperty(name)) { + optionsDicts.push(this.series_[name].options); + } + } + for (var i = 0; i < optionsDicts.length; i++) { + var dict = optionsDicts[i]; + if (!dict) continue; + for (var optionName in dict) { + if (dict.hasOwnProperty(optionName)) { + validateOption(optionName); + } + } + } +}; + +var WARNINGS = {}; // Only show any particular warning once. + +/** + * Logs a warning about invalid options. + * TODO: make this throw for testing + * @private + */ +DygraphOptions.prototype.warnInvalidOption_ = function(optionName) { + if (!WARNINGS[optionName]) { + WARNINGS[optionName] = true; + var isSeries = (this.labels_.indexOf(optionName) >= 0); + if (isSeries) { + console.warn('Use new-style per-series options (saw ' + optionName + ' as top-level options key). See http://bit.ly/1tceaJs'); + } else { + console.warn('Unknown option ' + optionName + ' (full list of options at dygraphs.com/options.html'); + throw "invalid option " + optionName; + } + } +}; + +// Reset list of previously-shown warnings. Used for testing. +DygraphOptions.resetWarnings_ = function() { + WARNINGS = {}; +}; + +} + +return DygraphOptions; + +})(); +})(); +/** + * @license + * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview Based on PlotKitLayout, but modified to meet the needs of + * dygraphs. + */ + +var DygraphLayout = (function() { + +/*global Dygraph:false */ +"use strict"; + +/** + * Creates a new DygraphLayout object. + * + * This class contains all the data to be charted. + * It uses data coordinates, but also records the chart range (in data + * coordinates) and hence is able to calculate percentage positions ('In this + * view, Point A lies 25% down the x-axis.') + * + * Two things that it does not do are: + * 1. Record pixel coordinates for anything. + * 2. (oddly) determine anything about the layout of chart elements. + * + * The naming is a vestige of Dygraph's original PlotKit roots. + * + * @constructor + */ +var DygraphLayout = function(dygraph) { + this.dygraph_ = dygraph; + /** + * Array of points for each series. + * + * [series index][row index in series] = |Point| structure, + * where series index refers to visible series only, and the + * point index is for the reduced set of points for the current + * zoom region (including one point just outside the window). + * All points in the same row index share the same X value. + * + * @type {Array.<Array.<Dygraph.PointType>>} + */ + this.points = []; + this.setNames = []; + this.annotations = []; + this.yAxes_ = null; + + // TODO(danvk): it's odd that xTicks_ and yTicks_ are inputs, but xticks and + // yticks are outputs. Clean this up. + this.xTicks_ = null; + this.yTicks_ = null; +}; + +/** + * Add points for a single series. + * + * @param {string} setname Name of the series. + * @param {Array.<Dygraph.PointType>} set_xy Points for the series. + */ +DygraphLayout.prototype.addDataset = function(setname, set_xy) { + this.points.push(set_xy); + this.setNames.push(setname); +}; + +/** + * Returns the box which the chart should be drawn in. This is the canvas's + * box, less space needed for the axis and chart labels. + * + * @return {{x: number, y: number, w: number, h: number}} + */ +DygraphLayout.prototype.getPlotArea = function() { + return this.area_; +}; + +// Compute the box which the chart should be drawn in. This is the canvas's +// box, less space needed for axis, chart labels, and other plug-ins. +// NOTE: This should only be called by Dygraph.predraw_(). +DygraphLayout.prototype.computePlotArea = function() { + var area = { + // TODO(danvk): per-axis setting. + x: 0, + y: 0 + }; + + area.w = this.dygraph_.width_ - area.x - this.dygraph_.getOption('rightGap'); + area.h = this.dygraph_.height_; + + // Let plugins reserve space. + var e = { + chart_div: this.dygraph_.graphDiv, + reserveSpaceLeft: function(px) { + var r = { + x: area.x, + y: area.y, + w: px, + h: area.h + }; + area.x += px; + area.w -= px; + return r; + }, + reserveSpaceRight: function(px) { + var r = { + x: area.x + area.w - px, + y: area.y, + w: px, + h: area.h + }; + area.w -= px; + return r; + }, + reserveSpaceTop: function(px) { + var r = { + x: area.x, + y: area.y, + w: area.w, + h: px + }; + area.y += px; + area.h -= px; + return r; + }, + reserveSpaceBottom: function(px) { + var r = { + x: area.x, + y: area.y + area.h - px, + w: area.w, + h: px + }; + area.h -= px; + return r; + }, + chartRect: function() { + return {x:area.x, y:area.y, w:area.w, h:area.h}; + } + }; + this.dygraph_.cascadeEvents_('layout', e); + + this.area_ = area; +}; + +DygraphLayout.prototype.setAnnotations = function(ann) { + // The Dygraph object's annotations aren't parsed. We parse them here and + // save a copy. If there is no parser, then the user must be using raw format. + this.annotations = []; + var parse = this.dygraph_.getOption('xValueParser') || function(x) { return x; }; + for (var i = 0; i < ann.length; i++) { + var a = {}; + if (!ann[i].xval && ann[i].x === undefined) { + console.error("Annotations must have an 'x' property"); + return; + } + if (ann[i].icon && + !(ann[i].hasOwnProperty('width') && + ann[i].hasOwnProperty('height'))) { + console.error("Must set width and height when setting " + + "annotation.icon property"); + return; + } + Dygraph.update(a, ann[i]); + if (!a.xval) a.xval = parse(a.x); + this.annotations.push(a); + } +}; + +DygraphLayout.prototype.setXTicks = function(xTicks) { + this.xTicks_ = xTicks; +}; + +// TODO(danvk): add this to the Dygraph object's API or move it into Layout. +DygraphLayout.prototype.setYAxes = function (yAxes) { + this.yAxes_ = yAxes; +}; + +DygraphLayout.prototype.evaluate = function() { + this._xAxis = {}; + this._evaluateLimits(); + this._evaluateLineCharts(); + this._evaluateLineTicks(); + this._evaluateAnnotations(); +}; + +DygraphLayout.prototype._evaluateLimits = function() { + var xlimits = this.dygraph_.xAxisRange(); + this._xAxis.minval = xlimits[0]; + this._xAxis.maxval = xlimits[1]; + var xrange = xlimits[1] - xlimits[0]; + this._xAxis.scale = (xrange !== 0 ? 1 / xrange : 1.0); + + if (this.dygraph_.getOptionForAxis("logscale", 'x')) { + this._xAxis.xlogrange = Dygraph.log10(this._xAxis.maxval) - Dygraph.log10(this._xAxis.minval); + this._xAxis.xlogscale = (this._xAxis.xlogrange !== 0 ? 1.0 / this._xAxis.xlogrange : 1.0); + } + for (var i = 0; i < this.yAxes_.length; i++) { + var axis = this.yAxes_[i]; + axis.minyval = axis.computedValueRange[0]; + axis.maxyval = axis.computedValueRange[1]; + axis.yrange = axis.maxyval - axis.minyval; + axis.yscale = (axis.yrange !== 0 ? 1.0 / axis.yrange : 1.0); + + if (this.dygraph_.getOption("logscale")) { + axis.ylogrange = Dygraph.log10(axis.maxyval) - Dygraph.log10(axis.minyval); + axis.ylogscale = (axis.ylogrange !== 0 ? 1.0 / axis.ylogrange : 1.0); + if (!isFinite(axis.ylogrange) || isNaN(axis.ylogrange)) { + console.error('axis ' + i + ' of graph at ' + axis.g + + ' can\'t be displayed in log scale for range [' + + axis.minyval + ' - ' + axis.maxyval + ']'); + } + } + } +}; + +DygraphLayout.calcXNormal_ = function(value, xAxis, logscale) { + if (logscale) { + return ((Dygraph.log10(value) - Dygraph.log10(xAxis.minval)) * xAxis.xlogscale); + } else { + return (value - xAxis.minval) * xAxis.scale; + } +}; + +/** + * @param {DygraphAxisType} axis + * @param {number} value + * @param {boolean} logscale + * @return {number} + */ +DygraphLayout.calcYNormal_ = function(axis, value, logscale) { + if (logscale) { + var x = 1.0 - ((Dygraph.log10(value) - Dygraph.log10(axis.minyval)) * axis.ylogscale); + return isFinite(x) ? x : NaN; // shim for v8 issue; see pull request 276 + } else { + return 1.0 - ((value - axis.minyval) * axis.yscale); + } +}; + +DygraphLayout.prototype._evaluateLineCharts = function() { + var isStacked = this.dygraph_.getOption("stackedGraph"); + var isLogscaleForX = this.dygraph_.getOptionForAxis("logscale", 'x'); + + for (var setIdx = 0; setIdx < this.points.length; setIdx++) { + var points = this.points[setIdx]; + var setName = this.setNames[setIdx]; + var connectSeparated = this.dygraph_.getOption('connectSeparatedPoints', setName); + var axis = this.dygraph_.axisPropertiesForSeries(setName); + // TODO (konigsberg): use optionsForAxis instead. + var logscale = this.dygraph_.attributes_.getForSeries("logscale", setName); + + for (var j = 0; j < points.length; j++) { + var point = points[j]; + + // Range from 0-1 where 0 represents left and 1 represents right. + point.x = DygraphLayout.calcXNormal_(point.xval, this._xAxis, isLogscaleForX); + // Range from 0-1 where 0 represents top and 1 represents bottom + var yval = point.yval; + if (isStacked) { + point.y_stacked = DygraphLayout.calcYNormal_( + axis, point.yval_stacked, logscale); + if (yval !== null && !isNaN(yval)) { + yval = point.yval_stacked; + } + } + if (yval === null) { + yval = NaN; + if (!connectSeparated) { + point.yval = NaN; + } + } + point.y = DygraphLayout.calcYNormal_(axis, yval, logscale); + } + + this.dygraph_.dataHandler_.onLineEvaluated(points, axis, logscale); + } +}; + +DygraphLayout.prototype._evaluateLineTicks = function() { + var i, tick, label, pos; + this.xticks = []; + for (i = 0; i < this.xTicks_.length; i++) { + tick = this.xTicks_[i]; + label = tick.label; + pos = this.dygraph_.toPercentXCoord(tick.v); + if ((pos >= 0.0) && (pos < 1.0)) { + this.xticks.push([pos, label]); + } + } + + this.yticks = []; + for (i = 0; i < this.yAxes_.length; i++ ) { + var axis = this.yAxes_[i]; + for (var j = 0; j < axis.ticks.length; j++) { + tick = axis.ticks[j]; + label = tick.label; + pos = this.dygraph_.toPercentYCoord(tick.v, i); + if ((pos > 0.0) && (pos <= 1.0)) { + this.yticks.push([i, pos, label]); + } + } + } +}; + +DygraphLayout.prototype._evaluateAnnotations = function() { + // Add the annotations to the point to which they belong. + // Make a map from (setName, xval) to annotation for quick lookups. + var i; + var annotations = {}; + for (i = 0; i < this.annotations.length; i++) { + var a = this.annotations[i]; + annotations[a.xval + "," + a.series] = a; + } + + this.annotated_points = []; + + // Exit the function early if there are no annotations. + if (!this.annotations || !this.annotations.length) { + return; + } + + // TODO(antrob): loop through annotations not points. + for (var setIdx = 0; setIdx < this.points.length; setIdx++) { + var points = this.points[setIdx]; + for (i = 0; i < points.length; i++) { + var p = points[i]; + var k = p.xval + "," + p.name; + if (k in annotations) { + p.annotation = annotations[k]; + this.annotated_points.push(p); + } + } + } +}; + +/** + * Convenience function to remove all the data sets from a graph + */ +DygraphLayout.prototype.removeAllDatasets = function() { + delete this.points; + delete this.setNames; + delete this.setPointsLengths; + delete this.setPointsOffsets; + this.points = []; + this.setNames = []; + this.setPointsLengths = []; + this.setPointsOffsets = []; +}; + +return DygraphLayout; + +})(); +/** + * @license + * Copyright 2006 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview Based on PlotKit.CanvasRenderer, but modified to meet the + * needs of dygraphs. + * + * In particular, support for: + * - grid overlays + * - error bars + * - dygraphs attribute system + */ + +/** + * The DygraphCanvasRenderer class does the actual rendering of the chart onto + * a canvas. It's based on PlotKit.CanvasRenderer. + * @param {Object} element The canvas to attach to + * @param {Object} elementContext The 2d context of the canvas (injected so it + * can be mocked for testing.) + * @param {Layout} layout The DygraphLayout object for this graph. + * @constructor + */ + +var DygraphCanvasRenderer = (function() { +/*global Dygraph:false */ +"use strict"; + + +/** + * @constructor + * + * This gets called when there are "new points" to chart. This is generally the + * case when the underlying data being charted has changed. It is _not_ called + * in the common case that the user has zoomed or is panning the view. + * + * The chart canvas has already been created by the Dygraph object. The + * renderer simply gets a drawing context. + * + * @param {Dygraph} dygraph The chart to which this renderer belongs. + * @param {HTMLCanvasElement} element The <canvas> DOM element on which to draw. + * @param {CanvasRenderingContext2D} elementContext The drawing context. + * @param {DygraphLayout} layout The chart's DygraphLayout object. + * + * TODO(danvk): remove the elementContext property. + */ +var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) { + this.dygraph_ = dygraph; + + this.layout = layout; + this.element = element; + this.elementContext = elementContext; + + this.height = dygraph.height_; + this.width = dygraph.width_; + + // --- check whether everything is ok before we return + // NOTE(konigsberg): isIE is never defined in this object. Bug of some sort. + if (!this.isIE && !(Dygraph.isCanvasSupported(this.element))) + throw "Canvas is not supported."; + + // internal state + this.area = layout.getPlotArea(); + + // Set up a clipping area for the canvas (and the interaction canvas). + // This ensures that we don't overdraw. + if (this.dygraph_.isUsingExcanvas_) { + this._createIEClipArea(); + } else { + // on Android 3 and 4, setting a clipping area on a canvas prevents it from + // displaying anything. + if (!Dygraph.isAndroid()) { + var ctx = this.dygraph_.canvas_ctx_; + ctx.beginPath(); + ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); + ctx.clip(); + + ctx = this.dygraph_.hidden_ctx_; + ctx.beginPath(); + ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h); + ctx.clip(); + } + } +}; + +/** + * Clears out all chart content and DOM elements. + * This is called immediately before render() on every frame, including + * during zooms and pans. + * @private + */ +DygraphCanvasRenderer.prototype.clear = function() { + var context; + if (this.isIE) { + // VML takes a while to start up, so we just poll every this.IEDelay + try { + if (this.clearDelay) { + this.clearDelay.cancel(); + this.clearDelay = null; + } + context = this.elementContext; + } + catch (e) { + // TODO(danvk): this is broken, since MochiKit.Async is gone. + // this.clearDelay = MochiKit.Async.wait(this.IEDelay); + // this.clearDelay.addCallback(bind(this.clear, this)); + return; + } + } + + context = this.elementContext; + context.clearRect(0, 0, this.width, this.height); +}; + +/** + * This method is responsible for drawing everything on the chart, including + * lines, error bars, fills and axes. + * It is called immediately after clear() on every frame, including during pans + * and zooms. + * @private + */ +DygraphCanvasRenderer.prototype.render = function() { + // attaches point.canvas{x,y} + this._updatePoints(); + + // actually draws the chart. + this._renderLineChart(); +}; + +DygraphCanvasRenderer.prototype._createIEClipArea = function() { + var className = 'dygraph-clip-div'; + var graphDiv = this.dygraph_.graphDiv; + + // Remove old clip divs. + for (var i = graphDiv.childNodes.length-1; i >= 0; i--) { + if (graphDiv.childNodes[i].className == className) { + graphDiv.removeChild(graphDiv.childNodes[i]); + } + } + + // Determine background color to give clip divs. + var backgroundColor = document.bgColor; + var element = this.dygraph_.graphDiv; + while (element != document) { + var bgcolor = element.currentStyle.backgroundColor; + if (bgcolor && bgcolor != 'transparent') { + backgroundColor = bgcolor; + break; + } + element = element.parentNode; + } + + function createClipDiv(area) { + if (area.w === 0 || area.h === 0) { + return; + } + var elem = document.createElement('div'); + elem.className = className; + elem.style.backgroundColor = backgroundColor; + elem.style.position = 'absolute'; + elem.style.left = area.x + 'px'; + elem.style.top = area.y + 'px'; + elem.style.width = area.w + 'px'; + elem.style.height = area.h + 'px'; + graphDiv.appendChild(elem); + } + + var plotArea = this.area; + // Left side + createClipDiv({ + x:0, y:0, + w:plotArea.x, + h:this.height + }); + + // Top + createClipDiv({ + x: plotArea.x, y: 0, + w: this.width - plotArea.x, + h: plotArea.y + }); + + // Right side + createClipDiv({ + x: plotArea.x + plotArea.w, y: 0, + w: this.width - plotArea.x - plotArea.w, + h: this.height + }); + + // Bottom + createClipDiv({ + x: plotArea.x, + y: plotArea.y + plotArea.h, + w: this.width - plotArea.x, + h: this.height - plotArea.h - plotArea.y + }); +}; + + +/** + * Returns a predicate to be used with an iterator, which will + * iterate over points appropriately, depending on whether + * connectSeparatedPoints is true. When it's false, the predicate will + * skip over points with missing yVals. + */ +DygraphCanvasRenderer._getIteratorPredicate = function(connectSeparatedPoints) { + return connectSeparatedPoints ? + DygraphCanvasRenderer._predicateThatSkipsEmptyPoints : + null; +}; + +DygraphCanvasRenderer._predicateThatSkipsEmptyPoints = + function(array, idx) { + return array[idx].yval !== null; +}; + +/** + * Draws a line with the styles passed in and calls all the drawPointCallbacks. + * @param {Object} e The dictionary passed to the plotter function. + * @private + */ +DygraphCanvasRenderer._drawStyledLine = function(e, + color, strokeWidth, strokePattern, drawPoints, + drawPointCallback, pointSize) { + var g = e.dygraph; + // TODO(konigsberg): Compute attributes outside this method call. + var stepPlot = g.getBooleanOption("stepPlot", e.setName); + + if (!Dygraph.isArrayLike(strokePattern)) { + strokePattern = null; + } + + var drawGapPoints = g.getBooleanOption('drawGapEdgePoints', e.setName); + + var points = e.points; + var setName = e.setName; + var iter = Dygraph.createIterator(points, 0, points.length, + DygraphCanvasRenderer._getIteratorPredicate( + g.getBooleanOption("connectSeparatedPoints", setName))); + + var stroking = strokePattern && (strokePattern.length >= 2); + + var ctx = e.drawingContext; + ctx.save(); + if (stroking) { + ctx.installPattern(strokePattern); + } + + var pointsOnLine = DygraphCanvasRenderer._drawSeries( + e, iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color); + DygraphCanvasRenderer._drawPointsOnLine( + e, pointsOnLine, drawPointCallback, color, pointSize); + + if (stroking) { + ctx.uninstallPattern(); + } + + ctx.restore(); +}; + +/** + * This does the actual drawing of lines on the canvas, for just one series. + * Returns a list of [canvasx, canvasy] pairs for points for which a + * drawPointCallback should be fired. These include isolated points, or all + * points if drawPoints=true. + * @param {Object} e The dictionary passed to the plotter function. + * @private + */ +DygraphCanvasRenderer._drawSeries = function(e, + iter, strokeWidth, pointSize, drawPoints, drawGapPoints, stepPlot, color) { + + var prevCanvasX = null; + var prevCanvasY = null; + var nextCanvasY = null; + var isIsolated; // true if this point is isolated (no line segments) + var point; // the point being processed in the while loop + var pointsOnLine = []; // Array of [canvasx, canvasy] pairs. + var first = true; // the first cycle through the while loop + + var ctx = e.drawingContext; + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + + // NOTE: we break the iterator's encapsulation here for about a 25% speedup. + var arr = iter.array_; + var limit = iter.end_; + var predicate = iter.predicate_; + + for (var i = iter.start_; i < limit; i++) { + point = arr[i]; + if (predicate) { + while (i < limit && !predicate(arr, i)) { + i++; + } + if (i == limit) break; + point = arr[i]; + } + + // FIXME: The 'canvasy != canvasy' test here catches NaN values but the test + // doesn't catch Infinity values. Could change this to + // !isFinite(point.canvasy), but I assume it avoids isNaN for performance? + if (point.canvasy === null || point.canvasy != point.canvasy) { + if (stepPlot && prevCanvasX !== null) { + // Draw a horizontal line to the start of the missing data + ctx.moveTo(prevCanvasX, prevCanvasY); + ctx.lineTo(point.canvasx, prevCanvasY); + } + prevCanvasX = prevCanvasY = null; + } else { + isIsolated = false; + if (drawGapPoints || !prevCanvasX) { + iter.nextIdx_ = i; + iter.next(); + nextCanvasY = iter.hasNext ? iter.peek.canvasy : null; + + var isNextCanvasYNullOrNaN = nextCanvasY === null || + nextCanvasY != nextCanvasY; + isIsolated = (!prevCanvasX && isNextCanvasYNullOrNaN); + if (drawGapPoints) { + // Also consider a point to be "isolated" if it's adjacent to a + // null point, excluding the graph edges. + if ((!first && !prevCanvasX) || + (iter.hasNext && isNextCanvasYNullOrNaN)) { + isIsolated = true; + } + } + } + + if (prevCanvasX !== null) { + if (strokeWidth) { + if (stepPlot) { + ctx.moveTo(prevCanvasX, prevCanvasY); + ctx.lineTo(point.canvasx, prevCanvasY); + } + + ctx.lineTo(point.canvasx, point.canvasy); + } + } else { + ctx.moveTo(point.canvasx, point.canvasy); + } + if (drawPoints || isIsolated) { + pointsOnLine.push([point.canvasx, point.canvasy, point.idx]); + } + prevCanvasX = point.canvasx; + prevCanvasY = point.canvasy; + } + first = false; + } + ctx.stroke(); + return pointsOnLine; +}; + +/** + * This fires the drawPointCallback functions, which draw dots on the points by + * default. This gets used when the "drawPoints" option is set, or when there + * are isolated points. + * @param {Object} e The dictionary passed to the plotter function. + * @private + */ +DygraphCanvasRenderer._drawPointsOnLine = function( + e, pointsOnLine, drawPointCallback, color, pointSize) { + var ctx = e.drawingContext; + for (var idx = 0; idx < pointsOnLine.length; idx++) { + var cb = pointsOnLine[idx]; + ctx.save(); + drawPointCallback.call(e.dygraph, + e.dygraph, e.setName, ctx, cb[0], cb[1], color, pointSize, cb[2]); + ctx.restore(); + } +}; + +/** + * Attaches canvas coordinates to the points array. + * @private + */ +DygraphCanvasRenderer.prototype._updatePoints = function() { + // Update Points + // TODO(danvk): here + // + // TODO(bhs): this loop is a hot-spot for high-point-count charts. These + // transformations can be pushed into the canvas via linear transformation + // matrices. + // NOTE(danvk): this is trickier than it sounds at first. The transformation + // needs to be done before the .moveTo() and .lineTo() calls, but must be + // undone before the .stroke() call to ensure that the stroke width is + // unaffected. An alternative is to reduce the stroke width in the + // transformed coordinate space, but you can't specify different values for + // each dimension (as you can with .scale()). The speedup here is ~12%. + var sets = this.layout.points; + for (var i = sets.length; i--;) { + var points = sets[i]; + for (var j = points.length; j--;) { + var point = points[j]; + point.canvasx = this.area.w * point.x + this.area.x; + point.canvasy = this.area.h * point.y + this.area.y; + } + } +}; + +/** + * Add canvas Actually draw the lines chart, including error bars. + * + * This function can only be called if DygraphLayout's points array has been + * updated with canvas{x,y} attributes, i.e. by + * DygraphCanvasRenderer._updatePoints. + * + * @param {string=} opt_seriesName when specified, only that series will + * be drawn. (This is used for expedited redrawing with highlightSeriesOpts) + * @param {CanvasRenderingContext2D} opt_ctx when specified, the drawing + * context. However, lines are typically drawn on the object's + * elementContext. + * @private + */ +DygraphCanvasRenderer.prototype._renderLineChart = function(opt_seriesName, opt_ctx) { + var ctx = opt_ctx || this.elementContext; + var i; + + var sets = this.layout.points; + var setNames = this.layout.setNames; + var setName; + + this.colors = this.dygraph_.colorsMap_; + + // Determine which series have specialized plotters. + var plotter_attr = this.dygraph_.getOption("plotter"); + var plotters = plotter_attr; + if (!Dygraph.isArrayLike(plotters)) { + plotters = [plotters]; + } + + var setPlotters = {}; // series name -> plotter fn. + for (i = 0; i < setNames.length; i++) { + setName = setNames[i]; + var setPlotter = this.dygraph_.getOption("plotter", setName); + if (setPlotter == plotter_attr) continue; // not specialized. + + setPlotters[setName] = setPlotter; + } + + for (i = 0; i < plotters.length; i++) { + var plotter = plotters[i]; + var is_last = (i == plotters.length - 1); + + for (var j = 0; j < sets.length; j++) { + setName = setNames[j]; + if (opt_seriesName && setName != opt_seriesName) continue; + + var points = sets[j]; + + // Only throw in the specialized plotters on the last iteration. + var p = plotter; + if (setName in setPlotters) { + if (is_last) { + p = setPlotters[setName]; + } else { + // Don't use the standard plotters in this case. + continue; + } + } + + var color = this.colors[setName]; + var strokeWidth = this.dygraph_.getOption("strokeWidth", setName); + + ctx.save(); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + p({ + points: points, + setName: setName, + drawingContext: ctx, + color: color, + strokeWidth: strokeWidth, + dygraph: this.dygraph_, + axis: this.dygraph_.axisPropertiesForSeries(setName), + plotArea: this.area, + seriesIndex: j, + seriesCount: sets.length, + singleSeriesName: opt_seriesName, + allSeriesPoints: sets + }); + ctx.restore(); + } + } +}; + +/** + * Standard plotters. These may be used by clients via Dygraph.Plotters. + * See comments there for more details. + */ +DygraphCanvasRenderer._Plotters = { + linePlotter: function(e) { + DygraphCanvasRenderer._linePlotter(e); + }, + + fillPlotter: function(e) { + DygraphCanvasRenderer._fillPlotter(e); + }, + + errorPlotter: function(e) { + DygraphCanvasRenderer._errorPlotter(e); + } +}; + +/** + * Plotter which draws the central lines for a series. + * @private + */ +DygraphCanvasRenderer._linePlotter = function(e) { + var g = e.dygraph; + var setName = e.setName; + var strokeWidth = e.strokeWidth; + + // TODO(danvk): Check if there's any performance impact of just calling + // getOption() inside of _drawStyledLine. Passing in so many parameters makes + // this code a bit nasty. + var borderWidth = g.getNumericOption("strokeBorderWidth", setName); + var drawPointCallback = g.getOption("drawPointCallback", setName) || + Dygraph.Circles.DEFAULT; + var strokePattern = g.getOption("strokePattern", setName); + var drawPoints = g.getBooleanOption("drawPoints", setName); + var pointSize = g.getNumericOption("pointSize", setName); + + if (borderWidth && strokeWidth) { + DygraphCanvasRenderer._drawStyledLine(e, + g.getOption("strokeBorderColor", setName), + strokeWidth + 2 * borderWidth, + strokePattern, + drawPoints, + drawPointCallback, + pointSize + ); + } + + DygraphCanvasRenderer._drawStyledLine(e, + e.color, + strokeWidth, + strokePattern, + drawPoints, + drawPointCallback, + pointSize + ); +}; + +/** + * Draws the shaded error bars/confidence intervals for each series. + * This happens before the center lines are drawn, since the center lines + * need to be drawn on top of the error bars for all series. + * @private + */ +DygraphCanvasRenderer._errorPlotter = function(e) { + var g = e.dygraph; + var setName = e.setName; + var errorBars = g.getBooleanOption("errorBars") || + g.getBooleanOption("customBars"); + if (!errorBars) return; + + var fillGraph = g.getBooleanOption("fillGraph", setName); + if (fillGraph) { + console.warn("Can't use fillGraph option with error bars"); + } + + var ctx = e.drawingContext; + var color = e.color; + var fillAlpha = g.getNumericOption('fillAlpha', setName); + var stepPlot = g.getBooleanOption("stepPlot", setName); + var points = e.points; + + var iter = Dygraph.createIterator(points, 0, points.length, + DygraphCanvasRenderer._getIteratorPredicate( + g.getBooleanOption("connectSeparatedPoints", setName))); + + var newYs; + + // setup graphics context + var prevX = NaN; + var prevY = NaN; + var prevYs = [-1, -1]; + // should be same color as the lines but only 15% opaque. + var rgb = Dygraph.toRGB_(color); + var err_color = + 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')'; + ctx.fillStyle = err_color; + ctx.beginPath(); + + var isNullUndefinedOrNaN = function(x) { + return (x === null || + x === undefined || + isNaN(x)); + }; + + while (iter.hasNext) { + var point = iter.next(); + if ((!stepPlot && isNullUndefinedOrNaN(point.y)) || + (stepPlot && !isNaN(prevY) && isNullUndefinedOrNaN(prevY))) { + prevX = NaN; + continue; + } + + newYs = [ point.y_bottom, point.y_top ]; + if (stepPlot) { + prevY = point.y; + } + + // The documentation specifically disallows nulls inside the point arrays, + // but in case it happens we should do something sensible. + if (isNaN(newYs[0])) newYs[0] = point.y; + if (isNaN(newYs[1])) newYs[1] = point.y; + + newYs[0] = e.plotArea.h * newYs[0] + e.plotArea.y; + newYs[1] = e.plotArea.h * newYs[1] + e.plotArea.y; + if (!isNaN(prevX)) { + if (stepPlot) { + ctx.moveTo(prevX, prevYs[0]); + ctx.lineTo(point.canvasx, prevYs[0]); + ctx.lineTo(point.canvasx, prevYs[1]); + } else { + ctx.moveTo(prevX, prevYs[0]); + ctx.lineTo(point.canvasx, newYs[0]); + ctx.lineTo(point.canvasx, newYs[1]); + } + ctx.lineTo(prevX, prevYs[1]); + ctx.closePath(); + } + prevYs = newYs; + prevX = point.canvasx; + } + ctx.fill(); +}; + + +/** + * Proxy for CanvasRenderingContext2D which drops moveTo/lineTo calls which are + * superfluous. It accumulates all movements which haven't changed the x-value + * and only applies the two with the most extreme y-values. + * + * Calls to lineTo/moveTo must have non-decreasing x-values. + */ +DygraphCanvasRenderer._fastCanvasProxy = function(context) { + var pendingActions = []; // array of [type, x, y] tuples + var lastRoundedX = null; + + var LINE_TO = 1, + MOVE_TO = 2; + + var actionCount = 0; // number of moveTos and lineTos passed to context. + + // Drop superfluous motions + // Assumes all pendingActions have the same (rounded) x-value. + var compressActions = function(opt_losslessOnly) { + if (pendingActions.length <= 1) return; + + // Lossless compression: drop inconsequential moveTos. + for (var i = pendingActions.length - 1; i > 0; i--) { + var action = pendingActions[i]; + if (action[0] == MOVE_TO) { + var prevAction = pendingActions[i - 1]; + if (prevAction[1] == action[1] && prevAction[2] == action[2]) { + pendingActions.splice(i, 1); + } + } + } + + // Lossless compression: ... drop consecutive moveTos ... + for (var i = 0; i < pendingActions.length - 1; /* incremented internally */) { + var action = pendingActions[i]; + if (action[0] == MOVE_TO && pendingActions[i + 1][0] == MOVE_TO) { + pendingActions.splice(i, 1); + } else { + i++; + } + } + + // Lossy compression: ... drop all but the extreme y-values ... + if (pendingActions.length > 2 && !opt_losslessOnly) { + // keep an initial moveTo, but drop all others. + var startIdx = 0; + if (pendingActions[0][0] == MOVE_TO) startIdx++; + var minIdx = null, maxIdx = null; + for (var i = startIdx; i < pendingActions.length; i++) { + var action = pendingActions[i]; + if (action[0] != LINE_TO) continue; + if (minIdx === null && maxIdx === null) { + minIdx = i; + maxIdx = i; + } else { + var y = action[2]; + if (y < pendingActions[minIdx][2]) { + minIdx = i; + } else if (y > pendingActions[maxIdx][2]) { + maxIdx = i; + } + } + } + var minAction = pendingActions[minIdx], + maxAction = pendingActions[maxIdx]; + pendingActions.splice(startIdx, pendingActions.length - startIdx); + if (minIdx < maxIdx) { + pendingActions.push(minAction); + pendingActions.push(maxAction); + } else if (minIdx > maxIdx) { + pendingActions.push(maxAction); + pendingActions.push(minAction); + } else { + pendingActions.push(minAction); + } + } + }; + + var flushActions = function(opt_noLossyCompression) { + compressActions(opt_noLossyCompression); + for (var i = 0, len = pendingActions.length; i < len; i++) { + var action = pendingActions[i]; + if (action[0] == LINE_TO) { + context.lineTo(action[1], action[2]); + } else if (action[0] == MOVE_TO) { + context.moveTo(action[1], action[2]); + } + } + actionCount += pendingActions.length; + pendingActions = []; + }; + + var addAction = function(action, x, y) { + var rx = Math.round(x); + if (lastRoundedX === null || rx != lastRoundedX) { + flushActions(); + lastRoundedX = rx; + } + pendingActions.push([action, x, y]); + }; + + return { + moveTo: function(x, y) { + addAction(MOVE_TO, x, y); + }, + lineTo: function(x, y) { + addAction(LINE_TO, x, y); + }, + + // for major operations like stroke/fill, we skip compression to ensure + // that there are no artifacts at the right edge. + stroke: function() { flushActions(true); context.stroke(); }, + fill: function() { flushActions(true); context.fill(); }, + beginPath: function() { flushActions(true); context.beginPath(); }, + closePath: function() { flushActions(true); context.closePath(); }, + + _count: function() { return actionCount; } + }; +}; + +/** + * Draws the shaded regions when "fillGraph" is set. Not to be confused with + * error bars. + * + * For stacked charts, it's more convenient to handle all the series + * simultaneously. So this plotter plots all the points on the first series + * it's asked to draw, then ignores all the other series. + * + * @private + */ +DygraphCanvasRenderer._fillPlotter = function(e) { + // Skip if we're drawing a single series for interactive highlight overlay. + if (e.singleSeriesName) return; + + // We'll handle all the series at once, not one-by-one. + if (e.seriesIndex !== 0) return; + + var g = e.dygraph; + var setNames = g.getLabels().slice(1); // remove x-axis + + // getLabels() includes names for invisible series, which are not included in + // allSeriesPoints. We remove those to make the two match. + // TODO(danvk): provide a simpler way to get this information. + for (var i = setNames.length; i >= 0; i--) { + if (!g.visibility()[i]) setNames.splice(i, 1); + } + + var anySeriesFilled = (function() { + for (var i = 0; i < setNames.length; i++) { + if (g.getBooleanOption("fillGraph", setNames[i])) return true; + } + return false; + })(); + + if (!anySeriesFilled) return; + + var area = e.plotArea; + var sets = e.allSeriesPoints; + var setCount = sets.length; + + var fillAlpha = g.getNumericOption('fillAlpha'); + var stackedGraph = g.getBooleanOption("stackedGraph"); + var colors = g.getColors(); + + // For stacked graphs, track the baseline for filling. + // + // The filled areas below graph lines are trapezoids with two + // vertical edges. The top edge is the line segment being drawn, and + // the baseline is the bottom edge. Each baseline corresponds to the + // top line segment from the previous stacked line. In the case of + // step plots, the trapezoids are rectangles. + var baseline = {}; + var currBaseline; + var prevStepPlot; // for different line drawing modes (line/step) per series + + // Helper function to trace a line back along the baseline. + var traceBackPath = function(ctx, baselineX, baselineY, pathBack) { + ctx.lineTo(baselineX, baselineY); + if (stackedGraph) { + for (var i = pathBack.length - 1; i >= 0; i--) { + var pt = pathBack[i]; + ctx.lineTo(pt[0], pt[1]); + } + } + }; + + // process sets in reverse order (needed for stacked graphs) + for (var setIdx = setCount - 1; setIdx >= 0; setIdx--) { + var ctx = e.drawingContext; + var setName = setNames[setIdx]; + if (!g.getBooleanOption('fillGraph', setName)) continue; + + var stepPlot = g.getBooleanOption('stepPlot', setName); + var color = colors[setIdx]; + var axis = g.axisPropertiesForSeries(setName); + var axisY = 1.0 + axis.minyval * axis.yscale; + if (axisY < 0.0) axisY = 0.0; + else if (axisY > 1.0) axisY = 1.0; + axisY = area.h * axisY + area.y; + + var points = sets[setIdx]; + var iter = Dygraph.createIterator(points, 0, points.length, + DygraphCanvasRenderer._getIteratorPredicate( + g.getBooleanOption("connectSeparatedPoints", setName))); + + // setup graphics context + var prevX = NaN; + var prevYs = [-1, -1]; + var newYs; + // should be same color as the lines but only 15% opaque. + var rgb = Dygraph.toRGB_(color); + var err_color = + 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + fillAlpha + ')'; + ctx.fillStyle = err_color; + ctx.beginPath(); + var last_x, is_first = true; + + // If the point density is high enough, dropping segments on their way to + // the canvas justifies the overhead of doing so. + if (points.length > 2 * g.width_) { + ctx = DygraphCanvasRenderer._fastCanvasProxy(ctx); + } + + // For filled charts, we draw points from left to right, then back along + // the x-axis to complete a shape for filling. + // For stacked plots, this "back path" is a more complex shape. This array + // stores the [x, y] values needed to trace that shape. + var pathBack = []; + + // TODO(danvk): there are a lot of options at play in this loop. + // The logic would be much clearer if some (e.g. stackGraph and + // stepPlot) were split off into separate sub-plotters. + var point; + while (iter.hasNext) { + point = iter.next(); + if (!Dygraph.isOK(point.y) && !stepPlot) { + traceBackPath(ctx, prevX, prevYs[1], pathBack); + pathBack = []; + prevX = NaN; + if (point.y_stacked !== null && !isNaN(point.y_stacked)) { + baseline[point.canvasx] = area.h * point.y_stacked + area.y; + } + continue; + } + if (stackedGraph) { + if (!is_first && last_x == point.xval) { + continue; + } else { + is_first = false; + last_x = point.xval; + } + + currBaseline = baseline[point.canvasx]; + var lastY; + if (currBaseline === undefined) { + lastY = axisY; + } else { + if(prevStepPlot) { + lastY = currBaseline[0]; + } else { + lastY = currBaseline; + } + } + newYs = [ point.canvasy, lastY ]; + + if (stepPlot) { + // Step plots must keep track of the top and bottom of + // the baseline at each point. + if (prevYs[0] === -1) { + baseline[point.canvasx] = [ point.canvasy, axisY ]; + } else { + baseline[point.canvasx] = [ point.canvasy, prevYs[0] ]; + } + } else { + baseline[point.canvasx] = point.canvasy; + } + + } else { + if (isNaN(point.canvasy) && stepPlot) { + newYs = [ area.y + area.h, axisY ]; + } else { + newYs = [ point.canvasy, axisY ]; + } + } + if (!isNaN(prevX)) { + // Move to top fill point + if (stepPlot) { + ctx.lineTo(point.canvasx, prevYs[0]); + ctx.lineTo(point.canvasx, newYs[0]); + } else { + ctx.lineTo(point.canvasx, newYs[0]); + } + + // Record the baseline for the reverse path. + if (stackedGraph) { + pathBack.push([prevX, prevYs[1]]); + if (prevStepPlot && currBaseline) { + // Draw to the bottom of the baseline + pathBack.push([point.canvasx, currBaseline[1]]); + } else { + pathBack.push([point.canvasx, newYs[1]]); + } + } + } else { + ctx.moveTo(point.canvasx, newYs[1]); + ctx.lineTo(point.canvasx, newYs[0]); + } + prevYs = newYs; + prevX = point.canvasx; + } + prevStepPlot = stepPlot; + if (newYs && point) { + traceBackPath(ctx, point.canvasx, newYs[1], pathBack); + pathBack = []; + } + ctx.fill(); + } +}; + +return DygraphCanvasRenderer; + +})(); +/** + * @license + * Copyright 2006 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview Creates an interactive, zoomable graph based on a CSV file or + * string. Dygraph can handle multiple series with or without error bars. The + * date/value ranges will be automatically set. Dygraph uses the + * <canvas> tag, so it only works in FF1.5+. + * @author danvdk@gmail.com (Dan Vanderkam) + + Usage: + <div id="graphdiv" style="width:800px; height:500px;"></div> + <script type="text/javascript"> + new Dygraph(document.getElementById("graphdiv"), + "datafile.csv", // CSV file with headers + { }); // options + </script> + + The CSV file is of the form + + Date,SeriesA,SeriesB,SeriesC + YYYYMMDD,A1,B1,C1 + YYYYMMDD,A2,B2,C2 + + If the 'errorBars' option is set in the constructor, the input should be of + the form + Date,SeriesA,SeriesB,... + YYYYMMDD,A1,sigmaA1,B1,sigmaB1,... + YYYYMMDD,A2,sigmaA2,B2,sigmaB2,... + + If the 'fractions' option is set, the input should be of the form: + + Date,SeriesA,SeriesB,... + YYYYMMDD,A1/B1,A2/B2,... + YYYYMMDD,A1/B1,A2/B2,... + + And error bars will be calculated automatically using a binomial distribution. + + For further documentation and examples, see http://dygraphs.com/ + + */ + +// For "production" code, this gets set to false by uglifyjs. +if (typeof(DEBUG) === 'undefined') DEBUG=true; + +var Dygraph = (function() { +/*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false,ActiveXObject:false */ +"use strict"; + +/** + * Creates an interactive, zoomable chart. + * + * @constructor + * @param {div | String} div A div or the id of a div into which to construct + * the chart. + * @param {String | Function} file A file containing CSV data or a function + * that returns this data. The most basic expected format for each line is + * "YYYY/MM/DD,val1,val2,...". For more information, see + * http://dygraphs.com/data.html. + * @param {Object} attrs Various other attributes, e.g. errorBars determines + * whether the input data contains error ranges. For a complete list of + * options, see http://dygraphs.com/options.html. + */ +var Dygraph = function(div, data, opts, opt_fourth_param) { + // These have to go above the "Hack for IE" in __init__ since .ready() can be + // called as soon as the constructor returns. Once support for OldIE is + // dropped, this can go down with the rest of the initializers. + this.is_initial_draw_ = true; + this.readyFns_ = []; + + if (opt_fourth_param !== undefined) { + // Old versions of dygraphs took in the series labels as a constructor + // parameter. This doesn't make sense anymore, but it's easy to continue + // to support this usage. + console.warn("Using deprecated four-argument dygraph constructor"); + this.__old_init__(div, data, opts, opt_fourth_param); + } else { + this.__init__(div, data, opts); + } +}; + +Dygraph.NAME = "Dygraph"; +Dygraph.VERSION = "1.1.0"; +Dygraph.__repr__ = function() { + return "[" + Dygraph.NAME + " " + Dygraph.VERSION + "]"; +}; + +/** + * Returns information about the Dygraph class. + */ +Dygraph.toString = function() { + return Dygraph.__repr__(); +}; + +// Various default values +Dygraph.DEFAULT_ROLL_PERIOD = 1; +Dygraph.DEFAULT_WIDTH = 480; +Dygraph.DEFAULT_HEIGHT = 320; + +// For max 60 Hz. animation: +Dygraph.ANIMATION_STEPS = 12; +Dygraph.ANIMATION_DURATION = 200; + +// Label constants for the labelsKMB and labelsKMG2 options. +// (i.e. '100000' -> '100K') +Dygraph.KMB_LABELS = [ 'K', 'M', 'B', 'T', 'Q' ]; +Dygraph.KMG2_BIG_LABELS = [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ]; +Dygraph.KMG2_SMALL_LABELS = [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ]; + +// These are defined before DEFAULT_ATTRS so that it can refer to them. +/** + * @private + * Return a string version of a number. This respects the digitsAfterDecimal + * and maxNumberWidth options. + * @param {number} x The number to be formatted + * @param {Dygraph} opts An options view + */ +Dygraph.numberValueFormatter = function(x, opts) { + var sigFigs = opts('sigFigs'); + + if (sigFigs !== null) { + // User has opted for a fixed number of significant figures. + return Dygraph.floatFormat(x, sigFigs); + } + + var digits = opts('digitsAfterDecimal'); + var maxNumberWidth = opts('maxNumberWidth'); + + var kmb = opts('labelsKMB'); + var kmg2 = opts('labelsKMG2'); + + var label; + + // switch to scientific notation if we underflow or overflow fixed display. + if (x !== 0.0 && + (Math.abs(x) >= Math.pow(10, maxNumberWidth) || + Math.abs(x) < Math.pow(10, -digits))) { + label = x.toExponential(digits); + } else { + label = '' + Dygraph.round_(x, digits); + } + + if (kmb || kmg2) { + var k; + var k_labels = []; + var m_labels = []; + if (kmb) { + k = 1000; + k_labels = Dygraph.KMB_LABELS; + } + if (kmg2) { + if (kmb) console.warn("Setting both labelsKMB and labelsKMG2. Pick one!"); + k = 1024; + k_labels = Dygraph.KMG2_BIG_LABELS; + m_labels = Dygraph.KMG2_SMALL_LABELS; + } + + var absx = Math.abs(x); + var n = Dygraph.pow(k, k_labels.length); + for (var j = k_labels.length - 1; j >= 0; j--, n /= k) { + if (absx >= n) { + label = Dygraph.round_(x / n, digits) + k_labels[j]; + break; + } + } + if (kmg2) { + // TODO(danvk): clean up this logic. Why so different than kmb? + var x_parts = String(x.toExponential()).split('e-'); + if (x_parts.length === 2 && x_parts[1] >= 3 && x_parts[1] <= 24) { + if (x_parts[1] % 3 > 0) { + label = Dygraph.round_(x_parts[0] / + Dygraph.pow(10, (x_parts[1] % 3)), + digits); + } else { + label = Number(x_parts[0]).toFixed(2); + } + label += m_labels[Math.floor(x_parts[1] / 3) - 1]; + } + } + } + + return label; +}; + +/** + * variant for use as an axisLabelFormatter. + * @private + */ +Dygraph.numberAxisLabelFormatter = function(x, granularity, opts) { + return Dygraph.numberValueFormatter(x, opts); +}; + +/** + * @type {!Array.<string>} + * @private + * @constant + */ +Dygraph.SHORT_MONTH_NAMES_ = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + + +/** + * Convert a JS date to a string appropriate to display on an axis that + * is displaying values at the stated granularity. This respects the + * labelsUTC option. + * @param {Date} date The date to format + * @param {number} granularity One of the Dygraph granularity constants + * @param {Dygraph} opts An options view + * @return {string} The date formatted as local time + * @private + */ +Dygraph.dateAxisLabelFormatter = function(date, granularity, opts) { + var utc = opts('labelsUTC'); + var accessors = utc ? Dygraph.DateAccessorsUTC : Dygraph.DateAccessorsLocal; + + var year = accessors.getFullYear(date), + month = accessors.getMonth(date), + day = accessors.getDate(date), + hours = accessors.getHours(date), + mins = accessors.getMinutes(date), + secs = accessors.getSeconds(date), + millis = accessors.getSeconds(date); + + if (granularity >= Dygraph.DECADAL) { + return '' + year; + } else if (granularity >= Dygraph.MONTHLY) { + return Dygraph.SHORT_MONTH_NAMES_[month] + ' ' + year; + } else { + var frac = hours * 3600 + mins * 60 + secs + 1e-3 * millis; + if (frac === 0 || granularity >= Dygraph.DAILY) { + // e.g. '21 Jan' (%d%b) + return Dygraph.zeropad(day) + ' ' + Dygraph.SHORT_MONTH_NAMES_[month]; + } else { + return Dygraph.hmsString_(hours, mins, secs); + } + } +}; +// alias in case anyone is referencing the old method. +Dygraph.dateAxisFormatter = Dygraph.dateAxisLabelFormatter; + +/** + * Return a string version of a JS date for a value label. This respects the + * labelsUTC option. + * @param {Date} date The date to be formatted + * @param {Dygraph} opts An options view + * @private + */ +Dygraph.dateValueFormatter = function(d, opts) { + return Dygraph.dateString_(d, opts('labelsUTC')); +}; + +/** + * Standard plotters. These may be used by clients. + * Available plotters are: + * - Dygraph.Plotters.linePlotter: draws central lines (most common) + * - Dygraph.Plotters.errorPlotter: draws error bars + * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph) + * + * By default, the plotter is [fillPlotter, errorPlotter, linePlotter]. + * This causes all the lines to be drawn over all the fills/error bars. + */ +Dygraph.Plotters = DygraphCanvasRenderer._Plotters; + + +// Default attribute values. +Dygraph.DEFAULT_ATTRS = { + highlightCircleSize: 3, + highlightSeriesOpts: null, + highlightSeriesBackgroundAlpha: 0.5, + + labelsDivWidth: 250, + labelsDivStyles: { + // TODO(danvk): move defaults from createStatusMessage_ here. + }, + labelsSeparateLines: false, + labelsShowZeroValues: true, + labelsKMB: false, + labelsKMG2: false, + showLabelsOnHighlight: true, + + digitsAfterDecimal: 2, + maxNumberWidth: 6, + sigFigs: null, + + strokeWidth: 1.0, + strokeBorderWidth: 0, + strokeBorderColor: "white", + + axisTickSize: 3, + axisLabelFontSize: 14, + rightGap: 5, + + showRoller: false, + xValueParser: Dygraph.dateParser, + + delimiter: ',', + + sigma: 2.0, + errorBars: false, + fractions: false, + wilsonInterval: true, // only relevant if fractions is true + customBars: false, + fillGraph: false, + fillAlpha: 0.15, + connectSeparatedPoints: false, + + stackedGraph: false, + stackedGraphNaNFill: 'all', + hideOverlayOnMouseOut: true, + + legend: 'onmouseover', + stepPlot: false, + avoidMinZero: false, + xRangePad: 0, + yRangePad: null, + drawAxesAtZero: false, + + // Sizes of the various chart labels. + titleHeight: 28, + xLabelHeight: 18, + yLabelWidth: 18, + + drawXAxis: true, + drawYAxis: true, + axisLineColor: "black", + axisLineWidth: 0.3, + gridLineWidth: 0.3, + axisLabelColor: "black", + axisLabelWidth: 50, + drawYGrid: true, + drawXGrid: true, + gridLineColor: "rgb(128,128,128)", + + interactionModel: null, // will be set to Dygraph.Interaction.defaultModel + animatedZooms: false, // (for now) + + // Range selector options + showRangeSelector: false, + rangeSelectorHeight: 40, + rangeSelectorPlotStrokeColor: "#808FAB", + rangeSelectorPlotFillColor: "#A7B1C4", + showInRangeSelector: null, + + // The ordering here ensures that central lines always appear above any + // fill bars/error bars. + plotter: [ + Dygraph.Plotters.fillPlotter, + Dygraph.Plotters.errorPlotter, + Dygraph.Plotters.linePlotter + ], + + plugins: [ ], + + // per-axis options + axes: { + x: { + pixelsPerLabel: 70, + axisLabelWidth: 60, + axisLabelFormatter: Dygraph.dateAxisLabelFormatter, + valueFormatter: Dygraph.dateValueFormatter, + drawGrid: true, + drawAxis: true, + independentTicks: true, + ticker: null // will be set in dygraph-tickers.js + }, + y: { + axisLabelWidth: 50, + pixelsPerLabel: 30, + valueFormatter: Dygraph.numberValueFormatter, + axisLabelFormatter: Dygraph.numberAxisLabelFormatter, + drawGrid: true, + drawAxis: true, + independentTicks: true, + ticker: null // will be set in dygraph-tickers.js + }, + y2: { + axisLabelWidth: 50, + pixelsPerLabel: 30, + valueFormatter: Dygraph.numberValueFormatter, + axisLabelFormatter: Dygraph.numberAxisLabelFormatter, + drawAxis: true, // only applies when there are two axes of data. + drawGrid: false, + independentTicks: false, + ticker: null // will be set in dygraph-tickers.js + } + } +}; + +// Directions for panning and zooming. Use bit operations when combined +// values are possible. +Dygraph.HORIZONTAL = 1; +Dygraph.VERTICAL = 2; + +// Installed plugins, in order of precedence (most-general to most-specific). +// Plugins are installed after they are defined, in plugins/install.js. +Dygraph.PLUGINS = [ +]; + +// Used for initializing annotation CSS rules only once. +Dygraph.addedAnnotationCSS = false; + +Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { + // Labels is no longer a constructor parameter, since it's typically set + // directly from the data source. It also conains a name for the x-axis, + // which the previous constructor form did not. + if (labels !== null) { + var new_labels = ["Date"]; + for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]); + Dygraph.update(attrs, { 'labels': new_labels }); + } + this.__init__(div, file, attrs); +}; + +/** + * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit + * and context <canvas> inside of it. See the constructor for details. + * on the parameters. + * @param {Element} div the Element to render the graph into. + * @param {string | Function} file Source data + * @param {Object} attrs Miscellaneous other options + * @private + */ +Dygraph.prototype.__init__ = function(div, file, attrs) { + // Hack for IE: if we're using excanvas and the document hasn't finished + // loading yet (and hence may not have initialized whatever it needs to + // initialize), then keep calling this routine periodically until it has. + if (/MSIE/.test(navigator.userAgent) && !window.opera && + typeof(G_vmlCanvasManager) != 'undefined' && + document.readyState != 'complete') { + var self = this; + setTimeout(function() { self.__init__(div, file, attrs); }, 100); + return; + } + + // Support two-argument constructor + if (attrs === null || attrs === undefined) { attrs = {}; } + + attrs = Dygraph.mapLegacyOptions_(attrs); + + if (typeof(div) == 'string') { + div = document.getElementById(div); + } + + if (!div) { + console.error("Constructing dygraph with a non-existent div!"); + return; + } + + this.isUsingExcanvas_ = typeof(G_vmlCanvasManager) != 'undefined'; + + // Copy the important bits into the object + // TODO(danvk): most of these should just stay in the attrs_ dictionary. + this.maindiv_ = div; + this.file_ = file; + this.rollPeriod_ = attrs.rollPeriod || Dygraph.DEFAULT_ROLL_PERIOD; + this.previousVerticalX_ = -1; + this.fractions_ = attrs.fractions || false; + this.dateWindow_ = attrs.dateWindow || null; + + this.annotations_ = []; + + // Zoomed indicators - These indicate when the graph has been zoomed and on what axis. + this.zoomed_x_ = false; + this.zoomed_y_ = false; + + // Clear the div. This ensure that, if multiple dygraphs are passed the same + // div, then only one will be drawn. + div.innerHTML = ""; + + // For historical reasons, the 'width' and 'height' options trump all CSS + // rules _except_ for an explicit 'width' or 'height' on the div. + // As an added convenience, if the div has zero height (like <div></div> does + // without any styles), then we use a default height/width. + if (div.style.width === '' && attrs.width) { + div.style.width = attrs.width + "px"; + } + if (div.style.height === '' && attrs.height) { + div.style.height = attrs.height + "px"; + } + if (div.style.height === '' && div.clientHeight === 0) { + div.style.height = Dygraph.DEFAULT_HEIGHT + "px"; + if (div.style.width === '') { + div.style.width = Dygraph.DEFAULT_WIDTH + "px"; + } + } + // These will be zero if the dygraph's div is hidden. In that case, + // use the user-specified attributes if present. If not, use zero + // and assume the user will call resize to fix things later. + this.width_ = div.clientWidth || attrs.width || 0; + this.height_ = div.clientHeight || attrs.height || 0; + + // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_. + if (attrs.stackedGraph) { + attrs.fillGraph = true; + // TODO(nikhilk): Add any other stackedGraph checks here. + } + + // DEPRECATION WARNING: All option processing should be moved from + // attrs_ and user_attrs_ to options_, which holds all this information. + // + // Dygraphs has many options, some of which interact with one another. + // To keep track of everything, we maintain two sets of options: + // + // this.user_attrs_ only options explicitly set by the user. + // this.attrs_ defaults, options derived from user_attrs_, data. + // + // Options are then accessed this.attr_('attr'), which first looks at + // user_attrs_ and then computed attrs_. This way Dygraphs can set intelligent + // defaults without overriding behavior that the user specifically asks for. + this.user_attrs_ = {}; + Dygraph.update(this.user_attrs_, attrs); + + // This sequence ensures that Dygraph.DEFAULT_ATTRS is never modified. + this.attrs_ = {}; + Dygraph.updateDeep(this.attrs_, Dygraph.DEFAULT_ATTRS); + + this.boundaryIds_ = []; + this.setIndexByName_ = {}; + this.datasetIndex_ = []; + + this.registeredEvents_ = []; + this.eventListeners_ = {}; + + this.attributes_ = new DygraphOptions(this); + + // Create the containing DIV and other interactive elements + this.createInterface_(); + + // Activate plugins. + this.plugins_ = []; + var plugins = Dygraph.PLUGINS.concat(this.getOption('plugins')); + for (var i = 0; i < plugins.length; i++) { + // the plugins option may contain either plugin classes or instances. + // Plugin instances contain an activate method. + var Plugin = plugins[i]; // either a constructor or an instance. + var pluginInstance; + if (typeof(Plugin.activate) !== 'undefined') { + pluginInstance = Plugin; + } else { + pluginInstance = new Plugin(); + } + + var pluginDict = { + plugin: pluginInstance, + events: {}, + options: {}, + pluginOptions: {} + }; + + var handlers = pluginInstance.activate(this); + for (var eventName in handlers) { + if (!handlers.hasOwnProperty(eventName)) continue; + // TODO(danvk): validate eventName. + pluginDict.events[eventName] = handlers[eventName]; + } + + this.plugins_.push(pluginDict); + } + + // At this point, plugins can no longer register event handlers. + // Construct a map from event -> ordered list of [callback, plugin]. + for (var i = 0; i < this.plugins_.length; i++) { + var plugin_dict = this.plugins_[i]; + for (var eventName in plugin_dict.events) { + if (!plugin_dict.events.hasOwnProperty(eventName)) continue; + var callback = plugin_dict.events[eventName]; + + var pair = [plugin_dict.plugin, callback]; + if (!(eventName in this.eventListeners_)) { + this.eventListeners_[eventName] = [pair]; + } else { + this.eventListeners_[eventName].push(pair); + } + } + } + + this.createDragInterface_(); + + this.start_(); +}; + +/** + * Triggers a cascade of events to the various plugins which are interested in them. + * Returns true if the "default behavior" should be prevented, i.e. if one + * of the event listeners called event.preventDefault(). + * @private + */ +Dygraph.prototype.cascadeEvents_ = function(name, extra_props) { + if (!(name in this.eventListeners_)) return false; + + // QUESTION: can we use objects & prototypes to speed this up? + var e = { + dygraph: this, + cancelable: false, + defaultPrevented: false, + preventDefault: function() { + if (!e.cancelable) throw "Cannot call preventDefault on non-cancelable event."; + e.defaultPrevented = true; + }, + propagationStopped: false, + stopPropagation: function() { + e.propagationStopped = true; + } + }; + Dygraph.update(e, extra_props); + + var callback_plugin_pairs = this.eventListeners_[name]; + if (callback_plugin_pairs) { + for (var i = callback_plugin_pairs.length - 1; i >= 0; i--) { + var plugin = callback_plugin_pairs[i][0]; + var callback = callback_plugin_pairs[i][1]; + callback.call(plugin, e); + if (e.propagationStopped) break; + } + } + return e.defaultPrevented; +}; + +/** + * Fetch a plugin instance of a particular class. Only for testing. + * @private + * @param {!Class} type The type of the plugin. + * @return {Object} Instance of the plugin, or null if there is none. + */ +Dygraph.prototype.getPluginInstance_ = function(type) { + for (var i = 0; i < this.plugins_.length; i++) { + var p = this.plugins_[i]; + if (p.plugin instanceof type) { + return p.plugin; + } + } + return null; +}; + +/** + * Returns the zoomed status of the chart for one or both axes. + * + * Axis is an optional parameter. Can be set to 'x' or 'y'. + * + * The zoomed status for an axis is set whenever a user zooms using the mouse + * or when the dateWindow or valueRange are updated (unless the + * isZoomedIgnoreProgrammaticZoom option is also specified). + */ +Dygraph.prototype.isZoomed = function(axis) { + if (axis === null || axis === undefined) { + return this.zoomed_x_ || this.zoomed_y_; + } + if (axis === 'x') return this.zoomed_x_; + if (axis === 'y') return this.zoomed_y_; + throw "axis parameter is [" + axis + "] must be null, 'x' or 'y'."; +}; + +/** + * Returns information about the Dygraph object, including its containing ID. + */ +Dygraph.prototype.toString = function() { + var maindiv = this.maindiv_; + var id = (maindiv && maindiv.id) ? maindiv.id : maindiv; + return "[Dygraph " + id + "]"; +}; + +/** + * @private + * Returns the value of an option. This may be set by the user (either in the + * constructor or by calling updateOptions) or by dygraphs, and may be set to a + * per-series value. + * @param {string} name The name of the option, e.g. 'rollPeriod'. + * @param {string} [seriesName] The name of the series to which the option + * will be applied. If no per-series value of this option is available, then + * the global value is returned. This is optional. + * @return { ... } The value of the option. + */ +Dygraph.prototype.attr_ = function(name, seriesName) { + if (DEBUG) { + if (typeof(Dygraph.OPTIONS_REFERENCE) === 'undefined') { + console.error('Must include options reference JS for testing'); + } else if (!Dygraph.OPTIONS_REFERENCE.hasOwnProperty(name)) { + console.error('Dygraphs is using property ' + name + ', which has no ' + + 'entry in the Dygraphs.OPTIONS_REFERENCE listing.'); + // Only log this error once. + Dygraph.OPTIONS_REFERENCE[name] = true; + } + } + return seriesName ? this.attributes_.getForSeries(name, seriesName) : this.attributes_.get(name); +}; + +/** + * Returns the current value for an option, as set in the constructor or via + * updateOptions. You may pass in an (optional) series name to get per-series + * values for the option. + * + * All values returned by this method should be considered immutable. If you + * modify them, there is no guarantee that the changes will be honored or that + * dygraphs will remain in a consistent state. If you want to modify an option, + * use updateOptions() instead. + * + * @param {string} name The name of the option (e.g. 'strokeWidth') + * @param {string=} opt_seriesName Series name to get per-series values. + * @return {*} The value of the option. + */ +Dygraph.prototype.getOption = function(name, opt_seriesName) { + return this.attr_(name, opt_seriesName); +}; + +/** + * Like getOption(), but specifically returns a number. + * This is a convenience function for working with the Closure Compiler. + * @param {string} name The name of the option (e.g. 'strokeWidth') + * @param {string=} opt_seriesName Series name to get per-series values. + * @return {number} The value of the option. + * @private + */ +Dygraph.prototype.getNumericOption = function(name, opt_seriesName) { + return /** @type{number} */(this.getOption(name, opt_seriesName)); +}; + +/** + * Like getOption(), but specifically returns a string. + * This is a convenience function for working with the Closure Compiler. + * @param {string} name The name of the option (e.g. 'strokeWidth') + * @param {string=} opt_seriesName Series name to get per-series values. + * @return {string} The value of the option. + * @private + */ +Dygraph.prototype.getStringOption = function(name, opt_seriesName) { + return /** @type{string} */(this.getOption(name, opt_seriesName)); +}; + +/** + * Like getOption(), but specifically returns a boolean. + * This is a convenience function for working with the Closure Compiler. + * @param {string} name The name of the option (e.g. 'strokeWidth') + * @param {string=} opt_seriesName Series name to get per-series values. + * @return {boolean} The value of the option. + * @private + */ +Dygraph.prototype.getBooleanOption = function(name, opt_seriesName) { + return /** @type{boolean} */(this.getOption(name, opt_seriesName)); +}; + +/** + * Like getOption(), but specifically returns a function. + * This is a convenience function for working with the Closure Compiler. + * @param {string} name The name of the option (e.g. 'strokeWidth') + * @param {string=} opt_seriesName Series name to get per-series values. + * @return {function(...)} The value of the option. + * @private + */ +Dygraph.prototype.getFunctionOption = function(name, opt_seriesName) { + return /** @type{function(...)} */(this.getOption(name, opt_seriesName)); +}; + +Dygraph.prototype.getOptionForAxis = function(name, axis) { + return this.attributes_.getForAxis(name, axis); +}; + +/** + * @private + * @param {string} axis The name of the axis (i.e. 'x', 'y' or 'y2') + * @return { ... } A function mapping string -> option value + */ +Dygraph.prototype.optionsViewForAxis_ = function(axis) { + var self = this; + return function(opt) { + var axis_opts = self.user_attrs_.axes; + if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) { + return axis_opts[axis][opt]; + } + + // I don't like that this is in a second spot. + if (axis === 'x' && opt === 'logscale') { + // return the default value. + // TODO(konigsberg): pull the default from a global default. + return false; + } + + // user-specified attributes always trump defaults, even if they're less + // specific. + if (typeof(self.user_attrs_[opt]) != 'undefined') { + return self.user_attrs_[opt]; + } + + axis_opts = self.attrs_.axes; + if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) { + return axis_opts[axis][opt]; + } + // check old-style axis options + // TODO(danvk): add a deprecation warning if either of these match. + if (axis == 'y' && self.axes_[0].hasOwnProperty(opt)) { + return self.axes_[0][opt]; + } else if (axis == 'y2' && self.axes_[1].hasOwnProperty(opt)) { + return self.axes_[1][opt]; + } + return self.attr_(opt); + }; +}; + +/** + * Returns the current rolling period, as set by the user or an option. + * @return {number} The number of points in the rolling window + */ +Dygraph.prototype.rollPeriod = function() { + return this.rollPeriod_; +}; + +/** + * Returns the currently-visible x-range. This can be affected by zooming, + * panning or a call to updateOptions. + * Returns a two-element array: [left, right]. + * If the Dygraph has dates on the x-axis, these will be millis since epoch. + */ +Dygraph.prototype.xAxisRange = function() { + return this.dateWindow_ ? this.dateWindow_ : this.xAxisExtremes(); +}; + +/** + * Returns the lower- and upper-bound x-axis values of the + * data set. + */ +Dygraph.prototype.xAxisExtremes = function() { + var pad = this.getNumericOption('xRangePad') / this.plotter_.area.w; + if (this.numRows() === 0) { + return [0 - pad, 1 + pad]; + } + var left = this.rawData_[0][0]; + var right = this.rawData_[this.rawData_.length - 1][0]; + if (pad) { + // Must keep this in sync with dygraph-layout _evaluateLimits() + var range = right - left; + left -= range * pad; + right += range * pad; + } + return [left, right]; +}; + +/** + * Returns the currently-visible y-range for an axis. This can be affected by + * zooming, panning or a call to updateOptions. Axis indices are zero-based. If + * called with no arguments, returns the range of the first axis. + * Returns a two-element array: [bottom, top]. + */ +Dygraph.prototype.yAxisRange = function(idx) { + if (typeof(idx) == "undefined") idx = 0; + if (idx < 0 || idx >= this.axes_.length) { + return null; + } + var axis = this.axes_[idx]; + return [ axis.computedValueRange[0], axis.computedValueRange[1] ]; +}; + +/** + * Returns the currently-visible y-ranges for each axis. This can be affected by + * zooming, panning, calls to updateOptions, etc. + * Returns an array of [bottom, top] pairs, one for each y-axis. + */ +Dygraph.prototype.yAxisRanges = function() { + var ret = []; + for (var i = 0; i < this.axes_.length; i++) { + ret.push(this.yAxisRange(i)); + } + return ret; +}; + +// TODO(danvk): use these functions throughout dygraphs. +/** + * Convert from data coordinates to canvas/div X/Y coordinates. + * If specified, do this conversion for the coordinate system of a particular + * axis. Uses the first axis by default. + * Returns a two-element array: [X, Y] + * + * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord + * instead of toDomCoords(null, y, axis). + */ +Dygraph.prototype.toDomCoords = function(x, y, axis) { + return [ this.toDomXCoord(x), this.toDomYCoord(y, axis) ]; +}; + +/** + * Convert from data x coordinates to canvas/div X coordinate. + * If specified, do this conversion for the coordinate system of a particular + * axis. + * Returns a single value or null if x is null. + */ +Dygraph.prototype.toDomXCoord = function(x) { + if (x === null) { + return null; + } + + var area = this.plotter_.area; + var xRange = this.xAxisRange(); + return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w; +}; + +/** + * Convert from data x coordinates to canvas/div Y coordinate and optional + * axis. Uses the first axis by default. + * + * returns a single value or null if y is null. + */ +Dygraph.prototype.toDomYCoord = function(y, axis) { + var pct = this.toPercentYCoord(y, axis); + + if (pct === null) { + return null; + } + var area = this.plotter_.area; + return area.y + pct * area.h; +}; + +/** + * Convert from canvas/div coords to data coordinates. + * If specified, do this conversion for the coordinate system of a particular + * axis. Uses the first axis by default. + * Returns a two-element array: [X, Y]. + * + * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord + * instead of toDataCoords(null, y, axis). + */ +Dygraph.prototype.toDataCoords = function(x, y, axis) { + return [ this.toDataXCoord(x), this.toDataYCoord(y, axis) ]; +}; + +/** + * Convert from canvas/div x coordinate to data coordinate. + * + * If x is null, this returns null. + */ +Dygraph.prototype.toDataXCoord = function(x) { + if (x === null) { + return null; + } + + var area = this.plotter_.area; + var xRange = this.xAxisRange(); + + if (!this.attributes_.getForAxis("logscale", 'x')) { + return xRange[0] + (x - area.x) / area.w * (xRange[1] - xRange[0]); + } else { + // TODO: remove duplicate code? + // Computing the inverse of toDomCoord. + var pct = (x - area.x) / area.w; + + // Computing the inverse of toPercentXCoord. The function was arrived at with + // the following steps: + // + // Original calcuation: + // pct = (log(x) - log(xRange[0])) / (log(xRange[1]) - log(xRange[0]))); + // + // Multiply both sides by the right-side demoninator. + // pct * (log(xRange[1] - log(xRange[0]))) = log(x) - log(xRange[0]) + // + // add log(xRange[0]) to both sides + // log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) = log(x); + // + // Swap both sides of the equation, + // log(x) = log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0])) + // + // Use both sides as the exponent in 10^exp and we're done. + // x = 10 ^ (log(xRange[0]) + (pct * (log(xRange[1]) - log(xRange[0]))) + var logr0 = Dygraph.log10(xRange[0]); + var logr1 = Dygraph.log10(xRange[1]); + var exponent = logr0 + (pct * (logr1 - logr0)); + var value = Math.pow(Dygraph.LOG_SCALE, exponent); + return value; + } +}; + +/** + * Convert from canvas/div y coord to value. + * + * If y is null, this returns null. + * if axis is null, this uses the first axis. + */ +Dygraph.prototype.toDataYCoord = function(y, axis) { + if (y === null) { + return null; + } + + var area = this.plotter_.area; + var yRange = this.yAxisRange(axis); + + if (typeof(axis) == "undefined") axis = 0; + if (!this.attributes_.getForAxis("logscale", axis)) { + return yRange[0] + (area.y + area.h - y) / area.h * (yRange[1] - yRange[0]); + } else { + // Computing the inverse of toDomCoord. + var pct = (y - area.y) / area.h; + + // Computing the inverse of toPercentYCoord. The function was arrived at with + // the following steps: + // + // Original calcuation: + // pct = (log(yRange[1]) - log(y)) / (log(yRange[1]) - log(yRange[0])); + // + // Multiply both sides by the right-side demoninator. + // pct * (log(yRange[1]) - log(yRange[0])) = log(yRange[1]) - log(y); + // + // subtract log(yRange[1]) from both sides. + // (pct * (log(yRange[1]) - log(yRange[0]))) - log(yRange[1]) = -log(y); + // + // and multiply both sides by -1. + // log(yRange[1]) - (pct * (logr1 - log(yRange[0])) = log(y); + // + // Swap both sides of the equation, + // log(y) = log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0]))); + // + // Use both sides as the exponent in 10^exp and we're done. + // y = 10 ^ (log(yRange[1]) - (pct * (log(yRange[1]) - log(yRange[0])))); + var logr0 = Dygraph.log10(yRange[0]); + var logr1 = Dygraph.log10(yRange[1]); + var exponent = logr1 - (pct * (logr1 - logr0)); + var value = Math.pow(Dygraph.LOG_SCALE, exponent); + return value; + } +}; + +/** + * Converts a y for an axis to a percentage from the top to the + * bottom of the drawing area. + * + * If the coordinate represents a value visible on the canvas, then + * the value will be between 0 and 1, where 0 is the top of the canvas. + * However, this method will return values outside the range, as + * values can fall outside the canvas. + * + * If y is null, this returns null. + * if axis is null, this uses the first axis. + * + * @param {number} y The data y-coordinate. + * @param {number} [axis] The axis number on which the data coordinate lives. + * @return {number} A fraction in [0, 1] where 0 = the top edge. + */ +Dygraph.prototype.toPercentYCoord = function(y, axis) { + if (y === null) { + return null; + } + if (typeof(axis) == "undefined") axis = 0; + + var yRange = this.yAxisRange(axis); + + var pct; + var logscale = this.attributes_.getForAxis("logscale", axis); + if (logscale) { + var logr0 = Dygraph.log10(yRange[0]); + var logr1 = Dygraph.log10(yRange[1]); + pct = (logr1 - Dygraph.log10(y)) / (logr1 - logr0); + } else { + // yRange[1] - y is unit distance from the bottom. + // yRange[1] - yRange[0] is the scale of the range. + // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom. + pct = (yRange[1] - y) / (yRange[1] - yRange[0]); + } + return pct; +}; + +/** + * Converts an x value to a percentage from the left to the right of + * the drawing area. + * + * If the coordinate represents a value visible on the canvas, then + * the value will be between 0 and 1, where 0 is the left of the canvas. + * However, this method will return values outside the range, as + * values can fall outside the canvas. + * + * If x is null, this returns null. + * @param {number} x The data x-coordinate. + * @return {number} A fraction in [0, 1] where 0 = the left edge. + */ +Dygraph.prototype.toPercentXCoord = function(x) { + if (x === null) { + return null; + } + + var xRange = this.xAxisRange(); + var pct; + var logscale = this.attributes_.getForAxis("logscale", 'x') ; + if (logscale === true) { // logscale can be null so we test for true explicitly. + var logr0 = Dygraph.log10(xRange[0]); + var logr1 = Dygraph.log10(xRange[1]); + pct = (Dygraph.log10(x) - logr0) / (logr1 - logr0); + } else { + // x - xRange[0] is unit distance from the left. + // xRange[1] - xRange[0] is the scale of the range. + // The full expression below is the % from the left. + pct = (x - xRange[0]) / (xRange[1] - xRange[0]); + } + return pct; +}; + +/** + * Returns the number of columns (including the independent variable). + * @return {number} The number of columns. + */ +Dygraph.prototype.numColumns = function() { + if (!this.rawData_) return 0; + return this.rawData_[0] ? this.rawData_[0].length : this.attr_("labels").length; +}; + +/** + * Returns the number of rows (excluding any header/label row). + * @return {number} The number of rows, less any header. + */ +Dygraph.prototype.numRows = function() { + if (!this.rawData_) return 0; + return this.rawData_.length; +}; + +/** + * Returns the value in the given row and column. If the row and column exceed + * the bounds on the data, returns null. Also returns null if the value is + * missing. + * @param {number} row The row number of the data (0-based). Row 0 is the + * first row of data, not a header row. + * @param {number} col The column number of the data (0-based) + * @return {number} The value in the specified cell or null if the row/col + * were out of range. + */ +Dygraph.prototype.getValue = function(row, col) { + if (row < 0 || row > this.rawData_.length) return null; + if (col < 0 || col > this.rawData_[row].length) return null; + + return this.rawData_[row][col]; +}; + +/** + * Generates interface elements for the Dygraph: a containing div, a div to + * display the current point, and a textbox to adjust the rolling average + * period. Also creates the Renderer/Layout elements. + * @private + */ +Dygraph.prototype.createInterface_ = function() { + // Create the all-enclosing graph div + var enclosing = this.maindiv_; + + this.graphDiv = document.createElement("div"); + + // TODO(danvk): any other styles that are useful to set here? + this.graphDiv.style.textAlign = 'left'; // This is a CSS "reset" + this.graphDiv.style.position = 'relative'; + enclosing.appendChild(this.graphDiv); + + // Create the canvas for interactive parts of the chart. + this.canvas_ = Dygraph.createCanvas(); + this.canvas_.style.position = "absolute"; + + // ... and for static parts of the chart. + this.hidden_ = this.createPlotKitCanvas_(this.canvas_); + + this.canvas_ctx_ = Dygraph.getContext(this.canvas_); + this.hidden_ctx_ = Dygraph.getContext(this.hidden_); + + this.resizeElements_(); + + // The interactive parts of the graph are drawn on top of the chart. + this.graphDiv.appendChild(this.hidden_); + this.graphDiv.appendChild(this.canvas_); + this.mouseEventElement_ = this.createMouseEventElement_(); + + // Create the grapher + this.layout_ = new DygraphLayout(this); + + var dygraph = this; + + this.mouseMoveHandler_ = function(e) { + dygraph.mouseMove_(e); + }; + + this.mouseOutHandler_ = function(e) { + // The mouse has left the chart if: + // 1. e.target is inside the chart + // 2. e.relatedTarget is outside the chart + var target = e.target || e.fromElement; + var relatedTarget = e.relatedTarget || e.toElement; + if (Dygraph.isNodeContainedBy(target, dygraph.graphDiv) && + !Dygraph.isNodeContainedBy(relatedTarget, dygraph.graphDiv)) { + dygraph.mouseOut_(e); + } + }; + + this.addAndTrackEvent(window, 'mouseout', this.mouseOutHandler_); + this.addAndTrackEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_); + + // Don't recreate and register the resize handler on subsequent calls. + // This happens when the graph is resized. + if (!this.resizeHandler_) { + this.resizeHandler_ = function(e) { + dygraph.resize(); + }; + + // Update when the window is resized. + // TODO(danvk): drop frames depending on complexity of the chart. + this.addAndTrackEvent(window, 'resize', this.resizeHandler_); + } +}; + +Dygraph.prototype.resizeElements_ = function() { + this.graphDiv.style.width = this.width_ + "px"; + this.graphDiv.style.height = this.height_ + "px"; + + var canvasScale = Dygraph.getContextPixelRatio(this.canvas_ctx_); + this.canvas_.width = this.width_ * canvasScale; + this.canvas_.height = this.height_ * canvasScale; + this.canvas_.style.width = this.width_ + "px"; // for IE + this.canvas_.style.height = this.height_ + "px"; // for IE + if (canvasScale !== 1) { + this.canvas_ctx_.scale(canvasScale, canvasScale); + } + + var hiddenScale = Dygraph.getContextPixelRatio(this.hidden_ctx_); + this.hidden_.width = this.width_ * hiddenScale; + this.hidden_.height = this.height_ * hiddenScale; + this.hidden_.style.width = this.width_ + "px"; // for IE + this.hidden_.style.height = this.height_ + "px"; // for IE + if (hiddenScale !== 1) { + this.hidden_ctx_.scale(hiddenScale, hiddenScale); + } +}; + +/** + * Detach DOM elements in the dygraph and null out all data references. + * Calling this when you're done with a dygraph can dramatically reduce memory + * usage. See, e.g., the tests/perf.html example. + */ +Dygraph.prototype.destroy = function() { + this.canvas_ctx_.restore(); + this.hidden_ctx_.restore(); + + // Destroy any plugins, in the reverse order that they were registered. + for (var i = this.plugins_.length - 1; i >= 0; i--) { + var p = this.plugins_.pop(); + if (p.plugin.destroy) p.plugin.destroy(); + } + + var removeRecursive = function(node) { + while (node.hasChildNodes()) { + removeRecursive(node.firstChild); + node.removeChild(node.firstChild); + } + }; + + this.removeTrackedEvents_(); + + // remove mouse event handlers (This may not be necessary anymore) + Dygraph.removeEvent(window, 'mouseout', this.mouseOutHandler_); + Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_); + + // remove window handlers + Dygraph.removeEvent(window,'resize', this.resizeHandler_); + this.resizeHandler_ = null; + + removeRecursive(this.maindiv_); + + var nullOut = function(obj) { + for (var n in obj) { + if (typeof(obj[n]) === 'object') { + obj[n] = null; + } + } + }; + // These may not all be necessary, but it can't hurt... + nullOut(this.layout_); + nullOut(this.plotter_); + nullOut(this); +}; + +/** + * Creates the canvas on which the chart will be drawn. Only the Renderer ever + * draws on this particular canvas. All Dygraph work (i.e. drawing hover dots + * or the zoom rectangles) is done on this.canvas_. + * @param {Object} canvas The Dygraph canvas over which to overlay the plot + * @return {Object} The newly-created canvas + * @private + */ +Dygraph.prototype.createPlotKitCanvas_ = function(canvas) { + var h = Dygraph.createCanvas(); + h.style.position = "absolute"; + // TODO(danvk): h should be offset from canvas. canvas needs to include + // some extra area to make it easier to zoom in on the far left and far + // right. h needs to be precisely the plot area, so that clipping occurs. + h.style.top = canvas.style.top; + h.style.left = canvas.style.left; + h.width = this.width_; + h.height = this.height_; + h.style.width = this.width_ + "px"; // for IE + h.style.height = this.height_ + "px"; // for IE + return h; +}; + +/** + * Creates an overlay element used to handle mouse events. + * @return {Object} The mouse event element. + * @private + */ +Dygraph.prototype.createMouseEventElement_ = function() { + if (this.isUsingExcanvas_) { + var elem = document.createElement("div"); + elem.style.position = 'absolute'; + elem.style.backgroundColor = 'white'; + elem.style.filter = 'alpha(opacity=0)'; + elem.style.width = this.width_ + "px"; + elem.style.height = this.height_ + "px"; + this.graphDiv.appendChild(elem); + return elem; + } else { + return this.canvas_; + } +}; + +/** + * Generate a set of distinct colors for the data series. This is done with a + * color wheel. Saturation/Value are customizable, and the hue is + * equally-spaced around the color wheel. If a custom set of colors is + * specified, that is used instead. + * @private + */ +Dygraph.prototype.setColors_ = function() { + var labels = this.getLabels(); + var num = labels.length - 1; + this.colors_ = []; + this.colorsMap_ = {}; + + // These are used for when no custom colors are specified. + var sat = this.getNumericOption('colorSaturation') || 1.0; + var val = this.getNumericOption('colorValue') || 0.5; + var half = Math.ceil(num / 2); + + var colors = this.getOption('colors'); + var visibility = this.visibility(); + for (var i = 0; i < num; i++) { + if (!visibility[i]) { + continue; + } + var label = labels[i + 1]; + var colorStr = this.attributes_.getForSeries('color', label); + if (!colorStr) { + if (colors) { + colorStr = colors[i % colors.length]; + } else { + // alternate colors for high contrast. + var idx = i % 2 ? (half + (i + 1)/ 2) : Math.ceil((i + 1) / 2); + var hue = (1.0 * idx / (1 + num)); + colorStr = Dygraph.hsvToRGB(hue, sat, val); + } + } + this.colors_.push(colorStr); + this.colorsMap_[label] = colorStr; + } +}; + +/** + * Return the list of colors. This is either the list of colors passed in the + * attributes or the autogenerated list of rgb(r,g,b) strings. + * This does not return colors for invisible series. + * @return {Array.<string>} The list of colors. + */ +Dygraph.prototype.getColors = function() { + return this.colors_; +}; + +/** + * Returns a few attributes of a series, i.e. its color, its visibility, which + * axis it's assigned to, and its column in the original data. + * Returns null if the series does not exist. + * Otherwise, returns an object with column, visibility, color and axis properties. + * The "axis" property will be set to 1 for y1 and 2 for y2. + * The "column" property can be fed back into getValue(row, column) to get + * values for this series. + */ +Dygraph.prototype.getPropertiesForSeries = function(series_name) { + var idx = -1; + var labels = this.getLabels(); + for (var i = 1; i < labels.length; i++) { + if (labels[i] == series_name) { + idx = i; + break; + } + } + if (idx == -1) return null; + + return { + name: series_name, + column: idx, + visible: this.visibility()[idx - 1], + color: this.colorsMap_[series_name], + axis: 1 + this.attributes_.axisForSeries(series_name) + }; +}; + +/** + * Create the text box to adjust the averaging period + * @private + */ +Dygraph.prototype.createRollInterface_ = function() { + // Create a roller if one doesn't exist already. + if (!this.roller_) { + this.roller_ = document.createElement("input"); + this.roller_.type = "text"; + this.roller_.style.display = "none"; + this.graphDiv.appendChild(this.roller_); + } + + var display = this.getBooleanOption('showRoller') ? 'block' : 'none'; + + var area = this.plotter_.area; + var textAttr = { "position": "absolute", + "zIndex": 10, + "top": (area.y + area.h - 25) + "px", + "left": (area.x + 1) + "px", + "display": display + }; + this.roller_.size = "2"; + this.roller_.value = this.rollPeriod_; + for (var name in textAttr) { + if (textAttr.hasOwnProperty(name)) { + this.roller_.style[name] = textAttr[name]; + } + } + + var dygraph = this; + this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); }; +}; + +/** + * Set up all the mouse handlers needed to capture dragging behavior for zoom + * events. + * @private + */ +Dygraph.prototype.createDragInterface_ = function() { + var context = { + // Tracks whether the mouse is down right now + isZooming: false, + isPanning: false, // is this drag part of a pan? + is2DPan: false, // if so, is that pan 1- or 2-dimensional? + dragStartX: null, // pixel coordinates + dragStartY: null, // pixel coordinates + dragEndX: null, // pixel coordinates + dragEndY: null, // pixel coordinates + dragDirection: null, + prevEndX: null, // pixel coordinates + prevEndY: null, // pixel coordinates + prevDragDirection: null, + cancelNextDblclick: false, // see comment in dygraph-interaction-model.js + + // The value on the left side of the graph when a pan operation starts. + initialLeftmostDate: null, + + // The number of units each pixel spans. (This won't be valid for log + // scales) + xUnitsPerPixel: null, + + // TODO(danvk): update this comment + // The range in second/value units that the viewport encompasses during a + // panning operation. + dateRange: null, + + // Top-left corner of the canvas, in DOM coords + // TODO(konigsberg): Rename topLeftCanvasX, topLeftCanvasY. + px: 0, + py: 0, + + // Values for use with panEdgeFraction, which limit how far outside the + // graph's data boundaries it can be panned. + boundedDates: null, // [minDate, maxDate] + boundedValues: null, // [[minValue, maxValue] ...] + + // We cover iframes during mouse interactions. See comments in + // dygraph-utils.js for more info on why this is a good idea. + tarp: new Dygraph.IFrameTarp(), + + // contextB is the same thing as this context object but renamed. + initializeMouseDown: function(event, g, contextB) { + // prevents mouse drags from selecting page text. + if (event.preventDefault) { + event.preventDefault(); // Firefox, Chrome, etc. + } else { + event.returnValue = false; // IE + event.cancelBubble = true; + } + + var canvasPos = Dygraph.findPos(g.canvas_); + contextB.px = canvasPos.x; + contextB.py = canvasPos.y; + contextB.dragStartX = Dygraph.dragGetX_(event, contextB); + contextB.dragStartY = Dygraph.dragGetY_(event, contextB); + contextB.cancelNextDblclick = false; + contextB.tarp.cover(); + }, + destroy: function() { + var context = this; + if (context.isZooming || context.isPanning) { + context.isZooming = false; + context.dragStartX = null; + context.dragStartY = null; + } + + if (context.isPanning) { + context.isPanning = false; + context.draggingDate = null; + context.dateRange = null; + for (var i = 0; i < self.axes_.length; i++) { + delete self.axes_[i].draggingValue; + delete self.axes_[i].dragValueRange; + } + } + + context.tarp.uncover(); + } + }; + + var interactionModel = this.getOption("interactionModel"); + + // Self is the graph. + var self = this; + + // Function that binds the graph and context to the handler. + var bindHandler = function(handler) { + return function(event) { + handler(event, self, context); + }; + }; + + for (var eventName in interactionModel) { + if (!interactionModel.hasOwnProperty(eventName)) continue; + this.addAndTrackEvent(this.mouseEventElement_, eventName, + bindHandler(interactionModel[eventName])); + } + + // If the user releases the mouse button during a drag, but not over the + // canvas, then it doesn't count as a zooming action. + if (!interactionModel.willDestroyContextMyself) { + var mouseUpHandler = function(event) { + context.destroy(); + }; + + this.addAndTrackEvent(document, 'mouseup', mouseUpHandler); + } +}; + +/** + * Draw a gray zoom rectangle over the desired area of the canvas. Also clears + * up any previous zoom rectangles that were drawn. This could be optimized to + * avoid extra redrawing, but it's tricky to avoid interactions with the status + * dots. + * + * @param {number} direction the direction of the zoom rectangle. Acceptable + * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL. + * @param {number} startX The X position where the drag started, in canvas + * coordinates. + * @param {number} endX The current X position of the drag, in canvas coords. + * @param {number} startY The Y position where the drag started, in canvas + * coordinates. + * @param {number} endY The current Y position of the drag, in canvas coords. + * @param {number} prevDirection the value of direction on the previous call to + * this function. Used to avoid excess redrawing + * @param {number} prevEndX The value of endX on the previous call to this + * function. Used to avoid excess redrawing + * @param {number} prevEndY The value of endY on the previous call to this + * function. Used to avoid excess redrawing + * @private + */ +Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, + endY, prevDirection, prevEndX, + prevEndY) { + var ctx = this.canvas_ctx_; + + // Clean up from the previous rect if necessary + if (prevDirection == Dygraph.HORIZONTAL) { + ctx.clearRect(Math.min(startX, prevEndX), this.layout_.getPlotArea().y, + Math.abs(startX - prevEndX), this.layout_.getPlotArea().h); + } else if (prevDirection == Dygraph.VERTICAL) { + ctx.clearRect(this.layout_.getPlotArea().x, Math.min(startY, prevEndY), + this.layout_.getPlotArea().w, Math.abs(startY - prevEndY)); + } + + // Draw a light-grey rectangle to show the new viewing area + if (direction == Dygraph.HORIZONTAL) { + if (endX && startX) { + ctx.fillStyle = "rgba(128,128,128,0.33)"; + ctx.fillRect(Math.min(startX, endX), this.layout_.getPlotArea().y, + Math.abs(endX - startX), this.layout_.getPlotArea().h); + } + } else if (direction == Dygraph.VERTICAL) { + if (endY && startY) { + ctx.fillStyle = "rgba(128,128,128,0.33)"; + ctx.fillRect(this.layout_.getPlotArea().x, Math.min(startY, endY), + this.layout_.getPlotArea().w, Math.abs(endY - startY)); + } + } + + if (this.isUsingExcanvas_) { + this.currentZoomRectArgs_ = [direction, startX, endX, startY, endY, 0, 0, 0]; + } +}; + +/** + * Clear the zoom rectangle (and perform no zoom). + * @private + */ +Dygraph.prototype.clearZoomRect_ = function() { + this.currentZoomRectArgs_ = null; + this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_); +}; + +/** + * Zoom to something containing [lowX, highX]. These are pixel coordinates in + * the canvas. The exact zoom window may be slightly larger if there are no data + * points near lowX or highX. Don't confuse this function with doZoomXDates, + * which accepts dates that match the raw data. This function redraws the graph. + * + * @param {number} lowX The leftmost pixel value that should be visible. + * @param {number} highX The rightmost pixel value that should be visible. + * @private + */ +Dygraph.prototype.doZoomX_ = function(lowX, highX) { + this.currentZoomRectArgs_ = null; + // Find the earliest and latest dates contained in this canvasx range. + // Convert the call to date ranges of the raw data. + var minDate = this.toDataXCoord(lowX); + var maxDate = this.toDataXCoord(highX); + this.doZoomXDates_(minDate, maxDate); +}; + +/** + * Zoom to something containing [minDate, maxDate] values. Don't confuse this + * method with doZoomX which accepts pixel coordinates. This function redraws + * the graph. + * + * @param {number} minDate The minimum date that should be visible. + * @param {number} maxDate The maximum date that should be visible. + * @private + */ +Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) { + // TODO(danvk): when xAxisRange is null (i.e. "fit to data", the animation + // can produce strange effects. Rather than the x-axis transitioning slowly + // between values, it can jerk around.) + var old_window = this.xAxisRange(); + var new_window = [minDate, maxDate]; + this.zoomed_x_ = true; + var that = this; + this.doAnimatedZoom(old_window, new_window, null, null, function() { + if (that.getFunctionOption("zoomCallback")) { + that.getFunctionOption("zoomCallback").call(that, + minDate, maxDate, that.yAxisRanges()); + } + }); +}; + +/** + * Zoom to something containing [lowY, highY]. These are pixel coordinates in + * the canvas. This function redraws the graph. + * + * @param {number} lowY The topmost pixel value that should be visible. + * @param {number} highY The lowest pixel value that should be visible. + * @private + */ +Dygraph.prototype.doZoomY_ = function(lowY, highY) { + this.currentZoomRectArgs_ = null; + // Find the highest and lowest values in pixel range for each axis. + // Note that lowY (in pixels) corresponds to the max Value (in data coords). + // This is because pixels increase as you go down on the screen, whereas data + // coordinates increase as you go up the screen. + var oldValueRanges = this.yAxisRanges(); + var newValueRanges = []; + for (var i = 0; i < this.axes_.length; i++) { + var hi = this.toDataYCoord(lowY, i); + var low = this.toDataYCoord(highY, i); + newValueRanges.push([low, hi]); + } + + this.zoomed_y_ = true; + var that = this; + this.doAnimatedZoom(null, null, oldValueRanges, newValueRanges, function() { + if (that.getFunctionOption("zoomCallback")) { + var xRange = that.xAxisRange(); + that.getFunctionOption("zoomCallback").call(that, + xRange[0], xRange[1], that.yAxisRanges()); + } + }); +}; + +/** + * Transition function to use in animations. Returns values between 0.0 + * (totally old values) and 1.0 (totally new values) for each frame. + * @private + */ +Dygraph.zoomAnimationFunction = function(frame, numFrames) { + var k = 1.5; + return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames)); +}; + +/** + * Reset the zoom to the original view coordinates. This is the same as + * double-clicking on the graph. + */ +Dygraph.prototype.resetZoom = function() { + var dirty = false, dirtyX = false, dirtyY = false; + if (this.dateWindow_ !== null) { + dirty = true; + dirtyX = true; + } + + for (var i = 0; i < this.axes_.length; i++) { + if (typeof(this.axes_[i].valueWindow) !== 'undefined' && this.axes_[i].valueWindow !== null) { + dirty = true; + dirtyY = true; + } + } + + // Clear any selection, since it's likely to be drawn in the wrong place. + this.clearSelection(); + + if (dirty) { + this.zoomed_x_ = false; + this.zoomed_y_ = false; + + var minDate = this.rawData_[0][0]; + var maxDate = this.rawData_[this.rawData_.length - 1][0]; + + // With only one frame, don't bother calculating extreme ranges. + // TODO(danvk): merge this block w/ the code below. + if (!this.getBooleanOption("animatedZooms")) { + this.dateWindow_ = null; + for (i = 0; i < this.axes_.length; i++) { + if (this.axes_[i].valueWindow !== null) { + delete this.axes_[i].valueWindow; + } + } + this.drawGraph_(); + if (this.getFunctionOption("zoomCallback")) { + this.getFunctionOption("zoomCallback").call(this, + minDate, maxDate, this.yAxisRanges()); + } + return; + } + + var oldWindow=null, newWindow=null, oldValueRanges=null, newValueRanges=null; + if (dirtyX) { + oldWindow = this.xAxisRange(); + newWindow = [minDate, maxDate]; + } + + if (dirtyY) { + oldValueRanges = this.yAxisRanges(); + // TODO(danvk): this is pretty inefficient + var packed = this.gatherDatasets_(this.rolledSeries_, null); + var extremes = packed.extremes; + + // this has the side-effect of modifying this.axes_. + // this doesn't make much sense in this context, but it's convenient (we + // need this.axes_[*].extremeValues) and not harmful since we'll be + // calling drawGraph_ shortly, which clobbers these values. + this.computeYAxisRanges_(extremes); + + newValueRanges = []; + for (i = 0; i < this.axes_.length; i++) { + var axis = this.axes_[i]; + newValueRanges.push((axis.valueRange !== null && + axis.valueRange !== undefined) ? + axis.valueRange : axis.extremeRange); + } + } + + var that = this; + this.doAnimatedZoom(oldWindow, newWindow, oldValueRanges, newValueRanges, + function() { + that.dateWindow_ = null; + for (var i = 0; i < that.axes_.length; i++) { + if (that.axes_[i].valueWindow !== null) { + delete that.axes_[i].valueWindow; + } + } + if (that.getFunctionOption("zoomCallback")) { + that.getFunctionOption("zoomCallback").call(that, + minDate, maxDate, that.yAxisRanges()); + } + }); + } +}; + +/** + * Combined animation logic for all zoom functions. + * either the x parameters or y parameters may be null. + * @private + */ +Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, newYRanges, callback) { + var steps = this.getBooleanOption("animatedZooms") ? + Dygraph.ANIMATION_STEPS : 1; + + var windows = []; + var valueRanges = []; + var step, frac; + + if (oldXRange !== null && newXRange !== null) { + for (step = 1; step <= steps; step++) { + frac = Dygraph.zoomAnimationFunction(step, steps); + windows[step-1] = [oldXRange[0]*(1-frac) + frac*newXRange[0], + oldXRange[1]*(1-frac) + frac*newXRange[1]]; + } + } + + if (oldYRanges !== null && newYRanges !== null) { + for (step = 1; step <= steps; step++) { + frac = Dygraph.zoomAnimationFunction(step, steps); + var thisRange = []; + for (var j = 0; j < this.axes_.length; j++) { + thisRange.push([oldYRanges[j][0]*(1-frac) + frac*newYRanges[j][0], + oldYRanges[j][1]*(1-frac) + frac*newYRanges[j][1]]); + } + valueRanges[step-1] = thisRange; + } + } + + var that = this; + Dygraph.repeatAndCleanup(function(step) { + if (valueRanges.length) { + for (var i = 0; i < that.axes_.length; i++) { + var w = valueRanges[step][i]; + that.axes_[i].valueWindow = [w[0], w[1]]; + } + } + if (windows.length) { + that.dateWindow_ = windows[step]; + } + that.drawGraph_(); + }, steps, Dygraph.ANIMATION_DURATION / steps, callback); +}; + +/** + * Get the current graph's area object. + * + * Returns: {x, y, w, h} + */ +Dygraph.prototype.getArea = function() { + return this.plotter_.area; +}; + +/** + * Convert a mouse event to DOM coordinates relative to the graph origin. + * + * Returns a two-element array: [X, Y]. + */ +Dygraph.prototype.eventToDomCoords = function(event) { + if (event.offsetX && event.offsetY) { + return [ event.offsetX, event.offsetY ]; + } else { + var eventElementPos = Dygraph.findPos(this.mouseEventElement_); + var canvasx = Dygraph.pageX(event) - eventElementPos.x; + var canvasy = Dygraph.pageY(event) - eventElementPos.y; + return [canvasx, canvasy]; + } +}; + +/** + * Given a canvas X coordinate, find the closest row. + * @param {number} domX graph-relative DOM X coordinate + * Returns {number} row number. + * @private + */ +Dygraph.prototype.findClosestRow = function(domX) { + var minDistX = Infinity; + var closestRow = -1; + var sets = this.layout_.points; + for (var i = 0; i < sets.length; i++) { + var points = sets[i]; + var len = points.length; + for (var j = 0; j < len; j++) { + var point = points[j]; + if (!Dygraph.isValidPoint(point, true)) continue; + var dist = Math.abs(point.canvasx - domX); + if (dist < minDistX) { + minDistX = dist; + closestRow = point.idx; + } + } + } + + return closestRow; +}; + +/** + * Given canvas X,Y coordinates, find the closest point. + * + * This finds the individual data point across all visible series + * that's closest to the supplied DOM coordinates using the standard + * Euclidean X,Y distance. + * + * @param {number} domX graph-relative DOM X coordinate + * @param {number} domY graph-relative DOM Y coordinate + * Returns: {row, seriesName, point} + * @private + */ +Dygraph.prototype.findClosestPoint = function(domX, domY) { + var minDist = Infinity; + var dist, dx, dy, point, closestPoint, closestSeries, closestRow; + for ( var setIdx = this.layout_.points.length - 1 ; setIdx >= 0 ; --setIdx ) { + var points = this.layout_.points[setIdx]; + for (var i = 0; i < points.length; ++i) { + point = points[i]; + if (!Dygraph.isValidPoint(point)) continue; + dx = point.canvasx - domX; + dy = point.canvasy - domY; + dist = dx * dx + dy * dy; + if (dist < minDist) { + minDist = dist; + closestPoint = point; + closestSeries = setIdx; + closestRow = point.idx; + } + } + } + var name = this.layout_.setNames[closestSeries]; + return { + row: closestRow, + seriesName: name, + point: closestPoint + }; +}; + +/** + * Given canvas X,Y coordinates, find the touched area in a stacked graph. + * + * This first finds the X data point closest to the supplied DOM X coordinate, + * then finds the series which puts the Y coordinate on top of its filled area, + * using linear interpolation between adjacent point pairs. + * + * @param {number} domX graph-relative DOM X coordinate + * @param {number} domY graph-relative DOM Y coordinate + * Returns: {row, seriesName, point} + * @private + */ +Dygraph.prototype.findStackedPoint = function(domX, domY) { + var row = this.findClosestRow(domX); + var closestPoint, closestSeries; + for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) { + var boundary = this.getLeftBoundary_(setIdx); + var rowIdx = row - boundary; + var points = this.layout_.points[setIdx]; + if (rowIdx >= points.length) continue; + var p1 = points[rowIdx]; + if (!Dygraph.isValidPoint(p1)) continue; + var py = p1.canvasy; + if (domX > p1.canvasx && rowIdx + 1 < points.length) { + // interpolate series Y value using next point + var p2 = points[rowIdx + 1]; + if (Dygraph.isValidPoint(p2)) { + var dx = p2.canvasx - p1.canvasx; + if (dx > 0) { + var r = (domX - p1.canvasx) / dx; + py += r * (p2.canvasy - p1.canvasy); + } + } + } else if (domX < p1.canvasx && rowIdx > 0) { + // interpolate series Y value using previous point + var p0 = points[rowIdx - 1]; + if (Dygraph.isValidPoint(p0)) { + var dx = p1.canvasx - p0.canvasx; + if (dx > 0) { + var r = (p1.canvasx - domX) / dx; + py += r * (p0.canvasy - p1.canvasy); + } + } + } + // Stop if the point (domX, py) is above this series' upper edge + if (setIdx === 0 || py < domY) { + closestPoint = p1; + closestSeries = setIdx; + } + } + var name = this.layout_.setNames[closestSeries]; + return { + row: row, + seriesName: name, + point: closestPoint + }; +}; + +/** + * When the mouse moves in the canvas, display information about a nearby data + * point and draw dots over those points in the data series. This function + * takes care of cleanup of previously-drawn dots. + * @param {Object} event The mousemove event from the browser. + * @private + */ +Dygraph.prototype.mouseMove_ = function(event) { + // This prevents JS errors when mousing over the canvas before data loads. + var points = this.layout_.points; + if (points === undefined || points === null) return; + + var canvasCoords = this.eventToDomCoords(event); + var canvasx = canvasCoords[0]; + var canvasy = canvasCoords[1]; + + var highlightSeriesOpts = this.getOption("highlightSeriesOpts"); + var selectionChanged = false; + if (highlightSeriesOpts && !this.isSeriesLocked()) { + var closest; + if (this.getBooleanOption("stackedGraph")) { + closest = this.findStackedPoint(canvasx, canvasy); + } else { + closest = this.findClosestPoint(canvasx, canvasy); + } + selectionChanged = this.setSelection(closest.row, closest.seriesName); + } else { + var idx = this.findClosestRow(canvasx); + selectionChanged = this.setSelection(idx); + } + + var callback = this.getFunctionOption("highlightCallback"); + if (callback && selectionChanged) { + callback.call(this, event, + this.lastx_, + this.selPoints_, + this.lastRow_, + this.highlightSet_); + } +}; + +/** + * Fetch left offset from the specified set index or if not passed, the + * first defined boundaryIds record (see bug #236). + * @private + */ +Dygraph.prototype.getLeftBoundary_ = function(setIdx) { + if (this.boundaryIds_[setIdx]) { + return this.boundaryIds_[setIdx][0]; + } else { + for (var i = 0; i < this.boundaryIds_.length; i++) { + if (this.boundaryIds_[i] !== undefined) { + return this.boundaryIds_[i][0]; + } + } + return 0; + } +}; + +Dygraph.prototype.animateSelection_ = function(direction) { + var totalSteps = 10; + var millis = 30; + if (this.fadeLevel === undefined) this.fadeLevel = 0; + if (this.animateId === undefined) this.animateId = 0; + var start = this.fadeLevel; + var steps = direction < 0 ? start : totalSteps - start; + if (steps <= 0) { + if (this.fadeLevel) { + this.updateSelection_(1.0); + } + return; + } + + var thisId = ++this.animateId; + var that = this; + Dygraph.repeatAndCleanup( + function(n) { + // ignore simultaneous animations + if (that.animateId != thisId) return; + + that.fadeLevel += direction; + if (that.fadeLevel === 0) { + that.clearSelection(); + } else { + that.updateSelection_(that.fadeLevel / totalSteps); + } + }, + steps, millis, function() {}); +}; + +/** + * Draw dots over the selectied points in the data series. This function + * takes care of cleanup of previously-drawn dots. + * @private + */ +Dygraph.prototype.updateSelection_ = function(opt_animFraction) { + /*var defaultPrevented = */ + this.cascadeEvents_('select', { + selectedX: this.lastx_, + selectedPoints: this.selPoints_ + }); + // TODO(danvk): use defaultPrevented here? + + // Clear the previously drawn vertical, if there is one + var i; + var ctx = this.canvas_ctx_; + if (this.getOption('highlightSeriesOpts')) { + ctx.clearRect(0, 0, this.width_, this.height_); + var alpha = 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha'); + if (alpha) { + // Activating background fade includes an animation effect for a gradual + // fade. TODO(klausw): make this independently configurable if it causes + // issues? Use a shared preference to control animations? + var animateBackgroundFade = true; + if (animateBackgroundFade) { + if (opt_animFraction === undefined) { + // start a new animation + this.animateSelection_(1); + return; + } + alpha *= opt_animFraction; + } + ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')'; + ctx.fillRect(0, 0, this.width_, this.height_); + } + + // Redraw only the highlighted series in the interactive canvas (not the + // static plot canvas, which is where series are usually drawn). + this.plotter_._renderLineChart(this.highlightSet_, ctx); + } else if (this.previousVerticalX_ >= 0) { + // Determine the maximum highlight circle size. + var maxCircleSize = 0; + var labels = this.attr_('labels'); + for (i = 1; i < labels.length; i++) { + var r = this.getNumericOption('highlightCircleSize', labels[i]); + if (r > maxCircleSize) maxCircleSize = r; + } + var px = this.previousVerticalX_; + ctx.clearRect(px - maxCircleSize - 1, 0, + 2 * maxCircleSize + 2, this.height_); + } + + if (this.isUsingExcanvas_ && this.currentZoomRectArgs_) { + Dygraph.prototype.drawZoomRect_.apply(this, this.currentZoomRectArgs_); + } + + if (this.selPoints_.length > 0) { + // Draw colored circles over the center of each selected point + var canvasx = this.selPoints_[0].canvasx; + ctx.save(); + for (i = 0; i < this.selPoints_.length; i++) { + var pt = this.selPoints_[i]; + if (!Dygraph.isOK(pt.canvasy)) continue; + + var circleSize = this.getNumericOption('highlightCircleSize', pt.name); + var callback = this.getFunctionOption("drawHighlightPointCallback", pt.name); + var color = this.plotter_.colors[pt.name]; + if (!callback) { + callback = Dygraph.Circles.DEFAULT; + } + ctx.lineWidth = this.getNumericOption('strokeWidth', pt.name); + ctx.strokeStyle = color; + ctx.fillStyle = color; + callback.call(this, this, pt.name, ctx, canvasx, pt.canvasy, + color, circleSize, pt.idx); + } + ctx.restore(); + + this.previousVerticalX_ = canvasx; + } +}; + +/** + * Manually set the selected points and display information about them in the + * legend. The selection can be cleared using clearSelection() and queried + * using getSelection(). + * @param {number} row Row number that should be highlighted (i.e. appear with + * hover dots on the chart). + * @param {seriesName} optional series name to highlight that series with the + * the highlightSeriesOpts setting. + * @param { locked } optional If true, keep seriesName selected when mousing + * over the graph, disabling closest-series highlighting. Call clearSelection() + * to unlock it. + */ +Dygraph.prototype.setSelection = function(row, opt_seriesName, opt_locked) { + // Extract the points we've selected + this.selPoints_ = []; + + var changed = false; + if (row !== false && row >= 0) { + if (row != this.lastRow_) changed = true; + this.lastRow_ = row; + for (var setIdx = 0; setIdx < this.layout_.points.length; ++setIdx) { + var points = this.layout_.points[setIdx]; + // Check if the point at the appropriate index is the point we're looking + // for. If it is, just use it, otherwise search the array for a point + // in the proper place. + var setRow = row - this.getLeftBoundary_(setIdx); + if (setRow < points.length && points[setRow].idx == row) { + var point = points[setRow]; + if (point.yval !== null) this.selPoints_.push(point); + } else { + for (var pointIdx = 0; pointIdx < points.length; ++pointIdx) { + var point = points[pointIdx]; + if (point.idx == row) { + if (point.yval !== null) { + this.selPoints_.push(point); + } + break; + } + } + } + } + } else { + if (this.lastRow_ >= 0) changed = true; + this.lastRow_ = -1; + } + + if (this.selPoints_.length) { + this.lastx_ = this.selPoints_[0].xval; + } else { + this.lastx_ = -1; + } + + if (opt_seriesName !== undefined) { + if (this.highlightSet_ !== opt_seriesName) changed = true; + this.highlightSet_ = opt_seriesName; + } + + if (opt_locked !== undefined) { + this.lockedSet_ = opt_locked; + } + + if (changed) { + this.updateSelection_(undefined); + } + return changed; +}; + +/** + * The mouse has left the canvas. Clear out whatever artifacts remain + * @param {Object} event the mouseout event from the browser. + * @private + */ +Dygraph.prototype.mouseOut_ = function(event) { + if (this.getFunctionOption("unhighlightCallback")) { + this.getFunctionOption("unhighlightCallback").call(this, event); + } + + if (this.getBooleanOption("hideOverlayOnMouseOut") && !this.lockedSet_) { + this.clearSelection(); + } +}; + +/** + * Clears the current selection (i.e. points that were highlighted by moving + * the mouse over the chart). + */ +Dygraph.prototype.clearSelection = function() { + this.cascadeEvents_('deselect', {}); + + this.lockedSet_ = false; + // Get rid of the overlay data + if (this.fadeLevel) { + this.animateSelection_(-1); + return; + } + this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_); + this.fadeLevel = 0; + this.selPoints_ = []; + this.lastx_ = -1; + this.lastRow_ = -1; + this.highlightSet_ = null; +}; + +/** + * Returns the number of the currently selected row. To get data for this row, + * you can use the getValue method. + * @return {number} row number, or -1 if nothing is selected + */ +Dygraph.prototype.getSelection = function() { + if (!this.selPoints_ || this.selPoints_.length < 1) { + return -1; + } + + for (var setIdx = 0; setIdx < this.layout_.points.length; setIdx++) { + var points = this.layout_.points[setIdx]; + for (var row = 0; row < points.length; row++) { + if (points[row].x == this.selPoints_[0].x) { + return points[row].idx; + } + } + } + return -1; +}; + +/** + * Returns the name of the currently-highlighted series. + * Only available when the highlightSeriesOpts option is in use. + */ +Dygraph.prototype.getHighlightSeries = function() { + return this.highlightSet_; +}; + +/** + * Returns true if the currently-highlighted series was locked + * via setSelection(..., seriesName, true). + */ +Dygraph.prototype.isSeriesLocked = function() { + return this.lockedSet_; +}; + +/** + * Fires when there's data available to be graphed. + * @param {string} data Raw CSV data to be plotted + * @private + */ +Dygraph.prototype.loadedEvent_ = function(data) { + this.rawData_ = this.parseCSV_(data); + this.cascadeDataDidUpdateEvent_(); + this.predraw_(); +}; + +/** + * Add ticks on the x-axis representing years, months, quarters, weeks, or days + * @private + */ +Dygraph.prototype.addXTicks_ = function() { + // Determine the correct ticks scale on the x-axis: quarterly, monthly, ... + var range; + if (this.dateWindow_) { + range = [this.dateWindow_[0], this.dateWindow_[1]]; + } else { + range = this.xAxisExtremes(); + } + + var xAxisOptionsView = this.optionsViewForAxis_('x'); + var xTicks = xAxisOptionsView('ticker')( + range[0], + range[1], + this.plotter_.area.w, // TODO(danvk): should be area.width + xAxisOptionsView, + this); + // var msg = 'ticker(' + range[0] + ', ' + range[1] + ', ' + this.width_ + ', ' + this.attr_('pixelsPerXLabel') + ') -> ' + JSON.stringify(xTicks); + // console.log(msg); + this.layout_.setXTicks(xTicks); +}; + +/** + * Returns the correct handler class for the currently set options. + * @private + */ +Dygraph.prototype.getHandlerClass_ = function() { + var handlerClass; + if (this.attr_('dataHandler')) { + handlerClass = this.attr_('dataHandler'); + } else if (this.fractions_) { + if (this.getBooleanOption('errorBars')) { + handlerClass = Dygraph.DataHandlers.FractionsBarsHandler; + } else { + handlerClass = Dygraph.DataHandlers.DefaultFractionHandler; + } + } else if (this.getBooleanOption('customBars')) { + handlerClass = Dygraph.DataHandlers.CustomBarsHandler; + } else if (this.getBooleanOption('errorBars')) { + handlerClass = Dygraph.DataHandlers.ErrorBarsHandler; + } else { + handlerClass = Dygraph.DataHandlers.DefaultHandler; + } + return handlerClass; +}; + +/** + * @private + * This function is called once when the chart's data is changed or the options + * dictionary is updated. It is _not_ called when the user pans or zooms. The + * idea is that values derived from the chart's data can be computed here, + * rather than every time the chart is drawn. This includes things like the + * number of axes, rolling averages, etc. + */ +Dygraph.prototype.predraw_ = function() { + var start = new Date(); + + // Create the correct dataHandler + this.dataHandler_ = new (this.getHandlerClass_())(); + + this.layout_.computePlotArea(); + + // TODO(danvk): move more computations out of drawGraph_ and into here. + this.computeYAxes_(); + + if (!this.is_initial_draw_) { + this.canvas_ctx_.restore(); + this.hidden_ctx_.restore(); + } + + this.canvas_ctx_.save(); + this.hidden_ctx_.save(); + + // Create a new plotter. + this.plotter_ = new DygraphCanvasRenderer(this, + this.hidden_, + this.hidden_ctx_, + this.layout_); + + // The roller sits in the bottom left corner of the chart. We don't know where + // this will be until the options are available, so it's positioned here. + this.createRollInterface_(); + + this.cascadeEvents_('predraw'); + + // Convert the raw data (a 2D array) into the internal format and compute + // rolling averages. + this.rolledSeries_ = [null]; // x-axis is the first series and it's special + for (var i = 1; i < this.numColumns(); i++) { + // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too. + var series = this.dataHandler_.extractSeries(this.rawData_, i, this.attributes_); + if (this.rollPeriod_ > 1) { + series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_); + } + + this.rolledSeries_.push(series); + } + + // If the data or options have changed, then we'd better redraw. + this.drawGraph_(); + + // This is used to determine whether to do various animations. + var end = new Date(); + this.drawingTimeMs_ = (end - start); +}; + +/** + * Point structure. + * + * xval_* and yval_* are the original unscaled data values, + * while x_* and y_* are scaled to the range (0.0-1.0) for plotting. + * yval_stacked is the cumulative Y value used for stacking graphs, + * and bottom/top/minus/plus are used for error bar graphs. + * + * @typedef {{ + * idx: number, + * name: string, + * x: ?number, + * xval: ?number, + * y_bottom: ?number, + * y: ?number, + * y_stacked: ?number, + * y_top: ?number, + * yval_minus: ?number, + * yval: ?number, + * yval_plus: ?number, + * yval_stacked + * }} + */ +Dygraph.PointType = undefined; + +/** + * Calculates point stacking for stackedGraph=true. + * + * For stacking purposes, interpolate or extend neighboring data across + * NaN values based on stackedGraphNaNFill settings. This is for display + * only, the underlying data value as shown in the legend remains NaN. + * + * @param {Array.<Dygraph.PointType>} points Point array for a single series. + * Updates each Point's yval_stacked property. + * @param {Array.<number>} cumulativeYval Accumulated top-of-graph stacked Y + * values for the series seen so far. Index is the row number. Updated + * based on the current series's values. + * @param {Array.<number>} seriesExtremes Min and max values, updated + * to reflect the stacked values. + * @param {string} fillMethod Interpolation method, one of 'all', 'inside', or + * 'none'. + * @private + */ +Dygraph.stackPoints_ = function( + points, cumulativeYval, seriesExtremes, fillMethod) { + var lastXval = null; + var prevPoint = null; + var nextPoint = null; + var nextPointIdx = -1; + + // Find the next stackable point starting from the given index. + var updateNextPoint = function(idx) { + // If we've previously found a non-NaN point and haven't gone past it yet, + // just use that. + if (nextPointIdx >= idx) return; + + // We haven't found a non-NaN point yet or have moved past it, + // look towards the right to find a non-NaN point. + for (var j = idx; j < points.length; ++j) { + // Clear out a previously-found point (if any) since it's no longer + // valid, we shouldn't use it for interpolation anymore. + nextPoint = null; + if (!isNaN(points[j].yval) && points[j].yval !== null) { + nextPointIdx = j; + nextPoint = points[j]; + break; + } + } + }; + + for (var i = 0; i < points.length; ++i) { + var point = points[i]; + var xval = point.xval; + if (cumulativeYval[xval] === undefined) { + cumulativeYval[xval] = 0; + } + + var actualYval = point.yval; + if (isNaN(actualYval) || actualYval === null) { + if(fillMethod == 'none') { + actualYval = 0; + } else { + // Interpolate/extend for stacking purposes if possible. + updateNextPoint(i); + if (prevPoint && nextPoint && fillMethod != 'none') { + // Use linear interpolation between prevPoint and nextPoint. + actualYval = prevPoint.yval + (nextPoint.yval - prevPoint.yval) * + ((xval - prevPoint.xval) / (nextPoint.xval - prevPoint.xval)); + } else if (prevPoint && fillMethod == 'all') { + actualYval = prevPoint.yval; + } else if (nextPoint && fillMethod == 'all') { + actualYval = nextPoint.yval; + } else { + actualYval = 0; + } + } + } else { + prevPoint = point; + } + + var stackedYval = cumulativeYval[xval]; + if (lastXval != xval) { + // If an x-value is repeated, we ignore the duplicates. + stackedYval += actualYval; + cumulativeYval[xval] = stackedYval; + } + lastXval = xval; + + point.yval_stacked = stackedYval; + + if (stackedYval > seriesExtremes[1]) { + seriesExtremes[1] = stackedYval; + } + if (stackedYval < seriesExtremes[0]) { + seriesExtremes[0] = stackedYval; + } + } +}; + + +/** + * Loop over all fields and create datasets, calculating extreme y-values for + * each series and extreme x-indices as we go. + * + * dateWindow is passed in as an explicit parameter so that we can compute + * extreme values "speculatively", i.e. without actually setting state on the + * dygraph. + * + * @param {Array.<Array.<Array.<(number|Array<number>)>>} rolledSeries, where + * rolledSeries[seriesIndex][row] = raw point, where + * seriesIndex is the column number starting with 1, and + * rawPoint is [x,y] or [x, [y, err]] or [x, [y, yminus, yplus]]. + * @param {?Array.<number>} dateWindow [xmin, xmax] pair, or null. + * @return {{ + * points: Array.<Array.<Dygraph.PointType>>, + * seriesExtremes: Array.<Array.<number>>, + * boundaryIds: Array.<number>}} + * @private + */ +Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { + var boundaryIds = []; + var points = []; + var cumulativeYval = []; // For stacked series. + var extremes = {}; // series name -> [low, high] + var seriesIdx, sampleIdx; + var firstIdx, lastIdx; + var axisIdx; + + // Loop over the fields (series). Go from the last to the first, + // because if they're stacked that's how we accumulate the values. + var num_series = rolledSeries.length - 1; + var series; + for (seriesIdx = num_series; seriesIdx >= 1; seriesIdx--) { + if (!this.visibility()[seriesIdx - 1]) continue; + + // Prune down to the desired range, if necessary (for zooming) + // Because there can be lines going to points outside of the visible area, + // we actually prune to visible points, plus one on either side. + if (dateWindow) { + series = rolledSeries[seriesIdx]; + var low = dateWindow[0]; + var high = dateWindow[1]; + + // TODO(danvk): do binary search instead of linear search. + // TODO(danvk): pass firstIdx and lastIdx directly to the renderer. + firstIdx = null; + lastIdx = null; + for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) { + if (series[sampleIdx][0] >= low && firstIdx === null) { + firstIdx = sampleIdx; + } + if (series[sampleIdx][0] <= high) { + lastIdx = sampleIdx; + } + } + + if (firstIdx === null) firstIdx = 0; + var correctedFirstIdx = firstIdx; + var isInvalidValue = true; + while (isInvalidValue && correctedFirstIdx > 0) { + correctedFirstIdx--; + // check if the y value is null. + isInvalidValue = series[correctedFirstIdx][1] === null; + } + + if (lastIdx === null) lastIdx = series.length - 1; + var correctedLastIdx = lastIdx; + isInvalidValue = true; + while (isInvalidValue && correctedLastIdx < series.length - 1) { + correctedLastIdx++; + isInvalidValue = series[correctedLastIdx][1] === null; + } + + if (correctedFirstIdx!==firstIdx) { + firstIdx = correctedFirstIdx; + } + if (correctedLastIdx !== lastIdx) { + lastIdx = correctedLastIdx; + } + + boundaryIds[seriesIdx-1] = [firstIdx, lastIdx]; + + // .slice's end is exclusive, we want to include lastIdx. + series = series.slice(firstIdx, lastIdx + 1); + } else { + series = rolledSeries[seriesIdx]; + boundaryIds[seriesIdx-1] = [0, series.length-1]; + } + + var seriesName = this.attr_("labels")[seriesIdx]; + var seriesExtremes = this.dataHandler_.getExtremeYValues(series, + dateWindow, this.getBooleanOption("stepPlot",seriesName)); + + var seriesPoints = this.dataHandler_.seriesToPoints(series, + seriesName, boundaryIds[seriesIdx-1][0]); + + if (this.getBooleanOption("stackedGraph")) { + axisIdx = this.attributes_.axisForSeries(seriesName); + if (cumulativeYval[axisIdx] === undefined) { + cumulativeYval[axisIdx] = []; + } + Dygraph.stackPoints_(seriesPoints, cumulativeYval[axisIdx], seriesExtremes, + this.getBooleanOption("stackedGraphNaNFill")); + } + + extremes[seriesName] = seriesExtremes; + points[seriesIdx] = seriesPoints; + } + + return { points: points, extremes: extremes, boundaryIds: boundaryIds }; +}; + +/** + * Update the graph with new data. This method is called when the viewing area + * has changed. If the underlying data or options have changed, predraw_ will + * be called before drawGraph_ is called. + * + * @private + */ +Dygraph.prototype.drawGraph_ = function() { + var start = new Date(); + + // This is used to set the second parameter to drawCallback, below. + var is_initial_draw = this.is_initial_draw_; + this.is_initial_draw_ = false; + + this.layout_.removeAllDatasets(); + this.setColors_(); + this.attrs_.pointSize = 0.5 * this.getNumericOption('highlightCircleSize'); + + var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_); + var points = packed.points; + var extremes = packed.extremes; + this.boundaryIds_ = packed.boundaryIds; + + this.setIndexByName_ = {}; + var labels = this.attr_("labels"); + if (labels.length > 0) { + this.setIndexByName_[labels[0]] = 0; + } + var dataIdx = 0; + for (var i = 1; i < points.length; i++) { + this.setIndexByName_[labels[i]] = i; + if (!this.visibility()[i - 1]) continue; + this.layout_.addDataset(labels[i], points[i]); + this.datasetIndex_[i] = dataIdx++; + } + + this.computeYAxisRanges_(extremes); + this.layout_.setYAxes(this.axes_); + + this.addXTicks_(); + + // Save the X axis zoomed status as the updateOptions call will tend to set it erroneously + var tmp_zoomed_x = this.zoomed_x_; + // Tell PlotKit to use this new data and render itself + this.zoomed_x_ = tmp_zoomed_x; + this.layout_.evaluate(); + this.renderGraph_(is_initial_draw); + + if (this.getStringOption("timingName")) { + var end = new Date(); + console.log(this.getStringOption("timingName") + " - drawGraph: " + (end - start) + "ms"); + } +}; + +/** + * This does the work of drawing the chart. It assumes that the layout and axis + * scales have already been set (e.g. by predraw_). + * + * @private + */ +Dygraph.prototype.renderGraph_ = function(is_initial_draw) { + this.cascadeEvents_('clearChart'); + this.plotter_.clear(); + + if (this.getFunctionOption('underlayCallback')) { + // NOTE: we pass the dygraph object to this callback twice to avoid breaking + // users who expect a deprecated form of this callback. + this.getFunctionOption('underlayCallback').call(this, + this.hidden_ctx_, this.layout_.getPlotArea(), this, this); + } + + var e = { + canvas: this.hidden_, + drawingContext: this.hidden_ctx_ + }; + this.cascadeEvents_('willDrawChart', e); + this.plotter_.render(); + this.cascadeEvents_('didDrawChart', e); + this.lastRow_ = -1; // because plugins/legend.js clears the legend + + // TODO(danvk): is this a performance bottleneck when panning? + // The interaction canvas should already be empty in that situation. + this.canvas_.getContext('2d').clearRect(0, 0, this.width_, this.height_); + + if (this.getFunctionOption("drawCallback") !== null) { + this.getFunctionOption("drawCallback")(this, is_initial_draw); + } + if (is_initial_draw) { + this.readyFired_ = true; + while (this.readyFns_.length > 0) { + var fn = this.readyFns_.pop(); + fn(this); + } + } +}; + +/** + * @private + * Determine properties of the y-axes which are independent of the data + * currently being displayed. This includes things like the number of axes and + * the style of the axes. It does not include the range of each axis and its + * tick marks. + * This fills in this.axes_. + * axes_ = [ { options } ] + * indices are into the axes_ array. + */ +Dygraph.prototype.computeYAxes_ = function() { + // Preserve valueWindow settings if they exist, and if the user hasn't + // specified a new valueRange. + var valueWindows, axis, index, opts, v; + if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) { + valueWindows = []; + for (index = 0; index < this.axes_.length; index++) { + valueWindows.push(this.axes_[index].valueWindow); + } + } + + // this.axes_ doesn't match this.attributes_.axes_.options. It's used for + // data computation as well as options storage. + // Go through once and add all the axes. + this.axes_ = []; + + for (axis = 0; axis < this.attributes_.numAxes(); axis++) { + // Add a new axis, making a copy of its per-axis options. + opts = { g : this }; + Dygraph.update(opts, this.attributes_.axisOptions(axis)); + this.axes_[axis] = opts; + } + + + // Copy global valueRange option over to the first axis. + // NOTE(konigsberg): Are these two statements necessary? + // I tried removing it. The automated tests pass, and manually + // messing with tests/zoom.html showed no trouble. + v = this.attr_('valueRange'); + if (v) this.axes_[0].valueRange = v; + + if (valueWindows !== undefined) { + // Restore valueWindow settings. + + // When going from two axes back to one, we only restore + // one axis. + var idxCount = Math.min(valueWindows.length, this.axes_.length); + + for (index = 0; index < idxCount; index++) { + this.axes_[index].valueWindow = valueWindows[index]; + } + } + + for (axis = 0; axis < this.axes_.length; axis++) { + if (axis === 0) { + opts = this.optionsViewForAxis_('y' + (axis ? '2' : '')); + v = opts("valueRange"); + if (v) this.axes_[axis].valueRange = v; + } else { // To keep old behavior + var axes = this.user_attrs_.axes; + if (axes && axes.y2) { + v = axes.y2.valueRange; + if (v) this.axes_[axis].valueRange = v; + } + } + } +}; + +/** + * Returns the number of y-axes on the chart. + * @return {number} the number of axes. + */ +Dygraph.prototype.numAxes = function() { + return this.attributes_.numAxes(); +}; + +/** + * @private + * Returns axis properties for the given series. + * @param {string} setName The name of the series for which to get axis + * properties, e.g. 'Y1'. + * @return {Object} The axis properties. + */ +Dygraph.prototype.axisPropertiesForSeries = function(series) { + // TODO(danvk): handle errors. + return this.axes_[this.attributes_.axisForSeries(series)]; +}; + +/** + * @private + * Determine the value range and tick marks for each axis. + * @param {Object} extremes A mapping from seriesName -> [low, high] + * This fills in the valueRange and ticks fields in each entry of this.axes_. + */ +Dygraph.prototype.computeYAxisRanges_ = function(extremes) { + var isNullUndefinedOrNaN = function(num) { + return isNaN(parseFloat(num)); + }; + var numAxes = this.attributes_.numAxes(); + var ypadCompat, span, series, ypad; + + var p_axis; + + // Compute extreme values, a span and tick marks for each axis. + for (var i = 0; i < numAxes; i++) { + var axis = this.axes_[i]; + var logscale = this.attributes_.getForAxis("logscale", i); + var includeZero = this.attributes_.getForAxis("includeZero", i); + var independentTicks = this.attributes_.getForAxis("independentTicks", i); + series = this.attributes_.seriesForAxis(i); + + // Add some padding. This supports two Y padding operation modes: + // + // - backwards compatible (yRangePad not set): + // 10% padding for automatic Y ranges, but not for user-supplied + // ranges, and move a close-to-zero edge to zero except if + // avoidMinZero is set, since drawing at the edge results in + // invisible lines. Unfortunately lines drawn at the edge of a + // user-supplied range will still be invisible. If logscale is + // set, add a variable amount of padding at the top but + // none at the bottom. + // + // - new-style (yRangePad set by the user): + // always add the specified Y padding. + // + ypadCompat = true; + ypad = 0.1; // add 10% + if (this.getNumericOption('yRangePad') !== null) { + ypadCompat = false; + // Convert pixel padding to ratio + ypad = this.getNumericOption('yRangePad') / this.plotter_.area.h; + } + + if (series.length === 0) { + // If no series are defined or visible then use a reasonable default + axis.extremeRange = [0, 1]; + } else { + // Calculate the extremes of extremes. + var minY = Infinity; // extremes[series[0]][0]; + var maxY = -Infinity; // extremes[series[0]][1]; + var extremeMinY, extremeMaxY; + + for (var j = 0; j < series.length; j++) { + // this skips invisible series + if (!extremes.hasOwnProperty(series[j])) continue; + + // Only use valid extremes to stop null data series' from corrupting the scale. + extremeMinY = extremes[series[j]][0]; + if (extremeMinY !== null) { + minY = Math.min(extremeMinY, minY); + } + extremeMaxY = extremes[series[j]][1]; + if (extremeMaxY !== null) { + maxY = Math.max(extremeMaxY, maxY); + } + } + + // Include zero if requested by the user. + if (includeZero && !logscale) { + if (minY > 0) minY = 0; + if (maxY < 0) maxY = 0; + } + + // Ensure we have a valid scale, otherwise default to [0, 1] for safety. + if (minY == Infinity) minY = 0; + if (maxY == -Infinity) maxY = 1; + + span = maxY - minY; + // special case: if we have no sense of scale, center on the sole value. + if (span === 0) { + if (maxY !== 0) { + span = Math.abs(maxY); + } else { + // ... and if the sole value is zero, use range 0-1. + maxY = 1; + span = 1; + } + } + + var maxAxisY, minAxisY; + if (logscale) { + if (ypadCompat) { + maxAxisY = maxY + ypad * span; + minAxisY = minY; + } else { + var logpad = Math.exp(Math.log(span) * ypad); + maxAxisY = maxY * logpad; + minAxisY = minY / logpad; + } + } else { + maxAxisY = maxY + ypad * span; + minAxisY = minY - ypad * span; + + // Backwards-compatible behavior: Move the span to start or end at zero if it's + // close to zero, but not if avoidMinZero is set. + if (ypadCompat && !this.getBooleanOption("avoidMinZero")) { + if (minAxisY < 0 && minY >= 0) minAxisY = 0; + if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0; + } + } + axis.extremeRange = [minAxisY, maxAxisY]; + } + if (axis.valueWindow) { + // This is only set if the user has zoomed on the y-axis. It is never set + // by a user. It takes precedence over axis.valueRange because, if you set + // valueRange, you'd still expect to be able to pan. + axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]]; + } else if (axis.valueRange) { + // This is a user-set value range for this axis. + var y0 = isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0]; + var y1 = isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1]; + if (!ypadCompat) { + if (axis.logscale) { + var logpad = Math.exp(Math.log(span) * ypad); + y0 *= logpad; + y1 /= logpad; + } else { + span = y1 - y0; + y0 -= span * ypad; + y1 += span * ypad; + } + } + axis.computedValueRange = [y0, y1]; + } else { + axis.computedValueRange = axis.extremeRange; + } + + + if (independentTicks) { + axis.independentTicks = independentTicks; + var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); + var ticker = opts('ticker'); + axis.ticks = ticker(axis.computedValueRange[0], + axis.computedValueRange[1], + this.plotter_.area.h, + opts, + this); + // Define the first independent axis as primary axis. + if (!p_axis) p_axis = axis; + } + } + if (p_axis === undefined) { + throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated."); + } + // Add ticks. By default, all axes inherit the tick positions of the + // primary axis. However, if an axis is specifically marked as having + // independent ticks, then that is permissible as well. + for (var i = 0; i < numAxes; i++) { + var axis = this.axes_[i]; + + if (!axis.independentTicks) { + var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); + var ticker = opts('ticker'); + var p_ticks = p_axis.ticks; + var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0]; + var scale = axis.computedValueRange[1] - axis.computedValueRange[0]; + var tick_values = []; + for (var k = 0; k < p_ticks.length; k++) { + var y_frac = (p_ticks[k].v - p_axis.computedValueRange[0]) / p_scale; + var y_val = axis.computedValueRange[0] + y_frac * scale; + tick_values.push(y_val); + } + + axis.ticks = ticker(axis.computedValueRange[0], + axis.computedValueRange[1], + this.plotter_.area.h, + opts, + this, + tick_values); + } + } +}; + +/** + * Detects the type of the str (date or numeric) and sets the various + * formatting attributes in this.attrs_ based on this type. + * @param {string} str An x value. + * @private + */ +Dygraph.prototype.detectTypeFromString_ = function(str) { + var isDate = false; + var dashPos = str.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2 + if ((dashPos > 0 && (str[dashPos-1] != 'e' && str[dashPos-1] != 'E')) || + str.indexOf('/') >= 0 || + isNaN(parseFloat(str))) { + isDate = true; + } else if (str.length == 8 && str > '19700101' && str < '20371231') { + // TODO(danvk): remove support for this format. + isDate = true; + } + + this.setXAxisOptions_(isDate); +}; + +Dygraph.prototype.setXAxisOptions_ = function(isDate) { + if (isDate) { + this.attrs_.xValueParser = Dygraph.dateParser; + this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter; + this.attrs_.axes.x.ticker = Dygraph.dateTicker; + this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter; + } else { + /** @private (shut up, jsdoc!) */ + this.attrs_.xValueParser = function(x) { return parseFloat(x); }; + // TODO(danvk): use Dygraph.numberValueFormatter here? + /** @private (shut up, jsdoc!) */ + this.attrs_.axes.x.valueFormatter = function(x) { return x; }; + this.attrs_.axes.x.ticker = Dygraph.numericTicks; + this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter; + } +}; + +/** + * @private + * Parses a string in a special csv format. We expect a csv file where each + * line is a date point, and the first field in each line is the date string. + * We also expect that all remaining fields represent series. + * if the errorBars attribute is set, then interpret the fields as: + * date, series1, stddev1, series2, stddev2, ... + * @param {[Object]} data See above. + * + * @return [Object] An array with one entry for each row. These entries + * are an array of cells in that row. The first entry is the parsed x-value for + * the row. The second, third, etc. are the y-values. These can take on one of + * three forms, depending on the CSV and constructor parameters: + * 1. numeric value + * 2. [ value, stddev ] + * 3. [ low value, center value, high value ] + */ +Dygraph.prototype.parseCSV_ = function(data) { + var ret = []; + var line_delimiter = Dygraph.detectLineDelimiter(data); + var lines = data.split(line_delimiter || "\n"); + var vals, j; + + // Use the default delimiter or fall back to a tab if that makes sense. + var delim = this.getStringOption('delimiter'); + if (lines[0].indexOf(delim) == -1 && lines[0].indexOf('\t') >= 0) { + delim = '\t'; + } + + var start = 0; + if (!('labels' in this.user_attrs_)) { + // User hasn't explicitly set labels, so they're (presumably) in the CSV. + start = 1; + this.attrs_.labels = lines[0].split(delim); // NOTE: _not_ user_attrs_. + this.attributes_.reparseSeries(); + } + var line_no = 0; + + var xParser; + var defaultParserSet = false; // attempt to auto-detect x value type + var expectedCols = this.attr_("labels").length; + var outOfOrder = false; + for (var i = start; i < lines.length; i++) { + var line = lines[i]; + line_no = i; + if (line.length === 0) continue; // skip blank lines + if (line[0] == '#') continue; // skip comment lines + var inFields = line.split(delim); + if (inFields.length < 2) continue; + + var fields = []; + if (!defaultParserSet) { + this.detectTypeFromString_(inFields[0]); + xParser = this.getFunctionOption("xValueParser"); + defaultParserSet = true; + } + fields[0] = xParser(inFields[0], this); + + // If fractions are expected, parse the numbers as "A/B" + if (this.fractions_) { + for (j = 1; j < inFields.length; j++) { + // TODO(danvk): figure out an appropriate way to flag parse errors. + vals = inFields[j].split("/"); + if (vals.length != 2) { + console.error('Expected fractional "num/den" values in CSV data ' + + "but found a value '" + inFields[j] + "' on line " + + (1 + i) + " ('" + line + "') which is not of this form."); + fields[j] = [0, 0]; + } else { + fields[j] = [Dygraph.parseFloat_(vals[0], i, line), + Dygraph.parseFloat_(vals[1], i, line)]; + } + } + } else if (this.getBooleanOption("errorBars")) { + // If there are error bars, values are (value, stddev) pairs + if (inFields.length % 2 != 1) { + console.error('Expected alternating (value, stdev.) pairs in CSV data ' + + 'but line ' + (1 + i) + ' has an odd number of values (' + + (inFields.length - 1) + "): '" + line + "'"); + } + for (j = 1; j < inFields.length; j += 2) { + fields[(j + 1) / 2] = [Dygraph.parseFloat_(inFields[j], i, line), + Dygraph.parseFloat_(inFields[j + 1], i, line)]; + } + } else if (this.getBooleanOption("customBars")) { + // Bars are a low;center;high tuple + for (j = 1; j < inFields.length; j++) { + var val = inFields[j]; + if (/^ *$/.test(val)) { + fields[j] = [null, null, null]; + } else { + vals = val.split(";"); + if (vals.length == 3) { + fields[j] = [ Dygraph.parseFloat_(vals[0], i, line), + Dygraph.parseFloat_(vals[1], i, line), + Dygraph.parseFloat_(vals[2], i, line) ]; + } else { + console.warn('When using customBars, values must be either blank ' + + 'or "low;center;high" tuples (got "' + val + + '" on line ' + (1+i)); + } + } + } + } else { + // Values are just numbers + for (j = 1; j < inFields.length; j++) { + fields[j] = Dygraph.parseFloat_(inFields[j], i, line); + } + } + if (ret.length > 0 && fields[0] < ret[ret.length - 1][0]) { + outOfOrder = true; + } + + if (fields.length != expectedCols) { + console.error("Number of columns in line " + i + " (" + fields.length + + ") does not agree with number of labels (" + expectedCols + + ") " + line); + } + + // If the user specified the 'labels' option and none of the cells of the + // first row parsed correctly, then they probably double-specified the + // labels. We go with the values set in the option, discard this row and + // log a warning to the JS console. + if (i === 0 && this.attr_('labels')) { + var all_null = true; + for (j = 0; all_null && j < fields.length; j++) { + if (fields[j]) all_null = false; + } + if (all_null) { + console.warn("The dygraphs 'labels' option is set, but the first row " + + "of CSV data ('" + line + "') appears to also contain " + + "labels. Will drop the CSV labels and use the option " + + "labels."); + continue; + } + } + ret.push(fields); + } + + if (outOfOrder) { + console.warn("CSV is out of order; order it correctly to speed loading."); + ret.sort(function(a,b) { return a[0] - b[0]; }); + } + + return ret; +}; + +/** + * The user has provided their data as a pre-packaged JS array. If the x values + * are numeric, this is the same as dygraphs' internal format. If the x values + * are dates, we need to convert them from Date objects to ms since epoch. + * @param {!Array} data + * @return {Object} data with numeric x values. + * @private + */ +Dygraph.prototype.parseArray_ = function(data) { + // Peek at the first x value to see if it's numeric. + if (data.length === 0) { + console.error("Can't plot empty data set"); + return null; + } + if (data[0].length === 0) { + console.error("Data set cannot contain an empty row"); + return null; + } + + var i; + if (this.attr_("labels") === null) { + console.warn("Using default labels. Set labels explicitly via 'labels' " + + "in the options parameter"); + this.attrs_.labels = [ "X" ]; + for (i = 1; i < data[0].length; i++) { + this.attrs_.labels.push("Y" + i); // Not user_attrs_. + } + this.attributes_.reparseSeries(); + } else { + var num_labels = this.attr_("labels"); + if (num_labels.length != data[0].length) { + console.error("Mismatch between number of labels (" + num_labels + ")" + + " and number of columns in array (" + data[0].length + ")"); + return null; + } + } + + if (Dygraph.isDateLike(data[0][0])) { + // Some intelligent defaults for a date x-axis. + this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter; + this.attrs_.axes.x.ticker = Dygraph.dateTicker; + this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter; + + // Assume they're all dates. + var parsedData = Dygraph.clone(data); + for (i = 0; i < data.length; i++) { + if (parsedData[i].length === 0) { + console.error("Row " + (1 + i) + " of data is empty"); + return null; + } + if (parsedData[i][0] === null || + typeof(parsedData[i][0].getTime) != 'function' || + isNaN(parsedData[i][0].getTime())) { + console.error("x value in row " + (1 + i) + " is not a Date"); + return null; + } + parsedData[i][0] = parsedData[i][0].getTime(); + } + return parsedData; + } else { + // Some intelligent defaults for a numeric x-axis. + /** @private (shut up, jsdoc!) */ + this.attrs_.axes.x.valueFormatter = function(x) { return x; }; + this.attrs_.axes.x.ticker = Dygraph.numericTicks; + this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter; + return data; + } +}; + +/** + * Parses a DataTable object from gviz. + * The data is expected to have a first column that is either a date or a + * number. All subsequent columns must be numbers. If there is a clear mismatch + * between this.xValueParser_ and the type of the first column, it will be + * fixed. Fills out rawData_. + * @param {!google.visualization.DataTable} data See above. + * @private + */ +Dygraph.prototype.parseDataTable_ = function(data) { + var shortTextForAnnotationNum = function(num) { + // converts [0-9]+ [A-Z][a-z]* + // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab + // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz + var shortText = String.fromCharCode(65 /* A */ + num % 26); + num = Math.floor(num / 26); + while ( num > 0 ) { + shortText = String.fromCharCode(65 /* A */ + (num - 1) % 26 ) + shortText.toLowerCase(); + num = Math.floor((num - 1) / 26); + } + return shortText; + }; + + var cols = data.getNumberOfColumns(); + var rows = data.getNumberOfRows(); + + var indepType = data.getColumnType(0); + if (indepType == 'date' || indepType == 'datetime') { + this.attrs_.xValueParser = Dygraph.dateParser; + this.attrs_.axes.x.valueFormatter = Dygraph.dateValueFormatter; + this.attrs_.axes.x.ticker = Dygraph.dateTicker; + this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisLabelFormatter; + } else if (indepType == 'number') { + this.attrs_.xValueParser = function(x) { return parseFloat(x); }; + this.attrs_.axes.x.valueFormatter = function(x) { return x; }; + this.attrs_.axes.x.ticker = Dygraph.numericTicks; + this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter; + } else { + console.error("only 'date', 'datetime' and 'number' types are supported " + + "for column 1 of DataTable input (Got '" + indepType + "')"); + return null; + } + + // Array of the column indices which contain data (and not annotations). + var colIdx = []; + var annotationCols = {}; // data index -> [annotation cols] + var hasAnnotations = false; + var i, j; + for (i = 1; i < cols; i++) { + var type = data.getColumnType(i); + if (type == 'number') { + colIdx.push(i); + } else if (type == 'string' && this.getBooleanOption('displayAnnotations')) { + // This is OK -- it's an annotation column. + var dataIdx = colIdx[colIdx.length - 1]; + if (!annotationCols.hasOwnProperty(dataIdx)) { + annotationCols[dataIdx] = [i]; + } else { + annotationCols[dataIdx].push(i); + } + hasAnnotations = true; + } else { + console.error("Only 'number' is supported as a dependent type with Gviz." + + " 'string' is only supported if displayAnnotations is true"); + } + } + + // Read column labels + // TODO(danvk): add support back for errorBars + var labels = [data.getColumnLabel(0)]; + for (i = 0; i < colIdx.length; i++) { + labels.push(data.getColumnLabel(colIdx[i])); + if (this.getBooleanOption("errorBars")) i += 1; + } + this.attrs_.labels = labels; + cols = labels.length; + + var ret = []; + var outOfOrder = false; + var annotations = []; + for (i = 0; i < rows; i++) { + var row = []; + if (typeof(data.getValue(i, 0)) === 'undefined' || + data.getValue(i, 0) === null) { + console.warn("Ignoring row " + i + + " of DataTable because of undefined or null first column."); + continue; + } + + if (indepType == 'date' || indepType == 'datetime') { + row.push(data.getValue(i, 0).getTime()); + } else { + row.push(data.getValue(i, 0)); + } + if (!this.getBooleanOption("errorBars")) { + for (j = 0; j < colIdx.length; j++) { + var col = colIdx[j]; + row.push(data.getValue(i, col)); + if (hasAnnotations && + annotationCols.hasOwnProperty(col) && + data.getValue(i, annotationCols[col][0]) !== null) { + var ann = {}; + ann.series = data.getColumnLabel(col); + ann.xval = row[0]; + ann.shortText = shortTextForAnnotationNum(annotations.length); + ann.text = ''; + for (var k = 0; k < annotationCols[col].length; k++) { + if (k) ann.text += "\n"; + ann.text += data.getValue(i, annotationCols[col][k]); + } + annotations.push(ann); + } + } + + // Strip out infinities, which give dygraphs problems later on. + for (j = 0; j < row.length; j++) { + if (!isFinite(row[j])) row[j] = null; + } + } else { + for (j = 0; j < cols - 1; j++) { + row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]); + } + } + if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) { + outOfOrder = true; + } + ret.push(row); + } + + if (outOfOrder) { + console.warn("DataTable is out of order; order it correctly to speed loading."); + ret.sort(function(a,b) { return a[0] - b[0]; }); + } + this.rawData_ = ret; + + if (annotations.length > 0) { + this.setAnnotations(annotations, true); + } + this.attributes_.reparseSeries(); +}; + +/** + * Signals to plugins that the chart data has updated. + * This happens after the data has updated but before the chart has redrawn. + */ +Dygraph.prototype.cascadeDataDidUpdateEvent_ = function() { + // TODO(danvk): there are some issues checking xAxisRange() and using + // toDomCoords from handlers of this event. The visible range should be set + // when the chart is drawn, not derived from the data. + this.cascadeEvents_('dataDidUpdate', {}); +}; + +/** + * Get the CSV data. If it's in a function, call that function. If it's in a + * file, do an XMLHttpRequest to get it. + * @private + */ +Dygraph.prototype.start_ = function() { + var data = this.file_; + + // Functions can return references of all other types. + if (typeof data == 'function') { + data = data(); + } + + if (Dygraph.isArrayLike(data)) { + this.rawData_ = this.parseArray_(data); + this.cascadeDataDidUpdateEvent_(); + this.predraw_(); + } else if (typeof data == 'object' && + typeof data.getColumnRange == 'function') { + // must be a DataTable from gviz. + this.parseDataTable_(data); + this.cascadeDataDidUpdateEvent_(); + this.predraw_(); + } else if (typeof data == 'string') { + // Heuristic: a newline means it's CSV data. Otherwise it's an URL. + var line_delimiter = Dygraph.detectLineDelimiter(data); + if (line_delimiter) { + this.loadedEvent_(data); + } else { + // REMOVE_FOR_IE + var req; + if (window.XMLHttpRequest) { + // Firefox, Opera, IE7, and other browsers will use the native object + req = new XMLHttpRequest(); + } else { + // IE 5 and 6 will use the ActiveX control + req = new ActiveXObject("Microsoft.XMLHTTP"); + } + + var caller = this; + req.onreadystatechange = function () { + if (req.readyState == 4) { + if (req.status === 200 || // Normal http + req.status === 0) { // Chrome w/ --allow-file-access-from-files + caller.loadedEvent_(req.responseText); + } + } + }; + + req.open("GET", data, true); + req.send(null); + } + } else { + console.error("Unknown data format: " + (typeof data)); + } +}; + +/** + * Changes various properties of the graph. These can include: + * <ul> + * <li>file: changes the source data for the graph</li> + * <li>errorBars: changes whether the data contains stddev</li> + * </ul> + * + * There's a huge variety of options that can be passed to this method. For a + * full list, see http://dygraphs.com/options.html. + * + * @param {Object} input_attrs The new properties and values + * @param {boolean} block_redraw Usually the chart is redrawn after every + * call to updateOptions(). If you know better, you can pass true to + * explicitly block the redraw. This can be useful for chaining + * updateOptions() calls, avoiding the occasional infinite loop and + * preventing redraws when it's not necessary (e.g. when updating a + * callback). + */ +Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) { + if (typeof(block_redraw) == 'undefined') block_redraw = false; + + // mapLegacyOptions_ drops the "file" parameter as a convenience to us. + var file = input_attrs.file; + var attrs = Dygraph.mapLegacyOptions_(input_attrs); + + // TODO(danvk): this is a mess. Move these options into attr_. + if ('rollPeriod' in attrs) { + this.rollPeriod_ = attrs.rollPeriod; + } + if ('dateWindow' in attrs) { + this.dateWindow_ = attrs.dateWindow; + if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) { + this.zoomed_x_ = (attrs.dateWindow !== null); + } + } + if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) { + this.zoomed_y_ = (attrs.valueRange !== null); + } + + // TODO(danvk): validate per-series options. + // Supported: + // strokeWidth + // pointSize + // drawPoints + // highlightCircleSize + + // Check if this set options will require new points. + var requiresNewPoints = Dygraph.isPixelChangingOptionList(this.attr_("labels"), attrs); + + Dygraph.updateDeep(this.user_attrs_, attrs); + + this.attributes_.reparseSeries(); + + if (file) { + // This event indicates that the data is about to change, but hasn't yet. + // TODO(danvk): support cancelation of the update via this event. + this.cascadeEvents_('dataWillUpdate', {}); + + this.file_ = file; + if (!block_redraw) this.start_(); + } else { + if (!block_redraw) { + if (requiresNewPoints) { + this.predraw_(); + } else { + this.renderGraph_(false); + } + } + } +}; + +/** + * Returns a copy of the options with deprecated names converted into current + * names. Also drops the (potentially-large) 'file' attribute. If the caller is + * interested in that, they should save a copy before calling this. + * @private + */ +Dygraph.mapLegacyOptions_ = function(attrs) { + var my_attrs = {}; + for (var k in attrs) { + if (!attrs.hasOwnProperty(k)) continue; + if (k == 'file') continue; + if (attrs.hasOwnProperty(k)) my_attrs[k] = attrs[k]; + } + + var set = function(axis, opt, value) { + if (!my_attrs.axes) my_attrs.axes = {}; + if (!my_attrs.axes[axis]) my_attrs.axes[axis] = {}; + my_attrs.axes[axis][opt] = value; + }; + var map = function(opt, axis, new_opt) { + if (typeof(attrs[opt]) != 'undefined') { + console.warn("Option " + opt + " is deprecated. Use the " + + new_opt + " option for the " + axis + " axis instead. " + + "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } } " + + "(see http://dygraphs.com/per-axis.html for more information."); + set(axis, new_opt, attrs[opt]); + delete my_attrs[opt]; + } + }; + + // This maps, e.g., xValueFormater -> axes: { x: { valueFormatter: ... } } + map('xValueFormatter', 'x', 'valueFormatter'); + map('pixelsPerXLabel', 'x', 'pixelsPerLabel'); + map('xAxisLabelFormatter', 'x', 'axisLabelFormatter'); + map('xTicker', 'x', 'ticker'); + map('yValueFormatter', 'y', 'valueFormatter'); + map('pixelsPerYLabel', 'y', 'pixelsPerLabel'); + map('yAxisLabelFormatter', 'y', 'axisLabelFormatter'); + map('yTicker', 'y', 'ticker'); + map('drawXGrid', 'x', 'drawGrid'); + map('drawXAxis', 'x', 'drawAxis'); + map('drawYGrid', 'y', 'drawGrid'); + map('drawYAxis', 'y', 'drawAxis'); + map('xAxisLabelWidth', 'x', 'axisLabelWidth'); + map('yAxisLabelWidth', 'y', 'axisLabelWidth'); + return my_attrs; +}; + +/** + * Resizes the dygraph. If no parameters are specified, resizes to fill the + * containing div (which has presumably changed size since the dygraph was + * instantiated. If the width/height are specified, the div will be resized. + * + * This is far more efficient than destroying and re-instantiating a + * Dygraph, since it doesn't have to reparse the underlying data. + * + * @param {number} width Width (in pixels) + * @param {number} height Height (in pixels) + */ +Dygraph.prototype.resize = function(width, height) { + if (this.resize_lock) { + return; + } + this.resize_lock = true; + + if ((width === null) != (height === null)) { + console.warn("Dygraph.resize() should be called with zero parameters or " + + "two non-NULL parameters. Pretending it was zero."); + width = height = null; + } + + var old_width = this.width_; + var old_height = this.height_; + + if (width) { + this.maindiv_.style.width = width + "px"; + this.maindiv_.style.height = height + "px"; + this.width_ = width; + this.height_ = height; + } else { + this.width_ = this.maindiv_.clientWidth; + this.height_ = this.maindiv_.clientHeight; + } + + if (old_width != this.width_ || old_height != this.height_) { + // Resizing a canvas erases it, even when the size doesn't change, so + // any resize needs to be followed by a redraw. + this.resizeElements_(); + this.predraw_(); + } + + this.resize_lock = false; +}; + +/** + * Adjusts the number of points in the rolling average. Updates the graph to + * reflect the new averaging period. + * @param {number} length Number of points over which to average the data. + */ +Dygraph.prototype.adjustRoll = function(length) { + this.rollPeriod_ = length; + this.predraw_(); +}; + +/** + * Returns a boolean array of visibility statuses. + */ +Dygraph.prototype.visibility = function() { + // Do lazy-initialization, so that this happens after we know the number of + // data series. + if (!this.getOption("visibility")) { + this.attrs_.visibility = []; + } + // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs. + while (this.getOption("visibility").length < this.numColumns() - 1) { + this.attrs_.visibility.push(true); + } + return this.getOption("visibility"); +}; + +/** + * Changes the visiblity of a series. + * + * @param {number} num the series index + * @param {boolean} value true or false, identifying the visibility. + */ +Dygraph.prototype.setVisibility = function(num, value) { + var x = this.visibility(); + if (num < 0 || num >= x.length) { + console.warn("invalid series number in setVisibility: " + num); + } else { + x[num] = value; + this.predraw_(); + } +}; + +/** + * How large of an area will the dygraph render itself in? + * This is used for testing. + * @return A {width: w, height: h} object. + * @private + */ +Dygraph.prototype.size = function() { + return { width: this.width_, height: this.height_ }; +}; + +/** + * Update the list of annotations and redraw the chart. + * See dygraphs.com/annotations.html for more info on how to use annotations. + * @param ann {Array} An array of annotation objects. + * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional). + */ +Dygraph.prototype.setAnnotations = function(ann, suppressDraw) { + // Only add the annotation CSS rule once we know it will be used. + Dygraph.addAnnotationRule(); + this.annotations_ = ann; + if (!this.layout_) { + console.warn("Tried to setAnnotations before dygraph was ready. " + + "Try setting them in a ready() block. See " + + "dygraphs.com/tests/annotation.html"); + return; + } + + this.layout_.setAnnotations(this.annotations_); + if (!suppressDraw) { + this.predraw_(); + } +}; + +/** + * Return the list of annotations. + */ +Dygraph.prototype.annotations = function() { + return this.annotations_; +}; + +/** + * Get the list of label names for this graph. The first column is the + * x-axis, so the data series names start at index 1. + * + * Returns null when labels have not yet been defined. + */ +Dygraph.prototype.getLabels = function() { + var labels = this.attr_("labels"); + return labels ? labels.slice() : null; +}; + +/** + * Get the index of a series (column) given its name. The first column is the + * x-axis, so the data series start with index 1. + */ +Dygraph.prototype.indexFromSetName = function(name) { + return this.setIndexByName_[name]; +}; + +/** + * Trigger a callback when the dygraph has drawn itself and is ready to be + * manipulated. This is primarily useful when dygraphs has to do an XHR for the + * data (i.e. a URL is passed as the data source) and the chart is drawn + * asynchronously. If the chart has already drawn, the callback will fire + * immediately. + * + * This is a good place to call setAnnotation(). + * + * @param {function(!Dygraph)} callback The callback to trigger when the chart + * is ready. + */ +Dygraph.prototype.ready = function(callback) { + if (this.is_initial_draw_) { + this.readyFns_.push(callback); + } else { + callback.call(this, this); + } +}; + +/** + * @private + * Adds a default style for the annotation CSS classes to the document. This is + * only executed when annotations are actually used. It is designed to only be + * called once -- all calls after the first will return immediately. + */ +Dygraph.addAnnotationRule = function() { + // TODO(danvk): move this function into plugins/annotations.js? + if (Dygraph.addedAnnotationCSS) return; + + var rule = "border: 1px solid black; " + + "background-color: white; " + + "text-align: center;"; + + var styleSheetElement = document.createElement("style"); + styleSheetElement.type = "text/css"; + document.getElementsByTagName("head")[0].appendChild(styleSheetElement); + + // Find the first style sheet that we can access. + // We may not add a rule to a style sheet from another domain for security + // reasons. This sometimes comes up when using gviz, since the Google gviz JS + // adds its own style sheets from google.com. + for (var i = 0; i < document.styleSheets.length; i++) { + if (document.styleSheets[i].disabled) continue; + var mysheet = document.styleSheets[i]; + try { + if (mysheet.insertRule) { // Firefox + var idx = mysheet.cssRules ? mysheet.cssRules.length : 0; + mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx); + } else if (mysheet.addRule) { // IE + mysheet.addRule(".dygraphDefaultAnnotation", rule); + } + Dygraph.addedAnnotationCSS = true; + return; + } catch(err) { + // Was likely a security exception. + } + } + + console.warn("Unable to add default annotation CSS rule; display may be off."); +}; + +return Dygraph; + +})(); +/** + * @license + * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview This file contains utility functions used by dygraphs. These + * are typically static (i.e. not related to any particular dygraph). Examples + * include date/time formatting functions, basic algorithms (e.g. binary + * search) and generic DOM-manipulation functions. + */ + +(function() { + +/*global Dygraph:false, G_vmlCanvasManager:false, Node:false */ +"use strict"; + +Dygraph.LOG_SCALE = 10; +Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE); + +/** + * @private + * @param {number} x + * @return {number} + */ +Dygraph.log10 = function(x) { + return Math.log(x) / Dygraph.LN_TEN; +}; + +/** A dotted line stroke pattern. */ +Dygraph.DOTTED_LINE = [2, 2]; +/** A dashed line stroke pattern. */ +Dygraph.DASHED_LINE = [7, 3]; +/** A dot dash stroke pattern. */ +Dygraph.DOT_DASH_LINE = [7, 2, 2, 2]; + +/** + * Return the 2d context for a dygraph canvas. + * + * This method is only exposed for the sake of replacing the function in + * automated tests, e.g. + * + * var oldFunc = Dygraph.getContext(); + * Dygraph.getContext = function(canvas) { + * var realContext = oldFunc(canvas); + * return new Proxy(realContext); + * }; + * @param {!HTMLCanvasElement} canvas + * @return {!CanvasRenderingContext2D} + * @private + */ +Dygraph.getContext = function(canvas) { + return /** @type{!CanvasRenderingContext2D}*/(canvas.getContext("2d")); +}; + +/** + * Add an event handler. This smooths a difference between IE and the rest of + * the world. + * @param {!Node} elem The element to add the event to. + * @param {string} type The type of the event, e.g. 'click' or 'mousemove'. + * @param {function(Event):(boolean|undefined)} fn The function to call + * on the event. The function takes one parameter: the event object. + * @private + */ +Dygraph.addEvent = function addEvent(elem, type, fn) { + if (elem.addEventListener) { + elem.addEventListener(type, fn, false); + } else { + elem[type+fn] = function(){fn(window.event);}; + elem.attachEvent('on'+type, elem[type+fn]); + } +}; + +/** + * Add an event handler. This event handler is kept until the graph is + * destroyed with a call to graph.destroy(). + * + * @param {!Node} elem The element to add the event to. + * @param {string} type The type of the event, e.g. 'click' or 'mousemove'. + * @param {function(Event):(boolean|undefined)} fn The function to call + * on the event. The function takes one parameter: the event object. + * @private + */ +Dygraph.prototype.addAndTrackEvent = function(elem, type, fn) { + Dygraph.addEvent(elem, type, fn); + this.registeredEvents_.push({ elem : elem, type : type, fn : fn }); +}; + +/** + * Remove an event handler. This smooths a difference between IE and the rest + * of the world. + * @param {!Node} elem The element to remove the event from. + * @param {string} type The type of the event, e.g. 'click' or 'mousemove'. + * @param {function(Event):(boolean|undefined)} fn The function to call + * on the event. The function takes one parameter: the event object. + * @private + */ +Dygraph.removeEvent = function(elem, type, fn) { + if (elem.removeEventListener) { + elem.removeEventListener(type, fn, false); + } else { + try { + elem.detachEvent('on'+type, elem[type+fn]); + } catch(e) { + // We only detach event listeners on a "best effort" basis in IE. See: + // http://stackoverflow.com/questions/2553632/detachevent-not-working-with-named-inline-functions + } + elem[type+fn] = null; + } +}; + +Dygraph.prototype.removeTrackedEvents_ = function() { + if (this.registeredEvents_) { + for (var idx = 0; idx < this.registeredEvents_.length; idx++) { + var reg = this.registeredEvents_[idx]; + Dygraph.removeEvent(reg.elem, reg.type, reg.fn); + } + } + + this.registeredEvents_ = []; +}; + +/** + * Cancels further processing of an event. This is useful to prevent default + * browser actions, e.g. highlighting text on a double-click. + * Based on the article at + * http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel + * @param {!Event} e The event whose normal behavior should be canceled. + * @private + */ +Dygraph.cancelEvent = function(e) { + e = e ? e : window.event; + if (e.stopPropagation) { + e.stopPropagation(); + } + if (e.preventDefault) { + e.preventDefault(); + } + e.cancelBubble = true; + e.cancel = true; + e.returnValue = false; + return false; +}; + +/** + * Convert hsv values to an rgb(r,g,b) string. Taken from MochiKit.Color. This + * is used to generate default series colors which are evenly spaced on the + * color wheel. + * @param { number } hue Range is 0.0-1.0. + * @param { number } saturation Range is 0.0-1.0. + * @param { number } value Range is 0.0-1.0. + * @return { string } "rgb(r,g,b)" where r, g and b range from 0-255. + * @private + */ +Dygraph.hsvToRGB = function (hue, saturation, value) { + var red; + var green; + var blue; + if (saturation === 0) { + red = value; + green = value; + blue = value; + } else { + var i = Math.floor(hue * 6); + var f = (hue * 6) - i; + var p = value * (1 - saturation); + var q = value * (1 - (saturation * f)); + var t = value * (1 - (saturation * (1 - f))); + switch (i) { + case 1: red = q; green = value; blue = p; break; + case 2: red = p; green = value; blue = t; break; + case 3: red = p; green = q; blue = value; break; + case 4: red = t; green = p; blue = value; break; + case 5: red = value; green = p; blue = q; break; + case 6: // fall through + case 0: red = value; green = t; blue = p; break; + } + } + red = Math.floor(255 * red + 0.5); + green = Math.floor(255 * green + 0.5); + blue = Math.floor(255 * blue + 0.5); + return 'rgb(' + red + ',' + green + ',' + blue + ')'; +}; + +// The following functions are from quirksmode.org with a modification for Safari from +// http://blog.firetree.net/2005/07/04/javascript-find-position/ +// http://www.quirksmode.org/js/findpos.html +// ... and modifications to support scrolling divs. + +/** + * Find the coordinates of an object relative to the top left of the page. + * + * TODO(danvk): change obj type from Node -> !Node + * @param {Node} obj + * @return {{x:number,y:number}} + * @private + */ +Dygraph.findPos = function(obj) { + var curleft = 0, curtop = 0; + if (obj.offsetParent) { + var copyObj = obj; + while (1) { + // NOTE: the if statement here is for IE8. + var borderLeft = "0", borderTop = "0"; + if (window.getComputedStyle) { + var computedStyle = window.getComputedStyle(copyObj, null); + borderLeft = computedStyle.borderLeft || "0"; + borderTop = computedStyle.borderTop || "0"; + } + curleft += parseInt(borderLeft, 10) ; + curtop += parseInt(borderTop, 10) ; + curleft += copyObj.offsetLeft; + curtop += copyObj.offsetTop; + if (!copyObj.offsetParent) { + break; + } + copyObj = copyObj.offsetParent; + } + } else { + // TODO(danvk): why would obj ever have these properties? + if (obj.x) curleft += obj.x; + if (obj.y) curtop += obj.y; + } + + // This handles the case where the object is inside a scrolled div. + while (obj && obj != document.body) { + curleft -= obj.scrollLeft; + curtop -= obj.scrollTop; + obj = obj.parentNode; + } + return {x: curleft, y: curtop}; +}; + +/** + * Returns the x-coordinate of the event in a coordinate system where the + * top-left corner of the page (not the window) is (0,0). + * Taken from MochiKit.Signal + * @param {!Event} e + * @return {number} + * @private + */ +Dygraph.pageX = function(e) { + if (e.pageX) { + return (!e.pageX || e.pageX < 0) ? 0 : e.pageX; + } else { + var de = document.documentElement; + var b = document.body; + return e.clientX + + (de.scrollLeft || b.scrollLeft) - + (de.clientLeft || 0); + } +}; + +/** + * Returns the y-coordinate of the event in a coordinate system where the + * top-left corner of the page (not the window) is (0,0). + * Taken from MochiKit.Signal + * @param {!Event} e + * @return {number} + * @private + */ +Dygraph.pageY = function(e) { + if (e.pageY) { + return (!e.pageY || e.pageY < 0) ? 0 : e.pageY; + } else { + var de = document.documentElement; + var b = document.body; + return e.clientY + + (de.scrollTop || b.scrollTop) - + (de.clientTop || 0); + } +}; + +/** + * Converts page the x-coordinate of the event to pixel x-coordinates on the + * canvas (i.e. DOM Coords). + * @param {!Event} e Drag event. + * @param {!DygraphInteractionContext} context Interaction context object. + * @return {number} The amount by which the drag has moved to the right. + */ +Dygraph.dragGetX_ = function(e, context) { + return Dygraph.pageX(e) - context.px; +}; + +/** + * Converts page the y-coordinate of the event to pixel y-coordinates on the + * canvas (i.e. DOM Coords). + * @param {!Event} e Drag event. + * @param {!DygraphInteractionContext} context Interaction context object. + * @return {number} The amount by which the drag has moved down. + */ +Dygraph.dragGetY_ = function(e, context) { + return Dygraph.pageY(e) - context.py; +}; + +/** + * This returns true unless the parameter is 0, null, undefined or NaN. + * TODO(danvk): rename this function to something like 'isNonZeroNan'. + * + * @param {number} x The number to consider. + * @return {boolean} Whether the number is zero or NaN. + * @private + */ +Dygraph.isOK = function(x) { + return !!x && !isNaN(x); +}; + +/** + * @param {{x:?number,y:?number,yval:?number}} p The point to consider, valid + * points are {x, y} objects + * @param {boolean=} opt_allowNaNY Treat point with y=NaN as valid + * @return {boolean} Whether the point has numeric x and y. + * @private + */ +Dygraph.isValidPoint = function(p, opt_allowNaNY) { + if (!p) return false; // null or undefined object + if (p.yval === null) return false; // missing point + if (p.x === null || p.x === undefined) return false; + if (p.y === null || p.y === undefined) return false; + if (isNaN(p.x) || (!opt_allowNaNY && isNaN(p.y))) return false; + return true; +}; + +/** + * Number formatting function which mimicks the behavior of %g in printf, i.e. + * either exponential or fixed format (without trailing 0s) is used depending on + * the length of the generated string. The advantage of this format is that + * there is a predictable upper bound on the resulting string length, + * significant figures are not dropped, and normal numbers are not displayed in + * exponential notation. + * + * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g. + * It creates strings which are too long for absolute values between 10^-4 and + * 10^-6, e.g. '0.00001' instead of '1e-5'. See tests/number-format.html for + * output examples. + * + * @param {number} x The number to format + * @param {number=} opt_precision The precision to use, default 2. + * @return {string} A string formatted like %g in printf. The max generated + * string length should be precision + 6 (e.g 1.123e+300). + */ +Dygraph.floatFormat = function(x, opt_precision) { + // Avoid invalid precision values; [1, 21] is the valid range. + var p = Math.min(Math.max(1, opt_precision || 2), 21); + + // This is deceptively simple. The actual algorithm comes from: + // + // Max allowed length = p + 4 + // where 4 comes from 'e+n' and '.'. + // + // Length of fixed format = 2 + y + p + // where 2 comes from '0.' and y = # of leading zeroes. + // + // Equating the two and solving for y yields y = 2, or 0.00xxxx which is + // 1.0e-3. + // + // Since the behavior of toPrecision() is identical for larger numbers, we + // don't have to worry about the other bound. + // + // Finally, the argument for toExponential() is the number of trailing digits, + // so we take off 1 for the value before the '.'. + return (Math.abs(x) < 1.0e-3 && x !== 0.0) ? + x.toExponential(p - 1) : x.toPrecision(p); +}; + +/** + * Converts '9' to '09' (useful for dates) + * @param {number} x + * @return {string} + * @private + */ +Dygraph.zeropad = function(x) { + if (x < 10) return "0" + x; else return "" + x; +}; + +/** + * Date accessors to get the parts of a calendar date (year, month, + * day, hour, minute, second and millisecond) according to local time, + * and factory method to call the Date constructor with an array of arguments. + */ +Dygraph.DateAccessorsLocal = { + getFullYear: function(d) {return d.getFullYear();}, + getMonth: function(d) {return d.getMonth();}, + getDate: function(d) {return d.getDate();}, + getHours: function(d) {return d.getHours();}, + getMinutes: function(d) {return d.getMinutes();}, + getSeconds: function(d) {return d.getSeconds();}, + getMilliseconds: function(d) {return d.getMilliseconds();}, + getDay: function(d) {return d.getDay();}, + makeDate: function(y, m, d, hh, mm, ss, ms) { + return new Date(y, m, d, hh, mm, ss, ms); + } +}; + +/** + * Date accessors to get the parts of a calendar date (year, month, + * day of month, hour, minute, second and millisecond) according to UTC time, + * and factory method to call the Date constructor with an array of arguments. + */ +Dygraph.DateAccessorsUTC = { + getFullYear: function(d) {return d.getUTCFullYear();}, + getMonth: function(d) {return d.getUTCMonth();}, + getDate: function(d) {return d.getUTCDate();}, + getHours: function(d) {return d.getUTCHours();}, + getMinutes: function(d) {return d.getUTCMinutes();}, + getSeconds: function(d) {return d.getUTCSeconds();}, + getMilliseconds: function(d) {return d.getUTCMilliseconds();}, + getDay: function(d) {return d.getUTCDay();}, + makeDate: function(y, m, d, hh, mm, ss, ms) { + return new Date(Date.UTC(y, m, d, hh, mm, ss, ms)); + } +}; + +/** + * Return a string version of the hours, minutes and seconds portion of a date. + * @param {number} hh The hours (from 0-23) + * @param {number} mm The minutes (from 0-59) + * @param {number} ss The seconds (from 0-59) + * @return {string} A time of the form "HH:MM" or "HH:MM:SS" + * @private + */ +Dygraph.hmsString_ = function(hh, mm, ss) { + var zeropad = Dygraph.zeropad; + var ret = zeropad(hh) + ":" + zeropad(mm); + if (ss) { + ret += ":" + zeropad(ss); + } + return ret; +}; + +/** + * Convert a JS date (millis since epoch) to a formatted string. + * @param {number} time The JavaScript time value (ms since epoch) + * @param {boolean} utc Wether output UTC or local time + * @return {string} A date of one of these forms: + * "YYYY/MM/DD", "YYYY/MM/DD HH:MM" or "YYYY/MM/DD HH:MM:SS" + * @private + */ +Dygraph.dateString_ = function(time, utc) { + var zeropad = Dygraph.zeropad; + var accessors = utc ? Dygraph.DateAccessorsUTC : Dygraph.DateAccessorsLocal; + var date = new Date(time); + var y = accessors.getFullYear(date); + var m = accessors.getMonth(date); + var d = accessors.getDate(date); + var hh = accessors.getHours(date); + var mm = accessors.getMinutes(date); + var ss = accessors.getSeconds(date); + // Get a year string: + var year = "" + y; + // Get a 0 padded month string + var month = zeropad(m + 1); //months are 0-offset, sigh + // Get a 0 padded day string + var day = zeropad(d); + var frac = hh * 3600 + mm * 60 + ss; + var ret = year + "/" + month + "/" + day; + if (frac) { + ret += " " + Dygraph.hmsString_(hh, mm, ss); + } + return ret; +}; + +/** + * Round a number to the specified number of digits past the decimal point. + * @param {number} num The number to round + * @param {number} places The number of decimals to which to round + * @return {number} The rounded number + * @private + */ +Dygraph.round_ = function(num, places) { + var shift = Math.pow(10, places); + return Math.round(num * shift)/shift; +}; + +/** + * Implementation of binary search over an array. + * Currently does not work when val is outside the range of arry's values. + * @param {number} val the value to search for + * @param {Array.<number>} arry is the value over which to search + * @param {number} abs If abs > 0, find the lowest entry greater than val + * If abs < 0, find the highest entry less than val. + * If abs == 0, find the entry that equals val. + * @param {number=} low The first index in arry to consider (optional) + * @param {number=} high The last index in arry to consider (optional) + * @return {number} Index of the element, or -1 if it isn't found. + * @private + */ +Dygraph.binarySearch = function(val, arry, abs, low, high) { + if (low === null || low === undefined || + high === null || high === undefined) { + low = 0; + high = arry.length - 1; + } + if (low > high) { + return -1; + } + if (abs === null || abs === undefined) { + abs = 0; + } + var validIndex = function(idx) { + return idx >= 0 && idx < arry.length; + }; + var mid = parseInt((low + high) / 2, 10); + var element = arry[mid]; + var idx; + if (element == val) { + return mid; + } else if (element > val) { + if (abs > 0) { + // Accept if element > val, but also if prior element < val. + idx = mid - 1; + if (validIndex(idx) && arry[idx] < val) { + return mid; + } + } + return Dygraph.binarySearch(val, arry, abs, low, mid - 1); + } else if (element < val) { + if (abs < 0) { + // Accept if element < val, but also if prior element > val. + idx = mid + 1; + if (validIndex(idx) && arry[idx] > val) { + return mid; + } + } + return Dygraph.binarySearch(val, arry, abs, mid + 1, high); + } + return -1; // can't actually happen, but makes closure compiler happy +}; + +/** + * Parses a date, returning the number of milliseconds since epoch. This can be + * passed in as an xValueParser in the Dygraph constructor. + * TODO(danvk): enumerate formats that this understands. + * + * @param {string} dateStr A date in a variety of possible string formats. + * @return {number} Milliseconds since epoch. + * @private + */ +Dygraph.dateParser = function(dateStr) { + var dateStrSlashed; + var d; + + // Let the system try the format first, with one caveat: + // YYYY-MM-DD[ HH:MM:SS] is interpreted as UTC by a variety of browsers. + // dygraphs displays dates in local time, so this will result in surprising + // inconsistencies. But if you specify "T" or "Z" (i.e. YYYY-MM-DDTHH:MM:SS), + // then you probably know what you're doing, so we'll let you go ahead. + // Issue: http://code.google.com/p/dygraphs/issues/detail?id=255 + if (dateStr.search("-") == -1 || + dateStr.search("T") != -1 || dateStr.search("Z") != -1) { + d = Dygraph.dateStrToMillis(dateStr); + if (d && !isNaN(d)) return d; + } + + if (dateStr.search("-") != -1) { // e.g. '2009-7-12' or '2009-07-12' + dateStrSlashed = dateStr.replace("-", "/", "g"); + while (dateStrSlashed.search("-") != -1) { + dateStrSlashed = dateStrSlashed.replace("-", "/"); + } + d = Dygraph.dateStrToMillis(dateStrSlashed); + } else if (dateStr.length == 8) { // e.g. '20090712' + // TODO(danvk): remove support for this format. It's confusing. + dateStrSlashed = dateStr.substr(0,4) + "/" + dateStr.substr(4,2) + "/" + + dateStr.substr(6,2); + d = Dygraph.dateStrToMillis(dateStrSlashed); + } else { + // Any format that Date.parse will accept, e.g. "2009/07/12" or + // "2009/07/12 12:34:56" + d = Dygraph.dateStrToMillis(dateStr); + } + + if (!d || isNaN(d)) { + console.error("Couldn't parse " + dateStr + " as a date"); + } + return d; +}; + +/** + * This is identical to JavaScript's built-in Date.parse() method, except that + * it doesn't get replaced with an incompatible method by aggressive JS + * libraries like MooTools or Joomla. + * @param {string} str The date string, e.g. "2011/05/06" + * @return {number} millis since epoch + * @private + */ +Dygraph.dateStrToMillis = function(str) { + return new Date(str).getTime(); +}; + +// These functions are all based on MochiKit. +/** + * Copies all the properties from o to self. + * + * @param {!Object} self + * @param {!Object} o + * @return {!Object} + */ +Dygraph.update = function(self, o) { + if (typeof(o) != 'undefined' && o !== null) { + for (var k in o) { + if (o.hasOwnProperty(k)) { + self[k] = o[k]; + } + } + } + return self; +}; + +/** + * Copies all the properties from o to self. + * + * @param {!Object} self + * @param {!Object} o + * @return {!Object} + * @private + */ +Dygraph.updateDeep = function (self, o) { + // Taken from http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object + function isNode(o) { + return ( + typeof Node === "object" ? o instanceof Node : + typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName==="string" + ); + } + + if (typeof(o) != 'undefined' && o !== null) { + for (var k in o) { + if (o.hasOwnProperty(k)) { + if (o[k] === null) { + self[k] = null; + } else if (Dygraph.isArrayLike(o[k])) { + self[k] = o[k].slice(); + } else if (isNode(o[k])) { + // DOM objects are shallowly-copied. + self[k] = o[k]; + } else if (typeof(o[k]) == 'object') { + if (typeof(self[k]) != 'object' || self[k] === null) { + self[k] = {}; + } + Dygraph.updateDeep(self[k], o[k]); + } else { + self[k] = o[k]; + } + } + } + } + return self; +}; + +/** + * @param {*} o + * @return {boolean} + * @private + */ +Dygraph.isArrayLike = function(o) { + var typ = typeof(o); + if ( + (typ != 'object' && !(typ == 'function' && + typeof(o.item) == 'function')) || + o === null || + typeof(o.length) != 'number' || + o.nodeType === 3 + ) { + return false; + } + return true; +}; + +/** + * @param {Object} o + * @return {boolean} + * @private + */ +Dygraph.isDateLike = function (o) { + if (typeof(o) != "object" || o === null || + typeof(o.getTime) != 'function') { + return false; + } + return true; +}; + +/** + * Note: this only seems to work for arrays. + * @param {!Array} o + * @return {!Array} + * @private + */ +Dygraph.clone = function(o) { + // TODO(danvk): figure out how MochiKit's version works + var r = []; + for (var i = 0; i < o.length; i++) { + if (Dygraph.isArrayLike(o[i])) { + r.push(Dygraph.clone(o[i])); + } else { + r.push(o[i]); + } + } + return r; +}; + +/** + * Create a new canvas element. This is more complex than a simple + * document.createElement("canvas") because of IE and excanvas. + * + * @return {!HTMLCanvasElement} + * @private + */ +Dygraph.createCanvas = function() { + var canvas = document.createElement("canvas"); + + var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera); + if (isIE && (typeof(G_vmlCanvasManager) != 'undefined')) { + canvas = G_vmlCanvasManager.initElement( + /**@type{!HTMLCanvasElement}*/(canvas)); + } + + return canvas; +}; + +/** + * Returns the context's pixel ratio, which is the ratio between the device + * pixel ratio and the backing store ratio. Typically this is 1 for conventional + * displays, and > 1 for HiDPI displays (such as the Retina MBP). + * See http://www.html5rocks.com/en/tutorials/canvas/hidpi/ for more details. + * + * @param {!CanvasRenderingContext2D} context The canvas's 2d context. + * @return {number} The ratio of the device pixel ratio and the backing store + * ratio for the specified context. + */ +Dygraph.getContextPixelRatio = function(context) { + try { + var devicePixelRatio = window.devicePixelRatio; + var backingStoreRatio = context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; + if (devicePixelRatio !== undefined) { + return devicePixelRatio / backingStoreRatio; + } else { + // At least devicePixelRatio must be defined for this ratio to make sense. + // We default backingStoreRatio to 1: this does not exist on some browsers + // (i.e. desktop Chrome). + return 1; + } + } catch (e) { + return 1; + } +}; + +/** + * Checks whether the user is on an Android browser. + * Android does not fully support the <canvas> tag, e.g. w/r/t/ clipping. + * @return {boolean} + * @private + */ +Dygraph.isAndroid = function() { + return (/Android/).test(navigator.userAgent); +}; + + +/** + * TODO(danvk): use @template here when it's better supported for classes. + * @param {!Array} array + * @param {number} start + * @param {number} length + * @param {function(!Array,?):boolean=} predicate + * @constructor + */ +Dygraph.Iterator = function(array, start, length, predicate) { + start = start || 0; + length = length || array.length; + this.hasNext = true; // Use to identify if there's another element. + this.peek = null; // Use for look-ahead + this.start_ = start; + this.array_ = array; + this.predicate_ = predicate; + this.end_ = Math.min(array.length, start + length); + this.nextIdx_ = start - 1; // use -1 so initial advance works. + this.next(); // ignoring result. +}; + +/** + * @return {Object} + */ +Dygraph.Iterator.prototype.next = function() { + if (!this.hasNext) { + return null; + } + var obj = this.peek; + + var nextIdx = this.nextIdx_ + 1; + var found = false; + while (nextIdx < this.end_) { + if (!this.predicate_ || this.predicate_(this.array_, nextIdx)) { + this.peek = this.array_[nextIdx]; + found = true; + break; + } + nextIdx++; + } + this.nextIdx_ = nextIdx; + if (!found) { + this.hasNext = false; + this.peek = null; + } + return obj; +}; + +/** + * Returns a new iterator over array, between indexes start and + * start + length, and only returns entries that pass the accept function + * + * @param {!Array} array the array to iterate over. + * @param {number} start the first index to iterate over, 0 if absent. + * @param {number} length the number of elements in the array to iterate over. + * This, along with start, defines a slice of the array, and so length + * doesn't imply the number of elements in the iterator when accept doesn't + * always accept all values. array.length when absent. + * @param {function(?):boolean=} opt_predicate a function that takes + * parameters array and idx, which returns true when the element should be + * returned. If omitted, all elements are accepted. + * @private + */ +Dygraph.createIterator = function(array, start, length, opt_predicate) { + return new Dygraph.Iterator(array, start, length, opt_predicate); +}; + +// Shim layer with setTimeout fallback. +// From: http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +// Should be called with the window context: +// Dygraph.requestAnimFrame.call(window, function() {}) +Dygraph.requestAnimFrame = (function() { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + window.oRequestAnimationFrame || + window.msRequestAnimationFrame || + function (callback) { + window.setTimeout(callback, 1000 / 60); + }; +})(); + +/** + * Call a function at most maxFrames times at an attempted interval of + * framePeriodInMillis, then call a cleanup function once. repeatFn is called + * once immediately, then at most (maxFrames - 1) times asynchronously. If + * maxFrames==1, then cleanup_fn() is also called synchronously. This function + * is used to sequence animation. + * @param {function(number)} repeatFn Called repeatedly -- takes the frame + * number (from 0 to maxFrames-1) as an argument. + * @param {number} maxFrames The max number of times to call repeatFn + * @param {number} framePeriodInMillis Max requested time between frames. + * @param {function()} cleanupFn A function to call after all repeatFn calls. + * @private + */ +Dygraph.repeatAndCleanup = function(repeatFn, maxFrames, framePeriodInMillis, + cleanupFn) { + var frameNumber = 0; + var previousFrameNumber; + var startTime = new Date().getTime(); + repeatFn(frameNumber); + if (maxFrames == 1) { + cleanupFn(); + return; + } + var maxFrameArg = maxFrames - 1; + + (function loop() { + if (frameNumber >= maxFrames) return; + Dygraph.requestAnimFrame.call(window, function() { + // Determine which frame to draw based on the delay so far. Will skip + // frames if necessary. + var currentTime = new Date().getTime(); + var delayInMillis = currentTime - startTime; + previousFrameNumber = frameNumber; + frameNumber = Math.floor(delayInMillis / framePeriodInMillis); + var frameDelta = frameNumber - previousFrameNumber; + // If we predict that the subsequent repeatFn call will overshoot our + // total frame target, so our last call will cause a stutter, then jump to + // the last call immediately. If we're going to cause a stutter, better + // to do it faster than slower. + var predictOvershootStutter = (frameNumber + frameDelta) > maxFrameArg; + if (predictOvershootStutter || (frameNumber >= maxFrameArg)) { + repeatFn(maxFrameArg); // Ensure final call with maxFrameArg. + cleanupFn(); + } else { + if (frameDelta !== 0) { // Don't call repeatFn with duplicate frames. + repeatFn(frameNumber); + } + loop(); + } + }); + })(); +}; + +// A whitelist of options that do not change pixel positions. +var pixelSafeOptions = { + 'annotationClickHandler': true, + 'annotationDblClickHandler': true, + 'annotationMouseOutHandler': true, + 'annotationMouseOverHandler': true, + 'axisLabelColor': true, + 'axisLineColor': true, + 'axisLineWidth': true, + 'clickCallback': true, + 'drawCallback': true, + 'drawHighlightPointCallback': true, + 'drawPoints': true, + 'drawPointCallback': true, + 'drawXGrid': true, + 'drawYGrid': true, + 'fillAlpha': true, + 'gridLineColor': true, + 'gridLineWidth': true, + 'hideOverlayOnMouseOut': true, + 'highlightCallback': true, + 'highlightCircleSize': true, + 'interactionModel': true, + 'isZoomedIgnoreProgrammaticZoom': true, + 'labelsDiv': true, + 'labelsDivStyles': true, + 'labelsDivWidth': true, + 'labelsKMB': true, + 'labelsKMG2': true, + 'labelsSeparateLines': true, + 'labelsShowZeroValues': true, + 'legend': true, + 'panEdgeFraction': true, + 'pixelsPerYLabel': true, + 'pointClickCallback': true, + 'pointSize': true, + 'rangeSelectorPlotFillColor': true, + 'rangeSelectorPlotStrokeColor': true, + 'showLabelsOnHighlight': true, + 'showRoller': true, + 'strokeWidth': true, + 'underlayCallback': true, + 'unhighlightCallback': true, + 'zoomCallback': true +}; + +/** + * This function will scan the option list and determine if they + * require us to recalculate the pixel positions of each point. + * TODO: move this into dygraph-options.js + * @param {!Array.<string>} labels a list of options to check. + * @param {!Object} attrs + * @return {boolean} true if the graph needs new points else false. + * @private + */ +Dygraph.isPixelChangingOptionList = function(labels, attrs) { + // Assume that we do not require new points. + // This will change to true if we actually do need new points. + + // Create a dictionary of series names for faster lookup. + // If there are no labels, then the dictionary stays empty. + var seriesNamesDictionary = { }; + if (labels) { + for (var i = 1; i < labels.length; i++) { + seriesNamesDictionary[labels[i]] = true; + } + } + + // Scan through a flat (i.e. non-nested) object of options. + // Returns true/false depending on whether new points are needed. + var scanFlatOptions = function(options) { + for (var property in options) { + if (options.hasOwnProperty(property) && + !pixelSafeOptions[property]) { + return true; + } + } + return false; + }; + + // Iterate through the list of updated options. + for (var property in attrs) { + if (!attrs.hasOwnProperty(property)) continue; + + // Find out of this field is actually a series specific options list. + if (property == 'highlightSeriesOpts' || + (seriesNamesDictionary[property] && !attrs.series)) { + // This property value is a list of options for this series. + if (scanFlatOptions(attrs[property])) return true; + } else if (property == 'series' || property == 'axes') { + // This is twice-nested options list. + var perSeries = attrs[property]; + for (var series in perSeries) { + if (perSeries.hasOwnProperty(series) && + scanFlatOptions(perSeries[series])) { + return true; + } + } + } else { + // If this was not a series specific option list, check if it's a pixel + // changing property. + if (!pixelSafeOptions[property]) return true; + } + } + + return false; +}; + +Dygraph.Circles = { + DEFAULT : function(g, name, ctx, canvasx, canvasy, color, radius) { + ctx.beginPath(); + ctx.fillStyle = color; + ctx.arc(canvasx, canvasy, radius, 0, 2 * Math.PI, false); + ctx.fill(); + } + // For more shapes, include extras/shapes.js +}; + +/** + * To create a "drag" interaction, you typically register a mousedown event + * handler on the element where the drag begins. In that handler, you register a + * mouseup handler on the window to determine when the mouse is released, + * wherever that release happens. This works well, except when the user releases + * the mouse over an off-domain iframe. In that case, the mouseup event is + * handled by the iframe and never bubbles up to the window handler. + * + * To deal with this issue, we cover iframes with high z-index divs to make sure + * they don't capture mouseup. + * + * Usage: + * element.addEventListener('mousedown', function() { + * var tarper = new Dygraph.IFrameTarp(); + * tarper.cover(); + * var mouseUpHandler = function() { + * ... + * window.removeEventListener(mouseUpHandler); + * tarper.uncover(); + * }; + * window.addEventListener('mouseup', mouseUpHandler); + * }; + * + * @constructor + */ +Dygraph.IFrameTarp = function() { + /** @type {Array.<!HTMLDivElement>} */ + this.tarps = []; +}; + +/** + * Find all the iframes in the document and cover them with high z-index + * transparent divs. + */ +Dygraph.IFrameTarp.prototype.cover = function() { + var iframes = document.getElementsByTagName("iframe"); + for (var i = 0; i < iframes.length; i++) { + var iframe = iframes[i]; + var pos = Dygraph.findPos(iframe), + x = pos.x, + y = pos.y, + width = iframe.offsetWidth, + height = iframe.offsetHeight; + + var div = document.createElement("div"); + div.style.position = "absolute"; + div.style.left = x + 'px'; + div.style.top = y + 'px'; + div.style.width = width + 'px'; + div.style.height = height + 'px'; + div.style.zIndex = 999; + document.body.appendChild(div); + this.tarps.push(div); + } +}; + +/** + * Remove all the iframe covers. You should call this in a mouseup handler. + */ +Dygraph.IFrameTarp.prototype.uncover = function() { + for (var i = 0; i < this.tarps.length; i++) { + this.tarps[i].parentNode.removeChild(this.tarps[i]); + } + this.tarps = []; +}; + +/** + * Determine whether |data| is delimited by CR, CRLF, LF, LFCR. + * @param {string} data + * @return {?string} the delimiter that was detected (or null on failure). + */ +Dygraph.detectLineDelimiter = function(data) { + for (var i = 0; i < data.length; i++) { + var code = data.charAt(i); + if (code === '\r') { + // Might actually be "\r\n". + if (((i + 1) < data.length) && (data.charAt(i + 1) === '\n')) { + return '\r\n'; + } + return code; + } + if (code === '\n') { + // Might actually be "\n\r". + if (((i + 1) < data.length) && (data.charAt(i + 1) === '\r')) { + return '\n\r'; + } + return code; + } + } + + return null; +}; + +/** + * Is one node contained by another? + * @param {Node} containee The contained node. + * @param {Node} container The container node. + * @return {boolean} Whether containee is inside (or equal to) container. + * @private + */ +Dygraph.isNodeContainedBy = function(containee, container) { + if (container === null || containee === null) { + return false; + } + var containeeNode = /** @type {Node} */ (containee); + while (containeeNode && containeeNode !== container) { + containeeNode = containeeNode.parentNode; + } + return (containeeNode === container); +}; + + +// This masks some numeric issues in older versions of Firefox, +// where 1.0/Math.pow(10,2) != Math.pow(10,-2). +/** @type {function(number,number):number} */ +Dygraph.pow = function(base, exp) { + if (exp < 0) { + return 1.0 / Math.pow(base, -exp); + } + return Math.pow(base, exp); +}; + +/** + * Converts any valid CSS color (hex, rgb(), named color) to an RGB tuple. + * + * @param {!string} colorStr Any valid CSS color string. + * @return {{r:number,g:number,b:number}} Parsed RGB tuple. + * @private + */ +Dygraph.toRGB_ = function(colorStr) { + // TODO(danvk): cache color parses to avoid repeated DOM manipulation. + var div = document.createElement('div'); + div.style.backgroundColor = colorStr; + div.style.visibility = 'hidden'; + document.body.appendChild(div); + var rgbStr; + if (window.getComputedStyle) { + rgbStr = window.getComputedStyle(div, null).backgroundColor; + } else { + // IE8 + rgbStr = div.currentStyle.backgroundColor; + } + document.body.removeChild(div); + var bits = /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.exec(rgbStr); + return { + r: parseInt(bits[1], 10), + g: parseInt(bits[2], 10), + b: parseInt(bits[3], 10) + }; +}; + +/** + * Checks whether the browser supports the <canvas> tag. + * @param {HTMLCanvasElement=} opt_canvasElement Pass a canvas element as an + * optimization if you have one. + * @return {boolean} Whether the browser supports canvas. + */ +Dygraph.isCanvasSupported = function(opt_canvasElement) { + var canvas; + try { + canvas = opt_canvasElement || document.createElement("canvas"); + canvas.getContext("2d"); + } + catch (e) { + var ie = navigator.appVersion.match(/MSIE (\d\.\d)/); + var opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1); + if ((!ie) || (ie[1] < 6) || (opera)) + return false; + return true; + } + return true; +}; + +/** + * Parses the value as a floating point number. This is like the parseFloat() + * built-in, but with a few differences: + * - the empty string is parsed as null, rather than NaN. + * - if the string cannot be parsed at all, an error is logged. + * If the string can't be parsed, this method returns null. + * @param {string} x The string to be parsed + * @param {number=} opt_line_no The line number from which the string comes. + * @param {string=} opt_line The text of the line from which the string comes. + */ +Dygraph.parseFloat_ = function(x, opt_line_no, opt_line) { + var val = parseFloat(x); + if (!isNaN(val)) return val; + + // Try to figure out what happeend. + // If the value is the empty string, parse it as null. + if (/^ *$/.test(x)) return null; + + // If it was actually "NaN", return it as NaN. + if (/^ *nan *$/i.test(x)) return NaN; + + // Looks like a parsing error. + var msg = "Unable to parse '" + x + "' as a number"; + if (opt_line !== undefined && opt_line_no !== undefined) { + msg += " on line " + (1+(opt_line_no||0)) + " ('" + opt_line + "') of CSV."; + } + console.error(msg); + + return null; +}; + +})(); +/** + * @license + * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview A wrapper around the Dygraph class which implements the + * interface for a GViz (aka Google Visualization API) visualization. + * It is designed to be a drop-in replacement for Google's AnnotatedTimeline, + * so the documentation at + * http://code.google.com/apis/chart/interactive/docs/gallery/annotatedtimeline.html + * translates over directly. + * + * For a full demo, see: + * - http://dygraphs.com/tests/gviz.html + * - http://dygraphs.com/tests/annotation-gviz.html + */ + +(function() { +/*global Dygraph:false */ +"use strict"; + +/** + * A wrapper around Dygraph that implements the gviz API. + * @param {!HTMLDivElement} container The DOM object the visualization should + * live in. + * @constructor + */ +Dygraph.GVizChart = function(container) { + this.container = container; +}; + +/** + * @param {GVizDataTable} data + * @param {Object.<*>} options + */ +Dygraph.GVizChart.prototype.draw = function(data, options) { + // Clear out any existing dygraph. + // TODO(danvk): would it make more sense to simply redraw using the current + // date_graph object? + this.container.innerHTML = ''; + if (typeof(this.date_graph) != 'undefined') { + this.date_graph.destroy(); + } + + this.date_graph = new Dygraph(this.container, data, options); +}; + +/** + * Google charts compatible setSelection + * Only row selection is supported, all points in the row will be highlighted + * @param {Array.<{row:number}>} selection_array array of the selected cells + * @public + */ +Dygraph.GVizChart.prototype.setSelection = function(selection_array) { + var row = false; + if (selection_array.length) { + row = selection_array[0].row; + } + this.date_graph.setSelection(row); +}; + +/** + * Google charts compatible getSelection implementation + * @return {Array.<{row:number,column:number}>} array of the selected cells + * @public + */ +Dygraph.GVizChart.prototype.getSelection = function() { + var selection = []; + + var row = this.date_graph.getSelection(); + + if (row < 0) return selection; + + var points = this.date_graph.layout_.points; + for (var setIdx = 0; setIdx < points.length; ++setIdx) { + selection.push({row: row, column: setIdx + 1}); + } + + return selection; +}; + +})(); +/** + * @license + * Copyright 2011 Robert Konigsberg (konigsberg@google.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview The default interaction model for Dygraphs. This is kept out + * of dygraph.js for better navigability. + * @author Robert Konigsberg (konigsberg@google.com) + */ + +(function() { +/*global Dygraph:false */ +"use strict"; + +/** + * You can drag this many pixels past the edge of the chart and still have it + * be considered a zoom. This makes it easier to zoom to the exact edge of the + * chart, a fairly common operation. + */ +var DRAG_EDGE_MARGIN = 100; + +/** + * A collection of functions to facilitate build custom interaction models. + * @class + */ +Dygraph.Interaction = {}; + +/** + * Checks whether the beginning & ending of an event were close enough that it + * should be considered a click. If it should, dispatch appropriate events. + * Returns true if the event was treated as a click. + * + * @param {Event} event + * @param {Dygraph} g + * @param {Object} context + */ +Dygraph.Interaction.maybeTreatMouseOpAsClick = function(event, g, context) { + context.dragEndX = Dygraph.dragGetX_(event, context); + context.dragEndY = Dygraph.dragGetY_(event, context); + var regionWidth = Math.abs(context.dragEndX - context.dragStartX); + var regionHeight = Math.abs(context.dragEndY - context.dragStartY); + + if (regionWidth < 2 && regionHeight < 2 && + g.lastx_ !== undefined && g.lastx_ != -1) { + Dygraph.Interaction.treatMouseOpAsClick(g, event, context); + } + + context.regionWidth = regionWidth; + context.regionHeight = regionHeight; +}; + +/** + * Called in response to an interaction model operation that + * should start the default panning behavior. + * + * It's used in the default callback for "mousedown" operations. + * Custom interaction model builders can use it to provide the default + * panning behavior. + * + * @param {Event} event the event object which led to the startPan call. + * @param {Dygraph} g The dygraph on which to act. + * @param {Object} context The dragging context object (with + * dragStartX/dragStartY/etc. properties). This function modifies the + * context. + */ +Dygraph.Interaction.startPan = function(event, g, context) { + var i, axis; + context.isPanning = true; + var xRange = g.xAxisRange(); + + if (g.getOptionForAxis("logscale", "x")) { + context.initialLeftmostDate = Dygraph.log10(xRange[0]); + context.dateRange = Dygraph.log10(xRange[1]) - Dygraph.log10(xRange[0]); + } else { + context.initialLeftmostDate = xRange[0]; + context.dateRange = xRange[1] - xRange[0]; + } + context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1); + + if (g.getNumericOption("panEdgeFraction")) { + var maxXPixelsToDraw = g.width_ * g.getNumericOption("panEdgeFraction"); + var xExtremes = g.xAxisExtremes(); // I REALLY WANT TO CALL THIS xTremes! + + var boundedLeftX = g.toDomXCoord(xExtremes[0]) - maxXPixelsToDraw; + var boundedRightX = g.toDomXCoord(xExtremes[1]) + maxXPixelsToDraw; + + var boundedLeftDate = g.toDataXCoord(boundedLeftX); + var boundedRightDate = g.toDataXCoord(boundedRightX); + context.boundedDates = [boundedLeftDate, boundedRightDate]; + + var boundedValues = []; + var maxYPixelsToDraw = g.height_ * g.getNumericOption("panEdgeFraction"); + + for (i = 0; i < g.axes_.length; i++) { + axis = g.axes_[i]; + var yExtremes = axis.extremeRange; + + var boundedTopY = g.toDomYCoord(yExtremes[0], i) + maxYPixelsToDraw; + var boundedBottomY = g.toDomYCoord(yExtremes[1], i) - maxYPixelsToDraw; + + var boundedTopValue = g.toDataYCoord(boundedTopY, i); + var boundedBottomValue = g.toDataYCoord(boundedBottomY, i); + + boundedValues[i] = [boundedTopValue, boundedBottomValue]; + } + context.boundedValues = boundedValues; + } + + // Record the range of each y-axis at the start of the drag. + // If any axis has a valueRange or valueWindow, then we want a 2D pan. + // We can't store data directly in g.axes_, because it does not belong to us + // and could change out from under us during a pan (say if there's a data + // update). + context.is2DPan = false; + context.axes = []; + for (i = 0; i < g.axes_.length; i++) { + axis = g.axes_[i]; + var axis_data = {}; + var yRange = g.yAxisRange(i); + // TODO(konigsberg): These values should be in |context|. + // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale. + var logscale = g.attributes_.getForAxis("logscale", i); + if (logscale) { + axis_data.initialTopValue = Dygraph.log10(yRange[1]); + axis_data.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]); + } else { + axis_data.initialTopValue = yRange[1]; + axis_data.dragValueRange = yRange[1] - yRange[0]; + } + axis_data.unitsPerPixel = axis_data.dragValueRange / (g.plotter_.area.h - 1); + context.axes.push(axis_data); + + // While calculating axes, set 2dpan. + if (axis.valueWindow || axis.valueRange) context.is2DPan = true; + } +}; + +/** + * Called in response to an interaction model operation that + * responds to an event that pans the view. + * + * It's used in the default callback for "mousemove" operations. + * Custom interaction model builders can use it to provide the default + * panning behavior. + * + * @param {Event} event the event object which led to the movePan call. + * @param {Dygraph} g The dygraph on which to act. + * @param {Object} context The dragging context object (with + * dragStartX/dragStartY/etc. properties). This function modifies the + * context. + */ +Dygraph.Interaction.movePan = function(event, g, context) { + context.dragEndX = Dygraph.dragGetX_(event, context); + context.dragEndY = Dygraph.dragGetY_(event, context); + + var minDate = context.initialLeftmostDate - + (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel; + if (context.boundedDates) { + minDate = Math.max(minDate, context.boundedDates[0]); + } + var maxDate = minDate + context.dateRange; + if (context.boundedDates) { + if (maxDate > context.boundedDates[1]) { + // Adjust minDate, and recompute maxDate. + minDate = minDate - (maxDate - context.boundedDates[1]); + maxDate = minDate + context.dateRange; + } + } + + if (g.getOptionForAxis("logscale", "x")) { + g.dateWindow_ = [ Math.pow(Dygraph.LOG_SCALE, minDate), + Math.pow(Dygraph.LOG_SCALE, maxDate) ]; + } else { + g.dateWindow_ = [minDate, maxDate]; + } + + // y-axis scaling is automatic unless this is a full 2D pan. + if (context.is2DPan) { + + var pixelsDragged = context.dragEndY - context.dragStartY; + + // Adjust each axis appropriately. + for (var i = 0; i < g.axes_.length; i++) { + var axis = g.axes_[i]; + var axis_data = context.axes[i]; + var unitsDragged = pixelsDragged * axis_data.unitsPerPixel; + + var boundedValue = context.boundedValues ? context.boundedValues[i] : null; + + // In log scale, maxValue and minValue are the logs of those values. + var maxValue = axis_data.initialTopValue + unitsDragged; + if (boundedValue) { + maxValue = Math.min(maxValue, boundedValue[1]); + } + var minValue = maxValue - axis_data.dragValueRange; + if (boundedValue) { + if (minValue < boundedValue[0]) { + // Adjust maxValue, and recompute minValue. + maxValue = maxValue - (minValue - boundedValue[0]); + minValue = maxValue - axis_data.dragValueRange; + } + } + if (g.attributes_.getForAxis("logscale", i)) { + axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue), + Math.pow(Dygraph.LOG_SCALE, maxValue) ]; + } else { + axis.valueWindow = [ minValue, maxValue ]; + } + } + } + + g.drawGraph_(false); +}; + +/** + * Called in response to an interaction model operation that + * responds to an event that ends panning. + * + * It's used in the default callback for "mouseup" operations. + * Custom interaction model builders can use it to provide the default + * panning behavior. + * + * @param {Event} event the event object which led to the endPan call. + * @param {Dygraph} g The dygraph on which to act. + * @param {Object} context The dragging context object (with + * dragStartX/dragStartY/etc. properties). This function modifies the + * context. + */ +Dygraph.Interaction.endPan = Dygraph.Interaction.maybeTreatMouseOpAsClick; + +/** + * Called in response to an interaction model operation that + * responds to an event that starts zooming. + * + * It's used in the default callback for "mousedown" operations. + * Custom interaction model builders can use it to provide the default + * zooming behavior. + * + * @param {Event} event the event object which led to the startZoom call. + * @param {Dygraph} g The dygraph on which to act. + * @param {Object} context The dragging context object (with + * dragStartX/dragStartY/etc. properties). This function modifies the + * context. + */ +Dygraph.Interaction.startZoom = function(event, g, context) { + context.isZooming = true; + context.zoomMoved = false; +}; + +/** + * Called in response to an interaction model operation that + * responds to an event that defines zoom boundaries. + * + * It's used in the default callback for "mousemove" operations. + * Custom interaction model builders can use it to provide the default + * zooming behavior. + * + * @param {Event} event the event object which led to the moveZoom call. + * @param {Dygraph} g The dygraph on which to act. + * @param {Object} context The dragging context object (with + * dragStartX/dragStartY/etc. properties). This function modifies the + * context. + */ +Dygraph.Interaction.moveZoom = function(event, g, context) { + context.zoomMoved = true; + context.dragEndX = Dygraph.dragGetX_(event, context); + context.dragEndY = Dygraph.dragGetY_(event, context); + + var xDelta = Math.abs(context.dragStartX - context.dragEndX); + var yDelta = Math.abs(context.dragStartY - context.dragEndY); + + // drag direction threshold for y axis is twice as large as x axis + context.dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL; + + g.drawZoomRect_( + context.dragDirection, + context.dragStartX, + context.dragEndX, + context.dragStartY, + context.dragEndY, + context.prevDragDirection, + context.prevEndX, + context.prevEndY); + + context.prevEndX = context.dragEndX; + context.prevEndY = context.dragEndY; + context.prevDragDirection = context.dragDirection; +}; + +/** + * TODO(danvk): move this logic into dygraph.js + * @param {Dygraph} g + * @param {Event} event + * @param {Object} context + */ +Dygraph.Interaction.treatMouseOpAsClick = function(g, event, context) { + var clickCallback = g.getFunctionOption('clickCallback'); + var pointClickCallback = g.getFunctionOption('pointClickCallback'); + + var selectedPoint = null; + + // Find out if the click occurs on a point. + var closestIdx = -1; + var closestDistance = Number.MAX_VALUE; + + // check if the click was on a particular point. + for (var i = 0; i < g.selPoints_.length; i++) { + var p = g.selPoints_[i]; + var distance = Math.pow(p.canvasx - context.dragEndX, 2) + + Math.pow(p.canvasy - context.dragEndY, 2); + if (!isNaN(distance) && + (closestIdx == -1 || distance < closestDistance)) { + closestDistance = distance; + closestIdx = i; + } + } + + // Allow any click within two pixels of the dot. + var radius = g.getNumericOption('highlightCircleSize') + 2; + if (closestDistance <= radius * radius) { + selectedPoint = g.selPoints_[closestIdx]; + } + + if (selectedPoint) { + var e = { + cancelable: true, + point: selectedPoint, + canvasx: context.dragEndX, + canvasy: context.dragEndY + }; + var defaultPrevented = g.cascadeEvents_('pointClick', e); + if (defaultPrevented) { + // Note: this also prevents click / clickCallback from firing. + return; + } + if (pointClickCallback) { + pointClickCallback.call(g, event, selectedPoint); + } + } + + var e = { + cancelable: true, + xval: g.lastx_, // closest point by x value + pts: g.selPoints_, + canvasx: context.dragEndX, + canvasy: context.dragEndY + }; + if (!g.cascadeEvents_('click', e)) { + if (clickCallback) { + // TODO(danvk): pass along more info about the points, e.g. 'x' + clickCallback.call(g, event, g.lastx_, g.selPoints_); + } + } +}; + +/** + * Called in response to an interaction model operation that + * responds to an event that performs a zoom based on previously defined + * bounds.. + * + * It's used in the default callback for "mouseup" operations. + * Custom interaction model builders can use it to provide the default + * zooming behavior. + * + * @param {Event} event the event object which led to the endZoom call. + * @param {Dygraph} g The dygraph on which to end the zoom. + * @param {Object} context The dragging context object (with + * dragStartX/dragStartY/etc. properties). This function modifies the + * context. + */ +Dygraph.Interaction.endZoom = function(event, g, context) { + g.clearZoomRect_(); + context.isZooming = false; + Dygraph.Interaction.maybeTreatMouseOpAsClick(event, g, context); + + // The zoom rectangle is visibly clipped to the plot area, so its behavior + // should be as well. + // See http://code.google.com/p/dygraphs/issues/detail?id=280 + var plotArea = g.getArea(); + if (context.regionWidth >= 10 && + context.dragDirection == Dygraph.HORIZONTAL) { + var left = Math.min(context.dragStartX, context.dragEndX), + right = Math.max(context.dragStartX, context.dragEndX); + left = Math.max(left, plotArea.x); + right = Math.min(right, plotArea.x + plotArea.w); + if (left < right) { + g.doZoomX_(left, right); + } + context.cancelNextDblclick = true; + } else if (context.regionHeight >= 10 && + context.dragDirection == Dygraph.VERTICAL) { + var top = Math.min(context.dragStartY, context.dragEndY), + bottom = Math.max(context.dragStartY, context.dragEndY); + top = Math.max(top, plotArea.y); + bottom = Math.min(bottom, plotArea.y + plotArea.h); + if (top < bottom) { + g.doZoomY_(top, bottom); + } + context.cancelNextDblclick = true; + } + context.dragStartX = null; + context.dragStartY = null; +}; + +/** + * @private + */ +Dygraph.Interaction.startTouch = function(event, g, context) { + event.preventDefault(); // touch browsers are all nice. + if (event.touches.length > 1) { + // If the user ever puts two fingers down, it's not a double tap. + context.startTimeForDoubleTapMs = null; + } + + var touches = []; + for (var i = 0; i < event.touches.length; i++) { + var t = event.touches[i]; + // we dispense with 'dragGetX_' because all touchBrowsers support pageX + touches.push({ + pageX: t.pageX, + pageY: t.pageY, + dataX: g.toDataXCoord(t.pageX), + dataY: g.toDataYCoord(t.pageY) + // identifier: t.identifier + }); + } + context.initialTouches = touches; + + if (touches.length == 1) { + // This is just a swipe. + context.initialPinchCenter = touches[0]; + context.touchDirections = { x: true, y: true }; + } else if (touches.length >= 2) { + // It's become a pinch! + // In case there are 3+ touches, we ignore all but the "first" two. + + // only screen coordinates can be averaged (data coords could be log scale). + context.initialPinchCenter = { + pageX: 0.5 * (touches[0].pageX + touches[1].pageX), + pageY: 0.5 * (touches[0].pageY + touches[1].pageY), + + // TODO(danvk): remove + dataX: 0.5 * (touches[0].dataX + touches[1].dataX), + dataY: 0.5 * (touches[0].dataY + touches[1].dataY) + }; + + // Make pinches in a 45-degree swath around either axis 1-dimensional zooms. + var initialAngle = 180 / Math.PI * Math.atan2( + context.initialPinchCenter.pageY - touches[0].pageY, + touches[0].pageX - context.initialPinchCenter.pageX); + + // use symmetry to get it into the first quadrant. + initialAngle = Math.abs(initialAngle); + if (initialAngle > 90) initialAngle = 90 - initialAngle; + + context.touchDirections = { + x: (initialAngle < (90 - 45/2)), + y: (initialAngle > 45/2) + }; + } + + // save the full x & y ranges. + context.initialRange = { + x: g.xAxisRange(), + y: g.yAxisRange() + }; +}; + +/** + * @private + */ +Dygraph.Interaction.moveTouch = function(event, g, context) { + // If the tap moves, then it's definitely not part of a double-tap. + context.startTimeForDoubleTapMs = null; + + var i, touches = []; + for (i = 0; i < event.touches.length; i++) { + var t = event.touches[i]; + touches.push({ + pageX: t.pageX, + pageY: t.pageY + }); + } + var initialTouches = context.initialTouches; + + var c_now; + + // old and new centers. + var c_init = context.initialPinchCenter; + if (touches.length == 1) { + c_now = touches[0]; + } else { + c_now = { + pageX: 0.5 * (touches[0].pageX + touches[1].pageX), + pageY: 0.5 * (touches[0].pageY + touches[1].pageY) + }; + } + + // this is the "swipe" component + // we toss it out for now, but could use it in the future. + var swipe = { + pageX: c_now.pageX - c_init.pageX, + pageY: c_now.pageY - c_init.pageY + }; + var dataWidth = context.initialRange.x[1] - context.initialRange.x[0]; + var dataHeight = context.initialRange.y[0] - context.initialRange.y[1]; + swipe.dataX = (swipe.pageX / g.plotter_.area.w) * dataWidth; + swipe.dataY = (swipe.pageY / g.plotter_.area.h) * dataHeight; + var xScale, yScale; + + // The residual bits are usually split into scale & rotate bits, but we split + // them into x-scale and y-scale bits. + if (touches.length == 1) { + xScale = 1.0; + yScale = 1.0; + } else if (touches.length >= 2) { + var initHalfWidth = (initialTouches[1].pageX - c_init.pageX); + xScale = (touches[1].pageX - c_now.pageX) / initHalfWidth; + + var initHalfHeight = (initialTouches[1].pageY - c_init.pageY); + yScale = (touches[1].pageY - c_now.pageY) / initHalfHeight; + } + + // Clip scaling to [1/8, 8] to prevent too much blowup. + xScale = Math.min(8, Math.max(0.125, xScale)); + yScale = Math.min(8, Math.max(0.125, yScale)); + + var didZoom = false; + if (context.touchDirections.x) { + g.dateWindow_ = [ + c_init.dataX - swipe.dataX + (context.initialRange.x[0] - c_init.dataX) / xScale, + c_init.dataX - swipe.dataX + (context.initialRange.x[1] - c_init.dataX) / xScale + ]; + didZoom = true; + } + + if (context.touchDirections.y) { + for (i = 0; i < 1 /*g.axes_.length*/; i++) { + var axis = g.axes_[i]; + var logscale = g.attributes_.getForAxis("logscale", i); + if (logscale) { + // TODO(danvk): implement + } else { + axis.valueWindow = [ + c_init.dataY - swipe.dataY + (context.initialRange.y[0] - c_init.dataY) / yScale, + c_init.dataY - swipe.dataY + (context.initialRange.y[1] - c_init.dataY) / yScale + ]; + didZoom = true; + } + } + } + + g.drawGraph_(false); + + // We only call zoomCallback on zooms, not pans, to mirror desktop behavior. + if (didZoom && touches.length > 1 && g.getFunctionOption('zoomCallback')) { + var viewWindow = g.xAxisRange(); + g.getFunctionOption("zoomCallback").call(g, viewWindow[0], viewWindow[1], g.yAxisRanges()); + } +}; + +/** + * @private + */ +Dygraph.Interaction.endTouch = function(event, g, context) { + if (event.touches.length !== 0) { + // this is effectively a "reset" + Dygraph.Interaction.startTouch(event, g, context); + } else if (event.changedTouches.length == 1) { + // Could be part of a "double tap" + // The heuristic here is that it's a double-tap if the two touchend events + // occur within 500ms and within a 50x50 pixel box. + var now = new Date().getTime(); + var t = event.changedTouches[0]; + if (context.startTimeForDoubleTapMs && + now - context.startTimeForDoubleTapMs < 500 && + context.doubleTapX && Math.abs(context.doubleTapX - t.screenX) < 50 && + context.doubleTapY && Math.abs(context.doubleTapY - t.screenY) < 50) { + g.resetZoom(); + } else { + context.startTimeForDoubleTapMs = now; + context.doubleTapX = t.screenX; + context.doubleTapY = t.screenY; + } + } +}; + +// Determine the distance from x to [left, right]. +var distanceFromInterval = function(x, left, right) { + if (x < left) { + return left - x; + } else if (x > right) { + return x - right; + } else { + return 0; + } +}; + +/** + * Returns the number of pixels by which the event happens from the nearest + * edge of the chart. For events in the interior of the chart, this returns zero. + */ +var distanceFromChart = function(event, g) { + var chartPos = Dygraph.findPos(g.canvas_); + var box = { + left: chartPos.x, + right: chartPos.x + g.canvas_.offsetWidth, + top: chartPos.y, + bottom: chartPos.y + g.canvas_.offsetHeight + }; + + var pt = { + x: Dygraph.pageX(event), + y: Dygraph.pageY(event) + }; + + var dx = distanceFromInterval(pt.x, box.left, box.right), + dy = distanceFromInterval(pt.y, box.top, box.bottom); + return Math.max(dx, dy); +}; + +/** + * Default interation model for dygraphs. You can refer to specific elements of + * this when constructing your own interaction model, e.g.: + * g.updateOptions( { + * interactionModel: { + * mousedown: Dygraph.defaultInteractionModel.mousedown + * } + * } ); + */ +Dygraph.Interaction.defaultModel = { + // Track the beginning of drag events + mousedown: function(event, g, context) { + // Right-click should not initiate a zoom. + if (event.button && event.button == 2) return; + + context.initializeMouseDown(event, g, context); + + if (event.altKey || event.shiftKey) { + Dygraph.startPan(event, g, context); + } else { + Dygraph.startZoom(event, g, context); + } + + // Note: we register mousemove/mouseup on document to allow some leeway for + // events to move outside of the chart. Interaction model events get + // registered on the canvas, which is too small to allow this. + var mousemove = function(event) { + if (context.isZooming) { + // When the mouse moves >200px from the chart edge, cancel the zoom. + var d = distanceFromChart(event, g); + if (d < DRAG_EDGE_MARGIN) { + Dygraph.moveZoom(event, g, context); + } else { + if (context.dragEndX !== null) { + context.dragEndX = null; + context.dragEndY = null; + g.clearZoomRect_(); + } + } + } else if (context.isPanning) { + Dygraph.movePan(event, g, context); + } + }; + var mouseup = function(event) { + if (context.isZooming) { + if (context.dragEndX !== null) { + Dygraph.endZoom(event, g, context); + } else { + Dygraph.Interaction.maybeTreatMouseOpAsClick(event, g, context); + } + } else if (context.isPanning) { + Dygraph.endPan(event, g, context); + } + + Dygraph.removeEvent(document, 'mousemove', mousemove); + Dygraph.removeEvent(document, 'mouseup', mouseup); + context.destroy(); + }; + + g.addAndTrackEvent(document, 'mousemove', mousemove); + g.addAndTrackEvent(document, 'mouseup', mouseup); + }, + willDestroyContextMyself: true, + + touchstart: function(event, g, context) { + Dygraph.Interaction.startTouch(event, g, context); + }, + touchmove: function(event, g, context) { + Dygraph.Interaction.moveTouch(event, g, context); + }, + touchend: function(event, g, context) { + Dygraph.Interaction.endTouch(event, g, context); + }, + + // Disable zooming out if panning. + dblclick: function(event, g, context) { + if (context.cancelNextDblclick) { + context.cancelNextDblclick = false; + return; + } + + // Give plugins a chance to grab this event. + var e = { + canvasx: context.dragEndX, + canvasy: context.dragEndY + }; + if (g.cascadeEvents_('dblclick', e)) { + return; + } + + if (event.altKey || event.shiftKey) { + return; + } + g.resetZoom(); + } +}; + +Dygraph.DEFAULT_ATTRS.interactionModel = Dygraph.Interaction.defaultModel; + +// old ways of accessing these methods/properties +Dygraph.defaultInteractionModel = Dygraph.Interaction.defaultModel; +Dygraph.endZoom = Dygraph.Interaction.endZoom; +Dygraph.moveZoom = Dygraph.Interaction.moveZoom; +Dygraph.startZoom = Dygraph.Interaction.startZoom; +Dygraph.endPan = Dygraph.Interaction.endPan; +Dygraph.movePan = Dygraph.Interaction.movePan; +Dygraph.startPan = Dygraph.Interaction.startPan; + +Dygraph.Interaction.nonInteractiveModel_ = { + mousedown: function(event, g, context) { + context.initializeMouseDown(event, g, context); + }, + mouseup: Dygraph.Interaction.maybeTreatMouseOpAsClick +}; + +// Default interaction model when using the range selector. +Dygraph.Interaction.dragIsPanInteractionModel = { + mousedown: function(event, g, context) { + context.initializeMouseDown(event, g, context); + Dygraph.startPan(event, g, context); + }, + mousemove: function(event, g, context) { + if (context.isPanning) { + Dygraph.movePan(event, g, context); + } + }, + mouseup: function(event, g, context) { + if (context.isPanning) { + Dygraph.endPan(event, g, context); + } + } +}; + +})(); +/** + * @license + * Copyright 2011 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview Description of this file. + * @author danvk@google.com (Dan Vanderkam) + * + * A ticker is a function with the following interface: + * + * function(a, b, pixels, options_view, dygraph, forced_values); + * -> [ { v: tick1_v, label: tick1_label[, label_v: label_v1] }, + * { v: tick2_v, label: tick2_label[, label_v: label_v2] }, + * ... + * ] + * + * The returned value is called a "tick list". + * + * Arguments + * --------- + * + * [a, b] is the range of the axis for which ticks are being generated. For a + * numeric axis, these will simply be numbers. For a date axis, these will be + * millis since epoch (convertable to Date objects using "new Date(a)" and "new + * Date(b)"). + * + * opts provides access to chart- and axis-specific options. It can be used to + * access number/date formatting code/options, check for a log scale, etc. + * + * pixels is the length of the axis in pixels. opts('pixelsPerLabel') is the + * minimum amount of space to be allotted to each label. For instance, if + * pixels=400 and opts('pixelsPerLabel')=40 then the ticker should return + * between zero and ten (400/40) ticks. + * + * dygraph is the Dygraph object for which an axis is being constructed. + * + * forced_values is used for secondary y-axes. The tick positions are typically + * set by the primary y-axis, so the secondary y-axis has no choice in where to + * put these. It simply has to generate labels for these data values. + * + * Tick lists + * ---------- + * Typically a tick will have both a grid/tick line and a label at one end of + * that line (at the bottom for an x-axis, at left or right for the y-axis). + * + * A tick may be missing one of these two components: + * - If "label_v" is specified instead of "v", then there will be no tick or + * gridline, just a label. + * - Similarly, if "label" is not specified, then there will be a gridline + * without a label. + * + * This flexibility is useful in a few situations: + * - For log scales, some of the tick lines may be too close to all have labels. + * - For date scales where years are being displayed, it is desirable to display + * tick marks at the beginnings of years but labels (e.g. "2006") in the + * middle of the years. + */ + +/*jshint sub:true */ +/*global Dygraph:false */ +(function() { +"use strict"; + +/** @typedef {Array.<{v:number, label:string, label_v:(string|undefined)}>} */ +Dygraph.TickList = undefined; // the ' = undefined' keeps jshint happy. + +/** @typedef {function( + * number, + * number, + * number, + * function(string):*, + * Dygraph=, + * Array.<number>= + * ): Dygraph.TickList} + */ +Dygraph.Ticker = undefined; // the ' = undefined' keeps jshint happy. + +/** @type {Dygraph.Ticker} */ +Dygraph.numericLinearTicks = function(a, b, pixels, opts, dygraph, vals) { + var nonLogscaleOpts = function(opt) { + if (opt === 'logscale') return false; + return opts(opt); + }; + return Dygraph.numericTicks(a, b, pixels, nonLogscaleOpts, dygraph, vals); +}; + +/** @type {Dygraph.Ticker} */ +Dygraph.numericTicks = function(a, b, pixels, opts, dygraph, vals) { + var pixels_per_tick = /** @type{number} */(opts('pixelsPerLabel')); + var ticks = []; + var i, j, tickV, nTicks; + if (vals) { + for (i = 0; i < vals.length; i++) { + ticks.push({v: vals[i]}); + } + } else { + // TODO(danvk): factor this log-scale block out into a separate function. + if (opts("logscale")) { + nTicks = Math.floor(pixels / pixels_per_tick); + var minIdx = Dygraph.binarySearch(a, Dygraph.PREFERRED_LOG_TICK_VALUES, 1); + var maxIdx = Dygraph.binarySearch(b, Dygraph.PREFERRED_LOG_TICK_VALUES, -1); + if (minIdx == -1) { + minIdx = 0; + } + if (maxIdx == -1) { + maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1; + } + // Count the number of tick values would appear, if we can get at least + // nTicks / 4 accept them. + var lastDisplayed = null; + if (maxIdx - minIdx >= nTicks / 4) { + for (var idx = maxIdx; idx >= minIdx; idx--) { + var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx]; + var pixel_coord = Math.log(tickValue / a) / Math.log(b / a) * pixels; + var tick = { v: tickValue }; + if (lastDisplayed === null) { + lastDisplayed = { + tickValue : tickValue, + pixel_coord : pixel_coord + }; + } else { + if (Math.abs(pixel_coord - lastDisplayed.pixel_coord) >= pixels_per_tick) { + lastDisplayed = { + tickValue : tickValue, + pixel_coord : pixel_coord + }; + } else { + tick.label = ""; + } + } + ticks.push(tick); + } + // Since we went in backwards order. + ticks.reverse(); + } + } + + // ticks.length won't be 0 if the log scale function finds values to insert. + if (ticks.length === 0) { + // Basic idea: + // Try labels every 1, 2, 5, 10, 20, 50, 100, etc. + // Calculate the resulting tick spacing (i.e. this.height_ / nTicks). + // The first spacing greater than pixelsPerYLabel is what we use. + // TODO(danvk): version that works on a log scale. + var kmg2 = opts("labelsKMG2"); + var mults, base; + if (kmg2) { + mults = [1, 2, 4, 8, 16, 32, 64, 128, 256]; + base = 16; + } else { + mults = [1, 2, 5, 10, 20, 50, 100]; + base = 10; + } + + // Get the maximum number of permitted ticks based on the + // graph's pixel size and pixels_per_tick setting. + var max_ticks = Math.ceil(pixels / pixels_per_tick); + + // Now calculate the data unit equivalent of this tick spacing. + // Use abs() since graphs may have a reversed Y axis. + var units_per_tick = Math.abs(b - a) / max_ticks; + + // Based on this, get a starting scale which is the largest + // integer power of the chosen base (10 or 16) that still remains + // below the requested pixels_per_tick spacing. + var base_power = Math.floor(Math.log(units_per_tick) / Math.log(base)); + var base_scale = Math.pow(base, base_power); + + // Now try multiples of the starting scale until we find one + // that results in tick marks spaced sufficiently far apart. + // The "mults" array should cover the range 1 .. base^2 to + // adjust for rounding and edge effects. + var scale, low_val, high_val, spacing; + for (j = 0; j < mults.length; j++) { + scale = base_scale * mults[j]; + low_val = Math.floor(a / scale) * scale; + high_val = Math.ceil(b / scale) * scale; + nTicks = Math.abs(high_val - low_val) / scale; + spacing = pixels / nTicks; + if (spacing > pixels_per_tick) break; + } + + // Construct the set of ticks. + // Allow reverse y-axis if it's explicitly requested. + if (low_val > high_val) scale *= -1; + for (i = 0; i <= nTicks; i++) { + tickV = low_val + i * scale; + ticks.push( {v: tickV} ); + } + } + } + + var formatter = /**@type{AxisLabelFormatter}*/(opts('axisLabelFormatter')); + + // Add labels to the ticks. + for (i = 0; i < ticks.length; i++) { + if (ticks[i].label !== undefined) continue; // Use current label. + // TODO(danvk): set granularity to something appropriate here. + ticks[i].label = formatter(ticks[i].v, 0, opts, dygraph); + } + + return ticks; +}; + + +/** @type {Dygraph.Ticker} */ +Dygraph.dateTicker = function(a, b, pixels, opts, dygraph, vals) { + var chosen = Dygraph.pickDateTickGranularity(a, b, pixels, opts); + + if (chosen >= 0) { + return Dygraph.getDateAxis(a, b, chosen, opts, dygraph); + } else { + // this can happen if self.width_ is zero. + return []; + } +}; + +// Time granularity enumeration +// TODO(danvk): make this an @enum +Dygraph.SECONDLY = 0; +Dygraph.TWO_SECONDLY = 1; +Dygraph.FIVE_SECONDLY = 2; +Dygraph.TEN_SECONDLY = 3; +Dygraph.THIRTY_SECONDLY = 4; +Dygraph.MINUTELY = 5; +Dygraph.TWO_MINUTELY = 6; +Dygraph.FIVE_MINUTELY = 7; +Dygraph.TEN_MINUTELY = 8; +Dygraph.THIRTY_MINUTELY = 9; +Dygraph.HOURLY = 10; +Dygraph.TWO_HOURLY = 11; +Dygraph.SIX_HOURLY = 12; +Dygraph.DAILY = 13; +Dygraph.TWO_DAILY = 14; +Dygraph.WEEKLY = 15; +Dygraph.MONTHLY = 16; +Dygraph.QUARTERLY = 17; +Dygraph.BIANNUAL = 18; +Dygraph.ANNUAL = 19; +Dygraph.DECADAL = 20; +Dygraph.CENTENNIAL = 21; +Dygraph.NUM_GRANULARITIES = 22; + +// Date components enumeration (in the order of the arguments in Date) +// TODO: make this an @enum +Dygraph.DATEFIELD_Y = 0; +Dygraph.DATEFIELD_M = 1; +Dygraph.DATEFIELD_D = 2; +Dygraph.DATEFIELD_HH = 3; +Dygraph.DATEFIELD_MM = 4; +Dygraph.DATEFIELD_SS = 5; +Dygraph.DATEFIELD_MS = 6; +Dygraph.NUM_DATEFIELDS = 7; + + +/** + * The value of datefield will start at an even multiple of "step", i.e. + * if datefield=SS and step=5 then the first tick will be on a multiple of 5s. + * + * For granularities <= HOURLY, ticks are generated every `spacing` ms. + * + * At coarser granularities, ticks are generated by incrementing `datefield` by + * `step`. In this case, the `spacing` value is only used to estimate the + * number of ticks. It should roughly correspond to the spacing between + * adjacent ticks. + * + * @type {Array.<{datefield:number, step:number, spacing:number}>} + */ +Dygraph.TICK_PLACEMENT = []; +Dygraph.TICK_PLACEMENT[Dygraph.SECONDLY] = {datefield: Dygraph.DATEFIELD_SS, step: 1, spacing: 1000 * 1}; +Dygraph.TICK_PLACEMENT[Dygraph.TWO_SECONDLY] = {datefield: Dygraph.DATEFIELD_SS, step: 2, spacing: 1000 * 2}; +Dygraph.TICK_PLACEMENT[Dygraph.FIVE_SECONDLY] = {datefield: Dygraph.DATEFIELD_SS, step: 5, spacing: 1000 * 5}; +Dygraph.TICK_PLACEMENT[Dygraph.TEN_SECONDLY] = {datefield: Dygraph.DATEFIELD_SS, step: 10, spacing: 1000 * 10}; +Dygraph.TICK_PLACEMENT[Dygraph.THIRTY_SECONDLY] = {datefield: Dygraph.DATEFIELD_SS, step: 30, spacing: 1000 * 30}; +Dygraph.TICK_PLACEMENT[Dygraph.MINUTELY] = {datefield: Dygraph.DATEFIELD_MM, step: 1, spacing: 1000 * 60}; +Dygraph.TICK_PLACEMENT[Dygraph.TWO_MINUTELY] = {datefield: Dygraph.DATEFIELD_MM, step: 2, spacing: 1000 * 60 * 2}; +Dygraph.TICK_PLACEMENT[Dygraph.FIVE_MINUTELY] = {datefield: Dygraph.DATEFIELD_MM, step: 5, spacing: 1000 * 60 * 5}; +Dygraph.TICK_PLACEMENT[Dygraph.TEN_MINUTELY] = {datefield: Dygraph.DATEFIELD_MM, step: 10, spacing: 1000 * 60 * 10}; +Dygraph.TICK_PLACEMENT[Dygraph.THIRTY_MINUTELY] = {datefield: Dygraph.DATEFIELD_MM, step: 30, spacing: 1000 * 60 * 30}; +Dygraph.TICK_PLACEMENT[Dygraph.HOURLY] = {datefield: Dygraph.DATEFIELD_HH, step: 1, spacing: 1000 * 3600}; +Dygraph.TICK_PLACEMENT[Dygraph.TWO_HOURLY] = {datefield: Dygraph.DATEFIELD_HH, step: 2, spacing: 1000 * 3600 * 2}; +Dygraph.TICK_PLACEMENT[Dygraph.SIX_HOURLY] = {datefield: Dygraph.DATEFIELD_HH, step: 6, spacing: 1000 * 3600 * 6}; +Dygraph.TICK_PLACEMENT[Dygraph.DAILY] = {datefield: Dygraph.DATEFIELD_D, step: 1, spacing: 1000 * 86400}; +Dygraph.TICK_PLACEMENT[Dygraph.TWO_DAILY] = {datefield: Dygraph.DATEFIELD_D, step: 2, spacing: 1000 * 86400 * 2}; +Dygraph.TICK_PLACEMENT[Dygraph.WEEKLY] = {datefield: Dygraph.DATEFIELD_D, step: 7, spacing: 1000 * 604800}; +Dygraph.TICK_PLACEMENT[Dygraph.MONTHLY] = {datefield: Dygraph.DATEFIELD_M, step: 1, spacing: 1000 * 7200 * 365.2524}; // 1e3 * 60 * 60 * 24 * 365.2524 / 12 +Dygraph.TICK_PLACEMENT[Dygraph.QUARTERLY] = {datefield: Dygraph.DATEFIELD_M, step: 3, spacing: 1000 * 21600 * 365.2524}; // 1e3 * 60 * 60 * 24 * 365.2524 / 4 +Dygraph.TICK_PLACEMENT[Dygraph.BIANNUAL] = {datefield: Dygraph.DATEFIELD_M, step: 6, spacing: 1000 * 43200 * 365.2524}; // 1e3 * 60 * 60 * 24 * 365.2524 / 2 +Dygraph.TICK_PLACEMENT[Dygraph.ANNUAL] = {datefield: Dygraph.DATEFIELD_Y, step: 1, spacing: 1000 * 86400 * 365.2524}; // 1e3 * 60 * 60 * 24 * 365.2524 * 1 +Dygraph.TICK_PLACEMENT[Dygraph.DECADAL] = {datefield: Dygraph.DATEFIELD_Y, step: 10, spacing: 1000 * 864000 * 365.2524}; // 1e3 * 60 * 60 * 24 * 365.2524 * 10 +Dygraph.TICK_PLACEMENT[Dygraph.CENTENNIAL] = {datefield: Dygraph.DATEFIELD_Y, step: 100, spacing: 1000 * 8640000 * 365.2524}; // 1e3 * 60 * 60 * 24 * 365.2524 * 100 + + +/** + * This is a list of human-friendly values at which to show tick marks on a log + * scale. It is k * 10^n, where k=1..9 and n=-39..+39, so: + * ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ... + * NOTE: this assumes that Dygraph.LOG_SCALE = 10. + * @type {Array.<number>} + */ +Dygraph.PREFERRED_LOG_TICK_VALUES = (function() { + var vals = []; + for (var power = -39; power <= 39; power++) { + var range = Math.pow(10, power); + for (var mult = 1; mult <= 9; mult++) { + var val = range * mult; + vals.push(val); + } + } + return vals; +})(); + +/** + * Determine the correct granularity of ticks on a date axis. + * + * @param {number} a Left edge of the chart (ms) + * @param {number} b Right edge of the chart (ms) + * @param {number} pixels Size of the chart in the relevant dimension (width). + * @param {function(string):*} opts Function mapping from option name -> value. + * @return {number} The appropriate axis granularity for this chart. See the + * enumeration of possible values in dygraph-tickers.js. + */ +Dygraph.pickDateTickGranularity = function(a, b, pixels, opts) { + var pixels_per_tick = /** @type{number} */(opts('pixelsPerLabel')); + for (var i = 0; i < Dygraph.NUM_GRANULARITIES; i++) { + var num_ticks = Dygraph.numDateTicks(a, b, i); + if (pixels / num_ticks >= pixels_per_tick) { + return i; + } + } + return -1; +}; + +/** + * Compute the number of ticks on a date axis for a given granularity. + * @param {number} start_time + * @param {number} end_time + * @param {number} granularity (one of the granularities enumerated above) + * @return {number} (Approximate) number of ticks that would result. + */ +Dygraph.numDateTicks = function(start_time, end_time, granularity) { + var spacing = Dygraph.TICK_PLACEMENT[granularity].spacing; + return Math.round(1.0 * (end_time - start_time) / spacing); +}; + +/** + * Compute the positions and labels of ticks on a date axis for a given granularity. + * @param {number} start_time + * @param {number} end_time + * @param {number} granularity (one of the granularities enumerated above) + * @param {function(string):*} opts Function mapping from option name -> value. + * @param {Dygraph=} dg + * @return {!Dygraph.TickList} + */ +Dygraph.getDateAxis = function(start_time, end_time, granularity, opts, dg) { + var formatter = /** @type{AxisLabelFormatter} */( + opts("axisLabelFormatter")); + var utc = opts("labelsUTC"); + var accessors = utc ? Dygraph.DateAccessorsUTC : Dygraph.DateAccessorsLocal; + + var datefield = Dygraph.TICK_PLACEMENT[granularity].datefield; + var step = Dygraph.TICK_PLACEMENT[granularity].step; + var spacing = Dygraph.TICK_PLACEMENT[granularity].spacing; + + // Choose a nice tick position before the initial instant. + // Currently, this code deals properly with the existent daily granularities: + // DAILY (with step of 1) and WEEKLY (with step of 7 but specially handled). + // Other daily granularities (say TWO_DAILY) should also be handled specially + // by setting the start_date_offset to 0. + var start_date = new Date(start_time); + var date_array = []; + date_array[Dygraph.DATEFIELD_Y] = accessors.getFullYear(start_date); + date_array[Dygraph.DATEFIELD_M] = accessors.getMonth(start_date); + date_array[Dygraph.DATEFIELD_D] = accessors.getDate(start_date); + date_array[Dygraph.DATEFIELD_HH] = accessors.getHours(start_date); + date_array[Dygraph.DATEFIELD_MM] = accessors.getMinutes(start_date); + date_array[Dygraph.DATEFIELD_SS] = accessors.getSeconds(start_date); + date_array[Dygraph.DATEFIELD_MS] = accessors.getMilliseconds(start_date); + + var start_date_offset = date_array[datefield] % step; + if (granularity == Dygraph.WEEKLY) { + // This will put the ticks on Sundays. + start_date_offset = accessors.getDay(start_date); + } + + date_array[datefield] -= start_date_offset; + for (var df = datefield + 1; df < Dygraph.NUM_DATEFIELDS; df++) { + // The minimum value is 1 for the day of month, and 0 for all other fields. + date_array[df] = (df === Dygraph.DATEFIELD_D) ? 1 : 0; + } + + // Generate the ticks. + // For granularities not coarser than HOURLY we use the fact that: + // the number of milliseconds between ticks is constant + // and equal to the defined spacing. + // Otherwise we rely on the 'roll over' property of the Date functions: + // when some date field is set to a value outside of its logical range, + // the excess 'rolls over' the next (more significant) field. + // However, when using local time with DST transitions, + // there are dates that do not represent any time value at all + // (those in the hour skipped at the 'spring forward'), + // and the JavaScript engines usually return an equivalent value. + // Hence we have to check that the date is properly increased at each step, + // returning a date at a nice tick position. + var ticks = []; + var tick_date = accessors.makeDate.apply(null, date_array); + var tick_time = tick_date.getTime(); + if (granularity <= Dygraph.HOURLY) { + if (tick_time < start_time) { + tick_time += spacing; + tick_date = new Date(tick_time); + } + while (tick_time <= end_time) { + ticks.push({ v: tick_time, + label: formatter(tick_date, granularity, opts, dg) + }); + tick_time += spacing; + tick_date = new Date(tick_time); + } + } else { + if (tick_time < start_time) { + date_array[datefield] += step; + tick_date = accessors.makeDate.apply(null, date_array); + tick_time = tick_date.getTime(); + } + while (tick_time <= end_time) { + if (granularity >= Dygraph.DAILY || + accessors.getHours(tick_date) % step === 0) { + ticks.push({ v: tick_time, + label: formatter(tick_date, granularity, opts, dg) + }); + } + date_array[datefield] += step; + tick_date = accessors.makeDate.apply(null, date_array); + tick_time = tick_date.getTime(); + } + } + return ticks; +}; + +// These are set here so that this file can be included after dygraph.js +// or independently. +if (Dygraph && + Dygraph.DEFAULT_ATTRS && + Dygraph.DEFAULT_ATTRS['axes'] && + Dygraph.DEFAULT_ATTRS['axes']['x'] && + Dygraph.DEFAULT_ATTRS['axes']['y'] && + Dygraph.DEFAULT_ATTRS['axes']['y2']) { + Dygraph.DEFAULT_ATTRS['axes']['x']['ticker'] = Dygraph.dateTicker; + Dygraph.DEFAULT_ATTRS['axes']['y']['ticker'] = Dygraph.numericTicks; + Dygraph.DEFAULT_ATTRS['axes']['y2']['ticker'] = Dygraph.numericTicks; +} + +})(); +/*global Dygraph:false */ + +// Namespace for plugins. Load this before plugins/*.js files. +Dygraph.Plugins = {}; +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/*global Dygraph:false */ + +Dygraph.Plugins.Annotations = (function() { + +"use strict"; + +/** +Current bits of jankiness: +- Uses dygraph.layout_ to get the parsed annotations. +- Uses dygraph.plotter_.area + +It would be nice if the plugin didn't require so much special support inside +the core dygraphs classes, but annotations involve quite a bit of parsing and +layout. + +TODO(danvk): cache DOM elements. + +*/ + +var annotations = function() { + this.annotations_ = []; +}; + +annotations.prototype.toString = function() { + return "Annotations Plugin"; +}; + +annotations.prototype.activate = function(g) { + return { + clearChart: this.clearChart, + didDrawChart: this.didDrawChart + }; +}; + +annotations.prototype.detachLabels = function() { + for (var i = 0; i < this.annotations_.length; i++) { + var a = this.annotations_[i]; + if (a.parentNode) a.parentNode.removeChild(a); + this.annotations_[i] = null; + } + this.annotations_ = []; +}; + +annotations.prototype.clearChart = function(e) { + this.detachLabels(); +}; + +annotations.prototype.didDrawChart = function(e) { + var g = e.dygraph; + + // Early out in the (common) case of zero annotations. + var points = g.layout_.annotated_points; + if (!points || points.length === 0) return; + + var containerDiv = e.canvas.parentNode; + var annotationStyle = { + "position": "absolute", + "fontSize": g.getOption('axisLabelFontSize') + "px", + "zIndex": 10, + "overflow": "hidden" + }; + + var bindEvt = function(eventName, classEventName, pt) { + return function(annotation_event) { + var a = pt.annotation; + if (a.hasOwnProperty(eventName)) { + a[eventName](a, pt, g, annotation_event); + } else if (g.getOption(classEventName)) { + g.getOption(classEventName)(a, pt, g, annotation_event ); + } + }; + }; + + // Add the annotations one-by-one. + var area = e.dygraph.plotter_.area; + + // x-coord to sum of previous annotation's heights (used for stacking). + var xToUsedHeight = {}; + + for (var i = 0; i < points.length; i++) { + var p = points[i]; + if (p.canvasx < area.x || p.canvasx > area.x + area.w || + p.canvasy < area.y || p.canvasy > area.y + area.h) { + continue; + } + + var a = p.annotation; + var tick_height = 6; + if (a.hasOwnProperty("tickHeight")) { + tick_height = a.tickHeight; + } + + var div = document.createElement("div"); + for (var name in annotationStyle) { + if (annotationStyle.hasOwnProperty(name)) { + div.style[name] = annotationStyle[name]; + } + } + if (!a.hasOwnProperty('icon')) { + div.className = "dygraphDefaultAnnotation"; + } + if (a.hasOwnProperty('cssClass')) { + div.className += " " + a.cssClass; + } + + var width = a.hasOwnProperty('width') ? a.width : 16; + var height = a.hasOwnProperty('height') ? a.height : 16; + if (a.hasOwnProperty('icon')) { + var img = document.createElement("img"); + img.src = a.icon; + img.width = width; + img.height = height; + div.appendChild(img); + } else if (p.annotation.hasOwnProperty('shortText')) { + div.appendChild(document.createTextNode(p.annotation.shortText)); + } + var left = p.canvasx - width / 2; + div.style.left = left + "px"; + var divTop = 0; + if (a.attachAtBottom) { + var y = (area.y + area.h - height - tick_height); + if (xToUsedHeight[left]) { + y -= xToUsedHeight[left]; + } else { + xToUsedHeight[left] = 0; + } + xToUsedHeight[left] += (tick_height + height); + divTop = y; + } else { + divTop = p.canvasy - height - tick_height; + } + div.style.top = divTop + "px"; + div.style.width = width + "px"; + div.style.height = height + "px"; + div.title = p.annotation.text; + div.style.color = g.colorsMap_[p.name]; + div.style.borderColor = g.colorsMap_[p.name]; + a.div = div; + + g.addAndTrackEvent(div, 'click', + bindEvt('clickHandler', 'annotationClickHandler', p, this)); + g.addAndTrackEvent(div, 'mouseover', + bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this)); + g.addAndTrackEvent(div, 'mouseout', + bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this)); + g.addAndTrackEvent(div, 'dblclick', + bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this)); + + containerDiv.appendChild(div); + this.annotations_.push(div); + + var ctx = e.drawingContext; + ctx.save(); + ctx.strokeStyle = g.colorsMap_[p.name]; + ctx.beginPath(); + if (!a.attachAtBottom) { + ctx.moveTo(p.canvasx, p.canvasy); + ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height); + } else { + var y = divTop + height; + ctx.moveTo(p.canvasx, y); + ctx.lineTo(p.canvasx, y + tick_height); + } + ctx.closePath(); + ctx.stroke(); + ctx.restore(); + } +}; + +annotations.prototype.destroy = function() { + this.detachLabels(); +}; + +return annotations; + +})(); +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/*global Dygraph:false */ + +Dygraph.Plugins.Axes = (function() { + +'use strict'; + +/* +Bits of jankiness: +- Direct layout access +- Direct area access +- Should include calculation of ticks, not just the drawing. + +Options left to make axis-friendly. + ('drawAxesAtZero') + ('xAxisHeight') +*/ + +/** + * Draws the axes. This includes the labels on the x- and y-axes, as well + * as the tick marks on the axes. + * It does _not_ draw the grid lines which span the entire chart. + */ +var axes = function() { + this.xlabels_ = []; + this.ylabels_ = []; +}; + +axes.prototype.toString = function() { + return 'Axes Plugin'; +}; + +axes.prototype.activate = function(g) { + return { + layout: this.layout, + clearChart: this.clearChart, + willDrawChart: this.willDrawChart + }; +}; + +axes.prototype.layout = function(e) { + var g = e.dygraph; + + if (g.getOptionForAxis('drawAxis', 'y')) { + var w = g.getOptionForAxis('axisLabelWidth', 'y') + 2 * g.getOptionForAxis('axisTickSize', 'y'); + e.reserveSpaceLeft(w); + } + + if (g.getOptionForAxis('drawAxis', 'x')) { + var h; + // NOTE: I think this is probably broken now, since g.getOption() now + // hits the dictionary. (That is, g.getOption('xAxisHeight') now always + // has a value.) + if (g.getOption('xAxisHeight')) { + h = g.getOption('xAxisHeight'); + } else { + h = g.getOptionForAxis('axisLabelFontSize', 'x') + 2 * g.getOptionForAxis('axisTickSize', 'x'); + } + e.reserveSpaceBottom(h); + } + + if (g.numAxes() == 2) { + if (g.getOptionForAxis('drawAxis', 'y2')) { + var w = g.getOptionForAxis('axisLabelWidth', 'y2') + 2 * g.getOptionForAxis('axisTickSize', 'y2'); + e.reserveSpaceRight(w); + } + } else if (g.numAxes() > 2) { + g.error('Only two y-axes are supported at this time. (Trying ' + + 'to use ' + g.numAxes() + ')'); + } +}; + +axes.prototype.detachLabels = function() { + function removeArray(ary) { + for (var i = 0; i < ary.length; i++) { + var el = ary[i]; + if (el.parentNode) el.parentNode.removeChild(el); + } + } + + removeArray(this.xlabels_); + removeArray(this.ylabels_); + this.xlabels_ = []; + this.ylabels_ = []; +}; + +axes.prototype.clearChart = function(e) { + this.detachLabels(); +}; + +axes.prototype.willDrawChart = function(e) { + var g = e.dygraph; + + if (!g.getOptionForAxis('drawAxis', 'x') && + !g.getOptionForAxis('drawAxis', 'y') && + !g.getOptionForAxis('drawAxis', 'y2')) { + return; + } + + // Round pixels to half-integer boundaries for crisper drawing. + function halfUp(x) { return Math.round(x) + 0.5; } + function halfDown(y){ return Math.round(y) - 0.5; } + + var context = e.drawingContext; + var containerDiv = e.canvas.parentNode; + var canvasWidth = g.width_; // e.canvas.width is affected by pixel ratio. + var canvasHeight = g.height_; + + var label, x, y, tick, i; + + var makeLabelStyle = function(axis) { + return { + position: 'absolute', + fontSize: g.getOptionForAxis('axisLabelFontSize', axis) + 'px', + zIndex: 10, + color: g.getOptionForAxis('axisLabelColor', axis), + width: g.getOptionForAxis('axisLabelWidth', axis) + 'px', + // height: g.getOptionForAxis('axisLabelFontSize', 'x') + 2 + "px", + lineHeight: 'normal', // Something other than "normal" line-height screws up label positioning. + overflow: 'hidden' + }; + }; + + var labelStyles = { + x : makeLabelStyle('x'), + y : makeLabelStyle('y'), + y2 : makeLabelStyle('y2') + }; + + var makeDiv = function(txt, axis, prec_axis) { + /* + * This seems to be called with the following three sets of axis/prec_axis: + * x: undefined + * y: y1 + * y: y2 + */ + var div = document.createElement('div'); + var labelStyle = labelStyles[prec_axis == 'y2' ? 'y2' : axis]; + for (var name in labelStyle) { + if (labelStyle.hasOwnProperty(name)) { + div.style[name] = labelStyle[name]; + } + } + var inner_div = document.createElement('div'); + inner_div.className = 'dygraph-axis-label' + + ' dygraph-axis-label-' + axis + + (prec_axis ? ' dygraph-axis-label-' + prec_axis : ''); + inner_div.innerHTML = txt; + div.appendChild(inner_div); + return div; + }; + + // axis lines + context.save(); + + var layout = g.layout_; + var area = e.dygraph.plotter_.area; + + // Helper for repeated axis-option accesses. + var makeOptionGetter = function(axis) { + return function(option) { + return g.getOptionForAxis(option, axis); + }; + }; + + if (g.getOptionForAxis('drawAxis', 'y')) { + if (layout.yticks && layout.yticks.length > 0) { + var num_axes = g.numAxes(); + var getOptions = [makeOptionGetter('y'), makeOptionGetter('y2')]; + for (i = 0; i < layout.yticks.length; i++) { + tick = layout.yticks[i]; + if (typeof(tick) == 'function') return; // <-- when would this happen? + x = area.x; + var sgn = 1; + var prec_axis = 'y1'; + var getAxisOption = getOptions[0]; + if (tick[0] == 1) { // right-side y-axis + x = area.x + area.w; + sgn = -1; + prec_axis = 'y2'; + getAxisOption = getOptions[1]; + } + var fontSize = getAxisOption('axisLabelFontSize'); + y = area.y + tick[1] * area.h; + + /* Tick marks are currently clipped, so don't bother drawing them. + context.beginPath(); + context.moveTo(halfUp(x), halfDown(y)); + context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y)); + context.closePath(); + context.stroke(); + */ + + label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null); + var top = (y - fontSize / 2); + if (top < 0) top = 0; + + if (top + fontSize + 3 > canvasHeight) { + label.style.bottom = '0'; + } else { + label.style.top = top + 'px'; + } + if (tick[0] === 0) { + label.style.left = (area.x - getAxisOption('axisLabelWidth') - getAxisOption('axisTickSize')) + 'px'; + label.style.textAlign = 'right'; + } else if (tick[0] == 1) { + label.style.left = (area.x + area.w + + getAxisOption('axisTickSize')) + 'px'; + label.style.textAlign = 'left'; + } + label.style.width = getAxisOption('axisLabelWidth') + 'px'; + containerDiv.appendChild(label); + this.ylabels_.push(label); + } + + // The lowest tick on the y-axis often overlaps with the leftmost + // tick on the x-axis. Shift the bottom tick up a little bit to + // compensate if necessary. + var bottomTick = this.ylabels_[0]; + // Interested in the y2 axis also? + var fontSize = g.getOptionForAxis('axisLabelFontSize', 'y'); + var bottom = parseInt(bottomTick.style.top, 10) + fontSize; + if (bottom > canvasHeight - fontSize) { + bottomTick.style.top = (parseInt(bottomTick.style.top, 10) - + fontSize / 2) + 'px'; + } + } + + // draw a vertical line on the left to separate the chart from the labels. + var axisX; + if (g.getOption('drawAxesAtZero')) { + var r = g.toPercentXCoord(0); + if (r > 1 || r < 0 || isNaN(r)) r = 0; + axisX = halfUp(area.x + r * area.w); + } else { + axisX = halfUp(area.x); + } + + context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y'); + context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y'); + + context.beginPath(); + context.moveTo(axisX, halfDown(area.y)); + context.lineTo(axisX, halfDown(area.y + area.h)); + context.closePath(); + context.stroke(); + + // if there's a secondary y-axis, draw a vertical line for that, too. + if (g.numAxes() == 2) { + context.strokeStyle = g.getOptionForAxis('axisLineColor', 'y2'); + context.lineWidth = g.getOptionForAxis('axisLineWidth', 'y2'); + context.beginPath(); + context.moveTo(halfDown(area.x + area.w), halfDown(area.y)); + context.lineTo(halfDown(area.x + area.w), halfDown(area.y + area.h)); + context.closePath(); + context.stroke(); + } + } + + if (g.getOptionForAxis('drawAxis', 'x')) { + if (layout.xticks) { + var getAxisOption = makeOptionGetter('x'); + for (i = 0; i < layout.xticks.length; i++) { + tick = layout.xticks[i]; + x = area.x + tick[0] * area.w; + y = area.y + area.h; + + /* Tick marks are currently clipped, so don't bother drawing them. + context.beginPath(); + context.moveTo(halfUp(x), halfDown(y)); + context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize'))); + context.closePath(); + context.stroke(); + */ + + label = makeDiv(tick[1], 'x'); + label.style.textAlign = 'center'; + label.style.top = (y + getAxisOption('axisTickSize')) + 'px'; + + var left = (x - getAxisOption('axisLabelWidth')/2); + if (left + getAxisOption('axisLabelWidth') > canvasWidth) { + left = canvasWidth - getAxisOption('axisLabelWidth'); + label.style.textAlign = 'right'; + } + if (left < 0) { + left = 0; + label.style.textAlign = 'left'; + } + + label.style.left = left + 'px'; + label.style.width = getAxisOption('axisLabelWidth') + 'px'; + containerDiv.appendChild(label); + this.xlabels_.push(label); + } + } + + context.strokeStyle = g.getOptionForAxis('axisLineColor', 'x'); + context.lineWidth = g.getOptionForAxis('axisLineWidth', 'x'); + context.beginPath(); + var axisY; + if (g.getOption('drawAxesAtZero')) { + var r = g.toPercentYCoord(0, 0); + if (r > 1 || r < 0) r = 1; + axisY = halfDown(area.y + r * area.h); + } else { + axisY = halfDown(area.y + area.h); + } + context.moveTo(halfUp(area.x), axisY); + context.lineTo(halfUp(area.x + area.w), axisY); + context.closePath(); + context.stroke(); + } + + context.restore(); +}; + +return axes; +})(); +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ +/*global Dygraph:false */ + +Dygraph.Plugins.ChartLabels = (function() { + +"use strict"; + +// TODO(danvk): move chart label options out of dygraphs and into the plugin. +// TODO(danvk): only tear down & rebuild the DIVs when it's necessary. + +var chart_labels = function() { + this.title_div_ = null; + this.xlabel_div_ = null; + this.ylabel_div_ = null; + this.y2label_div_ = null; +}; + +chart_labels.prototype.toString = function() { + return "ChartLabels Plugin"; +}; + +chart_labels.prototype.activate = function(g) { + return { + layout: this.layout, + // clearChart: this.clearChart, + didDrawChart: this.didDrawChart + }; +}; + +// QUESTION: should there be a plugin-utils.js? +var createDivInRect = function(r) { + var div = document.createElement('div'); + div.style.position = 'absolute'; + div.style.left = r.x + 'px'; + div.style.top = r.y + 'px'; + div.style.width = r.w + 'px'; + div.style.height = r.h + 'px'; + return div; +}; + +// Detach and null out any existing nodes. +chart_labels.prototype.detachLabels_ = function() { + var els = [ this.title_div_, + this.xlabel_div_, + this.ylabel_div_, + this.y2label_div_ ]; + for (var i = 0; i < els.length; i++) { + var el = els[i]; + if (!el) continue; + if (el.parentNode) el.parentNode.removeChild(el); + } + + this.title_div_ = null; + this.xlabel_div_ = null; + this.ylabel_div_ = null; + this.y2label_div_ = null; +}; + +var createRotatedDiv = function(g, box, axis, classes, html) { + // TODO(danvk): is this outer div actually necessary? + var div = document.createElement("div"); + div.style.position = 'absolute'; + if (axis == 1) { + // NOTE: this is cheating. Should be positioned relative to the box. + div.style.left = '0px'; + } else { + div.style.left = box.x + 'px'; + } + div.style.top = box.y + 'px'; + div.style.width = box.w + 'px'; + div.style.height = box.h + 'px'; + div.style.fontSize = (g.getOption('yLabelWidth') - 2) + 'px'; + + var inner_div = document.createElement("div"); + inner_div.style.position = 'absolute'; + inner_div.style.width = box.h + 'px'; + inner_div.style.height = box.w + 'px'; + inner_div.style.top = (box.h / 2 - box.w / 2) + 'px'; + inner_div.style.left = (box.w / 2 - box.h / 2) + 'px'; + inner_div.style.textAlign = 'center'; + + // CSS rotation is an HTML5 feature which is not standardized. Hence every + // browser has its own name for the CSS style. + var val = 'rotate(' + (axis == 1 ? '-' : '') + '90deg)'; + inner_div.style.transform = val; // HTML5 + inner_div.style.WebkitTransform = val; // Safari/Chrome + inner_div.style.MozTransform = val; // Firefox + inner_div.style.OTransform = val; // Opera + inner_div.style.msTransform = val; // IE9 + + if (typeof(document.documentMode) !== 'undefined' && + document.documentMode < 9) { + // We're dealing w/ an old version of IE, so we have to rotate the text + // using a BasicImage transform. This uses a different origin of rotation + // than HTML5 rotation (top left of div vs. its center). + inner_div.style.filter = + 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + + (axis == 1 ? '3' : '1') + ')'; + inner_div.style.left = '0px'; + inner_div.style.top = '0px'; + } + + var class_div = document.createElement("div"); + class_div.className = classes; + class_div.innerHTML = html; + + inner_div.appendChild(class_div); + div.appendChild(inner_div); + return div; +}; + +chart_labels.prototype.layout = function(e) { + this.detachLabels_(); + + var g = e.dygraph; + var div = e.chart_div; + if (g.getOption('title')) { + // QUESTION: should this return an absolutely-positioned div instead? + var title_rect = e.reserveSpaceTop(g.getOption('titleHeight')); + this.title_div_ = createDivInRect(title_rect); + this.title_div_.style.textAlign = 'center'; + this.title_div_.style.fontSize = (g.getOption('titleHeight') - 8) + 'px'; + this.title_div_.style.fontWeight = 'bold'; + this.title_div_.style.zIndex = 10; + + var class_div = document.createElement("div"); + class_div.className = 'dygraph-label dygraph-title'; + class_div.innerHTML = g.getOption('title'); + this.title_div_.appendChild(class_div); + div.appendChild(this.title_div_); + } + + if (g.getOption('xlabel')) { + var x_rect = e.reserveSpaceBottom(g.getOption('xLabelHeight')); + this.xlabel_div_ = createDivInRect(x_rect); + this.xlabel_div_.style.textAlign = 'center'; + this.xlabel_div_.style.fontSize = (g.getOption('xLabelHeight') - 2) + 'px'; + + var class_div = document.createElement("div"); + class_div.className = 'dygraph-label dygraph-xlabel'; + class_div.innerHTML = g.getOption('xlabel'); + this.xlabel_div_.appendChild(class_div); + div.appendChild(this.xlabel_div_); + } + + if (g.getOption('ylabel')) { + // It would make sense to shift the chart here to make room for the y-axis + // label, but the default yAxisLabelWidth is large enough that this results + // in overly-padded charts. The y-axis label should fit fine. If it + // doesn't, the yAxisLabelWidth option can be increased. + var y_rect = e.reserveSpaceLeft(0); + + this.ylabel_div_ = createRotatedDiv( + g, y_rect, + 1, // primary (left) y-axis + 'dygraph-label dygraph-ylabel', + g.getOption('ylabel')); + div.appendChild(this.ylabel_div_); + } + + if (g.getOption('y2label') && g.numAxes() == 2) { + // same logic applies here as for ylabel. + var y2_rect = e.reserveSpaceRight(0); + this.y2label_div_ = createRotatedDiv( + g, y2_rect, + 2, // secondary (right) y-axis + 'dygraph-label dygraph-y2label', + g.getOption('y2label')); + div.appendChild(this.y2label_div_); + } +}; + +chart_labels.prototype.didDrawChart = function(e) { + var g = e.dygraph; + if (this.title_div_) { + this.title_div_.children[0].innerHTML = g.getOption('title'); + } + if (this.xlabel_div_) { + this.xlabel_div_.children[0].innerHTML = g.getOption('xlabel'); + } + if (this.ylabel_div_) { + this.ylabel_div_.children[0].children[0].innerHTML = g.getOption('ylabel'); + } + if (this.y2label_div_) { + this.y2label_div_.children[0].children[0].innerHTML = g.getOption('y2label'); + } +}; + +chart_labels.prototype.clearChart = function() { +}; + +chart_labels.prototype.destroy = function() { + this.detachLabels_(); +}; + + +return chart_labels; +})(); +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ +/*global Dygraph:false */ + +Dygraph.Plugins.Grid = (function() { + +/* + +Current bits of jankiness: +- Direct layout access +- Direct area access + +*/ + +"use strict"; + + +/** + * Draws the gridlines, i.e. the gray horizontal & vertical lines running the + * length of the chart. + * + * @constructor + */ +var grid = function() { +}; + +grid.prototype.toString = function() { + return "Gridline Plugin"; +}; + +grid.prototype.activate = function(g) { + return { + willDrawChart: this.willDrawChart + }; +}; + +grid.prototype.willDrawChart = function(e) { + // Draw the new X/Y grid. Lines appear crisper when pixels are rounded to + // half-integers. This prevents them from drawing in two rows/cols. + var g = e.dygraph; + var ctx = e.drawingContext; + var layout = g.layout_; + var area = e.dygraph.plotter_.area; + + function halfUp(x) { return Math.round(x) + 0.5; } + function halfDown(y){ return Math.round(y) - 0.5; } + + var x, y, i, ticks; + if (g.getOptionForAxis('drawGrid', 'y')) { + var axes = ["y", "y2"]; + var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern = []; + for (var i = 0; i < axes.length; i++) { + drawGrid[i] = g.getOptionForAxis('drawGrid', axes[i]); + if (drawGrid[i]) { + strokeStyles[i] = g.getOptionForAxis('gridLineColor', axes[i]); + lineWidths[i] = g.getOptionForAxis('gridLineWidth', axes[i]); + strokePattern[i] = g.getOptionForAxis('gridLinePattern', axes[i]); + stroking[i] = strokePattern[i] && (strokePattern[i].length >= 2); + } + } + ticks = layout.yticks; + ctx.save(); + // draw grids for the different y axes + for (i = 0; i < ticks.length; i++) { + var axis = ticks[i][0]; + if(drawGrid[axis]) { + if (stroking[axis]) { + ctx.installPattern(strokePattern[axis]); + } + ctx.strokeStyle = strokeStyles[axis]; + ctx.lineWidth = lineWidths[axis]; + + x = halfUp(area.x); + y = halfDown(area.y + ticks[i][1] * area.h); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x + area.w, y); + ctx.closePath(); + ctx.stroke(); + + if (stroking[axis]) { + ctx.uninstallPattern(); + } + } + } + ctx.restore(); + } + + // draw grid for x axis + if (g.getOptionForAxis('drawGrid', 'x')) { + ticks = layout.xticks; + ctx.save(); + var strokePattern = g.getOptionForAxis('gridLinePattern', 'x'); + var stroking = strokePattern && (strokePattern.length >= 2); + if (stroking) { + ctx.installPattern(strokePattern); + } + ctx.strokeStyle = g.getOptionForAxis('gridLineColor', 'x'); + ctx.lineWidth = g.getOptionForAxis('gridLineWidth', 'x'); + for (i = 0; i < ticks.length; i++) { + x = halfUp(area.x + ticks[i][0] * area.w); + y = halfDown(area.y + area.h); + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x, area.y); + ctx.closePath(); + ctx.stroke(); + } + if (stroking) { + ctx.uninstallPattern(); + } + ctx.restore(); + } +}; + +grid.prototype.destroy = function() { +}; + +return grid; + +})(); +/** + * @license + * Copyright 2012 Dan Vanderkam (danvdk@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ +/*global Dygraph:false */ + +Dygraph.Plugins.Legend = (function() { +/* +Current bits of jankiness: +- Uses two private APIs: + 1. Dygraph.optionsViewForAxis_ + 2. dygraph.plotter_.area +- Registers for a "predraw" event, which should be renamed. +- I call calculateEmWidthInDiv more often than needed. +*/ + +/*global Dygraph:false */ +"use strict"; + + +/** + * Creates the legend, which appears when the user hovers over the chart. + * The legend can be either a user-specified or generated div. + * + * @constructor + */ +var legend = function() { + this.legend_div_ = null; + this.is_generated_div_ = false; // do we own this div, or was it user-specified? +}; + +legend.prototype.toString = function() { + return "Legend Plugin"; +}; + +// (defined below) +var generateLegendDashHTML; + +/** + * This is called during the dygraph constructor, after options have been set + * but before the data is available. + * + * Proper tasks to do here include: + * - Reading your own options + * - DOM manipulation + * - Registering event listeners + * + * @param {Dygraph} g Graph instance. + * @return {object.<string, function(ev)>} Mapping of event names to callbacks. + */ +legend.prototype.activate = function(g) { + var div; + var divWidth = g.getOption('labelsDivWidth'); + + var userLabelsDiv = g.getOption('labelsDiv'); + if (userLabelsDiv && null !== userLabelsDiv) { + if (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String) { + div = document.getElementById(userLabelsDiv); + } else { + div = userLabelsDiv; + } + } else { + // Default legend styles. These can be overridden in CSS by adding + // "!important" after your rule, e.g. "left: 30px !important;" + var messagestyle = { + "position": "absolute", + "fontSize": "14px", + "zIndex": 10, + "width": divWidth + "px", + "top": "0px", + "left": (g.size().width - divWidth - 2) + "px", + "background": "white", + "lineHeight": "normal", + "textAlign": "left", + "overflow": "hidden"}; + + // TODO(danvk): get rid of labelsDivStyles? CSS is better. + Dygraph.update(messagestyle, g.getOption('labelsDivStyles')); + div = document.createElement("div"); + div.className = "dygraph-legend"; + for (var name in messagestyle) { + if (!messagestyle.hasOwnProperty(name)) continue; + + try { + div.style[name] = messagestyle[name]; + } catch (e) { + console.warn("You are using unsupported css properties for your " + + "browser in labelsDivStyles"); + } + } + + // TODO(danvk): come up with a cleaner way to expose this. + g.graphDiv.appendChild(div); + this.is_generated_div_ = true; + } + + this.legend_div_ = div; + this.one_em_width_ = 10; // just a guess, will be updated. + + return { + select: this.select, + deselect: this.deselect, + // TODO(danvk): rethink the name "predraw" before we commit to it in any API. + predraw: this.predraw, + didDrawChart: this.didDrawChart + }; +}; + +// Needed for dashed lines. +var calculateEmWidthInDiv = function(div) { + var sizeSpan = document.createElement('span'); + sizeSpan.setAttribute('style', 'margin: 0; padding: 0 0 0 1em; border: 0;'); + div.appendChild(sizeSpan); + var oneEmWidth=sizeSpan.offsetWidth; + div.removeChild(sizeSpan); + return oneEmWidth; +}; + +var escapeHTML = function(str) { + return str.replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">"); +}; + +legend.prototype.select = function(e) { + var xValue = e.selectedX; + var points = e.selectedPoints; + + var legendMode = e.dygraph.getOption('legend'); + if (legendMode === 'never') { + this.legend_div_.style.display = 'none'; + return; + } + + if (legendMode === 'follow') { + // create floating legend div + var area = e.dygraph.plotter_.area; + var labelsDivWidth = e.dygraph.getOption('labelsDivWidth'); + var yAxisLabelWidth = e.dygraph.getOptionForAxis('axisLabelWidth', 'y'); + // determine floating [left, top] coordinates of the legend div + // within the plotter_ area + // offset 20 px to the right and down from the first selection point + // 20 px is guess based on mouse cursor size + var leftLegend = points[0].x * area.w + 20; + var topLegend = points[0].y * area.h - 20; + + // if legend floats to end of the window area, it flips to the other + // side of the selection point + if ((leftLegend + labelsDivWidth + 1) > (window.scrollX + window.innerWidth)) { + leftLegend = leftLegend - 2 * 20 - labelsDivWidth - (yAxisLabelWidth - area.x); + } + + e.dygraph.graphDiv.appendChild(this.legend_div_); + this.legend_div_.style.left = yAxisLabelWidth + leftLegend + "px"; + this.legend_div_.style.top = topLegend + "px"; + } + + var html = legend.generateLegendHTML(e.dygraph, xValue, points, this.one_em_width_); + this.legend_div_.innerHTML = html; + this.legend_div_.style.display = ''; +}; + +legend.prototype.deselect = function(e) { + var legendMode = e.dygraph.getOption('legend'); + if (legendMode !== 'always') { + this.legend_div_.style.display = "none"; + } + + // Have to do this every time, since styles might have changed. + var oneEmWidth = calculateEmWidthInDiv(this.legend_div_); + this.one_em_width_ = oneEmWidth; + + var html = legend.generateLegendHTML(e.dygraph, undefined, undefined, oneEmWidth); + this.legend_div_.innerHTML = html; +}; + +legend.prototype.didDrawChart = function(e) { + this.deselect(e); +}; + +// Right edge should be flush with the right edge of the charting area (which +// may not be the same as the right edge of the div, if we have two y-axes. +// TODO(danvk): is any of this really necessary? Could just set "right" in "activate". +/** + * Position the labels div so that: + * - its right edge is flush with the right edge of the charting area + * - its top edge is flush with the top edge of the charting area + * @private + */ +legend.prototype.predraw = function(e) { + // Don't touch a user-specified labelsDiv. + if (!this.is_generated_div_) return; + + // TODO(danvk): only use real APIs for this. + e.dygraph.graphDiv.appendChild(this.legend_div_); + var area = e.dygraph.plotter_.area; + var labelsDivWidth = e.dygraph.getOption("labelsDivWidth"); + this.legend_div_.style.left = area.x + area.w - labelsDivWidth - 1 + "px"; + this.legend_div_.style.top = area.y + "px"; + this.legend_div_.style.width = labelsDivWidth + "px"; +}; + +/** + * Called when dygraph.destroy() is called. + * You should null out any references and detach any DOM elements. + */ +legend.prototype.destroy = function() { + this.legend_div_ = null; +}; + +/** + * @private + * Generates HTML for the legend which is displayed when hovering over the + * chart. If no selected points are specified, a default legend is returned + * (this may just be the empty string). + * @param { Number } [x] The x-value of the selected points. + * @param { [Object] } [sel_points] List of selected points for the given + * x-value. Should have properties like 'name', 'yval' and 'canvasy'. + * @param { Number } [oneEmWidth] The pixel width for 1em in the legend. Only + * relevant when displaying a legend with no selection (i.e. {legend: + * 'always'}) and with dashed lines. + */ +legend.generateLegendHTML = function(g, x, sel_points, oneEmWidth) { + // TODO(danvk): deprecate this option in place of {legend: 'never'} + if (g.getOption('showLabelsOnHighlight') !== true) return ''; + + // If no points are selected, we display a default legend. Traditionally, + // this has been blank. But a better default would be a conventional legend, + // which provides essential information for a non-interactive chart. + var html, sepLines, i, dash, strokePattern; + var labels = g.getLabels(); + + if (typeof(x) === 'undefined') { + if (g.getOption('legend') != 'always') { + return ''; + } + + sepLines = g.getOption('labelsSeparateLines'); + html = ''; + for (i = 1; i < labels.length; i++) { + var series = g.getPropertiesForSeries(labels[i]); + if (!series.visible) continue; + + if (html !== '') html += (sepLines ? '<br/>' : ' '); + strokePattern = g.getOption("strokePattern", labels[i]); + dash = generateLegendDashHTML(strokePattern, series.color, oneEmWidth); + html += "<span style='font-weight: bold; color: " + series.color + ";'>" + + dash + " " + escapeHTML(labels[i]) + "</span>"; + } + return html; + } + + // TODO(danvk): remove this use of a private API + var xOptView = g.optionsViewForAxis_('x'); + var xvf = xOptView('valueFormatter'); + html = xvf(x, xOptView, labels[0], g); + if (html !== '') { + html += ':'; + } + + var yOptViews = []; + var num_axes = g.numAxes(); + for (i = 0; i < num_axes; i++) { + // TODO(danvk): remove this use of a private API + yOptViews[i] = g.optionsViewForAxis_('y' + (i ? 1 + i : '')); + } + var showZeros = g.getOption("labelsShowZeroValues"); + sepLines = g.getOption("labelsSeparateLines"); + var highlightSeries = g.getHighlightSeries(); + for (i = 0; i < sel_points.length; i++) { + var pt = sel_points[i]; + if (pt.yval === 0 && !showZeros) continue; + if (!Dygraph.isOK(pt.canvasy)) continue; + if (sepLines) html += "<br/>"; + + var series = g.getPropertiesForSeries(pt.name); + var yOptView = yOptViews[series.axis - 1]; + var fmtFunc = yOptView('valueFormatter'); + var yval = fmtFunc(pt.yval, yOptView, pt.name, g); + + var cls = (pt.name == highlightSeries) ? " class='highlight'" : ""; + + // TODO(danvk): use a template string here and make it an attribute. + html += "<span" + cls + ">" + " <b><span style='color: " + series.color + ";'>" + + escapeHTML(pt.name) + "</span></b>: " + yval + "</span>"; + } + return html; +}; + + +/** + * Generates html for the "dash" displayed on the legend when using "legend: always". + * In particular, this works for dashed lines with any stroke pattern. It will + * try to scale the pattern to fit in 1em width. Or if small enough repeat the + * pattern for 1em width. + * + * @param strokePattern The pattern + * @param color The color of the series. + * @param oneEmWidth The width in pixels of 1em in the legend. + * @private + */ +generateLegendDashHTML = function(strokePattern, color, oneEmWidth) { + // IE 7,8 fail at these divs, so they get boring legend, have not tested 9. + var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera); + if (isIE) return "—"; + + // Easy, common case: a solid line + if (!strokePattern || strokePattern.length <= 1) { + return "<div style=\"display: inline-block; position: relative; " + + "bottom: .5ex; padding-left: 1em; height: 1px; " + + "border-bottom: 2px solid " + color + ";\"></div>"; + } + + var i, j, paddingLeft, marginRight; + var strokePixelLength = 0, segmentLoop = 0; + var normalizedPattern = []; + var loop; + + // Compute the length of the pixels including the first segment twice, + // since we repeat it. + for (i = 0; i <= strokePattern.length; i++) { + strokePixelLength += strokePattern[i%strokePattern.length]; + } + + // See if we can loop the pattern by itself at least twice. + loop = Math.floor(oneEmWidth/(strokePixelLength-strokePattern[0])); + if (loop > 1) { + // This pattern fits at least two times, no scaling just convert to em; + for (i = 0; i < strokePattern.length; i++) { + normalizedPattern[i] = strokePattern[i]/oneEmWidth; + } + // Since we are repeating the pattern, we don't worry about repeating the + // first segment in one draw. + segmentLoop = normalizedPattern.length; + } else { + // If the pattern doesn't fit in the legend we scale it to fit. + loop = 1; + for (i = 0; i < strokePattern.length; i++) { + normalizedPattern[i] = strokePattern[i]/strokePixelLength; + } + // For the scaled patterns we do redraw the first segment. + segmentLoop = normalizedPattern.length+1; + } + + // Now make the pattern. + var dash = ""; + for (j = 0; j < loop; j++) { + for (i = 0; i < segmentLoop; i+=2) { + // The padding is the drawn segment. + paddingLeft = normalizedPattern[i%normalizedPattern.length]; + if (i < strokePattern.length) { + // The margin is the space segment. + marginRight = normalizedPattern[(i+1)%normalizedPattern.length]; + } else { + // The repeated first segment has no right margin. + marginRight = 0; + } + dash += "<div style=\"display: inline-block; position: relative; " + + "bottom: .5ex; margin-right: " + marginRight + "em; padding-left: " + + paddingLeft + "em; height: 1px; border-bottom: 2px solid " + color + + ";\"></div>"; + } + } + return dash; +}; + + +return legend; +})(); +/** + * @license + * Copyright 2011 Paul Felix (paul.eric.felix@gmail.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ +/*global Dygraph:false,TouchEvent:false */ + +/** + * @fileoverview This file contains the RangeSelector plugin used to provide + * a timeline range selector widget for dygraphs. + */ + +Dygraph.Plugins.RangeSelector = (function() { + +/*global Dygraph:false */ +"use strict"; + +var rangeSelector = function() { + this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera; + this.hasTouchInterface_ = typeof(TouchEvent) != 'undefined'; + this.isMobileDevice_ = /mobile|android/gi.test(navigator.appVersion); + this.interfaceCreated_ = false; +}; + +rangeSelector.prototype.toString = function() { + return "RangeSelector Plugin"; +}; + +rangeSelector.prototype.activate = function(dygraph) { + this.dygraph_ = dygraph; + this.isUsingExcanvas_ = dygraph.isUsingExcanvas_; + if (this.getOption_('showRangeSelector')) { + this.createInterface_(); + } + return { + layout: this.reserveSpace_, + predraw: this.renderStaticLayer_, + didDrawChart: this.renderInteractiveLayer_ + }; +}; + +rangeSelector.prototype.destroy = function() { + this.bgcanvas_ = null; + this.fgcanvas_ = null; + this.leftZoomHandle_ = null; + this.rightZoomHandle_ = null; + this.iePanOverlay_ = null; +}; + +//------------------------------------------------------------------ +// Private methods +//------------------------------------------------------------------ + +rangeSelector.prototype.getOption_ = function(name, opt_series) { + return this.dygraph_.getOption(name, opt_series); +}; + +rangeSelector.prototype.setDefaultOption_ = function(name, value) { + this.dygraph_.attrs_[name] = value; +}; + +/** + * @private + * Creates the range selector elements and adds them to the graph. + */ +rangeSelector.prototype.createInterface_ = function() { + this.createCanvases_(); + if (this.isUsingExcanvas_) { + this.createIEPanOverlay_(); + } + this.createZoomHandles_(); + this.initInteraction_(); + + // Range selector and animatedZooms have a bad interaction. See issue 359. + if (this.getOption_('animatedZooms')) { + console.warn('Animated zooms and range selector are not compatible; disabling animatedZooms.'); + this.dygraph_.updateOptions({animatedZooms: false}, true); + } + + this.interfaceCreated_ = true; + this.addToGraph_(); +}; + +/** + * @private + * Adds the range selector to the graph. + */ +rangeSelector.prototype.addToGraph_ = function() { + var graphDiv = this.graphDiv_ = this.dygraph_.graphDiv; + graphDiv.appendChild(this.bgcanvas_); + graphDiv.appendChild(this.fgcanvas_); + graphDiv.appendChild(this.leftZoomHandle_); + graphDiv.appendChild(this.rightZoomHandle_); +}; + +/** + * @private + * Removes the range selector from the graph. + */ +rangeSelector.prototype.removeFromGraph_ = function() { + var graphDiv = this.graphDiv_; + graphDiv.removeChild(this.bgcanvas_); + graphDiv.removeChild(this.fgcanvas_); + graphDiv.removeChild(this.leftZoomHandle_); + graphDiv.removeChild(this.rightZoomHandle_); + this.graphDiv_ = null; +}; + +/** + * @private + * Called by Layout to allow range selector to reserve its space. + */ +rangeSelector.prototype.reserveSpace_ = function(e) { + if (this.getOption_('showRangeSelector')) { + e.reserveSpaceBottom(this.getOption_('rangeSelectorHeight') + 4); + } +}; + +/** + * @private + * Renders the static portion of the range selector at the predraw stage. + */ +rangeSelector.prototype.renderStaticLayer_ = function() { + if (!this.updateVisibility_()) { + return; + } + this.resize_(); + this.drawStaticLayer_(); +}; + +/** + * @private + * Renders the interactive portion of the range selector after the chart has been drawn. + */ +rangeSelector.prototype.renderInteractiveLayer_ = function() { + if (!this.updateVisibility_() || this.isChangingRange_) { + return; + } + this.placeZoomHandles_(); + this.drawInteractiveLayer_(); +}; + +/** + * @private + * Check to see if the range selector is enabled/disabled and update visibility accordingly. + */ +rangeSelector.prototype.updateVisibility_ = function() { + var enabled = this.getOption_('showRangeSelector'); + if (enabled) { + if (!this.interfaceCreated_) { + this.createInterface_(); + } else if (!this.graphDiv_ || !this.graphDiv_.parentNode) { + this.addToGraph_(); + } + } else if (this.graphDiv_) { + this.removeFromGraph_(); + var dygraph = this.dygraph_; + setTimeout(function() { dygraph.width_ = 0; dygraph.resize(); }, 1); + } + return enabled; +}; + +/** + * @private + * Resizes the range selector. + */ +rangeSelector.prototype.resize_ = function() { + function setElementRect(canvas, context, rect) { + var canvasScale = Dygraph.getContextPixelRatio(context); + + canvas.style.top = rect.y + 'px'; + canvas.style.left = rect.x + 'px'; + canvas.width = rect.w * canvasScale; + canvas.height = rect.h * canvasScale; + canvas.style.width = rect.w + 'px'; + canvas.style.height = rect.h + 'px'; + + if(canvasScale != 1) { + context.scale(canvasScale, canvasScale); + } + } + + var plotArea = this.dygraph_.layout_.getPlotArea(); + + var xAxisLabelHeight = 0; + if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) { + xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize')); + } + this.canvasRect_ = { + x: plotArea.x, + y: plotArea.y + plotArea.h + xAxisLabelHeight + 4, + w: plotArea.w, + h: this.getOption_('rangeSelectorHeight') + }; + + setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_); + setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_); +}; + +/** + * @private + * Creates the background and foreground canvases. + */ +rangeSelector.prototype.createCanvases_ = function() { + this.bgcanvas_ = Dygraph.createCanvas(); + this.bgcanvas_.className = 'dygraph-rangesel-bgcanvas'; + this.bgcanvas_.style.position = 'absolute'; + this.bgcanvas_.style.zIndex = 9; + this.bgcanvas_ctx_ = Dygraph.getContext(this.bgcanvas_); + + this.fgcanvas_ = Dygraph.createCanvas(); + this.fgcanvas_.className = 'dygraph-rangesel-fgcanvas'; + this.fgcanvas_.style.position = 'absolute'; + this.fgcanvas_.style.zIndex = 9; + this.fgcanvas_.style.cursor = 'default'; + this.fgcanvas_ctx_ = Dygraph.getContext(this.fgcanvas_); +}; + +/** + * @private + * Creates overlay divs for IE/Excanvas so that mouse events are handled properly. + */ +rangeSelector.prototype.createIEPanOverlay_ = function() { + this.iePanOverlay_ = document.createElement("div"); + this.iePanOverlay_.style.position = 'absolute'; + this.iePanOverlay_.style.backgroundColor = 'white'; + this.iePanOverlay_.style.filter = 'alpha(opacity=0)'; + this.iePanOverlay_.style.display = 'none'; + this.iePanOverlay_.style.cursor = 'move'; + this.fgcanvas_.appendChild(this.iePanOverlay_); +}; + +/** + * @private + * Creates the zoom handle elements. + */ +rangeSelector.prototype.createZoomHandles_ = function() { + var img = new Image(); + img.className = 'dygraph-rangesel-zoomhandle'; + img.style.position = 'absolute'; + img.style.zIndex = 10; + img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place. + img.style.cursor = 'col-resize'; + + if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data. + img.width = 7; + img.height = 14; + img.style.backgroundColor = 'white'; + img.style.border = '1px solid #333333'; // Just show box in IE7. + } else { + img.width = 9; + img.height = 16; + img.src = 'data:image/png;base64,' + +'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' + +'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' + +'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' + +'6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' + +'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII='; + } + + if (this.isMobileDevice_) { + img.width *= 2; + img.height *= 2; + } + + this.leftZoomHandle_ = img; + this.rightZoomHandle_ = img.cloneNode(false); +}; + +/** + * @private + * Sets up the interaction for the range selector. + */ +rangeSelector.prototype.initInteraction_ = function() { + var self = this; + var topElem = document; + var clientXLast = 0; + var handle = null; + var isZooming = false; + var isPanning = false; + var dynamic = !this.isMobileDevice_ && !this.isUsingExcanvas_; + + // We cover iframes during mouse interactions. See comments in + // dygraph-utils.js for more info on why this is a good idea. + var tarp = new Dygraph.IFrameTarp(); + + // functions, defined below. Defining them this way (rather than with + // "function foo() {...}" makes JSHint happy. + var toXDataWindow, onZoomStart, onZoom, onZoomEnd, doZoom, isMouseInPanZone, + onPanStart, onPan, onPanEnd, doPan, onCanvasHover; + + // Touch event functions + var onZoomHandleTouchEvent, onCanvasTouchEvent, addTouchEvents; + + toXDataWindow = function(zoomHandleStatus) { + var xDataLimits = self.dygraph_.xAxisExtremes(); + var fact = (xDataLimits[1] - xDataLimits[0])/self.canvasRect_.w; + var xDataMin = xDataLimits[0] + (zoomHandleStatus.leftHandlePos - self.canvasRect_.x)*fact; + var xDataMax = xDataLimits[0] + (zoomHandleStatus.rightHandlePos - self.canvasRect_.x)*fact; + return [xDataMin, xDataMax]; + }; + + onZoomStart = function(e) { + Dygraph.cancelEvent(e); + isZooming = true; + clientXLast = e.clientX; + handle = e.target ? e.target : e.srcElement; + if (e.type === 'mousedown' || e.type === 'dragstart') { + // These events are removed manually. + Dygraph.addEvent(topElem, 'mousemove', onZoom); + Dygraph.addEvent(topElem, 'mouseup', onZoomEnd); + } + self.fgcanvas_.style.cursor = 'col-resize'; + tarp.cover(); + return true; + }; + + onZoom = function(e) { + if (!isZooming) { + return false; + } + Dygraph.cancelEvent(e); + + var delX = e.clientX - clientXLast; + if (Math.abs(delX) < 4) { + return true; + } + clientXLast = e.clientX; + + // Move handle. + var zoomHandleStatus = self.getZoomHandleStatus_(); + var newPos; + if (handle == self.leftZoomHandle_) { + newPos = zoomHandleStatus.leftHandlePos + delX; + newPos = Math.min(newPos, zoomHandleStatus.rightHandlePos - handle.width - 3); + newPos = Math.max(newPos, self.canvasRect_.x); + } else { + newPos = zoomHandleStatus.rightHandlePos + delX; + newPos = Math.min(newPos, self.canvasRect_.x + self.canvasRect_.w); + newPos = Math.max(newPos, zoomHandleStatus.leftHandlePos + handle.width + 3); + } + var halfHandleWidth = handle.width/2; + handle.style.left = (newPos - halfHandleWidth) + 'px'; + self.drawInteractiveLayer_(); + + // Zoom on the fly (if not using excanvas). + if (dynamic) { + doZoom(); + } + return true; + }; + + onZoomEnd = function(e) { + if (!isZooming) { + return false; + } + isZooming = false; + tarp.uncover(); + Dygraph.removeEvent(topElem, 'mousemove', onZoom); + Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd); + self.fgcanvas_.style.cursor = 'default'; + + // If using excanvas, Zoom now. + if (!dynamic) { + doZoom(); + } + return true; + }; + + doZoom = function() { + try { + var zoomHandleStatus = self.getZoomHandleStatus_(); + self.isChangingRange_ = true; + if (!zoomHandleStatus.isZoomed) { + self.dygraph_.resetZoom(); + } else { + var xDataWindow = toXDataWindow(zoomHandleStatus); + self.dygraph_.doZoomXDates_(xDataWindow[0], xDataWindow[1]); + } + } finally { + self.isChangingRange_ = false; + } + }; + + isMouseInPanZone = function(e) { + if (self.isUsingExcanvas_) { + return e.srcElement == self.iePanOverlay_; + } else { + var rect = self.leftZoomHandle_.getBoundingClientRect(); + var leftHandleClientX = rect.left + rect.width/2; + rect = self.rightZoomHandle_.getBoundingClientRect(); + var rightHandleClientX = rect.left + rect.width/2; + return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX); + } + }; + + onPanStart = function(e) { + if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) { + Dygraph.cancelEvent(e); + isPanning = true; + clientXLast = e.clientX; + if (e.type === 'mousedown') { + // These events are removed manually. + Dygraph.addEvent(topElem, 'mousemove', onPan); + Dygraph.addEvent(topElem, 'mouseup', onPanEnd); + } + return true; + } + return false; + }; + + onPan = function(e) { + if (!isPanning) { + return false; + } + Dygraph.cancelEvent(e); + + var delX = e.clientX - clientXLast; + if (Math.abs(delX) < 4) { + return true; + } + clientXLast = e.clientX; + + // Move range view + var zoomHandleStatus = self.getZoomHandleStatus_(); + var leftHandlePos = zoomHandleStatus.leftHandlePos; + var rightHandlePos = zoomHandleStatus.rightHandlePos; + var rangeSize = rightHandlePos - leftHandlePos; + if (leftHandlePos + delX <= self.canvasRect_.x) { + leftHandlePos = self.canvasRect_.x; + rightHandlePos = leftHandlePos + rangeSize; + } else if (rightHandlePos + delX >= self.canvasRect_.x + self.canvasRect_.w) { + rightHandlePos = self.canvasRect_.x + self.canvasRect_.w; + leftHandlePos = rightHandlePos - rangeSize; + } else { + leftHandlePos += delX; + rightHandlePos += delX; + } + var halfHandleWidth = self.leftZoomHandle_.width/2; + self.leftZoomHandle_.style.left = (leftHandlePos - halfHandleWidth) + 'px'; + self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px'; + self.drawInteractiveLayer_(); + + // Do pan on the fly (if not using excanvas). + if (dynamic) { + doPan(); + } + return true; + }; + + onPanEnd = function(e) { + if (!isPanning) { + return false; + } + isPanning = false; + Dygraph.removeEvent(topElem, 'mousemove', onPan); + Dygraph.removeEvent(topElem, 'mouseup', onPanEnd); + // If using excanvas, do pan now. + if (!dynamic) { + doPan(); + } + return true; + }; + + doPan = function() { + try { + self.isChangingRange_ = true; + self.dygraph_.dateWindow_ = toXDataWindow(self.getZoomHandleStatus_()); + self.dygraph_.drawGraph_(false); + } finally { + self.isChangingRange_ = false; + } + }; + + onCanvasHover = function(e) { + if (isZooming || isPanning) { + return; + } + var cursor = isMouseInPanZone(e) ? 'move' : 'default'; + if (cursor != self.fgcanvas_.style.cursor) { + self.fgcanvas_.style.cursor = cursor; + } + }; + + onZoomHandleTouchEvent = function(e) { + if (e.type == 'touchstart' && e.targetTouches.length == 1) { + if (onZoomStart(e.targetTouches[0])) { + Dygraph.cancelEvent(e); + } + } else if (e.type == 'touchmove' && e.targetTouches.length == 1) { + if (onZoom(e.targetTouches[0])) { + Dygraph.cancelEvent(e); + } + } else { + onZoomEnd(e); + } + }; + + onCanvasTouchEvent = function(e) { + if (e.type == 'touchstart' && e.targetTouches.length == 1) { + if (onPanStart(e.targetTouches[0])) { + Dygraph.cancelEvent(e); + } + } else if (e.type == 'touchmove' && e.targetTouches.length == 1) { + if (onPan(e.targetTouches[0])) { + Dygraph.cancelEvent(e); + } + } else { + onPanEnd(e); + } + }; + + addTouchEvents = function(elem, fn) { + var types = ['touchstart', 'touchend', 'touchmove', 'touchcancel']; + for (var i = 0; i < types.length; i++) { + self.dygraph_.addAndTrackEvent(elem, types[i], fn); + } + }; + + this.setDefaultOption_('interactionModel', Dygraph.Interaction.dragIsPanInteractionModel); + this.setDefaultOption_('panEdgeFraction', 0.0001); + + var dragStartEvent = window.opera ? 'mousedown' : 'dragstart'; + this.dygraph_.addAndTrackEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart); + this.dygraph_.addAndTrackEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart); + + if (this.isUsingExcanvas_) { + this.dygraph_.addAndTrackEvent(this.iePanOverlay_, 'mousedown', onPanStart); + } else { + this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousedown', onPanStart); + this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousemove', onCanvasHover); + } + + // Touch events + if (this.hasTouchInterface_) { + addTouchEvents(this.leftZoomHandle_, onZoomHandleTouchEvent); + addTouchEvents(this.rightZoomHandle_, onZoomHandleTouchEvent); + addTouchEvents(this.fgcanvas_, onCanvasTouchEvent); + } +}; + +/** + * @private + * Draws the static layer in the background canvas. + */ +rangeSelector.prototype.drawStaticLayer_ = function() { + var ctx = this.bgcanvas_ctx_; + ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h); + try { + this.drawMiniPlot_(); + } catch(ex) { + console.warn(ex); + } + + var margin = 0.5; + this.bgcanvas_ctx_.lineWidth = 1; + ctx.strokeStyle = 'gray'; + ctx.beginPath(); + ctx.moveTo(margin, margin); + ctx.lineTo(margin, this.canvasRect_.h-margin); + ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin); + ctx.lineTo(this.canvasRect_.w-margin, margin); + ctx.stroke(); +}; + + +/** + * @private + * Draws the mini plot in the background canvas. + */ +rangeSelector.prototype.drawMiniPlot_ = function() { + var fillStyle = this.getOption_('rangeSelectorPlotFillColor'); + var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor'); + if (!fillStyle && !strokeStyle) { + return; + } + + var stepPlot = this.getOption_('stepPlot'); + + var combinedSeriesData = this.computeCombinedSeriesAndLimits_(); + var yRange = combinedSeriesData.yMax - combinedSeriesData.yMin; + + // Draw the mini plot. + var ctx = this.bgcanvas_ctx_; + var margin = 0.5; + + var xExtremes = this.dygraph_.xAxisExtremes(); + var xRange = Math.max(xExtremes[1] - xExtremes[0], 1.e-30); + var xFact = (this.canvasRect_.w - margin)/xRange; + var yFact = (this.canvasRect_.h - margin)/yRange; + var canvasWidth = this.canvasRect_.w - margin; + var canvasHeight = this.canvasRect_.h - margin; + + var prevX = null, prevY = null; + + ctx.beginPath(); + ctx.moveTo(margin, canvasHeight); + for (var i = 0; i < combinedSeriesData.data.length; i++) { + var dataPoint = combinedSeriesData.data[i]; + var x = ((dataPoint[0] !== null) ? ((dataPoint[0] - xExtremes[0])*xFact) : NaN); + var y = ((dataPoint[1] !== null) ? (canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact) : NaN); + + // Skip points that don't change the x-value. Overly fine-grained points + // can cause major slowdowns with the ctx.fill() call below. + if (!stepPlot && prevX !== null && Math.round(x) == Math.round(prevX)) { + continue; + } + + if (isFinite(x) && isFinite(y)) { + if(prevX === null) { + ctx.lineTo(x, canvasHeight); + } + else if (stepPlot) { + ctx.lineTo(x, prevY); + } + ctx.lineTo(x, y); + prevX = x; + prevY = y; + } + else { + if(prevX !== null) { + if (stepPlot) { + ctx.lineTo(x, prevY); + ctx.lineTo(x, canvasHeight); + } + else { + ctx.lineTo(prevX, canvasHeight); + } + } + prevX = prevY = null; + } + } + ctx.lineTo(canvasWidth, canvasHeight); + ctx.closePath(); + + if (fillStyle) { + var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight); + lingrad.addColorStop(0, 'white'); + lingrad.addColorStop(1, fillStyle); + this.bgcanvas_ctx_.fillStyle = lingrad; + ctx.fill(); + } + + if (strokeStyle) { + this.bgcanvas_ctx_.strokeStyle = strokeStyle; + this.bgcanvas_ctx_.lineWidth = 1.5; + ctx.stroke(); + } +}; + +/** + * @private + * Computes and returns the combined series data along with min/max for the mini plot. + * The combined series consists of averaged values for all series. + * When series have error bars, the error bars are ignored. + * @return {Object} An object containing combined series array, ymin, ymax. + */ +rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() { + var g = this.dygraph_; + var logscale = this.getOption_('logscale'); + var i; + + // Select series to combine. By default, all series are combined. + var numColumns = g.numColumns(); + var labels = g.getLabels(); + var includeSeries = new Array(numColumns); + var anySet = false; + for (i = 1; i < numColumns; i++) { + var include = this.getOption_('showInRangeSelector', labels[i]); + includeSeries[i] = include; + if (include !== null) anySet = true; // it's set explicitly for this series + } + if (!anySet) { + for (i = 0; i < includeSeries.length; i++) includeSeries[i] = true; + } + + // Create a combined series (average of selected series values). + // TODO(danvk): short-circuit if there's only one series. + var rolledSeries = []; + var dataHandler = g.dataHandler_; + var options = g.attributes_; + for (i = 1; i < g.numColumns(); i++) { + if (!includeSeries[i]) continue; + var series = dataHandler.extractSeries(g.rawData_, i, options); + if (g.rollPeriod() > 1) { + series = dataHandler.rollingAverage(series, g.rollPeriod(), options); + } + + rolledSeries.push(series); + } + + var combinedSeries = []; + for (i = 0; i < rolledSeries[0].length; i++) { + var sum = 0; + var count = 0; + for (var j = 0; j < rolledSeries.length; j++) { + var y = rolledSeries[j][i][1]; + if (y === null || isNaN(y)) continue; + count++; + sum += y; + } + combinedSeries.push([rolledSeries[0][i][0], sum / count]); + } + + // Compute the y range. + var yMin = Number.MAX_VALUE; + var yMax = -Number.MAX_VALUE; + for (i = 0; i < combinedSeries.length; i++) { + var yVal = combinedSeries[i][1]; + if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) { + yMin = Math.min(yMin, yVal); + yMax = Math.max(yMax, yVal); + } + } + + // Convert Y data to log scale if needed. + // Also, expand the Y range to compress the mini plot a little. + var extraPercent = 0.25; + if (logscale) { + yMax = Dygraph.log10(yMax); + yMax += yMax*extraPercent; + yMin = Dygraph.log10(yMin); + for (i = 0; i < combinedSeries.length; i++) { + combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]); + } + } else { + var yExtra; + var yRange = yMax - yMin; + if (yRange <= Number.MIN_VALUE) { + yExtra = yMax*extraPercent; + } else { + yExtra = yRange*extraPercent; + } + yMax += yExtra; + yMin -= yExtra; + } + + return {data: combinedSeries, yMin: yMin, yMax: yMax}; +}; + +/** + * @private + * Places the zoom handles in the proper position based on the current X data window. + */ +rangeSelector.prototype.placeZoomHandles_ = function() { + var xExtremes = this.dygraph_.xAxisExtremes(); + var xWindowLimits = this.dygraph_.xAxisRange(); + var xRange = xExtremes[1] - xExtremes[0]; + var leftPercent = Math.max(0, (xWindowLimits[0] - xExtremes[0])/xRange); + var rightPercent = Math.max(0, (xExtremes[1] - xWindowLimits[1])/xRange); + var leftCoord = this.canvasRect_.x + this.canvasRect_.w*leftPercent; + var rightCoord = this.canvasRect_.x + this.canvasRect_.w*(1 - rightPercent); + var handleTop = Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2); + var halfHandleWidth = this.leftZoomHandle_.width/2; + this.leftZoomHandle_.style.left = (leftCoord - halfHandleWidth) + 'px'; + this.leftZoomHandle_.style.top = handleTop + 'px'; + this.rightZoomHandle_.style.left = (rightCoord - halfHandleWidth) + 'px'; + this.rightZoomHandle_.style.top = this.leftZoomHandle_.style.top; + + this.leftZoomHandle_.style.visibility = 'visible'; + this.rightZoomHandle_.style.visibility = 'visible'; +}; + +/** + * @private + * Draws the interactive layer in the foreground canvas. + */ +rangeSelector.prototype.drawInteractiveLayer_ = function() { + var ctx = this.fgcanvas_ctx_; + ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h); + var margin = 1; + var width = this.canvasRect_.w - margin; + var height = this.canvasRect_.h - margin; + var zoomHandleStatus = this.getZoomHandleStatus_(); + + ctx.strokeStyle = 'black'; + if (!zoomHandleStatus.isZoomed) { + ctx.beginPath(); + ctx.moveTo(margin, margin); + ctx.lineTo(margin, height); + ctx.lineTo(width, height); + ctx.lineTo(width, margin); + ctx.stroke(); + if (this.iePanOverlay_) { + this.iePanOverlay_.style.display = 'none'; + } + } else { + var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x); + var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x); + + ctx.fillStyle = 'rgba(240, 240, 240, 0.6)'; + ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h); + ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h); + + ctx.beginPath(); + ctx.moveTo(margin, margin); + ctx.lineTo(leftHandleCanvasPos, margin); + ctx.lineTo(leftHandleCanvasPos, height); + ctx.lineTo(rightHandleCanvasPos, height); + ctx.lineTo(rightHandleCanvasPos, margin); + ctx.lineTo(width, margin); + ctx.stroke(); + + if (this.isUsingExcanvas_) { + this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px'; + this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px'; + this.iePanOverlay_.style.height = height + 'px'; + this.iePanOverlay_.style.display = 'inline'; + } + } +}; + +/** + * @private + * Returns the current zoom handle position information. + * @return {Object} The zoom handle status. + */ +rangeSelector.prototype.getZoomHandleStatus_ = function() { + var halfHandleWidth = this.leftZoomHandle_.width/2; + var leftHandlePos = parseFloat(this.leftZoomHandle_.style.left) + halfHandleWidth; + var rightHandlePos = parseFloat(this.rightZoomHandle_.style.left) + halfHandleWidth; + return { + leftHandlePos: leftHandlePos, + rightHandlePos: rightHandlePos, + isZoomed: (leftHandlePos - 1 > this.canvasRect_.x || rightHandlePos + 1 < this.canvasRect_.x+this.canvasRect_.w) + }; +}; + +return rangeSelector; + +})(); +/*global Dygraph:false */ + +// This file defines the ordering of the plugins. +// +// The ordering is from most-general to most-specific. +// This means that, in an event cascade, plugins which have registered for that +// event will be called in reverse order. +// +// This is most relevant for plugins which register a layout event, e.g. +// Axes, Legend and ChartLabels. + +Dygraph.PLUGINS.push( + Dygraph.Plugins.Legend, + Dygraph.Plugins.Axes, + Dygraph.Plugins.RangeSelector, // Has to be before ChartLabels so that its callbacks are called after ChartLabels' callbacks. + Dygraph.Plugins.ChartLabels, + Dygraph.Plugins.Annotations, + Dygraph.Plugins.Grid +); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview This file contains the managment of data handlers + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + * + * The idea is to define a common, generic data format that works for all data + * structures supported by dygraphs. To make this possible, the DataHandler + * interface is introduced. This makes it possible, that dygraph itself can work + * with the same logic for every data type independent of the actual format and + * the DataHandler takes care of the data format specific jobs. + * DataHandlers are implemented for all data types supported by Dygraphs and + * return Dygraphs compliant formats. + * By default the correct DataHandler is chosen based on the options set. + * Optionally the user may use his own DataHandler (similar to the plugin + * system). + * + * + * The unified data format returend by each handler is defined as so: + * series[n][point] = [x,y,(extras)] + * + * This format contains the common basis that is needed to draw a simple line + * series extended by optional extras for more complex graphing types. It + * contains a primitive x value as first array entry, a primitive y value as + * second array entry and an optional extras object for additional data needed. + * + * x must always be a number. + * y must always be a number, NaN of type number or null. + * extras is optional and must be interpreted by the DataHandler. It may be of + * any type. + * + * In practice this might look something like this: + * default: [x, yVal] + * errorBar / customBar: [x, yVal, [yTopVariance, yBottomVariance] ] + * + */ +/*global Dygraph:false */ +/*global DygraphLayout:false */ + +/** + * + * The data handler is responsible for all data specific operations. All of the + * series data it receives and returns is always in the unified data format. + * Initially the unified data is created by the extractSeries method + * @constructor + */ +Dygraph.DataHandler = function () { +}; + +/** + * A collection of functions to create and retrieve data handlers. + * @type {Object.<!Dygraph.DataHandler>} + */ +Dygraph.DataHandlers = {}; + +(function() { + +"use strict"; + +var handler = Dygraph.DataHandler; + +/** + * X-value array index constant for unified data samples. + * @const + * @type {number} + */ +handler.X = 0; + +/** + * Y-value array index constant for unified data samples. + * @const + * @type {number} + */ +handler.Y = 1; + +/** + * Extras-value array index constant for unified data samples. + * @const + * @type {number} + */ +handler.EXTRAS = 2; + +/** + * Extracts one series from the raw data (a 2D array) into an array of the + * unified data format. + * This is where undesirable points (i.e. negative values on log scales and + * missing values through which we wish to connect lines) are dropped. + * TODO(danvk): the "missing values" bit above doesn't seem right. + * + * @param {!Array.<Array>} rawData The raw data passed into dygraphs where + * rawData[i] = [x,ySeries1,...,ySeriesN]. + * @param {!number} seriesIndex Index of the series to extract. All other + * series should be ignored. + * @param {!DygraphOptions} options Dygraph options. + * @return {Array.<[!number,?number,?]>} The series in the unified data format + * where series[i] = [x,y,{extras}]. + */ +handler.prototype.extractSeries = function(rawData, seriesIndex, options) { +}; + +/** + * Converts a series to a Point array. The resulting point array must be + * returned in increasing order of idx property. + * + * @param {!Array.<[!number,?number,?]>} series The series in the unified + * data format where series[i] = [x,y,{extras}]. + * @param {!string} setName Name of the series. + * @param {!number} boundaryIdStart Index offset of the first point, equal to the + * number of skipped points left of the date window minimum (if any). + * @return {!Array.<Dygraph.PointType>} List of points for this series. + */ +handler.prototype.seriesToPoints = function(series, setName, boundaryIdStart) { + // TODO(bhs): these loops are a hot-spot for high-point-count charts. In + // fact, + // on chrome+linux, they are 6 times more expensive than iterating through + // the + // points and drawing the lines. The brunt of the cost comes from allocating + // the |point| structures. + var points = []; + for ( var i = 0; i < series.length; ++i) { + var item = series[i]; + var yraw = item[1]; + var yval = yraw === null ? null : handler.parseFloat(yraw); + var point = { + x : NaN, + y : NaN, + xval : handler.parseFloat(item[0]), + yval : yval, + name : setName, // TODO(danvk): is this really necessary? + idx : i + boundaryIdStart + }; + points.push(point); + } + this.onPointsCreated_(series, points); + return points; +}; + +/** + * Callback called for each series after the series points have been generated + * which will later be used by the plotters to draw the graph. + * Here data may be added to the seriesPoints which is needed by the plotters. + * The indexes of series and points are in sync meaning the original data + * sample for series[i] is points[i]. + * + * @param {!Array.<[!number,?number,?]>} series The series in the unified + * data format where series[i] = [x,y,{extras}]. + * @param {!Array.<Dygraph.PointType>} points The corresponding points passed + * to the plotter. + * @protected + */ +handler.prototype.onPointsCreated_ = function(series, points) { +}; + +/** + * Calculates the rolling average of a data set. + * + * @param {!Array.<[!number,?number,?]>} series The series in the unified + * data format where series[i] = [x,y,{extras}]. + * @param {!number} rollPeriod The number of points over which to average the data + * @param {!DygraphOptions} options The dygraph options. + * @return {!Array.<[!number,?number,?]>} the rolled series. + */ +handler.prototype.rollingAverage = function(series, rollPeriod, options) { +}; + +/** + * Computes the range of the data series (including confidence intervals). + * + * @param {!Array.<[!number,?number,?]>} series The series in the unified + * data format where series[i] = [x, y, {extras}]. + * @param {!Array.<number>} dateWindow The x-value range to display with + * the format: [min, max]. + * @param {!DygraphOptions} options The dygraph options. + * @return {Array.<number>} The low and high extremes of the series in the + * given window with the format: [low, high]. + */ +handler.prototype.getExtremeYValues = function(series, dateWindow, options) { +}; + +/** + * Callback called for each series after the layouting data has been + * calculated before the series is drawn. Here normalized positioning data + * should be calculated for the extras of each point. + * + * @param {!Array.<Dygraph.PointType>} points The points passed to + * the plotter. + * @param {!Object} axis The axis on which the series will be plotted. + * @param {!boolean} logscale Weather or not to use a logscale. + */ +handler.prototype.onLineEvaluated = function(points, axis, logscale) { +}; + +/** + * Helper method that computes the y value of a line defined by the points p1 + * and p2 and a given x value. + * + * @param {!Array.<number>} p1 left point ([x,y]). + * @param {!Array.<number>} p2 right point ([x,y]). + * @param {!number} xValue The x value to compute the y-intersection for. + * @return {number} corresponding y value to x on the line defined by p1 and p2. + * @private + */ +handler.prototype.computeYInterpolation_ = function(p1, p2, xValue) { + var deltaY = p2[1] - p1[1]; + var deltaX = p2[0] - p1[0]; + var gradient = deltaY / deltaX; + var growth = (xValue - p1[0]) * gradient; + return p1[1] + growth; +}; + +/** + * Helper method that returns the first and the last index of the given series + * that lie inside the given dateWindow. + * + * @param {!Array.<[!number,?number,?]>} series The series in the unified + * data format where series[i] = [x,y,{extras}]. + * @param {!Array.<number>} dateWindow The x-value range to display with + * the format: [min,max]. + * @return {!Array.<[!number,?number,?]>} The samples of the series that + * are in the given date window. + * @private + */ +handler.prototype.getIndexesInWindow_ = function(series, dateWindow) { + var firstIdx = 0, lastIdx = series.length - 1; + if (dateWindow) { + var idx = 0; + var low = dateWindow[0]; + var high = dateWindow[1]; + + // Start from each side of the array to minimize the performance + // needed. + while (idx < series.length - 1 && series[idx][0] < low) { + firstIdx++; + idx++; + } + idx = series.length - 1; + while (idx > 0 && series[idx][0] > high) { + lastIdx--; + idx--; + } + } + if (firstIdx <= lastIdx) { + return [ firstIdx, lastIdx ]; + } else { + return [ 0, series.length - 1 ]; + } +}; + +/** + * Optimized replacement for parseFloat, which was way too slow when almost + * all values were type number, with few edge cases, none of which were strings. + * @param {?number} val + * @return {number} + * @protected + */ +handler.parseFloat = function(val) { + // parseFloat(null) is NaN + if (val === null) { + return NaN; + } + + // Assume it's a number or NaN. If it's something else, I'll be shocked. + return val; +}; + +})(); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DataHandler default implementation used for simple line charts. + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + */ + +(function() { + +/*global Dygraph:false */ +"use strict"; + +/** + * @constructor + * @extends Dygraph.DataHandler + */ +Dygraph.DataHandlers.DefaultHandler = function() { +}; + +var DefaultHandler = Dygraph.DataHandlers.DefaultHandler; +DefaultHandler.prototype = new Dygraph.DataHandler(); + +/** @inheritDoc */ +DefaultHandler.prototype.extractSeries = function(rawData, i, options) { + // TODO(danvk): pre-allocate series here. + var series = []; + var logScale = options.get('logscale'); + for ( var j = 0; j < rawData.length; j++) { + var x = rawData[j][0]; + var point = rawData[j][i]; + if (logScale) { + // On the log scale, points less than zero do not exist. + // This will create a gap in the chart. + if (point <= 0) { + point = null; + } + } + series.push([ x, point ]); + } + return series; +}; + +/** @inheritDoc */ +DefaultHandler.prototype.rollingAverage = function(originalData, rollPeriod, + options) { + rollPeriod = Math.min(rollPeriod, originalData.length); + var rollingData = []; + + var i, j, y, sum, num_ok; + // Calculate the rolling average for the first rollPeriod - 1 points + // where + // there is not enough data to roll over the full number of points + if (rollPeriod == 1) { + return originalData; + } + for (i = 0; i < originalData.length; i++) { + sum = 0; + num_ok = 0; + for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { + y = originalData[j][1]; + if (y === null || isNaN(y)) + continue; + num_ok++; + sum += originalData[j][1]; + } + if (num_ok) { + rollingData[i] = [ originalData[i][0], sum / num_ok ]; + } else { + rollingData[i] = [ originalData[i][0], null ]; + } + } + + return rollingData; +}; + +/** @inheritDoc */ +DefaultHandler.prototype.getExtremeYValues = function(series, dateWindow, + options) { + var minY = null, maxY = null, y; + var firstIdx = 0, lastIdx = series.length - 1; + + for ( var j = firstIdx; j <= lastIdx; j++) { + y = series[j][1]; + if (y === null || isNaN(y)) + continue; + if (maxY === null || y > maxY) { + maxY = y; + } + if (minY === null || y < minY) { + minY = y; + } + } + return [ minY, maxY ]; +}; + +})(); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DataHandler implementation for the fractions option. + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + */ + +(function() { + +/*global Dygraph:false */ +"use strict"; + +/** + * @extends Dygraph.DataHandlers.DefaultHandler + * @constructor + */ +Dygraph.DataHandlers.DefaultFractionHandler = function() { +}; + +var DefaultFractionHandler = Dygraph.DataHandlers.DefaultFractionHandler; +DefaultFractionHandler.prototype = new Dygraph.DataHandlers.DefaultHandler(); + +DefaultFractionHandler.prototype.extractSeries = function(rawData, i, options) { + // TODO(danvk): pre-allocate series here. + var series = []; + var x, y, point, num, den, value; + var mult = 100.0; + var logScale = options.get('logscale'); + for ( var j = 0; j < rawData.length; j++) { + x = rawData[j][0]; + point = rawData[j][i]; + if (logScale && point !== null) { + // On the log scale, points less than zero do not exist. + // This will create a gap in the chart. + if (point[0] <= 0 || point[1] <= 0) { + point = null; + } + } + // Extract to the unified data format. + if (point !== null) { + num = point[0]; + den = point[1]; + if (num !== null && !isNaN(num)) { + value = den ? num / den : 0.0; + y = mult * value; + // preserve original values in extras for further filtering + series.push([ x, y, [ num, den ] ]); + } else { + series.push([ x, num, [ num, den ] ]); + } + } else { + series.push([ x, null, [ null, null ] ]); + } + } + return series; +}; + +DefaultFractionHandler.prototype.rollingAverage = function(originalData, rollPeriod, + options) { + rollPeriod = Math.min(rollPeriod, originalData.length); + var rollingData = []; + + var i; + var num = 0; + var den = 0; // numerator/denominator + var mult = 100.0; + for (i = 0; i < originalData.length; i++) { + num += originalData[i][2][0]; + den += originalData[i][2][1]; + if (i - rollPeriod >= 0) { + num -= originalData[i - rollPeriod][2][0]; + den -= originalData[i - rollPeriod][2][1]; + } + + var date = originalData[i][0]; + var value = den ? num / den : 0.0; + rollingData[i] = [ date, mult * value ]; + } + + return rollingData; +}; + +})(); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DataHandler base implementation for the "bar" + * data formats. This implementation must be extended and the + * extractSeries and rollingAverage must be implemented. + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + */ + +(function() { + +/*global Dygraph:false */ +/*global DygraphLayout:false */ +"use strict"; + +/** + * @constructor + * @extends {Dygraph.DataHandler} + */ +Dygraph.DataHandlers.BarsHandler = function() { + Dygraph.DataHandler.call(this); +}; +Dygraph.DataHandlers.BarsHandler.prototype = new Dygraph.DataHandler(); + +// alias for the rest of the implementation +var BarsHandler = Dygraph.DataHandlers.BarsHandler; + +// TODO(danvk): figure out why the jsdoc has to be copy/pasted from superclass. +// (I get closure compiler errors if this isn't here.) +/** + * @override + * @param {!Array.<Array>} rawData The raw data passed into dygraphs where + * rawData[i] = [x,ySeries1,...,ySeriesN]. + * @param {!number} seriesIndex Index of the series to extract. All other + * series should be ignored. + * @param {!DygraphOptions} options Dygraph options. + * @return {Array.<[!number,?number,?]>} The series in the unified data format + * where series[i] = [x,y,{extras}]. + */ +BarsHandler.prototype.extractSeries = function(rawData, seriesIndex, options) { + // Not implemented here must be extended +}; + +/** + * @override + * @param {!Array.<[!number,?number,?]>} series The series in the unified + * data format where series[i] = [x,y,{extras}]. + * @param {!number} rollPeriod The number of points over which to average the data + * @param {!DygraphOptions} options The dygraph options. + * TODO(danvk): be more specific than "Array" here. + * @return {!Array.<[!number,?number,?]>} the rolled series. + */ +BarsHandler.prototype.rollingAverage = + function(series, rollPeriod, options) { + // Not implemented here, must be extended. +}; + +/** @inheritDoc */ +BarsHandler.prototype.onPointsCreated_ = function(series, points) { + for (var i = 0; i < series.length; ++i) { + var item = series[i]; + var point = points[i]; + point.y_top = NaN; + point.y_bottom = NaN; + point.yval_minus = Dygraph.DataHandler.parseFloat(item[2][0]); + point.yval_plus = Dygraph.DataHandler.parseFloat(item[2][1]); + } +}; + +/** @inheritDoc */ +BarsHandler.prototype.getExtremeYValues = function(series, dateWindow, options) { + var minY = null, maxY = null, y; + + var firstIdx = 0; + var lastIdx = series.length - 1; + + for ( var j = firstIdx; j <= lastIdx; j++) { + y = series[j][1]; + if (y === null || isNaN(y)) continue; + + var low = series[j][2][0]; + var high = series[j][2][1]; + + if (low > y) low = y; // this can happen with custom bars, + if (high < y) high = y; // e.g. in tests/custom-bars.html + + if (maxY === null || high > maxY) maxY = high; + if (minY === null || low < minY) minY = low; + } + + return [ minY, maxY ]; +}; + +/** @inheritDoc */ +BarsHandler.prototype.onLineEvaluated = function(points, axis, logscale) { + var point; + for (var j = 0; j < points.length; j++) { + // Copy over the error terms + point = points[j]; + point.y_top = DygraphLayout.calcYNormal_(axis, point.yval_minus, logscale); + point.y_bottom = DygraphLayout.calcYNormal_(axis, point.yval_plus, logscale); + } +}; + +})(); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DataHandler implementation for the custom bars option. + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + */ + +(function() { + +/*global Dygraph:false */ +"use strict"; + +/** + * @constructor + * @extends Dygraph.DataHandlers.BarsHandler + */ +Dygraph.DataHandlers.CustomBarsHandler = function() { +}; + +var CustomBarsHandler = Dygraph.DataHandlers.CustomBarsHandler; +CustomBarsHandler.prototype = new Dygraph.DataHandlers.BarsHandler(); + +/** @inheritDoc */ +CustomBarsHandler.prototype.extractSeries = function(rawData, i, options) { + // TODO(danvk): pre-allocate series here. + var series = []; + var x, y, point; + var logScale = options.get('logscale'); + for ( var j = 0; j < rawData.length; j++) { + x = rawData[j][0]; + point = rawData[j][i]; + if (logScale && point !== null) { + // On the log scale, points less than zero do not exist. + // This will create a gap in the chart. + if (point[0] <= 0 || point[1] <= 0 || point[2] <= 0) { + point = null; + } + } + // Extract to the unified data format. + if (point !== null) { + y = point[1]; + if (y !== null && !isNaN(y)) { + series.push([ x, y, [ point[0], point[2] ] ]); + } else { + series.push([ x, y, [ y, y ] ]); + } + } else { + series.push([ x, null, [ null, null ] ]); + } + } + return series; +}; + +/** @inheritDoc */ +CustomBarsHandler.prototype.rollingAverage = + function(originalData, rollPeriod, options) { + rollPeriod = Math.min(rollPeriod, originalData.length); + var rollingData = []; + var y, low, high, mid,count, i, extremes; + + low = 0; + mid = 0; + high = 0; + count = 0; + for (i = 0; i < originalData.length; i++) { + y = originalData[i][1]; + extremes = originalData[i][2]; + rollingData[i] = originalData[i]; + + if (y !== null && !isNaN(y)) { + low += extremes[0]; + mid += y; + high += extremes[1]; + count += 1; + } + if (i - rollPeriod >= 0) { + var prev = originalData[i - rollPeriod]; + if (prev[1] !== null && !isNaN(prev[1])) { + low -= prev[2][0]; + mid -= prev[1]; + high -= prev[2][1]; + count -= 1; + } + } + if (count) { + rollingData[i] = [ + originalData[i][0], + 1.0 * mid / count, + [ 1.0 * low / count, + 1.0 * high / count ] ]; + } else { + rollingData[i] = [ originalData[i][0], null, [ null, null ] ]; + } + } + + return rollingData; +}; + +})(); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DataHandler implementation for the error bars option. + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + */ + +(function() { + +/*global Dygraph:false */ +"use strict"; + +/** + * @constructor + * @extends Dygraph.DataHandlers.BarsHandler + */ +Dygraph.DataHandlers.ErrorBarsHandler = function() { +}; + +var ErrorBarsHandler = Dygraph.DataHandlers.ErrorBarsHandler; +ErrorBarsHandler.prototype = new Dygraph.DataHandlers.BarsHandler(); + +/** @inheritDoc */ +ErrorBarsHandler.prototype.extractSeries = function(rawData, i, options) { + // TODO(danvk): pre-allocate series here. + var series = []; + var x, y, variance, point; + var sigma = options.get("sigma"); + var logScale = options.get('logscale'); + for ( var j = 0; j < rawData.length; j++) { + x = rawData[j][0]; + point = rawData[j][i]; + if (logScale && point !== null) { + // On the log scale, points less than zero do not exist. + // This will create a gap in the chart. + if (point[0] <= 0 || point[0] - sigma * point[1] <= 0) { + point = null; + } + } + // Extract to the unified data format. + if (point !== null) { + y = point[0]; + if (y !== null && !isNaN(y)) { + variance = sigma * point[1]; + // preserve original error value in extras for further + // filtering + series.push([ x, y, [ y - variance, y + variance, point[1] ] ]); + } else { + series.push([ x, y, [ y, y, y ] ]); + } + } else { + series.push([ x, null, [ null, null, null ] ]); + } + } + return series; +}; + +/** @inheritDoc */ +ErrorBarsHandler.prototype.rollingAverage = + function(originalData, rollPeriod, options) { + rollPeriod = Math.min(rollPeriod, originalData.length); + var rollingData = []; + var sigma = options.get("sigma"); + + var i, j, y, v, sum, num_ok, stddev, variance, value; + + // Calculate the rolling average for the first rollPeriod - 1 points + // where there is not enough data to roll over the full number of points + for (i = 0; i < originalData.length; i++) { + sum = 0; + variance = 0; + num_ok = 0; + for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { + y = originalData[j][1]; + if (y === null || isNaN(y)) + continue; + num_ok++; + sum += y; + variance += Math.pow(originalData[j][2][2], 2); + } + if (num_ok) { + stddev = Math.sqrt(variance) / num_ok; + value = sum / num_ok; + rollingData[i] = [ originalData[i][0], value, + [value - sigma * stddev, value + sigma * stddev] ]; + } else { + // This explicitly preserves NaNs to aid with "independent + // series". + // See testRollingAveragePreservesNaNs. + v = (rollPeriod == 1) ? originalData[i][1] : null; + rollingData[i] = [ originalData[i][0], v, [ v, v ] ]; + } + } + + return rollingData; +}; + +})(); +/** + * @license + * Copyright 2013 David Eberlein (david.eberlein@ch.sauter-bc.com) + * MIT-licensed (http://opensource.org/licenses/MIT) + */ + +/** + * @fileoverview DataHandler implementation for the combination + * of error bars and fractions options. + * @author David Eberlein (david.eberlein@ch.sauter-bc.com) + */ + +(function() { + +/*global Dygraph:false */ +"use strict"; + +/** + * @constructor + * @extends Dygraph.DataHandlers.BarsHandler + */ +Dygraph.DataHandlers.FractionsBarsHandler = function() { +}; + +var FractionsBarsHandler = Dygraph.DataHandlers.FractionsBarsHandler; +FractionsBarsHandler.prototype = new Dygraph.DataHandlers.BarsHandler(); + +/** @inheritDoc */ +FractionsBarsHandler.prototype.extractSeries = function(rawData, i, options) { + // TODO(danvk): pre-allocate series here. + var series = []; + var x, y, point, num, den, value, stddev, variance; + var mult = 100.0; + var sigma = options.get("sigma"); + var logScale = options.get('logscale'); + for ( var j = 0; j < rawData.length; j++) { + x = rawData[j][0]; + point = rawData[j][i]; + if (logScale && point !== null) { + // On the log scale, points less than zero do not exist. + // This will create a gap in the chart. + if (point[0] <= 0 || point[1] <= 0) { + point = null; + } + } + // Extract to the unified data format. + if (point !== null) { + num = point[0]; + den = point[1]; + if (num !== null && !isNaN(num)) { + value = den ? num / den : 0.0; + stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0; + variance = mult * stddev; + y = mult * value; + // preserve original values in extras for further filtering + series.push([ x, y, [ y - variance, y + variance, num, den ] ]); + } else { + series.push([ x, num, [ num, num, num, den ] ]); + } + } else { + series.push([ x, null, [ null, null, null, null ] ]); + } + } + return series; +}; + +/** @inheritDoc */ +FractionsBarsHandler.prototype.rollingAverage = + function(originalData, rollPeriod, options) { + rollPeriod = Math.min(rollPeriod, originalData.length); + var rollingData = []; + var sigma = options.get("sigma"); + var wilsonInterval = options.get("wilsonInterval"); + + var low, high, i, stddev; + var num = 0; + var den = 0; // numerator/denominator + var mult = 100.0; + for (i = 0; i < originalData.length; i++) { + num += originalData[i][2][2]; + den += originalData[i][2][3]; + if (i - rollPeriod >= 0) { + num -= originalData[i - rollPeriod][2][2]; + den -= originalData[i - rollPeriod][2][3]; + } + + var date = originalData[i][0]; + var value = den ? num / den : 0.0; + if (wilsonInterval) { + // For more details on this confidence interval, see: + // http://en.wikipedia.org/wiki/Binomial_confidence_interval + if (den) { + var p = value < 0 ? 0 : value, n = den; + var pm = sigma * Math.sqrt(p * (1 - p) / n + sigma * sigma / (4 * n * n)); + var denom = 1 + sigma * sigma / den; + low = (p + sigma * sigma / (2 * den) - pm) / denom; + high = (p + sigma * sigma / (2 * den) + pm) / denom; + rollingData[i] = [ date, p * mult, + [ low * mult, high * mult ] ]; + } else { + rollingData[i] = [ date, 0, [ 0, 0 ] ]; + } + } else { + stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0; + rollingData[i] = [ date, mult * value, + [ mult * (value - stddev), mult * (value + stddev) ] ]; + } + } + + return rollingData; +}; + +})(); diff --git a/debian/missing-sources/gauge.coffee b/debian/missing-sources/gauge.coffee new file mode 100644 index 00000000..0ae4c8da --- /dev/null +++ b/debian/missing-sources/gauge.coffee @@ -0,0 +1,542 @@ +# Request Animation Frame Polyfill +# CoffeeScript version of http://paulirish.com/2011/requestanimationframe-for-smart-animating/ +do () -> + vendors = ['ms', 'moz', 'webkit', 'o'] + for vendor in vendors + if window.requestAnimationFrame + break + window.requestAnimationFrame = window[vendor + 'RequestAnimationFrame'] + window.cancelAnimationFrame = window[vendor + 'CancelAnimationFrame'] or window[vendor + 'CancelRequestAnimationFrame'] + + browserRequestAnimationFrame = null + lastId = 0 + isCancelled = {} + + if not requestAnimationFrame + window.requestAnimationFrame = (callback, element) -> + currTime = new Date().getTime() + timeToCall = Math.max(0, 16 - (currTime - lastTime)) + id = window.setTimeout(() -> + callback(currTime + timeToCall) + , timeToCall) + lastTime = currTime + timeToCall + return id + # This implementation should only be used with the setTimeout() + # version of window.requestAnimationFrame(). + window.cancelAnimationFrame = (id) -> + clearTimeout(id) + else if not window.cancelAnimationFrame + browserRequestAnimationFrame = window.requestAnimationFrame + window.requestAnimationFrame = (callback, element) -> + myId = ++lastId + browserRequestAnimationFrame(() -> + if not isCancelled[myId] + callback() + , element) + return myId + window.cancelAnimationFrame = (id) -> + isCancelled[id] = true + +String.prototype.hashCode = () -> + hash = 0 + if this.length == 0 + return hash + for i in [0...this.length] + char = this.charCodeAt(i) + hash = ((hash << 5) - hash) + char + hash = hash & hash # Convert to 32bit integer + return hash + +secondsToString = (sec) -> + hr = Math.floor(sec / 3600) + min = Math.floor((sec - (hr * 3600))/60) + sec -= ((hr * 3600) + (min * 60)) + sec += '' + min += '' + while min.length < 2 + min = '0' + min + while sec.length < 2 + sec = '0' + sec + hr = if hr then hr + ':' else '' + return hr + min + ':' + sec + +formatNumber = (num) -> + return addCommas(num.toFixed(0)) + +updateObjectValues = (obj1, obj2) -> + for own key, val of obj2 + obj1[key] = val + return obj1 + +mergeObjects = (obj1, obj2) -> + out = {} + for own key, val of obj1 + out[key] = val + for own key, val of obj2 + out[key] = val + return out + +addCommas = (nStr) -> + nStr += '' + x = nStr.split('.') + x1 = x[0] + x2 = '' + if x.length > 1 + x2 = '.' + x[1] + rgx = /(\d+)(\d{3})/ + while rgx.test(x1) + x1 = x1.replace(rgx, '$1' + ',' + '$2') + return x1 + x2 + +cutHex = (nStr) -> + if nStr.charAt(0) == "#" + return nStr.substring(1,7) + return nStr + +class ValueUpdater + animationSpeed: 32 + constructor: (addToAnimationQueue=true, @clear=true) -> + if addToAnimationQueue + AnimationUpdater.add(@) + + update: (force=false) -> + if force or @displayedValue != @value + if @ctx and @clear + @ctx.clearRect(0, 0, @canvas.width, @canvas.height) + diff = @value - @displayedValue + if Math.abs(diff / @animationSpeed) <= 0.001 + @displayedValue = @value + else + @displayedValue = @displayedValue + diff / @animationSpeed + @render() + return true + return false + +class BaseGauge extends ValueUpdater + displayScale: 1 + + setTextField: (textField) -> + @textField = if textField instanceof TextRenderer then textField else new TextRenderer(textField) + + setMinValue: (@minValue, updateStartValue=true) -> + if updateStartValue + @displayedValue = @minValue + for gauge in @gp or [] + gauge.displayedValue = @minValue + + setOptions: (options=null) -> + @options = mergeObjects(@options, options) + if @textField + @textField.el.style.fontSize = options.fontSize + 'px' + + if @options.angle > .5 + @gauge.options.angle = .5 + @configDisplayScale() + return @ + + configDisplayScale: () -> + prevDisplayScale = @displayScale + + if @options.highDpiSupport == false + delete @displayScale + else + devicePixelRatio = window.devicePixelRatio or 1 + backingStorePixelRatio = + @ctx.webkitBackingStorePixelRatio or + @ctx.mozBackingStorePixelRatio or + @ctx.msBackingStorePixelRatio or + @ctx.oBackingStorePixelRatio or + @ctx.backingStorePixelRatio or 1 + @displayScale = devicePixelRatio / backingStorePixelRatio + + if @displayScale != prevDisplayScale + width = @canvas.G__width or @canvas.width + height = @canvas.G__height or @canvas.height + @canvas.width = width * @displayScale + @canvas.height = height * @displayScale + @canvas.style.width = "#{width}px" + @canvas.style.height = "#{height}px" + @canvas.G__width = width + @canvas.G__height = height + + return @ + +class TextRenderer + constructor: (@el) -> + + # Default behaviour, override to customize rendering + render: (gauge) -> + @el.innerHTML = formatNumber(gauge.displayedValue) + +class AnimatedText extends ValueUpdater + displayedValue: 0 + value: 0 + + setVal: (value) -> + @value = 1 * value + + constructor: (@elem, @text=false) -> + @value = 1 * @elem.innerHTML + if @text + @value = 0 + render: () -> + if @text + textVal = secondsToString(@displayedValue.toFixed(0)) + else + textVal = addCommas(formatNumber(@displayedValue)) + @elem.innerHTML = textVal + +AnimatedTextFactory = + create: (objList) -> + out = [] + for elem in objList + out.push(new AnimatedText(elem)) + return out + +class GaugePointer extends ValueUpdater + displayedValue: 0 + value: 0 + options: + strokeWidth: 0.035 + length: 0.1 + color: "#000000" + + constructor: (@gauge) -> + @ctx = @gauge.ctx + @canvas = @gauge.canvas + super(false, false) + @setOptions() + + setOptions: (options=null) -> + updateObjectValues(@options, options) + @length = @canvas.height * @options.length + @strokeWidth = @canvas.height * @options.strokeWidth + @maxValue = @gauge.maxValue + @minValue = @gauge.minValue + @displayedValue = @gauge.minValue + @animationSpeed = @gauge.animationSpeed + @options.angle = @gauge.options.angle + + render: () -> + angle = @gauge.getAngle.call(@, @displayedValue) + centerX = @canvas.width / 2 + centerY = @canvas.height * 0.9 + + x = Math.round(centerX + @length * Math.cos(angle)) + y = Math.round(centerY + @length * Math.sin(angle)) + + startX = Math.round(centerX + @strokeWidth * Math.cos(angle - Math.PI/2)) + startY = Math.round(centerY + @strokeWidth * Math.sin(angle - Math.PI/2)) + + endX = Math.round(centerX + @strokeWidth * Math.cos(angle + Math.PI/2)) + endY = Math.round(centerY + @strokeWidth * Math.sin(angle + Math.PI/2)) + + @ctx.fillStyle = @options.color + @ctx.beginPath() + + @ctx.arc(centerX, centerY, @strokeWidth, 0, Math.PI*2, true) + @ctx.fill() + + @ctx.beginPath() + @ctx.moveTo(startX, startY) + @ctx.lineTo(x, y) + @ctx.lineTo(endX, endY) + @ctx.fill() + +class Bar + constructor: (@elem) -> + updateValues: (arrValues) -> + @value = arrValues[0] + @maxValue = arrValues[1] + @avgValue = arrValues[2] + @render() + + render: () -> + if @textField + @textField.text(formatNumber(@value)) + + if @maxValue == 0 + @maxValue = @avgValue * 2 + + valPercent = (@value / @maxValue) * 100 + avgPercent = (@avgValue / @maxValue) * 100 + + $(".bar-value", @elem).css({"width": valPercent + "%"}) + $(".typical-value", @elem).css({"width": avgPercent + "%"}) + +class Gauge extends BaseGauge + elem: null + value: [20] # we support multiple pointers + maxValue: 80 + minValue: 0 + displayedAngle: 0 + displayedValue: 0 + lineWidth: 40 + paddingBottom: 0.1 + percentColors: null, + options: + colorStart: "#6fadcf" + colorStop: undefined + gradientType: 0 # 0 : radial, 1 : linear + strokeColor: "#e0e0e0" + pointer: + length: 0.8 + strokeWidth: 0.035 + angle: 0.15 + lineWidth: 0.44 + fontSize: 40 + limitMax: false + + constructor: (@canvas) -> + super() + @percentColors = null + if typeof G_vmlCanvasManager != 'undefined' + @canvas = window.G_vmlCanvasManager.initElement(@canvas) + @ctx = @canvas.getContext('2d') + @gp = [new GaugePointer(@)] + @setOptions() + @render() + + setOptions: (options=null) -> + super(options) + @configPercentColors() + @lineWidth = @canvas.height * (1 - @paddingBottom) * @options.lineWidth # .2 - .7 + @radius = @canvas.height * (1 - @paddingBottom) - @lineWidth + @ctx.clearRect(0, 0, @canvas.width, @canvas.height) + @render() + for gauge in @gp + gauge.setOptions(@options.pointer) + gauge.render() + return @ + + configPercentColors: () -> + @percentColors = null; + if (@options.percentColors != undefined) + @percentColors = new Array() + for i in [0..(@options.percentColors.length-1)] + rval = parseInt((cutHex(@options.percentColors[i][1])).substring(0,2),16) + gval = parseInt((cutHex(@options.percentColors[i][1])).substring(2,4),16) + bval = parseInt((cutHex(@options.percentColors[i][1])).substring(4,6),16) + @percentColors[i] = { pct: @options.percentColors[i][0], color: { r: rval, g: gval, b: bval } } + + set: (value) -> + @displayedValue = @minValue + if not (value instanceof Array) + value = [value] + # check if we have enough GaugePointers initialized + # lazy initialization + if value.length > @gp.length + for i in [0...(value.length - @gp.length)] + @gp.push(new GaugePointer(@)) + + # get max value and update pointer(s) + i = 0 + max_hit = false + + for val in value + if val > @maxValue + @maxValue = @value * 1.1 + max_hit = true + @gp[i].value = val + @gp[i++].setOptions({maxValue: @maxValue, angle: @options.angle}) + @value = value[value.length - 1] # TODO: Span maybe?? + + if max_hit + unless @options.limitMax + AnimationUpdater.run() + else + AnimationUpdater.run() + + getAngle: (value) -> + return (1 + @options.angle) * Math.PI + ((value - @minValue) / (@maxValue - @minValue)) * (1 - @options.angle * 2) * Math.PI + + getColorForPercentage: (pct, grad) -> + if pct == 0 + color = @percentColors[0].color; + else + color = @percentColors[@percentColors.length - 1].color; + for i in [0..(@percentColors.length - 1)] + if (pct <= @percentColors[i].pct) + if grad == true + # Gradually change between colors + startColor = @percentColors[i - 1] + endColor = @percentColors[i] + rangePct = (pct - startColor.pct) / (endColor.pct - startColor.pct) # How far between both colors + color = { + r: Math.floor(startColor.color.r * (1 - rangePct) + endColor.color.r * rangePct), + g: Math.floor(startColor.color.g * (1 - rangePct) + endColor.color.g * rangePct), + b: Math.floor(startColor.color.b * (1 - rangePct) + endColor.color.b * rangePct) + } + else + color = @percentColors[i].color + break + return 'rgb(' + [color.r, color.g, color.b].join(',') + ')' + + getColorForValue: (val, grad) -> + pct = (val - @minValue) / (@maxValue - @minValue) + return @getColorForPercentage(pct, grad); + + render: () -> + # Draw using canvas + w = @canvas.width / 2 + h = @canvas.height * (1 - @paddingBottom) + displayedAngle = @getAngle(@displayedValue) + if @textField + @textField.render(@) + + @ctx.lineCap = "butt" + if @options.customFillStyle != undefined + fillStyle = @options.customFillStyle(@) + else if @percentColors != null + fillStyle = @getColorForValue(@displayedValue, true) + else if @options.colorStop != undefined + if @options.gradientType == 0 + fillStyle = this.ctx.createRadialGradient(w, h, 9, w, h, 70); + else + fillStyle = this.ctx.createLinearGradient(0, 0, w, 0); + fillStyle.addColorStop(0, @options.colorStart) + fillStyle.addColorStop(1, @options.colorStop) + else + fillStyle = @options.colorStart + @ctx.strokeStyle = fillStyle + + @ctx.beginPath() + @ctx.arc(w, h, @radius, (1 + @options.angle) * Math.PI, displayedAngle, false) + @ctx.lineWidth = @lineWidth + @ctx.stroke() + + @ctx.strokeStyle = @options.strokeColor + @ctx.beginPath() + @ctx.arc(w, h, @radius, displayedAngle, (2 - @options.angle) * Math.PI, false) + @ctx.stroke() + for gauge in @gp + gauge.update(true) + + +class BaseDonut extends BaseGauge + lineWidth: 15 + displayedValue: 0 + value: 33 + maxValue: 80 + minValue: 0 + + options: + lineWidth: 0.10 + colorStart: "#6f6ea0" + colorStop: "#c0c0db" + strokeColor: "#eeeeee" + shadowColor: "#d5d5d5" + angle: 0.35 + + constructor: (@canvas) -> + super() + if typeof G_vmlCanvasManager != 'undefined' + @canvas = window.G_vmlCanvasManager.initElement(@canvas) + @ctx = @canvas.getContext('2d') + @setOptions() + @render() + + getAngle: (value) -> + return (1 - @options.angle) * Math.PI + ((value - @minValue) / (@maxValue - @minValue)) * ((2 + @options.angle) - (1 - @options.angle)) * Math.PI + + setOptions: (options=null) -> + super(options) + @lineWidth = @canvas.height * @options.lineWidth + @radius = @canvas.height / 2 - @lineWidth/2 + return @ + + set: (value) -> + @value = value + if @value > @maxValue + @maxValue = @value * 1.1 + AnimationUpdater.run() + + render: () -> + displayedAngle = @getAngle(@displayedValue) + w = @canvas.width / 2 + h = @canvas.height / 2 + + if @textField + @textField.render(@) + + grdFill = @ctx.createRadialGradient(w, h, 39, w, h, 70) + grdFill.addColorStop(0, @options.colorStart) + grdFill.addColorStop(1, @options.colorStop) + + start = @radius - @lineWidth / 2 + stop = @radius + @lineWidth / 2 + + @ctx.strokeStyle = @options.strokeColor + @ctx.beginPath() + @ctx.arc(w, h, @radius, (1 - @options.angle) * Math.PI, (2 + @options.angle) * Math.PI, false) + @ctx.lineWidth = @lineWidth + @ctx.lineCap = "round" + @ctx.stroke() + + @ctx.strokeStyle = grdFill + @ctx.beginPath() + @ctx.arc(w, h, @radius, (1 - @options.angle) * Math.PI, displayedAngle, false) + @ctx.stroke() + + +class Donut extends BaseDonut + strokeGradient: (w, h, start, stop) -> + grd = @ctx.createRadialGradient(w, h, start, w, h, stop) + grd.addColorStop(0, @options.shadowColor) + grd.addColorStop(0.12, @options._orgStrokeColor) + grd.addColorStop(0.88, @options._orgStrokeColor) + grd.addColorStop(1, @options.shadowColor) + return grd + + setOptions: (options=null) -> + super(options) + w = @canvas.width / 2 + h = @canvas.height / 2 + start = @radius - @lineWidth / 2 + stop = @radius + @lineWidth / 2 + @options._orgStrokeColor = @options.strokeColor + @options.strokeColor = @strokeGradient(w, h, start, stop) + return @ + +window.AnimationUpdater = + elements: [] + animId: null + + addAll: (list) -> + for elem in list + AnimationUpdater.elements.push(elem) + + add: (object) -> + AnimationUpdater.elements.push(object) + + run: () -> + animationFinished = true + for elem in AnimationUpdater.elements + if elem.update() + animationFinished = false + if not animationFinished + AnimationUpdater.animId = requestAnimationFrame(AnimationUpdater.run) + else + cancelAnimationFrame(AnimationUpdater.animId) + +if typeof window.define == 'function' && window.define.amd? + define(() -> + { + Gauge: Gauge, + Donut: Donut, + BaseDonut: BaseDonut, + TextRenderer: TextRenderer + } + ) +else if typeof module != 'undefined' && module.exports? + module.exports = { + Gauge: Gauge, + Donut: Donut, + BaseDonut: BaseDonut, + TextRenderer: TextRenderer + } +else + window.Gauge = Gauge + window.Donut = Donut + window.BaseDonut = BaseDonut + window.TextRenderer = TextRenderer diff --git a/debian/missing-sources/jquery.easypiechart.js b/debian/missing-sources/jquery.easypiechart.js new file mode 100644 index 00000000..5ac3dc1b --- /dev/null +++ b/debian/missing-sources/jquery.easypiechart.js @@ -0,0 +1,364 @@ +/**! + * easy-pie-chart + * Lightweight plugin to render simple, animated and retina optimized pie charts + * + * @license + * @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de) + * @version 2.1.7 + **/ + +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module unless amdModuleId is set + define(["jquery"], function (a0) { + return (factory(a0)); + }); + } else if (typeof exports === 'object') { + // Node. Does not work with strict CommonJS, but + // only CommonJS-like environments that support module.exports, + // like Node. + module.exports = factory(require("jquery")); + } else { + factory(jQuery); + } +}(this, function ($) { + +/** + * Renderer to render the chart on a canvas object + * @param {DOMElement} el DOM element to host the canvas (root of the plugin) + * @param {object} options options object of the plugin + */ +var CanvasRenderer = function(el, options) { + var cachedBackground; + var canvas = document.createElement('canvas'); + + el.appendChild(canvas); + + if (typeof(G_vmlCanvasManager) === 'object') { + G_vmlCanvasManager.initElement(canvas); + } + + var ctx = canvas.getContext('2d'); + + canvas.width = canvas.height = options.size; + + // canvas on retina devices + var scaleBy = 1; + if (window.devicePixelRatio > 1) { + scaleBy = window.devicePixelRatio; + canvas.style.width = canvas.style.height = [options.size, 'px'].join(''); + canvas.width = canvas.height = options.size * scaleBy; + ctx.scale(scaleBy, scaleBy); + } + + // move 0,0 coordinates to the center + ctx.translate(options.size / 2, options.size / 2); + + // rotate canvas -90deg + ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); + + var radius = (options.size - options.lineWidth) / 2; + if (options.scaleColor && options.scaleLength) { + radius -= options.scaleLength + 2; // 2 is the distance between scale and bar + } + + // IE polyfill for Date + Date.now = Date.now || function() { + return +(new Date()); + }; + + /** + * Draw a circle around the center of the canvas + * @param {strong} color Valid CSS color string + * @param {number} lineWidth Width of the line in px + * @param {number} percent Percentage to draw (float between -1 and 1) + */ + var drawCircle = function(color, lineWidth, percent) { + percent = Math.min(Math.max(-1, percent || 0), 1); + var isNegative = percent <= 0 ? true : false; + + ctx.beginPath(); + ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative); + + ctx.strokeStyle = color; + ctx.lineWidth = lineWidth; + + ctx.stroke(); + }; + + /** + * Draw the scale of the chart + */ + var drawScale = function() { + var offset; + var length; + + ctx.lineWidth = 1; + ctx.fillStyle = options.scaleColor; + + ctx.save(); + for (var i = 24; i > 0; --i) { + if (i % 6 === 0) { + length = options.scaleLength; + offset = 0; + } else { + length = options.scaleLength * 0.6; + offset = options.scaleLength - length; + } + ctx.fillRect(-options.size/2 + offset, 0, length, 1); + ctx.rotate(Math.PI / 12); + } + ctx.restore(); + }; + + /** + * Request animation frame wrapper with polyfill + * @return {function} Request animation frame method or timeout fallback + */ + var reqAnimationFrame = (function() { + return window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + function(callback) { + window.setTimeout(callback, 1000 / 60); + }; + }()); + + /** + * Draw the background of the plugin including the scale and the track + */ + var drawBackground = function() { + if(options.scaleColor) drawScale(); + if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1); + }; + + /** + * Canvas accessor + */ + this.getCanvas = function() { + return canvas; + }; + + /** + * Canvas 2D context 'ctx' accessor + */ + this.getCtx = function() { + return ctx; + }; + + /** + * Clear the complete canvas + */ + this.clear = function() { + ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size); + }; + + /** + * Draw the complete chart + * @param {number} percent Percent shown by the chart between -100 and 100 + */ + this.draw = function(percent) { + // do we need to render a background + if (!!options.scaleColor || !!options.trackColor) { + // getImageData and putImageData are supported + if (ctx.getImageData && ctx.putImageData) { + if (!cachedBackground) { + drawBackground(); + cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy); + } else { + ctx.putImageData(cachedBackground, 0, 0); + } + } else { + this.clear(); + drawBackground(); + } + } else { + this.clear(); + } + + ctx.lineCap = options.lineCap; + + // if barcolor is a function execute it and pass the percent as a value + var color; + if (typeof(options.barColor) === 'function') { + color = options.barColor(percent); + } else { + color = options.barColor; + } + + // draw bar + drawCircle(color, options.lineWidth, percent / 100); + }.bind(this); + + /** + * Animate from some percent to some other percentage + * @param {number} from Starting percentage + * @param {number} to Final percentage + */ + this.animate = function(from, to) { + var startTime = Date.now(); + options.onStart(from, to); + var animation = function() { + var process = Math.min(Date.now() - startTime, options.animate.duration); + var currentValue = options.easing(this, process, from, to - from, options.animate.duration); + this.draw(currentValue); + options.onStep(from, to, currentValue); + if (process >= options.animate.duration) { + options.onStop(from, to); + } else { + reqAnimationFrame(animation); + } + }.bind(this); + + reqAnimationFrame(animation); + }.bind(this); +}; + +var EasyPieChart = function(el, opts) { + var defaultOptions = { + barColor: '#ef1e25', + trackColor: '#f9f9f9', + scaleColor: '#dfe0e0', + scaleLength: 5, + lineCap: 'round', + lineWidth: 3, + trackWidth: undefined, + size: 110, + rotate: 0, + animate: { + duration: 1000, + enabled: true + }, + easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/ + t = t / (d/2); + if (t < 1) { + return c / 2 * t * t + b; + } + return -c/2 * ((--t)*(t-2) - 1) + b; + }, + onStart: function(from, to) { + return; + }, + onStep: function(from, to, currentValue) { + return; + }, + onStop: function(from, to) { + return; + } + }; + + // detect present renderer + if (typeof(CanvasRenderer) !== 'undefined') { + defaultOptions.renderer = CanvasRenderer; + } else if (typeof(SVGRenderer) !== 'undefined') { + defaultOptions.renderer = SVGRenderer; + } else { + throw new Error('Please load either the SVG- or the CanvasRenderer'); + } + + var options = {}; + var currentValue = 0; + + /** + * Initialize the plugin by creating the options object and initialize rendering + */ + var init = function() { + this.el = el; + this.options = options; + + // merge user options into default options + for (var i in defaultOptions) { + if (defaultOptions.hasOwnProperty(i)) { + options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i]; + if (typeof(options[i]) === 'function') { + options[i] = options[i].bind(this); + } + } + } + + // check for jQuery easing + if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) { + options.easing = jQuery.easing[options.easing]; + } else { + options.easing = defaultOptions.easing; + } + + // process earlier animate option to avoid bc breaks + if (typeof(options.animate) === 'number') { + options.animate = { + duration: options.animate, + enabled: true + }; + } + + if (typeof(options.animate) === 'boolean' && !options.animate) { + options.animate = { + duration: 1000, + enabled: options.animate + }; + } + + // create renderer + this.renderer = new options.renderer(el, options); + + // initial draw + this.renderer.draw(currentValue); + + // initial update + if (el.dataset && el.dataset.percent) { + this.update(parseFloat(el.dataset.percent)); + } else if (el.getAttribute && el.getAttribute('data-percent')) { + this.update(parseFloat(el.getAttribute('data-percent'))); + } + }.bind(this); + + /** + * Update the value of the chart + * @param {number} newValue Number between 0 and 100 + * @return {object} Instance of the plugin for method chaining + */ + this.update = function(newValue) { + newValue = parseFloat(newValue); + if (options.animate.enabled) { + this.renderer.animate(currentValue, newValue); + } else { + this.renderer.draw(newValue); + } + currentValue = newValue; + return this; + }.bind(this); + + /** + * Disable animation + * @return {object} Instance of the plugin for method chaining + */ + this.disableAnimation = function() { + options.animate.enabled = false; + return this; + }; + + /** + * Enable animation + * @return {object} Instance of the plugin for method chaining + */ + this.enableAnimation = function() { + options.animate.enabled = true; + return this; + }; + + init(); +}; + +$.fn.easyPieChart = function(options) { + return this.each(function() { + var instanceOptions; + + if (!$.data(this, 'easyPieChart')) { + instanceOptions = $.extend({}, options, $(this).data()); + $.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions)); + } + }); +}; + + +})); diff --git a/debian/missing-sources/jquery.nanoscroller.js b/debian/missing-sources/jquery.nanoscroller.js new file mode 100644 index 00000000..edcbfaa4 --- /dev/null +++ b/debian/missing-sources/jquery.nanoscroller.js @@ -0,0 +1,1000 @@ +/*! nanoScrollerJS - v0.8.7 - 2015 +* http://jamesflorentino.github.com/nanoScrollerJS/ +* Copyright (c) 2015 James Florentino; Licensed MIT */ +(function(factory) { + if (typeof define === 'function' && define.amd) { + return define(['jquery'], function($) { + return factory($, window, document); + }); + } else if (typeof exports === 'object') { + return module.exports = factory(require('jquery'), window, document); + } else { + return factory(jQuery, window, document); + } +})(function($, window, document) { + "use strict"; + var BROWSER_IS_IE7, BROWSER_SCROLLBAR_WIDTH, DOMSCROLL, DOWN, DRAG, ENTER, KEYDOWN, KEYUP, MOUSEDOWN, MOUSEENTER, MOUSEMOVE, MOUSEUP, MOUSEWHEEL, NanoScroll, PANEDOWN, RESIZE, SCROLL, SCROLLBAR, TOUCHMOVE, UP, WHEEL, cAF, defaults, getBrowserScrollbarWidth, hasTransform, isFFWithBuggyScrollbar, rAF, transform, _elementStyle, _prefixStyle, _vendor; + defaults = { + + /** + a classname for the pane element. + @property paneClass + @type String + @default 'nano-pane' + */ + paneClass: 'nano-pane', + + /** + a classname for the slider element. + @property sliderClass + @type String + @default 'nano-slider' + */ + sliderClass: 'nano-slider', + + /** + a classname for the content element. + @property contentClass + @type String + @default 'nano-content' + */ + contentClass: 'nano-content', + + /** + a classname for enabled mode + @property enabledClass + @type String + @default 'has-scrollbar' + */ + enabledClass: 'has-scrollbar', + + /** + a classname for flashed mode + @property flashedClass + @type String + @default 'flashed' + */ + flashedClass: 'flashed', + + /** + a classname for active mode + @property activeClass + @type String + @default 'active' + */ + activeClass: 'active', + + /** + a setting to enable native scrolling in iOS devices. + @property iOSNativeScrolling + @type Boolean + @default false + */ + iOSNativeScrolling: false, + + /** + a setting to prevent the rest of the page being + scrolled when user scrolls the `.content` element. + @property preventPageScrolling + @type Boolean + @default false + */ + preventPageScrolling: false, + + /** + a setting to disable binding to the resize event. + @property disableResize + @type Boolean + @default false + */ + disableResize: false, + + /** + a setting to make the scrollbar always visible. + @property alwaysVisible + @type Boolean + @default false + */ + alwaysVisible: false, + + /** + a default timeout for the `flash()` method. + @property flashDelay + @type Number + @default 1500 + */ + flashDelay: 1500, + + /** + a minimum height for the `.slider` element. + @property sliderMinHeight + @type Number + @default 20 + */ + sliderMinHeight: 20, + + /** + a maximum height for the `.slider` element. + @property sliderMaxHeight + @type Number + @default null + */ + sliderMaxHeight: null, + + /** + an alternate document context. + @property documentContext + @type Document + @default null + */ + documentContext: null, + + /** + an alternate window context. + @property windowContext + @type Window + @default null + */ + windowContext: null + }; + + /** + @property SCROLLBAR + @type String + @static + @final + @private + */ + SCROLLBAR = 'scrollbar'; + + /** + @property SCROLL + @type String + @static + @final + @private + */ + SCROLL = 'scroll'; + + /** + @property MOUSEDOWN + @type String + @final + @private + */ + MOUSEDOWN = 'mousedown'; + + /** + @property MOUSEENTER + @type String + @final + @private + */ + MOUSEENTER = 'mouseenter'; + + /** + @property MOUSEMOVE + @type String + @static + @final + @private + */ + MOUSEMOVE = 'mousemove'; + + /** + @property MOUSEWHEEL + @type String + @final + @private + */ + MOUSEWHEEL = 'mousewheel'; + + /** + @property MOUSEUP + @type String + @static + @final + @private + */ + MOUSEUP = 'mouseup'; + + /** + @property RESIZE + @type String + @final + @private + */ + RESIZE = 'resize'; + + /** + @property DRAG + @type String + @static + @final + @private + */ + DRAG = 'drag'; + + /** + @property ENTER + @type String + @static + @final + @private + */ + ENTER = 'enter'; + + /** + @property UP + @type String + @static + @final + @private + */ + UP = 'up'; + + /** + @property PANEDOWN + @type String + @static + @final + @private + */ + PANEDOWN = 'panedown'; + + /** + @property DOMSCROLL + @type String + @static + @final + @private + */ + DOMSCROLL = 'DOMMouseScroll'; + + /** + @property DOWN + @type String + @static + @final + @private + */ + DOWN = 'down'; + + /** + @property WHEEL + @type String + @static + @final + @private + */ + WHEEL = 'wheel'; + + /** + @property KEYDOWN + @type String + @static + @final + @private + */ + KEYDOWN = 'keydown'; + + /** + @property KEYUP + @type String + @static + @final + @private + */ + KEYUP = 'keyup'; + + /** + @property TOUCHMOVE + @type String + @static + @final + @private + */ + TOUCHMOVE = 'touchmove'; + + /** + @property BROWSER_IS_IE7 + @type Boolean + @static + @final + @private + */ + BROWSER_IS_IE7 = window.navigator.appName === 'Microsoft Internet Explorer' && /msie 7./i.test(window.navigator.appVersion) && window.ActiveXObject; + + /** + @property BROWSER_SCROLLBAR_WIDTH + @type Number + @static + @default null + @private + */ + BROWSER_SCROLLBAR_WIDTH = null; + rAF = window.requestAnimationFrame; + cAF = window.cancelAnimationFrame; + _elementStyle = document.createElement('div').style; + _vendor = (function() { + var i, transform, vendor, vendors, _i, _len; + vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT']; + for (i = _i = 0, _len = vendors.length; _i < _len; i = ++_i) { + vendor = vendors[i]; + transform = vendors[i] + 'ransform'; + if (transform in _elementStyle) { + return vendors[i].substr(0, vendors[i].length - 1); + } + } + return false; + })(); + _prefixStyle = function(style) { + if (_vendor === false) { + return false; + } + if (_vendor === '') { + return style; + } + return _vendor + style.charAt(0).toUpperCase() + style.substr(1); + }; + transform = _prefixStyle('transform'); + hasTransform = transform !== false; + + /** + Returns browser's native scrollbar width + @method getBrowserScrollbarWidth + @return {Number} the scrollbar width in pixels + @static + @private + */ + getBrowserScrollbarWidth = function() { + var outer, outerStyle, scrollbarWidth; + outer = document.createElement('div'); + outerStyle = outer.style; + outerStyle.position = 'absolute'; + outerStyle.width = '100px'; + outerStyle.height = '100px'; + outerStyle.overflow = SCROLL; + outerStyle.top = '-9999px'; + document.body.appendChild(outer); + scrollbarWidth = outer.offsetWidth - outer.clientWidth; + document.body.removeChild(outer); + return scrollbarWidth; + }; + isFFWithBuggyScrollbar = function() { + var isOSXFF, ua, version; + ua = window.navigator.userAgent; + isOSXFF = /(?=.+Mac OS X)(?=.+Firefox)/.test(ua); + if (!isOSXFF) { + return false; + } + version = /Firefox\/\d{2}\./.exec(ua); + if (version) { + version = version[0].replace(/\D+/g, ''); + } + return isOSXFF && +version > 23; + }; + + /** + @class NanoScroll + @param element {HTMLElement|Node} the main element + @param options {Object} nanoScroller's options + @constructor + */ + NanoScroll = (function() { + function NanoScroll(el, options) { + this.el = el; + this.options = options; + BROWSER_SCROLLBAR_WIDTH || (BROWSER_SCROLLBAR_WIDTH = getBrowserScrollbarWidth()); + this.$el = $(this.el); + this.doc = $(this.options.documentContext || document); + this.win = $(this.options.windowContext || window); + this.body = this.doc.find('body'); + this.$content = this.$el.children("." + this.options.contentClass); + this.$content.attr('tabindex', this.options.tabIndex || 0); + this.content = this.$content[0]; + this.previousPosition = 0; + if (this.options.iOSNativeScrolling && (this.el.style.WebkitOverflowScrolling != null)) { + this.nativeScrolling(); + } else { + this.generate(); + } + this.createEvents(); + this.addEvents(); + this.reset(); + } + + + /** + Prevents the rest of the page being scrolled + when user scrolls the `.nano-content` element. + @method preventScrolling + @param event {Event} + @param direction {String} Scroll direction (up or down) + @private + */ + + NanoScroll.prototype.preventScrolling = function(e, direction) { + if (!this.isActive) { + return; + } + if (e.type === DOMSCROLL) { + if (direction === DOWN && e.originalEvent.detail > 0 || direction === UP && e.originalEvent.detail < 0) { + e.preventDefault(); + } + } else if (e.type === MOUSEWHEEL) { + if (!e.originalEvent || !e.originalEvent.wheelDelta) { + return; + } + if (direction === DOWN && e.originalEvent.wheelDelta < 0 || direction === UP && e.originalEvent.wheelDelta > 0) { + e.preventDefault(); + } + } + }; + + + /** + Enable iOS native scrolling + @method nativeScrolling + @private + */ + + NanoScroll.prototype.nativeScrolling = function() { + this.$content.css({ + WebkitOverflowScrolling: 'touch' + }); + this.iOSNativeScrolling = true; + this.isActive = true; + }; + + + /** + Updates those nanoScroller properties that + are related to current scrollbar position. + @method updateScrollValues + @private + */ + + NanoScroll.prototype.updateScrollValues = function() { + var content, direction; + content = this.content; + this.maxScrollTop = content.scrollHeight - content.clientHeight; + this.prevScrollTop = this.contentScrollTop || 0; + this.contentScrollTop = content.scrollTop; + direction = this.contentScrollTop > this.previousPosition ? "down" : this.contentScrollTop < this.previousPosition ? "up" : "same"; + this.previousPosition = this.contentScrollTop; + if (direction !== "same") { + this.$el.trigger('update', { + position: this.contentScrollTop, + maximum: this.maxScrollTop, + direction: direction + }); + } + if (!this.iOSNativeScrolling) { + this.maxSliderTop = this.paneHeight - this.sliderHeight; + this.sliderTop = this.maxScrollTop === 0 ? 0 : this.contentScrollTop * this.maxSliderTop / this.maxScrollTop; + } + }; + + + /** + Updates CSS styles for current scroll position. + Uses CSS 2d transfroms and `window.requestAnimationFrame` if available. + @method setOnScrollStyles + @private + */ + + NanoScroll.prototype.setOnScrollStyles = function() { + var cssValue; + if (hasTransform) { + cssValue = {}; + cssValue[transform] = "translate(0, " + this.sliderTop + "px)"; + } else { + cssValue = { + top: this.sliderTop + }; + } + if (rAF) { + if (cAF && this.scrollRAF) { + cAF(this.scrollRAF); + } + this.scrollRAF = rAF((function(_this) { + return function() { + _this.scrollRAF = null; + return _this.slider.css(cssValue); + }; + })(this)); + } else { + this.slider.css(cssValue); + } + }; + + + /** + Creates event related methods + @method createEvents + @private + */ + + NanoScroll.prototype.createEvents = function() { + this.events = { + down: (function(_this) { + return function(e) { + _this.isBeingDragged = true; + _this.offsetY = e.pageY - _this.slider.offset().top; + if (!_this.slider.is(e.target)) { + _this.offsetY = 0; + } + _this.pane.addClass(_this.options.activeClass); + _this.doc.bind(MOUSEMOVE, _this.events[DRAG]).bind(MOUSEUP, _this.events[UP]); + _this.body.bind(MOUSEENTER, _this.events[ENTER]); + return false; + }; + })(this), + drag: (function(_this) { + return function(e) { + _this.sliderY = e.pageY - _this.$el.offset().top - _this.paneTop - (_this.offsetY || _this.sliderHeight * 0.5); + _this.scroll(); + if (_this.contentScrollTop >= _this.maxScrollTop && _this.prevScrollTop !== _this.maxScrollTop) { + _this.$el.trigger('scrollend'); + } else if (_this.contentScrollTop === 0 && _this.prevScrollTop !== 0) { + _this.$el.trigger('scrolltop'); + } + return false; + }; + })(this), + up: (function(_this) { + return function(e) { + _this.isBeingDragged = false; + _this.pane.removeClass(_this.options.activeClass); + _this.doc.unbind(MOUSEMOVE, _this.events[DRAG]).unbind(MOUSEUP, _this.events[UP]); + _this.body.unbind(MOUSEENTER, _this.events[ENTER]); + return false; + }; + })(this), + resize: (function(_this) { + return function(e) { + _this.reset(); + }; + })(this), + panedown: (function(_this) { + return function(e) { + _this.sliderY = (e.offsetY || e.originalEvent.layerY) - (_this.sliderHeight * 0.5); + _this.scroll(); + _this.events.down(e); + return false; + }; + })(this), + scroll: (function(_this) { + return function(e) { + _this.updateScrollValues(); + if (_this.isBeingDragged) { + return; + } + if (!_this.iOSNativeScrolling) { + _this.sliderY = _this.sliderTop; + _this.setOnScrollStyles(); + } + if (e == null) { + return; + } + if (_this.contentScrollTop >= _this.maxScrollTop) { + if (_this.options.preventPageScrolling) { + _this.preventScrolling(e, DOWN); + } + if (_this.prevScrollTop !== _this.maxScrollTop) { + _this.$el.trigger('scrollend'); + } + } else if (_this.contentScrollTop === 0) { + if (_this.options.preventPageScrolling) { + _this.preventScrolling(e, UP); + } + if (_this.prevScrollTop !== 0) { + _this.$el.trigger('scrolltop'); + } + } + }; + })(this), + wheel: (function(_this) { + return function(e) { + var delta; + if (e == null) { + return; + } + delta = e.delta || e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail || (e.originalEvent && -e.originalEvent.detail); + if (delta) { + _this.sliderY += -delta / 3; + } + _this.scroll(); + return false; + }; + })(this), + enter: (function(_this) { + return function(e) { + var _ref; + if (!_this.isBeingDragged) { + return; + } + if ((e.buttons || e.which) !== 1) { + return (_ref = _this.events)[UP].apply(_ref, arguments); + } + }; + })(this) + }; + }; + + + /** + Adds event listeners with jQuery. + @method addEvents + @private + */ + + NanoScroll.prototype.addEvents = function() { + var events; + this.removeEvents(); + events = this.events; + if (!this.options.disableResize) { + this.win.bind(RESIZE, events[RESIZE]); + } + if (!this.iOSNativeScrolling) { + this.slider.bind(MOUSEDOWN, events[DOWN]); + this.pane.bind(MOUSEDOWN, events[PANEDOWN]).bind("" + MOUSEWHEEL + " " + DOMSCROLL, events[WHEEL]); + } + this.$content.bind("" + SCROLL + " " + MOUSEWHEEL + " " + DOMSCROLL + " " + TOUCHMOVE, events[SCROLL]); + }; + + + /** + Removes event listeners with jQuery. + @method removeEvents + @private + */ + + NanoScroll.prototype.removeEvents = function() { + var events; + events = this.events; + this.win.unbind(RESIZE, events[RESIZE]); + if (!this.iOSNativeScrolling) { + this.slider.unbind(); + this.pane.unbind(); + } + this.$content.unbind("" + SCROLL + " " + MOUSEWHEEL + " " + DOMSCROLL + " " + TOUCHMOVE, events[SCROLL]); + }; + + + /** + Generates nanoScroller's scrollbar and elements for it. + @method generate + @chainable + @private + */ + + NanoScroll.prototype.generate = function() { + var contentClass, cssRule, currentPadding, options, pane, paneClass, sliderClass; + options = this.options; + paneClass = options.paneClass, sliderClass = options.sliderClass, contentClass = options.contentClass; + if (!(pane = this.$el.children("." + paneClass)).length && !pane.children("." + sliderClass).length) { + this.$el.append("<div class=\"" + paneClass + "\"><div class=\"" + sliderClass + "\" /></div>"); + } + this.pane = this.$el.children("." + paneClass); + this.slider = this.pane.find("." + sliderClass); + if (BROWSER_SCROLLBAR_WIDTH === 0 && isFFWithBuggyScrollbar()) { + currentPadding = window.getComputedStyle(this.content, null).getPropertyValue('padding-right').replace(/[^0-9.]+/g, ''); + cssRule = { + right: -14, + paddingRight: +currentPadding + 14 + }; + } else if (BROWSER_SCROLLBAR_WIDTH) { + cssRule = { + right: -BROWSER_SCROLLBAR_WIDTH + }; + this.$el.addClass(options.enabledClass); + } + if (cssRule != null) { + this.$content.css(cssRule); + } + return this; + }; + + + /** + @method restore + @private + */ + + NanoScroll.prototype.restore = function() { + this.stopped = false; + if (!this.iOSNativeScrolling) { + this.pane.show(); + } + this.addEvents(); + }; + + + /** + Resets nanoScroller's scrollbar. + @method reset + @chainable + @example + $(".nano").nanoScroller(); + */ + + NanoScroll.prototype.reset = function() { + var content, contentHeight, contentPosition, contentStyle, contentStyleOverflowY, paneBottom, paneHeight, paneOuterHeight, paneTop, parentMaxHeight, right, sliderHeight; + if (this.iOSNativeScrolling) { + this.contentHeight = this.content.scrollHeight; + return; + } + if (!this.$el.find("." + this.options.paneClass).length) { + this.generate().stop(); + } + if (this.stopped) { + this.restore(); + } + content = this.content; + contentStyle = content.style; + contentStyleOverflowY = contentStyle.overflowY; + if (BROWSER_IS_IE7) { + this.$content.css({ + height: this.$content.height() + }); + } + contentHeight = content.scrollHeight + BROWSER_SCROLLBAR_WIDTH; + parentMaxHeight = parseInt(this.$el.css("max-height"), 10); + if (parentMaxHeight > 0) { + this.$el.height(""); + this.$el.height(content.scrollHeight > parentMaxHeight ? parentMaxHeight : content.scrollHeight); + } + paneHeight = this.pane.outerHeight(false); + paneTop = parseInt(this.pane.css('top'), 10); + paneBottom = parseInt(this.pane.css('bottom'), 10); + paneOuterHeight = paneHeight + paneTop + paneBottom; + sliderHeight = Math.round(paneOuterHeight / contentHeight * paneHeight); + if (sliderHeight < this.options.sliderMinHeight) { + sliderHeight = this.options.sliderMinHeight; + } else if ((this.options.sliderMaxHeight != null) && sliderHeight > this.options.sliderMaxHeight) { + sliderHeight = this.options.sliderMaxHeight; + } + if (contentStyleOverflowY === SCROLL && contentStyle.overflowX !== SCROLL) { + sliderHeight += BROWSER_SCROLLBAR_WIDTH; + } + this.maxSliderTop = paneOuterHeight - sliderHeight; + this.contentHeight = contentHeight; + this.paneHeight = paneHeight; + this.paneOuterHeight = paneOuterHeight; + this.sliderHeight = sliderHeight; + this.paneTop = paneTop; + this.slider.height(sliderHeight); + this.events.scroll(); + this.pane.show(); + this.isActive = true; + if ((content.scrollHeight === content.clientHeight) || (this.pane.outerHeight(true) >= content.scrollHeight && contentStyleOverflowY !== SCROLL)) { + this.pane.hide(); + this.isActive = false; + } else if (this.el.clientHeight === content.scrollHeight && contentStyleOverflowY === SCROLL) { + this.slider.hide(); + } else { + this.slider.show(); + } + this.pane.css({ + opacity: (this.options.alwaysVisible ? 1 : ''), + visibility: (this.options.alwaysVisible ? 'visible' : '') + }); + contentPosition = this.$content.css('position'); + if (contentPosition === 'static' || contentPosition === 'relative') { + right = parseInt(this.$content.css('right'), 10); + if (right) { + this.$content.css({ + right: '', + marginRight: right + }); + } + } + return this; + }; + + + /** + @method scroll + @private + @example + $(".nano").nanoScroller({ scroll: 'top' }); + */ + + NanoScroll.prototype.scroll = function() { + if (!this.isActive) { + return; + } + this.sliderY = Math.max(0, this.sliderY); + this.sliderY = Math.min(this.maxSliderTop, this.sliderY); + this.$content.scrollTop(this.maxScrollTop * this.sliderY / this.maxSliderTop); + if (!this.iOSNativeScrolling) { + this.updateScrollValues(); + this.setOnScrollStyles(); + } + return this; + }; + + + /** + Scroll at the bottom with an offset value + @method scrollBottom + @param offsetY {Number} + @chainable + @example + $(".nano").nanoScroller({ scrollBottom: value }); + */ + + NanoScroll.prototype.scrollBottom = function(offsetY) { + if (!this.isActive) { + return; + } + this.$content.scrollTop(this.contentHeight - this.$content.height() - offsetY).trigger(MOUSEWHEEL); + this.stop().restore(); + return this; + }; + + + /** + Scroll at the top with an offset value + @method scrollTop + @param offsetY {Number} + @chainable + @example + $(".nano").nanoScroller({ scrollTop: value }); + */ + + NanoScroll.prototype.scrollTop = function(offsetY) { + if (!this.isActive) { + return; + } + this.$content.scrollTop(+offsetY).trigger(MOUSEWHEEL); + this.stop().restore(); + return this; + }; + + + /** + Scroll to an element + @method scrollTo + @param node {Node} A node to scroll to. + @chainable + @example + $(".nano").nanoScroller({ scrollTo: $('#a_node') }); + */ + + NanoScroll.prototype.scrollTo = function(node) { + if (!this.isActive) { + return; + } + this.scrollTop(this.$el.find(node).get(0).offsetTop); + return this; + }; + + + /** + To stop the operation. + This option will tell the plugin to disable all event bindings and hide the gadget scrollbar from the UI. + @method stop + @chainable + @example + $(".nano").nanoScroller({ stop: true }); + */ + + NanoScroll.prototype.stop = function() { + if (cAF && this.scrollRAF) { + cAF(this.scrollRAF); + this.scrollRAF = null; + } + this.stopped = true; + this.removeEvents(); + if (!this.iOSNativeScrolling) { + this.pane.hide(); + } + return this; + }; + + + /** + Destroys nanoScroller and restores browser's native scrollbar. + @method destroy + @chainable + @example + $(".nano").nanoScroller({ destroy: true }); + */ + + NanoScroll.prototype.destroy = function() { + if (!this.stopped) { + this.stop(); + } + if (!this.iOSNativeScrolling && this.pane.length) { + this.pane.remove(); + } + if (BROWSER_IS_IE7) { + this.$content.height(''); + } + this.$content.removeAttr('tabindex'); + if (this.$el.hasClass(this.options.enabledClass)) { + this.$el.removeClass(this.options.enabledClass); + this.$content.css({ + right: '' + }); + } + return this; + }; + + + /** + To flash the scrollbar gadget for an amount of time defined in plugin settings (defaults to 1,5s). + Useful if you want to show the user (e.g. on pageload) that there is more content waiting for him. + @method flash + @chainable + @example + $(".nano").nanoScroller({ flash: true }); + */ + + NanoScroll.prototype.flash = function() { + if (this.iOSNativeScrolling) { + return; + } + if (!this.isActive) { + return; + } + this.reset(); + this.pane.addClass(this.options.flashedClass); + setTimeout((function(_this) { + return function() { + _this.pane.removeClass(_this.options.flashedClass); + }; + })(this), this.options.flashDelay); + return this; + }; + + return NanoScroll; + + })(); + $.fn.nanoScroller = function(settings) { + return this.each(function() { + var options, scrollbar; + if (!(scrollbar = this.nanoscroller)) { + options = $.extend({}, defaults, settings); + this.nanoscroller = scrollbar = new NanoScroll(this, options); + } + if (settings && typeof settings === "object") { + $.extend(scrollbar.options, settings); + if (settings.scrollBottom != null) { + return scrollbar.scrollBottom(settings.scrollBottom); + } + if (settings.scrollTop != null) { + return scrollbar.scrollTop(settings.scrollTop); + } + if (settings.scrollTo) { + return scrollbar.scrollTo(settings.scrollTo); + } + if (settings.scroll === 'bottom') { + return scrollbar.scrollBottom(0); + } + if (settings.scroll === 'top') { + return scrollbar.scrollTop(0); + } + if (settings.scroll && settings.scroll instanceof $) { + return scrollbar.scrollTo(settings.scroll); + } + if (settings.stop) { + return scrollbar.stop(); + } + if (settings.destroy) { + return scrollbar.destroy(); + } + if (settings.flash) { + return scrollbar.flash(); + } + } + return scrollbar.reset(); + }); + }; + $.fn.nanoScroller.Constructor = NanoScroll; +}); + +//# sourceMappingURL=jquery.nanoscroller.js.map diff --git a/debian/missing-sources/jquery.peity.js b/debian/missing-sources/jquery.peity.js new file mode 100644 index 00000000..8c4c9a52 --- /dev/null +++ b/debian/missing-sources/jquery.peity.js @@ -0,0 +1,383 @@ +// Peity jQuery plugin version 3.2.0 +// (c) 2015 Ben Pickles +// +// http://benpickles.github.io/peity +// +// Released under MIT license. +(function($, document, Math, undefined) { + var peity = $.fn.peity = function(type, options) { + if (svgSupported) { + this.each(function() { + var $this = $(this) + var chart = $this.data('_peity') + + if (chart) { + if (type) chart.type = type + $.extend(chart.opts, options) + } else { + chart = new Peity( + $this, + type, + $.extend({}, + peity.defaults[type], + $this.data('peity'), + options) + ) + + $this + .change(function() { chart.draw() }) + .data('_peity', chart) + } + + chart.draw() + }); + } + + return this; + }; + + var Peity = function($el, type, opts) { + this.$el = $el + this.type = type + this.opts = opts + } + + var PeityPrototype = Peity.prototype + + var svgElement = PeityPrototype.svgElement = function(tag, attrs) { + return $( + document.createElementNS('http://www.w3.org/2000/svg', tag) + ).attr(attrs) + } + + // https://gist.github.com/madrobby/3201472 + var svgSupported = 'createElementNS' in document && svgElement('svg', {})[0].createSVGRect + + PeityPrototype.draw = function() { + var opts = this.opts + peity.graphers[this.type].call(this, opts) + if (opts.after) opts.after.call(this, opts) + } + + PeityPrototype.fill = function() { + var fill = this.opts.fill + + return $.isFunction(fill) + ? fill + : function(_, i) { return fill[i % fill.length] } + } + + PeityPrototype.prepare = function(width, height) { + if (!this.$svg) { + this.$el.hide().after( + this.$svg = svgElement('svg', { + "class": "peity" + }) + ) + } + + return this.$svg + .empty() + .data('peity', this) + .attr({ + height: height, + width: width + }) + } + + PeityPrototype.values = function() { + return $.map(this.$el.text().split(this.opts.delimiter), function(value) { + return parseFloat(value) + }) + } + + peity.defaults = {} + peity.graphers = {} + + peity.register = function(type, defaults, grapher) { + this.defaults[type] = defaults + this.graphers[type] = grapher + } + + peity.register( + 'pie', + { + fill: ['#ff9900', '#fff4dd', '#ffc66e'], + radius: 8 + }, + function(opts) { + if (!opts.delimiter) { + var delimiter = this.$el.text().match(/[^0-9\.]/) + opts.delimiter = delimiter ? delimiter[0] : "," + } + + var values = $.map(this.values(), function(n) { + return n > 0 ? n : 0 + }) + + if (opts.delimiter == "/") { + var v1 = values[0] + var v2 = values[1] + values = [v1, Math.max(0, v2 - v1)] + } + + var i = 0 + var length = values.length + var sum = 0 + + for (; i < length; i++) { + sum += values[i] + } + + if (!sum) { + length = 2 + sum = 1 + values = [0, 1] + } + + var diameter = opts.radius * 2 + + var $svg = this.prepare( + opts.width || diameter, + opts.height || diameter + ) + + var width = $svg.width() + , height = $svg.height() + , cx = width / 2 + , cy = height / 2 + + var radius = Math.min(cx, cy) + , innerRadius = opts.innerRadius + + if (this.type == 'donut' && !innerRadius) { + innerRadius = radius * 0.5 + } + + var pi = Math.PI + var fill = this.fill() + + var scale = this.scale = function(value, radius) { + var radians = value / sum * pi * 2 - pi / 2 + + return [ + radius * Math.cos(radians) + cx, + radius * Math.sin(radians) + cy + ] + } + + var cumulative = 0 + + for (i = 0; i < length; i++) { + var value = values[i] + , portion = value / sum + , $node + + if (portion == 0) continue + + if (portion == 1) { + if (innerRadius) { + var x2 = cx - 0.01 + , y1 = cy - radius + , y2 = cy - innerRadius + + $node = svgElement('path', { + d: [ + 'M', cx, y1, + 'A', radius, radius, 0, 1, 1, x2, y1, + 'L', x2, y2, + 'A', innerRadius, innerRadius, 0, 1, 0, cx, y2 + ].join(' ') + }) + } else { + $node = svgElement('circle', { + cx: cx, + cy: cy, + r: radius + }) + } + } else { + var cumulativePlusValue = cumulative + value + + var d = ['M'].concat( + scale(cumulative, radius), + 'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1, + scale(cumulativePlusValue, radius), + 'L' + ) + + if (innerRadius) { + d = d.concat( + scale(cumulativePlusValue, innerRadius), + 'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0, + scale(cumulative, innerRadius) + ) + } else { + d.push(cx, cy) + } + + cumulative += value + + $node = svgElement('path', { + d: d.join(" ") + }) + } + + $node.attr('fill', fill.call(this, value, i, values)) + + $svg.append($node) + } + } + ) + + peity.register( + 'donut', + $.extend(true, {}, peity.defaults.pie), + function(opts) { + peity.graphers.pie.call(this, opts) + } + ) + + peity.register( + "line", + { + delimiter: ",", + fill: "#c6d9fd", + height: 16, + min: 0, + stroke: "#4d89f9", + strokeWidth: 1, + width: 32 + }, + function(opts) { + var values = this.values() + if (values.length == 1) values.push(values[0]) + var max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max)) + , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min)) + + var $svg = this.prepare(opts.width, opts.height) + , strokeWidth = opts.strokeWidth + , width = $svg.width() + , height = $svg.height() - strokeWidth + , diff = max - min + + var xScale = this.x = function(input) { + return input * (width / (values.length - 1)) + } + + var yScale = this.y = function(input) { + var y = height + + if (diff) { + y -= ((input - min) / diff) * height + } + + return y + strokeWidth / 2 + } + + var zero = yScale(Math.max(min, 0)) + , coords = [0, zero] + + for (var i = 0; i < values.length; i++) { + coords.push( + xScale(i), + yScale(values[i]) + ) + } + + coords.push(width, zero) + + if (opts.fill) { + $svg.append( + svgElement('polygon', { + fill: opts.fill, + points: coords.join(' ') + }) + ) + } + + if (strokeWidth) { + $svg.append( + svgElement('polyline', { + fill: 'none', + points: coords.slice(2, coords.length - 2).join(' '), + stroke: opts.stroke, + 'stroke-width': strokeWidth, + 'stroke-linecap': 'square' + }) + ) + } + } + ); + + peity.register( + 'bar', + { + delimiter: ",", + fill: ["#4D89F9"], + height: 16, + min: 0, + padding: 0.1, + width: 32 + }, + function(opts) { + var values = this.values() + , max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max)) + , min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min)) + + var $svg = this.prepare(opts.width, opts.height) + , width = $svg.width() + , height = $svg.height() + , diff = max - min + , padding = opts.padding + , fill = this.fill() + + var xScale = this.x = function(input) { + return input * width / values.length + } + + var yScale = this.y = function(input) { + return height - ( + diff + ? ((input - min) / diff) * height + : 1 + ) + } + + for (var i = 0; i < values.length; i++) { + var x = xScale(i + padding) + , w = xScale(i + 1 - padding) - x + , value = values[i] + , valueY = yScale(value) + , y1 = valueY + , y2 = valueY + , h + + if (!diff) { + h = 1 + } else if (value < 0) { + y1 = yScale(Math.min(max, 0)) + } else { + y2 = yScale(Math.max(min, 0)) + } + + h = y2 - y1 + + if (h == 0) { + h = 1 + if (max > 0 && diff) y1-- + } + + $svg.append( + svgElement('rect', { + fill: fill.call(this, value, i, values), + x: x, + y: y1, + width: w, + height: h + }) + ) + } + } + ); +})(jQuery, document, Math); diff --git a/debian/missing-sources/jquery.sparkline.js b/debian/missing-sources/jquery.sparkline.js new file mode 100644 index 00000000..721e03b7 --- /dev/null +++ b/debian/missing-sources/jquery.sparkline.js @@ -0,0 +1,3054 @@ +/** +* +* jquery.sparkline.js +* +* v2.1.2 +* (c) Splunk, Inc +* Contact: Gareth Watts (gareth@splunk.com) +* http://omnipotent.net/jquery.sparkline/ +* +* Generates inline sparkline charts from data supplied either to the method +* or inline in HTML +* +* Compatible with Internet Explorer 6.0+ and modern browsers equipped with the canvas tag +* (Firefox 2.0+, Safari, Opera, etc) +* +* License: New BSD License +* +* Copyright (c) 2012, Splunk Inc. +* All rights reserved. +* +* Redistribution and use in source and binary forms, with or without modification, +* are permitted provided that the following conditions are met: +* +* * Redistributions of source code must retain the above copyright notice, +* this list of conditions and the following disclaimer. +* * Redistributions in binary form must reproduce the above copyright notice, +* this list of conditions and the following disclaimer in the documentation +* and/or other materials provided with the distribution. +* * Neither the name of Splunk Inc nor the names of its contributors may +* be used to endorse or promote products derived from this software without +* specific prior written permission. +* +* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY +* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES +* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT +* SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT +* OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) +* HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS +* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +* +* +* Usage: +* $(selector).sparkline(values, options) +* +* If values is undefined or set to 'html' then the data values are read from the specified tag: +* <p>Sparkline: <span class="sparkline">1,4,6,6,8,5,3,5</span></p> +* $('.sparkline').sparkline(); +* There must be no spaces in the enclosed data set +* +* Otherwise values must be an array of numbers or null values +* <p>Sparkline: <span id="sparkline1">This text replaced if the browser is compatible</span></p> +* $('#sparkline1').sparkline([1,4,6,6,8,5,3,5]) +* $('#sparkline2').sparkline([1,4,6,null,null,5,3,5]) +* +* Values can also be specified in an HTML comment, or as a values attribute: +* <p>Sparkline: <span class="sparkline"><!--1,4,6,6,8,5,3,5 --></span></p> +* <p>Sparkline: <span class="sparkline" values="1,4,6,6,8,5,3,5"></span></p> +* $('.sparkline').sparkline(); +* +* For line charts, x values can also be specified: +* <p>Sparkline: <span class="sparkline">1:1,2.7:4,3.4:6,5:6,6:8,8.7:5,9:3,10:5</span></p> +* $('#sparkline1').sparkline([ [1,1], [2.7,4], [3.4,6], [5,6], [6,8], [8.7,5], [9,3], [10,5] ]) +* +* By default, options should be passed in as teh second argument to the sparkline function: +* $('.sparkline').sparkline([1,2,3,4], {type: 'bar'}) +* +* Options can also be set by passing them on the tag itself. This feature is disabled by default though +* as there's a slight performance overhead: +* $('.sparkline').sparkline([1,2,3,4], {enableTagOptions: true}) +* <p>Sparkline: <span class="sparkline" sparkType="bar" sparkBarColor="red">loading</span></p> +* Prefix all options supplied as tag attribute with "spark" (configurable by setting tagOptionPrefix) +* +* Supported options: +* lineColor - Color of the line used for the chart +* fillColor - Color used to fill in the chart - Set to '' or false for a transparent chart +* width - Width of the chart - Defaults to 3 times the number of values in pixels +* height - Height of the chart - Defaults to the height of the containing element +* chartRangeMin - Specify the minimum value to use for the Y range of the chart - Defaults to the minimum value supplied +* chartRangeMax - Specify the maximum value to use for the Y range of the chart - Defaults to the maximum value supplied +* chartRangeClip - Clip out of range values to the max/min specified by chartRangeMin and chartRangeMax +* chartRangeMinX - Specify the minimum value to use for the X range of the chart - Defaults to the minimum value supplied +* chartRangeMaxX - Specify the maximum value to use for the X range of the chart - Defaults to the maximum value supplied +* composite - If true then don't erase any existing chart attached to the tag, but draw +* another chart over the top - Note that width and height are ignored if an +* existing chart is detected. +* tagValuesAttribute - Name of tag attribute to check for data values - Defaults to 'values' +* enableTagOptions - Whether to check tags for sparkline options +* tagOptionPrefix - Prefix used for options supplied as tag attributes - Defaults to 'spark' +* disableHiddenCheck - If set to true, then the plugin will assume that charts will never be drawn into a +* hidden dom element, avoding a browser reflow +* disableInteraction - If set to true then all mouseover/click interaction behaviour will be disabled, +* making the plugin perform much like it did in 1.x +* disableTooltips - If set to true then tooltips will be disabled - Defaults to false (tooltips enabled) +* disableHighlight - If set to true then highlighting of selected chart elements on mouseover will be disabled +* defaults to false (highlights enabled) +* highlightLighten - Factor to lighten/darken highlighted chart values by - Defaults to 1.4 for a 40% increase +* tooltipContainer - Specify which DOM element the tooltip should be rendered into - defaults to document.body +* tooltipClassname - Optional CSS classname to apply to tooltips - If not specified then a default style will be applied +* tooltipOffsetX - How many pixels away from the mouse pointer to render the tooltip on the X axis +* tooltipOffsetY - How many pixels away from the mouse pointer to render the tooltip on the r axis +* tooltipFormatter - Optional callback that allows you to override the HTML displayed in the tooltip +* callback is given arguments of (sparkline, options, fields) +* tooltipChartTitle - If specified then the tooltip uses the string specified by this setting as a title +* tooltipFormat - A format string or SPFormat object (or an array thereof for multiple entries) +* to control the format of the tooltip +* tooltipPrefix - A string to prepend to each field displayed in a tooltip +* tooltipSuffix - A string to append to each field displayed in a tooltip +* tooltipSkipNull - If true then null values will not have a tooltip displayed (defaults to true) +* tooltipValueLookups - An object or range map to map field values to tooltip strings +* (eg. to map -1 to "Lost", 0 to "Draw", and 1 to "Win") +* numberFormatter - Optional callback for formatting numbers in tooltips +* numberDigitGroupSep - Character to use for group separator in numbers "1,234" - Defaults to "," +* numberDecimalMark - Character to use for the decimal point when formatting numbers - Defaults to "." +* numberDigitGroupCount - Number of digits between group separator - Defaults to 3 +* +* There are 7 types of sparkline, selected by supplying a "type" option of 'line' (default), +* 'bar', 'tristate', 'bullet', 'discrete', 'pie' or 'box' +* line - Line chart. Options: +* spotColor - Set to '' to not end each line in a circular spot +* minSpotColor - If set, color of spot at minimum value +* maxSpotColor - If set, color of spot at maximum value +* spotRadius - Radius in pixels +* lineWidth - Width of line in pixels +* normalRangeMin +* normalRangeMax - If set draws a filled horizontal bar between these two values marking the "normal" +* or expected range of values +* normalRangeColor - Color to use for the above bar +* drawNormalOnTop - Draw the normal range above the chart fill color if true +* defaultPixelsPerValue - Defaults to 3 pixels of width for each value in the chart +* highlightSpotColor - The color to use for drawing a highlight spot on mouseover - Set to null to disable +* highlightLineColor - The color to use for drawing a highlight line on mouseover - Set to null to disable +* valueSpots - Specify which points to draw spots on, and in which color. Accepts a range map +* +* bar - Bar chart. Options: +* barColor - Color of bars for postive values +* negBarColor - Color of bars for negative values +* zeroColor - Color of bars with zero values +* nullColor - Color of bars with null values - Defaults to omitting the bar entirely +* barWidth - Width of bars in pixels +* colorMap - Optional mappnig of values to colors to override the *BarColor values above +* can be an Array of values to control the color of individual bars or a range map +* to specify colors for individual ranges of values +* barSpacing - Gap between bars in pixels +* zeroAxis - Centers the y-axis around zero if true +* +* tristate - Charts values of win (>0), lose (<0) or draw (=0) +* posBarColor - Color of win values +* negBarColor - Color of lose values +* zeroBarColor - Color of draw values +* barWidth - Width of bars in pixels +* barSpacing - Gap between bars in pixels +* colorMap - Optional mappnig of values to colors to override the *BarColor values above +* can be an Array of values to control the color of individual bars or a range map +* to specify colors for individual ranges of values +* +* discrete - Options: +* lineHeight - Height of each line in pixels - Defaults to 30% of the graph height +* thesholdValue - Values less than this value will be drawn using thresholdColor instead of lineColor +* thresholdColor +* +* bullet - Values for bullet graphs msut be in the order: target, performance, range1, range2, range3, ... +* options: +* targetColor - The color of the vertical target marker +* targetWidth - The width of the target marker in pixels +* performanceColor - The color of the performance measure horizontal bar +* rangeColors - Colors to use for each qualitative range background color +* +* pie - Pie chart. Options: +* sliceColors - An array of colors to use for pie slices +* offset - Angle in degrees to offset the first slice - Try -90 or +90 +* borderWidth - Width of border to draw around the pie chart, in pixels - Defaults to 0 (no border) +* borderColor - Color to use for the pie chart border - Defaults to #000 +* +* box - Box plot. Options: +* raw - Set to true to supply pre-computed plot points as values +* values should be: low_outlier, low_whisker, q1, median, q3, high_whisker, high_outlier +* When set to false you can supply any number of values and the box plot will +* be computed for you. Default is false. +* showOutliers - Set to true (default) to display outliers as circles +* outlierIQR - Interquartile range used to determine outliers. Default 1.5 +* boxLineColor - Outline color of the box +* boxFillColor - Fill color for the box +* whiskerColor - Line color used for whiskers +* outlierLineColor - Outline color of outlier circles +* outlierFillColor - Fill color of the outlier circles +* spotRadius - Radius of outlier circles +* medianColor - Line color of the median line +* target - Draw a target cross hair at the supplied value (default undefined) +* +* +* +* Examples: +* $('#sparkline1').sparkline(myvalues, { lineColor: '#f00', fillColor: false }); +* $('.barsparks').sparkline('html', { type:'bar', height:'40px', barWidth:5 }); +* $('#tristate').sparkline([1,1,-1,1,0,0,-1], { type:'tristate' }): +* $('#discrete').sparkline([1,3,4,5,5,3,4,5], { type:'discrete' }); +* $('#bullet').sparkline([10,12,12,9,7], { type:'bullet' }); +* $('#pie').sparkline([1,1,2], { type:'pie' }); +*/ + +/*jslint regexp: true, browser: true, jquery: true, white: true, nomen: false, plusplus: false, maxerr: 500, indent: 4 */ + +(function(document, Math, undefined) { // performance/minified-size optimization +(function(factory) { + if(typeof define === 'function' && define.amd) { + define(['jquery'], factory); + } else if (jQuery && !jQuery.fn.sparkline) { + factory(jQuery); + } +} +(function($) { + 'use strict'; + + var UNSET_OPTION = {}, + getDefaults, createClass, SPFormat, clipval, quartile, normalizeValue, normalizeValues, + remove, isNumber, all, sum, addCSS, ensureArray, formatNumber, RangeMap, + MouseHandler, Tooltip, barHighlightMixin, + line, bar, tristate, discrete, bullet, pie, box, defaultStyles, initStyles, + VShape, VCanvas_base, VCanvas_canvas, VCanvas_vml, pending, shapeCount = 0; + + /** + * Default configuration settings + */ + getDefaults = function () { + return { + // Settings common to most/all chart types + common: { + type: 'line', + lineColor: '#00f', + fillColor: '#cdf', + defaultPixelsPerValue: 3, + width: 'auto', + height: 'auto', + composite: false, + tagValuesAttribute: 'values', + tagOptionsPrefix: 'spark', + enableTagOptions: false, + enableHighlight: true, + highlightLighten: 1.4, + tooltipSkipNull: true, + tooltipPrefix: '', + tooltipSuffix: '', + disableHiddenCheck: false, + numberFormatter: false, + numberDigitGroupCount: 3, + numberDigitGroupSep: ',', + numberDecimalMark: '.', + disableTooltips: false, + disableInteraction: false + }, + // Defaults for line charts + line: { + spotColor: '#f80', + highlightSpotColor: '#5f5', + highlightLineColor: '#f22', + spotRadius: 1.5, + minSpotColor: '#f80', + maxSpotColor: '#f80', + lineWidth: 1, + normalRangeMin: undefined, + normalRangeMax: undefined, + normalRangeColor: '#ccc', + drawNormalOnTop: false, + chartRangeMin: undefined, + chartRangeMax: undefined, + chartRangeMinX: undefined, + chartRangeMaxX: undefined, + tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{prefix}}{{y}}{{suffix}}') + }, + // Defaults for bar charts + bar: { + barColor: '#3366cc', + negBarColor: '#f44', + stackedBarColor: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00', + '#dd4477', '#0099c6', '#990099'], + zeroColor: undefined, + nullColor: undefined, + zeroAxis: true, + barWidth: 4, + barSpacing: 1, + chartRangeMax: undefined, + chartRangeMin: undefined, + chartRangeClip: false, + colorMap: undefined, + tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{prefix}}{{value}}{{suffix}}') + }, + // Defaults for tristate charts + tristate: { + barWidth: 4, + barSpacing: 1, + posBarColor: '#6f6', + negBarColor: '#f44', + zeroBarColor: '#999', + colorMap: {}, + tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{value:map}}'), + tooltipValueLookups: { map: { '-1': 'Loss', '0': 'Draw', '1': 'Win' } } + }, + // Defaults for discrete charts + discrete: { + lineHeight: 'auto', + thresholdColor: undefined, + thresholdValue: 0, + chartRangeMax: undefined, + chartRangeMin: undefined, + chartRangeClip: false, + tooltipFormat: new SPFormat('{{prefix}}{{value}}{{suffix}}') + }, + // Defaults for bullet charts + bullet: { + targetColor: '#f33', + targetWidth: 3, // width of the target bar in pixels + performanceColor: '#33f', + rangeColors: ['#d3dafe', '#a8b6ff', '#7f94ff'], + base: undefined, // set this to a number to change the base start number + tooltipFormat: new SPFormat('{{fieldkey:fields}} - {{value}}'), + tooltipValueLookups: { fields: {r: 'Range', p: 'Performance', t: 'Target'} } + }, + // Defaults for pie charts + pie: { + offset: 0, + sliceColors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#66aa00', + '#dd4477', '#0099c6', '#990099'], + borderWidth: 0, + borderColor: '#000', + tooltipFormat: new SPFormat('<span style="color: {{color}}">●</span> {{value}} ({{percent.1}}%)') + }, + // Defaults for box plots + box: { + raw: false, + boxLineColor: '#000', + boxFillColor: '#cdf', + whiskerColor: '#000', + outlierLineColor: '#333', + outlierFillColor: '#fff', + medianColor: '#f00', + showOutliers: true, + outlierIQR: 1.5, + spotRadius: 1.5, + target: undefined, + targetColor: '#4a2', + chartRangeMax: undefined, + chartRangeMin: undefined, + tooltipFormat: new SPFormat('{{field:fields}}: {{value}}'), + tooltipFormatFieldlistKey: 'field', + tooltipValueLookups: { fields: { lq: 'Lower Quartile', med: 'Median', + uq: 'Upper Quartile', lo: 'Left Outlier', ro: 'Right Outlier', + lw: 'Left Whisker', rw: 'Right Whisker'} } + } + }; + }; + + // You can have tooltips use a css class other than jqstooltip by specifying tooltipClassname + defaultStyles = '.jqstooltip { ' + + 'position: absolute;' + + 'left: 0px;' + + 'top: 0px;' + + 'visibility: hidden;' + + 'background: rgb(0, 0, 0) transparent;' + + 'background-color: rgba(0,0,0,0.6);' + + 'filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);' + + '-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";' + + 'color: white;' + + 'font: 10px arial, san serif;' + + 'text-align: left;' + + 'white-space: nowrap;' + + 'padding: 5px;' + + 'border: 1px solid white;' + + 'z-index: 10000;' + + '}' + + '.jqsfield { ' + + 'color: white;' + + 'font: 10px arial, san serif;' + + 'text-align: left;' + + '}'; + + /** + * Utilities + */ + + createClass = function (/* [baseclass, [mixin, ...]], definition */) { + var Class, args; + Class = function () { + this.init.apply(this, arguments); + }; + if (arguments.length > 1) { + if (arguments[0]) { + Class.prototype = $.extend(new arguments[0](), arguments[arguments.length - 1]); + Class._super = arguments[0].prototype; + } else { + Class.prototype = arguments[arguments.length - 1]; + } + if (arguments.length > 2) { + args = Array.prototype.slice.call(arguments, 1, -1); + args.unshift(Class.prototype); + $.extend.apply($, args); + } + } else { + Class.prototype = arguments[0]; + } + Class.prototype.cls = Class; + return Class; + }; + + /** + * Wraps a format string for tooltips + * {{x}} + * {{x.2} + * {{x:months}} + */ + $.SPFormatClass = SPFormat = createClass({ + fre: /\{\{([\w.]+?)(:(.+?))?\}\}/g, + precre: /(\w+)\.(\d+)/, + + init: function (format, fclass) { + this.format = format; + this.fclass = fclass; + }, + + render: function (fieldset, lookups, options) { + var self = this, + fields = fieldset, + match, token, lookupkey, fieldvalue, prec; + return this.format.replace(this.fre, function () { + var lookup; + token = arguments[1]; + lookupkey = arguments[3]; + match = self.precre.exec(token); + if (match) { + prec = match[2]; + token = match[1]; + } else { + prec = false; + } + fieldvalue = fields[token]; + if (fieldvalue === undefined) { + return ''; + } + if (lookupkey && lookups && lookups[lookupkey]) { + lookup = lookups[lookupkey]; + if (lookup.get) { // RangeMap + return lookups[lookupkey].get(fieldvalue) || fieldvalue; + } else { + return lookups[lookupkey][fieldvalue] || fieldvalue; + } + } + if (isNumber(fieldvalue)) { + if (options.get('numberFormatter')) { + fieldvalue = options.get('numberFormatter')(fieldvalue); + } else { + fieldvalue = formatNumber(fieldvalue, prec, + options.get('numberDigitGroupCount'), + options.get('numberDigitGroupSep'), + options.get('numberDecimalMark')); + } + } + return fieldvalue; + }); + } + }); + + // convience method to avoid needing the new operator + $.spformat = function(format, fclass) { + return new SPFormat(format, fclass); + }; + + clipval = function (val, min, max) { + if (val < min) { + return min; + } + if (val > max) { + return max; + } + return val; + }; + + quartile = function (values, q) { + var vl; + if (q === 2) { + vl = Math.floor(values.length / 2); + return values.length % 2 ? values[vl] : (values[vl-1] + values[vl]) / 2; + } else { + if (values.length % 2 ) { // odd + vl = (values.length * q + q) / 4; + return vl % 1 ? (values[Math.floor(vl)] + values[Math.floor(vl) - 1]) / 2 : values[vl-1]; + } else { //even + vl = (values.length * q + 2) / 4; + return vl % 1 ? (values[Math.floor(vl)] + values[Math.floor(vl) - 1]) / 2 : values[vl-1]; + + } + } + }; + + normalizeValue = function (val) { + var nf; + switch (val) { + case 'undefined': + val = undefined; + break; + case 'null': + val = null; + break; + case 'true': + val = true; + break; + case 'false': + val = false; + break; + default: + nf = parseFloat(val); + if (val == nf) { + val = nf; + } + } + return val; + }; + + normalizeValues = function (vals) { + var i, result = []; + for (i = vals.length; i--;) { + result[i] = normalizeValue(vals[i]); + } + return result; + }; + + remove = function (vals, filter) { + var i, vl, result = []; + for (i = 0, vl = vals.length; i < vl; i++) { + if (vals[i] !== filter) { + result.push(vals[i]); + } + } + return result; + }; + + isNumber = function (num) { + return !isNaN(parseFloat(num)) && isFinite(num); + }; + + formatNumber = function (num, prec, groupsize, groupsep, decsep) { + var p, i; + num = (prec === false ? parseFloat(num).toString() : num.toFixed(prec)).split(''); + p = (p = $.inArray('.', num)) < 0 ? num.length : p; + if (p < num.length) { + num[p] = decsep; + } + for (i = p - groupsize; i > 0; i -= groupsize) { + num.splice(i, 0, groupsep); + } + return num.join(''); + }; + + // determine if all values of an array match a value + // returns true if the array is empty + all = function (val, arr, ignoreNull) { + var i; + for (i = arr.length; i--; ) { + if (ignoreNull && arr[i] === null) continue; + if (arr[i] !== val) { + return false; + } + } + return true; + }; + + // sums the numeric values in an array, ignoring other values + sum = function (vals) { + var total = 0, i; + for (i = vals.length; i--;) { + total += typeof vals[i] === 'number' ? vals[i] : 0; + } + return total; + }; + + ensureArray = function (val) { + return $.isArray(val) ? val : [val]; + }; + + // http://paulirish.com/2008/bookmarklet-inject-new-css-rules/ + addCSS = function(css) { + var tag; + //if ('\v' == 'v') /* ie only */ { + if (document.createStyleSheet) { + document.createStyleSheet().cssText = css; + } else { + tag = document.createElement('style'); + tag.type = 'text/css'; + document.getElementsByTagName('head')[0].appendChild(tag); + tag[(typeof document.body.style.WebkitAppearance == 'string') /* webkit only */ ? 'innerText' : 'innerHTML'] = css; + } + }; + + // Provide a cross-browser interface to a few simple drawing primitives + $.fn.simpledraw = function (width, height, useExisting, interact) { + var target, mhandler; + if (useExisting && (target = this.data('_jqs_vcanvas'))) { + return target; + } + + if ($.fn.sparkline.canvas === false) { + // We've already determined that neither Canvas nor VML are available + return false; + + } else if ($.fn.sparkline.canvas === undefined) { + // No function defined yet -- need to see if we support Canvas or VML + var el = document.createElement('canvas'); + if (!!(el.getContext && el.getContext('2d'))) { + // Canvas is available + $.fn.sparkline.canvas = function(width, height, target, interact) { + return new VCanvas_canvas(width, height, target, interact); + }; + } else if (document.namespaces && !document.namespaces.v) { + // VML is available + document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML'); + $.fn.sparkline.canvas = function(width, height, target, interact) { + return new VCanvas_vml(width, height, target); + }; + } else { + // Neither Canvas nor VML are available + $.fn.sparkline.canvas = false; + return false; + } + } + + if (width === undefined) { + width = $(this).innerWidth(); + } + if (height === undefined) { + height = $(this).innerHeight(); + } + + target = $.fn.sparkline.canvas(width, height, this, interact); + + mhandler = $(this).data('_jqs_mhandler'); + if (mhandler) { + mhandler.registerCanvas(target); + } + return target; + }; + + $.fn.cleardraw = function () { + var target = this.data('_jqs_vcanvas'); + if (target) { + target.reset(); + } + }; + + $.RangeMapClass = RangeMap = createClass({ + init: function (map) { + var key, range, rangelist = []; + for (key in map) { + if (map.hasOwnProperty(key) && typeof key === 'string' && key.indexOf(':') > -1) { + range = key.split(':'); + range[0] = range[0].length === 0 ? -Infinity : parseFloat(range[0]); + range[1] = range[1].length === 0 ? Infinity : parseFloat(range[1]); + range[2] = map[key]; + rangelist.push(range); + } + } + this.map = map; + this.rangelist = rangelist || false; + }, + + get: function (value) { + var rangelist = this.rangelist, + i, range, result; + if ((result = this.map[value]) !== undefined) { + return result; + } + if (rangelist) { + for (i = rangelist.length; i--;) { + range = rangelist[i]; + if (range[0] <= value && range[1] >= value) { + return range[2]; + } + } + } + return undefined; + } + }); + + // Convenience function + $.range_map = function(map) { + return new RangeMap(map); + }; + + MouseHandler = createClass({ + init: function (el, options) { + var $el = $(el); + this.$el = $el; + this.options = options; + this.currentPageX = 0; + this.currentPageY = 0; + this.el = el; + this.splist = []; + this.tooltip = null; + this.over = false; + this.displayTooltips = !options.get('disableTooltips'); + this.highlightEnabled = !options.get('disableHighlight'); + }, + + registerSparkline: function (sp) { + this.splist.push(sp); + if (this.over) { + this.updateDisplay(); + } + }, + + registerCanvas: function (canvas) { + var $canvas = $(canvas.canvas); + this.canvas = canvas; + this.$canvas = $canvas; + $canvas.mouseenter($.proxy(this.mouseenter, this)); + $canvas.mouseleave($.proxy(this.mouseleave, this)); + $canvas.click($.proxy(this.mouseclick, this)); + }, + + reset: function (removeTooltip) { + this.splist = []; + if (this.tooltip && removeTooltip) { + this.tooltip.remove(); + this.tooltip = undefined; + } + }, + + mouseclick: function (e) { + var clickEvent = $.Event('sparklineClick'); + clickEvent.originalEvent = e; + clickEvent.sparklines = this.splist; + this.$el.trigger(clickEvent); + }, + + mouseenter: function (e) { + $(document.body).unbind('mousemove.jqs'); + $(document.body).bind('mousemove.jqs', $.proxy(this.mousemove, this)); + this.over = true; + this.currentPageX = e.pageX; + this.currentPageY = e.pageY; + this.currentEl = e.target; + if (!this.tooltip && this.displayTooltips) { + this.tooltip = new Tooltip(this.options); + this.tooltip.updatePosition(e.pageX, e.pageY); + } + this.updateDisplay(); + }, + + mouseleave: function () { + $(document.body).unbind('mousemove.jqs'); + var splist = this.splist, + spcount = splist.length, + needsRefresh = false, + sp, i; + this.over = false; + this.currentEl = null; + + if (this.tooltip) { + this.tooltip.remove(); + this.tooltip = null; + } + + for (i = 0; i < spcount; i++) { + sp = splist[i]; + if (sp.clearRegionHighlight()) { + needsRefresh = true; + } + } + + if (needsRefresh) { + this.canvas.render(); + } + }, + + mousemove: function (e) { + this.currentPageX = e.pageX; + this.currentPageY = e.pageY; + this.currentEl = e.target; + if (this.tooltip) { + this.tooltip.updatePosition(e.pageX, e.pageY); + } + this.updateDisplay(); + }, + + updateDisplay: function () { + var splist = this.splist, + spcount = splist.length, + needsRefresh = false, + offset = this.$canvas.offset(), + localX = this.currentPageX - offset.left, + localY = this.currentPageY - offset.top, + tooltiphtml, sp, i, result, changeEvent; + if (!this.over) { + return; + } + for (i = 0; i < spcount; i++) { + sp = splist[i]; + result = sp.setRegionHighlight(this.currentEl, localX, localY); + if (result) { + needsRefresh = true; + } + } + if (needsRefresh) { + changeEvent = $.Event('sparklineRegionChange'); + changeEvent.sparklines = this.splist; + this.$el.trigger(changeEvent); + if (this.tooltip) { + tooltiphtml = ''; + for (i = 0; i < spcount; i++) { + sp = splist[i]; + tooltiphtml += sp.getCurrentRegionTooltip(); + } + this.tooltip.setContent(tooltiphtml); + } + if (!this.disableHighlight) { + this.canvas.render(); + } + } + if (result === null) { + this.mouseleave(); + } + } + }); + + + Tooltip = createClass({ + sizeStyle: 'position: static !important;' + + 'display: block !important;' + + 'visibility: hidden !important;' + + 'float: left !important;', + + init: function (options) { + var tooltipClassname = options.get('tooltipClassname', 'jqstooltip'), + sizetipStyle = this.sizeStyle, + offset; + this.container = options.get('tooltipContainer') || document.body; + this.tooltipOffsetX = options.get('tooltipOffsetX', 10); + this.tooltipOffsetY = options.get('tooltipOffsetY', 12); + // remove any previous lingering tooltip + $('#jqssizetip').remove(); + $('#jqstooltip').remove(); + this.sizetip = $('<div/>', { + id: 'jqssizetip', + style: sizetipStyle, + 'class': tooltipClassname + }); + this.tooltip = $('<div/>', { + id: 'jqstooltip', + 'class': tooltipClassname + }).appendTo(this.container); + // account for the container's location + offset = this.tooltip.offset(); + this.offsetLeft = offset.left; + this.offsetTop = offset.top; + this.hidden = true; + $(window).unbind('resize.jqs scroll.jqs'); + $(window).bind('resize.jqs scroll.jqs', $.proxy(this.updateWindowDims, this)); + this.updateWindowDims(); + }, + + updateWindowDims: function () { + this.scrollTop = $(window).scrollTop(); + this.scrollLeft = $(window).scrollLeft(); + this.scrollRight = this.scrollLeft + $(window).width(); + this.updatePosition(); + }, + + getSize: function (content) { + this.sizetip.html(content).appendTo(this.container); + this.width = this.sizetip.width() + 1; + this.height = this.sizetip.height(); + this.sizetip.remove(); + }, + + setContent: function (content) { + if (!content) { + this.tooltip.css('visibility', 'hidden'); + this.hidden = true; + return; + } + this.getSize(content); + this.tooltip.html(content) + .css({ + 'width': this.width, + 'height': this.height, + 'visibility': 'visible' + }); + if (this.hidden) { + this.hidden = false; + this.updatePosition(); + } + }, + + updatePosition: function (x, y) { + if (x === undefined) { + if (this.mousex === undefined) { + return; + } + x = this.mousex - this.offsetLeft; + y = this.mousey - this.offsetTop; + + } else { + this.mousex = x = x - this.offsetLeft; + this.mousey = y = y - this.offsetTop; + } + if (!this.height || !this.width || this.hidden) { + return; + } + + y -= this.height + this.tooltipOffsetY; + x += this.tooltipOffsetX; + + if (y < this.scrollTop) { + y = this.scrollTop; + } + if (x < this.scrollLeft) { + x = this.scrollLeft; + } else if (x + this.width > this.scrollRight) { + x = this.scrollRight - this.width; + } + + this.tooltip.css({ + 'left': x, + 'top': y + }); + }, + + remove: function () { + this.tooltip.remove(); + this.sizetip.remove(); + this.sizetip = this.tooltip = undefined; + $(window).unbind('resize.jqs scroll.jqs'); + } + }); + + initStyles = function() { + addCSS(defaultStyles); + }; + + $(initStyles); + + pending = []; + $.fn.sparkline = function (userValues, userOptions) { + return this.each(function () { + var options = new $.fn.sparkline.options(this, userOptions), + $this = $(this), + render, i; + render = function () { + var values, width, height, tmp, mhandler, sp, vals; + if (userValues === 'html' || userValues === undefined) { + vals = this.getAttribute(options.get('tagValuesAttribute')); + if (vals === undefined || vals === null) { + vals = $this.html(); + } + values = vals.replace(/(^\s*<!--)|(-->\s*$)|\s+/g, '').split(','); + } else { + values = userValues; + } + + width = options.get('width') === 'auto' ? values.length * options.get('defaultPixelsPerValue') : options.get('width'); + if (options.get('height') === 'auto') { + if (!options.get('composite') || !$.data(this, '_jqs_vcanvas')) { + // must be a better way to get the line height + tmp = document.createElement('span'); + tmp.innerHTML = 'a'; + $this.html(tmp); + height = $(tmp).innerHeight() || $(tmp).height(); + $(tmp).remove(); + tmp = null; + } + } else { + height = options.get('height'); + } + + if (!options.get('disableInteraction')) { + mhandler = $.data(this, '_jqs_mhandler'); + if (!mhandler) { + mhandler = new MouseHandler(this, options); + $.data(this, '_jqs_mhandler', mhandler); + } else if (!options.get('composite')) { + mhandler.reset(); + } + } else { + mhandler = false; + } + + if (options.get('composite') && !$.data(this, '_jqs_vcanvas')) { + if (!$.data(this, '_jqs_errnotify')) { + alert('Attempted to attach a composite sparkline to an element with no existing sparkline'); + $.data(this, '_jqs_errnotify', true); + } + return; + } + + sp = new $.fn.sparkline[options.get('type')](this, values, options, width, height); + + sp.render(); + + if (mhandler) { + mhandler.registerSparkline(sp); + } + }; + if (($(this).html() && !options.get('disableHiddenCheck') && $(this).is(':hidden')) || !$(this).parents('body').length) { + if (!options.get('composite') && $.data(this, '_jqs_pending')) { + // remove any existing references to the element + for (i = pending.length; i; i--) { + if (pending[i - 1][0] == this) { + pending.splice(i - 1, 1); + } + } + } + pending.push([this, render]); + $.data(this, '_jqs_pending', true); + } else { + render.call(this); + } + }); + }; + + $.fn.sparkline.defaults = getDefaults(); + + + $.sparkline_display_visible = function () { + var el, i, pl; + var done = []; + for (i = 0, pl = pending.length; i < pl; i++) { + el = pending[i][0]; + if ($(el).is(':visible') && !$(el).parents().is(':hidden')) { + pending[i][1].call(el); + $.data(pending[i][0], '_jqs_pending', false); + done.push(i); + } else if (!$(el).closest('html').length && !$.data(el, '_jqs_pending')) { + // element has been inserted and removed from the DOM + // If it was not yet inserted into the dom then the .data request + // will return true. + // removing from the dom causes the data to be removed. + $.data(pending[i][0], '_jqs_pending', false); + done.push(i); + } + } + for (i = done.length; i; i--) { + pending.splice(done[i - 1], 1); + } + }; + + + /** + * User option handler + */ + $.fn.sparkline.options = createClass({ + init: function (tag, userOptions) { + var extendedOptions, defaults, base, tagOptionType; + this.userOptions = userOptions = userOptions || {}; + this.tag = tag; + this.tagValCache = {}; + defaults = $.fn.sparkline.defaults; + base = defaults.common; + this.tagOptionsPrefix = userOptions.enableTagOptions && (userOptions.tagOptionsPrefix || base.tagOptionsPrefix); + + tagOptionType = this.getTagSetting('type'); + if (tagOptionType === UNSET_OPTION) { + extendedOptions = defaults[userOptions.type || base.type]; + } else { + extendedOptions = defaults[tagOptionType]; + } + this.mergedOptions = $.extend({}, base, extendedOptions, userOptions); + }, + + + getTagSetting: function (key) { + var prefix = this.tagOptionsPrefix, + val, i, pairs, keyval; + if (prefix === false || prefix === undefined) { + return UNSET_OPTION; + } + if (this.tagValCache.hasOwnProperty(key)) { + val = this.tagValCache.key; + } else { + val = this.tag.getAttribute(prefix + key); + if (val === undefined || val === null) { + val = UNSET_OPTION; + } else if (val.substr(0, 1) === '[') { + val = val.substr(1, val.length - 2).split(','); + for (i = val.length; i--;) { + val[i] = normalizeValue(val[i].replace(/(^\s*)|(\s*$)/g, '')); + } + } else if (val.substr(0, 1) === '{') { + pairs = val.substr(1, val.length - 2).split(','); + val = {}; + for (i = pairs.length; i--;) { + keyval = pairs[i].split(':', 2); + val[keyval[0].replace(/(^\s*)|(\s*$)/g, '')] = normalizeValue(keyval[1].replace(/(^\s*)|(\s*$)/g, '')); + } + } else { + val = normalizeValue(val); + } + this.tagValCache.key = val; + } + return val; + }, + + get: function (key, defaultval) { + var tagOption = this.getTagSetting(key), + result; + if (tagOption !== UNSET_OPTION) { + return tagOption; + } + return (result = this.mergedOptions[key]) === undefined ? defaultval : result; + } + }); + + + $.fn.sparkline._base = createClass({ + disabled: false, + + init: function (el, values, options, width, height) { + this.el = el; + this.$el = $(el); + this.values = values; + this.options = options; + this.width = width; + this.height = height; + this.currentRegion = undefined; + }, + + /** + * Setup the canvas + */ + initTarget: function () { + var interactive = !this.options.get('disableInteraction'); + if (!(this.target = this.$el.simpledraw(this.width, this.height, this.options.get('composite'), interactive))) { + this.disabled = true; + } else { + this.canvasWidth = this.target.pixelWidth; + this.canvasHeight = this.target.pixelHeight; + } + }, + + /** + * Actually render the chart to the canvas + */ + render: function () { + if (this.disabled) { + this.el.innerHTML = ''; + return false; + } + return true; + }, + + /** + * Return a region id for a given x/y co-ordinate + */ + getRegion: function (x, y) { + }, + + /** + * Highlight an item based on the moused-over x,y co-ordinate + */ + setRegionHighlight: function (el, x, y) { + var currentRegion = this.currentRegion, + highlightEnabled = !this.options.get('disableHighlight'), + newRegion; + if (x > this.canvasWidth || y > this.canvasHeight || x < 0 || y < 0) { + return null; + } + newRegion = this.getRegion(el, x, y); + if (currentRegion !== newRegion) { + if (currentRegion !== undefined && highlightEnabled) { + this.removeHighlight(); + } + this.currentRegion = newRegion; + if (newRegion !== undefined && highlightEnabled) { + this.renderHighlight(); + } + return true; + } + return false; + }, + + /** + * Reset any currently highlighted item + */ + clearRegionHighlight: function () { + if (this.currentRegion !== undefined) { + this.removeHighlight(); + this.currentRegion = undefined; + return true; + } + return false; + }, + + renderHighlight: function () { + this.changeHighlight(true); + }, + + removeHighlight: function () { + this.changeHighlight(false); + }, + + changeHighlight: function (highlight) {}, + + /** + * Fetch the HTML to display as a tooltip + */ + getCurrentRegionTooltip: function () { + var options = this.options, + header = '', + entries = [], + fields, formats, formatlen, fclass, text, i, + showFields, showFieldsKey, newFields, fv, + formatter, format, fieldlen, j; + if (this.currentRegion === undefined) { + return ''; + } + fields = this.getCurrentRegionFields(); + formatter = options.get('tooltipFormatter'); + if (formatter) { + return formatter(this, options, fields); + } + if (options.get('tooltipChartTitle')) { + header += '<div class="jqs jqstitle">' + options.get('tooltipChartTitle') + '</div>\n'; + } + formats = this.options.get('tooltipFormat'); + if (!formats) { + return ''; + } + if (!$.isArray(formats)) { + formats = [formats]; + } + if (!$.isArray(fields)) { + fields = [fields]; + } + showFields = this.options.get('tooltipFormatFieldlist'); + showFieldsKey = this.options.get('tooltipFormatFieldlistKey'); + if (showFields && showFieldsKey) { + // user-selected ordering of fields + newFields = []; + for (i = fields.length; i--;) { + fv = fields[i][showFieldsKey]; + if ((j = $.inArray(fv, showFields)) != -1) { + newFields[j] = fields[i]; + } + } + fields = newFields; + } + formatlen = formats.length; + fieldlen = fields.length; + for (i = 0; i < formatlen; i++) { + format = formats[i]; + if (typeof format === 'string') { + format = new SPFormat(format); + } + fclass = format.fclass || 'jqsfield'; + for (j = 0; j < fieldlen; j++) { + if (!fields[j].isNull || !options.get('tooltipSkipNull')) { + $.extend(fields[j], { + prefix: options.get('tooltipPrefix'), + suffix: options.get('tooltipSuffix') + }); + text = format.render(fields[j], options.get('tooltipValueLookups'), options); + entries.push('<div class="' + fclass + '">' + text + '</div>'); + } + } + } + if (entries.length) { + return header + entries.join('\n'); + } + return ''; + }, + + getCurrentRegionFields: function () {}, + + calcHighlightColor: function (color, options) { + var highlightColor = options.get('highlightColor'), + lighten = options.get('highlightLighten'), + parse, mult, rgbnew, i; + if (highlightColor) { + return highlightColor; + } + if (lighten) { + // extract RGB values + parse = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(color) || /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color); + if (parse) { + rgbnew = []; + mult = color.length === 4 ? 16 : 1; + for (i = 0; i < 3; i++) { + rgbnew[i] = clipval(Math.round(parseInt(parse[i + 1], 16) * mult * lighten), 0, 255); + } + return 'rgb(' + rgbnew.join(',') + ')'; + } + + } + return color; + } + + }); + + barHighlightMixin = { + changeHighlight: function (highlight) { + var currentRegion = this.currentRegion, + target = this.target, + shapeids = this.regionShapes[currentRegion], + newShapes; + // will be null if the region value was null + if (shapeids) { + newShapes = this.renderRegion(currentRegion, highlight); + if ($.isArray(newShapes) || $.isArray(shapeids)) { + target.replaceWithShapes(shapeids, newShapes); + this.regionShapes[currentRegion] = $.map(newShapes, function (newShape) { + return newShape.id; + }); + } else { + target.replaceWithShape(shapeids, newShapes); + this.regionShapes[currentRegion] = newShapes.id; + } + } + }, + + render: function () { + var values = this.values, + target = this.target, + regionShapes = this.regionShapes, + shapes, ids, i, j; + + if (!this.cls._super.render.call(this)) { + return; + } + for (i = values.length; i--;) { + shapes = this.renderRegion(i); + if (shapes) { + if ($.isArray(shapes)) { + ids = []; + for (j = shapes.length; j--;) { + shapes[j].append(); + ids.push(shapes[j].id); + } + regionShapes[i] = ids; + } else { + shapes.append(); + regionShapes[i] = shapes.id; // store just the shapeid + } + } else { + // null value + regionShapes[i] = null; + } + } + target.render(); + } + }; + + /** + * Line charts + */ + $.fn.sparkline.line = line = createClass($.fn.sparkline._base, { + type: 'line', + + init: function (el, values, options, width, height) { + line._super.init.call(this, el, values, options, width, height); + this.vertices = []; + this.regionMap = []; + this.xvalues = []; + this.yvalues = []; + this.yminmax = []; + this.hightlightSpotId = null; + this.lastShapeId = null; + this.initTarget(); + }, + + getRegion: function (el, x, y) { + var i, + regionMap = this.regionMap; // maps regions to value positions + for (i = regionMap.length; i--;) { + if (regionMap[i] !== null && x >= regionMap[i][0] && x <= regionMap[i][1]) { + return regionMap[i][2]; + } + } + return undefined; + }, + + getCurrentRegionFields: function () { + var currentRegion = this.currentRegion; + return { + isNull: this.yvalues[currentRegion] === null, + x: this.xvalues[currentRegion], + y: this.yvalues[currentRegion], + color: this.options.get('lineColor'), + fillColor: this.options.get('fillColor'), + offset: currentRegion + }; + }, + + renderHighlight: function () { + var currentRegion = this.currentRegion, + target = this.target, + vertex = this.vertices[currentRegion], + options = this.options, + spotRadius = options.get('spotRadius'), + highlightSpotColor = options.get('highlightSpotColor'), + highlightLineColor = options.get('highlightLineColor'), + highlightSpot, highlightLine; + + if (!vertex) { + return; + } + if (spotRadius && highlightSpotColor) { + highlightSpot = target.drawCircle(vertex[0], vertex[1], + spotRadius, undefined, highlightSpotColor); + this.highlightSpotId = highlightSpot.id; + target.insertAfterShape(this.lastShapeId, highlightSpot); + } + if (highlightLineColor) { + highlightLine = target.drawLine(vertex[0], this.canvasTop, vertex[0], + this.canvasTop + this.canvasHeight, highlightLineColor); + this.highlightLineId = highlightLine.id; + target.insertAfterShape(this.lastShapeId, highlightLine); + } + }, + + removeHighlight: function () { + var target = this.target; + if (this.highlightSpotId) { + target.removeShapeId(this.highlightSpotId); + this.highlightSpotId = null; + } + if (this.highlightLineId) { + target.removeShapeId(this.highlightLineId); + this.highlightLineId = null; + } + }, + + scanValues: function () { + var values = this.values, + valcount = values.length, + xvalues = this.xvalues, + yvalues = this.yvalues, + yminmax = this.yminmax, + i, val, isStr, isArray, sp; + for (i = 0; i < valcount; i++) { + val = values[i]; + isStr = typeof(values[i]) === 'string'; + isArray = typeof(values[i]) === 'object' && values[i] instanceof Array; + sp = isStr && values[i].split(':'); + if (isStr && sp.length === 2) { // x:y + xvalues.push(Number(sp[0])); + yvalues.push(Number(sp[1])); + yminmax.push(Number(sp[1])); + } else if (isArray) { + xvalues.push(val[0]); + yvalues.push(val[1]); + yminmax.push(val[1]); + } else { + xvalues.push(i); + if (values[i] === null || values[i] === 'null') { + yvalues.push(null); + } else { + yvalues.push(Number(val)); + yminmax.push(Number(val)); + } + } + } + if (this.options.get('xvalues')) { + xvalues = this.options.get('xvalues'); + } + + this.maxy = this.maxyorg = Math.max.apply(Math, yminmax); + this.miny = this.minyorg = Math.min.apply(Math, yminmax); + + this.maxx = Math.max.apply(Math, xvalues); + this.minx = Math.min.apply(Math, xvalues); + + this.xvalues = xvalues; + this.yvalues = yvalues; + this.yminmax = yminmax; + + }, + + processRangeOptions: function () { + var options = this.options, + normalRangeMin = options.get('normalRangeMin'), + normalRangeMax = options.get('normalRangeMax'); + + if (normalRangeMin !== undefined) { + if (normalRangeMin < this.miny) { + this.miny = normalRangeMin; + } + if (normalRangeMax > this.maxy) { + this.maxy = normalRangeMax; + } + } + if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < this.miny)) { + this.miny = options.get('chartRangeMin'); + } + if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > this.maxy)) { + this.maxy = options.get('chartRangeMax'); + } + if (options.get('chartRangeMinX') !== undefined && (options.get('chartRangeClipX') || options.get('chartRangeMinX') < this.minx)) { + this.minx = options.get('chartRangeMinX'); + } + if (options.get('chartRangeMaxX') !== undefined && (options.get('chartRangeClipX') || options.get('chartRangeMaxX') > this.maxx)) { + this.maxx = options.get('chartRangeMaxX'); + } + + }, + + drawNormalRange: function (canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey) { + var normalRangeMin = this.options.get('normalRangeMin'), + normalRangeMax = this.options.get('normalRangeMax'), + ytop = canvasTop + Math.round(canvasHeight - (canvasHeight * ((normalRangeMax - this.miny) / rangey))), + height = Math.round((canvasHeight * (normalRangeMax - normalRangeMin)) / rangey); + this.target.drawRect(canvasLeft, ytop, canvasWidth, height, undefined, this.options.get('normalRangeColor')).append(); + }, + + render: function () { + var options = this.options, + target = this.target, + canvasWidth = this.canvasWidth, + canvasHeight = this.canvasHeight, + vertices = this.vertices, + spotRadius = options.get('spotRadius'), + regionMap = this.regionMap, + rangex, rangey, yvallast, + canvasTop, canvasLeft, + vertex, path, paths, x, y, xnext, xpos, xposnext, + last, next, yvalcount, lineShapes, fillShapes, plen, + valueSpots, hlSpotsEnabled, color, xvalues, yvalues, i; + + if (!line._super.render.call(this)) { + return; + } + + this.scanValues(); + this.processRangeOptions(); + + xvalues = this.xvalues; + yvalues = this.yvalues; + + if (!this.yminmax.length || this.yvalues.length < 2) { + // empty or all null valuess + return; + } + + canvasTop = canvasLeft = 0; + + rangex = this.maxx - this.minx === 0 ? 1 : this.maxx - this.minx; + rangey = this.maxy - this.miny === 0 ? 1 : this.maxy - this.miny; + yvallast = this.yvalues.length - 1; + + if (spotRadius && (canvasWidth < (spotRadius * 4) || canvasHeight < (spotRadius * 4))) { + spotRadius = 0; + } + if (spotRadius) { + // adjust the canvas size as required so that spots will fit + hlSpotsEnabled = options.get('highlightSpotColor') && !options.get('disableInteraction'); + if (hlSpotsEnabled || options.get('minSpotColor') || (options.get('spotColor') && yvalues[yvallast] === this.miny)) { + canvasHeight -= Math.ceil(spotRadius); + } + if (hlSpotsEnabled || options.get('maxSpotColor') || (options.get('spotColor') && yvalues[yvallast] === this.maxy)) { + canvasHeight -= Math.ceil(spotRadius); + canvasTop += Math.ceil(spotRadius); + } + if (hlSpotsEnabled || + ((options.get('minSpotColor') || options.get('maxSpotColor')) && (yvalues[0] === this.miny || yvalues[0] === this.maxy))) { + canvasLeft += Math.ceil(spotRadius); + canvasWidth -= Math.ceil(spotRadius); + } + if (hlSpotsEnabled || options.get('spotColor') || + (options.get('minSpotColor') || options.get('maxSpotColor') && + (yvalues[yvallast] === this.miny || yvalues[yvallast] === this.maxy))) { + canvasWidth -= Math.ceil(spotRadius); + } + } + + + canvasHeight--; + + if (options.get('normalRangeMin') !== undefined && !options.get('drawNormalOnTop')) { + this.drawNormalRange(canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey); + } + + path = []; + paths = [path]; + last = next = null; + yvalcount = yvalues.length; + for (i = 0; i < yvalcount; i++) { + x = xvalues[i]; + xnext = xvalues[i + 1]; + y = yvalues[i]; + xpos = canvasLeft + Math.round((x - this.minx) * (canvasWidth / rangex)); + xposnext = i < yvalcount - 1 ? canvasLeft + Math.round((xnext - this.minx) * (canvasWidth / rangex)) : canvasWidth; + next = xpos + ((xposnext - xpos) / 2); + regionMap[i] = [last || 0, next, i]; + last = next; + if (y === null) { + if (i) { + if (yvalues[i - 1] !== null) { + path = []; + paths.push(path); + } + vertices.push(null); + } + } else { + if (y < this.miny) { + y = this.miny; + } + if (y > this.maxy) { + y = this.maxy; + } + if (!path.length) { + // previous value was null + path.push([xpos, canvasTop + canvasHeight]); + } + vertex = [xpos, canvasTop + Math.round(canvasHeight - (canvasHeight * ((y - this.miny) / rangey)))]; + path.push(vertex); + vertices.push(vertex); + } + } + + lineShapes = []; + fillShapes = []; + plen = paths.length; + for (i = 0; i < plen; i++) { + path = paths[i]; + if (path.length) { + if (options.get('fillColor')) { + path.push([path[path.length - 1][0], (canvasTop + canvasHeight)]); + fillShapes.push(path.slice(0)); + path.pop(); + } + // if there's only a single point in this path, then we want to display it + // as a vertical line which means we keep path[0] as is + if (path.length > 2) { + // else we want the first value + path[0] = [path[0][0], path[1][1]]; + } + lineShapes.push(path); + } + } + + // draw the fill first, then optionally the normal range, then the line on top of that + plen = fillShapes.length; + for (i = 0; i < plen; i++) { + target.drawShape(fillShapes[i], + options.get('fillColor'), options.get('fillColor')).append(); + } + + if (options.get('normalRangeMin') !== undefined && options.get('drawNormalOnTop')) { + this.drawNormalRange(canvasLeft, canvasTop, canvasHeight, canvasWidth, rangey); + } + + plen = lineShapes.length; + for (i = 0; i < plen; i++) { + target.drawShape(lineShapes[i], options.get('lineColor'), undefined, + options.get('lineWidth')).append(); + } + + if (spotRadius && options.get('valueSpots')) { + valueSpots = options.get('valueSpots'); + if (valueSpots.get === undefined) { + valueSpots = new RangeMap(valueSpots); + } + for (i = 0; i < yvalcount; i++) { + color = valueSpots.get(yvalues[i]); + if (color) { + target.drawCircle(canvasLeft + Math.round((xvalues[i] - this.minx) * (canvasWidth / rangex)), + canvasTop + Math.round(canvasHeight - (canvasHeight * ((yvalues[i] - this.miny) / rangey))), + spotRadius, undefined, + color).append(); + } + } + + } + if (spotRadius && options.get('spotColor') && yvalues[yvallast] !== null) { + target.drawCircle(canvasLeft + Math.round((xvalues[xvalues.length - 1] - this.minx) * (canvasWidth / rangex)), + canvasTop + Math.round(canvasHeight - (canvasHeight * ((yvalues[yvallast] - this.miny) / rangey))), + spotRadius, undefined, + options.get('spotColor')).append(); + } + if (this.maxy !== this.minyorg) { + if (spotRadius && options.get('minSpotColor')) { + x = xvalues[$.inArray(this.minyorg, yvalues)]; + target.drawCircle(canvasLeft + Math.round((x - this.minx) * (canvasWidth / rangex)), + canvasTop + Math.round(canvasHeight - (canvasHeight * ((this.minyorg - this.miny) / rangey))), + spotRadius, undefined, + options.get('minSpotColor')).append(); + } + if (spotRadius && options.get('maxSpotColor')) { + x = xvalues[$.inArray(this.maxyorg, yvalues)]; + target.drawCircle(canvasLeft + Math.round((x - this.minx) * (canvasWidth / rangex)), + canvasTop + Math.round(canvasHeight - (canvasHeight * ((this.maxyorg - this.miny) / rangey))), + spotRadius, undefined, + options.get('maxSpotColor')).append(); + } + } + + this.lastShapeId = target.getLastShapeId(); + this.canvasTop = canvasTop; + target.render(); + } + }); + + /** + * Bar charts + */ + $.fn.sparkline.bar = bar = createClass($.fn.sparkline._base, barHighlightMixin, { + type: 'bar', + + init: function (el, values, options, width, height) { + var barWidth = parseInt(options.get('barWidth'), 10), + barSpacing = parseInt(options.get('barSpacing'), 10), + chartRangeMin = options.get('chartRangeMin'), + chartRangeMax = options.get('chartRangeMax'), + chartRangeClip = options.get('chartRangeClip'), + stackMin = Infinity, + stackMax = -Infinity, + isStackString, groupMin, groupMax, stackRanges, + numValues, i, vlen, range, zeroAxis, xaxisOffset, min, max, clipMin, clipMax, + stacked, vlist, j, slen, svals, val, yoffset, yMaxCalc, canvasHeightEf; + bar._super.init.call(this, el, values, options, width, height); + + // scan values to determine whether to stack bars + for (i = 0, vlen = values.length; i < vlen; i++) { + val = values[i]; + isStackString = typeof(val) === 'string' && val.indexOf(':') > -1; + if (isStackString || $.isArray(val)) { + stacked = true; + if (isStackString) { + val = values[i] = normalizeValues(val.split(':')); + } + val = remove(val, null); // min/max will treat null as zero + groupMin = Math.min.apply(Math, val); + groupMax = Math.max.apply(Math, val); + if (groupMin < stackMin) { + stackMin = groupMin; + } + if (groupMax > stackMax) { + stackMax = groupMax; + } + } + } + + this.stacked = stacked; + this.regionShapes = {}; + this.barWidth = barWidth; + this.barSpacing = barSpacing; + this.totalBarWidth = barWidth + barSpacing; + this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing); + + this.initTarget(); + + if (chartRangeClip) { + clipMin = chartRangeMin === undefined ? -Infinity : chartRangeMin; + clipMax = chartRangeMax === undefined ? Infinity : chartRangeMax; + } + + numValues = []; + stackRanges = stacked ? [] : numValues; + var stackTotals = []; + var stackRangesNeg = []; + for (i = 0, vlen = values.length; i < vlen; i++) { + if (stacked) { + vlist = values[i]; + values[i] = svals = []; + stackTotals[i] = 0; + stackRanges[i] = stackRangesNeg[i] = 0; + for (j = 0, slen = vlist.length; j < slen; j++) { + val = svals[j] = chartRangeClip ? clipval(vlist[j], clipMin, clipMax) : vlist[j]; + if (val !== null) { + if (val > 0) { + stackTotals[i] += val; + } + if (stackMin < 0 && stackMax > 0) { + if (val < 0) { + stackRangesNeg[i] += Math.abs(val); + } else { + stackRanges[i] += val; + } + } else { + stackRanges[i] += Math.abs(val - (val < 0 ? stackMax : stackMin)); + } + numValues.push(val); + } + } + } else { + val = chartRangeClip ? clipval(values[i], clipMin, clipMax) : values[i]; + val = values[i] = normalizeValue(val); + if (val !== null) { + numValues.push(val); + } + } + } + this.max = max = Math.max.apply(Math, numValues); + this.min = min = Math.min.apply(Math, numValues); + this.stackMax = stackMax = stacked ? Math.max.apply(Math, stackTotals) : max; + this.stackMin = stackMin = stacked ? Math.min.apply(Math, numValues) : min; + + if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < min)) { + min = options.get('chartRangeMin'); + } + if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > max)) { + max = options.get('chartRangeMax'); + } + + this.zeroAxis = zeroAxis = options.get('zeroAxis', true); + if (min <= 0 && max >= 0 && zeroAxis) { + xaxisOffset = 0; + } else if (zeroAxis == false) { + xaxisOffset = min; + } else if (min > 0) { + xaxisOffset = min; + } else { + xaxisOffset = max; + } + this.xaxisOffset = xaxisOffset; + + range = stacked ? (Math.max.apply(Math, stackRanges) + Math.max.apply(Math, stackRangesNeg)) : max - min; + + // as we plot zero/min values a single pixel line, we add a pixel to all other + // values - Reduce the effective canvas size to suit + this.canvasHeightEf = (zeroAxis && min < 0) ? this.canvasHeight - 2 : this.canvasHeight - 1; + + if (min < xaxisOffset) { + yMaxCalc = (stacked && max >= 0) ? stackMax : max; + yoffset = (yMaxCalc - xaxisOffset) / range * this.canvasHeight; + if (yoffset !== Math.ceil(yoffset)) { + this.canvasHeightEf -= 2; + yoffset = Math.ceil(yoffset); + } + } else { + yoffset = this.canvasHeight; + } + this.yoffset = yoffset; + + if ($.isArray(options.get('colorMap'))) { + this.colorMapByIndex = options.get('colorMap'); + this.colorMapByValue = null; + } else { + this.colorMapByIndex = null; + this.colorMapByValue = options.get('colorMap'); + if (this.colorMapByValue && this.colorMapByValue.get === undefined) { + this.colorMapByValue = new RangeMap(this.colorMapByValue); + } + } + + this.range = range; + }, + + getRegion: function (el, x, y) { + var result = Math.floor(x / this.totalBarWidth); + return (result < 0 || result >= this.values.length) ? undefined : result; + }, + + getCurrentRegionFields: function () { + var currentRegion = this.currentRegion, + values = ensureArray(this.values[currentRegion]), + result = [], + value, i; + for (i = values.length; i--;) { + value = values[i]; + result.push({ + isNull: value === null, + value: value, + color: this.calcColor(i, value, currentRegion), + offset: currentRegion + }); + } + return result; + }, + + calcColor: function (stacknum, value, valuenum) { + var colorMapByIndex = this.colorMapByIndex, + colorMapByValue = this.colorMapByValue, + options = this.options, + color, newColor; + if (this.stacked) { + color = options.get('stackedBarColor'); + } else { + color = (value < 0) ? options.get('negBarColor') : options.get('barColor'); + } + if (value === 0 && options.get('zeroColor') !== undefined) { + color = options.get('zeroColor'); + } + if (colorMapByValue && (newColor = colorMapByValue.get(value))) { + color = newColor; + } else if (colorMapByIndex && colorMapByIndex.length > valuenum) { + color = colorMapByIndex[valuenum]; + } + return $.isArray(color) ? color[stacknum % color.length] : color; + }, + + /** + * Render bar(s) for a region + */ + renderRegion: function (valuenum, highlight) { + var vals = this.values[valuenum], + options = this.options, + xaxisOffset = this.xaxisOffset, + result = [], + range = this.range, + stacked = this.stacked, + target = this.target, + x = valuenum * this.totalBarWidth, + canvasHeightEf = this.canvasHeightEf, + yoffset = this.yoffset, + y, height, color, isNull, yoffsetNeg, i, valcount, val, minPlotted, allMin; + + vals = $.isArray(vals) ? vals : [vals]; + valcount = vals.length; + val = vals[0]; + isNull = all(null, vals); + allMin = all(xaxisOffset, vals, true); + + if (isNull) { + if (options.get('nullColor')) { + color = highlight ? options.get('nullColor') : this.calcHighlightColor(options.get('nullColor'), options); + y = (yoffset > 0) ? yoffset - 1 : yoffset; + return target.drawRect(x, y, this.barWidth - 1, 0, color, color); + } else { + return undefined; + } + } + yoffsetNeg = yoffset; + for (i = 0; i < valcount; i++) { + val = vals[i]; + + if (stacked && val === xaxisOffset) { + if (!allMin || minPlotted) { + continue; + } + minPlotted = true; + } + + if (range > 0) { + height = Math.floor(canvasHeightEf * ((Math.abs(val - xaxisOffset) / range))) + 1; + } else { + height = 1; + } + if (val < xaxisOffset || (val === xaxisOffset && yoffset === 0)) { + y = yoffsetNeg; + yoffsetNeg += height; + } else { + y = yoffset - height; + yoffset -= height; + } + color = this.calcColor(i, val, valuenum); + if (highlight) { + color = this.calcHighlightColor(color, options); + } + result.push(target.drawRect(x, y, this.barWidth - 1, height - 1, color, color)); + } + if (result.length === 1) { + return result[0]; + } + return result; + } + }); + + /** + * Tristate charts + */ + $.fn.sparkline.tristate = tristate = createClass($.fn.sparkline._base, barHighlightMixin, { + type: 'tristate', + + init: function (el, values, options, width, height) { + var barWidth = parseInt(options.get('barWidth'), 10), + barSpacing = parseInt(options.get('barSpacing'), 10); + tristate._super.init.call(this, el, values, options, width, height); + + this.regionShapes = {}; + this.barWidth = barWidth; + this.barSpacing = barSpacing; + this.totalBarWidth = barWidth + barSpacing; + this.values = $.map(values, Number); + this.width = width = (values.length * barWidth) + ((values.length - 1) * barSpacing); + + if ($.isArray(options.get('colorMap'))) { + this.colorMapByIndex = options.get('colorMap'); + this.colorMapByValue = null; + } else { + this.colorMapByIndex = null; + this.colorMapByValue = options.get('colorMap'); + if (this.colorMapByValue && this.colorMapByValue.get === undefined) { + this.colorMapByValue = new RangeMap(this.colorMapByValue); + } + } + this.initTarget(); + }, + + getRegion: function (el, x, y) { + return Math.floor(x / this.totalBarWidth); + }, + + getCurrentRegionFields: function () { + var currentRegion = this.currentRegion; + return { + isNull: this.values[currentRegion] === undefined, + value: this.values[currentRegion], + color: this.calcColor(this.values[currentRegion], currentRegion), + offset: currentRegion + }; + }, + + calcColor: function (value, valuenum) { + var values = this.values, + options = this.options, + colorMapByIndex = this.colorMapByIndex, + colorMapByValue = this.colorMapByValue, + color, newColor; + + if (colorMapByValue && (newColor = colorMapByValue.get(value))) { + color = newColor; + } else if (colorMapByIndex && colorMapByIndex.length > valuenum) { + color = colorMapByIndex[valuenum]; + } else if (values[valuenum] < 0) { + color = options.get('negBarColor'); + } else if (values[valuenum] > 0) { + color = options.get('posBarColor'); + } else { + color = options.get('zeroBarColor'); + } + return color; + }, + + renderRegion: function (valuenum, highlight) { + var values = this.values, + options = this.options, + target = this.target, + canvasHeight, height, halfHeight, + x, y, color; + + canvasHeight = target.pixelHeight; + halfHeight = Math.round(canvasHeight / 2); + + x = valuenum * this.totalBarWidth; + if (values[valuenum] < 0) { + y = halfHeight; + height = halfHeight - 1; + } else if (values[valuenum] > 0) { + y = 0; + height = halfHeight - 1; + } else { + y = halfHeight - 1; + height = 2; + } + color = this.calcColor(values[valuenum], valuenum); + if (color === null) { + return; + } + if (highlight) { + color = this.calcHighlightColor(color, options); + } + return target.drawRect(x, y, this.barWidth - 1, height - 1, color, color); + } + }); + + /** + * Discrete charts + */ + $.fn.sparkline.discrete = discrete = createClass($.fn.sparkline._base, barHighlightMixin, { + type: 'discrete', + + init: function (el, values, options, width, height) { + discrete._super.init.call(this, el, values, options, width, height); + + this.regionShapes = {}; + this.values = values = $.map(values, Number); + this.min = Math.min.apply(Math, values); + this.max = Math.max.apply(Math, values); + this.range = this.max - this.min; + this.width = width = options.get('width') === 'auto' ? values.length * 2 : this.width; + this.interval = Math.floor(width / values.length); + this.itemWidth = width / values.length; + if (options.get('chartRangeMin') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMin') < this.min)) { + this.min = options.get('chartRangeMin'); + } + if (options.get('chartRangeMax') !== undefined && (options.get('chartRangeClip') || options.get('chartRangeMax') > this.max)) { + this.max = options.get('chartRangeMax'); + } + this.initTarget(); + if (this.target) { + this.lineHeight = options.get('lineHeight') === 'auto' ? Math.round(this.canvasHeight * 0.3) : options.get('lineHeight'); + } + }, + + getRegion: function (el, x, y) { + return Math.floor(x / this.itemWidth); + }, + + getCurrentRegionFields: function () { + var currentRegion = this.currentRegion; + return { + isNull: this.values[currentRegion] === undefined, + value: this.values[currentRegion], + offset: currentRegion + }; + }, + + renderRegion: function (valuenum, highlight) { + var values = this.values, + options = this.options, + min = this.min, + max = this.max, + range = this.range, + interval = this.interval, + target = this.target, + canvasHeight = this.canvasHeight, + lineHeight = this.lineHeight, + pheight = canvasHeight - lineHeight, + ytop, val, color, x; + + val = clipval(values[valuenum], min, max); + x = valuenum * interval; + ytop = Math.round(pheight - pheight * ((val - min) / range)); + color = (options.get('thresholdColor') && val < options.get('thresholdValue')) ? options.get('thresholdColor') : options.get('lineColor'); + if (highlight) { + color = this.calcHighlightColor(color, options); + } + return target.drawLine(x, ytop, x, ytop + lineHeight, color); + } + }); + + /** + * Bullet charts + */ + $.fn.sparkline.bullet = bullet = createClass($.fn.sparkline._base, { + type: 'bullet', + + init: function (el, values, options, width, height) { + var min, max, vals; + bullet._super.init.call(this, el, values, options, width, height); + + // values: target, performance, range1, range2, range3 + this.values = values = normalizeValues(values); + // target or performance could be null + vals = values.slice(); + vals[0] = vals[0] === null ? vals[2] : vals[0]; + vals[1] = values[1] === null ? vals[2] : vals[1]; + min = Math.min.apply(Math, values); + max = Math.max.apply(Math, values); + if (options.get('base') === undefined) { + min = min < 0 ? min : 0; + } else { + min = options.get('base'); + } + this.min = min; + this.max = max; + this.range = max - min; + this.shapes = {}; + this.valueShapes = {}; + this.regiondata = {}; + this.width = width = options.get('width') === 'auto' ? '4.0em' : width; + this.target = this.$el.simpledraw(width, height, options.get('composite')); + if (!values.length) { + this.disabled = true; + } + this.initTarget(); + }, + + getRegion: function (el, x, y) { + var shapeid = this.target.getShapeAt(el, x, y); + return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined; + }, + + getCurrentRegionFields: function () { + var currentRegion = this.currentRegion; + return { + fieldkey: currentRegion.substr(0, 1), + value: this.values[currentRegion.substr(1)], + region: currentRegion + }; + }, + + changeHighlight: function (highlight) { + var currentRegion = this.currentRegion, + shapeid = this.valueShapes[currentRegion], + shape; + delete this.shapes[shapeid]; + switch (currentRegion.substr(0, 1)) { + case 'r': + shape = this.renderRange(currentRegion.substr(1), highlight); + break; + case 'p': + shape = this.renderPerformance(highlight); + break; + case 't': + shape = this.renderTarget(highlight); + break; + } + this.valueShapes[currentRegion] = shape.id; + this.shapes[shape.id] = currentRegion; + this.target.replaceWithShape(shapeid, shape); + }, + + renderRange: function (rn, highlight) { + var rangeval = this.values[rn], + rangewidth = Math.round(this.canvasWidth * ((rangeval - this.min) / this.range)), + color = this.options.get('rangeColors')[rn - 2]; + if (highlight) { + color = this.calcHighlightColor(color, this.options); + } + return this.target.drawRect(0, 0, rangewidth - 1, this.canvasHeight - 1, color, color); + }, + + renderPerformance: function (highlight) { + var perfval = this.values[1], + perfwidth = Math.round(this.canvasWidth * ((perfval - this.min) / this.range)), + color = this.options.get('performanceColor'); + if (highlight) { + color = this.calcHighlightColor(color, this.options); + } + return this.target.drawRect(0, Math.round(this.canvasHeight * 0.3), perfwidth - 1, + Math.round(this.canvasHeight * 0.4) - 1, color, color); + }, + + renderTarget: function (highlight) { + var targetval = this.values[0], + x = Math.round(this.canvasWidth * ((targetval - this.min) / this.range) - (this.options.get('targetWidth') / 2)), + targettop = Math.round(this.canvasHeight * 0.10), + targetheight = this.canvasHeight - (targettop * 2), + color = this.options.get('targetColor'); + if (highlight) { + color = this.calcHighlightColor(color, this.options); + } + return this.target.drawRect(x, targettop, this.options.get('targetWidth') - 1, targetheight - 1, color, color); + }, + + render: function () { + var vlen = this.values.length, + target = this.target, + i, shape; + if (!bullet._super.render.call(this)) { + return; + } + for (i = 2; i < vlen; i++) { + shape = this.renderRange(i).append(); + this.shapes[shape.id] = 'r' + i; + this.valueShapes['r' + i] = shape.id; + } + if (this.values[1] !== null) { + shape = this.renderPerformance().append(); + this.shapes[shape.id] = 'p1'; + this.valueShapes.p1 = shape.id; + } + if (this.values[0] !== null) { + shape = this.renderTarget().append(); + this.shapes[shape.id] = 't0'; + this.valueShapes.t0 = shape.id; + } + target.render(); + } + }); + + /** + * Pie charts + */ + $.fn.sparkline.pie = pie = createClass($.fn.sparkline._base, { + type: 'pie', + + init: function (el, values, options, width, height) { + var total = 0, i; + + pie._super.init.call(this, el, values, options, width, height); + + this.shapes = {}; // map shape ids to value offsets + this.valueShapes = {}; // maps value offsets to shape ids + this.values = values = $.map(values, Number); + + if (options.get('width') === 'auto') { + this.width = this.height; + } + + if (values.length > 0) { + for (i = values.length; i--;) { + total += values[i]; + } + } + this.total = total; + this.initTarget(); + this.radius = Math.floor(Math.min(this.canvasWidth, this.canvasHeight) / 2); + }, + + getRegion: function (el, x, y) { + var shapeid = this.target.getShapeAt(el, x, y); + return (shapeid !== undefined && this.shapes[shapeid] !== undefined) ? this.shapes[shapeid] : undefined; + }, + + getCurrentRegionFields: function () { + var currentRegion = this.currentRegion; + return { + isNull: this.values[currentRegion] === undefined, + value: this.values[currentRegion], + percent: this.values[currentRegion] / this.total * 100, + color: this.options.get('sliceColors')[currentRegion % this.options.get('sliceColors').length], + offset: currentRegion + }; + }, + + changeHighlight: function (highlight) { + var currentRegion = this.currentRegion, + newslice = this.renderSlice(currentRegion, highlight), + shapeid = this.valueShapes[currentRegion]; + delete this.shapes[shapeid]; + this.target.replaceWithShape(shapeid, newslice); + this.valueShapes[currentRegion] = newslice.id; + this.shapes[newslice.id] = currentRegion; + }, + + renderSlice: function (valuenum, highlight) { + var target = this.target, + options = this.options, + radius = this.radius, + borderWidth = options.get('borderWidth'), + offset = options.get('offset'), + circle = 2 * Math.PI, + values = this.values, + total = this.total, + next = offset ? (2*Math.PI)*(offset/360) : 0, + start, end, i, vlen, color; + + vlen = values.length; + for (i = 0; i < vlen; i++) { + start = next; + end = next; + if (total > 0) { // avoid divide by zero + end = next + (circle * (values[i] / total)); + } + if (valuenum === i) { + color = options.get('sliceColors')[i % options.get('sliceColors').length]; + if (highlight) { + color = this.calcHighlightColor(color, options); + } + + return target.drawPieSlice(radius, radius, radius - borderWidth, start, end, undefined, color); + } + next = end; + } + }, + + render: function () { + var target = this.target, + values = this.values, + options = this.options, + radius = this.radius, + borderWidth = options.get('borderWidth'), + shape, i; + + if (!pie._super.render.call(this)) { + return; + } + if (borderWidth) { + target.drawCircle(radius, radius, Math.floor(radius - (borderWidth / 2)), + options.get('borderColor'), undefined, borderWidth).append(); + } + for (i = values.length; i--;) { + if (values[i]) { // don't render zero values + shape = this.renderSlice(i).append(); + this.valueShapes[i] = shape.id; // store just the shapeid + this.shapes[shape.id] = i; + } + } + target.render(); + } + }); + + /** + * Box plots + */ + $.fn.sparkline.box = box = createClass($.fn.sparkline._base, { + type: 'box', + + init: function (el, values, options, width, height) { + box._super.init.call(this, el, values, options, width, height); + this.values = $.map(values, Number); + this.width = options.get('width') === 'auto' ? '4.0em' : width; + this.initTarget(); + if (!this.values.length) { + this.disabled = 1; + } + }, + + /** + * Simulate a single region + */ + getRegion: function () { + return 1; + }, + + getCurrentRegionFields: function () { + var result = [ + { field: 'lq', value: this.quartiles[0] }, + { field: 'med', value: this.quartiles[1] }, + { field: 'uq', value: this.quartiles[2] } + ]; + if (this.loutlier !== undefined) { + result.push({ field: 'lo', value: this.loutlier}); + } + if (this.routlier !== undefined) { + result.push({ field: 'ro', value: this.routlier}); + } + if (this.lwhisker !== undefined) { + result.push({ field: 'lw', value: this.lwhisker}); + } + if (this.rwhisker !== undefined) { + result.push({ field: 'rw', value: this.rwhisker}); + } + return result; + }, + + render: function () { + var target = this.target, + values = this.values, + vlen = values.length, + options = this.options, + canvasWidth = this.canvasWidth, + canvasHeight = this.canvasHeight, + minValue = options.get('chartRangeMin') === undefined ? Math.min.apply(Math, values) : options.get('chartRangeMin'), + maxValue = options.get('chartRangeMax') === undefined ? Math.max.apply(Math, values) : options.get('chartRangeMax'), + canvasLeft = 0, + lwhisker, loutlier, iqr, q1, q2, q3, rwhisker, routlier, i, + size, unitSize; + + if (!box._super.render.call(this)) { + return; + } + + if (options.get('raw')) { + if (options.get('showOutliers') && values.length > 5) { + loutlier = values[0]; + lwhisker = values[1]; + q1 = values[2]; + q2 = values[3]; + q3 = values[4]; + rwhisker = values[5]; + routlier = values[6]; + } else { + lwhisker = values[0]; + q1 = values[1]; + q2 = values[2]; + q3 = values[3]; + rwhisker = values[4]; + } + } else { + values.sort(function (a, b) { return a - b; }); + q1 = quartile(values, 1); + q2 = quartile(values, 2); + q3 = quartile(values, 3); + iqr = q3 - q1; + if (options.get('showOutliers')) { + lwhisker = rwhisker = undefined; + for (i = 0; i < vlen; i++) { + if (lwhisker === undefined && values[i] > q1 - (iqr * options.get('outlierIQR'))) { + lwhisker = values[i]; + } + if (values[i] < q3 + (iqr * options.get('outlierIQR'))) { + rwhisker = values[i]; + } + } + loutlier = values[0]; + routlier = values[vlen - 1]; + } else { + lwhisker = values[0]; + rwhisker = values[vlen - 1]; + } + } + this.quartiles = [q1, q2, q3]; + this.lwhisker = lwhisker; + this.rwhisker = rwhisker; + this.loutlier = loutlier; + this.routlier = routlier; + + unitSize = canvasWidth / (maxValue - minValue + 1); + if (options.get('showOutliers')) { + canvasLeft = Math.ceil(options.get('spotRadius')); + canvasWidth -= 2 * Math.ceil(options.get('spotRadius')); + unitSize = canvasWidth / (maxValue - minValue + 1); + if (loutlier < lwhisker) { + target.drawCircle((loutlier - minValue) * unitSize + canvasLeft, + canvasHeight / 2, + options.get('spotRadius'), + options.get('outlierLineColor'), + options.get('outlierFillColor')).append(); + } + if (routlier > rwhisker) { + target.drawCircle((routlier - minValue) * unitSize + canvasLeft, + canvasHeight / 2, + options.get('spotRadius'), + options.get('outlierLineColor'), + options.get('outlierFillColor')).append(); + } + } + + // box + target.drawRect( + Math.round((q1 - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight * 0.1), + Math.round((q3 - q1) * unitSize), + Math.round(canvasHeight * 0.8), + options.get('boxLineColor'), + options.get('boxFillColor')).append(); + // left whisker + target.drawLine( + Math.round((lwhisker - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight / 2), + Math.round((q1 - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight / 2), + options.get('lineColor')).append(); + target.drawLine( + Math.round((lwhisker - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight / 4), + Math.round((lwhisker - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight - canvasHeight / 4), + options.get('whiskerColor')).append(); + // right whisker + target.drawLine(Math.round((rwhisker - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight / 2), + Math.round((q3 - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight / 2), + options.get('lineColor')).append(); + target.drawLine( + Math.round((rwhisker - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight / 4), + Math.round((rwhisker - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight - canvasHeight / 4), + options.get('whiskerColor')).append(); + // median line + target.drawLine( + Math.round((q2 - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight * 0.1), + Math.round((q2 - minValue) * unitSize + canvasLeft), + Math.round(canvasHeight * 0.9), + options.get('medianColor')).append(); + if (options.get('target')) { + size = Math.ceil(options.get('spotRadius')); + target.drawLine( + Math.round((options.get('target') - minValue) * unitSize + canvasLeft), + Math.round((canvasHeight / 2) - size), + Math.round((options.get('target') - minValue) * unitSize + canvasLeft), + Math.round((canvasHeight / 2) + size), + options.get('targetColor')).append(); + target.drawLine( + Math.round((options.get('target') - minValue) * unitSize + canvasLeft - size), + Math.round(canvasHeight / 2), + Math.round((options.get('target') - minValue) * unitSize + canvasLeft + size), + Math.round(canvasHeight / 2), + options.get('targetColor')).append(); + } + target.render(); + } + }); + + // Setup a very simple "virtual canvas" to make drawing the few shapes we need easier + // This is accessible as $(foo).simpledraw() + + VShape = createClass({ + init: function (target, id, type, args) { + this.target = target; + this.id = id; + this.type = type; + this.args = args; + }, + append: function () { + this.target.appendShape(this); + return this; + } + }); + + VCanvas_base = createClass({ + _pxregex: /(\d+)(px)?\s*$/i, + + init: function (width, height, target) { + if (!width) { + return; + } + this.width = width; + this.height = height; + this.target = target; + this.lastShapeId = null; + if (target[0]) { + target = target[0]; + } + $.data(target, '_jqs_vcanvas', this); + }, + + drawLine: function (x1, y1, x2, y2, lineColor, lineWidth) { + return this.drawShape([[x1, y1], [x2, y2]], lineColor, lineWidth); + }, + + drawShape: function (path, lineColor, fillColor, lineWidth) { + return this._genShape('Shape', [path, lineColor, fillColor, lineWidth]); + }, + + drawCircle: function (x, y, radius, lineColor, fillColor, lineWidth) { + return this._genShape('Circle', [x, y, radius, lineColor, fillColor, lineWidth]); + }, + + drawPieSlice: function (x, y, radius, startAngle, endAngle, lineColor, fillColor) { + return this._genShape('PieSlice', [x, y, radius, startAngle, endAngle, lineColor, fillColor]); + }, + + drawRect: function (x, y, width, height, lineColor, fillColor) { + return this._genShape('Rect', [x, y, width, height, lineColor, fillColor]); + }, + + getElement: function () { + return this.canvas; + }, + + /** + * Return the most recently inserted shape id + */ + getLastShapeId: function () { + return this.lastShapeId; + }, + + /** + * Clear and reset the canvas + */ + reset: function () { + alert('reset not implemented'); + }, + + _insert: function (el, target) { + $(target).html(el); + }, + + /** + * Calculate the pixel dimensions of the canvas + */ + _calculatePixelDims: function (width, height, canvas) { + // XXX This should probably be a configurable option + var match; + match = this._pxregex.exec(height); + if (match) { + this.pixelHeight = match[1]; + } else { + this.pixelHeight = $(canvas).height(); + } + match = this._pxregex.exec(width); + if (match) { + this.pixelWidth = match[1]; + } else { + this.pixelWidth = $(canvas).width(); + } + }, + + /** + * Generate a shape object and id for later rendering + */ + _genShape: function (shapetype, shapeargs) { + var id = shapeCount++; + shapeargs.unshift(id); + return new VShape(this, id, shapetype, shapeargs); + }, + + /** + * Add a shape to the end of the render queue + */ + appendShape: function (shape) { + alert('appendShape not implemented'); + }, + + /** + * Replace one shape with another + */ + replaceWithShape: function (shapeid, shape) { + alert('replaceWithShape not implemented'); + }, + + /** + * Insert one shape after another in the render queue + */ + insertAfterShape: function (shapeid, shape) { + alert('insertAfterShape not implemented'); + }, + + /** + * Remove a shape from the queue + */ + removeShapeId: function (shapeid) { + alert('removeShapeId not implemented'); + }, + + /** + * Find a shape at the specified x/y co-ordinates + */ + getShapeAt: function (el, x, y) { + alert('getShapeAt not implemented'); + }, + + /** + * Render all queued shapes onto the canvas + */ + render: function () { + alert('render not implemented'); + } + }); + + VCanvas_canvas = createClass(VCanvas_base, { + init: function (width, height, target, interact) { + VCanvas_canvas._super.init.call(this, width, height, target); + this.canvas = document.createElement('canvas'); + if (target[0]) { + target = target[0]; + } + $.data(target, '_jqs_vcanvas', this); + $(this.canvas).css({ display: 'inline-block', width: width, height: height, verticalAlign: 'top' }); + this._insert(this.canvas, target); + this._calculatePixelDims(width, height, this.canvas); + this.canvas.width = this.pixelWidth; + this.canvas.height = this.pixelHeight; + this.interact = interact; + this.shapes = {}; + this.shapeseq = []; + this.currentTargetShapeId = undefined; + $(this.canvas).css({width: this.pixelWidth, height: this.pixelHeight}); + }, + + _getContext: function (lineColor, fillColor, lineWidth) { + var context = this.canvas.getContext('2d'); + if (lineColor !== undefined) { + context.strokeStyle = lineColor; + } + context.lineWidth = lineWidth === undefined ? 1 : lineWidth; + if (fillColor !== undefined) { + context.fillStyle = fillColor; + } + return context; + }, + + reset: function () { + var context = this._getContext(); + context.clearRect(0, 0, this.pixelWidth, this.pixelHeight); + this.shapes = {}; + this.shapeseq = []; + this.currentTargetShapeId = undefined; + }, + + _drawShape: function (shapeid, path, lineColor, fillColor, lineWidth) { + var context = this._getContext(lineColor, fillColor, lineWidth), + i, plen; + context.beginPath(); + context.moveTo(path[0][0] + 0.5, path[0][1] + 0.5); + for (i = 1, plen = path.length; i < plen; i++) { + context.lineTo(path[i][0] + 0.5, path[i][1] + 0.5); // the 0.5 offset gives us crisp pixel-width lines + } + if (lineColor !== undefined) { + context.stroke(); + } + if (fillColor !== undefined) { + context.fill(); + } + if (this.targetX !== undefined && this.targetY !== undefined && + context.isPointInPath(this.targetX, this.targetY)) { + this.currentTargetShapeId = shapeid; + } + }, + + _drawCircle: function (shapeid, x, y, radius, lineColor, fillColor, lineWidth) { + var context = this._getContext(lineColor, fillColor, lineWidth); + context.beginPath(); + context.arc(x, y, radius, 0, 2 * Math.PI, false); + if (this.targetX !== undefined && this.targetY !== undefined && + context.isPointInPath(this.targetX, this.targetY)) { + this.currentTargetShapeId = shapeid; + } + if (lineColor !== undefined) { + context.stroke(); + } + if (fillColor !== undefined) { + context.fill(); + } + }, + + _drawPieSlice: function (shapeid, x, y, radius, startAngle, endAngle, lineColor, fillColor) { + var context = this._getContext(lineColor, fillColor); + context.beginPath(); + context.moveTo(x, y); + context.arc(x, y, radius, startAngle, endAngle, false); + context.lineTo(x, y); + context.closePath(); + if (lineColor !== undefined) { + context.stroke(); + } + if (fillColor) { + context.fill(); + } + if (this.targetX !== undefined && this.targetY !== undefined && + context.isPointInPath(this.targetX, this.targetY)) { + this.currentTargetShapeId = shapeid; + } + }, + + _drawRect: function (shapeid, x, y, width, height, lineColor, fillColor) { + return this._drawShape(shapeid, [[x, y], [x + width, y], [x + width, y + height], [x, y + height], [x, y]], lineColor, fillColor); + }, + + appendShape: function (shape) { + this.shapes[shape.id] = shape; + this.shapeseq.push(shape.id); + this.lastShapeId = shape.id; + return shape.id; + }, + + replaceWithShape: function (shapeid, shape) { + var shapeseq = this.shapeseq, + i; + this.shapes[shape.id] = shape; + for (i = shapeseq.length; i--;) { + if (shapeseq[i] == shapeid) { + shapeseq[i] = shape.id; + } + } + delete this.shapes[shapeid]; + }, + + replaceWithShapes: function (shapeids, shapes) { + var shapeseq = this.shapeseq, + shapemap = {}, + sid, i, first; + + for (i = shapeids.length; i--;) { + shapemap[shapeids[i]] = true; + } + for (i = shapeseq.length; i--;) { + sid = shapeseq[i]; + if (shapemap[sid]) { + shapeseq.splice(i, 1); + delete this.shapes[sid]; + first = i; + } + } + for (i = shapes.length; i--;) { + shapeseq.splice(first, 0, shapes[i].id); + this.shapes[shapes[i].id] = shapes[i]; + } + + }, + + insertAfterShape: function (shapeid, shape) { + var shapeseq = this.shapeseq, + i; + for (i = shapeseq.length; i--;) { + if (shapeseq[i] === shapeid) { + shapeseq.splice(i + 1, 0, shape.id); + this.shapes[shape.id] = shape; + return; + } + } + }, + + removeShapeId: function (shapeid) { + var shapeseq = this.shapeseq, + i; + for (i = shapeseq.length; i--;) { + if (shapeseq[i] === shapeid) { + shapeseq.splice(i, 1); + break; + } + } + delete this.shapes[shapeid]; + }, + + getShapeAt: function (el, x, y) { + this.targetX = x; + this.targetY = y; + this.render(); + return this.currentTargetShapeId; + }, + + render: function () { + var shapeseq = this.shapeseq, + shapes = this.shapes, + shapeCount = shapeseq.length, + context = this._getContext(), + shapeid, shape, i; + context.clearRect(0, 0, this.pixelWidth, this.pixelHeight); + for (i = 0; i < shapeCount; i++) { + shapeid = shapeseq[i]; + shape = shapes[shapeid]; + this['_draw' + shape.type].apply(this, shape.args); + } + if (!this.interact) { + // not interactive so no need to keep the shapes array + this.shapes = {}; + this.shapeseq = []; + } + } + + }); + + VCanvas_vml = createClass(VCanvas_base, { + init: function (width, height, target) { + var groupel; + VCanvas_vml._super.init.call(this, width, height, target); + if (target[0]) { + target = target[0]; + } + $.data(target, '_jqs_vcanvas', this); + this.canvas = document.createElement('span'); + $(this.canvas).css({ display: 'inline-block', position: 'relative', overflow: 'hidden', width: width, height: height, margin: '0px', padding: '0px', verticalAlign: 'top'}); + this._insert(this.canvas, target); + this._calculatePixelDims(width, height, this.canvas); + this.canvas.width = this.pixelWidth; + this.canvas.height = this.pixelHeight; + groupel = '<v:group coordorigin="0 0" coordsize="' + this.pixelWidth + ' ' + this.pixelHeight + '"' + + ' style="position:absolute;top:0;left:0;width:' + this.pixelWidth + 'px;height=' + this.pixelHeight + 'px;"></v:group>'; + this.canvas.insertAdjacentHTML('beforeEnd', groupel); + this.group = $(this.canvas).children()[0]; + this.rendered = false; + this.prerender = ''; + }, + + _drawShape: function (shapeid, path, lineColor, fillColor, lineWidth) { + var vpath = [], + initial, stroke, fill, closed, vel, plen, i; + for (i = 0, plen = path.length; i < plen; i++) { + vpath[i] = '' + (path[i][0]) + ',' + (path[i][1]); + } + initial = vpath.splice(0, 1); + lineWidth = lineWidth === undefined ? 1 : lineWidth; + stroke = lineColor === undefined ? ' stroked="false" ' : ' strokeWeight="' + lineWidth + 'px" strokeColor="' + lineColor + '" '; + fill = fillColor === undefined ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" '; + closed = vpath[0] === vpath[vpath.length - 1] ? 'x ' : ''; + vel = '<v:shape coordorigin="0 0" coordsize="' + this.pixelWidth + ' ' + this.pixelHeight + '" ' + + ' id="jqsshape' + shapeid + '" ' + + stroke + + fill + + ' style="position:absolute;left:0px;top:0px;height:' + this.pixelHeight + 'px;width:' + this.pixelWidth + 'px;padding:0px;margin:0px;" ' + + ' path="m ' + initial + ' l ' + vpath.join(', ') + ' ' + closed + 'e">' + + ' </v:shape>'; + return vel; + }, + + _drawCircle: function (shapeid, x, y, radius, lineColor, fillColor, lineWidth) { + var stroke, fill, vel; + x -= radius; + y -= radius; + stroke = lineColor === undefined ? ' stroked="false" ' : ' strokeWeight="' + lineWidth + 'px" strokeColor="' + lineColor + '" '; + fill = fillColor === undefined ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" '; + vel = '<v:oval ' + + ' id="jqsshape' + shapeid + '" ' + + stroke + + fill + + ' style="position:absolute;top:' + y + 'px; left:' + x + 'px; width:' + (radius * 2) + 'px; height:' + (radius * 2) + 'px"></v:oval>'; + return vel; + + }, + + _drawPieSlice: function (shapeid, x, y, radius, startAngle, endAngle, lineColor, fillColor) { + var vpath, startx, starty, endx, endy, stroke, fill, vel; + if (startAngle === endAngle) { + return ''; // VML seems to have problem when start angle equals end angle. + } + if ((endAngle - startAngle) === (2 * Math.PI)) { + startAngle = 0.0; // VML seems to have a problem when drawing a full circle that doesn't start 0 + endAngle = (2 * Math.PI); + } + + startx = x + Math.round(Math.cos(startAngle) * radius); + starty = y + Math.round(Math.sin(startAngle) * radius); + endx = x + Math.round(Math.cos(endAngle) * radius); + endy = y + Math.round(Math.sin(endAngle) * radius); + + if (startx === endx && starty === endy) { + if ((endAngle - startAngle) < Math.PI) { + // Prevent very small slices from being mistaken as a whole pie + return ''; + } + // essentially going to be the entire circle, so ignore startAngle + startx = endx = x + radius; + starty = endy = y; + } + + if (startx === endx && starty === endy && (endAngle - startAngle) < Math.PI) { + return ''; + } + + vpath = [x - radius, y - radius, x + radius, y + radius, startx, starty, endx, endy]; + stroke = lineColor === undefined ? ' stroked="false" ' : ' strokeWeight="1px" strokeColor="' + lineColor + '" '; + fill = fillColor === undefined ? ' filled="false"' : ' fillColor="' + fillColor + '" filled="true" '; + vel = '<v:shape coordorigin="0 0" coordsize="' + this.pixelWidth + ' ' + this.pixelHeight + '" ' + + ' id="jqsshape' + shapeid + '" ' + + stroke + + fill + + ' style="position:absolute;left:0px;top:0px;height:' + this.pixelHeight + 'px;width:' + this.pixelWidth + 'px;padding:0px;margin:0px;" ' + + ' path="m ' + x + ',' + y + ' wa ' + vpath.join(', ') + ' x e">' + + ' </v:shape>'; + return vel; + }, + + _drawRect: function (shapeid, x, y, width, height, lineColor, fillColor) { + return this._drawShape(shapeid, [[x, y], [x, y + height], [x + width, y + height], [x + width, y], [x, y]], lineColor, fillColor); + }, + + reset: function () { + this.group.innerHTML = ''; + }, + + appendShape: function (shape) { + var vel = this['_draw' + shape.type].apply(this, shape.args); + if (this.rendered) { + this.group.insertAdjacentHTML('beforeEnd', vel); + } else { + this.prerender += vel; + } + this.lastShapeId = shape.id; + return shape.id; + }, + + replaceWithShape: function (shapeid, shape) { + var existing = $('#jqsshape' + shapeid), + vel = this['_draw' + shape.type].apply(this, shape.args); + existing[0].outerHTML = vel; + }, + + replaceWithShapes: function (shapeids, shapes) { + // replace the first shapeid with all the new shapes then toast the remaining old shapes + var existing = $('#jqsshape' + shapeids[0]), + replace = '', + slen = shapes.length, + i; + for (i = 0; i < slen; i++) { + replace += this['_draw' + shapes[i].type].apply(this, shapes[i].args); + } + existing[0].outerHTML = replace; + for (i = 1; i < shapeids.length; i++) { + $('#jqsshape' + shapeids[i]).remove(); + } + }, + + insertAfterShape: function (shapeid, shape) { + var existing = $('#jqsshape' + shapeid), + vel = this['_draw' + shape.type].apply(this, shape.args); + existing[0].insertAdjacentHTML('afterEnd', vel); + }, + + removeShapeId: function (shapeid) { + var existing = $('#jqsshape' + shapeid); + this.group.removeChild(existing[0]); + }, + + getShapeAt: function (el, x, y) { + var shapeid = el.id.substr(8); + return shapeid; + }, + + render: function () { + if (!this.rendered) { + // batch the intial render into a single repaint + this.group.innerHTML = this.prerender; + this.rendered = true; + } + } + }); + +}))}(document, Math)); diff --git a/debian/missing-sources/morris.css b/debian/missing-sources/morris.css new file mode 100644 index 00000000..209f0915 --- /dev/null +++ b/debian/missing-sources/morris.css @@ -0,0 +1,2 @@ +.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255,255,255,0.8);border:solid 2px rgba(230,230,230,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0} +.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0} diff --git a/debian/missing-sources/morris.js b/debian/missing-sources/morris.js new file mode 100644 index 00000000..60b3132d --- /dev/null +++ b/debian/missing-sources/morris.js @@ -0,0 +1,1895 @@ +/* @license +morris.js v0.5.0 +Copyright 2014 Olly Smith All rights reserved. +Licensed under the BSD-2-Clause License. +*/ + + +(function() { + var $, Morris, minutesSpecHelper, secondsSpecHelper, + __slice = [].slice, + __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, + __hasProp = {}.hasOwnProperty, + __extends = function(child, parent) { + for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } + function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; + }, + __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; + + Morris = window.Morris = {}; + + $ = jQuery; + + Morris.EventEmitter = (function() { + function EventEmitter() {} + + EventEmitter.prototype.on = function(name, handler) { + if (this.handlers == null) { + this.handlers = {}; + } + if (this.handlers[name] == null) { + this.handlers[name] = []; + } + this.handlers[name].push(handler); + return this; + }; + + EventEmitter.prototype.fire = function() { + var args, handler, name, _i, _len, _ref, _results; + name = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; + if ((this.handlers != null) && (this.handlers[name] != null)) { + _ref = this.handlers[name]; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + handler = _ref[_i]; + _results.push(handler.apply(null, args)); + } + return _results; + } + }; + + return EventEmitter; + + })(); + + Morris.commas = function(num) { + var absnum, intnum, ret, strabsnum; + if (num != null) { + ret = num < 0 ? "-" : ""; + absnum = Math.abs(num); + intnum = Math.floor(absnum).toFixed(0); + ret += intnum.replace(/(?=(?:\d{3})+$)(?!^)/g, ','); + strabsnum = absnum.toString(); + if (strabsnum.length > intnum.length) { + ret += strabsnum.slice(intnum.length); + } + return ret; + } else { + return '-'; + } + }; + + Morris.pad2 = function(number) { + return (number < 10 ? '0' : '') + number; + }; + + Morris.Grid = (function(_super) { + __extends(Grid, _super); + + function Grid(options) { + this.resizeHandler = __bind(this.resizeHandler, this); + var _this = this; + if (typeof options.element === 'string') { + this.el = $(document.getElementById(options.element)); + } else { + this.el = $(options.element); + } + if ((this.el == null) || this.el.length === 0) { + throw new Error("Graph container element not found"); + } + if (this.el.css('position') === 'static') { + this.el.css('position', 'relative'); + } + this.options = $.extend({}, this.gridDefaults, this.defaults || {}, options); + if (typeof this.options.units === 'string') { + this.options.postUnits = options.units; + } + this.raphael = new Raphael(this.el[0]); + this.elementWidth = null; + this.elementHeight = null; + this.dirty = false; + this.selectFrom = null; + if (this.init) { + this.init(); + } + this.setData(this.options.data); + this.el.bind('mousemove', function(evt) { + var left, offset, right, width, x; + offset = _this.el.offset(); + x = evt.pageX - offset.left; + if (_this.selectFrom) { + left = _this.data[_this.hitTest(Math.min(x, _this.selectFrom))]._x; + right = _this.data[_this.hitTest(Math.max(x, _this.selectFrom))]._x; + width = right - left; + return _this.selectionRect.attr({ + x: left, + width: width + }); + } else { + return _this.fire('hovermove', x, evt.pageY - offset.top); + } + }); + this.el.bind('mouseleave', function(evt) { + if (_this.selectFrom) { + _this.selectionRect.hide(); + _this.selectFrom = null; + } + return _this.fire('hoverout'); + }); + this.el.bind('touchstart touchmove touchend', function(evt) { + var offset, touch; + touch = evt.originalEvent.touches[0] || evt.originalEvent.changedTouches[0]; + offset = _this.el.offset(); + return _this.fire('hovermove', touch.pageX - offset.left, touch.pageY - offset.top); + }); + this.el.bind('click', function(evt) { + var offset; + offset = _this.el.offset(); + return _this.fire('gridclick', evt.pageX - offset.left, evt.pageY - offset.top); + }); + if (this.options.rangeSelect) { + this.selectionRect = this.raphael.rect(0, 0, 0, this.el.innerHeight()).attr({ + fill: this.options.rangeSelectColor, + stroke: false + }).toBack().hide(); + this.el.bind('mousedown', function(evt) { + var offset; + offset = _this.el.offset(); + return _this.startRange(evt.pageX - offset.left); + }); + this.el.bind('mouseup', function(evt) { + var offset; + offset = _this.el.offset(); + _this.endRange(evt.pageX - offset.left); + return _this.fire('hovermove', evt.pageX - offset.left, evt.pageY - offset.top); + }); + } + if (this.options.resize) { + $(window).bind('resize', function(evt) { + if (_this.timeoutId != null) { + window.clearTimeout(_this.timeoutId); + } + return _this.timeoutId = window.setTimeout(_this.resizeHandler, 100); + }); + } + this.el.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + if (this.postInit) { + this.postInit(); + } + } + + Grid.prototype.gridDefaults = { + dateFormat: null, + axes: true, + grid: true, + gridLineColor: '#aaa', + gridStrokeWidth: 0.5, + gridTextColor: '#888', + gridTextSize: 12, + gridTextFamily: 'sans-serif', + gridTextWeight: 'normal', + hideHover: false, + yLabelFormat: null, + xLabelAngle: 0, + numLines: 5, + padding: 25, + parseTime: true, + postUnits: '', + preUnits: '', + ymax: 'auto', + ymin: 'auto 0', + goals: [], + goalStrokeWidth: 1.0, + goalLineColors: ['#666633', '#999966', '#cc6666', '#663333'], + events: [], + eventStrokeWidth: 1.0, + eventLineColors: ['#005a04', '#ccffbb', '#3a5f0b', '#005502'], + rangeSelect: null, + rangeSelectColor: '#eef', + resize: false + }; + + Grid.prototype.setData = function(data, redraw) { + var e, idx, index, maxGoal, minGoal, ret, row, step, total, y, ykey, ymax, ymin, yval, _ref; + if (redraw == null) { + redraw = true; + } + this.options.data = data; + if ((data == null) || data.length === 0) { + this.data = []; + this.raphael.clear(); + if (this.hover != null) { + this.hover.hide(); + } + return; + } + ymax = this.cumulative ? 0 : null; + ymin = this.cumulative ? 0 : null; + if (this.options.goals.length > 0) { + minGoal = Math.min.apply(Math, this.options.goals); + maxGoal = Math.max.apply(Math, this.options.goals); + ymin = ymin != null ? Math.min(ymin, minGoal) : minGoal; + ymax = ymax != null ? Math.max(ymax, maxGoal) : maxGoal; + } + this.data = (function() { + var _i, _len, _results; + _results = []; + for (index = _i = 0, _len = data.length; _i < _len; index = ++_i) { + row = data[index]; + ret = { + src: row + }; + ret.label = row[this.options.xkey]; + if (this.options.parseTime) { + ret.x = Morris.parseDate(ret.label); + if (this.options.dateFormat) { + ret.label = this.options.dateFormat(ret.x); + } else if (typeof ret.label === 'number') { + ret.label = new Date(ret.label).toString(); + } + } else { + ret.x = index; + if (this.options.xLabelFormat) { + ret.label = this.options.xLabelFormat(ret); + } + } + total = 0; + ret.y = (function() { + var _j, _len1, _ref, _results1; + _ref = this.options.ykeys; + _results1 = []; + for (idx = _j = 0, _len1 = _ref.length; _j < _len1; idx = ++_j) { + ykey = _ref[idx]; + yval = row[ykey]; + if (typeof yval === 'string') { + yval = parseFloat(yval); + } + if ((yval != null) && typeof yval !== 'number') { + yval = null; + } + if (yval != null) { + if (this.cumulative) { + total += yval; + } else { + if (ymax != null) { + ymax = Math.max(yval, ymax); + ymin = Math.min(yval, ymin); + } else { + ymax = ymin = yval; + } + } + } + if (this.cumulative && (total != null)) { + ymax = Math.max(total, ymax); + ymin = Math.min(total, ymin); + } + _results1.push(yval); + } + return _results1; + }).call(this); + _results.push(ret); + } + return _results; + }).call(this); + if (this.options.parseTime) { + this.data = this.data.sort(function(a, b) { + return (a.x > b.x) - (b.x > a.x); + }); + } + this.xmin = this.data[0].x; + this.xmax = this.data[this.data.length - 1].x; + this.events = []; + if (this.options.events.length > 0) { + if (this.options.parseTime) { + this.events = (function() { + var _i, _len, _ref, _results; + _ref = this.options.events; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + e = _ref[_i]; + _results.push(Morris.parseDate(e)); + } + return _results; + }).call(this); + } else { + this.events = this.options.events; + } + this.xmax = Math.max(this.xmax, Math.max.apply(Math, this.events)); + this.xmin = Math.min(this.xmin, Math.min.apply(Math, this.events)); + } + if (this.xmin === this.xmax) { + this.xmin -= 1; + this.xmax += 1; + } + this.ymin = this.yboundary('min', ymin); + this.ymax = this.yboundary('max', ymax); + if (this.ymin === this.ymax) { + if (ymin) { + this.ymin -= 1; + } + this.ymax += 1; + } + if (((_ref = this.options.axes) === true || _ref === 'both' || _ref === 'y') || this.options.grid === true) { + if (this.options.ymax === this.gridDefaults.ymax && this.options.ymin === this.gridDefaults.ymin) { + this.grid = this.autoGridLines(this.ymin, this.ymax, this.options.numLines); + this.ymin = Math.min(this.ymin, this.grid[0]); + this.ymax = Math.max(this.ymax, this.grid[this.grid.length - 1]); + } else { + step = (this.ymax - this.ymin) / (this.options.numLines - 1); + this.grid = (function() { + var _i, _ref1, _ref2, _results; + _results = []; + for (y = _i = _ref1 = this.ymin, _ref2 = this.ymax; step > 0 ? _i <= _ref2 : _i >= _ref2; y = _i += step) { + _results.push(y); + } + return _results; + }).call(this); + } + } + this.dirty = true; + if (redraw) { + return this.redraw(); + } + }; + + Grid.prototype.yboundary = function(boundaryType, currentValue) { + var boundaryOption, suggestedValue; + boundaryOption = this.options["y" + boundaryType]; + if (typeof boundaryOption === 'string') { + if (boundaryOption.slice(0, 4) === 'auto') { + if (boundaryOption.length > 5) { + suggestedValue = parseInt(boundaryOption.slice(5), 10); + if (currentValue == null) { + return suggestedValue; + } + return Math[boundaryType](currentValue, suggestedValue); + } else { + if (currentValue != null) { + return currentValue; + } else { + return 0; + } + } + } else { + return parseInt(boundaryOption, 10); + } + } else { + return boundaryOption; + } + }; + + Grid.prototype.autoGridLines = function(ymin, ymax, nlines) { + var gmax, gmin, grid, smag, span, step, unit, y, ymag; + span = ymax - ymin; + ymag = Math.floor(Math.log(span) / Math.log(10)); + unit = Math.pow(10, ymag); + gmin = Math.floor(ymin / unit) * unit; + gmax = Math.ceil(ymax / unit) * unit; + step = (gmax - gmin) / (nlines - 1); + if (unit === 1 && step > 1 && Math.ceil(step) !== step) { + step = Math.ceil(step); + gmax = gmin + step * (nlines - 1); + } + if (gmin < 0 && gmax > 0) { + gmin = Math.floor(ymin / step) * step; + gmax = Math.ceil(ymax / step) * step; + } + if (step < 1) { + smag = Math.floor(Math.log(step) / Math.log(10)); + grid = (function() { + var _i, _results; + _results = []; + for (y = _i = gmin; step > 0 ? _i <= gmax : _i >= gmax; y = _i += step) { + _results.push(parseFloat(y.toFixed(1 - smag))); + } + return _results; + })(); + } else { + grid = (function() { + var _i, _results; + _results = []; + for (y = _i = gmin; step > 0 ? _i <= gmax : _i >= gmax; y = _i += step) { + _results.push(y); + } + return _results; + })(); + } + return grid; + }; + + Grid.prototype._calc = function() { + var bottomOffsets, gridLine, h, i, w, yLabelWidths, _ref, _ref1; + w = this.el.width(); + h = this.el.height(); + if (this.elementWidth !== w || this.elementHeight !== h || this.dirty) { + this.elementWidth = w; + this.elementHeight = h; + this.dirty = false; + this.left = this.options.padding; + this.right = this.elementWidth - this.options.padding; + this.top = this.options.padding; + this.bottom = this.elementHeight - this.options.padding; + if ((_ref = this.options.axes) === true || _ref === 'both' || _ref === 'y') { + yLabelWidths = (function() { + var _i, _len, _ref1, _results; + _ref1 = this.grid; + _results = []; + for (_i = 0, _len = _ref1.length; _i < _len; _i++) { + gridLine = _ref1[_i]; + _results.push(this.measureText(this.yAxisFormat(gridLine)).width); + } + return _results; + }).call(this); + this.left += Math.max.apply(Math, yLabelWidths); + } + if ((_ref1 = this.options.axes) === true || _ref1 === 'both' || _ref1 === 'x') { + bottomOffsets = (function() { + var _i, _ref2, _results; + _results = []; + for (i = _i = 0, _ref2 = this.data.length; 0 <= _ref2 ? _i < _ref2 : _i > _ref2; i = 0 <= _ref2 ? ++_i : --_i) { + _results.push(this.measureText(this.data[i].text, -this.options.xLabelAngle).height); + } + return _results; + }).call(this); + this.bottom -= Math.max.apply(Math, bottomOffsets); + } + this.width = Math.max(1, this.right - this.left); + this.height = Math.max(1, this.bottom - this.top); + this.dx = this.width / (this.xmax - this.xmin); + this.dy = this.height / (this.ymax - this.ymin); + if (this.calc) { + return this.calc(); + } + } + }; + + Grid.prototype.transY = function(y) { + return this.bottom - (y - this.ymin) * this.dy; + }; + + Grid.prototype.transX = function(x) { + if (this.data.length === 1) { + return (this.left + this.right) / 2; + } else { + return this.left + (x - this.xmin) * this.dx; + } + }; + + Grid.prototype.redraw = function() { + this.raphael.clear(); + this._calc(); + this.drawGrid(); + this.drawGoals(); + this.drawEvents(); + if (this.draw) { + return this.draw(); + } + }; + + Grid.prototype.measureText = function(text, angle) { + var ret, tt; + if (angle == null) { + angle = 0; + } + tt = this.raphael.text(100, 100, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).rotate(angle); + ret = tt.getBBox(); + tt.remove(); + return ret; + }; + + Grid.prototype.yAxisFormat = function(label) { + return this.yLabelFormat(label); + }; + + Grid.prototype.yLabelFormat = function(label) { + if (typeof this.options.yLabelFormat === 'function') { + return this.options.yLabelFormat(label); + } else { + return "" + this.options.preUnits + (Morris.commas(label)) + this.options.postUnits; + } + }; + + Grid.prototype.drawGrid = function() { + var lineY, y, _i, _len, _ref, _ref1, _ref2, _results; + if (this.options.grid === false && ((_ref = this.options.axes) !== true && _ref !== 'both' && _ref !== 'y')) { + return; + } + _ref1 = this.grid; + _results = []; + for (_i = 0, _len = _ref1.length; _i < _len; _i++) { + lineY = _ref1[_i]; + y = this.transY(lineY); + if ((_ref2 = this.options.axes) === true || _ref2 === 'both' || _ref2 === 'y') { + this.drawYAxisLabel(this.left - this.options.padding / 2, y, this.yAxisFormat(lineY)); + } + if (this.options.grid) { + _results.push(this.drawGridLine("M" + this.left + "," + y + "H" + (this.left + this.width))); + } else { + _results.push(void 0); + } + } + return _results; + }; + + Grid.prototype.drawGoals = function() { + var color, goal, i, _i, _len, _ref, _results; + _ref = this.options.goals; + _results = []; + for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { + goal = _ref[i]; + color = this.options.goalLineColors[i % this.options.goalLineColors.length]; + _results.push(this.drawGoal(goal, color)); + } + return _results; + }; + + Grid.prototype.drawEvents = function() { + var color, event, i, _i, _len, _ref, _results; + _ref = this.events; + _results = []; + for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { + event = _ref[i]; + color = this.options.eventLineColors[i % this.options.eventLineColors.length]; + _results.push(this.drawEvent(event, color)); + } + return _results; + }; + + Grid.prototype.drawGoal = function(goal, color) { + return this.raphael.path("M" + this.left + "," + (this.transY(goal)) + "H" + this.right).attr('stroke', color).attr('stroke-width', this.options.goalStrokeWidth); + }; + + Grid.prototype.drawEvent = function(event, color) { + return this.raphael.path("M" + (this.transX(event)) + "," + this.bottom + "V" + this.top).attr('stroke', color).attr('stroke-width', this.options.eventStrokeWidth); + }; + + Grid.prototype.drawYAxisLabel = function(xPos, yPos, text) { + return this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor).attr('text-anchor', 'end'); + }; + + Grid.prototype.drawGridLine = function(path) { + return this.raphael.path(path).attr('stroke', this.options.gridLineColor).attr('stroke-width', this.options.gridStrokeWidth); + }; + + Grid.prototype.startRange = function(x) { + this.hover.hide(); + this.selectFrom = x; + return this.selectionRect.attr({ + x: x, + width: 0 + }).show(); + }; + + Grid.prototype.endRange = function(x) { + var end, start; + if (this.selectFrom) { + start = Math.min(this.selectFrom, x); + end = Math.max(this.selectFrom, x); + this.options.rangeSelect.call(this.el, { + start: this.data[this.hitTest(start)].x, + end: this.data[this.hitTest(end)].x + }); + return this.selectFrom = null; + } + }; + + Grid.prototype.resizeHandler = function() { + this.timeoutId = null; + this.raphael.setSize(this.el.width(), this.el.height()); + return this.redraw(); + }; + + return Grid; + + })(Morris.EventEmitter); + + Morris.parseDate = function(date) { + var isecs, m, msecs, n, o, offsetmins, p, q, r, ret, secs; + if (typeof date === 'number') { + return date; + } + m = date.match(/^(\d+) Q(\d)$/); + n = date.match(/^(\d+)-(\d+)$/); + o = date.match(/^(\d+)-(\d+)-(\d+)$/); + p = date.match(/^(\d+) W(\d+)$/); + q = date.match(/^(\d+)-(\d+)-(\d+)[ T](\d+):(\d+)(Z|([+-])(\d\d):?(\d\d))?$/); + r = date.match(/^(\d+)-(\d+)-(\d+)[ T](\d+):(\d+):(\d+(\.\d+)?)(Z|([+-])(\d\d):?(\d\d))?$/); + if (m) { + return new Date(parseInt(m[1], 10), parseInt(m[2], 10) * 3 - 1, 1).getTime(); + } else if (n) { + return new Date(parseInt(n[1], 10), parseInt(n[2], 10) - 1, 1).getTime(); + } else if (o) { + return new Date(parseInt(o[1], 10), parseInt(o[2], 10) - 1, parseInt(o[3], 10)).getTime(); + } else if (p) { + ret = new Date(parseInt(p[1], 10), 0, 1); + if (ret.getDay() !== 4) { + ret.setMonth(0, 1 + ((4 - ret.getDay()) + 7) % 7); + } + return ret.getTime() + parseInt(p[2], 10) * 604800000; + } else if (q) { + if (!q[6]) { + return new Date(parseInt(q[1], 10), parseInt(q[2], 10) - 1, parseInt(q[3], 10), parseInt(q[4], 10), parseInt(q[5], 10)).getTime(); + } else { + offsetmins = 0; + if (q[6] !== 'Z') { + offsetmins = parseInt(q[8], 10) * 60 + parseInt(q[9], 10); + if (q[7] === '+') { + offsetmins = 0 - offsetmins; + } + } + return Date.UTC(parseInt(q[1], 10), parseInt(q[2], 10) - 1, parseInt(q[3], 10), parseInt(q[4], 10), parseInt(q[5], 10) + offsetmins); + } + } else if (r) { + secs = parseFloat(r[6]); + isecs = Math.floor(secs); + msecs = Math.round((secs - isecs) * 1000); + if (!r[8]) { + return new Date(parseInt(r[1], 10), parseInt(r[2], 10) - 1, parseInt(r[3], 10), parseInt(r[4], 10), parseInt(r[5], 10), isecs, msecs).getTime(); + } else { + offsetmins = 0; + if (r[8] !== 'Z') { + offsetmins = parseInt(r[10], 10) * 60 + parseInt(r[11], 10); + if (r[9] === '+') { + offsetmins = 0 - offsetmins; + } + } + return Date.UTC(parseInt(r[1], 10), parseInt(r[2], 10) - 1, parseInt(r[3], 10), parseInt(r[4], 10), parseInt(r[5], 10) + offsetmins, isecs, msecs); + } + } else { + return new Date(parseInt(date, 10), 0, 1).getTime(); + } + }; + + Morris.Hover = (function() { + Hover.defaults = { + "class": 'morris-hover morris-default-style' + }; + + function Hover(options) { + if (options == null) { + options = {}; + } + this.options = $.extend({}, Morris.Hover.defaults, options); + this.el = $("<div class='" + this.options["class"] + "'></div>"); + this.el.hide(); + this.options.parent.append(this.el); + } + + Hover.prototype.update = function(html, x, y) { + if (!html) { + return this.hide(); + } else { + this.html(html); + this.show(); + return this.moveTo(x, y); + } + }; + + Hover.prototype.html = function(content) { + return this.el.html(content); + }; + + Hover.prototype.moveTo = function(x, y) { + var hoverHeight, hoverWidth, left, parentHeight, parentWidth, top; + parentWidth = this.options.parent.innerWidth(); + parentHeight = this.options.parent.innerHeight(); + hoverWidth = this.el.outerWidth(); + hoverHeight = this.el.outerHeight(); + left = Math.min(Math.max(0, x - hoverWidth / 2), parentWidth - hoverWidth); + if (y != null) { + top = y - hoverHeight - 10; + if (top < 0) { + top = y + 10; + if (top + hoverHeight > parentHeight) { + top = parentHeight / 2 - hoverHeight / 2; + } + } + } else { + top = parentHeight / 2 - hoverHeight / 2; + } + return this.el.css({ + left: left + "px", + top: parseInt(top) + "px" + }); + }; + + Hover.prototype.show = function() { + return this.el.show(); + }; + + Hover.prototype.hide = function() { + return this.el.hide(); + }; + + return Hover; + + })(); + + Morris.Line = (function(_super) { + __extends(Line, _super); + + function Line(options) { + this.hilight = __bind(this.hilight, this); + this.onHoverOut = __bind(this.onHoverOut, this); + this.onHoverMove = __bind(this.onHoverMove, this); + this.onGridClick = __bind(this.onGridClick, this); + if (!(this instanceof Morris.Line)) { + return new Morris.Line(options); + } + Line.__super__.constructor.call(this, options); + } + + Line.prototype.init = function() { + if (this.options.hideHover !== 'always') { + this.hover = new Morris.Hover({ + parent: this.el + }); + this.on('hovermove', this.onHoverMove); + this.on('hoverout', this.onHoverOut); + return this.on('gridclick', this.onGridClick); + } + }; + + Line.prototype.defaults = { + lineWidth: 3, + pointSize: 4, + lineColors: ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'], + pointStrokeWidths: [1], + pointStrokeColors: ['#ffffff'], + pointFillColors: [], + smooth: true, + xLabels: 'auto', + xLabelFormat: null, + xLabelMargin: 24, + hideHover: false + }; + + Line.prototype.calc = function() { + this.calcPoints(); + return this.generatePaths(); + }; + + Line.prototype.calcPoints = function() { + var row, y, _i, _len, _ref, _results; + _ref = this.data; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + row = _ref[_i]; + row._x = this.transX(row.x); + row._y = (function() { + var _j, _len1, _ref1, _results1; + _ref1 = row.y; + _results1 = []; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + y = _ref1[_j]; + if (y != null) { + _results1.push(this.transY(y)); + } else { + _results1.push(y); + } + } + return _results1; + }).call(this); + _results.push(row._ymax = Math.min.apply(Math, [this.bottom].concat((function() { + var _j, _len1, _ref1, _results1; + _ref1 = row._y; + _results1 = []; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + y = _ref1[_j]; + if (y != null) { + _results1.push(y); + } + } + return _results1; + })()))); + } + return _results; + }; + + Line.prototype.hitTest = function(x) { + var index, r, _i, _len, _ref; + if (this.data.length === 0) { + return null; + } + _ref = this.data.slice(1); + for (index = _i = 0, _len = _ref.length; _i < _len; index = ++_i) { + r = _ref[index]; + if (x < (r._x + this.data[index]._x) / 2) { + break; + } + } + return index; + }; + + Line.prototype.onGridClick = function(x, y) { + var index; + index = this.hitTest(x); + return this.fire('click', index, this.data[index].src, x, y); + }; + + Line.prototype.onHoverMove = function(x, y) { + var index; + index = this.hitTest(x); + return this.displayHoverForRow(index); + }; + + Line.prototype.onHoverOut = function() { + if (this.options.hideHover !== false) { + return this.displayHoverForRow(null); + } + }; + + Line.prototype.displayHoverForRow = function(index) { + var _ref; + if (index != null) { + (_ref = this.hover).update.apply(_ref, this.hoverContentForRow(index)); + return this.hilight(index); + } else { + this.hover.hide(); + return this.hilight(); + } + }; + + Line.prototype.hoverContentForRow = function(index) { + var content, j, row, y, _i, _len, _ref; + row = this.data[index]; + content = "<div class='morris-hover-row-label'>" + row.label + "</div>"; + _ref = row.y; + for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) { + y = _ref[j]; + content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n " + this.options.labels[j] + ":\n " + (this.yLabelFormat(y)) + "\n</div>"; + } + if (typeof this.options.hoverCallback === 'function') { + content = this.options.hoverCallback(index, this.options, content, row.src); + } + return [content, row._x, row._ymax]; + }; + + Line.prototype.generatePaths = function() { + var coords, i, r, smooth; + return this.paths = (function() { + var _i, _ref, _ref1, _results; + _results = []; + for (i = _i = 0, _ref = this.options.ykeys.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) { + smooth = typeof this.options.smooth === "boolean" ? this.options.smooth : (_ref1 = this.options.ykeys[i], __indexOf.call(this.options.smooth, _ref1) >= 0); + coords = (function() { + var _j, _len, _ref2, _results1; + _ref2 = this.data; + _results1 = []; + for (_j = 0, _len = _ref2.length; _j < _len; _j++) { + r = _ref2[_j]; + if (r._y[i] !== void 0) { + _results1.push({ + x: r._x, + y: r._y[i] + }); + } + } + return _results1; + }).call(this); + if (coords.length > 1) { + _results.push(Morris.Line.createPath(coords, smooth, this.bottom)); + } else { + _results.push(null); + } + } + return _results; + }).call(this); + }; + + Line.prototype.draw = function() { + var _ref; + if ((_ref = this.options.axes) === true || _ref === 'both' || _ref === 'x') { + this.drawXAxis(); + } + this.drawSeries(); + if (this.options.hideHover === false) { + return this.displayHoverForRow(this.data.length - 1); + } + }; + + Line.prototype.drawXAxis = function() { + var drawLabel, l, labels, prevAngleMargin, prevLabelMargin, row, ypos, _i, _len, _results, + _this = this; + ypos = this.bottom + this.options.padding / 2; + prevLabelMargin = null; + prevAngleMargin = null; + drawLabel = function(labelText, xpos) { + var label, labelBox, margin, offset, textBox; + label = _this.drawXAxisLabel(_this.transX(xpos), ypos, labelText); + textBox = label.getBBox(); + label.transform("r" + (-_this.options.xLabelAngle)); + labelBox = label.getBBox(); + label.transform("t0," + (labelBox.height / 2) + "..."); + if (_this.options.xLabelAngle !== 0) { + offset = -0.5 * textBox.width * Math.cos(_this.options.xLabelAngle * Math.PI / 180.0); + label.transform("t" + offset + ",0..."); + } + labelBox = label.getBBox(); + if (((prevLabelMargin == null) || prevLabelMargin >= labelBox.x + labelBox.width || (prevAngleMargin != null) && prevAngleMargin >= labelBox.x) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < _this.el.width()) { + if (_this.options.xLabelAngle !== 0) { + margin = 1.25 * _this.options.gridTextSize / Math.sin(_this.options.xLabelAngle * Math.PI / 180.0); + prevAngleMargin = labelBox.x - margin; + } + return prevLabelMargin = labelBox.x - _this.options.xLabelMargin; + } else { + return label.remove(); + } + }; + if (this.options.parseTime) { + if (this.data.length === 1 && this.options.xLabels === 'auto') { + labels = [[this.data[0].label, this.data[0].x]]; + } else { + labels = Morris.labelSeries(this.xmin, this.xmax, this.width, this.options.xLabels, this.options.xLabelFormat); + } + } else { + labels = (function() { + var _i, _len, _ref, _results; + _ref = this.data; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + row = _ref[_i]; + _results.push([row.label, row.x]); + } + return _results; + }).call(this); + } + labels.reverse(); + _results = []; + for (_i = 0, _len = labels.length; _i < _len; _i++) { + l = labels[_i]; + _results.push(drawLabel(l[0], l[1])); + } + return _results; + }; + + Line.prototype.drawSeries = function() { + var i, _i, _j, _ref, _ref1, _results; + this.seriesPoints = []; + for (i = _i = _ref = this.options.ykeys.length - 1; _ref <= 0 ? _i <= 0 : _i >= 0; i = _ref <= 0 ? ++_i : --_i) { + this._drawLineFor(i); + } + _results = []; + for (i = _j = _ref1 = this.options.ykeys.length - 1; _ref1 <= 0 ? _j <= 0 : _j >= 0; i = _ref1 <= 0 ? ++_j : --_j) { + _results.push(this._drawPointFor(i)); + } + return _results; + }; + + Line.prototype._drawPointFor = function(index) { + var circle, row, _i, _len, _ref, _results; + this.seriesPoints[index] = []; + _ref = this.data; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + row = _ref[_i]; + circle = null; + if (row._y[index] != null) { + circle = this.drawLinePoint(row._x, row._y[index], this.colorFor(row, index, 'point'), index); + } + _results.push(this.seriesPoints[index].push(circle)); + } + return _results; + }; + + Line.prototype._drawLineFor = function(index) { + var path; + path = this.paths[index]; + if (path !== null) { + return this.drawLinePath(path, this.colorFor(null, index, 'line'), index); + } + }; + + Line.createPath = function(coords, smooth, bottom) { + var coord, g, grads, i, ix, lg, path, prevCoord, x1, x2, y1, y2, _i, _len; + path = ""; + if (smooth) { + grads = Morris.Line.gradients(coords); + } + prevCoord = { + y: null + }; + for (i = _i = 0, _len = coords.length; _i < _len; i = ++_i) { + coord = coords[i]; + if (coord.y != null) { + if (prevCoord.y != null) { + if (smooth) { + g = grads[i]; + lg = grads[i - 1]; + ix = (coord.x - prevCoord.x) / 4; + x1 = prevCoord.x + ix; + y1 = Math.min(bottom, prevCoord.y + ix * lg); + x2 = coord.x - ix; + y2 = Math.min(bottom, coord.y - ix * g); + path += "C" + x1 + "," + y1 + "," + x2 + "," + y2 + "," + coord.x + "," + coord.y; + } else { + path += "L" + coord.x + "," + coord.y; + } + } else { + if (!smooth || (grads[i] != null)) { + path += "M" + coord.x + "," + coord.y; + } + } + } + prevCoord = coord; + } + return path; + }; + + Line.gradients = function(coords) { + var coord, grad, i, nextCoord, prevCoord, _i, _len, _results; + grad = function(a, b) { + return (a.y - b.y) / (a.x - b.x); + }; + _results = []; + for (i = _i = 0, _len = coords.length; _i < _len; i = ++_i) { + coord = coords[i]; + if (coord.y != null) { + nextCoord = coords[i + 1] || { + y: null + }; + prevCoord = coords[i - 1] || { + y: null + }; + if ((prevCoord.y != null) && (nextCoord.y != null)) { + _results.push(grad(prevCoord, nextCoord)); + } else if (prevCoord.y != null) { + _results.push(grad(prevCoord, coord)); + } else if (nextCoord.y != null) { + _results.push(grad(coord, nextCoord)); + } else { + _results.push(null); + } + } else { + _results.push(null); + } + } + return _results; + }; + + Line.prototype.hilight = function(index) { + var i, _i, _j, _ref, _ref1; + if (this.prevHilight !== null && this.prevHilight !== index) { + for (i = _i = 0, _ref = this.seriesPoints.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { + if (this.seriesPoints[i][this.prevHilight]) { + this.seriesPoints[i][this.prevHilight].animate(this.pointShrinkSeries(i)); + } + } + } + if (index !== null && this.prevHilight !== index) { + for (i = _j = 0, _ref1 = this.seriesPoints.length - 1; 0 <= _ref1 ? _j <= _ref1 : _j >= _ref1; i = 0 <= _ref1 ? ++_j : --_j) { + if (this.seriesPoints[i][index]) { + this.seriesPoints[i][index].animate(this.pointGrowSeries(i)); + } + } + } + return this.prevHilight = index; + }; + + Line.prototype.colorFor = function(row, sidx, type) { + if (typeof this.options.lineColors === 'function') { + return this.options.lineColors.call(this, row, sidx, type); + } else if (type === 'point') { + return this.options.pointFillColors[sidx % this.options.pointFillColors.length] || this.options.lineColors[sidx % this.options.lineColors.length]; + } else { + return this.options.lineColors[sidx % this.options.lineColors.length]; + } + }; + + Line.prototype.drawXAxisLabel = function(xPos, yPos, text) { + return this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor); + }; + + Line.prototype.drawLinePath = function(path, lineColor, lineIndex) { + return this.raphael.path(path).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex)); + }; + + Line.prototype.drawLinePoint = function(xPos, yPos, pointColor, lineIndex) { + return this.raphael.circle(xPos, yPos, this.pointSizeForSeries(lineIndex)).attr('fill', pointColor).attr('stroke-width', this.pointStrokeWidthForSeries(lineIndex)).attr('stroke', this.pointStrokeColorForSeries(lineIndex)); + }; + + Line.prototype.pointStrokeWidthForSeries = function(index) { + return this.options.pointStrokeWidths[index % this.options.pointStrokeWidths.length]; + }; + + Line.prototype.pointStrokeColorForSeries = function(index) { + return this.options.pointStrokeColors[index % this.options.pointStrokeColors.length]; + }; + + Line.prototype.lineWidthForSeries = function(index) { + if (this.options.lineWidth instanceof Array) { + return this.options.lineWidth[index % this.options.lineWidth.length]; + } else { + return this.options.lineWidth; + } + }; + + Line.prototype.pointSizeForSeries = function(index) { + if (this.options.pointSize instanceof Array) { + return this.options.pointSize[index % this.options.pointSize.length]; + } else { + return this.options.pointSize; + } + }; + + Line.prototype.pointGrowSeries = function(index) { + return Raphael.animation({ + r: this.pointSizeForSeries(index) + 3 + }, 25, 'linear'); + }; + + Line.prototype.pointShrinkSeries = function(index) { + return Raphael.animation({ + r: this.pointSizeForSeries(index) + }, 25, 'linear'); + }; + + return Line; + + })(Morris.Grid); + + Morris.labelSeries = function(dmin, dmax, pxwidth, specName, xLabelFormat) { + var d, d0, ddensity, name, ret, s, spec, t, _i, _len, _ref; + ddensity = 200 * (dmax - dmin) / pxwidth; + d0 = new Date(dmin); + spec = Morris.LABEL_SPECS[specName]; + if (spec === void 0) { + _ref = Morris.AUTO_LABEL_ORDER; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + name = _ref[_i]; + s = Morris.LABEL_SPECS[name]; + if (ddensity >= s.span) { + spec = s; + break; + } + } + } + if (spec === void 0) { + spec = Morris.LABEL_SPECS["second"]; + } + if (xLabelFormat) { + spec = $.extend({}, spec, { + fmt: xLabelFormat + }); + } + d = spec.start(d0); + ret = []; + while ((t = d.getTime()) <= dmax) { + if (t >= dmin) { + ret.push([spec.fmt(d), t]); + } + spec.incr(d); + } + return ret; + }; + + minutesSpecHelper = function(interval) { + return { + span: interval * 60 * 1000, + start: function(d) { + return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours()); + }, + fmt: function(d) { + return "" + (Morris.pad2(d.getHours())) + ":" + (Morris.pad2(d.getMinutes())); + }, + incr: function(d) { + return d.setUTCMinutes(d.getUTCMinutes() + interval); + } + }; + }; + + secondsSpecHelper = function(interval) { + return { + span: interval * 1000, + start: function(d) { + return new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()); + }, + fmt: function(d) { + return "" + (Morris.pad2(d.getHours())) + ":" + (Morris.pad2(d.getMinutes())) + ":" + (Morris.pad2(d.getSeconds())); + }, + incr: function(d) { + return d.setUTCSeconds(d.getUTCSeconds() + interval); + } + }; + }; + + Morris.LABEL_SPECS = { + "decade": { + span: 172800000000, + start: function(d) { + return new Date(d.getFullYear() - d.getFullYear() % 10, 0, 1); + }, + fmt: function(d) { + return "" + (d.getFullYear()); + }, + incr: function(d) { + return d.setFullYear(d.getFullYear() + 10); + } + }, + "year": { + span: 17280000000, + start: function(d) { + return new Date(d.getFullYear(), 0, 1); + }, + fmt: function(d) { + return "" + (d.getFullYear()); + }, + incr: function(d) { + return d.setFullYear(d.getFullYear() + 1); + } + }, + "month": { + span: 2419200000, + start: function(d) { + return new Date(d.getFullYear(), d.getMonth(), 1); + }, + fmt: function(d) { + return "" + (d.getFullYear()) + "-" + (Morris.pad2(d.getMonth() + 1)); + }, + incr: function(d) { + return d.setMonth(d.getMonth() + 1); + } + }, + "week": { + span: 604800000, + start: function(d) { + return new Date(d.getFullYear(), d.getMonth(), d.getDate()); + }, + fmt: function(d) { + return "" + (d.getFullYear()) + "-" + (Morris.pad2(d.getMonth() + 1)) + "-" + (Morris.pad2(d.getDate())); + }, + incr: function(d) { + return d.setDate(d.getDate() + 7); + } + }, + "day": { + span: 86400000, + start: function(d) { + return new Date(d.getFullYear(), d.getMonth(), d.getDate()); + }, + fmt: function(d) { + return "" + (d.getFullYear()) + "-" + (Morris.pad2(d.getMonth() + 1)) + "-" + (Morris.pad2(d.getDate())); + }, + incr: function(d) { + return d.setDate(d.getDate() + 1); + } + }, + "hour": minutesSpecHelper(60), + "30min": minutesSpecHelper(30), + "15min": minutesSpecHelper(15), + "10min": minutesSpecHelper(10), + "5min": minutesSpecHelper(5), + "minute": minutesSpecHelper(1), + "30sec": secondsSpecHelper(30), + "15sec": secondsSpecHelper(15), + "10sec": secondsSpecHelper(10), + "5sec": secondsSpecHelper(5), + "second": secondsSpecHelper(1) + }; + + Morris.AUTO_LABEL_ORDER = ["decade", "year", "month", "week", "day", "hour", "30min", "15min", "10min", "5min", "minute", "30sec", "15sec", "10sec", "5sec", "second"]; + + Morris.Area = (function(_super) { + var areaDefaults; + + __extends(Area, _super); + + areaDefaults = { + fillOpacity: 'auto', + behaveLikeLine: false + }; + + function Area(options) { + var areaOptions; + if (!(this instanceof Morris.Area)) { + return new Morris.Area(options); + } + areaOptions = $.extend({}, areaDefaults, options); + this.cumulative = !areaOptions.behaveLikeLine; + if (areaOptions.fillOpacity === 'auto') { + areaOptions.fillOpacity = areaOptions.behaveLikeLine ? .8 : 1; + } + Area.__super__.constructor.call(this, areaOptions); + } + + Area.prototype.calcPoints = function() { + var row, total, y, _i, _len, _ref, _results; + _ref = this.data; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + row = _ref[_i]; + row._x = this.transX(row.x); + total = 0; + row._y = (function() { + var _j, _len1, _ref1, _results1; + _ref1 = row.y; + _results1 = []; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + y = _ref1[_j]; + if (this.options.behaveLikeLine) { + _results1.push(this.transY(y)); + } else { + total += y || 0; + _results1.push(this.transY(total)); + } + } + return _results1; + }).call(this); + _results.push(row._ymax = Math.max.apply(Math, row._y)); + } + return _results; + }; + + Area.prototype.drawSeries = function() { + var i, range, _i, _j, _k, _len, _ref, _ref1, _results, _results1, _results2; + this.seriesPoints = []; + if (this.options.behaveLikeLine) { + range = (function() { + _results = []; + for (var _i = 0, _ref = this.options.ykeys.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; 0 <= _ref ? _i++ : _i--){ _results.push(_i); } + return _results; + }).apply(this); + } else { + range = (function() { + _results1 = []; + for (var _j = _ref1 = this.options.ykeys.length - 1; _ref1 <= 0 ? _j <= 0 : _j >= 0; _ref1 <= 0 ? _j++ : _j--){ _results1.push(_j); } + return _results1; + }).apply(this); + } + _results2 = []; + for (_k = 0, _len = range.length; _k < _len; _k++) { + i = range[_k]; + this._drawFillFor(i); + this._drawLineFor(i); + _results2.push(this._drawPointFor(i)); + } + return _results2; + }; + + Area.prototype._drawFillFor = function(index) { + var path; + path = this.paths[index]; + if (path !== null) { + path = path + ("L" + (this.transX(this.xmax)) + "," + this.bottom + "L" + (this.transX(this.xmin)) + "," + this.bottom + "Z"); + return this.drawFilledPath(path, this.fillForSeries(index)); + } + }; + + Area.prototype.fillForSeries = function(i) { + var color; + color = Raphael.rgb2hsl(this.colorFor(this.data[i], i, 'line')); + return Raphael.hsl(color.h, this.options.behaveLikeLine ? color.s * 0.9 : color.s * 0.75, Math.min(0.98, this.options.behaveLikeLine ? color.l * 1.2 : color.l * 1.25)); + }; + + Area.prototype.drawFilledPath = function(path, fill) { + return this.raphael.path(path).attr('fill', fill).attr('fill-opacity', this.options.fillOpacity).attr('stroke', 'none'); + }; + + return Area; + + })(Morris.Line); + + Morris.Bar = (function(_super) { + __extends(Bar, _super); + + function Bar(options) { + this.onHoverOut = __bind(this.onHoverOut, this); + this.onHoverMove = __bind(this.onHoverMove, this); + this.onGridClick = __bind(this.onGridClick, this); + if (!(this instanceof Morris.Bar)) { + return new Morris.Bar(options); + } + Bar.__super__.constructor.call(this, $.extend({}, options, { + parseTime: false + })); + } + + Bar.prototype.init = function() { + this.cumulative = this.options.stacked; + if (this.options.hideHover !== 'always') { + this.hover = new Morris.Hover({ + parent: this.el + }); + this.on('hovermove', this.onHoverMove); + this.on('hoverout', this.onHoverOut); + return this.on('gridclick', this.onGridClick); + } + }; + + Bar.prototype.defaults = { + barSizeRatio: 0.75, + barGap: 3, + barColors: ['#0b62a4', '#7a92a3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed'], + barOpacity: 1.0, + barRadius: [0, 0, 0, 0], + xLabelMargin: 50 + }; + + Bar.prototype.calc = function() { + var _ref; + this.calcBars(); + if (this.options.hideHover === false) { + return (_ref = this.hover).update.apply(_ref, this.hoverContentForRow(this.data.length - 1)); + } + }; + + Bar.prototype.calcBars = function() { + var idx, row, y, _i, _len, _ref, _results; + _ref = this.data; + _results = []; + for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) { + row = _ref[idx]; + row._x = this.left + this.width * (idx + 0.5) / this.data.length; + _results.push(row._y = (function() { + var _j, _len1, _ref1, _results1; + _ref1 = row.y; + _results1 = []; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + y = _ref1[_j]; + if (y != null) { + _results1.push(this.transY(y)); + } else { + _results1.push(null); + } + } + return _results1; + }).call(this)); + } + return _results; + }; + + Bar.prototype.draw = function() { + var _ref; + if ((_ref = this.options.axes) === true || _ref === 'both' || _ref === 'x') { + this.drawXAxis(); + } + return this.drawSeries(); + }; + + Bar.prototype.drawXAxis = function() { + var i, label, labelBox, margin, offset, prevAngleMargin, prevLabelMargin, row, textBox, ypos, _i, _ref, _results; + ypos = this.bottom + (this.options.xAxisLabelTopPadding || this.options.padding / 2); + prevLabelMargin = null; + prevAngleMargin = null; + _results = []; + for (i = _i = 0, _ref = this.data.length; 0 <= _ref ? _i < _ref : _i > _ref; i = 0 <= _ref ? ++_i : --_i) { + row = this.data[this.data.length - 1 - i]; + label = this.drawXAxisLabel(row._x, ypos, row.label); + textBox = label.getBBox(); + label.transform("r" + (-this.options.xLabelAngle)); + labelBox = label.getBBox(); + label.transform("t0," + (labelBox.height / 2) + "..."); + if (this.options.xLabelAngle !== 0) { + offset = -0.5 * textBox.width * Math.cos(this.options.xLabelAngle * Math.PI / 180.0); + label.transform("t" + offset + ",0..."); + } + if (((prevLabelMargin == null) || prevLabelMargin >= labelBox.x + labelBox.width || (prevAngleMargin != null) && prevAngleMargin >= labelBox.x) && labelBox.x >= 0 && (labelBox.x + labelBox.width) < this.el.width()) { + if (this.options.xLabelAngle !== 0) { + margin = 1.25 * this.options.gridTextSize / Math.sin(this.options.xLabelAngle * Math.PI / 180.0); + prevAngleMargin = labelBox.x - margin; + } + _results.push(prevLabelMargin = labelBox.x - this.options.xLabelMargin); + } else { + _results.push(label.remove()); + } + } + return _results; + }; + + Bar.prototype.drawSeries = function() { + var barWidth, bottom, groupWidth, idx, lastTop, left, leftPadding, numBars, row, sidx, size, spaceLeft, top, ypos, zeroPos; + groupWidth = this.width / this.options.data.length; + numBars = this.options.stacked ? 1 : this.options.ykeys.length; + barWidth = (groupWidth * this.options.barSizeRatio - this.options.barGap * (numBars - 1)) / numBars; + if (this.options.barSize) { + barWidth = Math.min(barWidth, this.options.barSize); + } + spaceLeft = groupWidth - barWidth * numBars - this.options.barGap * (numBars - 1); + leftPadding = spaceLeft / 2; + zeroPos = this.ymin <= 0 && this.ymax >= 0 ? this.transY(0) : null; + return this.bars = (function() { + var _i, _len, _ref, _results; + _ref = this.data; + _results = []; + for (idx = _i = 0, _len = _ref.length; _i < _len; idx = ++_i) { + row = _ref[idx]; + lastTop = 0; + _results.push((function() { + var _j, _len1, _ref1, _results1; + _ref1 = row._y; + _results1 = []; + for (sidx = _j = 0, _len1 = _ref1.length; _j < _len1; sidx = ++_j) { + ypos = _ref1[sidx]; + if (ypos !== null) { + if (zeroPos) { + top = Math.min(ypos, zeroPos); + bottom = Math.max(ypos, zeroPos); + } else { + top = ypos; + bottom = this.bottom; + } + left = this.left + idx * groupWidth + leftPadding; + if (!this.options.stacked) { + left += sidx * (barWidth + this.options.barGap); + } + size = bottom - top; + if (this.options.verticalGridCondition && this.options.verticalGridCondition(row.x)) { + this.drawBar(this.left + idx * groupWidth, this.top, groupWidth, Math.abs(this.top - this.bottom), this.options.verticalGridColor, this.options.verticalGridOpacity, this.options.barRadius); + } + if (this.options.stacked) { + top -= lastTop; + } + this.drawBar(left, top, barWidth, size, this.colorFor(row, sidx, 'bar'), this.options.barOpacity, this.options.barRadius); + _results1.push(lastTop += size); + } else { + _results1.push(null); + } + } + return _results1; + }).call(this)); + } + return _results; + }).call(this); + }; + + Bar.prototype.colorFor = function(row, sidx, type) { + var r, s; + if (typeof this.options.barColors === 'function') { + r = { + x: row.x, + y: row.y[sidx], + label: row.label + }; + s = { + index: sidx, + key: this.options.ykeys[sidx], + label: this.options.labels[sidx] + }; + return this.options.barColors.call(this, r, s, type); + } else { + return this.options.barColors[sidx % this.options.barColors.length]; + } + }; + + Bar.prototype.hitTest = function(x) { + if (this.data.length === 0) { + return null; + } + x = Math.max(Math.min(x, this.right), this.left); + return Math.min(this.data.length - 1, Math.floor((x - this.left) / (this.width / this.data.length))); + }; + + Bar.prototype.onGridClick = function(x, y) { + var index; + index = this.hitTest(x); + return this.fire('click', index, this.data[index].src, x, y); + }; + + Bar.prototype.onHoverMove = function(x, y) { + var index, _ref; + index = this.hitTest(x); + return (_ref = this.hover).update.apply(_ref, this.hoverContentForRow(index)); + }; + + Bar.prototype.onHoverOut = function() { + if (this.options.hideHover !== false) { + return this.hover.hide(); + } + }; + + Bar.prototype.hoverContentForRow = function(index) { + var content, j, row, x, y, _i, _len, _ref; + row = this.data[index]; + content = "<div class='morris-hover-row-label'>" + row.label + "</div>"; + _ref = row.y; + for (j = _i = 0, _len = _ref.length; _i < _len; j = ++_i) { + y = _ref[j]; + content += "<div class='morris-hover-point' style='color: " + (this.colorFor(row, j, 'label')) + "'>\n " + this.options.labels[j] + ":\n " + (this.yLabelFormat(y)) + "\n</div>"; + } + if (typeof this.options.hoverCallback === 'function') { + content = this.options.hoverCallback(index, this.options, content, row.src); + } + x = this.left + (index + 0.5) * this.width / this.data.length; + return [content, x]; + }; + + Bar.prototype.drawXAxisLabel = function(xPos, yPos, text) { + var label; + return label = this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor); + }; + + Bar.prototype.drawBar = function(xPos, yPos, width, height, barColor, opacity, radiusArray) { + var maxRadius, path; + maxRadius = Math.max.apply(Math, radiusArray); + if (maxRadius === 0 || maxRadius > height) { + path = this.raphael.rect(xPos, yPos, width, height); + } else { + path = this.raphael.path(this.roundedRect(xPos, yPos, width, height, radiusArray)); + } + return path.attr('fill', barColor).attr('fill-opacity', opacity).attr('stroke', 'none'); + }; + + Bar.prototype.roundedRect = function(x, y, w, h, r) { + if (r == null) { + r = [0, 0, 0, 0]; + } + return ["M", x, r[0] + y, "Q", x, y, x + r[0], y, "L", x + w - r[1], y, "Q", x + w, y, x + w, y + r[1], "L", x + w, y + h - r[2], "Q", x + w, y + h, x + w - r[2], y + h, "L", x + r[3], y + h, "Q", x, y + h, x, y + h - r[3], "Z"]; + }; + + return Bar; + + })(Morris.Grid); + + Morris.Donut = (function(_super) { + __extends(Donut, _super); + + Donut.prototype.defaults = { + colors: ['#0B62A4', '#3980B5', '#679DC6', '#95BBD7', '#B0CCE1', '#095791', '#095085', '#083E67', '#052C48', '#042135'], + backgroundColor: '#FFFFFF', + labelColor: '#000000', + formatter: Morris.commas, + resize: false + }; + + function Donut(options) { + this.resizeHandler = __bind(this.resizeHandler, this); + this.select = __bind(this.select, this); + this.click = __bind(this.click, this); + var _this = this; + if (!(this instanceof Morris.Donut)) { + return new Morris.Donut(options); + } + this.options = $.extend({}, this.defaults, options); + if (typeof options.element === 'string') { + this.el = $(document.getElementById(options.element)); + } else { + this.el = $(options.element); + } + if (this.el === null || this.el.length === 0) { + throw new Error("Graph placeholder not found."); + } + if (options.data === void 0 || options.data.length === 0) { + return; + } + this.raphael = new Raphael(this.el[0]); + if (this.options.resize) { + $(window).bind('resize', function(evt) { + if (_this.timeoutId != null) { + window.clearTimeout(_this.timeoutId); + } + return _this.timeoutId = window.setTimeout(_this.resizeHandler, 100); + }); + } + this.setData(options.data); + } + + Donut.prototype.redraw = function() { + var C, cx, cy, i, idx, last, max_value, min, next, seg, total, value, w, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results; + this.raphael.clear(); + cx = this.el.width() / 2; + cy = this.el.height() / 2; + w = (Math.min(cx, cy) - 10) / 3; + total = 0; + _ref = this.values; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + value = _ref[_i]; + total += value; + } + min = 5 / (2 * w); + C = 1.9999 * Math.PI - min * this.data.length; + last = 0; + idx = 0; + this.segments = []; + _ref1 = this.values; + for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) { + value = _ref1[i]; + next = last + min + C * (value / total); + seg = new Morris.DonutSegment(cx, cy, w * 2, w, last, next, this.data[i].color || this.options.colors[idx % this.options.colors.length], this.options.backgroundColor, idx, this.raphael); + seg.render(); + this.segments.push(seg); + seg.on('hover', this.select); + seg.on('click', this.click); + last = next; + idx += 1; + } + this.text1 = this.drawEmptyDonutLabel(cx, cy - 10, this.options.labelColor, 15, 800); + this.text2 = this.drawEmptyDonutLabel(cx, cy + 10, this.options.labelColor, 14); + max_value = Math.max.apply(Math, this.values); + idx = 0; + _ref2 = this.values; + _results = []; + for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) { + value = _ref2[_k]; + if (value === max_value) { + this.select(idx); + break; + } + _results.push(idx += 1); + } + return _results; + }; + + Donut.prototype.setData = function(data) { + var row; + this.data = data; + this.values = (function() { + var _i, _len, _ref, _results; + _ref = this.data; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + row = _ref[_i]; + _results.push(parseFloat(row.value)); + } + return _results; + }).call(this); + return this.redraw(); + }; + + Donut.prototype.click = function(idx) { + return this.fire('click', idx, this.data[idx]); + }; + + Donut.prototype.select = function(idx) { + var row, s, segment, _i, _len, _ref; + _ref = this.segments; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + s = _ref[_i]; + s.deselect(); + } + segment = this.segments[idx]; + segment.select(); + row = this.data[idx]; + return this.setLabels(row.label, this.options.formatter(row.value, row)); + }; + + Donut.prototype.setLabels = function(label1, label2) { + var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale; + inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3; + maxWidth = 1.8 * inner; + maxHeightTop = inner / 2; + maxHeightBottom = inner / 3; + this.text1.attr({ + text: label1, + transform: '' + }); + text1bbox = this.text1.getBBox(); + text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height); + this.text1.attr({ + transform: "S" + text1scale + "," + text1scale + "," + (text1bbox.x + text1bbox.width / 2) + "," + (text1bbox.y + text1bbox.height) + }); + this.text2.attr({ + text: label2, + transform: '' + }); + text2bbox = this.text2.getBBox(); + text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height); + return this.text2.attr({ + transform: "S" + text2scale + "," + text2scale + "," + (text2bbox.x + text2bbox.width / 2) + "," + text2bbox.y + }); + }; + + Donut.prototype.drawEmptyDonutLabel = function(xPos, yPos, color, fontSize, fontWeight) { + var text; + text = this.raphael.text(xPos, yPos, '').attr('font-size', fontSize).attr('fill', color); + if (fontWeight != null) { + text.attr('font-weight', fontWeight); + } + return text; + }; + + Donut.prototype.resizeHandler = function() { + this.timeoutId = null; + this.raphael.setSize(this.el.width(), this.el.height()); + return this.redraw(); + }; + + return Donut; + + })(Morris.EventEmitter); + + Morris.DonutSegment = (function(_super) { + __extends(DonutSegment, _super); + + function DonutSegment(cx, cy, inner, outer, p0, p1, color, backgroundColor, index, raphael) { + this.cx = cx; + this.cy = cy; + this.inner = inner; + this.outer = outer; + this.color = color; + this.backgroundColor = backgroundColor; + this.index = index; + this.raphael = raphael; + this.deselect = __bind(this.deselect, this); + this.select = __bind(this.select, this); + this.sin_p0 = Math.sin(p0); + this.cos_p0 = Math.cos(p0); + this.sin_p1 = Math.sin(p1); + this.cos_p1 = Math.cos(p1); + this.is_long = (p1 - p0) > Math.PI ? 1 : 0; + this.path = this.calcSegment(this.inner + 3, this.inner + this.outer - 5); + this.selectedPath = this.calcSegment(this.inner + 3, this.inner + this.outer); + this.hilight = this.calcArc(this.inner); + } + + DonutSegment.prototype.calcArcPoints = function(r) { + return [this.cx + r * this.sin_p0, this.cy + r * this.cos_p0, this.cx + r * this.sin_p1, this.cy + r * this.cos_p1]; + }; + + DonutSegment.prototype.calcSegment = function(r1, r2) { + var ix0, ix1, iy0, iy1, ox0, ox1, oy0, oy1, _ref, _ref1; + _ref = this.calcArcPoints(r1), ix0 = _ref[0], iy0 = _ref[1], ix1 = _ref[2], iy1 = _ref[3]; + _ref1 = this.calcArcPoints(r2), ox0 = _ref1[0], oy0 = _ref1[1], ox1 = _ref1[2], oy1 = _ref1[3]; + return ("M" + ix0 + "," + iy0) + ("A" + r1 + "," + r1 + ",0," + this.is_long + ",0," + ix1 + "," + iy1) + ("L" + ox1 + "," + oy1) + ("A" + r2 + "," + r2 + ",0," + this.is_long + ",1," + ox0 + "," + oy0) + "Z"; + }; + + DonutSegment.prototype.calcArc = function(r) { + var ix0, ix1, iy0, iy1, _ref; + _ref = this.calcArcPoints(r), ix0 = _ref[0], iy0 = _ref[1], ix1 = _ref[2], iy1 = _ref[3]; + return ("M" + ix0 + "," + iy0) + ("A" + r + "," + r + ",0," + this.is_long + ",0," + ix1 + "," + iy1); + }; + + DonutSegment.prototype.render = function() { + var _this = this; + this.arc = this.drawDonutArc(this.hilight, this.color); + return this.seg = this.drawDonutSegment(this.path, this.color, this.backgroundColor, function() { + return _this.fire('hover', _this.index); + }, function() { + return _this.fire('click', _this.index); + }); + }; + + DonutSegment.prototype.drawDonutArc = function(path, color) { + return this.raphael.path(path).attr({ + stroke: color, + 'stroke-width': 2, + opacity: 0 + }); + }; + + DonutSegment.prototype.drawDonutSegment = function(path, fillColor, strokeColor, hoverFunction, clickFunction) { + return this.raphael.path(path).attr({ + fill: fillColor, + stroke: strokeColor, + 'stroke-width': 3 + }).hover(hoverFunction).click(clickFunction); + }; + + DonutSegment.prototype.select = function() { + if (!this.selected) { + this.seg.animate({ + path: this.selectedPath + }, 150, '<>'); + this.arc.animate({ + opacity: 1 + }, 150, '<>'); + return this.selected = true; + } + }; + + DonutSegment.prototype.deselect = function() { + if (this.selected) { + this.seg.animate({ + path: this.path + }, 150, '<>'); + this.arc.animate({ + opacity: 0 + }, 150, '<>'); + return this.selected = false; + } + }; + + return DonutSegment; + + })(Morris.EventEmitter); + +}).call(this); diff --git a/debian/source/lintian-overrides b/debian/source/lintian-overrides new file mode 100644 index 00000000..cc896d9f --- /dev/null +++ b/debian/source/lintian-overrides @@ -0,0 +1,3 @@ +# Source exists in missing-sources as gauge.coffee. It is transpliced into +# javascript before being minimized +netdata source: source-is-missing web/lib/gauge.min.js |