Show evaluated commitments with a graph

index.html

@@ -46,6 +46,9 @@ <h1>Optimal Commitment Calculator</h1>
   <div class="result" id="result"></div>
   <a class="result" id="link">Link</a>
 
+  <div style="width: 800px"><canvas id="chart"></canvas></div>
+
+  <script src="//cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="./main.js"></script>
 </body>
 </html>

main.js

@@ -28,6 +28,8 @@ function getCurrencyDisplay(currencyCode) {
     return '';
 }
 
+let chart = undefined;
+
 function calculateCost(discountedRate, fullPrice, usageData, commitment) {
     let totalCost = 0;
     for (let usage of usageData) {
@@ -57,11 +59,18 @@ function calculateOptimalCommitment() {
   let optimalCommitment = minCommitment;
   let minTotalCost = Infinity;
 
+  let evaluatedCommitments = [];
+
   // Iterate through possible commitment levels
   for (let commitment = minCommitment; commitment <= maxCommitment; commitment += step) {
 
     let totalCost = _calculateCost(commitment);
 
+    evaluatedCommitments.push({
+        commitment,
+        totalCost,
+    });
+
     if (totalCost < minTotalCost) {
       minTotalCost = totalCost;
       optimalCommitment = commitment;
@@ -81,6 +90,32 @@ function calculateOptimalCommitment() {
       `One higher (${optimalCommitment + 1}) cost: ${currencyDisplay}${_calculateCost(optimalCommitment + 1).toFixed(2)}`,
   ].join("\n");
 
+  if (!chart) {
+      chart = new Chart(document.getElementById('chart'), {
+          type: 'scatter',
+          data: {
+              datasets: [{
+                  label: 'Total cost',
+                  data: evaluatedCommitments,
+              }],
+          },
+          options: {
+              parsing: {
+                  xAxisKey: 'commitment',
+                  yAxisKey: 'totalCost',
+              },
+          },
+      });
+  } else {
+      chart.data = {
+          datasets: [{
+              data: evaluatedCommitments,
+          }],
+      };
+      chart.update();
+  }
+
+
   // And show the link to this result using the querystring
   function showLink() {
       const usage = document.getElementById('usage').value;