Change from pie charts to 100% stacked bar chart

frontend/index.html

@@ -395,6 +395,7 @@
       return study_name;
     }
 
+    var mode_studied
     $(function () {
       $(document).ready(function () {
         // Simple solution to program/study plots dropdown; load the config and corresponding metrics.html
@@ -403,6 +404,7 @@
           // get units
           const dist_units = (data.display_config.use_imperial) ? "miles" : "kilometers";
           console.log("Units for display are", data.display_config.use_imperial, dist_units);
+          mode_studied = data.intro.mode_studied
           // Load list of plots corresponding to study/program
           dynamic_labels = data.label_options
           if (data.intro.program_or_study == 'program') {
@@ -417,18 +419,17 @@
               console.log("Dynamic Labels are unavailable for: " + STUDY_CONFIG)
             }
             $.get(load_file, function (response) {
-              const configuredResponse = response.replaceAll("${data.intro.mode_studied}", data.intro.mode_studied);
+              const configuredResponse = response.replaceAll("${data.intro.mode_studied}", mode_studied);
               console.log("configuring units");
               const unitConfigured = configuredResponse.replaceAll("${data.display_config.use_imperial}", dist_units);
               $('#metric').append(unitConfigured);
               addPreconfiguredMetrics([
-                "ntrips_mode_confirm",
-                "miles_mode_confirm",
-                "ntrips_sensed_mode",
-                "miles_sensed_mode",
-                `ntrips_${data.intro.mode_studied}_purpose`,
-                `ntrips_${data.intro.mode_studied}_per_weekday`,
-                `sketch_CO2impact_${data.intro.mode_studied}`
+                "ntrips_total",
+                "total_trip_length",
+                "ntrips_purpose",
+                `ntrips_${mode_studied}_purpose`,
+                `ntrips_${mode_studied}_per_weekday`,
+                `sketch_CO2impact_${mode_studied}`
               ]);
             });
           }
@@ -450,10 +451,8 @@
               const unitConfigured = response.replaceAll("${data.display_config.use_imperial}", dist_units);
               $('#metric').append(unitConfigured);
               addPreconfiguredMetrics([
-                "ntrips_mode_confirm",
-                "miles_mode_confirm",
-                "ntrips_sensed_mode",
-                "miles_sensed_mode",
+                "ntrips_total",
+                "total_trip_length",
                 "ntrips_purpose",
                 "ntrips_sensed_per_weekday",
                 "ts_emissions_user"
@@ -531,15 +530,59 @@
         // and without this change, even if we set the dateVal to ''
         // we would try to load ntrips_purpose__default.png
         const imgFile = "plots/" + metric + "_" + dateVal + program + ".png";
+        const htmlFile = "plots/" + metric + "_" + dateVal + program + ".html";
         const altTextFile = "plots/" + metric + "_" + dateVal + program + ".txt";
         const altText = loadFile(altTextFile);
-        const nw = ["<li data-min-sizex='2' data-min-sizey='2'>"
+        const isStackedMetric = ['ntrips_total', 'ntrips_purpose', 'ntrips_under80', 'ntrips_commute_mode_confirm',
+                                 'total_trip_length', 'total_trip_length_land',`ntrips_${mode_studied}_total`,
+                                 `ntrips_${mode_studied}_purpose`,`total_trip_length_${mode_studied}_replaced_mode`]
+                                 .includes(metric);
+        const jsonData = { metric, dateVal, program, metricLabel, dateLabel, programLabel, sizex, sizey };
+
+        if (isStackedMetric){
+          const nw = ["<li data-min-sizex='2' data-min-sizey='2'>"
+            + labelText
+            + "&nbsp;"
+            + "<button class= 'btn btn_default addInfo' style='color: black; background-color: none; border-color: white;' data-info='" + encodeURIComponent(JSON.stringify(jsonData))+ "'> More Info </button>"
+            + "&nbsp;"
+            + "<button class='remove'>x</button>"
+            + "<img src='" + imgFile + "' alt='" + altText + "' style='width: 99%; height: 90%; object-fit: scale-down;'>"
+            + "</li>",
+            sizex, sizey];
+          gridster.add_widget.apply(gridster, nw);
+        }
+        else{
+          const nw = ["<li data-min-sizex='2' data-min-sizey='2'>"
+            + labelText
+            + "<button class='remove'>x</button>"
+            + "<img src='" + imgFile + "' alt='" + altText + "' width=90% height=90%>"
+            + "</li>",
+            sizex, sizey];
+          gridster.add_widget.apply(gridster, nw);
+        }
+      });
+
+      $('body').on("click", ".gridster ul > li .addInfo", function () {
+        const additionalInfoButton = $(this);
+        const additionalInfo = JSON.parse(decodeURIComponent(additionalInfoButton.data('info')));
+        const metric = additionalInfo.metric;
+        const dateVal = additionalInfo.dateVal;
+        const program = additionalInfo.program;
+        const metricLabel = additionalInfo.metricLabel;
+        const dateLabel = additionalInfo.dateLabel;
+        const programLabel = additionalInfo.programLabel;
+        const sizex = additionalInfo.sizex;
+        const sizey = additionalInfo.sizey;
+        const labelText = metricLabel + " " + dateLabel + " " + programLabel;
+        const htmlFile = "plots/" + metric + "_" + dateVal + program + ".html";
+
+        const nw_additionalInformation = ["<li data-min-sizex='2' data-min-sizey='2'>"
           + labelText
           + "<button class='remove'>x</button>"
-          + "<img src='" + imgFile + "' alt='" + altText + "' width=90% height=90%>"
+          + "<object data='" + htmlFile + "' type='text/html' style='margin-top: 20px;' width='90%' height='90%'></object>"
           + "</li>",
           sizex, sizey];
-        gridster.add_widget.apply(gridster, nw);
+        gridster.add_widget.apply(gridster, nw_additionalInformation);
       });
 
       $('body').on("click", ".gridster ul > li .remove", function () {

frontend/metrics_program.html

@@ -1,13 +1,10 @@
 <!-- Generic -->
-<option value="ntrips_mode_confirm" data-sizex="4" data-sizey="4">Number of trips</option>
-<option value="ntrips_commute_mode_confirm" data-sizex="4" data-sizey="4">Number of commute trips</option>
-<option value="ntrips_sensed_mode" data-sizex="4" data-sizey="4">Number of trips (sensed)</option>
-<option value="ntrips_purpose" data-sizex="4" data-sizey="4">Trip count by purpose</option>
-<option value="ntrips_under10miles_mode_confirm" data-sizex="4" data-sizey="4">Trip count under 80th pecentile</option>
-<option value="ntrips_under10miles_sensed_mode" data-sizex="4" data-sizey="4">Trip count under 80th percentile (sensed)</option>
-<option value="miles_mode_confirm" data-sizex="4" data-sizey="4">Trip length (${data.display_config.use_imperial}) by mode</option>
-<option value="miles_sensed_mode" data-sizex="4" data-sizey="4">Trip length (${data.display_config.use_imperial}) by mode (sensed)</option>
-<option value="miles_sensed_mode_land" data-sizex="4" data-sizey="4">Trip length by land mode (sensed)</option>
+<option value="ntrips_total" data-sizex="10" data-sizey="4">Number of trips</option>
+<option value="ntrips_under80" data-sizex="10" data-sizey="4">Number of trips (under 80th percentile of total trips)</option>
+<option value="ntrips_commute_mode_confirm" data-sizex="10" data-sizey="4">Number of commute trips</option>
+<option value="total_trip_length" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode</option>
+<option value="total_trip_length_land" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode in land</option>
+<option value="ntrips_purpose" data-sizex="10" data-sizey="4">Number of trips by purpose</option>
 <option value="average_miles_mode_confirm" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial})</option>
 <option value="average_miles_sensed_mode" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial}) (sensed)</option>
 <option value="ntrips_per_day" data-sizex="6" data-sizey="4">Trip frequency</option>
@@ -20,9 +17,10 @@
 <option value="ts_users" data-sizex="8" data-sizey="2">Timeseries of active users</option>
 <option value="ts_all_modes" data-sizex="8" data-sizey="2">Timeseries of all mode shares</option>
 <!-- Mode Specific -->
-<option value="ntrips_${data.intro.mode_studied}_purpose" data-sizex="4" data-sizey="4">`${data.intro.mode_studied}` specific trip count by purpose</option>
-<option value="miles_${data.intro.mode_studied}_replaced_mode" data-sizex="4" data-sizey="4">`${data.intro.mode_studied}` specific trip length (${data.display_config.use_imperial}) by replaced mode</option>
-<option value="average_miles_replaced_mode" data-sizex="4" data-sizey="4">Average Miles for each replaced mode (w/Other)</option>
+<option value="ntrips_${data.intro.mode_studied}_purpose" data-sizex="10" data-sizey="4">`${data.intro.mode_studied}` specific trip count by purpose</option>
+<option value="ntrips_${data.intro.mode_studied}_total" data-sizex="10" data-sizey="4">`${data.intro.mode_studied}` specific number of trips by replaced mode</option>
+<option value="total_trip_length_${data.intro.mode_studied}_replaced_mode" data-sizex="10" data-sizey="4">`${data.intro.mode_studied}` specific trip length (${data.display_config.use_imperial}) by replaced mode</option>
+<option value="average_miles_replaced_mode" data-sizex="6" data-sizey="4">Average ${data.display_config.use_imperial} for each replaced mode (w/Other)</option>
 <option value="ntrips_${data.intro.mode_studied}_per_day" data-sizex="6" data-sizey="4">`${data.intro.mode_studied}` specific Trip frequency</option>
 <option value="ntrips_${data.intro.mode_studied}_per_weekday" data-sizex="6" data-sizey="4">`${data.intro.mode_studied}` specific Trips per weekday</option>
 <option value="sketch_energy_impact_${data.intro.mode_studied}" data-sizex="6" data-sizey="4">Sketch of `${data.intro.mode_studied}` specific energy impact</option>

frontend/metrics_program_withoutEnergyMetrics.html

@@ -1,14 +1,11 @@
 <!-- Replica of metrics_program.html without energy options-->
 <!-- Generic -->
-<option value="ntrips_mode_confirm" data-sizex="4" data-sizey="4">Number of trips</option>
-<option value="ntrips_commute_mode_confirm" data-sizex="4" data-sizey="4">Number of commute trips</option>
-<option value="ntrips_sensed_mode" data-sizex="4" data-sizey="4">Number of trips (sensed)</option>
-<option value="ntrips_purpose" data-sizex="4" data-sizey="4">Trip count by purpose</option>
-<option value="ntrips_under10miles_mode_confirm" data-sizex="4" data-sizey="4">Trip count under 80th percentile</option>
-<option value="ntrips_under10miles_sensed_mode" data-sizex="4" data-sizey="4">Trip count under 80th percentile (sensed)</option>
-<option value="miles_mode_confirm" data-sizex="4" data-sizey="4">Trip length (${data.display_config.use_imperial}) by mode</option>
-<option value="miles_sensed_mode" data-sizex="4" data-sizey="4">Trip length by mode (sensed)</option>
-<option value="miles_sensed_mode_land" data-sizex="4" data-sizey="4">Trip length (${data.display_config.use_imperial}) by land mode (sensed)</option>
+<option value="ntrips_total" data-sizex="10" data-sizey="4">Number of trips</option>
+<option value="ntrips_under80" data-sizex="10" data-sizey="4">Number of trips (under 80th percentile of total trips)</option>
+<option value="ntrips_commute_mode_confirm" data-sizex="10" data-sizey="4">Number of commute trips</option>
+<option value="total_trip_length" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode</option>
+<option value="total_trip_length_land" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode in land</option>
+<option value="ntrips_purpose" data-sizex="10" data-sizey="4">Number of trips by purpose</option>
 <option value="average_miles_mode_confirm" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial})</option>
 <option value="average_miles_sensed_mode" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial}) (sensed)</option>
 <option value="ntrips_per_day" data-sizex="6" data-sizey="4">Trip frequency</option>
