Fixed census data to not be hard coded & fixed indicator components

client/src/components/cityIndicators/CityBachelorComponent.tsx

@@ -1,9 +1,8 @@
+/* eslint-disable no-plusplus */
 import React, { useEffect, useState } from 'react';
-import { Toolbar } from '@mui/material';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { useData } from '../../util/api';
 import ICity from '../../util/types/city';
 import COLORS from '../../assets/colors';
 
@@ -12,53 +11,39 @@ type BachelorProps = {
 };
 
 function Bachelor({ data1 }: BachelorProps) {
-  const [cityList, setCityList] = useState<ICity[]>([]);
   const [bachelor, setBachelor] = useState(0);
   const [total, setTotal] = useState(0);
-  const [under18, setUnder18] = useState(0);
-  const [totalList, setTotalList] = useState(new Map());
-  const [under18List, setUnder18List] = useState(new Map());
-  const [bachelorList, setBachelorList] = useState(new Map());
 
   const cityData = data1;
 
   useEffect(() => {
-    setCityList(cityData?.data);
-    setBachelorList(cityData?.data.indicators.bachelor);
-    setUnder18List(cityData?.data.indicators.under18s);
-    setTotalList(cityData?.data.indicators.population);
+    const bachelorList = cityData?.data.indicators.bachelor;
+    const totalList = cityData?.data.indicators.population;
 
-    let maxKey = '0';
     if (totalList) {
-      Object.entries(totalList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setTotal(value1);
+      const totalKeys = Object.keys(totalList).sort().reverse();
+      for (let i = 0; i < totalKeys.length; i++) {
+        const key = totalKeys[i];
+        const totalValue = totalList[key];
+        if (totalValue && totalValue !== 0) {
+          setTotal(totalValue);
+          break;
         }
-      });
+      }
     }
+
     if (bachelorList) {
-      Object.entries(bachelorList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setBachelor(value1);
-        }
-      });
-    }
-    if (under18List) {
-      Object.entries(under18List).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setUnder18(value1);
+      const bachelorKeys = Object.keys(bachelorList).sort().reverse();
+      for (let i = 0; i < bachelorKeys.length; i++) {
+        const key = bachelorKeys[i];
+        const bachelorValue = bachelorList[key];
+        if (bachelorValue && bachelorValue !== 0) {
+          setBachelor(bachelorValue);
+          break;
         }
-      });
+      }
     }
