Updated countries list dependency

Also clarified Readme docs & renamed demo folder

README.md

@@ -7,9 +7,9 @@
 
 ![screenshot](https://raw.githubusercontent.com/jagomf/countries-map/master/screenshot.png)
 
-## This package does not depend on 3rd parties
+## This package does not depend on 3rd parties' maps
 
-Starting with v4, this package **does NOT depend on Google GeoCharts**.
+Starting with v4, this package **does NOT depend on Google GeoCharts** but uses its own embedded map.
 
 If you want to use v3 (which depends on Google GeoCharts), please check [ReadMe v3](https://github.com/jagomf/countries-map/blob/v3/README.md).
 
@@ -71,13 +71,13 @@ Element `<countries-map>` accepts the following attributes/inputs:
 
 Attribute | Type | Default | Description
 --- | --- | --- | ---
-`data` | `CountriesData` | - | Describes list of countries and their value and extra data (if any). See description for interface [`CountriesData`](#interface-countriesdata).
+`data` | `CountriesData` | Required | Describes list of countries and their value and extra data (if any). See below description for interface [`CountriesData`](#interface-countriesdata).
 `countryLabel` | `string` | `'Country'` | Caption label for country name.
 `valueLabel` | `string` | `'Value'` | Caption label for country's value.
 `showCaption` | `boolean` | `true` | Shows/hides caption.
 `captionBelow` | `boolean` | `true` | Places caption below or above the map.
-`minValue` | `number` | - | If stated, sets the base to be used as lowest value expected in the color scale (values below `minValue` will have same color).
-`maxValue` | `number` | - | If stated, sets the base to be used as highest value expected in the color scale (values above `maxValue` will have same color).
+`minValue` | `number` | Optional | If stated, sets the base to be used as lowest value expected in the color scale (values below `minValue` will have same color).
+`maxValue` | `number` | Optional | If stated, sets the base to be used as highest value expected in the color scale (values above `maxValue` will have same color).
 `minColor` | `string` | `'white'` | Hex or named color representing the lowest value.
 `maxColor` | `string` | `'red'` | Hex or named color representing the highest value.
 `noDataColor` | `string` | `'#CFCFCF'` | Hex or named color for countries not included in data list.
@@ -220,12 +220,18 @@ These are the classes you can apply styles to, hierarchically displayed, and ass
       * `cm-extended-label`: key of the single extra item
       * `cm-extended-value`: value of the single extra item
 
+## Countries
+
+Current valid country codes are widely-recognized sovereign nations plus some other autonomous realms. Check the currently valid list at [`@jagomf/countrieslist`](https://github.com/jagomf/countrieslist).
+
 ## Projects
 
 Highlighted projects currently using countries-map:
 
 * [Deflaggr](https://deflaggr.com): Collect world flags
 
+Contact us if you want to get highlighted.
+
 ## License
 
 [MIT](https://github.com/jagomf/countries-map/blob/master/LICENSE)

dist/countries-map/README.md

@@ -7,9 +7,9 @@
 
 ![screenshot](https://raw.githubusercontent.com/jagomf/countries-map/master/screenshot.png)
 
-## This package does not depend on 3rd parties
+## This package does not depend on 3rd parties' maps
 
-Starting with v4, this package **does NOT depend on Google GeoCharts**.
+Starting with v4, this package **does NOT depend on Google GeoCharts** but uses its own embedded map.
 
 If you want to use v3 (which depends on Google GeoCharts), please check [ReadMe v3](https://github.com/jagomf/countries-map/blob/v3/README.md).
 
@@ -71,13 +71,13 @@ Element `<countries-map>` accepts the following attributes/inputs:
 
 Attribute | Type | Default | Description
 --- | --- | --- | ---
-`data` | `CountriesData` | - | Describes list of countries and their value and extra data (if any). See description for interface [`CountriesData`](#interface-countriesdata).
+`data` | `CountriesData` | Required | Describes list of countries and their value and extra data (if any). See below description for interface [`CountriesData`](#interface-countriesdata).
 `countryLabel` | `string` | `'Country'` | Caption label for country name.
 `valueLabel` | `string` | `'Value'` | Caption label for country's value.
 `showCaption` | `boolean` | `true` | Shows/hides caption.
 `captionBelow` | `boolean` | `true` | Places caption below or above the map.
-`minValue` | `number` | - | If stated, sets the base to be used as lowest value expected in the color scale (values below `minValue` will have same color).
-`maxValue` | `number` | - | If stated, sets the base to be used as highest value expected in the color scale (values above `maxValue` will have same color).
+`minValue` | `number` | Optional | If stated, sets the base to be used as lowest value expected in the color scale (values below `minValue` will have same color).
+`maxValue` | `number` | Optional | If stated, sets the base to be used as highest value expected in the color scale (values above `maxValue` will have same color).
 `minColor` | `string` | `'white'` | Hex or named color representing the lowest value.
 `maxColor` | `string` | `'red'` | Hex or named color representing the highest value.
 `noDataColor` | `string` | `'#CFCFCF'` | Hex or named color for countries not included in data list.
@@ -220,12 +220,18 @@ These are the classes you can apply styles to, hierarchically displayed, and ass
       * `cm-extended-label`: key of the single extra item
       * `cm-extended-value`: value of the single extra item
 
+## Countries
+
+Current valid country codes are widely-recognized sovereign nations plus some other autonomous realms. Check the currently valid list at [`@jagomf/countrieslist`](https://github.com/jagomf/countrieslist).
+
 ## Projects
 
 Highlighted projects currently using countries-map:
 
 * [Deflaggr](https://deflaggr.com): Collect world flags
 
+Contact us if you want to get highlighted.
+
 ## License
 
 [MIT](https://github.com/jagomf/countries-map/blob/master/LICENSE)

dist/countries-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "countries-map",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "World countries datamaps component for Angular",
   "license": "MIT",
   "author": "Jago MF <[email protected]>",
@@ -20,7 +20,7 @@
     "@angular/core": "^14.0.0"
   },
   "dependencies": {
-    "@jagomf/countrieslist": "^2.1.0",
+    "@jagomf/countrieslist": "^3.0.0",
     "chroma-js": "^2.1.0",
     "tslib": "^2.0.0"
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "countries-map-dev",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "Builder and demo runner for countries-map",
   "license": "MIT",
   "author": "Jago MF <[email protected]>",
@@ -27,7 +27,7 @@
     "@angular/core": "^14.3.0",
     "@angular/platform-browser": "^14.3.0",
     "@angular/platform-browser-dynamic": "^14.3.0",
-    "@jagomf/countrieslist": "^2.1.0",
+    "@jagomf/countrieslist": "^3.0.0",
     "chroma-js": "^2.1.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.6.2",

projects/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "countries-map",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "World countries datamaps component for Angular",
   "license": "MIT",
   "author": "Jago MF <[email protected]>",
@@ -20,7 +20,7 @@
     "@angular/core": "^14.0.0"
   },
   "dependencies": {
-    "@jagomf/countrieslist": "^2.1.0",
+    "@jagomf/countrieslist": "^3.0.0",
     "chroma-js": "^2.1.0",
     "tslib": "^2.0.0"
   },

projects/lib/src/lib/countries-map.component.ts

@@ -106,11 +106,11 @@ export class CountriesMapComponent implements AfterViewInit, OnChanges {
       if (this.data) {
         // get highest value in range
         const maxVal = exists(this.maxValue) ? this.maxValue : Object.values(this.data).reduce(
-          (acc, curr) => countryNum(curr) > acc || acc === null? countryNum(curr) : acc, null as number
+          (acc, curr) => countryNum(curr) > acc || acc === null ? countryNum(curr) : acc, null as number
         );
         // get lowest value in range
         const minVal = exists(this.minValue) ? this.minValue : Object.values(this.data).reduce(
-          (acc, curr) => countryNum(curr) < acc || acc === null? countryNum(curr) : acc, null as number
+          (acc, curr) => countryNum(curr) < acc || acc === null ? countryNum(curr) : acc, null as number
         );
 
         // map values in range to colors

src/app/demo.component.html → src/demo/demo.component.html

@@ -14,6 +14,7 @@ <h2>Map with data</h2>
     (chartReady)="mapReady()"
     [showCaption]="true"
     [captionBelow]="false">
+    <!-- Caption intentionally left above the map for demo so that it is clearly seen -->
   </countries-map>
 </div>
 <ng-template #errorOnLoad>

src/main.ts

@@ -1,6 +1,6 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { DemoModule } from './app/demo.module';
+import { DemoModule } from './demo/demo.module';
 
 platformBrowserDynamic().bootstrapModule(DemoModule)
   .catch(err => console.error(err));