diff --git a/api/requestPluviometerData.js b/api/requestPluviometerData.js index ebde39f..b816c42 100644 --- 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 index f3e23a0..6ecb2b1 100644 --- 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 ( - + (theme.typography.fontWeightBold), color: color}}>{locationData['placename'].toUpperCase()}. {new Date(d3.timeFormat("%B %d, %Y")(toggleDate.startDate)).toLocaleString().split(',')[0] + " - " + new Date(d3.timeFormat("%B %d, %Y")(toggleDate.endDate)).toLocaleString().split(',')[0]} diff --git a/components/elements/iconClusterLayer.js b/components/elements/iconClusterLayer.js index 1ebeb7e..e627913 100644 --- 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 index 0c8a5dc..89adce2 100644 --- 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 index 6013dc7..6ea56ae 100644 --- 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, {"citizen-rainfall-events-icon-cluster" !== info.layer.id ? (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.multiple[toggleLanguage.language] + " " + uiText.global.tooltips.citizenPluviometers[toggleLanguage.language]} : (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.multiple[toggleLanguage.language] + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language]}} - {"citizen-rainfall-events-icon-cluster" !== info.layer.id ? (theme.palette.primary.main)}}>{object.point_count + " " + uiText.global.tooltips.citizenPluviometers[toggleLanguage.language] + " " + uiText.global.tooltips.nearby[toggleLanguage.language]} : (theme.palette.primary.main)}}>{object.point_count + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language] + " " + uiText.global.tooltips.nearby[toggleLanguage.language]}} + {"citizen-rainfall-events-icon-cluster" !== info.layer.id ? (theme.palette.primary.main)}}>{object.point_count + " " + uiText.global.tooltips.gridCells[toggleLanguage.language]} : (theme.palette.primary.main)}}>{object.point_count + " " + uiText.locationPage.rainfallMap.citizenSubmittedRainEvent[toggleLanguage.language] + " " + uiText.global.tooltips.nearby[toggleLanguage.language]}} @@ -171,10 +169,13 @@ const RainfallMap = ({ toggleLanguage, toggleDate, toggleDataType, mapBoxToken, ( - (theme.spacing(2))}}> + (theme.spacing(2))}}> - (theme.typography.fontWeightBold)}} >{object.citizenType.toUpperCase() + " " + object.type.toUpperCase()}. + (theme.typography.fontWeightBold)}} >{uiText.global.tooltips.localMeasurements[toggleLanguage.language].toUpperCase()}. + (theme.spacing(.5)), marginTop: (theme) => (theme.spacing(.5)), width: `max-content`, height: `max-content`, }}> + (theme.typography.fontWeightLight)}} >{object.totalPluviometers > 1 ? object.totalPluviometers + " " + uiText.global.tooltips.citizenPluviometers[toggleLanguage.language].toUpperCase() : object.totalPluviometers + " " + uiText.global.tooltips.citizenPluviometer[toggleLanguage.language].toUpperCase()} + @@ -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 index 5fef88e..677e59e 100644 --- a/components/elements/rainfallMapLegend.js +++ b/components/elements/rainfallMapLegend.js @@ -33,6 +33,7 @@ const RainfallMapLegend = ({ toggleLanguage, updatePluviometerData, toggleCluste (theme.typography.fontWeightBold)}}>{uiText.global.tooltips.avgDailyRainfall[toggleLanguage.language].toUpperCase()}. {new Date(d3.timeFormat("%B %d, %Y")(toggleDate.startDate)).toLocaleString().split(',')[0] + " - " + new Date(d3.timeFormat("%B %d, %Y")(toggleDate.endDate)).toLocaleString().split(',')[0]} {uiText.global.tooltips.rainfallLegendDescription[toggleLanguage.language]} + {uiText.global.tooltips.rainfallLegendDescriptionTwo[toggleLanguage.language]} (theme.spacing(2)), marginBottom: (theme) => (theme.spacing(2))}}> diff --git a/components/modules/location-page/hero.js b/components/modules/location-page/hero.js index 11f191a..19bf591 100644 --- 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}) => { <> - {promiseInProgress ? : } + {promiseInProgress ? : } {promiseInProgress ? : {updatePrimaryLocation.location['placename']}.} {promiseInProgress ? : (theme.spacing(1)), background: `linear-gradient(90deg, #2196F3 0%, #1565C0 100%)`, marginBottom: (theme) => (theme.spacing(2)), marginTop: (theme) => (theme.spacing(1))}}/>} {promiseInProgress ? : {uiText.locationPage.hero.descriptionPartOne[toggleLanguage.language] + updatePrimaryLocation.location['placename'] + uiText.locationPage.hero.descriptionPartTwo[toggleLanguage.language]}} diff --git a/data/ui-text.js b/data/ui-text.js index 23bd7f2..259bf75 100644 --- 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 index 983317b..c91a860 100644 Binary files a/public/images/icons/citizen-pluviometer-icon-atlas.png and b/public/images/icons/citizen-pluviometer-icon-atlas.png differ