Merge pull request #3 from urbanbigdatacentre/development

Added ptBR Translations - prep for Brazil Release. 🚀 Deployment.

api/requestCitizenEvents.js

@@ -18,8 +18,6 @@ const requestCitizenEvents = (locationID, formType, startDate, endDate, location
         },
     }
 
-    console.log(formTypeAPIMapping[formType].TYPE)
-
     // Check if citizen data already exists for this location
     const filteredDataArray = existingDataArray.locations.length ? existingDataArray.locations.filter(function(location){
         // Return the item only if the ids are equal

api/requestPluviometerData.js

@@ -9,6 +9,7 @@ const requestPluviometerData = (item, toggleDate, configureAPI, updatePluviomete
     const API_URL = `${config[configureAPI['node_env'].NODE_ENV]}/dashboard/pluviometers?id=${item['placeid']}&startDate=${toggleDate.startDate}&endDate=${toggleDate.endDate}`
 
     console.log("Requesting /pluviometers")
+    console.log(API_URL)
 
     // Check if Pluviometer Data already exists for this location and if existing timestamp is sufficient
     const filteredPluviometerData = updatePluviometerData.locations.length ? updatePluviometerData.locations.filter(function (location) {

components/elements/citizenCarousel.js

@@ -152,6 +152,9 @@ const CitizenCarouselContainer = styled(Container)(({theme}) => ({
     [theme.breakpoints.down('1000')]: {
         width: `90%`,
     },
+    [theme.breakpoints.down('900')]: {
+        paddingTop: theme.spacing(3),
+    },
     [theme.breakpoints.down('600')]: {
         paddingTop: theme.spacing(0),
         width: `100%`,

components/elements/controlDashboard.js

@@ -48,9 +48,9 @@ const ControlDashboard = ({ toggleLanguage, locationData, color, weatherAPIToken
             <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>
             <ControlDashboardInnerBox >
                 <ControlDashboardStatCardBox>
-                    <StatCard firstInSequence={true} text={uiText.locationPage.controlPanel.maxDailyRainfall[toggleLanguage.language]} number={stats?.maxdailyrainfall !== null ? Math.round(stats.maxdailyrainfall) + "mm" : "-"}/>
-                    <StatCard text={uiText.locationPage.controlPanel.floodReports[toggleLanguage.language]} number={stats?.floodreports !== undefined ? stats.floodreports : "-"}/>
-                    <StatCard text={uiText.locationPage.controlPanel.activeReporters[toggleLanguage.language]} number={stats?.activereporters !== undefined ? stats.activereporters : "-"}/>
+                    <StatCard dashboardRender firstInSequence={true} text={uiText.locationPage.controlPanel.maxDailyRainfall[toggleLanguage.language]} number={stats?.maxdailyrainfall !== null ? Math.round(stats.maxdailyrainfall) + "mm" : "-"}/>
+                    <StatCard dashboardRender text={uiText.locationPage.controlPanel.floodReports[toggleLanguage.language]} number={stats?.floodreports !== undefined ? stats.floodreports : "-"}/>
+                    <StatCard dashboardRender text={uiText.locationPage.controlPanel.activeReporters[toggleLanguage.language]} number={stats?.activereporters !== undefined ? stats.activereporters : "-"}/>
                 </ControlDashboardStatCardBox>
                 <WeatherCarousel weatherAPIToken={weatherAPIToken} locationData={locationData}/>
             </ControlDashboardInnerBox>

components/elements/dateFilter.js

@@ -7,6 +7,7 @@ import {ToggleButton, ToggleButtonGroup, styled, ClickAwayListener, Box} from "@
 import {connect} from "react-redux";
 import {bindActionCreators} from "redux";
 import { DateRangePicker } from 'react-date-range';
+import {ptBR, enGB} from "react-date-range/dist/locale";
 import * as d3 from 'd3';
 
 // Local Imports
@@ -119,8 +120,6 @@ const DateFilter = (props) => {
         // Check if date range exceeds greatest ever cached date range and therefore new request is needed
         const startDateGreater = new Date(d3.timeFormat("%B %d, %Y")(dateSelection.startDate)) < new Date(d3.timeFormat("%B %d, %Y")(props.toggleGreatestDateRange.startDate))
 
-        console.log(startDateGreater)
-
         if (startDateGreater) {
             // Update Greatest Date Range
             props.toggleGreatestDateRangeDispatch({"startDate": new Date(d3.timeFormat("%B %d, %Y")(dateSelection.startDate)).getTime().toString(), "endDate": props.toggleGreatestDateRange.endDate})
@@ -171,6 +170,7 @@ const DateFilter = (props) => {
 
                     <Box sx={{zIndex: `90000`, display: displayPicker ? `block` : `none`, position: `relative`}}>
                         <DateRangePicker
+                            locale={props.toggleLanguage.language === 'en' ? enGB : ptBR}
                             maxDate={new Date()}
                             minDate={new Date(2021, 1, 1)}
                             fixedHeight={true}

components/elements/floodMap.js

@@ -11,6 +11,7 @@ import RefreshIcon from '@mui/icons-material/Refresh';
 
 // Local Imports
 import {styled, Box, Typography, Button, ToggleButtonGroup, ToggleButton} from "@mui/material";
+import MapScaleControl from "./scaleControl";
 import CITIZEN_EVENTS_ICON_MAPPING from "../../data/citizenRainfallEventsIconMapping";
 import {MapboxLayer} from "@deck.gl/mapbox";
 import {bindActionCreators} from "redux";
@@ -125,7 +126,7 @@ const FloodMap = ({ toggleLanguage, configureAPI, toggleDate, updateFloodData, u
                                 <Typography sx={{fontWeight: `400`}} >{uiText.locationPage.rainfallMap.citizenReport[toggleLanguage.language].toUpperCase() + " "}</Typography>
                                 {/*<Typography sx={{fontSize: `11px`, color: (theme) => (theme.palette.primary.main)}}>{object.citizenType !== undefined ? object.citizenType.text : ""}</Typography>*/}
                             </TypeOrganisationBox>
-                            <Typography sx={{marginLeft: (theme) => (theme.spacing(4)), fontWeight: (theme) => (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.floodEvent[toggleLanguage.language].toUpperCase()}<span className={"bluePunctuation"}>.</span></Typography>
+                            <Typography sx={{textAlign: `right`, marginLeft: (theme) => (theme.spacing(4)), fontWeight: (theme) => (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.floodEvent[toggleLanguage.language].toUpperCase()}<span className={"bluePunctuation"}>.</span></Typography>
                         </Box>
                     </TooltipFlex>
                     <Typography sx={{fontSize: `20px`, fontWeight: (theme) => (theme.typography.fontWeightLight), marginTop: (theme) => (theme.spacing(2))}}>{object.submissionText !== undefined ? "'" + object.submissionText + "'" : uiText.global.tooltips.noComment[toggleLanguage.language]}</Typography>
@@ -300,7 +301,10 @@ const FloodMap = ({ toggleLanguage, configureAPI, toggleDate, updateFloodData, u
                     mapStyle={mapStyle}
                     mapboxAccessToken={mapBoxToken}
                     onLoad={onMapLoad}
-                />
+                >
+                    <MapScaleControl position={'bottom-right'}/>
+
+                </StaticMap>
             )}
 
             {renderTooltip(hoverInfo)}

components/elements/floodMapLegend.js

@@ -37,10 +37,7 @@ const FloodMapLegend = ({toggleLanguage, updateFloodData, toggleLocationPreferen
     return (
         (
             <LegendWrapperBox>
-                <LegendTitle sx={{fontWeight: (theme) => (theme.typography.fontWeightBold), marginBottom: (theme) => (theme.spacing(1))}}>{uiText.global.tooltips.browseRiskZones[toggleLanguage.language].toUpperCase()}<span className={'bluePunctuation'}>.</span> </LegendTitle>
-                <FloodMapInfo sx={{marginBottom: (theme) => (theme.spacing(1))}}>{uiText.locationPage.floodMap.floodMapInfo[toggleLanguage.language]}</FloodMapInfo>
 
-                {/*<LocationBox locationName={toggleLocationPreference.locationPreference} color={colorCode}/>*/}
                 <NoFloodZonesText sx={{marginBottom: floodDataArray.length ? (theme) => (theme.spacing(2)): 0}}><span style={{fontWeight: `800`}}>{floodDataArray.length !== 500 ? floodDataArray.length + " " : floodDataArray.length + "+ "}</span>{uiText.locationPage.floodMap.riskAreas[toggleLanguage.language].toUpperCase()}<span className={'bluePunctuation'}>.</span></NoFloodZonesText>
                 {floodDataArray.length === 500 ? <MyAlert sx={{border: `1px solid #2196F3`, fontSize: `13px`}} severity={"info"}>
                     <AlertTitle>{uiText.locationPage.floodMap.floodMapAlertTitle[toggleLanguage.language]}</AlertTitle>
@@ -50,6 +47,7 @@ const FloodMapLegend = ({toggleLanguage, updateFloodData, toggleLocationPreferen
 
 
                 {floodDataArray.length ? <Box sx={{display: `flex`, flexDirection: `column`, width: `100%`}}>
+                    <Typography  sx={{marginTop: (theme) => (theme.spacing(2)), fontWeight: (theme) => (theme.typography.fontWeightBold), fontSize: `12px`}}>{uiText.global.tooltips.risk[toggleLanguage.language].toUpperCase()}</Typography>
                     <Box sx={{
                         display: `flex`,
                         width: `100%`,
@@ -63,11 +61,11 @@ const FloodMapLegend = ({toggleLanguage, updateFloodData, toggleLocationPreferen
                     </Box>
                     <Box sx={{display: `flex`, width: `100%`, justifyContent: `space-between`}}>
                         <LegendText
-                            sx={{fontSize: `12px`}}>{uiText.global.tooltips.lower[toggleLanguage.language] + " " + uiText.global.tooltips.risk[toggleLanguage.language]}</LegendText>
+                            sx={{fontSize: `12px`}}>{uiText.global.tooltips.lower[toggleLanguage.language]}</LegendText>
                         <LegendText sx={{
                             fontSize: `12px`,
                             textAlign: `right`
-                        }}>{uiText.global.tooltips.higher[toggleLanguage.language] + " " + uiText.global.tooltips.risk[toggleLanguage.language]}</LegendText>
+                        }}>{uiText.global.tooltips.higher[toggleLanguage.language]}</LegendText>
                     </Box>
 
                 </Box>: null}
@@ -126,10 +124,10 @@ const LegendWrapperBox = styled(Box)(({theme}) => ({
     justifyContent: `space-between`,
     alignItems: `flex-start`,
     zIndex: 600,
-    maxWidth: theme.spacing(40),
+    maxWidth: theme.spacing(45),
 
     height: `auto`,
-    top: theme.spacing(10),
+    top: theme.spacing(8),
     left: theme.spacing(1),
     backgroundColor: theme.palette.primary.light,
     borderRadius: theme.shape.borderRadius,

components/elements/generalLegend.js

@@ -17,7 +17,7 @@ import {toggleLocationPreference} from "../../store/reducers";
 import {filterCitizenEventDataByDate, filterPluviometerData} from "../../api/dataFilteringFunctions";
 
 // General Legend Component
-const GeneralLegend = ({locationData, toggleLanguage, toggleDate, updatePrimaryLocation, floodMap, updateCitizenEventsRainfallData, toggleLocationPreference, updateCitizenEventsFloodZonesData, updateCitizenEventsRiverFloodData}) => {
+const GeneralLegend = ({locationData, toggleLanguage, toggleDate, updatePrimaryLocation, updatePluviometerData, floodMap, updateCitizenEventsRainfallData, toggleLocationPreference, updateCitizenEventsFloodZonesData, updateCitizenEventsRiverFloodData}) => {
 
 
     const [menuOpen, setMenuOpenStatus] = useState(false);
@@ -74,16 +74,24 @@ const GeneralLegend = ({locationData, toggleLanguage, toggleDate, updatePrimaryL
                 </>
             )
         } else {
+
+
             // Find number of citizen submitted rainfall for each item
             const citizenRainEventLocationMatch = updateCitizenEventsRainfallData.locations.filter(function(el){return el.id === item['id']})
 
+            // const pluviometerData = filterPluviometerData(item['pluviometerData'], toggleDate)
+            // console.log(pluviometerData)
+
+            const pluviometerData = updatePluviometerData.locations.filter(function(el){return el.id === item.id})
+            const filteredPluviometers = filterPluviometerData(pluviometerData, toggleDate)
+
             const lengthOfArray = citizenRainEventLocationMatch.length ? filterCitizenEventDataByDate(citizenRainEventLocationMatch, 'citizenRainfallEvents', toggleDate)['citizenRainfallEvents'].length : 0;
 
             return (
                 <>
                     <LegendLocationName sx={{color: colorCode}}>{item['locationName'].toUpperCase()}</LegendLocationName>
                     <Divider sx={{width: `100%`, margin: `4px 0 2px 0`}}/>
-                    <LegendDataText sx={{fontWeight: (theme) => (theme.typography.fontWeightLight),}}>{item['pluviometerData'].length + " " + uiText.global.tooltips.pluviometers[toggleLanguage.language].toUpperCase()}</LegendDataText>
+                    <LegendDataText sx={{fontWeight: (theme) => (theme.typography.fontWeightLight),}}>{filteredPluviometers['pluviometerData'].length + " " + uiText.global.tooltips.pluviometers[toggleLanguage.language].toUpperCase()}</LegendDataText>
                     <LegendDataText sx={{fontWeight: (theme) => (theme.typography.fontWeightLight),}}>{calculateMeasurements(item) + " " + uiText.global.tooltips.meausurements[toggleLanguage.language].toUpperCase()}</LegendDataText>
                     <LegendDataText sx={{fontWeight: (theme) => (theme.typography.fontWeightLight),}}>{lengthOfArray + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language].toUpperCase()}</LegendDataText>
                 </>

components/elements/iconClusterLayer.js

@@ -70,7 +70,22 @@ export default class IconClusterLayer extends CompositeLayer {
         const {data} = this.state;
         const {iconAtlas, iconMapping, sizeScale} = this.props;
 
-        return new IconLayer(
+
+        return this.getSubLayerProps().id === "pluviometer-icon-cluster-sublayer" ? new IconLayer(
+            this.getSubLayerProps({
+                id: 'icon',
+                data,
+                iconAtlas,
+                iconMapping,
+                sizeScale,
+                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),
+                sizeMinPixels: 50,
+                sizeUnits: `meters`,
+            })
+        ) : new IconLayer(
             this.getSubLayerProps({
                 id: 'icon',
                 data,

components/elements/nationalOverviewMap.js

@@ -3,6 +3,7 @@
 // Package Imports
 import DeckGL from '@deck.gl/react';
 import StaticMap from 'react-map-gl';
+import MapScaleControl from "./scaleControl";
 import {connect} from "react-redux";
 import React, {useRef, useEffect, useState, useCallback} from "react";
 
@@ -154,7 +155,10 @@ const NationalOverviewMap = ({ configureAPI, mapBoxToken, changeRadiusWithSlider
                     mapStyle={mapStyleBrazilOnly}
                     mapboxAccessToken={mapBoxToken}
                     onLoad={onMapLoad}
-                />
+                >
+                    <MapScaleControl/>
+                </StaticMap>
+
             )}
 
             </DeckGL>

components/elements/rainfallChart.js

@@ -9,6 +9,7 @@ import {usePromiseTracker} from "react-promise-tracker";
 // Local Imports
 import {useEffect, useState} from "react";
 import {locationColorKeys} from "../../data/colorMapping";
+import {multiFormat} from "../../data/languageFormatting";
 
 // Style Imports
 import styles from '../../styles/modules/location-page/Chart.module.css'
@@ -36,7 +37,7 @@ const RainfallChart = ({toggleLanguage, toggleDate, updatePrimaryLocation, updat
         // Draw the chart again
         drawChart();
 
-    }, [updatePluviometerData.locations.length, toggleDate.startDate, toggleDate.endDate])
+    }, [updatePluviometerData.locations.length, toggleDate.startDate, toggleDate.endDate, toggleLanguage.language])
 
     // DRAW CHART FUNCTION
     const drawChart = () => {
@@ -97,25 +98,41 @@ const RainfallChart = ({toggleLanguage, toggleDate, updatePrimaryLocation, updat
                 let dataRecords = {}
                 // Desired Data Format = {timestamp: x, avgValue: x}
                 // Loop through pluviometers
-                location.pluviometerData.forEach(function(singlePluviometer) {
+                location.pluviometerData.forEach(function(singlePluviometer, index) {
                     // Loop through individual records
+                    const singlePluviometerRecords = {}
+
                     singlePluviometer.records.forEach(function(record){
+
                         // Check if {timestamp: x, valueArray: []} exists
-                        if (dataRecords.hasOwnProperty(new Date(record.timestamp).setHours(0, 0, 0, 0))) {
+                        if (singlePluviometerRecords.hasOwnProperty(new Date(record.timestamp).setHours(0, 0, 0, 0))) {
                             // Filter Out Records not between date ranges
                             if (new Date(d3.timeFormat("%B %d, %Y")(toggleDate.startDate)) < new Date(record.timestamp)) {
-                                dataRecords[new Date(record.timestamp).setHours(0, 0, 0, 0)].push(record.value)
+
+                                singlePluviometerRecords[new Date(record.timestamp).setHours(0, 0, 0, 0)].push(record.value)
                             }
                         } else {
                             if ((new Date(d3.timeFormat("%B %d, %Y")(toggleDate.startDate)) < new Date(record.timestamp)) && (new Date(d3.timeFormat("%B %d, %Y")(toggleDate.endDate)) >= new Date(record.timestamp).setHours(0, 0, 0, 0))) {
-                                dataRecords[new Date(record.timestamp).setHours(0, 0, 0, 0)] = []
-                                dataRecords[new Date(record.timestamp).setHours(0, 0, 0, 0)].push(record.value)
+
+                                singlePluviometerRecords[new Date(record.timestamp).setHours(0, 0, 0, 0)] = []
+                                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)
+                        if (dataRecords.hasOwnProperty(key)) {
+                            dataRecords[key].push(dailyTotal)
+                        } else {
+                            dataRecords[key] = []
+                            dataRecords[key].push(dailyTotal)
+                        }
+                    })
                 })
-                let formattedDataArray = [];
-                // DETERMINE AVG VALUE FOR EACH TIME
+                let formattedDataArray = []
+
+                // DETERMINE AVG VALUE FOR EACH DAY
                 Object.keys(dataRecords).forEach(function(key) {
                     const singleDataRecord = {timestamp: new Date(d3.timeFormat("%B %d, %Y")(key)), value: dataRecords[key].reduce((acc,v,i,a)=>(acc+v/a.length),0)}
                     singleDataRecord.value > maxValue ? maxValue = singleDataRecord.value : null;
@@ -141,17 +158,19 @@ const RainfallChart = ({toggleLanguage, toggleDate, updatePrimaryLocation, updat
         const xScale = d3.scaleTime()
             .domain([startDate.setDate(startDate.getDate() - 0.5), endDate.setDate(endDate.getDate() + 1)])
             .range([chartMargin.left, width])
+            .nice()
 
 
         svg.append("g")
             .attr("transform", "translate(0," + height + ")")
             .attr("class", styles.chartAxis)
-            .call(d3.axisBottom(xScale).ticks(vw > 900 ? 8 : 4).tickPadding(vw > 600 ? 15 : 8));
+            .call(d3.axisBottom(xScale).ticks(vw > 900 ? 8 : 4).tickPadding(vw > 600 ? 15 : 8).tickFormat((date) => multiFormat(date, toggleLanguage.language)));
 
         // Draw Y Axis
         const yScale = d3.scaleLinear()
             .domain([0, Math.ceil(maxValue / 10) * 10])
             .range([height, chartMargin.bottom])
+            .nice()
 
         svg.append("g")
             .attr("class", styles.chartAxis)