Merge pull request #6 from urbanbigdatacentre/development

🚀 Release 23.08.2022
urbanbigdatacentre · Aug 23, 2022 · 54ff9e5 · 54ff9e5
2 parents 2948286 + b83b9ae
commit 54ff9e5
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 20 deletions.
diff --git a/api/requestPluviometerData.js b/api/requestPluviometerData.js
@@ -23,6 +23,7 @@ const requestPluviometerData = (item, toggleDate, configureAPI, updatePluviomete
         trackPromise(
             axios.get(API_URL)
                 .then(res => {
+                    // console.log(res)
                     updatePluviometerDataDispatch(typeof (res.data['responseData']['array_to_json']) === 'undefined' ? [] : res.data['responseData']['array_to_json'], item['placeid'], toggleDate.startDate.toString(), toggleDate.endDate.toString(), item['placename'], item['placetype'])
                 })
             , "pluviometer-data") : null

diff --git a/components/elements/controlDashboard.js b/components/elements/controlDashboard.js
@@ -10,6 +10,7 @@ import uiText from "../../data/ui-text";
 import StatCard from "./statCard";
 import LocationBox from "./locationBox";
 import locationPaths from "../../data/locationPaths";
+import locationPathsBR from "../../data/locationPathsBR";
 import WeatherCarousel from "./weatherCarousel";
 import {trackPromise, usePromiseTracker} from "react-promise-tracker";
 import axios from "axios";
@@ -42,7 +43,7 @@ const ControlDashboard = ({ toggleLanguage, locationData, color, weatherAPIToken
 
     return (
         <ControlDashboardOuterBox >
-            <LocationBox locationName={locationPaths[locationData['placetype']].text} color={color}/>
+            <LocationBox locationName={toggleLanguage.language === 'en' ? locationPaths[locationData['placetype']].text : locationPathsBR[locationData['placetype']].text} color={color}/>
             <LocationName sx={{paddingTop: `10px`, fontWeight: (theme) => (theme.typography.fontWeightBold), color: color}}>{locationData['placename'].toUpperCase()}<span className={'bluePunctuation'}>.</span></LocationName>
             <Divider sx={{width: `100%`}}/>
             <DateRangeText>{new Date(d3.timeFormat("%B %d, %Y")(toggleDate.startDate)).toLocaleString().split(',')[0] + " - " + new Date(d3.timeFormat("%B %d, %Y")(toggleDate.endDate)).toLocaleString().split(',')[0]}</DateRangeText>

diff --git a/components/elements/iconClusterLayer.js b/components/elements/iconClusterLayer.js
@@ -70,8 +70,7 @@ export default class IconClusterLayer extends CompositeLayer {
         const {data} = this.state;
         const {iconAtlas, iconMapping, sizeScale} = this.props;
 
-
-        return this.getSubLayerProps().id === "pluviometer-icon-cluster-sublayer" ? new IconLayer(
+        return JSON.stringify(this.getSubLayerProps().id).includes("pluviometer")? new IconLayer(
             this.getSubLayerProps({
                 id: 'icon',
                 data,
@@ -81,7 +80,7 @@ export default class IconClusterLayer extends CompositeLayer {
                 getColor: (d) => d.properties.hasOwnProperty('color') ? d.properties.color : '#888888',
                 getPosition: d => d.geometry.coordinates,
                 getIcon: d => getIconName(d.properties.cluster ? d.properties.point_count : 1),
-                getSize: d => getIconSize(d.properties.cluster ? 150 : 150),
+                getSize: 3.5,
                 sizeMinPixels: 50,
                 sizeUnits: `meters`,
             })

diff --git a/components/elements/rainfallChart.js b/components/elements/rainfallChart.js
@@ -90,7 +90,6 @@ const RainfallChart = ({toggleLanguage, toggleDate, updatePrimaryLocation, updat
         // Use the largest possible date range for each location object - and remo
         const filteredDataTwo = validateLocation([... new Set(dataArray)])
 
-
         // Draw area - line - circles for every location
         filteredDataTwo.forEach(function(location) {
             // Check for pluviometerData
@@ -118,7 +117,9 @@ const RainfallChart = ({toggleLanguage, toggleDate, updatePrimaryLocation, updat
                                 singlePluviometerRecords[new Date(record.timestamp).setHours(0, 0, 0, 0)].push(record.value)
                             }
                         }
+
                     })
+
                     // Create Daily Totals to Add Single Pluviometer Records Together
                     Object.keys(singlePluviometerRecords).forEach(function(key) {
                         const dailyTotal = singlePluviometerRecords[key].reduce((a, b) => parseInt(a) + parseInt(b), 0)
@@ -129,6 +130,7 @@ const RainfallChart = ({toggleLanguage, toggleDate, updatePrimaryLocation, updat
                             dataRecords[key].push(dailyTotal)
                         }
                     })
+
                 })
                 let formattedDataArray = []
 

diff --git a/components/elements/rainfallMap.js b/components/elements/rainfallMap.js
@@ -60,12 +60,10 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken,
             const deck = deckRef.current.deck;
 
             map.addLayer(new MapboxLayer({ id: "dummy-layer", deck }));
-            map.addLayer(new MapboxLayer({ id: "citizen-rainfall-events-layer", deck }, "country-label"));
-            map.addLayer(new MapboxLayer({ id: "citizen-rainfall-events-icon-cluster", deck }, "country-label"));
             map.addLayer(new MapboxLayer({ id: "pluviometer-icon-cluster", deck }));
             map.addLayer(new MapboxLayer({ id: "citizen-pluviometer-layer", deck }, "country-label"));
-
-
+            map.addLayer(new MapboxLayer({ id: "citizen-rainfall-events-layer", deck }, "country-label"));
+            map.addLayer(new MapboxLayer({ id: "citizen-rainfall-events-icon-cluster", deck }, "country-label"));
 
         }
         setMapLoaded(true);
@@ -119,8 +117,8 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken,
 
     // Function to render Tooltip
     const renderTooltip = (info) => {
-        const {object, x, y} = info;
 
+        const {object, x, y} = info;
         const wrapper = document.querySelector('#rainfall-map-wrapper')
         const wrapperWidth = wrapper ? wrapper.getBoundingClientRect().width : 1200;
         const wrapperHeight = wrapper ? wrapper.getBoundingClientRect().height : 600;
@@ -162,7 +160,7 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken,
                         <Box sx={{display: `flex`}}>
                             <TypeOrganisationBox>
                                 {"citizen-rainfall-events-icon-cluster" !== info.layer.id ?<EventType sx={{fontSize: `20px`, fontWeight: (theme) => (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.multiple[toggleLanguage.language] + " " + uiText.global.tooltips.citizenPluviometers[toggleLanguage.language]}</EventType> : <Typography sx={{fontSize: `18px`, fontWeight: (theme) => (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.multiple[toggleLanguage.language] + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language]}</Typography>}
-                                {"citizen-rainfall-events-icon-cluster" !== info.layer.id ? <EventNumberText sx={{fontSize: `14px`, color: (theme) => (theme.palette.primary.main)}}>{object.point_count + " " + uiText.global.tooltips.citizenPluviometers[toggleLanguage.language] + " " + uiText.global.tooltips.nearby[toggleLanguage.language]}</EventNumberText> : <Typography sx={{fontSize: `14px`, color: (theme) => (theme.palette.primary.main)}}>{object.point_count + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language] + " " + uiText.global.tooltips.nearby[toggleLanguage.language]}</Typography>}
+                                {"citizen-rainfall-events-icon-cluster" !== info.layer.id ? <EventNumberText sx={{fontSize: `14px`, color: (theme) => (theme.palette.primary.main)}}>{object.point_count + " " + uiText.global.tooltips.gridCells[toggleLanguage.language]}</EventNumberText> : <Typography sx={{fontSize: `14px`, color: (theme) => (theme.palette.primary.main)}}>{object.point_count + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language] + " " + uiText.global.tooltips.nearby[toggleLanguage.language]}</Typography>}
                             </TypeOrganisationBox>
                         </Box>
                     </TooltipFlex>
@@ -171,10 +169,13 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken,
         (
             <MyTooltipBox className="tooltip" sx={tooltipPositionSX}>
                     <TooltipFlex>
-                        <Box sx={{display: `flex`, marginRight: (theme) => (theme.spacing(2))}}>
+                        <Box sx={{display: `flex`, flexDirection: `column`, marginRight: (theme) => (theme.spacing(2))}}>
                             <TypeOrganisationBox>
-                                <Typography sx={{fontSize: `14px`, fontWeight: (theme) => (theme.typography.fontWeightBold)}} >{object.citizenType.toUpperCase() + " " + object.type.toUpperCase()}<span className={"bluePunctuation"}>.</span></Typography>
+                                <Typography sx={{fontSize: `14px`, fontWeight: (theme) => (theme.typography.fontWeightBold)}} >{uiText.global.tooltips.localMeasurements[toggleLanguage.language].toUpperCase()}<span className={"bluePunctuation"}>.</span></Typography>
                             </TypeOrganisationBox>
+                            <Box sx={{borderRadius: (theme) => (theme.spacing(.5)), marginTop: (theme) => (theme.spacing(.5)), width: `max-content`, height: `max-content`, }}>
+                                <Typography sx={{color: `#888888`, fontSize: `12px`, fontWeight: (theme) => (theme.typography.fontWeightLight)}} >{object.totalPluviometers > 1 ? object.totalPluviometers + " " + uiText.global.tooltips.citizenPluviometers[toggleLanguage.language].toUpperCase() : object.totalPluviometers + " " + uiText.global.tooltips.citizenPluviometer[toggleLanguage.language].toUpperCase()}</Typography>
+                            </Box>
                         </Box>
                     </TooltipFlex>
                     <TooltipChart data={object}/>
@@ -230,9 +231,8 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken,
                     type: uiText.global.tooltips.measurement[toggleLanguage.language],
                     citizenType: uiText.global.labels.submissionTypes[item['submissiontype']][toggleLanguage.language],
                     info: item['institutioninfo'],
-                    // Need to filter records by date here **
+                    totalPluviometers: item['total_pluviometers'],
                     records: item['records'],
-                    // Need to calculate scale category here **
                     color: Math.round(linearScale(avgValue)) < 5 ? colorArray[Math.round(linearScale(avgValue))] : colorArray[4],
                 }
                 mapData.push(formattedItem)
@@ -271,7 +271,7 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken,
         sizeScale: 1,
         getColor: d => d.color,
         // Make sure does not exceed 600m
-        getSize: (d) => 600,
+        getSize: (d) => 350,
         sizeMinPixels: 50,
     });
 

diff --git a/components/elements/rainfallMapLegend.js b/components/elements/rainfallMapLegend.js
@@ -33,6 +33,7 @@ const RainfallMapLegend = ({ toggleLanguage, updatePluviometerData, toggleCluste
             <LegendTitle sx={{fontWeight: (theme) => (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.avgDailyRainfall[toggleLanguage.language].toUpperCase()}<span className={'bluePunctuation'}>.</span> </LegendTitle>
             <DateRangeText>{new Date(d3.timeFormat("%B %d, %Y")(toggleDate.startDate)).toLocaleString().split(',')[0] + " - " + new Date(d3.timeFormat("%B %d, %Y")(toggleDate.endDate)).toLocaleString().split(',')[0]}</DateRangeText>
             <LegendDescription sx={{fontSize: `14px`}}>{uiText.global.tooltips.rainfallLegendDescription[toggleLanguage.language]}</LegendDescription>
+            <LegendDescription sx={{fontSize: `14px`}}>{uiText.global.tooltips.rainfallLegendDescriptionTwo[toggleLanguage.language]}</LegendDescription>
             <Box sx={{display: `flex`, flexDirection: `column`, width: `100%`}}>
                 <Box sx={{display: `flex`, width: `100%`, justifyContent: `space-between`, marginTop: (theme) => (theme.spacing(2)), marginBottom: (theme) => (theme.spacing(2))}}>
                     <LegendCircle sx={{backgroundColor: `#F7996F`}}/>

diff --git a/components/modules/location-page/hero.js b/components/modules/location-page/hero.js
@@ -11,6 +11,7 @@ import uiText from "../../../data/ui-text";
 import SearchIcon from "@mui/icons-material/Search";
 import LocationBox from "../../elements/locationBox";
 import locationPaths from "../../../data/locationPaths";
+import locationPathsBR from "../../../data/locationPathsBR";
 import StreetMap from "../../elements/streetMap";
 import {usePromiseTracker} from "react-promise-tracker";
 import {useRouter} from "next/router";
@@ -34,7 +35,7 @@ const LocationHero = ({toggleLanguage, mapBoxToken, updatePrimaryLocation}) => {
             <>
                 <MapTextCarouselWrapper>
                     <MapDescriptionTextBox>
-                        {promiseInProgress ? <MySkeleton variant={'rectangular'} height={`20px`} width={`10%`}/> : <LocationBox locationName={locationPaths[updatePrimaryLocation.location['placetype']].text}/>}
+                        {promiseInProgress ? <MySkeleton variant={'rectangular'} height={`20px`} width={`10%`}/> : <LocationBox locationName={toggleLanguage.language === 'en' ? locationPaths[updatePrimaryLocation.location['placetype']].text : locationPathsBR[updatePrimaryLocation.location['placetype']].text}/>}
                         {promiseInProgress ? <MySkeleton variant={'rectangular'} height={`40px`} width={`40%`}/> : <PageTitle sx={{width: `60%`}} variant={'h1'}>{updatePrimaryLocation.location['placename']}<span className={'bluePunctuation'}>.</span></PageTitle>}
                         {promiseInProgress ? <MySkeleton variant={'rectangular'} height={`10px`} width={`45%`}/> : <MyDivider sx={{width: `25%`, height: (theme) => (theme.spacing(1)), background: `linear-gradient(90deg, #2196F3 0%, #1565C0 100%)`, marginBottom: (theme) => (theme.spacing(2)), marginTop: (theme) => (theme.spacing(1))}}/>}
                         {promiseInProgress ? <MySkeleton variant={'rectangular'} height={`10px`} width={`50%`}/> : <StandardText sx={{width: `50%`}} variant={'description'}>{uiText.locationPage.hero.descriptionPartOne[toggleLanguage.language] + updatePrimaryLocation.location['placename'] + uiText.locationPage.hero.descriptionPartTwo[toggleLanguage.language]}</StandardText>}

diff --git a/data/ui-text.js b/data/ui-text.js
@@ -252,6 +252,10 @@ export default {
         "en": "Measurement (mm)",
         "br": "Medição (mm)"
       },
+      "gridCells": {
+        "en": "Pluviometer Grid Cells",
+        "br": "Células da grid dos pluviômetros"
+      },
       "citizenPluviometer": {
         "en": "Citizen Pluviometer",
         "br": "Pluviômetro cidadão"
@@ -268,6 +272,10 @@ export default {
         "en": "Higher",
         "br": "Mais alta"
       },
+      "localMeasurements": {
+        "en": "Local Measurements",
+        "br": "Medições locais"
+      },
       "hexagonRadius": {
         "en": "Hexagon Radius",
         "br": "Raio do hexágono"
@@ -278,7 +286,7 @@ export default {
       },
       "maxDailyRainfall": {
         "en": "Max. Daily Rainfall",
-        "br": "Quantidade de chuva máxima no dia"
+        "br": "Quantidade de Chuva Máxima"
       },
       "cluster": {
         "en": "Cluster",
@@ -319,6 +327,10 @@ export default {
       "rainfallLegendDescription": {
         "en": "Data represents rainfall measurements (mm) recorded by citizens or official pluviometer gauges.",
         "br": "Os dados representam medições da quantidade de chuva precipitada (mm) registrada por cidadãos ou por pluviômetros oficiais."
+      },
+      "rainfallLegendDescriptionTwo": {
+        "en": "Citizen pluviometers are aggregated inside 300m hexagonal grid cells to protect people's privacy.",
+        "br": "Os dados de pluviômetros de cidadãos são agregados em uma grid hexagonal de 300m metros para proteger a privacidade da comunidade."
       }
     },
     "months": {
@@ -578,8 +590,8 @@ export default {
         "br": "Média Diária de Chuva"
       },
       "maxDailyRainfall": {
-        "en": "Max Daily Rainfall",
-        "br": "Quantidade de Chuva Máxima"
+        "en": "Max Daily Measurement",
+        "br": "Medição diária máxima"
       },
       "citizenReports": {
         "en": "Citizen Reports",

diff --git a/public/images/icons/citizen-pluviometer-icon-atlas.png b/public/images/icons/citizen-pluviometer-icon-atlas.png