Commit 7504d412 authored by frank.vanderstelt's avatar frank.vanderstelt
Browse files

Syncing with repository at SMHI

parent 5252de75
# Raven dissemination gui
## Sketches
Must have
https://xd.adobe.com/view/6302e59d-9e5c-4f8c-8516-5b27f835f46a-3651/
Should have
https://xd.adobe.com/view/893696e2-8615-45aa-81dc-e733a0befaa8-dc65/
## Get started
The project is bootstrapped with "Create React App".
Run in a local environment:
> npm start
## ESLint & Prettier
ESLint is used for codequality (eg no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors ...)
Prettier is used for formatting (eg max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style ...)
### Setup for VS Code
Install the following plugins:
- ESLint
- Prettier - Code formatter
(Not mandatory) Enable **Format on save**:
> Text Editor -> Formatting -> Format on save
or:
```
{
...
"settings": {
...
"editor.formatOnSave": true
}
}
```
## Language support.
I18next is used for the application's language support.
https://www.i18next.com/overview/getting-started
For each language application supported, there is a translation file.
The path to the translation file is raven-dissemination-gui/source/src/assets/locales/ba/translation.json where "ba" is the country's locale (in this case Bosnia).
Adding a new language.
1) Create a new translation json file. (Make a copy of an old one and replace the language)
2 Import the translation file into i18nextConf.js
Example for Bosnia
``` import translationBa from './assets/locales/ba/translation.json'; ```
(Replace ba with the country locale)
3 Add country locale to array
``` const availableLanguages ​​= ['ba', 'en', 'hr', 'rs']; ```
4 Add the country's translation file as a property to the object resources
```
const resources = {
ba: {
translation: translationBa,
},
one: {
translation: translationEN,
},
hr: {
translation: translationHR,
},
rs: {
translation: translationRS,
},
};
```
5) See the language section in the config description below to add the config to the language control.
## Config
The application has a config file that contains specific data for the current country. For example.
```
"Norway": {
"position": [
64.55,
17.85
],
"zoom": 5.5,
"dateFormat": "DD.MM.YYYY HH:mm",
"timezone": "Europe/Oslo",
"defaultLanguage": "en",
"languages": {
"en": {
"label": "English",
"dir": "ltr"
},
"ba": {
"label": "Bosanski",
"dir": "ltr"
},
"hr": {
"label": "Hrvatski",
"dir": "ltr"
},
"rs": {
"label": "Српски",
"dir": "ltr"
}
},
},
"aqi": {
"no2": {
"good": {
"min": 0,
"max": 40
},
"fair": {
"min": 41,
"max": 90
},
"moderate": {
"min": 91,
"max": 120
},
"poor": {
"min": 121,
"max": 230
},
"veryPoor": {
"min": 231,
"max": 340
},
"extremelyPoor": {
"min": 341
}
},
"pm10": {
"good": {
"min": 0,
"max": 20
},
"fair": {
"min": 21,
"max": 40
},
"moderate": {
"min": 41,
"max": 50
},
"poor": {
"min": 51,
"max": 100
},
"veryPoor": {
"min": 101,
"max": 150
},
"extremelyPoor": {
"min": 151
}
},
"pm25": {
"good": {
"min": 0,
"max": 10
},
"fair": {
"min": 11,
"max": 20
},
"moderate": {
"min": 21,
"max": 25
},
"poor": {
"min": 26,
"max": 50
},
"veryPoor": {
"min": 51,
"max": 75
},
"extremelyPoor": {
"min": 76
}
},
"o3": {
"good": {
"min": 0,
"max": 50
},
"fair": {
"min": 51,
"max": 100
},
"moderate": {
"min": 101,
"max": 130
},
"poor": {
"min": 131,
"max": 240
},
"veryPoor": {
"min": 241,
"max": 380
},
"extremelyPoor": {
"min": 381
}
},
"so2": {
"good": {
"min": 0,
"max": 100
},
"fair": {
"min": 101,
"max": 200
},
"moderate": {
"min": 201,
"max": 350
},
"poor": {
"min": 351,
"max": 500
},
"veryPoor": {
"min": 501,
"max": 750
},
"extremelyPoor": {
"min": 751
}
}
}
}
```
The config file is located here: raven-dissemination-gui/source/src/config.json
## Explanation of the config file.
### Map properties
The following properties are details for the map taken from the following web page (Replace only the country in the url to the current country)
https://en.wikipedia.org/wiki/Module:Location_map/data/Norway
The zoom level may need to be changed
"position": [
64.55,
17.85
],
"zoom": 5.5,
### Date properties
Date format: the most common date format for current country
https://momentjscom.readthedocs.io/en/latest/moment/04-displaying/01-format/
Timezone: the timezone for current country
https://gist.github.com/diogocapela/12c6617fc87607d11fd62d2a4f42b02a
"dateFormat": "DD.MM.YYYY HH:mm",
"timezone": "Europe/Oslo",
### Language properties
``` "defaultLanguage": "ba", ``` The language initially displayed. (Country locale, in this case Bosnia)
```
"languages": {
"en": {
"label": "English",
"dir": "ltr"
},
"ba": {
"label": "Bosanski",
"dir": "ltr"
},
"hr": {
"label": "Hrvatski",
"dir": "ltr"
},
"rs": {
"label": "Српски",
"dir": "ltr"
}
}
```
label is the text displayed in the language control
dir is whether the language should be read from left to right or right to left.
## AQI threshold properties
Current country's AQI thresholds
```
"aqi": {
"no2": {
"good": {
"min": 0,
"max": 40
},
"fair": {
"min": 41,
"max": 90
},
"moderate": {
"min": 91,
"max": 120
},
"poor": {
"min": 121,
"max": 230
},
"veryPoor": {
"min": 231,
"max": 340
},
"extremelyPoor": {
"min": 341
}
},
"pm10": {
"good": {
"min": 0,
"max": 20
},
"fair": {
"min": 21,
"max": 40
},
"moderate": {
"min": 41,
"max": 50
},
"poor": {
"min": 51,
"max": 100
},
"veryPoor": {
"min": 101,
"max": 150
},
"extremelyPoor": {
"min": 151
}
},
"pm25": {
"good": {
"min": 0,
"max": 10
},
"fair": {
"min": 11,
"max": 20
},
"moderate": {
"min": 21,
"max": 25
},
"poor": {
"min": 26,
"max": 50
},
"veryPoor": {
"min": 51,
"max": 75
},
"extremelyPoor": {
"min": 76
}
},
"o3": {
"good": {
"min": 0,
"max": 50
},
"fair": {
"min": 51,
"max": 100
},
"moderate": {
"min": 101,
"max": 130
},
"poor": {
"min": 131,
"max": 240
},
"veryPoor": {
"min": 241,
"max": 380
},
"extremelyPoor": {
"min": 381
}
},
"so2": {
"good": {
"min": 0,
"max": 100
},
"fair": {
"min": 101,
"max": 200
},
"moderate": {
"min": 201,
"max": 350
},
"poor": {
"min": 351,
"max": 500
},
"veryPoor": {
"min": 501,
"max": 750
},
"extremelyPoor": {
"min": 751
}
}
}
```
......@@ -21,3 +21,5 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/target/
\ No newline at end of file
@smhi:registry=https://aurora-npm.smhi.se/
\ No newline at end of file
<
......@@ -2925,11 +2925,6 @@
"resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
"integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
},
"async-limiter": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
"integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
......@@ -3956,9 +3951,9 @@
}
},
"css-what": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.0.tgz",
"integrity": "sha512-qxyKHQvgKwzwDWC/rGbT821eJalfupxYW2qbSJSAtdSTimsr/MlaGONoNLllaUPZWf8QnbcKM/kPVYUQuEKAFA==",
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
"integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
"dev": true
},
"dom-serializer": {
......@@ -5240,11 +5235,18 @@
}
},
"domhandler": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
"integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
"integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
"requires": {
"domelementtype": "1"
"domelementtype": "^2.2.0"
},
"dependencies": {
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
}
}
},
"domutils": {
......@@ -7525,22 +7527,40 @@
}
},
"htmlparser2": {
"version": "3.10.1",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
"integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
"requires": {
"domelementtype": "^1.3.1",
"domhandler": "^2.3.0",
"domutils": "^1.5.1",
"entities": "^1.1.1",
"inherits": "^2.0.1",
"readable-stream": "^3.1.1"
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
"integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.0.0",
"domutils": "^2.5.2",
"entities": "^2.0.0"
},
"dependencies": {
"entities": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
"integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.2.0",
"entities": "^2.0.0"
}
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
},
"domutils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
"integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
"requires": {
"dom-serializer": "^1.0.1",
"domelementtype": "^2.2.0",
"domhandler": "^4.2.0"
}
}
}
},
......@@ -9979,6 +9999,19 @@
"minimist": "^1.2.5"
}
},
"moment": {
"version": "2.29.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
"integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
},
"moment-timezone": {
"version": "0.5.33",
"resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.33.tgz",
"integrity": "sha512-PTc2vcT8K9J5/9rDEPe5czSIKgLoGsH8UNpA4qZTVw0Vd/Uz19geE9abbIOQKaAQFcnQ3v5YEXrbSc5BpshH+w==",
"requires": {
"moment": ">= 2.9.0"
}
},
"moo": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.1.tgz",
......@@ -10906,9 +10939,9 @@
"integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
},
"postcss": {
"version": "7.0.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
"integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
"version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"requires": {
"chalk": "^2.4.2",
"source-map": "^0.6.1",
......@@ -12856,15 +12889,15 @@
"integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
},
"renderkid": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.5.tgz",
"integrity": "sha512-ccqoLg+HLOHq1vdfYNm4TBeaCDIi1FLt3wGojTDSvdewUv65oTmI3cnT2E4hRjl1gzKZIPK+KZrXzlUYKnR+vQ==",
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
"integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
"requires": {
"css-select": "^2.0.2",
"dom-converter": "^0.2",
"htmlparser2": "^3.10.1",
"lodash": "^4.17.20",
"strip-ansi": "^3.0.0"
"css-select": "^4.1.3",
"dom-converter": "^0.2.0",
"htmlparser2": "^6.1.0",
"lodash": "^4.17.21",
"strip-ansi": "^3.0.1"
},
"dependencies": {
"ansi-regex": {
......@@ -12872,6 +12905,56 @@
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
},
"css-select": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
"integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
"requires": {
"boolbase": "^1.0.0",
"css-what": "^5.0.0",
"domhandler": "^4.2.0",
"domutils": "^2.6.0",
"nth-check": "^2.0.0"
}
},
"css-what": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
"integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg=="
},
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.2.0",
"entities": "^2.0.0"
}
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A=="
},
"domutils": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
"integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
"requires": {
"dom-serializer": "^1.0.1",
"domelementtype": "^2.2.0",
"domhandler": "^4.2.0"
}
},
"nth-check": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
"integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
"requires": {
"boolbase": "^1.0.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
......@@ -12947,9 +13030,9 @@