From 27aceb9b9e1a425e7be04f58cde2cbfa67d440af Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Thu, 26 Mar 2020 16:29:18 +0000
Subject: [PATCH 01/11] Work on the new line chart

---
 .../stylesheets/components/_charts.scss       |  21 +-
 app/controllers/marine_controller.rb          | 222 +++++-----
 .../charts/chart-line/ChartLine.vue           | 392 +++++++++---------
 .../charts/chart-line/ChartLineDataset.vue    |  69 +++
 app/views/marine/index.html.erb               |  13 +-
 app/views/marine/sections/_coverage.html.erb  |   8 +-
 app/views/marine/sections/_ocean.html.erb     |  10 +-
 7 files changed, 421 insertions(+), 314 deletions(-)
 create mode 100644 app/javascript/components/charts/chart-line/ChartLineDataset.vue

diff --git a/app/assets/stylesheets/components/_charts.scss b/app/assets/stylesheets/components/_charts.scss
index e757101ea..5c7a4c6be 100644
--- a/app/assets/stylesheets/components/_charts.scss
+++ b/app/assets/stylesheets/components/_charts.scss
@@ -81,14 +81,23 @@ $chart-target-stroke-width: rem-calc(3);
   @import './charts/chart-dial';
   @import './charts/chart-row-pa';
   @import './charts/chart-row-target';
+  
+  &__legend-item {
+    @include flex;
+    @include flex-v-center;
+  } 
 
-  &__key {
-    background-color: $chart-aqua;
-    border-radius: 100%;
-    width: rem-calc(24); height: rem-calc(24);
+    &__legend-key  {
+      background-color: $chart-aqua;
+      border-radius: 100%;
+      width: rem-calc(24); height: rem-calc(24);
 
-    display: block;
-  }
+      display: block;
+    }
+
+    &__legend-text {
+      margin-left: rem-calc(6);
+    }
 }
 
 @import './charts/horizontal-bar-chart';
