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

Update FE to Def M (#1235)

Browse source 
* Update to Def M

- update first column of meth page, formula intro, ID,AND, & remove THEN
- remove Low income box under download box
- update id as disadv. in each category
- modify AND clause in each category
- add dataset Higher ed enrollment
- update snapshots

* Fix HS and higher ed DOM id in links

* Update side panel description to def m

* Fix typo on AND part of the formula

* Update snapshots

* Update snapshot

* Resolve rebase error where Send feedback was removed

- add back send feedback button
- update snapshots

* Add back blue indicator boolean
This commit is contained in:
Vim 2022-02-03 15:07:44 -05:00 • committed by GitHub
parent 9b4d45a96c
commit fb69a09485
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 1227 additions and 856 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

442
client/src/components/AreaDetail/AreaDetail.tsx Normal file
View file

@ -0,0 +1,442 @@
/* eslint-disable quotes */
// External Libs:
import React from 'react';
import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
import {Accordion, Button} from '@trussworks/react-uswds';
// Components:
import Category from '../Category';
import DisadvantageDot from '../DisadvantageDot';
import Indicator from '../Indicator';
// Styles and constants
import * as styles from './areaDetail.module.scss';
import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore';
import * as CONTACT_COPY from '../../data/copy/contact';
// @ts-ignore
// import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail.svg';
interface IAreaDetailProps {
properties: constants.J40Properties,
}
/**
* This interface is used as define the various fields for each indicator in the side panel
* label: the indicator label or title
* description: the description of the indicator used in the side panel
* value: the number from the geoJSON tile
* isDisadvagtaged: the flag from the geoJSON tile
* isPercent: is the value a percent or percentile
* */
export interface indicatorInfo {
label: string,
description: string,
value: number,
isDisadvagtaged: boolean,
isPercent?: boolean,
}
const AreaDetail = ({properties}:IAreaDetailProps) => {
const intl = useIntl();
// console.log the properties of the census that is selected:
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";
const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD;
const feedbackEmailSubject = `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`;
const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
// Define each indicator in the side panel with constants from copy file (for intl)
// Indicators are grouped by category
const expAgLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
value: properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] ?
properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] : null,
};
const expBldLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
value: properties[constants.EXP_BUILDING_LOSS_PERCENTILE] ?
properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] : null,
};
const expPopLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
value: properties[constants.EXP_POPULATION_LOSS_PERCENTILE] ?
properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] : null,
};
const lowInc:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
value: properties[constants.POVERTY_BELOW_200_PERCENTILE] ?
properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] ?
properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : 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] ?
properties[constants.ENERGY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] : 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] ?
properties[constants.PM25_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] : 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] ?
properties[constants.DIESEL_MATTER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] : 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] ?
properties[constants.TRAFFIC_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] : 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] ?
properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] : 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] ?
properties[constants.LEAD_PAINT_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] : null,
};
// const medHomeVal:indicatorInfo = {
// label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.MED_HOME_VAL),
// description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
// value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
// properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
// isDisadvagtaged: false, // TODO
// };
const proxHaz:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
value: properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] ?
properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] : null,
};
const proxNPL:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
value: properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] ?
properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] : null,
};
const proxRMP:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
value: properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] ?
properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] : 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] ?
properties[constants.WASTEWATER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] : 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] ?
properties[constants.ASTHMA_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] : 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] ?
properties[constants.DIABETES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] : 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] ?
properties[constants.HEART_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] : null,
};
const lifeExpect:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
value: properties[constants.LIFE_PERCENTILE] ?
properties[constants.LIFE_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] : null,
};
const lowMedInc:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_MED_INCOME),
value: properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] ?
properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] ?
properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const lingIso:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] ?
properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] : null,
};
const unemploy:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] ?
properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] ?
properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : 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] ?
properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] ?
properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const highSchool:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
value: properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] ?
properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] &&
properties[constants.IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] == 1 ?
true : false,
isPercent: true,
};
// Aggregate indicators based on categories
const categories = [
{
id: 'climate-change',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc],
isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'clean-energy',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
indicators: [energyBurden, pm25, lowInc],
isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'clean-transport',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
indicators: [dieselPartMatter, trafficVolume, lowInc],
isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'sustain-house',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
indicators: [houseBurden, leadPaint, lowInc],
isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'leg-pollute',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
indicators: [proxHaz, proxNPL, proxRMP, lowInc],
isDisadvagtaged: properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'clean-water',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
indicators: [wasteWater, lowInc],
isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'health-burdens',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
indicators: [asthma, diabetes, heartDisease, lifeExpect, lowInc],
isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'work-dev',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
indicators: [lowMedInc, lingIso, unemploy, poverty, highSchool],
isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : null,
},
];
// Create the AccoridionItems by mapping over the categories array. In this array we define the
// various indicators for a specific category. This is an array which then maps over the <Indicator />
// component to render the actual Indicator
const categoryItems = categories.map((category) => ({
id: category.id,
title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged}/>,
content: (
<>
{/* Category Header */}
<div className={styles.categoryHeader}>
<div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.INDICATOR)}</div>
<div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.PERCENTILE)}</div>
</div>
{/* Category Indicators */}
{category.indicators.map((indicator:any, index:number) => {
return <Indicator key={`ind${index}`} indicator={indicator}/>;
})}
</>
),
expanded: false,
}));
return (
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
{/* Methodology version */}
<div className={styles.versionInfo}>
{EXPLORE_COPY.SIDE_PANEL_VERION.TITLE}
</div>
{/* Census Info */}
<ul className={styles.censusRow}>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
</span>
<span className={styles.censusText}>{` ${blockGroup}`}</span>
</li>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
</span>
<span className={styles.censusText}>{` ${countyName}`}</span>
</li>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
</span>
<span className={styles.censusText}>{` ${stateName}`}</span>
</li>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
</span>
<span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
</li>
</ul>
{/* Disadvantaged? */}
<div className={styles.categorization}>
{/* Questions asking if disadvantaged? */}
<div className={styles.isInFocus}>
{EXPLORE_COPY.COMMUNITY.IS_FOCUS}
</div>
{/* YES with Dot or NO with no Dot */}
<div className={styles.communityOfFocus}>
{isCommunityFocus ?
<>
<h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
<DisadvantageDot isDisadvantaged={isCommunityFocus}/>
</> :
<h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
}
</div>
{/* Number of thresholds exceeded */}
<div className={
properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS] > 0 ?
styles.showThresholdExceed : styles.hideThresholdExceed
}>
<FormattedMessage
id={'explore.page.threshold.count.exceed'}
description={"threshold exceeded count"}
defaultMessage={'{disadvCount} of {totalCount} thresholds exceeded'}
values={{
disadvCount: properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS],
totalCount: constants.TOTAL_NUMBER_OF_INDICATORS,
}}/>
</div>
{/* Send Feedback button */}
<a
className={styles.sendFeedbackBtn}
// The mailto string must be on a single line otherwise the email does not display subject and body
href={`
mailto:${CONTACT_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
`}
>
<Button
type="button">
<div>
{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
</div>
{/* <div>
<img src={mailIcon} alt={'mail icon for email'}/>
</div> */}
</Button>
</a>
</div>
{/* All category accordions in this component */}
<Accordion multiselectable={true} items={categoryItems}/>
</aside>
);
};
export default AreaDetail;

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

