feat : add orgnisms/monthlyProfit/index.js (#83)

월별 수익 API 추가

components/organisms/monthlyProfit/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useEffect, useState } from "react";
+
+import {
+  Chart as ChartJS,
+  RadialLinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { Radar } from 'react-chartjs-2';
+
+import useGetMonthlyProfit from '@hooks/useMonthlyProfit';
+
+ChartJS.register(
+  RadialLinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend
+);
+
+const MonthlyProfit = (props) => {
+
+    const storeId = props.id;
+
+    const [data, setData] = useState("");
+    const getMonthlyProfit = useGetMonthlyProfit(storeId);
+
+    useEffect(() => { 
+        setData(getMonthlyProfit); 
+    },[getMonthlyProfit]);
+
+    const labels = data && data.map((dataPoint) => dataPoint.time);
+    const profitData = data && data.map((dataPoint) => dataPoint.profit);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'bottom',
+            },
+            title: {
+                display: true,
+                text: '월별 수입 통계',
+            },
+        },
+    };
+
+    const chartData = {
+        labels: labels,
+        datasets: [
+            {
+                label: '월별 수입 통계',
+                data: profitData,
+                backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                borderColor: 'rgba(255, 99, 132, 1)',
+                borderWidth: 1,
+            },
+        ],
+    }
+
+    return (
+        <Radar data={chartData} width={30} height={30} options={{ maintainAspectRatio: false }} />
+    )
+}
+
+export default MonthlyProfit