React Launch Timeline
Inspired by SpaceX's clean display for event sequences.
Github Page
Prerequisites
You should be using NodeJS and ReactJS
Installation
React Launch Timeline is available as an npm package.
npm install react-launch-timeline [-S]
or
yarn add react-launch-timeline
Usage
Using React Launch Timeline is very straightforward. Once it is included in your project, you can use the components this way:
;; let dates = name: 'Prep' date: '2017-04-23' { console; } name: 'Startup' date: '2017-04-24' { console; } name: 'Launch' date: '2017-04-25' { console; } ...; const MyAwesomeReactComponent = <Timeline data=dates />; ;
Customization
Key | Required | Type | Description |
---|---|---|---|
data | Y | Object[] | Objects with date key and name for labels. |
height | Y | Integer/String | This will set the total height of the chart. |
width | Integer/String | This will set override the width of the chart. | |
title | String | Title of the chart. | |
labelPos | Enum | ['top', 'bottom', 'alternate-top', 'alternate-bot'] This will set the total height of the chart. | |
xData | String | Optional override date key for data objects. | |
onComplete | Function | Function to call when timeline reaches end. | |
utc | Bool | Sets parse format to UTC | |
timed | Bool | Sets progress to d3-timer | |
mainBkg | String | Background color for main chart area | |
titleBkg | String | Background color for title | |
titleStyle | Object | Style for title text (SVG Text). | |
dotStyle | Object | Style for dots (SVG Circles). | |
dotCompleteStyle | Object | Style for dots that have been passed/completed. | |
goalDotStyle | Object | Style for goal Dot. | |
goalCompleteDotStyle | Object | Style for goal Dot when reached. | |
progressStyle | Object | Style for progress bar (SVG rect) | |
style | Object | Style that is passed to Chart (div). | |
wrapStyle | Object | Style for wrapper div (div). |