Plotly cannot update figure

Dash Python
1

Hi all,

I have a weird problem with dash, I want to creat a dashboard, and I have two dropdown menus, one for choosing the page number (different pages), another one for choosing the method of how to group data (day, week, month, etc.). But When I implement those methods, it can only show the default graph, when I change the grouping method, it’s just empty, and the X-axies seems remained the same (it should be different) , here are the code

app layout:

app.layout = html.Div(
    children=[
        html.Div(
            className='row',
            children=[
                html.Div(
                    className='two columns div-user-controls',
                    children=[
                        html.H1('Factory Sales Report'),
                        html.Div(
                            className='div-for-dropdown',
                            children=[
                                html.P('''Select report:'''),
                                dcc.Dropdown(
                                    id='pageselector', options=REPORT_CONTENT,
                                    multi=False, value=[REPORT_CONTENT[0]],
                                    style={'backgroundColor': '#1E1E1E'},
                                    className='pageselector'
                                    ),
                                html.Br(),
                                html.P('''Group data by:'''),
                                dcc.Dropdown(
                                    id='timeselector', 
                                    options=['day','week','month','quarter','year'],
                                    multi=False, 
                                    value= 'month',
                                    style={'backgroundColor': '#1E1E1E'},
                                    className='timeselector'
                                    ),
                                
                            ],
                            style={'color': '#1E1E1E'})
                        ]
                    ),

                html.Div(
                    id="page-content",
                    className='ten columns div-for-charts bg-grey',
                    )
            ])
        ]
)

page layout

sales_layout = html.Div([
    html.H3('Sales Analysis'),
    dcc.Graph(
        id='salesvalue',
        config={'displayModeBar': False},
        animate=True),
])

index callback

# Index callbacks
@app.callback(
    Output('page-content', 'children'),
    [Input('pageselector', 'value')])
def display_page(pagename):
    if pagename == "Overview":
        return overview_layout
    elif pagename == "Sales Analysis":
        return sales_layout
    elif pagename == "Cost Analysis":
        return cost_layout
    elif pagename == "Product Analysis":
        return product_layout
    elif pagename == "Customer Analysis":
        return customer_layout
    elif pagename == "Feedback Analysis":
        return feedback_layout
    else:
        return overview_layout

page callback

@app.callback(
    Output('salesvalue', 'figure'),
    Input('timeselector', 'value'))
def update_salespage(selected_dropdown_value):
    dff = df.copy()
    dff['week'] = dff.index.isocalendar().week
    dff['month'] = dff.index.month
    dff['quarter'] = dff.index.quarter
    dff['year'] = dff.index.year
    dff = dff.reset_index()

    if selected_dropdown_value == 'day':
        figure = go.Figure([
            go.Scatter(
                x=dff.groupby(['Date']).sum().index, 
                y=dff.groupby(['Date'])['Price'].sum(),
            )])
    else:
        figure = go.Figure([
            go.Scatter(
                x=dff.groupby([selected_dropdown_value]).sum().index,
                y=dff.groupby([selected_dropdown_value])['Price'].sum(),
                )])

    return figure

Please help me, thank you!