From 4e4e5babb9caaed478e98eb8d12ec1fd0a36f30d Mon Sep 17 00:00:00 2001
From: "Raphael.A" <8709861+raphael-arce@users.noreply.github.com>
Date: Thu, 2 May 2024 14:29:09 +0200
Subject: [PATCH] fix: make bar graph height dynamic based on viewport height
 (#886)

Signed-off-by: Raphael Arce <raphael.arce@ts.berlin>
---
 .../filter/age-range-slider/bar-graph.tsx     |  9 ++-
 .../hooks/use-bar-graph-height.tsx            | 55 +++++++++++++++++++
 src/components/router/router.tsx              |  4 +-
 3 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src/components/filter/age-range-slider/hooks/use-bar-graph-height.tsx

diff --git a/src/components/filter/age-range-slider/bar-graph.tsx b/src/components/filter/age-range-slider/bar-graph.tsx
index 025057594..6f0f9afcc 100644
--- a/src/components/filter/age-range-slider/bar-graph.tsx
+++ b/src/components/filter/age-range-slider/bar-graph.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { BarItem } from "./bar-item";
 import { getMaxCount, getTreesGroupByAge } from "./tree-age-grouped";
+import { useBarGraphHeight } from "./hooks/use-bar-graph-height.tsx";
 
 const TREES_GROUPED_BY_AGE = getTreesGroupByAge();
 const MAX_COUNT = getMaxCount();
@@ -25,14 +26,18 @@ export const BarGraph: React.FC<BarGraphProps> = ({ min, max }) => {
 
 	const yAxisLabelHeight = calculateBarPercentage(100000, MAX_COUNT);
 
+	const { height, translateYAxisIndicator } = useBarGraphHeight();
+
 	return (
-		<div className="w-full h-[90px] relative">
+		<div className="w-full relative" style={{ height: height }}>
 			<div className="flex flex-row gap-0.5 w-full h-full">
 				<div
 					className="w-full border border-[#DDDDDD] z-0 absolute"
 					style={{ bottom: yAxisLabelHeight }}
 				></div>
-				<span className="text-[#DDDDDD] -translate-y-0.5 font-semibold absolute right-0">
+				<span
+					className={`${translateYAxisIndicator} text-[#DDDDDD] font-semibold absolute right-0`}
+				>
 					100k
 				</span>
 				{barItems.map((ageGroup) => (
diff --git a/src/components/filter/age-range-slider/hooks/use-bar-graph-height.tsx b/src/components/filter/age-range-slider/hooks/use-bar-graph-height.tsx
new file mode 100644
index 000000000..213150eb8
--- /dev/null
+++ b/src/components/filter/age-range-slider/hooks/use-bar-graph-height.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+
+export function useBarGraphHeight() {
+	const [height, setHeight] = useState(0);
+	const [translateYAxisIndicator, setTranslateYAxisIndicator] = useState("");
+	useEffect(() => {
+		const handleResize = () => {
+			const newBarGraphHeight = getBarGraphHeight(window.innerHeight);
+			setHeight(newBarGraphHeight);
+			setTranslateYAxisIndicator(getTranslateYAxisIndicator(newBarGraphHeight));
+		};
+
+		// Create a new ResizeObserver
+		const resizeObserver = new ResizeObserver(handleResize);
+
+		// Observe when document.body resizes
+		resizeObserver.observe(document.body);
+
+		// Cleanup function to remove the observer when component unmounts
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, []);
+
+	return { height, translateYAxisIndicator };
+}
+
+function getBarGraphHeight(innerHeight: number) {
+	if (innerHeight < 600) {
+		return 20;
+	}
+
+	if (innerHeight < 650) {
+		return 40;
+	}
+
+	if (innerHeight < 700) {
+		return 60;
+	}
+
+	return 90;
+}
+
+function getTranslateYAxisIndicator(height: number) {
+	switch (height) {
+		case 20:
+			return "-translate-y-[1.125rem]";
+		case 40:
+			return "-translate-y-3";
+		case 60:
+			return "-translate-y-2";
+		default:
+			return "-translate-y-0.5";
+	}
+}
diff --git a/src/components/router/router.tsx b/src/components/router/router.tsx
index 23e43b12b..19d0d82cf 100644
--- a/src/components/router/router.tsx
+++ b/src/components/router/router.tsx
@@ -49,7 +49,9 @@ export const Router: React.FC = () => {
 						className={`${isFilterViewVisible && "bg-white rounded-t-lg sm:bg-transparent"}`}
 					>
 						<div
-							className={`${treeId ? "hidden" : "block sm:hidden max-h-[calc(100svh-150px)] overflow-y-auto"}`}
+							className={
+								treeId ? "hidden" : "block sm:hidden max-h-[calc(100svh-150px)]"
+							}
 						>
 							{isFilterViewVisible && <Filter />}
 						</div>