From 9e8e44303d81b3bc65c83b27b5b04eaf10c21cdc Mon Sep 17 00:00:00 2001
From: astronobri <brianna.mills@nreca.coop>
Date: Thu, 16 May 2024 01:49:49 -0400
Subject: [PATCH] derConsumer.html: Added financial plots and reformatted the
 outputs section.

---
 omf/models/derConsumer.html | 93 ++++++++++++++++++++++++++++++++-----
 1 file changed, 82 insertions(+), 11 deletions(-)

diff --git a/omf/models/derConsumer.html b/omf/models/derConsumer.html
index 0c17bf5b5..569e796d9 100644
--- a/omf/models/derConsumer.html
+++ b/omf/models/derConsumer.html
@@ -6,10 +6,10 @@
 	<script src="https://cdn.plot.ly/plotly-1.50.1.min.js"></script>		
 	<script type="text/javascript">
 		$(window).on('pageshow',function(){
-			Plotly.newPlot('plotlyPlot', JSON.parse(allOutputData['plotlyPlot']),JSON.parse(allOutputData['plotlyLayout']));
+			Plotly.newPlot('derOverviewData', JSON.parse(allOutputData['derOverviewData']),JSON.parse(allOutputData['derOverviewLayout']));
+			Plotly.newPlot('exportedPowerData', JSON.parse(allOutputData['exportedPowerData']),JSON.parse(allOutputData['exportedPowerLayout']));
 			Plotly.newPlot('resiliencePlotly', JSON.parse(allOutputData['resilienceData']), JSON.parse(allOutputData['resilienceLayout']) || {});
 			Plotly.newPlot('resilienceProbPlotly', JSON.parse(allOutputData['resilienceProbData']), JSON.parse(allOutputData['resilienceProbLayout']) || {});
-
 		});
 	</script>
 </head>
@@ -230,18 +230,89 @@
 	{{ omfRunDebugBlock }}
 	{% if modelStatus == 'finished' %}
 	<!-- Output tables, graphs, etc -->
+	<div id="output">
+		<p class="reportTitle" style="page-break-before:always">DER Serving Load Overview</p>
+		<div id="derOverviewData" class="tightContent" style="width: 1000px; height: 600px;"></div>
 
-	<p class="reportTitle" style="page-break-before:always">Plotly Test Plot</p>
-	<div id="plotlyPlot" class="tightContent" style="width: 1000px; height: 600px;"></div>
+		<p class="reportTitle" style="page-break-before:always">Exported Power Overview</p>
+		<div id="exportedPowerData" class="tightContent" style="width: 1000px; height: 600px;"></div>
 
-	<p class="reportTitle" style="page-break-before:always">Resilience Overview</p>
-	<div id="resiliencePlotly" class="tightContent"></div>
-				
-	<p class="reportTitle" style="page-break-before:always">Outage Survival Probability</p>
-	<div id="resilienceProbPlotly" class="tightContent"></div>
+		<p class="reportTitle" style="page-break-before:always">Resilience Overview</p>
+		<div id="resiliencePlotly" class="tightContent"></div>
+					
+		<p class="reportTitle" style="page-break-before:always">Outage Survival Probability</p>
+		<div id="resilienceProbPlotly" class="tightContent"></div>
 
