Add axis to history graphs (#1529)

* Update topology to latest * Add axis to history graphs * Offset by 1px
electricitymaps · Jul 30, 2018 · bfbc754 · bfbc754
1 parent 8ac91b6
commit bfbc754
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 28 deletions.
diff --git a/web/src/components/areagraph.js b/web/src/components/areagraph.js
@@ -17,6 +17,15 @@ function AreaGraph(selector, modeColor, modeOrder) {
     var that = this;
 
     this.rootElement = d3.select(selector);
+
+    // Create axis
+    this.xAxisElement = this.rootElement.append('g')
+        .attr('class', 'x axis')
+        .style('pointer-events', 'none');
+    this.yAxisElement = this.rootElement.append('g')
+        .attr('class', 'y axis')
+        .style('pointer-events', 'none');
+
     this.graphElement = this.rootElement.append('g');
     this.interactionRect = this.graphElement.append('rect')
         .style('cursor', 'pointer')
@@ -26,21 +35,14 @@ function AreaGraph(selector, modeColor, modeOrder) {
         .style('display', 'none')
         .style('pointer-events', 'none')
         .style('shape-rendering', 'crispEdges')
+
     this.markerElement = this.rootElement.append('circle')
         .style('pointer-events', 'none')
         .style('display', 'none')
         .attr('r', 6)
         .style('stroke', 'black')
         .style('stroke-width', 1.5);
 
-    // Create axis
-    this.xAxisElement = this.rootElement.append('g')
-        .attr('class', 'x axis')
-        .style('pointer-events', 'none');
-    this.yAxisElement = this.rootElement.append('g')
-        .attr('class', 'y axis')
-        .style('pointer-events', 'none');
-
     // Create scales
     this.x = d3.scaleTime();
     this.y = d3.scaleLinear();
@@ -308,15 +310,14 @@ AreaGraph.prototype.render = function() {
         .ticks(5)
         .tickFormat(function(d) { return moment(d).format('LT'); });
     this.xAxisElement
-        // Need to remove 1px in order to see the 1px line
-        .attr('transform', `translate(0 ${height - X_AXIS_HEIGHT})`)
+        .attr('transform', `translate(-1 ${height - X_AXIS_HEIGHT - 1})`)
         .call(xAxis);
 
     // y axis
     var yAxis = d3.axisRight(y)
         .ticks(5);
     this.yAxisElement
-        .attr('transform', `translate(${width - Y_AXIS_WIDTH} 0)`)
+        .attr('transform', `translate(${width - Y_AXIS_WIDTH - 1} -1)`)
         .call(yAxis);
 
     return this;

diff --git a/web/src/components/linegraph.js b/web/src/components/linegraph.js
@@ -14,6 +14,15 @@ var moment = require('moment');
 
 function LineGraph(selector, xAccessor, yAccessor, definedAccessor) {
     this.rootElement = d3.select(selector);
+
+    // Create axis
+    this.xAxisElement = this.rootElement.append('g')
+        .attr('class', 'x axis')
+        .style('pointer-events', 'none');
+    this.yAxisElement = this.rootElement.append('g')
+        .attr('class', 'y axis')
+        .style('pointer-events', 'none');
+
     this.graphElement = this.rootElement.append('g');
     this.interactionRect = this.graphElement.append('rect')
         .style('cursor', 'pointer')
@@ -39,14 +48,6 @@ function LineGraph(selector, xAccessor, yAccessor, definedAccessor) {
     this.definedAccessor = definedAccessor;
     this._gradient = true;
 
-    // Create axis
-    this.xAxisElement = this.rootElement.append('g')
-        .attr('class', 'x axis')
-        .style('pointer-events', 'none');
-    this.yAxisElement = this.rootElement.append('g')
-        .attr('class', 'y axis')
-        .style('pointer-events', 'none');
-
     // Create scales
     var x, y;
     this.x = x = d3.scaleTime();
@@ -250,15 +251,14 @@ LineGraph.prototype.render = function () {
         .ticks(5)
         .tickFormat(function(d) { return moment(d).format('LT'); });
     this.xAxisElement
-        // Need to remove 1px in order to see the 1px line
-        .attr('transform', `translate(0 ${height - X_AXIS_HEIGHT})`) // Need to use transform attribute (and not css property) due to lack of IE support: https://aheadcreative.co.uk/articles/svg-transitions-not-working-ie11/
+        .attr('transform', `translate(-1 ${height - X_AXIS_HEIGHT - 1})`) // Need to use transform attribute (and not css property) due to lack of IE support: https://aheadcreative.co.uk/articles/svg-transitions-not-working-ie11/
         .call(xAxis);
 
     // y axis
     var yAxis = d3.axisRight(y)
         .ticks(5);
     this.yAxisElement
-        .attr('transform', `translate(${width - Y_AXIS_WIDTH} 0)`)
+        .attr('transform', `translate(${width - Y_AXIS_WIDTH - 1} -1)`)
         .call(yAxis);
 
     return this;

diff --git a/web/src/styles.css b/web/src/styles.css
@@ -380,9 +380,8 @@ body {
     color: black;
 }
 .left-panel .axis .tick line {
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-    stroke: gray;
+    shape-rendering: auto;
+    stroke: lightgray;
     stroke-width: 1;
 }
 .left-panel .axis .tick text {
@@ -391,9 +390,8 @@ body {
 }
 .left-panel .axis path.domain {
     fill: none;
-    opacity: 0.3;
-    shape-rendering: crispEdges;
-    stroke: transparent;
+    shape-rendering: auto;
+    stroke: lightgray;
 }
 .left-panel-toolbar,
 .left-panel-zone-details-toolbar {