Comment échanger le contenu de différents conteneurs dans une application Dash ?
J'ai beaucoup de difficulté à faire ce qui suit. J'ai une application Dash formatée en CSS pour l'afficher dans différents conteneurs. Le conteneur intitulé « hexgrid-1-container » est le plus grand conteneur, tandis que les autres conteneurs sont plus petits et organisés autour de lui. Je souhaite mettre à jour mon application Dash afin que chaque fois que je clique sur une figure/un graphique dans un autre conteneur, il apparaisse dans "hexgrid-1-container" alors que la figure précédente était dans "hexgrid-1-container". Les conteneurs apparaîtront dans des conteneurs plus petits. .
J'ai une application de tableau de bord comme celle-ci :
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from jupyter_dash import JupyterDash
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import sqlite3
import locale
import numpy as np
import plotly.figure_factory as ff
import plotly.express as px
# Set the locale for formatting
locale.setlocale(locale.LC_ALL, '')
app = dash.Dash(__name__)
app.layout = html.Div(className= 'container glass', children=[
html.Div(className='hexgrid-1-container', style={'border': '1px solid black'}, children=[
dcc.Graph(id='hexgrid-1', style={"height": "75%", "width": "100%"}, className='hexgrid1')
]),
html.Div(className='hexgrid-2-container', style={'border': '1px solid black'}, children=[
dcc.Graph(id='hexgrid-2', style={"height": "100%", "width": "100%"}, className='hexgrid2')
]),
html.Div(className='base-plot-container', style={'border': '1px solid black'}, children=[
dcc.Graph(id='base-plot', style={"height": "100%", "width": "100%"})
]),
html.Div(className='us-map-container', style={'border': '1px solid black'}, children=[
dcc.Graph(id='us-map-graph', style={"height": "100%", "width": "100%"})
]),
html.Div(className='fifth-container', style={'border': '1px solid black'}, children=[
# dcc.Graph(id='us-map-graph', style={"height": "100%", "width": "100%"})
#html.H2("5th Container")
]),
html.Div(className='sixth-container', style={'border': '1px solid black'}, children=[
# dcc.Graph(id='us-map-graph', style={"height": "100%", "width": "100%"})
#html.H2("6th Container")
])
])
@app.callback(
Output('hexgrid-1', 'figure'),
Input('hexgrid-1', 'id')
)
def render_hexgrid_1(_):
# Open a new database connection
conn = sqlite3.connect(r"C:\Users\HituJani\Downloads\txns.db")
# Fetching all columns in the transactions table
query = '''
PRAGMA table_info(transactions)
'''
# Fetch data
data = pd.read_sql_query(query, conn)
# Filtering out the relevant columns, this step can be skipped if you want all columns.
relevant_columns = data[data['name'].isin(['TranType', 'MessageTypeIdentifier', 'MerchantType', 'IResponseCode'])]
# Creating the hex grid with column names
plot_data = go.Scatter(x=relevant_columns.index, y=relevant_columns['name'], text=relevant_columns['name'],
marker=dict(symbol='hexagon', size=30), mode='markers+text')
layout = go.Layout(title="Select a Category")
return go.Figure(data=[plot_data], layout=layout)
@app.callback(
Output('hexgrid-2', 'figure'),
Output('hexgrid-2', 'style'),
Input('hexgrid-1', 'clickData')
)
def render_hexgrid_2(clickData):
# Open a new database connection
conn = sqlite3.connect(r"C:\Users\HituJani\Downloads\txns.db")
if clickData is None:
return go.Figure(), {"display": "none"}
else:
category = clickData['points'][0]['text']
# Fetching all columns in the transactions table
query = '''
PRAGMA table_info(transactions)
'''
# Fetch data
data = pd.read_sql_query(query, conn)
# Filtering out the relevant numerical features columns
relevant_columns = data[data['name'].isin(['TransactionAmount', 'OutstandingAmount', 'CurrentBalance', 'TotalOutStgAuthAmt'])]
# Generating random points on the surface of a sphere
phi = np.random.uniform(0, np.pi, len(relevant_columns))
theta = np.random.uniform(0, 2*np.pi, len(relevant_columns))
x = np.cos(theta) * np.sin(phi)
y = np.sin(theta) * np.sin(phi)
z = np.cos(phi)
# Create a 3D scatter plot with sphere markers
scatter = go.Scatter3d(
x=x,
y=y,
z=z,
mode='markers+text',
marker=dict(
size=12,
color=np.arange(len(relevant_columns)),
colorscale='Viridis',
symbol='circle',
opacity=0.8
),
text=relevant_columns['name'],
hoverinfo='text'
)
# Create a wireframe sphere using a mesh
u = np.linspace(0, 2 * np.pi, 100)
v = np.linspace(0, np.pi, 100)
x_sphere = np.outer(np.cos(u), np.sin(v))
y_sphere = np.outer(np.sin(u), np.sin(v))
z_sphere = np.outer(np.ones(np.size(u)), np.cos(v))
sphere = go.Mesh3d(x=x_sphere.ravel(),
y=y_sphere.ravel(),
z=z_sphere.ravel(),
opacity=0.1,
color='cyan')
# Combine the scatter plot and wireframe into a single figure
fig = go.Figure(data=[scatter, sphere])
fig.update_layout(
margin=dict(l=0, r=0, b=0, t=0),
scene=dict(
xaxis=dict(title=None, visible=False),
yaxis=dict(title=None, visible=False),
zaxis=dict(title=None, visible=False),
),
template='plotly_dark'
)
return fig, {"height": "50vh", "width": "100%", "display": "inline-block"}
# Define the callback function that will update the plot, highlight the sphere and enable drilling down
@app.callback(
Output('base-plot', 'figure'),
Input('hexgrid-2', 'clickData'),
State('hexgrid-1', 'clickData')
)
def update_base_plot(clickData_hexgrid_2, clickData_hexgrid_1):
try:
# Open a new database connection
conn = sqlite3.connect(r"C:\Users\HituJani\Downloads\txns.db")
category = clickData_hexgrid_1['points'][0]['text']
numerical_feature = clickData_hexgrid_2['points'][0]['text']
# SQL query to retrieve aggregated data based on selected category and numerical feature
query = f'''
SELECT {category}, WeekOfMonth, SUM({numerical_feature}) AS TotalAmount
FROM transactions
GROUP BY {category}, WeekOfMonth
ORDER BY TotalAmount DESC
'''
# Fetch the data from the database
df_base = pd.read_sql(query, conn)
# Close the database connection
conn.close()
# Formatting the Total column
df_base['TotalAmount'] = df_base['TotalAmount'].apply(lambda x: locale.currency(x, grouping=True))
# Creating 3D scatter plot with sphere markers
fig = go.Figure()
# Define colorscale for WeekOfMonth values
colorscale = [
[0, 'blue'], # Week 1: Blue
[0.25, 'purple'], # Week 2: Purple
[0.5, 'darkorange'], # Week 3: Dark Orange
[0.75, 'yellow'], # Week 4: Yellow
[1, 'pink'] # Week 5: Pink
]
# Add the scatter plot trace
fig.add_trace(
go.Scatter3d(
x=df_base[category],
y=df_base['WeekOfMonth'].astype(int),
z=df_base['TotalAmount'],
mode='markers+text',
marker=dict(
size=5, # Adjust the size of markers to make them smaller
symbol='circle', # Use 'circle' symbol for spheres
color=df_base['WeekOfMonth'],
colorscale=colorscale,
),
textposition='top center',
hovertemplate=(
f"<b>{category}</b>: %{{x}}<br>" +
"<b>Total Amount</b>: %{z}<br>" +
"<b>WeekOfMonth</b>: %{y}<br>"
)
)
)
# Dynamically set y-axis range
y_max = df_base['WeekOfMonth'].max()
fig.update_layout(
scene=dict(
xaxis=dict(
title=category,
title_font=dict(size=14, color='darkorange'),
visible=False # Hide the x-axis
),
yaxis=dict(
title='Week of Month',
title_font=dict(size=14, color='purple'),
tickmode='array',
tickvals=[0.5, 1.5, 2.5, 3.5, 4.5, 5.5],
ticktext=['1', '2', '3', '4', '5'], # Display tick labels as 1, 2, 3, 4, 5],
visible=False # Hide the y-axis
),
zaxis=dict(
title=f'Total {numerical_feature} ($)',
title_font=dict(size=14, color='yellow'),
autorange='reversed',
visible=False # Hide the z-axis
),
),
xaxis=dict(
type='category',
tickmode='linear',
tickangle=45,
automargin=True,
visible=False # Hide the x-axis labels
),
margin=dict(l=10, r=10, t=10, b=10), # Increase the b value to enlarge the viewing window
template='plotly_dark',
)
return fig
except Exception as e:
print(f"Error: {e}")
return go.Figure()
@app.callback(
Output('us-map-graph', 'figure'),
Output('us-map-graph', 'style'),
Input('base-plot', 'clickData'),
State('hexgrid-1', 'clickData'),
State('hexgrid-2', 'clickData')
)
def display_transaction_amount(base_plot_click_data, hexgrid_1_clickData, hexgrid_2_clickData):
try:
# Check if data from hexgrid-1 and hexgrid-2 is available
if hexgrid_1_clickData is None or hexgrid_2_clickData is None:
# Return an empty figure and hide the map
return go.Figure(), {"display": "none"}
# Get the selected category from hexgrid-1 and numerical feature from hexgrid-2
selected_category = hexgrid_1_clickData['points'][0]['text']
numerical_feature = hexgrid_2_clickData['points'][0]['text']
# Get the selected subcategory from base_plot_click_data
selected_subcategory = None
if base_plot_click_data is not None:
selected_subcategory = base_plot_click_data['points'][0]['x']
# Open a new database connection
conn = sqlite3.connect(r"C:\Users\HituJani\Downloads\txns.db")
# SQL query to retrieve transaction data by state for the selected category, subcategory, and numerical feature
query = f'''
SELECT StateCode, {selected_category}, SUM({numerical_feature}) AS TotalTransactionAmount
FROM transactions
WHERE {selected_category} = ?
GROUP BY StateCode, {selected_category}
'''
# Execute the query and fetch the results into a DataFrame
state_data = pd.read_sql(query, conn, params=(selected_subcategory,))
# Close the database connection
conn.close()
# Create a Choropleth map using the filtered data
fig = px.choropleth(
data_frame=state_data,
locationmode='USA-states',
locations='StateCode',
scope='usa',
color='TotalTransactionAmount',
hover_data={'StateCode': True, 'TotalTransactionAmount': ':$,f'},
color_continuous_scale='Reds',
labels={'TotalTransactionAmount': 'Total Transaction Amount'},
template='plotly_dark'
)
fig.update_traces(
hovertemplate="<b>%{customdata[0]}</b><br>" +
"<b>TotalTransactionAmount</b>: $%{customdata[1]:,.2f}<br>",
customdata=list(zip(state_data['StateCode'], state_data['TotalTransactionAmount']))
)
fig.update_layout(
title_text=f'Total Transaction Amount by State for Category: {selected_category}, Subcategory: {selected_subcategory}',
title_xanchor='center',
title_font=dict(size=12),
title_x=0.5,
geo=dict(scope='usa'),
)
# Return the figure and set the display style to block (visible)
return fig, {"display": "block"}
except Exception as e:
print(f"Error: {e}")
return go.Figure(), {"display": "none"}
if __name__ == '__main__':
app.run_server(debug=True, use_reloader=False)
De plus, j'ai ce fichier CSS pour formater la page Web :
/* styles.css */
.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 15px;
grid-row-gap: 15px;
background-image: url("https://plainbackground.com/plain1024/383c3d.png");
background-size: 100%;
background-position: grid-ce;
}
.hexgrid-1-container {
/* grid-area: 1/1/3/3; */
grid-row: span 2;
grid-column: span 2;
padding: 2px 2px 2px 2px;
border: 1px solid hsl(176, 87%, 7%, 0.6);
border-radius: 10px;
box-shadow: rgba(250, 118, 3, 0.4) -5px 5px, rgba(250, 118, 3, 0.3) -10px 10px, rgba(250, 118, 3, 0.2) -15px 15px;
background: hsla(0, 7%, 11%, 0.9);
position: relative;
}
.hexgrid-2-container {
grid-area: 1/3/2/4;
padding: 3rem 4rem 4rem;
width: 70%;
border: 1px solid hsl(176, 87%, 7%, 0.6);
border-radius: 10px;
box-shadow: rgba(250, 118, 3, 0.4) -5px 5px, rgba(250, 118, 3, 0.3) -10px 10px, rgba(250, 118, 3, 0.2) -15px 15px;
background: hsl(0, 7%, 11%, 0.9);
position: relative;
}
.base-plot-container {
/* Add your custom styles for base-plot container here */
grid-area: 2/3/3/4;
padding: 3rem 4rem 4rem;
width: 70%;
border: 1px solid hsl(176, 87%, 7%, 0.6);
border-radius: 10px;
box-shadow: rgba(250, 118, 3, 0.4) -5px 5px, rgba(250, 118, 3, 0.3) -10px 10px, rgba(250, 118, 3, 0.2) -15px 15px;
background: hsl(0, 7%, 11%, 0.9);
position: relative;
}
.us-map-container {
grid-area: 3/3/4/4;
padding: 3rem 4rem 4rem;
width: 70%;
/* position: fixed; */
border: 1px solid hsl(176, 87%, 7%, 0.6);
border-radius: 10px;
box-shadow: rgba(250, 118, 3, 0.4) -5px 5px, rgba(250, 118, 3, 0.3) -10px 10px, rgba(250, 118, 3, 0.2) -15px 15px;
background: hsl(0, 7%, 11%, 0.9);
position: relative;
}
.fifth-container {
grid-area: 3/2/4/3;
border: 1px solid hsl(176, 87%, 7%, 0.6);
border-radius: 10px;
box-shadow: rgba(250, 118, 3, 0.4) -5px 5px, rgba(250, 118, 3, 0.3) -10px 10px, rgba(250, 118, 3, 0.2) -15px 15px;
background: hsl(0, 7%, 11%, 0.9);
position: relative;
}
.sixth-container {
grid-area: 3/1/4/2;
border: 1px solid hsl(176, 87%, 7%, 0.6);
border-radius: 10px;
box-shadow: rgba(250, 118, 3, 0.4) -5px 5px, rgba(250, 118, 3, 0.3) -10px 10px, rgba(250, 118, 3, 0.2) -15px 15px;
background: hsl(0, 7%, 11%, 0.9);
position: relative;
}
J'ai essayé de mettre à jour la fonction de rappel mais je n'ai pas fait beaucoup de progrès et il me semblait que je faisais beaucoup de choses de travers. Quelle est la manière la plus simple d’implémenter cette fonctionnalité ? Merci d'avance.
