$(function() {
    "use strict";

  // chart 1

    var options = {
            chart: {
                height: 325,
                type: 'bar',
                stacked: false,
                foreColor: 'rgba(255, 255, 255, 0.65)',
                toolbar: {
                      show: false
                    },
                dropShadow: {
                    enabled: false,
                    opacity: 0.1,
                    blur: 3,
                    left: -7,
                    top: 22,
                }
            },
            plotOptions: {
                bar: {
            columnWidth: '50%',
              endingShape: 'rounded',
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: false,
                formatter: function(val) {
                  return parseInt(val);
                },
                offsetY: -20,
                style: {
                    fontSize: '14px',
                    colors: ["#304758"]
                }
            },
            stroke: {
                show: !0,
                width: 2,
                colors: ["transparent"]
            },
            grid:{
                show: true,
                borderColor: 'rgba(255, 255, 255, 0.12)',
            },
            series: [{
                name: 'External Costs',
                data: [44, 75, 37, 56, 61, 58, 83, 60, 66]
            }, {
                name: 'Internal Costs',
                data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
            }, {
                name: 'Cost Per Hire',
                data: [20, 41, 26, 46, 30, 50, 12, 53, 41]
            }],
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            },
            fill: {
                opacity: 1
            },
            colors: ["rgba(255, 255, 255, 0.60)", "#fff", "rgba(255, 255, 255, 0.25)"],
            tooltip: {
                theme: 'dark',
                y: {
                    formatter: function (val) {
                        return "$ " + val + " "
                    }
                }
            },
			responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
						height: 330,
						stacked: true,
                    },
					legend: {
						show: !0,
						position: "top",
						horizontalAlign: "left",
						offsetX: -20,
						fontSize: "10px",
						markers: {
						  radius: 50,
						  width: 10,
						  height: 10
						}
					  },
					  plotOptions: {
						bar: {
						  columnWidth: '30%'
							}
						}
                }
            }]
        }

        var chart = new ApexCharts(
            document.querySelector("#recruitment-cost"),
            options
        );

        chart.render();


// chart 2
    
    var options = {
            chart: {
                height: 340,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                  //startAngle: -135,
                  //endAngle: 135,
                  hollow: {
                      margin: 12,
                      size: '50%',
                      background: 'rgba(255, 255, 255, 0.12)',
                      image: undefined,
                      imageOffsetX: 0,
                      imageOffsetY: 0,
                      position: 'front',
                      dropShadow: {
                        enabled: true,
                        top: 3,
                        left: 0,
                        blur: 4,
                        opacity: 0.24
                      }
                    },
                    track: {
                      background: 'rgba(255, 255, 255, 0.06)',
                      strokeWidth: '20%',
                      margin: 5, // margin is in pixels
                      dropShadow: {
                        enabled: false,
                        top: -3,
                        left: 0,
                        blur: 4,
                        opacity: 0.35
                      }
                    },
                    dataLabels: {
                        name: {
                            color:'#fff',
                            fontSize: '14px',
                            offsetY: -5
                        },
                        value: {
                            color: '#fff',
                            fontSize: '25px',
                            offsetY: 5
                        },
                        total: {
                            show: true,
                            label: 'Total',
                            color: '#fff',
                            formatter: function (w) {
                                // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                                return 300
                            }
                        }
                    }
                }
            },
            stroke: {
               lineCap: "round",
           },
            fill: {
                opacity: 1
            },
            colors: ["#fff", "rgba(255, 255, 255, 0.50)", "rgba(255, 255, 255, 0.25)", "rgba(255, 255, 255, 0.12)"],
            series: [90, 80, 70, 60],
            labels: ['Career Page', 'Referral', 'Agency', 'Job Boards']
            
        }

       var chart = new ApexCharts(
            document.querySelector("#application-by-source"),
            options
        );
        
        chart.render();




