demo D201

Is this column normal? in Angular

A Q-Q plot against a line through the quartiles

type: 'qq', y

This draws a Q-Q plot of a column against a line through its quartiles, to judge whether it is normally distributed. It answers 'is this column normal' visually, so you can see how far the data departs from the assumption before relying on it.

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

const columns = [
  { field: 'symbol', title: 'Symbol', layout: { width: 120 } },
  { field: 'desk', title: 'Desk', filter: { type: 'set' } },
  { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
  { field: 'bid', title: 'Bid', type: 'number', format: { decimals: 4 } },
  { field: 'ask', title: 'Ask', type: 'number', format: { decimals: 4 } },
  { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
  { field: 'notional', title: 'Notional', type: 'number',
    format: { style: 'currency', currency: 'USD' }, total: 'sum' },
];

const rows = [/* order-book rows */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<div id="chart" style="height:340px"></div>' +
    '<lattice-grid [config]="grid" (grid-ready)="onGridReady()" style="display:block;height:340px;margin-top:14px"></lattice-grid>',
})
export class AppComponent {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    columns: columns,
    rows: rows,
  };

  // The grid is created once the view has rendered, so the live instance
  // arrives on grid-ready rather than in ngAfterViewInit.
  onGridReady() {
    const grid = this.gridRef.grid;
    // A quantile-quantile plot of one column: points on the line are normal,
    // and the reference runs through the quartiles rather than a least squares fit.
    createChart({ grid, container: '#chart', type: 'qq', y: 'price' });
  }
}

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