urbanopt-cli 0.8.0 → 0.9.0

data/example_files/visualization/input_visualization_feature.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <html ng-app="myApp">
-<head>
+  <head>
     <meta charset="utf-8">
     <title>Feature Comparison</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -42,26 +42,26 @@
             height: 100%;
         }
 
-            nvd3.remove-x-lines .nv-x .tick line {
-                display: none;
-            }
+        nvd3.remove-x-lines .nv-x .tick line {
+            display: none;
+        }
 
-            nvd3.remove-y-lines .nv-y .tick line {
-                display: none;
-            }
+        nvd3.remove-y-lines .nv-y .tick line {
+            display: none;
+        }
 
-            nvd3.remove-line-stroke .nv-groups path.nv-line {
-                stroke-width: 0 !important;
-            }
+        nvd3.remove-line-stroke .nv-groups path.nv-line {
+            stroke-width: 0 !important;
+        }
 
-            nvd3.remove-opacity .nv-groups .nv-group {
-                fill-opacity: 1 !important;
-            }
+        nvd3.remove-opacity .nv-groups .nv-group {
+            fill-opacity: 1 !important;
+        }
 
-            nvd3.show-line-points .nv-line .nv-scatter .nv-groups .nv-point {
-                fill-opacity: 1 !important;
-                stroke-opacity: 1 !important;
-            }
+        nvd3.show-line-points .nv-line .nv-scatter .nv-groups .nv-point {
+            fill-opacity: 1 !important;
+            stroke-opacity: 1 !important;
+        }
 
         .nvd3 text {
             font-family: 'Roboto', sans-serif;
@@ -84,76 +84,137 @@
             border: none;
         }
 
-            .nvtooltip.gravity-n:after {
-                display: block;
-                position: absolute;
-                content: '';
-                width: 0;
-                height: 0;
-                left: 50%;
-                bottom: 100%;
-                margin-left: -5px;
-                border: 5px solid transparent;
-                border-bottom-color: rgba(0, 0, 0, 0.87);
-            }
+        .nvtooltip.gravity-n:after {
+            display: block;
+            position: absolute;
+            content: '';
+            width: 0;
+            height: 0;
+            left: 50%;
+            bottom: 100%;
+            margin-left: -5px;
+            border: 5px solid transparent;
+            border-bottom-color: rgba(0, 0, 0, 0.87);
+        }
 
-            .nvtooltip.gravity-s:after {
-                display: block;
-                position: absolute;
-                content: '';
-                width: 0;
-                height: 0;
-                top: 100%;
-                left: 50%;
-                margin-left: -5px;
-                border: 5px solid transparent;
-                border-top-color: rgba(0, 0, 0, 0.87);
-            }
+        .nvtooltip.gravity-s:after {
+            display: block;
+            position: absolute;
+            content: '';
+            width: 0;
+            height: 0;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border: 5px solid transparent;
+            border-top-color: rgba(0, 0, 0, 0.87);
+        }
 
-            .nvtooltip.gravity-e:after {
-                display: block;
-                position: absolute;
-                content: '';
-                width: 0;
-                height: 0;
-                top: 50%;
-                right: 0;
-                margin-top: -6px;
-                margin-right: -11px;
-                border: 6px solid transparent;
-                border-left-color: rgba(0, 0, 0, 0.87);
-            }
+        .nvtooltip.gravity-e:after {
+            display: block;
+            position: absolute;
+            content: '';
+            width: 0;
+            height: 0;
+            top: 50%;
+            right: 0;
+            margin-top: -6px;
+            margin-right: -11px;
+            border: 6px solid transparent;
+            border-left-color: rgba(0, 0, 0, 0.87);
+        }
 
-            .nvtooltip.gravity-w:after {
-                display: block;
-                position: absolute;
-                content: '';
-                width: 0;
-                height: 0;
-                top: 50%;
-                margin-top: -6px;
-                margin-left: -11px;
-                border: 6px solid transparent;
-                border-right-color: rgba(0, 0, 0, 0.87);
-            }
+        .nvtooltip.gravity-w:after {
+            display: block;
+            position: absolute;
+            content: '';
+            width: 0;
+            height: 0;
+            top: 50%;
+            margin-top: -6px;
+            margin-left: -11px;
+            border: 6px solid transparent;
+            border-right-color: rgba(0, 0, 0, 0.87);
+        }
 
