From 6d6a0181256507a53c2cca30f9c5c2da9ff2fdd4 Mon Sep 17 00:00:00 2001 From: Kenix3 Date: Fri, 30 Apr 2021 23:05:28 -0400 Subject: [PATCH] Updates MM chart to correctly display the asset reconstruction progress. --- chart_mm.js | 211 ++++++++++++++++++++++++++++++---------------------- 1 file changed, 120 insertions(+), 91 deletions(-) diff --git a/chart_mm.js b/chart_mm.js index 3ce7299..64cf472 100644 --- a/chart_mm.js +++ b/chart_mm.js @@ -1,92 +1,121 @@ -let mmNumMasks = 24 -let mmNumRupees = 500 - -window.addEventListener('load', (event) => { - mmChart = new ProgressChart( - // Chart Element ID - 'mmProgressChart', - // Matching Toggle Button Element ID - 'mmToggleMatching', - // Chart Title - 'Majora\'s Mask Decompilation Progress History', - // Chart Subtitle - 'MM USA', - // Non-matching CSV URL - 'https://zelda64.dev/reports/progress_mm.us.rev1.csv', - // Matching CSV URL - 'https://zelda64.dev/reports/progress_matching_mm.us.rev1.csv', - // CSV To Chart Row Mapping - [{ - 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, - }], - // Chart Post-process Function - 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 bytesPerMask = row.total / mmNumMasks; - row.masks = Math.floor(row.src / bytesPerMask); - row.rupees = Math.floor((row.src % bytesPerMask) * mmNumRupees / bytesPerMask); - - row.x = row.timestamp; - row.y = row.totalPercent; - //console.log(row); - - // Update the page progress UI - var date = new Date(row.timestamp); - document.getElementById("mmLastChange").innerText = date.toLocaleDateString() + " " + date.toLocaleTimeString(); - document.getElementById("mmTotalPercent").innerText = formatPercent(row.totalPercent); - document.getElementById("mmBootPercent").innerText = formatPercent(row.bootPercent); - document.getElementById("mmCodePercent").innerText = formatPercent(row.codePercent); - document.getElementById("mmOverlayPercent").innerText = formatPercent(row.ovlPercent); - }); - }); - }, - // Chart Tooltip Formatter Function - function(tooltip) { - 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 = tooltip.chart.owner.getDecompAdjective(); - - return `Total Completion: ${totalPercent}
- Date: ${date}
- Commit: ${point.commit}
- ------------------------------------
- ${point.src}/${point.total} total bytes of decompilable code ${totalPercent}
- ${point.boot}/${point.bootSize} bytes ${adjective} in boot ${bootPercent}
- ${point.code}/${point.codeSize} bytes ${adjective} in code ${codePercent}
- ${point.ovl}/${point.ovlSize} bytes ${adjective} in overlays ${ovlPercent}
- ------------------------------------
- You have ${point.masks}/${mmNumMasks} mask(s) and ${point.rupees}/${mmNumRupees} rupee(s).`; - } - ); +let mmNumMasks = 24 +let mmNumRupees = 500 + +window.addEventListener('load', (event) => { + mmChart = new ProgressChart( + // Chart Element ID + 'mmProgressChart', + // Matching Toggle Button Element ID + 'mmToggleMatching', + // Chart Title + 'Majora\'s Mask Decompilation Progress History', + // Chart Subtitle + 'MM USA', + // Non-matching CSV URL + 'https://zelda64.dev/reports/progress_mm.us.rev1.csv', + // Matching CSV URL + 'https://zelda64.dev/reports/progress_matching_mm.us.rev1.csv', + // CSV To Chart Row Mapping + [{ + 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, + audio: 12, + audioSize: 13, + misc: 14, + miscSize: 15, + object: 16, + objectSize: 17, + scene: 18, + sceneSize: 19, + texture: 20, + textureSize: 21 + }], + // Chart Post-process Function + 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 + + // Decompilable bytes + 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; + + // Non-decompilable bytes + row.audioPercent = row.audio / row.audioSize; + row.miscPercent = row.misc / row.miscSize; + row.objectPercent = row.object / row.objectSize; + row.scenePercent = row.scene / row.sceneSize; + row.texturePercent = row.texture / row.textureSize; + + let bytesPerMask = row.total / mmNumMasks; + row.masks = Math.floor(row.src / bytesPerMask); + row.rupees = Math.floor((row.src % bytesPerMask) * mmNumRupees / bytesPerMask); + + row.x = row.timestamp; + row.y = row.totalPercent; + //console.log(row); + + // Update the page progress UI + var date = new Date(row.timestamp); + document.getElementById("mmLastChange").innerText = date.toLocaleDateString() + " " + date.toLocaleTimeString(); + document.getElementById("mmTotalPercent").innerText = formatPercent(row.totalPercent); + document.getElementById("mmBootPercent").innerText = formatPercent(row.bootPercent); + document.getElementById("mmCodePercent").innerText = formatPercent(row.codePercent); + document.getElementById("mmOverlayPercent").innerText = formatPercent(row.ovlPercent); + }); + }); + }, + // Chart Tooltip Formatter Function + function(tooltip) { + 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 audioPercent = formatPercent(point.audioPercent); + let miscPercent = formatPercent(point.miscPercent); + let objectPercent = formatPercent(point.objectPercent); + let scenePercent = formatPercent(point.scenePercent); + let texturePercent = formatPercent(point.texturePercent); + let date = new Date(point.timestamp).toLocaleString("en-US"); + let adjective = tooltip.chart.owner.getDecompAdjective(); + + return `Total Completion: ${totalPercent}
+ Date: ${date}
+ Commit: ${point.commit}
+ ------------------------------------
+ ${point.src}/${point.total} total bytes of decompilable code ${totalPercent}
+ ${point.boot}/${point.bootSize} bytes ${adjective} in boot ${bootPercent}
+ ${point.code}/${point.codeSize} bytes ${adjective} in code ${codePercent}
+ ${point.ovl}/${point.ovlSize} bytes ${adjective} in overlays ${ovlPercent}
+ ${point.audio}/${point.audioSize} bytes reconstructed in audio ${audioPercent}
+ ${point.misc}/${point.miscSize} bytes reconstructed in misc ${miscPercent}
+ ${point.object}/${point.objectSize} bytes reconstructed in object ${objectPercent}
+ ${point.scene}/${point.sceneSize} bytes reconstructed in scene ${scenePercent}
+ ${point.texture}/${point.textureSize} bytes reconstructed in texture ${texturePercent}
+ ------------------------------------
+ You have ${point.masks}/${mmNumMasks} mask(s) and ${point.rupees}/${mmNumRupees} rupee(s).`; + } + ); }); \ No newline at end of file