MET-6314 Map Unknown Location Handling

src/app/chart/map/map.component.html

@@ -1,3 +1,4 @@
+<div id="mapChartGlobe"></div>
 <div id="mapChart"></div>
 <div id="mapChartHidden"></div>
 <div id="mapLegend"></div>

src/app/chart/map/map.component.scss

@@ -1,11 +1,19 @@
 @import "../../../scss/_variables";
 
 #mapChart,
+#mapChartGlobe,
 #mapChartHidden {
   height: $map-height;
   width: 100%;
 }
 
+#mapChartGlobe {
+  left: 0;
+  right: 0;
+  min-height: $map-height;
+  position: absolute;
+}
+
 #mapChartHidden {
   margin-top: -100%;
   visibility: hidden;

src/app/chart/map/map.component.spec.ts

@@ -27,9 +27,20 @@ describe('MapComponent', () => {
     }).compileComponents();
   }));
 
+  const getFakeChart = (): am4maps.MapChart => {
+    return {
+      show: () => {},
+      hide: () => {},
+      zoomToRectangle: () => {},
+      animate: () => {}
+    } as unknown as am4maps.MapChart;
+  };
+
   beforeEach(() => {
     fixture = TestBed.createComponent(MapComponent);
     component = fixture.componentInstance;
+    component.chart = getFakeChart();
+    component.chartGlobe = getFakeChart();
     component.mapData = [];
     fixture.detectChanges();
   });
