From 7b5e5402e525ae104d91f2646195a2d5cb836291 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 7 Jun 2016 10:48:43 -0700 Subject: [PATCH] add new chart colors; tweak chart styles per #1348 --- _sass/_variables.scss | 1 + _sass/blocks/_chart-list.scss | 24 ++++++++ _sass/components/_eiti-line-chart.scss | 8 ++- js/lib/state-pages.min.js | 77 ++++++++++++++++++-------- 4 files changed, 83 insertions(+), 27 deletions(-) diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 190c27c54..7ea1fae52 100644 --- 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 index a928b6617..41989e449 100644 --- 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 index 61ecd3c7b..9f5d62fcc 100644 --- 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 index 89b8dc835..42f2a73f6 100644 --- 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;