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

Refactor dashboard components and update API

Browse Source 
endpoints
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-25 14:48:29 +07:00
parent ea6353a455
commit debcbef7ca
5 changed files with 34 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,39 +0,0 @@
import { DonutChart } from "@tremor/react";
import { axiosInstance } from "src/api/AxiosConfig";
import { useState, useEffect } from "react";
export function DonutChartGraph() {
const [donutData, setDonutData] = useState([]);
useEffect(() => {
const fetchDonutData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const todoCount = response.data.todo_count || 0;
const recurrenceCount = response.data.recurrence_count || 0;
const donutData = [
{ name: "Todo", count: todoCount },
{ name: "Recurrence", count: recurrenceCount },
];
setDonutData(donutData);
} catch (error) {
console.error("Error fetching donut data:", error);
}
};
fetchDonutData();
}, []);
return (
<DonutChart
className="mt-6"
data={donutData}
category="count"
index="name"
colors={["rose", "yellow", "orange"]}
showAnimation
radius={25}
/>
);
}

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

@ -13,7 +13,7 @@ export function KpiCard() {
useEffect(() => {
const fetchKpiCardData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const response = await axiosInstance.get("/dashboard/todostats/");
const completedThisWeek = response.data.completed_this_week || 0;
const completedLastWeek = response.data.completed_last_week || 0;
const percentage = (completedThisWeek / completedLastWeek) * 100;

41
frontend/src/components/dashboard/PieChart.jsx
View File

@ -1,37 +1,34 @@
import { DonutChart } from "@tremor/react";
import axiosInstance from "../../api/configs/AxiosConfig";
import { axiosInstance } from "src/api/AxiosConfig";
import { useState, useEffect } from "react";
const fetchPieData = async () => {
export function DonutChartGraph() {
const [donutData, setDonutData] = useState([]);
useEffect(() => {
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 = 10;
let recurrenceCount = 15;
if (todoCount === undefined) {
todoCount = 0;
}
if (recurrenceCount === undefined) {
recurrenceCount = 0;
}
const response = await axiosInstance.get("/dashboard/todostats/");
const totalTask = response.data.total_tasks || 0;
const completedTask = response.data.total_completed_tasks || 0;
const donutData = [
{ name: "Completed Tasks", count: todoCount },
{ name: "Uncompleted Tasks", count: recurrenceCount },
{ name: "Completed task", count: totalTask },
{ name: "Total task", count: completedTask },
];
return donutData;
setDonutData(donutData);
} catch (error) {
console.error("Error fetching donut data:", error);
return [];
}
};
};
fetchDonutData();
}, []);
const pieDataArray = await fetchPieData();
export function PieChartGraph() {
return (
<DonutChart
className="mt-6"
data={pieDataArray}
data={donutData}
category="count"
index="name"
colors={["rose", "yellow"]}

2
frontend/src/components/dashboard/ProgressCircle.jsx
View File

@ -8,7 +8,7 @@ export function ProgressCircleChart() {
useEffect(() => {
const fetchProgressData = async () => {
try {
const response = await axiosInstance.get("/dashboard/stats/");
const response = await axiosInstance.get("/dashboard/todostats/");
let completedLastWeek = response.data.completed_last_week || 0;
let assignLastWeek = response.data.tasks_assigned_last_week || 0;

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

@ -10,10 +10,11 @@ import {
Title,
Legend,
} from "@tremor/react";
import {KpiCard} from "./KpiCard";
import { KpiCard } from "./KpiCard";
import { BarChartGraph } from "./Barchart";
import { AreaChartGraph } from "./Areachart";
import {ProgressCircleChart} from "./ProgressCircle";
import { DonutChartGraph } from "./PieChart";
import { ProgressCircleChart } from "./ProgressCircle";
const valueFormatter = (number) =>
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
@ -59,17 +60,20 @@ export function Dashboard() {
</Grid>
</TabPanel>
<TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<div className="h-31">
<Card className="mx-auto h-full">
<Title>Tasks</Title>
<DonutChartGraph />
<br />
<Legend
className="mt-3 mx-auto w-1/2"
categories={["Todo Task", "Recurrence Task"]}
categories={["Completed Task", "Total Task"]}
colors={["rose", "yellow"]}
/>
</Card>
</div>
</Grid>
</TabPanel>
</TabPanels>
</TabGroup>