function updateChart(chart, data) {
  var values = data.map(function(value) { return value[1] });
  var labels = data.map(function(value) { return value[0] });

  chart.data.labels = labels;
  chart.data.datasets[0].data = values;
  chart.update();
}

function formatBytes(bytes) {
  if (bytes <= 1024) {
    return bytes.toString().concat("B");
  } else if (bytes > 1024 && bytes <= 1000*1024) {
    return (bytes / 1024).toFixed(1).toString().concat("MB");
  } else {
    return (bytes / 1024 / 1024).toFixed(1).toString().concat("GB");
  }
}

Chart.defaults.global.defaultFontSize = 8;
Chart.defaults.global.animation.duration = 500;
Chart.defaults.global.legend.display = false;
Chart.defaults.global.elements.line.backgroundColor = "rgba(0,0,0,0)";
Chart.defaults.global.elements.line.borderColor = "rgba(0,0,0,0.9)";
Chart.defaults.global.elements.line.borderWidth = 2;

var defaultOptions = {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: '',
      data: [],
      lineTension: 0.2,
      pointRadius: 0
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          unitStepSize: 110
        },
        minUnit: 'second',
        gridLines: {
          display: false
        }
      }]
    }
  },
  tooltips: {
    enabled: false
  },
  responsive: true,
  maintainAspectRatio: false,
  animation: false
}

var memoryChart = new Chart(document.getElementById('memory'), defaultOptions);
var loadavgChart = new Chart(document.getElementById('loadavg'), defaultOptions);

var lastMemory = document.getElementById('last-memory');
var lastLoadavg = document.getElementById('last-loadavg');

var socket = new WebSocket("ws://localhost:8080/");
socket.onmessage = function (raw_event) {
  var event = JSON.parse(raw_event.data)

  switch (event.data_type) {
    case 'memory':
      updateChart(memoryChart, event.data)
      lastMemory.textContent = formatBytes(event.data[event.data.length - 1][1]);
      break;
    case 'loadavg':
      updateChart(loadavgChart, event.data)
      lastLoadavg.textContent = event.data[event.data.length - 1][1];
      break;
    default:
      break;
  }
}