/**
 * Theme: Metrica - Responsive Bootstrap 4 Admin Dashboard
 * Author: Mannatthemes
 * Flot Js
 */

 

!function($) {
  "use strict";

  var FlotChart = function() {
      this.$body = $("body")
      this.$realData = []
  };

  //creates plot graph
  FlotChart.prototype.createPlotGraph = function(selector, data1, data2, labels, colors, borderColor, bgColor) {
    //shows tooltip
    function showTooltip(x, y, contents) {
      $('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css( {
        position: 'absolute',
        top: y + 5,
        left: x + 5
      }).appendTo("body").fadeIn(200);
    }

    $.plot($(selector),
        [ { data: data1,
          label: labels[0],
          color: colors[0]
        },
        { data: data2,
          label: labels[1],
          color: colors[1]
        }
      ],
        {
            series: {
                lines: {
                    show: true,
                    fill: true,
                    lineWidth: 2,
                    fillColor: {
                        colors: [{opacity: 0.5},
                            {opacity: 0.5}
                        ]
                    }
                },
                points: {
                    show: false
                },
                shadowSize: 0
            },
            legend: {
                position: 'nw'
            },
            grid: {
                hoverable: true,
                clickable: true,
                borderColor: borderColor,
                borderWidth: 1,
                labelMargin: 10,
                backgroundColor: bgColor
            },
            yaxis: {
                min: 0,
                max: 15,
                color: 'rgba(0,0,0,0.1)'
            },
            xaxis: {
                color: 'rgba(0,0,0,0.1)'
            },
            tooltip: true,
            tooltipOpts: {
                content: '%s: Value of %x is %y',
                shifts: {
                    x: -60,
                    y: 25
                },
                defaultTheme: false
            }
        });
  },
  //end plot graph

  //creates Pie Chart
  FlotChart.prototype.createPieGraph = function(selector, labels, datas, colors) {
      var data = [{
          label: labels[0],
          data: datas[0]
      }, {
          label: labels[1],
          data: datas[1]
      }, {
          label: labels[2],
          data: datas[2]
      }];
      var options = {
          series: {
              pie: {
                  show: true
              }
          },
          legend : {
      show : true
    },
    grid : {
      hoverable : true,
      clickable : true
    },
    colors : colors,
    tooltip : true,
    tooltipOpts : {
      content : "%s, %p.0%"
    }
      };

      $.plot($(selector), data, options);
  },

  //returns some random data
  FlotChart.prototype.randomData = function() {
      var totalPoints = 300;
      if (this.$realData.length > 0)
          this.$realData = this.$realData.slice(1);

    // Do a random walk
    while (this.$realData.length < totalPoints) {

      var prev = this.$realData.length > 0 ? this.$realData[this.$realData.length - 1] : 50,
        y = prev + Math.random() * 10 - 5;

      if (y < 0) {
        y = 0;
      } else if (y > 100) {
        y = 100;
      }

      this.$realData.push(y);
    }

    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < this.$realData.length; ++i) {
      res.push([i, this.$realData[i]])
    }

    return res;
  },

  FlotChart.prototype.createRealTimeGraph = function(selector, data, colors) {
      var plot = $.plot(selector, [data], {
        colors: colors,
        series: {
          lines: {
            show: true,
            fill: true,
            lineWidth: 2,
            fillColor: {
              colors: [{
                opacity: 0.45
              }, {
                opacity: 0.45
              }]
            }
          },
          points: {
            show: false
          },
          shadowSize: 0
        },
        grid : {
      show : true,
      aboveData : false,
      color : '#dcdcdc',
      labelMargin : 15,
      axisMargin : 0,
      borderWidth : 0,
      borderColor : null,
      minBorderMargin : 5,
      clickable : true,
      hoverable : true,
      autoHighlight : false,
      mouseActiveRadius : 20
    },
    tooltip : true, //activate tooltip
    tooltipOpts : {
      content : "Value is : %y.0" + "%",
      shifts : {
        x : -30,
        y : -50
      }
    },
    yaxis : {
      min : 0,
      max : 100,
      color : 'rgba(0,0,0,0.1)'
    },
    xaxis : {
      show : false
    }
      });

      return plot;
  },
  //creates Pie Chart
  FlotChart.prototype.createDonutGraph = function(selector, labels, datas, colors) {
      var data = [{
          label: labels[0],
          data: datas[0]
      }, {
          label: labels[1],
          data: datas[1]
      }, {
          label: labels[2],
          data: datas[2]
      },
      {
          label: labels[3],
          data: datas[3]
      }, {
          label: labels[4],
          data: datas[4]
      }
      ];
      var options = {
          series: {
              pie: {
                  show: true,
                  innerRadius: 0.7
              }
          },
          legend : {
      show : true,
      labelFormatter : function(label, series) {
        return '<div style="font-size:14px;">&nbsp;' + label + '</div>'
      },
      labelBoxBorderColor : null,
      margin : 50,
      width : 20,
      padding : 1
    },
    grid : {
      hoverable : true,
      clickable : true
    },
    colors : colors,
    tooltip : true,
    tooltipOpts : {
      content : "%s, %p.0%"
    }
      };

      $.plot($(selector), data, options);
  },

      //initializing various charts and components
      FlotChart.prototype.init = function() {
        //plot graph data
        var uploads = [[0, 9], [1, 8], [2, 5], [3, 8], [4, 5], [5, 14], [6, 10]];
        var downloads = [[0, 5], [1, 12], [2,4], [3, 3], [4, 12], [5, 8], [6, 4]];
        var plabels = ["Marketplace","Other Market"];
        var pcolors = ['#4d79f6', '#6171a5'];
        var borderColor = '#f5f5f5';
        var bgColor = '#fff';
        this.createPlotGraph("#website-stats", uploads, downloads, plabels, pcolors, borderColor, bgColor);

        //Pie graph data
        var pielabels = ["Marketplace","Other Market","Direct Sales"];
        var datas = [20,30, 15];
        var colors = ['#4d79f6', '#4ac7ec', "#f3c74d"];
        this.createPieGraph("#pie-chart #pie-chart-container", pielabels , datas, colors);


          //real time data representation
          var plot = this.createRealTimeGraph('#flotRealTime', this.randomData() , ['#4d79f6']);
          plot.draw();
          var $this = this;
          function updatePlot() {
              plot.setData([$this.randomData()]);
              // Since the axes don't change, we don't need to call plot.setupGrid()
              plot.draw();
              setTimeout(updatePlot, $( 'html' ).hasClass( 'mobile-device' ) ? 1000 : 1000);
          }
          updatePlot();

          //Donut pie graph data
        var donutlabels = ["Marketplace","Other Market","Direct Sales"];
        var donutdatas = [29,20, 18];
        var donutcolors = ['#4d79f6', '#ff5da0', "#f0f1f4"];
        this.createDonutGraph("#donut-chart #donut-chart-container", donutlabels , donutdatas, donutcolors);
      },

  //init flotchart
  $.FlotChart = new FlotChart, $.FlotChart.Constructor = FlotChart

}(window.jQuery),

//initializing flotchart
function($) {
  "use strict";
  $.FlotChart.init()
}(window.jQuery);