Make proper line chart with random data

src-tauri/Cargo.lock

@@ -306,8 +306,10 @@ checksum = "a21f936df1771bf62b77f047b726c4625ff2e8aa607c01ec06e5a05bd8463401"
 dependencies = [
  "android-tzdata",
  "iana-time-zone",
+ "js-sys",
  "num-traits",
  "serde",
+ "wasm-bindgen",
  "windows-targets 0.52.6",
 ]
 
@@ -2731,6 +2733,7 @@ dependencies = [
 name = "tauri-eval"
 version = "0.1.0"
 dependencies = [
+ "chrono",
  "rand 0.8.5",
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -15,6 +15,7 @@ tauri = { version = "1", features = ["shell-open"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rand = "0.8.5"
+chrono = "0.4.38"
 
 [features]
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!

src-tauri/src/main.rs

@@ -1,6 +1,7 @@
 // Prevents additional console window on Windows in release, DO NOT REMOVE!!
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
+use chrono::prelude::*;
 use rand::Rng;
 use serde::Serialize;
 
@@ -11,20 +12,25 @@ fn greet(name: &str) -> String {
 }
 
 #[derive(Serialize)]
-struct Dataset {
-    data: [u8; 3],
+struct DataPoint {
+    value: f32,
+    timestamp: String,
 }
 
 #[tauri::command]
-fn random_data() -> Dataset {
+fn random_data() -> Vec<DataPoint> {
     let mut rng = rand::thread_rng();
-    Dataset {
-        data: [
-            rng.gen_range(0..100),
-            rng.gen_range(0..100),
-            rng.gen_range(0..100),
-        ],
+
+    let mut data: Vec<DataPoint> = Vec::with_capacity(100);
+
+    for _ in 0..100 {
+        data.push(DataPoint {
+            value: rng.gen_range(0..100) as f32,
+            timestamp: Utc::now().format("%H:%M:%S").to_string(),
+        })
     }
+
+    data
 }
 
 fn main() {

src/components/Graph.vue

@@ -1,18 +1,23 @@
 <script lang="ts">
 import { ref } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
-import { Bar } from 'vue-chartjs';
-import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
+import { Line } from 'vue-chartjs';
+import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';
 
-ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);
+ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement);
 
 export default {
-  name: 'BarChart',
-  components: { Bar },
+  name: 'LineChart',
+  components: { Line },
   setup() {
     const chartData = ref({
-      labels: ['January', 'February', 'March'],
-      datasets: [{ data: [40, 20, 12] }]
+      datasets: [{ // Ensure datasets is an array
+        label: 'My Dataset', // Add a label for the dataset
+        data: [], // Initial data
+        fill: false, // Set to true if you want the area under the line to be filled
+        borderColor: 'blue', // Set the line color
+        tension: 0.1 // Adjust the tension for smoothness
+      }]
     });
 
     const chartOptions = {
@@ -21,6 +26,15 @@ export default {
         y: {
           min: 0,
           max: 100
+        },
+        x: {
+          ticks: {
+            callback: (value, index, values) => {
+              // Show only 5 timestamps on the x-axis
+              const step = Math.floor(values.length / 5);
+              return index % step === 0 ? chartData.value.labels[index] : ''; // Show the label only for selected indices
+            }
+          }
         }
       }
     };
@@ -28,9 +42,18 @@ export default {
     const updateData = async () => {
       const my_data = await invoke("random_data");
 
+      const values = my_data.map((point: { value: number }) => point.value);
+      const timestamps = my_data.map((point: { timestamp: string }) => point.timestamp);
+
       chartData.value = {
-        labels: ['January', 'February', 'March'],
-        datasets: [{ data: my_data.data }]
+        labels: timestamps,
+        datasets: [{
+          label: 'My Dataset', // Add a label for the dataset
+          data: values, // Access the data property
+          fill: false, // Set to true if you want the area under the line to be filled
+          borderColor: 'green', // Set the line color
+          tension: 0.1 // Adjust the tension for smoothness
+        }]
       };
     };
 
@@ -44,7 +67,7 @@ export default {
 </script>
 
 <template>
-  <Bar id="my-chart-id" :options="chartOptions" :data="chartData" />
+  <Line id="my-chart-id" :options="chartOptions" :data="chartData" />
   <button @click="updateData">Click me</button>
 </template>