add chart

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}>

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>
   );