feat: enable rewards history chardt

oceanprotocol · Jan 30, 2025 · b7511d1 · b7511d1
1 parent 9642e22
commit b7511d1
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 34 deletions.
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -5,6 +5,7 @@ import {
   Bar,
   LineChart,
   Line,
+  Area,
   ResponsiveContainer,
   XAxis,
   Tooltip
@@ -76,6 +77,7 @@ const Card: React.FC<CardProps> = ({
   isLoading = false,
   dataLoading = false
 }) => {
+  console.log('🚀 ~ chartData:', chartData)
   const formatNumber = (num: string | number) => {
     if (typeof num === 'string') return num
 
@@ -129,22 +131,69 @@ const Card: React.FC<CardProps> = ({
                     </BarChart>
                   </ResponsiveContainer>
                 )}
-                {chartType === 'line' && chartData && (
-                  <ResponsiveContainer width="100%" height={100}>
+                {chartType === 'line' && chartData && chartData.length > 0 && (
+                  <ResponsiveContainer
+                    width="100%"
+                    height={200}
+                    style={{ paddingTop: '50px' }}
+                  >
                     <LineChart data={chartData}>
                       <defs>
-                        <linearGradient id="lineGradient" x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="20%" stopColor="#CF1FB1" stopOpacity={1} />
+                        <linearGradient id="lineWave" x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="0%" stopColor="#CF1FB1" stopOpacity={1} />
+                          <stop offset="100%" stopColor="#CF1FB1" stopOpacity={0.2} />
                         </linearGradient>
+                        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+                          <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
+                          <feOffset dx="0" dy="4" result="offsetblur" />
+                          <feComponentTransfer>
+                            <feFuncA type="linear" slope="0.2" />
+                          </feComponentTransfer>
+                          <feMerge>
+                            <feMergeNode />
+                            <feMergeNode in="SourceGraphic" />
+                          </feMerge>
+                        </filter>
                       </defs>
                       <Line
-                        type="monotone"
-                        dataKey="value"
-                        stroke="url(#lineGradient)"
-                        strokeWidth={2}
+                        type="basis"
+                        dataKey="foreground.value"
+                        stroke="url(#lineWave)"
+                        strokeWidth={3}
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                         dot={false}
+                        activeDot={{
+                          r: 8,
+                          fill: '#CF1FB1',
+                          stroke: '#ffffff',
+                          strokeWidth: 2
+                        }}
+                        filter="url(#shadow)"
+                      />
+                      <Area
+                        type="basis"
+                        dataKey="foreground.value"
+                        fill="url(#lineWave)"
+                        strokeWidth={0}
+                        opacity={0.1}
+                      />
+                      <Tooltip
+                        contentStyle={{
+                          background: '#1A0820',
+                          border: '1px solid #CF1FB1',
+                          borderRadius: '8px',
+                          boxShadow: '0 4px 20px rgba(207, 31, 177, 0.3)'
+                        }}
+                        formatter={(value) => [
+                          <span key="value" style={{ color: '#CF1FB1' }}>
+                            {Number(value).toLocaleString()} ROSE
+                          </span>
+                        ]}
+                        labelFormatter={(label) => (
+                          <span style={{ color: '#CF1FB1' }}>{label}</span>
+                        )}
                       />
-                      <Tooltip />
                     </LineChart>
                   </ResponsiveContainer>
                 )}

diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx
@@ -34,8 +34,6 @@ const Dashboard = () => {
   const { totalCountries, loading: mapLoading } = useMapContext()
   const pathname = usePathname()
 
-  if (pathname === '/nodes') return null
-
   if (error) {
     return (
       <Box display="flex" justifyContent="center" alignItems="center" minHeight="400px">
@@ -62,12 +60,23 @@ const Dashboard = () => {
         bigNumber={formatNumber(totalEligibleNodes)}
         isLoading={loading}
       />
-      <Card
-        title="Total Countries"
-        bigNumber={formatNumber(totalCountries)}
-        isLoading={loading}
-        dataLoading={mapLoading}
-      />
+
+      {pathname === '/nodes' ? (
+        <Card
+          title="Rewards History"
+          chartType="line"
+          chartData={rewardsHistory}
+          isLoading={loading || !rewardsHistory}
+        />
+      ) : (
+        <Card
+          title="Total Countries"
+          bigNumber={formatNumber(totalCountries)}
+          isLoading={loading}
+          dataLoading={mapLoading}
+        />
+      )}
+
       <Card
         title="Total Nodes"
         bigNumber={formatNumber(totalNodes)}

diff --git a/src/context/DataContext.tsx b/src/context/DataContext.tsx
@@ -14,6 +14,12 @@ import { CountryStatsType, SystemStats } from '../shared/types/dataTypes'
 import { CountryStatsFilters, NodeFilters } from '../shared/types/filters'
 import { buildCountryStatsUrl } from '../shared/utils/urlBuilder'
 
+interface RewardHistoryItem {
+  date: string
+  background: { value: number }
+  foreground: { value: number }
+}
+
 interface DataContextType {
   data: NodeData[]
   loading: boolean
@@ -44,11 +50,7 @@ interface DataContextType {
   setCountrySearchTerm: (term: string) => void
   systemStats: SystemStats
   totalUptime: number | null
-  rewardsHistory: Array<{
-    date: string
-    nrEligibleNodes: number
-    totalAmount: number
-  }>
+  rewardsHistory: RewardHistoryItem[]
   fetchRewardsHistory: () => Promise<any>
 }
 
@@ -83,13 +85,7 @@ export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
     cpuArchitectures: {}
   })
   const [totalUptime, setTotalUptime] = useState<number | null>(null)
-  const [rewardsHistory, setRewardsHistory] = useState<
-    Array<{
-      date: string
-      nrEligibleNodes: number
-      totalAmount: number
-    }>
-  >([])
+  const [rewardsHistory, setRewardsHistory] = useState<RewardHistoryItem[]>([])
 
   const sortParams = useMemo(() => {
     return Object.entries(sortModel)
@@ -161,7 +157,7 @@ export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
     } finally {
       setLoading(false)
     }
-  }, [fetchUrl])
+  }, [currentPage, fetchUrl, pageSize])
 
   const getTotalEligible = useCallback(async () => {
     setLoading(true)
@@ -199,7 +195,7 @@ export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
 
       setTotalRewards(response.data.cumulativeTotalAmount)
     } catch (err) {
-      console.error('Error total eligible nodes data:', err)
+      console.error('Error fetching rewards data:', err)
       setError(err)
     } finally {
       setLoading(false)
@@ -271,7 +267,7 @@ export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
     }
   }, [])
 
-  const fetchRewardsHistory = async () => {
+  const fetchRewardsHistory = useCallback(async () => {
     try {
       const response = await fetch(
         'https://analytics.nodes.oceanprotocol.com/rewards-history'
@@ -286,7 +282,7 @@ export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
     } catch (error) {
       console.error('Error fetching rewards history:', error)
     }
-  }
+  }, [])
 
   useEffect(() => {
     let mounted = true
@@ -327,7 +323,14 @@ export const DataProvider: React.FC<DataProviderProps> = ({ children }) => {
     filters,
     sortModel,
     searchTerm,
-    countrySearchTerm
+    countrySearchTerm,
+    systemStats.cpuCounts,
+    getTotalEligible,
+    getTotalRewards,
+    fetchRewardsHistory,
+    fetchData,
+    fetchCountryStats,
+    fetchSystemStats
   ])
 
   useEffect(() => {