Time zero line and description for gray region

.gitignore

@@ -37,4 +37,5 @@ jspm_packages
 .node_repl_history
 
 dist
-.fuse*
+.fuse*
+/src/.tern-port

src/components/time-chart/timerect.js

@@ -12,6 +12,12 @@ export default class TimeRect extends SComponent {
       .attr('width', 0)
       .attr('height', layout.height)
       .attr('class', 'timerect')
+
+    this.text = this.selection.append('text')
+      .attr('class', 'data-version-text')
+      .attr('transform', `translate(15, 0) rotate(-90)`)
+      .style('text-anchor', 'end')
+      .text('Data as of')
   }
 
   plot (scales) {
@@ -28,6 +34,11 @@ export default class TimeRect extends SComponent {
         .transition()
         .duration(200)
         .attr('width', this.xScaleDate(time))
+
+      this.text
+        .transition()
+        .duration(200)
+        .attr('transform', `translate(${this.xScaleDate(time) + 15}, 10) rotate(-90)`)
     }
   }
 }

src/components/time-chart/timezero-line.js

@@ -0,0 +1,44 @@
+import SComponent from '../s-component'
+
+export default class TimezeroLine extends SComponent {
+  constructor (layout) {
+    super()
+    this.line = this.selection.append('line')
+      .attr('class', 'timezero-line')
+      .attr('x1', 0)
+      .attr('y1', 0)
+      .attr('x2', 0)
+      .attr('y2', layout.totalHeight)
+
+    this.text = this.selection.append('text')
+      .attr('class', 'timezero-text')
+      .attr('transform', 'translate(-10, 10) rotate(-90)')
+      .style('text-anchor', 'end')
+      .text('Timezero')
+  }
+
+  set x (x) {
+    this.line
+      .transition()
+      .duration(200)
+      .attr('x1', x)
+      .attr('x2', x)
+
+    this.text
+      .transition()
+      .duration(200)
+      .attr('dy', x)
+  }
+
+  set textHidden (state) {
+    this.text.style('display', state ? 'none' : null)
+  }
+
+  plot (scales) {
+    this.xScale = scales.xScale
+  }
+
+  update (idx) {
+    this.x = this.xScale(idx)
+  }
+}

src/styles/components/time-chart/_overlay.scss

@@ -6,6 +6,17 @@
   fill: $white-shade;
 }
 
+.timezero-line {
+  stroke: $hover-line;
+  stroke-dasharray: 10 5;
+  stroke-width: 1px;
+}
+
+.data-version-text, .timezero-text {
+  fill: $gray-light;
+  font-size: 10px;
+}
+
 .now-line {
   stroke: $black;
   stroke-dasharray: 10 5;

src/time-chart.js

@@ -10,6 +10,7 @@ import Baseline from './components/time-chart/baseline'
 import HistoricalLines from './components/time-chart/historical-lines'
 import Observed from './components/time-chart/observed'
 import Overlay from './components/time-chart/overlay'
+import TimezeroLine from './components/time-chart/timezero-line'
 import Prediction from './components/time-chart/prediction'
 import TimeRect from './components/time-chart/timerect'
 import Chart from './chart'
@@ -51,6 +52,7 @@ export default class TimeChart extends Chart {
     }))
 
     this.timerect = this.append(new TimeRect(this.layout))
+    this.timezeroLine = this.append(new TimezeroLine(this.layout))
     this.overlay = this.append(new Overlay(this.layout, { tooltip: this.tooltip, uuid: this.uuid }))
     this.history = this.append(new HistoricalLines({ tooltip: this.tooltip }))
     this.baseline = this.append(new Baseline(this.layout, { ...this.config.baseline, tooltip: this.tooltip }))
@@ -141,6 +143,7 @@ export default class TimeChart extends Chart {
     this.yAxis.plot(this.scales)
 
     this.timerect.plot(this.scales)
+    this.timezeroLine.plot(this.scales)
     this.baseline.hidden = !this.dataConfig.baseline
     if (this.dataConfig.baseline) {
       this.baseline.plot(this.scales, data.baseline)
@@ -212,6 +215,13 @@ export default class TimeChart extends Chart {
         this.observed.update(idx)
       }
       this.controlPanel.update(this.predictions)
+
+      // Since version times are present (and might be different)
+      // we show the time zero line separately
+      this.timezeroLine.hidden = !this.dataConfig.predictions.versionTime
+      this.timezeroLine.textHidden = this.predictions.every(p => p.noData)
+
+      this.timezeroLine.update(idx)
     }
   }