Fixed debouncecallback ref

frontend/src/components/LineChartWrapper.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useContext, memo, useMemo } from 'react'
 import {getTheme} from '../theme.jsx';
 import { Context } from '../context/ContextApi.jsx';
+import { toast } from "react-toastify";
 
 import {
 	Typography,
@@ -14,19 +15,104 @@ import {
 
 	GridlineSeries,
 	Gridline,
-	TooltipArea,
 	ChartTooltip,
 	TooltipTemplate,
+	TooltipArea,
 } from 'reaviz';
 
+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
+
+		//console.log("Stats response: ", respJson)
+
+		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 LineChartWrapper = (props) => {
-	const {keys, inputname, height, width, border} = props
+	const {keys, inputname, height, width, border, color} = props
 
   	const [hovered, setHovered] = useState("");
 	const {themeMode} = useContext(Context)
 	const theme = getTheme(themeMode)
 
-	var inputdata = keys.data === undefined ? keys : keys.data
+	// Correct format:
+	/* keys={[
+	  {
+		key: "2025-07-23T00:00:09.409718Z",
+		data: 24,
+	  },
+	  {
+		key: "2025-07-24T00:00:09.409718Z",
+		data: 50,
+	  },
+	  {
+		key: "2025-07-25T00:00:09.409718Z",
+		data: 75,
+	  },
+	  {
+		key: "2025-07-26T00:00:09.409718Z",
+		data: 42,
+	  },
+	]}
+	*/
+
+	var inputdata = keys?.data === undefined ? keys : keys.data
 
 	var newname = inputname === undefined || inputname === null ? "" : inputname.trim().replaceAll("_", " ")
 	newname = newname.charAt(0).toUpperCase() + newname.slice(1)
@@ -35,7 +121,6 @@ const LineChartWrapper = (props) => {
 
 		var tmpdata = inputdata?.datasets[0]
 		if (tmpdata?.data !== undefined && tmpdata?.data !== null && tmpdata?.data.length > 0 && inputdata?.labels?.length === tmpdata?.data?.length) {
-			console.log("Fix it!")
 			var newarray = []
 			for (var key in tmpdata.data) {
 				var entry = {
@@ -48,26 +133,25 @@ const LineChartWrapper = (props) => {
 
 			inputdata = newarray
 		}
-
 	}
 
 	if (inputdata === undefined || inputdata === null) {
-		return (
+		return null /*(
 			<Typography> 
 				Invalid linegraph data format
 			</Typography> 
-		)
+		)*/
 	}
 
 	var defaultStyle = {
 		color: "white", 
-		padding: 30, 
+		padding: "5px 5px 10px 5px", 
 		marginTop: 15, 
 		overflow: "hidden", 
 
 		border: "1px solid rgba(255,255,255,0.3)", 
 		borderRadius: theme.palette?.borderRadius, 
-		backgroundColor: theme.palette.platformColor, 
+		//backgroundColor: theme.palette.platformColor, 
 	}
 
 	if (border === false) {
@@ -76,11 +160,64 @@ const LineChartWrapper = (props) => {
 		defaultStyle.backgroundColor = "transparent"
 	}
 
+	// Check if it's a list or not 
+	if (!Array.isArray(inputdata) || inputdata.length === 0 || (inputdata.length > 0 && (inputdata[0].key === undefined && inputdata[0].data === undefined))) {
+		console.log("Invalid graph data format: ", inputdata)
+		console.log("Expected format: [{key: 'label1', data: 10}, {key: 'label2', data: 20}]")
+		//inputdata = inputdata?.datasets[0]?.data
+		return null
+	}
+
+	//console.log("FORMAT: ", inputdata)
+
+	const tooltip = <TooltipArea
+					tooltip={
+					<ChartTooltip
+						placement={"top"}
+						followCursor={true}
+						content={(data) => (
+						<div style={{
+							borderRadius: 4,
+							backgroundColor: theme.palette.inputColor,
+							border: theme.palette.defaultBorder,
+							color: theme.palette.text.primary,
+							padding: 6,
+							maxWidth: 240,
+						}}>
+							<Typography variant="body2" style={{fontWeight: 600}}>{data?.x ?? ''}</Typography>
+							<Typography variant="body2">{data?.y ?? ''}</Typography>
+						</div>
+						)}
+					/>
+					}
+				/>;
+	
+	const selectedColor = color === undefined || color === null || color === "" ? "" : color
+	const barseries = color === undefined || color === null || color === "" ?
+		<BarSeries
+		  bar={
+			<Bar 
+			/>
+		  } 
+		  tooltip={tooltip}
+		/>
+		:
+		<BarSeries
+		  colorScheme={[selectedColor]}
+		  bar={
+			<Bar 
+			/>
+		  } 
+		  tooltip={tooltip}
+		/>
+
 	return (
 		<div style={defaultStyle}>
-			<Typography variant="h6" style={{marginBotton: 30, }}>
-				{newname}
-			</Typography>
+			{newname !== "" &&
+				<Typography variant="h6" style={{paddingBottom: 25, }}>
+					{newname}
+				</Typography>
+			}
 
 			<BarChart
 				style={{marginTop: 100, }}
@@ -89,11 +226,8 @@ const LineChartWrapper = (props) => {
 				data={inputdata}
 
 		      	series={
-					<BarSeries
-					  bar={
-						<Bar />
-					  } 
-					/>
+					barseries
+					
 				}
 				gridlines={
 					<GridlineSeries line={<Gridline direction="all" />} />