NEO first

by Flyout

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 600px;
  min-height: 550px;
  max-height: 1000px;
  margin: 0 auto;
}

JavaScript

function Service(name, traitements, moyenne, reference) {
  this.name = name;
  this.traitements = traitements; // Tableau plus tard (date, duree)
  this.average = moyenne;
  this.reference = reference;
  this.performance = Math.round(this.reference / this.average * 100);
};

function sortByPerf(services) {
  var temp = 0,
    sorted = false,
    length = services.length;

  while (!sorted) {
    sorted = true;
    for (var i = 0; i < length - 1; i++) {
      if (services[i].performance > services[i + 1].performance) {
        temp = services[i];
        services[i] = services[i + 1];
        services[i + 1] = temp;
        sorted = false;
      }
    }
    length--;
  }
  return services;
};

function setRandomServices() {
  var services = [],
    cpt = Math.random() * (15 - 5) + 5,
    luck,
    traitements,
    average,
    reference;

  for (var i = 1; i <= cpt; i++) {
    luck = Math.random() * (100 - 0) + 0;
    traitements = Math.round(Math.random() * (500 - 100) + 100);
    reference = Math.round(Math.random() * (2000 - 50) + 50);
    if (luck < 50)
      average = Math.round(Math.random() * (reference - (reference / 2)) + (reference / 2));
    else
      average = Math.round(Math.random() * ((reference * 2) - reference) + reference);
    services.push(new Service('Service_' + i, traitements, average, reference));
  }
  return services;
};

function Module(name) {
  this.name = name;
  this.services = sortByPerf(setRandomServices());

  this.setService = function(nom, traitements, moyenne, reference) {
    this.services.push(new Service(nom, traitements, moyenne, reference));
  };
};

function setNEO(modules) {
  var neo = [];
  for (var i = 0; i < modules.length; i++) {
    neo.push(new Module(modules[i]));
  }
  return neo;
};

function getColorFromPerf(performance) {
  if (performance <= 50) {
    return 50;
  } else if (performance >= 150) {
    return 150;
  } else {
    return performance;
  }
};

$(function() {
  var modules =...