add new chart colors; tweak chart styles per #1348

DOI-ONRR · Jun 8, 2016 · 7b5e540 · 7b5e540
1 parent 3860089
commit 7b5e540
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 27 deletions.
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -64,6 +64,7 @@ $green-land: #d5e5cb;
 $green-mint: #d2e2cc;
 $green-sea: #b1d39c;
 $green-dark: #657c60;
+$chart-green: #a5d78a;
 
 // v2 - deprecate
 $putty: #f4f4f4;

diff --git a/_sass/blocks/_chart-list.scss b/_sass/blocks/_chart-list.scss
@@ -1,6 +1,15 @@
 .chart-list {
+  @include font-size(0.8);
   @include outer-container();
 
+  .chart-title {
+    border-bottom: 1px solid #ddd;
+    font-size: inherit;
+    font-weight: $weight-book;
+    margin-bottom: 0;
+    text-transform: uppercase;
+  }
+
   .chart-list-intro {
     @include span-columns(8);
   }
@@ -16,4 +25,19 @@
       @include omega();
     }
   }
+
+  figcaption {
+    padding: 5px; // XXX
+    font-weight: $weight-bold;
+    display: flex;
+
+    & > * {
+      flex: 1;
+      width: 50%;
+    }
+
+    & > :last-child {
+      text-align: right;
+    }
+  }
 }
diff --git a/_sass/components/_eiti-line-chart.scss b/_sass/components/_eiti-line-chart.scss
@@ -9,9 +9,10 @@ eiti-line-chart {
 
   .line {
     fill: none;
-    stroke: $green;
+    opacity: 0.666;
+    stroke: $chart-green;
     stroke-linecap: round;
-    stroke-width: 2;
+    stroke-width: 3;
     vector-effect: non-scaling-stroke;
   }
 
@@ -21,7 +22,7 @@ eiti-line-chart {
   }
 
   circle {
-    fill: $green;
+    fill: $chart-green;
   }
 
   .axis {
@@ -42,6 +43,7 @@ eiti-line-chart {
 
     text {
       @include font-size(1);
+      font-weight: $weight-book;
     }
   }
 }
diff --git a/js/lib/state-pages.min.js b/js/lib/state-pages.min.js
@@ -789,28 +789,40 @@
 	  var DATA = '__es_data__';
 	  var SELECTED = '__es_selected__';
 
-	  var observedAttributes = ['data', 'selected'];
+	  var observedAttributes = ['x-range', 'data', 'selected'];
 
 	  // global dimensions
-	  var width = 600;
-	  var height = 200;
-	  var margin = 20;
-	  var left = margin;
-	  var right = width - margin;
-	  var top = margin;
-	  var bottom = height - margin;
+	  var width = 300;
+	  var height = 100;
+	  var dotRadius = 8;
+	  var baseMargin = 16;
+	  var margin = {
+	    top: dotRadius + 1,
+	    right: baseMargin,
+	    bottom: baseMargin + dotRadius,
+	    left: baseMargin
+	  };
+
+	  var left = margin.left;
+	  var right = width - margin.right;
+	  var top = margin.top;
+	  var bottom = height - margin.bottom;
 
 	  var attached = function() {
 	    var svg = d3.select(this)
 	      .append('svg')
 	        .attr('viewBox', [0, 0, width, height].join(' '));
+	    /*
+	    svg.append('path')
+	      .attr('class', 'data area');
+	    */
+	    svg.append('g')
+	      .attr('class', 'axis x-axis');
 	    svg.append('path')
 	      .attr('class', 'data line');
 	    svg.append('circle')
 	      .attr('class', 'data point selected')
-	      .attr('r', 6);
-	    svg.append('g')
-	      .attr('class', 'axis x-axis');
+	      .attr('r', dotRadius);
 
 	    observedAttributes.forEach(function(attr) {
 	      if (this.hasAttribute(attr)) {
@@ -821,6 +833,9 @@
 
 	  var attributeChanged = function(name, previous, value) {
 	    switch (name) {
+	      case 'x-range':
+	        this.xrange = JSON.parse(value);
+	        break;
 	      case 'data':
 	        this.data = JSON.parse(value);
 	        break;
@@ -854,11 +869,14 @@
 
 	    // console.log('data:', data, 'values:', values);
 
-	    var extent = d3.extent(data, function(d) { return +d.x; });
-	    var xdomain = d3.range(extent[0], extent[1] + 1);
+	    var xrange = this.xrange;
+	    if (!xrange) {
+	      xrange = d3.extent(data, function(d) { return +d.x; });
+	    }
 
+	    var xdomain = d3.range(xrange[0], xrange[1] + 1);
 	    var x = d3.scale.linear()
-	      .domain(extent)
+	      .domain(xrange)
 	      .range([left, right]);
 
 	    xdomain.forEach(function(x) {
@@ -867,11 +885,12 @@
 	      }
 	    });
 
-	    var ymax = d3.max(data, function(d) { return d.y; });
-	    // console.log('y-max:', ymax);
+	    var extent = d3.extent(data, function(d) { return d.y; });
+	    var ymax = extent[1];
+	    var ymin = extent[0]; // XXX 0?
 
 	    var y = d3.scale.linear()
-	      .domain([0, ymax])
+	      .domain([ymin, ymax])
 	      .range([bottom, top]);
 
 	    var svg = d3.select(this).select('svg');
@@ -887,6 +906,17 @@
 	      .datum(data)
 	      .attr('d', line(data));
 
+	    /*
+	    var area = d3.svg.area()
+	      .x(line.x())
+	      .y0(bottom)
+	      .y1(line.y());
+
+	    svg.select('.area')
+	      .datum(data)
+	      .attr('d', area(data));
+	    */
+
 	    var x1 = xdomain[xdomain.length - 1];
 	    var selected = this.selected || x1;
 	    svg.select('.selected')
@@ -899,6 +929,9 @@
 	    var axis = d3.svg.axis()
 	      .orient('bottom')
 	      .scale(x)
+	      .innerTickSize(-height)
+	      .outerTickSize(0)
+	      .tickPadding(dotRadius + 4)
 	      .tickFormat(function(x) {
 	        return String(x).substr(2);
 	      });
@@ -913,10 +946,10 @@
 	  var updateSelected = function(circle, value, x, y) {
 	    circle
 	      .attr('cx', function(d) {
-	        return d[value] ? x(d[value].x) : -100;
+	        return d[value] ? x(d[value].x) : x(value);
 	      })
 	      .attr('cy', function(d) {
-	        return d[value] ? y(d[value].y) : -100;
+	        return d[value] ? y(d[value].y) : y(0);
 	      });
 	  };
 
@@ -957,11 +990,7 @@
 	    )
 	  });
 
-	  Object.defineProperty(EITILineChart, 'observedAttributes', {
-	    get: function() {
-	      return observedAttributes;
-	    }
-	  });
+	  EITILineChart.observedAttributes = observedAttributes;
 
 	  exports.EITILineChart = EITILineChart;