portainer/app/services/chartService.js

angular.module('portainer.services')
.factory('ChartService', [function ChartService() {
  'use strict';

  // Max. number of items to display on a chart
  var CHART_LIMIT = 600;

  var service = {};

  service.CreateCPUChart = function(context) {
    return new Chart(context, {
      type: 'line',
      data: {
        labels: [],
        datasets: [
          {
            label: 'CPU',
            data: [],
            fill: true,
            backgroundColor: 'rgba(151,187,205,0.4)',
            borderColor: 'rgba(151,187,205,0.6)',
            pointBackgroundColor: 'rgba(151,187,205,1)',
            pointBorderColor: 'rgba(151,187,205,1)',
            pointRadius: 2,
            borderWidth: 2
          }
        ]
      },
      options: {
        animation: {
          duration: 0
        },
        responsiveAnimationDuration: 0,
        responsive: true,
        tooltips: {
          mode: 'index',
          intersect: false,
          position: 'nearest',
          callbacks: {
            label: function(tooltipItem, data) {
              var datasetLabel = data.datasets[tooltipItem.datasetIndex].label;
              return percentageBasedTooltipLabel(datasetLabel, tooltipItem.yLabel);
            }
          }
        },
        hover: {
          animationDuration: 0
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                callback: percentageBasedAxisLabel
              }
            }
          ]
        }
      }
    });
  };

  service.CreateMemoryChart = function(context) {
    return new Chart(context, {
      type: 'line',
      data: {
        labels: [],
        datasets: [
          {
            label: 'Memory',
            data: [],
            fill: true,
            backgroundColor: 'rgba(151,187,205,0.4)',
            borderColor: 'rgba(151,187,205,0.6)',
            pointBackgroundColor: 'rgba(151,187,205,1)',
            pointBorderColor: 'rgba(151,187,205,1)',
            pointRadius: 2,
            borderWidth: 2
          }
        ]
      },
      options: {
        animation: {
          duration: 0
        },
        responsiveAnimationDuration: 0,
        responsive: true,
        tooltips: {
          mode: 'index',
          intersect: false,
          position: 'nearest',
          callbacks: {
            label: function(tooltipItem, data) {
              var datasetLabel = data.datasets[tooltipItem.datasetIndex].label;
              return byteBasedTooltipLabel(datasetLabel, tooltipItem.yLabel);
            }
          }
        },
        hover: {
          animationDuration: 0
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
                callback: byteBasedAxisLabel
              }
            }
          ]
        }
      }
    });
  };

  service.CreateNetworkChart = function(context) {
    return new Chart(context, {
      type: 'line',
      data: {
        labels: [],
        datasets: [
          {
            label: 'RX on eth0',
            data: [],
            fill: false,
            backgroundColor: 'rgba(151,187,205,0.4)',
            borderColor: 'rgba(151,187,205,0.6)',
            pointBackgroundColor: 'rgba(151,187,205,1)',
            pointBorderColor: 'rgba(151,187,205,1)',
            pointRadius: 2,
            borderWidth: 2
          },
          {
            label: 'TX on eth0',
            data: [],
            fill: false,
            backgroundColor: 'rgba(255,180,174,0.5)',
            borderColor: 'rgba(255,180,174,0.7)',
            pointBackgroundColor: 'rgba(255,180,174,1)',
            pointBorderColor: 'rgba(255,180,174,1)',
            pointRadius: 2,
            borderWidth: 2
          }
        ]
      },
      options: {
        animation: {
          duration: 0
        },
        responsiveAnimationDuration: 0,
        responsive: true,
        tooltips: {
          mode: 'index',
          intersect: false,
          position: 'average',
          callbacks: {
            label: function(tooltipItem, data) {
              var datasetLabel = data.datasets[tooltipItem.datasetIndex].label;
              return byteBasedTooltipLabel(datasetLabel, tooltipItem.yLabel);
            }
          }
        },
        hover: {
          animationDuration: 0
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              callback: byteBasedAxisLabel
            }
          }]
        }
      }
    });
  };

  service.UpdateMemoryChart = function(label, value, chart) {
    chart.data.labels.push(label);
    chart.data.datasets[0].data.push(value);

    if (chart.data.datasets[0].data.length > CHART_LIMIT) {
      chart.data.labels.pop();
      chart.data.datasets[0].data.pop();
    }

    chart.update(0);
  };

  service.UpdateCPUChart = function(label, value, chart) {
    chart.data.labels.push(label);
    chart.data.datasets[0].data.push(value);

    if (chart.data.datasets[0].data.length > CHART_LIMIT) {
      chart.data.labels.pop();
      chart.data.datasets[0].data.pop();
    }

    chart.update(0);
  };

  service.UpdateNetworkChart = function(label, rx, tx, chart) {
    chart.data.labels.push(label);
    chart.data.datasets[0].data.push(rx);
    chart.data.datasets[1].data.push(tx);

    if (chart.data.datasets[0].data.length > CHART_LIMIT) {
      chart.data.labels.pop();
      chart.data.datasets[0].data.pop();
      chart.data.datasets[1].data.pop();
    }

    chart.update(0);
  };

  function byteBasedTooltipLabel(label, value) {
    var processedValue = 0;
    if (value > 5) {
      processedValue = filesize(value, {base: 10, round: 1});
    } else {
      processedValue = value.toFixed(1) + 'B';
    }
    return label + ': ' + processedValue;
  }

  function byteBasedAxisLabel(value, index, values) {
    if (value > 5) {
      return filesize(value, {base: 10, round: 1});
    }
    return value.toFixed(1) + 'B';
  }

  function percentageBasedAxisLabel(value, index, values) {
    if (value > 1) {
      return Math.round(value) + '%';
    }
    return value.toFixed(1) + '%';
  }

  function percentageBasedTooltipLabel(label, value) {
    var processedValue = 0;
    if (value > 1) {
      processedValue = Math.round(value);
    } else {
      processedValue = value.toFixed(1);
    }
    return label + ': ' + processedValue + '%';
  }

  return service;
}]);