I have a function to filter a .csv file by year to then visualize a plot with bokeh/change the df before it be plotted. On jupyter notebook I am using ipywidgets with the interact function to change it and works just fine, the problem that when I bring it to Flask it won't work the same way as it is bokeh standalone which means not connect to the boke server. Below the jupyter notebook example:
def dfTeamsChamp(year):
dfR = pd.read_csv('races.csv', index_col=0, delimiter=',')
dfR = dfR[dfR['year'] == int(year)]
dfR.drop('url', axis=1, inplace=True)
dfR.sort_values('date', inplace=True)
#df contructors teams
dfC = pd.read_csv('constructors.csv', delimiter=',', index_col=0)
#df constructor standings
dfC_S = pd.read_csv('constructor_results.csv', delimiter=',', index_col=0)
dfC_S.set_index('raceId', inplace=True)
#dfC_S = pd.read_csv( 'constructor_standings.csv', index_col=1, delimiter=',')
#filter year qualify
CSF = np.array(dfR.index)
dfC_S1 = dfC_S.index.isin(CSF)
dfC_S1 = dfC_S[dfC_S1]
c_F = np.array(dfC_S1.constructorId.unique())
dfC1 = dfC.index.isin(c_F)
dfC1 = dfC[dfC1]
#dictionary constructorId x constructor name
diC_N = pd.Series(dfC1.name.values, dfC1.index.values).to_dict()
#add constructor name to df constructor standings
dfC_S1['Team'] = dfC_S1.constructorId.map(diC_N)
#costructor cham
dfC_S2 = dfC_S1.sort_values('points', na_position ='first')
dfC_S2 = pd.DataFrame(dfC_S2.groupby('Team')['points'].sum())
dfC_S2.sort_values('points', ascending=False, inplace=True)
return dfC_S2
f1Years = range(1950,2022)
f1Y_s = ["{:04d}".format(x) for x in f1Years][::-1]
interact(dfTeamsChamp, text='Select year', Year=f1Y_s )
It works like a charm here, but once I bring it to Flask the ipywidgets won't display or let me update it as it won't embed the python function. I created a simple select/dropdown in HTML but I do not know how to get the value and add it to the view. If someone can help me out with it please. Below the Flask view:
@app.route('/', methods=['GET', 'POST'])
def index():
f1Years = range(1950,2022)
f1Y_s = ["{:04d}".format(x) for x in f1Years][::-1]
script, div = components(load_df(f1Y_s[0]))
return render_template('index.html', script=script, div=div, resources=CDN.render(), f1Y_s=f1Y_s)
The HTML template:
<select name="Years" method="GET" action="/">
<option value="{{f1Y_s[0]}}" selected>{{f1Y_s[0]}}</option>
{% for year in f1Y_s[1:] %}
<option value="{{year}}">{{year}}</option>
{% endfor %}
</select>