refactor: Update visualization for daily and weekly number of registered agents

app.py

@@ -305,39 +305,52 @@ def create_visualizations():
     fig_bridges_chain.update_xaxes(tickformat="%m-%d")
 
     # Nr of agents registered daily and weekly
+    # Convert 'date' column to datetime
     df_agents_with_transactions['date'] = pd.to_datetime(df_agents_with_transactions['date'])
-    daily_agents_df = df_agents_with_transactions.groupby(df_agents_with_transactions['date']).size().reset_index(name='agent_count')
-    weekly_agents_df = df_agents_with_transactions.groupby(df_agents_with_transactions['date'].dt.to_period("W").apply(lambda r: r.start_time)).size().reset_index(name='agent_count')
 
+    # Calculate daily number of agents registered
+    daily_agents_df = df_agents_with_transactions.groupby('date').size().reset_index(name='daily_agent_count')
+
+    # Calculate cumulative number of agents registered within the week up to each day
+    df_agents_with_transactions['week_start'] = df_agents_with_transactions['date'].dt.to_period("W").apply(lambda r: r.start_time)
+    cumulative_agents_df = df_agents_with_transactions.groupby(['week_start', 'date']).size().groupby(level=0).cumsum().reset_index(name='weekly_agent_count')
+
+    # Combine the data to ensure both dataframes align for plotting
+    combined_df = pd.merge(daily_agents_df, cumulative_agents_df, on='date', how='left')
+
+    # Create the bar chart with side-by-side bars
     fig_agents_registered = go.Figure(data=[
         go.Bar(
             name='Daily nr of Registered Agents',
-            x=daily_agents_df['date'],
-            y=daily_agents_df['agent_count'],
+            x=combined_df['date'],
+            y=combined_df['daily_agent_count'],
             marker_color='blue'
         ),
         go.Bar(
             name='Total Weekly Nr of Registered Agents',
-            x=weekly_agents_df['date'],
-            y=weekly_agents_df['agent_count'],
+            x=combined_df['date'],
+            y=combined_df['weekly_agent_count'],
             marker_color='purple'
         )
     ])
+
+    # Update layout to group bars side by side for each day
     fig_agents_registered.update_layout(
         xaxis_title='Date',
         yaxis_title='Number of Agents',
         title="Nr of Agents Registered",
         barmode='group',
-        yaxis= dict(tickmode='linear', tick0=0, dtick=1),
+        yaxis=dict(tickmode='linear', tick0=0, dtick=1),
         xaxis=dict(
             tickmode='array',
-            tickvals=weekly_agents_df['date'],
-            ticktext=[f'Mon {d.strftime("%b %d")}' for d in weekly_agents_df['date']],
+            tickvals=combined_df['date'],
+            ticktext=[d.strftime("%b %d") for d in combined_df['date']],
             tickangle=-45
         ),
         height=700,
-        bargap=0.8
+        bargap=0.1  # Adjust bargap for clearer side-by-side bars
     )
+
         # Calculate weekly average daily active agents
     df_agents_with_transactions['day_of_week'] = df_agents_with_transactions['date'].dt.dayofweek
     df_agents_with_transactions_weekly_avg = df_agents_with_transactions.groupby(['week', 'day_of_week'])['agent_count_with_transactions'].mean().reset_index()

app_trans_new.py

@@ -3,6 +3,8 @@ import pandas as pd
 import gradio as gr
 import plotly.express as px
 from datetime import datetime, timedelta
+import plotly.graph_objects as go
+import numpy as np
 import json
 from web3 import Web3
 import time
@@ -239,21 +241,6 @@ def fetch_transactions():
     df_transactions_new.to_csv(csv_filename, index=False)
     return df_transactions_new
 
-def date_range_with_gaps(start_date, end_date):
-    """Generates a range of dates from start_date to end_date inclusive, with extra days between weeks."""
-    start_dt = datetime.strptime(start_date, "%Y-%m-%d")
-    end_dt = datetime.strptime(end_date, "%Y-%m-%d")
-    delta = timedelta(days=1)
-    current_dt = start_dt
-    date_list = []
-    while current_dt <= end_dt:
-        date_list.append(current_dt.date())
-        if current_dt.weekday() == 6:  # If it's Sunday, add gaps for better visibility
-            for _ in range(2):
-                current_dt += delta
-                date_list.append(current_dt.date())
-        current_dt += delta
-    return date_list
 
 def create_transcation_visualizations():
     df_transactions_new = fetch_transactions()
@@ -264,43 +251,138 @@ def create_transcation_visualizations():
 
     daily_counts = daily_counts[['optimism', 'base', 'ethereum']]
 
