display graph composition history

website/src/icons/ChartBarIcon.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="h-6 w-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 0 1 3 19.875v-6.75ZM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V8.625ZM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 0 1-1.125-1.125V4.125Z"
+      />
+    </svg>
+  );
+}

website/src/icons/DocumentMagnify.tsx

@@ -0,0 +1,21 @@
+import IconProps from "./type";
+
+export default function (props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+      {...props}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"
+      />
+    </svg>
+  );
+}

website/src/pages/Histori.tsx

@@ -1,16 +1,23 @@
 import { createSignal, onMount } from "solid-js";
 import Table from "../components/Table";
-import { Histori } from "../types/Histori";
+import { Histori, PerubahanKomposisi } from "../types/Histori";
 import supabase from "../utils/supabase";
 import { getDates } from "../utils/dates";
 import TrashIcon from "../icons/TrashIcon";
 import { KondisiTapai } from "../types/KondisiTapai";
 import ClockIcon from "../icons/ClockIcon";
+import ChartBarIcon from "../icons/ChartBarIcon";
+import { Chart, registerables } from "chart.js";
 
 export default function () {
+  let canvas: any;
   const [items, setItems] = createSignal<Histori[]>([]);
   const [dataPengujianAwal, setDataPengujianAwal] =
     createSignal<KondisiTapai>();
+  const [showDetail, setShowDetail] = createSignal<boolean>(false);
+  const [dataKomposisi, setDataKomposisi] =
+    createSignal<PerubahanKomposisi[]>();
+  const [chartDetail, setChartDetail] = createSignal<any>();
 
   const getData = async () => {
     const { data } = await supabase
@@ -30,7 +37,7 @@ export default function () {
   };
 
   const deleteHistory = async (id: any) => {
-    const isOk = confirm("Anda yakin menghapus history?");
+    const isOk = confirm("Anda yakin menghapus histori terpilih?");
 
     if (isOk) {
       await supabase.from("histori_fermentasi").delete().eq("id", id);
@@ -38,11 +45,85 @@ export default function () {
     }
   };
 
+  const renderChart = async (berhasil: boolean) => {
+    let labels: any[] = [];
+    let values: any[] = [];
+
+    dataKomposisi()?.forEach((item) => {
+      labels.push(item.jam_ke);
+      values.push(item.kadar_gas);
+    });
+
+    chartDetail()?.destroy();
+
+    const chart = new Chart(canvas, {
+      type: "line",
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: "Kadar Gas",
+            data: values,
+            borderColor: berhasil ? "lightgreen" : "red",
+            cubicInterpolationMode: "monotone",
+            tension: 0.4,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        scales: {
+          x: {
+            display: true,
+            title: {
+              display: true,
+            },
+          },
+          y: {
+            display: true,
+            title: {
+              display: true,
+              text: "Kadar Gas Alkohol",
+            },
+            min: 0,
+            max: 10,
+            ticks: {
+              callback: (val) => {
+                return val + "%";
+              },
+            },
+          },
+        },
+        plugins: {
+          tooltip: {
+            callbacks: {
+              title(_) {
+                return "";
+              },
+              label(tooltipItem) {
+                return (
+                  tooltipItem.dataset.label +
+                  ": " +
+                  tooltipItem.parsed.y.toFixed(2) +
+                  "%"
+                );
+              },
+            },
+          },
+        },
+      },
+    });
+
+    setChartDetail(chart);
+  };
+
   onMount(async () => {
     await getData();
+    Chart.register(...registerables);
   });
 
   return (
+    <>
       <div class="space-y-5">
         <div class="bg-white rounded p-5 shadow">
           <div class="text-xl">Histori</div>
@@ -55,15 +136,36 @@ export default function () {
           </div>
           <Table
             headers={[
+              "",
               "Tanggal",
               "Lama Fermentasi",
               "Rentang Suhu (C)",
               "Status",
-            "Opsi",
+              "",
             ]}
-          items={items().map((item) => [
+            items={items().map((item) => {
+              let sedangBerlangsung: boolean = false;
+              if (
+                !!dataPengujianAwal() &&
+                dataPengujianAwal()!.created_time <= item.waktu_akhir
+              ) {
+                sedangBerlangsung = true;
+              }
+
+              return [
+                sedangBerlangsung ? (
+                  <div class="text-center">
+                    <ClockIcon
+                      class="text-blue-500 h-6 w-6 inline animate-spin"
+                      style={{ "animation-duration": "2s" }}
+                    />
+                  </div>
+                ) : (
+                  ""
+                ),
                 getDates(item.created_at),
-            Math.round((item.waktu_akhir - item.waktu_awal) / 3600) + " Jam",
+                Math.round((item.waktu_akhir - item.waktu_awal) / 3600) +
+                  " Jam",
                 item.rentang_suhu,
                 <span
                   class={
@@ -73,22 +175,64 @@ export default function () {
                 >
                   {item.berhasil ? "SUKSES" : "GAGAL"}
                 </span>,
-            !!dataPengujianAwal() &&
+                <div class="text-center">
-            dataPengujianAwal()!.created_time <= item.waktu_akhir ? (
+                  <button
-              <ClockIcon class="text-blue-500 w-6 h-6" />
+                    type="button"
+                    class="text-blue-400"
+                    onClick={() => {
+                      setDataKomposisi(item.perubahan_komposisi);
+                      renderChart(item.berhasil);
+                      setShowDetail(true);
+                    }}
+                  >
+                    <ChartBarIcon />
+                  </button>
+                  {sedangBerlangsung ? (
+                    ""
                   ) : (
                     <button
                       type="button"
-                class="text-orange-500"
+                      class="text-orange-500 ml-2"
                       onClick={() => deleteHistory(item.id)}
                     >
                       <TrashIcon />
                     </button>
-            ),
+                  )}
-          ])}
+                </div>,
+              ];
+            })}
             class="my-5"
           ></Table>
         </div>
       </div>
+
+      <div
+        class="bg-black bg-opacity-25 fixed top-0 left-0 right-0 bottom-0 z-[500] items-center justify-center p-5 hidden"
+        classList={{ "!flex": showDetail() }}
+      >
+        <div class="bg-white rounded shadow p-5 w-full lg:w-3/4">
+          <div class="text-xl">Detail Histori</div>
+          <div class="text-sm mb-5">
+            Menampilkan data perubahan kadar gas selama histori proses
+            fermentasi.
+          </div>
+          <canvas ref={canvas} style={{ "max-height": "400px" }}></canvas>
+          <div
+            class="text-sm text-center -mt-3"
+            style={{ "font-family": "Arial" }}
+          >
+            Jam Ke-
+          </div>
+          <div class="mt-8 flex space-x-3 justify-end">
+            <button
+              class="bg-gray-400 text-white px-5 py-2 uppercase rounded"
+              onClick={() => setShowDetail(false)}
+            >
+              TUTUP
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
   );
 }

website/src/pages/Pengujian.tsx

@@ -111,7 +111,7 @@ export default function () {
             display: true,
             title: {
               display: true,
-              text: "Nilai",
+              text: "Kadar Gas Alkohol",
             },
             min: 0,
             max: 10,

website/src/types/Histori.ts

@@ -1,3 +1,8 @@
+export type PerubahanKomposisi = {
+    kadar_gas: number;
+    jam_ke: number;
+};
+
 export interface Histori {
     id: number;
     waktu_awal: number;
@@ -6,4 +11,5 @@ export interface Histori {
     berhasil: boolean;
     created_at: string;
     selesai: boolean;
+    perubahan_komposisi: PerubahanKomposisi[];
 }