from dash import Dash, dcc, html, Input, Output
app = Dash(__name__)

app.layout = html.Div([
    html.Label('Order statuses to display:'),
    dcc.Checklist(
        all_statuses,
        [df['status'][0]],
        id = 'status-filter'
    ),
    html.Label('State:', style={'font-size': '120%'}),
    html.Div(dcc.Dropdown(
        all_states,
        'All',
        id = 'state-dropdown'
    )),
    dcc.Graph(id='sellers-graph'),
    dcc.Graph(id='customers-graph'),
    dcc.RangeSlider(
        min=0,
        max=all_dates.shape[0] - 1,
        step=1,
        dots=False,
        value=[0, all_dates.shape[0] - 1],
        marks = marks,
        id='date-slider',
    ),
])



@app.callback(
    Output('sellers-graph', 'figure'),
    [Input('date-slider', 'value'),
     Input('state-dropdown', 'value'),
     Input('status-filter', 'value')])

def update_figure(time_gap, state_to_display, statuses_filter):
    cur_df = get_df_sellers(sellers, items, products, orders, translation)
    cur_df = cur_df[cur_df['status'].isin(statuses_filter)]
    if state_to_display == 'All':
        cur_df['state'] = 'All'
    else:
        cur_df = cur_df[cur_df.state == state_to_display]
    cur_df = cur_df[pd.to_datetime(sorted(all_dates['date'])[time_gap[0]]) <= pd.to_datetime(cur_df.date)]
    cur_df = cur_df[pd.to_datetime(cur_df.date) <= pd.to_datetime(sorted(all_dates['date'])[time_gap[1]])]
    cur_df = cur_df.groupby(['category']).agg({'count' : 'count', 'state':'first'}).reset_index()
    all_count = np.einsum('i->', cur_df['count'])
    cur_df['count'] = cur_df['count'] * 100/all_count
    cur_df.rename(columns = {"count":"propotion"})
    fig = px.bar(cur_df, y="state", x="count", color="category",
                 title="Distribution by sales categories", orientation='h', height=300)
    fig.update_layout(transition_duration=500)
    return fig

@app.callback(
    Output('customers-graph', 'figure'),
    [Input('date-slider', 'value'),
     Input('state-dropdown', 'value'),
     Input('status-filter', 'value')])
def update_figure(time_gap, state_to_display, statuses_filter):
    cur_df = get_df_customers(customers, items, products, orders, translation)
    cur_df = cur_df[cur_df['status'].isin(statuses_filter)]
    if state_to_display == 'All':
        cur_df['state'] = 'All'
    else:
        cur_df = cur_df[cur_df.state == state_to_display]
    cur_df = cur_df[pd.to_datetime(sorted(all_dates['date'])[time_gap[0]]) <= pd.to_datetime(cur_df.date)]
    cur_df = cur_df[pd.to_datetime(cur_df.date) <= pd.to_datetime(sorted(all_dates['date'])[time_gap[1]])]
    cur_df = cur_df.groupby(['category']).agg({'count' : 'count', 'state':'first'}).reset_index()
    all_count = np.einsum('i->', cur_df['count'])
    cur_df['count'] = cur_df['count'] * 100/all_count
    cur_df.rename(columns = {"count":"propotion"})
    fig = px.bar(cur_df, y="state", x="count", color="category",
                 title="Distribution by customers categories", orientation='h', height=300)
    fig.update_layout(transition_duration=500)
    return fig
if __name__ == '__main__':
    app.run_server(debug=True)