feat: 통계에 평균값 추가

Author: limkhl

src/app/stats/candidate/page.js

@@ -32,7 +32,7 @@ export default function StatsByCandidate() {
     return (
         <div className={styles.statsContainer}>
             <section>
-              <h3>가장 질문이 많은 후보</h3>
+              <h3>가장 많은 질문을 받은 후보</h3>
               {loading && <p>Loading...</p>}
               {hasData && <p>{candidateWithMaxRequest.name}({candidateWithMaxRequest.party}) : {candidateWithMaxRequest.requests}</p>}
             </section>

src/app/stats/city/page.js

@@ -20,8 +20,10 @@ export default function StatsByCity() {
         }))
 
         const sum = requests.reduce((acc, counter) => acc + counter, 0)
-        return await acc + sum
-      }, 0)
+        const length = candidatesByRegions.length
+        const {requests: accRequests, candidates: accCandidates} = await acc
+        return await { requests: accRequests + sum, candidates: accCandidates + length }
+      }, ({requests: 0, candidates: 0}))
       return candidatesRequests
     }
 
@@ -31,7 +33,7 @@ export default function StatsByCity() {
       const cities = await response.json()
       const citiesRequests = await Promise.all(cities.map(async ({name}) => {
         const requests = await fetchCandidatesRequestsByCity(name)
-        return { city: name, requests }
+        return { city: name, ...requests}
       }))
       setRequestsByCities(citiesRequests)
       setLoading(false)
@@ -42,34 +44,55 @@ export default function StatsByCity() {
     }, [])
 
     const hasData = !loading && requestsByCities.length > 0
-    const cityWithMaxRequest = requestsByCities.reduce((acc, {city, requests}) => {
-      return requests > acc.requests ? { city, requests } : acc
-    }, { city: '', requests: 0 })
-    const cityWithMinRequest = requestsByCities.reduce((acc, {city, requests}) => {
-      return requests < acc.requests ?{ city, requests } : acc
-    }, { city: '', requests: Number.MAX_SAFE_INTEGER })
+    const cityWithMaxRequest = requestsByCities.reduce((acc, cur) => {
+      return cur.requests > acc.requests ? cur : acc
+    }, { city: '', requests: Number.MIN_SAFE_INTEGER, candidates: 0 })
+    const cityWithMinRequest = requestsByCities.reduce((acc, cur) => {
+      return cur.requests < acc.requests ? cur : acc
+    }, { city: '', requests: Number.MAX_SAFE_INTEGER, candidates: 0 })
+
+    const cityWithMaxAverage = requestsByCities.reduce((acc, cur) => {
+      return (cur.requests / cur.candidates) > (acc.requests / acc.candidates) ? cur : acc
+    }, { city: '', requests: Number.MIN_SAFE_INTEGER, candidates: 0 })
+    const cityWithMinAverage = requestsByCities.reduce((acc, cur) => {
+      return (cur.requests / cur.candidates) < (acc.requests / acc.candidates) ? cur : acc
+    }, { city: '', requests: Number.MAX_SAFE_INTEGER, candidates: 0 })
+
+    function getAverage(requests, candidates) {
+      return (requests / candidates).toFixed()
+    }
 
     return (
         <div className={styles.statsContainer}>
             <section>
               <h3>지역별 질문 수</h3>
               {loading && <p>Loading...</p>}
-              {hasData && requestsByCities.map(({city, requests}) => (
+              {hasData && requestsByCities.map(({city, requests, candidates}) => (
                 <div key={city}>
-                  <p>{city} : {requests}</p>
+                  <p>{city} : {requests} / {candidates} =&gt; 후보 한 명당 평균 {getAverage(requests, candidates)}개 </p>
                 </div>
               ))}
             </section>
             <section>
-              <h3>가장 질문이 많은 지역</h3>
+              <h3>가장 많은 질문을 받은 지역</h3>
               {loading && <p>Loading...</p>}
               {hasData && <p>{cityWithMaxRequest.city} : {cityWithMaxRequest.requests}</p>}
             </section>
             <section>
-              <h3>가장 질문이 적은 지역</h3>
+              <h3>가장 적은 질문을 받은 지역</h3>
               {loading && <p>Loading...</p>}
               {hasData && <p>{cityWithMinRequest.city} : {cityWithMinRequest.requests}</p>}
             </section>
+            <section>
+              <h3>후보 한 명당 가장 많은 질문을 받은 지역</h3>
+              {loading && <p>Loading...</p>}
+              {hasData && <p>{cityWithMaxAverage.city} : {getAverage(cityWithMaxAverage.requests, cityWithMaxAverage.candidates)}</p>}
+            </section>
+            <section>
+              <h3>후보 한 명당 가장 적은 질문을 받은 지역</h3>
+              {loading && <p>Loading...</p>}
+              {hasData && <p>{cityWithMinAverage.city} : {getAverage(cityWithMinAverage.requests, cityWithMinAverage.candidates)}</p>}
+            </section>
         </div>
     )
 }

src/app/stats/party/page.js

@@ -16,7 +16,8 @@ export default function StatsByParty() {
         return data.requests
       }))
       const sum = requests.reduce((acc, counter) => acc + counter, 0)
