New features for EPC map

prospector-frontend/src/_includes/cmp.html

@@ -90,6 +90,8 @@ <h2 style="margin-bottom:0px;">Congestion in San Francisco</h2>
         <ul>
         <li><b>Auto Level-of-Service (LOS)</b> grades road segments by vehicle delay with "A" describing free flow,
         and "F" describing bumper-to-bumper conditions.</li>
+        <li><b>Auto Buffer Time Index</b> indicates auto travel time reliability. It is the extra time needed on average to not be late more than once a month.
+        A lower number means travelers experience more consistent travel times.</li>
         <li><b>Transit Speed</b> reflects the average speeds including both when the buses are in motion as well as waiting at stops.</li>
         <li><b>Transit Reliability</b> shows the variability in transit travel speeds. A lower percentage means transit speeds are more consistent.</li>
         <li><b>Auto-Transit Speed Ratio</b> compares auto speeds to  to transit speeds, with lower values indicating where transit is more competitive with auto.
@@ -99,7 +101,7 @@ <h2 style="margin-bottom:0px;">Congestion in San Francisco</h2>
         <h2 style="margin-top:10px; margin-bottom:0px;">How to use this map</h2>
         <hr style="margin-bottom:5px;margin-top:5px"/>
         <ul>
-        <li>Select a metric to display it on the map for all segments, for the latest year (2019).</li>
+        <li>Select a metric to display it on the map for all segments, for the latest year (2021).</li>
         <li>Move the year slider to map historic data.</li>
         <li>Choose time period to display metric for AM or PM peak.</li>
         <li>Click on a colored roadway segment on the map to see segment-specific trends.</li>
@@ -110,7 +112,7 @@ <h2 style="margin-top:10px; margin-bottom:0px;">How to use this map</h2>
             &nbsp;OK&nbsp;
           </button>
 
-          <button v-on:click="this.window.open('/assets/sfcta_cmp_data_2019.zip')"
+          <button v-on:click="this.window.open('/assets/sfcta_cmp_data_2021.zip')"
                   class="small ui right labeled icon floated yellow button"
                   style="margin-right:5px">
                   <i class="icon download"></i>

prospector-frontend/src/_includes/cmp_test.html

