Hi,
I’m using django_plotly_dash for a web application.
I have a div with the filters and another one with loading and graphics.
According to the filters, up to 15 charts can be generated, I am looking for a way to configure the div filter as sticky top, I tried
style = {"position": "sticky", "top": 0}
and it seems to work, but the graphics are above that div, it doesn’t even allow you to see all the options of the Dropdowns.
I do not know what I’m doing wrong. I tried the z index, but was unsuccessful.
I checked this post, but couldn’t fix it.
Thanks for your help.
My code is:
# Dash
from django_plotly_dash import DjangoDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
# Plotly
import plotly.graph_objects as go
# Pandas
import pandas as pd
# Files System Paths
from os import path
folder_name = "input"
file_name = "data_daily_avg.csv"
data_path = path.join(path.dirname(__file__), folder_name, file_name)
df = pd.read_csv(data_path, header=[0,1,2], index_col=0, parse_dates=True)
df.index.freq = 'D'
all_variables = df.columns.get_level_values(0).unique()
variables = [{"label":v, "value":v} for v in all_variables]
variables.insert(0, {"label":"All", "value":"All"})
all_stations = df.columns.get_level_values(2).unique()
stations = [{"label":s, "value":s} for s in all_stations]
stations.insert(0, {"label":"All", "value":"All"})
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css', dbc.themes.BOOTSTRAP]
app = DjangoDash(__name__.split(".")[-1], external_stylesheets=external_stylesheets)
app.layout = html.Div([html.Div([dcc.Dropdown(id='variables',
options=variables,
multi=True,
value=None,
placeholder="Selecciona las variables a graficar",),
dcc.Dropdown(id='stations',
options=stations,
multi=True,
value=None,
placeholder="Selecciona las estaciones a graficar",),
dcc.RangeSlider(id='year-slider',
min=df.index.year.min(),
max=df.index.year.max(),
value=[df.index.year.max() - 2, df.index.year.max()],
marks={str(year): str(year) for year in df.index.year.unique()},
step=None,)],
style={"position":"sticky", "top":0},
title="Filtros"),
html.Div([dcc.Loading(id="loading",
children=[html.Div(id='graphs'),],
type="graph",
fullscreen=True,)],),
],)
@app.callback(
Output('loading', 'children'),
[Input('variables', 'value'),
Input('stations', 'value'),
Input('year-slider', 'value')])
def update_figure(variables, stations, selected_year):
if variables and stations and selected_year:
filtered_df = df[str(selected_year[0]) : str(selected_year[1])]
if "ALL" in str(variables).upper():
variables = filtered_df.columns.get_level_values(0).unique()
if "ALL" in str(stations).upper():
stations = filtered_df.columns.get_level_values(2).unique()
figs=[]
for v in variables:
fig = go.Figure()
m = filtered_df[v].columns.get_level_values(0).unique()[0]
for s in stations:
fig.add_trace(go.Scatter(x=filtered_df.index,
y=filtered_df[v][m, s],
mode="lines",
name=s))
fig.update_layout(title=dict(text=f"Variable: {v}",
y=0.95,
x=0.5,
xanchor="center",
yanchor="top"),
xaxis=dict(title="Tiempo",
gridcolor="white",
gridwidth=2,),
yaxis=dict(title=f"{m}",
gridcolor="white",
gridwidth=2,),
legend=dict(orientation="h",
title_text="Estaciones",
yanchor="bottom",
y=1.02,
xanchor="right",
x=1
),
plot_bgcolor='rgb(243, 243, 243)',
paper_bgcolor='rgb(243, 243, 243)',
transition_duration=700,
)
figs.append(html.Div(dcc.Graph(figure=fig)))
return figs