@@ -20,9 +17,10 @@
 <option value="ts_users" data-sizex="8" data-sizey="2">Timeseries of active users</option>
 <option value="ts_all_modes" data-sizex="8" data-sizey="2">Timeseries of all mode shares</option>
 <!-- Mode Specific -->
-<option value="ntrips_${data.intro.mode_studied}_purpose" data-sizex="4" data-sizey="4">`${data.intro.mode_studied}` specific trip count by purpose</option>
-<option value="miles_${data.intro.mode_studied}_replaced_mode" data-sizex="4" data-sizey="4">`${data.intro.mode_studied}` specific trip distance (${data.display_config.use_imperial}) by replaced mode</option>
-<option value="average_miles_replaced_mode" data-sizex="4" data-sizey="4">Average Miles for each replaced mode (w/Other)</option>
+<option value="ntrips_${data.intro.mode_studied}_purpose" data-sizex="10" data-sizey="4">`${data.intro.mode_studied}` specific trip count by purpose</option>
+<option value="ntrips_${data.intro.mode_studied}_total" data-sizex="10" data-sizey="4">`${data.intro.mode_studied}` specific number of trips by replaced mode</option>
+<option value="total_trip_length_${data.intro.mode_studied}_replaced_mode" data-sizex="10" data-sizey="4">`${data.intro.mode_studied}` specific trip length (${data.display_config.use_imperial}) by replaced mode</option>
+<option value="average_miles_replaced_mode" data-sizex="6" data-sizey="4">Average ${data.display_config.use_imperial} for each replaced mode (w/Other)</option>
 <option value="ntrips_${data.intro.mode_studied}_per_day" data-sizex="6" data-sizey="4">`${data.intro.mode_studied}` specific Trip frequency</option>
 <option value="ntrips_${data.intro.mode_studied}_per_weekday" data-sizex="6" data-sizey="4">`${data.intro.mode_studied}` specific Trips per weekday</option>
 <option value="sketch_CO2impact_${data.intro.mode_studied}" data-sizex="6" data-sizey="4">Sketch of `${data.intro.mode_studied}` specific emission impact</option>

