style: graph placeholders

fac30 · Dec 19, 2024 · 9278cd0 · 9278cd0
1 parent 86eeda9
commit 9278cd0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/src/app/insights/components/AreaChart.tsx b/src/app/insights/components/AreaChart.tsx
@@ -18,7 +18,13 @@ export default function MoodAreaChart({
   const width = screen.width * 0.85;
 
   if (!dataArray || dataArray.length === 0) {
-    return <div>No data available for the graph.</div>;
+    return (
+      <>
+        <div className="w-11/12 m-auto flex justify-center mt-6 bg-twd-graph-background py-24 rounded-lg">
+          <div>No data available for the graph.</div>
+        </div>
+      </>
+    );
   }
 
   // Sort all the mood records by their timestamp

diff --git a/src/app/insights/components/LineGraph.tsx b/src/app/insights/components/LineGraph.tsx
@@ -24,7 +24,13 @@ export default function LineGraph({
   const width = screen.width * 0.85;
 
   if (!dataArray || dataArray.length === 0) {
-    return <div>No data available for the graph.</div>;
+    return (
+      <>
+        <div className="w-11/12 m-auto flex justify-center mt-6 bg-twd-graph-background py-24 rounded-lg">
+          <div>No data available for the graph.</div>
+        </div>
+      </>
+    );
   }
 
   const aggregateDataByMonth = (

diff --git a/src/app/insights/components/StreamGraph.tsx b/src/app/insights/components/StreamGraph.tsx
@@ -18,7 +18,13 @@ export default function MoodStreamGraph({
   const width = screen.width * 0.85;
 
   if (!dataArray || dataArray.length === 0) {
-    return <div>No data available for the graph.</div>;
+    return (
+      <>
+        <div className="w-11/12 m-auto flex justify-center mt-6 bg-twd-graph-background py-24 rounded-lg">
+          <div>No data available for the graph.</div>
+        </div>
+      </>
+    );
   }
 
   // Sort data by timestamp