Grouping within matrix

Using Django Templates & Frontend
1

Folllowing: Transpose and pivot data in a Django project - Martin Noah

Trying to achieve having grouping within the matrix as shown in the pic down (just rough idea of presentation).

Facing 2 issues.

  1. I need the grouping of ‘area’ as shown. But For each ‘Avl’ value the ‘area’ value is repeated. How to group as shown or show distinct value?

  2. I am displaying 2 diff icons as per value of ‘Yes’ or ‘No’. But only 1 icon is getting reflected irrespective of the values.

Need assistance to solve the issues. - Thank you!

ModelMatrix
ModelMatrix929×356 7.34 KB 

def AvailabilityMatrix(request):

    Occupied = Area.objects.annotate(
        till=Cast(Concat('to_date', Value(" "),'to_time', output_field=DateTimeField()),output_field=DateTimeField()),
        Avl_id=Concat('mon__mon_id','Avl__Avl')
        ).values_list('Avl_id').filter(till__gte=datetime.today())

    TotalAvl = Avls.objects.annotate(
        Avl_id=Concat('mon__mon_id','Avl'),
        is_available=Case(
            When(Avl_id__in=Occupied, then=Value('No')),
            default=Value('Yes'),
        )
    ).values('Avl_id','is_available',monId=F('mon__mon_id'),areaId=F('area__area_id')
    ).order_by('Avl__Avl')

    TotalAvl_transpose = defaultdict(list)
    for avl in TotalAvls:
        TotalAvls_transpose[Avl["monId"]].append((Avl["AvlId"], Avl["is_available"]))

    cols = max(TotalAvls_transpose.values())

    context = {
        'Avls':TotalAvls,
        'TotalAvls_transpose':dict(TotalAvls_transpose),
        'cols':cols
    }
    return render(request,'Area/Avl_availability_matrix.html',context)

Avl_availability_matrix.html

<table  class="table table-hover">
    {% for monId, TotalAvls in TotalAvls_transpose.items %}
    <tbody>
        <tr>
            <td>{{ monId }}</td>
            {% for area in TotalAvls %} 
                <td> area {{area.0}}                          
                    {% if area.1 == 'Yes' %}
                    <i class="fa fa-solid fa-chart-area"></i>
                    {% else %}                        
                    <i class="fa fa-regular fa-chart-area"></i>
                    {% endif %} 
                </td>
            {% endfor %}
        </tr>      
    </tbody>  
    {% endfor %}
</table>