From 3b86432c73a0d64239df79d0f417b8d96de2fccc Mon Sep 17 00:00:00 2001
From: Ben Grant <benjamin.grantGRA0007@gmail.com>
Date: Thu, 13 May 2021 20:15:41 +1000
Subject: [PATCH] Better heat map calculation based on minimum tiles

---
 .../AvailabilityViewer/availabilityViewerStyle.ts           | 4 ++--
 crabfit-frontend/src/components/Legend/Legend.tsx           | 6 +++---
 crabfit-frontend/src/pages/Event/Event.tsx                  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
index 707488f..dc25805 100644
--- a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
+++ b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts
@@ -62,8 +62,8 @@ export const Time = styled.div`
 	`}
 
 	background-image: linear-gradient(
-		${props => `${props.theme.primary}${Math.round(((props.peopleCount-props.minPeople)/(props.maxPeople-props.minPeople))*255).toString(16)}`},
-		${props => `${props.theme.primary}${Math.round(((props.peopleCount-props.minPeople)/(props.maxPeople-props.minPeople))*255).toString(16)}`}
+		${props => `${props.theme.primary}${Math.round(((props.peopleCount)/(props.maxPeople))*255).toString(16)}`},
+		${props => `${props.theme.primary}${Math.round(((props.peopleCount)/(props.maxPeople))*255).toString(16)}`}
 	);
 `;
 
diff --git a/crabfit-frontend/src/components/Legend/Legend.tsx b/crabfit-frontend/src/components/Legend/Legend.tsx
index 16a51e3..978d317 100644
--- a/crabfit-frontend/src/components/Legend/Legend.tsx
+++ b/crabfit-frontend/src/components/Legend/Legend.tsx
@@ -21,11 +21,11 @@ const Legend = ({
 			<Label>{min}/{total} available</Label>
 
 			<Bar onMouseOut={() => onSegmentFocus(null)}>
-				{[...Array(max-min+1).keys()].map(i =>
+				{[...Array(max+1-min).keys()].map(i => i+min).map(i =>
 					<Grade
             key={i}
-            color={`${theme.primary}${Math.round((i/(max-min))*255).toString(16)}`}
-            onMouseOver={() => onSegmentFocus(i+min)}
+            color={`${theme.primary}${Math.round((i/(max))*255).toString(16)}`}
+            onMouseOver={() => onSegmentFocus(i)}
           />
 				)}
 			</Bar>
diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx
index 52ea2f1..3184ab8 100644
--- a/crabfit-frontend/src/pages/Event/Event.tsx
+++ b/crabfit-frontend/src/pages/Event/Event.tsx
@@ -286,7 +286,7 @@ const Event = (props) => {
 				{(!!event || isLoading) ? (
 					<>
 						<EventName isLoading={isLoading}>{event?.name}</EventName>
-            <EventDate isLoading={isLoading} title={event?.created && dayjs.unix(event?.created).format('h:mma D MMMM, YYYY')}>{event?.created && `Created ${dayjs.unix(event?.created).fromNow()}`}</EventDate>
+            <EventDate isLoading={isLoading} title={event?.created && dayjs.unix(event?.created).format('D MMMM, YYYY')}>{event?.created && `Created ${dayjs.unix(event?.created).fromNow()}`}</EventDate>
 						<ShareInfo
               onClick={() => navigator.clipboard?.writeText(`https://crab.fit/${id}`)
                   .then(() => {