-            .nvtooltip table {
-                background: rgba(0, 0, 0, 0.87);
-                padding: 8px 12px;
-                margin: 0;
-                border-radius: 2px;
-            }
+        .nvtooltip table {
+            background: rgba(0, 0, 0, 0.87);
+            padding: 8px 12px;
+            margin: 0;
+            border-radius: 2px;
+        }
 
-                .nvtooltip table tbody tr td.legend-color-guide div {
-                    border: none;
-                }
+        .nvtooltip table tbody tr td.legend-color-guide div {
+            border: none;
+        }
 
-                .nvtooltip table tbody tr td:last-child {
-                    padding-right: 0;
-                }
+        .nvtooltip table tbody tr td:last-child {
+            padding-right: 0;
+        }
+
+        .qaqc-table {
+          width: 90%;
+        }
+        .qaqc-table tr:nth-child(odd) td {
+          background-color: #E3ECF5;
+        }
+        .qaqc-table tr:nth-child(even) td {
+          background-color: #D1DEEC;
+        }
+        .qaqc-table td {
+          vertical-align: top;
+        }
+        .qaqc-table td, .qaqc-table th {
+          padding: 12px 16px;
+          text-align: left;
+        }
+        .flag-cell {
+          text-align: center !important;
+        }    
+
+        table {
+          padding-left: 15px;
+          margin-bottom: 20px;
+          max-width: 100%;
+          width: 100%;
+          border-spacing: 0;
+          border-radius: 2px;
+          overflow: hidden;
+        }
+        thead {
+          display: table-header-group;
+          vertical-align: middle;
+          border-color: inherit;
+        }
+        th {
+          background-color: #014D4D;
+          color: white;
+          display: table-cell;
+          vertical-align: inherit;
+          font-weight: bold;
+        }
+        tr {
+          display: table-row;
+          vertical-align: inherit;
+          border-color: inherit;
+          margin-bottom: 16px;
+          max-width: 100%;
+          width: 100%;
+          border-spacing: 0;
+          border-radius: 2px;
+          overflow: hidden;
+        }
+        tbody {
+          display: table-row-group;
+          vertical-align: middle;
+          border-color: inherit;
+        }
+        .table-row {
+          min-height: 72px;
+        }
     </style>
-</head>
-<body ng-cloak>
+  </head>
+  <body ng-cloak>
 
     <div ng-controller="MyAppCtrl" class="container">
 
@@ -217,6 +278,75 @@
             </div>
         </md-content>
 
