fmts dates in timeline better for larger timeframes

src/components/Timeline.jsx

@@ -293,7 +293,7 @@ class Timeline extends React.Component {
               />
               <Axis
                 dims={dims}
-                timerange={this.props.app.timerange}
+                extent={this.getTimeScaleExtent()}
                 transitionDuration={this.state.transitionDuration}
                 scaleX={this.state.scaleX}
               />

src/components/TimelineAxis.jsx

@@ -12,20 +12,35 @@ class TimelineAxis extends React.Component {
   }
 
   componentDidUpdate () {
+    let fstFmt, sndFmt
+
+    // 10yrs
+    if (this.props.extent > 5256000) {
+      fstFmt = '%Y'
+      sndFmt = ''
+    // 1yr
+    } else if (this.props.extent > 43200) {
+      sndFmt = '%Y'
+      fstFmt = '%d %b'
+    } else {
+      sndFmt = '%d %b'
+      fstFmt = '%H:%M'
+    }
+
     if (this.props.scaleX) {
       this.x0 =
         d3.axisBottom(this.props.scaleX)
           .ticks(10)
           .tickPadding(5)
           .tickSize(this.props.dims.trackHeight)
-          .tickFormat(d3.timeFormat('%d %b'))
+          .tickFormat(d3.timeFormat(fstFmt))
 
       this.x1 =
         d3.axisBottom(this.props.scaleX)
           .ticks(10)
           .tickPadding(this.props.dims.margin_top)
           .tickSize(0)
-          .tickFormat(d3.timeFormat('%H:%M'))
+          .tickFormat(d3.timeFormat(sndFmt))
 
       if (!this.state.isInitialized) this.setState({ isInitialized: true })
     }

src/components/presentational/Timeline/DatetimeBar.js

@@ -9,13 +9,13 @@ export default ({
   styleProps,
   extraRender
 }) => (
-    <rect
-      onClick={onSelect}
-      className='event'
-      x={x}
-      y={y}
-      style={styleProps}
-      width={4}
-      height={55}
-    />
+  <rect
+    onClick={onSelect}
+    className='event'
+    x={x}
+    y={y}
+    style={styleProps}
+    width={4}
+    height={55}
+  />
 )