From 678e9614bf9317a058d1cab45706318d13c576e3 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Wed, 1 Apr 2026 12:14:27 +0100
Subject: [PATCH] feat: add NoDataMessage component and integrate it into
 AreaChart, BarChart, and LineChart for improved no data handling

---
 Common/UI/Components/Charts/Area/AreaChart.tsx      |  7 ++-----
 Common/UI/Components/Charts/Bar/BarChart.tsx        |  7 ++-----
 .../Components/Charts/ChartGroup/NoDataMessage.tsx  | 13 +++++++++++++
 Common/UI/Components/Charts/Line/LineChart.tsx      |  7 ++-----
 4 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx

diff --git a/Common/UI/Components/Charts/Area/AreaChart.tsx b/Common/UI/Components/Charts/Area/AreaChart.tsx
index 5c153c873d..f43a8ee627 100644
--- a/Common/UI/Components/Charts/Area/AreaChart.tsx
+++ b/Common/UI/Components/Charts/Area/AreaChart.tsx
@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -83,11 +84,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
       />
-      {hasNoData && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-sm text-gray-400">No data available</p>
-        </div>
-      )}
+      {hasNoData && <NoDataMessage />}
     </div>
   );
 };
diff --git a/Common/UI/Components/Charts/Bar/BarChart.tsx b/Common/UI/Components/Charts/Bar/BarChart.tsx
index 7e5f79a904..c75fc75a13 100644
--- a/Common/UI/Components/Charts/Bar/BarChart.tsx
+++ b/Common/UI/Components/Charts/Bar/BarChart.tsx
@@ -6,6 +6,7 @@ import YAxis from "../Types/YAxis/YAxis";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -78,11 +79,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
       />
-      {hasNoData && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-sm text-gray-400">No data available</p>
-        </div>
-      )}
+      {hasNoData && <NoDataMessage />}
     </div>
   );
 };
diff --git a/Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx b/Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx
new file mode 100644
index 0000000000..594da09f7b
--- /dev/null
+++ b/Common/UI/Components/Charts/ChartGroup/NoDataMessage.tsx
@@ -0,0 +1,13 @@
+import React, { FunctionComponent, ReactElement } from "react";
+
+const NoDataMessage: FunctionComponent = (): ReactElement => {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+      <span className="text-sm text-gray-400 bg-white/90 border border-gray-100 rounded-full px-4 py-1.5 shadow-sm">
+        No data available
+      </span>
+    </div>
+  );
+};
+
+export default NoDataMessage;
diff --git a/Common/UI/Components/Charts/Line/LineChart.tsx b/Common/UI/Components/Charts/Line/LineChart.tsx
index 0ed95f5330..e1db306b04 100644
--- a/Common/UI/Components/Charts/Line/LineChart.tsx
+++ b/Common/UI/Components/Charts/Line/LineChart.tsx
@@ -7,6 +7,7 @@ import ChartCurve from "../Types/ChartCurve";
 import ChartDataPoint from "../ChartLibrary/Types/ChartDataPoint";
 import DataPointUtil from "../Utils/DataPoint";
 import ChartReferenceLineProps from "../Types/ReferenceLineProps";
+import NoDataMessage from "../ChartGroup/NoDataMessage";
 
 export interface ComponentProps {
   data: Array<SeriesPoint>;
@@ -82,11 +83,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
         onValueChange={() => {}}
         referenceLines={props.referenceLines}
       />
-      {hasNoData && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <p className="text-sm text-gray-400">No data available</p>
-        </div>
-      )}
+      {hasNoData && <NoDataMessage />}
     </div>
   );
 };