demo D168

Waterfall, stream, marimekko in Angular

Monthly rises and falls, a mix shifting over time, and regions against statuses

type: 'waterfall' · 'stream' · 'marimekko'

A year of circuit charges drawn three ways. The waterfall shows each month's rise or fall in total charge and where they add up to. The stream graph shows the mix of live, provisioning and ceased circuits shifting through the year. The marimekko gives each region a column as wide as its charge, split by status.

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: 'month', title: 'Month' },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'status', title: 'Status', filter: { type: 'set' } },
  { field: 'bandwidth', title: 'Bandwidth', type: 'number' },
  { field: 'utilisation', title: 'Utilisation', type: 'number', format: { decimals: 1, suffix: '%' } },
  { field: 'charge', title: 'Monthly charge', type: 'number',
    format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
  { field: 'change', title: 'Change on last month', type: 'number' },
];

const rows = [/* circuit records */];



@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template:
    '<div style="display:grid;grid-template-columns:repeat(2, 1fr);gap:14px;height:520px">' +
    '<div id="waterfall"></div>' +
    '<div id="stream"></div>' +
    '<div id="marimekko" style="grid-column:1 / -1"></div>' +
    '</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;
    createChart({ grid, container: '#waterfall', type: 'waterfall', x: 'month', y: 'change', title: 'waterfall' });
    createChart({ grid, container: '#stream',    type: 'stream',    x: 'month', series: 'status', y: 'charge', title: 'stream' });
    createChart({ grid, container: '#marimekko', type: 'marimekko', x: 'region', series: 'status', y: 'charge', title: 'marimekko' });
  }
}

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