feat: 純アルコール量を表示するコンポーネントを実装

client/src/components/PureAlcoholQuantity/PureAlcoholQuantity.jsx

@@ -1,4 +1,5 @@
-import React, { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { calcPureAlcoholQuantity } from '../../utils/calcPureAlcoholQuantity';
 import PropTypes from "prop-types";
 
 PureAlcoholQuantity.propTypes = {
@@ -10,14 +11,21 @@ PureAlcoholQuantity.propTypes = {
 };
 
 function PureAlcoholQuantity({ fetchedData }) {
+  const [pureAlcoholQuantity, setPureAlcoholQuantity] = useState([]);
   useEffect(() => {
-
+    setPureAlcoholQuantity(calcPureAlcoholQuantity(fetchedData));
   }, [fetchedData]);
+  console.log(pureAlcoholQuantity);
   return (
     <div>
       <h3>純アルコール量</h3>
       <div>
-
+        {pureAlcoholQuantity.map((item, index) => (
+          <span key={index} style={{margin: "20px"}}>{item}</span>
+        ))}
+        {/* この下は一時的に見やすいようにしてるだけ */}
+        <span style={{display: "block"}}></span>
+        <span>悪い</span><span>←-------------------------→</span><span>良い</span>
       </div>
     </div>
   )

client/src/utils/calcPureAlcoholQuantity.js

@@ -1,11 +1,11 @@
-export const calcPureAlcoholQuantity = (fetchedData) {
-
-const uniqueDates = new Set(fetchedData.map(item => item.date)); // array[i].dateを取り出してセットに追加
-const uniqueDateCount = uniqueDates.size; // ユニークな日付の数を取得
-
-  const allDateConditionData = Array.
-  const conditionAvg = [0, 0, 0, 0, 0];
+export const calcPureAlcoholQuantity = (fetchedData) => {
+  const conditionsSum = [0, 0, 0, 0, 0];
   fetchedData.forEach((data) => {
-    data.
+    conditionsSum[data.condition-1] += data.alcohol_amount;
   });
+  if (fetchedData.length === 0) {
+    return Array(5).fill(0);
+  }
+  const allConditionAvg = conditionsSum.map((data) => (data / fetchedData.length).toFixed(1));
+  return allConditionAvg;
 }