@acrool/react-gantt

Acrool

Acrool is an Task manager platform to visually design, generate terraform code and manage cloud infrastructure, collaboratively.

If you want to know how to use this Gantt chart, you can use it in Acrool

Start for free

Supports

• Supports interactive operations: move task time, zoom in and out, and change project order
• Support full screen
• Supports three-tier architecture: project/team/task
• Support holiday mode
• Support calendar lazy loading

Install

yarn add @acrool/react-gantt

Usage

import AcroolGantt, {ETaskStatus, IData} from '@acrool/react-gantt';
import '@acrool/react-gantt/dist/index.css';


export const data: IData[] = [
    {
        'id': '01h40wr7tqyas5xsj78tysj9m3',
        'text': 'RICH GAME Mobile 改版',
        'dataLevel': EDataLevel.Project,
        'children': [
            {
                'id': '01gwcrb1yry5ka7g18j6kab2en@PM',
                'text': 'PM',
                'barColor': '#fa6120',
                'dataLevel': EDataLevel.Team,
                'children': [
                    {
                        'id': '01h40wt8kwnw8rez1yy9jbyhvr@PM',
                        'text': 'demand analysis',
                        'progressRate': 0,
                        'estimateWorkTime': 16,
                        'estimateStartDate': '2024-07-10',
                        'estimateEndDate': '2024-07-20',
                        'dataLevel': EDataLevel.Task,
                        'status': ETaskStatus.ReadyStart,
                        'links': ['01h412rzv4s5p7sdw5g435dwc0@PM']

                    },
                ]
            },
        ]
    },
    {
        'id': '01h63jvjbnzr7yx9483f0p34zb',
        'text': 'Agent backend',
        'dataLevel': EDataLevel.Project,
        'milestones': [
            {date: '2024-08-01', name: 'Demand negotiation'},
            {date: '2024-08-20', name: 'Closing date'},
            {date: '2024-11-30', name: 'Payment date'}
        ],
        'children': [
            {
                'id': '01gvz5dzfj2k361jba1brhnz0p',
                'text': 'Frontend',
                'dataLevel': EDataLevel.Team,
                'barColor': '#00bde5',
                'children': [
                    {
                        'id': '01h63pkhr2ymzknjk5a0vfj235_A1',
                        'text': 'Added 2024 login page',
                        // 'assigners': [assignr.imagine],
                        'progressRate': 100,
                        'estimateWorkTime': 4,
                        'estimateStartDate': '2024-12-01',
                        'estimateEndDate': '2024-12-08',
                        'status': ETaskStatus.ReadyStart,
                        'dataLevel': EDataLevel.Task,
                    },
                    {
                        'id': '01h63pkhrwms9necc3veac6rc8_A1',
                        'text': 'New 2024 report-deposits and withdrawals',
                        'assigners': [assignr.gary],
                        'progressRate': 40,
                        'estimateWorkTime': 8,
                        'estimateStartDate': '2024-12-09',
                        'estimateEndDate': '2024-12-14',
                        'dataLevel': EDataLevel.Task,
                    },
                ],
            },
        ]
    }
];

export const CustomBanner = () => {
    return <AcroolGantt
        data={data}
        isExpandAll={isExpandAll}
        preVisibleDay={startDate}
        nextVisibleDay={endDate}
        onTaskChangeDate={handleTaskChangeDate}
        onInsertTask={handleTaskInsertDate}

        onScrollStart={handleOnScrollStart}
        onScrollEnd={handleOnScrollEnd}

        onLinkAdd={handleAddLink}
        onLinkDelete={handleDeleteLink}
        isSkipHoliday={isSkipHoliday}

        isStatusVisible={false}
        isProgressRateVisible={false}
        isWorkTimeVisible

        onTaskChangeSequence={handleOnTaskChangeSequence}
        onClickTask={id => console.log('onClickTask', id)}
        defaultPositionDay={defaultPositionDay}

        isFullScreen={isFullScreen}
        onFullScreen={() => setFullScreen(curr => !curr)}
    />
}

Log

• 2024-05-17 注意 team children 是 string[], taskIds 的意思 (為了方便 groupByTree 資料結果方便)

NPM Push

npm publish --access=public

License

MIT © imagine10255