Streamline aligning layers

src/components/MapEvents.jsx

@@ -16,33 +16,22 @@ class MapEvents extends React.Component {
     const categories = this.props.categories;
 
     categories.forEach(cat => {
-      eventCount[cat.category] = 0
+      eventCount[cat.category] = [];
     });
 
     location.events.forEach((event) => {;
-      eventCount[event.category] += 1;
+      eventCount[event.category].push(event);
     });
 
-    let i = 0;
-    const events = [];
-
-    while (i < categories.length) {
-      let _eventsCount = eventCount[categories[i].category];
-      for (let j = i + 1; j < categories.length; j++) {
-        _eventsCount += eventCount[categories[j].category];
-      }
-      events.push(_eventsCount);
-      i++;
-    }
-    return events;
+    return eventCount;
   }
 
-  renderCategory(counts, events) {
+  renderCategory(events, category) {
     return (
       <circle
         className="location-event-marker"
-        r={(counts) ? Math.sqrt(16 * counts) + 3 : 0}
-        style={{ fill: 'yellow'/*this.props.getCategoryColor(events[0])*/, fillOpacity: 0.2 }}
+        r={(events) ? Math.sqrt(16 * events.length) + 3 : 0}
+        style={{ fill: this.props.getCategoryColor(category), fillOpacity: 0.8 }}
         onClick={() => this.props.onSelect(events)}
       >
       </circle>
@@ -51,22 +40,23 @@ class MapEvents extends React.Component {
 
   renderLocation(location) {
     const { x, y } = this.projectPoint([location.latitude, location.longitude]);
-    const eventsCounts = this.getLocationEventsDistribution(location);
+    const eventsByCategory = this.getLocationEventsDistribution(location);
 
     return (
       <g
         className="location"
         transform={`translate(${x}, ${y})`}
       >
-        {eventsCounts.map(eventsCount => this.renderCategory(eventsCount, location.events))}
+        {Object.keys(eventsByCategory).map(cat => {
+          return this.renderCategory(eventsByCategory[cat], cat)
+        })}
       </g>
     )
   }
 
   render() {
-
     return (
-      <Portal node={this.props.svg.node()}>
+      <Portal node={this.props.svg}>
         {this.props.locations.map(loc => this.renderLocation(loc))}
       </Portal>
     );