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 @@
Output
+
+
+
+
@@ -294,6 +298,8 @@
+
+
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 = "" + poss.pattern_description + " | "
out_line += `${Number.isFinite(poss.probability) ? ((poss.probability * 100).toPrecision(3) + '%') : '—'} | `;
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 ? '—' : '...'