timelinetest.js

(function() {
  var TimeLineTest;

  TimeLineTest = (function() {

    TimeLineTest.handles = ["timelinetest"];

    TimeLineTest.prototype.svg = null;

    TimeLineTest.prototype.points = null;

    TimeLineTest.prototype.type = "timelinetest";

    TimeLineTest.prototype.name = "";

    TimeLineTest.prototype.initialized = false;

    TimeLineTest.prototype.margin = {
      left: 60,
      right: 40,
      top: 40,
      bottom: 40
    };

    function TimeLineTest(name) {
      this.name = name;
    }

    TimeLineTest.prototype.setup = function() {
      this.initialized = true;
      this.svg = d3.select("#" + this.name).append("svg");
      this.svg.attr({
        width: $("#" + this.name).width(),
        height: $("#" + this.name).height()
      });
      this.lineG = this.svg.append("g");
      this.lineG.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
      return this.path = this.lineG.append("path").attr("class", "timeline");
    };

    TimeLineTest.prototype.updateScales = function() {
      this.x = d3.time.scale().range([0, this.svg.attr("width") - (this.margin.left + this.margin.right)]).domain(d3.extent(this.points, function(d) {
        return d.timestamp;
      }));
      return this.y = d3.scale.linear().range([this.svg.attr("height") - (this.margin.top + this.margin.bottom), 0]).domain([
        0, d3.max(this.points, function(d) {
          return d.value;
        })
      ]);
    };

    TimeLineTest.prototype.updateAxes = function() {
      this.xaxis = d3.svg.axis().scale(this.x).orient("bottom");
      return this.yaxis = d3.svg.axis().scale(this.y).orient("left").tickFormat(d3.format('0.2s'));
    };

    TimeLineTest.prototype.clearAxes = function() {
      this.clearXAxis();
      return this.clearYAxis();
    };

    TimeLineTest.prototype.drawAxes = function() {
      this.drawXAxis();
      return this.drawYAxis();
    };

    TimeLineTest.prototype.clearXAxis = function() {
      return this.svg.select(".x.axis").remove();
    };

    TimeLineTest.prototype.clearYAxis = function() {
      return this.svg.select(".y.axis").remove();
    };

    TimeLineTest.prototype.drawXAxis = function() {
      return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(" + this.margin.left + "," + (this.svg.attr("height") - this.margin.bottom) + ")").call(this.xaxis);
    };

    TimeLineTest.prototype.drawYAxis = function() {
      return this.svg.append("g").attr("class", "y axis").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")").call(this.yaxis);
    };

    TimeLineTest.prototype.updateLine = function() {
      var _this = this;
      return this.line = d3.svg.line().x(function(d) {
        return _this.x(d.timestamp);
      }).y(function(d) {
        return _this.y(d.value);
      });
    };

    TimeLineTest.prototype.data = function(data) {
      var _this = this;
      if (this.points === null) this.points = new Array;
      this.points.push(data);
      if (this.points.length > 200) this.points = this.points.slice(-200);
      this.clearAxes();
      this.updateScales();
      this.updateAxes();
      this.drawAxes();
      this.updateLine();
      return this.path = this.svg.select(".timelinetest").data([this.points]).attr("d", function(d) {
        return _this.line(d);
      });
    };

    return TimeLineTest;

  })();

  window.handlerTypes.push(TimeLineTest);

}).call(this);