JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div class="loading-icon">
    <div class="rect rect1"></div>
    <div class="rect rect2"></div>
    <div class="rect rect3"></div>
</div>
       <div id="dashboard">

        <div class="sortholder">
            <div id="control2"></div>
           <div id="control3"></div>
           <div id="control5"></div>
          
      </div>
       <div id="control4"></div>
       


<div class="please">
 <div id="labels"></div>
 <div class="nowrap">
 <div id="fixedheader">
 <div id="movehere"></div>
 </div>   
  <div class="scroll">
  <div id="timeline"></div>
  </div>
 </div>
  </div>
  </div>

CSS

#movehere {
  height: 65px;
  position: relative;
  -webkit-overflow-scrolling: touch;
  display: block;
  top: 0px;
  margin-top: 0px;
 overflow-x: auto;
  overflow-y: hidden;
}

#fixedheader {
  position: fixed;
  z-index: 9999;
  background: white;
}


#timeline {
  -webkit-overflow-scrolling: touch;
  margin-top: 0px;
   display: block;
 overflow-x: scroll;
  overflow-y: hidden;
   padding-bottom: 10vh;
}

.sortholder {
 display: flex;
    justify-content: space-between;
}

.goog-combobox {
  z-index: 10000;
}
.goog-menu {
max-height: 50vh;
max-width: 50vh;
overflow-y: scroll;
z-index: 10000;
-webkit-overflow-scrolling: touch;
}

.google-visualization-controls-rangefilter {
  position: relative;
  display: list-item; /* Ignored by FF3 and later. */
  display: inline-block;
  right: 50%;
  top: 5px;
}

#control4 {
margin-left: 50%;
text-align: center;
}


.ggl-tooltip {
  border: 2px solid #E0E0E0;
  font-family: Arial;
  padding: 8px 8px 8px 8px;
  position: relative;
  z-index: 10001;
}

.ggl-tooltip span {
  font-weight: normal;
    z-index: 10001;
}

.ggl-tooltip:hover span {
  font-weight: normal;
   display: block;
   position: fixed;
     z-index: 10001;
}

.g {
 z-index: 0;
  font-size: 5px;
}

.last-child {
  font-size: 5px;
  font-weight: bold;
}

.google-visualization-tooltip {
  position: fixed;
  margin-top: 0px !important;
  z-index: 10001;
}

#labels {
  border: 0.7px solid #b7b7b7;
  display: inline-block;
 overflow-y: hidden;
 float: left;
 margin-right: 2px;
 margin-top:65px;

}

.label {
  border-top: 1px solid #b7b7b7;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

.label:first-child {
  border: none;
}

.label:nth-child(even) {
	background-color: #e6e6e6;
}

.label:nth-child(odd) {
	background-color: #ffffff;
}

.scroll {
  width: 100%;
 overflow-x: auto;
  overflow-y: hidden;
   display: inline-block;
   margin-top: 65px;
}

.please {
overflow-y: hidden;
margin-top:...

JavaScript

google.charts.load('45', {
    'packages': ['timeline', 'controls']
});
var clientId = '532682906159-ebepfbhk2d2qu6jlka2hlqt4r7fvd4oe.apps.googleusercontent.com';
var scopes = 'https://spreadsheets.google.com/feeds';
var skiponce = 0;

google.charts.setOnLoadCallback(drawGID);

function drawGID() {
    //refreshes data every minute 
    setTimeout(function() {
        drawGID();
    }, 600000);

    var queryString = encodeURIComponent("select A,B,C,AQ,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,AA,AB,AC,AD,AE,AF,AG,AH,AI,AJ,AK,AL,AM,AN,AO,AP,D,AR,AS,AT,AU,AV,AW");

    var query = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/1SOG7zm-0auU0-0lIXRh3HJ8SYXbqDHe1l8X2qqJ0IVk/gviz/tq?gid=1013479342&headers=1&tq=' + queryString);
       // query.setRefreshInterval(10)
    query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }

    var dataTable = response.getDataTable();
    dataTable.setColumnProperty(2, 'role', 'tooltip')
    dataTable.setColumnProperty(3, 'role', 'style')
    dataTable.setColumnProperty(4, 'date', 'Start');
    dataTable.setColumnProperty(5, 'date', 'End');
    dataTable.setColumnProperty(2, {
        type: 'string',
        role: 'tooltip',
        p: {
            html: true
        }
    });


    var dateFormat = new google.visualization.DateFormat({
        pattern: 'h:mm a'
    });

    /*for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
         var tooltip = '<div class="ggl-tooltip"><span>' +
           dataTable.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
           dataTable.getValue(i, 2) + '</span>: ' +
           dateFormat.formatValue(dataTable.getValue(i, 4)) + ' - ' +
           dateFormat.formatValue(dataTable.getValue(i, 5)) + '</div>';
          

        dataTable.setValue(i, 2, tooltip);
      ...