{"_id":"@amachains/gantt-task-react","name":"@amachains/gantt-task-react","dist-tags":{"latest":"0.4.0-rc1"},"versions":{"0.4.0-rc1":{"name":"@amachains/gantt-task-react","version":"0.4.0-rc1","description":"Fork from interactive Gantt Chart for React with TypeScript from MaTeMaTuK repository.","author":{"name":"Billy Pinheiro","email":"haquiticos@gmail.com"},"homepage":"https://github.com/Amachains//gantt-task-react","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Amachains/gantt-task-react.git"},"main":"dist/index.js","module":"dist/index.modern.js","source":"src/index.tsx","engines":{"node":">=10"},"keywords":["react","gantt","typescript","chart","svg","gantt-chart","gantt chart","react-gantt","task"],"scripts":{"build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","prepare":"run-s build","test":"run-s test:unit test:lint test:build","test:build":"run-s build","test:lint":"eslint --ext .tsx src/**/*","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"react":"^18.0.0"},"devDependencies":{"@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.3.0","@testing-library/user-event":"^14.2.1","@types/jest":"^27.5.1","@types/node":"^15.0.1","@types/react":"^18.0.5","@types/react-dom":"^18.0.5","cross-env":"^7.0.3","gh-pages":"^3.1.0","microbundle-crl":"^0.13.11","mini-css-extract-plugin":"^2.5.1","npm-run-all":"^4.1.5","postcss-flexbugs-fixes":"^5.0.2","postcss-normalize":"^10.0.1","postcss-preset-env":"^7.6.0","prettier":"^2.7.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"^5.0.1","typescript":"^4.7.4"},"_id":"@amachains/gantt-task-react@0.4.0-rc1","gitHead":"54ae7f0334a2024094b9cf312aacc270f160aa52","types":"./dist/index.d.ts","bugs":{"url":"https://github.com/Amachains/gantt-task-react/issues"},"_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-jr3XfV2qjxLLknnyV/fZAWod9scDo1TW53efjKqfJY8B3Y37rsLDhm1yRKPL5PXH/zAevZIao+5Ch6hr//eBsQ==","shasum":"3271183c599a222b839d5a575612e8ce1e25beb1","tarball":"https://registry.npmjs.org/@amachains/gantt-task-react/-/gantt-task-react-0.4.0-rc1.tgz","fileCount":41,"unpackedSize":664459,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNA6aGOV0W40dRvrbw0fRhXk9w5DmunV7eJd+o/JmVGgIgT1YSmXj9CueHwaU8WQ4vk0byccN/BTX0Ds5f+eASTtc="}]},"_npmUser":{"name":"haquiticos","email":"haquiticos@gmail.com"},"directories":{},"maintainers":[{"name":"haquiticos","email":"haquiticos@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gantt-task-react_0.4.0-rc1_1725968942847_0.14968435924757828"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-10T11:49:02.718Z","0.4.0-rc1":"2024-09-10T11:49:03.134Z","modified":"2024-09-10T11:49:03.454Z"},"maintainers":[{"name":"haquiticos","email":"haquiticos@gmail.com"}],"description":"Fork from interactive Gantt Chart for React with TypeScript from MaTeMaTuK repository.","homepage":"https://github.com/Amachains//gantt-task-react","keywords":["react","gantt","typescript","chart","svg","gantt-chart","gantt chart","react-gantt","task"],"repository":{"type":"git","url":"git+https://github.com/Amachains/gantt-task-react.git"},"author":{"name":"Billy Pinheiro","email":"haquiticos@gmail.com"},"bugs":{"url":"https://github.com/Amachains/gantt-task-react/issues"},"license":"MIT","readme":"# gantt-task-react\n\n## Interactive Gantt Chart for React with TypeScript.\n\n![example](https://user-images.githubusercontent.com/26743903/88215863-f35d5f00-cc64-11ea-81db-e829e6e9b5c8.png)\n\n## [Live Demo](https://matematuk.github.io/gantt-task-react/)\n\n## Install\n\n```\nnpm install gantt-task-react\n```\n\n## How to use it\n\n```javascript\nimport { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';\nimport \"gantt-task-react/dist/index.css\";\n\nlet tasks: Task[] = [\n    {\n      start: new Date(2020, 1, 1),\n      end: new Date(2020, 1, 2),\n      name: 'Idea',\n      id: 'Task 0',\n      type:'task',\n      progress: 45,\n      isDisabled: true,\n      styles: { progressColor: '#ffbb54', progressSelectedColor: '#ff9e0d' },\n    },\n    ...\n];\n<Gantt tasks={tasks} />\n```\n\nYou may handle actions\n\n```javascript\n<Gantt\n  tasks={tasks}\n  viewMode={view}\n  onDateChange={onTaskChange}\n  onTaskDelete={onTaskDelete}\n  onProgressChange={onProgressChange}\n  onDoubleClick={onDblClick}\n  onClick={onClick}\n/>\n```\n\n## How to run example\n\n```\ncd ./example\nnpm install\nnpm start\n```\n\n## Gantt Configuration\n\n### GanttProps\n\n| Parameter Name                  | Type          | Description                                        |\n| :------------------------------ | :------------ | :------------------------------------------------- |\n| tasks\\*                         | [Task](#Task) | Tasks array.                                       |\n| [EventOption](#EventOption)     | interface     | Specifies gantt events.                            |\n| [DisplayOption](#DisplayOption) | interface     | Specifies view type and display timeline language. |\n| [StylingOption](#StylingOption) | interface     | Specifies chart and global tasks styles            |\n\n### EventOption\n\n| Parameter Name     | Type                                                                          | Description                                                                             |\n| :----------------- | :---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------- |\n| onSelect           | (task: Task, isSelected: boolean) => void                                     | Specifies the function to be executed on the taskbar select or unselect event.          |\n| onDoubleClick      | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onDoubleClick event.               |\n| onClick            | (task: Task) => void                                                          | Specifies the function to be executed on the taskbar onClick event.                     |\n| onDelete\\*         | (task: Task) => void/boolean/Promise<void>/Promise<boolean>                   | Specifies the function to be executed on the taskbar on Delete button press event.      |\n| onDateChange\\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |\n| onProgressChange\\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |\n| onExpanderClick\\*  | onExpanderClick: (task: Task) => void;                                        | Specifies the function to be executed on the table expander click                       |\n| timeStep           | number                                                                        | A time step value for onDateChange. Specify in milliseconds.                            |\n| allowProjectDateChange           | boolean                                                                        | Allows change of project date\n\n\\* Chart undoes operation if method return false or error. Parameter children returns one level deep records.\n\n### DisplayOption\n\n| Parameter Name | Type    | Description                                                                                                 |\n| :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |\n| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |\n| viewDate       | date    | Specifies display date and time for display.                                                                |\n| preStepsCount  | number  | Specifies empty space before the fist task                                                                  |\n| locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                                    |\n| rtl            | boolean | Sets rtl mode.                                                                                              |\n| days           | string  | Specifies the translation of the day                                                                        |\n| duration       | string  | Specifies the translation of the duration                                                                   |\n| progress       | string  | Specifies the progress translation                                                                          |\n\n### StylingOption\n\n| Parameter Name             | Type   | Description                                                                                    |\n| :------------------------- | :----- | :--------------------------------------------------------------------------------------------- |\n| headerHeight               | number | Specifies the header height.                                                                   |\n| ganttHeight                | number | Specifies the gantt chart height without header. Default is 0. It`s mean no height limitation. |\n| columnWidth                | number | Specifies the time period width.                                                               |\n| listCellWidth              | string | Specifies the task list cell width. Empty string is mean \"no display\".                         |\n| rowHeight                  | number | Specifies the task row height.                                                                 |\n| barCornerRadius            | number | Specifies the taskbar corner rounding.                                                         |\n| barFill                    | number | Specifies the taskbar occupation. Sets in percent from 0 to 100.                               |\n| handleWidth                | number | Specifies width the taskbar drag event control for start and end dates.                        |\n| fontFamily                 | string | Specifies the application font.                                                                |\n| fontSize                   | string | Specifies the application font size.                                                           |\n| barProgressColor           | string | Specifies the taskbar progress fill color globally.                                            |\n| barProgressSelectedColor   | string | Specifies the taskbar progress fill color globally on select.                                  |\n| barBackgroundColor         | string | Specifies the taskbar background fill color globally.                                          |\n| barBackgroundSelectedColor | string | Specifies the taskbar background fill color globally on select.                                |\n| arrowColor                 | string | Specifies the relationship arrow fill color.                                                   |\n| arrowIndent                | number | Specifies the relationship arrow right indent. Sets in px                                      |\n| todayColor                 | string | Specifies the current period column fill color.    \n| weekendColor                 | string | Specifies the current period column fill color.                                                |\n| TooltipContent             |        | Specifies the Tooltip view for selected taskbar.                                               |\n| TaskListHeader             |        | Specifies the task list Header view                                                            |\n| TaskListTable              |        | Specifies the task list Table view                                                             |\n\n- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)\n- TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`\n- TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; }>;`\n\n### Task\n\n| Parameter Name | Type     | Description                                                                                           |\n| :------------- | :------- | :---------------------------------------------------------------------------------------------------- |\n| id\\*           | string   | Task id.                                                                                              |\n| name\\*         | string   | Task display name.                                                                                    |\n| type\\*         | string   | Task display type: **task**, **milestone**, **project**                                               |\n| start\\*        | Date     | Task start date.                                                                                      |\n| end\\*          | Date     | Task end date.                                                                                        |\n| progress\\*     | number   | Task progress. Sets in percent from 0 to 100.                                                         |\n| dependencies   | string[] | Specifies the parent dependencies ids.                                                                |\n| styles         | object   | Specifies the taskbar styling settings locally. Object is passed with the following attributes:       |\n|                |          | - **backgroundColor**: String. Specifies the taskbar background fill color locally.                   |\n|                |          | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |\n|                |          | - **progressColor**: String. Specifies the taskbar progress fill color locally.                       |\n|                |          | - **progressSelectedColor**: String. Specifies the taskbar progress fill color globally on select.    |\n| isDisabled     | bool     | Disables all action for current task.                                                                 |\n| fontSize       | string   | Specifies the taskbar font size locally.                                                              |\n| project        | string   | Task project name                                                                                     |\n| hideChildren   | bool     | Hide children items. Parameter works with project type only                                           |\n\n\\*Required\n\n## License\n\n[MIT](https://oss.ninja/mit/jaredpalmer/)\n","readmeFilename":"README.md"}