CimeyClust/HabitTracker
1
1
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

Heatmap Fixed und ready for übergabe

Browse Source
This commit is contained in:
nikolaswollenberg 2024-01-26 09:13:33 +01:00
parent 1a1aedbb99
commit 4809068888
1 changed files with 18 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
templates/index.html
View File

@ -34,37 +34,40 @@
}
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
const activityData = [9, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
const activityData = [9, 5, 11, 39, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
// Funktion zum Erstellen der Heatmap
function createHeatmap(data) {
const heatmapContainer = document.getElementById('heatmap');
// Aktuelles Datum des Montags
const currentDate = new Date();
const mondayDate = getMonday(currentDate);
const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
for (let i = 0; i < 7; i++) {
const dayElement = document.createElement('div');
dayElement.classList.add('day');
dayElement.textContent = currentDate.toLocaleDateString('de-DE', {weekday: 'short'});
dayElement.textContent = days[i];
heatmapContainer.appendChild(dayElement);
currentDate.setDate(currentDate.getDate() + 1);
// currentDate.setDate(currentDate.getDate() + 1);
}
// Aktuelles Datum des Montags in der neuen linken Spalte
for (let i = 0; i < 7; i++) {
const dayElement = document.createElement('div');
dayElement.classList.add('day');
//dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
heatmapContainer.appendChild(dayElement);
for (let j = 0; j < 4; j++) {
for (let j = 0; j < 7; j++) {
console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
if (data[i * 7 + j]) {
const dayElement = document.createElement('div');
dayElement.classList.add('day');
dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
heatmapContainer.appendChild(dayElement);
} else {
const dayElement = document.createElement('div');
// dayElement.classList.add('day');
// dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
heatmapContainer.appendChild(dayElement);
}
}
}
}