From 985a09a98e9fb7cdab8bb23b76c9526b895bb12e Mon Sep 17 00:00:00 2001
From: Kenix3 <kenixwhisperwind@gmail.com>
Date: Fri, 24 Jul 2020 19:17:05 -0400
Subject: [PATCH] Updates progress chart to respect the matching button
 provided by progress.js

---
 chart.js      | 245 +++++++++++++++++++++++++++-----------------------
 progress.html |   2 +-
 2 files changed, 134 insertions(+), 113 deletions(-)

diff --git a/chart.js b/chart.js
index 27cdf81..a220a93 100644
--- a/chart.js
+++ b/chart.js
@@ -1,119 +1,140 @@
-let includeNonMatching = true;
 let chartElementId = 'progressChart';
 let decimalPlaces = 3;
+								   
+function getDecompAdjective(progress, total) {
+	// Matching is a variable defined by progress.js
+    return matching ? 'matched' : 'decompiled';
+}
 
-let adjective = includeNonMatching ? 'decompiled' : 'matched';
-let dataUrl = includeNonMatching ? 'https://zelda64.dev/reports/progress.csv' : 
-                                   'https://zelda64.dev/reports/progress_matching.csv';
-
-Highcharts.chart(chartElementId, {
-    chart: {
-        type: 'spline'
-    },
-    
-    title: {
-        text: 'OoT Progress History'
-    },
-
-    subtitle: {
-        text: 'OoT Master Quest Debug GCN PAL'
-    },
-
-    data: {
-        csvURL: dataUrl,
-        enablePolling: true,
-        firstRowAsNames: false,
-        dataRefreshRate: 60,
-        seriesMapping: [{
-            x: 1,
-            y: 9,
-            version: 0,
-            timestamp: 1,
-            commit: 2,
-            code: 3,
-            codeSize: 4,
-            boot: 5,
-            bootSize: 6,
-            ovl: 7,
-            ovlSize: 8,
-            src: 9,
-            asm: 10,
-            nonMatchingCount: 11,
-        }],
-        complete: function(e) {
-            // Post-process loaded data from CSV
-            let allSeries = e.series;
-            allSeries.forEach(function(series, seriesIndex) {
-                let rows = series.data;
-                rows.forEach(function(row, rowIndex) {
-                    // JS timestamps are in milliseconds, but are provided in seconds from csv.
-                    row.timestamp *= 1000
-                    row.total = row.asm + row.src;
-                    row.totalPercent = row.src / (row.total);
-                    row.asmPercent = row.asm / (row.total);
-                    row.codePercent = row.code / row.codeSize;
-                    row.bootPercent = row.boot / row.bootSize;
-                    row.ovlPercent = row.ovl / row.ovlSize;
-
-                    let bytesPerHeartPiece = (row.total) / 80;
-                    row.heartPieces = Math.floor(row.src / bytesPerHeartPiece);
-                    row.rupees = Math.floor((row.src % bytesPerHeartPiece) * 100 / bytesPerHeartPiece);
-
-                    row.x = row.timestamp;
-                    row.y = row.totalPercent;
-                    console.log(row);
-                });
-            });
-        }
-    },
-
-	tooltip: {
-        formatter() {
-            let point = this.point;
-            let totalPercent = formatPercent(point.totalPercent);
-            let asmPercent = formatPercent(point.asmPercent);
-            let codePercent = formatPercent(point.codePercent);
-            let bootPercent = formatPercent(point.bootPercent);
-            let ovlPercent = formatPercent(point.ovlPercent);
-            let date = new Date(point.timestamp).toLocaleString("en-US");
-
-            return `Total Completion: ${totalPercent}<br />
-                    Date: ${date}<br />
-                    Commit: ${point.commit}<br />
-                    ------------------------------------<br />
-                    ${point.src}/${point.total} total bytes of decompilable code ${totalPercent}<br />
-                    ${point.boot}/${point.bootSize} bytes ${adjective} in boot ${bootPercent}<br />
-                    ${point.code}/${point.codeSize} bytes ${adjective} in code ${codePercent}<br />
-                    ${point.ovl}/${point.ovlSize} bytes ${adjective} in overlays ${ovlPercent}<br />
-                    ------------------------------------<br />
-                    You have ${point.heartPieces}/80 heart piece(s) and ${point.rupees} rupee(s).`;
-        }
-    },
-
-    xAxis: {
-        title: {
-            text: 'Date',
-        },
-        type: 'datetime',
-    },
-
-    yAxis: {
-        title: {
-            text: 'Total Completion (%)',
-        },
-        labels: {
-            formatter: function() {
-                return formatPercent(this.value);
-            }
-        },
-    },
-
-    legend: {
-        enabled: false,
-    },
-});
+function getDataUrl() {
+	// Matching is a variable defined by progress.js
+	/*return matching ? 'https://zelda64.dev/reports/progress_matching.csv' :
+					  'https://zelda64.dev/reports/progress.csv';*/
+					  
+	console.log("getDataUrl, matching: " + matching);
+					  
+	return matching ? 'http://localhost/reports/progress_matching.csv' :
+					  'http://localhost/reports/progress.csv';
+}
 
 function formatPercent(num, decimals = 3) {
     let percent = num * 100;
     return percent.toFixed(decimals) +'%';
-}
\ No newline at end of file
+}
+
+function updateChart() {
+	chart.update({
+		data: {
+			csvURL: getDataUrl(),
+		},
+	});
+	chart.redraw();
+}
+
+let chart = Highcharts.chart(chartElementId, {
+	chart: {
+		type: 'spline'
+	},
+	
+	title: {
+		text: 'OoT Progress History'
+	},
+
+	subtitle: {
+		text: 'OoT Master Quest Debug GCN PAL'
+	},
+
+	data: {
+		csvURL: getDataUrl(),
+		enablePolling: true,
+		firstRowAsNames: false,
+		dataRefreshRate: 60,
+		seriesMapping: [{
+			x: 1,
+			y: 9,
+			version: 0,
+			timestamp: 1,
+			commit: 2,
+			code: 3,
+			codeSize: 4,
+			boot: 5,
+			bootSize: 6,
+			ovl: 7,
+			ovlSize: 8,
+			src: 9,
+			asm: 10,
+			nonMatchingCount: 11,
+		}],
+		complete: function(e) {
+			// Post-process loaded data from CSV
+			let allSeries = e.series;
+			allSeries.forEach(function(series, seriesIndex) {
+				let rows = series.data;
+				rows.forEach(function(row, rowIndex) {
+					// JS timestamps are in milliseconds, but are provided in seconds from csv.
+					row.timestamp *= 1000
+					row.total = row.asm + row.src;
+					row.totalPercent = row.src / (row.total);
+					row.asmPercent = row.asm / (row.total);
+					row.codePercent = row.code / row.codeSize;
+					row.bootPercent = row.boot / row.bootSize;
+					row.ovlPercent = row.ovl / row.ovlSize;
+
+					let bytesPerHeartPiece = (row.total) / 80;
+					row.heartPieces = Math.floor(row.src / bytesPerHeartPiece);
+					row.rupees = Math.floor((row.src % bytesPerHeartPiece) * 100 / bytesPerHeartPiece);
+
+					row.x = row.timestamp;
+					row.y = row.totalPercent;
+					console.log(row);
+				});
+			});
+		}
+	},
+
+	tooltip: {
+		formatter() {
+			let point = this.point;
+			let totalPercent = formatPercent(point.totalPercent);
+			let asmPercent = formatPercent(point.asmPercent);
+			let codePercent = formatPercent(point.codePercent);
+			let bootPercent = formatPercent(point.bootPercent);
+			let ovlPercent = formatPercent(point.ovlPercent);
+			let date = new Date(point.timestamp).toLocaleString("en-US");
+			let adjective = getDecompAdjective();
+
+			return `Total Completion: ${totalPercent}<br />
+					Date: ${date}<br />
+					Commit: ${point.commit}<br />
+					------------------------------------<br />
+					${point.src}/${point.total} total bytes of decompilable code ${totalPercent}<br />
+					${point.boot}/${point.bootSize} bytes ${adjective} in boot ${bootPercent}<br />
+					${point.code}/${point.codeSize} bytes ${adjective} in code ${codePercent}<br />
+					${point.ovl}/${point.ovlSize} bytes ${adjective} in overlays ${ovlPercent}<br />
+					------------------------------------<br />
+					You have ${point.heartPieces}/80 heart piece(s) and ${point.rupees} rupee(s).`;
+		}
+	},
+
+	xAxis: {
+		title: {
+			text: 'Date',
+		},
+		type: 'datetime',
+	},
+
+	yAxis: {
+		title: {
+			text: 'Total Completion (%)',
+		},
+		labels: {
+			formatter: function() {
+				return formatPercent(this.value);
+			}
+		},
+	},
+
+	legend: {
+		enabled: false,
+	},
+});
\ No newline at end of file
diff --git a/progress.html b/progress.html
index 4167196..fc8cb36 100644
--- a/progress.html
+++ b/progress.html
@@ -73,7 +73,7 @@
             <!--
             <div class="zelda-box zelda-button" id="toggle_audio_mute" onclick="toggleMute()">Audio: <span style="color:red">Off</span></div>
             -->
-            <div class="zelda-box zelda-button" id="toggle_matching" onclick="toggleMatching()">Matching: <span style="color:red">No</span></div>
+            <div class="zelda-box zelda-button" id="toggle_matching" onclick="toggleMatching(); updateChart();">Matching: <span style="color:red">No</span></div>
             <br>
             <div class="zelda-box zelda-button"><a href="index.html">Main Page</a></div>
         </div>