{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "gantt", "title": "Gantt", "type": "registry:ui", "files": [ { "path": "packages/registry-angular/components/gantt/gantt.component.ts", "content": "import {\n Component,\n EventEmitter,\n Input,\n Output,\n booleanAttribute,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiButtonGroupComponent } from '@/ui/button/button-group.component'\nimport {\n UiContextMenuComponent,\n UiContextMenuTriggerComponent,\n UiContextMenuContentComponent,\n UiContextMenuItemComponent,\n UiContextMenuLabelComponent,\n UiContextMenuRadioGroupComponent,\n UiContextMenuRadioItemComponent,\n UiContextMenuSeparatorComponent,\n UiContextMenuShortcutComponent,\n UiContextMenuSubComponent,\n UiContextMenuSubContentComponent,\n UiContextMenuSubTriggerComponent,\n} from '@/ui/context-menu/context-menu.component'\nimport type { GanttTask, GanttScale, GanttTaskStatus, GanttTaskPriority } from './types'\n\n/* ------------------------------------------------------------------ */\n/* Helpers & Color Lookups */\n/* ------------------------------------------------------------------ */\n\nconst priorityColors: Record = {\n urgent: 'text-destructive',\n high: 'text-amber-500',\n medium: 'text-primary',\n low: 'text-muted-foreground/60',\n}\n\nfunction calculateDays(startDate: string, endDate: string): string {\n const diff = new Date(endDate).getTime() - new Date(startDate).getTime()\n const days = Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)))\n return `${days}d`\n}\n\nconst statusColors: Record = {\n done: 'bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 border-emerald-500/40',\n 'in-progress': 'bg-primary/20 text-primary border-primary/40',\n 'at-risk': 'bg-amber-500/20 text-amber-700 dark:text-amber-300 border-amber-500/40',\n todo: 'bg-muted/80 text-muted-foreground border-border',\n blocked: 'bg-destructive/20 text-destructive border-destructive/40',\n}\n\nconst progressColors: Record = {\n done: 'bg-emerald-500/40',\n 'in-progress': 'bg-primary/40',\n 'at-risk': 'bg-amber-500/40',\n todo: 'bg-muted-foreground/20',\n blocked: 'bg-destructive/40',\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttComponent (Root Provider) */\n/* ------------------------------------------------------------------ */\n\n/**\n * Angular port of UIPKGE Gantt. Multi-scale timeline, collapsible tree,\n * progress fill, milestones, dependency lines. 1:1 React parity.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt, [ui-gantt]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"gantt\"',\n '[attr.data-scale]': 'currentScale',\n '[class]': 'hostClass',\n },\n template: ``,\n})\nexport class UiGanttComponent {\n @Input() tasks: GanttTask[] = []\n @Input() scale?: GanttScale\n @Input() startDate?: string\n @Input() endDate?: string\n @Input() rowHeight = 40\n @Input() headerHeight = 48\n @Input() treeWidth = 280\n @Input('class') className?: string\n @Output() scaleChange = new EventEmitter()\n @Output() taskClick = new EventEmitter()\n @Output() taskChange = new EventEmitter()\n\n readonly internalScale = signal('day')\n\n get currentScale(): GanttScale {\n return this.scale ?? this.internalScale()\n }\n\n get hostClass(): string {\n return cn(\n 'block border-border bg-card text-card-foreground relative w-full overflow-hidden rounded-xl border shadow-xs',\n this.className,\n )\n }\n\n setScale(scale: GanttScale): void {\n this.internalScale.set(scale)\n this.scale = scale\n this.scaleChange.emit(scale)\n }\n\n onTaskClick(task: GanttTask): void {\n this.taskClick.emit(task)\n }\n\n get resolvedStartDate(): Date {\n if (this.startDate) return new Date(this.startDate)\n if (this.tasks.length === 0) return new Date()\n const dates = this.tasks.map((t) => new Date(t.startDate).getTime())\n const min = Math.min(...dates)\n const d = new Date(min)\n d.setDate(d.getDate() - 3)\n return d\n }\n\n get resolvedEndDate(): Date {\n if (this.endDate) return new Date(this.endDate)\n if (this.tasks.length === 0) {\n const d = new Date()\n d.setDate(d.getDate() + 30)\n return d\n }\n const dates = this.tasks.map((t) => new Date(t.endDate).getTime())\n const max = Math.max(...dates)\n const d = new Date(max)\n d.setDate(d.getDate() + 7)\n return d\n }\n\n get totalDays(): number {\n const diff = this.resolvedEndDate.getTime() - this.resolvedStartDate.getTime()\n return Math.max(1, Math.ceil(diff / (1000 * 60 * 60 * 24)))\n }\n\n get columnWidth(): number {\n switch (this.currentScale) {\n case 'day':\n return 44\n case 'week':\n return 120\n case 'month':\n return 180\n case 'year':\n return 240\n default:\n return 44\n }\n }\n\n barLeft(task: GanttTask): number {\n const range = this.range()\n if (!range) return 0\n const start = new Date(task.startDate ?? new Date()).getTime()\n return Math.max(0, Math.min(100, ((start - range.min) / (range.max - range.min)) * 100))\n }\n\n barWidth(task: GanttTask): number {\n const range = this.range()\n if (!range) return 10\n const start = new Date(task.startDate ?? new Date()).getTime()\n const end = new Date(task.endDate ?? new Date(start + 86400000)).getTime()\n return Math.max(2, Math.min(100, ((end - start) / (range.max - range.min)) * 100))\n }\n\n private range(): { min: number; max: number } | null {\n if (this.startDate && this.endDate) {\n return { min: new Date(this.startDate).getTime(), max: new Date(this.endDate).getTime() }\n }\n return { min: this.resolvedStartDate.getTime(), max: this.resolvedEndDate.getTime() }\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttHeaderComponent */\n/* ------------------------------------------------------------------ */\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt-header, [ui-gantt-header]',\n standalone: true,\n imports: [UiButtonComponent, UiButtonGroupComponent],\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"gantt-header\"',\n '[class]': 'hostClass',\n },\n template: `\n
\n \n \n \n \n \n \n {{ title }}\n
\n\n
\n \n\n @if (showScaleSwitcher && gantt) {\n \n \n Day\n \n \n Week\n \n \n Month\n \n \n Year\n \n \n }\n
\n `,\n})\nexport class UiGanttHeaderComponent {\n readonly gantt = inject(UiGanttComponent, { optional: true })\n\n @Input() title = 'Project Timeline'\n @Input({ transform: booleanAttribute }) showScaleSwitcher = true\n @Input('class') className?: string\n\n get hostClass(): string {\n return cn('border-border bg-muted/30 flex items-center justify-between border-b px-4 py-2.5', this.className)\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttTreeComponent */\n/* ------------------------------------------------------------------ */\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt-tree, [ui-gantt-tree]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"gantt-tree\"',\n '[style.width.px]': 'treeWidth',\n '[class]': 'hostClass',\n },\n template: `\n \n Deliverable\n @if (showPriority) {\n Pri\n }\n Duration\n \n\n
\n @for (task of tasks; track task.id) {\n \n
\n @if (task.parentId) {\n \n }\n\n @if (task.status) {\n \n }\n\n {{ task.name }}\n
\n\n @if (showPriority) {\n
\n @if (task.priority) {\n \n \n \n \n }\n
\n }\n\n
\n @if (task.isMilestone) {\n Milestone\n } @else {\n {{ calculateDays(task.startDate, task.endDate) }}\n }\n
\n
\n }\n \n `,\n})\nexport class UiGanttTreeComponent {\n readonly gantt = inject(UiGanttComponent)\n\n @Input({ transform: booleanAttribute }) showAssignee = true\n @Input({ transform: booleanAttribute }) showPriority = true\n @Input('class') className?: string\n @Output() taskClick = new EventEmitter()\n\n readonly priorityColors = priorityColors\n readonly calculateDays = calculateDays\n\n get treeWidth() {\n return this.gantt.treeWidth\n }\n get headerHeight() {\n return this.gantt.headerHeight\n }\n get rowHeight() {\n return this.gantt.rowHeight\n }\n get tasks() {\n return this.gantt.tasks\n }\n\n get hostClass(): string {\n return cn('border-border bg-card flex shrink-0 flex-col border-r transition-[width] select-none', this.className)\n }\n\n onRowClick(task: GanttTask): void {\n this.taskClick.emit(task)\n this.gantt.taskClick.emit(task)\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttMilestoneComponent */\n/* ------------------------------------------------------------------ */\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt-milestone, [ui-gantt-milestone]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"gantt-milestone\"',\n '[style.left.px]': 'left - size / 2',\n '[style.top.px]': 'top - size / 2',\n '[style.width.px]': 'size',\n '[style.height.px]': 'size',\n '[attr.title]': 'task ? task.name + \" (\" + task.startDate + \")\" : null',\n '[class]': 'hostClass',\n '(click)': 'onClick()',\n },\n template: ``,\n})\nexport class UiGanttMilestoneComponent {\n @Input({ required: true }) task!: GanttTask\n @Input({ required: true }) left!: number\n @Input({ required: true }) top!: number\n @Input() size = 16\n @Input('class') className?: string\n @Output() taskClick = new EventEmitter()\n\n get hostClass(): string {\n return cn(\n 'border-primary bg-primary absolute z-20 rotate-45 cursor-pointer rounded-xs border-2 shadow-sm transition-transform hover:scale-125',\n this.className,\n )\n }\n\n onClick(): void {\n this.taskClick.emit(this.task)\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttBarComponent */\n/* ------------------------------------------------------------------ */\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt-bar, [ui-gantt-bar]',\n standalone: true,\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': 'task?.isGroup ? \"gantt-group-bar\" : \"gantt-bar\"',\n '[style.left.px]': 'left',\n '[style.width.px]': 'mathMax(24, width)',\n '[style.top.px]': 'task?.isGroup ? top + 4 : top',\n '[style.height.px]': 'task?.isGroup ? height - 8 : height',\n '[class]': 'hostClass',\n '(click)': 'onClick()',\n },\n template: `\n @if (task) {\n @if (task.isGroup) {\n {{ task.name }}\n @if (task.progress != null) {\n {{ task.progress }}%\n }\n } @else {\n @if (task.progress != null && task.progress > 0) {\n \n }\n\n
\n {{ task.name }}\n @if (task.progress != null) {\n {{ task.progress }}%\n }\n
\n\n \n \n }\n }\n `,\n})\nexport class UiGanttBarComponent {\n @Input({ required: true }) task!: GanttTask\n @Input({ required: true }) left!: number\n @Input({ required: true }) width!: number\n @Input({ required: true }) top!: number\n @Input({ required: true }) height!: number\n @Input('class') className?: string\n @Output() taskClick = new EventEmitter()\n\n readonly mathMax = Math.max\n readonly progressColors = progressColors\n\n get hostClass(): string {\n if (this.task?.isGroup) {\n return cn(\n 'group/bar bg-foreground/80 text-background hover:bg-foreground absolute z-10 flex cursor-pointer items-center justify-between rounded-xs px-2 text-xs font-semibold shadow-xs select-none',\n this.className,\n )\n }\n return cn(\n 'group/bar absolute z-10 flex cursor-pointer items-center overflow-hidden rounded-md border text-xs font-medium shadow-xs transition-[box-shadow,transform] select-none hover:scale-[1.01] hover:shadow-md',\n this.task?.color ? this.task.color : statusColors[this.task?.status ?? 'in-progress'],\n this.className,\n )\n }\n\n onClick(): void {\n this.taskClick.emit(this.task)\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttTimelineComponent */\n/* ------------------------------------------------------------------ */\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt-timeline, [ui-gantt-timeline]',\n standalone: true,\n imports: [UiGanttBarComponent, UiGanttMilestoneComponent],\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"gantt-timeline\"',\n '[class]': 'hostClass',\n },\n template: `\n
\n
\n @for (col of columns; track $index) {\n \n {{ col.label }}\n {{ col.subLabel }}\n
\n }\n
\n\n
\n
\n @for (col of columns; track $index) {\n
\n }\n
\n\n @if (showTodayLine && todayPosition != null) {\n \n \n Today\n \n
\n \n }\n\n @if (dependencyPaths.length > 0) {\n \n \n \n \n \n \n @for (p of dependencyPaths; track $index) {\n \n }\n \n }\n\n @for (task of tasks; track task.id; let idx = $index) {\n @let coords = getTaskCoordinates(task, idx);\n \n @if (task.isMilestone) {\n \n } @else {\n \n }\n \n }\n \n \n `,\n})\nexport class UiGanttTimelineComponent {\n readonly gantt = inject(UiGanttComponent)\n\n @Input({ transform: booleanAttribute }) showTodayLine = true\n @Input({ transform: booleanAttribute }) showDependencies = true\n @Input('class') className?: string\n @Output() taskClick = new EventEmitter()\n\n get headerHeight() {\n return this.gantt.headerHeight\n }\n get rowHeight() {\n return this.gantt.rowHeight\n }\n get columnWidth() {\n return this.gantt.columnWidth\n }\n get tasks() {\n return this.gantt.tasks\n }\n\n get hostClass(): string {\n return cn('bg-background relative flex-1 overflow-x-auto overflow-y-hidden select-none', this.className)\n }\n\n get columns(): { date: Date; label: string; subLabel: string; isWeekend: boolean }[] {\n const list: { date: Date; label: string; subLabel: string; isWeekend: boolean }[] = []\n const start = new Date(this.gantt.resolvedStartDate)\n const totalDays = this.gantt.totalDays\n\n for (let i = 0; i < totalDays; i++) {\n const d = new Date(start)\n d.setDate(d.getDate() + i)\n const dayOfWeek = d.getDay()\n const isWeekend = dayOfWeek === 0 || dayOfWeek === 6\n\n list.push({\n date: d,\n label: d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }),\n subLabel: d.toLocaleDateString(undefined, { weekday: 'narrow' }),\n isWeekend,\n })\n }\n return list\n }\n\n get timelineWidth(): number {\n return this.columns.length * this.columnWidth\n }\n\n getTaskCoordinates(task: GanttTask, index: number): { left: number; width: number; top: number; height: number } {\n const start = new Date(this.gantt.resolvedStartDate).getTime()\n const taskStart = new Date(task.startDate).getTime()\n const taskEnd = new Date(task.endDate).getTime()\n const oneDay = 1000 * 60 * 60 * 24\n\n const startDiffDays = Math.max(0, (taskStart - start) / oneDay)\n const durationDays = Math.max(1, (taskEnd - taskStart) / oneDay)\n\n const left = startDiffDays * this.columnWidth\n const width = durationDays * this.columnWidth\n const top = index * this.rowHeight + (this.rowHeight - 28) / 2\n\n return { left, width, top, height: 28 }\n }\n\n get todayPosition(): number | null {\n const start = new Date(this.gantt.resolvedStartDate).getTime()\n const today = new Date().setHours(0, 0, 0, 0)\n const oneDay = 1000 * 60 * 60 * 24\n const diffDays = (today - start) / oneDay\n\n if (diffDays < 0 || diffDays > this.gantt.totalDays) return null\n return diffDays * this.columnWidth + this.columnWidth / 2\n }\n\n get dependencyPaths(): { d: string; fromId: string; toId: string }[] {\n if (!this.showDependencies) return []\n const taskMap = new Map()\n this.tasks.forEach((t, i) => taskMap.set(t.id, { task: t, index: i }))\n\n const paths: { d: string; fromId: string; toId: string }[] = []\n\n this.tasks.forEach((toTask, toIdx) => {\n if (!toTask.dependencies || toTask.dependencies.length === 0) return\n toTask.dependencies.forEach((fromId) => {\n const fromEntry = taskMap.get(fromId)\n if (!fromEntry) return\n\n const fromCoords = this.getTaskCoordinates(fromEntry.task, fromEntry.index)\n const toCoords = this.getTaskCoordinates(toTask, toIdx)\n\n const startX = fromEntry.task.isMilestone ? fromCoords.left : fromCoords.left + fromCoords.width\n const startY = fromCoords.top + 14\n\n const endX = toCoords.left\n const endY = toCoords.top + 14\n\n const deltaX = Math.max(16, (endX - startX) / 2)\n const d = `M ${startX} ${startY} C ${startX + deltaX} ${startY}, ${endX - deltaX} ${endY}, ${endX} ${endY}`\n paths.push({ d, fromId, toId: toTask.id })\n })\n })\n\n return paths\n }\n\n onTaskClick(task: GanttTask): void {\n this.taskClick.emit(task)\n this.gantt.taskClick.emit(task)\n }\n}\n\n/* ------------------------------------------------------------------ */\n/* UiGanttContextMenuComponent */\n/* ------------------------------------------------------------------ */\n\n/**\n * React `GanttContextMenu`: right-click menu for a task — task label header, View Details,\n * Change Status / Set Priority submenus (radio groups), Copy Task ID, Duplicate, Delete.\n * React's `asChild` trigger becomes the projected content inside the trigger element.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-gantt-context-menu, [ui-gantt-context-menu]',\n standalone: true,\n imports: [\n UiContextMenuComponent,\n UiContextMenuTriggerComponent,\n UiContextMenuContentComponent,\n UiContextMenuItemComponent,\n UiContextMenuLabelComponent,\n UiContextMenuRadioGroupComponent,\n UiContextMenuRadioItemComponent,\n UiContextMenuSeparatorComponent,\n UiContextMenuShortcutComponent,\n UiContextMenuSubComponent,\n UiContextMenuSubContentComponent,\n UiContextMenuSubTriggerComponent,\n ],\n host: {\n '[attr.data-uipkge]': '\"\"',\n '[attr.data-slot]': '\"gantt-context-menu\"',\n '[attr.class]': '\"contents\"',\n },\n template: `\n \n \n \n \n {{ task?.name }}\n {{ task?.id }}\n \n \n\n \n \n \n \n View Details\n ↵\n \n\n \n \n \n \n \n \n Change Status\n \n \n \n \n \n Completed\n \n \n \n In Progress\n \n \n \n At Risk\n \n \n \n Blocked\n \n \n \n To Do\n \n \n \n \n\n \n \n \n \n \n \n Set Priority\n \n \n \n \n \n \n \n \n Urgent\n \n \n \n \n \n \n High\n \n \n \n \n \n \n Medium\n \n \n \n \n \n \n Low\n \n \n \n \n\n \n\n \n \n \n \n \n Copy Task ID\n ⌘C\n \n\n \n \n \n \n \n \n Duplicate\n ⌘D\n \n\n \n\n \n \n \n \n \n \n \n \n Delete Deliverable\n ⌫\n \n \n \n `,\n})\nexport class UiGanttContextMenuComponent {\n @Input() task?: GanttTask\n /** React `onEdit`. */\n @Output() edit = new EventEmitter()\n /** React `onStatusChange(task, status)`. */\n @Output() statusChange = new EventEmitter<{ task: GanttTask; status: GanttTaskStatus }>()\n /** React `onPriorityChange(task, priority)`. */\n @Output() priorityChange = new EventEmitter<{ task: GanttTask; priority: GanttTaskPriority }>()\n /** React `onDuplicate`. */\n @Output() duplicate = new EventEmitter()\n /** React `onDelete` (aliased: `delete` is a reserved word in template expressions). */\n @Output('delete') deleteTask = new EventEmitter()\n\n copyTaskId(): void {\n if (this.task?.id && typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(this.task.id)\n }\n }\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/gantt/gantt.component.ts" }, { "path": "packages/registry-angular/components/gantt/types.ts", "content": "export type GanttScale = 'day' | 'week' | 'month' | 'quarter' | 'year'\n\nexport type GanttTaskStatus = 'todo' | 'in-progress' | 'done' | 'blocked' | 'at-risk'\n\nexport type GanttTaskPriority = 'low' | 'medium' | 'high' | 'urgent'\n\nexport interface GanttDependency {\n fromId: string\n toId: string\n type?: 'finish-to-start' | 'start-to-start' | 'finish-to-finish'\n}\n\nexport interface GanttAssignee {\n name: string\n avatar?: string\n initials?: string\n role?: string\n}\n\nexport interface GanttTask {\n id: string\n name: string\n startDate: string // YYYY-MM-DD\n endDate: string // YYYY-MM-DD\n progress?: number // 0 to 100\n color?: string\n status?: GanttTaskStatus\n priority?: GanttTaskPriority\n assignee?: GanttAssignee\n isMilestone?: boolean\n isGroup?: boolean\n parentId?: string | null\n isExpanded?: boolean\n dependencies?: string[] // task IDs\n children?: GanttTask[]\n}\n\nexport interface GanttColumn {\n key: string\n label: string\n width?: string\n}\n", "type": "registry:ui", "target": "~/src/app/components/ui/gantt/types.ts" }, { "path": "packages/registry-angular/components/gantt/index.ts", "content": "export {\n UiGanttComponent,\n UiGanttHeaderComponent,\n UiGanttTreeComponent,\n UiGanttTimelineComponent,\n UiGanttBarComponent,\n UiGanttMilestoneComponent,\n UiGanttContextMenuComponent,\n} from './gantt.component'\nexport type {\n GanttTask,\n GanttScale,\n GanttTaskStatus,\n GanttTaskPriority,\n GanttDependency,\n GanttAssignee,\n GanttColumn,\n} from './types'\n", "type": "registry:ui", "target": "~/src/app/components/ui/gantt/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/context-menu.json" ], "description": "Interactive Gantt chart primitive with multi-scale timeline (day/week/month/year), collapsible task tree, progress fill, milestone markers, dependency lines, and right-click GanttContextMenu.", "categories": [ "data-display" ] }