frontend/metrics_study.html

@@ -1,13 +1,10 @@
 <!-- Generic -->
-<option value="ntrips_mode_confirm" data-sizex="4" data-sizey="4">Number of trips</option>
-<option value="ntrips_commute_mode_confirm" data-sizex="4" data-sizey="4">Number of commute trips</option>
-<option value="ntrips_sensed_mode" data-sizex="4" data-sizey="4">Number of trips (sensed)</option>
-<option value="ntrips_purpose" data-sizex="4" data-sizey="4">Trip count by purpose</option>
-<option value="ntrips_under10miles_mode_confirm" data-sizex="4" data-sizey="4">Trip count under 80th percentile</option>
-<option value="ntrips_under10miles_sensed_mode" data-sizex="4" data-sizey="4">Trip count under 80th percentile (sensed)</option>
-<option value="miles_mode_confirm" data-sizex="4" data-sizey="4">Trip length (${data.display_config.use_imperial}) by mode</option>
-<option value="miles_sensed_mode" data-sizex="4" data-sizey="4">Trip length (${data.display_config.use_imperial}) by mode (sensed)</option>
-<option value="miles_sensed_mode_land" data-sizex="4" data-sizey="4">Trip length by land mode (${data.display_config.use_imperial}) (sensed)</option>
+<option value="ntrips_total" data-sizex="10" data-sizey="4">Number of trips</option>
+<option value="ntrips_under80" data-sizex="10" data-sizey="4">Number of trips (under 80th percentile of total trips)</option>
+<option value="ntrips_commute_mode_confirm" data-sizex="10" data-sizey="4">Number of commute trips</option>
+<option value="total_trip_length" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode</option>
+<option value="total_trip_length_land" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode in land</option>
+<option value="ntrips_purpose" data-sizex="10" data-sizey="4">Number of trips by purpose</option>
 <option value="average_miles_mode_confirm" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial})</option>
 <option value="average_miles_sensed_mode" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial}) (sensed)</option>
 <option value="ntrips_per_day" data-sizex="6" data-sizey="4">Trip frequency</option>

