/*

Use this file to add custom scripts.
Please do not override any of the other files

*/

$(document).ready(function() {

var colors = {
  gray: {
    100: "#95AAC9",
    300: "#E3EBF6",
    600: "#95AAC9",
    700: "#6E84A3",
    900: "#283E59"
  },
  primary: {
    100: "#D2DDEC",
    300: "#A6C5F7",
    700: "#2C7BE5"
  },
  black: "#12263F",
  white: "#FFFFFF",
  transparent: "transparent"
};

Chart.defaults.global.defaultColor = colors.primary[600];
Chart.defaults.global.defaultFontColor = colors.gray[600];
Chart.defaults.global.defaultFontFamily = 'Rubik';
Chart.defaults.global.defaultFontSize = 13;
Chart.defaults.global.elements.line.backgroundColor = colors.primary[100];
Chart.defaults.global.elements.line.borderCapStyle = "rounded";
Chart.defaults.global.elements.line.borderColor = colors.primary[700];
Chart.defaults.global.elements.line.borderWidth = 1;
Chart.defaults.global.elements.line.tension = 0;
Chart.defaults.global.elements.point.backgroundColor = colors.primary[700];
Chart.defaults.global.elements.point.borderColor = colors.transparent;
Chart.defaults.global.elements.point.hitRadius = 10;
Chart.defaults.global.elements.point.radius = 0;
Chart.defaults.global.elements.rectangle.backgroundColor = colors.primary[700];
Chart.defaults.global.legend.display = !1;
Chart.defaults.global.legend.position = "bottom";
Chart.defaults.global.legend.labels.usePointStyle = !0;
Chart.defaults.global.legend.labels.padding = 16;
Chart.defaults.global.maintainAspectRatio = !1;
Chart.defaults.global.maxBarThickness = 10;
Chart.defaults.global.responsive = !0;
Chart.defaults.global.tooltips.backgroundColor = colors.black;
Chart.defaults.global.tooltips.titleFontStyle = 500;
Chart.defaults.global.tooltips.cornerRadius = 4;
Chart.defaults.global.tooltips.xPadding = 10;
Chart.defaults.global.tooltips.yPadding = 10;

function generateTimeChartLabels(options) {
  var labels = [];

  $.each(options.timestamps, function(index, value) {
    labels.push(new Date(value * 1000));
  });

  return labels;
}

function generateMeanChartLabels(options) {
  var labels = [];

  for (var i = 0; i < options.metrics.length; i++) {
    labels.push(options.mean);
  }

  return labels;
}

function createTimeChart(options) {
  return new Chart(document.getElementById(options.target), {
    type: "line",
    data: {
      labels: options.labels,
      datasets: [{
        label: "Average",
        data: options.mean,
        fill: false,
        backgroundColor: colors.black,
        borderColor: colors.black,
        borderWidth: 1
      },
      {
        steppedLine: true,
        data: options.metrics
      }]
    },
    options: {
      animation: {
        duration: 0
      },
      hover: {
        animationDuration: 0
      },
      responsiveAnimationDuration: 0,
      tooltips: {
        callbacks: {
          title: function(tooltipItem, data) {
            return moment(tooltipItem[0].xLabel).format('MMMM Do YYYY, h:mm a');
          },
          label: function(tooltipItems, data) {
            return (options.prefix || '') +
                   data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +
                   (options.suffix || '');
          }
        }
      },
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'series',
          time: {
            minUnit: 'minute',
            displayFormats: {
              minute: 'h:mm a'
            }
          },
          gridLines: {
            display: !1,
            drawBorder: !1
          }
        }],
        yAxes: [{
          ticks : {
            beginAtZero: true
          },
          gridLines: {
            borderDash: [2],
            borderDashOffset: [2],
            color: colors.gray[300],
            drawBorder: !1,
            drawTicks: !1,
            lineWidth: 0,
            zeroLineWidth: 0,
            zeroLineColor: colors.gray[300],
            zeroLineBorderDash: [2],
            zeroLineBorderDashOffset: [2]
          }
        }]
      }
    }
  });
}

function createDoughnutChart(options) {
  return new Chart(document.getElementById(options.target), {
      type: 'doughnut',
      data: {
        labels: options.labels,
        datasets: [{
          data: options.metrics,
          borderWidth: 0,
          backgroundColor: [
            colors.primary[700],
            colors.black
          ]
        }]
      },
      options: {
        cutoutPercentage: 75,
        tooltips: {
          callbacks: {
            label: function(tooltipItems, data) {
              return (options.prefix || '') +
                     data.labels[tooltipItems.index] +
                     ': ' +
                     data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] +
                     (options.suffix || '');
            }
          }
        }
      }
  });
}

function createChartByType(options) {
  var chart;

  switch(options.type) {
    case 'doughnut':
      createDoughnutChart(options);
      break;
    case 'time':
      options.labels = generateTimeChartLabels(options);
      options.mean = generateMeanChartLabels(options);
      chart = createTimeChart(options);
  };

  return chart;
}

function expandChartCards(options) {
  $(options.contract).addClass('d-none');
  $(options.expand).removeClass('d-none');
}

var charts = {};
var chartHandler = $('[data-toggle="chart"]');
chartHandler.each(function (index) {
  var self = $(this);
  var options = {
    target: self.data("target")
  };

  if (!charts[options.target]) {
    $.each([
      "type", "labels", "metrics", "mean", "timestamps", "prefix", "suffix"
    ], function(i, value) {
      options[value] = self.data(value);
    });

    charts[options.target] = createChartByType(options);
  }
});

chartHandler.on("click", function () {
  var self = $(this);
  var options = {};

  $.each([
    "target", "labels", "type", "metrics", "mean", "timestamps", "prefix", "suffix"
  ], function(i, value) {
    options[value] = self.data(value);
  });

  createChartByType(options);
});

var expandHandler = $('[data-expand]');
expandHandler.on("click", function () {
  var self = $(this);
  var options = {
    contract: self.data("contract"),
    expand: self.data("expand")
  };

  expandChartCards(options);
});

});