mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 23:31:16 -07:00
Add a case if data is not present in tiles (#998)
- will check each property and display N/A if null - update snapshot
This commit is contained in:
Vim
GitHub
parent
5706837956
commit
9d28f5a4c4
2 changed files with 78 additions and 81 deletions
|
|
@ -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<boolean>(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,
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue