demo D205

Density over a histogram in Angular

A kernel density estimate over the bars, so binning and data separate

curve: true, buckets

This draws a kernel density estimate over a histogram of the same column, so the smooth shape and the binning are kept separate. It shows the underlying distribution without being misled by the choice of bin widths.

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: { pin: 'start', width: 120 } },
  { field: 'desk', title: 'Desk', filter: { type: 'set' } },
  { field: 'price', title: 'Price', type: 'number', format: { decimals: 4 } },
  { field: 'volume', title: 'Volume', type: 'number', format: { notation: 'compact' } },
];

const rows = [/* trading records, one per instrument */];



@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:320px;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;
    // The bars depend on where the bin edges fall; the density curve has no
    // edges, so laying one over the other separates the shape of the data from
    // the choice of buckets. The chart reads the live grid through the ref.
    createChart({ grid, container: '#chart', type: 'histogram', y: 'price',
      buckets: 20, curve: true, title: 'Price, with a density curve' });
  }
}

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