From fecab51499a1d88a2b679055df3b2f5f5db2c989 Mon Sep 17 00:00:00 2001
From: Radu Mojic <radu.mojic@multiversx.com>
Date: Wed, 31 Jan 2024 15:19:57 +0200
Subject: [PATCH] - added info tooltip on analytics too

---
 src/pages/Analytics/Analytics.tsx             | 22 +++++++++++++++++--
 .../AnalyticsChart/AnalyticsChart.tsx         |  2 +-
 .../AccountsStatsCard/AccountsStatsCard.tsx   |  7 ++++--
 src/widgets/StatsCard/StatsCard.tsx           |  6 ++++-
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/pages/Analytics/Analytics.tsx b/src/pages/Analytics/Analytics.tsx
index c5e679df9..ad24c741d 100644
--- a/src/pages/Analytics/Analytics.tsx
+++ b/src/pages/Analytics/Analytics.tsx
@@ -1,11 +1,13 @@
 import { useEffect, useMemo, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
-import { Loader, Tabs } from 'components';
+import { Loader, Overlay, Tabs } from 'components';
 import { ChartListType } from 'components/Chart/helpers/types';
 import { useAdapter, useIsMainnet, useNetworkRoute } from 'hooks';
 
+import { faInfoCircle } from 'icons/regular';
 import { AnalyticsChart } from 'pages/AnalyticsCompare/AnalyticsChart';
 import { FailedAnalytics } from 'pages/AnalyticsCompare/components/FailedAnalytics';
 import { NoAnalytics } from 'pages/AnalyticsCompare/components/NoAnalytics';
@@ -248,7 +250,23 @@ export const Analytics = () => {
           </ChartWrapper>
           <ChartWrapper>
             <div className='px-3 pb-3'>
-              <AnalyticsChart series={dailyActiveUsersChart} />
+              <AnalyticsChart
+                series={dailyActiveUsersChart}
+                title={
+                  <div className='d-flex align-items-center'>
+                    Daily Active Users
+                    <Overlay
+                      title='Number of accounts that have sent or received transactions in the last 24 hours'
+                      className='d-inline-flex'
+                    >
+                      <FontAwesomeIcon
+                        icon={faInfoCircle}
+                        className='ms-2 small cursor-context text-neutral-400'
+                      />
+                    </Overlay>
+                  </div>
+                }
+              />
             </div>
           </ChartWrapper>
 
diff --git a/src/pages/AnalyticsCompare/AnalyticsChart/AnalyticsChart.tsx b/src/pages/AnalyticsCompare/AnalyticsChart/AnalyticsChart.tsx
index f6ae953ea..658b0c499 100644
--- a/src/pages/AnalyticsCompare/AnalyticsChart/AnalyticsChart.tsx
+++ b/src/pages/AnalyticsCompare/AnalyticsChart/AnalyticsChart.tsx
@@ -29,7 +29,7 @@ export const AnalyticsChart = ({
   customDomain
 }: {
   series: ChartListType[];
-  title?: string;
+  title?: React.ReactNode;
 } & StackedChartConfig) => {
   const ref = useRef(null);
 
diff --git a/src/widgets/AccountsStatsCard/AccountsStatsCard.tsx b/src/widgets/AccountsStatsCard/AccountsStatsCard.tsx
index 4d9a09e2f..bf6ee5c18 100644
--- a/src/widgets/AccountsStatsCard/AccountsStatsCard.tsx
+++ b/src/widgets/AccountsStatsCard/AccountsStatsCard.tsx
@@ -38,9 +38,12 @@ export const AccountsStatsCard = () => {
           {activeAccountsToday} active today
           <Overlay
             title='Number of accounts that have sent or received transactions in the last 24 hours'
-            className='d-inline cursor-context'
+            className='d-inline-flex'
           >
-            <FontAwesomeIcon icon={faInfoCircle} className='ms-2' />
+            <FontAwesomeIcon
+              icon={faInfoCircle}
+              className='ms-2 cursor-context'
+            />
           </Overlay>
         </StatsCard>
       ) : (
diff --git a/src/widgets/StatsCard/StatsCard.tsx b/src/widgets/StatsCard/StatsCard.tsx
index fd1a762c6..f215a7d5e 100644
--- a/src/widgets/StatsCard/StatsCard.tsx
+++ b/src/widgets/StatsCard/StatsCard.tsx
@@ -35,7 +35,11 @@ export const StatsCard = ({
           </p>
         )}
 
-        {children && <p className='mb-0 mt-2 text-primary-200'>{children}</p>}
+        {children && (
+          <p className='mb-0 mt-2 text-primary-200 d-flex align-items-center'>
+            {children}
+          </p>
+        )}
       </div>
     </div>
   );