// chart 3
  
  var options = {
            chart: {
                width: 150,
        //height: 150,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    //startAngle: -135,
                    //endAngle: 135,
                    hollow: {
                      margin: 0,
                      size: '70%',
                      background: 'rgba(0, 0, 0, 0.0)',
                      image: undefined,
                      imageOffsetX: 0,
                      imageOffsetY: 0,
                      position: 'front',
                      dropShadow: {
                        enabled: true,
                        top: 3,
                        left: 0,
                        blur: 4,
                        opacity: 0.1
                      }
                    },
                    track: {
                      background: 'rgba(255, 255, 255, 0.12)',
                      strokeWidth: '100%',
                      margin: 0, // margin is in pixels
                      dropShadow: {
                        enabled: true,
                        top: -3,
                        left: 0,
                        blur: 4,
                        opacity: 0.1
                      }
                    },
                    dataLabels: {
                        name: {
                            fontSize: '14px',
                            color: '#fff',
                            offsetY: -10,
              show: false
                        },
                        value: {
                            offsetY: 6,
                            fontSize: '20px',
                            color: '#fff',
                            formatter: function (val) {
                                return val + "%";
                            }
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    shadeIntensity: 0.15,
                    gradientToColors: ['#fff'],
                    inverseColors: false,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 50, 65, 91]
                },
            },
            stroke: {
                dashArray: 4,
            },
            colors: ["#fff"],
            series: [64],
            labels: ['Screening Calls'],
            
        }

       var chart = new ApexCharts(
            document.querySelector("#screening-calls"),
            options
        );
        
        chart.render();





// chart 4
  
  var options = {
            chart: {
                width: 150,
        //height: 150,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    //startAngle: -135,
                    //endAngle: 135,
                    hollow: {
                      margin: 0,
                      size: '70%',
                      background: 'rgba(0, 0, 0, 0.0)',
                      image: undefined,
                      imageOffsetX: 0,
                      imageOffsetY: 0,
                      position: 'front',
                      dropShadow: {
                        enabled: true,
                        top: 3,
                        left: 0,
                        blur: 4,
                        opacity: 0.1
                      }
                    },
                    track: {
                      background: 'rgba(255, 255, 255, 0.12)',
                      strokeWidth: '100%',
                      margin: 0, // margin is in pixels
                      dropShadow: {
                        enabled: true,
                        top: -3,
                        left: 0,
                        blur: 4,
                        opacity: 0.1
                      }
                    },
                    dataLabels: {
                        name: {
                            fontSize: '14px',
                            color: '#fff',
                            offsetY: -10,
              show: false
                        },
                        value: {
                            offsetY: 6,
                            fontSize: '20px',
                            color: '#fff',
                            formatter: function (val) {
                                return val + "%";
                            }
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    shadeIntensity: 0.15,
                    gradientToColors: ['#fff'],
                    inverseColors: false,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 50, 65, 91]
                },
            },
            stroke: {
                dashArray: 4,
            },
            colors: ["#fff"],
            series: [76],
            labels: ['Assignments'],
            
        }

       var chart = new ApexCharts(
            document.querySelector("#assignments"),
            options
        );
        
        chart.render();




// chart 5
  
  var options = {
            chart: {
                width: 150,
        //height: 150,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    //startAngle: -135,
                    //endAngle: 135,
                    hollow: {
                      margin: 0,
                      size: '70%',
                      background: 'rgba(255, 255, 255, 0.0)',
                      image: undefined,
                      imageOffsetX: 0,
                      imageOffsetY: 0,
                      position: 'front',
                      dropShadow: {
                        enabled: true,
                        top: 3,
                        left: 0,
                        blur: 4,
                        opacity: 0.1
                      }
                    },
                    track: {
                      background: 'rgba(255, 255, 255, 0.12)',
                      strokeWidth: '100%',
                      margin: 0, // margin is in pixels
                      dropShadow: {
                        enabled: true,
                        top: -3,
                        left: 0,
                        blur: 4,
                        opacity: 0.1
                      }
                    },
                    dataLabels: {
                        name: {
                            fontSize: '14px',
                            color: '#fff',
                            offsetY: -10,
              show: false
                        },
                        value: {
                            offsetY: 6,
                            fontSize: '20px',
                            color: '#fff',
                            formatter: function (val) {
                                return val + "%";
                            }
                        }
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    shadeIntensity: 0.15,
                    gradientToColors: ['#fff'],
                    inverseColors: false,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 50, 65, 91]
                },
            },
            stroke: {
                dashArray: 4,
            },
            colors: ["#fff"],
            series: [83],
            labels: ['interviews'],
            
        }

       var chart = new ApexCharts(
            document.querySelector("#interviews"),
            options
        );
        
        chart.render();




