mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-12 00:04:18 -07:00
Update FE to Def M (#1235)
* 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
GitHub
parent
9b4d45a96c
commit
fb69a09485
17 changed files with 1227 additions and 856 deletions
442
client/src/components/AreaDetail/AreaDetail.tsx
Normal file
442
client/src/components/AreaDetail/AreaDetail.tsx
Normal 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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -13,3 +13,7 @@
|
|||
@include baseCard;
|
||||
@include u-bg('blue-cool-5');
|
||||
}
|
||||
|
||||
.idAsDisdvantaged {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
declare namespace IndicatorCategoryNamespace {
|
||||
export interface IIndicatorCategoryScss {
|
||||
categoryCard: string;
|
||||
idAsDisdvantaged: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue