WIP: shapes and colours

src/components/presentational/Timeline/DatetimeSquare.js

@@ -1,23 +1,24 @@
 import React from 'react'
 
 export default ({
-  category,
-  events,
   x,
   y,
   r,
+  transform,
   onSelect,
   styleProps,
   extraRender
-}) => (
-
-  <rect
-    onClick={onSelect}
-    className='event'
-    x={x}
-    y={y - 0.5 * r}
-    style={styleProps}
-    width={r}
-    height={r}
-  />
-)
+}) => {
+  return (
+    <rect
+      onClick={onSelect}
+      className='event'
+      x={x}
+      y={y - r}
+      style={styleProps}
+      width={r}
+      height={r}
+      transform={`rotate(45, ${x}, ${y})`}
+    />
+  )
+}

src/components/presentational/Timeline/DatetimeStar.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default ({
+  x,
+  y,
+  r,
+  transform,
+  onSelect,
+  styleProps,
+  extraRender
+}) => {
+  const s = r * 2 / 3
+  const s2 = r * 4 / 3
+  return (
+    <polygon
+      onClick={onSelect}
+      className='event'
+      x={x}
+      y={y - r}
+      style={styleProps}
+      points={`${x},${y + s} ${x - s},${y - s} ${x + s},${y} ${x - s},${y} ${x + s},${y - s}`}
+    />
+  )
+}

src/components/presentational/Timeline/Events.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import DatetimeDot from './DatetimeDot'
 import DatetimeBar from './DatetimeBar'
+import DatetimeSquare from './DatetimeSquare'
+import DatetimeStar from './DatetimeStar'
 import Project from './Project'
 import { calcOpacity } from '../../../common/utilities'
 import { sizes } from '../../../common/global'
@@ -76,6 +78,39 @@ const TimelineEvents = ({
     />
   }
 
+  function renderDiamond (event, colour) {
+    const props = ({
+      fill: colour,
+      fillOpacity: calcOpacity(1),
+      transition: `transform ${transitionDuration / 1000}s ease`
+    })
+    return <DatetimeSquare
+      onSelect={() => onSelect([event])}
+      x={getDatetimeX(event.timestamp)}
+      y={getCategoryY(event.category)}
+      r={1.8 * sizes.eventDotR}
+      styleProps={props}
+    />
+  }
+
+  function renderStar (event, colour) {
+    const props = ({
+      fill: colour,
+      fillOpacity: calcOpacity(1),
+      transition: `transform ${transitionDuration / 1000}s ease`,
+      fillRule: 'nonzero'
+
+    })
+    return <DatetimeStar
+      onSelect={() => onSelect([event])}
+      x={getDatetimeX(event.timestamp)}
+      y={getCategoryY(event.category)}
+      r={1.8 * sizes.eventDotR}
+      styleProps={props}
+      transform='rotate(90)'
+    />
+  }
+
   function renderDatetime (datetime) {
     // narrative checking for non-rendering still uses datetimes as legacy TODO(lachlan)
     if (narrative) {
@@ -157,6 +192,10 @@ const TimelineEvents = ({
     if (event.shape) {
       if (event.shape === 'bar') {
         renderShape = renderBar
+      } else if (event.shape === 'diamond') {
+        renderShape = renderDiamond
+      } else if (event.shape === 'star') {
+        renderShape = renderStar
       }
     }
 

src/components/presentational/Timeline/Markers.js

@@ -53,6 +53,10 @@ const TimelineMarkers = ({
         return renderCircle()
       case 'bar':
         return renderBar()
+      case 'diamond':
+        return renderCircle()
+      case 'star':
+        return renderCircle()
       default:
         return isLocated ? renderBar() : renderCircle()
     }