JSFiddle - React, Tailwind, and code Playground

by dshilkret

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gantt Chart Example</title>
<script src="https://unpkg.com/gojs"></script>
</head>
<body>
<div id="allSampleContent" class="p-4 w-full">
  <div id="sample">
    <div style="width: 100%; display: flex; justify-content: space-between; border: solid 1px black">
      <div id="myTasksDiv" style="width: 280px; margin-right: 2px; border-right: solid 1px black"></div>
      <div id="myGanttDiv" style="flex-grow: 1; height: 400px"></div>
    </div>
    <div id="slider">
      <label>Spacing:</label>
      <input id="widthSlider" type="range" min="8" max="24" value="12" oninput="rescale()"/>
    </div>
    <p>This sample demonstrates a simple Gantt chart.</p>
    <textarea id="mySavedModel" style="width:100%;height:250px"></textarea>
  </div>
</div>

<script>
  // Custom Layout for myGantt Diagram
  function GanttLayout() {
    go.Layout.call(this);
    this.cellHeight = 20;
  }
  go.Diagram.inherit(GanttLayout, go.Layout);

  GanttLayout.prototype.doLayout = function(coll) {
    coll = this.collectParts(coll);
    var diagram = this.diagram;
    diagram.startTransaction("Gantt Layout");
    var bars = [];
    this.assignTimes(diagram, bars);
    this.arrangementOrigin = this.initialOrigin(this.arrangementOrigin);
    var y = this.arrangementOrigin.y;
    bars.forEach(function(node) {
      var tasknode = myTasks.findNodeForData(node.data);
      node.visible = tasknode.isVisible();
      node.moveTo(convertStartToX(node.data.start), y);
      if (node.visible) y += this.cellHeight;
    }, this);
    diagram.commitTransaction("Gantt Layout");
  };

  GanttLayout.prototype.assignTimes = function(diagram, bars) {
    var roots = diagram.findTreeRoots();
    roots.each(function(root) {
      this.walkTree(root, 0, bars);
    }, this);
  };

  GanttLayout.prototype.walkTree = function(node, start, bars) {
    bars.push(node);
    var...