react-launch-progress

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:

import React from 'react';
import Timeline from 'react-launch-timeline';

let dates = [
  {
    name: 'Prep',
    date: '2017-04-23',
    onComplete: () => { console.log("Prep is done!"); }
  },
  {
    name: 'Startup',
    date: '2017-04-24',
    onComplete: () => { console.log("Startup is done!"); }
  },
  {
    name: 'Launch',
    date: '2017-04-25',
    onComplete: () => { console.log("Launch is done!"); }
  },
  ...
];

const MyAwesomeReactComponent = () => (
  <Timeline data={dates} />
);

export default MyAwesomeReactComponent;

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).