From de048d08cdb2e2454d0c62fa0e4b91f4336862eb Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 25 Oct 2023 11:30:29 +0100 Subject: [PATCH 1/2] Fix proportion of habitat widget bar fill not corresponding to the total area --- .../src/components/charts/horizontal-bar-chart/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx index 13ef7abe..cd9b52c1 100644 --- a/frontend/src/components/charts/horizontal-bar-chart/index.tsx +++ b/frontend/src/components/charts/horizontal-bar-chart/index.tsx @@ -30,7 +30,11 @@ const HorizontalBarChart: React.FC = ({ className, data }, [totalArea, protectedArea]); const barFillPercentage = useMemo(() => { - return Math.round((protectedArea * DEFAULT_MAX_PERCENTAGE) / totalArea); + const totalPercentage = (protectedArea * 100) / totalArea; + const relativeToMaxPercentage = (totalPercentage * 100) / DEFAULT_MAX_PERCENTAGE; + + // Prevent overflowing if the bar fill exceeds the set max percentage + return relativeToMaxPercentage > DEFAULT_MAX_PERCENTAGE ? 100 : relativeToMaxPercentage; }, [protectedArea, totalArea]); const formattedArea = useMemo(() => { From bee33c67f125ccde6a63d58df39c37f14319abdf Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 25 Oct 2023 11:40:24 +0100 Subject: [PATCH 2/2] Proportion of habitat widgets scale to be 100% --- frontend/src/components/charts/horizontal-bar-chart/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/charts/horizontal-bar-chart/index.tsx b/frontend/src/components/charts/horizontal-bar-chart/index.tsx index cd9b52c1..2e168e59 100644 --- a/frontend/src/components/charts/horizontal-bar-chart/index.tsx +++ b/frontend/src/components/charts/horizontal-bar-chart/index.tsx @@ -5,7 +5,7 @@ import { format } from 'd3-format'; import { cn } from '@/lib/utils'; const DEFAULT_BAR_COLOR = '#1E1E1E'; -const DEFAULT_MAX_PERCENTAGE = 55; +const DEFAULT_MAX_PERCENTAGE = 100; const PROTECTION_TARGET = 30; type HorizontalBarChartProps = {