Skip to content

Commit 40b99ce

Browse files
StopSignStopSign
authored
Merge pull request #60 from Disilon/statistics-graph
Statistics graph rework
2 parents eefa649 + 8913ead commit 40b99ce

3 files changed

Lines changed: 143 additions & 72 deletions

File tree

‎KTL/data/globalsAndInitial.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ data.options = {};
5252
data.options.bonusRate = 3;
5353
data.lastVisit = Date.now();
5454
data.queuedReveals = {}
55-
let chartData = []; // Stores { time: number, value: number }
56-
let chartScale = 'linear'; // 'linear' or 'logarithmic'
55+
let chartData = []; // Stores { time: number, value: number, HATL: number, MQ: number }
56+
let graphType = "momentum"; //"momentum" or "magic"
5757

5858
// --- Core Settings ---
5959
data.gameSettings = {

‎KTL/events.js‎

Lines changed: 120 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -877,28 +877,31 @@ function mouseOnActionTouch(event, actionVar) {
877877
// }
878878

879879
function takeDataSnapshot(resourceValue, currentTime) {
880+
if (currentTime <= 1) return;
880881
if (chartData.length === 0) {
881882
chartData.push({
882883
time: currentTime,
883-
value: resourceValue
884+
value: resourceValue,
885+
HATL: data.actions["hearAboutTheLich"].level,
886+
MQ: actionData.awakenYourGrimoire.manaQuality()
884887
});
885888
return;
886889
}
887890

888891
const lastStoredPoint = chartData[chartData.length - 1];
889-
if (resourceValue === lastStoredPoint.value) {
890-
return;
891-
}
892+
// if (resourceValue === lastStoredPoint.value) {
893+
// return;
894+
// }
892895

893-
const lastValue = lastStoredPoint.value;
894-
const timeBeforeChange = currentTime - 1;
895-
896-
if (timeBeforeChange > lastStoredPoint.time) {
897-
chartData.push({ time: timeBeforeChange, value: lastValue });
896+
if ((currentTime - lastStoredPoint.time) > (currentTime > 21600 ? 239 : 119)) {
897+
chartData.push({
898+
time: currentTime,
899+
value: resourceValue,
900+
HATL: data.actions["hearAboutTheLich"].level,
901+
MQ: actionData.awakenYourGrimoire.manaQuality()
902+
});
898903
}
899904

900-
chartData.push({ time: currentTime, value: resourceValue });
901-
902905
if (chartData.length > 200) {
903906
chartData.splice(0, 2);
904907
}
@@ -919,10 +922,11 @@ function drawChart() {
919922

920923
const canvasWidth = canvas.clientWidth;
921924
const canvasHeight = canvas.clientHeight;
922-
const padding = 40;
925+
const padding = 50;
923926

924927
// Clear the canvas and fill with dark background
925928
ctx.fillStyle = '#2d3748';
929+
ctx.globalAlpha = 1;
926930
ctx.fillRect(0, 0, canvas.width, canvas.height);
927931

928932
if (chartData.length < 2) {
@@ -936,8 +940,6 @@ function drawChart() {
936940
// --- Determine Data Range ---
937941
const minTime = chartData[0].time;
938942
const maxTime = chartData[chartData.length - 1].time;
939-
const values = chartData.map(d => d.value);
940-
const maxValue = Math.max(...values);
941943

942944
// --- Draw Axes ---
943945
ctx.strokeStyle = '#4a5568'; // Subtle gray for axes
@@ -951,53 +953,122 @@ function drawChart() {
951953
ctx.lineTo(canvasWidth - padding, canvasHeight - padding);
952954
ctx.stroke();
953955

956+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
957+
ctx.font = '12px sans-serif';
958+
ctx.textAlign = 'center';
954959
// --- Draw Data Line ---
955960
ctx.strokeStyle = '#63b3ed'; // Vibrant, contrasting blue for the line
956961
ctx.lineWidth = 3; // Thicker line
957962
ctx.lineJoin = 'round'; // Smoother corners
958963
ctx.beginPath();
959964

960-
for (let i = 0; i < chartData.length; i++) {
961-
const dataPoint = chartData[i];
962-
const x = padding + ((dataPoint.time - minTime) / (maxTime - minTime)) * (canvasWidth - 2 * padding);
963-
let y;
964-
if (chartScale === 'logarithmic') {
965+
let lastLabelX = -1000;
966+
let lastHATL = 0;
967+
if (graphType === "momentum") {
968+
const values = chartData.map(d => d.value);
969+
const minValue = Math.min(...values);
970+
const maxValue = Math.max(...values);
971+
for (let i = 0; i < chartData.length; i++) {
972+
const dataPoint = chartData[i];
973+
const HATL = dataPoint.HATL ? dataPoint.HATL : 0;
974+
const x = padding + ((dataPoint.time - minTime) / (maxTime - minTime)) * (canvasWidth - 2 * padding);
975+
if ((x - lastLabelX) >= ((canvasWidth - 2 * padding) / 8)) {
976+
lastLabelX = x;
977+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
978+
ctx.font = '12px sans-serif';
979+
ctx.fillText(secondsToTime(dataPoint.time), x, canvasHeight - padding + 20);
980+
}
981+
const logMinValue = Math.log1p(minValue);
965982
const logMaxValue = Math.log1p(maxValue);
966-
const logValue = Math.log1p(dataPoint.value);
967-
y = (canvasHeight - padding) - ((logValue / logMaxValue) * (canvasHeight - 2 * padding));
968-
} else {
969-
y = (canvasHeight - padding) - ((dataPoint.value / maxValue) * (canvasHeight - 2 * padding));
983+
const logValue = Math.log1p(dataPoint.value) - logMinValue;
984+
let y = (canvasHeight - padding) - ((logValue / (logMaxValue - logMinValue)) * (canvasHeight - 2 * padding));
985+
if (isNaN(y)) y = canvasHeight - padding;
986+
if (HATL > 0 && HATL > lastHATL) {
987+
lastHATL = HATL;
988+
ctx.fillStyle = 'red'; // Light gray for labels
989+
ctx.font = '14px sans-serif bold';
990+
ctx.fillText(HATL, x, y - 4);
991+
if (y < (canvasHeight - padding - 10)) {
992+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
993+
ctx.font = '12px sans-serif';
994+
ctx.fillText(secondsToTime(dataPoint.time), x, y + 18);
995+
}
996+
}
997+
if (i === 0) ctx.moveTo(x, y);
998+
else ctx.lineTo(x, y);
970999
}
971-
if (isNaN(y)) y = canvasHeight - padding;
972-
if (i === 0) ctx.moveTo(x, y);
973-
else ctx.lineTo(x, y);
974-
}
975-
ctx.stroke();
1000+
ctx.stroke();
9761001

977-
// --- Draw Labels and Grid ---
978-
ctx.fillStyle = '#a0aec0'; // Light gray for labels
979-
ctx.font = '12px sans-serif';
980-
ctx.textAlign = 'center';
981-
const numYLabels = 5;
982-
for (let i = 0; i <= numYLabels; i++) {
983-
const yPos = padding + (i / numYLabels) * (canvasHeight - 2 * padding);
984-
let labelValue;
985-
if (chartScale === 'logarithmic') {
986-
labelValue = Math.expm1(Math.log1p(maxValue) * (1 - (i / numYLabels)));
987-
} else {
988-
labelValue = maxValue * (1 - (i / numYLabels));
1002+
// --- Draw Labels and Grid ---
1003+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
1004+
ctx.font = '12px sans-serif';
1005+
const numYLabels = 5;
1006+
for (let i = 0; i <= numYLabels; i++) {
1007+
const yPos = padding + (i / numYLabels) * (canvasHeight - 2 * padding);
1008+
const labelValue = Math.expm1((Math.log1p(maxValue) - Math.log1p(minValue)) * (1 - (i / numYLabels)) + Math.log1p(minValue));
1009+
ctx.globalAlpha = 1;
1010+
ctx.fillText(intToString(labelValue, 1), padding - 20, yPos + 4);
1011+
1012+
// Horizontal grid line
1013+
ctx.strokeStyle = '#4a5568'; // Subtle gray for grid
1014+
ctx.globalAlpha = 0.25;
1015+
ctx.beginPath();
1016+
ctx.moveTo(padding, yPos);
1017+
ctx.lineTo(canvasWidth - padding, yPos);
1018+
ctx.stroke();
1019+
}
1020+
} else {
1021+
// Magic Quality graph
1022+
const values = chartData.map(d => d.MQ);
1023+
const minValue = Math.min(...values);
1024+
const maxValue = Math.max(...values);
1025+
for (let i = 0; i < chartData.length; i++) {
1026+
const dataPoint = chartData[i];
1027+
const HATL = dataPoint.HATL ? dataPoint.HATL : 0;
1028+
const x = padding + ((dataPoint.time - minTime) / (maxTime - minTime)) * (canvasWidth - 2 * padding);
1029+
if ((x - lastLabelX) >= ((canvasWidth - 2 * padding) / 8)) {
1030+
lastLabelX = x;
1031+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
1032+
ctx.font = '12px sans-serif';
1033+
ctx.fillText(secondsToTime(dataPoint.time), x, canvasHeight - padding + 20);
1034+
}
1035+
let y = (canvasHeight - padding) - ((dataPoint.MQ / maxValue) * (canvasHeight - 2 * padding));
1036+
if (isNaN(y)) y = canvasHeight - padding;
1037+
if (HATL > 0 && HATL > lastHATL) {
1038+
lastHATL = HATL;
1039+
ctx.fillStyle = 'red'; // Light gray for labels
1040+
ctx.font = '14px sans-serif bold';
1041+
ctx.fillText(HATL, x, y - 4);
1042+
if (y < (canvasHeight - padding - 10)) {
1043+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
1044+
ctx.font = '12px sans-serif';
1045+
ctx.fillText(secondsToTime(dataPoint.time), x, y + 18);
1046+
}
1047+
}
1048+
if (i === 0) ctx.moveTo(x, y);
1049+
else ctx.lineTo(x, y);
9891050
}
990-
ctx.fillText(intToString(labelValue, 1), padding - 20, yPos + 4);
991-
992-
// Horizontal grid line
993-
ctx.strokeStyle = '#4a5568'; // Subtle gray for grid
994-
ctx.beginPath();
995-
ctx.moveTo(padding - 5, yPos);
996-
ctx.lineTo(canvasWidth - padding, yPos);
9971051
ctx.stroke();
1052+
1053+
// --- Draw Labels and Grid ---
1054+
ctx.fillStyle = '#a0aec0'; // Light gray for labels
1055+
ctx.font = '12px sans-serif';
1056+
const numYLabels = 5;
1057+
for (let i = 0; i <= numYLabels; i++) {
1058+
const yPos = padding + (i / numYLabels) * (canvasHeight - 2 * padding);
1059+
const labelValue = (maxValue - minValue) * (1 - (i / numYLabels)) + minValue;
1060+
ctx.globalAlpha = 1;
1061+
ctx.fillText(intToString(labelValue, 1), padding - 20, yPos + 4);
1062+
1063+
// Horizontal grid line
1064+
ctx.strokeStyle = '#4a5568'; // Subtle gray for grid
1065+
ctx.globalAlpha = 0.25;
1066+
ctx.beginPath();
1067+
ctx.moveTo(padding, yPos);
1068+
ctx.lineTo(canvasWidth - padding, yPos);
1069+
ctx.stroke();
1070+
}
9981071
}
999-
ctx.fillText(secondsToTime(minTime), padding, canvasHeight - padding + 20);
1000-
ctx.fillText(secondsToTime(maxTime), canvasWidth - padding, canvasHeight - padding + 20);
10011072
}
10021073

10031074
function addLogMessage(text, type) {

‎KTL/menu.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
//addMenuOptionsTab() adjust fps, saving
66
//addDataTab()
77
//addMenuTab("Previous Tips", <desc>) Adds a new tab that duplicates the toasts but can't
8-
let canvas, ctx, linearBtn, logBtn;
8+
let canvas, ctx, momentumBtn, magicBtn;
99

1010
function initializeMenus() {
1111
createMenu(); // makes the button | menu | title
@@ -43,24 +43,24 @@ function initializeMenus() {
4343
function statChartInitial() {
4444
canvas = document.getElementById('resourceChart');
4545
ctx = canvas.getContext('2d');
46-
linearBtn = document.getElementById('linearBtn');
47-
logBtn = document.getElementById('logBtn');
48-
49-
linearBtn.addEventListener('click', () => {
50-
chartScale = 'linear';
51-
linearBtn.style.backgroundColor = '#4a5568';
52-
linearBtn.style.color = 'white';
53-
logBtn.style.backgroundColor = '#f7fafc';
54-
logBtn.style.color = '#4a5568';
46+
momentumBtn = document.getElementById('momentumBtn');
47+
magicBtn = document.getElementById('magicBtn');
48+
49+
momentumBtn.addEventListener('click', () => {
50+
graphType = "momentum";
51+
momentumBtn.style.backgroundColor = '#4a5568';
52+
momentumBtn.style.color = 'white';
53+
magicBtn.style.backgroundColor = '#f7fafc';
54+
magicBtn.style.color = '#4a5568';
5555
drawChart();
5656
});
5757

58-
logBtn.addEventListener('click', () => {
59-
chartScale = 'logarithmic';
60-
logBtn.style.backgroundColor = '#4a5568';
61-
logBtn.style.color = 'white';
62-
linearBtn.style.backgroundColor = '#f7fafc';
63-
linearBtn.style.color = '#4a5568';
58+
magicBtn.addEventListener('click', () => {
59+
graphType = "magic";
60+
magicBtn.style.backgroundColor = '#4a5568';
61+
magicBtn.style.color = 'white';
62+
momentumBtn.style.backgroundColor = '#f7fafc';
63+
momentumBtn.style.color = '#4a5568';
6464
drawChart();
6565
});
6666
}
@@ -192,16 +192,16 @@ function createDataMenu() {
192192
</div>
193193
<div id="chartContainer" style="width: 80%; max-width: 800px; background-color: #2d3748; border-radius: 8px;
194194
box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 20px;">
195-
<h2 style="text-align: center; margin-top: 0; color: #e2e8f0;">Recent 100 Overclock Amounts</h2>
195+
<h2 style="text-align: center; margin-top: 0; color: #e2e8f0;">Progress and HATL lvl changes</h2>
196196
<canvas id="resourceChart" style="width: 100%; height: 400px; border-radius: 4px;"></canvas>
197197
<div style="text-align: center; margin-top: 15px;">
198-
<button id="linearBtn" style="padding: 10px 20px; border: 1px solid #63b3ed; background-color: #63b3ed;
198+
<button id="momentumBtn" style="padding: 10px 20px; border: 1px solid #63b3ed; background-color: #63b3ed;
199199
color: #1a202c; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s;">
200-
Linear
200+
Total Momentum (log)
201201
</button>
202-
<button id="logBtn" style="padding: 10px 20px; border: 1px solid #4a5568; background-color: #4a5568;
202+
<button id="magicBtn" style="padding: 10px 20px; border: 1px solid #4a5568; background-color: #4a5568;
203203
color: #e2e8f0; border-radius: 5px; cursor: pointer; font-weight: bold; transition: background-color 0.2s;">
204-
Logarithmic
204+
Magic Quality
205205
</button>
206206
</div>
207207
</div>

0 commit comments

Comments
 (0)