From 89dfc6ce6eddf2139b012274cf715505530e83b1 Mon Sep 17 00:00:00 2001
From: Mike Bryant <mike@mikebryant.me.uk>
Date: Wed, 15 Apr 2020 12:07:17 +0100
Subject: [PATCH] feat: Add chart visual

---
 css/styles.css | 10 +++++++++-
 index.html     |  6 ++++++
 js/chart.js    | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++
 js/scripts.js  |  9 ++++++---
 4 files changed, 75 insertions(+), 4 deletions(-)
 create mode 100644 js/chart.js

diff --git a/css/styles.css b/css/styles.css
index 8ccf924..af322c6 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -368,7 +368,15 @@ input[type=number] {
   white-space: nowrap;
 }
 
-
+.chart-wrapper {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  height: 400px;
+  width: 100%;
+  max-width: 1080px;
+  justify-content: center;
+}
 
 
 .waves {
diff --git a/index.html b/index.html
index 574ac37..0bfb4dd 100644
--- a/index.html
+++ b/index.html
@@ -191,6 +191,10 @@
 
       <h2>Output</h2>
 
+      <div class="chart-wrapper">
+        <canvas id="chart" width="100%" height="100"></canvas>
+      </div>
+
       <div class="table-wrapper">
         <table id="turnipTable">
           <thead>
@@ -294,6 +298,8 @@
   </div>
 
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
+  <script src="js/chart.js"></script>
   <script src="js/predictions.js"></script>
   <script src="js/scripts.js"></script>
   <script src="js/contributors.js"></script>
diff --git a/js/chart.js b/js/chart.js
new file mode 100644
index 0000000..9ea48c5
--- /dev/null
+++ b/js/chart.js
@@ -0,0 +1,54 @@
+let chart_instance = null;
+
+Chart.defaults.global.defaultFontFamily = "'Varela Round', sans-serif";
+
+const chart_options = {
+  elements: {
+    line: {
+      backgroundColor: "#DEF2D9",
+      backgroundColor: "#DEF2D9",
+      cubicInterpolationMode: "monotone",
+    },
+  },
+  maintainAspectRatio: false,
+  tooltips: {
+    intersect: false,
+    mode: "index",
+  },
+};
+
+function update_chart(input_data, possibilities) {
+  var ctx = $("#chart");
+
+  datasets = [
+    {
+      label: "Input Price",
+      data: input_data.slice(1),
+      fill: false,
+    },
+    {
+      label: "Minimum",
+      data: possibilities[0].prices.slice(1).map(day => day.min),
+      fill: false,
+    },
+    {
+      label: "Maximum",
+      data: possibilities[0].prices.slice(1).map(day => day.max),
+      fill: "-1",
+    },
+  ];
+
+  if (chart_instance) {
+    chart_instance.data.datasets = datasets;
+    chart_instance.update();
+  } else {
+    chart_instance = new Chart(ctx, {
+      data: {
+        datasets: datasets,
+        labels: ["Sunday", "Mon AM", "Mon PM", "Tue AM", "Tue PM", "Wed AM", "Wed PM", "Thu AM", "Thu PM", "Fri AM", "Fri PM", "Sat AM", "Sat PM"],
+      },
+      options: chart_options,
+      type: "line",
+    });
+  }
+}
diff --git a/js/scripts.js b/js/scripts.js
index 1fe174b..65cf904 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -218,7 +218,7 @@ const getPreviousFromQuery = function () {
 
 const getPreviousFromLocalstorage = function () {
   return [
-    getFirstBuyStateFromLocalstorage(), 
+    getFirstBuyStateFromLocalstorage(),
     getPreviousPatternStateFromLocalstorage(),
     getPricesFromLocalstorage()
   ];
@@ -247,7 +247,8 @@ const calculateOutput = function (data, first_buy, previous_pattern) {
     return;
   }
   let output_possibilities = "";
-  for (let poss of analyze_possibilities(data, first_buy, previous_pattern)) {
+  let analyzed_possibilities = analyze_possibilities(data, first_buy, previous_pattern);
+  for (let poss of analyzed_possibilities) {
     var out_line = "<tr><td class='table-pattern'>" + poss.pattern_description + "</td>"
     out_line += `<td>${Number.isFinite(poss.probability) ? ((poss.probability * 100).toPrecision(3) + '%') : '—'}</td>`;
     for (let day of poss.prices.slice(1)) {
@@ -262,6 +263,8 @@ const calculateOutput = function (data, first_buy, previous_pattern) {
   }
 
   $("#output").html(output_possibilities)
+
+  update_chart(data, analyzed_possibilities);
 }
 
 const update = function () {
@@ -269,7 +272,7 @@ const update = function () {
   const buy_price = parseInt(buy_input.val());
   const first_buy = getCheckedRadio(first_buy_radios) == 'true';
   const previous_pattern = parseInt(getCheckedRadio(previous_pattern_radios));
-  
+
   buy_input[0].disabled = first_buy;
   buy_input[0].placeholder = first_buy ? '—' : '...'