@@ -38,13 +49,34 @@ describe('MapComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should hide the globe', () => {
+    spyOn(component.chart, 'show');
+    spyOn(component.chartGlobe, 'hide');
+    component.hideGlobe();
+    expect(component.chart.show).toHaveBeenCalled();
+    expect(component.chartGlobe.hide).toHaveBeenCalled();
+  });
+
+  it('should show the globe', () => {
+    spyOn(component.chart, 'hide');
+    spyOn(component.chartGlobe, 'show');
+    spyOn(component.chartGlobe, 'animate');
+
+    component.showGlobe();
+    expect(component.chart.hide).toHaveBeenCalled();
+    expect(component.chartGlobe.show).toHaveBeenCalled();
+    expect(component.chartGlobe.animate).toHaveBeenCalled();
+  });
+
   it('should update the data', () => {
     component.mapCountries = [];
     component.mapData = [{ id: 'IT', value: 1881 }];
     expect(component.mapCountries.length).toBeGreaterThan(0);
   });
 
   it('should track the selected country', () => {
+    spyOn(component, 'hideGlobe');
+    spyOn(component, 'showGlobe');
     component.mapData = [{ id: 'IT', value: 1881 }];
 
     spyOn(component.mapCountrySet, 'emit');
@@ -58,6 +90,11 @@ describe('MapComponent', () => {
     component.selectedCountry = undefined;
 
     expect(component.mapCountrySet.emit).toHaveBeenCalledWith(false);
+    expect(component.hideGlobe).toHaveBeenCalled();
+    expect(component.showGlobe).not.toHaveBeenCalled();
+
+    component.selectedCountry = component.countryUnknown;
+    expect(component.showGlobe).toHaveBeenCalled();
   });
 
   it('should generate the polygon series', () => {
@@ -103,8 +140,9 @@ describe('MapComponent', () => {
   it('should debounce clicks on the country', fakeAsync(() => {
     spyOn(component, 'countryClick');
     component.countryClickSubject.next('IT');
-    tick(250);
+    tick(component.animationTime);
     expect(component.countryClick).toHaveBeenCalled();
+    tick(component.animationTime);
   }));
 
   it('should debounce dragging', fakeAsync(() => {
@@ -116,6 +154,7 @@ describe('MapComponent', () => {
 
   it('should handle clicks on the country', () => {
     spyOn(component, 'setCountryInclusion');
+    spyOn(component, 'hideGlobe');
 
     component.drawChart();
     expect(component.selectedCountry).toBeFalsy();
@@ -150,9 +189,11 @@ describe('MapComponent', () => {
 
     component.countryClick(country);
     expect(component.setCountryInclusion).toHaveBeenCalled();
+    expect(component.hideGlobe).toHaveBeenCalled();
   });
 
   it('should track which countries are shown', () => {
+    spyOn(component, 'hideGlobe');
     component.mapData = [{ id: 'IT', value: 1881 }];
     spyOn(component.polygonSeries.events, 'once');
 
@@ -161,9 +202,11 @@ describe('MapComponent', () => {
 
     expect(component.polygonSeries.events.once).toHaveBeenCalled();
     expect(component.selectedCountry).toBeFalsy();
+    expect(component.hideGlobe).toHaveBeenCalled();
   });
 
   it('should morph', () => {
+    spyOn(component, 'hideGlobe');
     component.mapData = [{ id: 'IT', value: 1881 }];
     component.setCountryInclusion(['IT', 'DE']);
 
@@ -187,5 +230,38 @@ describe('MapComponent', () => {
     component.countryMorph('DE');
 
     expect(component.selectedCountry).toEqual('DE');
+    expect(component.hideGlobe).toHaveBeenCalledTimes(2);
+  });
+
+  it('should detect chart series container events', () => {
+    component.drawChart();
+
+    const spyDragStart = jasmine.createSpy();
+    const spyDragStop = jasmine.createSpy();
+
+    component.chart.seriesContainer.events.on('dragstart', spyDragStart);
+    component.chart.seriesContainer.events.on('dragstop', spyDragStop);
+
+    component.chart.seriesContainer.dispatchImmediately('dragstart');
+    expect(spyDragStart).toHaveBeenCalled();
+
+    component.chart.seriesContainer.dispatchImmediately('dragstop');
+    expect(spyDragStop).toHaveBeenCalled();
+  });
+
+  it('should detect chart events', () => {
+    component.drawChart();
+
+    const spyOut = jasmine.createSpy();
+    const spyOver = jasmine.createSpy();
+
+    component.chart.events.on('out', spyOut);
+    component.chart.events.on('over', spyOver);
+
+    component.chart.dispatchImmediately('out');
+    expect(spyOut).toHaveBeenCalled();
+
+    component.chart.dispatchImmediately('over');
+    expect(spyOver).toHaveBeenCalled();
   });
 });

src/app/chart/map/map.component.ts

@@ -47,6 +47,7 @@ export class MapComponent extends SubscriptionManager {
   _mapData: Array<IdValue>;
   chart: am4maps.MapChart;
   chartHidden: am4maps.MapChart;
+  chartGlobe: am4maps.MapChart;
   mapPercentMode = false;
   polygonSeries: am4maps.MapPolygonSeries;
   polygonSeriesHidden: am4maps.MapPolygonSeries;
@@ -59,6 +60,7 @@ export class MapComponent extends SubscriptionManager {
 
   animationTime = 750;
   boundingCountries = ['IS', 'TR', 'ES', 'NO'];
+  countryUnknown = 'EU';
   mapCountries = [];
 
   selectedCountryNext?: string;
@@ -96,6 +98,11 @@ export class MapComponent extends SubscriptionManager {
     this.selectedCountryNext = this.mapCountries[indexNext];
     this.selectedCountryPrev = this.mapCountries[indexPrev];
 
+    if (selectedCountry === this.countryUnknown) {
+      this.showGlobe();
+    } else {
+      this.hideGlobe();
+    }
     this.mapCountrySet.emit(!!selectedCountry);
   }
 
@@ -130,7 +137,6 @@ export class MapComponent extends SubscriptionManager {
 
   constructor() {
     super();
-    am4core.options.autoDispose = true;
 
     const cst = Object.values(TargetFieldName).reduce(
       (ob: ColourSchemeMap, tType: TargetFieldName) => {
@@ -432,6 +438,26 @@ export class MapComponent extends SubscriptionManager {
     this.chartHidden.minZoomLevel = 0.2;
   }
 
+  hideGlobe(): void {
+    this.chart.show();
+    this.chartGlobe.hide();
+  }
+
+  showGlobe(): void {
+    this.chart.hide();
+    this.chartGlobe.show();
+    this.animateLatitude();
+  }
+
+  animateLatitude(): void {
+    this.chartGlobe.deltaLatitude = -45;
+    this.chartGlobe.animate(
+      { property: 'deltaLatitude', to: 0 },
+      12000,
+      am4core.ease.circleOut
+    );
+  }
+
   /** drawChart
    *
    **/
@@ -442,8 +468,10 @@ export class MapComponent extends SubscriptionManager {
     // Create map instance
     const chart = am4core.create('mapChart', am4maps.MapChart);
     const chartHidden = am4core.create('mapChartHidden', am4maps.MapChart);
+    const chartGlobe = am4core.create('mapChartGlobe', am4maps.MapChart);
     this.chart = chart;
     this.chartHidden = chartHidden;
+    this.chartGlobe = chartGlobe;
     this.chart.seriesContainer.resizable = false;
 
     // Set map definition
@@ -585,6 +613,31 @@ export class MapComponent extends SubscriptionManager {
     chart.seriesContainer.events.on('dragstop', () => {
       this.dragEndSubject.next(true);
     });
+
+    chartGlobe.events.on('ready', () => {
+      this.hideGlobe();
+
+      chartGlobe.deltaLongitude = -45;
+      chartGlobe.projection = new am4maps.projections.Orthographic();
+      chartGlobe.series.push(new am4maps.MapPolygonSeries()).useGeodata = true;
+      chartGlobe.seriesContainer.resizable = false;
+      chartGlobe.seriesContainer.draggable = false;
+
+      chartGlobe.animate({ property: 'deltaLongitude', to: 100050 }, 20000000);
+
+      setTimeout(() => {
+        chartGlobe.geodata = am4geodata_worldHigh;
+        const label = chartGlobe.chartAndLegendContainer.createChild(
+          am4core.Label
+        );
+        label.text = 'location unknown';
+        label.fontSize = 20;
+        label.fontWeight = 'bold';
+        label.align = 'center';
+        label.fill = am4core.color('#4d4d4d');
+        label.padding(110, 0, 0, 0);
+      }, this.animationTime);
+    });
   }
 
   getBoundingCoords(countryIds: Array<string>): Array<number> {

src/app/landing/landing.component.scss

@@ -161,8 +161,9 @@ a[disabled] {
 }
 
 .map-container {
-  width: 100%;
+  position: relative;
   max-width: 100%;
+  width: 100%;
 
   & + .data-rows {
     width: 100%;