publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a case if data is not present in tiles (#998)

Browse source 
- will check each property and display N/A if null
- update snapshot
This commit is contained in:
Vim 2021-12-07 12:52:50 -05:00 • committed by GitHub
parent 5706837956
commit 9d28f5a4c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
client/src/components/AreaDetail/index.tsx
View file

@ -12,24 +12,26 @@ import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore'; import * as EXPLORE_COPY from '../../data/copy/explore';
import * as METHODOLOGY_COPY from '../../data/copy/methodology'; import * as METHODOLOGY_COPY from '../../data/copy/methodology';
export const readablePercentile = (percentile: number) => { export const readablePercentile = (percentile: number | null) => {
return Math.round(percentile * 100); return percentile ? Math.round(percentile * 100) : 'N/A';
}; };
// Todo: Add internationalization to superscript ticket #582 // Todo: Add internationalization to superscript ticket #582
const getSuperscriptOrdinal = (percentile: number) => { const getSuperscriptOrdinal = (percentile: number | string) => {
const englishOrdinalRules = new Intl.PluralRules('en', { if (typeof percentile === "number") {
type: 'ordinal', const englishOrdinalRules = new Intl.PluralRules('en', {
}); type: 'ordinal',
const suffixes = { });
zero: 'th', const suffixes = {
one: 'st', zero: 'th',
two: 'nd', one: 'st',
few: 'rd', two: 'nd',
many: 'th', few: 'rd',
other: 'th', many: 'th',
}; other: 'th',
return suffixes[englishOrdinalRules.select(percentile)]; };
return suffixes[englishOrdinalRules.select(percentile)];
}
}; };
interface IAreaDetailProps { interface IAreaDetailProps {
@ -40,11 +42,13 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
const intl = useIntl(); const intl = useIntl();
const [isCommunityFocus, setIsCommunityFocus] = React.useState<boolean>(true); const [isCommunityFocus, setIsCommunityFocus] = React.useState<boolean>(true);
const score = properties[constants.SCORE_PROPERTY_HIGH] as number; console.log("Area Detail properies: ", properties);
const blockGroup = properties[constants.GEOID_PROPERTY];
const population = properties[constants.TOTAL_POPULATION]; const score = properties[constants.SCORE_PROPERTY_HIGH] ? properties[constants.SCORE_PROPERTY_HIGH] as number : 0;
const countyName = properties[constants.COUNTY_NAME]; const blockGroup = properties[constants.GEOID_PROPERTY] ? properties[constants.GEOID_PROPERTY] : "N/A";
const stateName = properties[constants.STATE_NAME]; 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(() => { useEffect(() => {
if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) { if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
@ -65,77 +69,92 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
const areaMedianIncome:indicatorInfo = { const areaMedianIncome:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const eduInfo:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const poverty:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const asthma:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const diabetes:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const dieselPartMatter:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const lifeExpect:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const energyBurden:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const pm25:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const leadPaint:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const trafficVolume:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const wasteWater:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const femaRisk:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const heartDisease:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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 = { const houseBurden:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN), label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.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,
}; };

70
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -19,7 +19,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
County: County:
</span> </span>
<span> <span>
undefined N/A
</span> </span>
</li> </li>
<li> <li>
@ -27,7 +27,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
State: State:
</span> </span>
<span> <span>
undefined N/A
</span> </span>
</li> </li>
<li> <li>
@ -134,11 +134,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Asthma Asthma
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -156,11 +154,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Diabetes Diabetes
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -178,11 +174,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Diesel particulate matter Diesel particulate matter
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -200,11 +194,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Energy burden Energy burden
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -222,11 +214,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
FEMA Risk Index FEMA Risk Index
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -244,11 +234,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Heart disease Heart disease
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -288,11 +276,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Lead paint Lead paint
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -310,11 +296,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Life expectancy Life expectancy
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -332,11 +316,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
PM2.5 PM2.5
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -354,11 +336,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Traffic proximity and volume Traffic proximity and volume
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>
@ -376,11 +356,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Wastewater discharge Wastewater discharge
</h4> </h4>
<div> <div>
NaN N/A
<sup> <sup>
<span> <span />
th
</span>
</sup> </sup>
</div> </div>
</div> </div>