chart-1

import dash
import plotly.express as px
# import plotly.graph_objects as go
import pandas as pd
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
# import dash_table
from dash.dependencies import Output, Input

df = pd.read_excel('sales invoices- python1.xlsx', sheet_name="2.0 Testing - Sales Invoices")

# print(df[['Currency.Currency','Customer_group','Product_Type','Sales Amount','Cost_Amount']])

# fig = px.pie(data_frame=df, names='Currency.Currency', values='Sales Amount')
# fig.show()

df1 = df.groupby(['Currency.Currency', 'Customer_group', 'Product_Type'])[
    ['Sales Amount', 'Cost_Amount']].sum().reset_index()

print(df1)

external_stylesheet = [dbc.themes.BOOTSTRAP]

app = dash.Dash(__name__, external_stylesheets=external_stylesheet)

app.layout = html.Div([

    html.Div([
        html.H1("Sales Invoice Analysis"),
    ], style={'text-align': 'center'}),

    html.Div([
        dbc.Row([
            dbc.Col(
                html.Div([
                    html.Label('Select Currency'),
                    dcc.Dropdown(id='currency-dropdown',
                                 options=[{'label': x, 'value': x} for x in df['Currency.Currency'].unique()],
                                 value=['MYR','USD'],
                                 searchable=True, multi=True),
                ]), style={'width': '33% '}),
            dbc.Col(
                html.Div([
                    html.Label('Select Customer Group'),
                    dcc.Dropdown(id='customer-group',
                                 options=[],
                                 value=['Intercompany','JV'],
                                 searchable=True, multi=True),
                ])
            ),
            dbc.Col(
                html.Div([
                    html.Label('Select Product Type'),
                    dcc.Dropdown(id='product-type', options=[],
                                 value=['PA','PB'],
                                 searchable=True, multi=True),
                ])
            )
        ]),

    ], style={'paddingBottom': '3%'}),

    html.Div([
        dbc.Row([
            dbc.Col(
                html.Div(
                    dcc.Graph(id='chart-satu', figure={}),
                )
            ),
        ]),
        dbc.Row([
            dbc.Col(
                html.Div(
                    dcc.Graph(id='chart-dua', figure={})
                )
            )
        ]),
        dbc.Row([
            dbc.Col(
                html.Div(
                    dcc.Graph(id='chart-three', figure={})
                )
            )
        ])
    ], style={'width': '100%'}),

    # dash_table.DataTable(
    #     id='sales-invoice',
    #     columns=[{'name':i, 'id':i}
    #              for i in df[['Currency.Currency','Customer_group','Product_Type','Sales Amount','Cost_Amount']]],
    #     data=df.to_dict('records'),
    #     page_current= 0,
    #     page_size= 10,
    #     sort_action='native',
    #     sort_mode='single'
    # ),
])


@app.callback(
    Output(component_id='customer-group', component_property='options'),
    [Input(component_id='currency-dropdown', component_property='value')]
)
def customer_group_list(value_currency):
    # print(value_currency)
    dfc = df1[df1['Currency.Currency'].isin(value_currency)]
    return [{'label': c, 'value': c} for c in dfc['Customer_group'].unique()]


@app.callback(
    Output(component_id='product-type', component_property='options'),
    [Input(component_id='currency-dropdown', component_property='value')]
)
def product_type_list(value_currency):
    # print(value_currency)
    dfc = df1[df1['Currency.Currency'].isin(value_currency)]
    return [{'label': p, 'value': p} for p in dfc['Product_Type'].unique()]


@app.callback(
    Output(component_id='chart-satu', component_property='figure'),
    [Input(component_id='currency-dropdown', component_property='value'),
     Input(component_id='customer-group', component_property='value'),
     Input(component_id='product-type', component_property='value')]
)
def interactive_graph(value_currency, customer_group, product_type):
    dff = df1[(df1['Customer_group'].isin(customer_group)) & (df1['Currency.Currency'].isin(value_currency)) & (
        df1['Product_Type'].isin(product_type))]
    # print(dff)
    fig = px.histogram(data_frame=dff, x='Currency.Currency', y=['Sales Amount', 'Cost_Amount'], barmode='group',
                       height=400)
    return fig


@app.callback(
    Output(component_id='chart-dua', component_property='figure'),
    [Input(component_id='currency-dropdown', component_property='value'),
     Input(component_id='customer-group', component_property='value'),
     Input(component_id='product-type', component_property='value')]
)
def chart_dua(value_currency, customer_group, product_type):
    dff2 = df1[(df1['Customer_group'].isin(customer_group)) & (df1['Currency.Currency'].isin(value_currency)) & (
        df1['Product_Type'].isin(product_type))]
    # print(dff2)
    fig2 = px.histogram(data_frame=dff2, x='Customer_group', y=['Sales Amount', 'Cost_Amount'], barmode='group',
                        height=400)

    return fig2


@app.callback(
    Output(component_id='chart-three', component_property='figure'),
    [Input(component_id='currency-dropdown', component_property='value'),
     Input(component_id='customer-group', component_property='value'),
     Input(component_id='product-type', component_property='value')]
)
def chart_three(value_currency, customer_group, product_type):
    dff3 = df1[(df1['Customer_group'].isin(customer_group)) &
               (df1['Currency.Currency'].isin(value_currency)) &
               (df1['Product_Type'].isin(product_type)) ]
    # print(dff3)
    fig3 = px.histogram(data_frame=dff3, x='Product_Type', y=['Sales Amount', 'Cost_Amount'], barmode='group',
                        height=400)
    return fig3


if __name__ == '__main__':
    app.run_server()

kalau buat macam sekarang ni, chart_dua tu tak terkesan dengan dropdown..

group by the data before put it into the chart.