/*=========================================================================================
    File Name: dashboard-analytics.js
    Description: intialize advance cards
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Author: Pixinvent
    Author URL: hhttp://www.themeforest.net/user/pixinvent
    ==========================================================================================*/
$(window).on("load", function () {
  // Revenue - CharJS Line
  Chart.defaults.derivedLine = Chart.defaults.line;
  var draw = Chart.controllers.line.prototype.draw;
  var custom = Chart.controllers.line.extend({
    draw: function () {
      draw.apply(this, arguments);
      var ctx = this.chart.chart.ctx;
      var _stroke = ctx.stroke;
      ctx.stroke = function () {
        ctx.save();
        ctx.shadowColor = "#ffb6c0";
        ctx.shadowBlur = 30;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 20;
        _stroke.apply(this, arguments);
        ctx.restore();
      };
    }
  });

  Chart.controllers.derivedLine = custom;
  var ctx = document.querySelector("#thisYearRevenue").getContext("2d");
  var thisYearRevenueChart = new Chart(ctx, {
    type: "derivedLine",
    data: {
      labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
      datasets: [
        {
          data: [5000, 10000, 4000, 14500, 8000, 18500, 8000, 20000],
          borderWidth: 4,
          borderColor: "#FF4961",
          pointBackgroundColor: "#FFF",
          pointBorderColor: "#FF4961",
          pointHoverBackgroundColor: "#FFF",
          pointHoverBorderColor: "#FF4961",
          pointRadius: 0,
          pointHoverRadius: 6,
          fill: false
        }
      ]
    },
    options: {
      responsive: true,
      tooltips: {
        displayColors: false,
        callbacks: {
          label: function (e, d) {
            // return '${e.xLabel} : ${e.yLabel}'
          },
          title: function () {
            return;
          }
        }
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false
            }
          }
        ],
        yAxes: [
          {
            ticks: {
              padding: 10,
              stepSize: 5000,
              max: 20000,
              min: 0
            },
            gridLines: {
              display: true,
              drawBorder: false,
              lineWidth: 1,
              color: "#e9ebf5"
            }
          }
        ]
      }
    }
  });

  var ctx2 = document.querySelector("#lastYearRevenue").getContext("2d");
  var lastYearRevenueChart = new Chart(ctx2, {
    type: "line",
    data: {
      labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"],
      datasets: [
        {
          data: [7000, 15000, 6000, 10500, 3000, 11500, 4000, 10000],
          borderWidth: 4,
          borderDash: [8, 4],
          borderColor: "#c3c3c3",
          pointBackgroundColor: "#FFF",
          pointBorderColor: "#c3c3c3",
          pointHoverBackgroundColor: "#FFF",
          pointHoverBorderColor: "#c3c3c3",
          pointRadius: 0,
          pointHoverRadius: 6,
          fill: false
        }
      ]
    },
    options: {
      responsive: true,
      tooltips: {
        displayColors: false,
        callbacks: {
          label: function (e, d) {
            // return '${e.xLabel} : ${e.yLabel}'
          },
          title: function () {
            return;
          }
        }
      },
      legend: {
        display: false
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false
            }
          }
        ],
        yAxes: [
          {
            ticks: {
              padding: 10,
              stepSize: 5000,
              max: 20000,
              min: 0
            },
            gridLines: {
              display: true,
              drawBorder: false,
              zeroLineColor: "#e5e5e5"
            }
          }
        ]
      }
    }
  });

  // Hit Rate Chart - CharJS Doughnut
  Chart.defaults.hitRateDoughnut = Chart.defaults.doughnut;
  var draw = Chart.controllers.doughnut.prototype.draw;
  var customDoughnut = Chart.controllers.doughnut.extend({
    draw: function () {
      draw.apply(this, arguments);
      var ctx = this.chart.chart.ctx;
      var _fill = ctx.fill;
      var width = this.chart.width,
        height = this.chart.height;

      var fontSize = (height / 114).toFixed(2);
      this.chart.ctx.font = fontSize + "em Verdana";
      this.chart.ctx.textBaseline = "middle";

      var text = "82%",
        textX = Math.round(
          (width - this.chart.ctx.measureText(text).width) / 2
        ),
        textY = height / 2;
      this.chart.ctx.fillStyle = '#ff0000';
      if ($('html').data('textdirection') == 'rtl') {
        textX = Math.round(
          (width - this.chart.ctx.measureText(text).width) / 1.15
        )
      }
      this.chart.ctx.fillText(text, textX, textY);

      ctx.fill = function () {
        ctx.save();
        ctx.shadowColor = "#bbbbbb";
        ctx.shadowBlur = 30;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 12;
        _fill.apply(this, arguments);
        ctx.restore();
      };
    }
  });

  Chart.controllers.hitRateDoughnut = customDoughnut;
  var ctx = document.getElementById("hit-rate-doughnut");
  var myDoughnutChartRate = new Chart(ctx, {
    type: "hitRateDoughnut",
    data: {
      labels: ["Remain", "Completed"],
      datasets: [
        {
          label: "Favourite",
          backgroundColor: ["#28D094", "#FF4961"],
          data: [18, 82]
        }
      ]
    },
    options: {
      responsive: true,
      title: {
        display: false
      },
      legend: {
        display: false
      },
      layout: {
        padding: {
          left: 16,
          right: 16,
          top: 16,
          bottom: 16
        }
      },
      cutoutPercentage: 92,
      animation: {
        animateScale: false,
        duration: 2500
      }
    }
  });

  // Deals Chart - CharJS Doughnut
  Chart.defaults.dealsDoughnut = Chart.defaults.doughnut;
  var draw = Chart.controllers.doughnut.prototype.draw;
  var customDealDoughnut = Chart.controllers.doughnut.extend({
    draw: function () {
      draw.apply(this, arguments);
      var ctx = this.chart.chart.ctx;
      var _fill = ctx.fill;
      var width = this.chart.width,
        height = this.chart.height;

      var fontSize = (height / 114).toFixed(2);
      this.chart.ctx.font = fontSize + "em Verdana";
      this.chart.ctx.textBaseline = "middle";

      var text = "76%",
        textX = Math.round(
          (width - this.chart.ctx.measureText(text).width) / 2
        ),
        textY = height / 2;
      this.chart.ctx.fillStyle = '#fff';
      if ($('html').data('textdirection') == 'rtl') {
        textX = Math.round(
          (width - this.chart.ctx.measureText(text).width) / 1.15
        )
      }
      this.chart.ctx.fillText(text, textX, textY);

      ctx.fill = function () {
        ctx.save();
        ctx.shadowColor = "#FF4961";
        ctx.shadowBlur = 30;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = 12;
        _fill.apply(this, arguments);
        ctx.restore();
      };
    }
  });

  Chart.controllers.dealsDoughnut = customDealDoughnut;
  var ctx = document.getElementById("deals-doughnut");
  var myDoughnutChart = new Chart(ctx, {
    type: "dealsDoughnut",
    data: {
      labels: ["Remain", "Completed"],
      color: "#fff",
      datasets: [
        {
          label: "Favourite",
          borderWidth: 0,
          backgroundColor: ["#ff7b8c", "#FFF"],
          data: [24, 76]
        }
      ]
    },
    options: {
      responsive: true,
      title: {
        display: false
      },
      legend: {
        display: false
      },
      elements: {},
      layout: {
        padding: {
          left: 16,
          right: 16,
          top: 16,
          bottom: 16
        }
      },
      cutoutPercentage: 94,
      animation: {
        animateScale: false,
        duration: 5000
      }
    }
  });

  //Total Earnings
  var ctx3 = document.getElementById("earning-chart").getContext("2d");

  // Chart Options
  var earningOptions = {
    responsive: true,
    maintainAspectRatio: false,
    datasetStrokeWidth: 3,
    pointDotStrokeWidth: 4,
    tooltipFillColor: "rgba(0,0,0,0.8)",
    legend: {
      display: false,
      position: "bottom"
    },
    hover: {
      mode: "label"
    },
    scales: {
      xAxes: [
        {
          display: false
        }
      ],
      yAxes: [
        {
          display: false,
          ticks: {
            min: 0,
            max: 70
          }
        }
      ]
    },
    title: {
      display: false,
      fontColor: "#FFF",
      fullWidth: false,
      fontSize: 40,
      text: "82%"
    }
  };

  // Chart Data
  var earningData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "My First dataset",
        data: [28, 35, 36, 48, 46, 42, 60],
        backgroundColor: "rgba(255,117,136,0.12)",
        borderColor: "#FF4961",
        borderWidth: 3,
        strokeColor: "#FF4961",
        capBezierPoints: true,
        pointColor: "#fff",
        pointBorderColor: "#FF4961",
        pointBackgroundColor: "#FFF",
        pointBorderWidth: 3,
        pointRadius: 5,
        pointHoverBackgroundColor: "#FFF",
        pointHoverBorderColor: "#FF4961",
        pointHoverRadius: 7
      }
    ]
  };

  var earningConfig = {
    type: "line",

    // Chart Options
    options: earningOptions,

    // Chart Data
    data: earningData
  };

  // Create the chart
  var earningChart = new Chart(ctx3, earningConfig);

  // Vector Maps
  // -----------------------------------
  $("#world-map-markers").vectorMap({
    map: "world_mill",
    backgroundColor: "#fff",
    zoomOnScroll: false,
    series: {
      regions: [
        {
          values: visitorData,
          scale: ["#ff7c8d", "#fdd6db"],
          normalizeFunction: "polynomial"
        }
      ]
    },
    onRegionTipShow: function (e, el, code) {
      el.html(el.html() + " (Visitor - " + visitorData[code] + ")");
    }
  });

  //Sessions by Browser
  // -----------------------------------
  Morris.Donut({
    element: "sessions-browser-donut-chart",
    data: [
      {
        label: "Chrome",
        value: 3500
      },
      {
        label: "Firefox",
        value: 2500
      },
      {
        label: "Safari",
        value: 2000
      },
      {
        label: "Opera",
        value: 1000
      },
      {
        label: "Internet Explorer",
        value: 500
      }
    ],
    resize: true,
    colors: ["#40C7CA", "#FF7588", "#2DCEE3", "#FFA87D", "#16D39A"]
  });
});