// dashbord-2 knob chart

// right-side-small-chart

(function($) {
    "use strict";
    $(".knob1").knob({

        'width':65,
        'height':65,
        'max':100,

        change : function (value) {
            //console.log("change : " + value);
        },
        release : function (value) {
            //console.log(this.$.attr('value'));
            console.log("release : " + value);
        },
        cancel : function () {
            console.log("cancel : ", this);
        },
        format : function (value) {
         return value + '%';
         },
        draw : function () {

            // "tron" case
            if(this.$.data('skin') == 'tron') {

                this.cursorExt = 1;

                var a = this.arc(this.cv)  // Arc
                    , pa                   // Previous arc
                    , r = 1;

                this.g.lineWidth = this.lineWidth;

                if (this.o.displayPrevious) {
                    pa = this.arc(this.v);
                    this.g.beginPath();
                    this.g.strokeStyle = this.pColor;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                    this.g.stroke();
                }

                this.g.beginPath();
                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                this.g.stroke();

                this.g.lineWidth = 2;
                this.g.beginPath();
                this.g.strokeStyle = this.o.fgColor;
                this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                this.g.stroke();

                return false;
            }
        }
    });
    // Example of infinite knob, iPod click wheel
    var v, up=0,down=0,i=0
        ,$idir = $("div.idir")
        ,$ival = $("div.ival")
        ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
        ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
    $("input.infinite").knob(
        {
            min : 0
            , max : 20
            , stopper : false
            , change : function () {
            if(v > this.cv){
                if(up){
                    decr();
                    up=0;
                }else{up=1;down=0;}
            } else {
                if(v < this.cv){
                    if(down){
                        incr();
                        down=0;
                    }else{down=1;up=0;}
                }
            }
            v = this.cv;
        }
        });
})(jQuery);

 
var options = {
          series: [{
          name: 'TEAM A',
          type: 'area',
          data: [44, 48, 38, 47]
        }, {
          name: 'TEAM B',
          type: 'line',
          data: [42, 38, 48, 30]
        }],
          chart: {
          height:470,
          type: 'line',
          toolbar: {
            show:false,
          },

        },
        stroke: {
          curve: 'smooth',
          width: [5, 2],
          dashArray: [0, 8]
          
        },
        fill: {
          type:'solid',
          opacity: [0.35, 1],
        },
        labels: ['2010', '2011','2012','2013'],
        markers: {
          size: 5
        },
        responsive: [
          {
            breakpoint:991,
            options: {
              chart: {
                height:300
              }
            }
          },
          {
            breakpoint:1500,
            options: {
              chart: {
                height:325
              }
            }
          }
        ],
        yaxis: [
          {
             labels: {
                formatter: function (value) {
                  return value + "k";
                },
              },
          },
        ],
        tooltip: {
          shared: true,
          intersect: false,
          y: {
            formatter: function (y) {
              if(typeof y !== "undefined") {
                return  y.toFixed(0) + " points";
              }
              return y;
            }
          }
        },
        legend: {
            show:false,
           },
           colors:[vihoAdminConfig.primary , vihoAdminConfig.secondary]
        };
var chart = new ApexCharts(document.querySelector("#chart-dash-2-line"), options);
chart.render();

//overview section chart in dashboard-2
var options25 = {
      chart:{
        type: "line",
        height: 450,
        foreColor: "#999",
        stacked: true,
        dropShadow: {
          enabled: true,
          enabledSeries: [0],
          top: -2,
          left: 2,
          blur: 5,
          opacity: 0.06
        },
        toolbar: {
            show:false,
          },
      },responsive: [
          {
            breakpoint:1470,
            options:{
              chart:{
                height:440
              }
            }
          },
          {
            breakpoint:1365,
            options:{
              chart:{
                height:300
              }
            }
          },
          {
            breakpoint:991,
            options:{
              chart:{
                height:250
              }
            }
          },
        ],
      colors:[vihoAdminConfig.primary, vihoAdminConfig.secondary],
      stroke:{       
        width:3
      },
      dataLabels: {
        enabled:false
      },
      series: [{
        name: 'Total Views',
        data: generateDayWiseTimeSeries(0, 18)
      }, {
        name: 'Unique Views',
        data: generateDayWiseTimeSeries(1, 18)
      }],
      markers: {
        size: 5,
        strokeColor: "#e3e3e3",
        strokeWidth: 3,
        strokeOpacity: 1,
        fillOpacity: 1,
        hover: {
          size: 6
        }
      },
      xaxis: {
        type: "datetime",
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        }
      },
      yaxis: {
        labels: {
          offsetX: 14,
          offsetY: -5
        },
        tooltip: {
          enabled: true
        },
        labels: {
            formatter: function (value) {
              return value + "k";
            },
          },
      },
      grid: {
        padding: {
          left: -5,
          right: 5
        }
      },
      tooltip: {
        x: {
          format: "dd MMM yyyy"
        }
      },
      legend: {
        position: 'top',
        horizontalAlign: 'left',
        show:false
      },
      fill: {
         type: "solid",
        fillOpacity: 0.7
      },
    };
    var chart25 = new ApexCharts(document.querySelector("#timeline-chart"), 
    options25
    );
    chart25.render();

    function generateDayWiseTimeSeries(s, count) {
      var values = [[
        4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5
      ], [
        2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2
      ]];
      var i = 0;
      var series = [];
      var x = new Date("11 Nov 2012").getTime();
      while (i < count) {
        series.push([x, values[s][i]]);
        x += 86400000;
        i++;
      }
      return series;
    }


