diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx index 30ccc6ca..16bbbb04 100644 --- a/client/src/components/AreaDetail/index.tsx +++ b/client/src/components/AreaDetail/index.tsx @@ -12,24 +12,26 @@ import * as constants from '../../data/constants'; import * as EXPLORE_COPY from '../../data/copy/explore'; import * as METHODOLOGY_COPY from '../../data/copy/methodology'; -export const readablePercentile = (percentile: number) => { - return Math.round(percentile * 100); +export const readablePercentile = (percentile: number | null) => { + return percentile ? Math.round(percentile * 100) : 'N/A'; }; // Todo: Add internationalization to superscript ticket #582 -const getSuperscriptOrdinal = (percentile: number) => { - const englishOrdinalRules = new Intl.PluralRules('en', { - type: 'ordinal', - }); - const suffixes = { - zero: 'th', - one: 'st', - two: 'nd', - few: 'rd', - many: 'th', - other: 'th', - }; - return suffixes[englishOrdinalRules.select(percentile)]; +const getSuperscriptOrdinal = (percentile: number | string) => { + if (typeof percentile === "number") { + const englishOrdinalRules = new Intl.PluralRules('en', { + type: 'ordinal', + }); + const suffixes = { + zero: 'th', + one: 'st', + two: 'nd', + few: 'rd', + many: 'th', + other: 'th', + }; + return suffixes[englishOrdinalRules.select(percentile)]; + } }; interface IAreaDetailProps { @@ -40,11 +42,13 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { const intl = useIntl(); const [isCommunityFocus, setIsCommunityFocus] = React.useState(true); - const score = properties[constants.SCORE_PROPERTY_HIGH] as number; - const blockGroup = properties[constants.GEOID_PROPERTY]; - const population = properties[constants.TOTAL_POPULATION]; - const countyName = properties[constants.COUNTY_NAME]; - const stateName = properties[constants.STATE_NAME]; + console.log("Area Detail properies: ", properties); + + const score = properties[constants.SCORE_PROPERTY_HIGH] ? properties[constants.SCORE_PROPERTY_HIGH] as number : 0; + const blockGroup = properties[constants.GEOID_PROPERTY] ? properties[constants.GEOID_PROPERTY] : "N/A"; + const population = properties[constants.TOTAL_POPULATION] ? properties[constants.TOTAL_POPULATION] : "N/A"; + const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A"; + const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A"; useEffect(() => { if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) { @@ -65,77 +69,92 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { const areaMedianIncome:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.AREA_MEDIAN_INCOME), - value: properties[constants.AREA_MEDIAN_INCOME_PERCENTILE], + value: properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] ? + properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] : null, }; const eduInfo:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EDUCATION), - value: properties[constants.EDUCATION_PROPERTY_PERCENTILE], + value: properties[constants.EDUCATION_PROPERTY_PERCENTILE] ? + properties[constants.EDUCATION_PROPERTY_PERCENTILE] : null, }; const poverty:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY), - value: properties[constants.POVERTY_PROPERTY_PERCENTILE], + value: properties[constants.POVERTY_PROPERTY_PERCENTILE] ? + properties[constants.POVERTY_PROPERTY_PERCENTILE] : null, }; const asthma:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA), - value: properties[constants.ASTHMA_PERCENTILE], + value: properties[constants.ASTHMA_PERCENTILE] ? + properties[constants.ASTHMA_PERCENTILE] : null, }; const diabetes:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES), - value: properties[constants.DIABETES_PERCENTILE], + value: properties[constants.DIABETES_PERCENTILE] ? + properties[constants.DIABETES_PERCENTILE] : null, }; const dieselPartMatter:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER), - value: properties[constants.DIESEL_MATTER_PERCENTILE], + value: properties[constants.DIESEL_MATTER_PERCENTILE] ? + properties[constants.DIESEL_MATTER_PERCENTILE] : null, }; const lifeExpect:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LIFE_EXPECT), - value: properties[constants.LIFE_PERCENTILE], + value: properties[constants.LIFE_PERCENTILE] ? + properties[constants.LIFE_PERCENTILE] : null, }; const energyBurden:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN), - value: properties[constants.ENERGY_PERCENTILE], + value: properties[constants.ENERGY_PERCENTILE] ? + properties[constants.ENERGY_PERCENTILE] : null, }; const pm25:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5), - value: properties[constants.PM25_PERCENTILE], + value: properties[constants.PM25_PERCENTILE] ? + properties[constants.PM25_PERCENTILE] : null, }; const leadPaint:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT), - value: properties[constants.LEAD_PAINT_PERCENTILE], + value: properties[constants.LEAD_PAINT_PERCENTILE] ? + properties[constants.LEAD_PAINT_PERCENTILE] : null, }; const trafficVolume:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME), - value: properties[constants.TRAFFIC_PERCENTILE], + value: properties[constants.TRAFFIC_PERCENTILE] ? + properties[constants.TRAFFIC_PERCENTILE] : null, }; const wasteWater:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER), - value: properties[constants.WASTEWATER_PERCENTILE], + value: properties[constants.WASTEWATER_PERCENTILE] ? + properties[constants.WASTEWATER_PERCENTILE] : null, }; const femaRisk:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FEMA_RISK), - value: properties[constants.FEMA_PERCENTILE], + value: properties[constants.FEMA_PERCENTILE] ? + properties[constants.FEMA_PERCENTILE] : null, }; const heartDisease:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE), - value: properties[constants.HEART_PERCENTILE], + value: properties[constants.HEART_PERCENTILE] ? + properties[constants.HEART_PERCENTILE] : null, }; const houseBurden:indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN), description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN), - value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE], + value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] ? + properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null, }; diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index 0879df38..0686d46b 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -19,7 +19,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 County: - undefined + N/A
  • @@ -27,7 +27,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 State: - undefined + N/A
  • @@ -134,11 +134,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Asthma
    - NaN + N/A - - th - +
    @@ -156,11 +154,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Diabetes
    - NaN + N/A - - th - +
    @@ -178,11 +174,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Diesel particulate matter
    - NaN + N/A - - th - +
    @@ -200,11 +194,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Energy burden
    - NaN + N/A - - th - +
    @@ -222,11 +214,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 FEMA Risk Index
    - NaN + N/A - - th - +
    @@ -244,11 +234,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Heart disease
    - NaN + N/A - - th - +
    @@ -288,11 +276,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Lead paint
    - NaN + N/A - - th - +
    @@ -310,11 +296,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Life expectancy
    - NaN + N/A - - th - +
    @@ -332,11 +316,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 PM2.5
    - NaN + N/A - - th - +
    @@ -354,11 +336,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Traffic proximity and volume
    - NaN + N/A - - th - +
    @@ -376,11 +356,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 Wastewater discharge
    - NaN + N/A - - th - +
    diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index ef0cb021..1d63ee39 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-unused-vars */ // External Libs: -import React, {MouseEvent, useRef, useState, useMemo} from 'react'; +import React, {useRef, useState, useMemo} from 'react'; import {Map, MapboxGeoJSONFeature, LngLatBoundsLike} from 'maplibre-gl'; import ReactMapGL, { MapEvent, @@ -136,29 +136,6 @@ const J40Map = ({location}: IJ40Interface) => { }); }; - const onClickTerritoryFocusButton = (event: MouseEvent) => { - event.stopPropagation(); - const buttonID = event.target && (event.target as HTMLElement).id; - - switch (buttonID) { - case '48': - goToPlace(constants.LOWER_48_BOUNDS); - break; - case 'AK': - goToPlace(constants.ALASKA_BOUNDS); - break; - case 'HI': - goToPlace(constants.HAWAII_BOUNDS); - break; - case 'PR': - goToPlace(constants.PUERTO_RICO_BOUNDS); - break; - - default: - break; - } - }; - const onTransitionStart = () => { setTransitionInProgress(true); }; @@ -273,7 +250,7 @@ const J40Map = ({location}: IJ40Interface) => { onClick={onClickGeolocate} /> : ''} {geolocationInProgress ?
    Geolocation in progress...
    : ''} - + {'fs' in flags ? :'' } diff --git a/client/src/components/territoryFocusControl.tsx b/client/src/components/territoryFocusControl.tsx index 393462a3..0ec073b0 100644 --- a/client/src/components/territoryFocusControl.tsx +++ b/client/src/components/territoryFocusControl.tsx @@ -1,21 +1,53 @@ import {useIntl} from 'gatsby-plugin-intl'; -import React, {MouseEventHandler} from 'react'; -import {_useMapControl as useMapControl} from 'react-map-gl'; +import React from 'react'; +import {LngLatBoundsLike} from 'mapbox-gl'; import * as styles from './territoryFocusControl.module.scss'; import * as EXPLORE_COPY from '../data/copy/explore'; +import * as constants from '../data/constants'; interface ITerritoryFocusControl { - onClickTerritoryFocusButton: MouseEventHandler; + goToPlace(bounds: LngLatBoundsLike): void; } -const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusControl) => { + +const TerritoryFocusControl = ({goToPlace}: ITerritoryFocusControl) => { const intl = useIntl(); - const {containerRef} = useMapControl({ - // @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492 - onClick: onClickTerritoryFocusButton, - }); + const onClickTerritoryFocusButton = (event: React.MouseEvent) => { + event.stopPropagation(); + const buttonID = event.target && (event.target as HTMLElement).id; + + switch (buttonID) { + case '48': + goToPlace(constants.LOWER_48_BOUNDS); + break; + case 'AK': + goToPlace(constants.ALASKA_BOUNDS); + break; + case 'HI': + goToPlace(constants.HAWAII_BOUNDS); + break; + case 'PR': + goToPlace(constants.PUERTO_RICO_BOUNDS); + break; + case 'GU': + goToPlace(constants.GUAM_BOUNDS); + break; + case 'AS': + goToPlace(constants.AMERICAN_SAMOA_BOUNDS); + break; + case 'MP': + goToPlace(constants.MARIANA_ISLAND_BOUNDS); + break; + case 'VI': + goToPlace(constants.US_VIRGIN_ISLANDS_BOUNDS); + break; + + default: + break; + } + }; const territories = [ { @@ -34,6 +66,22 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon short: intl.formatMessage(EXPLORE_COPY.MAP.PR_SHORT), long: intl.formatMessage(EXPLORE_COPY.MAP.PR_LONG), }, + { + short: intl.formatMessage(EXPLORE_COPY.MAP.GU_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.GU_LONG), + }, + { + short: intl.formatMessage(EXPLORE_COPY.MAP.AS_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.AS_LONG), + }, + { + short: intl.formatMessage(EXPLORE_COPY.MAP.MP_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.MP_LONG), + }, + { + short: intl.formatMessage(EXPLORE_COPY.MAP.VI_SHORT), + long: intl.formatMessage(EXPLORE_COPY.MAP.VI_LONG), + }, ]; // the offset for this array should map the territories variable const territoriesIconClassName = [ @@ -41,16 +89,20 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusCon 'mapboxgl-ctrl-zoom-to-ak', 'mapboxgl-ctrl-zoom-to-hi', 'mapboxgl-ctrl-zoom-to-pr', + 'mapboxgl-ctrl-zoom-to-gu', + 'mapboxgl-ctrl-zoom-to-as', + 'mapboxgl-ctrl-zoom-to-mp', + 'mapboxgl-ctrl-zoom-to-vi', ]; return ( -
    +
    {territories.map((territory, index) =>