@@ -0,0 +1,132 @@
+<div id="container">
+
+  <div id="slide-panel" v-bind:class="{ shrunken: isPanelHidden}">
+    <div id="layer-widgets">
+      <button class="ui tiny green icon button"
+              v-on:click="clickedShowHide">
+              <i class="angle double icon"
+              v-bind:class="{ left: isPanelHidden, right: !isPanelHidden}"></i>
+      </button>
+    </div>
+  </div> 
+
+  <div id="panel" v-bind:class="{ shrunken: isPanelHidden}">
+      <div id="preheader">
+        <hr/>
+        <h3 class="apptitle">CONGESTION EXPLORER</h3>
+        <div id="helpbar">
+            <button class="ui mini right labeled icon violet button"
+                    v-on:click="clickToggleHelp">
+                    <i class="help circle icon"></i>
+                    What is this?
+            </button>
+            &nbsp;
+            <button class="ui mini right labeled icon violet button"
+                    v-on:click="this.window.open('https://www.sfcta.org/congestion','_blank')">
+                    <i class="arrow right icon"></i>
+                    Learn More
+            </button>
+            <hr/>
+           </div>
+
+          <div id="picker">
+            <div id="vizbuttons" class="ui vertical buttons">
+              <button v-for="item in vizlist"
+                    v-on:click="clickViz(item)"
+                    class="ui grey button"
+                    v-bind:class="{ active: item==selectedViz, yellow: item==selectedViz }">
+                    ${vizinfo[item]['TXT']}
+              </button>
+            </div>
+          </div>
+      </div>
+      <div id="header">
+          <div id="stats-panel">
+            <hr style="margin-bottom:-5px;" />
+            <div id="chartinfo"><h3 style="font-size: 22px;">${chartTitle}</h3></div>
+            <div id="geoinfo"><h5>${chartSubtitle}</h5></div>
+            <div id="longchart">
+                <div class="ui active dimmer">
+                  <div class="ui text loader">Loading</div>
+                </div>
+            </div>
+          </div>
+      </div>
+
+      <div class="logo">
+        <div class="pickers">
+            <h5 style="margin-top:10px">CHOOSE YEAR:</h5>
+            <vue-slider v-bind="timeSlider" v-model="sliderValue"></vue-slider>
+
+            <h5>CHOOSE TIME PERIOD:</h5>
+            <button v-on:click="pickAM"
+                    v-bind:class="{ active: isAMActive, yellow: isAMActive}"
+                     class="mini ui grey button">
+                     AM</button>
+            <button v-on:click="pickPM"
+                    v-bind:class="{ active: isPMActive, yellow: isPMActive }"
+                     class="mini ui grey button">
+                     PM</button>
+        </div>
+        <br>
+
+        <hr/>
+
+        <div class="logo">
+            <a class="agency-link" target="_blank" href="https://www.sfcta.org">
+              <img class="img-logo" src="/assets/SFCTA Logo dark-background.svg" width="80%">
+            </a>
+        </div>
+      </div>
+    </div>
+
+  <div id="helpbox" v-if="showHelp" class="ui segment">
+  <div v-cloak> <!-- hides everything until Vue finished loading -->
+        <h2 style="margin-bottom:0px;">Congestion in San Francisco</h2>
+        <hr style="margin-bottom:5px;margin-top:5px"/>
+        Use this tool to explore performance metrics for both automobiles and buses on major San Francisco streets and highways.
+        These are monitored every two years, in accordance with state law for San Francisco’s Congestion Management Program.
+
+        <ul>
+        <li><b>Auto Level-of-Service (LOS)</b> grades road segments by vehicle delay with "A" describing free flow,
+        and "F" describing bumper-to-bumper conditions.</li>
+        <li><b>Transit Speed</b> reflects the average speeds including both when the buses are in motion as well as waiting at stops.</li>
+        <li><b>Transit Reliability</b> shows the variability in transit travel speeds. A lower percentage means transit speeds are more consistent.</li>
+        <li><b>Auto-Transit Speed Ratio</b> compares auto speeds to  to transit speeds, with lower values indicating where transit is more competitive with auto.
+        If the ratio is 1 then auto and transit travel times are equal.</li>
+        </ul>
+
+        <h2 style="margin-top:10px; margin-bottom:0px;">How to use this map</h2>
+        <hr style="margin-bottom:5px;margin-top:5px"/>
+        <ul>
+        <li>Select a metric to display it on the map for all segments, for the latest year (2019).</li>
+        <li>Move the year slider to map historic data.</li>
+        <li>Choose time period to display metric for AM or PM peak.</li>
+        <li>Click on a colored roadway segment on the map to see segment-specific trends.</li>
+        </ul>
+
+        <div style="margin-top:20px;">
+          <button v-on:click="clickToggleHelp" class="small ui right floated violet button">
+            &nbsp;OK&nbsp;
+          </button>
+
+          <button v-on:click="this.window.open('/assets/sfcta_cmp_data_2019.zip')"
+                  class="small ui right labeled icon floated yellow button"
+                  style="margin-right:5px">
+                  <i class="icon download"></i>
+                  Download data (.zip)
+          </button>
+
+          <button v-on:click="this.window.open('https://www.sfcta.org/congestion','_blank')"
+                  class="small ui right floated basic violet button"
+                  style="margin-right:5px">
+                  Learn more&hellip;
+          </button>
+
+        </div>
+  </div>
+  </div>
+
+  <div id="sfmap"></div>
+
+</div>

prospector-frontend/src/_includes/cmprt.html

@@ -55,10 +55,35 @@ <h3 class="apptitle">COVID-ERA CONGESTION TRACKER</h3>
 
       <div class="logo">
         <div class="pickers">
