text: import Chart from 'chart.js';
  import filesize from 'filesize';
  
  angular.module('extension.storidge')
  .factory('StoridgeChartService', [function StoridgeChartService() {
    'use strict';
  
    // Max. number of items to display on a chart
    var CHART_LIMIT = 600;
  
    var service = {};
  
    service.CreateCapacityChart = function(context) {
      return new Chart(context, {
        type: 'doughnut',
        data: {
          datasets: [
            {
              data: [],
              backgroundColor: [
                'rgba(171, 213, 255, 0.7)',
                'rgba(229, 57, 53, 0.7)'
              ]
            }
          ],
          labels: []
        },
        options: {
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
                var label = data.labels[tooltipItem.index];
                var value = dataset.data[tooltipItem.index];
                return label + ': ' + filesize(value, {base: 10, round: 1});
              }
            }
          },
          animation: {
            duration: 0
          },
          responsiveAnimationDuration: 0,
          responsive: true,
          hover: {
            animationDuration: 0
          }
        }
      });
    };
  
    service.CreateIOPSChart = function(context) {
      return new Chart(context, {
        type: 'line',
        data: {
          labels: [],
          datasets: [
            {
              label: 'IOPS',
              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'
          },
          hover: {
            animationDuration: 0
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    };
  
    service.CreateBandwidthChart = function(context) {
      return new Chart(context, {
        type: 'line',
        data: {
          labels: [],
          datasets: [
            {
              label: 'Bandwidth',
              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 bytePerSecBasedTooltipLabel(datasetLabel, tooltipItem.yLabel);
              }
            }
          },
          hover: {
            animationDuration: 0
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  callback: bytePerSecBasedAxisLabel
                }
              }
            ]
          }
        }
      });
    };
  
    service.UpdateChart = 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.UpdatePieChart = function(label, value, chart) {
      var idx = chart.data.labels.indexOf(label);
      if (idx > -1) {
        chart.data.datasets[0].data[idx] = value;
      } else {
        chart.data.labels.push(label);
        chart.data.datasets[0].data.push(value);
      }
  
      chart.update(0);
    };
  
    function bytePerSecBasedTooltipLabel(label, value) {
      var processedValue = 0;
      if (value > 5) {
        processedValue = filesize(value, {base: 10, round: 1});
      } else {
        processedValue = value.toFixed(1) + 'B';
      }
      return label + ': ' + processedValue + '/s';
    }
  
    function bytePerSecBasedAxisLabel(value) {
      if (value > 5) {
        return filesize(value, {base: 10, round: 1});
      }
      return value.toFixed(1) + 'B/s';
    }
  
    return service;
  }]);
  