Timill Platform Documentation

Widget - Status Dashboard

Example of a status dashboard widget in Timill Platform.

Count items by status and display in a grid.

Example Code#

<div class="grid grid-cols-4 gap-4">
  {{$items := queryItems "type = 'task'"}}
  {{$open := filter $items "status = 'open'"}}
  {{$progress := filter $items "status = 'in-progress'"}}
  {{$review := filter $items "status = 'review'"}}
  {{$done := filter $items "status = 'done'"}}
  
  <div class="bg-blue-100 p-4 rounded text-center">
    <div class="text-2xl font-bold">{{len $open}}</div>
    <div class="text-sm">Open</div>
  </div>
  
  <div class="bg-yellow-100 p-4 rounded text-center">
    <div class="text-2xl font-bold">{{len $progress}}</div>
    <div class="text-sm">In Progress</div>
  </div>
  
  <div class="bg-purple-100 p-4 rounded text-center">
    <div class="text-2xl font-bold">{{len $review}}</div>
    <div class="text-sm">Review</div>
  </div>
  
  <div class="bg-green-100 p-4 rounded text-center">
    <div class="text-2xl font-bold">{{len $done}}</div>
    <div class="text-sm">Done</div>
  </div>
</div>

Customization#

Add more status columns:

{{$closed := filter $items "status = 'closed'"}}
<div class="bg-gray-100 p-4 rounded text-center">
  <div class="text-2xl font-bold">{{len $closed}}</div>
  <div class="text-sm">Closed</div>
</div>

See also: Scripted Widgets Guide