-            <h5 style="margin-top:10px">CHOOSE WEEK:</h5>
-            <vue-slider v-bind="timeSlider" v-model="sliderValue"></vue-slider>
+
+            <div v-if="isHRActive & !isTPHidden">
+                <h5 style="margin-top:10px">CHOOSE TIME OF DAY:</h5>
+                <vue-slider v-bind="hrSlider" 
+                    v-model="hrValue"
+                    style="width:85%; margin-right:5px; float:left">
+                </vue-slider>
+                <button class="mini ui inverted button"
+                    style="padding: 5px 10px; margin-left: 10px;"
+                    v-on:click="clickTODPlay" 
+                    v-bind:class="{ active: isPlayTODActive, red: isPlayTODActive}">
+                    <div v-if="isPlayTODActive"><b>&#2405;</b></div>
+                    <div v-else>&#9658;</div>
+                </button>
+            </div>
+
+            <h5 style="margin-top:20px">CHOOSE MONTH:</h5>
+            <vue-slider v-bind="timeSlider" v-model="sliderValue"
+                style="width:85%; margin-right:5px; float:left">
+            </vue-slider>
+            <button class="mini ui inverted button"
+                    style="padding: 5px 10px; margin-left: 10px;"
+                    v-on:click="clickMonPlay" 
+                    v-bind:class="{ active: isPlayMonActive, red: isPlayMonActive}">
+                    <div v-if="isPlayMonActive"><b>&#2405;</b></div>
+                    <div v-else>&#9658;</div>
+            </button>
 			<div v-if="!isTPHidden">
-				<h5>CHOOSE TIME PERIOD:</h5>
+				<h5 style="margin-top:3px">CHOOSE TIME PERIOD:</h5>
 				<button v-on:click="pickAM"
 						v-bind:class="{ active: isAMActive, yellow: isAMActive}"
 						 class="mini ui grey button">
@@ -67,6 +92,10 @@ <h5>CHOOSE TIME PERIOD:</h5>
 						v-bind:class="{ active: isPMActive, yellow: isPMActive }"
 						 class="mini ui grey button">
 						 PM</button>
+                <button v-on:click="pickHR"
+						v-bind:class="{ active: isHRActive, yellow: isHRActive }"
+						 class="mini ui grey button">
+						 1-Hour</button>         
 			</div>
         </div>
         <br>
@@ -88,11 +117,11 @@ <h2 style="margin-bottom:0px;">COVID-Era Congestion Tracker</h2>
         Explore how congestion in San Francisco has changed since the March 2020 shelter-in-place order. 
 		Automobile Level-of-Service (LOS) and Vehicle Miles Traveled (VMT) per mile are presented for key segments in the transportation network. 
 		In addition, changes in these metrics relative to pre-COVID conditions can be viewed.</br>
-        The LOS are calculated using speed data from INRIX Roadway Analytics. Speeds are weekly averages calculated using
+        The LOS are calculated using speed data from INRIX Roadway Analytics. Speeds are monthly averages calculated using
         data from Tuesday through Thursday of each week. 
-		VMT metrics are derived using imputed vehicle volumes from observed speeds and Volume Delay Functions (VDF). 
+		VMT estimates are derived using imputed vehicle volumes from observed speeds and Volume Delay Functions (VDF). 
 		Total peak period VMT for key segments is expanded to Daily Citywide estimate by applying expansions factors derived from historic Caltrans VMT estimated for San Francisco.
-		The data on this website are updated every one to two weeks.
+		The data on this website are updated every month.
 
         <ul>
         <li><b>Auto Level-of-Service (LOS)</b> grades road segments by vehicle delay with "A" describing free flow,
@@ -109,8 +138,10 @@ <h2 style="margin-bottom:0px;">COVID-Era Congestion Tracker</h2>
         <h2 style="margin-top:10px; margin-bottom:0px;">How to use this map</h2>
         <hr style="margin-bottom:5px;margin-top:5px"/>
         <ul>