diff --git a/app/controllers/marine_controller.rb b/app/controllers/marine_controller.rb
index 4648f008a..9b9b2673c 100644
--- a/app/controllers/marine_controller.rb
+++ b/app/controllers/marine_controller.rb
@@ -156,232 +156,232 @@ def growth
     @protectedAreasGrowth = [
       {
         id: "Global",
-        dataset: [
+        datapoints: [
           {
-            year: 2000,
-            percent: 0.67
+            x: 2000,
+            y: 0.67
           },
           {
-            year: 2001,
-            percent: 0.73
+            x: 2001,
+            y: 0.73
           },
           {
-            year: 2002,
-            percent: 0.99
+            x: 2002,
+            y: 0.99
           },
           {
-            year: 2003,
-            percent: 1.00
+            x: 2003,
+            y: 1.00
           },
           {
-            year: 2004,
-            percent: 1.11
+            x: 2004,
+            y: 1.11
           },
           {
-            year: 2005,
-            percent: 1.13
+            x: 2005,
+            y: 1.13
           },
           {
-            year: 2006,
-            percent: 1.05
+            x: 2006,
+            y: 1.05
           },
           {
-            year: 2007,
-            percent: 1.43
+            x: 2007,
+            y: 1.43
           },
           {
-            year: 2008,
-            percent: 1.85
+            x: 2008,
+            y: 1.85
           },
           {
-            year: 2009,
-            percent: 2.32
+            x: 2009,
+            y: 2.32
           },
           {
-            year: 2010,
-            percent: 2.50
+            x: 2010,
+            y: 2.50
           },
           {
-            year: 2011,
-            percent: 2.53
+            x: 2011,
+            y: 2.53
           },
           {
-            year: 2012,
-            percent: 3.38
+            x: 2012,
+            y: 3.38
           },
           {
-            year: 2013,
-            percent: 3.47
+            x: 2013,
+            y: 3.47
           },
           {
-            year: 2014,
-            percent: 4.15
+            x: 2014,
+            y: 4.15
           },
           {
-            year: 2015,
-            percent: 4.43
+            x: 2015,
+            y: 4.43
           },
           {
-            year: 2016,
-            percent: 5.01
+            x: 2016,
+            y: 5.01
           },
           {
-            year: 2017,
-            percent: 6.4
+            x: 2017,
+            y: 6.4
           }
         ]
       },
       {
         id: "National",
-        dataset: [
+        datapoints: [
           {
-            year: 2000,
-            percent: 1.72
+            x: 2000,
+            y: 1.72
           },
           {
-            year: 2001,
-            percent: 1.88
+            x: 2001,
+            y: 1.88
           },
           {
-            year: 2002,
-            percent: 2.54
+            x: 2002,
+            y: 2.54
           },
           {
-            year: 2003,
-            percent: 2.57
+            x: 2003,
+            y: 2.57
           },
           {
-            year: 2004,
-            percent: 2.86
+            x: 2004,
+            y: 2.86
           },
           {
-            year: 2005,
-            percent: 2.89
+            x: 2005,
+            y: 2.89
           },
           {
-            year: 2006,
-            percent: 2.70
+            x: 2006,
+            y: 2.70
           },
           {
-            year: 2007,
-            percent: 3.68
+            x: 2007,
+            y: 3.68
           },
           {
-            year: 2008,
-            percent: 3.93
+            x: 2008,
+            y: 3.93
           },
           {
-            year: 2009,
-            percent: 5.13
+            x: 2009,
+            y: 5.13
           },
           {
-            year: 2010,
-            percent: 5.88
+            x: 2010,
+            y: 5.88
           },
           {
-            year: 2011,
-            percent: 5.94
+            x: 2011,
+            y: 5.94
           },
           {
-            year: 2012,
-            percent: 8.43
+            x: 2012,
+            y: 8.43
           },
           {
-            year: 2013,
-            percent: 8.65
+            x: 2013,
+            y: 8.65
           },
           {
-            year: 2014,
-            percent: 9.66
+            x: 2014,
+            y: 9.66
           },
           {
-            year: 2015,
-            percent: 10.36
+            x: 2015,
+            y: 10.36
           },
           {
-            year: 2016,
-            percent: 12.74
+            x: 2016,
+            y: 12.74
           },
           {
-            year: 2017,
-            percent: 16.02
+            x: 2017,
+            y: 16.02
           }
         ]
       },
       {
         id: "ABNJ",
-        dataset: [
+        datapoints: [
           {
-            year: 2000,
-            percent: 0.00
+            x: 2000,
+            y: 0.00
           },
           {
-            year: 2001,
-            percent: 0.00
+            x: 2001,
+            y: 0.00
           },
           {
-            year: 2002,
-            percent: 0.00
+            x: 2002,
+            y: 0.00
           },
           {
-            year: 2003,
-            percent: 0.00
+            x: 2003,
+            y: 0.00
           },
           {
-            year: 2004,
-            percent: 0.00
+            x: 2004,
+            y: 0.00
           },
           {
-            year: 2005,
-            percent: 0.00
+            x: 2005,
+            y: 0.00
           },
           {
-            year: 2006,
-            percent: 0.00
+            x: 2006,
+            y: 0.00
           },
           {
-            year: 2007,
-            percent: 0.00
+            x: 2007,
+            y: 0.00
           },
           {
-            year: 2008,
-            percent: 0.00
+            x: 2008,
+            y: 0.00
           },
           {
-            year: 2009,
-            percent: 0.00
+            x: 2009,
+            y: 0.00
           },
           {
-            year: 2010,
-            percent: 0.17
+            x: 2010,
+            y: 0.17
           },
           {
-            year: 2011,
-            percent: 0.17
+            x: 2011,
+            y: 0.17
           },
           {
-            year: 2012,
-            percent: 0.17
+            x: 2012,
+            y: 0.17
           },
           {
-            year: 2013,
-            percent: 0.17
+            x: 2013,
+            y: 0.17
           },
           {
-            year: 2014,
-            percent: 0.25
+            x: 2014,
+            y: 0.25
           },
           {
-            year: 2015,
-            percent: 0.25
+            x: 2015,
+            y: 0.25
           },
           {
-            year: 2016,
-            percent: 0.25
+            x: 2016,
+            y: 0.25
           },
           {
-            year: 2017,
-            percent: 1.18
+            x: 2017,
+            y: 1.18
           }
         ]
       }
diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index 7492716b6..41c8cd44e 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -1,231 +1,247 @@
 <template>
-  <div class="v-interactive-multiline sm-multiline">
-    <div class="v-interactive-multiline__tabs">
-
-      <chart-line-tab v-for="name, key in datasetNames" 
-        :key="key"
-        :name="name"
-        :selected="selectedTab"
-        class="v-interactive-multiline__tab-title" 
-        v-on:tabClicked="draw(name)"
-      ></chart-line-tab>
-
+  <div class="chart--line">
+    <div class="chart__wrapper-ie11">
+      <div class="chart__scrollable">
+        <div v-if="lines" class="chart__chart" style="width:100%;">
+          <svg width="100%" height="100%" :viewBox="`-70 -80 ${svg.width} ${svg.height}`" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" class="chart__svg">
+            <rect 
+              :x="-70"
+              :y="-30" 
+              :width="svg.width" 
+              :height="svg.height - svg.paddingTop" 
+              fill="#fff" />
+
+            <text v-if="axis" x="-70" y="-90" font-size="18">
+              <tspan v-for="t in axis.y" x="-70" :dy="24">{{ t }}</tspan>
+            </text>
+
+            <text v-for="y in yAxis" 
+              :x="-x.chartPadding" 
+              :y="y.coord "
+              text-anchor="end"
+              font-size="18"
+              font-weight="300"
+              transform="translate(0, 5)">{{ y.labelText }}%</text>
+
+            <text v-for="x in xAxis" 
+              :x="x.coord" 
+              :y="y.chartHeight + y.chartPadding" 
+              font-size="18"
+              font-weight="300"
+              text-anchor="middle">{{ x.labelText }}</text>
+
+            <polyline :points="xAxisLine" fill="none" stroke="black" />
+            <polyline :points="yAxisLine" fill="none" stroke="black" />
+
+            <chart-line-dataset 
+              v-for="line, index in lines"
+              :index="index"
+              :datapoints="normaliseDataset(line.datapoints)"
+              :path="getPath(line.datapoints)"
+              :middle="getPathMiddle(line.datapoints)"
+              :colour="colours[index]">
+            </chart-line-dataset>
+
+<!--             <template v-if="targets">
+              <chart-line-target-y v-for="target, index in targets"
+                :minX="normaliseX(x.min)" 
+                :maxX="normaliseX(x.max)" 
+                :y="normaliseY(target.y)" 
+                :title="target.title"
+                :colour="targetColours[index]">
+              </chart-line-target-y>
+            </template>
+
+            <template v-if="commitments">
+              <chart-line-target-x v-for="commitment, index in commitments"
+                :minY="normaliseY(y.min)" 
+                :maxY="normaliseY(y.max)" 
+                :x="normaliseX(commitment.x)"
+                :line="commitment.line"
+                :label="commitment.label">
+              </chart-line-target-x>
+            </template> -->
+          </svg>
+        </div>
+      </div>
     </div>
 
-    <div class="d3-svg v-interactive-multiline__chart"  :style="{ paddingTop: paddingTop }"></div>
-
-  </div>
+    <chart-legend v-if="legend" :show-numbers="true" :rows="legend" :colours="legendColours"></chart-legend>
+  </div>  
 </template>
 
 <script>
-  import ScrollMagic from 'scrollmagic'
-  import * as d3 from 'd3'
-
+  import ChartLineDataset from './ChartLineDataset'
   import ChartLineTab from './ChartLineTab'
+  // import ChartLineTargetX from './ChartLineTargetX'
+  // import ChartLineTargetY from './ChartLineTargetY'
+  // import ChartLegend from './ChartLegend'
 
   export default {
     name: 'chart-line',
 
-    components: { ChartLineTab },
+    components: { 
+      // ChartLineTargetX, ChartLineTargetY, 
+      ChartLineDataset, 
+      ChartLineTab
+      // ChartLegend 
+    },
 
     props: {
-      json: { required: true }
+      lines: {
+        type: Array, // [ { x: Number, y: Number } ]
+        required: true
+      },
+      targets: Array,
+      axis: Object,
+      commitments: Array,
+      legend: Array
     },
 
     data () {
       return {
-        config: {
-          width: 860,
-          height: 370,
-          margin: 80,
-          datapointRadius: 4,
-          yAxisMaxValue: 20,
-          xAxisNumberOfTicks: 8
+        svg: {
+          width: 1030,
+          height: 650,
+          paddingTop: 50
+        },
+        x: {
+          axisMarks: 6,
+          chartPadding: 24,
+          chartWidth: 890,
+          max: 0,
+          maxNormalised: 0,
+          min:0,
+          minNormalised:0,
+          precision: 1,
+        },
+        y: {
+          axisMarks: 8,
+          chartHeight: 500,
+          chartPadding: 34,
+          max: 0,
+          maxNormalised: 0,
+          min:0,
+          minNormalised:0,
+          precision: 1
         },
-        svg:'',
-        chart: '',
-        chartWidth: 0,
-        chartHeight: 0,
-        datasetNames: [],
-        scaleX: '',
-        scaleY: '',
-        selectedTab: ''
+        colours: [
+          {
+            line: '#207D94',
+            text: '#ffffff'
+          },
+          {
+            line: '#6FD9F2',
+            text: '#000000'
+          },
+          {
+            line: '#86BF37',
+            text: '#000000'
+          }
+        ],
+        legendColours: ['#207D94', '#6FD9F2', '#86BF37'],
+        targetColours: ['rgba(29, 125, 166, 0.4)', 'rgba(113, 163, 43, 0.4)']
+      }
+    },
+
+    computed: {
+      xAxis () {
+        return this.getAxis('x')
+      },
+
+      yAxis () {
+        return this.getAxis('y')
+      },
+
+      xAxisLine () {
+        return `${this.x.minNormalised},${this.y.minNormalised} ${this.x.maxNormalised},${this.y.minNormalised}`
+      },
+
+      yAxisLine () {
+        return `${this.x.minNormalised},${this.y.minNormalised} ${this.x.minNormalised},${this.y.maxNormalised}`
       }
     },
 
     created () {
-      this.chartWidth = this.config.width - this.config.margin
-      this.chartHeight = this.config.height - this.config.margin
+      this.x.min = this.getMinMax('min', 'x')
+      this.x.max = this.getMinMax('max', 'x')
+      this.y.max = this.getMinMax('max', 'y')
+      this.x.minNormalised = this.normaliseX(this.x.min)
+      this.x.maxNormalised = this.normaliseX(this.x.max)
+      this.y.minNormalised = this.normaliseY(this.y.min)
+      this.y.maxNormalised = this.normaliseY(this.y.max)
     },
 
     mounted () {
-      this.createButtons()
-      this.renderChart()
-
-      // animate in the first series so that chart isn't  empty
-      const multilineController = new ScrollMagic.Controller()
-
-      new ScrollMagic.Scene({ triggerElement: '.sm-multiline', reverse: false })
-        .on('start', () => {
-          this.draw(this.datasetNames[0])
-        })
-        .addTo(multilineController)
+      
     },
 
     methods: {
-      createButtons (){
-        this.json.forEach((dataset) => {
-          this.datasetNames.push(dataset.id)
+      getPath(dataset) {
+        let path = ''
+        
+        dataset.forEach((point, index) => {
+          let command = index == 0 ? 'M' : 'L'
+
+          path += ` ${command} ${this.normaliseX(point.x)} ${this.normaliseY(point.y)}`
         })
+
+        return path
       },
 
-      renderChart (){
-        const data = this.json
-        const parseTime = d3.timeParse("%Y")
-
-        // set the ranges
-        const x = d3.scaleTime().range([0, this.chartWidth])
-        const y = d3.scaleLinear().range([this.chartHeight, 0])
-
-        // define the line
-        const line = d3.line()
-          .x(function(d) { return x(parseTime(d.year)) })
-          .y(function(d) { return y(d.percent) })
-
-        // Scale the range of the data
-        x.domain([
-          d3.min(data, function(c) { 
-            return d3.min(c.dataset, function(d){ return parseTime(d.year) })
-          }),
-          d3.max(data, function(c) { 
-            return d3.max(c.dataset, function(d){ return parseTime(d.year) })
-          })
-        ])
-
-        y.domain([0, this.config.yAxisMaxValue])
-
-        // create svg
-        this.svg = this.createSVG()
-
-        // create chart group
-        this.chart = this.svg.append('g')
-          .attr('class', 'chart')
-          .attr('width', this.chartWidth)
-          .attr('height', this.chartHeight)
-          .attr('transform', 'translate(' + this.config.margin/2 + ',' + this.config.margin/2 + ')')
-
-        // add y gridlines
-        this.chart.append('g')
-          .attr('class', 'v-interactive-multiline__gridlines')
-          .call(d3.axisLeft(y).tickSize(-this.chartWidth, 0, 0).tickFormat(''))
-
-        // add x axis
-        this.chart.append('g')
-          .attr('class', 'v-interactive-multiline__axis')
-          .attr('transform', 'translate(0,' + this.chartHeight + ')')
-          .call(d3.axisBottom(x).ticks(this.config.xAxisNumberOfTicks))
-
-        // add y axis
-        this.chart.append('g')
-          .attr('class', 'v-interactive-multiline__axis')
-          .call(d3.axisLeft(y).tickFormat(function(d){ return d + '%'}))
-
-        this.scaleX = x
-        this.scaleY = y
-
-        // add data path
-        const dataset = this.chart
-          .selectAll('.dataset')
-          .data(data)
-          .enter().append('path')
-          .attr('class', 'v-interactive-multiline__line')
-          .attr('data-name', function(d) { return d.id })
-          .attr('d', function(d) { return line(d.dataset) })
-          .attr('stroke', 'black')
-          .attr('fill', 'none')
-
-        // add a group for each set of datapoints
-        const datapointWrappers = this.chart
-          .selectAll('.datapoint-wrappers')
-          .data(data)
-          .enter()
-          .append('g')
-          .attr('class', 'v-interactive-multiline__datapoints')
-          .attr('data-datapoints', function(d) { return d.id })
-
-        // add a group for each data point
-        const datapoints = datapointWrappers.selectAll('.datapoints')
-          .data(function(d){ return d.dataset })
-          .enter()
-          .append('g')
-          .attr('class', 'datapoint-group')
-
-        // add the tooltip
-        datapoints.append('text')
-          .text(function (d) { return d.percent + '%' })
-          .attr('data-tooltip', function(d) { 
-            return d3.select(this.parentNode.parentNode).datum().id + '-' + d.year
-          })
-          .attr('class', 'v-interactive-multiline__tooltip')
-          .attr('transform', function (d) { 
-            return 'translate(' + x(parseTime(d.year)) + ', ' + (y(d.percent) - 20) + ')' 
-          })
+      getPathMiddle (dataset) {
+        //used to add circle to a dataset with key used in the legend
+        let middle = dataset[Math.floor(dataset.length/2)]
 
-        // add the circle datapoint
-        datapoints.append('circle')
-          .attr('cx', (d) => { return this.scaleX(parseTime(d.year)) })
-          .attr('cy', (d) => { return this.scaleY(d.percent) })
-          .attr('r', this.config.datapointRadius)
-          .attr('class', 'v-interactive-multiline__datapoint')
-          .on('mouseenter', function (d) {
-            const id = d3.select(this.parentNode.parentNode).datum().id + '-' + d.year
-
-            $('[data-tooltip="' + id + '"]')
-              .attr('class', 'v-interactive-multiline__tooltip v-interactive-multiline__tooltip-active')
-            }
-          )
-          .on('mouseleave', function (d) {
-            const id = d3.select(this.parentNode.parentNode).datum().id + '-' + d.year
-
-            $('[data-tooltip="' + id + '"]')
-              .attr('class', 'v-interactive-multiline__tooltip')
-            }
-          )
+        return { x: this.normaliseX(middle.x), y: this.normaliseY(middle.y) }
       },
 
-      createSVG (){
-        const svg = d3.select('.d3-svg')
-          .append('svg')
-          .attr('class', 'v-interactive-multiline__svg')
-          .attr('xmlns', 'http://www.w3.org/1999/xhtml')
-          .attr('viewBox', '0 0 ' + this.config.width + ' ' + this.config.height)
-          .attr('viewport', this.config.width + 'x' + this.config.height)
-          .attr('preserveAspectRatio', 'xMidYMid')
-          .attr('width', '100%')
-          .attr('height', '100%')
-
-        return svg
+      getAxis (axis) {
+        let array = [], n = this[axis].min
+        const incrementor = (this[axis].max - this[axis].min)/ this[axis].axisMarks
+
+        while( n < this[axis].max + incrementor) {
+          array.push({
+            coord: this[`normalise${axis.toUpperCase()}`](n),
+            labelText: Math.ceil(n/this[axis].precision)*this[axis].precision
+          })
+
+          n += incrementor
+        }
+
+        return array
       },
 
-      draw (name){
-        this.selectedTab = name
+      getMinMax(type, prop) {
+        let array = []
 
-        const lineClass = 'v-interactive-multiline__line',
-          activeLineClasses = lineClass + ' v-interactive-multiline__line-active',
-          datapointClass = 'v-interactive-multiline__datapoints',
-          activeDatapointClasses = datapointClass + ' v-interactive-multiline__datapoints-active'
+        this.lines.forEach(line => {
+          array.push(Math[type](...line.datapoints.map((t) => {
+            return t[prop]
+          })))
+        }) 
+      
+        return Math.max(...array)
+      },
 
-        $('.' + lineClass).attr('class', lineClass)
-        $('[data-name="' + name + '"]').attr('class', activeLineClasses)
+      normaliseDataset (dataset) {
+        console.log(dataset)
+        const normalisedDataset = dataset.map((datapoint) => {
+          return { x: this.normaliseX(datapoint.x), y: this.normaliseY(datapoint.y) }
+        })
+        console.log(normalisedDataset)
+        return normalisedDataset
+      },
 
-        $('.' + datapointClass).attr('class', datapointClass)
-        $('[data-datapoints="' + name + '"]').attr('class', activeDatapointClasses)
-      }
-    },
+      normaliseX (value) {
+        // subtract the min value in case the axis doesn't start at 0
+        return (((value - this.x.min) / (this.x.max - this.x.min)) * this.x.chartWidth)
+      },
 
-    computed: {
-      paddingTop: function () {
-        return (this.config.height / this.config.width) * 100 + '%'
+      normaliseY (value) {
+        // y origin is at the top so subtract axis value from height
+        // subtract the min value incase the axis doesn't start at 0
+        return (this.y.chartHeight - ((value - this.y.min) / (this.y.max - this.y.min)) * this.y.chartHeight)
       }
     }
   }
diff --git a/app/javascript/components/charts/chart-line/ChartLineDataset.vue b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
new file mode 100644
index 000000000..7f89d998c
--- /dev/null
+++ b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
@@ -0,0 +1,69 @@
+<template>
+  <g> 
+    <path 
+      :d="path" 
+      fill="none" 
+      :stroke="colour.line" 
+      stroke-width="2" 
+    />
+
+    <circle 
+      v-for="datapoint in datapoints"
+      :fill="colour.line"
+      :cx="datapoint.x" 
+      :cy="datapoint.y" 
+      r="8" 
+    />
+    
+    <template v-if="hasLegend">
+      <circle 
+        :fill="colour.line"
+        :cx="middle.x" 
+        :cy="middle.y" 
+        r="18">{{ index + 1 }}
+      </circle>
+
+      <text 
+        :fill="colour.text"
+        :x="middle.x" 
+        :y="middle.y" 
+        dominant-baseline="middle"
+        font-size="18" 
+        font-weight="900"
+        text-anchor="middle">{{ index + 1 }}
+      </text>
+    </template>
+  </g>
+</template>
+
+<script>
+  export default {
+    name: 'chart-line-dataset',
+
+    props: {
+      colour: {
+        type: Object,
+        required: true
+      },
+      datapoints: {
+        type: Array
+      },
+      hasLegend: {
+        default: false,
+        type: Boolean
+      },
+      index: {
+        type: Number,
+        required: true
+      },
+      middle: {
+        type: Object,
+        required: true
+      },
+      path: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/app/views/marine/index.html.erb b/app/views/marine/index.html.erb
index 9a5e780c4..c2122ffae 100644
--- a/app/views/marine/index.html.erb
+++ b/app/views/marine/index.html.erb
@@ -23,4 +23,15 @@
   </p>
 </div> -->
 
-<%= render partial: "marine/sections/ocean" %>
+<%= render partial: "marine/sections/ocean", locals: {
+  national: marine_stats('national_waters_percentage'),
+  national_coverage: marine_stats('national_waters_pa_coverage_percentage'),
+  high_seas: marine_stats('global_ocean_percentage'),
+  high_seas_coverage: marine_stats('high_seas_pa_coverage_percentage')
+} %>
+
+
+<%= render partial: "marine/sections/coverage", locals: {
+  cms_page: @cms_page,
+  
+} %>
\ No newline at end of file
diff --git a/app/views/marine/sections/_coverage.html.erb b/app/views/marine/sections/_coverage.html.erb
index afc701808..b0dccae87 100644
--- a/app/views/marine/sections/_coverage.html.erb
+++ b/app/views/marine/sections/_coverage.html.erb
@@ -1,9 +1,11 @@
 <section class="container section-padding bg--grey-xlight">
   <div class="container--medium">
-    <h2><%= cms_fragment_render(:section_coverage_title, @cms_page) %></h2>
-    <div><%= cms_fragment_render(:section_coverage_content, @cms_page) %></div>
+    <h2><%= cms_fragment_render(:section_coverage_title, cms_page) %></h2>
+    <div><%= cms_fragment_render(:section_coverage_content, cms_page) %></div>
     <div>
-      <chart-line :json="<%= @protectedAreasGrowth %>"></chart-line>
+      <chart-line 
+        :lines="<%= @protectedAreasGrowth %>"
+      ></chart-line>
     </div>
   </div>
 </section>
\ No newline at end of file
diff --git a/app/views/marine/sections/_ocean.html.erb b/app/views/marine/sections/_ocean.html.erb
index 9c184a99f..e487f40ce 100644
--- a/app/views/marine/sections/_ocean.html.erb
+++ b/app/views/marine/sections/_ocean.html.erb
@@ -4,13 +4,13 @@
     <div><%= cms_fragment_render(:section_ocean_content, @cms_page) %></div>
     <div>
       <h3>National waters</h3>
-      <chart-row-pa percent="60" coverage="15" ></chart-row-pa>
+      <chart-row-pa percent="<%= national %>" coverage="<%= national_coverage %>" ></chart-row-pa>
 
       <h3>High seas</h3>
-      <chart-row-pa percent="40" coverage="10" ></chart-row-pa>
-      <div class="flex flex-v-center">
-        <span class="chart__key"></span>
-        <span>% of Protected Area Coverage</span>
+      <chart-row-pa percent="<%= high_seas %>" coverage="<%= high_seas_coverage %>" ></chart-row-pa>
+      <div class="chart__legend-item">
+        <span class="chart__legend-key"></span>
+        <span class="chart__legend-text">% of Protected Area Coverage</span>
       </div>
     </div>
   </div>

From 9f8a5e001cb2a1c400cb8a74f28b2956e1cd1a27 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Thu, 26 Mar 2020 16:49:29 +0000
Subject: [PATCH 02/11] Add legend to new line chart

---
 .../stylesheets/components/_charts.scss       |  18 +-
 .../components/charts/_chart-legend.scss      |  28 ++
 app/controllers/marine_controller.rb          | 270 ++++--------------
 .../charts/chart-line/ChartLegend.vue         |  61 ++++
 .../charts/chart-line/ChartLine.vue           |  28 +-
 5 files changed, 166 insertions(+), 239 deletions(-)
 create mode 100644 app/assets/stylesheets/components/charts/_chart-legend.scss
 create mode 100644 app/javascript/components/charts/chart-line/ChartLegend.vue

diff --git a/app/assets/stylesheets/components/_charts.scss b/app/assets/stylesheets/components/_charts.scss
index 5c7a4c6be..583c6cb36 100644
--- a/app/assets/stylesheets/components/_charts.scss
+++ b/app/assets/stylesheets/components/_charts.scss
@@ -79,25 +79,9 @@ $chart-target-stroke-width: rem-calc(3);
 // charts
 //--------------------------------------------------
   @import './charts/chart-dial';
+  @import './charts/chart-legend';
   @import './charts/chart-row-pa';
   @import './charts/chart-row-target';
-  
-  &__legend-item {
-    @include flex;
-    @include flex-v-center;
-  } 
-
-    &__legend-key  {
-      background-color: $chart-aqua;
-      border-radius: 100%;
-      width: rem-calc(24); height: rem-calc(24);
-
-      display: block;
-    }
-
-    &__legend-text {
-      margin-left: rem-calc(6);
-    }
 }
 
 @import './charts/horizontal-bar-chart';
diff --git a/app/assets/stylesheets/components/charts/_chart-legend.scss b/app/assets/stylesheets/components/charts/_chart-legend.scss
new file mode 100644
index 000000000..0358b8057
--- /dev/null
+++ b/app/assets/stylesheets/components/charts/_chart-legend.scss
@@ -0,0 +1,28 @@
+//--------------------------------------------------
+// classes
+//--------------------------------------------------
+  &--legend {
+    @include flex;
+    @include flex-wrap;
+    @include ul-unstyled;
+    margin: rem-calc(14 0);
+  }
+
+    &__legend-item {
+      @include flex;
+      @include flex-v-center;
+      margin-right: rem-calc(14);
+    } 
+
+      &__legend-key  {
+        @include flex-no-shrink;
+        background-color: $chart-aqua;
+        border-radius: 100%;
+        width: rem-calc(24); height: rem-calc(24);
+
+        display: block;
+      }
+
+      &__legend-text {
+        margin-left: rem-calc(6);
+      }
\ No newline at end of file
diff --git a/app/controllers/marine_controller.rb b/app/controllers/marine_controller.rb
index 9b9b2673c..cba7872c5 100644
--- a/app/controllers/marine_controller.rb
+++ b/app/controllers/marine_controller.rb
@@ -157,232 +157,70 @@ def growth
       {
         id: "Global",
         datapoints: [
-          {
-            x: 2000,
-            y: 0.67
-          },
-          {
-            x: 2001,
-            y: 0.73
-          },
-          {
-            x: 2002,
-            y: 0.99
-          },
-          {
-            x: 2003,
-            y: 1.00
-          },
-          {
-            x: 2004,
-            y: 1.11
-          },
-          {
-            x: 2005,
-            y: 1.13
-          },
-          {
-            x: 2006,
-            y: 1.05
-          },
-          {
-            x: 2007,
-            y: 1.43
-          },
-          {
-            x: 2008,
-            y: 1.85
-          },
-          {
-            x: 2009,
-            y: 2.32
-          },
-          {
-            x: 2010,
-            y: 2.50
-          },
-          {
-            x: 2011,
-            y: 2.53
-          },
-          {
-            x: 2012,
-            y: 3.38
-          },
-          {
-            x: 2013,
-            y: 3.47
-          },
-          {
-            x: 2014,
-            y: 4.15
-          },
-          {
-            x: 2015,
-            y: 4.43
-          },
-          {
-            x: 2016,
-            y: 5.01
-          },
-          {
-            x: 2017,
-            y: 6.4
-          }
+          { x: 2000, y: 0.67 },
+          { x: 2001, y: 0.73 },
+          { x: 2002, y: 0.99 },
+          { x: 2003, y: 1.00 },
+          { x: 2004, y: 1.11 },
+          { x: 2005, y: 1.13 },
+          { x: 2006, y: 1.05 },
+          { x: 2007, y: 1.43 },
+          { x: 2008, y: 1.85 },
+          { x: 2009, y: 2.32 },
+          { x: 2010, y: 2.50 },
+          { x: 2011, y: 2.53 },
+          { x: 2012, y: 3.38 },
+          { x: 2013, y: 3.47 },
+          { x: 2014, y: 4.15 },
+          { x: 2015, y: 4.43 },
+          { x: 2016, y: 5.01 },
+          { x: 2017, y: 6.4 }
         ]
       },
       {
         id: "National",
         datapoints: [
-          {
-            x: 2000,
-            y: 1.72
-          },
-          {
-            x: 2001,
-            y: 1.88
-          },
-          {
-            x: 2002,
-            y: 2.54
-          },
-          {
-            x: 2003,
-            y: 2.57
-          },
-          {
-            x: 2004,
-            y: 2.86
-          },
-          {
-            x: 2005,
-            y: 2.89
-          },
-          {
-            x: 2006,
-            y: 2.70
-          },
-          {
-            x: 2007,
-            y: 3.68
-          },
-          {
-            x: 2008,
-            y: 3.93
-          },
-          {
-            x: 2009,
-            y: 5.13
-          },
-          {
-            x: 2010,
-            y: 5.88
-          },
-          {
-            x: 2011,
-            y: 5.94
-          },
-          {
-            x: 2012,
-            y: 8.43
-          },
-          {
-            x: 2013,
-            y: 8.65
-          },
-          {
-            x: 2014,
-            y: 9.66
-          },
-          {
-            x: 2015,
-            y: 10.36
-          },
-          {
-            x: 2016,
-            y: 12.74
-          },
-          {
-            x: 2017,
-            y: 16.02
-          }
+          { x: 2000, y: 1.72 },
+          { x: 2001, y: 1.88 },
+          { x: 2002, y: 2.54 },
+          { x: 2003, y: 2.57 },
+          { x: 2004, y: 2.86 },
+          { x: 2005, y: 2.89 },
+          { x: 2006, y: 2.70 },
+          { x: 2007, y: 3.68 },
+          { x: 2008, y: 3.93 },
+          { x: 2009, y: 5.13 },
+          { x: 2010, y: 5.88 },
+          { x: 2011, y: 5.94 },
+          { x: 2012, y: 8.43 },
+          { x: 2013, y: 8.65 },
+          { x: 2014, y: 9.66 },
+          { x: 2015, y: 10.36 },
+          { x: 2016, y: 12.74 },
+          { x: 2017, y: 16.02 }
         ]
       },
       {
         id: "ABNJ",
         datapoints: [
-          {
-            x: 2000,
-            y: 0.00
-          },
-          {
-            x: 2001,
-            y: 0.00
-          },
-          {
-            x: 2002,
-            y: 0.00
-          },
-          {
-            x: 2003,
-            y: 0.00
-          },
-          {
-            x: 2004,
-            y: 0.00
-          },
-          {
-            x: 2005,
-            y: 0.00
-          },
-          {
-            x: 2006,
-            y: 0.00
-          },
-          {
-            x: 2007,
-            y: 0.00
-          },
-          {
-            x: 2008,
-            y: 0.00
-          },
-          {
-            x: 2009,
-            y: 0.00
-          },
-          {
-            x: 2010,
-            y: 0.17
-          },
-          {
-            x: 2011,
-            y: 0.17
-          },
-          {
-            x: 2012,
-            y: 0.17
-          },
-          {
-            x: 2013,
-            y: 0.17
-          },
-          {
-            x: 2014,
-            y: 0.25
-          },
-          {
-            x: 2015,
-            y: 0.25
-          },
-          {
-            x: 2016,
-            y: 0.25
-          },
-          {
-            x: 2017,
-            y: 1.18
-          }
+          { x: 2000, y: 0.00 },
+          { x: 2001, y: 0.00 },
+          { x: 2002, y: 0.00 },
+          { x: 2003, y: 0.00 },
+          { x: 2004, y: 0.00 },
+          { x: 2005, y: 0.00 },
+          { x: 2006, y: 0.00 },
+          { x: 2007, y: 0.00 },
+          { x: 2008, y: 0.00 },
+          { x: 2009, y: 0.00 },
+          { x: 2010, y: 0.17 },
+          { x: 2011, y: 0.17 },
+          { x: 2012, y: 0.17 },
+          { x: 2013, y: 0.17 },
+          { x: 2014, y: 0.25 },
+          { x: 2015, y: 0.25 },
+          { x: 2016, y: 0.25 },
+          { x: 2017, y: 1.18 }
         ]
       }
     ].to_json
diff --git a/app/javascript/components/charts/chart-line/ChartLegend.vue b/app/javascript/components/charts/chart-line/ChartLegend.vue
new file mode 100644
index 000000000..b8e01e5bd
--- /dev/null
+++ b/app/javascript/components/charts/chart-line/ChartLegend.vue
@@ -0,0 +1,61 @@
+<template>
+  <ul class="chart--legend">
+    <li v-for="row, index in rows" class="chart__legend-item" :class="themeClass">
+      <span v-if="row.line" class="chart__legend-key" :style="lineStyle"></span>
+      <span v-else class="chart__legend-key" :style="style(index)"></span>
+      <span v-if="showNumbers" class="chart__legend-text">{{ index + 1 }}.</span> 
+      <span class="chart__legend-text">{{ row.title }}</span>
+    </li>
+  </ul>
+</template>
+
+<script>
+  export default {
+    name: 'chart-legend',
+
+    props: {
+      rows: {
+        required: true,
+        type: Array //[ { title: String } ]
+      },
+      showNumbers: {
+        default: false,
+        type: Boolean
+      },
+      theme: String,
+      colours: Array
+    },
+
+    data () {
+      return {
+        lineStyle: {
+          'border-top': 'dashed 1px #871313',
+          'background-color': 'transparent',
+          'height': 0
+        }
+      }
+    },
+
+    computed: {
+      themeClass () {
+        return `theme--${this.theme}`
+      }
+    },
+
+    methods: {
+      style (index) {
+        let styling = {}
+
+        if(this.colours) {
+          const colour = this.colours[index]
+
+          styling['background-color'] = this.colours[index]
+
+          if(colour == '#ffffff') { styling['border'] = 'solid 1px #cccccc' } 
+        }
+
+        return styling
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index 41c8cd44e..6f0996722 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -66,7 +66,11 @@
       </div>
     </div>
 
-    <chart-legend v-if="legend" :show-numbers="true" :rows="legend" :colours="legendColours"></chart-legend>
+    <chart-legend 
+      v-if="showLegend"
+      :colours="legendColours"
+      :rows="getLegend()"
+    />
   </div>  
 </template>
 
@@ -75,7 +79,7 @@
   import ChartLineTab from './ChartLineTab'
   // import ChartLineTargetX from './ChartLineTargetX'
   // import ChartLineTargetY from './ChartLineTargetY'
-  // import ChartLegend from './ChartLegend'
+  import ChartLegend from './ChartLegend'
 
   export default {
     name: 'chart-line',
@@ -83,8 +87,8 @@
     components: { 
       // ChartLineTargetX, ChartLineTargetY, 
       ChartLineDataset, 
-      ChartLineTab
-      // ChartLegend 
+      ChartLineTab,
+      ChartLegend 
     },
 
     props: {
@@ -95,7 +99,10 @@
       targets: Array,
       axis: Object,
       commitments: Array,
-      legend: Array
+      showLegend: {
+        default: true,
+        type: Boolean
+      }
     },
 
     data () {
@@ -139,8 +146,9 @@
             text: '#000000'
           }
         ],
+        legend: [],
         legendColours: ['#207D94', '#6FD9F2', '#86BF37'],
-        targetColours: ['rgba(29, 125, 166, 0.4)', 'rgba(113, 163, 43, 0.4)']
+        // targetColours: ['rgba(29, 125, 166, 0.4)', 'rgba(113, 163, 43, 0.4)']
       }
     },
 
@@ -177,6 +185,14 @@
     },
 
     methods: {
+      getLegend (){
+        const legend = this.lines.map((dataset) => {
+          return { title: dataset.id }
+        })
+
+        return legend
+      },
+
       getPath(dataset) {
         let path = ''
         

From e56186f63d85fcfaca2867f1a9382819c4270728 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Fri, 27 Mar 2020 09:56:42 +0000
Subject: [PATCH 03/11] Add in temporary tooltip

---
 .../charts/chart-line/ChartLine.vue           |  8 +-
 .../charts/chart-line/ChartLineDataset.vue    | 16 ++--
 .../charts/chart-line/ChartPopup.vue          | 88 +++++++++++++++++++
 3 files changed, 104 insertions(+), 8 deletions(-)
 create mode 100644 app/javascript/components/charts/chart-line/ChartPopup.vue

diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index 6f0996722..fb702fc91 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -113,7 +113,7 @@
           paddingTop: 50
         },
         x: {
-          axisMarks: 6,
+          axisMarks: 8,
           chartPadding: 24,
           chartWidth: 890,
           max: 0,
@@ -243,7 +243,11 @@
       normaliseDataset (dataset) {
         console.log(dataset)
         const normalisedDataset = dataset.map((datapoint) => {
-          return { x: this.normaliseX(datapoint.x), y: this.normaliseY(datapoint.y) }
+          return { 
+            value: datapoint.y + '%',
+            x: this.normaliseX(datapoint.x),
+            y: this.normaliseY(datapoint.y)
+          }
         })
         console.log(normalisedDataset)
         return normalisedDataset
diff --git a/app/javascript/components/charts/chart-line/ChartLineDataset.vue b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
index 7f89d998c..35f44c0f4 100644
--- a/app/javascript/components/charts/chart-line/ChartLineDataset.vue
+++ b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
@@ -6,13 +6,13 @@
       :stroke="colour.line" 
       stroke-width="2" 
     />
-
-    <circle 
+    
+    <chart-popup
       v-for="datapoint in datapoints"
-      :fill="colour.line"
-      :cx="datapoint.x" 
-      :cy="datapoint.y" 
-      r="8" 
+      :colour="colour.line"
+      :x="datapoint.x" 
+      :y="datapoint.y" 
+      :text="datapoint.value"
     />
     
     <template v-if="hasLegend">
@@ -37,9 +37,13 @@
 </template>
 
 <script>
+  import ChartPopup from './ChartPopup.vue'
+
   export default {
     name: 'chart-line-dataset',
 
+    components: { ChartPopup },
+
     props: {
       colour: {
         type: Object,
diff --git a/app/javascript/components/charts/chart-line/ChartPopup.vue b/app/javascript/components/charts/chart-line/ChartPopup.vue
new file mode 100644
index 000000000..5475de0ef
--- /dev/null
+++ b/app/javascript/components/charts/chart-line/ChartPopup.vue
@@ -0,0 +1,88 @@
+<template>
+  <g>
+    <circle
+      :fill="colour"
+      :cx="x" 
+      :cy="y" 
+      r="8"
+      @mouseover="togglePopup()"
+      @mouseleave="togglePopup()"
+    />
+    
+    <!-- <polyline 
+      v-show="showPopup"
+      :points="xAxisLine" 
+      fill="none" 
+      stroke="black" 
+    /> -->
+    <g
+      v-show="showPopup"
+      :transform="`translate(${coordX}, ${coordY})`"
+    >
+      <path 
+        d="m-1.5,-8.54687c-3,-22 -50,-14 -50.5,-14.45313c0.5,0.45313 -0.5,-58.54687 -0.5,-58.54687c0,0 104,1 104,1c0,0 1,57 0.5,56.54687c0.5,0.45313 -43.5,2.45313 -44,2c0.5,0.45313 -6.5,35.45313 -9.5,13.45313z" 
+        stroke-width="1.5" 
+        stroke="#000" 
+        fill="#000"
+      />
+      <text
+        font-size="26"
+        font-weight="500"
+        fill="#fff"
+        text-anchor="middle"
+        dy="-30"
+      >
+        {{ text }}
+      </text>
+    </g>
+  </g>
+</template>
+
+<script>
+export default {
+  name: 'chart-popup',
+
+  props: {
+    // showPopup: {
+    //   type: Boolean
+    // },
+    colour: {
+      required: true,
+      type: String
+    },
+    text: {
+      required: true,
+      type: Number
+    },
+    x: {
+      required: true,
+      type: Number
+    },
+    y: {
+      required: true,
+      type: Number
+    }
+  },
+
+  data () {
+    return {
+      showPopup: false
+    }
+  },
+
+  computed: {
+    coordX () {
+      return this.x
+    },
+    coordY () {
+      return this.y - 10
+    }
+  },
+
+  methods: {
+    togglePopup () {
+      this.showPopup = !this.showPopup
+    }
+  }
+}
+</script>
\ No newline at end of file

From d1e6178078a36f8cc4336bfab332401a94c72cba Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Fri, 27 Mar 2020 15:50:27 +0000
Subject: [PATCH 04/11] Add in correct toolip svg

---
 app/controllers/marine_controller.rb          | 140 +++++++++---------
 .../charts/chart-line/ChartPopup.vue          |  29 ++--
 2 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/app/controllers/marine_controller.rb b/app/controllers/marine_controller.rb
index cba7872c5..5b4bfb6e1 100644
--- a/app/controllers/marine_controller.rb
+++ b/app/controllers/marine_controller.rb
@@ -155,75 +155,81 @@ def marine_statistics
   def growth
     @protectedAreasGrowth = [
       {
-        id: "Global",
-        datapoints: [
-          { x: 2000, y: 0.67 },
-          { x: 2001, y: 0.73 },
-          { x: 2002, y: 0.99 },
-          { x: 2003, y: 1.00 },
-          { x: 2004, y: 1.11 },
-          { x: 2005, y: 1.13 },
-          { x: 2006, y: 1.05 },
-          { x: 2007, y: 1.43 },
-          { x: 2008, y: 1.85 },
-          { x: 2009, y: 2.32 },
-          { x: 2010, y: 2.50 },
-          { x: 2011, y: 2.53 },
-          { x: 2012, y: 3.38 },
-          { x: 2013, y: 3.47 },
-          { x: 2014, y: 4.15 },
-          { x: 2015, y: 4.43 },
-          { x: 2016, y: 5.01 },
-          { x: 2017, y: 6.4 }
-        ]
-      },
-      {
-        id: "National",
-        datapoints: [
-          { x: 2000, y: 1.72 },
-          { x: 2001, y: 1.88 },
-          { x: 2002, y: 2.54 },
-          { x: 2003, y: 2.57 },
-          { x: 2004, y: 2.86 },
-          { x: 2005, y: 2.89 },
-          { x: 2006, y: 2.70 },
-          { x: 2007, y: 3.68 },
-          { x: 2008, y: 3.93 },
-          { x: 2009, y: 5.13 },
-          { x: 2010, y: 5.88 },
-          { x: 2011, y: 5.94 },
-          { x: 2012, y: 8.43 },
-          { x: 2013, y: 8.65 },
-          { x: 2014, y: 9.66 },
-          { x: 2015, y: 10.36 },
-          { x: 2016, y: 12.74 },
-          { x: 2017, y: 16.02 }
-        ]
-      },
-      {
-        id: "ABNJ",
-        datapoints: [
-          { x: 2000, y: 0.00 },
-          { x: 2001, y: 0.00 },
-          { x: 2002, y: 0.00 },
-          { x: 2003, y: 0.00 },
-          { x: 2004, y: 0.00 },
-          { x: 2005, y: 0.00 },
-          { x: 2006, y: 0.00 },
-          { x: 2007, y: 0.00 },
-          { x: 2008, y: 0.00 },
-          { x: 2009, y: 0.00 },
-          { x: 2010, y: 0.17 },
-          { x: 2011, y: 0.17 },
-          { x: 2012, y: 0.17 },
-          { x: 2013, y: 0.17 },
-          { x: 2014, y: 0.25 },
-          { x: 2015, y: 0.25 },
-          { x: 2016, y: 0.25 },
-          { x: 2017, y: 1.18 }
-        ]
+        id: 'a',
+        datapoints: [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4},{x:5,y:5},{x:6,y:6},{x:7,y:7}]
       }
     ].to_json
+    # @protectedAreasGrowth = [
+    #   {
+    #     id: "Global",
+    #     datapoints: [
+    #       { x: 2000, y: 0.67 },
+    #       { x: 2001, y: 0.73 },
+    #       { x: 2002, y: 0.99 },
+    #       { x: 2003, y: 1.00 },
+    #       { x: 2004, y: 1.11 },
+    #       { x: 2005, y: 1.13 },
+    #       { x: 2006, y: 1.05 },
+    #       { x: 2007, y: 1.43 },
+    #       { x: 2008, y: 1.85 },
+    #       { x: 2009, y: 2.32 },
+    #       { x: 2010, y: 2.50 },
+    #       { x: 2011, y: 2.53 },
+    #       { x: 2012, y: 3.38 },
+    #       { x: 2013, y: 3.47 },
+    #       { x: 2014, y: 4.15 },
+    #       { x: 2015, y: 4.43 },
+    #       { x: 2016, y: 5.01 },
+    #       { x: 2017, y: 6.4 }
+    #     ]
+    #   },
+    #   {
+    #     id: "National",
+    #     datapoints: [
+    #       { x: 2000, y: 1.72 },
+    #       { x: 2001, y: 1.88 },
+    #       { x: 2002, y: 2.54 },
+    #       { x: 2003, y: 2.57 },
+    #       { x: 2004, y: 2.86 },
+    #       { x: 2005, y: 2.89 },
+    #       { x: 2006, y: 2.70 },
+    #       { x: 2007, y: 3.68 },
+    #       { x: 2008, y: 3.93 },
+    #       { x: 2009, y: 5.13 },
+    #       { x: 2010, y: 5.88 },
+    #       { x: 2011, y: 5.94 },
+    #       { x: 2012, y: 8.43 },
+    #       { x: 2013, y: 8.65 },
+    #       { x: 2014, y: 9.66 },
+    #       { x: 2015, y: 10.36 },
+    #       { x: 2016, y: 12.74 },
+    #       { x: 2017, y: 16.02 }
+    #     ]
+    #   },
+    #   {
+    #     id: "ABNJ",
+    #     datapoints: [
+    #       { x: 2000, y: 0.00 },
+    #       { x: 2001, y: 0.00 },
+    #       { x: 2002, y: 0.00 },
+    #       { x: 2003, y: 0.00 },
+    #       { x: 2004, y: 0.00 },
+    #       { x: 2005, y: 0.00 },
+    #       { x: 2006, y: 0.00 },
+    #       { x: 2007, y: 0.00 },
+    #       { x: 2008, y: 0.00 },
+    #       { x: 2009, y: 0.00 },
+    #       { x: 2010, y: 0.17 },
+    #       { x: 2011, y: 0.17 },
+    #       { x: 2012, y: 0.17 },
+    #       { x: 2013, y: 0.17 },
+    #       { x: 2014, y: 0.25 },
+    #       { x: 2015, y: 0.25 },
+    #       { x: 2016, y: 0.25 },
+    #       { x: 2017, y: 1.18 }
+    #     ]
+    #   }
+    # ].to_json
   end
 
   def ecoregions
diff --git a/app/javascript/components/charts/chart-line/ChartPopup.vue b/app/javascript/components/charts/chart-line/ChartPopup.vue
index 5475de0ef..10c44c57f 100644
--- a/app/javascript/components/charts/chart-line/ChartPopup.vue
+++ b/app/javascript/components/charts/chart-line/ChartPopup.vue
@@ -3,34 +3,34 @@
     <circle
       :fill="colour"
       :cx="x" 
-      :cy="y" 
+      :cy="y"
       r="8"
       @mouseover="togglePopup()"
       @mouseleave="togglePopup()"
     />
     
-    <!-- <polyline 
-      v-show="showPopup"
-      :points="xAxisLine" 
-      fill="none" 
-      stroke="black" 
-    /> -->
     <g
       v-show="showPopup"
       :transform="`translate(${coordX}, ${coordY})`"
     >
+      <rect 
+        fill="#000"
+        height="46"
+        rx="4"
+        width="74"    
+        x="-36"
+        y="-58"
+      />
       <path 
-        d="m-1.5,-8.54687c-3,-22 -50,-14 -50.5,-14.45313c0.5,0.45313 -0.5,-58.54687 -0.5,-58.54687c0,0 104,1 104,1c0,0 1,57 0.5,56.54687c0.5,0.45313 -43.5,2.45313 -44,2c0.5,0.45313 -6.5,35.45313 -9.5,13.45313z" 
-        stroke-width="1.5" 
-        stroke="#000" 
+        d="m-17,-13l17.132,12.2l16.04,-12.2l-33.172,0z" 
         fill="#000"
       />
       <text
         font-size="26"
-        font-weight="500"
+        font-weight="700"
         fill="#fff"
         text-anchor="middle"
-        dy="-30"
+        dy="-27"
       >
         {{ text }}
       </text>
@@ -43,16 +43,13 @@ export default {
   name: 'chart-popup',
 
   props: {
-    // showPopup: {
-    //   type: Boolean
-    // },
     colour: {
       required: true,
       type: String
     },
     text: {
       required: true,
-      type: Number
+      type: String
     },
     x: {
       required: true,

From e7535cd58948cbc83518cc35186dea98d95dcae1 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Mon, 30 Mar 2020 16:01:33 +0100
Subject: [PATCH 05/11] Get teh axis making more sense

---
 app/controllers/marine_controller.rb          | 146 +++++++++---------
 .../charts/chart-line/ChartLine.vue           |  24 ++-
 2 files changed, 84 insertions(+), 86 deletions(-)

diff --git a/app/controllers/marine_controller.rb b/app/controllers/marine_controller.rb
index 5b4bfb6e1..eec001c71 100644
--- a/app/controllers/marine_controller.rb
+++ b/app/controllers/marine_controller.rb
@@ -153,83 +153,83 @@ def marine_statistics
   end
 
   def growth
-    @protectedAreasGrowth = [
-      {
-        id: 'a',
-        datapoints: [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4},{x:5,y:5},{x:6,y:6},{x:7,y:7}]
-      }
-    ].to_json
     # @protectedAreasGrowth = [
     #   {
-    #     id: "Global",
-    #     datapoints: [
-    #       { x: 2000, y: 0.67 },
-    #       { x: 2001, y: 0.73 },
-    #       { x: 2002, y: 0.99 },
-    #       { x: 2003, y: 1.00 },
-    #       { x: 2004, y: 1.11 },
-    #       { x: 2005, y: 1.13 },
-    #       { x: 2006, y: 1.05 },
-    #       { x: 2007, y: 1.43 },
-    #       { x: 2008, y: 1.85 },
-    #       { x: 2009, y: 2.32 },
-    #       { x: 2010, y: 2.50 },
-    #       { x: 2011, y: 2.53 },
-    #       { x: 2012, y: 3.38 },
-    #       { x: 2013, y: 3.47 },
-    #       { x: 2014, y: 4.15 },
-    #       { x: 2015, y: 4.43 },
-    #       { x: 2016, y: 5.01 },
-    #       { x: 2017, y: 6.4 }
-    #     ]
-    #   },
-    #   {
-    #     id: "National",
-    #     datapoints: [
-    #       { x: 2000, y: 1.72 },
-    #       { x: 2001, y: 1.88 },
-    #       { x: 2002, y: 2.54 },
-    #       { x: 2003, y: 2.57 },
-    #       { x: 2004, y: 2.86 },
-    #       { x: 2005, y: 2.89 },
-    #       { x: 2006, y: 2.70 },
-    #       { x: 2007, y: 3.68 },
-    #       { x: 2008, y: 3.93 },
-    #       { x: 2009, y: 5.13 },
-    #       { x: 2010, y: 5.88 },
-    #       { x: 2011, y: 5.94 },
-    #       { x: 2012, y: 8.43 },
-    #       { x: 2013, y: 8.65 },
-    #       { x: 2014, y: 9.66 },
-    #       { x: 2015, y: 10.36 },
-    #       { x: 2016, y: 12.74 },
-    #       { x: 2017, y: 16.02 }
-    #     ]
-    #   },
-    #   {
-    #     id: "ABNJ",
-    #     datapoints: [
-    #       { x: 2000, y: 0.00 },
-    #       { x: 2001, y: 0.00 },
-    #       { x: 2002, y: 0.00 },
-    #       { x: 2003, y: 0.00 },
-    #       { x: 2004, y: 0.00 },
-    #       { x: 2005, y: 0.00 },
-    #       { x: 2006, y: 0.00 },
-    #       { x: 2007, y: 0.00 },
-    #       { x: 2008, y: 0.00 },
-    #       { x: 2009, y: 0.00 },
-    #       { x: 2010, y: 0.17 },
-    #       { x: 2011, y: 0.17 },
-    #       { x: 2012, y: 0.17 },
-    #       { x: 2013, y: 0.17 },
-    #       { x: 2014, y: 0.25 },
-    #       { x: 2015, y: 0.25 },
-    #       { x: 2016, y: 0.25 },
-    #       { x: 2017, y: 1.18 }
-    #     ]
+    #     id: 'a',
+    #     datapoints: [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4},{x:5,y:5},{x:6,y:6},{x:7,y:7}]
     #   }
     # ].to_json
+    @protectedAreasGrowth = [
+      {
+        id: "Global",
+        datapoints: [
+          { x: 2000, y: 0.67 },
+          { x: 2001, y: 0.73 },
+          { x: 2002, y: 0.99 },
+          { x: 2003, y: 1.00 },
+          { x: 2004, y: 1.11 },
+          { x: 2005, y: 1.13 },
+          { x: 2006, y: 1.05 },
+          { x: 2007, y: 1.43 },
+          { x: 2008, y: 1.85 },
+          { x: 2009, y: 2.32 },
+          { x: 2010, y: 2.50 },
+          { x: 2011, y: 2.53 },
+          { x: 2012, y: 3.38 },
+          { x: 2013, y: 3.47 },
+          { x: 2014, y: 4.15 },
+          { x: 2015, y: 4.43 },
+          { x: 2016, y: 5.01 },
+          { x: 2017, y: 6.4 }
+        ]
+      },
+      {
+        id: "National",
+        datapoints: [
+          { x: 2000, y: 1.72 },
+          { x: 2001, y: 1.88 },
+          { x: 2002, y: 2.54 },
+          { x: 2003, y: 2.57 },
+          { x: 2004, y: 2.86 },
+          { x: 2005, y: 2.89 },
+          { x: 2006, y: 2.70 },
+          { x: 2007, y: 3.68 },
+          { x: 2008, y: 3.93 },
+          { x: 2009, y: 5.13 },
+          { x: 2010, y: 5.88 },
+          { x: 2011, y: 5.94 },
+          { x: 2012, y: 8.43 },
+          { x: 2013, y: 8.65 },
+          { x: 2014, y: 9.66 },
+          { x: 2015, y: 10.36 },
+          { x: 2016, y: 12.74 },
+          { x: 2017, y: 16.02 }
+        ]
+      },
+      {
+        id: "ABNJ",
+        datapoints: [
+          { x: 2000, y: 0.00 },
+          { x: 2001, y: 0.00 },
+          { x: 2002, y: 0.00 },
+          { x: 2003, y: 0.00 },
+          { x: 2004, y: 0.00 },
+          { x: 2005, y: 0.00 },
+          { x: 2006, y: 0.00 },
+          { x: 2007, y: 0.00 },
+          { x: 2008, y: 0.00 },
+          { x: 2009, y: 0.00 },
+          { x: 2010, y: 0.17 },
+          { x: 2011, y: 0.17 },
+          { x: 2012, y: 0.17 },
+          { x: 2013, y: 0.17 },
+          { x: 2014, y: 0.25 },
+          { x: 2015, y: 0.25 },
+          { x: 2016, y: 0.25 },
+          { x: 2017, y: 1.18 }
+        ]
+      }
+    ].to_json
   end
 
   def ecoregions
diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index fb702fc91..aa252882d 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -93,7 +93,7 @@
 
     props: {
       lines: {
-        type: Array, // [ { x: Number, y: Number } ]
+        type: Array, // [ id: String, datapoints: { x: Number, y: Number } ]
         required: true
       },
       targets: Array,
@@ -113,7 +113,6 @@
           paddingTop: 50
         },
         x: {
-          axisMarks: 8,
           chartPadding: 24,
           chartWidth: 890,
           max: 0,
@@ -123,7 +122,6 @@
           precision: 1,
         },
         y: {
-          axisMarks: 8,
           chartHeight: 500,
           chartPadding: 34,
           max: 0,
@@ -180,10 +178,6 @@
       this.y.maxNormalised = this.normaliseY(this.y.max)
     },
 
-    mounted () {
-      
-    },
-
     methods: {
       getLegend (){
         const legend = this.lines.map((dataset) => {
@@ -213,13 +207,19 @@
       },
 
       getAxis (axis) {
-        let array = [], n = this[axis].min
-        const incrementor = (this[axis].max - this[axis].min)/ this[axis].axisMarks
+        const 
+          totalDatapoints = this.lines[0].datapoints.length,
+          axisMarks = totalDatapoints % 2 == 0 ? (totalDatapoints + 1)/2 : totalDatapoints/2,
+          min = Math.floor(this[axis].min),
+          max = Math.ceil(this[axis].max),
+          incrementor = (max - min)/(axisMarks - 1)
+        
+        let array = [], n = min
 
-        while( n < this[axis].max + incrementor) {
+        while( n < (max + incrementor)) {
           array.push({
             coord: this[`normalise${axis.toUpperCase()}`](n),
-            labelText: Math.ceil(n/this[axis].precision)*this[axis].precision
+            labelText: n
           })
 
           n += incrementor
@@ -241,7 +241,6 @@
       },
 
       normaliseDataset (dataset) {
-        console.log(dataset)
         const normalisedDataset = dataset.map((datapoint) => {
           return { 
             value: datapoint.y + '%',
@@ -249,7 +248,6 @@
             y: this.normaliseY(datapoint.y)
           }
         })
-        console.log(normalisedDataset)
         return normalisedDataset
       },
 

From e9b758c80122d5dc37f97098460375b2925e2692 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Wed, 1 Apr 2020 15:39:42 +0100
Subject: [PATCH 06/11] Finally fix axis

---
 .../charts/chart-line/ChartLine.vue           | 123 +++++++-----------
 1 file changed, 49 insertions(+), 74 deletions(-)

diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index aa252882d..eb26c96c3 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -15,7 +15,7 @@
               <tspan v-for="t in axis.y" x="-70" :dy="24">{{ t }}</tspan>
             </text>
 
-            <text v-for="y in yAxis" 
+            <text v-for="y in getAxisLabels('y')" 
               :x="-x.chartPadding" 
               :y="y.coord "
               text-anchor="end"
@@ -23,15 +23,15 @@
               font-weight="300"
               transform="translate(0, 5)">{{ y.labelText }}%</text>
 
-            <text v-for="x in xAxis" 
+            <text v-for="x in getAxisLabels('x')"             
               :x="x.coord" 
               :y="y.chartHeight + y.chartPadding" 
               font-size="18"
               font-weight="300"
               text-anchor="middle">{{ x.labelText }}</text>
 
-            <polyline :points="xAxisLine" fill="none" stroke="black" />
-            <polyline :points="yAxisLine" fill="none" stroke="black" />
+            <polyline :points="getAxisLine('x')" fill="none" stroke="black" />
+            <polyline :points="getAxisLine('y')" fill="none" stroke="black" />
 
             <chart-line-dataset 
               v-for="line, index in lines"
@@ -41,26 +41,6 @@
               :middle="getPathMiddle(line.datapoints)"
               :colour="colours[index]">
             </chart-line-dataset>
-
-<!--             <template v-if="targets">
-              <chart-line-target-y v-for="target, index in targets"
-                :minX="normaliseX(x.min)" 
-                :maxX="normaliseX(x.max)" 
-                :y="normaliseY(target.y)" 
-                :title="target.title"
-                :colour="targetColours[index]">
-              </chart-line-target-y>
-            </template>
-
-            <template v-if="commitments">
-              <chart-line-target-x v-for="commitment, index in commitments"
-                :minY="normaliseY(y.min)" 
-                :maxY="normaliseY(y.max)" 
-                :x="normaliseX(commitment.x)"
-                :line="commitment.line"
-                :label="commitment.label">
-              </chart-line-target-x>
-            </template> -->
           </svg>
         </div>
       </div>
@@ -77,15 +57,12 @@
 <script>
   import ChartLineDataset from './ChartLineDataset'
   import ChartLineTab from './ChartLineTab'
-  // import ChartLineTargetX from './ChartLineTargetX'
-  // import ChartLineTargetY from './ChartLineTargetY'
   import ChartLegend from './ChartLegend'
 
   export default {
     name: 'chart-line',
 
     components: { 
-      // ChartLineTargetX, ChartLineTargetY, 
       ChartLineDataset, 
       ChartLineTab,
       ChartLegend 
@@ -96,9 +73,7 @@
         type: Array, // [ id: String, datapoints: { x: Number, y: Number } ]
         required: true
       },
-      targets: Array,
       axis: Object,
-      commitments: Array,
       showLegend: {
         default: true,
         type: Boolean
@@ -115,20 +90,18 @@
         x: {
           chartPadding: 24,
           chartWidth: 890,
-          max: 0,
-          maxNormalised: 0,
-          min:0,
-          minNormalised:0,
+          incrementor: 0,
           precision: 1,
+          max: 0,
+          min: 0
         },
         y: {
           chartHeight: 500,
           chartPadding: 34,
+          incrementor: 0,
+          precision: 1,
           max: 0,
-          maxNormalised: 0,
-          min:0,
-          minNormalised:0,
-          precision: 1
+          min: 0
         },
         colours: [
           {
@@ -150,32 +123,8 @@
       }
     },
 
-    computed: {
-      xAxis () {
-        return this.getAxis('x')
-      },
-
-      yAxis () {
-        return this.getAxis('y')
-      },
-
-      xAxisLine () {
-        return `${this.x.minNormalised},${this.y.minNormalised} ${this.x.maxNormalised},${this.y.minNormalised}`
-      },
-
-      yAxisLine () {
-        return `${this.x.minNormalised},${this.y.minNormalised} ${this.x.minNormalised},${this.y.maxNormalised}`
-      }
-    },
-
     created () {
-      this.x.min = this.getMinMax('min', 'x')
-      this.x.max = this.getMinMax('max', 'x')
-      this.y.max = this.getMinMax('max', 'y')
-      this.x.minNormalised = this.normaliseX(this.x.min)
-      this.x.maxNormalised = this.normaliseX(this.x.max)
-      this.y.minNormalised = this.normaliseY(this.y.min)
-      this.y.maxNormalised = this.normaliseY(this.y.max)
+      this.setAxisVariables()
     },
 
     methods: {
@@ -206,17 +155,14 @@
         return { x: this.normaliseX(middle.x), y: this.normaliseY(middle.y) }
       },
 
-      getAxis (axis) {
-        const 
-          totalDatapoints = this.lines[0].datapoints.length,
-          axisMarks = totalDatapoints % 2 == 0 ? (totalDatapoints + 1)/2 : totalDatapoints/2,
-          min = Math.floor(this[axis].min),
-          max = Math.ceil(this[axis].max),
-          incrementor = (max - min)/(axisMarks - 1)
-        
-        let array = [], n = min
+      getAxisLabels (axis) {
+        const incrementor = this[axis].incrementor,
+          min = this[axis].min,
+          max = this[axis].max
 
-        while( n < (max + incrementor)) {
+        let n = min, array = []
+          
+        while( n <= max) {
           array.push({
             coord: this[`normalise${axis.toUpperCase()}`](n),
             labelText: n
@@ -228,16 +174,28 @@
         return array
       },
 
+      getAxisLine (axis) {
+        const minX = this.normaliseX(this.x.min),
+          minY = this.normaliseY(this.y.min),
+          maxX = this.normaliseX(this.x.max),
+          maxY = this.normaliseY(this.y.max)
+
+        const axisLine = axis == 'x' ? `${minX},${minY} ${maxX},${minY}` : `${minX},${minY} ${minX},${maxY}`
+        
+        return axisLine
+      },
+
       getMinMax(type, prop) {
         let array = []
+        const rounding = type == 'min' ? 'floor' : 'ceil'
 
         this.lines.forEach(line => {
           array.push(Math[type](...line.datapoints.map((t) => {
-            return t[prop]
+            return Math[rounding](t[prop])
           })))
         }) 
       
-        return Math.max(...array)
+        return Math[type](...array)
       },
 
       normaliseDataset (dataset) {
@@ -260,6 +218,23 @@
         // y origin is at the top so subtract axis value from height
         // subtract the min value incase the axis doesn't start at 0
         return (this.y.chartHeight - ((value - this.y.min) / (this.y.max - this.y.min)) * this.y.chartHeight)
+      },
+
+      setAxisVariables () {
+        const totalDatapoints = this.lines[0].datapoints.length,
+          evenTotal = totalDatapoints % 2 == 0,
+          xMin = this.getMinMax('min', 'x'),
+          xMax = this.getMinMax('max', 'x'),
+          yMin = this.getMinMax('min', 'y'),
+          yMax = this.getMinMax('max', 'y'),
+          axisMarks = evenTotal ? totalDatapoints/2 : (totalDatapoints - 1)/2
+          
+        this.x.incrementor = evenTotal ? (xMax - xMin)/(axisMarks - .5) : (xMax - xMin)/(axisMarks)
+        this.y.incrementor = evenTotal ? (yMax - yMin)/(axisMarks - .5) : (yMax - yMin)/(axisMarks)
+        this.x.min = xMin
+        this.y.min = yMin
+        this.x.max = xMin + (this.x.incrementor * axisMarks)
+        this.y.max = yMin + (this.y.incrementor * axisMarks)
       }
     }
   }

From aa11cee34edb3f7a51cec4f19276ec9ea0210811 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Wed, 1 Apr 2020 15:48:29 +0100
Subject: [PATCH 07/11] Make popup size dynamic

---
 app/javascript/components/charts/chart-line/ChartPopup.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/javascript/components/charts/chart-line/ChartPopup.vue b/app/javascript/components/charts/chart-line/ChartPopup.vue
index 10c44c57f..aa466bb61 100644
--- a/app/javascript/components/charts/chart-line/ChartPopup.vue
+++ b/app/javascript/components/charts/chart-line/ChartPopup.vue
@@ -17,8 +17,8 @@
         fill="#000"
         height="46"
         rx="4"
-        width="74"    
-        x="-36"
+        :width="popupWidth"    
+        :x="-popupWidth/2"
         y="-58"
       />
       <path 
@@ -73,6 +73,9 @@ export default {
     },
     coordY () {
       return this.y - 10
+    },
+    popupWidth () {
+      return (this.text.replace('.', '').length * 20) + 20
     }
   },
 

From 8b184ff97881bdbb6828b241ff5be9946583ecfe Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Wed, 1 Apr 2020 16:23:32 +0100
Subject: [PATCH 08/11] Finish up js for chart

---
 .../charts/chart-line/ChartLine.vue           | 73 +++++++++----------
 .../charts/chart-line/ChartLineDataset.vue    | 11 +--
 .../charts/chart-line/ChartPopup.vue          |  6 +-
 3 files changed, 40 insertions(+), 50 deletions(-)

diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index eb26c96c3..8db03598b 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -3,30 +3,28 @@
     <div class="chart__wrapper-ie11">
       <div class="chart__scrollable">
         <div v-if="lines" class="chart__chart" style="width:100%;">
-          <svg width="100%" height="100%" :viewBox="`-70 -80 ${svg.width} ${svg.height}`" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" class="chart__svg">
+          <svg width="100%" height="100%" :viewBox="`0 0 ${svg.width} ${svg.height}`" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" class="chart__svg">
             <rect 
-              :x="-70"
-              :y="-30" 
+              :x="0"
+              :y="0" 
               :width="svg.width" 
-              :height="svg.height - svg.paddingTop" 
+              :height="svg.height" 
               fill="#fff" />
 
-            <text v-if="axis" x="-70" y="-90" font-size="18">
-              <tspan v-for="t in axis.y" x="-70" :dy="24">{{ t }}</tspan>
-            </text>
-
-            <text v-for="y in getAxisLabels('y')" 
-              :x="-x.chartPadding" 
+            <text v-for="y, index in getAxisLabels('y')" 
+              :key="`y-${index}`"
+              :x="svg.paddingLeft - x.axisLabelMargin" 
               :y="y.coord "
               text-anchor="end"
-              font-size="18"
+              font-size="14"
               font-weight="300"
               transform="translate(0, 5)">{{ y.labelText }}%</text>
 
-            <text v-for="x in getAxisLabels('x')"             
+            <text v-for="x, index in getAxisLabels('x')"  
+              :key="`x-${index}`"      
               :x="x.coord" 
-              :y="y.chartHeight + y.chartPadding" 
-              font-size="18"
+              :y="chartHeight + svg.paddingTop + y.axisLabelMargin" 
+              font-size="14"
               font-weight="300"
               text-anchor="middle">{{ x.labelText }}</text>
 
@@ -35,10 +33,9 @@
 
             <chart-line-dataset 
               v-for="line, index in lines"
-              :index="index"
+              :key="`yline-${index}`"
               :datapoints="normaliseDataset(line.datapoints)"
               :path="getPath(line.datapoints)"
-              :middle="getPathMiddle(line.datapoints)"
               :colour="colours[index]">
             </chart-line-dataset>
           </svg>
@@ -73,7 +70,6 @@
         type: Array, // [ id: String, datapoints: { x: Number, y: Number } ]
         required: true
       },
-      axis: Object,
       showLegend: {
         default: true,
         type: Boolean
@@ -83,25 +79,24 @@
     data () {
       return {
         svg: {
-          width: 1030,
-          height: 650,
-          paddingTop: 50
+          width: 780,
+          height: 370,
+          paddingTop: 46,
+          paddingRight: 44,
+          paddingBottom: 60,
+          paddingLeft: 60,
         },
         x: {
-          chartPadding: 24,
-          chartWidth: 890,
+          axisLabelMargin: 10, 
           incrementor: 0,
-          precision: 1,
           max: 0,
-          min: 0
+          min: 0,
         },
         y: {
-          chartHeight: 500,
-          chartPadding: 34,
+          axisLabelMargin: 30, 
           incrementor: 0,
-          precision: 1,
           max: 0,
-          min: 0
+          min: 0,
         },
         colours: [
           {
@@ -119,7 +114,6 @@
         ],
         legend: [],
         legendColours: ['#207D94', '#6FD9F2', '#86BF37'],
-        // targetColours: ['rgba(29, 125, 166, 0.4)', 'rgba(113, 163, 43, 0.4)']
       }
     },
 
@@ -127,6 +121,16 @@
       this.setAxisVariables()
     },
 
+    computed: {
+      chartHeight () {
+        return this.svg.height - this.svg.paddingTop - this.svg.paddingBottom
+      },
+
+      chartWidth () {
+        return this.svg.width - this.svg.paddingLeft - this.svg.paddingRight
+      }
+    },
+
     methods: {
       getLegend (){
         const legend = this.lines.map((dataset) => {
@@ -148,13 +152,6 @@
         return path
       },
 
-      getPathMiddle (dataset) {
-        //used to add circle to a dataset with key used in the legend
-        let middle = dataset[Math.floor(dataset.length/2)]
-
-        return { x: this.normaliseX(middle.x), y: this.normaliseY(middle.y) }
-      },
-
       getAxisLabels (axis) {
         const incrementor = this[axis].incrementor,
           min = this[axis].min,
@@ -211,13 +208,13 @@
 
       normaliseX (value) {
         // subtract the min value in case the axis doesn't start at 0
-        return (((value - this.x.min) / (this.x.max - this.x.min)) * this.x.chartWidth)
+        return this.svg.paddingLeft + (((value - this.x.min) / (this.x.max - this.x.min)) * this.chartWidth)
       },
 
       normaliseY (value) {
         // y origin is at the top so subtract axis value from height
         // subtract the min value incase the axis doesn't start at 0
-        return (this.y.chartHeight - ((value - this.y.min) / (this.y.max - this.y.min)) * this.y.chartHeight)
+        return this.svg.paddingTop + (this.chartHeight - ((value - this.y.min) / (this.y.max - this.y.min)) * this.chartHeight)
       },
 
       setAxisVariables () {
diff --git a/app/javascript/components/charts/chart-line/ChartLineDataset.vue b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
index 35f44c0f4..eeda5555f 100644
--- a/app/javascript/components/charts/chart-line/ChartLineDataset.vue
+++ b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
@@ -8,7 +8,8 @@
     />
     
     <chart-popup
-      v-for="datapoint in datapoints"
+      v-for="datapoint, index in datapoints"
+      :key="`popup-${index}`"
       :colour="colour.line"
       :x="datapoint.x" 
       :y="datapoint.y" 
@@ -56,14 +57,6 @@
         default: false,
         type: Boolean
       },
-      index: {
-        type: Number,
-        required: true
-      },
-      middle: {
-        type: Object,
-        required: true
-      },
       path: {
         type: String,
         required: true
diff --git a/app/javascript/components/charts/chart-line/ChartPopup.vue b/app/javascript/components/charts/chart-line/ChartPopup.vue
index aa466bb61..a7871052e 100644
--- a/app/javascript/components/charts/chart-line/ChartPopup.vue
+++ b/app/javascript/components/charts/chart-line/ChartPopup.vue
@@ -4,7 +4,7 @@
       :fill="colour"
       :cx="x" 
       :cy="y"
-      r="8"
+      r="7"
       @mouseover="togglePopup()"
       @mouseleave="togglePopup()"
     />
@@ -26,7 +26,7 @@
         fill="#000"
       />
       <text
-        font-size="26"
+        font-size="20"
         font-weight="700"
         fill="#fff"
         text-anchor="middle"
@@ -75,7 +75,7 @@ export default {
       return this.y - 10
     },
     popupWidth () {
-      return (this.text.replace('.', '').length * 20) + 20
+      return (this.text.replace('.', '').length * 12) + 20
     }
   },
 

From bb3170365f3c8685073dc40c08fa9d9172bfd1b4 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Wed, 1 Apr 2020 16:58:43 +0100
Subject: [PATCH 09/11] Dynamically add the popup to the chart

---
 .../charts/chart-line/ChartLine.vue           | 72 ++++++++++++++-----
 .../charts/chart-line/ChartLineDataset.vue    | 50 +++++--------
 .../charts/chart-line/ChartPopup.vue          | 64 ++++++-----------
 3 files changed, 93 insertions(+), 93 deletions(-)

diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index 8db03598b..6c8661b85 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -36,8 +36,17 @@
               :key="`yline-${index}`"
               :datapoints="normaliseDataset(line.datapoints)"
               :path="getPath(line.datapoints)"
-              :colour="colours[index]">
-            </chart-line-dataset>
+              :colour="colours[index]"
+              v-on:datapoint:mouseleave="popupHide"
+              v-on:datapoint:mouseover="popupShow" 
+            />
+
+            <chart-popup
+              v-show="popup.show"
+              :x="popup.x" 
+              :y="popup.y" 
+              :text="popup.text"
+            />
           </svg>
         </div>
       </div>
@@ -55,6 +64,7 @@
   import ChartLineDataset from './ChartLineDataset'
   import ChartLineTab from './ChartLineTab'
   import ChartLegend from './ChartLegend'
+  import ChartPopup from './ChartPopup.vue'
 
   export default {
     name: 'chart-line',
@@ -62,7 +72,8 @@
     components: { 
       ChartLineDataset, 
       ChartLineTab,
-      ChartLegend 
+      ChartLegend,
+      ChartPopup
     },
 
     props: {
@@ -78,9 +89,29 @@
 
     data () {
       return {
+        colours: [
+          {
+            line: '#207D94',
+            text: '#ffffff'
+          },
+          {
+            line: '#6FD9F2',
+            text: '#000000'
+          },
+          {
+            line: '#86BF37',
+            text: '#000000'
+          }
+        ],
+        popup: {
+          show: false,
+          text: '',
+          x: 0,
+          y: 0,
+        },
         svg: {
-          width: 780,
-          height: 370,
+          width: 740,
+          height: 400,
           paddingTop: 46,
           paddingRight: 44,
           paddingBottom: 60,
@@ -98,20 +129,6 @@
           max: 0,
           min: 0,
         },
-        colours: [
-          {
-            line: '#207D94',
-            text: '#ffffff'
-          },
-          {
-            line: '#6FD9F2',
-            text: '#000000'
-          },
-          {
-            line: '#86BF37',
-            text: '#000000'
-          }
-        ],
         legend: [],
         legendColours: ['#207D94', '#6FD9F2', '#86BF37'],
       }
@@ -217,6 +234,23 @@
         return this.svg.paddingTop + (this.chartHeight - ((value - this.y.min) / (this.y.max - this.y.min)) * this.chartHeight)
       },
 
+      popupHide () {
+        console.log('here')
+        this.popup.show = false
+        this.popup.text = ''
+        this.popup.x = 0
+        this.popup.y = 0
+      },
+
+      popupShow (datapoint) {
+        console.log('here')
+        this.popup.show = true
+        this.popup.text = datapoint.value 
+        this.popup.x = datapoint.x
+        this.popup.y = datapoint.y
+        console.log('popup tex', this.popup.text)
+      },
+
       setAxisVariables () {
         const totalDatapoints = this.lines[0].datapoints.length,
           evenTotal = totalDatapoints % 2 == 0,
diff --git a/app/javascript/components/charts/chart-line/ChartLineDataset.vue b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
index eeda5555f..2dd909cab 100644
--- a/app/javascript/components/charts/chart-line/ChartLineDataset.vue
+++ b/app/javascript/components/charts/chart-line/ChartLineDataset.vue
@@ -7,44 +7,22 @@
       stroke-width="2" 
     />
     
-    <chart-popup
+    <circle
       v-for="datapoint, index in datapoints"
-      :key="`popup-${index}`"
-      :colour="colour.line"
-      :x="datapoint.x" 
-      :y="datapoint.y" 
-      :text="datapoint.value"
+      :fill="colour.line"
+      :cx="datapoint.x" 
+      :cy="datapoint.y"
+      r="7"
+      @mouseleave="popupHide()"
+      @mouseover="popupShow(datapoint)"
     />
-    
-    <template v-if="hasLegend">
-      <circle 
-        :fill="colour.line"
-        :cx="middle.x" 
-        :cy="middle.y" 
-        r="18">{{ index + 1 }}
-      </circle>
-
-      <text 
-        :fill="colour.text"
-        :x="middle.x" 
-        :y="middle.y" 
-        dominant-baseline="middle"
-        font-size="18" 
-        font-weight="900"
-        text-anchor="middle">{{ index + 1 }}
-      </text>
-    </template>
   </g>
 </template>
 
 <script>
-  import ChartPopup from './ChartPopup.vue'
-
   export default {
     name: 'chart-line-dataset',
 
-    components: { ChartPopup },
-
     props: {
       colour: {
         type: Object,
@@ -53,14 +31,20 @@
       datapoints: {
         type: Array
       },
-      hasLegend: {
-        default: false,
-        type: Boolean
-      },
       path: {
         type: String,
         required: true
       }
+    },
+
+    methods: {
+      popupHide () {
+        this.$emit('datapoint:mouseleave')
+      },
+
+      popupShow (datapoint) {
+        this.$emit('datapoint:mouseover', datapoint)
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/app/javascript/components/charts/chart-line/ChartPopup.vue b/app/javascript/components/charts/chart-line/ChartPopup.vue
index a7871052e..b7283e14d 100644
--- a/app/javascript/components/charts/chart-line/ChartPopup.vue
+++ b/app/javascript/components/charts/chart-line/ChartPopup.vue
@@ -1,40 +1,29 @@
 <template>
-  <g>
-    <circle
-      :fill="colour"
-      :cx="x" 
-      :cy="y"
-      r="7"
-      @mouseover="togglePopup()"
-      @mouseleave="togglePopup()"
+  <g
+    v-show="showPopup"
+    :transform="`translate(${x}, ${coordY})`"
+  >
+    <rect 
+      fill="#000"
+      height="46"
+      rx="4"
+      :width="popupWidth"    
+      :x="-popupWidth/2"
+      y="-58"
     />
-    
-    <g
-      v-show="showPopup"
-      :transform="`translate(${coordX}, ${coordY})`"
+    <path 
+      d="m-17,-13l17.132,12.2l16.04,-12.2l-33.172,0z" 
+      fill="#000"
+    />
+    <text
+      font-size="20"
+      font-weight="700"
+      fill="#fff"
+      text-anchor="middle"
+      dy="-27"
     >
-      <rect 
-        fill="#000"
-        height="46"
-        rx="4"
-        :width="popupWidth"    
-        :x="-popupWidth/2"
-        y="-58"
-      />
-      <path 
-        d="m-17,-13l17.132,12.2l16.04,-12.2l-33.172,0z" 
-        fill="#000"
-      />
-      <text
-        font-size="20"
-        font-weight="700"
-        fill="#fff"
-        text-anchor="middle"
-        dy="-27"
-      >
-        {{ text }}
-      </text>
-    </g>
+      {{ text }}
+    </text>
   </g>
 </template>
 
@@ -43,10 +32,6 @@ export default {
   name: 'chart-popup',
 
   props: {
-    colour: {
-      required: true,
-      type: String
-    },
     text: {
       required: true,
       type: String
@@ -68,9 +53,6 @@ export default {
   },
 
   computed: {
-    coordX () {
-      return this.x
-    },
     coordY () {
       return this.y - 10
     },

From 536f754b1702322e44ee67300dee00a99bed86b4 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Wed, 1 Apr 2020 17:06:50 +0100
Subject: [PATCH 10/11] Put the rest of the page back

---
 .../stylesheets/components/_charts.scss       |   2 +-
 .../components/charts/_chart-line.scss        |  34 ++++
 .../charts/_interactive-multiline.scss        | 158 ------------------
 .../charts/chart-line/ChartLine.vue           |   3 -
 app/views/marine/index.html.erb               |  47 +++++-
 app/views/marine/sections/_coverage.html.erb  |   2 +-
 6 files changed, 82 insertions(+), 164 deletions(-)
 create mode 100644 app/assets/stylesheets/components/charts/_chart-line.scss
 delete mode 100644 app/assets/stylesheets/components/charts/_interactive-multiline.scss

diff --git a/app/assets/stylesheets/components/_charts.scss b/app/assets/stylesheets/components/_charts.scss
index 583c6cb36..33e848789 100644
--- a/app/assets/stylesheets/components/_charts.scss
+++ b/app/assets/stylesheets/components/_charts.scss
@@ -80,11 +80,11 @@ $chart-target-stroke-width: rem-calc(3);
 //--------------------------------------------------
   @import './charts/chart-dial';
   @import './charts/chart-legend';
+  @import './charts/chart-line';
   @import './charts/chart-row-pa';
   @import './charts/chart-row-target';
 }
 
 @import './charts/horizontal-bar-chart';
-@import './charts/interactive-multiline';
 @import './charts/interactive-treemap';
 @import './charts/sunburst';
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/charts/_chart-line.scss b/app/assets/stylesheets/components/charts/_chart-line.scss
new file mode 100644
index 000000000..385cfe862
--- /dev/null
+++ b/app/assets/stylesheets/components/charts/_chart-line.scss
@@ -0,0 +1,34 @@
+&--line {
+  .chart {
+    &__wrapper-ie11 { // do not remove - this is required to set the sizing for ie11
+      @include breakpoint($small) { 
+        padding-bottom: 54%; 
+        width: 100%;
+
+        position: relative;
+      }
+    }
+
+      &__scrollable {
+        @include breakpoint-down($small) { 
+          overflow-x: auto;
+
+          display: flex;
+        }
+      }
+
+        &__chart {
+          @include breakpoint-down($small) { min-width: 260%; }
+        }
+
+          &__svg { 
+            width: 100%;
+            
+            @include breakpoint($small) { 
+              position: absolute;
+              top: 0;
+              left: 0;
+            }
+          }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/charts/_interactive-multiline.scss b/app/assets/stylesheets/components/charts/_interactive-multiline.scss
deleted file mode 100644
index 333a679af..000000000
--- a/app/assets/stylesheets/components/charts/_interactive-multiline.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-.v-interactive-multiline {
-  &__tabs {
-    border-bottom: solid rem-calc(1) $grey-xdark;
-    font-family: 'MuseoSans';
-    font-weight: thin;
-  }
-
-    &__tab-title {
-      background-color: $blue--marine-3;
-      border-right: solid rem-calc(1) $blue--marine-2;
-      border-left: solid rem-calc(1) $blue--marine-2;
-      cursor: pointer;
-      font-size: rem-calc(12);
-      padding: rem-calc(8 10 5 10);
-      text-transform: capitalize;
-
-      display: inline-block;
-      position: relative;
-
-      @include breakpoint($large){ font-size: rem-calc(16); }
-
-      &.active { 
-        background-color: transparent; 
-        border: solid rem-calc(1) $grey-xdark;
-        border-bottom: 0;
-
-        &:after {
-          background-color: $blue--marine-2;
-          content: '';
-          width: 100%; height: rem-calc(1);
-
-          position: absolute;
-          bottom: -1px;
-          left: 0;
-        }
-      }
-    }
-
-  &__chart {
-    // hack to get the svg to scale in IE11
-    width: 100%;
-  
-    position: relative;
-    // end hack
-  }
-    &__svg {
-      // hack to get the svg to scale in IE11
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      // end hack
-    }
-
-      &__axis {
-        .domain { stroke: $grey-xdark; }
-
-        .tick {
-          line { stroke-width: 0; }
-
-          text { 
-            font-size: rem-calc(14);
-            fill: $blue--marine-5; 
-
-            @include breakpoint($large){ font-size: rem-calc(10); }
-          }
-        }
-      }
-
-      &__gridlines {
-        .domain { stroke-width: 0; }
-
-        .tick { 
-          line { stroke: $grey; }
-        }
-      }
-
-      &__target {
-        .domain { stroke-width: 0; }
-
-        .tick { 
-          line { 
-            stroke: $white; 
-            stroke-width: 2;
-            stroke-dasharray: 10px;
-          }
-
-          text {
-            fill: $white;
-            font-size: rem-calc(14);
-            font-weight: bold;
-
-            transform: translateY(6px);
-
-            @include breakpoint($large){ font-size: rem-calc(10); }
-          }
-        } 
-      }
-
-      &__line {
-        stroke: $blue--marine-5;
-        stroke-linecap: round;
-        stroke-width: 3;
-
-        stroke-dasharray: 1000;
-        stroke-dashoffset: 1000;
-
-        @include breakpoint($medium){ stroke-width: 2; }
-
-        @media screen\0 { 
-          opacity: 0; //target IE11
-          stroke-dashoffset: 0; //target IE11
-        }
-      }
-
-      &__line-active {
-        animation: dashOffsetNone 2s linear forwards 1;
-
-        @media screen\0 { 
-          animation: fullOpacity .1s linear forwards; //target IE11
-        }
-      }
-
-      &__datapoint {
-        cursor: pointer;
-        fill: white;
-        stroke: $blue--marine-5;
-        
-        transform-origin: 50%;
-        transform: scale(0);
-
-        @media screen\0 { opacity: 0; } //target IE11
-
-        .v-interactive-multiline__datapoints-active & {
-          animation: fullScaleXY .2s linear forwards 1s;
-
-          @media screen\0 { 
-            animation: fullOpacity .1s linear forwards; //target IE11
-          }
-        }
-      }
-
-    &__tooltip-wrapper {
-      position: absolute;
-    }
-
-    &__tooltip {
-      fill: white;
-      font-family: 'MuseoSans';
-      font-size: rem-calc(18);
-      display: none;
-      text-anchor: middle;
-    }
-
-    &__tooltip-active {
-      display: block;
-    }
-}
\ No newline at end of file
diff --git a/app/javascript/components/charts/chart-line/ChartLine.vue b/app/javascript/components/charts/chart-line/ChartLine.vue
index 6c8661b85..72147a99f 100644
--- a/app/javascript/components/charts/chart-line/ChartLine.vue
+++ b/app/javascript/components/charts/chart-line/ChartLine.vue
@@ -235,7 +235,6 @@
       },
 
       popupHide () {
-        console.log('here')
         this.popup.show = false
         this.popup.text = ''
         this.popup.x = 0
@@ -243,12 +242,10 @@
       },
 
       popupShow (datapoint) {
-        console.log('here')
         this.popup.show = true
         this.popup.text = datapoint.value 
         this.popup.x = datapoint.x
         this.popup.y = datapoint.y
-        console.log('popup tex', this.popup.text)
       },
 
       setAxisVariables () {
diff --git a/app/views/marine/index.html.erb b/app/views/marine/index.html.erb
index c2122ffae..bcbe4dd72 100644
--- a/app/views/marine/index.html.erb
+++ b/app/views/marine/index.html.erb
@@ -34,4 +34,49 @@
 <%= render partial: "marine/sections/coverage", locals: {
   cms_page: @cms_page,
   
-} %>
\ No newline at end of file
+} %>
+
+
+
+<%= render partial: "marine/sections/national" %>
+
+<section class="container--medium">
+  <h2><%= cms_fragment_render(:section_size_title, @cms_page) %></h2>
+  <div><%= cms_fragment_render(:section_size_content, @cms_page) %></div>
+</section>
+
+<%= render partial: "marine/sections/size_growth" %>
+
+<%= render partial: "marine/sections/coverage_growth" %>
+
+<%= render partial: "marine/sections/coverage_map" %>
+
+<%#= render partial: "partials/cards/sites", locals: { cards: @wdpa } %>
+
+<%= render "partials/carousels/themes" %>
+
+<%= render "partials/ctas/live-report" %>
+
+<%= content_for :twitter_card, "summary_large_image" %>
+<%= content_for :social_title, "Explore the World's Marine Protected Areas" %>
+<%= content_for :social_description, "Over 70% of the surface of Earth is ocean, comprised of highly diverse ecosystems, and providing a wide range of marine ecosystem services that support human society, health and the economy. This website presents the most recent official coverage statistics for marine protected areas, updated monthly from the World Database on Protected Areas." %>
+<%= content_for :social_image, image_url('social-marine.png') %>
+<%= content_for :social_image_alt, "A map of the world with highlighted areas that represent protected areas. The following statistics are shown: there are #{@marine_statistics['total_marine_protected_areas']} marine protected areas, #{@marine_statistics['total_ocean_pa_coverage_percentage']} of the ocean is covered by protected areas and the total area protected is 23,036,078km² These statistics are for 2017." %>
+
+<sticky-tab>
+<p>Highlight some text to share via Twitter or Email.</p>
+</sticky-tab>
+
+<social-share-text></social-share-text>
+
+<div class="js-download-btn tooltip-old__trigger marine-download">
+<button href="#" class="js-trigger btn-map-download btn-map-download--marine">
+<i class="fa fa-download big-button__icon"></i>Download the marine dataset
+</button>
+
+<%= download_dropdown("marine", "general", [:csv, :shp, :pdf]) %>
+</div>
+
+<footer class="template--marine__section container--profile template--marine__footer">
+<%= render partial: "marine/sections/footer" %>
+</footer>
diff --git a/app/views/marine/sections/_coverage.html.erb b/app/views/marine/sections/_coverage.html.erb
index b0dccae87..b871cc80d 100644
--- a/app/views/marine/sections/_coverage.html.erb
+++ b/app/views/marine/sections/_coverage.html.erb
@@ -1,4 +1,4 @@
-<section class="container section-padding bg--grey-xlight">
+<section class="section-padding bg--grey-xlight">
   <div class="container--medium">
     <h2><%= cms_fragment_render(:section_coverage_title, cms_page) %></h2>
     <div><%= cms_fragment_render(:section_coverage_content, cms_page) %></div>

From 06ba967e58cbbc0d95f09529c6a4241d49bb85f3 Mon Sep 17 00:00:00 2001
From: stacytalbot <stacymtalbot@gmail.com>
Date: Thu, 2 Apr 2020 10:31:02 +0100
Subject: [PATCH 11/11] Remove comments from controller

---
 app/controllers/marine_controller.rb | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/controllers/marine_controller.rb b/app/controllers/marine_controller.rb
index f140eb7f9..f30e193ce 100644
--- a/app/controllers/marine_controller.rb
+++ b/app/controllers/marine_controller.rb
@@ -153,12 +153,6 @@ def marine_statistics
   end
 
   def growth
-    # @protectedAreasGrowth = [
-    #   {
-    #     id: 'a',
-    #     datapoints: [{x:0,y:0},{x:1,y:1},{x:2,y:2},{x:3,y:3},{x:4,y:4},{x:5,y:5},{x:6,y:6},{x:7,y:7}]
-    #   }
-    # ].to_json
     @protectedAreasGrowth = [
       {
         id: "Global",