diff --git a/src/components/presentational/Timeline/DatetimeSquare.js b/src/components/presentational/Timeline/DatetimeSquare.js
index d62afd9..b232cd8 100644
--- a/src/components/presentational/Timeline/DatetimeSquare.js
+++ b/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
-}) => (
-
-
-)
+}) => {
+ return (
+
+ )
+}
diff --git a/src/components/presentational/Timeline/DatetimeStar.js b/src/components/presentational/Timeline/DatetimeStar.js
new file mode 100644
index 0000000..ead0931
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js
index 9cf8e19..90e5644 100644
--- a/src/components/presentational/Timeline/Events.js
+++ b/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 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 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
}
}
diff --git a/src/components/presentational/Timeline/Markers.js b/src/components/presentational/Timeline/Markers.js
index db87e66..7bb9524 100644
--- a/src/components/presentational/Timeline/Markers.js
+++ b/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()
}