graphs/model_characteristics.py

import plotly.graph_objects as go

def create_plotly_language_concentration_chart(
    language_concentration_df,
    period_col,
    metric_col,
    value_col,
    LANG_SEGMENT_ORDER,
    PALETTE_0
):
    """
    Convert the language concentration visualization to Plotly
    """
    
    # Create figure
    fig = go.Figure()
    
    # Get unique time periods
    time_periods = sorted(language_concentration_df[period_col].unique())
    
    # Create stacked area traces
    for i, metric in enumerate(LANG_SEGMENT_ORDER):
        metric_data = language_concentration_df[language_concentration_df[metric_col] == metric]

        # Sort by time and get values
        metric_data = metric_data.sort_values(period_col)
        x_vals = metric_data[period_col]
        y_vals = metric_data[value_col]
        
        # Add area trace
        fig.add_trace(
            go.Scatter(
                x=x_vals,
                y=y_vals,
                name=metric,
                mode='lines',
                line=dict(width=0),
                fill='tonexty' if i > 0 else 'tozeroy',
                fillcolor=PALETTE_0[i % len(PALETTE_0)],
                stackgroup='one',
                hovertemplate='<b>%{fullData.name}</b><br>' +
                             'Time: %{x}<br>' +
                             'Value: %{y}<extra></extra>'
            )
        )
    
    # Update layout
    fig.update_layout(
        width=1000,
        height=200,
        font_family="Times New Roman",
        font_size=14,
        showlegend=True,  # Show legend for language concentration
        legend=dict(
            title="Language Concentration",
            orientation="v",
            yanchor="top",
            y=1,
            xanchor="left",
            x=1.02
        ),
        margin=dict(l=60, r=150, t=40, b=60),  # Extra right margin for legend
        plot_bgcolor='white',
        hovermode='x unified'
    )
    
    # Update x-axis
    fig.update_xaxes(
        title_text="",
        showgrid=True,
        gridcolor='lightgray',
        gridwidth=1
    )
    
    # Update y-axis
    fig.update_yaxes(
        title_text="",
        showgrid=True,
        gridcolor='lightgray',
        gridwidth=1
    )
    
    return fig