-      return sum
+      const length = candidatesByParties.length
+      return {requests: sum, candidates: length}
     }
 
     const getRequestsByParties = async () => {
@@ -25,7 +26,7 @@ export default function StatsByParty() {
       const parties = await response.json()
       const partiesRequests = await Promise.all(parties.map(async ({name}) => {
         const requests = await fetchCandidatesRequestsByParty(name)
-        return { party: name, requests }
+        return { party: name, ...requests }
       }))
       setRequestsByParties(partiesRequests)
       setLoading(false)
@@ -36,34 +37,55 @@ export default function StatsByParty() {
     }, [])
 
     const hasData = !loading && requestsByParties.length > 0
-    const partyWithMaxRequest = requestsByParties.reduce((acc, {party, requests}) => {
-      return requests > acc.requests ? { party, requests } : acc
-    }, { party: '', requests: 0 })
-    const partyWithMinRequest = requestsByParties.reduce((acc, {party, requests}) => {
-      return requests < acc.requests ?{ party, requests } : acc
-    }, { party: '', requests: Number.MAX_SAFE_INTEGER })
+    const partyWithMaxRequest = requestsByParties.reduce((acc, cur) => {
+      return cur.requests > acc.requests ? cur : acc
+    }, { party: '', requests: Number.MIN_SAFE_INTEGER, candidates: 0 })
+    const partyWithMinRequest = requestsByParties.reduce((acc, cur) => {
+      return cur.requests < acc.requests ? cur : acc
+    }, { party: '', requests: Number.MAX_SAFE_INTEGER, candidates: 0 })
+
+    const partyWithMaxAverage = requestsByParties.reduce((acc, cur) => {
+      return (cur.requests / cur.candidates) > (acc.requests / acc.candidates) ? cur : acc
+    }, { party: '', requests: Number.MIN_SAFE_INTEGER, candidates: 0 })
+    const partyWithMinAverage = requestsByParties.reduce((acc, cur) => {
+      return (cur.requests / cur.candidates) < (acc.requests / acc.candidates) ? cur : acc
+    }, { party: '', requests: Number.MAX_SAFE_INTEGER, candidates: 0 })
+
+    function getAverage(requests, candidates) {
+      return (requests / candidates).toFixed()
+    }
 
     return (
         <div className={styles.statsContainer}>
             <section>
               <h3>정당별 질문 수</h3>
               {loading && <p>Loading...</p>}
-              {hasData && requestsByParties.map(({party, requests}) => (
+              {hasData && requestsByParties.map(({party, requests, candidates}) => (
                 <div key={party}>
-                  <p>{party} : {requests}</p>
+                  <p>{party} : {requests} / {candidates} =&gt; 후보 한 명당 평균 {getAverage(requests, candidates)}개</p>
                 </div>
               ))}
             </section>
             <section>
-              <h3>가장 질문이 많은 정당</h3>
+              <h3>가장 많은 질문을 받은 정당</h3>
               {loading && <p>Loading...</p>}
               {hasData && <p>{partyWithMaxRequest.party} : {partyWithMaxRequest.requests}</p>}
             </section>
             <section>
-              <h3>가장 질문이 적은 정당</h3>
+              <h3>가장 적은 질문을 받은 정당</h3>
               {loading && <p>Loading...</p>}
               {hasData && <p>{partyWithMinRequest.party} : {partyWithMinRequest.requests}</p>}
             </section>
+            <section>
+              <h3>후보 한 명당 가장 많은 질문을 받은 정당</h3>
+              {loading && <p>Loading...</p>}
+              {hasData && <p>{partyWithMaxAverage.party} : {getAverage(partyWithMaxAverage.requests, partyWithMaxAverage.candidates)}</p>}
+            </section>
+            <section>
+              <h3>후보 한 명당 가장 적은 질문을 받은 정당</h3>
+              {loading && <p>Loading...</p>}
+              {hasData && <p>{partyWithMinAverage.party} : {getAverage(partyWithMinAverage.requests, partyWithMinAverage.candidates)}</p>}
+            </section>
         </div>
     )
 }