demo D189

Quantile colour scales in Angular

A scale that ignores the outlier flattening it

scale: { from: 'quantile' }

This grid shades a column by quantile rather than by raw range, so one extreme value does not flatten the colour for everything else. It keeps a heat map readable when the data is skewed, spreading colour by rank so the middle of the distribution still shows contrast.

Building…

Loading a live grid…

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 } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

// The same skewed column, two scales. A min-max scale is flattened by one
// large value; a quantile scale spans the 5th to 95th percentile instead.
const formatting = {
  'v-minmax':   [{ scale: { from: 'minmax', colours: ['#f5f7fa', '#1a6bc7'] } }],
  'v-quantile': [{ scale: { from: 'quantile', low: 5, high: 95, colours: ['#f5f7fa', '#1a6bc7'] } }],
};

const columns = [
  { field: 'node', title: 'Node', layout: { pin: 'start', width: 150 } },
  { field: 'value', id: 'v-minmax', title: 'min-max scale', type: 'number' },
  { field: 'value', id: 'v-quantile', title: 'quantile scale', type: 'number' },
  { field: 'value', title: 'value', type: 'number' },
];

const rows = [/* a skewed set of node readings */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:460px"></lattice-grid>',
})
export class AppComponent {
  grid = {
    rowKey: 'id',
    formatting: formatting,
    columns: columns,
    rows: rows,
  };
}

bootstrapApplication(AppComponent, {
  providers: [provideLattice({ createGrid })],
});