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

33
templates/index.html
View File

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