{"analyzedAt":"2022-07-11T11:46:50.113Z","collected":{"metadata":{"name":"@parapet3/j-react-gantt-timeline","scope":"parapet3","version":"0.4.3","description":"[](http://opensource.org/licenses/MIT)","keywords":["react","timeline","gantt","virtual","virtualize","planning","scheduler","calendar","project management"],"date":"2020-01-29T03:42:48.505Z","author":{"name":"Guillermo Quiros"},"publisher":{"username":"parapet3","email":"parapet@gmail.com"},"maintainers":[{"username":"parapet3","email":"parapet@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/parapet3/j-react-timeline-gantt.git"},"links":{"npm":"https://www.npmjs.com/package/%40parapet3%2Fj-react-gantt-timeline","homepage":"https://github.com/guiqui/react-timeline-gantt","repository":"https://github.com/parapet3/j-react-timeline-gantt","bugs":"https://github.com/parapet3/j-react-timeline-gantt/issues"},"license":"MIT","dependencies":{"moment":"^2.24.0","opencollective":"^1.0.3","opencollective-postinstall":"^2.0.1","react-sizeme":"^2.5.2"},"devDependencies":{"babel-core":"^6.26.3","babel-eslint":"^8.2.3","babel-jest":"^23.0.1","babel-loader":"^7.1.4","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-2":"^6.24.1","css-loader":"^0.28.11","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","eslint":"^4.19.1","eslint-config-airbnb":"^16.1.0","eslint-plugin-import":"^2.12.0","eslint-plugin-jsx-a11y":"^6.0.3","eslint-plugin-react":"^7.9.1","identity-obj-proxy":"^3.0.0","jest":"^23.1.0","jest-fetch-mock":"^1.6.4","jest-junit":"^5.0.0","json-loader":"^0.5.7","merge":">=1.2.1","react":"^16.3.2","react-dom":"^16.3.2","react-test-renderer":"^16.4.0","style-loader":"^0.21.0","uglifyjs-webpack-plugin":"^1.2.7","url-loader":"^1.0.1","webpack":"^4.20.2","webpack-cli":"^3.1.1","webpack-dev-server":"^3.1.11"},"peerDependencies":{"css-layout":"^1.1.1","moment":"^2.22.1","react":"^16.3.2","react-dom":"^16.3.2","react-sizeme":"^2.5.2"},"releases":[{"from":"2022-06-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-04-12T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-01-12T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":1},{"from":"2021-07-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":1},{"from":"2020-07-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":1}],"readme":"# react-gantt-timeline\n\n[](http://opensource.org/licenses/MIT)\n\nA react timeline gantt component fork.\n\n## About\n\nGo look at the original https://github.com/guiqui/react-timeline-gantt\n\n## Installation\n\n```bash\nnpm install j-react-gantt-timeline\n```\n\nThe component has the following dependencies: moment, react-sizeme\n\n## Getting started\n\nThe first thing to once the component has been install and all it dependencies is create the data that the timeline component consume.The time line has two data providers **data** and **links**.\n\n**Data** :is an array of objects that contains the task to be shown. Each one of the object that are part of the array need to have the following compulsory fields\n\n| Property | value | Descriptions |\n| ---------------- | :-----------: | :----------------------------------- |\n| id | String/Number | An unique identifier for the class |\n| start | Date | The start date of the task |\n| end | Date | The end date of the task |\n| name | String | The name of the task to be diplayed |\n| color (optional) | String | The color of the task to be diplayed |\n\nAn example of data definition:\n\n```javascript\nlet data = [\n { id: 1, start: new Date(), end: new Date() + 1, name: \"Demo Task 1\" },\n { id: 2, start: new Date(), end: new Date() + 1, name: \"Demo Task 2\" }\n];\n```\n\n**Links** :is also an array of objects that contains links between task. Each one of the object that are part of the array need to have the following compulsory fields:\n\n| Property | value | Descriptions |\n| -------- | :-----------: | :--------------------------------- |\n| id | String/Number | An unique identifier for the class |\n| start | String/Number | The id of the start task |\n| end | String/Number | The id of the end task |\n\nAn example of data definition:\n\n```javascript\nlet links = [\n { id: 1, start: 1, end: 2 },\n { id: 2, start: 1, end: 3 }\n];\n```\n\nOnce the data is define we just need to declare the component and populate it with both data providers.\n\n```javascript\n\n```\n\n## Handling Inserts,Updates and Deletes\n\nThe React-timeline-gantt was build to be use under a Flux architecture, this means that the component should not be managing the state of the application, is up the store and only the store to modify the state of the application. What our component does is to give you callbacks to know when the component is asking for a change.\n\nThe TimeLine component is responsible for two things:\n\n- Updating task:Changing name ,start and end date\n- Creating Links\n\nAdding,Deleting Task or links can be manage with logic outside the component.\nFor this reason the react-timeline-gantt component provides the following callbacks:\n\n| name | params | Descriptions |\n| ------------ | :----------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------: |\n| onCreateLink | link:Object | This callback is trigger when the component is notifying the creating of a link between two tasks |\n| onUpdateTask | task:Object,props:Object | This callback is trigger when the component is notifying the updating of a Task, Sen the task we want to changes, and the properties we want to change |\n| onSelectItem | item:Object | This callback is trigger when an item is selected this can be a task or a link |\n\n## Paging\n\nPaging is manage using the event onHorizonChange.The timeline component preload a certain date range of data, once the user start scrolling when the timeline realise that needs data for a new range, it trigger the onHorizonChange event.\nThis method then can be use to support serverside paging or client filtering.\n\n| name | params | Descriptions |\n| --------------- | :------------: | ---------------------------------------------------------------------------------------------------------: |\n| onHorizonChange | start,end:Date | This callback is trigger when the component is notifying that needs to load data for a new range of dates. |\n\n## Customisation\n\nTo customise the look and feel the react-timeline-gantt component provides a configuration object that can be pass as a property.\nHere is the structure of the config object :\n\n```javascript\n{\n\theader:{ //Targert the time header containing the information month/day of the week, day and time.\n\t\ttop:{//Tartget the month elements\n\t\t\tstyle:{backgroundColor:\"#333333\"} //The style applied to the month elements\n\t\t},\n\t\tmiddle:{//Tartget elements displaying the day of week info\n\t\t\tstyle:{backgroundColor:\"chocolate\"}, //The style applied to the day of week elements\n\t\t\tselectedStyle:{backgroundColor:\"#b13525\"}//The style applied to the day of week elements when is selected\n\t\t},\n\t\tbottom:{//Tartget elements displaying the day number or time\n\t\t\tstyle:{background:\"grey\",fontSize:9},//the style tp be applied\n\t\t\tselectedStyle:{backgroundColor:\"#b13525\",fontWeight: 'bold'}//the style tp be applied when selected\n\t\t}\n\t},\n\ttaskList:{//the right side task list\n\t\ttitle:{//The title od the task list\n\t\t\tlabel:\"Projects\",//The caption to display as title\n\t\t\tstyle:{backgroundColor: '#333333',borderBottom: 'solid 1px silver',\n\t\t\t\t color: 'white',textAlign: 'center'}//The style to be applied to the title\n\t\t},\n\t\ttask:{// The items inside the list diplaying the task\n\t\t\tstyle:{backgroundColor: '#fbf9f9'}// the style to be applied\n\t\t},\n\t\tverticalSeparator:{//the vertical seperator use to resize he width of the task list\n\t\t\tstyle:{backgroundColor: '#333333',},//the style\n\t\t\tgrip:{//the four square grip inside the vertical separator\n\t\t\t\tstyle:{backgroundColor: '#cfcfcd'}//the style to be applied\n\t\t\t}\n\t\t}\n\t},\n\tdataViewPort:{//The are where we display the task\n\t\trows:{//the row constainting a task\n\t\t\tstyle:{backgroundColor:\"#fbf9f9\",borderBottom:'solid 0.5px #cfcfcd'}\n\t\t\t},\n\t\ttask:{the task itself\n\t\t\tshowLabel:false,//If the task display the a lable\n\t\t\tstyle:{position: 'absolute',borderRadius:14,color: 'white',\n\t\t\t\t textAlign:'center',backgroundColor:'grey'},\n\t\t\t selectedStyle:{}//the style tp be applied when selected\n\t\t}\n\t},\n\tlinks:{//The link between two task\n\t\tcolor:'black',\n\t\tselectedColor:'#ff00fa'\n\t}\n}\n```\n\nOnce the object is defined we just need to pass the config object to the timeline config property.\n\n```javascript\n\n```\n\n## Other properties\n\n| Property | value | Descriptions |\n| -------- | :----: | ---------------------------------------------------------------------: |\n| mode | string | set the zoom level.The possible values are:\"month\",\"week\",\"day\",\"year\" | |"},"npm":{"downloads":[{"from":"2022-07-10T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-07-04T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-06-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":4},{"from":"2022-04-12T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":23},{"from":"2022-01-12T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":48},{"from":"2021-07-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":90}],"starsCount":0},"github":{"forkOf":"guiqui/react-timeline-gantt","starsCount":0,"forksCount":0,"subscribersCount":0,"issues":{"count":0,"openCount":0,"distribution":{"3600":0,"10800":0,"32400":0,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":0,"70858800":0,"212576400":0},"isDisabled":true},"contributors":[{"username":"danielsogl","commitsCount":1},{"username":"guiqui","commitsCount":216},{"username":"monkeywithacupcake","commitsCount":2},{"username":"maksimkurb","commitsCount":2},{"username":"parapet3","commitsCount":2},{"username":"cscatolini","commitsCount":1},{"username":"ericreis","commitsCount":2}],"commits":[{"from":"2022-07-04T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-06-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-04-12T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2022-01-12T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0},{"from":"2021-07-11T00:00:00.000Z","to":"2022-07-11T00:00:00.000Z","count":0}]},"source":{"files":{"readmeSize":7341,"testsSize":49763,"hasNpmIgnore":true},"badges":[{"urls":{"original":"https://img.shields.io/npm/l/react-list.svg?style=flat-square","shields":"https://img.shields.io/npm/l/react-list.svg","content":"https://img.shields.io/npm/l/react-list.json"},"info":{"service":"npm","type":"license","modifiers":{"type":"l"}}}],"linters":["eslint"],"outdatedDependencies":{"react-sizeme":{"required":"^2.5.2","stable":"3.0.2","latest":"3.0.2"}}}},"evaluation":{"quality":{"carefulness":0.45999999999999996,"tests":0.3,"health":0.75,"branding":0.15},"popularity":{"communityInterest":7,"downloadsCount":7.666666666666667,"downloadsAcceleration":-0.023287671232876707,"dependentsCount":0},"maintenance":{"releasesFrequency":0.28664383561643836,"commitsFrequency":0,"openIssues":0.7,"issuesDistribution":0.7}},"score":{"final":0.5344075360572337,"detail":{"quality":0.7723107697393669,"popularity":0.034804309784423434,"maintenance":0.8300937048882155}}}