//Dashboard-2 Third chart for Yearly Growth


//new charts

          
var options51 = {
  series: [
    {
      name: "Yearly Profit",
      data: [
        {
          x: "2001",
          y: 5500
        },
        {
          x: "2002",
          y: 3800
        },
        {
          x: "2003",
          y: 5500
          
        },
        {
          x: "2004",
          y: 7700
        },
        {
          x: "2005",
          y: 1500
          
        },
        {
          x: "2006",
          y: 1000,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2007",
          y: 5000,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2008",
          y: 6000,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2009",
          y: 7900,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2010",
          y: 4700,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2011",
          y: 4000,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2012",
          y: 5000,
          fillColor: vihoAdminConfig.primary,
        },
        {
          x: "2013",
          y: 7500
        },
        {
          x: "2014",
          y: 3500
        },
        {
          x: "2015",
          y: 4000
        },
        {
          x: "2016",
          y: 6500
        },
        {
          x: "2017",
          y: 4000
        },
        {
          x: "2018",
          y: 5853
        },
        {
          x: "2019",
          y: 6553
        },
        {
          x: "2020",
          y: 5200
        },
        {
          x: "2021",
          y: 6200
        },
        {
          x: "2022",
          y: 880,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2023",
          y: 1200,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2024",
          y: 8010,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2025",
          y: 6053,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2026",
          y: 4000,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2027",
          y: 1000,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2028",
          y: 6200
        },
        {
          x: "2029",
          y: 6200
        },
        {
          x: "2030",
          y: 7500
        },
        {
          x: "2031",
          y: 7000
        },
        {
          x: "2032",
          y: 5000
        },
        {
          x: "2033",
          y: 6000
        },
        {
          x: "2034",
          y: 8000
        },
        {
          x: "2035",
          y: 4000
        },
        {
          x: "2036",
          y: 4500
        },
        {
          x: "2037",
          y: 4800
        },
        {
          x: "2038",
          y: 3000,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2039",
          y: 4200,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2040",
          y: 7900,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2041",
          y: 4000,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2042",
          y: 5500,
          fillColor: vihoAdminConfig.secondary,
        },
        {
          x: "2043",
          y: 1000
        },
        {
          x: "2044",
          y: 5500
        },
        {
          x: "2045",
          y: 7000
        },
        {
          x: "2046",
          y: 6500
        },
        {
          x: "2047",
          y: 4000
        }
        
      ]
    }
  ],
  chart: {
    height: 350,
    type: "bar",
    toolbar:{
      show:false,
    },
  },
  plotOptions:{
    bar:{
      horizontal:false,
      columnWidth:"70%",
    }
  },
  stroke: {
    show: false,
  },
  dataLabels: {
    enabled: false
  },
  fill: {
    opacity: 1
  },
  xaxis: {
    type: "datetime",
    axisBorder: {
      show: false
    },
    labels: {
          show: false,
        },
    axisTicks:{
        show:false,
     },
  },
   yaxis: {
    labels: {
      formatter: function (val) {
        return val / 100 + "K";
      },
    }
  },
  responsive: [
    {
      breakpoint:991,
      options: {
        chart: {
          height:250
        }
      }
    }
  ], 
  colors:["#d8e3e5"]
};

var chart51 = new ApexCharts(document.querySelector("#chart-yearly-growth-dash-2"),
 options51
 );
chart51.render();
// column charts in apex charts 

// var options27 = {
  
