mirror of
https://github.com/TurTaskProject/TurTaskWeb.git
synced 2025-12-18 21:44:07 +01:00
Completed kpi card.
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB
parent
90d198e552
commit
f9b0603f8b
@ -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,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 = () => {
|
||||
<Title>Task completed statistics vs. last week</Title>
|
||||
<BarChart
|
||||
className="mt-6"
|
||||
data={chartdata3}
|
||||
data={barchartDataArray}
|
||||
index="date"
|
||||
categories={["This Week", "Last Week"]}
|
||||
colors={["neutral", "indigo"]}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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() {
|
||||
<br />
|
||||
<KpiCard />
|
||||
<br />
|
||||
<KpiCard />
|
||||
</Card>
|
||||
<Card>
|
||||
<BarChartGraph />
|
||||
</Card>
|
||||
<Card>
|
||||
<AreaChartGraph />
|
||||
</Card>
|
||||
<div className="h-31">
|
||||
<Card className="mx-auto h-full">
|
||||
<Title>Tasks</Title>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user