Clip the paths of the time series. Some more misc cleanup.

Goutte
1 parent c3008fb2
Showing 2 changed files with 46 additions and 28 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
@@ -251,7 +251,7 @@
   }());
   out$.TimeSeries = TimeSeries = (function(){
     TimeSeries.displayName = 'TimeSeries';
-    var prototype = TimeSeries.prototype, constructor = TimeSeries;
+    var RATIO, prototype = TimeSeries.prototype, constructor = TimeSeries;
     function TimeSeries(parameter, title, target, data, visible, container, options){
       this.parameter = parameter;
       this.title = title;
@@ -282,7 +282,7 @@
       });
     };
     TimeSeries.prototype.init = function(){
-      var dx, this$ = this;
+      var clipId, dx, this$ = this;
       console.info("Initializing plot of " + this + "…");
       this.margin = {
         top: 30,
@@ -303,7 +303,11 @@
       this.svg.attr("class", this.parameter + " " + this.target.slug);
       this.plotWrapper = this.svg.append('g');
       this.plotWrapper.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
-      this.path = this.plotWrapper.append('path').datum(this.data).classed('line', true);
+      clipId = "ts-clip-" + this.parameter + "-" + this.target.slug;
+      this.clip = this.svg.append("defs").append("svg:clipPath").attr("id", clipId).append("svg:rect").attr("x", 0).attr("y", 0);
+      this.pathWrapper = this.plotWrapper.append('g');
+      this.pathWrapper.attr("clip-path", "url(#" + clipId + ")");
+      this.path = this.pathWrapper.append('path').datum(this.data).classed('line', true);
       this.brush = this.plotWrapper.append("g").attr("class", "brush");
       this.mouseCanvas = this.plotWrapper.append("rect").style("fill", "none");
       this.plotWrapper.append('g').classed('x axis', true);
@@ -319,15 +323,18 @@
       this.cursorDate = this.focus.append("text").attr("class", "cursor-text cursor-date").attr("dx", dx).attr("dy", "1em");
       return this.resize();
     };
+    RATIO = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO;
     TimeSeries.prototype.resize = function(){
       var width, height;
-      width = jQuery(this.container).width() - this.margin.left - this.margin.right;
-      height = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * width;
+      width = Math.ceil($(this.container).width() - this.margin.left - this.margin.right);
+      height = Math.ceil(RATIO * width);
       this.plotWidth = width;
       this.plotHeight = height;
+      console.debug("Resizing " + this + ": " + width + " x " + height + "…");
       this.xScale.range([0, width]);
       this.yScale.range([height, 0]);
       this.svg.attr('width', width + this.margin.right + this.margin.left).attr('height', height + this.margin.top + this.margin.bottom);
+      this.clip.attr("width", width).attr("height", height);
       this.path.attr('d', this.line);
       this.xAxis.scale(this.xScale);
       this.yAxis.scale(this.yScale);
@@ -257,7 +257,16 @@ export class TimeSeries
     @plotWrapper.attr('transform',
                       'translate(' + @margin.left + ',' + @margin.top + ')')
  
-    @path = @plotWrapper.append('path')
+    clipId = "ts-clip-#{@parameter}-#{@target.slug}"
+    @clip = @svg.append("defs").append("svg:clipPath")
+                .attr("id", clipId)
+                .append("svg:rect")
+                .attr("x", 0)
+                .attr("y", 0)
+
+    @pathWrapper = @plotWrapper.append('g')
+    @pathWrapper.attr("clip-path", "url(\##{clipId})")
+    @path = @pathWrapper.append('path')
                         .datum(@data)
                         .classed('line', true)
  
@@ -267,39 +276,37 @@ export class TimeSeries
     # deprecated, use brush's 'overlay' child
     @mouseCanvas = @plotWrapper.append("rect")
                                .style("fill", "none")
-#                               .style("pointer-events", "all")
  
     @plotWrapper.append('g').classed('x axis', true)
     @plotWrapper.append('g').classed('y axis', true)
     @yAxisText = @plotWrapper.append("text")
-        .attr("transform", "rotate(-90)")
-        .attr("dy", "1em")
-        .style("text-anchor", "middle")
-        .text(@title)
+                             .attr("transform", "rotate(-90)")
+                             .attr("dy", "1em")
+                             .style("text-anchor", "middle")
+                             .text(@title)
     @yAxisTextTarget = @plotWrapper.append("text")
-        .attr("transform", "rotate(-90)")
-        .attr("dy", "1em")
-        .style("text-anchor", "middle")
-        .style("font-style", "oblique")
-        .text(@target.name)
+                                   .attr("transform", "rotate(-90)")
+                                   .attr("dy", "1em")
+                                   .style("text-anchor", "middle")
+                                   .style("font-style", "oblique")
+                                   .text(@target.name)
  
     @focus = @plotWrapper.append('g').style("display", "none")
  
     @cursorCircle = @focus.append("circle")
-                         .attr("class", "cursor-circle")
-                         .attr("r", 3)
+                          .attr("class", "cursor-circle")
+                          .attr("r", 3)
  
     dx = 8
     @cursorValueShadow = @focus.append("text")
-                              .attr("class", "cursor-text cursor-text-shadow")
-                              .attr("dx", dx)
-                              .attr("dy", "-.3em")
+                               .attr("class", "cursor-text cursor-text-shadow")
+                               .attr("dx", dx)
+                               .attr("dy", "-.3em")
  
     @cursorValue = @focus.append("text")
-                        .attr("class", "cursor-text cursor-value")
-                        .attr("dx", dx)
-                        .attr("dy", "-.3em")
-
+                         .attr("class", "cursor-text cursor-value")
+                         .attr("dx", dx)
+                         .attr("dy", "-.3em")
  
     @cursorDateShadow = @focus.append("text")
                               .attr("class", "cursor-text cursor-text-shadow")
@@ -313,14 +320,15 @@ export class TimeSeries
  
     @resize()
  
+  RATIO = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO
   resize: ->
-    width = jQuery(@container).width() - @margin.left - @margin.right
-    height = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * width
+    width  = Math.ceil($(@container).width() - @margin.left - @margin.right)
+    height = Math.ceil(RATIO * width)
  
     @plotWidth = width
     @plotHeight = height
  
-    #console.log("Resizing time series #{@title} of #{@target.name}: #{width} x #{height}")
+    console.debug("Resizing #{@}: #{width} x #{height}…")
  
     @xScale.range([0, width]);
     @yScale.range([height, 0]);
@@ -328,6 +336,9 @@ export class TimeSeries
     @svg.attr('width',  width + @margin.right + @margin.left)
         .attr('height', height + @margin.top + @margin.bottom)
  
+    @clip.attr("width", width)
+         .attr("height", height)
+
     @path.attr('d', @line)
  
     @xAxis.scale(@xScale)