cmp: add auto buffer time index metric and 2021 data export file

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/cmp/code.js

@@ -36,7 +36,7 @@ mymap.setView([37.76889, -122.440997], 13);
 // some important global variables.
 const API_SERVER = 'https://api.sfcta.org/api/';
 const GEO_VIEW = 'cmp_segments_master';
-const VIZ_LIST = ['ALOS', 'TSPD', 'TRLB', 'ATRAT'];
+const VIZ_LIST = ['ALOS', 'ABUFI', 'TSPD', 'TRLB', 'ATRAT'];
 const VIZ_INFO = {
   ALOS: {
     TXT: 'Auto Level-of-Service (LOS)',
@@ -50,7 +50,20 @@ const VIZ_INFO = {
     CHART_PREC: 1,
     POST_UNITS: '',
   },
-
+
+  ABUFI: {
+    TXT: 'Auto Buffer Time Index',
+    VIEW: 'cmp_autotransit',
+    METRIC: 'auto_bi',
+    METRIC_DESC: 'Auto Buffer Time Index',
+    COLOR_BY_BINS: true,
+    COLORVALS: [0, 5, 10, 20, 30, 40],
+    COLORS: ['#ccc', '#060', '#9f0', '#ff3', '#f90', '#f60', '#c00'],
+    CHARTINFO: 'AUTO RELIABILITY TREND:',
+    CHART_PREC: 1,
+    POST_UNITS: '%',
+  },
+
   TSPD: {
     TXT: 'Transit Speed',
     VIEW: 'cmp_autotransit',
@@ -156,7 +169,7 @@ async function fetchCmpSegments() {
 async function fetchAllCmpSegmentData(dat_view) {
   //FIXME this should be a map()
   let params =
-    'select=cmp_segid,year,period,los_hcm85,transit_speed,transit_cv,atspd_ratio,auto_speed';
+    'select=cmp_segid,year,period,los_hcm85,transit_speed,transit_cv,atspd_ratio,auto_speed,auto_bi';
 
   let data_url = API_SERVER + dat_view + '?' + params;
 
@@ -523,11 +536,12 @@ function buildChartHtmlFromCmpData(json = null) {
     });
   } else {
     let ykey_tmp, lab_tmp;
-    if (app.selectedViz == 'ALOS') {
+    let xd_arr = ['ALOS', 'ABUFI']
+    if (xd_arr.includes(app.selectedViz)) {
       ykey_tmp = ['art', 'fwy'];
       lab_tmp = ['Arterial', 'Freeway'];
       new Morris.Line({
-        data: _aggregateData[app.selectedViz][selPeriod].concat(_aggregateData_xd[app.selectedViz][selPeriod]),
+        data: (app.selectedViz=='ALOS')? _aggregateData[app.selectedViz][selPeriod].concat(_aggregateData_xd[app.selectedViz][selPeriod]): _aggregateData_xd[app.selectedViz][selPeriod],
         element: 'longchart',
         gridTextColor: '#aaa',
         hideHover: true,