Add dashboard
This commit is contained in:
25
assets/javascripts/application.coffee
Normal file
25
assets/javascripts/application.coffee
Normal file
@@ -0,0 +1,25 @@
|
||||
# dashing.js is located in the dashing framework
|
||||
# It includes jquery & batman for you.
|
||||
#= require dashing.js
|
||||
|
||||
#= require_directory .
|
||||
#= require_tree ../../widgets
|
||||
|
||||
console.log("Yeah! The dashboard has started!")
|
||||
|
||||
Dashing.on 'ready', ->
|
||||
Dashing.widget_margins ||= [10, 10]
|
||||
Dashing.widget_base_dimensions ||= [300, 360]
|
||||
Dashing.numColumns ||= 4
|
||||
|
||||
contentWidth = (Dashing.widget_base_dimensions[0] + Dashing.widget_margins[0] * 2) * Dashing.numColumns - (Dashing.widget_margins[0] * 4)
|
||||
|
||||
Batman.setImmediate ->
|
||||
$('.gridster').width(contentWidth)
|
||||
$('.gridster ul:first').gridster
|
||||
widget_margins: Dashing.widget_margins
|
||||
widget_base_dimensions: Dashing.widget_base_dimensions
|
||||
avoid_overlapped_widgets: !Dashing.customGridsterLayout
|
||||
draggable:
|
||||
stop: Dashing.showGridsterInstructions
|
||||
start: -> Dashing.currentWidgetPositions = Dashing.getWidgetPositions()
|
||||
5
assets/javascripts/d3-3.2.8.js
Normal file
5
assets/javascripts/d3-3.2.8.js
Normal file
File diff suppressed because one or more lines are too long
37
assets/javascripts/dashing.gridster.coffee
Normal file
37
assets/javascripts/dashing.gridster.coffee
Normal file
@@ -0,0 +1,37 @@
|
||||
#= require_directory ./gridster
|
||||
|
||||
# This file enables gridster integration (http://gridster.net/)
|
||||
# Delete it if you'd rather handle the layout yourself.
|
||||
# You'll miss out on a lot if you do, but we won't hold it against you.
|
||||
|
||||
Dashing.gridsterLayout = (positions) ->
|
||||
Dashing.customGridsterLayout = true
|
||||
positions = positions.replace(/^"|"$/g, '')
|
||||
positions = $.parseJSON(positions)
|
||||
widgets = $("[data-row^=]")
|
||||
for widget, index in widgets
|
||||
$(widget).attr('data-row', positions[index].row)
|
||||
$(widget).attr('data-col', positions[index].col)
|
||||
|
||||
Dashing.getWidgetPositions = ->
|
||||
$(".gridster ul:first").gridster().data('gridster').serialize()
|
||||
|
||||
Dashing.showGridsterInstructions = ->
|
||||
newWidgetPositions = Dashing.getWidgetPositions()
|
||||
|
||||
unless JSON.stringify(newWidgetPositions) == JSON.stringify(Dashing.currentWidgetPositions)
|
||||
Dashing.currentWidgetPositions = newWidgetPositions
|
||||
$('#save-gridster').slideDown()
|
||||
$('#gridster-code').text("
|
||||
<script type='text/javascript'>\n
|
||||
$(function() {\n
|
||||
\ \ Dashing.gridsterLayout('#{JSON.stringify(Dashing.currentWidgetPositions)}')\n
|
||||
});\n
|
||||
</script>
|
||||
")
|
||||
|
||||
$ ->
|
||||
$('#save-gridster').leanModal()
|
||||
|
||||
$('#save-gridster').click ->
|
||||
$('#save-gridster').slideUp()
|
||||
2
assets/javascripts/gridster/jquery.gridster.min.js
vendored
Normal file
2
assets/javascripts/gridster/jquery.gridster.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
assets/javascripts/gridster/jquery.leanModal.min.js
vendored
Normal file
5
assets/javascripts/gridster/jquery.leanModal.min.js
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
// leanModal v1.1 by Ray Stone - http://finelysliced.com.au
|
||||
// Dual licensed under the MIT and GPL
|
||||
|
||||
(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("<div id='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth();
|
||||
$("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})}}})})(jQuery);
|
||||
646
assets/javascripts/jquery.knob.js
Normal file
646
assets/javascripts/jquery.knob.js
Normal file
@@ -0,0 +1,646 @@
|
||||
/*!jQuery Knob*/
|
||||
/**
|
||||
* Downward compatible, touchable dial
|
||||
*
|
||||
* Version: 1.2.0 (15/07/2012)
|
||||
* Requires: jQuery v1.7+
|
||||
*
|
||||
* Copyright (c) 2012 Anthony Terrien
|
||||
* Under MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* Thanks to vor, eskimoblood, spiffistan, FabrizioC
|
||||
*/
|
||||
$(function () {
|
||||
|
||||
/**
|
||||
* Kontrol library
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Definition of globals and core
|
||||
*/
|
||||
var k = {}, // kontrol
|
||||
max = Math.max,
|
||||
min = Math.min;
|
||||
|
||||
k.c = {};
|
||||
k.c.d = $(document);
|
||||
k.c.t = function (e) {
|
||||
return e.originalEvent.touches.length - 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Kontrol Object
|
||||
*
|
||||
* Definition of an abstract UI control
|
||||
*
|
||||
* Each concrete component must call this one.
|
||||
* <code>
|
||||
* k.o.call(this);
|
||||
* </code>
|
||||
*/
|
||||
k.o = function () {
|
||||
var s = this;
|
||||
|
||||
this.o = null; // array of options
|
||||
this.$ = null; // jQuery wrapped element
|
||||
this.i = null; // mixed HTMLInputElement or array of HTMLInputElement
|
||||
this.g = null; // 2D graphics context for 'pre-rendering'
|
||||
this.v = null; // value ; mixed array or integer
|
||||
this.cv = null; // change value ; not commited value
|
||||
this.x = 0; // canvas x position
|
||||
this.y = 0; // canvas y position
|
||||
this.$c = null; // jQuery canvas element
|
||||
this.c = null; // rendered canvas context
|
||||
this.t = 0; // touches index
|
||||
this.isInit = false;
|
||||
this.fgColor = null; // main color
|
||||
this.pColor = null; // previous color
|
||||
this.dH = null; // draw hook
|
||||
this.cH = null; // change hook
|
||||
this.eH = null; // cancel hook
|
||||
this.rH = null; // release hook
|
||||
|
||||
this.run = function () {
|
||||
var cf = function (e, conf) {
|
||||
var k;
|
||||
for (k in conf) {
|
||||
s.o[k] = conf[k];
|
||||
}
|
||||
s.init();
|
||||
s._configure()
|
||||
._draw();
|
||||
};
|
||||
|
||||
if(this.$.data('kontroled')) return;
|
||||
this.$.data('kontroled', true);
|
||||
|
||||
this.extend();
|
||||
this.o = $.extend(
|
||||
{
|
||||
// Config
|
||||
min : this.$.data('min') || 0,
|
||||
max : this.$.data('max') || 100,
|
||||
stopper : true,
|
||||
readOnly : this.$.data('readonly'),
|
||||
|
||||
// UI
|
||||
cursor : (this.$.data('cursor') === true && 30)
|
||||
|| this.$.data('cursor')
|
||||
|| 0,
|
||||
thickness : this.$.data('thickness') || 0.35,
|
||||
width : this.$.data('width') || 200,
|
||||
height : this.$.data('height') || 200,
|
||||
displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'),
|
||||
displayPrevious : this.$.data('displayprevious'),
|
||||
fgColor : this.$.data('fgcolor') || '#87CEEB',
|
||||
inline : false,
|
||||
|
||||
// Hooks
|
||||
draw : null, // function () {}
|
||||
change : null, // function (value) {}
|
||||
cancel : null, // function () {}
|
||||
release : null // function (value) {}
|
||||
}, this.o
|
||||
);
|
||||
|
||||
// routing value
|
||||
if(this.$.is('fieldset')) {
|
||||
|
||||
// fieldset = array of integer
|
||||
this.v = {};
|
||||
this.i = this.$.find('input')
|
||||
this.i.each(function(k) {
|
||||
var $this = $(this);
|
||||
s.i[k] = $this;
|
||||
s.v[k] = $this.val();
|
||||
|
||||
$this.bind(
|
||||
'change'
|
||||
, function () {
|
||||
var val = {};
|
||||
val[k] = $this.val();
|
||||
s.val(val);
|
||||
}
|
||||
);
|
||||
});
|
||||
this.$.find('legend').remove();
|
||||
|
||||
} else {
|
||||
// input = integer
|
||||
this.i = this.$;
|
||||
this.v = this.$.val();
|
||||
(this.v == '') && (this.v = this.o.min);
|
||||
|
||||
this.$.bind(
|
||||
'change'
|
||||
, function () {
|
||||
s.val(s.$.val());
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
(!this.o.displayInput) && this.$.hide();
|
||||
|
||||
this.$c = $('<canvas width="' +
|
||||
this.o.width + 'px" height="' +
|
||||
this.o.height + 'px"></canvas>');
|
||||
this.c = this.$c[0].getContext("2d");
|
||||
|
||||
this.$
|
||||
.wrap($('<div style="' + (this.o.inline ? 'display:inline;' : '') +
|
||||
'width:' + this.o.width + 'px;height:' +
|
||||
this.o.height + 'px;"></div>'))
|
||||
.before(this.$c);
|
||||
|
||||
if (this.v instanceof Object) {
|
||||
this.cv = {};
|
||||
this.copy(this.v, this.cv);
|
||||
} else {
|
||||
this.cv = this.v;
|
||||
}
|
||||
|
||||
this.$
|
||||
.bind("configure", cf)
|
||||
.parent()
|
||||
.bind("configure", cf);
|
||||
|
||||
this._listen()
|
||||
._configure()
|
||||
._xy()
|
||||
.init();
|
||||
|
||||
this.isInit = true;
|
||||
|
||||
this._draw();
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._draw = function () {
|
||||
|
||||
// canvas pre-rendering
|
||||
var d = true,
|
||||
c = document.createElement('canvas');
|
||||
|
||||
c.width = s.o.width;
|
||||
c.height = s.o.height;
|
||||
s.g = c.getContext('2d');
|
||||
|
||||
s.clear();
|
||||
|
||||
s.dH
|
||||
&& (d = s.dH());
|
||||
|
||||
(d !== false) && s.draw();
|
||||
|
||||
s.c.drawImage(c, 0, 0);
|
||||
c = null;
|
||||
};
|
||||
|
||||
this._touch = function (e) {
|
||||
|
||||
var touchMove = function (e) {
|
||||
|
||||
var v = s.xy2val(
|
||||
e.originalEvent.touches[s.t].pageX,
|
||||
e.originalEvent.touches[s.t].pageY
|
||||
);
|
||||
|
||||
if (v == s.cv) return;
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
|
||||
s.change(v);
|
||||
s._draw();
|
||||
};
|
||||
|
||||
// get touches index
|
||||
this.t = k.c.t(e);
|
||||
|
||||
// First touch
|
||||
touchMove(e);
|
||||
|
||||
// Touch events listeners
|
||||
k.c.d
|
||||
.bind("touchmove.k", touchMove)
|
||||
.bind(
|
||||
"touchend.k"
|
||||
, function () {
|
||||
k.c.d.unbind('touchmove.k touchend.k');
|
||||
|
||||
if (
|
||||
s.rH
|
||||
&& (s.rH(s.cv) === false)
|
||||
) return;
|
||||
|
||||
s.val(s.cv);
|
||||
}
|
||||
);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._mouse = function (e) {
|
||||
|
||||
var mouseMove = function (e) {
|
||||
var v = s.xy2val(e.pageX, e.pageY);
|
||||
if (v == s.cv) return;
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
s.change(v);
|
||||
s._draw();
|
||||
};
|
||||
|
||||
// First click
|
||||
mouseMove(e);
|
||||
|
||||
// Mouse events listeners
|
||||
k.c.d
|
||||
.bind("mousemove.k", mouseMove)
|
||||
.bind(
|
||||
// Escape key cancel current change
|
||||
"keyup.k"
|
||||
, function (e) {
|
||||
if (e.keyCode === 27) {
|
||||
k.c.d.unbind("mouseup.k mousemove.k keyup.k");
|
||||
|
||||
if (
|
||||
s.eH
|
||||
&& (s.eH() === false)
|
||||
) return;
|
||||
|
||||
s.cancel();
|
||||
}
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"mouseup.k"
|
||||
, function (e) {
|
||||
k.c.d.unbind('mousemove.k mouseup.k keyup.k');
|
||||
|
||||
if (
|
||||
s.rH
|
||||
&& (s.rH(s.cv) === false)
|
||||
) return;
|
||||
|
||||
s.val(s.cv);
|
||||
}
|
||||
);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._xy = function () {
|
||||
var o = this.$c.offset();
|
||||
this.x = o.left;
|
||||
this.y = o.top;
|
||||
return this;
|
||||
};
|
||||
|
||||
this._listen = function () {
|
||||
|
||||
if (!this.o.readOnly) {
|
||||
this.$c
|
||||
.bind(
|
||||
"mousedown"
|
||||
, function (e) {
|
||||
e.preventDefault();
|
||||
s._xy()._mouse(e);
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"touchstart"
|
||||
, function (e) {
|
||||
e.preventDefault();
|
||||
s._xy()._touch(e);
|
||||
}
|
||||
);
|
||||
this.listen();
|
||||
} else {
|
||||
this.$.attr('readonly', 'readonly');
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._configure = function () {
|
||||
|
||||
// Hooks
|
||||
if (this.o.draw) this.dH = this.o.draw;
|
||||
if (this.o.change) this.cH = this.o.change;
|
||||
if (this.o.cancel) this.eH = this.o.cancel;
|
||||
if (this.o.release) this.rH = this.o.release;
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
this.pColor = this.h2rgba(this.o.fgColor, "0.4");
|
||||
this.fgColor = this.h2rgba(this.o.fgColor, "0.6");
|
||||
} else {
|
||||
this.fgColor = this.o.fgColor;
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
this._clear = function () {
|
||||
this.$c[0].width = this.$c[0].width;
|
||||
};
|
||||
|
||||
// Abstract methods
|
||||
this.listen = function () {}; // on start, one time
|
||||
this.extend = function () {}; // each time configure triggered
|
||||
this.init = function () {}; // each time configure triggered
|
||||
this.change = function (v) {}; // on change
|
||||
this.val = function (v) {}; // on release
|
||||
this.xy2val = function (x, y) {}; //
|
||||
this.draw = function () {}; // on change / on release
|
||||
this.clear = function () { this._clear(); };
|
||||
|
||||
// Utils
|
||||
this.h2rgba = function (h, a) {
|
||||
var rgb;
|
||||
h = h.substring(1,7)
|
||||
rgb = [parseInt(h.substring(0,2),16)
|
||||
,parseInt(h.substring(2,4),16)
|
||||
,parseInt(h.substring(4,6),16)];
|
||||
return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")";
|
||||
};
|
||||
|
||||
this.copy = function (f, t) {
|
||||
for (var i in f) { t[i] = f[i]; }
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* k.Dial
|
||||
*/
|
||||
k.Dial = function () {
|
||||
k.o.call(this);
|
||||
|
||||
this.startAngle = null;
|
||||
this.xy = null;
|
||||
this.radius = null;
|
||||
this.lineWidth = null;
|
||||
this.cursorExt = null;
|
||||
this.w2 = null;
|
||||
this.PI2 = 2*Math.PI;
|
||||
|
||||
this.extend = function () {
|
||||
this.o = $.extend(
|
||||
{
|
||||
bgColor : this.$.data('bgcolor') || '#EEEEEE',
|
||||
angleOffset : this.$.data('angleoffset') || 0,
|
||||
angleArc : this.$.data('anglearc') || 360,
|
||||
inline : true
|
||||
}, this.o
|
||||
);
|
||||
};
|
||||
|
||||
this.val = function (v) {
|
||||
if (null != v) {
|
||||
this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v;
|
||||
this.v = this.cv;
|
||||
this.$.val(this.v);
|
||||
this._draw();
|
||||
} else {
|
||||
return this.v;
|
||||
}
|
||||
};
|
||||
|
||||
this.xy2val = function (x, y) {
|
||||
var a, ret;
|
||||
|
||||
a = Math.atan2(
|
||||
x - (this.x + this.w2)
|
||||
, - (y - this.y - this.w2)
|
||||
) - this.angleOffset;
|
||||
|
||||
if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) {
|
||||
// if isset angleArc option, set to min if .5 under min
|
||||
a = 0;
|
||||
} else if (a < 0) {
|
||||
a += this.PI2;
|
||||
}
|
||||
|
||||
ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc))
|
||||
+ this.o.min;
|
||||
|
||||
this.o.stopper
|
||||
&& (ret = max(min(ret, this.o.max), this.o.min));
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
this.listen = function () {
|
||||
// bind MouseWheel
|
||||
var s = this,
|
||||
mw = function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var ori = e.originalEvent
|
||||
,deltaX = ori.detail || ori.wheelDeltaX
|
||||
,deltaY = ori.detail || ori.wheelDeltaY
|
||||
,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? 1 : deltaX<0 || deltaY<0 ? -1 : 0);
|
||||
|
||||
if (
|
||||
s.cH
|
||||
&& (s.cH(v) === false)
|
||||
) return;
|
||||
|
||||
s.val(v);
|
||||
}
|
||||
, kval, to, m = 1, kv = {37:-1, 38:1, 39:1, 40:-1};
|
||||
|
||||
this.$
|
||||
.bind(
|
||||
"keydown"
|
||||
,function (e) {
|
||||
var kc = e.keyCode;
|
||||
kval = parseInt(String.fromCharCode(kc));
|
||||
|
||||
if (isNaN(kval)) {
|
||||
|
||||
(kc !== 13) // enter
|
||||
&& (kc !== 8) // bs
|
||||
&& (kc !== 9) // tab
|
||||
&& (kc !== 189) // -
|
||||
&& e.preventDefault();
|
||||
|
||||
// arrows
|
||||
if ($.inArray(kc,[37,38,39,40]) > -1) {
|
||||
e.preventDefault();
|
||||
|
||||
var v = parseInt(s.$.val()) + kv[kc] * m;
|
||||
|
||||
s.o.stopper
|
||||
&& (v = max(min(v, s.o.max), s.o.min));
|
||||
|
||||
s.change(v);
|
||||
s._draw();
|
||||
|
||||
// long time keydown speed-up
|
||||
to = window.setTimeout(
|
||||
function () { m*=2; }
|
||||
,30
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
.bind(
|
||||
"keyup"
|
||||
,function (e) {
|
||||
if (isNaN(kval)) {
|
||||
if (to) {
|
||||
window.clearTimeout(to);
|
||||
to = null;
|
||||
m = 1;
|
||||
s.val(s.$.val());
|
||||
}
|
||||
} else {
|
||||
// kval postcond
|
||||
(s.$.val() > s.o.max && s.$.val(s.o.max))
|
||||
|| (s.$.val() < s.o.min && s.$.val(s.o.min));
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
this.$c.bind("mousewheel DOMMouseScroll", mw);
|
||||
this.$.bind("mousewheel DOMMouseScroll", mw)
|
||||
};
|
||||
|
||||
this.init = function () {
|
||||
|
||||
if (
|
||||
this.v < this.o.min
|
||||
|| this.v > this.o.max
|
||||
) this.v = this.o.min;
|
||||
|
||||
this.$.val(this.v);
|
||||
this.w2 = this.o.width / 2;
|
||||
this.cursorExt = this.o.cursor / 100;
|
||||
this.xy = this.w2;
|
||||
this.lineWidth = this.xy * this.o.thickness;
|
||||
this.radius = this.xy - this.lineWidth / 2;
|
||||
|
||||
this.o.angleOffset
|
||||
&& (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset);
|
||||
|
||||
this.o.angleArc
|
||||
&& (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc);
|
||||
|
||||
// deg to rad
|
||||
this.angleOffset = this.o.angleOffset * Math.PI / 180;
|
||||
this.angleArc = this.o.angleArc * Math.PI / 180;
|
||||
|
||||
// compute start and end angles
|
||||
this.startAngle = 1.5 * Math.PI + this.angleOffset;
|
||||
this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc;
|
||||
|
||||
var s = max(
|
||||
String(Math.abs(this.o.max)).length
|
||||
, String(Math.abs(this.o.min)).length
|
||||
, 2
|
||||
) + 2;
|
||||
|
||||
this.o.displayInput
|
||||
&& this.i.css({
|
||||
'width' : ((this.o.width / 2 + 4) >> 0) + 'px'
|
||||
,'height' : ((this.o.width / 3) >> 0) + 'px'
|
||||
,'position' : 'absolute'
|
||||
,'vertical-align' : 'middle'
|
||||
,'margin-top' : ((this.o.width / 3) >> 0) + 'px'
|
||||
,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px'
|
||||
,'border' : 0
|
||||
,'background' : 'none'
|
||||
,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial'
|
||||
,'text-align' : 'center'
|
||||
,'color' : this.o.fgColor
|
||||
,'padding' : '0px'
|
||||
,'-webkit-appearance': 'none'
|
||||
})
|
||||
|| this.i.css({
|
||||
'width' : '0px'
|
||||
,'visibility' : 'hidden'
|
||||
});
|
||||
};
|
||||
|
||||
this.change = function (v) {
|
||||
this.cv = v;
|
||||
this.$.val(v);
|
||||
};
|
||||
|
||||
this.angle = function (v) {
|
||||
return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min);
|
||||
};
|
||||
|
||||
this.draw = function () {
|
||||
|
||||
var c = this.g, // context
|
||||
a = this.angle(this.cv) // Angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, eat = sat + a // End angle
|
||||
, sa, ea // Previous angles
|
||||
, r = 1;
|
||||
|
||||
c.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - this.cursorExt)
|
||||
&& (eat = eat + this.cursorExt);
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = this.o.bgColor;
|
||||
c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true);
|
||||
c.stroke();
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.v);
|
||||
sa = this.startAngle;
|
||||
this.o.cursor
|
||||
&& (sa = ea - this.cursorExt)
|
||||
&& (ea = ea + this.cursorExt);
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = this.pColor;
|
||||
c.arc(this.xy, this.xy, this.radius, sa, ea, false);
|
||||
c.stroke();
|
||||
r = (this.cv == this.v);
|
||||
}
|
||||
|
||||
c.beginPath();
|
||||
c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
|
||||
c.arc(this.xy, this.xy, this.radius, sat, eat, false);
|
||||
c.stroke();
|
||||
};
|
||||
|
||||
this.cancel = function () {
|
||||
this.val(this.v);
|
||||
};
|
||||
};
|
||||
|
||||
$.fn.dial = $.fn.knob = function (o) {
|
||||
return this.each(
|
||||
function () {
|
||||
var d = new k.Dial();
|
||||
d.o = o;
|
||||
d.$ = $(this);
|
||||
d.run();
|
||||
}
|
||||
).parent();
|
||||
};
|
||||
|
||||
});
|
||||
7
assets/javascripts/moment.min.js
vendored
Normal file
7
assets/javascripts/moment.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
assets/javascripts/rickshaw-1.4.3.min.js
vendored
Normal file
2
assets/javascripts/rickshaw-1.4.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
247
assets/javascripts/timeknots.js
Normal file
247
assets/javascripts/timeknots.js
Normal file
@@ -0,0 +1,247 @@
|
||||
var TimeKnots = {
|
||||
draw: function(id, events, options) {
|
||||
// remove any exisitng elements
|
||||
d3.select(id).select("div").html("");
|
||||
|
||||
var TODAY = Date.now();
|
||||
var cfg = {
|
||||
width: 600,
|
||||
height: 200,
|
||||
radius: 10,
|
||||
lineWidth: 4,
|
||||
color: "#999",
|
||||
background: "#FFF",
|
||||
dateFormat: "%Y/%m/%d %H:%M:%S",
|
||||
horizontalLayout: true,
|
||||
showLabels: false,
|
||||
labelFormat: "%Y/%m/%d %H:%M:%S",
|
||||
addNow: false,
|
||||
seriesColor: d3.scale.category20(),
|
||||
dateDimension: true
|
||||
};
|
||||
|
||||
//default configuration overrid
|
||||
if (options != undefined) {
|
||||
for (var i in options) {
|
||||
cfg[i] = options[i];
|
||||
}
|
||||
}
|
||||
if (cfg.addNow != false) {
|
||||
events.push({
|
||||
date: new Date(),
|
||||
name: cfg.addNowLabel || "Today"
|
||||
});
|
||||
}
|
||||
//sort events ascending
|
||||
events.sort(function(a,b){
|
||||
return new Date(a.date) - new Date(b.date);
|
||||
});
|
||||
var svg = d3.select(id).select("div").append('svg').attr("width", cfg.width).attr("height", cfg.height);
|
||||
//Calculate times in terms of timestamps
|
||||
if (!cfg.dateDimension) {
|
||||
var timestamps = events.map(function(d) {
|
||||
return d.value
|
||||
}); //new Date(d.date).getTime()});
|
||||
var maxValue = d3.max(timestamps);
|
||||
var minValue = d3.min(timestamps);
|
||||
} else {
|
||||
var timestamps = events.map(function(d) {
|
||||
return Date.parse(d.date);
|
||||
}); //new Date(d.date).getTime()});
|
||||
var maxValue = d3.max(timestamps);
|
||||
var minValue = d3.min(timestamps);
|
||||
}
|
||||
var margin = (d3.max(events.map(function(d) {
|
||||
return d.radius
|
||||
})) || cfg.radius) * 1.5 + cfg.lineWidth;
|
||||
var step = (cfg.horizontalLayout) ? ((cfg.width - 2 * margin) / (maxValue - minValue)) : ((cfg.height - 2 * margin) / (maxValue - minValue));
|
||||
var series = [];
|
||||
if (maxValue == minValue) {
|
||||
step = 0;
|
||||
if (cfg.horizontalLayout) {
|
||||
margin = cfg.width / 2
|
||||
} else {
|
||||
margin = cfg.height / 2
|
||||
}
|
||||
}
|
||||
linePrevious = {
|
||||
x1: null,
|
||||
x2: null,
|
||||
y1: null,
|
||||
y2: null
|
||||
}
|
||||
|
||||
TIMELINE_LEFT_MARGIN = 130;
|
||||
TEXT_LEFT_MARGIN = 110;
|
||||
DATE_LEFT_MARGIN = 100;
|
||||
|
||||
svg.selectAll("line")
|
||||
.data(events).enter().append("line")
|
||||
.attr("class", "timeline-line")
|
||||
.attr("x1", function(d) {
|
||||
var ret;
|
||||
if (cfg.horizontalLayout) {
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
ret = Math.floor(step * (datum - minValue) + margin) - TIMELINE_LEFT_MARGIN
|
||||
} else {
|
||||
ret = Math.floor(cfg.width / 2) - TIMELINE_LEFT_MARGIN
|
||||
}
|
||||
linePrevious.x1 = ret
|
||||
return ret
|
||||
})
|
||||
.attr("x2", function(d) {
|
||||
if (linePrevious.x1 != null) {
|
||||
return linePrevious.x1
|
||||
}
|
||||
if (cfg.horizontalLayout) {
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
ret = Math.floor(step * (datum - minValue))
|
||||
}
|
||||
return Math.floor(cfg.width / 2) - TIMELINE_LEFT_MARGIN
|
||||
})
|
||||
.attr("y1", function(d) {
|
||||
var ret;
|
||||
if (cfg.horizontalLayout) {
|
||||
ret = Math.floor(cfg.height / 2)
|
||||
} else {
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
ret = Math.floor(step * (datum - minValue)) + margin
|
||||
}
|
||||
linePrevious.y1 = ret
|
||||
return ret
|
||||
})
|
||||
.attr("y2", function(d) {
|
||||
if (linePrevious.y1 != null) {
|
||||
return linePrevious.y1
|
||||
}
|
||||
if (cfg.horizontalLayout) {
|
||||
return Math.floor(cfg.height / 2)
|
||||
}
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
return Math.floor(step * (datum - minValue))
|
||||
})
|
||||
.style("stroke", function(d) {
|
||||
if (d.color != undefined) {
|
||||
return d.color
|
||||
}
|
||||
if (d.series != undefined) {
|
||||
if (series.indexOf(d.series) < 0) {
|
||||
series.push(d.series);
|
||||
}
|
||||
return cfg.seriesColor(series.indexOf(d.series));
|
||||
}
|
||||
return cfg.color
|
||||
})
|
||||
.style("stroke-width", cfg.lineWidth);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(events).enter()
|
||||
.append("circle")
|
||||
.attr("class", "timeline-event")
|
||||
.attr("r", function(d) {
|
||||
if (d.radius != undefined) {
|
||||
return d.radius
|
||||
}
|
||||
return cfg.radius
|
||||
})
|
||||
.style("stroke", function(d) {
|
||||
if (d.color != undefined) {
|
||||
return d.color
|
||||
}
|
||||
if (d.series != undefined) {
|
||||
if (series.indexOf(d.series) < 0) {
|
||||
series.push(d.series);
|
||||
}
|
||||
console.log(d.series, series, series.indexOf(d.series));
|
||||
return cfg.seriesColor(series.indexOf(d.series));
|
||||
}
|
||||
return cfg.color
|
||||
})
|
||||
.style("stroke-width", function(d) {
|
||||
if (d.lineWidth != undefined) {
|
||||
return d.lineWidth
|
||||
}
|
||||
return cfg.lineWidth
|
||||
})
|
||||
.style("fill", function(d) {
|
||||
if (d.background != undefined) {
|
||||
return d.background
|
||||
}
|
||||
return cfg.background
|
||||
})
|
||||
.attr("cy", function(d) {
|
||||
if (cfg.horizontalLayout) {
|
||||
return Math.floor(cfg.height / 2)
|
||||
}
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
return Math.floor(step * (datum - minValue) + margin)
|
||||
})
|
||||
.attr("cx", function(d) {
|
||||
if (cfg.horizontalLayout) {
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
var x = Math.floor(step * (datum - minValue) + margin);
|
||||
return x;
|
||||
}
|
||||
return Math.floor(cfg.width / 2) - TIMELINE_LEFT_MARGIN
|
||||
});
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(events).enter()
|
||||
.append('text').attr("class", "event-description")
|
||||
.html(function(d){
|
||||
return d.name;
|
||||
})
|
||||
.attr("x", function(d) {
|
||||
return Math.floor(cfg.width / 2) - TEXT_LEFT_MARGIN
|
||||
})
|
||||
.attr("y", function(d) {
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
var y = Math.floor(step * (datum - minValue) + margin);
|
||||
return TimeKnots.checkAndFixCollision(svg, ".event-description", y, this);
|
||||
})
|
||||
.attr("text-anchor", "center")
|
||||
.style("opacity", function(d) {
|
||||
if (d.opacity != undefined) {
|
||||
return d.opacity
|
||||
}
|
||||
return 1
|
||||
});
|
||||
|
||||
svg.selectAll("p")
|
||||
.data(events).enter()
|
||||
.append('text').attr("class", "event-description-date")
|
||||
.html(function(d){
|
||||
if (moment(d.date).isSame(TODAY, 'day') && d.name !== "TODAY") {
|
||||
return "TODAY";
|
||||
}
|
||||
return moment(new Date(d.date)).format("MMM D");
|
||||
})
|
||||
.attr("x", function(d) {
|
||||
return Math.floor(cfg.width / 2) + DATE_LEFT_MARGIN
|
||||
})
|
||||
.attr("y", function(d) {
|
||||
var datum = (cfg.dateDimension) ? new Date(d.date).getTime() : d.value;
|
||||
var y = Math.floor(step * (datum - minValue) + margin);
|
||||
return TimeKnots.checkAndFixCollision(svg, ".event-description-date", y, this);
|
||||
})
|
||||
.attr("text-anchor", "right")
|
||||
.style("opacity", function(d) {
|
||||
if (d.opacity != undefined) {
|
||||
return d.opacity
|
||||
}
|
||||
return 1
|
||||
});
|
||||
},
|
||||
checkAndFixCollision: function(svg, id, y, that) {
|
||||
svg.selectAll(id).each(function() {
|
||||
if (this != that) {
|
||||
if (this.getAttribute('y') != null && (this.getAttribute('y') >= (y-10) && this.getAttribute('y') <= (y+10))) {
|
||||
y += 15 - 0.05*(this.getAttribute('y') - y);
|
||||
return y;
|
||||
}
|
||||
}
|
||||
});
|
||||
return y;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user