92 lines
2.3 KiB
React
92 lines
2.3 KiB
React
import { Gantt, Willow } from "@svar-ui/react-gantt";
|
|
import "@svar-ui/react-gantt/all.css";
|
|
import { useMemo } from "react";
|
|
import {Avatar, Flex, Text} from "@chakra-ui/react";
|
|
|
|
export default function TravelGanttChart() {
|
|
|
|
const upcoming_travel = useMemo(() => [
|
|
{
|
|
id: 20,
|
|
text: "Guatemala",
|
|
start: new Date(2026, 9, 21),
|
|
end: new Date(2026, 9, 29),
|
|
duration: 8,
|
|
participants: ["Chris Hight", "Angie Diefenbach"],
|
|
type: "travel",
|
|
},
|
|
{
|
|
id: 47,
|
|
text: "Venuatu",
|
|
start: new Date(2026, 10, 12),
|
|
end: new Date(2026, 10, 15),
|
|
duration: 3,
|
|
participants: ["Chris Hight"],
|
|
type: "travel",
|
|
},
|
|
{
|
|
id: 22,
|
|
text: "Costa Rica",
|
|
start: new Date(2027, 1, 1),
|
|
end: new Date(2027, 1, 10),
|
|
duration: 9,
|
|
participants: ["Chris Hight"],
|
|
type: "travel",
|
|
},
|
|
], []);
|
|
|
|
const columns = [
|
|
{ id: "start", header: "Start Date", width: 100, height: 200, align: "left" },
|
|
{ id: "duration", header: "Duration", width: 100, height: 200, align: "left" },
|
|
{ id: "participants", header: "Participants", width: 150, height: 200, align: "center", cell: AvatarCell, flexgrow: 1 },
|
|
]
|
|
|
|
return (
|
|
<div style={{ height: "100%", width: "100%" }}>
|
|
<Willow>
|
|
<Gantt tasks={upcoming_travel} cellWidth={20} columns={columns} />
|
|
</Willow>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// assume each user has access to the full list of VDAP users
|
|
|
|
const users = [
|
|
{
|
|
fullname: "Chris Hight",
|
|
firstname: "Chris",
|
|
lastname: "Hight",
|
|
avatar: undefined
|
|
},
|
|
{
|
|
fullname: "Angie Diefenbach",
|
|
firstname: "Chris",
|
|
lastname: "Hight",
|
|
avatar: undefined
|
|
},
|
|
{
|
|
fullname: "Venessa Kuchenik",
|
|
firstname: "Venessa",
|
|
lastname: "Kuchenik",
|
|
avatar: undefined
|
|
},
|
|
]
|
|
|
|
function AvatarCell({ row }) {
|
|
const travelers = row.participants.map((r) => {
|
|
return users.find((u) => u.fullname === r);
|
|
});
|
|
|
|
return (
|
|
<Flex direction="column" alignItems="left" justifyContent="space-between">
|
|
{travelers.map((traveler) => (
|
|
<Avatar.Root shape="full">
|
|
<Avatar.Image src={traveler.avatar} />
|
|
<Avatar.Fallback name={traveler.fullname} />
|
|
<Text>{traveler.fullname}</Text>
|
|
</Avatar.Root>
|
|
))}
|
|
</Flex>
|
|
)
|
|
} |