{"_id":"@aniruddha1806/gantt-chart","_rev":"4-fc756ba0a71e711e3f53012a2efb03cd","name":"@aniruddha1806/gantt-chart","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@aniruddha1806/gantt-chart","version":"1.0.0","keywords":["react","gantt","chart","timeline","project","management"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/gantt-chart@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"2d45ccea3620bc7eeb16b617f9b2f3949c3729a1","tarball":"https://registry.npmjs.org/@aniruddha1806/gantt-chart/-/gantt-chart-1.0.0.tgz","fileCount":8,"integrity":"sha512-aX+fKDUkHsnQMLJewMlJ3tzt/H281axtdf+DnMA+Tf7K4Hatcwu3tpcMflsBafmffLohuHGi1MDIp3KVjcoOug==","signatures":[{"sig":"MEUCIEfHIC8a0x977j9H25uCsmK6r9yJmzAOG+jPzMltspMhAiEA+ngxKZc5/S2jN6K7/IjigW1T5FwW2SNd5T4NtfT76KY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":102070},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A customizable Gantt Chart component for React applications","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.3.0","typescript":"^5.2.2","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gantt-chart_1.0.0_1744146411814_0.17220015801792932","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/gantt-chart","version":"1.0.1","keywords":["react","gantt","chart","timeline","project","management"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/gantt-chart@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"cfafc4d11c4308c99c6a7489d20145d95d9863a7","tarball":"https://registry.npmjs.org/@aniruddha1806/gantt-chart/-/gantt-chart-1.0.1.tgz","fileCount":8,"integrity":"sha512-gWXHm8fhUH+qUADxMFlJdQHf+Id0Q2PV4L0RcOEn3jZ5fRcFHukUKPLtqw/dc2r876k4dgwrHLVzpKpuJqJ4IQ==","signatures":[{"sig":"MEQCICxUUafVww/6+zpLScB77cQsOX8lHF0quoD8tuCSML/0AiBTNFcKLRE5/LsijPf4PgtdDHR/pyI5sSM9hoJ8MDMwIQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":102642},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A customizable Gantt Chart component for React applications","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.3.0","typescript":"^5.2.2","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gantt-chart_1.0.1_1744709146518_0.6465504591478966","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/gantt-chart","version":"1.0.2","keywords":["react","gantt","chart","timeline","project","management"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/gantt-chart@1.0.2","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"14ae223a873474c4231eb3f7226a3370923b4737","tarball":"https://registry.npmjs.org/@aniruddha1806/gantt-chart/-/gantt-chart-1.0.2.tgz","fileCount":8,"integrity":"sha512-bzmSHdtAbjG65gvQUdZsgZe/ZBH1TxJsB2ZdIogINFojQPIjoiOCw006D5auDZd3xskqInLsW1VFS/4x0O4gEw==","signatures":[{"sig":"MEQCIEXYjfwjFNGFmY5PI3gse9g9aZcmL8IAtOc6Y/a3d3edAiA9W6qdPmydkr6fCFK+8D+EERo95WFgH56RbLVLyYIWBg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":104035},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"dev":"rollup -c -w","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"_npmVersion":"10.9.1","description":"A customizable Gantt Chart component for React applications","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.3.0","typescript":"^5.2.2","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gantt-chart_1.0.2_1744710321618_0.02209710078672944","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@aniruddha1806/gantt-chart","version":"1.0.3","description":"A customizable Gantt Chart component for React applications","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"rollup -c","dev":"rollup -c -w","test":"jest","prepublishOnly":"npm run build"},"keywords":["react","gantt","chart","timeline","project","management"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"dependencies":{"tslib":"^2.6.2"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup":"^4.3.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","typescript":"^5.2.2"},"_id":"@aniruddha1806/gantt-chart@1.0.3","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-2I53ld8wx/g6qN1pjMKq1I7deaNFJRmqB3M8mXQ8VMFMb7S5QrWuvS8+ClctJATF+FK0IHcO3ixjp3mdg7NWFg==","shasum":"fc711d1a187c27900eda802066ecbeced20483a0","tarball":"https://registry.npmjs.org/@aniruddha1806/gantt-chart/-/gantt-chart-1.0.3.tgz","fileCount":9,"unpackedSize":117093,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCdpasDB7zOEILeEt2bJYlFdgMrh8IODhmjlKYtd2E3PgIgSmPX/tDnFRne9n/T8Yw2VcnKBAQcQtJTuHDqTVUatOA="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gantt-chart_1.0.3_1749145838575_0.4664516137516186"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-08T21:06:51.734Z","modified":"2025-06-05T17:50:38.958Z","1.0.0":"2025-04-08T21:06:52.060Z","1.0.1":"2025-04-15T09:25:46.713Z","1.0.2":"2025-04-15T09:45:21.793Z","1.0.3":"2025-06-05T17:50:38.791Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","gantt","chart","timeline","project","management"],"description":"A customizable Gantt Chart component for React applications","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Gantt Chart\r\n\r\nA powerful, customizable Gantt chart component for React applications with TypeScript support. Perfect for project management, scheduling, and timeline visualization with interactive features and extensive customization options.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/gantt-chart\r\n```\r\n\r\n## Features\r\n\r\n- 📅 Interactive Gantt charts with task bars and timelines\r\n- ðŸŽŊ Milestone support with different types (normal, critical, completed)\r\n- 🔗 Task dependencies with visual connection lines\r\n- 📊 Progress tracking with visual indicators\r\n- ðŸ–ąïļ Interactive tooltips and click handlers\r\n- ðŸ“ą Responsive design with horizontal/vertical scrolling\r\n- ðŸŽĻ Extensive customization (colors, dimensions, styling)\r\n- 📍 Today marker and weekend highlighting\r\n- 🔄 Virtualization support for large datasets\r\n- 📏 Flexible date ranges and custom date formatting\r\n- 📝 TypeScript support with full type definitions\r\n- â™ŋ Accessibility-friendly structure\r\n- ðŸŠķ Zero dependencies for chart rendering\r\n\r\n## Quick Start\r\n\r\n### Basic Gantt Chart\r\n\r\n```jsx\r\nimport { GanttChart } from '@aniruddha1806/gantt-chart';\r\n\r\nfunction App() {\r\n const tasks = [\r\n {\r\n id: 1,\r\n label: 'Project Planning',\r\n startDate: new Date('2024-01-01'),\r\n endDate: new Date('2024-01-15'),\r\n color: '#3b82f6',\r\n progress: 100\r\n },\r\n {\r\n id: 2,\r\n label: 'Development Phase',\r\n startDate: new Date('2024-01-10'),\r\n endDate: new Date('2024-02-28'),\r\n color: '#10b981',\r\n progress: 60,\r\n dependencies: [1]\r\n },\r\n {\r\n id: 3,\r\n label: 'Testing & QA',\r\n startDate: new Date('2024-02-15'),\r\n endDate: new Date('2024-03-15'),\r\n color: '#f59e0b',\r\n progress: 30,\r\n dependencies: [2]\r\n }\r\n ];\r\n\r\n const milestones = [\r\n {\r\n id: 'milestone-1',\r\n label: 'Project Kickoff',\r\n date: new Date('2024-01-01'),\r\n type: 'normal'\r\n },\r\n {\r\n id: 'milestone-2',\r\n label: 'Beta Release',\r\n date: new Date('2024-02-28'),\r\n type: 'critical'\r\n }\r\n ];\r\n\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### Advanced Configuration\r\n\r\n```jsx\r\nimport { GanttChart } from '@aniruddha1806/gantt-chart';\r\n\r\nfunction AdvancedExample() {\r\n const tasks = [\r\n // ... your tasks\r\n ];\r\n\r\n const milestones = [\r\n // ... your milestones\r\n ];\r\n\r\n return (\r\n console.log('Task clicked:', task)}\r\n onMilestoneClick={(milestone) => console.log('Milestone clicked:', milestone)}\r\n />\r\n );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### Core Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `tasks` | `GanttTask[]` | `required` | Array of tasks to display |\r\n| `milestones` | `GanttMilestone[]` | `[]` | Array of milestones |\r\n| `width` | `string \\| number` | `\"100%\"` | Chart width |\r\n| `height` | `string \\| number` | `500` | Chart height |\r\n\r\n### Layout Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `headerHeight` | `number` | `40` | Height of date header |\r\n| `rowHeight` | `number` | `40` | Height of each task row |\r\n| `columnWidth` | `number` | `60` | Width of date columns |\r\n| `barCornerRadius` | `number` | `0` | Border radius of task bars |\r\n\r\n### Display Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `showToday` | `boolean` | `true` | Show today marker line |\r\n| `showGrid` | `boolean` | `true` | Show grid lines |\r\n| `showDependencies` | `boolean` | `false` | Show dependency connections |\r\n| `highlightWeekends` | `boolean` | `false` | Highlight weekend columns |\r\n| `showMilestoneLabels` | `boolean` | `false` | Show milestone labels |\r\n| `separateMilestoneRow` | `boolean` | `true` | Separate row for milestones |\r\n\r\n### Performance Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `virtualized` | `boolean` | `false` | Enable virtualization for large datasets |\r\n\r\n### Color Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `todayColor` | `string` | `\"#4338CA\"` | Today marker color |\r\n| `gridColor` | `string` | `\"#E5E7EB\"` | Grid line color |\r\n| `barFillColor` | `string` | `\"#4F46E5\"` | Default task bar color |\r\n| `barStrokeColor` | `string` | `\"#4338CA\"` | Task bar border color |\r\n| `weekendColor` | `string` | `\"#F3F4F6\"` | Weekend highlight color |\r\n| `milestoneColor` | `string` | `\"#EF4444\"` | Default milestone color |\r\n\r\n### Styling Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `className` | `string` | `undefined` | CSS class for container |\r\n| `headerClassName` | `string` | `undefined` | CSS class for header |\r\n| `rowClassName` | `string` | `undefined` | CSS class for rows |\r\n| `barClassName` | `string` | `undefined` | CSS class for task bars |\r\n| `tooltipClassName` | `string` | `undefined` | CSS class for tooltips |\r\n\r\n### Event Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `onTaskClick` | `(task: GanttTask) => void` | `undefined` | Task click handler |\r\n| `onMilestoneClick` | `(milestone: GanttMilestone) => void` | `undefined` | Milestone click handler |\r\n\r\n### Data Types\r\n\r\n```typescript\r\ntype GanttTask = {\r\n id: string | number;\r\n label: string;\r\n startDate: Date;\r\n endDate: Date;\r\n color?: string;\r\n progress?: number;\r\n dependencies?: (string | number)[];\r\n};\r\n\r\ntype GanttMilestone = {\r\n id: string | number;\r\n label: string;\r\n date: Date;\r\n color?: string;\r\n description?: string;\r\n type?: \"normal\" | \"critical\" | \"completed\";\r\n};\r\n```\r\n\r\n## Examples\r\n\r\n### Project Management Dashboard\r\n\r\nComplete project timeline with dependencies:\r\n\r\n```jsx\r\nimport { GanttChart } from '@aniruddha1806/gantt-chart';\r\n\r\nfunction ProjectDashboard() {\r\n const tasks = [\r\n {\r\n id: 'planning',\r\n label: 'Project Planning',\r\n startDate: new Date('2024-01-01'),\r\n endDate: new Date('2024-01-15'),\r\n color: '#3b82f6',\r\n progress: 100\r\n },\r\n {\r\n id: 'design',\r\n label: 'UI/UX Design',\r\n startDate: new Date('2024-01-10'),\r\n endDate: new Date('2024-02-05'),\r\n color: '#8b5cf6',\r\n progress: 85,\r\n dependencies: ['planning']\r\n },\r\n {\r\n id: 'frontend',\r\n label: 'Frontend Development',\r\n startDate: new Date('2024-01-25'),\r\n endDate: new Date('2024-03-15'),\r\n color: '#10b981',\r\n progress: 60,\r\n dependencies: ['design']\r\n },\r\n {\r\n id: 'backend',\r\n label: 'Backend Development',\r\n startDate: new Date('2024-02-01'),\r\n endDate: new Date('2024-03-20'),\r\n color: '#f59e0b',\r\n progress: 45,\r\n dependencies: ['planning']\r\n },\r\n {\r\n id: 'testing',\r\n label: 'Testing & QA',\r\n startDate: new Date('2024-03-10'),\r\n endDate: new Date('2024-04-05'),\r\n color: '#ef4444',\r\n progress: 20,\r\n dependencies: ['frontend', 'backend']\r\n },\r\n {\r\n id: 'deployment',\r\n label: 'Deployment',\r\n startDate: new Date('2024-04-01'),\r\n endDate: new Date('2024-04-10'),\r\n color: '#06b6d4',\r\n progress: 0,\r\n dependencies: ['testing']\r\n }\r\n ];\r\n\r\n const milestones = [\r\n {\r\n id: 'kickoff',\r\n label: 'Project Kickoff',\r\n date: new Date('2024-01-01'),\r\n type: 'normal',\r\n description: 'Official project start'\r\n },\r\n {\r\n id: 'design-complete',\r\n label: 'Design Complete',\r\n date: new Date('2024-02-05'),\r\n type: 'normal',\r\n description: 'All designs approved'\r\n },\r\n {\r\n id: 'beta-release',\r\n label: 'Beta Release',\r\n date: new Date('2024-03-20'),\r\n type: 'critical',\r\n description: 'Beta version ready for testing'\r\n },\r\n {\r\n id: 'launch',\r\n label: 'Product Launch',\r\n date: new Date('2024-04-10'),\r\n type: 'critical',\r\n description: 'Official product launch'\r\n }\r\n ];\r\n\r\n const handleTaskClick = (task) => {\r\n console.log('Task clicked:', task.label);\r\n // Open task details modal, etc.\r\n };\r\n\r\n const handleMilestoneClick = (milestone) => {\r\n console.log('Milestone clicked:', milestone.label);\r\n // Show milestone details, etc.\r\n };\r\n\r\n return (\r\n
\r\n

Project Timeline

\r\n

Web Application Development - Q1 2024

\r\n \r\n \r\n \r\n
\r\n
\r\n

Project Progress

\r\n

Overall: {Math.round(tasks.reduce((sum, task) => sum + (task.progress || 0), 0) / tasks.length)}%

\r\n
\r\n \r\n
\r\n

Upcoming Milestones

\r\n

{milestones.filter(m => m.date > new Date()).length} remaining

\r\n
\r\n
\r\n
\r\n );\r\n}\r\n```\r\n\r\n\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { GanttChart, GanttTask, GanttMilestone, GanttChartProps } from '@aniruddha1806/gantt-chart';\r\nimport { useState, useCallback } from 'react';\r\n\r\ninterface ProjectData {\r\n tasks: GanttTask[];\r\n milestones: GanttMilestone[];\r\n settings: {\r\n showDependencies: boolean;\r\n highlightWeekends: boolean;\r\n };\r\n}\r\n\r\ninterface TaskUpdateData {\r\n taskId: string | number;\r\n progress: number;\r\n endDate?: Date;\r\n}\r\n\r\nconst ProjectManager: React.FC = () => {\r\n const [projectData, setProjectData] = useState({\r\n tasks: [\r\n {\r\n id: 'task-1',\r\n label: 'Development',\r\n startDate: new Date('2024-01-01'),\r\n endDate: new Date('2024-02-01'),\r\n color: '#3b82f6',\r\n progress: 60,\r\n dependencies: []\r\n }\r\n ],\r\n milestones: [\r\n {\r\n id: 'milestone-1',\r\n label: 'Release',\r\n date: new Date('2024-02-01'),\r\n type: 'critical',\r\n description: 'Product release milestone'\r\n }\r\n ],\r\n settings: {\r\n showDependencies: true,\r\n highlightWeekends: true\r\n }\r\n });\r\n\r\n const handleTaskClick = useCallback((task: GanttTask): void => {\r\n console.log('Task clicked:', task);\r\n // Handle task click logic\r\n }, []);\r\n\r\n const handleMilestoneClick = useCallback((milestone: GanttMilestone): void => {\r\n console.log('Milestone clicked:', milestone);\r\n // Handle milestone click logic\r\n }, []);\r\n\r\n const updateTaskProgress = useCallback((updateData: TaskUpdateData): void => {\r\n setProjectData(prev => ({\r\n ...prev,\r\n tasks: prev.tasks.map(task => \r\n task.id === updateData.taskId \r\n ? { \r\n ...task, \r\n progress: updateData.progress,\r\n ...(updateData.endDate && { endDate: updateData.endDate })\r\n }\r\n : task\r\n )\r\n }));\r\n }, []);\r\n\r\n const ganttProps: GanttChartProps = {\r\n tasks: projectData.tasks,\r\n milestones: projectData.milestones,\r\n width: '100%',\r\n height: 500,\r\n showToday: true,\r\n showDependencies: projectData.settings.showDependencies,\r\n highlightWeekends: projectData.settings.highlightWeekends,\r\n onTaskClick: handleTaskClick,\r\n onMilestoneClick: handleMilestoneClick\r\n };\r\n\r\n return (\r\n
\r\n

Project Timeline

\r\n \r\n \r\n
\r\n

Project Statistics:

\r\n

Total Tasks: {projectData.tasks.length}

\r\n

Completed Tasks: {projectData.tasks.filter(t => t.progress === 100).length}

\r\n

Milestones: {projectData.milestones.length}

\r\n
\r\n
\r\n );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}