HabitTracker/templates/components/heatmap.html

<div class="flex-fill col-md-5 col-lg-4 col-12 card bg-light mb-6">
    <div class="card-body">
        <h5 class="card-title">📅 Heatmap</h5>
        <div id="heatmap"></div>
    </div>
</div>

<script>

    // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
    const activityData = {{ heatmap_values }};

    // Funktion zum Erstellen der Heatmap
    function createHeatmap(data) {
        const heatmapContainer = document.getElementById('heatmap');

        // Aktuelles Datum des Montags
        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 = days[i];
            heatmapContainer.appendChild(dayElement);
            // currentDate.setDate(currentDate.getDate() + 1);
        }

        // Aktuelles Datum des Montags in der neuen linken Spalte
        for (let i = 0; i < 7; i++) {
            for (let j = 0; j < 4; j++) {
                // console.log(i * 7 + j, data[i * 7 + j], Math.max(...data));
                const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : 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);
                }
            }
        }

        var left = 7 - (new Date()).getDay();
    }

    // Erstelle die Heatmap mit den simulierten Daten
    createHeatmap(activityData);

</script>