// chart 6
   
   var options = {
      chart: {
        height: 325,
        type: 'radialBar',
        toolbar: {
          show: false
        }
      },
      plotOptions: {
        radialBar: {
          startAngle: -135,
          endAngle: 225,
           hollow: {
            //margin: 20,
            size: '80%',
            background: 'transparent',
            image: undefined,
            imageOffsetX: 0,
            imageOffsetY: 0,
            position: 'front',
            dropShadow: {
              enabled: true,
              top: 3,
              left: 0,
              blur: 4,
              opacity: 0.24
            }
          },
          track: {
            background: 'rgba(255, 255, 255, 0.12)',
            //strokeWidth: '67%',
            margin: 0, // margin is in pixels
            dropShadow: {
              enabled: true,
              top: -3,
              left: 0,
              blur: 4,
              opacity: 0.35
            }
          },

          dataLabels: {
            showOn: 'always',
            name: {
              offsetY: -10,
              show: false,
              color: '#fff',
              fontSize: '16px'
            },
            value: {
              formatter: function (val) {
          return val + "%";
         },
              color: '#fff',
              fontSize: '40px',
              show: true,
            }
          }
        }
      },
      fill: {
        type: 'gradient',
        gradient: {
          shade: 'light',
          type: 'horizontal',
          shadeIntensity: 0.5,
          gradientToColors: ['#fff'],
          inverseColors: false,
          opacityFrom: 1,
          opacityTo: 1,
          stops: [0, 100]
        }
      },
      colors: ["#fff"],
      series: [75],
      stroke: {
        lineCap: 'round'
      },
      labels: ['Median Ratio'],

    }

    var chart = new ApexCharts(
      document.querySelector("#vacancies-status"),
      options
    );

    chart.render();




// chart 7

var options = {
            chart: {
                height: 330,
                type: 'bar',
				foreColor: 'rgba(255, 255, 255, 0.65)',
                toolbar: {
                  show: false
                },
        dropShadow: {
                    enabled: false,
                    opacity: 0.1,
                    blur: 3,
                    left: -7,
                    top: 22,
                }
            },
            plotOptions: {
                bar: {
                    barHeight: '80%',
                    endingShape: 'rounded',
                    distributed: true,
                    horizontal: true,
                    dataLabels: {
                        position: 'bottom'
                    },
                }
            },
             fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    gradientToColors: [ '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff'],
                    shadeIntensity: 0.60,
                    type: 'vertical',
                    opacityFrom: 0.4,
                    opacityTo: 0.4,
                    stops: [0, 100, 100, 100]
                },
            },
            colors: ['#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff', '#fff'],
            dataLabels: {
                enabled: true,
                textAnchor: 'start',
                style: {
                    colors: ['#fff']
                },
                formatter: function(val, opt) {
                    return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
                },
                offsetX: 0,
                dropShadow: {
                  enabled: true
                }
            },
            series: [{
                data: [950, 730, 848, 570, 840, 580, 900, 1100, 1200, 1280]
            }],
            stroke: {
                width: 1,
              colors: ['#fff'],

            },
            xaxis: {
                categories: ['Direct', 'Google', 'Medium.com', 'Github', 'Envato', 'Youtube', 'cs.champion.com', 'T.co', 'Facebbok', 'LinkedIn'],
            },
            yaxis: {
                labels: {
                    show: false
                }
            },
            tooltip: {
                theme: 'dark',
                x: {
                    show: false
                },
                y: {
                    title: {
                        formatter: function() {
                            return ''
                        }
                    }
                }
            },
			grid:{
			  show: true,
			  borderColor: 'rgba(255, 255, 255, 0.12)',
	        },
			legend:{
				show:false
			}
        }

       var chart = new ApexCharts(
            document.querySelector("#top-referrers"),
            options
        );
        
        chart.render();


// chart 8


