demo D285
A board that flags work running late in Angular
Every open card timed from the moment it entered its column, with the ones running long marked: an amber edge past the warning limit, a red edge and tint past the breach, and its own clock for each column
sla: { warn, breach, enteredProperty }
This board times every open card from the moment it entered its column and marks the ones running long: an amber edge past the warning limit, a red edge and tint past the breach, with its own clock per column. It shows at a glance which work has been sitting too long, which a plain board cannot tell you.
This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createKanban } from '@toclocoinc/lattice-grid/modules/kanban';
import { LatticeKanbanComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
const HOUR = 3600000;
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeKanbanComponent],
template: '<lattice-kanban [config]="config" [rows]="rows" style="display:block;height:520px"></lattice-kanban>',
})
export class AppComponent implements AfterViewInit {
@ViewChild(LatticeKanbanComponent) boardRef!: LatticeKanbanComponent;
config = {
rowKey: 'id',
columnProperty: 'status',
// Per-column limits, in ms: each column is held to its own clock.
columns: [
{ id: 'triage', title: 'Triage', sla: { warn: 8 * HOUR, breach: 24 * HOUR } },
{ id: 'progress', title: 'In progress', sla: { warn: 6 * HOUR, breach: 16 * HOUR } },
{ id: 'waiting', title: 'Waiting on customer', sla: { warn: 24 * HOUR, breach: 72 * HOUR } },
{ id: 'resolved', title: 'Resolved', color: '#2e7d32' },
],
card: { title: { field: 'title' }, subtitle: 'assignee', badges: 'priority' },
// Turn on ageing: read each card's entry time, ignore resolved work, and
// show the age on every card.
sla: { enteredProperty: 'enteredAt', ignoreDone: true, showAge: 'always' },
};
rows = [/* tickets: id, status, assignee, priority, title, enteredAt */];
ngAfterViewInit() {
// Paint the ageing state onto the cards already on screen.
this.boardRef.instance!.sla.evaluate();
}
}
bootstrapApplication(AppComponent, {
providers: [provideLattice({ createKanban })],
});Which work is running late, without reading a single date
A board tells you where the work is. It does not, on its own, tell you which of it has been sitting too long. This one does. Every open card is timed from the moment it entered its column, and the ones running past what you allow are marked where the eye already is: an amber edge as a card nears its limit, then a red edge and a faint tint once it has passed it. The queue that needs a person reads at a glance, before anyone opens a card to check.
Each column keeps its own clock, because fast work and slow work are not the same promise. Triage is meant to clear in hours; a ticket waiting on a customer is allowed to sit far longer before it counts against anyone. Set a warning and a breach limit per column and the board holds each stage to its own standard. Work you have marked done is left out of the reckoning, so a closed card never shows as overdue and never distracts from the ones that are.
Because the age travels with the card, it stays right as the board moves. Drag a card into a new column and its clock restarts against that column’s limits; a card that arrives on a live feed is measured the moment it lands. The same board that shows the work also shows which of it is slipping, so a standard you agreed as a team is one the board keeps for you.
How do I highlight cards that are running late?
Turn on ageing when you create the board: give it sla with an enteredProperty naming the field that holds when each card entered its column, and a warn and breach duration. Set those durations per column, so a quick stage and a slow stage are held to different clocks on the same board. A card past the warning limit takes an amber edge, one past the breach limit a red edge and a tint, and each card can show its current age. List your finished columns in doneColumns and the board leaves resolved work out, so only open cards are ever flagged.