{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "gantt-resource-view",
  "framework": "vue",
  "type": "registry:component",
  "component": "Gantt",
  "variant": "resource-view",
  "dependencies": [
    "@syncfusion/ej2-vue-gantt"
  ],
  "description": "Gantt chart with resource rows and resource-unit allocations on parent tasks.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/gantt-resource-view.md"
  },
  "files": [
    {
      "target": "src/components/gantt-resource-view/Gantt.vue",
      "content": "<template>\n    <div>\n        <div class=\"control-section\">\n            <div class=\"content-wrapper\">\n                <ejs-gantt ref='gantt' id=\"ResourceView\" :dataSource= \"data\" :viewType=\"viewType\" :taskFields= \"taskFields\"\n                    :allowSelection= \"true\" :allowResizing= \"true\" :resourceFields= \"resourceFields\" :taskType = \"taskType\"\n                    :editSettings= \"editSettings\" :toolbar= \"toolbar\" :height=\"height\" :rowHeight=\"46\" :taskbarHeight=\"25\"\n                    :treeColumnIndex= \"1\" :resources= \"resources\" :highlightWeekends= \"true\" :columns= \"columns\"\n                    :labelSettings= \"labelSettings\" :projectStartDate= \"projectStartDate\" :projectEndDate= \"projectEndDate\"\n                    :splitterSettings= \"splitterSettings\" :showOverAllocation= \"true\" v-on:toolbarClick= \"toolbarClick\">\n                </ejs-gantt>\n            </div>\n        </div>\n\n\n    </div>\n</template>\n<script>\nimport { GanttComponent, Selection, Edit, DayMarkers, Toolbar, Resize } from \"@syncfusion/ej2-vue-gantt\";\n\nconst resourceCollection = [\n    { resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team' },\n    { resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team' },\n    { resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' },\n    { resourceId: 4, resourceName: 'Fuller King', resourceGroup: 'Development Team' },\n    { resourceId: 5, resourceName: 'Davolio Fuller', resourceGroup: 'Approval Team' },\n    { resourceId: 6, resourceName: 'Van Jack', resourceGroup: 'Development Team' }\n];\n\nconst resourcesData = [\n    {\n        TaskID: 1,\n        TaskName: 'Project initiation',\n        StartDate: new Date('03/29/2025'),\n        EndDate: new Date('04/21/2025'),\n        subtasks: [\n            {\n                TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2025'), Duration: 3,\n                Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]\n            },\n            {\n                TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2025'), Duration: 4,\n                resources: [{ resourceId: 2, resourceUnit: 70 }], Progress: 30, work: 20\n            },\n            {\n                TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2025'), Duration: 4,\n                resources: [{ resourceId: 1, resourceUnit: 75 }], Predecessor: 2, Progress: 30, work: 10,\n            },\n        ]\n    },\n    {\n        TaskID: 5,\n        TaskName: 'Project estimation', StartDate: new Date('03/29/2025'), EndDate: new Date('04/21/2025'),\n        subtasks: [\n            {\n                TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2025'),\n                Duration: 3, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 70 }], Predecessor: '3FS+2', work: 30\n            },\n            {\n                TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/08/2025'), Duration: 12,\n                resources: [{ resourceId: 6, resourceUnit: 40 }], Progress: 30, work: 40\n            },\n            {\n                TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/03/2025'),\n                Duration: 10, resources: [{ resourceId: 5, resourceUnit: 75 }], Progress: 30, work: 60,\n            },\n            {\n                TaskID: 9, TaskName: 'Excavate for foundations', StartDate: new Date('04/01/2025'),\n                Duration: 4, Progress: 30, resources: [{ resourceId: 4, resourceUnit: 100 }], work: 32\n            },\n            {\n                TaskID: 10, TaskName: 'Install plumbing grounds', StartDate: new Date('04/08/2025'), Duration: 4,\n                Progress: 30, Predecessor: '9SS', resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32\n            },\n            {\n                TaskID: 11, TaskName: 'Dig footer', StartDate: new Date('04/08/2025'),\n                Duration: 3, resources: [{ resourceId: 2, resourceUnit: 100 }], work: 24\n            },\n            {\n                TaskID: 12, TaskName: 'Electrical utilities', StartDate: new Date('04/03/2025'),\n                Duration: 4, Progress: 30, resources: [{ resourceId: 3, resourceUnit: 100 }], work: 32\n            }\n        ]\n    },\n    {\n        TaskID: 13, TaskName: 'Sign contract', StartDate: new Date('04/04/2025'), Duration: 2,\n        Progress: 30,\n    }\n];\n\nexport default {\n    components: {\n        'ejs-gantt': GanttComponent\n    },\n    data: function() {\n        return{\n            data: resourcesData,\n            resources: resourceCollection,\n            viewType: 'ResourceView',\n            taskFields: {\n                id: 'TaskID',\n                name: 'TaskName',\n                startDate: 'StartDate',\n                endDate: 'EndDate',\n                duration: 'Duration',\n                progress: 'Progress',\n                dependency: 'Predecessor',\n                resourceInfo: 'resources',\n                work: 'work',\n                child: 'subtasks'\n            },\n            taskType: \"FixedWork\",\n            resourceFields: {\n                id: 'resourceId',\n                name: 'resourceName',\n                unit: 'resourceUnit',\n                group: 'resourceGroup'\n            },\n            toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',\n            { text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar' }],\n            height: '650px',\n            columns: [\n                { field: 'TaskID', visible: false },\n                { field: 'TaskName', headerText: 'Name', width: 280 },\n                { field: 'work', headerText: 'Work' },\n                { field: 'Progress' },\n                { field: 'resourceGroup', headerText: 'Group' },\n                { field: 'StartDate' },\n                { field: 'Duration' }\n            ],\n            editSettings: {\n                allowAdding: true,\n                allowEditing: true,\n                allowDeleting: true,\n                allowTaskbarEditing: true,\n                showDeleteConfirmDialog: true\n            },\n            labelSettings: {\n                rightLabel: 'resources',\n                taskLabel: 'Progress'\n            },\n            projectStartDate: new Date('03/26/2025'),\n            projectEndDate: new Date('05/18/2025'),\n            splitterSettings: {\n                columnIndex: 3\n            }\n        };\n    },\n    provide: {\n        gantt: [ Selection, DayMarkers, Toolbar, Edit, Resize]\n    },\n    methods: {\n        toolbarClick: function(args) {\n            if (args.item.id === 'showhidebar') {\n                this.$refs.gantt.ej2Instances.showOverAllocation =  this.$refs.gantt.ej2Instances.showOverAllocation ? false : true;\n            }\n        }\n    }\n}\n</script>\n"
    },
    {
      "target": "src/components/gantt-resource-view/GanttView.vue",
      "content": "<template>\n  <Gantt />\n</template>\n\n<script setup>\nimport Gantt from '../../components/Gantt.vue'\n</script>"
    }
  ]
}