-    console.log(bachelor);
-    console.log(total);
-  }, [bachelor, bachelorList, cityData, total, totalList, under18List]);
+  }, [cityData]);
 
   return (
     <Paper
@@ -73,16 +58,15 @@ function Bachelor({ data1 }: BachelorProps) {
         <Typography variant="subtitle2" sx={{ color: COLORS.gray, mb: 1 }}>
           Percent of persons age 25+ with Bachelor&apos;s degree or higher
         </Typography>
-        {bachelor !== undefined && (
+        {bachelor !== undefined && total !== undefined && total !== 0 && (
           <Typography
             variant="h4"
             sx={{ color: COLORS.primaryBlue }}
             align="center"
           >
             <h1 style={{ fontSize: '2.125rem', color: '#0175C0' }}>
-              {Math.round((bachelor * 100) / (total - under18))}%
+              {Math.round((bachelor * 100) / total)}%
             </h1>
-            {/* <h1 style={{ fontSize: '2.125rem', color: '#0175C0' }}>{total}</h1> */}
           </Typography>
         )}
       </Box>

client/src/components/cityIndicators/CityHighSchoolGradsPercentComponent.tsx

@@ -20,10 +20,25 @@ function HighSchoolGradsPercent({ data1 }: RevenueWidgetProps) {
     const populationList: { [key: number]: number } =
       cityData?.data.indicators.population;
 
-    const HSGraduateValue =
-      Object.values(hsGraduateList)[Object.values(hsGraduateList).length - 1];
-    const PopulationValue =
-      Object.values(populationList)[Object.values(populationList).length - 1];
+    let HSGraduateValue = 0;
+    const HSvalues = Object.values(hsGraduateList);
+    // eslint-disable-next-line no-plusplus
+    for (let i = HSvalues.length - 1; i >= 0; i--) {
+      if (HSvalues[i] !== 0) {
+        HSGraduateValue = HSvalues[i];
+        break;
+      }
+    }
+
+    let PopulationValue = 0;
+    const Popvalues = Object.values(populationList);
+    // eslint-disable-next-line no-plusplus
+    for (let i = Popvalues.length - 1; i >= 0; i--) {
+      if (Popvalues[i] !== 0) {
+        PopulationValue = Popvalues[i];
+        break;
+      }
+    }
 
     return (
       <Paper

client/src/components/cityIndicators/CityPieComponent.tsx

@@ -12,116 +12,83 @@ type PieComponentProps = {
 };
 
 export default function PieComponent({ data1 }: PieComponentProps) {
-  const [asian, setAsian] = useState(0);
-  const [hispanic, setHispanic] = useState(0);
-  const [black, setBlack] = useState(0);
-  const [total, setTotal] = useState(0);
-
-  const [white, setWhite] = useState(0);
-  const [native, setNative] = useState(0);
-  const [hawaiian, setHawaiian] = useState(0);
-  const [twoOrMore, setTwoOrMore] = useState(0);
-
-  const [othersPercent, setOthersPercent] = useState(0);
-  const [asianPercent, setAsianPercent] = useState(0);
-  const [hispanicPercent, setHispanicPercent] = useState(0);
-  const [blackPercent, setBlackPercent] = useState(0);
-  const [whitePercent, setWhitePercent] = useState(0);
-  const [nativePercent, setNativePercent] = useState(0);
-  const [hawaiianPercent, setHawaiianPercent] = useState(0);
-  const [twoOrMorePercent, setTwoOrMorePercent] = useState(0);
-
-  const [asianList, setAsianList] = useState(new Map());
-  const [hispanicList, setHispanicList] = useState(new Map());
-  const [blackList, setBlackList] = useState(new Map());
-  const [totalList, setTotalList] = useState(new Map());
-
-  const [whiteList, setWhiteList] = useState(new Map());
-  const [hawaiianList, setHawaiianList] = useState(new Map());
-  const [nativeList, setNativeList] = useState(new Map());
-  const [twoOrMoreList, setTwoOrMoreList] = useState(new Map());
-
-  // const cityName: string = cityProp;
+  const [asian, setAsian] = useState<number>(0);
+  const [hispanic, setHispanic] = useState<number>(0);
+  const [black, setBlack] = useState<number>(0);
+  const [total, setTotal] = useState<number>(0);
+
+  const [white, setWhite] = useState<number>(0);
+  const [native, setNative] = useState<number>(0);
+  const [hawaiian, setHawaiian] = useState<number>(0);
+  const [twoOrMore, setTwoOrMore] = useState<number>(0);
+
+  const [asianPercent, setAsianPercent] = useState<number>(0);
+  const [hispanicPercent, setHispanicPercent] = useState<number>(0);
+  const [blackPercent, setBlackPercent] = useState<number>(0);
+  const [whitePercent, setWhitePercent] = useState<number>(0);
+  const [nativePercent, setNativePercent] = useState<number>(0);
+  const [hawaiianPercent, setHawaiianPercent] = useState<number>(0);
+  const [twoOrMorePercent, setTwoOrMorePercent] = useState<number>(0);
+
+  const [asianList, setAsianList] = useState<Record<string, number>>({});
+  const [hispanicList, setHispanicList] = useState<Record<string, number>>({});
+  const [blackList, setBlackList] = useState<Record<string, number>>({});
+  const [totalList, setTotalList] = useState<Record<string, number>>({});
+
+  const [whiteList, setWhiteList] = useState<Record<string, number>>({});
+  const [hawaiianList, setHawaiianList] = useState<Record<string, number>>({});
+  const [nativeList, setNativeList] = useState<Record<string, number>>({});
+  const [twoOrMoreList, setTwoOrMoreList] = useState<Record<string, number>>(
+    {},
+  );
+
   const city = data1;
 
   useEffect(() => {
-    setAsianList(city?.data.indicators.asian);
-    setHispanicList(city?.data.indicators.hispanic_or_latino);
-    setBlackList(city?.data.indicators.black_or_african_american);
-    setWhiteList(city?.data.indicators.white);
-    setNativeList(city?.data.indicators.american_indian_alaskan_native);
-    setHawaiianList(city?.data.indicators.native_hawaiian_pacific_islander);
-    setTwoOrMoreList(city?.data.indicators.two_or_more);
-
-    let maxKey = '0';
-    if (asianList) {
-      Object.entries(asianList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setAsian(value1);
-        }
-      });
-    }
-    if (hispanicList) {
-      Object.entries(hispanicList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setHispanic(value1);
-        }
-      });
-    }
-    if (blackList) {
-      Object.entries(blackList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setBlack(value1);
-        }
-      });
-    }
-
-    if (whiteList) {
-      Object.entries(whiteList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setWhite(value1);
-        }
-      });
-    }
-
-    if (nativeList) {
-      Object.entries(nativeList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setNative(value1);
-        }
-      });
-    }
-
-    if (hawaiianList) {
-      Object.entries(hawaiianList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setHawaiian(value1);
-        }
-      });
-    }
-
-    if (twoOrMoreList) {
-      Object.entries(twoOrMoreList).forEach(function (key, value) {
-        const [key1, value1] = key;
-        if (parseInt(key1, 10) >= parseInt(maxKey, 10)) {
-          maxKey = key1;
-          setTwoOrMore(value1);
+    setAsianList(city?.data.indicators.asian || {});
+    setHispanicList(city?.data.indicators.hispanic_or_latino || {});
+    setBlackList(city?.data.indicators.black_or_african_american || {});
+    setWhiteList(city?.data.indicators.white || {});
+    setNativeList(city?.data.indicators.american_indian_alaskan_native || {});
+    setHawaiianList(
+      city?.data.indicators.native_hawaiian_pacific_islander || {},
+    );
+    setTwoOrMoreList(city?.data.indicators.two_or_more || {});
+
+    const getMostRecentNonZero = (list: Record<string, number>) => {
+      const years = Object.keys(list).sort((a, b) => Number(b) - Number(a));
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const year of years) {
+        const value = list[year];
+
+        if (value !== 0) {
+          return value;
         }
-      });
-    }
+      }
+
+      return 0;
+    };
+
+    if (asianList) setAsian(getMostRecentNonZero(asianList));
+    if (hispanicList) setHispanic(getMostRecentNonZero(hispanicList));
+    if (blackList) setBlack(getMostRecentNonZero(blackList));
+    if (whiteList) setWhite(getMostRecentNonZero(whiteList));
+    if (nativeList) setNative(getMostRecentNonZero(nativeList));
+    if (hawaiianList) setHawaiian(getMostRecentNonZero(hawaiianList));
+    if (twoOrMoreList) setTwoOrMore(getMostRecentNonZero(twoOrMoreList));
+  }, [
+    asianList,
+    blackList,
+    city,
+    hawaiianList,
+    hispanicList,
+    nativeList,
+    twoOrMoreList,
+    whiteList,
+  ]);
 
