Merge pull request #71 from GIScience/request-by-country

feat: add support for selecting and requesting single countries

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { ToastService } from './toast.service';
 import { AboutComponent } from './about/about.component';
 import {NgOptimizedImage} from '@angular/common';
 import { HelpComponent } from './help/help.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @NgModule({
   declarations: [
@@ -40,7 +41,8 @@ import { HelpComponent } from './help/help.component';
     AppRoutingModule,
     HttpClientModule,
     NgxDaterangepickerMd.forRoot(),
-    NgOptimizedImage
+    NgOptimizedImage,
+    NgSelectModule
   ],
   providers: [
     DataService,

src/app/dashboard/dashboard.component.spec.ts

@@ -256,7 +256,7 @@ describe('DashboardComponent', () => {
        ],
       providers: [
         { provide: DataService, useValue: dataServiceSpy },
-        { provide: ActivatedRoute, useValue: { fragment: of('hashtags=missingmaps&interval=P1M') } },
+        { provide: ActivatedRoute, useValue: { fragment: of('hashtags=missingmaps&interval=P1M&countries=DE,UGA') } },
       ]
     })
     .compileComponents();
@@ -284,6 +284,19 @@ describe('DashboardComponent', () => {
     expect(params).toEqual(expectedParams);
   });
 
+  it('should get query params from URL fragment', () => {
+    const fragment = 'start=2020-01-01T00:00:00.000Z&end=2020-12-31T00:00:00.000Z&countries=DE,UGA';
+    const expectedParams = {
+      start: '2020-01-01T00:00:00.000Z',
+      end: '2020-12-31T00:00:00.000Z',
+      countries: "DE,UGA"
+    };
+
+    const params = component.getQueryParamsFromFragments(fragment);
+
+    expect(params).toEqual(expectedParams);
+  });
+
   // it('should call data service to fetch summary data', () => {
   //   const queryParams = {
   //     start: '2022-08-16T00:52:40.000Z',

src/app/dashboard/dashboard.component.ts

