pulse-meter 0.0.1

data/lib/pulse-meter/visualize/public/js/application.coffee

@@ -0,0 +1,262 @@
+$ ->
+	globalOptions = gon.options
+
+	Highcharts.setOptions {
+		global: {
+			useUTC: globalOptions.useUtc
+		}
+	}
+
+	PageInfo = Backbone.Model.extend {
+	}
+
+	PageInfoList = Backbone.Collection.extend {
+		model: PageInfo
+		selected: ->
+			@find (m) ->
+				m.get 'selected'
+			
+
+		selectFirst: ->
+			@at(0).set('selected', true) if @length > 0
+
+		selectPage: (id) ->
+			@each (m) ->
+				m.set 'selected', m.id == id
+	}
+
+	pageInfos = new PageInfoList
+
+	PageTitleView = Backbone.View.extend {
+		tagName: 'li'
+		
+		template: _.template('<a href="#/pages/<%= id  %>"><%= title %></a>')
+			
+		initialize: ->
+			@model.bind 'change', @render, this
+			@model.bind 'destroy', @remove, this
+
+		render: ->
+			@$el.html @template(@model.toJSON())
+			if @model.get('selected')
+				@$el.addClass('active')
+			else
+				@$el.removeClass('active')
+	}
+
+	PageTitlesView = Backbone.View.extend {
+		initialize: ->
+			pageInfos.bind 'reset', @render, this
+
+		addOne: (pageInfo) ->
+			view = new PageTitleView {
+				model: pageInfo
+			}
+			view.render()
+			$('#page-titles').append(view.el)
+
+		render: ->
+			$('#page-titles').empty()
+			pageInfos.each(@addOne)
+	}
+
+	pageTitlesApp = new PageTitlesView
+
+	pageInfos.reset gon.pageInfos
+
+	Widget = Backbone.Model.extend {
+		initialize: ->
+			@needRefresh = true
+			@setNextFetch()
+
+		time: -> (new Date()).getTime()
+
+		setNextFetch: ->
+			@nextFetch = @time() + @get('interval') * 1000
+
+		setRefresh: (needRefresh) ->
+			@needRefresh = needRefresh
+
+		needFetch: ->
+			interval = @get('interval')
+			@time() > @nextFetch && @needRefresh && interval? && interval > 0
+
+		refetch: ->
+			if @needFetch()
+				@fetch()
+				@setNextFetch()
+
+		cutoffValue: (v, min, max) ->
+			if min isnt null && v.y < min
+				v.y = min
+				v.color = globalOptions.outlierColor
+			if max isnt null && v.y > max
+				v.y = max
+				v.color = globalOptions.outlierColor
+
+		cutoff: (min, max) ->
+			_.each(@get('series'), (s) ->
+				_.each( s.data, (v) ->
+					@cutoffValue(v, min, max)
+				, this)
+			, this)
+	}
+
+	WidgetList = Backbone.Collection.extend {
+		model: Widget
+		url: ->
+			ROOT + 'pages/' + pageInfos.selected().id + '/widgets'
+	}
+
+	WidgetChartView = Backbone.View.extend {
+		tagName: 'div'
+
+		initialize: ->
+			@model.bind 'destroy', @remove, this
+
+		updateData: (min, max) ->
+			@model.cutoff(min, max)
+			chartSeries = @chart.series
+			newSeries = @model.get('series')
+			for i in [0 .. chartSeries.length - 1]
+				if newSeries[i]?
+					chartSeries[i].setData(newSeries[i].data, false)
+			@chart.redraw()
+
+		render: ->
+			options = {
+				chart: {
+					renderTo: @el
+					plotBorderWidth: 1
+					spacingLeft: 0
+					spacingRight: 0
+					type: @model.get('type')
+					animation: false
+					zoomType: 'x'
+				}
+				credits: {
+					enabled: false
+				}
+				title: {
+					text: @model.get('title')
+				}
+				xAxis: {
+					type: 'datetime'
+				}
+				yAxis: {
+					title: {
+						text: @model.get('valuesTitle')
+					}
+				}
+				tooltip: {
+					xDateFormat: '%Y-%m-%d %H:%M:%S'
+					valueDecimals: 6
+				}
+				series: @model.get('series')
+				plotOptions: {
+					series: {
+						animation: false
+						lineWidth: 1
+						shadow: false
+						marker: {
+							radius: 0
+						}
+					}
+				}
+			}
+			$.extend(true, options, globalOptions.highchartOptions, pageInfos.selected().get('highchartOptions'))
+			@chart = new Highcharts.Chart(options)
+
+  }
+
+	WidgetView = Backbone.View.extend {
+		tagName: 'div'
+
+		template: _.template($('#widget-template').html())
+
+		initialize: ->
+			@model.bind('destroy', @remove, this)
+			@model.bind('change', @updateChart, this)
+
+		events: {
+			"click #refresh": 'refresh'
+			"click #need-refresh": 'setRefresh'
+		}
+
+		refresh: ->
+			@model.fetch()
+
+		setRefresh: ->
+			needRefresh = @$el.find('#need-refresh').is(":checked")
+			@model.setRefresh(needRefresh)
+			true
+
+		renderChart: ->
+			@chartView.render()
+
+		updateChart: ->
+			@chartView.updateData(@cutoffMin(), @cutoffMax())
+
+		render: ->
+			@$el.html @template(@model.toJSON())
+			@chartView = new WidgetChartView {
+        model: @model
+      }
+      @$el.find("#plotarea").append(@chartView.el)
+      @$el.addClass "span#{@model.get('width')}"
+
+		cutoffMin: ->
+			val = parseFloat(@controlValue('#cutoff-min'))
+			if _.isNaN(val) then null else val
+
+		cutoffMax: ->
+			val = parseFloat(@controlValue('#cutoff-max'))
+			if _.isNaN(val) then null else val
+
+		controlValue: (id) ->
+			val = @$el.find(id).first().val()
+
+
+	}
+
+	widgetList = new WidgetList
+	setInterval( ->
+		widgetList.each (w) ->
+			w.refetch()
+	, 200)
+
+	WidgetListView = Backbone.View.extend {
+		initialize: ->
+			widgetList.bind 'reset', @render, this
+			
+		render: ->
+			container = $('#widgets')
+			container.empty()
+			widgetList.each (w) ->
+				view = new WidgetView {
+					model: w
+				}
+				view.render()
+				container.append(view.el)
+				view.renderChart()
+	}
+
+	widgetListApp = new WidgetListView
+
+	AppRouter = Backbone.Router.extend {
+		routes: {
+			'pages/:id': 'getPage'
+			'*actions': 'defaultRoute'
+		}
+		getPage: (ids) ->
+			id = parseInt(ids)
+			pageInfos.selectPage(id)
+			widgetList.fetch()
+		defaultRoute: (actions) ->
+			@navigate('//pages/1') if pageInfos.length > 0
+	}
+
+	appRouter = new AppRouter
+
+	Backbone.history.start()
+

