JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart Example 1</title>
<!-- <link type="text/css" href="http://mbostock.github.io/d3/style.css" rel="stylesheet" /> -->
</head>
<body>
       <script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
</body>
</html>

CSS

html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
}
 
.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
}
 
.axis path,.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
 
.bar {
	fill: #33b5e5;
}
 
.bar-failed {
	fill: #CC0000;
}
 
.bar-running {
	fill: #CC0000;
}
 
.bar-succeeded {
	fill: #33b5e5;
}
 
.bar-killed {
	fill: #ffbb33;
}
 
#forkme_banner {
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
	z-index: 10;
	padding: 10px 50px 10px 10px;
	color: #fff;
	background:
		url('http://dk8996.github.io/Gantt-Chart/images/blacktocat.png')
		#0090ff no-repeat 95% 50%;
	font-weight: 700;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	text-decoration: none;
}

JavaScript

d3.gantt = function() {
  var FIT_TIME_DOMAIN_MODE = "fit";

  var margin = {
    top : 20,
    right : 40,
    bottom : 20,
    left : 150
  };
  var timeDomainStart = d3.timeDay.offset(new Date(),-3);
  var timeDomainEnd = d3.timeHour.offset(new Date(),+3);
  var timeDomainMode = FIT_TIME_DOMAIN_MODE;// fixed or fit
  var taskTypes = [ "D Job", "P Job", "E Job", "A Job", "N Job" ];
  var height = document.body.clientHeight - margin.top - margin.bottom-5;
  var width = document.body.clientWidth - margin.right - margin.left-5;

  var tickFormat = "%y %b";

  var rectTransform = function(d) {
    return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")";
  };

  var x,y,xAxis,yAxis;

  initAxis();

  var initTimeDomain = function() {
    if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
      if (tasks === undefined || tasks.length < 1) {
        timeDomainStart = d3.time.day.offset(new Date(), -3);
        timeDomainEnd = d3.time.hour.offset(new Date(), +3);
        return;
      }
      tasks.sort(function(a, b) {
        return a.endDate - b.endDate;
      });
      timeDomainEnd = tasks[tasks.length - 1].endDate;
      tasks.sort(function(a, b) {
        return a.startDate - b.startDate;
      });
      timeDomainStart = tasks[0].startDate;
    }
  };

 function initAxis() {
    x = d3.scaleTime().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true);

    y = d3.scaleBand().domain(taskTypes).rangeRound([ 0, height - margin.top - margin.bottom ], 0.1);

    xAxis = d3.axisBottom().scale(x).tickFormat(d3.timeFormat(tickFormat))
      .tickSize(8).tickPadding(8);

    yAxis = d3.axisLeft().scale(y).tickSize(0);
  }

  function gantt(tasks) {

    initTimeDomain();
    initAxis();

    var svg = d3.select("body")
      .append("svg")
      .attr("class", "chart")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("class", "gantt-chart")
     ...