-	<div id="output">
-		{{ rawOutputFiles }}
+		<p class="reportTitle">Monthly Cost Comparison</p>
+		<div id="levelizedCostReport" class="tightContent">
+			<div id="levelizedCostTableDiv" style="display:inline-block; width:1000px">
+				<table id="monthlySummaryTable" style="margin:5px;width:990px">
+					<style>td, th {padding:7 0 5 20;text-align: left;font-size:0.7em;}</style>
+					<div id="tableHead">
+						<thead>
+							<th></th>
+							<th>Jan</th>
+							<th>Feb</th>
+							<th>Mar</th>
+							<th>Apr</th>
+							<th>May</th>
+							<th>Jun</th>
+							<th>Jul</th>
+							<th>Aug</th>
+							<th>Sep</th>
+							<th>Oct</th>
+							<th>Nov</th>
+							<th>Dec</th>
+						</thead>
+					</div>
+				</table>
+				<script id="globalOutputScripting">
+					function insertMetric(tableId, name, vector) {
+						// Add a vector to a table as a row.
+						table = gebi(tableId)
+						newRow = table.insertRow()
+						newRow.insertCell().innerHTML = "<div id=\"metric\">" + name + "</div>"
+						for (i=0; i<vector.length; i++) {
+							cell = newRow.insertCell()
+							cell.innerHTML = delimitNumbers(vector[i].toFixed(0))
+						}
+					}
+				</script>
+				<script>
+					insertMetric("monthlySummaryTable","Peak Demand (kW)", allOutputData.peakDemand)
+					insertMetric("monthlySummaryTable","Adjusted Peak Demand (kW)", allOutputData.peakAdjustedDemand)
+					insertMetric("monthlySummaryTable","Energy (kWh)", allOutputData.energyMonthly)
+					insertMetric("monthlySummaryTable","Adjusted Energy (kWh)", allOutputData.energyAdjustedMonthly)
+					insertMetric("monthlySummaryTable","Energy Cost ($)", allOutputData.energyCost)
+					insertMetric("monthlySummaryTable","Energy Cost using VBAT ($)", allOutputData.energyCostAdjusted)
+					insertMetric("monthlySummaryTable","Demand Charge ($)", allOutputData.demandCharge)
+					insertMetric("monthlySummaryTable","Demand Charge using VBAT ($)", allOutputData.demandChargeAdjusted)
+					insertMetric("monthlySummaryTable","Total Cost ($)", allOutputData.totalCost)
+					insertMetric("monthlySummaryTable","Total Cost using VBAT ($)", allOutputData.totalCostAdjusted)
+					insertMetric("monthlySummaryTable","Savings ($)", allOutputData.savings)
+				</script>
+			</div>
+		</div>
+
+		<p class="reportTitle" style="page-break-before:always">Cash Flow Projection</p>
+		<div id="cashFlowReport" class="tightContent">
+			<div id="cashFlowChartDiv"></div>
+			<script>
+				new Highcharts.Chart({"credits":{"enabled":false},
+					"plotOptions":{"column":{"stacking":'normal'},"series":{"animation":false,"shadow":false},"spline":{"animation":false,"shadow":false}},
+					"xAxis":{"title":{"text":"Year After Installation","style":{"color":"gray"}},"type":"linear","tickColor":"gray","tickInterval":1,"lineColor":"gray","minorTickColor":"gray", "minorTickInterval":5},
+					"title":{"text":"NPV:$" + allOutputData.NPV.toFixed(0) + " ;	SPP:" + allOutputData.SPP.toFixed(3), "verticalAlign":"bottom", "align":"right", "y":-50, "x":-10, "style":{"color":"#333333", "fontSize":"12px"}},
+					//"title":{"text":""},
+					"series":[{"name":"Net Benefits", "data":allOutputData.netCashflow},
+						{"name":"Cumulative Return", "type":"spline", "data":allOutputData.cumulativeCashflow}
+					],
+					"yAxis":{"title":{"text":"Income ($)","style":{"color":"gray"}}},
+					"chart":{"marginBottom":55,"zoomType":"x","renderTo":"cashFlowChartDiv","type":"column","marginRight":20, "height":250,"width":1000},
+					"tooltip":{"valueDecimals":1},
+					"legend":{"verticalAlign":"top","align":"top","borderWidth":0,"x":50,"y":-10,"layout":"horizontal"}})
+			</script>
+		</div>
 	</div>
+	{{ rawOutputFiles }}
 	{% endif %}
 </body>
\ No newline at end of file