cief-dashboard/apps/monthly.py

from app import *

# layout
layout = html.Div([
    dbc.Row(dbc.Col(dcc.Dropdown(id='input-month'))),

    dbc.Tabs([
        dbc.Tab(dcc.Graph(id='output-cbm'), label="CBM"),
        dbc.Tab(dcc.Graph(id='output-accumulated'), label="Accumulated CBM"),
        ]),

    dbc.Row([
        dbc.Col(dcc.Graph(id='output-destination')),
        dbc.Col(dcc.Graph(id='output-remark')),
        dbc.Col(dcc.Graph(id='output-source')),
        dbc.Col(dcc.Graph(id='output-enquiry_conversion_rate')),
            ]),

    dbc.Row([
            dbc.Col(dcc.Graph(id='output-customer_cbm', hoverData={'points': [{'customdata': ['CIEF/680GLM']}]})), 
            dbc.Col(dcc.Graph(id='output-cbm_history'))
            ]),

    ])

@app.callback(
        [Output('input-month', 'options'),
            Output('input-month', 'value')],
        Input('data-monthly', 'data'))
def update_drop_down_menu(data):
    df = pd.read_json(data['daily_cbm'])
    month_label_list=df["Date"].dt.strftime('%Y %B').unique()
    month_list=df["Date"].dt.strftime('%Y%m').unique()

    options=[]
    for i in range(len(month_list)):
        options.append({'label':month_label_list[i], 'value':month_list[i]})

    last_month=month_list[-1]
    return(options, last_month)

@app.callback(
    [Output('output-cbm', 'figure'),
        Output('output-source', 'figure'),
        Output('output-accumulated', 'figure'),
        Output('output-enquiry_conversion_rate', 'figure'),
        Output('output-customer_cbm', 'figure'),
        Output('output-destination', 'figure'),
        Output('output-remark', 'figure')],
    Input('input-month', 'value'),
    State('data-monthly', 'data')
    )
def update_figure(selected_month, data):
    to_df(data)

    # source
    marketing = data['marketing']
    this_month_marketing = marketing[marketing['Date'].dt.strftime('%Y%m') == selected_month]
    fig_source = px.sunburst(this_month_marketing, path=['Traffic source','Selling platform'],color='Selling platform', title='Source and Platform')
    update_backgroud(fig_source)
#    fig_source.update_layout(height=800)

    # accumulated cbm
    daily_cbm = data['daily_cbm']
    daily_cbm = daily_cbm.where(daily_cbm['Date'].dt.strftime('%Y%m') == selected_month).dropna()
    daily_cbm['Accumulated']=daily_cbm['CBM'].cumsum()
    accumulated_df=pd.melt(daily_cbm, 'Date')
    fig_accumulated=px.line(accumulated_df, x='Date', y='value', color='variable', title='Accumulated CBM')
    update_theme(fig_accumulated)

    # this month conversion rate
    this_month_conversion_rate=(this_month_marketing['Marking']/this_month_marketing['Enquiry']).mean()*100
    last_month_marketing = marketing[marketing['Date'].dt.strftime('%Y%m') == str(int(selected_month)-1)]
    if len(last_month_marketing) > 0: 
        last_month_conversion_rate=(last_month_marketing['Marking']/last_month_marketing['Enquiry']).mean()*100
    else:
        last_month_conversion_rate=this_month_conversion_rate
    fig_conversion_rate = go.Figure(
            go.Indicator(
                value = this_month_conversion_rate,
                mode = "gauge+number+delta",
                title = {'text': "Enquiry to marking Conversion (%)"},
                delta = {'reference': last_month_conversion_rate},
                gauge = {'axis': {'range': [None, 30]},
                    'steps' : [{'range': [0, 20], 'color': "lightgray"}]},
                )
            )
    update_backgroud(fig_conversion_rate)
    
    # customer cbm
    customer_cbm=data['customer_cbm']
    this_month_customer = customer_cbm[customer_cbm['Date'].dt.strftime('%Y%m') == selected_month]
    this_month_customer = this_month_customer['Cleaned marking']
    customer_cbm=customer_cbm[customer_cbm['Cleaned marking'].isin(this_month_customer)]
    fig_customer_cbm=px.scatter(customer_cbm, x='Customer CBM', y='Customer CTN', log_x=True, log_y=True, hover_data=['Cleaned marking'], title='Active customer')
    update_theme(fig_customer_cbm)

    # cbm
    cbm=data['cbm']
    cbm = cbm[cbm['Date'].dt.strftime('%Y%m') == selected_month]
    fig_cbm = px.bar(cbm, x="Date", y="CBM",color="CBM",hover_data=['CBM', 'CTN', 'Marking', 'Daily CBM', 'Daily CTN'])
    update_backgroud(fig_cbm)
    
    # destination
    destination=data['destination']
    destination = destination[destination['Date'].dt.strftime('%Y%m') == selected_month]
    destination_count=destination['Destination port'].groupby(destination['Destination port']).count()
    destination_count=pd.DataFrame({'Destination count':destination_count}).reset_index()
    fig_destination = px.line_polar(destination_count, r='Destination count', theta='Destination port', line_close=True, title='Destination port')
    update_backgroud(fig_destination)

    # remark
    remark=data['remark']
    remark = remark[remark['Date'].dt.strftime('%Y%m') == selected_month]
    remark_count=remark['Remark'].groupby(remark['Remark']).count()
    remark_count=pd.DataFrame({'Remark count':remark_count}).reset_index()
    fig_remark = px.pie(remark_count, values='Remark count', names='Remark',hover_data=['Remark count'],title='Remark')
    update_backgroud(fig_remark)

    return(fig_cbm, fig_source, fig_accumulated, fig_conversion_rate, fig_customer_cbm, fig_destination, fig_remark)

@app.callback(
    Output('output-cbm_history', 'figure'),
    Input('output-customer_cbm', 'hoverData'),
    State('data-monthly', 'data'))
def display_selected_data(selectedData, data):
    cbm=pd.read_json(data['customer_cbm'])
    selected_marking = selectedData['points'][0]['customdata']

    customer_cbm=cbm.where(cbm['Cleaned marking'].isin(selected_marking)).dropna()
    customer_cbm.sort_values(by='Date', inplace=True)
    customer_cbm['Accumulated CBM']=customer_cbm['CBM'].cumsum()
#    customer_cbm['Accumulated CTN']=customer_cbm['CTN'].cumsum()
    fig_customer_cbm=px.bar(customer_cbm, x='Date', y='CBM', title=selected_marking[0])
    update_theme(fig_customer_cbm)
    return(fig_customer_cbm)