Components: NoData: Show no data component when theres no data

2 files changed, 17 insertions, 3 deletions

diff --git a/src/components/Graphs/DonutChart.tsx b/src/components/Graphs/DonutChart.tsx
index a80876e..1f9755f 100644
--- a/src/components/Graphs/DonutChart.tsx
+++ b/src/components/Graphs/DonutChart.tsx
@@ -12,6 +12,7 @@ import { useEffect, useState } from 'react';
 import { PolarArea } from 'react-chartjs-2';
 
 import * as ss from 'simple-statistics';
+import NoData from '../Other/NoData';
 
 ChartJS.register(
 	CategoryScale,
@@ -67,10 +68,15 @@ export default function LineGraph(props: any) {
 		fetchData()
 	}, [props.timeframe]);
 
+	console.log("length: aaa", data.datasets.length)
+
 	return (
-		<div>
+		<div className="flex-grow flex-1">
 			<p className="text-center">{props.name}</p>
-			<PolarArea data={data} options={options} />
+			{data.datasets.length > 0 ?
+				<PolarArea data={data} options={options} />
+				:
+				<NoData />}
 		</div>
 	)
 }
diff --git a/src/components/Graphs/LineGraph.tsx b/src/components/Graphs/LineGraph.tsx
index 6ef1f89..8d11e0f 100644
--- a/src/components/Graphs/LineGraph.tsx
+++ b/src/components/Graphs/LineGraph.tsx
@@ -11,6 +11,7 @@ import { format } from 'date-fns'
 
 import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
+import NoData from '../Other/NoData';
 
 ChartJS.register(
 	CategoryScale,
@@ -61,6 +62,10 @@ export default function LineGraph(props: any) {
 				.select('timestamp').gte('timestamp', timeframeStart.toISOString()).lte('timestamp', timeframeEnd.toISOString());
 			console.log(rawData)
 
+			if (rawData.length === 0) {
+				return;
+			}
+
 			const startDate = new Date(timeframeStart);
 			const endDate = new Date(timeframeEnd);
 
@@ -101,7 +106,10 @@ export default function LineGraph(props: any) {
 	return (
 		<div>
 			<p className="text-center">{props.name}</p>
-			<Line data={data} options={options} />
+			{data.datasets.length > 0 ?
+				<Line data={data} options={options} />
+				:
+				<NoData />}
 		</div>
 	)
 }