@wamra/gantt-task-react

v0.6.4

Published

12 days ago

Interactive Gantt Chart for React with TypeScript

Downloads

706

0High
0Medium
0Low

wamra

react gantt typescript chart svg gantt-chart gantt chart react-gantt task

gantt-task-react

Interactive Gantt Chart for React with TypeScript.

A highly customizable and interactive Gantt chart component for React with TypeScript support. This repository integrates features and enhancements from the original MaTeMaTuK/gantt-task-react , the ObeoNetwork/gantt-task-react fork, and our current development, creating a comprehensive solution for managing Gantt charts.

Key Features

Performance Improvements: Optimized rendering to handle large datasets efficiently, ensuring smooth user interactions.
Enhanced Customization: Allows for more extensive task styling options to match brand-specific requirements.
TypeScript Integration: Improved type definitions for safer and more efficient development workflows.
Responsive Design: Improved mobile and tablet support for better usability across different devices.
Dependency Management: Enhanced task dependency features, allowing for more complex project planning scenarios.
Advanced Timeline Navigation: Features smooth navigation across different timeframes like months and weeks.
Localization Support: Offers localization for various languages and date formats.
Event Handling: Supports comprehensive event handling for interactive features.
QuarterYear View Mode: Supports viewing tasks in quarterly segments, providing a flexible timeline view.

Enhancement Summary

This repository combines the foundational work of MaTeMaTuK/gantt-task-react with enhancements from ObeoNetwork, including better integration with TypeScript, improved rendering performance for large datasets, and new customization options for task styling. The project is further developed in this fork, focusing on additional usability improvements and feature expansions.

Installation

Install the package using npm:

npm install @wamra/gantt-task-react

How to use it

import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@wamra/gantt-task-react';
import "@wamra/gantt-task-react/dist/style.css";

let tasks: Task[] = [
  {
    start: new Date(2020, 1, 1),
    end: new Date(2020, 1, 2),
    name: 'Idea',
    id: 'Task 0',
    type: 'task',
    progress: 45,
    isDisabled: true,
    styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },
  },
  ...
];
<Gantt tasks={tasks}/>

You may handle actions

<Gantt
  tasks={tasks}
  viewMode={view}
  onDateChange={onTaskChange}
  onTaskDelete={onTaskDelete}
  onProgressChange={onProgressChange}
  onDoubleClick={onDblClick}
  onClick={onClick}
/>

How to run example

cd ./example
npm install
npm start

Gantt Configuration

GanttProps

EventOption

Chart undoes operation if method returns false or error. Parameter children returns one-level deep records.

DisplayOption

| Parameter Name | Type | Description | | :------------------ | :------ | :---------------------------------------------------------------------------------------------------------------------------------------| | viewMode | enum | Specifies the time scale. Options: Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. | | viewDate | date | Specifies display date and time for display. | | preStepsCount | number | Specifies empty space before the first task. | | locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. | | monthCalendarFormat | string | Specifies the month display on the calendar. | | monthTaskListFormat | string | Specifies the month display on the list. | | rtl | boolean | Sets rtl mode. | | roundDate | | Allows customizing the way the date start/end are rounded. | | checkIsHoliday | | Tells if a date is a holiday. Impacts the style of the day and the way the date is adjusted to working days. | | dateMoveStep | | An object corresponding to a duration. Gives the step to adjust to the working day when moving the date allowing smooth feedback. |

StylingOption

| Parameter Name | Type | Description | |----------------------------|--------|----------------------------------------------------------------------------------------------------------| | headerHeight | number | Specifies the header height. | | columnWidth | number | Specifies the time period width. | | listCellWidth | string | Specifies the task list cell width. Empty string means "no display". | | rowHeight | number | Specifies the task row height. | | barCornerRadius | number | Specifies the taskbar corner rounding. | | barFill | number | Specifies the taskbar occupation, in percent from 0 to 100. | | handleWidth | number | Specifies the width of the taskbar drag control for start and end dates. | | fontFamily | string | Specifies the font family for the application. | | fontSize | string | Specifies the font size for the application. | | barProgressColor | string | Specifies the taskbar progress fill color globally. | | barProgressSelectedColor | string | Specifies the taskbar progress fill color globally when selected. | | barBackgroundColor | string | Specifies the taskbar background fill color globally. | | barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally when selected. | | arrowColor | string | Specifies the relationship arrow fill color. | | arrowIndent | number | Specifies the relationship arrow right indent, in px. | | todayColor | string | Specifies the current period column fill color. | | TooltipContent | React.FC<{ task: Task; fontSize: string; fontFamily: string; }>; | Specifies the Tooltip view for selected taskbar. | | TaskListHeader | React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>; | Specifies the task list Header view | | TaskListTable | React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>; | Specifies the task list Table view |

Task

*Required

License

MIT