Py.Cafe

from dash import Dash, Input, Output, callback, dcc, html
import dash
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
import plotly.colors as colors
from help_function import create_polar_subplots


app = Dash(__name__, external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.FONT_AWESOME])


# Define the layout options
layout_params = {'margin': dict(l=70, t=50, r=20), 'paper_bgcolor':'#E5ECF6', 
                 'modebar_orientation': 'v', 
                 'xaxis_zeroline': False, 'font_size':14}

# Define config mode for plotly graph
config_mode = {'displaylogo': True, 
               'modeBarButtonsToRemove': ['zoom', 'pan', 'select', 'zoomIn', 'zoomOut', 'lasso', 'autoScale']}  

#------------------------------------------------------------------------
palette_names = [i['name'] for i in px.colors.cyclical.swatches_cyclical().data][:-1]
polar = create_polar_subplots(palette_names)

# Define a functionn to generate figure and update layout 
def create_figure(swatches, swatch_type): 
    n_swatches = len(swatches.data) 
    fig = swatches.update_traces(width=0.7) 
    fig.update_layout( 
        **layout_params, 
        height=50 + 40 * n_swatches, 
        title=f'{swatch_type} Swatches ({n_swatches} colorscales)' 
    ) 
    return fig 

# Generate figures 
fig_seq = create_figure(px.colors.sequential.swatches(), 'Sequential') 
fig_div = create_figure(px.colors.diverging.swatches(), 'Diverging') 
fig_quel = create_figure(px.colors.qualitative.swatches(), 'Qualitative') 
fig_cycl = create_figure(px.colors.cyclical.swatches(), 'Cyclical')     

#----------------------------------------------------------------------

# Create markdown context for info popover
popover_info = dcc.Markdown('''
**Do you want to know how to reverse any colorscale in Plotly?**   

---
Here is the secret: 

- All the Plotly colorscales presented here can be reversed by simply adding **'_r'** at the end of their name
(for example: 'BrBG_r', 'Plotly_r', 'Turbo_r', etc.).
  
Enjoy!👌''', style={'background-color': '#E5ECF6', 'color': '#2fa4e7'})

# Create info button with popover 
btn_pop = html.Div([
        dbc.Button(
            html.I(className='fa-solid fa-circle-info mx-1', style={'color': '#2fa4e7'}),
            id='info',
            color='btn-outline-info',
            style={ 'background-color': '#E5ECF6', 'margin-top':'50px'}, # Button background color                    
            n_clicks=0),
        dbc.Popover(
            children=popover_info,
            target='info',  
            body=True, 
            placement="bottom", 
            trigger='hover', 
            style={ 'background-color': '#E5ECF6', 
                    'width': '260px', 
                    'justify-items': 'center'}),             
    ]) 

# Create source button with popover 
btn_source = html.Div([
        dbc.Button(
            html.I(className='fa-solid fa-database mx-1', style={'color': '#2fa4e7'}),
            id='source',
            color='btn-outline-info',
            style={ 'background-color': '#E5ECF6'}, # Button background color                    
            n_clicks=0),
        dbc.Popover([
            dbc.PopoverHeader(
                html.H6("Built-In Colorscales in Plotly"), style={ 'background-color': '#E5ECF6'}),
            dbc.PopoverBody([                
                html.P(html.A('Continuous Color Scales' ,
                        href="https://plotly.com/python/colorscales/#continuous-vs-discrete-color", target="_blank")),
                html.A('Discrete Color Scales',
                        href="https://plotly.com/python/discrete-color", target="_blank"),                            
                ]),
            ],
            target='source',  
            body=True, 
            placement="bottom", 
            trigger='hover', 
            style={ 'background-color': '#E5ECF6',                   
                    'width': '300px', 
                    'justify-items': 'center'})
        ])                              
  

# Create app layout=================================================================

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([ 
                dbc.CardBody([ 
                    html.H2('🌈', style={'text-align': 'center', 'margin': '0 10px 0 0'}), 
                    html.H2( "Color Scales Swatches", className='text-center mb-0 py-1', 
                        style={ 'font-weight': '600', 
                                'background': 'linear-gradient(to right, yellow, green, cyan, blue, violet)', 
                                'font-size': '32px', 
                                'color': 'transparent', 
                                'background-clip': 'text', 
                                '-webkit-background-clip': 'text' } )
                ], style={'display': 'flex', 'align-items': 'center', 'justify-content':'center', 'padding':'5px'}),
            ], style={'background': '#E5ECF6', 'align-content': 'center'}, className="mb-3")
        ], width=11)
    ]),
    dbc.Row([
        dbc.Col(
            dbc.Card(dcc.Graph(figure=fig_seq, config=config_mode), body=True), width=5),
        dbc.Col([btn_source, btn_pop, 
            ], width=1, style={'justify-items':'center'}),    
        dbc.Col([
            dbc.Card(dcc.Graph(figure=fig_div, config=config_mode), body=True),
            dbc.Card(dcc.Graph(figure=fig_quel, config=config_mode), body=True, class_name='my-3'),
            dbc.Card(dcc.Graph(figure=fig_cycl, config=config_mode), body=True),
            dbc.Card(dcc.Graph(figure=polar, config=config_mode), body=True, class_name='mt-3')
            ] , width=5),
        ])   
    ])


if __name__ == "__main__":
    app.run_server(debug=False)