Improve datastructure and readability project 2 aufgabe 3

projects/project-2/aufgabe1.js

@@ -71,7 +71,7 @@ const aufgabe1 = () => {
         }
     }
 
-    info.addTo(map);
+    info.addTo(map)
 
     // Hover over feature
     const onEachFeature = (feature, layer) => {

projects/project-2/aufgabe3.js

@@ -1,60 +1,23 @@
 const aufgabe3 = async () => {
-    const loadSeries = async (seriesCode, pageSize = 20) => {
-        const europeanCountryCodes = [
-            8, 20, 40, 56, 70, 100, 112, 191, 203, 208,
-            233, 234, 246, 248, 250, 276, 292, 300, 336,
-            348, 352, 372, 380, 428, 438, 440, 442, 470,
-            492, 498, 499, 528, 578, 616, 620, 642, 643,
-            674, 688, 703, 705, 724, 744, 752, 756, 804,
-            807, 826, 833
-        ]
-        const values = (await axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
-            params: {
-                seriesCode: seriesCode,
-                pageSize: pageSize
-            }
-        })).data // getting axios data object
-        const filteredApiResponse = values.data // getting api data object (remove paging information)
-            .filter(elem => elem.timePeriodStart >= 2015 && elem.timePeriodStart <= 2017)
-            .filter(elem => europeanCountryCodes.includes(parseInt(elem.geoAreaCode)))
-            .filter(elem => elem.dimensions.Location === "ALLAREA")
-
-        const data = []
-
-        for (let elem of filteredApiResponse) {
-            const dataElem = data.find(value => value.name === elem.geoAreaName)
-            if (dataElem) {
-                dataElem.series[elem.series][elem.timePeriodStart] = elem.value
-            } else {
-                data.push({
-                    name: elem.geoAreaName,
-                    geoAreaCode: elem.geoAreaCode,
-                    series: {
-                        [elem.series]: {
-                            [elem.timePeriodStart]: elem.value
-                        }
-                    }
-                })
-            }
-        }
-        return data
-    }
 
     const loadData = async () => {
+        const loadSeries = async (seriesCode, pageSize = 20) => {
+            const values = (await axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
+                params: {
+                    seriesCode: seriesCode,
+                    pageSize: pageSize
+                }
+            })).data // getting axios data object
+            return values.data // getting api data object (remove paging information)
+                .filter(elem => elem.timePeriodStart >= 2015 && elem.timePeriodStart <= 2017)
+                .filter(elem => elem.dimensions.Location === "ALLAREA")
+        }
+
         const apiData = await Promise.all([
             loadSeries("SH_H2O_SAFE", 5000),
             loadSeries("SH_SAN_SAFE", 5000)
         ])
-        const finalDataset = apiData[0]
+        return [...apiData[0], ...apiData[1]]
-        for (let elem of apiData[1]) {
-            let findOtherPart = finalDataset.find(value => value.name === elem.name)
-            if (findOtherPart) {
-                findOtherPart.series = {...findOtherPart.series, ...elem.series}
-            } else {
-                finalDataset.push(elem)
-            }
-        }
-        return finalDataset
     }
 
     const levels = [0, 50, 80, 85, 90, 95, 99, 100]
@@ -93,13 +56,12 @@ const aufgabe3 = async () => {
         loadData()
     ])
 
+    // Attach api data to geojson
     for (let elem of apiData) {
         const find = geojsonData.features.find(value => {
-            return value.properties.name_long.includes(elem.name) || elem.name.includes(value.properties.name_long)
+            return value.properties.name_long.includes(elem.geoAreaName) || elem.geoAreaName.includes(value.properties.name_long)
         })
-        if (find) {
+        if (find) find.properties[elem.series + "_" + elem.timePeriodStart] = elem
-            find.properties = {...find.properties, ...elem}
-        }
     }
 
     // Add the legend to the map
@@ -131,11 +93,12 @@ const aufgabe3 = async () => {
         return info._div
     }
 
