Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

initial commit #160

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

initial commit #160

wants to merge 2 commits into from

Conversation

nidhikamath2102
Copy link

Hi, I have created a pull request for the datepicker_plots. Kindly check this and let me know if any changes are needed.

@nidhikamath2102 nidhikamath2102 mentioned this pull request Jul 9, 2024
Open
@AnnMarieW AnnMarieW mentioned this pull request Jul 9, 2024
Closed
@AnnMarieW
Copy link
Owner

Thanks for submitting this app!
closes #159

As Adam mentioned in issue 159, the CSS in this app is very good and it's a great example for people who are not using the Dash Bootstrap Components library. Since you are only using one dbc component, let's remove the dbc library from this example and change the dbc.Button into an html.Button

Note that when using CSS in the style prop, it's necessary to use camelCase. For example, margin-bottom should be marginBottom. Be sure to check the browser console - there are helpful error messages for each one:

image

Is there a reason you are using two single date pickers instead of the dcc.DatePickerRange ?

AnnMarieW
AnnMarieW reviewed Jul 9, 2024
View reviewed changes
examples/datepicker-plots.py Outdated
dcc.Dropdown(
id='datepicker-plots-x-dropdown',
options=[
{'label': 'Select a plot', 'value': ''},
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to remove the "select a plot" option and include clearable=False

examples/datepicker-plots.py Outdated
)
def update_graph(n_clicks, plot_type, start_date, end_date):
if not plot_type:
return [], 'Please select a plot type!'
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not necessary if clearable=False in the dropdown

examples/datepicker-plots.py Outdated
mask = (df['date'] >= start_date) & (df['date'] <= end_date)
filtered_df = df.loc[mask]

time.sleep(0.25)
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to increase this to at least 1 second and add a comment that this is to simulate a longer running callback

@nidhikamath2102
Copy link
Author

nidhikamath2102 commented Jul 9, 2024 via email

@nidhikamath2102
1) Fixed errors on the console.
4f6ce9c 
2) Removed dbc component and replaced it with html.
3) Set clearable=False in the dropdown and cleaned up relevant code for select a plot type.
4) Increased sleep time duration from 0.25 to 1 s to simulate longer running callback.
@nidhikamath2102
Copy link
Author

nidhikamath2102 commented Jul 12, 2024 via email

@AnnMarieW
Copy link
Owner

Hi @nidhikamath2102

Thanks for doing the update 🙂

I see you removed the dash-bootstrap-components as I suggested, but you have added back a Bootstrap stylesheet. We need to decide if we are using Bootstrap or not. Either way is OK, just let me know how you would like to proceed, then we can fine tune from there.

If you would like to continue to use Bootstrap, then I recommend that you keep the dbc library and leverage the tools available so you can eliminate most of the inline CSS. You can do that by using the dbc.Row and dbc.Col components and the Bootstrap utiltity classes.

For exampe:

className="mb-2 fw-bold"
instead of
style={"marginBottom": "20px", "fontWeight": "bold"}

You might find this site helpful - it has more info on the utility classes https://dashcheatsheet.pythonanywhere.com/

In this example note that there is only one inline CSS style={'height':400} . This will center the dcc.Loading when the app starts or if there is an error message:

import time
import pandas as pd
from dash import Dash, dcc, html, Input, Output, State
import plotly.express as px
import dash_bootstrap_components as dbc


