From 1f665981ae0a7920d34809ef03bab7c498f02e59 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Mon, 20 Nov 2023 21:04:21 +0700 Subject: [PATCH 1/4] Completed DonutChart. --- .../src/components/dashboard/Barchart.jsx | 6 +-- .../src/components/dashboard/DonutChart.jsx | 39 ++++++++++++++++ .../src/components/dashboard/dashboard.jsx | 46 ++++++++++--------- 3 files changed, 64 insertions(+), 27 deletions(-) create mode 100644 frontend/src/components/dashboard/DonutChart.jsx diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index 5c26cb8..b900474 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -2,11 +2,7 @@ import { BarChart, Card, Title } from "@tremor/react"; import React from "react"; import axiosInstance from "../../api/configs/AxiosConfig"; -const apiGetBarChartData = () => { - return axiosInstance.get("dashboard/stats/"); - } -console.log(apiGetBarChartData); - + const chartdata3 = [ { date: "Jan 23", diff --git a/frontend/src/components/dashboard/DonutChart.jsx b/frontend/src/components/dashboard/DonutChart.jsx new file mode 100644 index 0000000..4802b2b --- /dev/null +++ b/frontend/src/components/dashboard/DonutChart.jsx @@ -0,0 +1,39 @@ +import { DonutChart } from "@tremor/react"; +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; + if (todoCount === undefined) { + todoCount = 0; + } + if (recurrenceCount === undefined) { + recurrenceCount = 0; + } + const donutData = [ + { name: "Todo", count: todoCount }, + { name: "Recurrence", count: recurrenceCount }, + ]; + return donutData; + } catch (error) { + console.error("Error fetching donut data:", error); + return []; + } +}; + +const donutDataArray = await fetchDonutData(); +export default function DonutChartGraph() { + return ( + setValue(v)} + showAnimation + /> + ); +} diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 7d7427e..a4204a1 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -1,20 +1,23 @@ -import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, DonutChart } from "@tremor/react"; +import { + Card, + Grid, + Tab, + TabGroup, + TabList, + TabPanel, + TabPanels, + Text, + Title, + DonutChart, + Legend, +} from "@tremor/react"; import KpiCard from "./kpiCard"; import { BarChartGraph } from "./Barchart"; +import DonutChartGraph from "./DonutChart"; -const cities = [ - { - name: "New York", - sales: 9800, - }, - // ... - { - name: "Zurich", - sales: 1398, - }, -]; -const valueFormatter = number => `$ ${new Intl.NumberFormat("us").format(number).toString()}`; +const valueFormatter = (number) => + `$ ${new Intl.NumberFormat("us").format(number).toString()}`; export default function Dashboard() { return ( @@ -41,16 +44,15 @@ export default function Dashboard() { {/* Placeholder to set height */}
- Sales - setValue(v)} - showAnimation + Tasks + +
+ +
From 78c8e3da2e95843c1ece144b5021d52fb2a48c89 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Mon, 20 Nov 2023 21:21:10 +0700 Subject: [PATCH 2/4] Constructing barchart. --- .../src/components/dashboard/Barchart.jsx | 22 +++++++++---------- .../src/components/dashboard/dashboard.jsx | 4 ++++ 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index b900474..4cb9e14 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -2,17 +2,18 @@ import { BarChart, Card, Title } from "@tremor/react"; import React from "react"; import axiosInstance from "../../api/configs/AxiosConfig"; - +const fetchBarChartData = async () => { +} const chartdata3 = [ { - date: "Jan 23", - "2022": 45, - "2023": 78, + date: "Monday", + "This Week": 45, + "Last Week": 78, }, { - date: "Feb 23", - "2022": 52, - "2023": 71, + date: "Tuesday", + "This Week": 52, + "Last Week": 71, }, { date: "Mar 23", @@ -70,20 +71,17 @@ export const BarChartGraph = () => { const [value, setValue] = React.useState(null); return ( <> - - Closed Pull Requests + Task completed statistics vs. last week setValue(v)} showAnimation /> - - 
{JSON.stringify(value)}
); }; \ No newline at end of file diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index a4204a1..961f6c4 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -37,6 +37,8 @@ export default function Dashboard() { + Highlights vs. last week +

@@ -55,7 +57,9 @@ export default function Dashboard() { + + From 8fbb84c2859e42de59dd2f1ac7eec815d9258631 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Mon, 20 Nov 2023 21:33:58 +0700 Subject: [PATCH 3/4] Fix date labels in Barchart component --- .../src/components/dashboard/Barchart.jsx | 38 ++++--------------- .../src/components/dashboard/dashboard.jsx | 7 ++-- 2 files changed, 10 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index 4cb9e14..9636925 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -16,55 +16,31 @@ const chartdata3 = [ "Last Week": 71, }, { - date: "Mar 23", + date: "Wednesday", "2022": 48, "2023": 80, }, { - date: "Apr 23", + date: "Thursday", "2022": 61, "2023": 65, }, { - date: "May 23", + date: "Friday", "2022": 55, "2023": 58, }, { - date: "Jun 23", + date: "Saturday", "2022": 67, "2023": 62, }, { - date: "Jul 23", + date: "Sunday", "2022": 60, "2023": 54, }, - { - date: "Aug 23", - "2022": 72, - "2023": 49, - }, - { - date: "Sep 23", - "2022": 65, - "2023": 52, - }, - { - date: "Oct 23", - "2022": 68, - "2023": null, - }, - { - date: "Nov 23", - "2022": 74, - "2023": null, - }, - { - date: "Dec 23", - "2022": 71, - "2023": null, - }, + ]; export const BarChartGraph = () => { @@ -76,7 +52,7 @@ export const BarChartGraph = () => { className="mt-6" data={chartdata3} index="date" - categories={["This Week", "Last week"]} + categories={["This Week", "Last Week"]} colors={["neutral", "indigo"]} yAxisWidth={30} onValueChange={(v) => setValue(v)} diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 961f6c4..702318b 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -43,7 +43,9 @@ export default function Dashboard() {
- {/* Placeholder to set height */} + + +
Tasks @@ -57,9 +59,6 @@ export default function Dashboard() {
- - - From f9b0603f8b194c1bd7a5fab82cb41cd693e2d767 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Tue, 21 Nov 2023 00:30:01 +0700 Subject: [PATCH 4/4] Completed kpi card. --- .../components/authentication/SignUpPage.jsx | 3 +- .../src/components/dashboard/Areachart.jsx | 65 ++++++++++++++ .../src/components/dashboard/Barchart.jsx | 87 ++++++++++--------- frontend/src/components/dashboard/KpiCard.jsx | 31 +++++-- .../src/components/dashboard/dashboard.jsx | 5 +- 5 files changed, 141 insertions(+), 50 deletions(-) create mode 100644 frontend/src/components/dashboard/Areachart.jsx diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx index 5d3c76f..6bcc8dc 100644 --- a/frontend/src/components/authentication/SignUpPage.jsx +++ b/frontend/src/components/authentication/SignUpPage.jsx @@ -54,6 +54,7 @@ export default function SignUp() { const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value }); + console.log(formData); }; { /* Particles Loader*/ @@ -218,7 +219,7 @@ export default function SignUp() {

- {/* Login Button */} + {/* Signups Button */} diff --git a/frontend/src/components/dashboard/Areachart.jsx b/frontend/src/components/dashboard/Areachart.jsx new file mode 100644 index 0000000..9d0fe41 --- /dev/null +++ b/frontend/src/components/dashboard/Areachart.jsx @@ -0,0 +1,65 @@ +import { AreaChart, Title } from "@tremor/react"; +import React from "react"; +import axiosInstance from "../../api/configs/AxiosConfig"; + +const fetchAreaChartData = async () => { + let res = await axiosInstance.get("/dashboard/weekly/"); + console.log(res.data); + const areaChartData = [ + { + date: "Monday", + "This Week": res.data[0]["This Week"], + "Last Week": res.data[0]["Last Week"], + }, + { + date: "Tuesday", + "This Week": res.data[1]["This Week"], + "Last Week": res.data[1]["Last Week"], + }, + { + date: "Wednesday", + "This Week": res.data[2]["This Week"], + "Last Week": res.data[2]["Last Week"], + }, + { + date: "Thursday", + "This Week": res.data[3]["This Week"], + "Last Week": res.data[3]["Last Week"], + }, + { + date: "Friday", + "This Week": res.data[4]["This Week"], + "Last Week": res.data[4]["Last Week"], + }, + { + date: "Saturday", + "This Week": res.data[5]["This Week"], + "Last Week": res.data[5]["Last Week"], + }, + { + date: "Sunday", + "This Week": res.data[6]["This Week"], + "Last Week": res.data[6]["Last Week"], + }, + ]; +} + +const areaChartDataArray = await fetchAreaChartData(); +export const AreaChartGraph = () => { + const [value, setValue] = React.useState(null); + return ( + <> + Number of tasks statistics vs. last week + setValue(v)} + showAnimation + /> + + ); +}; \ No newline at end of file diff --git a/frontend/src/components/dashboard/Barchart.jsx b/frontend/src/components/dashboard/Barchart.jsx index 9636925..fcf9044 100644 --- a/frontend/src/components/dashboard/Barchart.jsx +++ b/frontend/src/components/dashboard/Barchart.jsx @@ -1,48 +1,51 @@ -import { BarChart, Card, Title } from "@tremor/react"; +import { BarChart, Title } from "@tremor/react"; import React from "react"; import axiosInstance from "../../api/configs/AxiosConfig"; const fetchBarChartData = async () => { -} -const chartdata3 = [ - { - date: "Monday", - "This Week": 45, - "Last Week": 78, - }, - { - date: "Tuesday", - "This Week": 52, - "Last Week": 71, - }, - { - date: "Wednesday", - "2022": 48, - "2023": 80, - }, - { - date: "Thursday", - "2022": 61, - "2023": 65, - }, - { - date: "Friday", - "2022": 55, - "2023": 58, - }, - { - date: "Saturday", - "2022": 67, - "2023": 62, - }, - { - date: "Sunday", - "2022": 60, - "2023": 54, - }, - -]; - + let res = await axiosInstance.get("/dashboard/weekly/"); + console.log(res.data); + const barchartData = [ + { + date: "Monday", + "This Week": res.data[0]["Completed This Week"], + "Last Week": res.data[0]["Completed Last Week"], + }, + { + date: "Tuesday", + "This Week": res.data[1]["Completed This Week"], + "Last Week": res.data[1]["Completed Last Week"], + }, + { + date: "Wednesday", + "This Week": res.data[2]["Completed This Week"], + "Last Week": res.data[2]["Completed Last Week"], + }, + { + date: "Thursday", + "This Week": res.data[3]["Completed This Week"], + "Last Week": res.data[3]["Completed Last Week"], + }, + { + date: "Friday", + "This Week": res.data[4]["Completed This Week"], + "Last Week": res.data[4]["Completed Last Week"], + }, + { + date: "Saturday", + "This Week": res.data[5]["Completed This Week"], + "Last Week": res.data[5]["Completed Last Week"], + }, + { + date: "Sunday", + "This Week": res.data[6]["Completed This Week"], + "Last Week": res.data[6]["Completed Last Week"], + }, + ]; + return barchartData; + +}; +const barchartDataArray = await fetchBarChartData(); export const BarChartGraph = () => { const [value, setValue] = React.useState(null); return ( @@ -50,7 +53,7 @@ export const BarChartGraph = () => { Task completed statistics vs. last week { + let res = await axiosInstance.get("/dashboard/stats/"); + let completedThisWeek = res.data["completed_this_week"]; + let completedLastWeek = res.data["completed_last_week"]; + let percentage = (completedThisWeek / completedLastWeek)*100; + let incOrdec = undefined; + if (completedThisWeek <= completedLastWeek) { + incOrdec = "moderateDecrease"; + } + if (completedThisWeek > completedLastWeek) { + incOrdec = "moderateIncrease"; + } + return {completedThisWeek, completedLastWeek, incOrdec, percentage}; +} + +const {kpiCardDataArray, completedThisWeek ,completedLastWeek, incOrdec, percentage} = await fetchKpiCardData(); + export default function KpiCard() { return ( +
- Sales - $ 12,699 + {completedThisWeek}
- 13.2% + {percentage}% - 68% ($ 149,940) - $ 220,500 + vs. {completedLastWeek} (last week) - + ); } \ No newline at end of file diff --git a/frontend/src/components/dashboard/dashboard.jsx b/frontend/src/components/dashboard/dashboard.jsx index 702318b..ac26298 100644 --- a/frontend/src/components/dashboard/dashboard.jsx +++ b/frontend/src/components/dashboard/dashboard.jsx @@ -14,6 +14,7 @@ import { import KpiCard from "./kpiCard"; import { BarChartGraph } from "./Barchart"; import DonutChartGraph from "./DonutChart"; +import { AreaChartGraph } from "./Areachart"; const valueFormatter = (number) => @@ -41,11 +42,13 @@ export default function Dashboard() {

- + + +
Tasks