+  useEffect(() => {
     const sum =
       asian + hispanic + black + white + native + hawaiian + twoOrMore;
     setAsianPercent((asian * 100) / sum);
@@ -131,29 +98,7 @@ export default function PieComponent({ data1 }: PieComponentProps) {
     setNativePercent((native * 100) / sum);
     setHawaiianPercent((hawaiian * 100) / sum);
     setTwoOrMorePercent((twoOrMore * 100) / sum);
-    console.log(asian);
-  }, [
-    city,
-    asian,
-    black,
-    hispanic,
-    total,
-
-    white,
-    native,
-    hawaiian,
-    twoOrMore,
-
-    asianList,
-    hispanicList,
-    blackList,
-    totalList,
-
-    whiteList,
-    nativeList,
-    hawaiianList,
-    twoOrMoreList,
-  ]);
+  }, [asian, hispanic, black, white, native, hawaiian, twoOrMore]);
 
   const options = {
     responsive: true,

client/src/components/cityIndicators/CityPovertyComponent.tsx

@@ -18,8 +18,15 @@ function Poverty({ data1 }: RevenueWidgetProps) {
     const povertyList: { [key: number]: number } =
       cityData?.data.indicators.persons_in_poverty;
 
-    const povertyValue =
-      Object.values(povertyList)[Object.values(povertyList).length - 1];
+    let povertyValue = 0;
+    const values = Object.values(povertyList);
+    // eslint-disable-next-line no-plusplus
+    for (let i = values.length - 1; i >= 0; i--) {
+      if (values[i] !== 0) {
+        povertyValue = values[i];
+        break;
+      }
+    }
 
     return (
       <Paper

client/src/components/cityIndicators/CityUnder18Component.tsx

@@ -16,10 +16,17 @@ function Under18({ data1 }: RevenueWidgetProps) {
 
   if (cityData) {
     const under18sList: { [key: number]: number } =
-      cityData?.data.indicators.under18s;
+      cityData?.data.indicators.persons_in_poverty;
 
-    const under18sValue =
-      Object.values(under18sList)[Object.values(under18sList).length - 1];
+    let under18sValue = 0;
+    const values = Object.values(under18sList);
+    // eslint-disable-next-line no-plusplus
+    for (let i = values.length - 1; i >= 0; i--) {
+      if (values[i] !== 0) {
+        under18sValue = values[i];
+        break;
+      }
+    }
 
     return (
       <Paper