[V0_FILE]typescriptreact:file="gantt-timeline.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Timeline, DataSet } from "vis-timeline/standalone" import "vis-timeline/styles/vis-timeline-graph2d.css" import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut } from "lucide-react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Card, CardContent } from "@/components/ui/card" interface Item { id: number group: number content: string title: string start: Date end: Date className: string progress?: number priority?: "Low" | "High" | "Urgent" assignee?: string type?: string } interface Group { id: number content: string title?: string nestedGroups?: number[] className?: string } export default function GanttTimeline() { const timelineRef = useRef(null) const [timeline, setTimeline] = useState(null) const [showGroups, setShowGroups] = useState(true) const [showTooltip, setShowTooltip] = useState(true) const [showMajorLabel, setShowMajorLabel] = useState(true) const [showMinorLabel, setShowMinorLabel] = useState(true) const [isDraggable, setIsDraggable] = useState(true) const [allowZoom, setAllowZoom] = useState(true) useEffect(() => { if (!timelineRef.current) return // Sample data const groups = new DataSet([ { id: 1, content: "Planning", className: "group-header", nestedGroups: [2, 3] }, { id: 2, content: "Briefing Meeting", className: "sub-group" }, { id: 3, content: "Scope Definition", className: "sub-group" }, { id: 10, content: "Visual Identity", className: "group-header", nestedGroups: [11, 12, 13] }, { id: 11, content: "Logo Design", className: "sub-group" }, { id: 12, content: "Visual Identity Guide", className: "sub-group" }, { id: 13, content: "Final Presentation", className: "sub-group" }, { id: 20, content: "Website Development", className: "group-header", nestedGroups: [21, 22, 23] }, { id: 21, content: "Page Design", className: "sub-group" }, { id: 22, content: "Front-end Development", className: "sub-group" }, { id: 23, content: "Post-launch Support", className: "sub-group" }, ]) const items = new DataSet([ { id: 1, group: 2, content: `

Briefing Meeting 01/04 Low

`, title: "CLINCH Fight Wear - Low - Progress 11%", start: new Date(2025, 2, 1), end: new Date(2025, 2, 5), className: "timeline-item low-priority", progress: 11, priority: "Low", assignee: "Tulio Portela", }, { id: 2, group: 3, content: `

Scope Definition 04/03 Low

`, title: "CLINCH Fight Wear - Low - Progress 100%", start: new Date(2025, 1, 24), end: new Date(2025, 2, 4), className: "timeline-item low-priority", progress: 100, priority: "Low", assignee: "Tulio Portela", }, { id: 3, group: 11, content: `

Logo Design 02/03 Urgent

`, title: "Shop Visual Identity - Urgent", start: new Date(2025, 1, 17), end: new Date(2025, 2, 2), className: "timeline-item urgent-priority", progress: 65, priority: "Urgent", assignee: "Nani Medeiros", }, { id: 4, group: 12, content: `

Visual Identity Guide 29/03 Low

`, title: "CLINCH Fight Wear - Low - Progress 45%", start: new Date(2025, 2, 15), end: new Date(2025, 2, 29), className: "timeline-item low-priority", progress: 45, priority: "Low", assignee: "Nestor Portela", }, { id: 5, group: 13, content: `

Final Presentation 20/03 Low

`, title: "Shop Visual Identity - Low - Progress 89%", start: new Date(2025, 2, 10), end: new Date(2025, 2, 20), className: "timeline-item low-priority", progress: 89, priority: "Low", assignee: "Nani Medeiros", }, { id: 6, group: 21, content: `

Page Design 07/03 Urgent

`, title: "CLINCH Fight Wear - Urgent - Progress 100%", start: new Date(2025, 1, 25), end: new Date(2025, 2, 7), className: "timeline-item urgent-priority", progress: 100, priority: "Urgent", assignee: "Nestor Portela", }, { id: 7, group: 22, content: `

Front-end Development 13/03 High

`, title: "CLINCH Fight Wear - High - Progress 77%", start: new Date(2025, 2, 1), end: new Date(2025, 2, 13), className: "timeline-item high-priority", progress: 77, priority: "High", assignee: "Tulio Portela", }, { id: 8, group: 23, content: `

Post-launch Support 10/04 Urgent

`, title: "Shop Visual Identity - Urgent", start: new Date(2025, 3, 1), end: new Date(2025, 3, 10), className: "timeline-item urgent-priority", priority: "Urgent", assignee: "Nani Medeiros", }, ]) // Create timeline with options const options = { zoomable: allowZoom, moveable: true, selectable: true, editable: { add: false, updateTime: isDraggable, updateGroup: isDraggable, remove: false, }, orientation: "top", stack: false, margin: { item: { horizontal: 0, }, }, showCurrentTime: true, format: { minorLabels: { day: "D", }, }, showMajorLabels: showMajorLabel, showMinorLabels: showMinorLabel, tooltip: { followMouse: true, overflowMethod: "cap", }, groupTemplate: (group: any) => { if (!group || group.content === undefined) { return "" } return `

${group.content}

` }, template: (item: any) => { return item.content }, groupOrder: "id", horizontalScroll: true, verticalScroll: true, timeAxis: { scale: "day", step: 1 }, start: new Date(2025, 1, 15), end: new Date(2025, 3, 15), } // Initialize timeline const newTimeline = new Timeline(timelineRef.current, items, groups, options) setTimeline(newTimeline) // Add event listeners for group clicking and collapsing newTimeline.on("click", (properties) => { if (properties.what === "group-label") { const clickedGroupId = properties.group const groupData = groups.get(clickedGroupId) // If the group has nested groups, toggle collapse/expand if (groupData && groupData.nestedGroups && groupData.nestedGroups.length > 0) { const isCollapsed = !groupData.className?.includes("collapsed") if (isCollapsed) { // Collapse: hide nested groups groupData.nestedGroups.forEach((nestedId) => { const nestedGroup = groups.get(nestedId) if (nestedGroup) { groups.update({ ...nestedGroup, visible: false }) } }) groups.update({ ...groupData, className: groupData.className + " collapsed" }) } else { // Expand: show nested groups groupData.nestedGroups.forEach((nestedId) => { const nestedGroup = groups.get(nestedId) if (nestedGroup) { groups.update({ ...nestedGroup, visible: true }) } }) groups.update({ ...groupData, className: groupData.className?.replace(" collapsed", "") }) } } // Scroll to the first item in this group scrollToGroupItems(clickedGroupId) } }) // Function to scroll to items in a group const scrollToGroupItems = (groupId: number) => { const groupItems = items.get({ filter: (item) => item.group === groupId, }) if (groupItems.length > 0) { // Sort items by start date groupItems.sort((a, b) => a.start.getTime() - b.start.getTime()) // Get the earliest start date and latest end date const earliestStart = groupItems[0].start const latestEnd = groupItems.reduce( (latest, item) => (item.end.getTime() > latest.getTime() ? item.end : latest), groupItems[0].end, ) // Add some padding const startDate = new Date(earliestStart) startDate.setDate(startDate.getDate() - 2) const endDate = new Date(latestEnd) endDate.setDate(endDate.getDate() + 2) // Set the window to show these items newTimeline.setWindow(startDate, endDate) } } // Add current time marker const currentDate = new Date(2025, 2, 12) newTimeline.addCustomTime(currentDate, "current") newTimeline.setCustomTimeTitle("Today", "current") // Cleanup on unmount return () => { if (newTimeline) { newTimeline.destroy() } } }, [timelineRef, showGroups, showTooltip, showMajorLabel, showMinorLabel, isDraggable, allowZoom]) const handleZoomIn = () => { if (timeline) { const currentRange = timeline.getWindow() const start = new Date(currentRange.start.valueOf()) const end = new Date(currentRange.end.valueOf()) const interval = end.getTime() - start.getTime() const newInterval = interval * 0.7 const center = new Date((start.getTime() + end.getTime()) / 2) const newStart = new Date(center.getTime() - newInterval / 2) const newEnd = new Date(center.getTime() + newInterval / 2) timeline.setWindow(newStart, newEnd) } } const handleZoomOut = () => { if (timeline) { const currentRange = timeline.getWindow() const start = new Date(currentRange.start.valueOf()) const end = new Date(currentRange.end.valueOf()) const interval = end.getTime() - start.getTime() const newInterval = interval * 1.3 const center = new Date((start.getTime() + end.getTime()) / 2) const newStart = new Date(center.getTime() - newInterval / 2) const newEnd = new Date(center.getTime() + newInterval / 2) timeline.setWindow(newStart, newEnd) } } const handleToday = () => { if (timeline) { const currentDate = new Date(2025, 2, 12) const start = new Date(currentDate) start.setDate(start.getDate() - 15) const end = new Date(currentDate) end.setDate(end.getDate() + 15) timeline.setWindow(start, end) } } const handleFitAll = () => { if (timeline) { timeline.fit() } } return (

Show Major Label

Show Minor Label

Show Tooltip

Always Draggable

Allow Zoom

Show Groups

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import GanttTimeline from "@/gantt-timeline" import "@/gantt-timeline.css" export default function Home() { return (

Gantt Timeline

A customized vis-timeline component styled to match the Gantt timeline from Bubble.io plugin.

) } [V0_FILE]typescriptreact:file="gantt-timeline.css" isEdit="true" isQuickEdit="true" /* Main timeline container styles */ .gantt-timeline-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --low-color: #4caf50; --high-color: #ff9800; --urgent-color: #f44336; --progress-bg: #e0e0e0; --group-header-bg: #f5f5f5; --timeline-border: #e0e0e0; --alternate-bg: rgba(255, 235, 235, 0.3); --current-time: #e91e63; } /* Timeline container */ .timeline-container { height: 600px; overflow: hidden; border: 1px solid var(--timeline-border); border-top: none; } /* Custom styling for vis-timeline elements */ .vis-timeline { border: none; font-family: inherit; } /* Timeline background with alternating columns */ .vis-time-axis .vis-grid.vis-odd { background-color: var(--alternate-bg); } /* Timeline item styling */ .timeline-item { border-radius: 4px; border: none !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); background-color: white !important; color: #333; padding: 0 !important; overflow: visible !important; } /* Priority colors */ .low-priority { border-left: 4px solid var(--low-color) !important; } .high-priority { border-left: 4px solid var(--high-color) !important; } .urgent-priority { border-left: 4px solid var(--urgent-color) !important; } /* Item content styling */ .item-content { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; height: 100%; position: relative; } .item-title { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-date { font-size: 11px; color: #666; } .item-priority { font-size: 11px; font-weight: 500; padding: 1px 4px; border-radius: 3px; display: inline-block; } .item-priority.low { color: var(--low-color); background-color: rgba(76, 175, 80, 0.1); } .item-priority.high { color: var(--high-color); background-color: rgba(255, 152, 0, 0.1); } .item-priority.urgent { color: var(--urgent-color); background-color: rgba(244, 67, 54, 0.1); } /* Progress bar */ .progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; background-color: var(--low-color); } .high-priority .progress-bar { background-color: var(--high-color); } .urgent-priority .progress-bar { background-color: var(--urgent-color); } /* Group styling */ .vis-label.vis-group-level-0 { background-color: var(--group-header-bg); font-weight: 600; border-bottom: 1px solid var(--timeline-border); border-top: 1px solid var(--timeline-border); } .vis-labelset .vis-label { border: none; } .vis-inner { border: none !important; } .vis-label.vis-group-level-0 .custom-group { padding: 8px; font-size: 14px; } .vis-label.vis-nesting-group { cursor: pointer; } .vis-label .custom-group { padding: 8px; font-size: 13px; } /* Time axis styling */ .vis-time-axis .vis-text { color: #666; padding: 5px 0; } .vis-time-axis .vis-grid.vis-minor { border-color: #e0e0e0; } .vis-time-axis .vis-grid.vis-major { border-color: #bdbdbd; } .vis-time-axis .vis-text.vis-major { font-weight: 600; } /* Current time marker */ .vis-current-time { background-color: var(--current-time); width: 2px; } .vis-custom-time.current { background-color: var(--current-time); width: 2px; } /* Panel styling */ .vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-panel.vis-bottom { border-color: var(--timeline-border); } /* Tooltip styling */ .vis-tooltip { border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 8px 12px; font-size: 13px; border: 1px solid #e0e0e0; background-color: white; color: #333; } /* Controls and options */ .timeline-controls, .timeline-options { background-color: white; } /* Styling for collapsible groups */ .vis-label.vis-group-level-0.collapsed { background-color: #e6e6e6; } .vis-label.vis-group-level-0.collapsed .custom-group::before { content: "▶"; display: inline-block; margin-right: 5px; font-size: 10px; } .vis-label.vis-group-level-0 .custom-group::before { content: "▼"; display: inline-block; margin-right: 5px; font-size: 10px; } /* Hover effect for group labels */ .vis-label.vis-group-level-0 { cursor: pointer; transition: background-color 0.2s ease; } .vis-label.vis-group-level-0:hover { background-color: #eaeaea; } /* Animation for expanding/collapsing */ .vis-label, .vis-group { transition: opacity 0.3s ease; } /* Add this new style to remove any remaining borders */