Merge pull request #25 from mkaplan9/mk_4_allocation

Mk 4 allocation

Author: mkaplan9

asset_allocation.html

@@ -75,7 +75,7 @@ <h4>Enter percent stocks</h4>
       <button id="addLine">Add Line</button>
       <button id="clear">Clear All Data</button>
 
-      <h4>Enter years from 1956 to 2018</h4>
+      <h4>Enter years from 1963 to 2018</h4>
       <input type="text" id="startDate"/>
       <input type="text" id="endDate"/>
       <button id="dateButton">Set Dates</button>

scripts/asset_allocation.js

@@ -19,13 +19,6 @@ var colors = [
 ]
 
 var sAndP = [
-  ["1956", 45.16],
-  ["1957", 46.20],
-  ["1958", 40.33],
-  ["1959", 55.44],
-  ["1960", 59.91],
-  ["1961", 57.57],
-  ["1962", 71.55],
   ["1963", 63.10],
   ["1964", 75.02],
   ["1965", 84.75],
@@ -85,8 +78,69 @@ var sAndP = [
   ["Spacer", "Spacer"]
 ]
 
+var bonds = [
+  ["1963", 4.00],
+  ["1964", 4.19],
+  ["1965", 4.28],
+  ["1966", 4.93],
+  ["1967", 5.07],
+  ["1968", 5.64],
+  ["1969", 6.67],
+  ["1970", 7.35],
+  ["1971", 6.16],
+  ["1972", 6.21],
+  ["1973", 6.85],
+  ["1974", 7.56],
+  ["1975", 7.99],
+  ["1976", 7.61],
+  ["1977", 7.42],
+  ["1978", 8.41],
+  ["1979", 9.43],
+  ["1980", 11.43],
+  ["1981", 13.92],
+  ["1982", 13.01],
+  ["1983", 11.10],
+  ["1984", 12.46],
+  ["1985", 10.62],
+  ["1986", 7.67],
+  ["1987", 8.39],
+  ["1988", 8.85],
+  ["1989", 8.49],
+  ["1990", 8.55],
+  ["1991", 7.86],
+  ["1992", 7.01],
+  ["1993", 5.87],
+  ["1994", 7.09],
+  ["1995", 6.57],
+  ["1996", 6.44],
+  ["1997", 6.35],
+  ["1998", 5.26],
+  ["1999", 5.65],
+  ["2000", 6.03],
+  ["2001", 5.02],
+  ["2002", 4.61],
+  ["2003", 4.01],
+  ["2004", 4.27],
+  ["2005", 4.29],
+  ["2006", 4.80],
+  ["2007", 4.63],
+  ["2008", 3.66],
+  ["2009", 3.26],
+  ["2010", 3.22],
+  ["2011", 2.78],
+  ["2012", 1.80],
+  ["2013", 2.35],
+  ["2014", 2.54],
+  ["2015", 2.14],
+  ["2016", 1.84],
+  ["2017", 2.33],
+  ["2018", 2.91],
+  ["Spacer", "Spacer"]
+]
+
 var dates = sAndP.map(x => x[0]);
-var prices = sAndP.map(x => x[1]);
+var sAndPPrices = sAndP.map(x => x[1]);
+var bondYields = bonds.map(x => x[1]);
 var startIndex = 0
 var endIndex = -1
 
@@ -100,7 +154,7 @@ var config = {
     datasets: [{
       label: "100% S&P",
       borderColor: 'rgb(255, 99, 132)',
-      data: prices.slice(0, -1),
+      data: getNewLine(100, 0, -1),
       percentStocks: 100,
       fill: false
     }]
@@ -124,10 +178,12 @@ var config = {
 
 document.getElementById('addLine').addEventListener('click', function() {
   var percentStocks = document.getElementById('percentStocks').value
-  if(percentStocks <= 100 && percentStocks >= 0) {
-    var newLine = prices.slice(startIndex, endIndex)
-    newLine = newLine.map(function(el) { return el * percentStocks / 100 })
+  addLine(percentStocks)
+});
 
+function addLine(percentStocks) {
+  if(percentStocks <= 100 && percentStocks >= 0) {
+    var newLine = getNewLine(percentStocks, startIndex, endIndex)
     var colorIndex = Math.floor(Math.random() * colors.length)
 
   	config.data.datasets.push({
@@ -139,13 +195,17 @@ document.getElementById('addLine').addEventListener('click', function() {
     })
   	chart.update();
   }
-});
+}
 
 document.getElementById('clear').addEventListener('click', function() {
-	config.data.datasets = []
-	chart.update();
+	clear()
 });
 
+function clear() {
+  config.data.datasets = []
+	chart.update();
+}
+
 document.getElementById('dateButton').addEventListener('click', function() {
   var startDate = document.getElementById('startDate').value
   startIndex = dates.indexOf(startDate)
@@ -166,13 +226,44 @@ document.getElementById('dateButton').addEventListener('click', function() {
 
   config.data.labels = dates.slice(startIndex, endIndex);
 	config.data.datasets.forEach(function(dataset) {
-    var newLine = prices.slice(startIndex, endIndex)
-    newLine = newLine.map(function(el) { return el * dataset.percentStocks / 100 })
-    dataset.data = newLine
+    dataset.data = getNewLine(dataset.percentStocks, startIndex, endIndex)
 	});
 
 	chart.update();
 });
 
+function getNewLine(percentStocks, startIndex, endIndex) {
+  var decimalStocks = percentStocks / 100
+  var decimalBonds = 1 - decimalStocks
+  var stockReference = sAndPPrices.slice(startIndex, endIndex)
+  var bondReference = bondYields.slice(startIndex, endIndex)
+  var stockValue
+  var bondValue
+  var total = 100
+  var newLine = [total]
+
+  var iters = stockReference.length
+  for (iter = 0; iter < iters; iter++) {
+    if(iter + 1 == iters) {
+      break
+    }
+
+    stockValue = total * decimalStocks
+    bondValue = total * decimalBonds
+
+    var stockPerformance = stockReference[iter + 1] / stockReference[iter]
+    var bondPerformance = 1 + bondReference[iter] / 100
+
+    var endStock = stockValue * stockPerformance
+    var endBond = bondValue * bondPerformance
+
+    total = endStock + endBond
+
+    newLine.push(total)
+  }
+
+  return newLine
+}
+
 
 var chart = new Chart(ctx, config);