{"_id":"@bpi-npm/gantt-task-react","_rev":"9-60cd370e40b204cb5695f3242989e849","name":"@bpi-npm/gantt-task-react","dist-tags":{"latest":"0.4.1"},"versions":{"0.4.0":{"name":"@bpi-npm/gantt-task-react","version":"0.4.0","keywords":["react","gantt","typescript","chart","svg","gantt-chart","gantt chart","react-gantt","task"],"author":{"name":"Beacon Platform Inc.","email":"patrick.golden@beacon.io"},"license":"MIT","_id":"@bpi-npm/gantt-task-react@0.4.0","maintainers":[{"name":"patrickgolden-bpi","email":"patrick.golden@beacon.io"},{"name":"khanhhoang-bpi","email":"khanh.hoang@beacon.io"}],"dist":{"shasum":"d6a58f345b6b395404c31b0d337845fff5298116","tarball":"https://registry.npmjs.org/@bpi-npm/gantt-task-react/-/gantt-task-react-0.4.0.tgz","fileCount":40,"integrity":"sha512-SrbO/E5+PupFTlEw1+tFVpkh+Y5x/EwODLVW+mlNSfPi5fb2hfPFajTOStGuxfx4sVK+9alKdodWB+YjDwLZ0w==","signatures":[{"sig":"MEUCIQDsqS3wTfYVv7gwk85rU2ZTC2iYALT2u3uGFccEtIZkigIgRA/BCUng3xiPStE5ZyFk+Kp/dR/G4mvhO8IxS95qrPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686235},"main":"dist/index.js","types":"./dist/index.d.ts","module":"dist/index.modern.js","source":"src/index.tsx","engines":{"node":">=10"},"gitHead":"4e8ac1654a9bbc7d6a5e8969de5b1880e96a6f9a","scripts":{"test":"run-s test:unit test:lint test:build","build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","deploy":"gh-pages -d example/build","prepare":"run-s build","predeploy":"cd example && npm install && npm run build","test:lint":"eslint --ext .tsx src/**/*","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:build":"run-s build","test:watch":"react-scripts test --env=jsdom"},"_npmUser":{"name":"patrickgolden-bpi","email":"patrick.golden@beacon.io"},"repository":{"url":"beacon-core/js/gantt-task-react","type":"git"},"_npmVersion":"10.8.2","description":"Interactive Gantt Chart for React with TypeScript.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","gh-pages":"^3.1.0","prettier":"^2.7.1","cross-env":"^7.0.3","react-dom":"^18.2.0","typescript":"^4.7.4","@types/jest":"^27.5.1","@types/node":"^15.0.1","npm-run-all":"^4.1.5","@types/react":"^18.0.5","react-scripts":"^5.0.1","microbundle-crl":"^0.13.11","@types/react-dom":"^18.0.5","postcss-normalize":"^10.0.1","postcss-preset-env":"^7.6.0","@testing-library/react":"^13.3.0","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^2.5.1","@testing-library/jest-dom":"^5.16.4","@testing-library/user-event":"^14.2.1"},"peerDependencies":{"react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gantt-task-react_0.4.0_1731463531197_0.657291205512821","host":"s3://npm-registry-packages"}},"0.4.1":{"name":"@bpi-npm/gantt-task-react","version":"0.4.1","keywords":["react","gantt","typescript","chart","svg","gantt-chart","gantt chart","react-gantt","task"],"license":"MIT","_id":"@bpi-npm/gantt-task-react@0.4.1","maintainers":[{"name":"patrickgolden-bpi","email":"patrick.golden@beacon.io"},{"name":"khanhhoang-bpi","email":"khanh.hoang@beacon.io"}],"dist":{"shasum":"2cd3bd7576681a6f20a7e7ea6b28746cabb0b2ca","tarball":"https://registry.npmjs.org/@bpi-npm/gantt-task-react/-/gantt-task-react-0.4.1.tgz","fileCount":40,"integrity":"sha512-n3DlnIahf4PsSq2atifKc3Tkt4ODSfw2TSBU7yw5j19HNFuDX37En8MsICJ6+kHewFwfy+Mkm9lHGQcwyTJ5CA==","signatures":[{"sig":"MEQCIEoDpjTStqy4jgmVLUgFSCqd9XkIGOvvdt8PXTkAZu++AiAhgZBzsuIRndpiciMTJbldASBgcTgkTilry95O1h5vbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":686208},"main":"dist/index.js","types":"./dist/index.d.ts","module":"dist/index.modern.js","source":"src/index.tsx","engines":{"node":">=10"},"gitHead":"6aa2a918e742b3f1b9c583a8468a260ca19dd07b","scripts":{"test":"run-s test:unit test:lint test:build","build":"microbundle-crl --no-compress --format modern,cjs","start":"microbundle-crl watch --no-compress --format modern,cjs","deploy":"gh-pages -d example/build","prepare":"run-s build","predeploy":"cd example && npm install && npm run build","test:lint":"eslint --ext .tsx src/**/*","test:unit":"cross-env CI=1 react-scripts test --env=jsdom","test:build":"run-s build","test:watch":"react-scripts test --env=jsdom"},"_npmUser":{"name":"patrickgolden-bpi","email":"patrick.golden@beacon.io"},"repository":{"url":"beacon-core/js/gantt-task-react","type":"git"},"_npmVersion":"10.8.2","description":"Interactive Gantt Chart for React with TypeScript.","directories":{},"_nodeVersion":"20.17.0","_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","gh-pages":"^3.1.0","prettier":"^2.7.1","cross-env":"^7.0.3","react-dom":"^18.2.0","typescript":"^4.7.4","@types/jest":"^27.5.1","@types/node":"^15.0.1","npm-run-all":"^4.1.5","@types/react":"^18.0.5","react-scripts":"^5.0.1","microbundle-crl":"^0.13.11","@types/react-dom":"^18.0.5","postcss-normalize":"^10.0.1","postcss-preset-env":"^7.6.0","@testing-library/react":"^13.3.0","postcss-flexbugs-fixes":"^5.0.2","mini-css-extract-plugin":"^2.5.1","@testing-library/jest-dom":"^5.16.4","@testing-library/user-event":"^14.2.1"},"peerDependencies":{"react":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gantt-task-react_0.4.1_1731464279008_0.8129634156660637","host":"s3://npm-registry-packages"}}},"time":{"created":"2024-11-13T02:05:31.102Z","modified":"2026-08-05T14:12:15.595Z","0.4.0":"2024-11-13T02:05:31.534Z","0.4.1":"2024-11-13T02:17:59.231Z"},"license":"MIT","keywords":["react","gantt","typescript","chart","svg","gantt-chart","gantt chart","react-gantt","task"],"repository":{"url":"beacon-core/js/gantt-task-react","type":"git"},"description":"Interactive Gantt Chart for React with TypeScript.","maintainers":[{"email":"jainamdhiren.shah@cwan.com","name":"jainamshah-bpi"},{"email":"xun.zhong@cwan.com","name":"xunzhong-bpi"},{"email":"khanh.hoang@beacon.io","name":"khanhhoang-bpi"},{"email":"patrick.golden@beacon.io","name":"patrickgolden-bpi"},{"email":"jon.witting@cwan.com","name":"jonwitting-bpi"},{"email":"neil.opena@beacon.io","name":"neilopena-bpi"},{"email":"francois.gaston@beacon.io","name":"francoisgaston-bpi"},{"email":"lionel.thirion@beacon.io","name":"lionelthirion-bpi"}],"readme":"# @bpi-npm/gantt-task-react\n\n## Interactive Gantt Chart for React with TypeScript.\n\n\n\n## [Live Demo](https://matematuk.github.io/gantt-task-react/)\n\n## Install\n\n```\nnpm install @bpi-npm/gantt-task-react\n```\n\n## How to use it\n\n```javascript\nimport { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from '@bpi-npm/gantt-task-react';\nimport \"@bpi-npm/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\n```\n\nYou may handle actions\n\n```javascript\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/Promise | Specifies the function to be executed on the taskbar on Delete button press event. |\n| onDateChange\\* | (task: Task, children: Task[]) => void/boolean/Promise/Promise | Specifies the function to be executed when drag taskbar event on timeline has finished. |\n| onProgressChange\\* | (task: Task, children: Task[]) => void/boolean/Promise/Promise | 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\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\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| 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"}