feat: Add chart visual

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 {

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>

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",
+    });
+  }
+}

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 ? '—' : '...'