I have asked this before but did not get any help. So trying again since i could not find anything by searching.
I have single date picker component which is linked to datatable and lists top 10 songs ater user picks a single date[Rank and title columns]. Next to the table i have the dropdown component and at this moment it shows all the song titles that are in the df. but i would like that dropdwon shows only the titles that are in the datatable after picking a date. after that i have bar chart which should show the total number of streams per song [10 song based on the data table].
so to make it easier to understand first user picks the days, it will show the datatable of top 10. and next to it bar chart with the total stream values on y axis and titles on x axis. and on top of the bar chart will dropdown if the user wants to see only top 1 and top 10 or any combination.
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Output, Input
import plotly.express as px
import dash_bootstrap_components as dbc
from datetime import date
import pandas as pd
df = pd.read_csv('bel.csv')
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LITERA],
meta_tags=[{'name' : 'viewport',
'content': 'width=device-width, initial-scale=1.0' }]
)
# layout
app.layout = dbc.Container([
dbc.Row([
dbc.Col([
html.H1('Top songs in Belgium',className='text-center text-primary,mb-4'),
html.P ('Analyze the Top streamed songs in a month of between March & April',
className='text-center'),
], width= 12)
]),
dbc.Row([
dbc.Col([
dcc.DatePickerSingle(
id = 'my-date-picker-single',
min_date_allowed=date(2022,3,1),
max_date_allowed= date(2022,5,1),
initial_visible_month=date(2022,3,1),
date= date(2022,3,1)
),
dash_table.DataTable(
id ='datatable-interactivity',
columns=[
{"name": i, "id": i, "deletable": False, "selectable": True, "hideable": True}
if i == "iso_alpha3" or i == "year" or i == "id"
else {"name": i, "id": i, "deletable": False, "selectable": True}
for i in df.loc[0:4,['Rank', 'Title']]
],
data =df.to_dict('records'),
editable= False,
style_as_list_view=True,
style_header={
'backgroundColor': 'white',
'fontWeight': 'bold',
},
style_data={
'whiteSpace': 'normal',
'height':'auto',
'backgroundColor': 'rgb(50, 50, 50)',
'color': 'white'},
),
], width=5),
dbc.Col([
dcc.Dropdown(id='my-dpdn', multi=True,
placeholder="Select a title",
options=[{'label': x, 'value': x}
for x in sorted(df['Title'].unique())]),
dcc.Graph(id='bar-fig', figure={}),
], width ={'size':5})
]),
dbc.Row([
]),
], fluid= True)
def date_string_to_date(date_string):
return pd.to_datetime(date_string, infer_datetime_format=True)
@app.callback(
dash.dependencies.Output('datatable-interactivity', 'data'),
dash.dependencies.Input('my-date-picker-single','date')
)
def update_data (date):
data = df.to_dict('records')
if date:
mask = (date_string_to_date(df['Chart Date']) == date_string_to_date(date))
data= df.loc[mask].head(10).to_dict('records')
return data
# -------------------------------------------------------------------------
if __name__ == '__main__':
app.run_server(debug=True)