JSFiddle - React, Tailwind, and code Playground

Top 10 One Line

by Sascha

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://code.highcharts.com/css/highcharts.css" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="button-bar">
  <input type="button" id="button-default" value="Default" />
  <input type="button" id="button-three" value="Three lines" />
  <input type="button" id="button-expanded" value="Expanded info" />
</div>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

CSS

.label-header {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: normal;
}

.label-text {
  font-family: Verdana, sans-serif;
  font-weight: normal !important;
}

JavaScript

var json = '{"resultElement0":{"title":"Aseptic zone drying zone track 1 open","percentage":"49.7559708083333","meanfrequency":"6","machine":"L8_COMBISMILE","category":"Organizational","meanduration":"1:59:24","code":"1234","responsible":"Self"},"resultElement1":{"title":"Agitator: Frequency converter fault","percentage":"0.201861111111111","meanfrequency":"6","machine":"L8_COMBISMILE","category":"Technical","meanduration":"0:0:29","code":"4711","responsible":"Self"},"resultElement2":{"title":"Pocket Chain drive OFF through process","percentage":"0.0497013888888889","meanfrequency":"12","machine":"L8_COMBISMILE","category":"Technical","meanduration":"0:0:7","code":"0815","responsible":"Self"},"resultElement3":{"title":"UHT not ready","percentage":"0.0254013888888889","meanfrequency":"4","machine":"L8_COMBISMILE","category":"Technical","meanduration":"0:0:3","code":"4321","responsible":"Upstream"}}';

var data;

$.ajax('/echo/json', {
  type: 'POST',
  data: {
    'json': json
  },
  success: function(response) {
    data = response;
  }
});

var ColorDefinition = {
  technical: 'orange',
  organizational: 'blue',
  waiting: 'green',
  emptyCategory: '#999'
};


var showReport = function(type) {

  var enableTooltip = false;

  barData = [];
  var eventLabel = '';
  if (typeof(data) !== "undefined") {
    for (var i in data) {
      var catColor = ColorDefinition.emptyCategory;

      switch (data[i].category.toLowerCase()) {
        case 'technical':
          catColor = ColorDefinition.technical;
          break;
        case 'organizational':
          catColor = ColorDefinition.organizational;
          break;
        case 'waiting':
          catColor = ColorDefinition.waiting;
          break;
      }

      var dataLabel = '';
      var toolTip = '';
      var axisLabel = '';

      var percentage = Math.round(Number(data[i].percentage) * 100) / 100;

      switch (type) {
        case 'three-lines':
          axisLabel = data[i].title + '<br />' +
        ...