Show country flag emoji

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.html

@@ -35,7 +35,11 @@
         <tr *ngFor="let country of countries">
           <td class="text-left rank">{{ country.rank }}</td>
           <td class="text-left text-truncate name">
-            <a [routerLink]="['/lightning/nodes/country' | relativeUrl, country.iso]">{{ country.name.en }}</a>
+            <div class="d-flex">
+              <span style="font-size: 20px">{{ country.flag }}</span>
+              &nbsp;
+              <a class="mt-auto mb-auto" [routerLink]="['/lightning/nodes/country' | relativeUrl, country.iso]">{{ country.name.en }}</a>
+            </div>
           </td>
           <td class="text-right share">{{ country.share }}%</td>
           <td class="text-right nodes">{{ country.count }}</td>

frontend/src/app/lightning/nodes-per-country-chart/nodes-per-country-chart.component.ts

@@ -9,6 +9,7 @@ import { StateService } from 'src/app/services/state.service';
 import { download } from 'src/app/shared/graphs.utils';
 import { AmountShortenerPipe } from 'src/app/shared/pipes/amount-shortener.pipe';
 import { RelativeUrlPipe } from 'src/app/shared/pipes/relative-url/relative-url.pipe';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-nodes-per-country-chart',
@@ -50,6 +51,7 @@ export class NodesPerCountryChartComponent implements OnInit {
           for (let i = 0; i < data.length; ++i) {
             data[i].rank = i + 1;
             data[i].iso = data[i].iso.toLowerCase();
+            data[i].flag = getFlagEmoji(data[i].iso);
           }
           return data.slice(0, 100);
         }),

frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html

@@ -1,5 +1,8 @@
 <div class="container-xl full-height" style="min-height: 335px">
-  <h1 class="float-left" i18n="lightning.nodes-in-country">Lightning nodes in {{ country }}</h1>
+  <h1 class="float-left" i18n="lightning.nodes-in-country">
+    <span>Lightning nodes in {{ country?.name }}</span>
+    <span style="font-size: 50px; vertical-align:sub;"> {{ country?.flag }}</span>
+  </h1>
 
   <div style="min-height: 295px">
     <table class="table table-borderless">

frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { map, Observable } from 'rxjs';
 import { ApiService } from 'src/app/services/api.service';
 import { SeoService } from 'src/app/services/seo.service';
+import { getFlagEmoji } from 'src/app/shared/graphs.utils';
 
 @Component({
   selector: 'app-nodes-per-country',
@@ -12,7 +13,7 @@ import { SeoService } from 'src/app/services/seo.service';
 })
 export class NodesPerCountry implements OnInit {
   nodes$: Observable<any>;
-  country: string;
+  country: {name: string, flag: string};
 
   constructor(
     private apiService: ApiService,
@@ -24,8 +25,11 @@ export class NodesPerCountry implements OnInit {
     this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country)
       .pipe(
         map(response => {
-          this.country = response.country.en
+          this.country = {
-          this.seoService.setTitle($localize`Lightning nodes in ${this.country}`);
+            name: response.country.en,
+            flag: getFlagEmoji(this.route.snapshot.params.country)
+          };
+          this.seoService.setTitle($localize`Lightning nodes in ${this.country.name}`);
           return response.nodes;
         })
       );

frontend/src/app/shared/graphs.utils.ts

@@ -90,3 +90,11 @@ export function detectWebGL() {
   const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
   return (gl && gl instanceof WebGLRenderingContext);
 }
+
+export function getFlagEmoji(countryCode) {
+  const codePoints = countryCode
+    .toUpperCase()
+    .split('')
+    .map(char =>  127397 + char.charCodeAt());
+  return String.fromCodePoint(...codePoints);
+}