Lattice Grid Buy a licence

demo D36

Win-loss, gauge, range in React

The compact chart set for KPI grids

render: 'winloss' | 'gauge' | 'range'

This grid shows the compact chart set built for KPI columns: a win-loss strip, a gauge against a target, and a range marker. It fits a small visual signal into a normal row, where a full chart would take more space than the metric deserves.

Building…
Loading a live grid…

This is the React version. The grid mounts through the createLatticeGrid adapter, which takes its configuration as ordinary props and hands back the live grid through a ref. The grid below is the same one every other tab runs.

The configuration

<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">

<div id="grid"></div>

<script type="module">
  import React from 'https://esm.sh/react@18';
  import { createRoot } from 'https://esm.sh/react-dom@18/client';
  import { createGrid } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/react.esm.min.js';

  const LatticeGrid = createLatticeGrid({ React, 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 */];

  function App() {
    return (
      <LatticeGrid
        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}
        style={{ height: '540px' }}
      />
    );
  }

  createRoot(document.getElementById('grid')).render(<App />);
</script>

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.

Related demos