Frontend rebuild with all new components

2024-10-18 10:31:23 +02:00
parent c02e976dbb
commit 78bd8f29df
6 changed files with 1913 additions and 0 deletions
@@ -0,0 +1,144 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import { toast } from "react-toastify";
+
+export const LoadStats = (globalUrl, cachekey) => {
+	if (globalUrl === undefined) {
+		console.log("Error: Global URL is undefined")
+		return
+	}
+
+	if (cachekey === undefined) {
+		console.log("Error: Cachekey is undefined")
+		return
+	}
+
+	var basedata = {
+		"key": cachekey,
+		"total": 0,
+		"available_keys": [],
+		"labels": [],
+		"datasets": [
+			{
+				"label": "",
+				"data": [],
+				"backgroundColor": [],
+				"barThickness": 15, 
+			}
+		]
+	}
+
+	//const url = `${globalUrl}/api/v1/stats/app_executions_test2`
+	//cachekey = cachekey.replace(" ", "_", -1)
+	const url = `${globalUrl}/api/v1/stats/${cachekey}`
+	return fetch(url, {
+		method: "GET",
+		credentials: "include",
+	})
+	.then((resp) => {
+		return resp.json()
+	}).then((respJson) => {
+		const selectedIndex = 0
+
+		if (respJson.success === true) {
+			for (let entryKey in respJson.entries) {
+				const entry = respJson.entries[entryKey]
+				basedata.labels.push(entry.date)
+
+				basedata.datasets[0].data.push(entry.value)
+				basedata.datasets[0].backgroundColor.push(entry.value > 0 ? "rgba(255,255,255,0.4)" : "red")
+			}
+
+			basedata.available_keys = respJson.available_keys
+			basedata.total = respJson.total
+
+			return basedata 
+		} else {
+			console.log("Failed to get stats")
+			return basedata
+		}
+	})
+	.catch((err) => {
+		toast("Failed to get stats")
+		return basedata
+	})
+}
+
+const DashboardBarchart = (props) => {
+	const { timelineData, title, height, } = props;
+	var inputHeight = 15 
+	if (height !== undefined && height !== null) {
+		inputHeight = height
+	}
+
+	const barOptions = {
+		plugins: {
+    		tooltip: {
+      			enabled: true, // Ensure tooltips are enabled
+			},
+	  	},
+	    tooltips: {
+	      mode: 'index',
+	      intersect: false,
+	    },
+        legend: {
+            display: false
+        },
+        layout: {
+            padding: {
+                top: 0, // Adjust the top padding as needed
+                bottom: -10, // Adjust the bottom padding as needed
+                left: 0, // Adjust the left padding as needed
+                right: 0, // Adjust the right padding as needed
+            },
+        },
+        scales: {
+			y: {
+				beginAtZero: false,
+			},
+            yAxes: [{
+                ticks: {
+                    display: false 
+                },
+				beginAtZero: false,
+            }],
+            xAxes: [{
+                ticks: {
+                    display: false 
+                },
+				beginAtZero: false,
+            }]
+        },
+        tooltips: {
+            callbacks: {
+                label: function (tooltipItem, data) {
+                    const label = data.labels[tooltipItem.index]
+                    return label.split('\n')[0]
+                },
+                afterLabel: function (tooltipItem, data) {
+					const amount = tooltipItem.value === undefined || tooltipItem.value === null ? 0 : tooltipItem.value
+                    return `Amount: ${amount}` 
+                },
+                title: function () {
+                    return title === undefined ? '' : title
+                }
+            }
+        }
+    }
+
+	return (
+		<Bar
+	        data={timelineData}
+	        options={barOptions}
+			height={inputHeight}
+	        getElementAtEvent={(elements) => {
+	      	  if (elements && elements.length > 0) {
+	      		  //toast("Click event")
+	      		  console.log("Clicked: ", elements)
+	      	  }
+	        }}
+	    />
+	)
+}
+
+export default DashboardBarchart;