• Stars
    star
    136
  • Rank 267,670 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.

patternfly-timeline

A time based/event series interactive visualization using d3.js. Use drag and zoom to navigate in time. View the demo here.

Based on the EventDrops timeline.

Usage

Include the src/timeline.js script in your page after d3:

<script src="path/to/d3.js"></script>
<script src="src/timeline.js"></script>

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.

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:

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 to let you customize the chart at will:

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 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() 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:

npm install

For development purpose, you can use the following command:

npm start

It serves the demo at http://localhost:8080.

When your changes are done, ensure that all tests pass with:

npm test

Finally, if everything is fine, you can rebuild the library using:

npm run build

License

Patternfly Timeline is released under the MIT License

More Repositories

1

patternfly-3

This repo contains the HTML, CSS, and JQuery for the PatternFly 3 project.
HTML
1,148
star
2

patternfly-react

A set of React components for the PatternFly project.
TypeScript
774
star
3

patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
SCSS
697
star
4

patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
TypeScript
376
star
5

angular-patternfly

This repo contains instructions and the code for a set of Angular 1 components for the PatternFly project.
JavaScript
123
star
6

patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
HTML
114
star
7

patternfly-react-seed

A PatternFly seed for React web applications
TypeScript
88
star
8

patternfly-ng

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.
TypeScript
88
star
9

patternfly-org

Home of patternfly.org
JavaScript
69
star
10

patternfly-design-kit

The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups
49
star
11

patternfly-sass

A port of Patternfly from Less to Sass
HTML
40
star
12

patternfly-demo-app

The PatternFly 3 demo app serves as a boiler for building your production app with PatternFly, Node.JS, and Webpack. Demo:
CSS
24
star
13

patternfly-react-demo-app

DEPRECATED: This project is no longer active. See https://github.com/patternfly/patternfly-react-seed for PF4 demos.
JavaScript
21
star
14

react-log-viewer

TypeScript
18
star
15

patternfly-quickstarts

Repository containing the PatternFly Quick Start extension code
TypeScript
15
star
16

patternfly-a11y

JavaScript
10
star
17

react-topology

TypeScript
10
star
18

pf-codemods

Codemods for upgrading from [email protected] to [email protected]. Uses eslint.
TypeScript
10
star
19

training-scenarios

PatternFly Developer Training
Shell
8
star
20

react-component-groups

TypeScript
8
star
21

patternfly-tutorial

This guide will help you set up PatternFly and start a PatternFly dashboard.
HTML
8
star
22

patternfly-next-react-demo-app

Demo React Application using Patternfly Next and Patternfly React
JavaScript
6
star
23

generator-pfelement

JavaScript
5
star
24

react-catalog-view

TypeScript
3
star
25

patternfly.github.io

HTML
3
star
26

patternfly-unified-design-kit

3
star
27

patternfly-code-guide

PatternFly Code Guide documents standards for developing flexible, durable, and sustainable HTML and CSS for PatternFly
HTML
3
star
28

react-console

This package provides VncConsole, SerialConsole and DesktopViewer React components
TypeScript
2
star
29

pfe-tools

TypeScript
2
star
30

angularjs-datatables

Clone of angular-datatables v0.5.6
HTML
2
star
31

angular-patternfly-demo-app

A base AngularJS application developed to create examples and samples of Angular-Patternfly components
JavaScript
2
star
32

patternfly-site

Wordpress theme for patternfly.org v1
JavaScript
2
star
33

patternfly-webcomponents

Proof of concept PatternFly design Web Components
JavaScript
2
star
34

patternfly-elements-documentation

Documentation website code for PatternFly Elements. Make documentation edits here.
CSS
2
star
35

react-data-view

TypeScript
1
star
36

patternfly-sketch-plugin

JavaScript
1
star
37

react-user-feedback

TypeScript
1
star
38

patternfly-jquery

HTML
1
star
39

patternfly-sandbox-ng

This repo contains instructions and the code for a set of Angular 6+ components for the PatternFly project. http://www.patternfly.org/patternfly-sandbox-ng
JavaScript
1
star
40

gatsby-theme-patternfly-org

Moved to https://github.com/patternfly/patternfly-org
1
star
41

design-tokens

SCSS
1
star
42

patternfly-blog

Wordpress theme for blog.patternfly.org
JavaScript
1
star