Merge pull request #29 from Vizzuality/habitat-percentage-scale

Fix habitat widget bar fill to be relative to total area + changing scale to 100%
Vizzuality · Oct 31, 2023 · 2ffac9b · 2ffac9b
2 parents f6199da + bee33c6
commit 2ffac9b
Showing 1 changed file with 6 additions and 2 deletions.
diff --git 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/classnames';
 
 const DEFAULT_BAR_COLOR = '#1E1E1E';
-const DEFAULT_MAX_PERCENTAGE = 55;
+const DEFAULT_MAX_PERCENTAGE = 100;
 const PROTECTION_TARGET = 30;
 
 type HorizontalBarChartProps = {
@@ -30,7 +30,11 @@ const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({ 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(() => {