Quantile colour scales

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 });

// 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);