df = px.data.stocks()
df['date'] = pd.to_datetime(df['date'])
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Label('Plot Type', className="fw-bold"),
    dcc.Dropdown(
        id='datepicker-plots-x-dropdown',
        options=[
            {'label': 'Line Plot', 'value': 'line'},
            {'label': 'Scatter Plot', 'value': 'scatter'},
            {'label': 'Area Plot', 'value': 'area'},
            {'label': 'Correlation Matrix', 'value': 'correlation'}
        ],
        clearable=False,
        value='correlation',
        className='mb-3'
    ),
    dbc.Row([
        dbc.Col([
            dbc.Label('Start Date', className="me-3 fw-bold"),
            dcc.DatePickerSingle(
                id='datepicker-plots-x-start-date',
                date=df['date'].min(),
                min_date_allowed=df['date'].min(),
                max_date_allowed=df['date'].max(),
                placeholder='Select a date'
            ),
        ], width="auto"
             ),
        dbc.Col([
            dbc.Label('End Date', className="me-3 fw-bold"),
            dcc.DatePickerSingle(
                id='datepicker-plots-x-end-date',
                date=df['date'].max(),
                min_date_allowed=df['date'].min(),
                max_date_allowed=df['date'].max(),
                placeholder='Select a date'
            ),
        ], width="auto"
     ),
    ], justify="evenly"),

    dbc.Button('Submit', id='datepicker-plots-x-submit', n_clicks=0, className="mx-auto my-4 d-block"),

    html.Div(id='datepicker-plots-x-error-msg', className='text-center fs-3 text-warning m-4'),
    dcc.Loading(
        id="datepicker-plots-x-loading",
        type="circle",
        children=[html.Div(id='datepicker-plots-x-graph', children=[], style={'height':400})],
    ),
], fluid=True)

# no changes to the callback

If you want to keep the current plan and not use Bootstrap, then please remove the Bootstrap stylesheet, then also try to minimize the amount inline CSS in the style component. Some things have no effect, like for the button this can be removed:

'textAlign': 'center', 'textDecoration': 'none', 'display': 'inline-block', 'fontSize': '16px', 'margin': '4px 2px', 'cursor': 'pointer',

Here is the first part of the app without using Bootstrap. It has unnecessary inline CSS removed:

import pandas as pd
from dash import Dash, dcc, html, Input, Output, State
import plotly.express as px
import time

df = px.data.stocks()
df['date'] = pd.to_datetime(df['date'])
app = Dash(__name__)

app.layout = html.Div([
    html.Label('Plot Type', style={'fontWeight': 'bold'}),
    dcc.Dropdown(
        id='datepicker-plots-x-dropdown',
        options=[
            {'label': 'Line Plot', 'value': 'line'},
            {'label': 'Scatter Plot', 'value': 'scatter'},
            {'label': 'Area Plot', 'value': 'area'},
            {'label': 'Correlation Matrix', 'value': 'correlation'}
        ],
        clearable=False,
        value='correlation',
    ),
    html.Div([
        html.Div([
            html.Label('Start Date', style={'marginRight': '10px', 'fontWeight': 'bold'}),
            dcc.DatePickerSingle(
                id='datepicker-plots-x-start-date',
                date=df['date'].min(),
                min_date_allowed=df['date'].min(),
                max_date_allowed=df['date'].max(),
                placeholder='Select a date'
            ),
        ]),
        html.Div([
            html.Label('End Date', style={'marginRight': '10px', 'fontWeight': 'bold'}),
            dcc.DatePickerSingle(
                id='datepicker-plots-x-end-date',
                date=df['date'].max(),
                min_date_allowed=df['date'].min(),
                max_date_allowed=df['date'].max(),
                placeholder='Select a date'
            ),
        ],),
    ], style={'display': 'flex', 'justifyContent': 'space-evenly', 'marginTop':20}),

    html.Div([
        html.Button('Submit', id='datepicker-plots-x-submit', n_clicks=0, style={'backgroundColor': '#1976D2', 'color': 'white', 'border': 'none', 'padding': '10px 20px', 'borderRadius': '4px'})
    ], style={'display': 'flex', 'justifyContent': 'center', 'marginTop': '20px'}),
    html.Div(id='datepicker-plots-x-error-msg', style={'color': 'orange', 'marginTop': '20px', 'fontSize': 30, 'textAlign': 'center'}),
    dcc.Loading(
        id="datepicker-plots-x-loading",
        type="circle",
        children=[html.Div(id='datepicker-plots-x-graph', children=[], style={'marginTop': '20px', 'height':400})],
    ),
])

# No change to the callbacks

@nidhikamath2102
Copy link
Author

nidhikamath2102 commented Sep 11, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@AnnMarieW AnnMarieW AnnMarieW left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@nidhikamath2102 @AnnMarieW