Dashboard from Vizro-AI calls and using Vizro-AI generated chart code

cell5.py

# Dashboard from Vizro-AI calls and using Vizro-AI generated chart code
from vizro import Vizro
import vizro.models as vm
import vizro.plotly.express as px
from vizro.models.types import capture
import plotly.graph_objects as go
import pandas as pd

@capture('graph')
def compare_versions_custom_chart(data_frame=None):
    if data_frame is None:
        data_frame = pd.DataFrame()
    
    data_frame['Date'] = pd.to_datetime(data_frame['Date'])
    # Group by Date and Version and sum the Views
    aggregated_df = data_frame.groupby(['Date', 'Version'])['Views'].sum().reset_index()
    # Pivot the dataframe to have Versions as columns
    pivot_df = aggregated_df.pivot(index='Date', columns='Version', values='Views')
    # Fill NaN values with 0
    pivot_df.fillna(0, inplace=True)
    data_frame = pivot_df.reset_index()

    # Create a line trace for each version
    trace1 = go.Scatter(x=data_frame['Date'], y=data_frame['latest'], mode='lines', name='latest', line=dict(color='#689F38'))
    trace2 = go.Scatter(x=data_frame['Date'], y=data_frame['stable'], mode='lines', name='stable', line=dict(color='#FDC935'))

    # Define the layout
    layout = go.Layout(title='Views per Date for latest and stable Version', xaxis=dict(title='Date'), yaxis=dict(title='Views'))

    # Create a Figure and add the traces
    fig = go.Figure(data=[trace1, trace2], layout=layout)

    # Return the figure
    return fig   


compare_versions_custom_fig = compare_versions_custom_chart(data_frame=df)

first_page = vm.Page(
title="Documentation traffic dashboard",
layout=vm.Layout(
    grid=[
        [0, 2],
        [1, 2], 
    ],
),
components=[
    # Latest and stable by date
    vm.Graph(figure=compare_versions_custom_fig),
    
    # Top performing stable pages
    vm.Graph(figure=top_performing_pages_fig),

    # Top 5 stable pages by date
    vm.Graph(figure=top_pages_by_date_fig),
    ],
)
dashboard = vm.Dashboard(pages=[first_page])
Vizro().build(dashboard).run(jupyter_mode="external")