var options1 = {
      chart: {
        type: 'area',
        height: 110,
        sparkline: {
          enabled: true
        }
      },
      dataLabels: {
          enabled: false
      },
      fill: {
        type: 'gradient',
          gradient: {
              shade: 'light',
              //gradientToColors: ['rgba(255, 255, 255, 0.12)'],
              shadeIntensity: 1,
              type: 'vertical',
              opacityFrom: 0.7,
              opacityTo: 0.1,
              stops: [0, 100, 100, 100]
          },
      },
      colors: ["#fff"],
      series: [{
        name: 'Employee NPS',
        data: [25, 66, 41, 59, 25, 44, 12, 36, 9, 21]
      }],
      stroke: {
              width: 2.5, 
              curve: 'smooth',
              dashArray: [0]
         },
      tooltip: {
              theme: 'dark',
              x: {
                  show: false
              },

          }
    }

    new ApexCharts(document.querySelector("#emp-nps"), options1).render();



    // chart 9

    var options1 = {
      chart: {
        type: 'area',
        height: 110,
        sparkline: {
          enabled: true
        }
      },
      dataLabels: {
          enabled: false
      },
      fill: {
        type: 'gradient',
          gradient: {
              shade: 'light',
              //gradientToColors: ['rgba(255, 255, 255, 0.12)'],
              shadeIntensity: 1,
              type: 'vertical',
              opacityFrom: 0.7,
              opacityTo: 0.1,
              stops: [0, 100, 100, 100]
          },
      },
      colors: ["#fff"],
      series: [{
        name: 'Training Expenses',
        data: [12, 14, 2, 47, 32, 44, 14, 55, 41, 69]
      }],
      stroke: {
                width: 2.5, 
                curve: 'smooth',
                dashArray: [0]
         },
      tooltip: {
              theme: 'dark',
              x: {
                  show: false
              },

          }
    }

    new ApexCharts(document.querySelector("#training-expenses"), options1).render();



    // chart 10


    var options1 = {
      chart: {
        type: 'area',
        height: 110,
        sparkline: {
          enabled: true
        }
      },
      dataLabels: {
          enabled: false
      },
      fill: {
        type: 'gradient',
          gradient: {
              shade: 'light',
              //gradientToColors: ['rgba(255, 255, 255, 0.12)'],
              shadeIntensity: 1,
              type: 'vertical',
              opacityFrom: 0.7,
              opacityTo: 0.1,
              stops: [0, 100, 100, 100]
          },
      },
      colors: ["#fff"],
      series: [{
        name: 'CSR Activities',
        data: [47, 45, 74, 32, 56, 31, 44, 33, 45, 19]
      }],
      stroke: {
                width: 2.5, 
                curve: 'smooth',
                dashArray: [0]
         },
      tooltip: {
              theme: 'dark',
              x: {
                  show: false
              },

          }
    }

    new ApexCharts(document.querySelector("#csr-activities"), options1).render();


  // chart 11



  var options1 = {
      chart: {
        type: 'area',
        height: 110,
        sparkline: {
          enabled: true
        }
      },
      dataLabels: {
          enabled: false
      },
      fill: {
        type: 'gradient',
          gradient: {
              shade: 'light',
              //gradientToColors: ['rgba(255, 255, 255, 0.12)'],
              shadeIntensity: 1,
              type: 'vertical',
              opacityFrom: 0.7,
              opacityTo: 0.1,
              stops: [0, 100, 100, 100]
          },
      },
      colors: ["#fff"],
      series: [{
        name: 'Starter This Month',
        data: [15, 75, 47, 65, 14, 32, 19, 54, 44, 61]
      }],
      stroke: {
                width: 2.5, 
                curve: 'smooth',
                dashArray: [0]
         },
      tooltip: {
              theme: 'dark',
              x: {
                  show: false
              },

          }
    }

    new ApexCharts(document.querySelector("#starter-this-month"), options1).render();




  // chart 6

    var options = {
            chart: {
                width:200,
                height: 73,
                type: 'bar',
                zoom: {
                      enabled: false
                    },
                foreColor: '#4e4e4e',
                toolbar: {
                      show: false
                    },
            sparkline: {
              enabled: true
          },
          dropShadow: {
                  enabled: true,
                  opacity: 0.1,
                  blur: 3,
                  left: -4,
                  top: 22,
                }
            },
            plotOptions: {
                bar: {
            columnWidth: '30%',
              endingShape: 'rounded',
                }
            },
            stroke: {
                width: 0,   
                curve: 'smooth',
            },
            dataLabels: { 
                enabled: false
            },
            series: [{
                name: 'Bounce Rate',
                data: [47, 45, 74, 14, 56, 74, 14, 11, 7, 39, 82],
            }],
            yaxis: [{
			  y: 0,
			  offsetX: 0,
			  offsetY: 0,
			  padding: {
				left: 0,
				right: 0
			  }
			}],
        tooltip: {
          theme: 'dark',
          x: {
              show: false
          },

      },
        colors: ["#fff"],
        grid:{
            show: false,
            borderColor: 'rgba(66, 59, 116, 0.15)',
        },
			responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 150,
						height: 70,
                    }
                }
            }]
        }

       var chart = new ApexCharts(
            document.querySelector("#bounce-rate"),
            options
        );
        
        chart.render();



    // chart 13
    

    var options = {
            chart: {
                height: 310,
                type: 'bar',
				foreColor: 'rgba(255, 255, 255, 0.65)',
           toolbar: {
                     show: false
                }
            },
            plotOptions: {
                bar: {
            columnWidth: '50%',
              endingShape: 'rounded',
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function(val) {
                  return parseInt(val);
                },
                offsetY: -20,
                style: {
                    fontSize: '14px',
                    colors: ["rgba(255, 255, 255, 0.65)"]
                }
            },
            stroke: {
              width: 0
              },
            series: [{
                name: 'Applications',
                data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2]
            }],
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
                position: 'bottom',
                labels: {
                    offsetY: 0,
                },
                axisBorder: {
                    show: true
                },
                axisTicks: {
                    show: true
                }
            },
              tooltip: {
                    enabled: true,
                    theme: 'dark',
             },
            grid:{
                show: true,
                borderColor: 'rgba(255, 255, 255, 0.12)',
            }, 
            fill: {
                opacity: 1
            },
            colors: ["#ffffff"], 
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function(val) {
                    return parseInt(val);
                  }
                }

            },
            title: {
                text: 'Monthly Application Submitions, 2018',
                floating: true,
                offsetY: 0,
                align: 'center',
                style: {
                    fontSize: '15px',
                    color: '#fff'
                }
            },
			responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        height: 310
                    },
                    legend: {
                        position: 'bottom'
                    },
					title: {
						text: 'Monthly Application Submitions, 2018',
						floating: true,
						offsetY: 0,
						align: 'center',
						style: {
							fontSize: '13px',
							color: '#fff'
						}
					}
                }
            }]
        }

        var chart = new ApexCharts(
            document.querySelector("#submitted-application"),
            options
        );

        chart.render();




  // chart 14

