re-use some more unchanging variables when changing chart data

assets/src/js/components/Chart.js

@@ -8,15 +8,32 @@ import * as d3 from 'd3';
 import 'd3-transition';
 d3.tip = require('d3-tip');
 
-function padZero(s) {
-  return s < 10 ? "0" + s : s;
-}
-
 const formatDay = d3.timeFormat("%e"),
     formatMonth = d3.timeFormat("%b"),
     formatMonthDay = d3.timeFormat("%b %e"),
     formatYear = d3.timeFormat("%Y");
 
+const t = d3.transition().duration(500).ease(d3.easeQuadOut);
+
+// tooltip
+const tip = d3.tip().attr('class', 'd3-tip').html((d) => (`
+  <div class="tip-heading">${d.Date.toLocaleDateString()}</div>
+  <div class="tip-content">
+    <div class="tip-pageviews">
+      <div class="tip-number">${d.Pageviews}</div>
+      <div class="tip-metric">Pageviews</div>
+    </div>
+    <div class="tip-visitors">
+      <div class="tip-number">${d.Visitors}</div>
+      <div class="tip-metric">Visitors</div>
+    </div>
+  </div>
+`));
+
+function padZero(s) {
+  return s < 10 ? "0" + s : s;
+}
+
 function timeFormatPicker(n) {
   return function(d, i) {
     if(d.getDate() === 1) {
@@ -71,6 +88,8 @@ function prepareData(startUnix, endUnix, data) {
  return newData;
 }
 
+
+
 class Chart extends Component {
   constructor(props) {
     super(props)
@@ -104,11 +123,15 @@ class Chart extends Component {
       .attr('height', height)
       .append('g')
       .attr('transform', 'translate(' + padding.left + ', '+padding.top+')')
+
+    this.x = d3.scaleBand().range([0, this.innerWidth]).padding(0.1)
+    this.y = d3.scaleLinear().range([this.innerHeight, 0])
+    this.ctx.call(tip)
   }
 
   @bind
   redrawChart() {
-    var data = this.state.data;
+    const data = this.state.data;
     this.base.parentNode.style.display = data.length <= 1 ? 'none' : '';
     if(data.length <= 1) {
       return;
@@ -118,32 +141,27 @@ class Chart extends Component {
       this.prepareChart()
     }
 
+    let graph = this.ctx;
     let innerWidth = this.innerWidth
     let innerHeight = this.innerHeight
-  
-    // empty previous graph
-    this.ctx.selectAll('*').remove()
-
-    let graph = this.ctx;
-    const t = d3.transition().duration(500).ease(d3.easeQuadOut);
     const max = d3.max(data, (d) => d.Pageviews);
-
+    let x = this.x.domain(data.map((d) => d.Date))
-    // axes
+    let y = this.y.domain([0, (max*1.1)])
-    let x = d3.scaleBand().range([0, innerWidth]).padding(0.1).domain(data.map((d) => d.Date))
-    let y  = d3.scaleLinear().range([innerHeight, 0]).domain([0, (max*1.1)])
     let yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth)
     let xAxis = d3.axisBottom().scale(x).tickFormat(timeFormatPicker(data.length))
     
+    // empty previous graph
+    graph.selectAll('*').remove()
+
+    // add axes
     let yTicks = graph.append("g")
       .attr("class", "y axis")
       .call(yAxis);
-
     let xTicks = graph.append("g")
       .attr("class", "x axis")
       .attr('transform', 'translate(0,' + innerHeight + ')')
       .call(xAxis)
 
-   
     // hide all "day" ticks if we're watching more than 100 days of data
     xTicks.selectAll('g').style('display', (d, i) => { 
       if(data.length > 100 && d.getDate() > 1 ) {
@@ -153,22 +171,7 @@ class Chart extends Component {
       return '';
     })
 
-    // tooltip
+    // add data for each day
-    const tip = d3.tip().attr('class', 'd3-tip').html((d) => (`
-      <div class="tip-heading">${d.Date.toLocaleDateString()}</div>
-      <div class="tip-content">
-        <div class="tip-pageviews">
-          <div class="tip-number">${d.Pageviews}</div>
-          <div class="tip-metric">Pageviews</div>
-        </div>
-        <div class="tip-visitors">
-          <div class="tip-number">${d.Visitors}</div>
-          <div class="tip-metric">Visitors</div>
-        </div>
-      </div>
-    `));
-    graph.call(tip)
-
     let days = graph.selectAll('g.day').data(data).enter()
       .append('g')
       .attr('class', 'day')