Added new triangle and pentagon shapes; modified star shape to rotate into position

src/components/time/atoms/DatetimePentagon.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const DatetimePentagon = ({ x, y, r, transform, onSelect, styleProps }) => {
+  const s = (r * 2) / 3;
+  return (
+    <polygon
+      onClick={onSelect}
+      className="event"
+      x={x}
+      y={y - r}
+      style={styleProps}
+      points={`${x},${y + s} ${x + s},${y} ${x + s},${y - s} ${x - s},${
+        y - s
+      } ${x - s},${y}`}
+      transform={`rotate(180, ${x}, ${y})`}
+    />
+  );
+};
+
+export default DatetimePentagon;

src/components/time/atoms/DatetimeStar.js

@@ -17,9 +17,10 @@ const DatetimeStar = ({
       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}`}
+      points={`${x + s},${y - s} ${x - r},${y} ${x + r},${y} ${x - s},${
+        y - s
+      } ${x},${y + s}`}
+      transform={`rotate(180, ${x}, ${y})`}
     />
   );
 };

src/components/time/atoms/DatetimeTriangle.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+const DatetimeTriangle = ({ x, y, r, transform, onSelect, styleProps }) => {
+  const s = (r * 2) / 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 - s}`}
+      transform={`rotate(180, ${x}, ${y})`}
+    />
+  );
+};
+
+export default DatetimeTriangle;

src/components/time/atoms/Events.js

@@ -2,6 +2,8 @@ import React from "react";
 import DatetimeBar from "./DatetimeBar";
 import DatetimeSquare from "./DatetimeSquare";
 import DatetimeStar from "./DatetimeStar";
+import DatetimeTriangle from "./DatetimeTriangle";
+import DatetimePentagon from "./DatetimePentagon";
 import Project from "./Project";
 import ColoredMarkers from "../../atoms/ColoredMarkers";
 import {
@@ -73,6 +75,30 @@ function renderDiamond(event, styles, props) {
   );
 }
 
+function renderTriangle(event, styles, props) {
+  return (
+    <DatetimeTriangle
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y}
+      r={1.5 * props.eventRadius}
+      styleProps={styles}
+    />
+  );
+}
+
+function renderPentagon(event, styles, props) {
+  return (
+    <DatetimePentagon
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y}
+      r={1.5 * props.eventRadius}
+      styleProps={styles}
+    />
+  );
+}
+
 function renderStar(event, styles, props) {
   return (
     <DatetimeStar
@@ -125,6 +151,10 @@ const TimelineEvents = ({
         renderShape = renderDiamond;
       } else if (event.shape === "star") {
         renderShape = renderStar;
+      } else if (event.shape === "triangle") {
+        renderShape = renderTriangle;
+      } else if (event.shape === "pentagon") {
+        renderShape = renderPentagon;
       } else {
         renderShape = renderDot;
       }
@@ -137,6 +167,7 @@ const TimelineEvents = ({
       const y = getY({ ...event, category: cat });
 
       const colour = event.colour ? event.colour : getCategoryColor(cat.title);
+
       const styles = {
         fill: colour,
         fillOpacity: y > 0 ? calcOpacity(1) : 0,