From fb954d1b3dd425c42c65400f0ce1f173148990a8 Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Tue, 11 May 2021 23:04:23 -0700
Subject: [PATCH 1/2] Added new triangle and pentagon shapes; modified star
 shape to rotate into position

---
 src/components/time/atoms/DatetimePentagon.js | 20 ++++++++++++
 src/components/time/atoms/DatetimeStar.js     |  7 +++--
 src/components/time/atoms/DatetimeTriangle.js | 18 +++++++++++
 src/components/time/atoms/Events.js           | 31 +++++++++++++++++++
 4 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/components/time/atoms/DatetimePentagon.js
 create mode 100644 src/components/time/atoms/DatetimeTriangle.js

diff --git a/src/components/time/atoms/DatetimePentagon.js b/src/components/time/atoms/DatetimePentagon.js
new file mode 100644
index 0000000..233f54f
--- /dev/null
+++ b/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;
diff --git a/src/components/time/atoms/DatetimeStar.js b/src/components/time/atoms/DatetimeStar.js
index a31ca31..8c7a62f 100644
--- a/src/components/time/atoms/DatetimeStar.js
+++ b/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})`}
     />
   );
 };
diff --git a/src/components/time/atoms/DatetimeTriangle.js b/src/components/time/atoms/DatetimeTriangle.js
new file mode 100644
index 0000000..b94c42c
--- /dev/null
+++ b/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;
diff --git a/src/components/time/atoms/Events.js b/src/components/time/atoms/Events.js
index e7f4b34..cbce13a 100644
--- a/src/components/time/atoms/Events.js
+++ b/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,

From de48bf355689631124b3623ac78df9534cf8ec9f Mon Sep 17 00:00:00 2001
From: efarooqui <efarooqui@pandora.com>
Date: Wed, 12 May 2021 16:59:02 -0700
Subject: [PATCH 2/2] Modified square and star shapes

---
 src/components/time/atoms/DatetimeSquare.js |  4 ++--
 src/components/time/atoms/DatetimeStar.js   |  2 +-
 src/components/time/atoms/Events.js         | 19 +++++++++++++++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/time/atoms/DatetimeSquare.js b/src/components/time/atoms/DatetimeSquare.js
index d9e3a71..6f195d7 100644
--- a/src/components/time/atoms/DatetimeSquare.js
+++ b/src/components/time/atoms/DatetimeSquare.js
@@ -14,11 +14,11 @@ const DatetimeSquare = ({
       onClick={onSelect}
       className="event"
       x={x}
-      y={y - r}
+      y={y}
       style={styleProps}
       width={r}
       height={r}
-      transform={`rotate(45, ${x}, ${y})`}
+      transform={transform}
     />
   );
 };
diff --git a/src/components/time/atoms/DatetimeStar.js b/src/components/time/atoms/DatetimeStar.js
index 8c7a62f..60c590f 100644
--- a/src/components/time/atoms/DatetimeStar.js
+++ b/src/components/time/atoms/DatetimeStar.js
@@ -20,7 +20,7 @@ const DatetimeStar = ({
       points={`${x + s},${y - s} ${x - r},${y} ${x + r},${y} ${x - s},${
         y - s
       } ${x},${y + s}`}
-      transform={`rotate(180, ${x}, ${y})`}
+      transform={transform}
     />
   );
 };
diff --git a/src/components/time/atoms/Events.js b/src/components/time/atoms/Events.js
index cbce13a..ca11291 100644
--- a/src/components/time/atoms/Events.js
+++ b/src/components/time/atoms/Events.js
@@ -68,7 +68,20 @@ function renderDiamond(event, styles, props) {
     <DatetimeSquare
       onSelect={props.onSelect}
       x={props.x}
-      y={props.y}
+      y={props.y - 1.8 * props.eventRadius}
+      r={1.8 * props.eventRadius}
+      styleProps={styles}
+      transform={`rotate(45, ${props.x}, ${props.y})`}
+    />
+  );
+}
+
+function renderSquare(event, styles, props) {
+  return (
+    <DatetimeSquare
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y - (1.8 * props.eventRadius) / 2}
       r={1.8 * props.eventRadius}
       styleProps={styles}
     />
@@ -107,7 +120,7 @@ function renderStar(event, styles, props) {
       y={props.y}
       r={1.8 * props.eventRadius}
       styleProps={{ ...styles, fillRule: "nonzero" }}
-      transform="rotate(90)"
+      transform={`rotate(180, ${props.x}, ${props.y})`}
     />
   );
 }
@@ -155,6 +168,8 @@ const TimelineEvents = ({
         renderShape = renderTriangle;
       } else if (event.shape === "pentagon") {
         renderShape = renderPentagon;
+      } else if (event.shape === "square") {
+        renderShape = renderSquare;
       } else {
         renderShape = renderDot;
       }