117 categorical style

CHANGELOG.md

@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Added
+- new color style type 'intervals' [117](https://github.com/openkfw/Oscar/pull/120)
 
 ### Changed
 

api/package.json

@@ -22,7 +22,9 @@
     "mongoose": "^5.11.11",
     "morgan": "^1.9.0",
     "openapi-validator-middleware": "^3.1.0",
-    "winston": "^3.2.1"
+    "underscore": "^1.12.1",
+    "winston": "^3.2.1",
+    "ws": "^7.4.6"
   },
   "engines": {
     "node": ">=8.10.0"

doc/data-structures/config-files.md

@@ -171,12 +171,20 @@ Style and legend values are specific for each type or geographical data as well
 For style, on the lowest level, the color object is defined in following structure:
 
 ```
-type: 'color'/'colormap'
+type: 'color'/'colormap/intervals'
 value:
 ```
 
 The application accepts types: 'color', which is basically string with color in any css accepted format (usually color name or rgba value) and 'colormap' which has fixed list of available maps: ['blue', 'green', 'red', 'hot'].
 
+ìntervals`: Also new type is introduced for data which can be ordered and compared. The 'value' is array of objects with three necessary values:
+```
+min: min value, this value IS NOT included
+max: max value, this value IS included
+color: string with color in any css accepted format (usually color name or rgba value)
+```
+If min value is omitted, all values less than max value are considered in this interval. Likewise, if max value is omitted, all values more than min value are considered in this interval.
+
 ##### regions layer with attribute data in categories
 
 In case the geographical layout of data is in regions (country is divided into areas and there is value for each area) and there is fixed set of available values for used attribute, the style is set with color for each value. 'fillColor' attribute has the values as keys. Each of them has standard color structure.  

doc/data-structures/in-database.md

@@ -78,8 +78,8 @@ attributeDescription:
 featureId: property name in geojson for geographical information
 style:
   fillColor:
-    type: type of color information, valid values: 'color', 'colormap'
-    value: string with color in one of standard formats or name of predefined colormap
+    type: type of color information, valid values: 'color', 'colormap', 'intervals'
+    value: string with color in one of standard formats or name of predefined colormap or array of 'min' 'max' and 'color' values for 'intervals' type
   min: minimal value for colormap for correct color scaling
   max: maximal value for colormap for correct color scaling
   strokeColor:

doc/tutorials/advanced/run-application-with-own-data.md

@@ -55,10 +55,13 @@ For map view in the UI, you can set [x,y] coordinates and zoom level to focus th
 In first version, there is only one Tab available.     
 **index** is order of the tab in the top menu. In future versions, you can create multiple tabs and order them. Order starts at 0 and it should be sequence of consecutive numbers.      
 **attributeIds** are names of attributes stored in database for specific graphs in tab. Each preset tab has own set of constants to be matched with data in database. Specific sets of attributeIds are described in [Dashboard Tabs](../../UI/dashboard-tabs.md).     
-     
+
 ## Configuration and data in data filling service
-`initial-data-load` service prepares structure in database and storage and fills them with data. This service can be run multiple times after the structure is set up.   
+
+`initial-data-load` service prepares structure in database and storage and fills them with data. This service can be run multiple times after the structure is set up.  
+
 ### Requirements for first run
+
 On first run, this service is setting up database structure, indexes and storage structure necessary for data storing. To enable complete flexibility later, some of these values need to be set via environment variables.      
 Make sure that following values are present for first run (they are set in ./runinitialload.sh script). Fill in your own COUNTRY and run the script in terminal.    
 ```

frontend/.eslintrc

@@ -10,6 +10,7 @@
     ],
     "react/destructuring-assignment": 0,
     "react/prop-types": 0,
+    "react/forbid-prop-types": 0,
     "react/jsx-props-no-spreading": 0,
     "react/jsx-wrap-multilines": 0,
     "import/order": [

frontend/package.json

@@ -27,6 +27,7 @@
     "moment": "^2.29.2",
     "ol": "^6.3.1",
     "plotly.js-dist": "^1.58.4",
+    "postcss": "^8.2.13",
     "prop-types": "^15.6.2",
     "react": "^17.0.1",
     "react-dom": "^16.8.0",

frontend/src/constants/index.js

@@ -11,6 +11,7 @@ export const staticLayersTypes = {
 export const staticLayerColorTypes = {
   COLOR: 'color',
   COLORMAP: 'colormap',
+  INTERVALS: 'intervals',
 };
 // map legend types
 export const mapLegendTypes = {

frontend/src/ol/staticLayers/styles.js

@@ -7,7 +7,7 @@ import Text from 'ol/style/Text';
 
 import colormap from 'colormap';
 import { staticLayerColorTypes } from '../../constants';
-import { isNotDefinedIncl0 } from '../../utils/helpers';
+import { isInInterval, isNotDefinedIncl0 } from '../../utils/helpers';
 
 // Styling based on feature attributes - trying generic
 export const colormaps = {
@@ -58,6 +58,10 @@ const getColorFromLayerStyle = (value, colorStyle, min, max) => {
       const index = Math.round(f * (50 - 1));
       return colorMap[index];
     }
+    if (colorStyle.type === staticLayerColorTypes.INTERVALS) {
+      const interval = colorStyle.value.find((item) => isInInterval(value, item.min, item.max));
+      return interval.color;
+    }
   } else {
     // different styles dependent on value
     if (typeof value === 'string' && colorStyle.hasOwnProperty(value.toUpperCase())) {

frontend/src/screens/Map/PublicMap.js

@@ -90,7 +90,7 @@ const PublicMap = ({ isLoading, handleIsLoading }) => {
       }),
       layers: basicLayers,
       view: new View({
-        center: mapPosition ? mapPosition.center : [],
+        center: mapPosition ? mapPosition.center : undefined,
         zoom: mapPosition ? mapPosition.zoom : null,
         minZoom: 2,
       }),

frontend/src/utils/helpers.js

@@ -28,6 +28,38 @@ export const getStartDate = (numberOfDays) => {
   return isoRequiredDay;
 };
 
+/**
+ * Check if the value is in interval (min, max>
+ * @param  {} value
+ * @param  {} min
+ * @param  {} max
+ */
+export const isInInterval = (value, min, max) => {
+  // the interval is not defined
+  if (!min && min !== 0 && !max && max !== 0) {
+    return false;
+  }
+  // min value is not defined
+  if (!min && min !== 0) {
+    if (value <= max) {
+      return true;
+    }
+    return false;
+  }
+  // max is not defined
+  if (!max && max !== 0) {
+    if (value > min) {
+      return true;
+    }
+    return false;
+  }
+  // regular case
+  if (min < value && value <= max) {
+    return true;
+  }
+  return false;
+};
+
 export const foundPointAddressString = (address) => {
   if (!address) {
     return 'Unknown address';