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

Update dashboard layout

Browse Source
This commit is contained in:
sosokker 2023-11-20 17:25:21 +07:00
parent e75453e7c3
commit 9662d55c5a
1 changed files with 18 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,4 @@
import { import { Card, Grid, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title, DonutChart } from "@tremor/react";
Card,
Grid,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
Text,
Title,
DonutChart,
} from "@tremor/react";
import KpiCard from "./kpiCard"; import KpiCard from "./kpiCard";
import { BarChartGraph } from "./Barchart"; import { BarChartGraph } from "./Barchart";
@ -25,8 +14,7 @@ const cities = [
}, },
]; ];
const valueFormatter = (number) => const valueFormatter = number => `$ ${new Intl.NumberFormat("us").format(number).toString()}`;
`$ ${new Intl.NumberFormat("us").format(number).toString()}`;
export default function Dashboard() { export default function Dashboard() {
return ( return (
@ -50,47 +38,23 @@ export default function Dashboard() {
<br /> <br />
<KpiCard /> <KpiCard />
</Card> </Card>
{/* Placeholder to set height */} {/* Placeholder to set height */}
<div className="h-31"> <div className="h-31">
<Card className="mx-auto h-full"> <Card className="mx-auto h-full">
<Title>Sales</Title> <Title>Sales</Title>
<DonutChart <DonutChart
className="mt-6" className="mt-6"
data={cities} data={cities}
category="sales" category="sales"
index="name" index="name"
colors={[ colors={["rose", "yellow", "orange", "indigo", "blue", "emerald"]}
"rose", onValueChange={v => setValue(v)}
"yellow", showAnimation
"orange", />
"indigo", </Card>
"blue", </div>
"emerald", <BarChartGraph />
]}
onValueChange={(v) => setValue(v)}
showAnimation
/>
</Card>
</div>
<BarChartGraph />
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
</Grid> </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> </TabPanel>
</TabPanels> </TabPanels>
</TabGroup> </TabGroup>