Added Line chart component from cloud

frontend/src/components/LineChartWrapper.jsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useContext, memo, useMemo } from 'react'
+import {getTheme} from '../theme.jsx';
+import { Context } from '../context/ContextApi.jsx';
+
+import {
+	Typography,
+} from '@mui/material';
+
+import { 
+	BarChart,
+	BarSeries,
+	Bar,
+	BarLabel,
+
+	GridlineSeries,
+	Gridline,
+	TooltipArea,
+	ChartTooltip,
+	TooltipTemplate,
+} from 'reaviz';
+
+const LineChartWrapper = (props) => {
+	const {keys, inputname, height, width, border} = props
+
+  	const [hovered, setHovered] = useState("");
+	const {themeMode} = useContext(Context)
+	const theme = getTheme(themeMode)
+
+	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)
+
+	if (inputdata?.key !== undefined && inputdata?.key !== null && inputdata?.key !== "" && inputdata?.datasets !== undefined && inputdata?.datasets !== null && inputdata?.datasets.length > 0 && inputdata?.labels !== undefined && inputdata?.labels !== null && inputdata?.labels.length > 0) {
+
+		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 = {
+					"key": inputdata.labels[key] !== undefined ? inputdata.labels[key] : key,
+					"data": tmpdata.data[key],
+				}
+
+				newarray.push(entry)
+			}
+
+			inputdata = newarray
+		}
+
+	}
+
+	if (inputdata === undefined || inputdata === null) {
+		return (
+			<Typography> 
+				Invalid linegraph data format
+			</Typography> 
+		)
+	}
+
+	var defaultStyle = {
+		color: "white", 
+		padding: 30, 
+		marginTop: 15, 
+		overflow: "hidden", 
+
+		border: "1px solid rgba(255,255,255,0.3)", 
+		borderRadius: theme.palette?.borderRadius, 
+		backgroundColor: theme.palette.platformColor, 
+	}
+
+	if (border === false) {
+		defaultStyle.border = "none"
+		defaultStyle.borderRadius = 0
+		defaultStyle.backgroundColor = "transparent"
+	}
+
+	return (
+		<div style={defaultStyle}>
+			<Typography variant="h6" style={{marginBotton: 30, }}>
+				{newname}
+			</Typography>
+
+			<BarChart
+				style={{marginTop: 100, }}
+				width={"100%"}
+				height={height}
+				data={inputdata}
+
+		      	series={
+					<BarSeries
+					  bar={
+						<Bar />
+					  } 
+					/>
+				}
+				gridlines={
+					<GridlineSeries line={<Gridline direction="all" />} />
+				}
+			/>
+
+		</div>
+	)
+}
+
+export default LineChartWrapper;