React timeline component
Setup
npm install react-horizontal-timeline
The timeline depends on the following packages npm i --save govuk-colours glamor glamorous
Please check that these have been installed before use
The timeline requires data in a specific format to be passed in. See below for more info
Usage
; const data = name: "Wake up" dataType: "user-data" date: "2012-09-28T07:00:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity A" startTime: "2012-09-28T06:50:00" endTime: "2012-09-28T11:45:00" name: "Breakfast" dataType: "user-data" date: "2012-09-28T07:30:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity A" startTime: "2012-09-28T06:50:00" endTime: "2012-09-28T11:45:00" name: "Leave kids at school" dataType: "user-data" date: "2012-09-28T07:45:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity A" startTime: "2012-09-28T06:50:00" endTime: "2012-09-28T11:45:00" name: "Check email" dataType: "user-data" date: "2012-09-28T08:00:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity A" startTime: "2012-09-28T06:50:00" endTime: "2012-09-28T11:45:00" name: "Lunch" dataType: "user-data" date: "2012-09-28T11:30:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity A" startTime: "2012-09-28T06:50:00" endTime: "2012-09-28T11:45:00" name: "Send report" dataType: "user-data" date: "2012-09-28T13:15:00" isSelected: false isNotPermitted: true r: 7 cy: 50 cx: 0 activity: null name: "Pick kids" dataType: "user-data" date: "2012-09-28T17:16:00" isSelected: false isNotPermitted: true r: 7 cy: 50 cx: 0 activity: null name: "Dinner" dataType: "user-data" date: "2012-09-28T18:13:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity B" startTime: "2012-09-28T17:45:00" endTime: "2012-09-28T20:30:00" name: "Watch a movie" dataType: "user-data" date: "2012-09-28T20:16:00" isSelected: false isNotPermitted: false r: 7 cy: 50 cx: 0 activity: name: "Example Activity B" startTime: "2012-09-28T17:45:00" endTime: "2012-09-28T20:30:00" name: "Go to sleep" dataType: "user-data" date: "2012-09-28T22:00:00" isSelected: false isNotPermitted: true r: 7 cy: 50 cx: 0 activity: null name: "Example system event A" dataType: "system-data" date: "2012-09-28T14:30:20" isSelected: false isNotPermitted: true y: 42 cx: 0 name: "Example system event B" dataType: "system-data" date: "2012-09-28T17:45:00" isSelected: false isNotPermitted: true y: 42 cx: 0 name: "Example system event C" dataType: "system-data" date: "2012-09-28T19:00:15" isSelected: false isNotPermitted: false y: 42 cx: 0 name: "Example system event D" dataType: "system-data" date: "2012-09-28T22:20:00" isSelected: false isNotPermitted: false y: 42 cx: 0 const activityDataSample = undefined name: "Example Activity A" startTime: "2012-09-28T06:50:00" endTime: "2012-09-28T11:45:00" name: "Example Activity B" startTime: "2012-09-28T10:50:00" endTime: "2012-09-28T13:45:00" name: "Example Activity C" startTime: "2012-09-28T16:50:00" endTime: "2012-09-28T17:45:00" { return <div> <div className="App"> <header className="App-header"> <img src=logo className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> </div> <timeline data=data activityObject=activityDataSample0 eventTypeObject=userEvents: true systemEvents: true /> </div> ; }