demo D36
Win-loss, gauge, range
The compact chart set for KPI grids
render: 'winloss' | 'gauge' | 'range'
The configuration
import * as ng from '@angular/core';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';
const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });
const columns = [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 170 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
// Every mark the same height: the question a win/loss strip answers is
// how often, never how much.
{ id: 'streak-last-14-days', field: 'streak', title: 'Last 14 days', layout: { width: 190 },
sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'winloss' } },
{ field: 'utilisation', title: 'Utilisation', type: 'number', layout: { width: 140 },
format: { suffix: '%' }, cell: { render: 'gauge', props: { min: 0, max: 100 } } },
// Nine readings drawn as a span with the middle marked, against a
// pinned scale so the widest row is visibly the widest.
{ id: 'spread-latency-spread', field: 'spread', title: 'Latency spread', layout: { width: 220 },
sort: { enabled: false }, filter: { enabled: false }, cell: { render: 'range', props: { min: 0, max: 1200 } } },
{ field: 'status', title: 'Status', layout: { width: 130 },
cell: { render: 'pill', props: { variant: {
map: { healthy: 'success', degraded: 'warning', failing: 'danger' },
default: 'neutral',
} } } },
];
const rows = [/* rendering demo rows */];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
grid = {
rowKey: 'id',
selection: 'multiple',
toolPanel: { side: 'left', panels: ['columns', 'filters', 'views', 'quick'], actions: ['undo', 'redo', 'export', 'restore', 'maximise'], exportName: 'lattice-demo' },
columns: columns,
rows: rows,
};
}
bootstrapApplication(AppComponent);Win-loss, gauge and range charts for compact KPI columns
Win-loss, gauge and range are three small chart types for a column of key performance figures, where a full chart would take more space than the metric deserves. A win-loss strip shows a run of wins and losses as a row of ticks, a gauge shows a single value against a minimum and maximum as an arc or dial, and a range shows a value’s position between a low and high bound as a bar. A developer reaches for these where a KPI grid needs to show, at a glance, whether a value is on target or trending well, across dozens of rows, without a dedicated chart panel per row. Lattice Grid selects the type with the render option, set to 'winloss', 'gauge' or 'range', so a column of quarterly targets can switch from a range bar to a gauge dial by changing one string on the column definition, with the value, minimum and maximum read from the row data. Each chart draws to a small canvas sized to the cell, and only cells for rows currently on screen are drawn, so a JavaScript data grid with several such columns keeps its scroll performance on a sheet of ten thousand rows. Colour thresholds are set once per column, so a gauge or range column stays consistent across every row without per-cell styling.
What is a gauge chart in a data grid column?
A gauge chart in a grid column draws a single value as an arc or dial against a set minimum and maximum, inside one cell, so a reader can judge at a glance whether a figure such as capacity used or a score achieved sits low, mid or high on its scale. In Lattice Grid, set render: 'gauge' on a column definition and supply the value, min and max from the row data; the grid draws the dial to a small canvas sized to the cell for each visible row.