$(function () {

  // =====================================
  // Data Berdasarkan Role Pengguna
  // =====================================
  var users_by_role = {
    chart: {
      type: 'bar',
      height: 330,
      fontFamily: "'Plus Jakarta Sans', sans-serif",
      foreColor: "#ffffff",
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '55%',
        endingShape: 'rounded'
      },
    },
    dataLabels: {
      enabled: true,
      style: {
        colors: ['#000000']
      }
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent']
    },
    series: [
      {
        name: 'Jumlah',
        data: [23, 46, 11, 8, 3]
      }
    ],
    xaxis: {
      categories: ['Dokter', 'Perawat', 'Ahli bedah mulut', 'Peneliti', 'Operator'],
    },
    yaxis: {
      title: {
        text: 'Jumlah Pengguna'
      }
    },
    fill: {
      opacity: 1,
      colors: ['#abf7f7']
    },
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    }
  };

  // Render chart
  var chart = new ApexCharts(document.querySelector("#users_by_role"), users_by_role);
  chart.render();


  // =====================================
  // Data Jenis Terapi
  // =====================================
  var data_jenis_terapi = {
    color: "#adb5bd",
    series: [7, 67, 123],
    labels: ["Labioplasty", "Palatoplasty", "Gnatoplasty"],
    chart: {
      width: 180,
      type: "pie",
      fontFamily: "'Plus Jakarta Sans', sans-serif",
      foreColor: "#ffffff",
    },
    plotOptions: {
      pie: {
        startAngle: 0,
        endAngle: 360,
        expandOnClick: false,
      },
    },
    stroke: {
      show: false,
    },

    dataLabels: {
      enabled: false,
    },

    legend: {
      show: false,
    },
    colors: ["#f30404", "#f38004", "#f3b304"],

    responsive: [
      {
        breakpoint: 991,
        options: {
          chart: {
            width: 150,
          },
        },
      },
    ],
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

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


  // =====================================
  // Data Jenis Kelamin
  // =====================================
  var data_jenis_kelamin = {
    color: "#adb5bd",
    series: [33, 24],
    labels: ["Laki-Laki", "Perempuan"],
    chart: {
      width: 180,
      type: "pie",
      fontFamily: "'Plus Jakarta Sans', sans-serif",
      foreColor: "#ffffff",
    },
    plotOptions: {
      pie: {
        startAngle: 0,
        endAngle: 360,
        expandOnClick: false,
      },
    },
    stroke: {
      show: false,
    },

    dataLabels: {
      enabled: false,
    },

    legend: {
      show: false,
    },
    colors: ["#4693ff", "#e680ff"],

    responsive: [
      {
        breakpoint: 991,
        options: {
          chart: {
            width: 150,
          },
        },
      },
    ],
    tooltip: {
      theme: "dark",
      fillSeriesColor: false,
    },
  };

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

})