Name generation and gradient calculation

crabfit-frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -27,6 +27,8 @@ const AvailabilityViewer = ({
 	dates,
 	times,
 	people = [],
+	min = 0,
+	max = 0,
 	...props
 }) => {
 	const [tooltip, setTooltip] = useState(null);
@@ -52,14 +54,16 @@ const AvailabilityViewer = ({
 
 								{times.map((time, i) => {
 									const peopleHere = people.filter(person => person.availability.includes(`${time}-${date}`)).map(person => person.name);
+
 									return (
 										<Time
 											key={i}
 											time={time}
 											className="time"
-											people={peopleHere}
+											peopleCount={peopleHere.length}
 											aria-label={peopleHere.join(', ')}
-											totalPeople={people.length}
+											maxPeople={max}
+											minPeople={min}
 											onMouseEnter={(e) => {
 												const cellBox = e.currentTarget.getBoundingClientRect();
 												setTooltip({

crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts

@@ -58,7 +58,9 @@ export const Time = styled.div`
 		border-top: 1px dotted ${props.theme.primaryDark};
 	`}
 
-	background-color: ${props => `${props.theme.primary}${Math.round((props.people.length/(props.totalPeople))*255).toString(16)}`};
+	background-color: ${props => `${props.theme.primary}${Math.round(((props.peopleCount-props.minPeople)/(props.maxPeople-props.minPeople))*255).toString(16)}`};
+	count: ${props => props.peopleCount};
+	max: ${props => props.maxPeople};
 `;
 
 export const Spacer = styled.div`

crabfit-frontend/src/components/Legend/Legend.tsx

@@ -10,13 +10,14 @@ import {
 const Legend = ({
 	min,
 	max,
+	total,
 	...props
 }) => {
 	const theme = useTheme();
 
 	return (
 		<Wrapper>
-			<Label>{min}/{max} available</Label>
+			<Label>{min}/{total} available</Label>
 
 			<Bar>
 				{[...Array(max-min+1).keys()].map(i =>
@@ -24,7 +25,7 @@ const Legend = ({
 				)}
 			</Bar>
 
-			<Label>{max}/{max} available</Label>
+			<Label>{max}/{total} available</Label>
 		</Wrapper>
 	);
 };