var options = {
            chart: {
                height: 225,
                type: 'area',
                zoom: {
                      enabled: false
                    },
             foreColor: 'rgba(255, 255, 255, 0.65)',
             toolbar: {
                  show: false
                },
          sparkline:{
              enabled:false,
            }
            },
            plotOptions: {
                bar: {
            columnWidth: '10%',
              endingShape: 'rounded',
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                width: 2.5, 
                curve: 'smooth'
            },
            series: [{
                name: 'New Users',
                data: [15, 26, 20, 33, 27, 43, 17, 26, 19]
            },{
                name: 'Returning Users',
                data: [33, 21, 42, 19, 32, 25, 36, 29, 49]
            }],

            xaxis: {
                type: 'month',
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"],                
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function(val) {
                    return parseInt(val);
                  }
                }

            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    gradientToColors: ['#fff', 'rgba(255, 255, 255, 0.30)'],
                    shadeIntensity: 1,
                    type: 'vertical',
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 80, 100]
                },
            },
            colors: ['#fff', 'rgba(255, 255, 255, 0.30)'],
            legend: {
                show: !0,
                position: "top",
                horizontalAlign: "left",
                offsetX: -20,
                fontSize: "12px",
                markers: {
                  radius: 50,
                  width: 10,
                  height: 10
                }
              },
            grid:{
                show: true,
                borderColor: 'rgba(255, 255, 255, 0.12)',
            },
            tooltip: {
                theme: 'dark',
                x: {
                    format: 'dd/MM/yy HH:mm',
                },

            },
			responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        height: 300
                    },
                    legend: {
                        offsetX: -20,
                        fontSize: "12px", 
                    }
                }
            }]
        }

        var chart = new ApexCharts(
            document.querySelector("#users-status"),
            options
        );

        chart.render();          











    });