-    # Create a complete date range with gaps between weeks
-    full_date_range = date_range_with_gaps(daily_counts.index.min().strftime("%Y-%m-%d"), daily_counts.index.max().strftime("%Y-%m-%d"))
-    
-    # Reindex the DataFrame to include the new date range
-    full_date_range = pd.to_datetime(full_date_range)
-    daily_counts = daily_counts.reindex(full_date_range, fill_value=0)
-    # Set up the plot
-    fig_tx_chain = px.bar(
-        daily_counts,
-        barmode="stack",
-        title="Chain Daily Activity: Transactions",
-        labels={'index': 'Date', 'value': 'Daily Transaction Count'},
-        color_discrete_map={
-            "optimism": "blue",
-            "ethereum": "darkgreen",
-            "base": "purple"
-        }
-    )
-    fig_tx_chain.update_layout(
-        xaxis_title="Date",
-        yaxis_title="Daily Transaction Count",
-        legend_title="Transaction Chain",
-        xaxis_tickformat="%m-%d",
-        xaxis=dict(tickmode='linear', dtick=86400000.0 * 7, tickangle=-45),
-        height=700,
-        bargap=0.2,
-        bargroupgap=0.1
-    )
+    # Read the original data
+    daily_counts['timestamp'] = daily_counts.index
+    daily_counts['timestamp'] = pd.to_datetime(daily_counts['timestamp'])
+    daily_counts = daily_counts.reset_index(drop=True)
+    # Get min and max dates
+    min_date = daily_counts['timestamp'].min()
+    max_date = daily_counts['timestamp'].max()
+
+    # Create complete date range
+    full_date_range = pd.date_range(start=min_date, end=max_date, freq='D')
+
+    # Create a new dataframe with all dates
+    complete_df = pd.DataFrame({'timestamp': full_date_range})
+    complete_df = complete_df.merge(daily_counts, on='timestamp', how='left')
+    complete_df = complete_df.fillna(0)
+    daily_counts = complete_df
+    # Convert timestamp to datetime
+    daily_counts['timestamp'] = pd.to_datetime(daily_counts['timestamp'])
+
+    # Create a new dataframe with 12-hour slots
+    new_rows = []
+
+    for _, row in daily_counts.iterrows():
+        # Create first 12-hour slot (0-12)
+        slot1 = row.copy()
+        # slot1['timestamp'] = row['timestamp'].replace(hour=0)
+        
+        # # Create second 12-hour slot (12-24)
+        new_rows.extend([slot1])
+        slot2 = row.copy()
+        if slot2['timestamp'].dayofweek == 6:  # 6 represents Sunday
+            slot2[['optimism', 'base', 'ethereum']] = 0
+            slot2['timestamp'] = row['timestamp'].replace(hour=12)
+            new_rows.extend([slot2])
+        
+        
 
-    # Adjust x-axis to show only the date of the first day of each week (Monday)
-    fig_tx_chain.update_xaxes(
-        tickformat="%m-%d",
-        tickmode='array',
-        tickvals=[d for d in daily_counts.index if d.weekday() == 0]
+    # Create new dataframe with 12-hour slots
+    hourly_counts = pd.DataFrame(new_rows).sort_values('timestamp')
+
+    # Prepare data for plotting
+    dates = hourly_counts['timestamp'].tolist()
+    values = hourly_counts[['optimism', 'base', 'ethereum']].to_numpy()
+
+    # Create the figure
+    fig = go.Figure()
+    # Create arrays for positioning and width
+    # Convert dates to datetime objects first
+    date_objects = pd.to_datetime(dates)
+
+    # Create numeric indices for x-axis
+    x_numeric = np.arange(len(dates))
+
+    # Create arrays for positioning and width
+    width_array = []
+
+    for i, date in enumerate(date_objects):
+        width_array.append(1.0)  # Full width for other days
+
+    # Get Monday indices for tick positions
+    monday_indices = [i for i, date in enumerate(date_objects) if date.dayofweek == 0]
+    monday_labels = [date_objects[i].strftime('%Y-%m-%d') for i in monday_indices]
+
+    # Add traces for each series
+    fig.add_trace(go.Bar(
+        name='Optimism',
+        x=x_numeric,
+        y=values[:,0],
+        marker_color='blue',
+        opacity=0.7,
+        text=None,
+        width=width_array,
+        textposition='none',
+    ))
+
+    fig.add_trace(go.Bar(
+        name='Base',
+        x=x_numeric,
+        y=values[:,1],
+        marker_color='purple',
+        opacity=0.7,
+        text=None,
+        textposition='none',
+        width=width_array,
+    ))
+
+    fig.add_trace(go.Bar(
+        name='Ethereum',
+        x=x_numeric,
+        y=values[:,2],
+        marker_color='darkgreen',
+        opacity=0.7,
+        text=None,
+        width=width_array,
+        textposition='none',
+    ))
+
+    # Update layout with numeric x-axis
+    fig.update_layout(
+        title='Chain Daily Activity : Transactions',
+        xaxis_title='Date',
+        yaxis_title='Daily Transactions Count',
+        barmode='stack',
+        showlegend=True,
+        height=600,
+        bargap=0,
+        bargroupgap=0,
+        xaxis=dict(
+            tickangle=-45,
+            tickmode='array',
+            ticktext=monday_labels,
+            tickvals=monday_indices,
+        ),
+        template='plotly_white',
+        hoverlabel=dict(
+            bgcolor="white",
+            font_size=12,
+        ),
     )
 
-    return fig_tx_chain
+    # Update hover template
+    for trace in fig.data:
+        trace.update(
+            hovertemplate="<b>Date:</b> %{text}<br>" +
+                        "<b>" + trace.name + ":</b> %{y}<br>" +
+                        "<extra></extra>",
+            text=[d.strftime('%Y-%m-%d') for d in date_objects]  # Add date text for hover
+        )
+
+    # Show the plot
+    return fig
+
 
 
 # Gradio interface
@@ -317,6 +399,7 @@ def dashboard():
         
     return demo
 
+
 # Launch the dashboard
 if __name__ == "__main__":
     dashboard().launch()