Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

gantt-task-react

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

gantt-task-react

Interactive Gantt Chart for React with TypeScript.

  • 0.1.7
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13K
decreased by-0.21%
Maintainers
1
Weekly downloads
 
Created
Source

gantt-task-react

Interactive Gantt Chart for React with TypeScript.

example

Live Demo

Install

npm install gantt-task-react

How to use it

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

let tasks: Task[] = [
    {
      start: new Date(2020, 1, 1),
      end: new Date(2020, 1, 2),
      name: 'Idea',
      id: 'Task 0',
      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}
/>

How to run example

cd ./example
npm install
npm start

Gantt Configuration

GanttProps

Parameter NameTypeDescription
tasks*TaskTasks array.
EventOptioninterfaceSpecifies gantt events.
DisplayOptioninterfaceSpecifies view type and display timeline language.
StylingOptioninterfaceSpecifies chart and global tasks styles

EventOption

Parameter NameTypeDescription
onDoubleClick(task: Task) => anySpecifies the function to be executed on the taskbar onDoubleClick event.
onTaskDelete(task: Task) => void/PromiseSpecifies the function to be executed on the taskbar on Delete button press event.
onDateChange(task: Task) => void/PromiseSpecifies the function to be executed when drag taskbar event on timeline has finished.
onProgressChange(task: Task) => void/PromiseSpecifies the function to be executed when drag taskbar progress event has finished.
timeStepnumberA time step value for onDateChange. Specify in milliseconds.

DisplayOption

Parameter NameTypeDescription
viewModeenumSpecifies the time scale. Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month.
localestringSpecifies the month name language. Able formats: ISO 639-2, Java Locale.

StylingOption

Parameter NameTypeDescription
headerHeightnumberSpecifies the header height.
ganttHeightnumberSpecifies the gantt chart height without header. Default is 0. It`s mean no height limitation.
columnWidthnumberSpecifies the time period width.
listCellWidthstringSpecifies the task list cell width. Empty string is mean "no display".
rowHeightnumberSpecifies the task row height.
barCornerRadiusnumberSpecifies the taskbar corner rounding.
barFillnumberSpecifies the taskbar occupation. Sets in percent from 0 to 100.
handleWidthnumberSpecifies width the taskbar drag event control for start and end dates.
fontFamilystringSpecifies the application font.
fontSizestringSpecifies the application font size.
barProgressColorstringSpecifies the taskbar progress fill color globally.
barProgressSelectedColorstringSpecifies the taskbar progress fill color globally on select.
barBackgroundColorstringSpecifies the taskbar background fill color globally.
barBackgroundSelectedColorstringSpecifies the taskbar background fill color globally on select.
arrowColorstringSpecifies the relationship arrow fill color.
arrowIndentnumberSpecifies the relationship arrow right indent. Sets in px
todayColorstringSpecifies the current period column fill color.
TooltipContentSpecifies the Tooltip view for selected taskbar.
TaskListHeaderSpecifies the task list Header view
TaskListTableSpecifies the task list Table view
  • TooltipContent: React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;
  • TaskListHeader: React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;
  • TaskListTable: React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; }>;

Task

Parameter NameTypeDescription
id*stringTask id.
name*stringTask display name.
start*DateTask start date.
end*DateTask end date.
progress*numberTask progress. Sets in percent from 0 to 100.
dependenciesstring[]Specifies the parent dependencies ids.
stylesobjectSpecifies the taskbar styling settings locally. Object is passed with the following attributes:
- backgroundColor: String. Specifies the taskbar background fill color locally.
- backgroundSelectedColor: String. Specifies the taskbar background fill color locally on select.
- progressColor: String. Specifies the taskbar progress fill color locally.
- progressSelectedColor: String. Specifies the taskbar progress fill color globally on select.
isDisabledboolDisables all action for current task.
fontSizestringSpecifies the taskbar font size locally.

*Required

License

MIT

Keywords

FAQs

Package last updated on 31 Aug 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc