feat: add no data available message to AreaChart, BarChart, and LineChart components

Common/UI/Components/Charts/Area/AreaChart.tsx

@@ -34,6 +34,7 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
   useEffect(() => {
     if (!props.data || props.data.length === 0) {
       setRecords([]);
+      return;
     }
 
     const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
@@ -50,6 +51,24 @@ const AreaChartElement: FunctionComponent<AreaInternalProps> = (
     ? { height: `${props.heightInPx}px` }
     : {};
 
+  const hasNoData: boolean =
+    !props.data ||
+    props.data.length === 0 ||
+    props.data.every((series: SeriesPoint) => {
+      return series.data.length === 0;
+    });
+
+  if (hasNoData) {
+    return (
+      <div
+        className={`flex items-center justify-center ${className}`}
+        style={style}
+      >
+        <p className="text-sm text-gray-400">No data available</p>
+      </div>
+    );
+  }
+
   return (
     <AreaChart
       className={className}

Common/UI/Components/Charts/Bar/BarChart.tsx

@@ -32,6 +32,7 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
   useEffect(() => {
     if (!props.data || props.data.length === 0) {
       setRecords([]);
+      return;
     }
 
     const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
@@ -48,6 +49,24 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
     ? { height: `${props.heightInPx}px` }
     : {};
 
+  const hasNoData: boolean =
+    !props.data ||
+    props.data.length === 0 ||
+    props.data.every((series: SeriesPoint) => {
+      return series.data.length === 0;
+    });
+
+  if (hasNoData) {
+    return (
+      <div
+        className={`flex items-center justify-center ${className}`}
+        style={style}
+      >
+        <p className="text-sm text-gray-400">No data available</p>
+      </div>
+    );
+  }
+
   return (
     <BarChart
       className={className}

Common/UI/Components/Charts/Line/LineChart.tsx

@@ -34,6 +34,7 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
   useEffect(() => {
     if (!props.data || props.data.length === 0) {
       setRecords([]);
+      return;
     }
 
     const records: Array<ChartDataPoint> = DataPointUtil.getChartDataPoints({
@@ -50,6 +51,24 @@ const LineChartElement: FunctionComponent<LineInternalProps> = (
     ? { height: `${props.heightInPx}px` }
     : {};
 
+  const hasNoData: boolean =
+    !props.data ||
+    props.data.length === 0 ||
+    props.data.every((series: SeriesPoint) => {
+      return series.data.length === 0;
+    });
+
+  if (hasNoData) {
+    return (
+      <div
+        className={`flex items-center justify-center ${className}`}
+        style={style}
+      >
+        <p className="text-sm text-gray-400">No data available</p>
+      </div>
+    );
+  }
+
   return (
     <LineChart
       className={className}