TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/dashboard' of https://github.com/TurTaskProject/TurTaskWeb into feature/dashboard

Browse Source
This commit is contained in:
sosokker 2023-11-21 13:22:32 +07:00
commit 5ef268180d
7 changed files with 200 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/components/dashboard/Areachart.jsx
View File

@ -5,43 +5,81 @@ import axiosInstance from "../../api/configs/AxiosConfig";
const fetchAreaChartData = async () => { const fetchAreaChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/"); let res = await axiosInstance.get("/dashboard/weekly/");
console.log(res.data); 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 = [ const areaChartData = [
{ {
date: "Monday", date: "Mon",
"This Week": res.data[0]["This Week"], "This Week": 1,
"Last Week": res.data[0]["Last Week"], "Last Week": 2,
}, },
{ {
date: "Tuesday", date: "Tue",
"This Week": res.data[1]["This Week"], "This Week": 5,
"Last Week": res.data[1]["Last Week"], "Last Week": 2,
}, },
{ {
date: "Wednesday", date: "Wed",
"This Week": res.data[2]["This Week"], "This Week": 7,
"Last Week": res.data[2]["Last Week"], "Last Week": 9,
}, },
{ {
date: "Thursday", date: "Th",
"This Week": res.data[3]["This Week"], "This Week": 10,
"Last Week": res.data[3]["Last Week"], "Last Week": 3,
}, },
{ {
date: "Friday", date: "Fri",
"This Week": res.data[4]["This Week"], "This Week": 5,
"Last Week": res.data[4]["Last Week"], "Last Week": 1,
}, },
{ {
date: "Saturday", date: "Sat",
"This Week": res.data[5]["This Week"], "This Week": 7,
"Last Week": res.data[5]["Last Week"], "Last Week": 8,
}, },
{ {
date: "Sunday", date: "Sun",
"This Week": res.data[6]["This Week"], "This Week": 3,
"Last Week": res.data[6]["Last Week"], "Last Week": 8,
}, },
]; ];
return areaChartData;
} }
const areaChartDataArray = await fetchAreaChartData(); const areaChartDataArray = await fetchAreaChartData();

104
frontend/src/components/dashboard/Barchart.jsx
View File

@ -5,62 +5,98 @@ import axiosInstance from "../../api/configs/AxiosConfig";
const fetchBarChartData = async () => { const fetchBarChartData = async () => {
let res = await axiosInstance.get("/dashboard/weekly/"); let res = await axiosInstance.get("/dashboard/weekly/");
console.log(res.data); 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 = [ const barchartData = [
{ {
date: "Monday", date: "Mon",
"This Week": res.data[0]["Completed This Week"], "This Week": 1,
"Last Week": res.data[0]["Completed Last Week"], "Last Week": 2,
}, },
{ {
date: "Tuesday", date: "Tue",
"This Week": res.data[1]["Completed This Week"], "This Week": 5,
"Last Week": res.data[1]["Completed Last Week"], "Last Week": 2,
}, },
{ {
date: "Wednesday", date: "Wed",
"This Week": res.data[2]["Completed This Week"], "This Week": 7,
"Last Week": res.data[2]["Completed Last Week"], "Last Week": 9,
}, },
{ {
date: "Thursday", date: "Th",
"This Week": res.data[3]["Completed This Week"], "This Week": 10,
"Last Week": res.data[3]["Completed Last Week"], "Last Week": 3,
}, },
{ {
date: "Friday", date: "Fri",
"This Week": res.data[4]["Completed This Week"], "This Week": 5,
"Last Week": res.data[4]["Completed Last Week"], "Last Week": 1,
}, },
{ {
date: "Saturday", date: "Sat",
"This Week": res.data[5]["Completed This Week"], "This Week": 7,
"Last Week": res.data[5]["Completed Last Week"], "Last Week": 8,
}, },
{ {
date: "Sunday", date: "Sun",
"This Week": res.data[6]["Completed This Week"], "This Week": 3,
"Last Week": res.data[6]["Completed Last Week"], "Last Week": 8,
}, },
]; ];
return barchartData; return barchartData;
}; };
const barchartDataArray = await fetchBarChartData(); const barchartDataArray = await fetchBarChartData();
export const BarChartGraph = () => { export const BarChartGraph = () => {
const [value, setValue] = React.useState(null); const [value, setValue] = React.useState(null);
return ( return (
<> <>
<Title>Task completed statistics vs. last week</Title> <Title>Task completed statistics vs. last week</Title>
<BarChart <BarChart
className="mt-6" className="mt-6"
data={barchartDataArray} data={barchartDataArray}
index="date" index="date"
categories={["This Week", "Last Week"]} categories={["This Week", "Last Week"]}
colors={["neutral", "indigo"]} colors={["neutral", "indigo"]}
yAxisWidth={30} yAxisWidth={30}
onValueChange={(v) => setValue(v)} onValueChange={(v) => setValue(v)}
showAnimation showAnimation
/> />
</> </>
); );
}; };

7
frontend/src/components/dashboard/DonutChart.jsx
View File

