JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<div class="chart" data-browser="Chrome(51)" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="chart" data-browser="Firefox(43)" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="chart" data-browser="IE(9)" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div class="chart" data-browser="Safari(5)" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var htOpts = {
  chart: {
    type: 'spline'
  },
  title: {
    text: '일반 스크롤 vs 버추얼 스크롤'
  },
  subtitle: {
    text: 'Chrome'
  },
  xAxis: {
    type: 'logarithmic',
    labels: {
      overflow: 'justify'
    },
    visible: false
  },
  yAxis: {
    title: {
      text: 'FPS'
    },
    minorGridLineWidth: 0,
    gridLineWidth: 0,
    alternateGridColor: null,
    plotBands: [{ // Light air
      from: 0,
      to: 60,
      color: 'rgba(68, 170, 213, 0.1)',
      label: {
        text: 'Bad',
        style: {
          color: '#606060'
        }
      }
    }, { // High wind
      from: 61,
      to: 100,
      color: 'rgba(0, 0, 0, 0)',
      label: {
        text: 'Good',
        style: {
          color: '#606060'
        }
      }
    }]
  },
  tooltip: {
    valueSuffix: ' m/s'
  },
  plotOptions: {
    spline: {
      lineWidth: 4,
      states: {
        hover: {
          lineWidth: 5
        }
      },
      marker: {
        enabled: false
      },
      pointInterval: 3600000, // one hour
      pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
    }
  },
  series: [{
    name: 'virtual',
    data: []

  }, {
    name: 'normal',
    data: []
  }],
  navigation: {
    menuItemStyle: {
      fontSize: '10px'
    }
  }
};

var _getVirtualData = function() {
  var oDef = $.Deferred();
  var virtualscrollRef = new Firebase('https://ember-chat-8939.firebaseio.com/performance/virtual');
  virtualscrollRef.on("value", oDef.resolve, function(errorObject) {
    console.log("The read failed: " + errorObject.code);
  });

  return oDef.promise();
};

var _getNormalData = function() {
  var oDef = $.Deferred();
  var normalscrollRef = new Firebase('https://ember-chat-8939.firebaseio.com/performance/scroll');
  normalscrollRef.on("value", oDef.resolve, function(errorObject) {
    console.log("The read failed: " + errorObject.code);
  });

  return oDef.promise();
};

var _getTotalData = function() {
  return $.when(_getVirtualData(),...