FPL_DASH/app.py at master · jcheong0428/FPL_DASH · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
#!/usr/bin/env/ python3
# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
import plotly.express as px
import pandas as pd, numpy as np
import os, glob, subprocess
from tabs import tab1_table
from tabs import tab2_scatter
from tabs import tab3_about
from firebase import firebase
from utils import TABLE_COLUMNS, TABLE_EXTENDED_COLUMNS, latest_stats

firebase = firebase.FirebaseApplication('https://fpldash-bbf95-default-rtdb.firebaseio.com/', None)

######## Load the data ########
cwd = 'Fantasy-Premier-League/data/2021-22/'
all_players_raw = pd.read_csv(os.path.join(cwd, 'players_raw.csv'))
# for position
element_type_dict = {1:"GK", 2:"DEF", 3:"MID", 4:"FWD"}
all_players_raw["Position"] = all_players_raw['element_type'].apply(lambda x: element_type_dict[x])

# latest_gw
output_file = 'latest_gw.csv'
all_gw = pd.read_csv(output_file)
latest_round = np.sort(all_gw['round'].unique())[-1]

# understat
understat = pd.read_csv("understat_player.csv", engine="python")
understat.fplid = understat.fplid.astype(str)

df = latest_stats(weeks=6, sort_by="threat", func_name = "sum", understat=understat, divide_minutes=True)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP],meta_tags=[{'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5,'}]
)

app.config['suppress_callback_exceptions'] = True

server = app.server
app.title = "FPL DASH"
app.index_string = """<!DOCTYPE html>
<html>
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-RQ02DDS4VZ"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-RQ02DDS4VZ');
        </script>
        {%metas%}
        <title>{%title%}</title>
        {%favicon%}
        {%css%}
    </head>
    <body>
        {%app_entry%}
        <footer>
            {%config%}
            {%scripts%}
            {%renderer%}
        </footer>

    <!-- Default Statcounter code for fpldash
    http://www.fpldash.com -->
    <script type="text/javascript">
    var sc_project=12475179;
    var sc_invisible=1;
    var sc_security="6533ba56";
    </script>
    <script type="text/javascript"
    src="https://www.statcounter.com/counter/counter.js"
    async></script>
    <noscript><div class="statcounter"><a title="Web Analytics"
    href="https://statcounter.com/" target="_blank"><img
    class="statcounter"
    src="https://c.statcounter.com/12475179/0/6533ba56/1/"
    alt="Web Analytics"></a></div></noscript>
    <!-- End of Statcounter Code -->
    </body>
</html>"""

table = dash_table.DataTable(
    id='table',
    columns=[{"name": i.replace("_", " "), "id": i, "deletable":True} for i in df.columns],
    data=df.to_dict('records'),

    page_size=20,

    sort_action='native',
    filter_action='native',
    style_table={'overflowX': 'auto'},
    style_cell={
        'height': 'auto',
        # all three widths are needed
        'minWidth': '60px', 'width': 'auto', 'maxWidth': '120px',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
        'whiteSpace': 'normal'
    },
    style_header={
                'fontWeight': 'bold',
                "textTransform": "uppercase"},
    style_as_list_view=True,
)

