From 7aadfedf1ed363953b2c27a12e8926430ee180ae Mon Sep 17 00:00:00 2001 From: andyjmaclean Date: Tue, 20 Aug 2024 18:12:29 +0200 Subject: [PATCH 1/5] MET-6063 Use Country Codes In API --- src/app/_data/static-data.ts | 4 +- src/app/_mocked/mock-api.service.ts | 20 +-- src/app/_services/api.service.spec.ts | 4 - src/app/_services/api.service.ts | 6 +- src/app/app.component.ts | 2 +- src/app/chart/map/map.component.ts | 3 +- src/app/country/country.component.html | 29 ++-- src/app/country/country.component.scss | 6 + src/app/country/country.component.spec.ts | 2 +- src/app/country/country.component.ts | 14 +- src/app/filter/filter.component.spec.ts | 4 +- src/app/filter/filter.component.ts | 10 +- .../grid-summary/grid-summary.component.html | 8 +- .../grid-summary/grid-summary.component.ts | 12 +- src/app/grid/grid.component.ts | 1 + src/app/header/header.component.html | 15 +- src/app/header/header.component.ts | 2 + src/app/landing/landing.component.html | 9 +- src/app/landing/landing.component.scss | 2 + src/app/landing/landing.component.ts | 9 +- src/app/overview/overview.component.html | 14 +- src/app/overview/overview.component.spec.ts | 16 +-- src/app/overview/overview.component.ts | 110 +++++++++++---- src/scss/_countries.scss | 4 +- test-data/static-country-data.ts | 131 ++++++++---------- test-data/static-data.ts | 9 +- 26 files changed, 245 insertions(+), 201 deletions(-) diff --git a/src/app/_data/static-data.ts b/src/app/_data/static-data.ts index c0c60eea..d12e09ce 100644 --- a/src/app/_data/static-data.ts +++ b/src/app/_data/static-data.ts @@ -179,13 +179,13 @@ export const isoCountryCodes = { Sweden: 'SE', Denmark: 'DK', Germany: 'DE', - 'United States of America': 'USA', + 'United States of America': 'US', Turkey: 'TR', Liechtenstein: 'LI', Latvia: 'LV', Lithuania: 'LT', Luxembourg: 'LU', - Vatican: 'VA', + 'Holy See (Vatican City State)': 'VA', Andorra: 'AD', Iceland: 'IS', Israel: 'IL', diff --git a/src/app/_mocked/mock-api.service.ts b/src/app/_mocked/mock-api.service.ts index c5e98587..bc4de980 100644 --- a/src/app/_mocked/mock-api.service.ts +++ b/src/app/_mocked/mock-api.service.ts @@ -303,19 +303,7 @@ export const MockGeneralResults = { export const MockBreakdowns = { filteringOptions: { contentTier: ['0', '1', '2', '3'], - country: [ - 'Denmark', - 'Ireland', - 'Norway', - 'Finland', - 'Germany', - 'Portugal', - 'Poland', - 'Italy', - 'Holy See (Vatican City State)', - 'Croatia', - 'Iceland' - ], + country: ['IT', 'IE', 'NO', 'FI', 'DE', 'PT', 'PL', 'IT', 'VA', 'HR', 'IS'], dataProvider: [ 'The Danish Agency for Culture', 'University College Cork', @@ -633,12 +621,6 @@ export const MockBreakdowns = { export class MockAPIService { errorMode = false; - loadIsoCountryCodes(): IHash { - return { - Belgium: 'BE' - }; - } - getBreakdowns(br: BreakdownRequest): Observable { if (this.errorMode) { return of({ filteringOptions: {}, results: {} } as BreakdownResults).pipe( diff --git a/src/app/_services/api.service.spec.ts b/src/app/_services/api.service.spec.ts index 6ecb0d3a..17598b5b 100644 --- a/src/app/_services/api.service.spec.ts +++ b/src/app/_services/api.service.spec.ts @@ -83,10 +83,6 @@ describe('API Service', () => { sub.unsubscribe(); }); - it('should load the ISO country codes', () => { - expect(service.loadIsoCountryCodes()).toBeTruthy(); - }); - it('should load the rightsCategory urls', () => { expect(service.getRightsCategoryUrls(['CC0'])).toBeTruthy(); }); diff --git a/src/app/_services/api.service.ts b/src/app/_services/api.service.ts index fb887817..db6eee64 100644 --- a/src/app/_services/api.service.ts +++ b/src/app/_services/api.service.ts @@ -29,10 +29,6 @@ export class APIService { constructor(private readonly http: HttpClient) {} - loadIsoCountryCodes(): IHash { - return isoCountryCodes; - } - replaceDoubleSlashes(s: string): string { return s.replace(/([^:]\/)\/+/g, '$1'); } @@ -90,7 +86,6 @@ export class APIService { map((targetData: Array) => { return targetData.map((tmd: TargetMetaDataRaw) => { tmd.isInterim = tmd.targetYear !== 2030; - tmd.country = isoCountryCodes[tmd.country]; return tmd; }); }) @@ -112,6 +107,7 @@ export class APIService { return rows.reduce( (res: IHash>, item: TargetMetaDataRaw) => { const country = item.country; + if (!res[country]) { res[country] = {}; } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 888c3588..3ada4881 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -206,7 +206,7 @@ export class AppComponent extends SubscriptionManager implements OnInit { * * @param { boolean } value - the value to set **/ - setContentTierZeroValue(value: boolean) { + setContentTierZeroValue(value: boolean): void { const ctrlCTZero = this.getCtrlCTZero(); this.lastSetContentTierZeroValue = value; diff --git a/src/app/chart/map/map.component.ts b/src/app/chart/map/map.component.ts index e347361f..133d924a 100644 --- a/src/app/chart/map/map.component.ts +++ b/src/app/chart/map/map.component.ts @@ -7,6 +7,7 @@ import * as am4maps from '@amcharts/amcharts4/maps'; import am4themes_animated from '@amcharts/amcharts4/themes/animated'; import am4geodata_worldHigh from '@amcharts/amcharts4-geodata/worldHigh'; +import { isoCountryCodes } from '../../_data'; import { APIService } from '../../_services'; import { IHash, NameValue } from '../../_models'; @@ -39,7 +40,7 @@ export class MapComponent { private readonly zone: NgZone, private readonly api: APIService ) { - this.countryCodes = api.loadIsoCountryCodes(); + this.countryCodes = isoCountryCodes; am4core.options.autoDispose = true; } diff --git a/src/app/country/country.component.html b/src/app/country/country.component.html index a101d31f..b4ed559e 100644 --- a/src/app/country/country.component.html +++ b/src/app/country/country.component.html @@ -1,6 +1,6 @@

- + headerRef['countryTotalMap'][country]['percentage'] !== undefined " > - {{ country }} + {{ country | renameCountry }} Data {{ headerRef["countryTotalMap"][country]["percentage"] }}% of the @@ -294,7 +294,7 @@

@@ -342,7 +342,7 @@

class="data-link" routerLink="/data/{{ DimensionName.contentTier }}" [queryParams]="{ - country: country, + country: country | renameCountry, type: '3D' }" (click)="resetAppCTZeroParam()" @@ -368,10 +368,7 @@

class="data-link" routerLink="/data/{{ DimensionName.type }}" [queryParams]="{ - country: country, + country: country | renameCountry, contentTier: [2, 3, 4], metadataTier: ['A', 'B', 'C'] }" @@ -444,7 +441,7 @@

@@ -493,7 +490,7 @@

class="data-link" routerLink="/data/{{ DimensionName.contentTier }}" [queryParams]="{ - country: country + country: country | renameCountry }" (click)="resetAppCTZeroParam()" >View all data for routerLink="/data/{{ DimensionName.type }}" [queryParams]="{ 'content-tier-zero': includeCTZero ? true : undefined, - country: country + country: country | renameCountry }" data-e2e="link-entry-type" i18n="@@countrySectionLinkType" @@ -636,7 +633,7 @@

routerLink="/data/{{ DimensionName.rightsCategory }}" [queryParams]="{ 'content-tier-zero': includeCTZero ? true : undefined, - country: country + country: country | renameCountry }" data-e2e="link-entry-rights" i18n="@@countrySectionLinkRights" @@ -669,7 +666,7 @@

routerLink="/data/{{ DimensionName.dataProvider }}" [queryParams]="{ 'content-tier-zero': includeCTZero ? true : undefined, - country: country + country: country | renameCountry }" data-e2e="link-entry-data-provider" i18n="@@countrySectionLinkDataProvider" @@ -705,7 +702,7 @@

routerLink="/data/{{ DimensionName.provider }}" [queryParams]="{ 'content-tier-zero': includeCTZero ? true : undefined, - country: country + country: country | renameCountry }" data-e2e="link-entry-provider" i18n="@@countrySectionLinkProvider" diff --git a/src/app/country/country.component.scss b/src/app/country/country.component.scss index 0346454e..f0ce96b4 100644 --- a/src/app/country/country.component.scss +++ b/src/app/country/country.component.scss @@ -362,6 +362,12 @@ position: relative; max-width: 100%; } + + .flag-orb { + $flag-dimension: 1.6rem; + min-width: $flag-dimension; + min-height: $flag-dimension; + } } .save { diff --git a/src/app/country/country.component.spec.ts b/src/app/country/country.component.spec.ts index ee6efd38..206a5180 100644 --- a/src/app/country/country.component.spec.ts +++ b/src/app/country/country.component.spec.ts @@ -134,7 +134,7 @@ describe('CountryComponent', () => { } }; - component.setCountryToParam('France'); + component.setCountryToParam('FR'); expect(component.latestCountryData).toEqual(datum); }); diff --git a/src/app/country/country.component.ts b/src/app/country/country.component.ts index d9d05fbb..e12c3a78 100644 --- a/src/app/country/country.component.ts +++ b/src/app/country/country.component.ts @@ -88,7 +88,9 @@ import { TruncateComponent } from '../truncate'; export class CountryComponent extends SubscriptionManager { public externalLinks = externalLinks; public DimensionName = DimensionName; + public isoCountryCodes = isoCountryCodes; + public TargetFieldName = TargetFieldName; public colours = colours; public eliDocNum = eliData.eliDocNum; @@ -135,7 +137,7 @@ export class CountryComponent extends SubscriptionManager { set country(country: string) { this._country = country; this.refreshCardData(); - this.showTargetsData = !!this.targetMetaData[isoCountryCodes[country]]; + this.showTargetsData = !!this.targetMetaData[country]; this.setHeaderData(country); } @@ -143,7 +145,6 @@ export class CountryComponent extends SubscriptionManager { return this._country; } - countryCode: string; targetMetaData: IHash>; countryData: IHash> = {}; latestCountryData: TargetData; @@ -196,7 +197,8 @@ export class CountryComponent extends SubscriptionManager { this.targetMetaData = combined.targetMetaData; this.countryData = combined.countryData; - const country = combined.params['country']; + const country = isoCountryCodes[combined.params['country']]; + this.setCountryToParam(country); this.initialiseIntersectionObserver(); }, @@ -324,9 +326,8 @@ export class CountryComponent extends SubscriptionManager { **/ setCountryToParam(country: string): void { this.country = country; - this.countryCode = isoCountryCodes[this.country]; - const specificCountryData = this.countryData[this.countryCode]; + const specificCountryData = this.countryData[country]; if (specificCountryData && specificCountryData.length) { this.latestCountryData = @@ -370,8 +371,7 @@ export class CountryComponent extends SubscriptionManager { // percentages this.latestCountryPercentages[valName] = percent; - const targets = - this.targetMetaData[this.countryCodes[this.country]][valName]; + const targets = this.targetMetaData[this.country][valName]; this.latestCountryPercentageOfTargets[valName] = [ (value || 0) / targets[0].value, diff --git a/src/app/filter/filter.component.spec.ts b/src/app/filter/filter.component.spec.ts index 943e21a4..999e540a 100644 --- a/src/app/filter/filter.component.spec.ts +++ b/src/app/filter/filter.component.spec.ts @@ -177,9 +177,9 @@ describe('FilterComponent', () => { return res; }; - createFormControls(DimensionName.country, ['xxx', 'yyy', 'zzz']); + createFormControls(DimensionName.country, ['BE', 'DE', 'IT']); expect(component.getSetCheckboxValues(DimensionName.country)).toEqual( - 'xxx, yyy, zzz' + 'Belgium, Germany, Italy' ); component.tierPrefix = 'Tier '; diff --git a/src/app/filter/filter.component.ts b/src/app/filter/filter.component.ts index 41403c2f..1e485de7 100644 --- a/src/app/filter/filter.component.ts +++ b/src/app/filter/filter.component.ts @@ -7,6 +7,7 @@ import { ViewChild } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { isoCountryCodesReversed } from '../_data'; import { getFormValueList } from '../_helpers'; import { DimensionName, @@ -121,7 +122,14 @@ export class FilterComponent { /* @param {DimensionName} filterName - the form value key */ getSetCheckboxValues(filterName: DimensionName): string { - return getFormValueList(this.form, filterName) + let result = getFormValueList(this.form, filterName); + + if (filterName === 'country') { + result = result.map((s: string) => { + return isoCountryCodesReversed[s]; + }); + } + return result .map((s: string) => { let prefix = ''; if ( diff --git a/src/app/grid-summary/grid-summary.component.html b/src/app/grid-summary/grid-summary.component.html index 8bd7e471..c0b5397e 100644 --- a/src/app/grid-summary/grid-summary.component.html +++ b/src/app/grid-summary/grid-summary.component.html @@ -10,7 +10,13 @@ >Total {{ "plural_" + summaryData.breakdownBy | renameApiFacetShort }} - {{ summaryData.results[0].value }} + + @if(summaryData.breakdownBy === DimensionName.country) { + {{ value | renameCountry }} + } @else { + {{ value }} + } + {{ summaryData.results.length }} diff --git a/src/app/grid-summary/grid-summary.component.ts b/src/app/grid-summary/grid-summary.component.ts index b759c4a4..0ad9f1fb 100644 --- a/src/app/grid-summary/grid-summary.component.ts +++ b/src/app/grid-summary/grid-summary.component.ts @@ -1,6 +1,10 @@ import { Component, Input } from '@angular/core'; -import { BreakdownResult, CountPercentageValue } from '../_models'; -import { RenameApiFacetShortPipe } from '../_translate/rename-facet-short.pipe'; +import { + BreakdownResult, + CountPercentageValue, + DimensionName +} from '../_models'; +import { RenameApiFacetShortPipe, RenameCountryPipe } from '../_translate'; import { DecimalPipe, NgIf } from '@angular/common'; @Component({ @@ -8,9 +12,11 @@ import { DecimalPipe, NgIf } from '@angular/common'; templateUrl: './grid-summary.component.html', styleUrls: ['./grid-summary.component.scss'], standalone: true, - imports: [NgIf, DecimalPipe, RenameApiFacetShortPipe] + imports: [NgIf, DecimalPipe, RenameApiFacetShortPipe, RenameCountryPipe] }) export class GridSummaryComponent { + public DimensionName = DimensionName; + _summaryData: BreakdownResult; @Input() grandTotal: number; diff --git a/src/app/grid/grid.component.ts b/src/app/grid/grid.component.ts index e1d17c11..6f6e0bb3 100644 --- a/src/app/grid/grid.component.ts +++ b/src/app/grid/grid.component.ts @@ -229,6 +229,7 @@ export class GridComponent extends SubscriptionManager { setRows(rows: Array): void { const normalRows = []; const summaryRows = []; + rows.forEach((tr: TableRow) => { if (tr.isTotal) { summaryRows.push(tr); diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 9abb6f0f..4f153106 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -25,15 +25,15 @@ > @if(activeCountry) { - {{ activeCountry }} + {{ activeCountry | renameCountry }} } @else { Country Pages } @@ -55,22 +55,19 @@ [attr.disabled]=" country.key === activeCountry ? 'disabled' : null " - [routerLink]="['/country', country.key]" + [routerLink]="['/country', country.key | renameCountry]" [queryParams]="includeCTZero ? { 'content-tier-zero': true } : {}" class="menu-item" [ngClass]="{ 'first-of-letter': !!countryFirstOfLetter[country.key] }" > - + {{ country.key }}{{ country.key | renameCountry }} diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index cb77acbf..2ec21db2 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -8,6 +8,7 @@ import { RouterLink } from '@angular/router'; import { isoCountryCodes } from '../_data'; import { ClickAwareDirective } from '../_directives/click-aware/click-aware.directive'; import { CountryTotalInfo, IHash } from '../_models'; +import { RenameCountryPipe } from '../_translate'; @Component({ selector: 'app-header', @@ -21,6 +22,7 @@ import { CountryTotalInfo, IHash } from '../_models'; NgClass, NgIf, NgFor, + RenameCountryPipe, RouterLink ] }) diff --git a/src/app/landing/landing.component.html b/src/app/landing/landing.component.html index 37b44c4a..e4c5ec2e 100644 --- a/src/app/landing/landing.component.html +++ b/src/app/landing/landing.component.html @@ -56,13 +56,10 @@

@if (countryLink){ - + {{ row.name - }}{{ row.name | renameCountry + }} } @else { diff --git a/src/app/landing/landing.component.scss b/src/app/landing/landing.component.scss index b4047963..4fd1bb96 100644 --- a/src/app/landing/landing.component.scss +++ b/src/app/landing/landing.component.scss @@ -166,6 +166,8 @@ $card-header-height: $card-header-pixels-line-height + top: 2px; height: 1em; width: 1em; + min-height: 1em; + min-width: 1em; } a:hover .flag-orb { diff --git a/src/app/landing/landing.component.ts b/src/app/landing/landing.component.ts index d97a2c3e..abc91291 100644 --- a/src/app/landing/landing.component.ts +++ b/src/app/landing/landing.component.ts @@ -12,7 +12,11 @@ import { RouterLink } from '@angular/router'; import { externalLinks, isoCountryCodes } from '../_data'; import { DimensionName, GeneralResultsFormatted } from '../_models'; -import { RenameApiFacetPipe, RenameApiFacetShortPipe } from '../_translate'; +import { + RenameApiFacetPipe, + RenameApiFacetShortPipe, + RenameCountryPipe +} from '../_translate'; import { BarComponent } from '../chart'; import { MapComponent } from '../chart/map/map.component'; import { ResizeComponent } from '../resize'; @@ -36,7 +40,8 @@ import { TruncateComponent } from '../truncate'; LowerCasePipe, DecimalPipe, RenameApiFacetPipe, - RenameApiFacetShortPipe + RenameApiFacetShortPipe, + RenameCountryPipe ] }) export class LandingComponent { diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html index d19d45bb..9a47cedc 100644 --- a/src/app/overview/overview.component.html +++ b/src/app/overview/overview.component.html @@ -275,9 +275,9 @@

diff --git a/src/app/overview/overview.component.spec.ts b/src/app/overview/overview.component.spec.ts index dc793831..253fd5ce 100644 --- a/src/app/overview/overview.component.spec.ts +++ b/src/app/overview/overview.component.spec.ts @@ -62,7 +62,7 @@ describe('OverviewComponent', () => { const tickTimeChartDebounce = 400; const params: BehaviorSubject = new BehaviorSubject({} as Params); const tmpParams = {}; - tmpParams[DimensionName.country] = 'Italy'; + tmpParams[DimensionName.country] = 'IT'; const queryParams = new BehaviorSubject(tmpParams as Params); let api: APIService; @@ -337,6 +337,7 @@ describe('OverviewComponent', () => { generatedLabel = component.generateSeriesLabel(); expect(generatedLabel.indexOf('Denmark')).toBeGreaterThan(-1); + expect(generatedLabel.indexOf('Iceland')).toBeGreaterThan(-1); nextParams['date-to'] = [today]; queryParams.next(nextParams); @@ -401,8 +402,8 @@ describe('OverviewComponent', () => { component.filterData = {}; component.filterData[DimensionName.country] = [ { - name: 'Scotland', - label: 'Scotland', + name: 'Ireland', + label: 'Ireland', valid: true } ]; @@ -453,7 +454,7 @@ describe('OverviewComponent', () => { it('should build the filters', () => { expect(Object.keys(component.filterData).length).toBeFalsy(); const ops = {}; - ops[DimensionName.country] = ['Scotland', 'Yugoslavia']; + ops[DimensionName.country] = ['IE', 'IT']; component.buildFilters(ops); fixture.detectChanges(); @@ -463,12 +464,7 @@ describe('OverviewComponent', () => { it('should build the filters (from the query parameters)', fakeAsync(() => { expect(Object.keys(component.filterData).length).toBeFalsy(); const nextParams = {}; - nextParams[DimensionName.country] = [ - 'Scotland', - 'Yugoslavia', - 'Italy', - 'Greece' - ]; + nextParams[DimensionName.country] = ['Italy', 'Greece']; queryParams.next(nextParams); fixture.detectChanges(); tick(1); diff --git a/src/app/overview/overview.component.ts b/src/app/overview/overview.component.ts index e0a552be..1916042d 100644 --- a/src/app/overview/overview.component.ts +++ b/src/app/overview/overview.component.ts @@ -31,6 +31,7 @@ import { externalLinks, facetNames, isoCountryCodes, + isoCountryCodesReversed, nonFacetFilters, portalNames, portalNamesFriendly @@ -65,7 +66,6 @@ import { NonFacetFilterNames, RequestFilter } from '../_models'; - import { APIService } from '../_services'; import { BarComponent } from '../chart'; import { SnapshotsComponent } from '../snapshots'; @@ -73,12 +73,12 @@ import { SpeechBubbleComponent } from '../speech-bubble'; import { ExportComponent } from '../export'; import { GridComponent } from '../grid'; import { GridSummaryComponent } from '../grid-summary'; -import { RenameApiFacetPipe } from '../_translate/rename-facet.pipe'; -import { CheckboxComponent } from '../checkbox/checkbox.component'; -import { IsScrollableDirective } from '../_directives/is-scrollable/is-scrollable.directive'; -import { FilterComponent } from '../filter/filter.component'; -import { CTZeroControlComponent } from '../ct-zero-control/ct-zero-control.component'; -import { ResizeComponent } from '../resize/resize.component'; +import { RenameApiFacetPipe, RenameCountryPipe } from '../_translate'; +import { CheckboxComponent } from '../checkbox'; +import { IsScrollableDirective } from '../_directives'; +import { FilterComponent } from '../filter'; +import { CTZeroControlComponent } from '../ct-zero-control'; +import { ResizeComponent } from '../resize'; @Component({ selector: 'app-overview', @@ -107,7 +107,8 @@ import { ResizeComponent } from '../resize/resize.component'; SnapshotsComponent, GridComponent, DatePipe, - RenameApiFacetPipe + RenameApiFacetPipe, + RenameCountryPipe ] }) export class OverviewComponent extends SubscriptionManager implements OnInit { @@ -134,7 +135,6 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { public NonFacetFilterNames = NonFacetFilterNames; public nonFacetFilters = nonFacetFilters; public tierPrefix = $localize`:@@tierPrefix@@:Tier `; - public isoCountryCodes = isoCountryCodes; public barChartSettings = { prefixValueAxis: '', @@ -269,12 +269,15 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { map((results) => { const qp = results[1]; const qpValArrays = {}; - Object.keys(qp).forEach((paramName: string) => { this.queryParamsRaw[paramName] = []; qpValArrays[paramName] = ( Array.isArray(qp[paramName]) ? qp[paramName] : [qp[paramName]] ).map((qpVal: string) => { + qpVal = + paramName === DimensionName.country + ? isoCountryCodes[qpVal] + : qpVal; this.queryParamsRaw[paramName].push(qpVal); return toInputSafeName(qpVal); }); @@ -293,17 +296,17 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { this.countryPageShortcutsAvailable = Object.keys(queryParams).length === 2 && - !!queryParams['country'] && - `${queryParams['type']}` === '3D' && - queryParams['type'].length === 1; + !!queryParams[DimensionName.country] && + `${queryParams[DimensionName.type]}` === '3D' && + queryParams[DimensionName.type].length === 1; if (!this.countryPageShortcutsAvailable) { this.countryPageShortcutsAvailable = - !!queryParams['country'] && - !!queryParams['metadataTier'] && - queryParams['metadataTier'].indexOf('0') === -1 && - !!queryParams['contentTier'] && - queryParams['contentTier'].indexOf('1') === -1; + !!queryParams[DimensionName.country] && + !!queryParams[DimensionName.metadataTier] && + queryParams[DimensionName.metadataTier].indexOf('0') === -1 && + !!queryParams[DimensionName.contentTier] && + queryParams[DimensionName.contentTier].indexOf('1') === -1; } // checkbox representation of (split) datasetId @@ -385,13 +388,19 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { let filterParam = Object.keys(this.queryParams) .map((key: string) => { const innerRes = []; - const values = this.queryParams[key]; + let values = this.queryParams[key]; // skip rights parameters if (key === DimensionName.rightsCategory) { return ''; } + if (key === DimensionName.country) { + values = values.map((val: string) => { + return isoCountryCodesReversed[val]; + }); + } + if (values && !Object.values(nonFacetFilters).includes(key)) { values.forEach((valPart: string) => { const portalKey = portalNames[key] ? portalNames[key] : key; @@ -462,6 +471,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { postProcessResult(): void { // initialise filterData and add checkboxes const dsd = this.dataServerData; + if (dsd?.filteringOptions) { this.buildFilters(dsd.filteringOptions); if (dsd.results?.breakdowns) { @@ -473,10 +483,15 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { } } - formatNLV(prefix: string, name: string, valid: boolean): NameLabelValid { + formatNLV( + prefix: string, + name: string, + valid: boolean, + isCountry: boolean + ): NameLabelValid { return { name: toInputSafeName(name), - label: prefix + name, + label: isCountry ? isoCountryCodesReversed[name] : prefix + name, valid: valid }; } @@ -509,7 +524,14 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { if (qpVals) { this.queryParamsRaw[facetName].forEach((val: string) => { if (!opsFromData.includes(val)) { - opsFromQP.push(this.formatNLV(prefix, val, false)); + opsFromQP.push( + this.formatNLV( + prefix, + val, + false, + facetName === DimensionName.country + ) + ); } }); } @@ -524,7 +546,12 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { ); }) .map((op: string) => { - return this.formatNLV(prefix, op, true); + return this.formatNLV( + prefix, + op, + true, + facetName === DimensionName.country + ); }) .concat(opsFromQP); @@ -657,6 +684,10 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { } else { const innerRes = []; this.queryParamsRaw[key].forEach((valPart: string) => { + valPart = + key === DimensionName.country + ? isoCountryCodesReversed[valPart] + : valPart; innerRes.push(valPart); }); const friendlyKey = portalNamesFriendly[key]; @@ -682,6 +713,14 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { /[:".,\s()[]{}]/g, '' ); + + if (this.form.value.facetParameter === DimensionName.country) { + nvs = nvs.map((nvp: NamesValuePercent) => { + nvp.name = isoCountryCodesReversed[nvp.name]; + return nvp; + }); + } + const rightsInfo = this.form.value.rightsCategory; const rightsFilters = Object.keys(rightsInfo).filter((key: string) => { return rightsInfo[key]; @@ -1070,11 +1109,15 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { updatePageUrl(skipLoad = false): void { const qp = {}; this.getEnabledFilterNames().forEach((filterName: string) => { - const filterVals = this.getSetCheckboxValues(filterName).map( - (filterVal: string) => { + const filterVals = this.getSetCheckboxValues(filterName) + .map((filterVal: string) => { return fromInputSafeName(filterVal); - } - ); + }) + .map((filterVal: string) => { + return filterName === DimensionName.country + ? isoCountryCodesReversed[filterVal] + : filterVal; + }); if (filterVals.length > 0) { qp[filterName] = filterVals; @@ -1106,8 +1149,19 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { if (skipLoad) { this.queryParams = qp; } + + const disabledParams = this.disabledParams; + + if (disabledParams[DimensionName.country]) { + disabledParams[DimensionName.country] = disabledParams[ + DimensionName.country + ].map((val: string) => { + return isoCountryCodesReversed[val]; + }); + } + this.router.navigate([`data/${this.form.value['facetParameter']}`], { - queryParams: { ...qp, ...this.disabledParams } + queryParams: { ...qp, ...disabledParams } }); } diff --git a/src/scss/_countries.scss b/src/scss/_countries.scss index b1e86d70..5ca4419f 100644 --- a/src/scss/_countries.scss +++ b/src/scss/_countries.scss @@ -103,8 +103,6 @@ $flag-orb-dimension: 1.6rem; display: inline-block; width: $flag-orb-dimension; height: $flag-orb-dimension; - min-width: $flag-orb-dimension; - min-height: $flag-orb-dimension; } .flag-orb.default::after { @@ -436,6 +434,6 @@ $flag-orb-dimension: 1.6rem; } // USA -.USA::after { +.US::after { background-image: url("//upload.wikimedia.org/wikipedia/commons/a/a9/Flag_of_the_United_States_%28DoS_ECA_Color_Standard%29.svg"); } diff --git a/test-data/static-country-data.ts b/test-data/static-country-data.ts index c2f63aa8..b6536a54 100644 --- a/test-data/static-country-data.ts +++ b/test-data/static-country-data.ts @@ -60,37 +60,31 @@ const reduceTargetMetaData = ( }; export const targetData = [].concat( - ...memberStateCountryCodes - .map((countryCode: string) => { - return isoCountryCodesReversed[countryCode]; - }) - .map((country: string, index: number) => { - const resLabel = [2025, 2030].map((year: number) => { - // make values larger for later targets - let value = year * (index + 1); - - return Object.keys(TargetFieldName).map( - (targetType: TargetFieldName) => { - // make subtarget values smaller than total - value -= 123; - const fieldName = TargetFieldName[targetType]; - return { - country, - targetType: fieldName, - targetYear: year, - isInterim: year === 2025, - value: - fieldName === TargetFieldName.TOTAL - ? value * (year === 2025 ? 9 : 12) - : year === 2025 - ? Math.floor(value * 0.7) - : value - }; - } - ); + ...memberStateCountryCodes.map((country: string, index: number) => { + const resLabel = [2025, 2030].map((year: number) => { + // make values larger for later targets + let value = year * (index + 1); + + return Object.keys(TargetFieldName).map((targetType: TargetFieldName) => { + // make subtarget values smaller than total + value -= 123; + const fieldName = TargetFieldName[targetType]; + return { + country, + targetType: fieldName, + targetYear: year, + isInterim: year === 2025, + value: + fieldName === TargetFieldName.TOTAL + ? value * (year === 2025 ? 9 : 12) + : year === 2025 + ? Math.floor(value * 0.7) + : value + }; }); - return [].concat(...resLabel); - }) + }); + return [].concat(...resLabel); + }) ); const fnCountryTargetData = (): Array => { @@ -98,48 +92,43 @@ const fnCountryTargetData = (): Array => { const res = []; const tgtDataRef = reduceTargetMetaData(targetData); - memberStateCountryCodes - .map((countryCode: string) => { - return isoCountryCodesReversed[countryCode]; - }) - .forEach((country: string) => { - const countryName = country; - const countryCode = isoCountryCodes[country]; - const countryRandom = Math.max(1.5, (countryName.length * 12) % 5); - const baseValue3D = - tgtDataRef[country][TargetFieldName.THREE_D][1].value / countryRandom; - const basevalueHQ = - tgtDataRef[country][TargetFieldName.HQ][1].value / countryRandom; - - let value3D = baseValue3D * 1.2; - let valueHQ = basevalueHQ * 0.9; - - dateTicks.forEach((dateTick: string, dateTickIndex: number) => { - const random1 = - (value3D % (numDateTicks + 1)) - (value3D % (numDateTicks / 2)); - - value3D -= random1; - valueHQ += random1; - - const random2 = - (valueHQ % (numDateTicks + 1)) + (valueHQ % (numDateTicks / 2)); - - value3D -= 0.8 * (random2 % random1); - valueHQ -= 1 * (random2 * random1 * 5); - - const resultItem = { - country: countryName, - date: dateTicks[dateTicks.length - (dateTickIndex + 1)], - three_d: isNaN(value3D) ? 0 : Math.floor(value3D), - high_quality: isNaN(valueHQ) ? 0 : Math.floor(valueHQ), - total: 0 - }; - - resultItem.total = - Math.max(resultItem.three_d, resultItem.high_quality) * 12; - res.push(resultItem); - }); + memberStateCountryCodes.forEach((countryCode: string) => { + const countryName = isoCountryCodesReversed[countryCode]; + const countryRandom = Math.max(1.5, (countryName.length * 12) % 5); + const baseValue3D = + tgtDataRef[countryCode][TargetFieldName.THREE_D][1].value / countryRandom; + const basevalueHQ = + tgtDataRef[countryCode][TargetFieldName.HQ][1].value / countryRandom; + + let value3D = baseValue3D * 1.2; + let valueHQ = basevalueHQ * 0.9; + + dateTicks.forEach((dateTick: string, dateTickIndex: number) => { + const random1 = + (value3D % (numDateTicks + 1)) - (value3D % (numDateTicks / 2)); + + value3D -= random1; + valueHQ += random1; + + const random2 = + (valueHQ % (numDateTicks + 1)) + (valueHQ % (numDateTicks / 2)); + + value3D -= 0.8 * (random2 % random1); + valueHQ -= 1 * (random2 * random1 * 5); + + const resultItem = { + country: countryCode, + date: dateTicks[dateTicks.length - (dateTickIndex + 1)], + three_d: isNaN(value3D) ? 0 : Math.floor(value3D), + high_quality: isNaN(valueHQ) ? 0 : Math.floor(valueHQ), + total: 0 + }; + + resultItem.total = + Math.max(resultItem.three_d, resultItem.high_quality) * 12; + res.push(resultItem); }); + }); return res.reverse(); }; export const countryTargetData = fnCountryTargetData(); diff --git a/test-data/static-data.ts b/test-data/static-data.ts index e4baed1e..9efac0a8 100644 --- a/test-data/static-data.ts +++ b/test-data/static-data.ts @@ -1,3 +1,5 @@ +import { isoCountryCodes } from '../src/app/_data'; + export const STATIC_RIGHTS_CATEGORY_VALUES = [ 'CC0', 'CC BY', @@ -699,4 +701,9 @@ export const STATIC_COUNTRIES = [ name: 'Ukraine', dataProviders: [64] } -]; +].map((item) => { + return { + name: isoCountryCodes[item.name], + dataProviders: item.dataProviders + }; +}); From 13d770118124b740c06de0a8ade683570420038a Mon Sep 17 00:00:00 2001 From: andyjmaclean Date: Tue, 20 Aug 2024 18:21:00 +0200 Subject: [PATCH 2/5] MET-6063 Use Country Codes / Tidy --- src/app/landing/landing.component.scss | 2 -- src/app/overview/overview.component.html | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/landing/landing.component.scss b/src/app/landing/landing.component.scss index 4fd1bb96..b4047963 100644 --- a/src/app/landing/landing.component.scss +++ b/src/app/landing/landing.component.scss @@ -166,8 +166,6 @@ $card-header-height: $card-header-pixels-line-height + top: 2px; height: 1em; width: 1em; - min-height: 1em; - min-width: 1em; } a:hover .flag-orb { diff --git a/src/app/overview/overview.component.html b/src/app/overview/overview.component.html index 9a47cedc..b9ec3ba6 100644 --- a/src/app/overview/overview.component.html +++ b/src/app/overview/overview.component.html @@ -275,7 +275,11 @@

@@ -567,7 +567,7 @@

- {{ country }} + {{ country | renameCountry }} data by content type @@ -607,7 +607,7 @@

- {{ country }} + {{ country | renameCountry }} data by rights category
- {{ country }} + {{ country | renameCountry }} data by data provider
@@ -676,7 +676,7 @@

- {{ country }} + {{ country | renameCountry }} data by provider { + const countryName = isoCountryCodesReversed[this.country]; const value = this.latestCountryData[valName]; const fmtName = this.renameTargetTypePipe.transform(valName); const fmtValue = fmtNum(value, '1.0-2'); @@ -363,10 +370,10 @@ export class CountryComponent extends SubscriptionManager { this.tooltipsTotal[ valName - ] = `${this.country} has ${fmtValue}${typeItems} ${itemPluralString}`; + ] = `${countryName} has ${fmtValue}${typeItems} ${itemPluralString}`; this.tooltipsPercent[valName] = - fmtNum(percent) + `% of the data from ${this.country} is ${fmtName}`; + fmtNum(percent) + `% of the data from ${countryName} is ${fmtName}`; // percentages this.latestCountryPercentages[valName] = percent; diff --git a/src/scss/_countries.scss b/src/scss/_countries.scss index 5ca4419f..14162dd0 100644 --- a/src/scss/_countries.scss +++ b/src/scss/_countries.scss @@ -233,7 +233,7 @@ $flag-orb-dimension: 1.6rem; background-image: url("//upload.wikimedia.org/wikipedia/commons/d/d4/Flag_of_Cyprus.svg"); } -// Czech +// Czechia .CZ::after { background-image: url("//upload.wikimedia.org/wikipedia/commons/c/cb/Flag_of_the_Czech_Republic.svg"); } diff --git a/test-data/static-data.ts b/test-data/static-data.ts index 9efac0a8..916acee7 100644 --- a/test-data/static-data.ts +++ b/test-data/static-data.ts @@ -582,7 +582,7 @@ export const STATIC_COUNTRIES = [ dataProviders: [44, 45, 46, 47, 48, 49, 50, 51, 52] }, { - name: 'Czech Republic', + name: 'Czechia', dataProviders: [38, 39, 40, 41, 42, 43] }, { From c75edb12343917642ec03871658840186263922b Mon Sep 17 00:00:00 2001 From: andyjmaclean Date: Wed, 21 Aug 2024 16:08:12 +0200 Subject: [PATCH 4/5] MET-6063 Variable Renaming --- cypress/e2e/ct-zero.cy.ts | 32 ++++++++++++++++++++++---- src/app/overview/overview.component.ts | 31 ++++++++++++++----------- 2 files changed, 44 insertions(+), 19 deletions(-) diff --git a/cypress/e2e/ct-zero.cy.ts b/cypress/e2e/ct-zero.cy.ts index cd20a83b..fef716ba 100644 --- a/cypress/e2e/ct-zero.cy.ts +++ b/cypress/e2e/ct-zero.cy.ts @@ -69,6 +69,11 @@ context('Statistics Dashboard', () => { 'View by provider' ]; + const targetLinkTexts = [ + 'View (3D data) by content tier', + 'View (HQ data) by type' + ]; + it('should (conditionally) show the control zero control', () => { cy.visit(urlDefault); cy.wait(100); @@ -123,6 +128,28 @@ context('Statistics Dashboard', () => { }); }); + it('Should maintain the content tier zero control setting', () => { + const country = 'Belgium'; + const url = `/country/${country}`; + + cy.visit(url); + cy.wait(1000); + cy.get(selCtrlCTZero).click(force); + cy.wait(1000); + cy.contains(targetLinkTexts[1]).click(force); + + cy.wait(1000); + confirmCTZeroSetting(false); + cy.go('back'); + cy.wait(1000); + confirmCTZeroSetting(true); + + cy.contains(linkTexts[0]).click(force); + confirmCTZeroSetting(true); + cy.go('back'); + confirmCTZeroSetting(true); + }); + it('Should (conditionally) reset the content tier zero control', () => { const country = 'Belgium'; const url = `/country/${country}`; @@ -130,11 +157,6 @@ context('Statistics Dashboard', () => { const valPercentCTZero = '11.6%'; const selPercent = '.total.percent-value'; - const targetLinkTexts = [ - 'View (3D data) by content tier', - 'View (HQ data) by type' - ]; - // go to Belgium cy.visit(url); cy.wait(1000); diff --git a/src/app/overview/overview.component.ts b/src/app/overview/overview.component.ts index 1916042d..4eff6d97 100644 --- a/src/app/overview/overview.component.ts +++ b/src/app/overview/overview.component.ts @@ -273,13 +273,13 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { this.queryParamsRaw[paramName] = []; qpValArrays[paramName] = ( Array.isArray(qp[paramName]) ? qp[paramName] : [qp[paramName]] - ).map((qpVal: string) => { - qpVal = + ).map((qpValue: string) => { + qpValue = paramName === DimensionName.country - ? isoCountryCodes[qpVal] - : qpVal; - this.queryParamsRaw[paramName].push(qpVal); - return toInputSafeName(qpVal); + ? isoCountryCodes[qpValue] + : qpValue; + this.queryParamsRaw[paramName].push(qpValue); + return toInputSafeName(qpValue); }); }); return { @@ -483,7 +483,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { } } - formatNLV( + formatNameLabelValid( prefix: string, name: string, valid: boolean, @@ -525,7 +525,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { this.queryParamsRaw[facetName].forEach((val: string) => { if (!opsFromData.includes(val)) { opsFromQP.push( - this.formatNLV( + this.formatNameLabelValid( prefix, val, false, @@ -546,7 +546,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { ); }) .map((op: string) => { - return this.formatNLV( + return this.formatNameLabelValid( prefix, op, true, @@ -706,7 +706,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { storeSeries( applied: boolean, saved: boolean, - nvs: Array, + seriesValues: Array, seriesTotal: number ): void { const name = JSON.stringify(this.queryParams).replace( @@ -715,7 +715,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { ); if (this.form.value.facetParameter === DimensionName.country) { - nvs = nvs.map((nvp: NamesValuePercent) => { + seriesValues = seriesValues.map((nvp: NamesValuePercent) => { nvp.name = isoCountryCodesReversed[nvp.name]; return nvp; }); @@ -728,11 +728,14 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { this.snapshots.snap(this.form.value.facetParameter, name, { name: name, label: this.generateSeriesLabel(), - data: this.iHashNumberFromNVPs(nvs), - dataPercent: this.iHashNumberFromNVPs(nvs, true), + data: this.iHashNumberFromNVPs(seriesValues), + dataPercent: this.iHashNumberFromNVPs(seriesValues, true), orderOriginal: [], orderPreferred: [], - portalUrls: this.portalUrlsFromNVPs(this.form.value.facetParameter, nvs), + portalUrls: this.portalUrlsFromNVPs( + this.form.value.facetParameter, + seriesValues + ), rightsFilters: rightsFilters, applied: applied, pinIndex: 0, From cc33df8648b8badbfc5056f0178f47c73b15f361 Mon Sep 17 00:00:00 2001 From: andyjmaclean Date: Wed, 21 Aug 2024 19:29:14 +0200 Subject: [PATCH 5/5] MET-6063 Variable rename --- src/app/overview/overview.component.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/overview/overview.component.ts b/src/app/overview/overview.component.ts index 4eff6d97..9608f333 100644 --- a/src/app/overview/overview.component.ts +++ b/src/app/overview/overview.component.ts @@ -518,13 +518,13 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { // calculate filter options from the data and query params const opsFromData = ops[facetName]; - const opsFromQP: Array = []; + const opsFromParams: Array = []; const qpVals = this.queryParams[facetName]; if (qpVals) { this.queryParamsRaw[facetName].forEach((val: string) => { if (!opsFromData.includes(val)) { - opsFromQP.push( + opsFromParams.push( this.formatNameLabelValid( prefix, val, @@ -553,7 +553,7 @@ export class OverviewComponent extends SubscriptionManager implements OnInit { facetName === DimensionName.country ); }) - .concat(opsFromQP); + .concat(opsFromParams); allSortedOps.sort((op1: NameLabel, op2: NameLabel) => { // ensure that selected filters appear...