-        <li>Move the week slider to update map with data from chosen week.</li>
-        <li>Choose time period to update map for AM (7a-9a) or PM (4:30p-6:30p) peak.</li>
+        <li>Move the month slider to update map with data from chosen month. Click the play button to automatically cycle through months.</li>
+        <li>Choose time period to update map for AM (7a-9a) peak, PM (4:30p-6:30p) peak or 1-Hour time periods.</li>
+        <li>Choosing the 1-Hour period provides an additional time-of-day option to update the map for a given hour of the day.</li>
+        <li>The chart on the side panel shows trends across the months when AM or PM peak periods are selected. It shows the variation across an average day when 1-Hour time period is chosen.</li>
         <li>Click on a roadway segment on the map to see segment-specific trends.</li>
         </ul>
 

prospector-frontend/src/_includes/covid_scn.html

@@ -27,7 +27,7 @@ <h1 class="apptitle">COVID Scenario Tool</h1>
             </button>
         </div>
 
-        <div id="picker" style="margin-top:15px">
+        <div id="picker" style="margin-top:20px">
 
 		  <h3>CHOOSE PRESET SCENARIO</h3>
 		  <select v-model="selectedPreset" class="col-3">
@@ -37,7 +37,7 @@ <h3>CHOOSE PRESET SCENARIO</h3>
             </option>
           </select>
 
-		  <div style="margin-top:45px; margin-bottom:20px"><h3>CUSTOMIZE SCENARIO SETTINGS</h3></div>
+		  <div style="margin-top:50px; margin-bottom:20px"><h3>CUSTOMIZE SCENARIO SETTINGS</h3></div>
 
 		  <div class="col-1"><h5>Unemployment</h5></div>
 	      <div class="col-2"><vue-slider v-bind="dim1Slider" v-model="dim1Value"></vue-slider></div>
@@ -59,7 +59,7 @@ <h3>CHOOSE PRESET SCENARIO</h3>
           <label><h5>COMPARE TO BASELINE (PRE-COVID)</h5></label>
          </div>
 
-         <h3 style="margin-top:10px">CHOOSE MAP</h3> 
+         <h3 style="margin-top:15px">CHOOSE MAP</h3> 
          <div id="vizbuttons" class="ui vertical buttons" style="margin-bottom:15px">
               <button v-for="item in vizlist"
                     v-on:click="clickViz(item)"
@@ -122,7 +122,7 @@ <h5>CHOOSE INCOME CATEGORY</h5>
 		  <h5>SCENARIO: ${scnTitle} 
 		    <i class="tooltip question circle icon"><span class="tooltiptext"> ${scnDesc}</span></i>
 		  </h5>
-		  <h5 v-if="selectedScn>1"><span style="color: #348cc0">Baseline</span>&nbsp;&nbsp;&nbsp;<span style="color: #cd7f9e">Scenario</span></h5>
+		  <h5 v-if="selectedScn>1"><span style="color: #7FBADC">Baseline</span>&nbsp;&nbsp;&nbsp;<span style="color: #DBA4AA">Scenario</span></h5>
 
 		  <div id="chart1" class="chcol1">
                 <div class="ui active dimmer">
@@ -133,10 +133,10 @@ <h5 v-if="selectedScn>1"><span style="color: #348cc0">Baseline</span>&nbsp;&nbsp
 		  <div id="chart3" class="chcol3"></div>
 		  <div id="chart4" class="chcol4"></div>
 
-		  <div class="chcol1">SF-Res Trips (000s)</div>
-		  <div class="chcol2">Avg. Speed (mph)</div>
-		  <div class="chcol3">Muni Brdgs. (000s)</div>
-		  <div class="chcol4">VMT (million)</div>
+		  <div class="chcol1">SF-Res Trips<br>(000s)</div>
+		  <div class="chcol2">Avg. Speed<br>(mph)</div>
+		  <div class="chcol3">Muni Brdgs.<br>(000s)</div>
+		  <div class="chcol4">VMT<br>(million)</div>
 		  <!--h5 style="margin-top:5px">SCENARIO SUMMARY</h5-->
 			<!--table id="sumtable">
 				<thead>