@ -1,442 +1,3 @@
/* eslint-disable quotes */
// External Libs:
import React from 'react';
import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
import {Accordion, Button} from '@trussworks/react-uswds';
// Components:
import Category from '../Category';
import DisadvantageDot from '../DisadvantageDot';
import Indicator from '../Indicator';
// Styles and constants
import * as styles from './areaDetail.module.scss';
import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore';
import * as CONTACT_COPY from '../../data/copy/contact';
// @ts-ignore
// import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail.svg';
interface IAreaDetailProps {
properties: constants.J40Properties,
}
/**
* This interface is used as define the various fields for each indicator in the side panel
* label: the indicator label or title
* description: the description of the indicator used in the side panel
* value: the number from the geoJSON tile
* isDisadvagtaged: the flag from the geoJSON tile
* isPercent: is the value a percent or percentile
* */
export interface indicatorInfo {
label: string,
description: string,
value: number,
isDisadvagtaged: boolean,
isPercent?: boolean,
}
const AreaDetail = ({properties}:IAreaDetailProps) => {
const intl = useIntl();
// console.log the properties of the census that is selected:
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";
const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD;
const feedbackEmailSubject = `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`;
const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
// Define each indicator in the side panel with constants from copy file (for intl)
// Indicators are grouped by category
const expAgLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
value: properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] ?
properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] : null,
};
const expBldLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
value: properties[constants.EXP_BUILDING_LOSS_PERCENTILE] ?
properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] : null,
};
const expPopLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
value: properties[constants.EXP_POPULATION_LOSS_PERCENTILE] ?
properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] : null,
};
const lowInc:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
value: properties[constants.POVERTY_BELOW_200_PERCENTILE] ?
properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] ?
properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : 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] ?
properties[constants.ENERGY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] : 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] ?
properties[constants.PM25_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] : 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] ?
properties[constants.DIESEL_MATTER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] : 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] ?
properties[constants.TRAFFIC_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] : 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] ?
properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] : 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] ?
properties[constants.LEAD_PAINT_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] : null,
};
// const medHomeVal:indicatorInfo = {
// label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.MED_HOME_VAL),
// description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
// value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
// properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
// isDisadvagtaged: false, // TODO
// };
const proxHaz:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
value: properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] ?
properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] : null,
};
const proxNPL:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
value: properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] ?
properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] : null,
};
const proxRMP:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
value: properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] ?
properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] : 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] ?
properties[constants.WASTEWATER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] : 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] ?
properties[constants.ASTHMA_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] : 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] ?
properties[constants.DIABETES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] : 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] ?
properties[constants.HEART_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] : null,
};
const lifeExpect:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
value: properties[constants.LIFE_PERCENTILE] ?
properties[constants.LIFE_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] : null,
};
const lowMedInc:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_MED_INCOME),
value: properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] ?
properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] ?
properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const lingIso:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] ?
properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] ?
properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] : null,
};
const unemploy:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] ?
properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] ?
properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : 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] ?
properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] ?
properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const highSchool:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
value: properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] ?
properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] &&
properties[constants.IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED] == 1 ?
true : false,
isPercent: true,
};
// Aggregate indicators based on categories
const categories = [
{
id: 'climate-change',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc],
isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'clean-energy',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
indicators: [energyBurden, pm25, lowInc],
isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'clean-transport',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
indicators: [dieselPartMatter, trafficVolume, lowInc],
isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'sustain-house',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
indicators: [houseBurden, leadPaint, lowInc],
isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'leg-pollute',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
indicators: [proxHaz, proxNPL, proxRMP, lowInc],
isDisadvagtaged: properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'clean-water',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
indicators: [wasteWater, lowInc],
isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'health-burdens',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
indicators: [asthma, diabetes, heartDisease, lifeExpect, lowInc],
isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] : null,
},
{
id: 'work-dev',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
indicators: [lowMedInc, lingIso, unemploy, poverty, highSchool],
isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : null,
},
];
// Create the AccoridionItems by mapping over the categories array. In this array we define the
// various indicators for a specific category. This is an array which then maps over the <Indicator />
// component to render the actual Indicator
const categoryItems = categories.map((category) => ({
id: category.id,
title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged}/>,
content: (
<>
{/* Category Header */}
<div className={styles.categoryHeader}>
<div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.INDICATOR)}</div>
<div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.PERCENTILE)}</div>
</div>
{/* Category Indicators */}
{category.indicators.map((indicator:any, index:number) => {
return <Indicator key={`ind${index}`} indicator={indicator}/>;
})}
</>
),
expanded: false,
}));
return (
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
{/* Methodology version */}
<div className={styles.versionInfo}>
{EXPLORE_COPY.SIDE_PANEL_VERION.TITLE}
</div>
{/* Census Info */}
<ul className={styles.censusRow}>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
</span>
<span className={styles.censusText}>{` ${blockGroup}`}</span>
</li>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
</span>
<span className={styles.censusText}>{` ${countyName}`}</span>
</li>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
</span>
<span className={styles.censusText}>{` ${stateName}`}</span>
</li>
<li>
<span className={styles.censusLabel}>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
</span>
<span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
</li>
</ul>
{/* Disadvantaged? */}
<div className={styles.categorization}>
{/* Questions asking if disadvantaged? */}
<div className={styles.isInFocus}>
{EXPLORE_COPY.COMMUNITY.IS_FOCUS}
</div>
{/* YES with Dot or NO with no Dot */}
<div className={styles.communityOfFocus}>
{isCommunityFocus ?
<>
<h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
<DisadvantageDot isDisadvantaged={isCommunityFocus}/>
</> :
<h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
}
</div>
{/* Number of thresholds exceeded */}
<div className={
properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS] > 0 ?
styles.showThresholdExceed : styles.hideThresholdExceed
}>
<FormattedMessage
id={'explore.page.threshold.count.exceed'}
description={"threshold exceeded count"}
defaultMessage={'{disadvCount} of {totalCount} thresholds exceeded'}
values={{
disadvCount: properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS],
totalCount: constants.TOTAL_NUMBER_OF_INDICATORS,
}}/>
</div>
{/* Send Feedback button */}
<a
className={styles.sendFeedbackBtn}
// The mailto string must be on a single line otherwise the email does not display subject and body
href={`
mailto:${CONTACT_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
`}
>
<Button
type="button">
<div>
{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
</div>
{/* <div>
<img src={mailIcon} alt={'mail icon for email'}/>
</div> */}
</Button>
</a>
</div>
{/* All category accordions in this component */}
<Accordion multiselectable={true} items={categoryItems}/>
</aside>
);
};
import AreaDetail from './AreaDetail';
export default AreaDetail;

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

