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}
+  />
 )

src/store/initial.js

@@ -69,15 +69,16 @@ const initial = {
         trackHeight: 80
       },
       range: [
-        new Date(1993, 2, 23, 12),
-        new Date(2023, 2, 23, 12)
+        new Date(2001, 2, 23, 12),
+        new Date(2021, 2, 23, 12)
       ],
       zoomLevels: [
-        { label: '30 years', duration: 15768000 },
-        { label: '3 years', duration: 1576800 },
+        { label: '20 years', duration: 10512000 },
+        { label: '2 years', duration: 1051200 },
         { label: '3 months', duration: 129600 },
         { label: '3 days', duration: 4320 },
-        { label: '12 hours', duration: 720 }
+        { label: '12 hours', duration: 720 },
+        { label: '1 hour', duration: 60 }
       ]
     },
     flags: {