demo D169

Values on a map in Angular

Continents and countries from ISO codes

type: 'geomap', code, y

This plots values on a map of continents and countries, keyed by ISO codes on your rows. It turns a table of places into a map you read at a glance, so regional patterns stand out geographically rather than as rows.

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, 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';
// A geometry pack registers itself on import; shapes: { pack: id } names it.
import { pack } from '@toclocoinc/lattice-grid/modules/geo-world-110m';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';

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

  gridConfig = {
    rowKey: 'id',
    columns: [
      { field: 'country', title: 'ISO code', layout: { pin: 'start', width: 140 } },
      { field: 'revenue', title: 'Revenue', type: 'number', format: { style: 'currency', currency: 'USD' }, total: 'sum' },
    ],
    rows: [/* country revenue: id, country (ISO alpha-2, or ZZ), revenue */],
  };

  ngAfterViewInit() {
    createChart({
      grid: this.gridRef.grid, container: '#chart', type: 'geomap',
      code: 'country', y: { col: 'revenue', fn: 'sum' }, shapes: { pack: pack.id },
      title: 'Revenue by country',
    });
  }
}

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