add event counts for locations

src/components/Map.jsx

@@ -168,8 +168,10 @@ class Map extends React.Component {
    * components in the <g/> div.
    */
   styleLocation(location) {
+    const noEvents = location.events.length
     return [
-      { fill: 'orange' },
+      null,
+      () => noEvents > 1 ? <text className='location-count' dx='-3' dy='4'>{noEvents}</text> : null
     ]
   }
 

src/components/MapEvents.jsx

@@ -64,12 +64,12 @@ class MapEvents extends React.Component {
       <g
         className="location"
         transform={`translate(${x}, ${y})`}
+        onClick={() => this.props.onSelect(location.events)}
       >
         <circle
           className="location-event-marker"
           r={7}
           style={styles}
-          onClick={() => this.props.onSelect(events)}
         >
         </circle>
         {extraRender ? extraRender() : null}

src/components/Timeline.jsx

@@ -221,9 +221,7 @@ class Timeline extends React.Component {
    * components in the <g/> div.
    */
   styleDatetime(timestamp) {
-    return [
-      { fill: 'orange' },
-    ]
+    return []
   }
 
   render() {

src/components/presentational/TimelineEvents.js

@@ -35,6 +35,7 @@ const TimelineEvents = ({
       <g
         className='datetime'
         transform={`translate(${getDatetimeX(datetime)}, ${getDatetimeY(datetime)})`}
+        onClick={() => onSelect(datetime.events)}
       >
         <circle
           className="event"
@@ -42,7 +43,6 @@ const TimelineEvents = ({
           cy={0}
           style={styleProps}
           r={5}
-          onClick={() => onSelect(datetime.events)}
         >
         </circle>
         { extraRender ? extraRender() : null }