/*=========================================================================================

    File Name: invoice-summary.js

    Description: Invoices summary configurations

    ----------------------------------------------------------------------------------------

    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template

    Author: PIXINVENT

    Author URL: http://www.themeforest.net/user/pixinvent

==========================================================================================*/

// custom colors declaration

var $primary = "#666ee8",

  $secondary = "#6B6F82",

  $success = "#1C9066",

  $info = "#1E9FF2",

  $warning = "#FF9149",

  $danger = "#FF4961";



var $themeColor = [$primary, $success, $info, $warning, $danger, $secondary];



$(document).ready(function () {

  var radialBarMultipleChart = {

    chart: {

      height: 550,

      type: "radialBar"

    },

    responsive: [

      {

        breakpoint: 530,

        options: {

          chart: {

            height: 350

          },

        }

      }

    ],

    plotOptions: {

      radialBar: {

        dataLabels: {

          name: {

            fontSize: "22px"

          },

          value: {

            fontSize: "16px"

          },

          total: {

            show: true,

            label: "Total",

            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 249;

            }

          }

        }

      }

    },

    fill: {

      colors: $themeColor

    },

    series: [44, 55, 67, 83],

    labels: ["Apples", "Oranges", "Bananas", "Berries"]

  };

  // Initializing Radial Bar Multiple Chart

  var radial_bar_multiple_chart = new ApexCharts(

    document.querySelector("#invoice-total-recievables"),

    radialBarMultipleChart

  );

  radial_bar_multiple_chart.render();



  var columnBasicChart = {

    chart: {

      height: 350,

      type: "bar"

    },

    plotOptions: {

      bar: {

        horizontal: false,

        columnWidth: "55%",

        endingShape: "rounded"

      }

    },

    dataLabels: {

      enabled: false

    },

    stroke: {

      show: true,

      width: 2,

      colors: ["transparent"]

    },

    series: [

      {

        name: "Net Profit",

        data: [44, 55, 57, 56, 61, 58, 63, 60, 66]

      },

      {

        name: "Revenue",

        data: [76, 85, 101, 98, 87, 105, 91, 114, 94]

      },

      {

        name: "Free Cash Flow",

        data: [35, 41, 36, 26, 45, 48, 52, 53, 41]

      }

    ],

    xaxis: {

      categories: [

        "Feb",

        "Mar",

        "Apr",

        "May",

        "Jun",

        "Jul",

        "Aug",

        "Sep",

        "Oct"

      ]

    },

    yaxis: {

      title: {

        text: "$ (thousands)"

      }

    },

    fill: {

      opacity: 1

    },

    tooltip: {

      y: {

        formatter: function (val) {

          return "$ " + val + " thousands";

        }

      }

    },

    fill: {

      colors: $themeColor

    }

  };

  // Initializing Column Basic Chart

  var column_basic_chart = new ApexCharts(

    document.querySelector("#sales-and-expenses"),

    columnBasicChart

  );

  column_basic_chart.render();



  var pieDonutSimpleChart = {

    chart: {

      height: 350,

      type: "donut"

    },

    series: [44, 55, 41, 17, 15],

    responsive: [

      {

        breakpoint: 1200,

        options: {

          chart: {

            width: 300

          },

          legend: {

            position: "bottom"

          }

        }

      },

      {

        breakpoint: 768,

        options: {

          chart: {

            width: 520

          },

          legend: {

            position: "right"

          }

        }

      },

      {

        breakpoint: 620,

        options: {

          chart: {

            width: 450

          },

          legend: {

            position: "right"

          }

        }

      },

      {

        breakpoint: 480,

        options: {

          chart: {

            width: 250

          },

          legend: {

            position: "bottom"

          }

        }

      }

    ],

    fill: {

      colors: $themeColor

    }

  };



  // Initializing Pie Donut Simple Chart

  var pie_donut_simple_chart = new ApexCharts(

    document.querySelector("#your-top-expenses"),

    pieDonutSimpleChart

  );

  pie_donut_simple_chart.render();

});

