From 9e6154429ba89ea001b74617dd02f5667901f280 Mon Sep 17 00:00:00 2001 From: Pattadon Date: Tue, 21 Nov 2023 11:36:56 +0700 Subject: [PATCH] Fix data fetching and update UI components --- .../src/components/dashboard/Areachart.jsx | 80 ++++++++++---- .../src/components/dashboard/Barchart.jsx | 104 ++++++++++++------ .../src/components/dashboard/DonutChart.jsx | 7 +- frontend/src/components/dashboard/KpiCard.jsx | 8 +- .../components/dashboard/ProgressCircle.jsx | 43 ++++++++ .../src/components/dashboard/dashboard.jsx | 25 +++-- frontend/tailwind.config.js | 1 + 7 files changed, 200 insertions(+), 68 deletions(-) create mode 100644 frontend/src/components/dashboard/ProgressCircle.jsx diff --git a/frontend/src/components/dashboard/Areachart.jsx b/frontend/src/components/dashboard/Areachart.jsx index 9d0fe41..8ede4d8 100644 --- a/frontend/src/components/dashboard/Areachart.jsx +++ b/frontend/src/components/dashboard/Areachart.jsx @@ -5,43 +5,81 @@ import axiosInstance from "../../api/configs/AxiosConfig"; const fetchAreaChartData = async () => { let res = await axiosInstance.get("/dashboard/weekly/"); console.log(res.data); + // const areaChartData = [ + // { + // date: "Mon", + // "This Week": res.data[0]["This Week"], + // "Last Week": res.data[0]["Last Week"], + // }, + // { + // date: "Tue", + // "This Week": res.data[1]["This Week"], + // "Last Week": res.data[1]["Last Week"], + // }, + // { + // date: "Wed", + // "This Week": res.data[2]["This Week"], + // "Last Week": res.data[2]["Last Week"], + // }, + // { + // date: "Th", + // "This Week": res.data[3]["This Week"], + // "Last Week": res.data[3]["Last Week"], + // }, + // { + // date: "Fri", + // "This Week": res.data[4]["This Week"], + // "Last Week": res.data[4]["Last Week"], + // }, + // { + // date: "Sat", + // "This Week": res.data[5]["This Week"], + // "Last Week": res.data[5]["Last Week"], + // }, + // { + // date: "Sun", + // "This Week": res.data[6]["This Week"], + // "Last Week": res.data[6]["Last Week"], + // }, + // ]; const areaChartData = [ { - date: "Monday", - "This Week": res.data[0]["This Week"], - "Last Week": res.data[0]["Last Week"], + date: "Mon", + "This Week": 1, + "Last Week": 2, }, { - date: "Tuesday", - "This Week": res.data[1]["This Week"], - "Last Week": res.data[1]["Last Week"], + date: "Tue", + "This Week": 5, + "Last Week": 2, }, { - date: "Wednesday", - "This Week": res.data[2]["This Week"], - "Last Week": res.data[2]["Last Week"], + date: "Wed", + "This Week": 7, + "Last Week": 9, }, { - date: "Thursday", - "This Week": res.data[3]["This Week"], - "Last Week": res.data[3]["Last Week"], + date: "Th", + "This Week": 10, + "Last Week": 3, }, { - date: "Friday", - "This Week": res.data[4]["This Week"], - "Last Week": res.data[4]["Last Week"], + date: "Fri", + "This Week": 5, + "Last Week": 1, }, { - date: "Saturday", - "This Week": res.data[5]["This Week"], - "Last Week": res.data[5]["Last Week"], + date: "Sat", + "This Week": 7, + "Last Week": 8, }, { - date: "Sunday", - "This Week": res.data[6]["This Week"], - "Last Week": res.data[6]["Last Week"], + date: "Sun", + "This Week": 3, + "Last Week": 8, }, ]; + return areaChartData; } const areaChartDataArray = await fetchAreaChartData(); diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index fcf9044..18c53fe 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -5,62 +5,98 @@ import axiosInstance from "../../api/configs/AxiosConfig"; const fetchBarChartData = async () => { let res = await axiosInstance.get("/dashboard/weekly/"); console.log(res.data); + // const barchartData = [ + // { + // date: "Mon", + // "This Week": res.data[0]["Completed This Week"], + // "Last Week": res.data[0]["Completed Last Week"], + // }, + // { + // date: "Tue", + // "This Week": res.data[1]["Completed This Week"], + // "Last Week": res.data[1]["Completed Last Week"], + // }, + // { + // date: "Wed", + // "This Week": res.data[2]["Completed This Week"], + // "Last Week": res.data[2]["Completed Last Week"], + // }, + // { + // date: "Th", + // "This Week": res.data[3]["Completed This Week"], + // "Last Week": res.data[3]["Completed Last Week"], + // }, + // { + // date: "Fri", + // "This Week": res.data[4]["Completed This Week"], + // "Last Week": res.data[4]["Completed Last Week"], + // }, + // { + // date: "Sat", + // "This Week": res.data[5]["Completed This Week"], + // "Last Week": res.data[5]["Completed Last Week"], + // }, + // { + // date: "Sun", + // "This Week": res.data[6]["Completed This Week"], + // "Last Week": res.data[6]["Completed Last Week"], + // }, + // ]; const barchartData = [ { - date: "Monday", - "This Week": res.data[0]["Completed This Week"], - "Last Week": res.data[0]["Completed Last Week"], + date: "Mon", + "This Week": 1, + "Last Week": 2, }, { - date: "Tuesday", - "This Week": res.data[1]["Completed This Week"], - "Last Week": res.data[1]["Completed Last Week"], + date: "Tue", + "This Week": 5, + "Last Week": 2, }, { - date: "Wednesday", - "This Week": res.data[2]["Completed This Week"], - "Last Week": res.data[2]["Completed Last Week"], + date: "Wed", + "This Week": 7, + "Last Week": 9, }, { - date: "Thursday", - "This Week": res.data[3]["Completed This Week"], - "Last Week": res.data[3]["Completed Last Week"], + date: "Th", + "This Week": 10, + "Last Week": 3, }, { - date: "Friday", - "This Week": res.data[4]["Completed This Week"], - "Last Week": res.data[4]["Completed Last Week"], + date: "Fri", + "This Week": 5, + "Last Week": 1, }, { - date: "Saturday", - "This Week": res.data[5]["Completed This Week"], - "Last Week": res.data[5]["Completed Last Week"], + date: "Sat", + "This Week": 7, + "Last Week": 8, }, { - date: "Sunday", - "This Week": res.data[6]["Completed This Week"], - "Last Week": res.data[6]["Completed Last Week"], + date: "Sun", + "This Week": 3, + "Last Week": 8, }, ]; return barchartData; - }; const barchartDataArray = await fetchBarChartData(); export const BarChartGraph = () => { const [value, setValue] = React.useState(null); return ( <> - Task completed statistics vs. last week - setValue(v)} - showAnimation - /> + Task completed statistics vs. last week + setValue(v)} + showAnimation + /> ); -}; \ No newline at end of file +}; diff --git a/frontend/src/components/dashboard/DonutChart.jsx b/frontend/src/components/dashboard/DonutChart.jsx index 4802b2b..c71b81d 100644 --- a/frontend/src/components/dashboard/DonutChart.jsx +++ b/frontend/src/components/dashboard/DonutChart.jsx @@ -4,8 +4,10 @@ import axiosInstance from "../../api/configs/AxiosConfig"; const fetchDonutData = async () => { try { let res = await axiosInstance.get("/dashboard/stats/"); - let todoCount = res.data.todo_count; - let recurrenceCount = res.data.recurrence_count; + // let todoCount = res.data.todo_count; + // let recurrenceCount = res.data.recurrence_count; + let todoCount = 10; + let recurrenceCount = 15; if (todoCount === undefined) { todoCount = 0; } @@ -34,6 +36,7 @@ export default function DonutChartGraph() { colors={["rose", "yellow", "orange"]} onValueChange={(v) => setValue(v)} showAnimation + radius={25} /> ); } diff --git a/frontend/src/components/dashboard/KpiCard.jsx b/frontend/src/components/dashboard/KpiCard.jsx index 2ed9f10..7ebb841 100644 --- a/frontend/src/components/dashboard/KpiCard.jsx +++ b/frontend/src/components/dashboard/KpiCard.jsx @@ -5,8 +5,10 @@ import axiosInstance from "../../api/configs/AxiosConfig"; const fetchKpiCardData = async () => { let res = await axiosInstance.get("/dashboard/stats/"); - let completedThisWeek = res.data["completed_this_week"]; - let completedLastWeek = res.data["completed_last_week"]; + // let completedThisWeek = res.data["completed_this_week"]; + // let completedLastWeek = res.data["completed_last_week"]; + let completedThisWeek = 4; + let completedLastWeek = 23; let percentage = (completedThisWeek / completedLastWeek)*100; let incOrdec = undefined; if (completedThisWeek <= completedLastWeek) { @@ -29,7 +31,7 @@ export default function KpiCard() {
{completedThisWeek}
- {percentage}% + {percentage.toFixed(0)}% vs. {completedLastWeek} (last week) diff --git a/frontend/src/components/dashboard/ProgressCircle.jsx b/frontend/src/components/dashboard/ProgressCircle.jsx new file mode 100644 index 0000000..4f8382b --- /dev/null +++ b/frontend/src/components/dashboard/ProgressCircle.jsx @@ -0,0 +1,43 @@ +import { Card, Flex, ProgressCircle, Text, } from "@tremor/react"; +import React from "react"; +import axiosInstance from "../../api/configs/AxiosConfig"; + +const fetchProgressData = async () => { + try { + let res = await axiosInstance.get("/dashboard/stats/"); + // let completedLastWeek = res.data.completed_last_week; + // let assignLastWeek = res.data.tasks_assigned_last_week; + let completedLastWeek = 15; + let assignLastWeek = 35; + if (completedLastWeek === undefined) { + completedLastWeek = 0; + } + if (assignLastWeek === undefined) { + assignLastWeek = 0; + } + return (completedLastWeek / assignLastWeek) * 100; + } catch (error) { + console.error("Error fetching progress data:", error); + return 0; + } +}; + +const progressData = await fetchProgressData(); +export default function ProgressCircleChart() { + return ( + + + + + {progressData.toFixed(0)} % + + + + + ); +} diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index ac26298..5a2b91c 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -8,14 +8,13 @@ import { TabPanels, Text, Title, - DonutChart, Legend, } from "@tremor/react"; import KpiCard from "./kpiCard"; import { BarChartGraph } from "./Barchart"; import DonutChartGraph from "./DonutChart"; import { AreaChartGraph } from "./Areachart"; - +import ProgressCircleChart from "./ProgressCircle"; const valueFormatter = (number) => `$ ${new Intl.NumberFormat("us").format(number).toString()}`; @@ -31,10 +30,11 @@ export default function Dashboard() {
+ Weekly Overview - Detail + {/*Weekly Tab*/} @@ -42,27 +42,36 @@ export default function Dashboard() {

+ Last week progress rate +
+ + - + -
+ + + +
Tasks -
+
-
- diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index b388349..2adc53a 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -42,6 +42,7 @@ export default { strong: "#111827", // gray-900 inverted: "#ffffff", // white }, + }, }, boxShadow:{