mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-18 13:34:08 +01:00
Merge pull request #55 from TurTaskProject/feature/dashboard
Fix data fetching and update UI components
This commit is contained in:
Sirin Puenggun
GitHub
commit
f88aa1a1ab
@ -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();
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<Title>Task completed statistics vs. last week</Title>
|
||||
<BarChart
|
||||
className="mt-6"
|
||||
data={barchartDataArray}
|
||||
index="date"
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
yAxisWidth={30}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
<Title>Task completed statistics vs. last week</Title>
|
||||
<BarChart
|
||||
className="mt-6"
|
||||
data={barchartDataArray}
|
||||
index="date"
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
yAxisWidth={30}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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() {
|
||||
<div>
|
||||
<Metric>{completedThisWeek}</Metric>
|
||||
</div>
|
||||
<BadgeDelta deltaType={incOrdec}>{percentage}%</BadgeDelta>
|
||||
<BadgeDelta deltaType={incOrdec}>{percentage.toFixed(0)}%</BadgeDelta>
|
||||
</Flex>
|
||||
<Flex className="mt-4">
|
||||
<Text className="truncate">vs. {completedLastWeek} (last week)</Text>
|
||||
|
||||
43
frontend/src/components/dashboard/ProgressCircle.jsx
Normal file
43
frontend/src/components/dashboard/ProgressCircle.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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() {
|
||||
<div>
|
||||
<TabGroup className="mt-6">
|
||||
<TabList>
|
||||
<Tab>Weekly</Tab>
|
||||
<Tab>Overview</Tab>
|
||||
<Tab>Detail</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{/*Weekly Tab*/}
|
||||
<TabPanel>
|
||||
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
|
||||
<Card>
|
||||
@ -42,27 +42,36 @@ export default function Dashboard() {
|
||||
<br />
|
||||
<KpiCard />
|
||||
<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>
|
||||
<BarChartGraph />
|
||||
<BarChartGraph />
|
||||
</Card>
|
||||
<Card>
|
||||
<AreaChartGraph />
|
||||
</Card>
|
||||
<div className="h-31">
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<div className="h-31">
|
||||
<Card className="mx-auto h-full">
|
||||
<Title>Tasks</Title>
|
||||
<DonutChartGraph />
|
||||
<br/>
|
||||
<br />
|
||||
<Legend
|
||||
className="mt-3 mx-auto w-1/2"
|
||||
categories={["Todo Task", "Recurrence Task"]}
|
||||
colors={["rose", "yellow"]}
|
||||
/>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</TabGroup>
|
||||
|
||||
@ -42,6 +42,7 @@ export default {
|
||||
strong: "#111827", // gray-900
|
||||
inverted: "#ffffff", // white
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
boxShadow:{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user