From 0a1ec45f2b03a4908facfbaf14ca08c77d36482e Mon Sep 17 00:00:00 2001
From: Muhammad Izza Alfiansyah <iansyah724@gmail.com>
Date: Wed, 10 Apr 2024 18:57:55 +0700
Subject: [PATCH] add chart

---
 website/src/components/Table.tsx |  4 +-
 website/src/pages/Index.tsx      | 80 +++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/website/src/components/Table.tsx b/website/src/components/Table.tsx
index 59addb4..1198f86 100644
--- a/website/src/components/Table.tsx
+++ b/website/src/components/Table.tsx
@@ -10,7 +10,9 @@ export default function (props: TableProps) {
 
   return (
     <div class="overflow-x-auto">
-      <table class={"border-collapse w-full " + otherProps.class}>
+      <table
+        class={"border-collapse w-full whitespace-nowrap " + otherProps.class}
+      >
         <thead>
           <tr>
             <For each={props.headers}>
diff --git a/website/src/pages/Index.tsx b/website/src/pages/Index.tsx
index ff28fea..016dbad 100644
--- a/website/src/pages/Index.tsx
+++ b/website/src/pages/Index.tsx
@@ -1,7 +1,85 @@
+import { createSignal, onMount } from "solid-js";
 import BeakerIcon from "../icons/BeakerIcon";
 import EyeDropperIcon from "../icons/EyeDropperIcon";
+import { Chart, registerables } from "chart.js";
 
 export default function () {
+  let canvas: any;
+  const [chart, setChart] = createSignal<Chart | null>(null);
+
+  const renderChart = () => {
+    const date = new Date();
+    const his =
+      date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
+    const val = Math.round(Math.random() * 30);
+
+    let labels = [his];
+    let data = [val];
+
+    while (labels.length < 10) {
+      labels.push("-");
+    }
+
+    while (data.length < 10) {
+      data.push(0);
+    }
+
+    if (!chart()) {
+      const myChart = new Chart(canvas, {
+        type: "line",
+        data: {
+          labels: labels.reverse(),
+          datasets: [
+            {
+              label: "Kadar Gas",
+              data: data.reverse(),
+              borderColor: "#4784f5",
+              fill: true,
+              cubicInterpolationMode: "monotone",
+              tension: 0.4,
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          scales: {
+            x: {
+              display: true,
+              title: {
+                display: true,
+              },
+            },
+            y: {
+              display: true,
+              title: {
+                display: true,
+                text: "Nilai",
+              },
+              suggestedMin: 0,
+              suggestedMax: 50,
+            },
+          },
+        },
+      });
+
+      setChart(myChart);
+    } else {
+      chart()?.data.labels?.splice(0, 1);
+      chart()?.data.labels?.push(his);
+      chart()?.data.datasets[0].data.splice(0, 1);
+      chart()?.data.datasets[0].data.push(val);
+
+      chart()?.update();
+    }
+
+    setTimeout(renderChart, 1000 * 60);
+  };
+
+  onMount(() => {
+    Chart.register(...registerables);
+    renderChart();
+  });
+
   return (
     <div class="space-y-5">
       <div class="flex flex-wrap gap-5">
@@ -21,7 +99,7 @@ export default function () {
       </div>
       <div class="bg-white rounded shadow p-5">
         <div class="text-xl">Grafik Kadar Gas</div>
-        <div class="h-[300px]"></div>
+        <canvas ref={canvas}></canvas>
       </div>
     </div>
   );