//   series: [
//     {
//       data: [400, 230, 448, 370, 540, 580, 690, 1100, 1200, 1380,1150,580,330,580,1355,1280,1485,875,356,587,954,325,469,1254,1587,543,370,987,675,345,895,1200,1265,987,1400,852,654,254,155,899,754,254,789,235,456,256,900]
//     }
//   ],
//   chart: {
//     type: "bar",
//     height: 350,
//     toolbar: {
//             show:false,
//           },
//   },
//   plotOptions: {
//     bar: {
//       horizontal: false,
//       distributed: true,
//       startingShape: "rounded",
//       endingShape: "rounded",
//       colors: {
//         backgroundBarColors: ["#eee"],
//         backgroundBarOpacity: 1,
//         backgroundBarRadius: 9
//       }
//     }
//   },
//   dataLabels: {
//     enabled: false
//   },
//   grid: {
//     yaxis: {
//       lines: {
//         show: false
//       },
      
//     }
//   },
//   yaxis: {
//     labels: {
//       formatter: function (val) {
//         return val / 100 + "K";
//       },
//     }
//   },
//   xaxis: {
//     axisBorder: {
//       show: false
//     },
//     categories: [
//       "Spain",
//       "Canada",
//       "United Kingdom",
//       "Netherlands",
//       "Italy",
//       "France",
//       "Japan",
//       "United States",
//       "China",
//       "Germany"
//     ],
//     labels: {
//           show: false,
//         },
//         axisTicks:{
//                show:false,
//              },
            
//   },
//   colors: [
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#24695c",
//     "#24695c",
//     "#24695c",
//     "#24695c",
//     "#24695c",
//     "#24695c",
//     "#24695c",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#d8e3e5",
//     "#ba895d",
//     "#ba895d",
//     "#ba895d",
//     "#ba895d",
//     "#ba895d",
//     "#ba895d"
//   ],
  
//   legend: {
//     show: false
//   }
// };


// var chart27 = new ApexCharts(document.querySelector("#chart-unique-2"), 
//   options27
//   );
// chart27.render();

// 
var barOptions = {
  curvature: 1,
  
  animationSteps: 15,

  responsive: true,

  scaleShowVerticalLines: false,

  scaleShowHorizontalLines: false,
  
  scaleShowLabels: false,
   
  // String - Template string for single tooltips
  tooltipTemplate: "<%if (label){%><%=label %>: <%}%><%= value + ' %' %>",
  // String - Template string for multiple tooltips
  multiTooltipTemplate: "<%= value + ' %' %>",
  
  // Array - Array of string names to attach tooltip events
  tooltipEvents: ["mousemove", "touchstart", "touchmove"],

  // String - Tooltip background colour
  tooltipFillColor: "rgba(0,0,0,0.8)",

  // String - Tooltip label font declaration for the scale label
  tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

  // Number - Tooltip label font size in pixels
  tooltipFontSize: 14,

  // String - Tooltip font weight style
  tooltipFontStyle: "normal",

  // String - Tooltip label font colour
  tooltipFontColor: "#fff",

  // String - Tooltip title font declaration for the scale label
  tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

  // Number - Tooltip title font size in pixels
  tooltipTitleFontSize: 14,

  // String - Tooltip title font weight style
  tooltipTitleFontStyle: "bold",

  // String - Tooltip title font colour
  tooltipTitleFontColor: "#fff",

  // Number - pixel width of padding around tooltip text
  tooltipYPadding: 6,

  // Number - pixel width of padding around tooltip text
  tooltipXPadding: 6,

  // Number - Size of the caret on the tooltip
  tooltipCaretSize: 8,

  // Number - Pixel radius of the tooltip border
  tooltipCornerRadius: 6,

  // Number - Pixel offset from point x to tooltip edge
  tooltipXOffset: 10,

  barShowLabels: false,

  // Function - Will fire on animation progression.
  onAnimationProgress: function(){},

  // Function - Will fire on animation completion.
  onAnimationComplete: function(){}
};

Chart.types.Bar.extend({
  name: "BarAlt",
  initialize: function (data) {
      Chart.types.Bar.prototype.initialize.apply(this, arguments);
      
      if (this.options.curvature !== undefined && this.options.curvature <= 1) {
          var rectangleDraw = this.datasets[0].bars[0].draw;
          var self = this;
          var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.2;
          
          // override the rectangle draw with ours
          this.datasets.forEach(function (dataset) {
              dataset.bars.forEach(function (bar) {
                  bar.draw = function () {
                      // draw the original bar a little down (so that our curve brings it to its original position)
                      var y = bar.y;
                      // the min is required so animation does not start from below the axes
                      bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                      // adjust the bar radius depending on how much of a curve we can draw
                      var barRadius = (bar.y - y);
                      rectangleDraw.apply(bar, arguments);
                      
                      // draw a rounded rectangle on top
                      Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                      ctx.fill();
                      
                      // restore the y value
                      bar.y = y;
                  }
              })
          })
      }
  }
});