+        <div ng-if="features && features[0] && features[0]['annual_values']['Future_Annual_Electricity_Emissions']" > 
+          <h2>Emissions</h2>
+          <p>Multiple emissions associated with electricity may be included in the graphs below and represent different calculation approaches (e.g., future hourly and historical average). Electricity emissions values from different calculation approaches should NOT be summed together.</p>
+          <h3>Emissions Per Feature</h3>
+          <md-content class="md-padding" layout-sm="column" layout="row" layout-wrap>
+            <div flex-gt-sm="50" flex-gt-md="25" ng-repeat="feature in features">
+                <md-card>
+                    <md-card-title>
+                        <md-card-title-text>
+                            <span class="md-headline">{{ feature.name }}</span>
+                            <span class="md-subhead">Emissions per Fuel (mt CO2e)</span>
+                            <span ng-if="feature.complete_simulation!=true" class="md-subhead error">{{errorText}}</span>
+                        </md-card-title-text>
+                    </md-card-title>
+                    <md-card-content>
+                        <nvd3 class="h-420 remove-x-lines" options="annualEmissionsChartOptions[feature.name]" data="annualEmissionsChartData[feature.name]"></nvd3>
+                    </md-card-content>
+                </md-card>
+            </div>
+          </md-content>
+        </div>
+        <div ng-if="features && features[0] && features[0]['annual_values']['Future_Annual_Electricity_Emissions']" > 
+          <h3>Emissions Per Fuel Type</h3>
+          <md-content class="md-padding" layout-sm="column" layout="row" layout-wrap>
+            <div flex-gt-sm="50" flex-gt-md="25" ng-repeat="chart in intensityCharts">
+                <md-card>
+                    <md-card-title>
+                        <md-card-title-text>
+                            <span class="md-headline">{{ chart.name | strReplace:'_':' ' | strReplace:'Emissions':'' | strReplace:'Intensity':''}}</span>
+                            <span class="md-subhead">Emissions Intensity per Feature (kg CO2e / ft2)</span>
+                        </md-card-title-text>
+                    </md-card-title>
+                    <md-card-content>
+                        <nvd3 class="h-420 remove-x-lines" options="annualIntensityChartOptions[chart.name]" data="annualIntensityChartData[chart.name]"></nvd3>
+                    </md-card-content>
+                </md-card>
+            </div> 
+          </md-content>
+        </div>
+
+         <div ng-if="features && features[0] && features[0]['qaqc_flags'] && (features[0]['qaqc_flags'] | json) != '{}'" >    
+        <h2>QAQC</h2>
+        <p>The tables below shows the number of QAQC flags raised for each feature in the  scenario.</p>
+        <md-content class="md-padding" layout-sm="column" layout="row" layout-wrap>
+            <div flex-gt-sm="50" flex-gt-md="25" ng-repeat="feature in features">
+                <md-card>
+                    <md-card-title>
+                        <md-card-title-text>
+                            <span class="md-headline">{{ feature.name }}</span>
+                            <span class="md-subhead">QAQC</span>
+                        </md-card-title-text>
+                    </md-card-title>
+                    <md-card-content>
+                        <table class="qaqc-table" ng-if="feature['qaqc_flags'] && (feature['qaqc_flags'] | json) != '{}'">
+                          <tr>
+                            <th class="header-cell">Category</th>
+                            <th class="header-cell">Flags Raised</th>
+                          </tr>
+                          <tr class="table-row" ng-repeat="(key, val) in feature.qaqc_flags">
+                            <td>{{key.replaceAll("_", " ")}}</td>
+                            <td class="flag-cell">{{val}}</td>
+                          </tr>
+                        </table>
+                        <p ng-if="!feature['qaqc_flags'] || (feature['qaqc_flags'] | json) == '{}'"> No Data </p>
+                    </md-card-content>
+                </md-card>
+            </div>
+        </md-content>
+      </div>
     </div>
 
     <div class="error">
@@ -376,10 +506,113 @@
           }
         };
 
+        //'#AFECE7'
+        $scope.defaultAnnualEmissionsChartOptions = {
+          chart: {
+            type: 'multiBarChart',
+            color: ['#156666', '#187C7C', '#20a0a0', '#27c6c6', '#8CC025', '#CE2828', '#F19953', '#1F77B4', '#9467BD'],
+            height: 320,
+            margin: {
+              top: 45,
+              right: 2,
+              bottom: 32,
+              left: 64
+            },
+            clipEdge: true,
+            groupSpacing: 0.3,
+            reduceXTicks: false,
+            stacked: false,
+            duration: 250,
+            x: function (d) {
+              return d.x;
+            },
+            y: function (d) {
+              return d.y;
+            },
+            yAxis: {
+              tickFormat: function (d) {
+                return d;
+              }
+            },
+            showControls: false,
+            legend: {
+              margin: {
+                top: 8,
+                bottom: 32,
+                left: 250,
+                right: 10
+              },
+              maxKeyLength: 100
+            },
+            tooltip: {
+              gravity: 's',
+              classes: 'gravity-s'
+            }
+          }
+        };
+
+        $scope.defaultAnnualIntensityChartOptions = {
+          chart: {
+            type: 'multiBarChart',
+            color: ['#187C7C', '#8CC025', '#CE2828', '#AFECE7', '#F19953', '#1F77B4', '#9467BD'],
+            height: 320,
+            margin: {
+              top: 45,
+              right: 2,
+              bottom: 32,
+              left: 64
+            },
+            clipEdge: true,
+            groupSpacing: 0.3,
+            reduceXTicks: false,
+            stacked: false,
+            duration: 250,
+            x: function (d) {
+              return d.x;
+            },
+            y: function (d) {
+              return d.y;
+            },
+            yAxis: {
+              tickFormat: function (d) {
+                return d;
+              }
+            },
+            showControls: false,
+            showLegend: false,
+            tooltip: {
+              gravity: 's',
+              classes: 'gravity-s'
+            }
+          }
+        };
+
         // use different options for each feature 
         $scope.monthlyFuelChartOptions = {};
         $scope.monthlyNetChartOptions = {};
         $scope.annualEndUseChartOptions = {};
