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>
    function hexToRgb(hex) {
    hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => r + r + g + g + b + b);
    const [, r, g, b] = hex.match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i);
    return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16)];
}

    // Generates activity based on the Values given by the Backend
    const activityData = {{ heatmap_values }};
    const day = {{ day }};
    const color = hexToRgb("{{ color }}");
</script>