WIP: project bars starting to magic...

src/common/utilities.js

@@ -183,3 +183,7 @@ export function getEventOpacity (events) {
   const base = events.length >= 1 ? 0.3 : 0
   return base + (Math.min(0.5, 0.08 * (events.length - 1)))
 }
+
+export const dateMin = function () { return Array.prototype.slice.call(arguments).reduce(function (a, b) { return a < b ? a : b }) }
+
+export const dateMax = function () { return Array.prototype.slice.call(arguments).reduce(function (a, b) { return a > b ? a : b }) }

src/components/presentational/Timeline/DatetimeBar.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const actual = ({
+export default ({
   category,
   events,
   x,
@@ -22,4 +22,4 @@ const actual = ({
   />
 )
 
-export default () => null
+// export default () => null

src/components/presentational/Timeline/Events.js

@@ -81,6 +81,31 @@ const TimelineEvents = ({
 
       const extraRender = customStyles[1]
 
+      let bar = <DatetimeBar
+        onSelect={() => onSelect(unlocatedEvents)}
+        category={dot.category}
+        events={unlocatedEvents}
+        x={getDatetimeX(datetime)}
+        y={dims.marginTop}
+        width={sizes.eventDotR}
+        height={dims.trackHeight}
+        styleProps={unlocatedProps}
+      />
+      if (process.env.features.ASSOCIATIVE_EVENTS_BY_TAG) {
+        // render all dots individually
+        bar = <React.Fragment>
+          {unlocatedEvents.map(ev => (<DatetimeBar
+            onSelect={() => onSelect(unlocatedEvents)}
+            category={dot.category}
+            events={[ev]}
+            x={getDatetimeX(datetime)}
+            y={ev.projectOffset >= 0 ? dims.trackHeight - ev.projectOffset : dims.marginTop}
+            width={sizes.eventDotR}
+            height={ev.projectOffset >= 0 ? sizes.eventDotR * 2 : 20}
+            styleProps={unlocatedProps}
+          />))}
+        </React.Fragment>
+      }
       return (
         <g className='datetime'>
           {locatedEvents.length >= 1 && <DatetimeDot
@@ -93,16 +118,7 @@ const TimelineEvents = ({
             styleProps={locatedProps}
             extraRender={extraRender}
           />}
-          {unlocatedEvents.length >= 1 && <DatetimeBar
-            onSelect={() => onSelect(unlocatedEvents)}
-            category={dot.category}
-            events={unlocatedEvents}
-            x={getDatetimeX(datetime)}
-            y={dims.marginTop}
-            width={(2 * sizes.eventDotR) * 0.9}
-            height={dims.trackHeight}
-            styleProps={unlocatedProps}
-          />}
+          {unlocatedEvents.length >= 1 && bar}
           {extraRender ? extraRender() : null}
         </g>
       )

src/selectors/index.js

@@ -1,6 +1,7 @@
 import { createSelector } from 'reselect'
-import { compareTimestamp, insetSourceFrom } from '../common/utilities'
+import { compareTimestamp, insetSourceFrom, dateMin, dateMax } from '../common/utilities'
 import { isTimeRangedIn, shuffle } from './helpers'
+import { sizes } from '../common/global'
 
 // Input selectors
 export const getEvents = state => state.domain.events
@@ -151,8 +152,21 @@ export const selectLocations = createSelector(
 export const selectDatetimes = createSelector(
   [selectEvents],
   events => {
+    const projects = {}
     const datetimes = {}
     events.forEach(event => {
+      if (process.env.features.ASSOCIATIVE_EVENTS_BY_TAG) {
+        const project = event.tags.length >= 1 ? event.tags[0] : null
+        event = { ...event, project }
+        if (project !== null) {
+          if (projects.hasOwnProperty(project)) {
+            projects[project].start = dateMin(projects[project].start, event.timestamp)
+            projects[project].end = dateMax(projects[project].end, event.timestamp)
+          } else {
+            projects[project] = { start: event.timestamp, end: event.timestamp }
+          }
+        }
+      }
       const { timestamp } = event
       if (datetimes.hasOwnProperty(timestamp)) {
         datetimes[timestamp].events.push(event)
@@ -165,6 +179,26 @@ export const selectDatetimes = createSelector(
         }
       }
     })
+    // console.log(projects)
+    // console.log(datetimes)
+    const projKeys = Object.keys(projects)
+    function checkActive (pj, dt) {
+      return dt >= projects[pj].start && dt <= projects[pj].end
+    }
+    let sortedDts = Object.keys(datetimes)
+    sortedDts.sort((a, b) => new Date(a) - new Date(b))
+    sortedDts.forEach(dt => {
+      const activeProjects = []
+      projKeys.forEach((k, idx) => {
+        if (checkActive(k, dt)) activeProjects.push(k)
+      })
+      datetimes[dt].events = datetimes[dt].events.map(ev => ({
+        ...ev,
+        projectOffset: (activeProjects.indexOf(ev.project)) * (2 * sizes.eventDotR + 5)
+      }))
+    })
+
+    // TODO: calculate Y offset based on projects
     return Object.values(datetimes)
   }
 )