import plotly.express as px
from app import *

# data
df=pd.read_csv('data/df0.csv',parse_dates=['Date'])
# marks
index_list=list(range(len(df.loc[:,"Date"].dt.strftime('%Y%m').unique())))
date_list=df.loc[:,"Date"].dt.strftime('%Y%m').unique()

colors = {
    'background': '#111111',
    'text': '#7FDBFF'}

layout = html.Div([
    html.H1('Volume and CTN'),

    dcc.Graph(id='cubic-with-slider',style={'backgroundColor':'black'}),

    dcc.Graph(id='ctn-with-slider'),

    dcc.RangeSlider(
        id='month-slider',
        min=index_list[0],
        max=index_list[-1],
        step=1,
        marks=dict(zip(index_list,date_list)),
        value=[index_list[list(date_list).index('202005')],index_list[-1]]),
    ])

@app.callback(
    Output('cubic-with-slider', 'figure'),
    Output('ctn-with-slider', 'figure'),
    [Input('month-slider', 'value')])
def update_figure(selected_month):
    start_time=date_list[selected_month[0]]
    end_time=date_list[selected_month[1]]
    filtered_df = df.loc[df.loc[:,'Date'] >= pd.to_datetime(start_time,format='%Y%m')]
    filtered_df = filtered_df.loc[filtered_df.loc[:,'Date'] <= pd.to_datetime(end_time,format='%Y%m')]
    fig_cubic = px.bar(filtered_df, x="Date", y="Cubic",color="Cubic",hover_data=['Daily total cubic','Marking'])
    fig_ctn = px.bar(filtered_df, x="Date", y="CTN",color="CTN",hover_data=['Daily total CTN','Marking'])

    fig_cubic.update_layout(
        plot_bgcolor=colors['background'],
        paper_bgcolor=colors['background'],
        font_color=colors['text'])

    fig_ctn.update_layout(
        plot_bgcolor=colors['background'],
        paper_bgcolor=colors['background'],
        font_color=colors['text'])
    return(fig_cubic,fig_ctn)