+        $scope.annualEmissionsChartOptions = {};
+        $scope.annualIntensityChartOptions = {};
+
+        $scope.emissionCharts = [ 
+          {'name': 'Future_Annual_Electricity_Emissions', 'units': 'mt CO2e',  'short': 'FA Elec', 'display': 'Future Annual Elec' },
+          {'name': 'Future_Hourly_Electricity_Emissions','units': 'mt CO2e', 'short': 'FH Elec', 'display': 'Future Hourly Elec' },
+          {'name': 'Historical_Annual_Electricity_Emissions','units': 'mt CO2e', 'short': 'HA Elec' , 'display': 'Historical Annual Elec'}, 
+          {'name': 'Historical_Hourly_Electricity_Emissions','units': 'mt CO2e', 'short': 'HH Elec', 'display': 'Historical Hourly Elec' },
+          {'name': 'Natural_Gas_Emissions', 'units': 'mt CO2e', 'short': 'Gas', 'display': 'Natural Gas' },
+          {'name': 'Propane_Emissions', 'units': 'mt CO2e', 'short': 'Propane', 'display': 'Propane'},
+          {'name': 'FuelOilNo2_Emissions', 'units': 'mt CO2e', 'short': 'FuelOil2', 'display': 'Fuel Oil No2' }
+        ];
+
+        $scope.intensityCharts = [
+          {'name': 'Future_Annual_Electricity_Emissions_Intensity', 'units': 'kg CO2e / ft2' },
+          {'name': 'Future_Hourly_Electricity_Emissions_Intensity', 'units': 'kg CO2e / ft2' },
+          {'name': 'Historical_Annual_Electricity_Emissions_Intensity', 'units': 'kg CO2e / ft2' }, 
+          {'name': 'Historical_Hourly_Electricity_Emissions_Intensity', 'units': 'kg CO2e / ft2' },
+          {'name': 'Natural_Gas_Emissions_Intensity', 'units': 'kg CO2e / ft2' },
+          {'name': 'Propane_Emissions_Intensity', 'units': 'kg CO2e / ft2' },
+          {'name': 'FuelOilNo2_Emissions_Intensity',  'units': 'kg CO2e / ft2' }
+        ];
 
         var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
         
@@ -388,33 +621,47 @@
         var endUseKeys = ['Heating:Electricity', 'Cooling:Electricity', 'InteriorLights:Electricity', 'ExteriorLights:Electricity', 'ExteriorEquipment:Electricity', 'InteriorEquipment:Electricity', 'Fans:Electricity', 'Pumps:Electricity', 'HeatRejection:Electricity', 'WaterSystems:Electricity'];
 
         var kbtu_datasets = ['NaturalGas:Facility', 'Propane:Facility', 'FuelOilNo2:Facility', 'OtherFuels:Facility'];
+
         var changeToKbtu = false;
 
-        
         var applicableEndUseKeys = [];
 
         $scope.monthlyFuelChartData = {};
         $scope.monthlyNetChartData = {};
         $scope.annualNetChartData = {};
-
         $scope.annualEndUseChartData = {};
+        $scope.annualEmissionsChartData = {};
+        $scope.annualIntensityChartData = {};
 
         // calculate global maximums across features        
         var monthlyFuelYMax = 0;
         var monthlyNetYMin = 0;
         var monthlyNetYMax = 0;
         var annualTotalYMax = 0;
+        var annualEmissionsTotalYMax = 0;
+        var annualIntensityTotalYMax = 0;
 
         // also record totals per feature 
         $scope.annualEndUseTotals = {};
         $scope.monthlyFuelTotals = {};
         $scope.monthlyNetTotals = {};
