Merge pull request #87 from sayingpotato/api/development-of-page-visu…

…alization-with-Big-Data(#83)

development of page visualization with big data(#83)

api/index.js

@@ -1,3 +1,5 @@
 export {default as guestApi} from "./guest";
 export {default as userApi} from "./user";
-export {default as storeApi} from "./store";
+export {default as storeApi} from "./store";
+export {default as statisticsApi} from "./statistics";
+export {default as predictionApi} from "./prediction";

api/prediction.js

@@ -0,0 +1,38 @@
+import fetcher from "api/fetcher";
+
+const getDailyItem = async(id) => {
+    const {data} = await fetcher.get(
+        `api/v1/statistics/daily/item?storeId=${id}`
+    );
+    return data.data;
+}
+
+const getDailyItemTomorrow = async(id) => {
+    const {data} = await fetcher.get(
+        `api/v1/statistics/daily/item/tomorrow?storeId=${id}`
+    );
+    return data.data;
+}
+
+const getProfit = async(id) => {
+    const {data} = await fetcher.get(
+        `api/v1/statistics/profit?storeId=${id}`
+    );
+    return data.data;
+}
+
+const getProfitTomorrow = async(id) => {
+    const {data} = await fetcher.get(
+        `api/v1/statistics/profit/tomorrow?storeId=${id}`
+    );
+    return data.data;
+}
+
+const prediction = {
+    getDailyItem,
+    getDailyItemTomorrow,
+    getProfit,
+    getProfitTomorrow
+}
+
+export default prediction;

api/statistics.js

@@ -0,0 +1,38 @@
+import fetcher from "api/fetcher";
+
+const getDailyProfit = async(id) => {
+    const {data} = await fetcher.get(
+        `api/v1/statistics/daily/profit?storeId=${id}`
+    );
+    return data.data;
+}
+
+const getDailyRevenue = async(id) => {
+    const {data} = await fetcher.get(
+        `api/v1/statistics/daily/revenue?storeId=${id}`
+    );
+    return data.data;
+}
+
+const getMonthlyProfit = async(id) => {
+    const {data} = await fetcher.get(
+        `/api/v1/statistics/monthly/profit?storeId=${id}`
+    );
+    return data.data;
+}
+
+const getWeekItem = async(id) => {
+    const {data} = await fetcher.get(
+        `/api/v1/statistics/week/item?storeId=${id}`
+    );
+    return data.data;
+}
+
+const statistics = {
+    getDailyProfit,
+    getDailyRevenue,
+    getMonthlyProfit,
+    getWeekItem
+}
+
+export default statistics;

components/atoms/button/style.js

@@ -113,6 +113,32 @@ const StyledButton = styled.button`
     width : 20vw;
     height : 5vh;
   }
+
+  &.infoButton {
+    font-size: 12px;
+    font-weight: 400;
+    background-color : white;
+  }
+
+  &.typeTodayPrediction {
+    width: 50px;
+    font-size: 10px;
+    height: 20px;
+    background-color: ${(props) => (props.state === 'todayPrediction' ? 'black' : 'white')};
+    color: ${(props) => (props.state === 'todayPrediction' ? 'white' : 'black')};
+    border: 0px solid ${(props) => (props.state === 'todayPrediction' ? 'black' : 'white')};
+    border-radius: 3px;
+  }
+
+  &.typeTommorowPrediction {
+    width: 50px;
+    font-size: 10px;
+    height: 20px;
+    background-color: ${(props) => (props.state === 'tommorowPrediction' ? 'black' : 'white')};
+    color: ${(props) => (props.state === 'tommorowPrediction' ? 'white' : 'black')};
+    border: 0px solid ${(props) => (props.state === 'tommorowPrediction' ? 'black' : 'white')};
+    border-radius: 3px;
+  }
   
 `
 

components/atoms/text/style.js

@@ -201,6 +201,18 @@ const StyledText = styled.p`
     margin : 0;
   }
 
+  &.predictionTitle {
+    font-size : 13px;
+    text-align : center;
+  }
+
+  &.predictionContent {
+    font-size : 15px;
+    text-align : center;
+    font-weight : 800;
+    color : #28469C;
+  } 
+
 `
 
 export { StyledText };

components/organisms/dailyItem/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useEffect, useState } from "react";
+
+import {
+  Chart as ChartJS,
+  RadialLinearScale,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { PolarArea } from 'react-chartjs-2';
+
+import useGetDailyItem from '@hooks/useGetDailyItem';
+
+ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
+
+const DailyItem = (props) => {
+
+    const storeId = props.id;
+
+    const [data, setData] = useState("");
+    const getDailyItem = useGetDailyItem(storeId);
+
+    useEffect(() => { 
+        setData(getDailyItem); 
+    },[getDailyItem]);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'bottom',
+            },
+            title: {
+                display: true,
+                text: '일별 수입 통계',
+            },
+        },
+    };
+
+    const getRandomColor = () => {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+
+    const objectLength = data && Object.keys(data).length;
+    const labels = data && data.map((dataPoint) => dataPoint.itemName);
+    const itemCountData = data && data.map((dataPoint) => dataPoint.itemCount);
+
+    const chartData = {
+        labels: labels,
+        datasets: [
+            {
+                data: itemCountData,
+                borderWidth: 2,
+                backgroundColor: Array(objectLength).fill().map(() => getRandomColor()),
+            },
+        ],
+    }
+
+    return (
+        <PolarArea data={chartData} options={options} />
+    )
+}
+
+export default DailyItem