data/lib/pulse-meter/visualize/public/js/application.js

@@ -0,0 +1,279 @@
+// Generated by CoffeeScript 1.2.1-pre
+(function() {
+
+  $(function() {
+    var AppRouter, PageInfo, PageInfoList, PageTitleView, PageTitlesView, Widget, WidgetChartView, WidgetList, WidgetListView, WidgetView, appRouter, globalOptions, pageInfos, pageTitlesApp, widgetList, widgetListApp;
+    globalOptions = gon.options;
+    Highcharts.setOptions({
+      global: {
+        useUTC: globalOptions.useUtc
+      }
+    });
+    PageInfo = Backbone.Model.extend({});
+    PageInfoList = Backbone.Collection.extend({
+      model: PageInfo,
+      selected: function() {
+        return this.find(function(m) {
+          return m.get('selected');
+        });
+      },
+      selectFirst: function() {
+        if (this.length > 0) return this.at(0).set('selected', true);
+      },
+      selectPage: function(id) {
+        return this.each(function(m) {
+          return m.set('selected', m.id === id);
+        });
+      }
+    });
+    pageInfos = new PageInfoList;
+    PageTitleView = Backbone.View.extend({
+      tagName: 'li',
+      template: _.template('<a href="#/pages/<%= id  %>"><%= title %></a>'),
+      initialize: function() {
+        this.model.bind('change', this.render, this);
+        return this.model.bind('destroy', this.remove, this);
+      },
+      render: function() {
+        this.$el.html(this.template(this.model.toJSON()));
+        if (this.model.get('selected')) {
+          return this.$el.addClass('active');
+        } else {
+          return this.$el.removeClass('active');
+        }
+      }
+    });
+    PageTitlesView = Backbone.View.extend({
+      initialize: function() {
+        return pageInfos.bind('reset', this.render, this);
+      },
+      addOne: function(pageInfo) {
+        var view;
+        view = new PageTitleView({
+          model: pageInfo
+        });
+        view.render();
+        return $('#page-titles').append(view.el);
+      },
+      render: function() {
+        $('#page-titles').empty();
+        return pageInfos.each(this.addOne);
+      }
+    });
+    pageTitlesApp = new PageTitlesView;
+    pageInfos.reset(gon.pageInfos);
+    Widget = Backbone.Model.extend({
+      initialize: function() {
+        this.needRefresh = true;
+        return this.setNextFetch();
+      },
+      time: function() {
+        return (new Date()).getTime();
+      },
+      setNextFetch: function() {
+        return this.nextFetch = this.time() + this.get('interval') * 1000;
+      },
+      setRefresh: function(needRefresh) {
+        return this.needRefresh = needRefresh;
+      },
+      needFetch: function() {
+        var interval;
+        interval = this.get('interval');
+        return this.time() > this.nextFetch && this.needRefresh && (interval != null) && interval > 0;
+      },
+      refetch: function() {
+        if (this.needFetch()) {
+          this.fetch();
+          return this.setNextFetch();
+        }
+      },
+      cutoffValue: function(v, min, max) {
+        if (min !== null && v.y < min) {
+          v.y = min;
+          v.color = globalOptions.outlierColor;
+        }
+        if (max !== null && v.y > max) {
+          v.y = max;
+          return v.color = globalOptions.outlierColor;
+        }
+      },
+      cutoff: function(min, max) {
+        return _.each(this.get('series'), function(s) {
+          return _.each(s.data, function(v) {
+            return this.cutoffValue(v, min, max);
+          }, this);
+        }, this);
+      }
+    });
+    WidgetList = Backbone.Collection.extend({
+      model: Widget,
+      url: function() {
+        return ROOT + 'pages/' + pageInfos.selected().id + '/widgets';
+      }
+    });
+    WidgetChartView = Backbone.View.extend({
+      tagName: 'div',
+      initialize: function() {
+        return this.model.bind('destroy', this.remove, this);
+      },
+      updateData: function(min, max) {
+        var chartSeries, i, newSeries, _i, _ref;
+        this.model.cutoff(min, max);
+        chartSeries = this.chart.series;
+        newSeries = this.model.get('series');
+        for (i = _i = 0, _ref = chartSeries.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
+          if (newSeries[i] != null) {
+            chartSeries[i].setData(newSeries[i].data, false);
+          }
+        }
+        return this.chart.redraw();
+      },
+      render: function() {
+        var options;
+        options = {
+          chart: {
+            renderTo: this.el,
+            plotBorderWidth: 1,
+            spacingLeft: 0,
+            spacingRight: 0,
+            type: this.model.get('type'),
+            animation: false,
+            zoomType: 'x'
+          },
+          credits: {
+            enabled: false
+          },
+          title: {
+            text: this.model.get('title')
+          },
+          xAxis: {
+            type: 'datetime'
+          },
+          yAxis: {
+            title: {
+              text: this.model.get('valuesTitle')
+            }
+          },
+          tooltip: {
+            xDateFormat: '%Y-%m-%d %H:%M:%S',
+            valueDecimals: 6
+          },
+          series: this.model.get('series'),
+          plotOptions: {
+            series: {
+              animation: false,
+              lineWidth: 1,
+              shadow: false,
+              marker: {
+                radius: 0
+              }
+            }
+          }
+        };
+        $.extend(true, options, globalOptions.highchartOptions, pageInfos.selected().get('highchartOptions'));
+        return this.chart = new Highcharts.Chart(options);
+      }
+    });
+    WidgetView = Backbone.View.extend({
+      tagName: 'div',
+      template: _.template($('#widget-template').html()),
+      initialize: function() {
+        this.model.bind('destroy', this.remove, this);
+        return this.model.bind('change', this.updateChart, this);
+      },
+      events: {
+        "click #refresh": 'refresh',
+        "click #need-refresh": 'setRefresh'
+      },
+      refresh: function() {
+        return this.model.fetch();
+      },
+      setRefresh: function() {
+        var needRefresh;
+        needRefresh = this.$el.find('#need-refresh').is(":checked");
+        this.model.setRefresh(needRefresh);
+        return true;
+      },
+      renderChart: function() {
+        return this.chartView.render();
+      },
+      updateChart: function() {
+        return this.chartView.updateData(this.cutoffMin(), this.cutoffMax());
+      },
+      render: function() {
+        this.$el.html(this.template(this.model.toJSON()));
+        this.chartView = new WidgetChartView({
+          model: this.model
+        });
+        this.$el.find("#plotarea").append(this.chartView.el);
+        return this.$el.addClass("span" + (this.model.get('width')));
+      },
+      cutoffMin: function() {
+        var val;
+        val = parseFloat(this.controlValue('#cutoff-min'));
+        if (_.isNaN(val)) {
+          return null;
+        } else {
+          return val;
+        }
+      },
+      cutoffMax: function() {
+        var val;
+        val = parseFloat(this.controlValue('#cutoff-max'));
+        if (_.isNaN(val)) {
+          return null;
+        } else {
+          return val;
+        }
+      },
+      controlValue: function(id) {
+        var val;
+        return val = this.$el.find(id).first().val();
+      }
+    });
+    widgetList = new WidgetList;
+    setInterval(function() {
+      return widgetList.each(function(w) {
+        return w.refetch();
+      });
+    }, 200);
+    WidgetListView = Backbone.View.extend({
+      initialize: function() {
+        return widgetList.bind('reset', this.render, this);
+      },
+      render: function() {
+        var container;
+        container = $('#widgets');
+        container.empty();
+        return widgetList.each(function(w) {
+          var view;
+          view = new WidgetView({
+            model: w
+          });
+          view.render();
+          container.append(view.el);
+          return view.renderChart();
+        });
+      }
+    });
+    widgetListApp = new WidgetListView;
+    AppRouter = Backbone.Router.extend({
+      routes: {
+        'pages/:id': 'getPage',
+        '*actions': 'defaultRoute'
+      },
+      getPage: function(ids) {
+        var id;
+        id = parseInt(ids);
+        pageInfos.selectPage(id);
+        return widgetList.fetch();
+      },
+      defaultRoute: function(actions) {
+        if (pageInfos.length > 0) return this.navigate('//pages/1');
+      }
+    });
+    appRouter = new AppRouter;
+    return Backbone.history.start();
+  });
+
+}).call(this);