JSFiddle - React, Tailwind, and code Playground

by WhiteHat

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

JavaScript

// load google charts
google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  // get ss data
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1SaGo-yA6YPP-Um68Sgm8H3yMyfqXclDQWl5_l4cxgs4/gviz/tq?gid=0&headers=1&sheet=TimelineData');
  query.send(function (response) {
    // build data table - ss
    var dataSS = response.getDataTable();

    // sort by machine, delivery date, order #
    dataSS.sort([{
      column: getColumnIndex('Machine', dataSS)
    }, {
      column: getColumnIndex('Out for Delivery', dataSS)
    }, {
      column: getColumnIndex('Order NO', dataSS)
    }]);

    // build data table - timeline
    var dataTimeline = new google.visualization.DataTable();
    dataTimeline.addColumn('string', 'Machine');
    dataTimeline.addColumn('string', 'Order NO');
    dataTimeline.addColumn('date', 'Start');
    dataTimeline.addColumn('date', 'End');

    // get overall start date & time
    var startDate = dataSS.getColumnRange(getColumnIndex('start date', dataSS)).min;
    var startTime = dataSS.getColumnRange(getColumnIndex('start time', dataSS)).min;
    startDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
    startTime.forEach(function (timeSegment, index) {
      // determine time segment
      var milliseconds;
      switch (index) {
        // hours
        case 0:
          milliseconds = 1000 * 60 * 60 * timeSegment;
          break;

        // minutes
        case 1:
          milliseconds = 1000 * 60 * timeSegment;
          break;

        // seconds
        case 2:
          milliseconds = 1000 * timeSegment;
          break;

        // milliseconds
        case 3:
          milliseconds = timeSegment;
          break;
      }

      // add milliseconds to start date
      startDate = new Date(startDate.getTime() + milliseconds);
    });

    // process rows
    var endDate;
    var minutesProcess;
    var minutesTotal = 0;
    for (var row =...