diff --git a/f1_visualization/plotly_dash/layout.py b/f1_visualization/plotly_dash/layout.py index 0d0b211..013c323 100644 --- a/f1_visualization/plotly_dash/layout.py +++ b/f1_visualization/plotly_dash/layout.py @@ -225,6 +225,104 @@ def lap_numbers_slider(slider_id: str, **kwargs) -> dcc.RangeSlider: label="Distribution Plot", ) +compound_plot_explanation = dbc.Alert( + [ + html.H4("Methodology", className="alert-heading"), + html.P( + "The metric behind this graph is delta to lap representative time (DLRT). " + "It is a measure of how good a lap time is compared to other cars on track " + "at the same time, thus accounting for fuel load and track evolution." + ), + html.Hr(), + html.P( + "Since this metric is relative, this plot is best used for understanding " + "how different compounds degrade at different rates." + ), + ], + color="info", + dismissable=True, +) + +compound_plot_caveats = dbc.Alert( + [ + html.H4("Caveats", className="alert-heading"), + html.P( + "The above driver selection does not apply to this plot. " + "This plot always considers laps driven by all drivers." + ), + html.Hr(), + html.P( + "Tyre life does not always correspond to stint length. " + "As the same tyre may have been used in qualifying sessions." + ), + html.Hr(), + html.P("Only compounds that completed at least one sixth of all laps are shown."), + html.Hr(), + html.P( + "For each compound, the range of shown tyre life is limited by " + "the number of drivers who complete a stint of that length. This is to avoid " + "the plot being stretched by one driver doing a very long stint." + ), + ], + color="info", + dismissable=True, +) + +compound_plot_tab = dbc.Tab( + dbc.Card( + dbc.CardBody( + [ + compound_plot_explanation, + compound_plot_caveats, + html.Br(), + dbc.Row( + [ + dbc.Col( + dcc.Dropdown( + options=["lineplot", "boxplot", "violinplot"], + value="lineplot", + clearable=False, + placeholder="Select a plot type", + id="compound-type", + ), + width=6, + ), + dbc.Col( + dcc.Dropdown( + options=[ + {"label": "Show as seconds", "value": True}, + {"label": "Show as percentage", "value": False}, + ], + value=True, + clearable=False, + placeholder="Select a unit", + id="compound-unit", + ), + width=6, + ), + ] + ), + html.Br(), + dbc.Row( + dcc.Loading( + dcc.Dropdown( + options=[], + value=[], + placeholder="Select compounds", + disabled=True, + multi=True, + id="compounds", + ) + ) + ), + html.Br(), + dbc.Row(dcc.Loading(dcc.Graph(id="compound-plot"))), + ] + ) + ), + label="Compound Performance Plot", +) + external_links = dbc.Alert( [ "All data provided by ", @@ -267,7 +365,9 @@ def lap_numbers_slider(slider_id: str, **kwargs) -> dcc.RangeSlider: html.Br(), add_gap_row, html.Br(), - dbc.Tabs([strategy_tab, scatterplot_tab, lineplot_tab, distplot_tab]), + dbc.Tabs( + [strategy_tab, scatterplot_tab, lineplot_tab, distplot_tab, compound_plot_tab] + ), html.Br(), dbc.Row(external_links), ]