mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-18 21:44:07 +01:00
Merge branch 'main' into feature/tasks-api
This commit is contained in:
sosokker
commit
72934d9175
@ -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() {
|
||||
</div>
|
||||
<br></br>
|
||||
|
||||
{/* Login Button */}
|
||||
{/* Signups Button */}
|
||||
<button className="btn btn-success w-full " onClick={handleSubmit}>
|
||||
Signup
|
||||
</button>
|
||||
|
||||
65
frontend/src/components/dashboard/Areachart.jsx
Normal file
65
frontend/src/components/dashboard/Areachart.jsx
Normal file
@ -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 (
|
||||
<>
|
||||
<Title>Number of tasks statistics vs. last week</Title>
|
||||
<AreaChart
|
||||
className="mt-6"
|
||||
data={areaChartDataArray}
|
||||
index="date"
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
yAxisWidth={30}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,93 +1,66 @@
|
||||
import { BarChart, Card, Title } from "@tremor/react";
|
||||
import { BarChart, 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",
|
||||
"2022": 45,
|
||||
"2023": 78,
|
||||
},
|
||||
{
|
||||
date: "Feb 23",
|
||||
"2022": 52,
|
||||
"2023": 71,
|
||||
},
|
||||
{
|
||||
date: "Mar 23",
|
||||
"2022": 48,
|
||||
"2023": 80,
|
||||
},
|
||||
{
|
||||
date: "Apr 23",
|
||||
"2022": 61,
|
||||
"2023": 65,
|
||||
},
|
||||
{
|
||||
date: "May 23",
|
||||
"2022": 55,
|
||||
"2023": 58,
|
||||
},
|
||||
{
|
||||
date: "Jun 23",
|
||||
"2022": 67,
|
||||
"2023": 62,
|
||||
},
|
||||
{
|
||||
date: "Jul 23",
|
||||
"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,
|
||||
},
|
||||
];
|
||||
|
||||
const fetchBarChartData = async () => {
|
||||
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 (
|
||||
<>
|
||||
<Card>
|
||||
<Title>Closed Pull Requests</Title>
|
||||
<Title>Task completed statistics vs. last week</Title>
|
||||
<BarChart
|
||||
className="mt-6"
|
||||
data={chartdata3}
|
||||
data={barchartDataArray}
|
||||
index="date"
|
||||
categories={["2022", "2023"]}
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
yAxisWidth={30}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
</Card>
|
||||
<pre>{JSON.stringify(value)}</pre>
|
||||
</>
|
||||
);
|
||||
};
|
||||
39
frontend/src/components/dashboard/DonutChart.jsx
Normal file
39
frontend/src/components/dashboard/DonutChart.jsx
Normal file
@ -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 (
|
||||
<DonutChart
|
||||
className="mt-6"
|
||||
data={donutDataArray}
|
||||
category="count"
|
||||
index="name"
|
||||
colors={["rose", "yellow", "orange"]}
|
||||
onValueChange={(v) => setValue(v)}
|
||||
showAnimation
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,21 +1,40 @@
|
||||
|
||||
import { BadgeDelta, Card, Flex, Metric, ProgressBar, Text } from "@tremor/react";
|
||||
import React from "react";
|
||||
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 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 (
|
||||
|
||||
<Card className="max-w-lg mx-auto">
|
||||
<Flex alignItems="start">
|
||||
<div>
|
||||
<Text>Sales</Text>
|
||||
<Metric>$ 12,699</Metric>
|
||||
<Metric>{completedThisWeek}</Metric>
|
||||
</div>
|
||||
<BadgeDelta deltaType="moderateIncrease">13.2%</BadgeDelta>
|
||||
<BadgeDelta deltaType={incOrdec}>{percentage}%</BadgeDelta>
|
||||
</Flex>
|
||||
<Flex className="mt-4">
|
||||
<Text className="truncate">68% ($ 149,940)</Text>
|
||||
<Text>$ 220,500</Text>
|
||||
<Text className="truncate">vs. {completedLastWeek} (last week)</Text>
|
||||
</Flex>
|
||||
<ProgressBar value={15.9} className="mt-2" />
|
||||
<ProgressBar value={percentage} className="mt-2" />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@ -1,20 +1,24 @@
|
||||
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";
|
||||
import { AreaChartGraph } from "./Areachart";
|
||||
|
||||
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 (
|
||||
@ -34,26 +38,30 @@ export default function Dashboard() {
|
||||
<TabPanel>
|
||||
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
|
||||
<Card>
|
||||
<KpiCard />
|
||||
<Title>Highlights vs. last week</Title>
|
||||
<br />
|
||||
<KpiCard />
|
||||
<br />
|
||||
</Card>
|
||||
<Card>
|
||||
<BarChartGraph />
|
||||
</Card>
|
||||
<Card>
|
||||
<AreaChartGraph />
|
||||
</Card>
|
||||
{/* Placeholder to set height */}
|
||||
<div className="h-31">
|
||||
<Card className="mx-auto h-full">
|
||||
<Title>Sales</Title>
|
||||
<DonutChart
|
||||
className="mt-6"
|
||||
data={cities}
|
||||
category="sales"
|
||||
index="name"
|
||||
colors={["rose", "yellow", "orange", "indigo", "blue", "emerald"]}
|
||||
onValueChange={v => setValue(v)}
|
||||
showAnimation
|
||||
<Title>Tasks</Title>
|
||||
<DonutChartGraph />
|
||||
<br/>
|
||||
<Legend
|
||||
className="mt-3 mx-auto w-1/2"
|
||||
categories={["Todo Task", "Recurrence Task"]}
|
||||
colors={["rose", "yellow"]}
|
||||
/>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
<BarChartGraph />
|
||||
</Grid>
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user