fix: limit number of languages in contibutor's card (#441)

Closes #402
open-sauced · Sep 28, 2022 · 4aba355 · 4aba355
1 parent d18bf26
commit 4aba355
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx b/components/molecules/CardHorizontalBarChart/card-horizontal-bar-chart.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Text from "components/atoms/Typography/text";
 import colors from "../../../lib/utils/color.json";
 
@@ -24,24 +24,38 @@ const languageToColor: AllSimpleColors = colors as AllSimpleColors;
 
 const CardHorizontalBarChart = ({ languageList }: CardHorizontalBarChartProps): JSX.Element => {
   const sortedLangArray = languageList.sort((a, b) => b.percentageUsed - a.percentageUsed);
+  // used this state to calculate thte percentage of each language
+  const [percentage, setPercentage] = useState<any>(0);
 
   const [descriptText, setDescriptText] = useState(sortedLangArray[0].languageName);
 
   const handleChangeDescriptText = (descriptText: string) => {
     setDescriptText(descriptText);
   };
 
+  useEffect(() =>{
+    const totalSumOfFirstFivePercentage = sortedLangArray
+      .slice(0,4)
+      .map(lang => lang.percentageUsed)
+      .reduce((prev: number, next: number) => prev + next); // need some help fixing this type error, used any to bypass 🙏
+    setPercentage(totalSumOfFirstFivePercentage);
+  },[percentage, sortedLangArray]);
+
   return (
     <div className="flex flex-col gap-1 min-w-[120px]">
       {/* Progress Bar */}
-      <div className="flex items-center w-full rounded-full gap-0.5 overflow-hidden">
+      <div className="flex items-center w-full justify-end rounded-full gap-0.5 overflow-hidden">
         {sortedLangArray.map(({ languageName, percentageUsed }, index) =>
-          <div
+        {
+
+          return  index < 5 && ( <div
             key={index}
             onMouseOver={() => handleChangeDescriptText(languageName)}
             className="h-2 transition-all duration-500 ease-in-out"
-            style={{ width: `${percentageUsed}%`, backgroundColor: languageToColor[languageName] ? languageToColor[languageName].color as string : NOTSUPPORTED }}
-          />
+            style={{ width: `${percentageUsed < 20 ? percentageUsed / percentage * 100 : percentageUsed}%`, backgroundColor: languageToColor[languageName] ? languageToColor[languageName].color as string : NOTSUPPORTED }}
+          />);
+        }
+
         )}
       </div>
       <div className="flex gap-2 items-center">