npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

geely-gantt-task-react

v0.4.0

Published

Interactive Gantt Chart for React with TypeScript.

Downloads

12

Readme

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',
      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}
/>

How to run example

cd ./example
npm install
npm start

Gantt Configuration

GanttProps

| Parameter Name | Type | Description | | :------------------------------ | :------------ | :------------------------------------------------- | | tasks* | Task | Tasks array. | | EventOption | interface | Specifies gantt events. | | DisplayOption | interface | Specifies view type and display timeline language. | | StylingOption | interface | Specifies chart and global tasks styles |

EventOption

| Parameter Name | Type | Description | | :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- | | onSelect | (task: Task, isSelected: boolean) => void | Specifies the function to be executed on the taskbar select or unselect event. | | onDoubleClick | (task: Task) => void | Specifies the function to be executed on the taskbar onDoubleClick event. | | onDelete* | (task: Task) => void/boolean/Promise/Promise | Specifies the function to be executed on the taskbar on Delete button press event. | | onDateChange* | (task: Task, children: Task[]) => void/boolean/Promise/Promise | Specifies the function to be executed when drag taskbar event on timeline has finished. | | onProgressChange* | (task: Task, children: Task[]) => void/boolean/Promise/Promise | Specifies the function to be executed when drag taskbar progress event has finished. | | onExpanderClick* | onExpanderClick: (task: Task) => void; | Specifies the function to be executed on the table expander click | | timeStep | number | A time step value for onDateChange. Specify in milliseconds. |

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

DisplayOption

| Parameter Name | Type | Description | | :------------- | :------ | :---------------------------------------------------------------------------------------------------- | | viewMode | enum | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. | | viewDate | date | Specifies display date and time for display. | | locale | string | Specifies the month name language. Able formats: ISO 639-2, Java Locale. | | rtl | boolean | Sets rtl mode. |

StylingOption

| Parameter Name | Type | Description | | :------------------------- | :----- | :--------------------------------------------------------------------------------------------- | | headerHeight | number | Specifies the header height. | | ganttHeight | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. | | columnWidth | number | Specifies the time period width. | | listCellWidth | string | Specifies the task list cell width. Empty string is mean "no display". | | rowHeight | number | Specifies the task row height. | | barCornerRadius | number | Specifies the taskbar corner rounding. | | barFill | number | Specifies the taskbar occupation. Sets in percent from 0 to 100. | | handleWidth | number | Specifies width the taskbar drag event control for start and end dates. | | fontFamily | string | Specifies the application font. | | fontSize | string | Specifies the application font size. | | barProgressColor | string | Specifies the taskbar progress fill color globally. | | barProgressSelectedColor | string | Specifies the taskbar progress fill color globally on select. | | barBackgroundColor | string | Specifies the taskbar background fill color globally. | | barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select. | | arrowColor | string | Specifies the relationship arrow fill color. | | arrowIndent | number | Specifies the relationship arrow right indent. Sets in px | | todayColor | string | Specifies the current period column fill color. | | TooltipContent | | Specifies the Tooltip view for selected taskbar. | | TaskListHeader | | Specifies the task list Header view | | TaskListTable | | Specifies 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[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;

Task

| Parameter Name | Type | Description | | :------------- | :------- | :---------------------------------------------------------------------------------------------------- | | id* | string | Task id. | | name* | string | Task display name. | | type* | string | Task display type: task, milestone, project | | start* | Date | Task start date. | | end* | Date | Task end date. | | progress* | number | Task progress. Sets in percent from 0 to 100. | | dependencies | string[] | Specifies the parent dependencies ids. | | styles | object | Specifies 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. | | isDisabled | bool | Disables all action for current task. | | fontSize | string | Specifies the taskbar font size locally. | | project | string | Task project name | | hideChildren | bool | Hide children items. Parameter works with project type only |

*Required

License

MIT