var barData = {
  labels : ["3rd Mar","3rd Apr","3r May","3rd Jun","3rd Jul","3rd Aug","3rd Sep","3rd Nov","3rd dec", "3rd Mar","3rd Apr","3r May","3rd Jun","3rd Jul","3rd Aug","3rd Sep","3rd Nov","3rd dec", "3rd Mar","3rd Apr","3r May","3rd Jun","3rd Jul","3rd Aug","3rd Sep","3rd Nov","3rd dec", "3rd Mar","3rd Apr","3r May","3rd Jun","3rd Jul","3rd Aug","3rd Sep","3rd Nov","3rd dec", "3rd Mar","3rd Apr","3r May","3rd Jun","3rd Jul","3rd Aug","3rd Sep","3rd Nov","3rd dec"],
  datasets: [{
      label: "Third dataset",
      fillColor: "#1faf4b",
      strokeColor: "#1faf4b",
      data: [400, 230, 448, 370, 540, 580, 690, 1100, 1200, 1380,1150,580,330,580,1355,1280,1485,875,356,587,954,325,469,1254,1587,543,370,987,675,345,895,1200,1265,987,1400,852,654,254,155,899,754,254,789,235,456,256,900]
  }],
};

// var ctx = document.getElementById("myChart").getContext("2d");
// var myLine = new Chart(ctx).BarAlt(barData, barOptions);

// document.getElementById("addData").onclick = function addData() {
//        // Update one of the points in the second dataset
//        myLine.addData([Math.random() * 100]);
       
//    Chart.types.Bar.extend({
//   name: "BarAlt",
//   initialize: function (data) {
//       Chart.types.Bar.prototype.initialize.apply(this, arguments);
      

//           var rectangleDraw = this.datasets[0].bars[0].draw;
//           var self = this;
//           var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.2;
          
//           // override the rectangle draw with ours
//           this.datasets.forEach(function (dataset) {
//               dataset.bars.forEach(function (bar) {
//                   bar.draw = function () {
//                       // draw the original bar a little down (so that our curve brings it to its original position)
//                       var y = bar.y;
//                       // the min is required so animation does not start from below the axes
//                       bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
//                       // adjust the bar radius depending on how much of a curve we can draw
//                       var barRadius = (bar.y - y);
//                       rectangleDraw.apply(bar, arguments);
                      
//                       // draw a rounded rectangle on top
//                       Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
//                       ctx.fill();
                      
//                       // restore the y value
//                       bar.y = y;
//                   }
//               })
//           })
//       }
// });

//        // Remove the first point so we dont just add values forever
//        myLine.removeData();
// }



var options3 = {
          series: [{
          name: 'Inflation',
          data: [2.3, 5.1, 3.0, 9.1, 2.0, 4.6, 2.2, 9.3, 5.4, 4.8, 3.5, 5.2,2.3, 5.1, 3.0, 9.1, 2.0, 4.6, 2.2, 9.3, 5.4, 4.8, 3.5, 5.2]
          // data: [4.3, 5.1, 3.0, 8.1, 3.0, 5.6, 3.2]
        }],
          chart: {
          height:90,
          type: 'bar',
          toolbar: {
              show: false
           },
        },
        plotOptions: {
             bar: {
              dataLabels: {
                position: 'top', // top, center, bottom
              },

             columnWidth: '20%',
             startingShape: 'rounded',
             endingShape: 'rounded',
             colors: {
        backgroundBarColors: ["#d8e3e5"],
        backgroundBarOpacity: 1,
        backgroundBarRadius: 9
      },
          }
        },
        dataLabels: {
          enabled: false,
          formatter: function (val) {
            return val + "%";
          },
          offsetY: -10,
          style: {
            fontSize: '12px',
            colors: ["#912efc"]
          }
        },
        
        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
          position: 'bottom',
        
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false
          },
          crosshairs: {
            fill: {
              type: 'gradient',
              gradient: {
                colorFrom: vihoAdminConfig.primary,
                colorTo: '#c481ec',
                stops: [0, 100],
                opacityFrom: 0.4,
                opacityTo: 0.5,
              }
            }
          },
          tooltip: {
            enabled: true,
          },
          labels:{
            show:false
          }

        },
        yaxis: {
          axisBorder: {
            show: false
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
            formatter: function (val) {
              return val + "%";
            }
          }
        },
         colors: [vihoAdminConfig.secondary],

        };
       var chart3 = new ApexCharts(document.querySelector("#column-chart"),
          options3
      );
      
      chart3.render();