From 10de6a8e43ffe5af455247fe2228b7d1257e5616 Mon Sep 17 00:00:00 2001
From: Daniel da Silva <daniel@developmentseed.org>
Date: Thu, 14 Apr 2016 09:43:35 +0100
Subject: [PATCH] Fix path clipping

---
 .../scripts/components/charts/chart-line.js   | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/assets/scripts/components/charts/chart-line.js b/app/assets/scripts/components/charts/chart-line.js
index 8b36719..25d9d07 100644
--- a/app/assets/scripts/components/charts/chart-line.js
+++ b/app/assets/scripts/components/charts/chart-line.js
@@ -294,8 +294,21 @@ var Chart = function (options) {
         .attr('height', _height);
 
       $svg.select('#clip rect')
+        // Since this is going to be applied inside the dataCanvas
+        // we have to compensate for the translate.
+        .attr('x', -margin.left)
+        .attr('y', -margin.top)
+        // Add some top and bottom space to avoid clipping the path.
         .attr('width', _width + margin.left)
-        .attr('height', _height);
+        .attr('height', _height + margin.top + margin.bottom);
+
+      // DEBUG:
+      // To view the area taken by the #clip rect.
+      // $dataCanvas.select('.data-canvas-shadow')
+      //   .attr('x', -margin.left)
+      //   .attr('y', -margin.top)
+      //   .attr('width', _width + margin.left)
+      //   .attr('height', _height + margin.top + margin.bottom);
 
       // Update scale ranges.
       x.range([0, _width]);
@@ -353,9 +366,14 @@ var Chart = function (options) {
     $svg.append('defs')
       .append('clipPath')
       .attr('id', 'clip')
-      .append('rect')
-      .attr('x', -margin.left) // Compensate for the dataCanvas translate.
-      .attr('y', 0);
+      .append('rect');
+
+    // DEBUG:
+    // To view the area taken by the #clip rect.
+    // $dataCanvas.append('rect')
+    //   .attr('class', 'data-canvas-shadow')
+    //   .style('fill', '#000')
+    //   .style('opacity', 0.16);
 
     $svg
       .attr('cursor', 'move')