+        $scope.annualEmissionsTotals = {};
+        $scope.annualIntensityTotals = {};
+
+        // setup emissions intensity charts
+        // var intensityYMin = {};
+        // var intensityYMax = {};
+        _.forEach($scope.intensityCharts, function(chart) {
+          $scope.annualIntensityChartData[chart.name] = [{key: chart.name, values: []}];
+          // intensityYMin[chart.name] = 0;
+          // intensityYMax[chart.name] = 0;
+        });
 
         $scope.errorText = "No data. This feature either did not complete successfully or did not include an annual simulation ranging from January 1 to December 31.";
 
         // figure out max total energy use and applicable end uses
+
         _.forEach($scope.features, function (feature) {
-            console.log("Feature: ", feature.name);
             var total_value = 0;
 
           _.forEach(endUseKeys, function (endUseKey) {
@@ -432,15 +679,44 @@
           // global maximum
           annualTotalYMax = _.max([annualTotalYMax, total_value]);
 
+          // emissions
+          $scope.annualEmissionsTotals[feature.name] = 0;
+          _.forEach($scope.emissionCharts, function(chart){
+            var eVal = feature.annual_values[chart.name];
+
+            if (eVal == 0 || !eVal) {
+              console.log("no data found for: ", chart.name);
+            }
+            else {
+              annualEmissionsTotalYMax = _.max([annualEmissionsTotalYMax, eVal]);
+              $scope.annualEmissionsTotals[feature.name] = _.max([$scope.annualEmissionsTotals[feature.name], _.round(eVal)]);
+            }
+          });
+
+          // emissions intensity
+          _.forEach($scope.intensityCharts, function(chart){      
+            var iVal = feature.annual_values[chart.name];
+            if (iVal == 0 || !iVal) {
+              console.log("no data found for: ", chart.name);
+            } else {
+              // global intensity maximum
+              annualIntensityTotalYMax = _.max([annualIntensityTotalYMax, iVal]);
+              $scope.annualIntensityTotals[chart.name] = _.max([$scope.annualIntensityTotals[chart.name], _.round(iVal)]);
+            }
+          });
+         
         });
 
+        // applicable end uses
         applicableEndUseKeys = _.uniq(applicableEndUseKeys).sort();
 
         // store global default
         $scope.defaultAnnualEndUseChartOptions.chart['yDomain'] = [0, _.round(annualTotalYMax)];
+        $scope.defaultAnnualEmissionsChartOptions.chart['yDomain'] = [0, _.round(annualEmissionsTotalYMax)];
+        $scope.defaultAnnualIntensityChartOptions.chart['yDomain'] = [0, _.round(annualIntensityTotalYMax)];
 
         // gather data for each feature
-        _.forEach($scope.features, function (feature) {
+        _.forEach($scope.features, function (feature, feature_index) {
 
           // calculate local maximums per feature
           var localFuelYMax = 0;
@@ -448,6 +724,7 @@
           var localNetYMin = 100000000;
           var localEndUseMax = 0;
 
+          // annual
           if(feature['complete_simulation'] == true){
 
             // monthly fuel use
@@ -456,7 +733,7 @@
             // first iterate through all kbtu datasets to see if you'll need to change to kBtu units
             _.forEach(kbtu_datasets, function (kbtu_dataset) {
               var values = feature.monthly_values[kbtu_dataset];
-              if (!(values.every(item => item === 0))) {
+              if ((typeof values !== 'undefined') && (!(values.every(item => item === 0)))) {
                 changeToKbtu = true;
               }
             });
@@ -468,8 +745,8 @@
 
               if (dataset == 'Electricity:Facility') {
                 // first check if there is data to include
-                if (!(values.every(item => item === 0))) {
-                  console.log(changeToKbtu);
+                if ((typeof values !== 'undefined') && (!(values.every(item => item === 0)))) {
+                  console.log("change to Kbtu: ", changeToKbtu);
                   if (changeToKbtu) {
                     var kBtuValues = [];
                     var kwhValues = feature.monthly_values[dataset]
@@ -503,7 +780,7 @@
                 }
               } else {
                 // everything else gets kBtu for now
-                if (!(values.every(item => item === 0))) {
+                if ((typeof values !== 'undefined') && (!(values.every(item => item === 0)))) {
                   datasetUnit = dataset + '(kBtu)';
                 }
               };
@@ -604,6 +881,36 @@
             $scope.annualEndUseTotals[feature.name] = _.round(localEndUseMax);
 
           }
+
+          // emissions per feature
+          if(feature['complete_simulation'] == true) {
+            $scope.annualEmissionsChartData[feature.name] = [];
+            _.forEach($scope.emissionCharts, function (chart){
+              var eValue = feature.annual_values[chart.name];
+                                       
+              $scope.annualEmissionsChartData[feature.name].push({
+                key: chart.display,
+                values: [{
+                  x: chart.short, 
+                  y: eValue
+                }]
+              });
+            });
+          }
+
+          // emission intensity per fuel
+          var the_name = _.truncate(feature.name, {'length': 4, 'omission': ''});
+          _.forEach($scope.intensityCharts, function(chart) {
+            var val = feature.annual_values[chart.name];
+            $scope.annualIntensityChartData[chart.name][0]['values'].push({
+                //x: feature_index + 1,
+                x: the_name,
+                y: val,
+            });
+            // intensityYMin[chart.name] = _.min([intensityYMin[chart.name], val]);
+            // intensityYMax[chart.name] = _.max([intensityYMax[chart.name], val]);
+          });
+
         });
 
         // assign chart options for each feature.  assign global maximum to start
@@ -611,7 +918,11 @@
           $scope.monthlyFuelChartOptions[feature.name] = _.cloneDeep($scope.defaultMonthlyFuelChartOptions);
           $scope.monthlyNetChartOptions[feature.name] = _.cloneDeep($scope.defaultMonthlyNetChartOptions);
           $scope.annualEndUseChartOptions[feature.name] = _.cloneDeep($scope.defaultAnnualEndUseChartOptions);
-
+          $scope.annualEmissionsChartOptions[feature.name] = _.cloneDeep($scope.defaultAnnualEmissionsChartOptions);
+        });
+        // intensity default charts
+        _.forEach($scope.intensityCharts, function(chart){
+          $scope.annualIntensityChartOptions[chart.name] = _.cloneDeep($scope.defaultAnnualIntensityChartOptions);
         });
 
         // console.log("LOCAL MAXES:");
@@ -639,6 +950,10 @@
               $scope.monthlyFuelChartOptions[feature.name].chart['yDomain'] = [0, $scope.monthlyFuelTotals[feature.name]];
               $scope.monthlyNetChartOptions[feature.name].chart['yDomain'] = $scope.monthlyNetTotals[feature.name];
               $scope.annualEndUseChartOptions[feature.name].chart['yDomain'] = [0, $scope.annualEndUseTotals[feature.name]];
+              $scope.annualEmissionsChartOptions[feature.name].chart['yDomain'] = [0, $scope.annualEmissionsTotals[feature.name]];
+            });
+            _.forEach($scope.intensityCharts, function(chart){
+              $scope.annualIntensityChartOptions[chart.name].chart['yDomain'] = [0, $scope.annualIntensityTotals[chart.name]];
             });
             
             $scope.axes = 1;
@@ -649,6 +964,10 @@
               $scope.monthlyFuelChartOptions[feature.name].chart['yDomain'] = _.cloneDeep($scope.defaultMonthlyFuelChartOptions.chart['yDomain']);
               $scope.monthlyNetChartOptions[feature.name].chart['yDomain'] = _.cloneDeep($scope.defaultMonthlyNetChartOptions.chart['yDomain']);
               $scope.annualEndUseChartOptions[feature.name].chart['yDomain'] = _.cloneDeep($scope.defaultAnnualEndUseChartOptions.chart['yDomain']);
+              $scope.annualEmissionsChartOptions[feature.name].chart['yDomain'] = _.cloneDeep($scope.defaultAnnualEmissionsChartOptions.chart['yDomain']);
+            });
+            _.forEach($scope.intensityCharts, function(chart){
+              $scope.annualIntensityChartOptions[chart.name].chart['yDomain'] = _.cloneDeep($scope.defaultAnnualIntensityChartOptions.chart['yDomain']);
             });
             $scope.axes = 0;
           }
@@ -660,7 +979,16 @@
         window.dispatchEvent(new Event('resize'));
       }, 1000);
 
+      myApp.filter('strReplace', function () {
+        return function (input, from, to) {
+          input = input || '';
+          from = from || '';
+          to = to || '';
+          return input.replace(new RegExp(from, 'g'), to);
+        };
+      });
+
     </script>
 
-</body>
+  </body>
 </html>