JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="cfOverviewDiv" class="cfOverviewDiv">
  <div id="chart_div" class="chart_div"></div>
  <div id="positionDiv" class="positionDiv"></div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  function initalize() {
    setTimeout(function() {
      // wait for half second so that the elements can appear in the dom before generating the map.
      initiateCharts();
    }, 500);
  }

  function initiateCharts() {
    var _previewChartContainer = jQuery(jQuery('.chart_div')[1]);
    var _mainChartContainer = jQuery(jQuery('.chart_diva')[1]);
    var zoomLevel = 1;
    var previewChartContainer = document.querySelectorAll('.chart_div')[1];
    var mainChartContainer = document.querySelectorAll('.chart_diva')[1];
    var previewTableHeight = 122; // initial Height for previewTable set in css
    var previewTableWidth = 0;
    v // width is auto set in css
    google.charts.load('current', {
      packages: ['orgchart'],
      callback: drawChart
    });
    google.charts.setOnLoadCallback(drawChart);

    function copyChartToPreview() {

      var _chartMockup = _mainChartContainer.html();
      _previewChartContainer.html(_chartMockup);
      // set the scaling dynamically
      var totalPreviewWidth = (previewChartContainer.querySelector('table').offsetWidth);

      if (totalPreviewWidth < 20000) {

        var totalPreviewHeight = (previewChartContainer.querySelector('table').offsetHeight);
        var scalingFactor = (totalPreviewHeight / 100); //122px is the height of preview window and width is auto
        _previewChartContainer.css({
          transform: 'scale(' + 1 / scalingFactor + ')'
        });
        previewTableWidth = (_previewChartContainer.find('table').width() * (1 / scalingFactor)) + 10;
        jQuery('.cfOverviewDiv').css('width', previewTableWidth);
        jQuery('.cfOverviewDiv').css('height', previewTableHeight);

      } else {

        jQuery('.cfOverviewDiv').css('height',...