TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 13:34:08 +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 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"> -->
<title>Vite + React</title>
<title>TurTask</title>
</head>
<body>
<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 SignUpPage from "./components/authentication/SignUpPage";
import NavBar from "./components/navigations/Navbar";
import Home from "./components/Home";
import Calendar from "./components/calendar/calendar";
import KanbanPage from "./components/kanbanBoard/kanbanPage";
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",
distance: 150,
enable: true,
opacity: 0.1,
opacity: 0.5,
width: 1,
},
move: {

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

@ -133,7 +133,7 @@ export default function SignUp() {
color: "#228B22",
distance: 150,
enable: true,
opacity: 0.5,
opacity: 1,
width: 1,
},
move: {
@ -154,7 +154,7 @@ export default function SignUp() {
value: 50,
},
opacity: {
value: 0.5,
value: 0.6,
},
shape: {
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,
Text,
Title,
DonutChart,
} from "@tremor/react";
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() {
return (
<main className="p-12">
<Title>Dashboard</Title>
<Text>All of your progress will be shown right here.</Text>
<div className="flex flex-col p-12">
<div>
<Title>Dashboard</Title>
<Text>All of your progress will be shown right here.</Text>
</div>
<TabGroup className="mt-6">
<TabList>
<Tab>Overview</Tab>
<Tab>Detail</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<KpiCard />
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
<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>
</main>
<div>
<TabGroup className="mt-6">
<TabList>
<Tab>Overview</Tab>
<Tab>Detail</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<Card>
<KpiCard />
<br />
<KpiCard />
</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
/>
</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>
);
}