@ -4,8 +4,10 @@ import axiosInstance from "../../api/configs/AxiosConfig";
const fetchDonutData = async () => { const fetchDonutData = async () => {
try { try {
let res = await axiosInstance.get("/dashboard/stats/"); let res = await axiosInstance.get("/dashboard/stats/");
let todoCount = res.data.todo_count; // let todoCount = res.data.todo_count;
let recurrenceCount = res.data.recurrence_count; // let recurrenceCount = res.data.recurrence_count;
let todoCount = 10;
let recurrenceCount = 15;
if (todoCount === undefined) { if (todoCount === undefined) {
todoCount = 0; todoCount = 0;
} }
@ -34,6 +36,7 @@ export default function DonutChartGraph() {
colors={["rose", "yellow", "orange"]} colors={["rose", "yellow", "orange"]}
onValueChange={(v) => setValue(v)} onValueChange={(v) => setValue(v)}
showAnimation showAnimation
radius={25}
/> />
); );
} }

8
frontend/src/components/dashboard/KpiCard.jsx
View File

@ -5,8 +5,10 @@ import axiosInstance from "../../api/configs/AxiosConfig";
const fetchKpiCardData = async () => { const fetchKpiCardData = async () => {
let res = await axiosInstance.get("/dashboard/stats/"); let res = await axiosInstance.get("/dashboard/stats/");
let completedThisWeek = res.data["completed_this_week"]; // let completedThisWeek = res.data["completed_this_week"];
let completedLastWeek = res.data["completed_last_week"]; // let completedLastWeek = res.data["completed_last_week"];
let completedThisWeek = 4;
let completedLastWeek = 23;
let percentage = (completedThisWeek / completedLastWeek)*100; let percentage = (completedThisWeek / completedLastWeek)*100;
let incOrdec = undefined; let incOrdec = undefined;
if (completedThisWeek <= completedLastWeek) { if (completedThisWeek <= completedLastWeek) {
@ -29,7 +31,7 @@ export default function KpiCard() {
<div> <div>
<Metric>{completedThisWeek}</Metric> <Metric>{completedThisWeek}</Metric>
</div> </div>
<BadgeDelta deltaType={incOrdec}>{percentage}%</BadgeDelta> <BadgeDelta deltaType={incOrdec}>{percentage.toFixed(0)}%</BadgeDelta>
</Flex> </Flex>
<Flex className="mt-4"> <Flex className="mt-4">
<Text className="truncate">vs. {completedLastWeek} (last week)</Text> <Text className="truncate">vs. {completedLastWeek} (last week)</Text>

43
frontend/src/components/dashboard/ProgressCircle.jsx Normal file
View File

@ -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 (
<Card className="max-w-lg mx-auto">
<Flex className="flex-col items-center">
<ProgressCircle
className="mt-6" value={progressData}
size={200}
strokeWidth={10}
radius={60}
color="indigo">
<span className="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center text-sm text-indigo-500 font-medium">
{progressData.toFixed(0)} %
</span>
</ProgressCircle>
</Flex>
</Card>
);
}

25
frontend/src/components/dashboard/dashboard.jsx
View File

@ -8,14 +8,13 @@ import {
TabPanels, TabPanels,
Text, Text,
Title, Title,
DonutChart,
Legend, Legend,
} from "@tremor/react"; } from "@tremor/react";
import KpiCard from "./kpiCard"; import KpiCard from "./kpiCard";
import { BarChartGraph } from "./Barchart"; import { BarChartGraph } from "./Barchart";
import DonutChartGraph from "./DonutChart"; import DonutChartGraph from "./DonutChart";
import { AreaChartGraph } from "./Areachart"; import { AreaChartGraph } from "./Areachart";
import ProgressCircleChart from "./ProgressCircle";
const valueFormatter = (number) => const valueFormatter = (number) =>
`$ ${new Intl.NumberFormat("us").format(number).toString()}`; `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
@ -31,10 +30,11 @@ export default function Dashboard() {
<div> <div>
<TabGroup className="mt-6"> <TabGroup className="mt-6">
<TabList> <TabList>
<Tab>Weekly</Tab>
<Tab>Overview</Tab> <Tab>Overview</Tab>
<Tab>Detail</Tab>
</TabList> </TabList>
<TabPanels> <TabPanels>
{/*Weekly Tab*/}
<TabPanel> <TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6"> <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<Card> <Card>
@ -42,27 +42,36 @@ export default function Dashboard() {
<br /> <br />
<KpiCard /> <KpiCard />
<br /> <br />
<Title>Last week progress rate</Title>
<br />
<ProgressCircleChart />
<Legend
className="mt-3 mx-auto w-1/2"
categories={["Completed Tasks", "Assigned Tasks"]}
colors={["indigo"]}
></Legend>
</Card> </Card>
<Card> <Card>
<BarChartGraph /> <BarChartGraph />
</Card> </Card>
<Card> <Card>
<AreaChartGraph /> <AreaChartGraph />
</Card> </Card>
<div className="h-31"> </Grid>
</TabPanel>
<TabPanel>
<div className="h-31">
<Card className="mx-auto h-full"> <Card className="mx-auto h-full">
<Title>Tasks</Title> <Title>Tasks</Title>
<DonutChartGraph /> <DonutChartGraph />
<br/> <br />
<Legend <Legend
className="mt-3 mx-auto w-1/2" className="mt-3 mx-auto w-1/2"
categories={["Todo Task", "Recurrence Task"]} categories={["Todo Task", "Recurrence Task"]}
colors={["rose", "yellow"]} colors={["rose", "yellow"]}
/> />
</Card> </Card>
</div> </div>
</Grid>
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</TabGroup> </TabGroup>

1
frontend/tailwind.config.js
View File

@ -42,6 +42,7 @@ export default {
strong: "#111827", // gray-900 strong: "#111827", // gray-900
inverted: "#ffffff", // white inverted: "#ffffff", // white
}, },
}, },
}, },
boxShadow:{ boxShadow:{