Merge pull request keplergl#35 from EDiT/feature/BUBR-811-improve-legend

[BUBR-811] improve legend
imec-int · Jun 1, 2022 · 70b1f31 · 70b1f31
2 parents 3b56890 + cf938fb
commit 70b1f31
Show file tree

Hide file tree

Showing 11 changed files with 304 additions and 65 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
+    "@types/redux-actions": "^2.6.2",
     "@types/rsocket-core": "^0.0.7",
     "@types/rsocket-websocket-client": "0.0.4",
     "ajv": "^8.8.2",
@@ -67,6 +68,7 @@
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "redux": "^4.1.2",
+    "redux-actions": "^2.6.5",
     "redux-saga": "^1.1.3",
     "rsocket-core": "^0.0.27",
     "rsocket-flowable": "^0.0.27",

diff --git a/src/config/layerConfig.ts b/src/config/layerConfig.ts
@@ -7,6 +7,21 @@ import { DataSet } from '../models/datasets';
 import config from './configLoader';
 import layerConfigValidator from './layerConfigValidator';
 
+// Generated by https://colorbrewer2.org/
+const aqColors = [
+  '#006837',
+  '#1a9850',
+  '#66bd63',
+  '#a6d96a',
+  '#d9ef8b',
+  '#fee08b',
+  '#fdae61',
+  '#f46d43',
+  '#d73027',
+  '#a50026',
+];
+const tfColors = ['#1a9641', '#a6d96a', '#ffffbf', '#fdae61', '#d7191c'];
+
 const trafficAdapter = (datasetId: string, params: any): Adapter => {
   const { timemode, modality } = params;
 
@@ -43,6 +58,7 @@ const layerConfig: { [key: string]: DataSet } = {
   qweriu: {
     id: 'qweriu',
     name: 'Qweriu',
+    shortName: 'QWE',
     url: `${config.api.baseUrl}/v1/federated/influxdb-qweriu-air-quality-filter`,
     filterFields: [
       {
@@ -79,11 +95,29 @@ const layerConfig: { [key: string]: DataSet } = {
         initialValue: new Date().toISOString().split('T')[0],
       },
     ],
+    colorScale: {
+      88: {
+        range: [0, 70],
+        colors: aqColors,
+        unit: 'µg/m³',
+      },
+      89: {
+        range: [0, 70],
+        colors: aqColors,
+        unit: 'µg/m³',
+      },
+      91: {
+        range: [0, 100],
+        colors: aqColors,
+        unit: 'µg/m³',
+      },
+    },
     tags: [{ label: TagName.AQ, className: 'bg-violet-50 border border-violet-600 text-violet-600' }],
   },
   luftdaten: {
     id: 'luftdaten',
     name: 'Luftdaten',
+    shortName: 'LFT',
     url: `${config.api.baseUrl}/v1/federated/influxdb-luftdaten-air-quality-filter`,
     filterFields: [
       {
@@ -116,11 +150,24 @@ const layerConfig: { [key: string]: DataSet } = {
         initialValue: new Date().toISOString().split('T')[0],
       },
     ],
+    colorScale: {
+      'sensordatavalues.0.value': {
+        range: [0, 70],
+        colors: aqColors,
+        unit: 'µg/m³',
+      },
+      'sensordatavalues.1.value': {
+        range: [0, 70],
+        colors: aqColors,
+        unit: 'µg/m³',
+      },
+    },
     tags: [{ label: TagName.AQ, className: 'bg-violet-50 border border-violet-600 text-violet-600' }],
   },
   sdpawv: {
     id: 'sdpawv',
     name: 'AWV',
+    shortName: 'AWV',
     filterFields: [
       {
         type: FieldType.RADIO,
@@ -197,12 +244,35 @@ const layerConfig: { [key: string]: DataSet } = {
         },
       },
     ],
+    colorScale: {
+      car: {
+        range: [0, 100],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      bike: {
+        range: [0, 40],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      lorry: {
+        range: [0, 20],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      pedestrian: {
+        range: [0, 80],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+    },
     tags: [{ label: TagName.TF, className: 'bg-orange-50 border border-orange-500 text-orange-500' }],
     adapter: ({ timemode, modality }) => trafficAdapter('awv', { timemode, modality }),
   },
   sdpsignco: {
     id: 'sdpsignco',
     name: 'SignCo',
+    shortName: 'SGC',
     filterFields: [
       {
         type: FieldType.RADIO,
@@ -279,12 +349,35 @@ const layerConfig: { [key: string]: DataSet } = {
         },
       },
     ],
+    colorScale: {
+      car: {
+        range: [0, 100],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      bike: {
+        range: [0, 40],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      lorry: {
+        range: [0, 20],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      pedestrian: {
+        range: [0, 80],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+    },
     tags: [{ label: TagName.TF, className: 'bg-orange-50 border border-orange-500 text-orange-500' }],
     adapter: ({ timemode, modality }) => trafficAdapter('sig', { timemode, modality }),
   },
   sdptelraam: {
     id: 'sdptelraam',
     name: 'Telraam',
+    shortName: 'TML',
     filterFields: [
       {
         type: FieldType.RADIO,
@@ -361,6 +454,28 @@ const layerConfig: { [key: string]: DataSet } = {
         },
       },
     ],
+    colorScale: {
+      car: {
+        range: [0, 100],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      bike: {
+        range: [0, 40],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      lorry: {
+        range: [0, 20],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+      pedestrian: {
+        range: [0, 80],
+        colors: tfColors,
+        unit: 'veh/h',
+      },
+    },
     tags: [{ label: TagName.TF, className: 'bg-orange-50 border border-orange-500 text-orange-500' }],
     adapter: ({ timemode, modality }) => trafficAdapter('tml', { timemode, modality }),
   },

diff --git a/src/config/layerConfigValidator.test.ts b/src/config/layerConfigValidator.test.ts
@@ -8,6 +8,7 @@ describe('layer configuration', () => {
     const invalidConfig: { [key: string]: DataSet } = {
       qweriu: {
         id: 'qweriu',
+        shortName: 'QWE',
         name: '',
         url: '',
         filterFields: [
@@ -37,6 +38,7 @@ describe('layer configuration', () => {
     const invalidConfig: { [key: string]: DataSet } = {
       qweriu: {
         id: 'qweriu',
+        shortName: 'QWE',
         name: '',
         url: '',
         filterFields: [

diff --git a/src/models/datasets.ts b/src/models/datasets.ts
@@ -30,11 +30,21 @@ interface DateBuilderConfig extends BuilderConfig {
 
 type FieldBuilderConfig = SelectBuilderConfig | RadioBuilderConfig | DateBuilderConfig;
 
+export interface ColorScale {
+  [key: string | number]: {
+    range: [number, number];
+    colors: string[];
+    unit: string;
+  };
+}
+
 export interface DataSet {
   id: string;
   name: string;
+  shortName: string;
   url?: string;
   filterFields: FieldBuilderConfig[];
+  colorScale?: ColorScale;
   tags?: Tag[];
   adapter?(args: any): Adapter;
 }