JSFiddle - React, Tailwind, and code Playground

by kelvinau

HTML

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://rawgit.com/patternfly/patternfly-timeline/master/src/timeline.js"></script>
<script src="https://rawgit.com/patternfly/patternfly-timeline/master/demo/data.js"></script>
<script src="https://rawgit.com/patternfly/patternfly-timeline/master/demo/script.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/patternfly/3.9.0/css/patternfly.min.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/patternfly/3.9.0/css/patternfly-additions.min.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" media="all">
  <title>Patternfly timeline test page</title>
</head>

<body>
  <div class="container">
    <div class="row toolbar-pf">
      <div class="col-sm-12">
        <form class="toolbar-pf-actions">
          <div class="form-group">
            <select class="selectpicker" id="timeline-selectpicker" data-live-search="true" multiple></select>
          </div>
          <div class="form-group">
            <div class="dropdown pull-left">
              <button class="btn btn-default dropdown-toggle" id="range-dropdown" data-toggle="dropdown" type="button">
                <span data-bind="label">1 week</span>&nbsp;
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu zoom-filter" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1 hour</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1 day</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1 week</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1 month</a></li>
      ...

CSS

body {
  background-color: #fff;
}

#pf-timeline {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#pf-timeline .popover {
  white-space: pre;
  max-width: none;
}
.timeline-pf-zoom-area {
  cursor: pointer;
  fill: transparent;
}

.timeline-pf-y-tick {
  fill: none;
  stroke: black;
  stroke-width: 1px;
}

.timeline-pf-axes {
  fill: #fafafa;
}

.timeline-pf-x-axis {
  fill: none;
  position: absolute;
  shape-rendering: crispEdges;
  stroke: #d1d1d1;
  stroke-width: 1px;
  z-index: 50;
}

.timeline-pf-x-axis text {
  fill: black;
  font-family: 'Open Sans';
  font-size: 12px;
  stroke: none;
}

.timeline-pf-label {
  font-weight: 400;
}

text.timeline-pf-drop {
  cursor: pointer;
  font-family: 'FontAwesome';
  font-size: 10px;
  opacity: .7;
  stroke: none;
  text-rendering: auto;
}

text.timeline-pf-drop:hover {
  font-size: 21px;
  font-weight: bold;
  paint-order: stroke;
}

text.timeline-pf-event-group {
  font-size: 18px;
}

.timeline-pf-grid {
  cursor: all-scroll;
  shape-rendering: crispEdges;
  stroke: #d1d1d1;
}

.timeline-pf-graph-body .timeline-pf-line {
  height: 20px;
  padding: 10px;
}

.timeline-pf-timestamp text {
  fill: #fff;
}

.timeline-pf-timestamp rect {
  fill: #000;
  opacity: .7;
}

.timeline-pf-marker {
  pointer-events: none;
}

.timeline-pf-brush .extent {
  fill: #0088ce;
  fill-opacity: .25;
  shape-rendering: crispEdges;
  stroke: none;
}

.timeline-pf-graph-body .timeline-pf-line {
  height: 20px;
  padding: 10px;
}

.timeline-pf-zoom {
  position:absolute;
}

.timeline-pf-context .timeline-pf-bar {
  fill: #bbbbbb;
  shape-rendering: crispEdges;
}

.timeline-pf-slider {
  padding: 0;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.timeline-pf-grid-stripes rect {
  fill: #fafafa;
  shape-rendering: crispEdges;
}

 .timeline-pf-grid-stripes line {
  shape-rendering: crispEdges;
  stroke: #d1d1d1;
  stroke-width: 1px;
}

JavaScript

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"}}
    ]
  }
];

var timelineChart = d3.chart.timeline();
d3.select('#chart')
  .datum(json)
  .call(timelineChart);