HTML outputs for GTFS data.

.gitignore

@@ -5,10 +5,18 @@
 # moved blanket rules above specific exceptions for test fixtures
 *.zip
 *.pkl
-# except test fixtures
+*.html
+
+# exception for test fixtures
 !tests/data/newport-2023-06-13.osm.pbf
 !tests/data/newport-20230613_gtfs.zip
 !tests/data/gtfs/route_lookup.pkl
+!tests/data/gtfs/report/html_template.html
+
+# exception for html templates
+!src/transport_performance/gtfs/report/html_templates/evaluation_template.html
+!src/transport_performance/gtfs/report/html_templates/stops_template.html
+!src/transport_performance/gtfs/report/html_templates/summary_template.html
 
 ### Project structure ###
 data/*
@@ -35,7 +43,6 @@ outputs/*
 
 *.Rproj
 
-*.html
 *.pdf
 *.csv
 *.rds

requirements.txt

@@ -25,5 +25,7 @@ cartopy
 folium
 mapclassify
 seaborn
+pretty_html_table
+kaleido
 numpy>=1.25.0 # test suite will fail if user installed lower than this
 -e .

src/transport_performance/gtfs/gtfs_utils.py

@@ -3,10 +3,13 @@
 import geopandas as gpd
 from shapely.geometry import box
 from pyprojroot import here
+import plotly.graph_objects as go
+import pandas as pd
 
 from transport_performance.utils.defence import (
     _is_expected_filetype,
     _check_list,
+    _type_defence,
 )
 
 
@@ -60,3 +63,85 @@ def bbox_filter_gtfs(
     print(f"Filtered feed written to {out_pth}.")
 
     return None
+
+
+# NOTE: Possibly move to a more generalised utils file
+def convert_pandas_to_plotly(
+    df: pd.DataFrame, return_html: bool = False
+) -> go.Figure:
+    """Convert a pandas dataframe to a visual plotly figure.
+
+    Parameters
+    ----------
+    df : pd.DataFrame
+        A pandas dataframe to convert to plotly
+        (single index only)
+    return_html : bool, optional
+        Whether or not to return the html element,
+          by default False
+
+    Returns
+    -------
+    go.Figure
+        A plotly figure containing the drawn dataframe
+
+    Raises
+    ------
+    LookupError
+        An error raised if an invalid colour scheme is passed
+    TypeError
+        An error raised if the given pandas dataframe is MultiIndex
+
+    """
+    # pre-defined colour schemes
+    schemes = {
+        "dsc": {
+            "header_fill": "#12436D",
+            "header_font_colour": "white",
+            "cell_fill": "#A285D1",
+            "cell_font_colour": "black",
+            "font_family": "sans-serif",
+            "line_colour": "black",
+        }
+    }
+    # defences
+    _type_defence(df, "df", pd.DataFrame)
+    _type_defence(return_html, "return_html", bool)
+    if isinstance(df.columns, pd.MultiIndex) or isinstance(
+        df.index, pd.MultiIndex
+    ):
+        raise TypeError(
+            "Pandas dataframe must have a singular index, not MultiIndex. "
+            "This means that 'df.columns' or 'df.index' does not return a "
+            "MultiIndex."
+        )
+    # harcoding scheme for now. Could be changed to param if more are added
+    scheme = "dsc"
+    # create plotly df
+    fig = go.Figure(
+        data=go.Table(
+            header=dict(
+                values=df.columns.values,
+                fill_color=schemes[scheme]["header_fill"],
+                font=dict(
+                    color=schemes[scheme]["header_font_colour"],
+                    family=schemes[scheme]["font_family"],
+                ),
+                line_color=schemes[scheme]["line_colour"],
+            ),
+            cells=dict(
+                values=[df[col_name] for col_name in df.columns],
+                fill_color="#A285D1",
+                font=dict(
+                    color=schemes[scheme]["cell_font_colour"],
+                    family=schemes[scheme]["font_family"],
+                ),
+                align="left",
+                line_color=schemes[scheme]["line_colour"],
+            ),
+        )
+    )
+
+    if return_html:
+        return fig.to_html(full_html=False)
+    return fig

src/transport_performance/gtfs/report/css_styles/styles.css

@@ -0,0 +1,195 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    min-height: 100vh;
+}
+
+a {
+    text-decoration: none;
+
+}
+
+li {
+    list-style: none;
+}
+
+h1,
+h2 {
+    color: 	black;
+}
+
+h3 {
+    color: #999;
+}
+
+table {
+    overflow: hidden;
+    overflow-x: scroll;
+    max-width: 1500px;
+    display: block;
+    overflow-y: scroll;
+    max-height: 800px;
+}
+
+thead {
+    position: sticky;
+    top: -10px;
+}
+
+.btn {
+    background: #f05462;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+}
+
+.btn:hover {
+    color: #f05462;
+    background: white;
+    padding: 3px 8px;
+    border: 2px solid #f05462;
+}
+
+.title {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 15px 10px;
+    border-bottom: 2px solid #999;
+}
+
+table {
+    padding: 10px;
+}
+
+th,
+td {
+    text-align: left;
+    padding: 8px;
+}
+
+.side-menu {
+    position: fixed;
+    background: #28A197;
+    width: 20vw;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.side-menu .side-menu-title {
+    height: 10vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold
+}
+
+.side-menu li {
+    font-size: 24px;
+    padding: 10px 40px;
+    display: flex;
+    align-items: center;
+}
+
+.side-menu li:hover {
+    background: white;
+    color: #28A197;
+
+}
+
+.side-menu li:hover .option{
+    color: #28A197;
+    background-color: white;
+}
+
+.side-menu .option {
+    color: white;
+}
+
+.side-menu .option:hover{
+    color: #28A197;
+    background-color: white;
+}
+
+.container {
+    position: absolute;
+    right: 0;
+    width: 80vw;
+    height: 100vh;
+    background: #f1f1f1;
+}
+
+.container .content {
+    position: relative;
+    background: #f1f1f1;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+.container .content .analysis-cont {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    background-color: #f1f1f1;
+    padding: 20px;
+}
+
+.container .content .analysis-cont .summary div {
+    display: block;
+}
+
+
+.container .content .analysis-cont .summary dd {
+    font-weight: bold;
+    margin-inline-start: 0;
+    display: inline-block;
+    min-width: 130px;
+}
+
+.container .content .analysis-cont .summary dt {
+    display: inline-block;
+}
+
+.analysis-title {
+    font-weight: bold;
+    font-size: large;
+    margin-bottom: 10px;
+}
+
+hr {
+    border: 0;
+    clear:both;
+    display:block;
+    width: 100%;
+    background-color: black;
+    height: 5px;
+  }
+
+.container .header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 80vw;
+    height: 10vh;
+    background: #801650;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+.container .header .header-title {
+    display: flex;
+    align-items: center;
+    color:	#F46A25;
+    font-weight: bold;
+    font-size: xx-large;
+}