components/organisms/dailyItemTomorrow/index.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useEffect, useState } from "react";
+
+import {
+  Chart as ChartJS,
+  RadialLinearScale,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from 'chart.js';
+import { PolarArea } from 'react-chartjs-2';
+
+import useGetDailyItemTomorrow from '@hooks/useGetDailyItemTomorrow';
+
+ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
+
+const DailyItemTomorrow = (props) => {
+
+    const storeId = props.id;
+
+    const [data, setData] = useState("");
+    const getDailyItemTomorrow = useGetDailyItemTomorrow(storeId);
+
+    useEffect(() => { 
+        setData(getDailyItemTomorrow); 
+    },[getDailyItemTomorrow]);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                position: 'bottom',
+            },
+            title: {
+                display: true,
+                text: '일별 수입 통계',
+            },
+        },
+    };
+
+    const getRandomColor = () => {
+        const letters = '0123456789ABCDEF';
+        let color = '#';
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+
+    const objectLength = data && Object.keys(data).length;
+    const labels = data && data.map((dataPoint) => dataPoint.itemName);
+    const itemCountData = data && data.map((dataPoint) => dataPoint.itemCount);
+
+    const chartData = {
+        labels: labels,
+        datasets: [
+            {
+                data: itemCountData,
+                borderWidth: 2,
+                backgroundColor: Array(objectLength).fill().map(() => getRandomColor()),
+            },
+        ],
+    }
+
+    return (
+        <PolarArea data={chartData} options={options} />
+    )
+}
+
+export default DailyItemTomorrow

components/organisms/dailyProfit/index.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useEffect, useState } from "react";
+
+import {
+  Chart as ChartJS,
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip,
+  LineController,
+  BarController,
+} from 'chart.js';
+import { Chart } from 'react-chartjs-2';
+
+import useGetDailyProfit from '@hooks/useGetDailyProfit';
+
+ChartJS.register(
+  LinearScale,
+  CategoryScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Legend,
+  Tooltip,
+  LineController,
+  BarController
+);
+
+const DailyProfit = (props) => {
+
+    const storeId = props.id;
+
+    const [data, setData] = useState("");
+    const getDailyProfit = useGetDailyProfit(storeId);
+
+    useEffect(() => { 
+        setData(getDailyProfit); 
+    },[getDailyProfit]);
+
+    const options = {
+        responsive: true,
+        plugins: {
+            legend: {
+                display: false,
+            },
+            title: {
+                display: true,
+                text: '일별 수입 통계',
+            },
+        },
+    };
+
+    const labels = data && data.map((dataPoint) => dataPoint.time);
+    const profitData = data && data.map((dataPoint) => dataPoint.profit);
+
+    const chartData = {
+        labels: labels,
+        datasets: [
+            {
+                type: 'line',
+                data: profitData,
+                backgroundColor: '#28469C',
+                borderWidth: 2,
+                fill: false,
+            },
+        ],
+    }
+
+    return (
+        <Chart data={chartData} options={options} />
+    )
+}
+
+export default DailyProfit