frontend/metrics_study_withoutEnergyMetrics.html

@@ -1,14 +1,11 @@
 <!-- Replica of metrics_study.html without energy option-->
 <!-- Generic -->
-<option value="ntrips_mode_confirm" data-sizex="4" data-sizey="4">Number of trips</option>
-<option value="ntrips_commute_mode_confirm" data-sizex="4" data-sizey="4">Number of commute trips</option>
-<option value="ntrips_sensed_mode" data-sizex="4" data-sizey="4">Number of trips (sensed)</option>
-<option value="ntrips_purpose" data-sizex="4" data-sizey="4">Trip count by purpose</option>
-<option value="ntrips_under10miles_mode_confirm" data-sizex="4" data-sizey="4">Trip count under 80th Percentile</option>
-<option value="ntrips_under10miles_sensed_mode" data-sizex="4" data-sizey="4">Trip count under 80th Percentile (sensed)</option>
-<option value="miles_mode_confirm" data-sizex="4" data-sizey="4">Trip distance (${data.display_config.use_imperial}) by mode</option>
-<option value="miles_sensed_mode" data-sizex="4" data-sizey="4">Trip distance (${data.display_config.use_imperial}) by mode (sensed)</option>
-<option value="miles_sensed_mode_land" data-sizex="4" data-sizey="4">Trip distance by land mode (sensed)</option>
+<option value="ntrips_total" data-sizex="10" data-sizey="4">Number of trips</option>
+<option value="ntrips_under80" data-sizex="10" data-sizey="4">Number of trips (under 80th percentile of total trips)</option>
+<option value="ntrips_commute_mode_confirm" data-sizex="10" data-sizey="4">Number of commute trips</option>
+<option value="total_trip_length" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode</option>
+<option value="total_trip_length_land" data-sizex="10" data-sizey="4">Total trip length (${data.display_config.use_imperial}) covered by mode in land</option>
+<option value="ntrips_purpose" data-sizex="10" data-sizey="4">Number of trips by purpose</option>
 <option value="average_miles_mode_confirm" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial})</option>
 <option value="average_miles_sensed_mode" data-sizex="6" data-sizey="4">Average trip length (${data.display_config.use_imperial}) (sensed)</option>
 <option value="ntrips_per_day" data-sizex="6" data-sizey="4">Trip frequency</option>