@ -174,7 +174,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -265,7 +268,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -356,7 +362,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -431,7 +440,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Lead paint
<div>
Percent of pre-1960 housing with a median home value is at or below 90th
Percent of pre-1960 housing when median home value is at or below 90th percentile in order to
exclude areas with high value, older homes
</div>
</div>
<div>
@ -449,7 +461,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -558,7 +573,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -631,7 +649,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -763,7 +784,10 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>
<div>
@ -837,7 +861,7 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
Linguistic isolation
<div>
Percent of limited speaking households, which are households where no one over age 14 speaks English well
Percent of households where no one over the age 14 speaks English well
</div>
</div>
@ -902,8 +926,8 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
High school degree achievement rate
<div>
Percent (not a percentile) of people ages 25 years or older whose education level is less than a
high school diploma
Percent of people ages 25 years or older whose education level is less than a high school diploma
when higher ed enrollment rate is less than 20% in order to exclude areas with college and graduate students
</div>
</div>

287
client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
View file

@ -30,6 +30,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -56,20 +65,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -77,6 +93,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -97,20 +122,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -118,6 +150,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -138,20 +179,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -159,6 +207,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -169,7 +226,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
lead paint
</a>
AND
WHEN
<a
href="#median-home"
>
@ -186,20 +243,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -207,6 +271,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -233,20 +306,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -254,6 +334,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -268,20 +357,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -289,6 +385,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -321,20 +426,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -342,6 +454,15 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -378,25 +499,27 @@ exports[`rendering of the Categories checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
where
where the
<a
href="#high-school"
>
the high school degree achievement rates
high school degree achievement rates
</a>
for adults 25 years and older is at or less than 90%
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
rates for adults 25 years and older is at or less than
90% WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
</div>
</DocumentFragment>

4
client/src/components/CategoryCard/CategoryCard.module.scss
View file

@ -13,3 +13,7 @@
@include baseCard;
@include u-bg('blue-cool-5');
}
.idAsDisdvantaged {
font-style: italic;
}

1
client/src/components/CategoryCard/CategoryCard.module.scss.d.ts vendored
View file

@ -1,6 +1,7 @@
declare namespace IndicatorCategoryNamespace {
export interface IIndicatorCategoryScss {
categoryCard: string;
idAsDisdvantaged: string;
}
}

5
client/src/components/CategoryCard/CategoryCard.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
import * as styles from './CategoryCard.module.scss';
interface ICategoryInterface {
categoryInfo: {
TITLE: JSX.Element,
@ -16,6 +16,9 @@ const CategoryCard = ({categoryInfo}: ICategoryInterface) => {
<h3>
{categoryInfo.TITLE}
</h3>
<p className={styles.idAsDisdvantaged}>
{METHODOLOGY_COPY.CATEGORY.ID_AS_DISADV_TEXT}
</p>
<p>
{categoryInfo.IF}
</p>

36
client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
View file

@ -8,6 +8,15 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -34,20 +43,27 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
</DocumentFragment>
`;

2
client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap
View file

@ -19,7 +19,7 @@ exports[`rendering of indicator dataset card checks if component renders 1`] = `
<span>
Used in:
</span>
All methodologies except for training and workforce development
All categories except for training and workforce development
</li>
<li>
<span>

49
client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
View file

@ -49,7 +49,54 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<span>
Used in:
</span>
All methodologies except for training and workforce development
All categories except for training and workforce development
</li>
<li>
<span>
Responsible Party:
</span>
Census
</li>
<li>
<span>
Source:
</span>
<a
class="usa-link usa-link--external"
data-cy=""
href="https://www.census.gov/programs-surveys/acs"
rel="noreferrer"
target="_blank"
>
American Community Survey
</a>
from 2015-2019
</li>
<li>
<span>
Available for:
</span>
All U.S. states and the District of Columbia
</li>
</ul>
</div>
<div
id="high-ed-enroll-rate"
>
<h3>
Higher ed enrollment rate
</h3>
<div>
Percent of people who are currently enrolled in college or graduate school.
</div>
<ul>
<li>
<span>
Used in:
</span>
All categories
</li>
<li>
<span>

9
client/src/components/MethodologyFormula/MethodologyFormula.tsx
View file

@ -1,5 +1,4 @@
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
import * as styles from './MethodologyFormula.module.scss';
@ -9,12 +8,10 @@ import * as styles from './MethodologyFormula.module.scss';
// reserved words.
const MethodologyFormula = () => {
const intl = useIntl();
return (
<section className={styles.formulaContainer}>
<p>
{intl.formatMessage(METHODOLOGY_COPY.PAGE.FORMULA_INTRO)}
{METHODOLOGY_COPY.FORMULA.INTRO}
</p>
<p>
@ -25,9 +22,9 @@ const MethodologyFormula = () => {
{METHODOLOGY_COPY.FORMULA.AND}
</p>
<p>
{/* <p>
{METHODOLOGY_COPY.FORMULA.THEN}
</p>
</p> */}
</section>
);
};

22
client/src/components/MethodologyFormula/__snapshots__/MethodologyFormula.test.tsx.snap
View file

@ -5,26 +5,30 @@ exports[`rendering of the MethodologyFormula checks if component renders 1`] = `
<section>
<p>
Under the current formula, a census tract will be considered disadvantaged:
Under the current formula, a census tract will be
<strong>
identified as disadvantaged
</strong>
in one or more categories of criteria:
</p>
<p>
<span>
IF
</span>
it is above the threshold for one or more climate or environmental indicator
the tract is above the thresholds for a set of environmental, climate or socioeconomic related indicators
</p>
<p>
<span>
AND
</span>
it is above the threshold for one or more socioeconomic indicator
</p>
<p>
<span>
THEN
</span>
the community is considered disadvantaged.
the tract is above the thresholds for another set of income or education related indicators
</p>
</section>
</DocumentFragment>

16
client/src/data/copy/explore.tsx
View file

@ -452,7 +452,10 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
},
LOW_INCOME: {
id: 'areaDetail.indicator.description.low.income',
defaultMessage: 'Household income is less than or equal to twice the federal poverty level',
defaultMessage: `
Household income is less than or equal to twice the federal poverty level when higher ed enrollment
rate is less than 20% in order to exclude areas with college and graduate students
`,
description: 'Household income is less than or equal to twice the federal poverty level',
},
@ -480,7 +483,10 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
LEAD_PAINT: {
id: 'areaDetail.indicator.description.leadPaint',
defaultMessage: 'Percent of pre-1960 housing with a median home value is at or below 90th',
defaultMessage: `
Percent of pre-1960 housing when median home value is at or below 90th percentile in order to
exclude areas with high value, older homes
`,
description: 'Pre-1960 housing',
},
MED_HOME_VAL: {
@ -551,7 +557,7 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
LING_ISO: {
id: 'areaDetail.indicator.description.ling.iso',
defaultMessage: `
Percent of limited speaking households, which are households where no one over age 14 speaks English well
Percent of households where no one over the age 14 speaks English well
`,
description: `Households in which no one age 14 and over speaks English only or also speaks
a language other than English`,
@ -573,8 +579,8 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
HIGH_SKL: {
id: 'areaDetail.indicator.description.high.school',
defaultMessage: `
Percent (not a percentile) of people ages 25 years or older whose education level is less than a
high school diploma
Percent of people ages 25 years or older whose education level is less than a high school diploma
when higher ed enrollment rate is less than 20% in order to exclude areas with college and graduate students
`,
description: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
},

330
client/src/data/copy/methodology.tsx
View file

@ -26,13 +26,6 @@ export const PAGE = defineMessages({
`,
description: 'methodology page paragraph',
},
FORMULA_INTRO: {
id: 'methodology.page.formula.intro',
defaultMessage: `
Under the current formula, a census tract will be considered disadvantaged:
`,
description: 'methodology page introducing the formula',
},
CATEGORY_TEXT: {
id: 'methodology.page.categories.title',
defaultMessage: `
@ -46,9 +39,21 @@ export const PAGE = defineMessages({
export const FORMULA = {
INTRO: <FormattedMessage
id={'methodology.page.formula.intro'}
defaultMessage={`
Under the current formula, a census tract will be {identifiedDis} in one or more categories of criteria:
`}
description={'methodology page introducing the formula'}
values={{
identifiedDis: <strong>identified as disadvantaged</strong>,
}}
/>,
IF: <FormattedMessage
id={'methodology.page.formula.first'}
defaultMessage={ `{if} it is above the threshold for one or more climate or environmental indicator`}
defaultMessage={ `
{if} the tract is above the thresholds for a set of environmental, climate or socioeconomic related indicators
`}
description={'the first part of the formula used in the methodology'}
values= {{
if: <span>IF</span>,
@ -56,7 +61,9 @@ export const FORMULA = {
/>,
AND: <FormattedMessage
id={'methodology.page.formula.second'}
defaultMessage={ `{and} it is above the threshold for one or more socioeconomic indicator`}
defaultMessage={ `
{and} the tract is above the thresholds for another set of income or education related indicators
`}
description={'the second part of the formula used in the methodology'}
values= {{
and: <span>AND</span>,
@ -144,19 +151,59 @@ export const CATEGORY= {
defaultMessage={'Categories'}
description= {'category heading'}
/>,
ID_AS_DISADV_TEXT: <FormattedMessage
id={'methodology.category.card.title'}
defaultMessage={`
Communities are {idAsDisadv} in this category
`}
description= {'category heading'}
values={{
idAsDisadv: <strong>identified as disadvantaged</strong>,
}}
/>,
};
// Category AND Clause:
export const CATEGORY_AND_CLAUSE = {
LOW_INC_65_WHEN_HIGH_ED_LTE_20: <FormattedMessage
id= {'methodology.paage.category.and.clause.low.inc.hs.ed'}
defaultMessage={`
{and} is at or above 65th percentile for {lowIncome} WHEN {highEdEnrollRate} is at or below 20%
`}
description= {'and portion of the formula dealing with lower income and high school degree rate'}
values= {{
and: <strong>AND</strong>,
lowIncome: <a href="#low-income">low income</a>,
highEdEnrollRate: <a href="#high-ed-enroll-rate">higher ed enrollment rate</a>,
}}
/>,
HS_DEG_90_WHEN_HIGH_ED_LTE_20: <FormattedMessage
id= {'methodology.paage.category.and.clause.hs.ed.higher.ed'}
defaultMessage= {`
{and} where the {highSchoolRate} rates for adults 25 years and older is at or less than
90% WHEN {highEdEnrollRate} is at or below 20%
`}
description= {'and portion of the formula dealing with higher ed enrollment and high school degree rate'}
values= {{
and: <strong>AND</strong>,
highSchoolRate: <a href="#high-school">high school degree achievement rates</a>,
highEdEnrollRate: <a href="#high-ed-enroll-rate">higher ed enrollment rate</a>,
}}
/>,
};
// Indicator Categories copy constants:
export const CATEGORIES = {
ALL: {
METHODOLOGY:
<FormattedMessage
id= {'methodologies.all.used.in.text'}
defaultMessage= {`All methodologies except for training and workforce development`}
description= {'used in text for all methodologies'}
/>,
},
ALL: <FormattedMessage
id= {'categories.all.used.in.text'}
defaultMessage= {`All categories`}
description= {'used in text for all methodologies'}
/>,
ALL_EXCEPT_WORKFORCE: <FormattedMessage
id= {'methodologies.all.except.workforce.used.in.text'}
defaultMessage= {`All categories except for training and workforce development`}
description= {'used in text for all methodologies'}
/>,
CLIMATE_CHANGE: {
METHODOLOGY: <FormattedMessage
id= {'indicator.categories.climate.change.methodology'}
@ -181,24 +228,16 @@ export const CATEGORIES = {
expPopLossRate: <a href="#exp-pop-loss-rate">expected population loss rate</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.climate.change.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.climate.change.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.climate.change.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
CLEAN_ENERGY: {
METHODOLOGY: <FormattedMessage
@ -223,24 +262,16 @@ export const CATEGORIES = {
pm25: <a href='#pm-25'>PM2.5 in the air</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.clean.energy.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.clean.energy.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.clean.energy.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
CLEAN_TRANSPORT: {
METHODOLOGY: <FormattedMessage
@ -265,24 +296,16 @@ export const CATEGORIES = {
traffic: <a href='#traffic-vol'>traffic proximity and volume</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.clean.transport.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.clean.transport.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.clean.transport.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
AFFORDABLE_HOUSING: {
METHODOLOGY: <FormattedMessage
@ -298,7 +321,7 @@ export const CATEGORIES = {
IF: <FormattedMessage
id= {'indicator.categories.afford.house.if'}
defaultMessage= {`
{if} at or above 90th percentile for {lead} AND {medianHomeVal} is at or less than
{if} at or above 90th percentile for {lead} WHEN {medianHomeVal} is at or less than
90th percentile OR at or above the 90th percentile for the {houseBur}
`}
description= {'if portion of the formula'}
@ -309,24 +332,16 @@ export const CATEGORIES = {
houseBur: <a href='#house-burden'>housing cost burden</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.afford.house.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.afford.house.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.afford.house.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
LEGACY_POLLUTION: {
METHODOLOGY: <FormattedMessage
@ -352,24 +367,16 @@ export const CATEGORIES = {
proxRMP: <a href='#prox-rmp'>proximity to RMP facilities</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.legacy.pollution.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.legacy.pollution.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.legacy.pollution.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
CLEAN_WATER: {
METHODOLOGY: <FormattedMessage
@ -393,24 +400,16 @@ export const CATEGORIES = {
wasteWater: <a href='#waste-water'>wastewater discharge</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.clean.water.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.clean.water.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.clean.water.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
HEALTH_BURDENS: {
METHODOLOGY: <FormattedMessage
@ -437,24 +436,16 @@ export const CATEGORIES = {
life: <a href='#life-exp'>low life expectancy</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.health.burdens.and'}
defaultMessage= {'{and} is low income{asterisk}'}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
asterisk: <sup>*</sup>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.health.burdens.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.LOW_INC_65_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.health.burdens.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
WORKFORCE_DEV: {
METHODOLOGY: <FormattedMessage
@ -484,26 +475,16 @@ export const CATEGORIES = {
poverty: <a href='#poverty'>poverty</a>,
}}
/>,
AND: <FormattedMessage
id= {'indicator.categories.work.dev.and'}
defaultMessage= {`
{and} where {highSchool} for adults 25 years and older is at or less than 90%
`}
description= {'and portion of the formula'}
values= {{
and: <strong>AND</strong>,
highSchool: <a href='#high-school'>the high school degree achievement rates</a>,
}}
/>,
THEN: <FormattedMessage
id= {'indicator.categories.work.dev.then'}
defaultMessage= {'{then} the community is disadvantaged.'}
description= {'then portion of the formula'}
values= {{
then: <strong>THEN</strong>,
asterisk: <sup>*</sup>,
}}
/>,
AND: CATEGORY_AND_CLAUSE.HS_DEG_90_WHEN_HIGH_ED_LTE_20,
// THEN: <FormattedMessage
// id= {'indicator.categories.work.dev.then'}
// defaultMessage= {'{then} the community is disadvantaged.'}
// description= {'then portion of the formula'}
// values= {{
// then: <strong>THEN</strong>,
// asterisk: <sup>*</sup>,
// }}
// />,
},
};
@ -836,7 +817,26 @@ export const INDICATORS = [
`}
description= {'description text for low income'}
/>,
usedIn: CATEGORIES.ALL.METHODOLOGY,
usedIn: CATEGORIES.ALL_EXCEPT_WORKFORCE,
responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
sources: [
{
source: SOURCE_LINKS.CENSUS_ACS_15_19,
availableFor: AVAILABLE_FOR.ALL_US_DC,
},
],
},
{
domID: 'high-ed-enroll-rate',
indicator: 'Higher ed enrollment rate',
description: <FormattedMessage
id= {'category.high.ed.enroll.rate.description.text'}
defaultMessage= {`
Percent of people who are currently enrolled in college or graduate school.
`}
description= {'description text for low income'}
/>,
usedIn: CATEGORIES.ALL,
responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
sources: [
{

376
client/src/pages/__snapshots__/methodology.test.tsx.snap
View file

@ -302,31 +302,33 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<section>
<p>
Under the current formula, a census tract will be considered disadvantaged:
Under the current formula, a census tract will be
<strong>
identified as disadvantaged
</strong>
in one or more categories of criteria:
</p>
<p>
<span>
IF
</span>
it is above the threshold for one or more climate or environmental indicator
the tract is above the thresholds for a set of environmental, climate or socioeconomic related indicators
</p>
<p>
<span>
AND
</span>
it is above the threshold for one or more socioeconomic indicator
</p>
<p>
<span>
THEN
</span>
the community is considered disadvantaged.
the tract is above the thresholds for another set of income or education related indicators
</p>
</section>
<section
class="j40-mt-7"
>
<section>
<p>
Communities will be defined as disadvantaged for the purposes of Justice40 if they meet
@ -384,20 +386,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</div>
<div>
<p>
<sup>
*
</sup>
Low Income
</p>
<p>
At or above 65th percentile for percent of census tract population of households where household
income is at or below 200% of the federal poverty level
</p>
</div>
</div>
</div>
</div>
@ -429,6 +417,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -455,20 +452,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -476,6 +480,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -496,20 +509,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -517,6 +537,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -537,20 +566,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -558,6 +594,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -568,7 +613,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
lead paint
</a>
AND
WHEN
<a
href="#median-home"
>
@ -585,20 +630,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -606,6 +658,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -632,20 +693,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -653,6 +721,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -667,20 +744,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -688,6 +772,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -720,20 +813,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
is low income
<sup>
*
</sup>
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
is at or above 65th percentile for
<a
href="#low-income"
>
low income
</a>
WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
<div>
<h3>
@ -741,6 +841,15 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</h3>
<p>
Communities are
<strong>
identified as disadvantaged
</strong>
in this category
</p>
<p>
<strong>
IF
@ -777,25 +886,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</p>
<p>
<strong>
AND
</strong>
where
where the
<a
href="#high-school"
>
the high school degree achievement rates
high school degree achievement rates
</a>
for adults 25 years and older is at or less than 90%
</p>
<p>
<strong>
THEN
</strong>
the community is disadvantaged.
rates for adults 25 years and older is at or less than
90% WHEN
<a
href="#high-ed-enroll-rate"
>
higher ed enrollment rate
</a>
is at or below 20%
</p>
<p />
</div>
</div>
<div
@ -845,7 +956,54 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<span>
Used in:
</span>
All methodologies except for training and workforce development
All categories except for training and workforce development
</li>
<li>
<span>
Responsible Party:
</span>
Census
</li>
<li>
<span>
Source:
</span>
<a
class="usa-link usa-link--external"
data-cy=""
href="https://www.census.gov/programs-surveys/acs"
rel="noreferrer"
target="_blank"
>
American Community Survey
</a>
from 2015-2019
</li>
<li>
<span>
Available for:
</span>
All U.S. states and the District of Columbia
</li>
</ul>
</div>
<div
id="high-ed-enroll-rate"
>
<h3>
Higher ed enrollment rate
</h3>
<div>
Percent of people who are currently enrolled in college or graduate school.
</div>
<ul>
<li>
<span>
Used in:
</span>
All categories
</li>
<li>
<span>

12
client/src/pages/methodology.tsx
View file

@ -8,8 +8,6 @@ import DownloadPacket from '../components/DownloadPacket';
import J40MainGridContainer from '../components/J40MainGridContainer';
import MethodologyFormula from '../components/MethodologyFormula';
import Layout from '../components/layout';
import LowIncome from '../components/LowIncome';
// import ScoreStepsList from '../components/scoreStepsList';
import * as METHODOLOGY_COPY from '../data/copy/methodology';
@ -40,7 +38,7 @@ const IndexPage = ({location}: MethodPageProps) => {
<MethodologyFormula />
{/* Category description */}
<section className={`j40-mt-7`}>
<section>
<p>
{intl.formatMessage(METHODOLOGY_COPY.PAGE.CATEGORY_TEXT)}
</p>
@ -50,7 +48,6 @@ const IndexPage = ({location}: MethodPageProps) => {
{/* Second column */}
<Grid col={12} tablet={{col: 4}}>
<DownloadPacket />
<LowIncome />
</Grid>
</Grid>
</J40MainGridContainer>
@ -58,13 +55,6 @@ const IndexPage = ({location}: MethodPageProps) => {
<Categories />
<DatasetContainer/>
{/* <J40MainGridContainer>
<Grid row>
<Grid col>
<ScoreStepsList/>
</Grid>
</Grid>
</J40MainGridContainer> */}
</Layout>
);
};

5
client/src/styles/global.scss
View file

@ -91,11 +91,6 @@ p.flush {
@include u-margin-bottom(5)
}
// 56 pixel margin-top
.j40-mt-7 {
@include u-margin-top(7)
}
.j40-footer-ceq-font {
@include j40-element('lg', 2, 'bold', 0 );
}