initial commit

2026-06-06 10:05:39 +07:00
commit b22608adbc
1577 changed files with 641460 additions and 0 deletions
@@ -0,0 +1,165 @@
+$(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();
+
+})