Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/patternfly/patternfly-timeline
A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.
https://github.com/patternfly/patternfly-timeline
Last synced: 3 months ago
JSON representation
A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.
- Host: GitHub
- URL: https://github.com/patternfly/patternfly-timeline
- Owner: patternfly
- License: mit
- Created: 2016-08-22T15:48:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-29T18:55:00.000Z (about 7 years ago)
- Last Synced: 2024-07-19T16:19:53.576Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 237 KB
- Stars: 135
- Watchers: 24
- Forks: 39
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
patternfly-timeline
==========
A time based/event series interactive visualization using d3.js. Use drag and zoom to navigate in time. [View the demo here.](https://rawgit.com/patternfly/patternfly-timeline/master-dist/demo/)
Based on the [EventDrops](https://github.com/marmelab/EventDrops) timeline.
## Usage
Include the `src/timeline.js` script in your page after d3:
```html
```
In the HTML source, create a new timeline chart, bind data to a DOM element, then call the chart on the element. **Important:** In order for the zoom slider to work correctly, the placeholder element must have `position: relative` or `position: absolute` styling.
```js
var timelineChart = d3.chart.timeline();
d3.select('#chart_placeholder')
.datum(data)
.call(timelineChart);
```
The data must be an array of named time series with an optional details payload. For instance:
```js
var json = [
{
"name":"Power Activity",
"data":[
{"date": "2016-04-08T15:07:37.374Z", "details": {"event": "vmPowerOn", "object": "vmName"}},
{"date": "2016-04-08T15:07:37.374Z", "details": {"event": "vmPowerOn", "object": "vmName"}},
{"date": "2016-04-15T21:04:16.247Z", "details": {"event": "vmPowerOn", "object": "vmName"}}
]
},
{
"name":"Alarm/Error",
"data":[
{"date": "2016-04-21T01:06:19.126Z", "details": {"event": "vmPowerOn", "object": "vmName"}},
{"date": "2016-04-16T13:07:15.205Z", "details": {"event": "vmPowerOff", "object": "hostName"}},
{"date": "2016-04-07T22:35:41.145Z", "details": {"event": "vmPowerOff", "object": "hostName"}}
]
}
];
```
## Configuration
Patternfly-timeline follows the [d3.js reusable charts pattern](http://bost.ocks.org/mike/chart/) to let you customize the chart at will:
```js
var timelineChart = d3.chart.timeline()
.width(1200)
.context(false)
```
Configurable values:
- `start`: start date of the scale. Defaults to `new Date(0)`.
- `end`: end date of the scale. Defaults to `new Date()`
- `minScale`: The minimum scaling (zoom out), default to `0`.
- `maxScale`: The maximum scaling (zoom in), default to `Infinity`.
- `width`: width of the chart in pixels. Responsive by default.
- `padding`: paddings of the graph in pixels. Defaults to `{ top: 30, left: 40, bottom: 40, right: 40 }`
- `lineHeight`: The height of each row in the chart, default to `40`.
- `contextHeight`: The height of the context viewport below the char, default to `50`.
- `locale`: locale used for the X axis labels. See [d3.locale](https://github.com/mbostock/d3/wiki/Localization#locale) for the expected format. Defaults to `null` (i.e. d3 default locale).
- `axisFormat`: function receiving the d3 axis object, to customize tick number and size.
- `tickFormat`: tickFormat for the X axis. See [d3.timeFormat.multi()](https://github.com/mbostock/d3/wiki/Time-Formatting#format_multi) for expected format.
- `eventHover`: function to be called when hovering an event in the chart. Receives the DOM element hovered (uses event delegation).
- `eventZoom`: function to be called when done zooming on the chart. Receives the d3 scale at the end of the zoom.
- `eventClick`: function to be called on click event of data-point (circle). Receives the DOM element hovered (uses event delegation).
- `eventLineColor`: The color of the event line. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color.
- `eventColor`: The color of the event. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color. Defaults to null. EventLineColor will be ignored if this is used.
- `eventShape`: The shape of the event. Accepts unicode characters, including icon fonts.
- `eventPopover`: The contents of the event's popover.
- `marker`: `true` by default. Enable current time/date marker under mouse pointer.
- `context`: `true` by default. Enable context viewport beneath chart.
- `slider`: `true` by default. Enable zoom slider and buttons to right of chart.
- `eventGrouping`: `60000`(one minute) by default. The number of milliseconds within which events will be considered to have happened at the same time.
## Styling
You can style all elements of the chart in CSS. Check the source to see the available selectors.
## Extending / Development
First, install the dependencies:
```sh
npm install
```
For development purpose, you can use the following command:
``` sh
npm start
```
It serves the demo at http://localhost:8080.
When your changes are done, ensure that all tests pass with:
``` sh
npm test
```
Finally, if everything is fine, you can rebuild the library using:
``` sh
npm run build
```
## License
Patternfly Timeline is released under the MIT License