WIP: gritty rewrite of timestamp handling

src/components/presentational/Card/Category.js

@@ -1,12 +1,12 @@
 import React from 'react'
 
-import { capitalizeFirstLetter } from '../../../common/utilities.js'
+import { capitalize } from '../../../common/utilities.js'
 
 const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
   <div className='card-row card-cell category'>
     <h4>{categoryTitle}</h4>
     <p>
-      {capitalizeFirstLetter(categoryLabel)}
+      {capitalize(categoryLabel)}
       <span className='color-category' style={{ background: color }} />
     </p>
   </div>

src/components/presentational/Card/Time.js

@@ -3,7 +3,7 @@ import React from 'react'
 import copy from '../../../common/data/copy.json'
 import { isNotNullNorUndefined } from '../../../common/utilities'
 
-const CardTimestamp = ({ timelabel, language, precision }) => {
+const CardTime = ({ timelabel, language, precision }) => {
   // const daytimeLang = copy[language].cardstack.timestamp
   // const estimatedLang = copy[language].cardstack.estimated
   const unknownLang = copy[language].cardstack.unknown_time
@@ -29,4 +29,4 @@ const CardTimestamp = ({ timelabel, language, precision }) => {
   }
 }
 
-export default CardTimestamp
+export default CardTime

src/components/presentational/Timeline/Events.js

@@ -92,19 +92,26 @@ const TimelineEvents = ({
       }
     }
 
-    let defaultY = getCategoryY(event.category)
+    let eventY = getCategoryY(event.category)
+    const isNonlocated = !event.latitude && !event.longitude
+    if (features.GRAPH_NONLOCATED && isNonlocated) {
+      const { project } = event
+      if (project) {
+        const { offset } = projects[project]
+        eventY = dims.marginTop + offset + sizes.eventDotR
+      }
+    }
+
     let colour = event.colour ? event.colour : getCategoryColor(event.category)
     const styles = {
       fill: colour,
-      fillOpacity: defaultY > 0 ? calcOpacity(1) : 0,
+      fillOpacity: eventY > 0 ? calcOpacity(1) : 0,
       transition: `transform ${transitionDuration / 1000}s ease`
     }
 
     return renderShape(event, styles, {
-      x: getDatetimeX(event.timestamp),
-      y: (features.GRAPH_NONLOCATED && !event.latitude && !event.longitude)
-        ? event.projectOffset >= 0 ? dims.trackHeight - event.projectOffset : dims.marginTop
-        : getCategoryY ? defaultY : () => null,
+      x: getDatetimeX(event.datetime),
+      y: eventY,
       onSelect: () => onSelect(event),
       dims,
       highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.tags[features.HIGHLIGHT_GROUPS.tagIndexIndicatingGroup]) : [],
@@ -113,11 +120,12 @@ const TimelineEvents = ({
   }
 
   /* set `renderProjects` */
+  // TODO(lachlan): remove hardcoded 'Legislation'
   let renderProjects = () => null
   if (features.GRAPH_NONLOCATED) {
     renderProjects = function () {
       return <React.Fragment>
-        {projects.map(project => <Project
+        {Object.values(projects).map(project => <Project
           {...project}
           onClick={() => console.log(project)}
           getX={getDatetimeX}

src/components/presentational/Timeline/Header.js

@@ -1,15 +1,19 @@
 import React from 'react'
 
-const TimelineHeader = ({ title, date0, date1, onClick, hideInfo }) => (
-  <div className='timeline-header'>
-    <div className='timeline-toggle' onClick={() => onClick()}>
-      <p><i className='arrow-down' /></p>
+const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
+  const d0 = from && from.toLocaleDateString()
+  const d1 = to && to.toLocaleDateString()
+  return (
+    <div className='timeline-header'>
+      <div className='timeline-toggle' onClick={() => onClick()}>
+        <p><i className='arrow-down' /></p>
+      </div>
+      <div className={`timeline-info ${hideInfo ? 'hidden' : ''}`}>
+        <p>{title}</p>
+        <p>{d0} - {d1}</p>
+      </div>
     </div>
-    <div className={`timeline-info ${hideInfo ? 'hidden' : ''}`}>
-      <p>{title}</p>
-      <p>{date0} - {date1}</p>
-    </div>
-  </div>
-)
+  )
+}
 
 export default TimelineHeader

src/components/presentational/Timeline/Labels.js

@@ -1,7 +1,5 @@
 import React from 'react'
 
-import { formatterWithYear } from '../../../js/utilities.js'
-
 const TimelineLabels = ({ dims, timelabels }) => {
   return (
     <g>
@@ -24,7 +22,7 @@ const TimelineLabels = ({ dims, timelabels }) => {
         x='5'
         y='15'
       >
-        {formatterWithYear(timelabels[0])}
+        {timelabels[0]}
       </text>
       <text
         class='timelabelF timeLabel'
@@ -32,7 +30,7 @@ const TimelineLabels = ({ dims, timelabels }) => {
         y='15'
         style={{ textAnchor: 'end' }}
       >
-        {formatterWithYear(timelabels[1])}
+        {timelabels[1]}
       </text>
     </g>
   )

src/components/presentational/Timeline/Project.js

@@ -2,21 +2,23 @@ import React from 'react'
 import { sizes } from '../../../common/global'
 
 export default ({
-  id,
   offset,
+  id,
   start,
   end,
   getX,
+  y,
   dims,
   colour,
   onClick
 }) => {
   const length = getX(end) - getX(start)
+  if (offset === undefined) return null
   return <rect
     onClick={onClick}
     className='project'
     x={getX(start)}
-    y={dims.trackHeight - (offset + sizes.eventDotR)}
+    y={dims.marginTop + 100}
     width={length}
     style={{ fill: colour, fillOpacity: 0.2 }}
     height={2 * sizes.eventDotR}