JSFiddle - React, Tailwind, and code Playground

by yeuem1vannam

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.7.7/dayjs.min.js"></script>
<div id="timeline" style="height: 180px;"></div>

JavaScript

function sequenceNone(from, to, index) {
  var result = [];
  var label = 'No Sequence';
  var currentFrom = dayjs(from);
  var currentTo = dayjs(to);
  result.push([label, '' + index, currentFrom.toDate(), currentTo.toDate()]);
  return result;
}

function sequenceWeekly(from, to, until) {
  var result = [];
  var index = 0;
  var label = 'Weekly';
  var baseFrom = dayjs(from);
  var baseTo = dayjs(to);
  var lastFrom = dayjs(until);
  var currentFrom = baseFrom;
  var currentTo = baseTo;
  while (currentFrom < lastFrom) {
    result.push([label, '' + index, currentFrom.toDate(), currentTo.toDate()]);
    index += 1;
    currentFrom = currentFrom.add(1, 'week');
    currentTo = currentTo.add(1, 'week');
  }
  console.log(result)
  return result;
}

function sequenceMonthly(from, to, until) {
  var result = [];
  var index = 0;
  var label = 'Monthly';
  var baseFrom = dayjs(from);
  var baseTo = dayjs(to);
  var lastFrom = dayjs(until);
  var currentFrom = baseFrom;
  var currentTo = baseTo;
  while (currentFrom < lastFrom) {
    result.push([label, '' + index, currentFrom.toDate(), currentTo.toDate()]);
    index += 1;
    currentFrom = currentFrom.add(1, 'month');
    currentTo = currentTo.add(1, 'month');
  }
  console.log(result)
  return result;
}

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'Sequence'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'nth'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  var rows = [];
  rows = rows.concat(sequenceNone('2018/11/16 00:00', '2018/11/19 23:59', 0));
  rows = rows.concat(sequenceWeekly('2018/11/18 09:00',...