-    info.update = (props, metaElem) => {
+    info.update = (props = {}, currSeries) => {
-        info._div.innerHTML = metaElem?.categoryName ? `<h4>${metaElem.categoryName}</h4>` : '<h4>Please select something</h4>'
+        const localProps = props[currSeries]
-        if (props) {
+        info._div.innerHTML = localProps ? `<h5>${localProps.seriesDescription}</h5>` : ''
-            let formattedPercentage = new Intl.NumberFormat('de-DE').format(props.series[metaElem.series][metaElem.year])
+        if (localProps) {
-            info._div.innerHTML += `<b>${props.name}</b><br>${formattedPercentage} &percnt;`
+            let formattedPercentage = new Intl.NumberFormat('de-DE').format(localProps.value)
+            info._div.innerHTML += `<b>${props.formal_en}</b><br>${formattedPercentage} &percnt;`
         } else {
             info._div.innerHTML += 'Hover over a country'
         }
@@ -144,28 +107,28 @@ const aufgabe3 = async () => {
     info.addTo(map)
 
     let layers = {}
-    let layerMeta = [
+    let wantedSeries = [
-        {series: "SH_H2O_SAFE", year: 2015, categoryName: "Wasser"},
+        {name: "SH_H2O_SAFE_2015", displayName: "drinking water services 2015"},
-        {series: "SH_H2O_SAFE", year: 2016, categoryName: "Wasser"},
+        {name: "SH_H2O_SAFE_2016", displayName: "drinking water services 2016"},
-        {series: "SH_H2O_SAFE", year: 2017, categoryName: "Wasser"},
+        {name: "SH_H2O_SAFE_2017", displayName: "drinking water services 2017"},
-        {series: "SH_SAN_SAFE", year: 2015, categoryName: "Scheiße"},
+        {name: "SH_SAN_SAFE_2015", displayName: "sanitation services 2015"},
-        {series: "SH_SAN_SAFE", year: 2016, categoryName: "Scheiße"},
+        {name: "SH_SAN_SAFE_2016", displayName: "sanitation services 2016"},
-        {series: "SH_SAN_SAFE", year: 2017, categoryName: "Scheiße"}
+        {name: "SH_SAN_SAFE_2017", displayName: "sanitation services 2017"},
     ]
 
-    for (let layerMetaElem of layerMeta) {
+    for (let currSeries of wantedSeries) {
         let geoJsonLayer = L.geoJson(geojsonData, {
             style: feature => ({
                 stroke: true,
                 fill: true,
-                fillColor: getColor(feature.properties.series[layerMetaElem.series][layerMetaElem.year]),
+                fillColor: getColor(feature.properties[currSeries.name].value),
                 fillOpacity: 1,
                 dashArray: '3',
                 weight: 2,
                 color: 'black'
             }),
             filter: feature => {
-              return feature.properties.hasOwnProperty("series") && feature.properties.series.hasOwnProperty(layerMetaElem.series)
+                return feature.properties.hasOwnProperty(currSeries.name)
             },
             onEachFeature: (feature, layer) => {
                 layer.on({
@@ -176,11 +139,8 @@ const aufgabe3 = async () => {
                             dashArray: '',
                             fillOpacity: 0.7
                         })
-
+                        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) event.target.bringToFront()
-                        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+                        info.update(feature.properties, currSeries.name)
-                            event.target.bringToFront()
-                        }
-                        info.update(event.target.feature.properties, layerMetaElem)
                     },
                     mouseout: event => {
                         geoJsonLayer.resetStyle(event.target)
@@ -190,7 +150,7 @@ const aufgabe3 = async () => {
                 })
             }
         })
-        layers[layerMetaElem.series + " - " + layerMetaElem.year] = geoJsonLayer
+        layers[currSeries.displayName] = geoJsonLayer
     }
 
     L.control.layers(layers, null).addTo(map)

projects/project-2/style.css

@@ -9,6 +9,7 @@
     background: rgba(255, 255, 255, 0.9);
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
     border-radius: 5px;
+    max-width: 40vw;
 }
 
 .info h4 {