Permalink
Browse files

Countdown Widget added

  • Loading branch information...
djljr committed Apr 18, 2012
1 parent b5fce3b commit cac942a982ee1a06659b51dc166f83012f026bbe
Showing with 235 additions and 2 deletions.
  1. +18 −0 app/css/high-contrast.scss
  2. +86 −1 app/js/graphene.coffee
  3. +12 −0 build/index.css
  4. +119 −1 build/index.js
View
@@ -131,6 +131,24 @@ text, tspan{
}
+/*
+ * Countdown Label
+ */
+.clview{
+ text-align:center;
+ padding-bottom:4em;
+
+ .metric .value{
+ font-size:6em;
+ }
+
+ .label{
+ background:none;
+ font-size:12px;
+ }
+
+}
+
/*
* Gauge Gadget
View
@@ -182,6 +182,58 @@ class Graphene.AggregateSeries extends Graphene.TimeSeries
@process_data(js2)
+class Graphene.CountdownSeries extends Backbone.Model
+ defaults:
+ source: 0
+ refresh_interval: 1000
+
+ start: ()=>
+ console.log("Starting to generate countdown")
+ @data = [@countdown_time()]
+
+ @t_index = setInterval(@refresh, @get('refresh_interval'))
+
+ stop: ()=>
+ clearInterval(@t_index)
+
+ refresh: ()=>
+ @data = [@countdown_time()]
+ @set(data: @data)
+
+ countdown_time: ()=>
+ # convert times to milliseconds if needed
+ now = +(new Date())
+ event = +@get('source')
+
+ if event > now
+ return "T-" + @format(now, event)
+ else
+ return "T+" + @format(event, now)
+
+ format: (first, second)=>
+ fmt = (num) ->
+ if num < 10
+ return "0" + num
+ else
+ return num
+
+ diff = (second - first) / 1000
+ seconds = fmt(Math.floor(diff % 60))
+ diff = diff / 60
+ minutes = fmt(Math.floor(diff % 60))
+ diff = diff / 60
+ hours = fmt(Math.floor(diff % 24))
+ diff = diff / 24
+ days = Math.floor(diff)
+
+ formatted = ""
+ if days > 0
+ formatted = days + 'd '
+
+ formatted = formatted + hours + ':' + minutes + ':' + seconds
+ return formatted
+
+
class Graphene.GaugeGadgetView extends Backbone.View
model: Graphene.TimeSeries
className: 'gauge-gadget-view'
@@ -238,6 +290,39 @@ class Graphene.GaugeGadgetView extends Backbone.View
+class Graphene.CountdownLabelView extends Backbone.View
+ model: Graphene.CountdownSeries
+ className: 'countdown-label-view'
+ tagName: 'div'
+ initialize: ()->
+ @parent = @options.parent
+ @title = @options.title
+
+ @vis = d3.select(@parent).append("div")
+ .attr("class", "clview")
+ if @title
+ @vis.append("div")
+ .attr("class", "label")
+ .text(@title)
+
+ @model.bind('change', @render)
+ console.log("CL view")
+
+ render: ()=>
+ data = @model.get('data')
+ datum = if data && data.length > 0 then data[0] else 'T-0d 0:00:00'
+ vis = @vis
+ metric_items = vis.selectAll('div.metric')
+ .data([datum], (d)->d)
+ metric_items.exit().remove()
+
+ metric = metric_items.enter()
+ .insert('div', ':first-child')
+ .attr('class', 'metric')
+
+ metric.append('span')
+ .attr('class', 'value')
+ .text((d)->d)
class Graphene.GaugeLabelView extends Backbone.View
@@ -249,7 +334,7 @@ class Graphene.GaugeLabelView extends Backbone.View
@title = @options.title
@type = @options.type
@parent = @options.parent || '#parent'
- @value_format = d3.format(".3s")
+ @value_format = @options.value_format || d3.format(".3s")
@null_value = 0
@vis = d3.select(@parent).append("div")
View
@@ -773,6 +773,18 @@ text, tspan {
.glview .label {
background: none; }
+/*
+ * Countdown Label
+ */
+.clview {
+ text-align: center;
+ padding-bottom: 4em; }
+ .clview .metric .value {
+ font-size: 6em; }
+ .clview .label {
+ background: none;
+ font-size: 12px; }
+
/*
* Gauge Gadget
*/
View
@@ -8072,6 +8072,79 @@ function Gauge(placeholderName, configuration)
})(Graphene.TimeSeries);
+ Graphene.CountdownSeries = (function(_super) {
+
+ __extends(CountdownSeries, _super);
+
+ function CountdownSeries() {
+ this.format = __bind(this.format, this);
+ this.countdown_time = __bind(this.countdown_time, this);
+ this.refresh = __bind(this.refresh, this);
+ this.stop = __bind(this.stop, this);
+ this.start = __bind(this.start, this);
+ CountdownSeries.__super__.constructor.apply(this, arguments);
+ }
+
+ CountdownSeries.prototype.defaults = {
+ source: 0,
+ refresh_interval: 1000
+ };
+
+ CountdownSeries.prototype.start = function() {
+ console.log("Starting to generate countdown");
+ this.data = [this.countdown_time()];
+ return this.t_index = setInterval(this.refresh, this.get('refresh_interval'));
+ };
+
+ CountdownSeries.prototype.stop = function() {
+ return clearInterval(this.t_index);
+ };
+
+ CountdownSeries.prototype.refresh = function() {
+ this.data = [this.countdown_time()];
+ return this.set({
+ data: this.data
+ });
+ };
+
+ CountdownSeries.prototype.countdown_time = function() {
+ var event, now;
+ now = +(new Date());
+ event = +this.get('source');
+ if (event > now) {
+ return "T-" + this.format(now, event);
+ } else {
+ return "T+" + this.format(event, now);
+ }
+ };
+
+ CountdownSeries.prototype.format = function(first, second) {
+ var days, diff, fmt, formatted, hours, minutes, seconds;
+ fmt = function(num) {
+ if (num < 10) {
+ return "0" + num;
+ } else {
+ return num;
+ }
+ };
+ diff = (second - first) / 1000;
+ seconds = fmt(Math.floor(diff % 60));
+ diff = diff / 60;
+ minutes = fmt(Math.floor(diff % 60));
+ diff = diff / 60;
+ hours = fmt(Math.floor(diff % 24));
+ diff = diff / 24;
+ days = Math.floor(diff);
+ formatted = "";
+ if (days > 0) formatted = days + 'd ';
+ formatted = formatted + hours + ':' + minutes + ':' + seconds;
+ return formatted;
+ };
+
+ return CountdownSeries;
+
+ })(Backbone.Model);
+
Graphene.GaugeGadgetView = (function(_super) {
__extends(GaugeGadgetView, _super);
@@ -8148,6 +8221,51 @@ function Gauge(placeholderName, configuration)
})(Backbone.View);
+ Graphene.CountdownLabelView = (function(_super) {
+
+ __extends(CountdownLabelView, _super);
+
+ function CountdownLabelView() {
+ this.render = __bind(this.render, this);
+ CountdownLabelView.__super__.constructor.apply(this, arguments);
+ }
+
+ CountdownLabelView.prototype.model = Graphene.CountdownSeries;
+
+ CountdownLabelView.prototype.className = 'countdown-label-view';
+
+ CountdownLabelView.prototype.tagName = 'div';
+
+ CountdownLabelView.prototype.initialize = function() {
+ this.parent = this.options.parent;
+ this.title = this.options.title;
+ this.vis = d3.select(this.parent).append("div").attr("class", "clview");
+ if (this.title) {
+ this.vis.append("div").attr("class", "label").text(this.title);
+ }
+ this.model.bind('change', this.render);
+ return console.log("CL view");
+ };
+
+ CountdownLabelView.prototype.render = function() {
+ var data, datum, metric, metric_items, vis;
+ data = this.model.get('data');
+ datum = data && data.length > 0 ? data[0] : 'T-0d 0:00:00';
+ vis = this.vis;
+ metric_items = vis.selectAll('div.metric').data([datum], function(d) {
+ return d;
+ });
+ metric_items.exit().remove();
+ metric = metric_items.enter().insert('div', ':first-child').attr('class', 'metric');
+ return metric.append('span').attr('class', 'value').text(function(d) {
+ return d;
+ });
+ };
+
+ return CountdownLabelView;
+
+ })(Backbone.View);
+
Graphene.GaugeLabelView = (function(_super) {
__extends(GaugeLabelView, _super);
@@ -8169,7 +8287,7 @@ function Gauge(placeholderName, configuration)
this.title = this.options.title;
this.type = this.options.type;
this.parent = this.options.parent || '#parent';
- this.value_format = d3.format(".3s");
+ this.value_format = this.options.value_format || d3.format(".3s");
this.null_value = 0;
this.vis = d3.select(this.parent).append("div").attr("class", "glview");
if (this.title) {

0 comments on commit cac942a

Please sign in to comment.