Skip to content

Commit

Permalink
Added funcationality to generate HTML reports of a GtfsInstance
Browse files Browse the repository at this point in the history
  • Loading branch information
CBROWN-ONS committed Aug 10, 2023
1 parent 1cc9fe9 commit bf96d3d
Show file tree
Hide file tree
Showing 8 changed files with 618 additions and 2 deletions.
6 changes: 5 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,16 @@
*.zip
*.pkl
*.png
*.html

# except 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/plots/example_png_summary.PNG
!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/*
Expand All @@ -37,7 +42,6 @@ outputs/*

*.Rproj

*.html
*.pdf
*.csv
*.rds
Expand Down
148 changes: 148 additions & 0 deletions src/transport_performance/gtfs/report/css_styles/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
* {
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;
}

.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 .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 .analysis-cont {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
background-color: #f1f1f1;
padding: 20px;
}
.container .analysis .analysis-title {
font-weight: bold;
font-size: large;
margin-bottom: 10px;
}


.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;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>GTFS Report [date]</title>
</head>

<body>
<div class="side-menu">
<div class="side-menu-title">
<h1>GTFS Report</h1>
</div>
<ul>
<li><a class="option" href="index.html">Data Evaluation</a> </li>
<li><a class="option" href="stops.html">Stops</a> </li>
<li><a class="option" href="summaries.html">Data Summaries</a> </li>
</ul>
</div>
<div class="container">
<div class="header">
<div class="header-title">
<span>GTFS Data Evaluation</span>
</div>
</div>
<div class="content" style="margin-top: 10vh;">
<div class="analysis-cont">
<span class="analysis-title">[eval_title_1]</span>
<div style="width:100%;margin:10px;">
[eval_placeholder_1]
<div>
</div>
</div>
</div>
</body>
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>GTFS Report - [date]</title>
</head>

<body>
<div class="side-menu">
<div class="side-menu-title">
<h1>GTFS Report</h1>
</div>
<ul>
<li><a class="option" href="index.html">Data Evaluation</a> </li>
<li><a class="option" href="stops.html">Stops</a> </li>
<li><a class="option" href="summaries.html">Data Summaries</a> </li>
</ul>
</div>
<div class="container">
<div class="header">
<div class="header-title">
<span>GTFS Trips and Routes Summaries</span>
</div>
</div>
<div class="content" style="margin-top: 10vh;">
<div class="analysis-cont">
<span class="analysis-title">[stops_title_1]</span>
<iframe src="[stops_placeholder_1]" style="width:100%;margin:10px;min-height: 80vh;"></iframe>
</div>
</div>
<div class="content">
<div class="analysis-cont">
<span class="analysis-title">[stops_title_2]</span>
<iframe src="[stops_placeholder_2]" style="width:100%;margin:10px;min-height: 80vh;"></iframe>
</div>
</div>
</div>
</body>
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>GTFS Report - [date]</title>
</head>

<body>
<div class="side-menu">
<div class="side-menu-title">
<h1>GTFS Report</h1>
</div>
<ul>
<li><a class="option" href="index.html">Data Evaluation</a> </li>
<li><a class="option" href="stops.html">Stops</a> </li>
<li><a class="option" href="summaries.html">Data Summaries</a> </li>
</ul>
</div>
<div class="container">
<div class="header">
<div class="header-title">
<span>GTFS Trips and Routes Summaries</span>
</div>
</div>
<div class="content" style="margin-top: 10vh;">
<div class="analysis-cont">
<span class="analysis-title">[plotly_title_1]</span>
<div style="width:100%;margin:10px;">
[plotly_placeholder_1]
</div>
</div>
</div>
<div class="content">
<div class="analysis-cont">
<span class="analysis-title">[plotly_title_2]</span>
<div style="width:100%;margin:10px;">
[plotly_placeholder_2]
</div>
</div>
</div>
</div>
</body>
Loading

0 comments on commit bf96d3d

Please sign in to comment.