// Dashboard 2 JS

(function () {
  var options = {
    series: [
      {
        name: "Sales",
        data: [23, 23, 20, 20, 32, 32, 40, 32, 32, 25, 30, 30],
      },
      {
        name: "sales",
        data: [22, 22, 19, 19, 31, 31, 39, 31, 31, 24, 29, 29],
      },
      {
        name: "sales",
        data: [21, 21, 18, 18, 30, 30, 38, 30, 30, 23, 28, 28],
      },
      {
        name: "sales",
        data: [20, 20, 17, 17, 29, 29, 37, 29, 29, 22, 27, 27],
      },
      {
        name: "sales",
        data: [19, 19, 16, 16, 28, 28, 36, 28, 28, 21, 26, 26],
      },
      {
        name: "sales",
        data: [18, 18, 15, 15, 27, 27, 35, 27, 27, 20, 25, 25],
      },
      {
        name: "sales",
        data: [17, 17, 14, 14, 26, 26, 34, 26, 26, 19, 24, 24],
      },
      {
        name: "sales",
        data: [16, 16, 13, 13, 25, 25, 33, 25, 25, 18, 23, 23],
      },
      {
        name: "sales",
        data: [16, 16, 13, 13, 25, 25, 33, 25, 25, 18, 23, 23],
      },
      {
        name: "sales",
        data: [15, 15, 12, 12, 24, 24, 32, 24, 24, 17, 22, 22],
      },
      {
        name: "sales",
        data: [14, 14, 11, 11, 23, 23, 31, 23, 23, 16, 21, 21],
      },
      {
        name: "sales",
        data: [13, 13, 10, 10, 22, 22, 30, 22, 22, 15, 20, 20],
      },
    ],
    chart: {
      height: 235,
      type: "line",
      toolbar: {
        show: false,
      },
    },
    colors: ["#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5", "#7064F5"],
    fill: {
      type: "gradient",
      gradient: {
        shade: "dark",
        type: "horizontal",
        shadeIntensity: 1,
        gradientToColors: ["#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7", "#FF8BA7"],
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        colorStops: [
          {
            offset: 0,
            color: "#e183b7",
            opacity: 1,
          },
          {
            offset: 20,
            color: "#ff8ba7",
            opacity: 1,
          },
          {
            offset: 30,
            color: "#b377d0",
            opacity: 1,
          },
          {
            offset: 65,
            color: "#7064f5",
            opacity: 1,
          },
          {
            offset: 70,
            color: "#b778cf",
            opacity: 1,
          },
          {
            offset: 80,
            color: "#eb86b2",
            opacity: 1,
          },
          {
            offset: 100,
            color: "#a873d7",
            opacity: 1,
          },
        ],
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "smooth",
      width: 2,
    },
    grid: {
      borderColor: "#e7e7e7",
      position: "back",
      yaxis: {
        lines: {
          show: false,
        },
      },
      column: {
        colors: ["transparent", "rgba(var(--light-background),1)"], // takes an array which will be repeated on columns
        opacity: 0.5,
      },
    },
    xaxis: {
      categories: ["01", "03", "05", "07", "09", "10", "11", "12", "15", "16", "18"],
      tickAmount: 6,
      tickPlacement: "on",
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      tooltip: {
        enabled: false,
      },
    },
    yaxis: {
      min: 5,
      max: 40,
      axisBorder: {
        show: true,
        color: "rgba(var(--chart-border),1)",
        offsetX: 12,
        offsetY: 5,
      },
    },
    legend: {
      show: false,
    },
    tooltip: {
      shared: false,
    },
    responsive: [
      {
        breakpoint: 1400,
        options: {
          chart: {
            height: 210,
          },
        },
      },
      {
        breakpoint: 768,
        options: {
          chart: {
            height: 240,
          },
        },
      },
      {
        breakpoint: 628,
        options: {
          chart: {
            height: 210,
          },
        },
      },
    ],
  };

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

  // monthly profit
  var optionsprofit = {
    labels: ["Shoes", "Grocery", "other"],
    series: [30, 55, 35],
    chart: {
      type: "donut",
      height: 275,
    },
    dataLabels: {
      enabled: false,
    },
    legend: {
      position: "bottom",
      fontSize: "14px",
      fontFamily: "Rubik, sans-serif",
      fontWeight: 500,
      labels: {
        colors: "rgb(var(--chart-text-color),1)",
      },
      markers: {
        width: 6,
        height: 6,
      },
      itemMargin: {
        horizontal: 7,
        vertical: 0,
      },
    },
    stroke: {
      width: 10,
      colors: ["rgba(var(--light2),1)"],
    },
    plotOptions: {
      pie: {
        expandOnClick: false,
        donut: {
          size: "83%",
          labels: {
            show: true,
            name: {
              offsetY: 4,
            },
            total: {
              show: true,
              fontSize: "20px",
              fontFamily: "Rubik, sans-serif",
              fontWeight: 500,
              label: "$ 34,098",
              formatter: () => "Total Profit",
            },
          },
        },
      },
    },
    states: {
      normal: {
        filter: {
          type: "none",
        },
      },
      hover: {
        filter: {
          type: "none",
        },
      },
      active: {
        allowMultipleDataPointsSelection: false,
        filter: {
          type: "none",
        },
      },
    },
    colors: ["#54BA4A", "rgba(var(--theme-default),1)", "#FFA941"],
    responsive: [
      {
        breakpoint: 1425,
        options: {
          chart: {
            height: 270,
          },
        },
      },
      {
        breakpoint: 1400,
        options: {
          chart: {
            height: 320,
          },
        },
      },
      {
        breakpoint: 480,
        options: {
          chart: {
            height: 250,
          },
        },
      },
    ],
  };

  var chartprofit = new ApexCharts(document.querySelector("#profitmonthly"), optionsprofit);
  chartprofit.render();

  // overview chart
  var optionsoverview = {
    series: [
      {
        name: "Earning",
        type: "area",
        data: [44, 55, 35, 50, 67, 50, 55, 45, 32, 38, 45],
      },
      {
        name: "Order",
        type: "area",
        data: [35, 30, 23, 40, 50, 35, 40, 52, 67, 50, 55],
      },
      {
        name: "Refunds",
        type: "area",
        data: [25, 20, 15, 25, 32, 20, 30, 35, 23, 30, 20],
      },
    ],
    chart: {
      height: 340,
      type: "line",
      stacked: false,
      toolbar: {
        show: false,
      },
      dropShadow: {
        enabled: true,
        top: 2,
        left: 0,
        blur: 4,
        color: "#000",
        opacity: 0.08,
      },
    },
    stroke: {
      width: [2, 2, 2],
      curve: "smooth",
    },
    grid: {
      show: true,
      borderColor: "rgba(var(--chart-border),1)",
      strokeDashArray: 0,
      position: "back",
      xaxis: {
        lines: {
          show: true,
        },
      },
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
    },
    plotOptions: {
      bar: {
        columnWidth: "50%",
      },
    },
    colors: ["#7064F5", "#54BA4A", "#FF3364"],
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "vertical",
        opacityFrom: 0.4,
        opacityTo: 0,
        stops: [0, 100],
      },
    },
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov"],
    markers: {
      discrete: [
        {
          seriesIndex: 0,
          dataPointIndex: 2,
          fillColor: "#7064F5",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
          sizeOffset: 3,
        },
        {
          seriesIndex: 1,
          dataPointIndex: 2,
          fillColor: "#54BA4A",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
        },
        {
          seriesIndex: 2,
          dataPointIndex: 2,
          fillColor: "#FF3364",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
        },
        {
          seriesIndex: 0,
          dataPointIndex: 5,
          fillColor: "#7064F5",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
          sizeOffset: 3,
        },
        {
          seriesIndex: 1,
          dataPointIndex: 5,
          fillColor: "#54BA4A",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
        },
        {
          seriesIndex: 2,
          dataPointIndex: 5,
          fillColor: "#FF3364",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
        },
        {
          seriesIndex: 0,
          dataPointIndex: 9,
          fillColor: "#7064F5",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
          sizeOffset: 3,
        },
        {
          seriesIndex: 1,
          dataPointIndex: 9,
          fillColor: "#54BA4A",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
        },
        {
          seriesIndex: 2,
          dataPointIndex: 9,
          fillColor: "#FF3364",
          strokeColor: "rgba(var(--white),1)",
          size: 5,
        },
      ],
      hover: {
        size: 5,
        sizeOffset: 0,
      },
    },
    xaxis: {
      type: "category",
      tickAmount: 11,
      tickPlacement: "on",
      tooltip: {
        enabled: false,
      },
      axisBorder: {
        color: "rgba(var(--chart-border),1)",
      },
      axisTicks: {
        show: false,
      },
    },
    legend: {
      show: false,
    },
    yaxis: {
      min: 0,
      max: 67,
      tickAmount: 6,
      tickPlacement: "between",
      labels: {
        offsetX: -10,
      },
    },
    tooltip: {
      shared: false,
      intersect: false,
    },
    responsive: [
      {
        breakpoint: 1400,
        options: {
          chart: {
            height: 325,
          },
        },
      },
      {
        breakpoint: 1317,
        options: {
          chart: {
            height: 295,
          },
        },
      },
      {
        breakpoint: 1200,
        options: {
          chart: {
            height: 280,
          },
        },
      },
      {
        breakpoint: 1142,
        options: {
          chart: {
            height: 260,
          },
        },
      },
      {
        breakpoint: 992,
        options: {
          chart: {
            height: 292,
          },
          xaxis: {
            type: "category",
            tickAmount: 5,
            tickPlacement: "on",
          },
        },
      },
      {
        breakpoint: 851,
        options: {
          chart: {
            height: 260,
          },
        },
      },
      {
        breakpoint: 343,
        options: {
          xaxis: {
            type: "category",
            tickAmount: 3,
            tickPlacement: "on",
          },
        },
      },
    ],
  };

  var chartoverview = new ApexCharts(document.querySelector("#orderoverview"), optionsoverview);
  chartoverview.render();

  // bar overview chart
  var optionsorder = {
    series: [
      {
        name: "Revenue",
        data: [30, 40, 18, 25, 18, 10, 20, 35, 22, 40, 30, 38, 20, 35, 11, 28, 40, 11, 28, 40, 11, 28, 40, 11, 28, 40, 11],
      },
    ],
    chart: {
      type: "bar",
      height: 180,
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
      },
    },
    colors: ["rgba(var(--light-bg),1)"],
    grid: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
      labels: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },
    yaxis: {
      labels: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },
    fill: {
      opacity: 0.7,
    },
    tooltip: {
      enabled: false,
    },
    states: {
      normal: {
        filter: {
          type: "none",
        },
      },
      hover: {
        filter: {
          type: "none",
        },
      },
      active: {
        allowMultipleDataPointsSelection: false,
        filter: {
          type: "none",
        },
      },
    },
  };

  var chartorder = new ApexCharts(document.querySelector("#order-bar"), optionsorder);
  chartorder.render();

  // visitor chart
  var optionsvisitor = {
    series: [
      {
        name: "Active",
        data: [18, 10, 65, 18, 28, 10],
      },
      {
        name: "Bounce",
        data: [25, 50, 30, 30, 25, 45],
      },
    ],
    chart: {
      type: "bar",
      height: 270,
      toolbar: {
        show: false,
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "50%",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 6,
      colors: ["transparent"],
    },
    grid: {
      show: true,
      borderColor: "rgba(var(--chart-border),1)",
      xaxis: {
        lines: {
          show: true,
        },
      },
    },
    colors: ["#FFA941", "rgba(var(--theme-default),1)"],
    xaxis: {
      categories: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      tickAmount: 4,
      tickPlacement: "between",
      labels: {
        style: {
          fontFamily: "Rubik, sans-serif",
        },
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },
    yaxis: {
      min: 0,
      max: 100,
      tickAmount: 5,
      tickPlacement: "between",
      labels: {
        style: {
          fontFamily: "Rubik, sans-serif",
        },
      },
    },
    fill: {
      opacity: 1,
    },
    legend: {
      position: "top",
      horizontalAlign: "left",
      fontFamily: "Rubik, sans-serif",
      fontSize: "14px",
      fontWeight: 500,
      labels: {
        colors: "rgba(var(--chart-text-color),1)",
      },
      markers: {
        width: 6,
        height: 6,
        radius: 12,
      },
      itemMargin: {
        horizontal: 10,
      },
    },
    responsive: [
      {
        breakpoint: 1639,
        options: {
          chart: {
            height: 255,
          },
        },
      },
      {
        breakpoint: 1400,
        options: {
          chart: {
            height: 272,
          },
        },
      },
      {
        breakpoint: 1366,
        options: {
          plotOptions: {
            bar: {
              columnWidth: "80%",
            },
          },
        },
      },
      {
        breakpoint: 992,
        options: {
          plotOptions: {
            bar: {
              columnWidth: "70%",
            },
          },
        },
      },
      {
        breakpoint: 768,
        options: {
          plotOptions: {
            bar: {
              columnWidth: "30%",
            },
          },
        },
      },
      {
        breakpoint: 576,
        options: {
          plotOptions: {
            bar: {
              columnWidth: "60%",
            },
          },
          grid: {
            padding: {
              right: 5,
            },
          },
        },
      },
    ],
  };

  var chartvisitor = new ApexCharts(document.querySelector("#visitor-chart"), optionsvisitor);
  chartvisitor.render();
})();
