Skip to content

Instantly share code, notes, and snippets.

@khairilazizee
Last active Jun 6, 2021
Embed
What would you like to do?
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()
@khairilazizee
Copy link
Author

khairilazizee commented Jun 2, 2021

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

@khairilazizee
Copy link
Author

khairilazizee commented Jun 2, 2021

group by the data before put it into the chart.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment