demo D166
Sankey, chord and network
Relationships between categories
type, source, target, y
Loading a live grid…
The configuration
import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit } 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 createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';
const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });
const columns = [
{ field: 'circuit', title: 'Circuit', layout: { width: 180 } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'status', title: 'Status', filter: { type: 'set' } },
{ field: 'bandwidth', title: 'Bandwidth', type: 'number' },
{ field: 'charge', title: 'Monthly charge', type: 'number',
format: { style: 'currency', currency: 'GBP' }, total: 'sum' },
];
const rows = [/* circuit records */];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template:
'<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;height:210px">' +
'<div id="sankey"></div>' +
'<div id="chord"></div>' +
'<div id="network"></div>' +
'</div>' +
'<lattice-grid [config]="grid" style="display:block;height:340px;margin-top:14px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
@ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;
grid = {
rowKey: 'id',
columns: columns,
rows: rows,
};
ngAfterViewInit() {
const grid = this.gridRef.grid;
createChart({ grid, container: '#sankey', type: 'sankey', source: 'region', target: 'status', y: 'charge', title: 'sankey' });
createChart({ grid, container: '#chord', type: 'chord', source: 'region', target: 'status', y: 'charge', title: 'chord' });
createChart({ grid, container: '#network', type: 'network', source: 'region', target: 'status', y: 'charge', title: 'network' });
}
}
bootstrapApplication(AppComponent);