Auto detect and display the last MTD's data with the current MTD's data based on the date selected

Dash Python
1

Hi,

How can I make my script to auto detect and display the last MTD’s data with the current MTD’s data based on the date selected?

Example:

Today= 15/02/2022

Month dropdown:

month_category = list(df[‘Month’].unique())

dcc.Dropdown(id='line_drdn', multi=True, value= ['Jan','Feb'], 
                                   options = [{'label':x, 'value':x} for x in month_category],
                                    searchable = True, search_value='',
                                    placeholder= 'Please select ...'
                        ),

Currently, the month dropdown list will show Jan and Feb due to pre-fixed the value.

I had a date-selection which is based on the month-selection.

@app.callback(
    Output('date_dd','options'),
     Input('month_dd', 'value')
    )


def update_dd (month_dd):
    month_date= df.drop_duplicates(['Month','Date'], inplace= False)
    relevant_date= month_date[month_date['Month']== month_dd]['Settlement_Date'].values.tolist()
     date_option= [dict(label=x,value=x)for x in relevant_date]

     return date_option

Expected to be something like this…

image
image1072×489 18 KB

2

Hi,

It is not very clear to me how the dropdown is related to the callback in your question. According to the screenshot, it looks to me that you want to select the current and previous months in the second callback based on the date selected in the first, is that correct? Is the date dropdown what you called “date_dd” in the callback you wrote?

3

Hi @jlfsjunior

Yes, want to select the current and previous months in the second callback based on the date selected in the first,
Correct, is the date dropdown that I called “date_dd” in the callback I wrote.


For example, date selected is 03/02/2022, the graph will have two lines, one is the January month-to-date data (from 01/01/2022 to 03/01/2022) and another one is February month-to-date data (from 01/02/2022 to 03/02/2022).


As per you see from the image attached, the Jan and Feb value is prefixed from the code below.

dcc.Dropdown(id='line_drdn', multi=True, value= ['Jan','Feb'], 
                      options = [{'label':x, 'value':x} 
                                for x in month_category],
                      searchable = True, search_value='',
                      placeholder= 'Please select ...'
                      ),                         

dcc.Graph(id='line-fig', figure={})

If let say, date selected is 15/03/2022, how the chart can auto reflect the last month-to-date data (from 01/02/2022 to 15/02/2022) with current month-to-date data (from 01/03/2022 to 15/03/2022) instead of users multiple select the value?
4

Thanks for the clarification! How to update it depends quite a lot on the purpose of such controls.

For example, it sounds to me that you want to hardcode the months to be displayed in the graph to the current and the last month (compared to the selected date). In this case you would not need the second dropdown. You could of course keep it, but then you will have to 1- pass the"line_drdn" value as an input to the callback updating “line-fig” and 2- add some logic to filter the data and add a trace based on this selection.

If we focus solely on the date → figure update, here’s how the callback wouyld roughly look:

@app.callback(
    Output('line-fig','figure'),
    Input('date_dd', 'value')
)
def update_figure (date_dd):
    # make sure date_dd is datetime/pd timestamp
    current_mtd_start = date_dd - pd.tseries.offsets.MonthBegin(1)
    current_mtd_end = date_dd 
    last_mtd_start = current_mtd_start - pd.DateOffset(months=1)
    last_mtd_end = current_mtd_end - pd.DateOffset(months=1)

   # filter and create the fig as you want
   fig = #...
   return figure

I personally prefer to use pd timestamps and offsets to deal with this sort of date manipulation (especially with non-uniform periods like months).