@@ -68,6 +68,9 @@ export class DashboardComponent implements OnInit {
         if(queryParams['interval'] == null)
           queryParams.interval = this.dataService.defaultIntervalValue
 
+        if (queryParams['countries'] == null)
+          queryParams.countries = ''
+
         this.dataService.updateURL(queryParams)
 
         // if all values are present then only below code is executed
@@ -144,15 +147,16 @@ export class DashboardComponent implements OnInit {
             hashtags: queryParams && queryParams.hashtags ? queryParams.hashtags : urlParams.hashtags,
             interval: queryParams && queryParams.interval ? queryParams.interval : urlParams.interval,
             start: queryParams && queryParams.start ? queryParams.start : urlParams.start,
-            end: queryParams && queryParams.end ? queryParams.end :  urlParams.end
+            end: queryParams && queryParams.end ? queryParams.end :  urlParams.end,
+            countries: queryParams && queryParams.countries ? queryParams.countries : urlParams.countries
           })
         }
       }
     })
 
   }
   queryParamsComplete(params: any):boolean{
-      return ["start", "end", "interval", "hashtags"].sort().join() === Object.keys(params).sort().join()  
+      return ["start", "end", "interval", "hashtags", "countries"].sort().join() === Object.keys(params).sort().join()
   }
 
   stopIntervalReq() {

src/app/dashboard/query/query.component.html

@@ -54,6 +54,17 @@
                   </select>
                 </div>
               </div>
+
+               <div class="mb-3 row">
+                <div class="col-md-12">
+                  <label class="form-label" for="countries"> Countries </label>
+                  <select name="countries" class="form-control" [(ngModel)]="countries">
+                    <option value="" selected>All</option>
+                    <option *ngFor="let country of allCountries" [value]="country.value">{{country.name}}</option>
+                  </select>
+                </div>
+              </div>
+
             </div>
           </div>
           <button class="btn btn-primary btn-color" (click)="getStatistics()" type="submit">Get Statistics</button>

src/app/dashboard/query/query.component.ts

@@ -23,6 +23,10 @@ export class QueryComponent implements OnChanges {
     value: string;
   }> | undefined
   interval: string | undefined // default value as 'P1M'
+  countryMap: Array<{
+    name: string;
+    value: string;
+    }> | undefined
   selectedDateRange: { end: any; start: any; } | undefined;
   alwaysShowCalendars = true;
   ranges: any
@@ -35,7 +39,9 @@ export class QueryComponent implements OnChanges {
   private _start = ''
   private _end = ''
   currentTimeInUTC!: string;
-
+
+  countries: string[] = [];
+
   constructor(
     private dataService: DataService,
     private router: Router,
@@ -151,6 +157,9 @@ export class QueryComponent implements OnChanges {
 
       // set interval
       this.interval = data.interval
+
+      //set countries
+      this.countries = data.countries
     }
   }
 
@@ -162,7 +171,6 @@ export class QueryComponent implements OnChanges {
       return
     this.dataService.requestMetadata()
 
-    // console.log('>>> QueryComponent >>> getStatistics', this.selectedDateRange)
     // get all values from form
     if(! this.selectedDateRange)
       return
@@ -176,7 +184,7 @@ export class QueryComponent implements OnChanges {
 
     // update the url fragment
     this.router.navigate([], { 
-      fragment: `hashtags=${tempHashTags}&start=${tempStart}&end=${tempEnd}&interval=${this.interval}` 
+      fragment: `hashtags=${tempHashTags}&start=${tempStart}&end=${tempEnd}&interval=${this.interval}&countries=${this.countries}`,
     })
   }
 
@@ -258,4 +266,15 @@ export class QueryComponent implements OnChanges {
       .map(h => encodeURIComponent(h)); // escape everyting but A–Z a–z 0–9 - _ . ! ~ * ' ( )
     return cleanedHashtags.join(',');
   }
+
+  selectedCountries: string[] = [];
+ allCountries = [
+    { name: 'India', value: 'IND' },
+    { name: 'USA', value: 'USA' },
+    { name: 'Australia', value: 'AUS' },
+    { name: 'Canada', value: 'CAN' },
+    { name: 'South Africa', value: 'ZAF' },
+     ]
+
+
 }

src/app/data.service.spec.ts

@@ -617,7 +617,8 @@ describe('DataService', () => {
     const queryParams = {
       start: '2022-08-16T00:52:40.000Z',
       end: '2023-08-16T00:52:40.000Z',
-      hashtags: 'missingmaps'
+      hashtags: 'missingmaps',
+      countries: ''
     };
 
     service.requestSummary( queryParams ).subscribe({
@@ -630,7 +631,7 @@ describe('DataService', () => {
     });  
 
     const req = httpTestingController.expectOne(
-        `${service.url}/stats/${queryParams['hashtags']}?startdate=${queryParams['start']}&enddate=${queryParams['end']}`
+        `${service.url}/stats/${queryParams['hashtags']}?startdate=${queryParams['start']}&enddate=${queryParams['end']}&countries=`
     );
     expect(req.request.method).toBe('GET');
     req.flush(summaryResponse);

src/app/data.service.ts

@@ -55,7 +55,8 @@ export class DataService {
         hashtags: queryParams && queryParams.hashtags ? queryParams.hashtags : this.defaultHashtag,
         interval: queryParams && queryParams.interval ? queryParams.interval : this.defaultIntervalValue,
         start: queryParams && queryParams.start ? queryParams.start : tempStart.toISOString(),
-        end: queryParams && queryParams.end ? queryParams.end : this.maxDate
+        end: queryParams && queryParams.end ? queryParams.end : this.maxDate,
+        countries: queryParams && queryParams.countries ? queryParams.countries : ''
       })
     })
   }
@@ -80,7 +81,7 @@ export class DataService {
   }
 
   requestSummary(params: any): Observable<IWrappedSummaryData> {
-    return this.http.get<IWrappedSummaryData>(`${this.url}/stats/${params['hashtags']}?startdate=${params['start']}&enddate=${params['end']}`)
+    return this.http.get<IWrappedSummaryData>(`${this.url}/stats/${params['hashtags']}?startdate=${params['start']}&enddate=${params['end']}&countries=${params['countries']}`)
       .pipe(
         takeUntil(this.abortSummaryReqSub)
       )
@@ -144,7 +145,8 @@ export class DataService {
       start: tempStart.toISOString(),
       end: this.maxDate,
       hashtags: this.defaultHashtag,
-      interval: this.defaultIntervalValue
+      interval: this.defaultIntervalValue,
+      countries: ''
     }
   }
 
@@ -160,7 +162,7 @@ export class DataService {
 
   updateURL(data: IQueryParam): void{
     this.router.navigate([], {
-      fragment: `hashtags=${data.hashtags}&start=${data.start}&end=${data.end}&interval=${data.interval}`
+      fragment: `hashtags=${data.hashtags}&start=${data.start}&end=${data.end}&interval=${data.interval}&countries=${data.countries}`
     })
   }
 }
@@ -190,6 +192,7 @@ export interface IQueryData {
   end: string
   hashtags: Array<string>
   interval: string
+  countries: Array<string>
 }
 
 export interface IWrappedPlotData {
@@ -230,6 +233,7 @@ export interface ITrendingHashtags {
 }
 
 export interface IQueryParam {
+  countries: string,
   hashtags: string,
   start: string, // date in ISO format, ensure to keep milliseconds as 0
   end: string, // date in ISO format, ensure to keep milliseconds as 0