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

Constructing dashboard graphs.

Browse Source
This commit is contained in:
Pattadon 2023-11-20 11:58:22 +07:00
parent 9379e71ce8
commit 5ebd7861ae
7 changed files with 179 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet"> --> <!-- <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet"> -->
<title>Vite + React</title> <title>TurTask</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

1
frontend/src/App.jsx
View File

@ -5,7 +5,6 @@ import TestAuth from "./components/testAuth";
import LoginPage from "./components/authentication/LoginPage"; import LoginPage from "./components/authentication/LoginPage";
import SignUpPage from "./components/authentication/SignUpPage"; import SignUpPage from "./components/authentication/SignUpPage";
import NavBar from "./components/navigations/Navbar"; import NavBar from "./components/navigations/Navbar";
import Home from "./components/Home";
import Calendar from "./components/calendar/calendar"; import Calendar from "./components/calendar/calendar";
import KanbanPage from "./components/kanbanBoard/kanbanPage"; import KanbanPage from "./components/kanbanBoard/kanbanPage";
import IconSideNav from "./components/navigations/IconSideNav"; import IconSideNav from "./components/navigations/IconSideNav";

11
frontend/src/components/Home.jsx
View File

@ -1,11 +0,0 @@
import React from "react";
function HomePage() {
return (
<div>
<h1>Welcome to My Website</h1>
</div>
);
}
export default HomePage;

2
frontend/src/components/authentication/LoginPage.jsx
View File

@ -132,7 +132,7 @@ function LoginPage() {
color: "#00ff00", color: "#00ff00",
distance: 150, distance: 150,
enable: true, enable: true,
opacity: 0.1, opacity: 0.5,
width: 1, width: 1,
}, },
move: { move: {

4
frontend/src/components/authentication/SignUpPage.jsx
View File

@ -133,7 +133,7 @@ export default function SignUp() {
color: "#228B22", color: "#228B22",
distance: 150, distance: 150,
enable: true, enable: true,
opacity: 0.5, opacity: 1,
width: 1, width: 1,
}, },
move: { move: {
@ -154,7 +154,7 @@ export default function SignUp() {
value: 50, value: 50,
}, },
opacity: { opacity: {
value: 0.5, value: 0.6,
}, },
shape: { shape: {
type: "circle", type: "circle",

93
frontend/src/components/dashboard/Barchart.jsx Normal file
View File

@ -0,0 +1,93 @@
import { BarChart, Card, 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,
},
];
export const BarChartGraph = () => {
const [value, setValue] = React.useState(null);
return (
<>
<Card>
<Title>Closed Pull Requests</Title>
<BarChart
className="mt-6"
data={chartdata3}
index="date"
categories={["2022", "2023"]}
colors={["neutral", "indigo"]}
yAxisWidth={30}
onValueChange={(v) => setValue(v)}
showAnimation
/>
</Card>
<pre>{JSON.stringify(value)}</pre>
</>
);
};

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

@ -8,48 +8,93 @@ import {
TabPanels, TabPanels,
Text, Text,
Title, Title,
DonutChart,
} from "@tremor/react"; } from "@tremor/react";
import KpiCard from "./kpiCard"; import KpiCard from "./kpiCard";
import { BarChartGraph } from "./Barchart";
const cities = [
{
name: "New York",
sales: 9800,
},
// ...
{
name: "Zurich",
sales: 1398,
},
];
const valueFormatter = (number) =>
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
export default function Dashboard() { export default function Dashboard() {
return ( return (
<main className="p-12"> <div className="flex flex-col p-12">
<Title>Dashboard</Title> <div>
<Text>All of your progress will be shown right here.</Text> <Title>Dashboard</Title>
<Text>All of your progress will be shown right here.</Text>
</div>
<TabGroup className="mt-6"> <div>
<TabList> <TabGroup className="mt-6">
<Tab>Overview</Tab> <TabList>
<Tab>Detail</Tab> <Tab>Overview</Tab>
</TabList> <Tab>Detail</Tab>
<TabPanels> </TabList>
<TabPanel> <TabPanels>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6"> <TabPanel>
<KpiCard /> <Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<Card> <Card>
{/* Placeholder to set height */} <KpiCard />
<div className="h-28" /> <br />
</Card> <KpiCard />
<Card> </Card>
{/* Placeholder to set height */} {/* Placeholder to set height */}
<div className="h-28" /> <div className="h-31">
</Card> <Card className="mx-auto h-full">
</Grid> <Title>Sales</Title>
<div className="mt-6"> <DonutChart
<Card> className="mt-6"
<div className="h-80" /> data={cities}
</Card> category="sales"
</div> index="name"
</TabPanel> colors={[
<TabPanel> "rose",
<div className="mt-6"> "yellow",
<Card> "orange",
<div className="h-96" /> "indigo",
</Card> "blue",
</div> "emerald",
</TabPanel> ]}
</TabPanels> onValueChange={(v) => setValue(v)}
</TabGroup> showAnimation
</main> />
</Card>
</div>
<BarChartGraph />
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
</Grid>
<div className="mt-6">
<Card>
<div className="h-80" />
</Card>
</div>
</TabPanel>
<TabPanel>
<div className="mt-6">
<Card>
<div className="h-96" />
</Card>
</div>
</TabPanel>
</TabPanels>
</TabGroup>
</div>
</div>
); );
} }