# https://dash-bootstrap-components.opensource.faculty.ai/examples/graphs-in-tabs/
app.layout = dbc.Container(
    [
        dcc.Store(id="store"),
        dbc.NavbarSimple(color="#37003c"),
        dbc.Row(
            dbc.Col(
                html.Div(
                    html.H1("Fantasy Premier League Dashboard"),
                ), width={"size": 11, "offset": 1}
            )
        ),
        dbc.Row(
            dbc.Col(
                html.Div(
                    dcc.Markdown("""FPL DASH is a customizable Fantasy Premier League dashboard with the latest stats from [FPL](https://fantasy.premierleague.com/) and [understat](https://understat.com/).  Create your own player form by deciding how many latest games to consider and what metric you want to analyze. Use the Custom Graph tool to plot metrics against one another such as total points per value."""
                    )
                ), width={"size": 8, "offset": 1}, className="markdown"
            )
        ),
        html.Hr(),
        dbc.Row(
            dbc.Col(
                dbc.Tabs(
                    children = [
                        dbc.Tab(label="Form Table", tab_id="table"),
                        dbc.Tab(label="Custom Graph", tab_id="scatter"),
                        dbc.Tab(label="About", tab_id="about"),
                    ],
                    id="tabs",
                    active_tab="table",
                    className="tabs"
                ), width={"size": 10, "offset": 1}
            ),
        ),
        html.Div(id="tab-content", className="p-4"),

        html.Hr(),
        html.Footer([
            html.Div(f"Latest up to 2021-22 GW {latest_round}", id="last-update", className="last-update"),
            html.A("Data from vaastav", href="https://github.com/vaastav/Fantasy-Premier-League", className="text-dark", style={"float": "right", "margin-right": "30px", "vertical-align": "middle"}),
            html.A("Created by Jin", href="http://jinhyuncheong.com", className="text-dark", style={"float": "right", "margin-right": "30px", "vertical-align": "middle"}),
            html.A("Contribute", href="https://github.com/jcheong0428/FPL_DASH", className="text-dark", style={"float": "right", "margin-right": "30px", "vertical-align": "middle"}),
        ], id="footer", className="justify-content-center text-center", style={"background-color": "#37003c"})
    ]
)

@app.callback(
    Output('table-content', 'children'),
    [Input('tab1-slider', 'value'),
    Input('tab1-method', 'value'),
    ])
def update_table(value, method):
    divide_minutes = True
    df = latest_stats(weeks=value, sort_by="total_points", func_name = method, understat=understat, divide_minutes=divide_minutes)
    if divide_minutes:
        df = df[TABLE_EXTENDED_COLUMNS]
    else:
        df = df[TABLE_COLUMNS]

    table.data = df.to_dict('records')
    return table

@app.callback(
    Output("tab-content", "children"),
    [Input("tabs", "active_tab")],
)
def render_tab_content(active_tab):
    """
    This callback takes the 'active_tab' propert`y as input, as well as the
    stored graphs, and renders the tab content depending on what the value of
    'active_tab' is.
    """
    if active_tab is not None:
        if active_tab == "table":
            return tab1_table.tab_1_layout
        elif active_tab == "scatter":
            return tab2_scatter.tab_2_layout
        elif active_tab == "about":
            return tab3_about.tab_3_layout
    return "No tab selected"

@app.callback(
    Output('player-graph', 'figure'),
    [Input('xaxis-column', 'value'),
    Input('yaxis-column', 'value'),
    Input('tab2-slider', 'value'),
    Input('tab2-method', 'value'),],
)
def update_graph(xaxis_column_name, yaxis_column_name, value, method):
    divide_minutes = True
    df = latest_stats(weeks=value, sort_by="total_points", func_name = method, understat=understat, divide_minutes=divide_minutes)
    if divide_minutes:
        df = df[TABLE_EXTENDED_COLUMNS]
        df = df.replace([np.inf, -np.inf], np.nan).dropna()
    else:
        df = df[TABLE_COLUMNS]
    fig = px.scatter(df,
                    x=xaxis_column_name,
                    y=yaxis_column_name,
                    hover_name='Player Name',
                    color="Position",
                    trendline="ols",
                    text="Player Name"
                    )
    fig.update_layout(
        template="plotly_white",
        legend=dict(
        yanchor="bottom",
        y=-0.3,
        xanchor="center",
        x=0.5,
        orientation= 'h'
    ))
    fig.update_traces(textposition='top left')
    return fig

@app.callback([Output('thankyou-box', 'style'), Output('feedback-box', 'style')],
              Input('feedback-button', 'n_clicks'),
              State('message', 'value'))
def display_confirm(n, msg):
    if n is not None:
        firebase.post("/feedback", {"msg": msg})
        return [{"display": "block"}, {"display": "none"}]
    return [{"display": "none"}, {"display": "block"}]

ON_HEROKU = os.environ.get('ON_HEROKU')
if ON_HEROKU:
    # get the heroku port
    port = int(os.environ.get('PORT', 17995))  # as per OP comments default is 17995
else:
    port = 5000

if __name__ == '__main__':
    # app.run_server(debug=True, host="0.0.0.0", port=port)
    app.run_server(debug=False, host="0.0.0.0", port=port)