React Timeline component
Live Demo
For examples of timeline, go to https://wizcheng.github.io/react-timelinejs
Getting Started
Install
yarn add -D react-timelinejs
Usage
import Timeline from 'react-timelinejs';
...
const data = [
{
start: new Date('2018-07-12T13:14:15'),
end: new Date('2018-07-12T15:14:15'),
label: 'My First Event 1'
},
{
start: new Date('2018-07-16:14:15'),
end: new Date('2018-07-12T17:14:15'),
label: 'My First Event 2'
},
{
start: new Date('2018-07-12T12:14:15'),
end: new Date('2018-07-12T19:14:15'),
label: 'My Second Event'
}
];
...
<Timeline data={data}/>
Properties
| Props | Type | Default | Description |
| -------------- | ------ | ------ | ---------------------------- |
| data | Array |
| List of time line events, minimum values start,end,label |
| lines | Array |
| List of lines, minimum values date, className |
| dataKey | string | null | key of data, passed to d3js, to optimize modification detection |
| width | number | 700 | width of whole widget |
| height | number | 400 | height of whole widget |
| trackHeight | number | 20 | Max height of each track |
| label | bool | true | Show label on the track or not |
| tooltips | bool | true | Show tooltip on mouseover |
| tooltipContent | func | TBA | function (d) => {}, to return content of tooltip |
| brush | bool | false | Show brush |
| brushRange | Array | null | brush range, \[start, end\] |
| range | Array | null | range of data to focus, \[start, end\] |
| onBrush | func | null | callback on brush change |
| onMouseover | func | null | callback on mouseover event |
| onClick | func | null | callback on mouse click event, (d) => {} |
Custom Styles
TBA
