add chart for pengujian data

website/src/pages/Index.tsx

@@ -214,7 +214,7 @@ export default function () {
           </div>
           <div class="bg-white rounded shadow p-5">
             <div class="text-xl">Grafik Kadar Gas</div>
-            <canvas ref={canvas}></canvas>
+            <canvas ref={canvas} style={{ "max-height": "400px" }}></canvas>
           </div>
         </div>
       </div>

website/src/pages/Pengujian.tsx

@@ -3,8 +3,10 @@ import Table from "../components/Table";
 import supabase from "../utils/supabase";
 import { KondisiTapai } from "../types/KondisiTapai";
 import { getDates, getTimes } from "../utils/dates";
+import { Chart, registerables } from "chart.js";
 
 export default function () {
+  let canvas: any;
   const [items, setItems] = createSignal<KondisiTapai[]>([]);
 
   const getData = async () => {
@@ -17,23 +19,108 @@ export default function () {
     setItems(data as KondisiTapai[]);
   };
 
+  const renderChart = async () => {
+    let labels = [];
+    let kadarRegresi = [];
+    let kadarAktual: any[] = [];
+    let jam: any[] = [];
+    let i = 0;
+    let j = 0;
+
+    const epochTimeAwal = items()[items().length - 1].created_time;
+    items()
+      .reverse()
+      .forEach((item) => {
+        const lamaJam = item.created_time - epochTimeAwal;
+        jam.push(Math.round(lamaJam / 3600));
+        kadarAktual.push(item.kadar_gas);
+      });
+
+    while (i <= 72) {
+      const jamPengujian = jam[j];
+      const x = jamPengujian || i;
+      const nilaiRegresi = (-0.000006 * x ** 2 + 0.0013 * x + 0.002) * 100;
+      const nilaiRegresiPertiga = nilaiRegresi / 3;
+
+      kadarRegresi.push(nilaiRegresi - nilaiRegresiPertiga);
+
+      if (jamPengujian) {
+        labels.push(jamPengujian.toString());
+        i = jamPengujian + 6;
+      } else {
+        labels.push(i.toString());
+        i += 6;
+      }
+
+      j += 1;
+    }
+
+    new Chart(canvas, {
+      type: "line",
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: "Kadar Aktual",
+            data: kadarAktual,
+            borderColor: "lightgreen",
+            cubicInterpolationMode: "monotone",
+            tension: 0.4,
+          },
+          {
+            label: "Kadar Regresi",
+            data: kadarRegresi,
+            borderColor: "#4784f5",
+            cubicInterpolationMode: "monotone",
+            tension: 0.4,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        scales: {
+          x: {
+            display: true,
+            title: {
+              display: true,
+            },
+          },
+          y: {
+            display: true,
+            title: {
+              display: true,
+              text: "Nilai",
+            },
+            min: 0,
+            max: 10,
+          },
+        },
+      },
+    });
+  };
+
   onMount(async () => {
     await getData();
+    Chart.register(...registerables);
+    await renderChart();
   });
 
   return (
     <div class="space-y-5">
       <div class="bg-white rounded shadow p-5">
-        Keterangan : Kondisi tape dalam keadaan kurang baik. Perubahan kadar
-        gas, suhu, dan kelembaban tidak signifikan. kemungkinan fermentasi
-        gagal.
+        <div class="text-xl">Analisis Data</div>
+        <p class="text-sm mt-3">
+          NB : Sistem menampilkan perubahan kandungan dari proses fermentasi
+          tiap beberapa jam sekali. Jika kadar aktual signifikan (lebih tinggi
+          atau sama dengan dari kadar regresi), maka proses fermentasi
+          berpotensi berhasil. Jika kadar aktual dibawah dari kadar regresi,
+          maka proses fermentasi berpotensi gagal.
+        </p>
+      </div>
+      <div class="bg-white rounded shadow p-5">
+        <canvas ref={canvas} style={{ "max-height": "300px" }}></canvas>
       </div>
       <div class="bg-white rounded shadow p-5">
-        <div class="text-xl">Analisis Data</div>
-        <p class="text-sm">
-          Menampilkan perubahan kandungan dari proses fermentasi selama 6 jam
-          sekali.
-        </p>
         <Table
           class="my-5"
           headers={["Tanggal", "Jam", "Kadar Gas", "Suhu", "Kelembaban"]}