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

Updated side panel for score L launch (#1022)

Browse source 
* Remove un-needed state and useEffect vars

* Add initial Accordion UI to side panel

- abstract out Indicators to separate component
- add snapshot test
- define new indicators in EXPLORE copy
- intl copy to AreaDetail component

* Make side panel indicators styling match design

* Rename export IndicatorCategory -> CategoryCard

* Add disadvangted dots to category and indicators

- add new Category component
- add new DisadvantageDot component
- make copy corrections
- comment out send feedback link in side panel

* Integrate MapLegend's dot into component

- change color to 'blue-warm-70v'
- update map stroke to 'blue-warm-70v'

* Add new indicator names from BE

- add abbreviations and use key in json file to decode
This commit is contained in:
Vim 2021-12-13 15:52:27 -05:00 • committed by GitHub
commit 8a0e3a1293
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 1780 additions and 825 deletions
Download patch file Download diff file Expand all files Collapse all files

88
client/src/components/AreaDetail/areaDetail.module.scss
View file

@ -1,30 +1,19 @@
@use '../../styles/design-system.scss' as *;
@import "../utils.scss";
$sidePanelLabelFontColor: #171716;
@mixin sidePanelLabelStyle {
font-size: small;
font-size: medium;
color: $sidePanelLabelFontColor;
font-weight: 600;
}
@mixin categorizationCircleStyle {
height: 0.6rem;
width: 0.6rem;
border-radius: 100%;
align-self: center;
margin-top: 2rem;
margin-right: 0.5rem;
opacity: 0.6;
}
@mixin indicatorBox {
display: flex;
flex-direction: column;
padding: 0 1rem 1.5rem;
&:last-child {
border-bottom: none;
}
.versionInfo {
padding: .5rem 1rem .5rem 1.2rem;
font-size: medium;
font-weight: bold;
border-bottom: 1px solid $sidePanelBorderColor;
}
.areaDetailContainer {
@ -39,14 +28,25 @@ $sidePanelLabelFontColor: #171716;
align-items: center;
padding-bottom: 2rem;
.isInFocus {
padding: .5rem 1rem .25rem 1.2rem;
font-size: small;
font-weight: bold;
@include u-margin-top(2);
}
.communityOfFocus {
display: flex;
.communityOfFocusCircle {
@include categorizationCircleStyle;
background: #1a4480;
h3 {
margin-top: 0;
margin-bottom: 0;
}
}
.feedbackLink {
font-size: small;
@include u-margin-top(1);
}
}
@ -64,12 +64,10 @@ $sidePanelLabelFontColor: #171716;
}
.censusText {
font-size: small;
font-size: medium;
}
}
//Divider styles
.divider {
@include sidePanelLabelStyle;
@ -79,45 +77,3 @@ $sidePanelLabelFontColor: #171716;
border-top: 1px solid $sidePanelBorderColor;
border-bottom: 1px solid $sidePanelBorderColor;
}
//Indicator box styles
.indicatorBoxMain {
@include indicatorBox;
border-bottom: $sidePanelBorder;
}
.indicatorBoxAdditional {
@include indicatorBox;
border-bottom: 1px solid #1b1b1b;
background-color: $additionalCardsBGColor;
}
.indicatorRow {
display: flex;
@media screen and (max-width: $mobileBreakpoint) {
flex: 1 0 40%;
align-self: inherit;
padding-left: 3rem;
padding-top: 1rem;
}
.indicatorName {
flex: 0 1 77%;
}
.indicatorValue {
margin-top: 1.2rem;
margin-left: 2.2rem;
.indicatorSuperscript {
top: -0.2em
}
}
.indicatorDesc {
max-width: 10rem;
}
}

10
client/src/components/AreaDetail/areaDetail.module.scss.d.ts vendored
View file

@ -8,13 +8,9 @@ declare namespace MapModuleScssNamespace {
censusLabel:string;
censusText: string;
divider:string;
indicatorBoxMain:string;
indicatorBoxAdditional:string;
indicatorRow:string;
indicatorName:string;
indicatorValue:string;
indicatorSuperscript:string;
indicatorDesc:string;
feedbackLink:string;
isInFocus:string;
versionInfo: string;
}
}

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

@ -1,46 +1,32 @@
/* eslint-disable quotes */
// External Libs:
import React, {useEffect} from 'react';
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {Accordion} from '@trussworks/react-uswds';
// Components:
// import {Accordion} from '@trussworks/react-uswds';
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 METHODOLOGY_COPY from '../../data/copy/methodology';
export const readablePercentile = (percentile: number | null) => {
return percentile ? Math.round(percentile * 100) : 'N/A';
};
// Todo: Add internationalization to superscript ticket #582
const getSuperscriptOrdinal = (percentile: number | string) => {
if (typeof percentile === "number") {
const englishOrdinalRules = new Intl.PluralRules('en', {
type: 'ordinal',
});
const suffixes = {
zero: 'th',
one: 'st',
two: 'nd',
few: 'rd',
many: 'th',
other: 'th',
};
return suffixes[englishOrdinalRules.select(percentile)];
}
};
interface IAreaDetailProps {
properties: constants.J40Properties,
}
export interface indicatorInfo {
label: string,
description: string,
value: number,
isDisadvagtaged: boolean,
}
const AreaDetail = ({properties}:IAreaDetailProps) => {
const intl = useIntl();
const [isCommunityFocus, setIsCommunityFocus] = React.useState<boolean>(true);
console.log("Area Detail properies: ", properties);
@ -50,122 +36,298 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
useEffect(() => {
if (score >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
setIsCommunityFocus(true);
} else {
setIsCommunityFocus(false);
}
}, [score]);
const isCommunityFocus = score >= constants.SCORE_BOUNDARY_PRIORITIZED;
// const sidePanelFeedbackHref = `
// mailto:screeningtool.feedback@usds.gov?subject=Feedback on Census Tract: ${blockGroup}
// `;
interface indicatorInfo {
label: string,
description: string,
value: number,
}
// 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,
};
// Todo: Ticket #367 will be replacing descriptions with YAML file
const areaMedianIncome:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.AREA_MEDIAN_INCOME),
value: properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] ?
properties[constants.AREA_MEDIAN_INCOME_PERCENTILE] : null,
};
const eduInfo:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EDUCATION),
value: properties[constants.EDUCATION_PROPERTY_PERCENTILE] ?
properties[constants.EDUCATION_PROPERTY_PERCENTILE] : null,
};
const poverty:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
value: properties[constants.POVERTY_PROPERTY_PERCENTILE] ?
properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
};
const asthma:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
value: properties[constants.ASTHMA_PERCENTILE] ?
properties[constants.ASTHMA_PERCENTILE] : null,
};
const diabetes:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
value: properties[constants.DIABETES_PERCENTILE] ?
properties[constants.DIABETES_PERCENTILE] : null,
};
const dieselPartMatter:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
value: properties[constants.DIESEL_MATTER_PERCENTILE] ?
properties[constants.DIESEL_MATTER_PERCENTILE] : null,
};
const lifeExpect:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LIFE_EXPECT),
value: properties[constants.LIFE_PERCENTILE] ?
properties[constants.LIFE_PERCENTILE] : null,
};
const energyBurden:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
value: properties[constants.ENERGY_PERCENTILE] ?
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 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,
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 femaRisk:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FEMA_RISK),
value: properties[constants.FEMA_PERCENTILE] ?
properties[constants.FEMA_PERCENTILE] : null,
const asthma:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
value: properties[constants.ASTHMA_PERCENTILE] ?
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 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,
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_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 indicators = [areaMedianIncome, eduInfo, poverty];
const additionalIndicators = [
asthma, diabetes, dieselPartMatter, energyBurden, femaRisk, heartDisease,
houseBurden, leadPaint, lifeExpect, pm25, trafficVolume, wasteWater,
// 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_L] ?
properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_L] : 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_L] ?
properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_L] : 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_L] ?
properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_L] : 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_L] ?
properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_L] : 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_L] ?
properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'clean-water',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
indicators: [wasteWater, lowInc],
isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] ?
properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] : 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_L] ?
properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'work-dev',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
indicators: [lowMedInc, lingIso, unemploy, poverty],
isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] ?
properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] : 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.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}>
@ -192,139 +354,27 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
<span className={styles.censusText}>{` ${population.toLocaleString()}`}</span>
</li>
</ul>
{/* Disadvantaged? */}
<div className={styles.categorization}>
<div className={styles.isInFocus}>
{EXPLORE_COPY.COMMUNITY.IS_FOCUS}
</div>
<div className={styles.communityOfFocus}>
{isCommunityFocus ?
<>
<div className={styles.communityOfFocusCircle} />
<h3>{EXPLORE_COPY.COMMUNITY.OF_FOCUS}</h3>
<DisadvantageDot isDisadvantaged={isCommunityFocus}/>
</> :
<h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
}
</div>
<p className={"secondary"}>version {METHODOLOGY_COPY.VERSION_NUMBER}</p>
</div>
<div className={styles.divider}>
<h6>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.INDICATOR_COLUMN_HEADER)}
</h6>
<h6>
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PERCENTILE_COLUMN_HEADER)}
</h6>
{/* eslint-disable-next-line max-len */}
{/* <a className={styles.feedbackLink} href={sidePanelFeedbackHref}>{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK}</a> */}
</div>
<>
{
indicators.map((indicator:any, index:number) => {
return <li key={`ind${index}`} className={styles.indicatorBoxMain} data-cy={'indicatorBox'}>
<div className={styles.indicatorRow}>
<h4 className={styles.indicatorName}>{indicator.label}</h4>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}
<sup className={styles.indicatorSuperscript}><span>
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
</span></sup>
</div>
</div>
<p className={'secondary j40-indicator'}>
{indicator.description}
</p>
</li>;
})
}
</>
<>
{
additionalIndicators.map((indicator:any, index:number) => {
return <li
key={`ind${index}`}
className={styles.indicatorBoxAdditional}
data-cy={'indicatorBox'}>
<div className={styles.indicatorRow}>
<h4 className={styles.indicatorName}>{indicator.label}</h4>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}
<sup className={styles.indicatorSuperscript}><span>
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
</span></sup>
</div>
</div>
<p className={'secondary j40-indicator'}>
{indicator.description}
</p>
</li>;
})
}
</>
{/* Temporarily remove Accordions and may place back in later, removed unused
className prop as as styles are based on the id of the Accordion Item */}
{/* <Accordion
multiselectable={true}
items={
[
{
id: 'prioritization-indicators',
title: 'Indicators',
content: (
<>
{
indicators.map((indicator:any, index:number) => {
return <li key={`ind${index}`} className={styles.indicatorBoxMain} data-cy={'indicatorBox'}>
<div className={styles.indicatorRow}>
<h4 className={styles.indicatorName}>{indicator.label}</h4>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}
<sup className={styles.indicatorSuperscript}><span>
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
</span></sup>
</div>
</div>
<p className={'secondary j40-indicator'}>
{indicator.description}
</p>
</li>;
})
}
</>
),
expanded: true,
},
{
id: 'additional-indicators',
title: 'Additional indicators (not used in prioritization)',
content: (
(
<>
{
additionalIndicators.map((indicator:any, index:number) => {
return <li
key={`ind${index}`}
className={styles.indicatorBoxAdditional}
data-cy={'indicatorBox'}>
<div className={styles.indicatorRow}>
<h4 className={styles.indicatorName}>{indicator.label}</h4>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}
<sup className={styles.indicatorSuperscript}><span>
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
</span></sup>
</div>
</div>
<p className={'secondary j40-indicator'}>
{indicator.description}
</p>
</li>;
})
}
</>
)
),
expanded: true,
},
]
}/> */}
{/* All category accordions in this component */}
<Accordion multiselectable={true} items={categoryItems}/>
</aside>
);

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

File diff suppressed because it is too large Load diff

8
client/src/components/AreaDetail/tests/areaDetail.test.tsx
View file

@ -1,6 +1,6 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import AreaDetail, {readablePercentile} from '..';
import AreaDetail from '..';
import {LocalizedComponent} from '../../../test/testHelpers';
import * as constants from '../../../data/constants';
@ -29,9 +29,3 @@ describe('rendering of the AreaDetail', () => {
});
});
describe('tests the readablePercentile function', () => {
expect(readablePercentile(.98)).toEqual(98);
expect(readablePercentile(.07)).toEqual(7);
expect(readablePercentile(.123)).toEqual(12);
expect(readablePercentile(.789)).toEqual(79);
});

4
client/src/components/Categories/Categories.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import {Grid} from '@trussworks/react-uswds';
import IndicatorCategory from '../CategoryCard';
import CategoryCard from '../CategoryCard';
import J40MainGridContainer from '../J40MainGridContainer';
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
@ -33,7 +33,7 @@ const Categories = () => {
<J40MainGridContainer className={styles.categoriesContainer}>
{
categories.map((category, index) => <IndicatorCategory key={index} categoryInfo={category} />)
categories.map((category, index) => <CategoryCard key={index} categoryInfo={category} />)
}
</J40MainGridContainer>
</>

6
client/src/components/Category/Category.module.scss Normal file
View file

@ -0,0 +1,6 @@
@use '../../styles/design-system.scss' as *;
.categoryContainer {
display: flex;
justify-content: space-between;
}

13
client/src/components/Category/Category.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
declare namespace CategoryNamespace {
export interface ICategoryScss {
categoryContainer: string;
disadvantageDot: string;
}
}
declare const CategoryScssModule: CategoryNamespace.ICategoryScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: CategoryNamespace.ICategoryScss;
};
export = CategoryScssModule;

28
client/src/components/Category/Category.test.tsx Normal file
View file

@ -0,0 +1,28 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import Category from './Category';
describe('rendering of the Category disadvantaged', () => {
const {asFragment} = render(
<LocalizedComponent>
<Category name={'test name'} isDisadvantaged={true}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});
describe('rendering of the Category non-disadvantaged', () => {
const {asFragment} = render(
<LocalizedComponent>
<Category name={'test name'} isDisadvantaged={false}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

22
client/src/components/Category/Category.tsx Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
import DisadvantageDot from '../DisadvantageDot';
import * as styles from './Category.module.scss';
interface ICategory {
name: string;
isDisadvantaged: boolean;
}
const Category = ({name, isDisadvantaged}:ICategory) => {
return (
<div className={styles.categoryContainer}>
<div>
{name}
</div>
<DisadvantageDot isDisadvantaged={isDisadvantaged}/>
</div>
);
};
export default Category;

14
client/src/components/Category/__snapshots__/Category.test.tsx.snap Normal file
View file

@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the Category disadvantaged checks if component renders 1`] = `
<DocumentFragment>
<div>
<div>
test name
</div>
<div />
</div>
</DocumentFragment>
`;
exports[`rendering of the Category non-disadvantaged checks if component renders 1`] = `<DocumentFragment />`;

3
client/src/components/Category/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import Category from './Category';
export default Category;

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

@ -10,7 +10,7 @@ interface ICategoryInterface {
THEN: JSX.Element
}
}
const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => {
const CategoryCard = ({categoryInfo}: ICategoryInterface) => {
return (
<div className={styles.categoryCard}>
<h3>
@ -29,4 +29,4 @@ const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => {
);
};
export default IndicatorCategory;
export default CategoryCard;

19
client/src/components/DisadvantageDot/DisadvantageDot.module.scss Normal file
View file

@ -0,0 +1,19 @@
@use '../../styles/design-system.scss' as *;
.disadvantagedDotSmall {
@include u-circle('105');
@include u-margin-left(1);
align-self: center;
@include u-bg('blue-warm-70v');
}
.disadvantagedDotBig {
@include u-circle(4);
margin: 2.3rem 1.5rem 2rem 0;
opacity: .6;
//Maintain aspect ratio as screen width decreases
flex: 1 0 2rem;
@include u-bg('blue-warm-70v');
}

14
client/src/components/DisadvantageDot/DisadvantageDot.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,14 @@
declare namespace DisadvantagedDotNamespace {
export interface IDisadvantagedDot {
disadvantagedDotBig: string;
disadvantagedDotSmall: string;
}
}
declare const DisadvantagedDotModule: DisadvantagedDotNamespace.IDisadvantagedDot & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: DisadvantagedDotNamespace.IDisadvantagedDot;
};
export = DisadvantagedDotModule;

16
client/src/components/DisadvantageDot/DisadvantageDot.test.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import DisadvantageDot from './DisadvantageDot';
describe('rendering of the DisadvantageDot disadvantaged', () => {
const {asFragment} = render(
<LocalizedComponent>
<DisadvantageDot isDisadvantaged={true}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

23
client/src/components/DisadvantageDot/DisadvantageDot.tsx Normal file
View file

@ -0,0 +1,23 @@
import React from 'react';
import * as styles from './DisadvantageDot.module.scss';
interface IDisadvantageDot {
isDisadvantaged?: boolean;
isBig?: boolean;
}
const DisadvantageDot = ({isDisadvantaged = false, isBig}:IDisadvantageDot) => {
let computedClass = '';
if (isBig) {
computedClass = styles.disadvantagedDotBig;
} else {
computedClass = isDisadvantaged ? styles.disadvantagedDotSmall : '';
}
return (
<div className={computedClass} />
);
};
export default DisadvantageDot;

7
client/src/components/DisadvantageDot/__snapshots__/DisadvantageDot.test.tsx.snap Normal file
View file

@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the DisadvantageDot disadvantaged checks if component renders 1`] = `
<DocumentFragment>
<div />
</DocumentFragment>
`;

3
client/src/components/DisadvantageDot/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import DisadvantageDot from './DisadvantageDot';
export default DisadvantageDot;

59
client/src/components/Indicator/Indicator.module.scss Normal file
View file

@ -0,0 +1,59 @@
@use '../../styles/design-system.scss' as *;
@import "../utils.scss";
@mixin indicator {
display: flex;
flex-direction: column;
@include u-padding-bottom(3);
&:last-child {
border-bottom: none;
@include u-padding-bottom(0);
}
.indicatorRow {
display: flex;
@media screen and (max-width: $mobileBreakpoint) {
flex: 1 0 40%;
align-self: inherit;
padding-left: 3rem;
padding-top: 1rem;
}
.indicatorName {
flex: 0 1 77%;
display: flex;
flex-direction: column;
@include typeset('sans', '2xs', 2);
@include u-text('bold');
.indicatorDesc {
@include typeset('sans', '3xs', 2);
@include u-text('normal');
max-width: 12rem;
@include u-margin-top(0);
@media screen and (max-width: 1024px) {
max-width: 80%;
}
}
}
.indicatorValue {
margin-left: 2.2rem;
.indicatorSuperscript {
top: -0.2em
}
}
}
}
//Indicator box styles
.indicatorBoxMain {
@include indicator;
}
.disadvantagedIndicator {
@include indicator;
@include u-text('blue-warm-70v');
}

19
client/src/components/Indicator/Indicator.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,19 @@
declare namespace IndicatorNamespace {
export interface IIndicatorScss {
indicatorBoxMain:string;
indicatorBoxAdditional:string;
indicatorRow:string;
indicatorName:string;
indicatorValue:string;
indicatorSuperscript:string;
indicatorDesc:string;
disadvantagedIndicator:string;
}
}
declare const IndicatorScssModule: IndicatorNamespace.IIndicatorScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: IndicatorNamespace.IIndicatorScss;
};
export = IndicatorScssModule;

30
client/src/components/Indicator/Indicator.test.tsx Normal file
View file

@ -0,0 +1,30 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import Indicator, {readablePercentile} from './Indicator';
import {indicatorInfo} from '../AreaDetail';
const highSchool:indicatorInfo = {
label: 'some label',
description: 'some description',
value: 97,
};
describe('rendering of the Indicator', () => {
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={highSchool}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});
describe('tests the readablePercentile function', () => {
expect(readablePercentile(.98)).toEqual(98);
expect(readablePercentile(.07)).toEqual(7);
expect(readablePercentile(.123)).toEqual(12);
expect(readablePercentile(.789)).toEqual(79);
});

55
client/src/components/Indicator/Indicator.tsx Normal file
View file

@ -0,0 +1,55 @@
import React from 'react';
import {indicatorInfo} from '../AreaDetail';
import * as styles from './Indicator.module.scss';
interface IIndicator {
indicator: indicatorInfo,
}
export const readablePercentile = (percentile: number | null) => {
return percentile ? Math.round(percentile * 100) : 'N/A';
};
// Todo: Add internationalization to superscript ticket #582
export const getSuperscriptOrdinal = (percentile: number | string) => {
if (typeof percentile === 'number') {
const englishOrdinalRules = new Intl.PluralRules('en', {
type: 'ordinal',
});
const suffixes = {
zero: 'th',
one: 'st',
two: 'nd',
few: 'rd',
many: 'th',
other: 'th',
};
return suffixes[englishOrdinalRules.select(percentile)];
}
};
const Indicator = ({indicator}:IIndicator) => {
return (
<li
className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
data-cy={'indicatorBox'}>
<div className={styles.indicatorRow}>
<div className={styles.indicatorName}>
{indicator.label}
<div className={styles.indicatorDesc}>
{indicator.description}
</div>
</div>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}
<sup className={styles.indicatorSuperscript}><span>
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
</span></sup>
</div>
</div>
</li>
);
};
export default Indicator;

26
client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap Normal file
View file

@ -0,0 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the Indicator checks if component renders 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
9700
<sup>
<span>
th
</span>
</sup>
</div>
</div>
</li>
</DocumentFragment>
`;

3
client/src/components/Indicator/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import Indicator from './Indicator';
export default Indicator;

5
client/src/components/MapLegend/index.tsx
View file

@ -3,13 +3,14 @@ import {useIntl} from 'gatsby-plugin-intl';
import * as styles from './mapLegend.module.scss';
import * as EXPLORE_COPY from '../../data/copy/explore';
import DisadvantageDot from '../DisadvantageDot';
const MapLegend = () => {
const intl = useIntl();
return (
<div className={styles.legendContainer}>
<div className={styles.colorSwatch} />
<div>
<DisadvantageDot isBig={true} />
<div className={styles.legendTextBox}>
<div className={'j40-h4'}>
{intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
</div>

23
client/src/components/MapLegend/mapLegend.module.scss
View file

@ -1,26 +1,17 @@
@import "../utils.scss";
$min-color: #fafaf8;
$med-color: rgba(26, 68, 128, 0.2);
$max-color: rgba(26, 68, 128, 0.6);
$alertInfoColor: #e7f6f8;
.legendContainer {
display: flex;
margin: 1rem 0 1rem 2.5rem;
border: 1px solid #DFE1E2;
padding: .5rem 1.5rem 1rem 1.5rem;
margin: 1rem 0 1rem 2.5rem;
padding: 0 1.5rem 1rem 1.5rem;
.legendTextBox {
// Set maximum width for text area so that blue dot
// doesn't lose aspect ratio
flex-basis: 88%;
}
@media screen and (max-width: 640px) {
margin: 1rem 0 0;
}
}
.colorSwatch {
flex: 1 0 2rem;
box-sizing: border-box;
height: 2rem;
margin: 2rem 1.5rem 2rem 0;
border-radius: 50%;
background-color: $max-color;
}

2
client/src/components/MapLegend/mapLegend.module.scss.d.ts vendored
View file

@ -1,7 +1,7 @@
declare namespace HowYouCanHelpModuleScssNamespace {
export interface IHowYouCanHelpModuleScss {
legendContainer: string;
colorSwatch: string;
legendTextBox: string;
}
}

93
client/src/data/constants.tsx
View file

@ -30,7 +30,7 @@ export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('low');
export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
// Properties
export const SCORE_PROPERTY_HIGH = 'Definition L (percentile)';
export const SCORE_PROPERTY_HIGH = 'SL_PFS';
export const SCORE_PROPERTY_LOW = 'L_SCORE';
export const GEOID_PROPERTY = 'GEOID10';
export const HIGH_SCORE_SOURCE_NAME = 'score-high';
@ -42,28 +42,73 @@ export const CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME = 'currently-select
export const BLOCK_GROUP_BOUNDARY_LAYER_NAME = 'block-group-boundary-layer';
// Properties
export const POVERTY_PROPERTY_PERCENTILE = 'Poverty (Less than 200% of federal poverty line) (percentile)';
export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'Housing burden (percent) (percentile)';
export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'Linguistic isolation (percent) (percentile)';
export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'Unemployed civilians (percent) (percentile)';
export const TOTAL_POPULATION = 'Total population';
export const EDUCATION_PROPERTY_PERCENTILE =
`Percent individuals age 25 or over with less than high school degree (percentile)`;
export const COUNTY_NAME = 'County Name';
export const STATE_NAME = 'State Name';
export const DIABETES_PERCENTILE = 'Diagnosed diabetes among adults aged >=18 years (percentile)';
export const ASTHMA_PERCENTILE = 'Current asthma among adults aged >=18 years (percentile)';
export const HEART_PERCENTILE = 'Coronary heart disease among adults aged >=18 years (percentile)';
export const LIFE_PERCENTILE = 'Life expectancy (years) (percentile)';
export const TRAFFIC_PERCENTILE = 'Traffic proximity and volume (percentile)';
export const FEMA_PERCENTILE = 'FEMA Risk Index Expected Annual Loss Score (percentile)';
export const ENERGY_PERCENTILE = 'Energy burden (percentile)';
export const WASTEWATER_PERCENTILE = 'Wastewater discharge (percentile)';
export const LEAD_PAINT_PERCENTILE = 'Percent pre-1960s housing (lead paint indicator) (percentile)';
export const DIESEL_MATTER_PERCENTILE = 'Diesel particulate matter (percentile)';
export const PM25_PERCENTILE = 'Particulate matter (PM2.5) (percentile)';
export const AREA_MEDIAN_INCOME_PERCENTILE = 'Median household income (% of AMI) (percentile)';
// Indicator values:
export const ASTHMA_PERCENTILE = 'AF_PFS';
export const COUNTY_NAME = 'CF';
export const DIABETES_PERCENTILE = 'DF_PFS';
export const DIESEL_MATTER_PERCENTILE = 'DSF_PFS';
export const ENERGY_PERCENTILE = 'EBF_PFS';
export const HEART_PERCENTILE = 'HDF_PFS';
export const HIGH_SCHOOL_PROPERTY_PERCENTILE = `HSEF`;
export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'HBF_PFS';
export const LEAD_PAINT_PERCENTILE = 'LPF_PFS';
export const LIFE_PERCENTILE = 'LLEF_PFS';
export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'LIF_PFS';
export const LOW_MEDIAN_INCOME_PERCENTILE = 'LMI_PFS';
export const PM25_PERCENTILE = 'PM25F_PFS';
export const POVERTY_PROPERTY_PERCENTILE = 'P200_PFS';
export const STATE_NAME = 'SF';
export const TOTAL_POPULATION = 'TPF';
export const TRAFFIC_PERCENTILE = 'TF_PFS';
export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'UF_PFS';
export const WASTEWATER_PERCENTILE = 'WF_PFS';
export const EXP_AGRICULTURE_LOSS_PERCENTILE = 'EALR_PFS';
export const EXP_BUILDING_LOSS_PERCENTILE = 'EBLR_PFS';
export const EXP_POPULATION_LOSS_PERCENTILE = 'EPLR_PFS';
export const MEDIAN_HOME_VALUE_PERCENTILE = 'MHVF_PFS';
export const POVERTY_BELOW_100_PERCENTILE = 'P100_PFS';
export const POVERTY_BELOW_200_PERCENTILE = 'P200_PFS';
export const PROXIMITY_NPL_SITES_PERCENTILE = 'NPL_PFS';
export const PROXIMITY_RMP_SITES_PERCENTILE = 'RMP_PFS';
export const PROXIMITY_TSDF_SITES_PERCENTILE = 'TSDF_PFS';
// Category booleans (disadvantaged or not):
export const IS_CLIMATE_FACTOR_DISADVANTAGED_L = 'L_CLT';
export const IS_WORKFORCE_FACTOR_DISADVANTAGED_L = 'L_WKFC';
export const IS_WATER_FACTOR_DISADVANTAGED_L = 'L_WTR';
export const IS_ENERGY_FACTOR_DISADVANTAGED_L = 'L_ENY';
export const IS_TRANSPORT_FACTOR_DISADVANTAGED_L = 'L_TRN';
export const IS_HOUSING_FACTOR_DISADVANTAGED_L = 'L_HSG';
export const IS_POLLUTION_FACTOR_DISADVANTAGED_L = 'L_PLN';
export const IS_HEALTH_FACTOR_DISADVANTAGED_L = 'L_HLTH';
// Indicator booleans (disadvangted or not): (GTE = greater than or equal)
export const IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME = 'EPLRLI';
export const IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME = 'EALRLI';
export const IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME = 'EBLRLI';
export const IS_GTE_90_PM25_AND_IS_LOW_INCOME = 'PM25LI';
export const IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME = 'EBLI';
export const IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME = 'DPMLI';
export const IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME = 'TPLI';
export const IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME = 'LPMHVLI';
export const IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME = 'HBLI';
export const IS_GTE_90_RMP_AND_IS_LOW_INCOME = 'RMPLI';
export const IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME = 'SFLI';
export const IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME = 'HWLI';
export const IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME = 'WDLI';
export const IS_GTE_90_DIABETES_AND_IS_LOW_INCOME = 'DLI';
export const IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME = 'ALI';
export const IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME = 'HDLI';
export const IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME = 'LLELI';
export const IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME = 'LILHSE';
export const IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU = 'PLHSE';
export const IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU = 'LMILHSE';
export const IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU = 'ULHSE';
export const IS_FEDERAL_POVERTY_LEVEL_200 = 'FPL200S';
export const TOTAL_THRESHOLD_CRITERIA = 'TC';
export const IS_GTE_90_ISLAND_AREA_UNEMPLOYMENT_AND_IS_LOW_HS_EDU_2009 = 'IAULHSE';
export const IS_GTE_90_ISLAND_AREA_BELOW_100_POVERTY_AND_IS_LOW_HS_EDU_2009 = 'ISPLHSE';
export const IS_GTE_90_ISLAND_AREA_LOW_MEDIAN_INCOME_AND_IS_LOW_HS_EDU_2009 = 'IALMILHSE';
export type J40Properties = { [key: string]: any };
@ -136,7 +181,7 @@ export const DEFAULT_OUTLINE_COLOR = '#4EA5CF';
export const MIN_COLOR = '#FFFFFF';
export const MED_COLOR = '#D1DAE6';
export const MAX_COLOR = '#768FB3';
export const BORDER_HIGHLIGHT_COLOR = '#00BDE3';
export const BORDER_HIGHLIGHT_COLOR = '#1A4480';
export const CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY = 0.5;
// Widths

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

@ -178,6 +178,17 @@ export const SIDE_PANEL_INITIAL_STATE = defineMessages({
},
});
export const SIDE_PANEL_VERION = {
TITLE: <FormattedMessage
id={'areaDetail.side.panel.version.title'}
defaultMessage={ 'Methodology version {version}'}
description={'methodology version number'}
values= {{
version: METHODOLOGY_COPY.VERSION_NUMBER,
}}
/>,
};
export const SIDE_PANEL_CBG_INFO = defineMessages({
CENSUS_BLOCK_GROUP: {
id: 'areaDetail.geographicInfo.censusBlockGroup',
@ -204,41 +215,148 @@ export const SIDE_PANEL_CBG_INFO = defineMessages({
export const COMMUNITY = {
OF_FOCUS: <FormattedMessage
id={'areaDetail.categorization.community.of.focus'}
defaultMessage={ 'Community of focus'}
defaultMessage={ 'YES'}
description={'the communities the score currently is focused on'}
/>,
NOT_OF_FOCUS: <FormattedMessage
id= {'areaDetail.categorization.not.community.of.focus'}
defaultMessage= {'Not a community of focus'}
defaultMessage= {'No'}
description= {'the communities the score currently is not focused on'}
/>,
IS_FOCUS: <FormattedMessage
id={'areaDetail.categorization.is.community.of.focus'}
defaultMessage={ 'Identified as disadvantaged?'}
description={'asking IF the communities is focused on'}
/>,
SEND_FEEDBACK: <FormattedMessage
id={'areaDetail.categorization.send.feedback'}
defaultMessage={ 'send feedback'}
description={'link to send feedback'}
/>,
};
export const SIDE_PANEL_CATEGORY = defineMessages({
CLIMATE: {
id: 'areaDetail.indicator.title.climate',
defaultMessage: 'Climate change',
description: 'Climate change title',
},
CLEAN_ENERGY: {
id: 'areaDetail.indicator.title.clean.energy',
defaultMessage: 'Clean, efficient energy ',
description: 'Clean, efficient energy title',
},
CLEAN_TRANSPORT: {
id: 'areaDetail.indicator.title.clean.transport',
defaultMessage: 'Clean transportation',
description: 'Clean transportation title',
},
SUSTAIN_HOUSE: {
id: 'areaDetail.indicator.title.sustain.house',
defaultMessage: 'Sustainable housing',
description: 'Sustainable housing title',
},
LEG_POLLUTE: {
id: 'areaDetail.indicator.title.legacy.pollution',
defaultMessage: 'Legacy pollution',
description: 'Legacy pollution title',
},
CLEAN_WATER: {
id: 'areaDetail.indicator.title.clean.water',
defaultMessage: 'Clean water and waste',
description: 'Clean water and waste title',
},
HEALTH_BURDEN: {
id: 'areaDetail.indicator.title.health.burden',
defaultMessage: 'Health burdens',
description: 'Health burdens title',
},
WORK_DEV: {
id: 'areaDetail.indicator.title.work.dev',
defaultMessage: 'Workforce development',
description: 'Workforce development title',
},
});
export const SIDE_PANEL_INDICATORS = defineMessages({
INDICATOR_COLUMN_HEADER: {
id: 'areaDetail.indicators.indicatorColumnHeader',
defaultMessage: 'Indicator',
description: 'the population of the feature selected',
EXP_AG_LOSS: {
id: 'areaDetail.indicator.exp.ag.loss',
defaultMessage: 'Expected agriculture loss rate',
description: 'agriculture loss rate',
},
PERCENTILE_COLUMN_HEADER: {
id: 'areaDetail.indicators.percentileColumnHeader',
defaultMessage: 'Percentile (0-100)',
description: 'the population of the feature selected',
EXP_BLD_LOSS: {
id: 'areaDetail.indicator.exp.bld.loss',
defaultMessage: 'Expected building loss rate',
description: 'building loss rate',
},
POVERTY: {
id: 'areaDetail.indicator.poverty',
defaultMessage: 'Poverty',
description: 'Household income is less than or equal to twice the federal "poverty level"',
EXP_POP_LOSS: {
id: 'areaDetail.indicator.exp.pop.loss',
defaultMessage: 'Expected population loss rate',
description: 'population loss rate',
},
AREA_MEDIAN_INCOME: {
id: 'areaDetail.indicator.areaMedianIncome',
defaultMessage: 'Area Median Income',
description: 'calculated as percent of the area median income',
LOW_INCOME: {
id: 'areaDetail.indicator.low.income',
defaultMessage: 'Low income',
description: 'low income',
},
EDUCATION: {
id: 'areaDetail.indicator.education',
defaultMessage: 'Education, less than high school',
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
ENERGY_BURDEN: {
id: 'areaDetail.indicator.energyBurden',
defaultMessage: 'Energy cost burden',
description: 'Average annual energy cost ($) divided by household income',
},
PM_2_5: {
id: 'areaDetail.indicator.pm25',
defaultMessage: 'PM2.5',
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
},
DIESEL_PARTICULATE_MATTER: {
id: 'areaDetail.indicator.dieselPartMatter',
defaultMessage: 'Diesel particulate matter',
description: 'Diesel particulate matter level in air',
},
TRAFFIC_VOLUME: {
id: 'areaDetail.indicator.trafficVolume',
defaultMessage: 'Traffic',
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
' divided by distance in meters',
},
LEAD_PAINT: {
id: 'areaDetail.indicator.leadPaint',
defaultMessage: 'Lead paint',
description: 'Housing units built pre-1960, used as an indicator of potential'+
' lead paint exposure in homes',
},
MED_HOME_VAL: {
id: 'areaDetail.indicator.med.home.val',
defaultMessage: 'Median home value',
description: 'Median home value of owner-occupied housing units in the area.',
},
HOUSE_BURDEN: {
id: 'areaDetail.indicator.houseBurden',
defaultMessage: 'Housing cost burden',
description: 'People ages 18 and up who report having been told by a doctor,' +
' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
},
PROX_HAZ: {
id: 'areaDetail.indicator.prox.haz',
defaultMessage: 'Proximity to hazardous waste facilities',
description: 'Count of hazardous waste facilities ',
},
PROX_NPL: {
id: 'areaDetail.indicator.prox.npl',
defaultMessage: 'Proximity to NPL sites',
description: 'Count of proposed or listed NPL ',
},
PROX_RMP: {
id: 'areaDetail.indicator.prox.rmp',
defaultMessage: 'Proximity to RMP sites',
description: 'Count of proposed or listed RMP',
},
WASTE_WATER: {
id: 'areaDetail.indicator.wasteWater',
defaultMessage: 'Wastewater discharge',
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
' kilometers',
},
ASTHMA: {
id: 'areaDetail.indicator.asthma',
@ -250,164 +368,182 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
defaultMessage: 'Diabetes',
description: 'diabetes from dr or nurse',
},
DIESEL_PARTICULATE_MATTER: {
id: 'areaDetail.indicator.dieselPartMatter',
defaultMessage: 'Diesel particulate matter',
description: 'Diesel particulate matter level in air',
},
ENERGY_BURDEN: {
id: 'areaDetail.indicator.energyBurden',
defaultMessage: 'Energy burden',
description: 'Average annual energy cost ($) divided by household income',
},
FEMA_RISK: {
id: 'areaDetail.indicator.femaRisk',
defaultMessage: 'FEMA Risk Index',
description: 'Risk based on 18 natural hazard types, in addition to a '+
'community\'s social vulnerability and community resilience',
},
HEART_DISEASE: {
id: 'areaDetail.indicator.heartDisease',
defaultMessage: 'Heart disease',
description: 'People ages 18 and up who report ever having been told by a' +
'doctor, nurse, or other health professionals that they had angina or coronary heart disease',
},
HOUSE_BURDEN: {
id: 'areaDetail.indicator.houseBurden',
defaultMessage: 'Housing cost burden',
description: 'People ages 18 and up who report having been told by a doctor,' +
' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
},
LEAD_PAINT: {
id: 'areaDetail.indicator.leadPaint',
defaultMessage: 'Lead paint',
description: 'Housing units built pre-1960, used as an indicator of potential'+
' lead paint exposure in homes',
},
LIFE_EXPECT: {
id: 'areaDetail.indicator.lifeExpect',
defaultMessage: 'Life expectancy',
defaultMessage: 'Low life expectancy',
description: 'Estimated years of life expectancy',
},
PM_2_5: {
id: 'areaDetail.indicator.pm25',
defaultMessage: 'PM2.5',
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
LOW_MED_INC: {
id: 'areaDetail.indicator.low.med.income',
defaultMessage: 'Low median income',
description: 'Low median income',
},
TRAFFIC_VOLUME: {
id: 'areaDetail.indicator.trafficVolume',
defaultMessage: 'Traffic proximity and volume',
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
' divided by distance in meters',
LING_ISO: {
id: 'areaDetail.indicator.ling.iso',
defaultMessage: 'Linguistic isolation',
description: 'Linguistic isolation',
},
WASTE_WATER: {
id: 'areaDetail.indicator.wasteWater',
defaultMessage: 'Wastewater discharge',
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
' kilometers',
UNEMPLOY: {
id: 'areaDetail.indicator.unemploy',
defaultMessage: 'Unemployment',
description: 'Unemployment',
},
POVERTY: {
id: 'areaDetail.indicator.poverty',
defaultMessage: 'Poverty',
description: 'Unemployment',
},
HIGH_SCL: {
id: 'areaDetail.indicator.high.school',
defaultMessage: 'High school degree achievement rate',
description: 'High school degree achievement rate',
},
});
export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
AREA_MEDIAN_INCOME: {
id: 'areaDetail.indicator.description.area_median_income',
defaultMessage: 'Median income of the census tract calculated as a percent of the metropolitan'+
' area’s or state\'s median income',
description: 'Median income of the census tract calculated as a percent of the metropolitan'+
' area’s or state\'s median income',
EXP_AG_LOSS: {
id: 'areaDetail.indicator.description.exp.ag.loss',
defaultMessage: 'Economic loss rate to agriculture resulting from natural hazards',
description: 'Economic loss rate to agriculture resulting from natural hazards',
},
EDUCATION: {
id: 'areaDetail.indicator.description.education',
defaultMessage: 'Percent of people age 25 or older that didn’t get a high school diploma',
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
EXP_BLD_LOSS: {
id: 'areaDetail.indicator.description.exp.bld.loss',
defaultMessage: 'Economic loss rate to buildings resulting from natural hazards',
description: 'Economic loss rate to buildings resulting from natural hazards',
},
POVERTY: {
id: 'areaDetail.indicator.description.poverty',
defaultMessage: 'Percent of a tract\'s population in households where the household income' +
' is at or below 100% of the federal poverty level',
description: 'Percent of a tract\'s population in households where the household income' +
' is at or below 100% of the federal poverty level',
EXP_POP_LOSS: {
id: 'areaDetail.indicator.description.exp.pop.loss',
defaultMessage: 'Economic loss rate to the population in fatalities and injuries resulting from natural hazards',
description: 'Economic loss rate to the population in fatalities and injuries resulting from natural hazards',
},
ASTHMA: {
id: 'areaDetail.indicator.description.asthma',
defaultMessage: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
description: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
},
DIABETES: {
id: 'areaDetail.indicator.description.diabetes',
defaultMessage: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
' health professionals that they have diabetes other than diabetes during pregnancy',
description: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
' health professionals that they have diabetes other than diabetes during pregnancy',
},
DIESEL_PARTICULATE_MATTER: {
id: 'areaDetail.indicator.description.dieselPartMatter',
defaultMessage: 'Mixture of particles that is part of diesel exhaust in the air',
description: 'Mixture of particles that is part of diesel exhaust in the air',
LOW_INCOME: {
id: 'areaDetail.indicator.description.low.income',
defaultMessage: 'Household income is less than or equal to twice the federal poverty level',
description: 'Household income is less than or equal to twice the federal poverty level',
},
ENERGY_BURDEN: {
id: 'areaDetail.indicator.description.energyBurden',
defaultMessage: 'Average annual energy cost ($) divided by household income',
description: 'Average annual energy cost ($) divided by household income',
},
FEMA_RISK: {
id: 'areaDetail.indicator.description.femaRisk',
defaultMessage: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
' resulting from natural hazards each year.',
description: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
' resulting from natural hazards each year.',
},
HEART_DISEASE: {
id: 'areaDetail.indicator.description.heartDisease',
defaultMessage: 'People ages 18 and up who report ever having been told by a' +
' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
description: 'People ages 18 and up who report ever having been told by a' +
' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
},
HOUSE_BURDEN: {
id: 'areaDetail.indicator.description.houseBurden',
defaultMessage: 'Households that are low income and spend more than 30% of their income on' +
' housing costs',
description: 'Households that are low income and spend more than 30% of their income on' +
' housing costs',
},
LEAD_PAINT: {
id: 'areaDetail.indicator.description.leadPaint',
defaultMessage: 'Housing units built pre-1960, used as an indicator of potential'+
' lead paint exposure in homes',
description: 'Housing units built pre-1960, used as an indicator of potential'+
' lead paint exposure in homes',
},
LIFE_EXPECT: {
id: 'areaDetail.indicator.description.lifeExpect',
defaultMessage: 'Estimated years of life expectancy',
description: 'Estimated years of life expectancy',
defaultMessage: 'Energy costs divided by household income',
description: 'Energy costs divided by household income',
},
PM_2_5: {
id: 'areaDetail.indicator.description.pm25',
defaultMessage: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
defaultMessage: 'Fine inhalable particles, 2.5 micrometers and smaller',
description: 'Fine inhalable particles, 2.5 micrometers and smaller',
},
DIESEL_PARTICULATE_MATTER: {
id: 'areaDetail.indicator.description.dieselPartMatter',
defaultMessage: 'Diesel exhaust in the air',
description: 'Diesel exhaust in the air',
},
TRAFFIC_VOLUME: {
id: 'areaDetail.indicator.description.trafficVolume',
defaultMessage: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
' divided by distance in meters',
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
' divided by distance in meters',
defaultMessage: 'Count of vehicles at major roads within 500 meters',
description: 'Count of vehicles at major roads within 500 meters',
},
LEAD_PAINT: {
id: 'areaDetail.indicator.description.leadPaint',
defaultMessage: 'Pre-1960 housing',
description: 'Pre-1960 housing',
},
MED_HOME_VAL: {
id: 'areaDetail.indicator.description.med.home.val',
defaultMessage: 'Meidan home value in area',
description: 'Meidan home value in area',
},
HOUSE_BURDEN: {
id: 'areaDetail.indicator.description.houseBurden',
defaultMessage: 'Low income households spending more than 30% of income on housing',
description: 'Low income households spending more than 30% of income on housing',
},
PROX_HAZ: {
id: 'areaDetail.indicator.description.prox.haz',
defaultMessage: 'Count of hazardous waste facilities within 5 km',
description: 'Count of hazardous waste facilities within 5 km',
},
PROX_NPL: {
id: 'areaDetail.indicator.description.prox.npl',
defaultMessage: 'Proposed or listed NPL (Superfund) sites within 5 km',
description: 'Proposed or listed NPL (Superfund) sites within 5 km',
},
PROX_RMP: {
id: 'areaDetail.indicator.description.prox.npl',
defaultMessage: 'Risk Management Plan facilities within 5 km',
description: 'Risk Management Plan facilities within 5 km',
},
WASTE_WATER: {
id: 'areaDetail.indicator.description.wasteWater',
defaultMessage: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
' kilometers',
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
' kilometers',
defaultMessage: 'Toxic concentrations at stream segments within 500 meters',
description: 'Toxic concentrations at stream segments within 500 meters',
},
ASTHMA: {
id: 'areaDetail.indicator.description.asthma',
defaultMessage: 'Number of people who have been told they have asthma',
description: 'Number of people who have been told they have asthma',
},
DIABETES: {
id: 'areaDetail.indicator.description.diabetes',
defaultMessage: 'People ages 18 years and older who have diabetes other than diabetes during pregnancy',
description: 'People ages 18 years and older who have diabetes other than diabetes during pregnancy',
},
HEART_DISEASE: {
id: 'areaDetail.indicator.description.heartDisease',
defaultMessage: 'People ages 18 years and older who have been told they have heart disease',
description: 'People ages 18 years and older who have been told they have heart disease',
},
LOW_LIFE_EXPECT: {
id: 'areaDetail.indicator.description.lifeExpect',
defaultMessage: 'Average number of years of life a person can expect to live',
description: 'Average number of years of life a person can expect to live',
},
LOW_MED_INCOME: {
id: 'areaDetail.indicator.description.low.med.income',
defaultMessage: 'Median income calculated as a percent of the area’s median income',
description: 'Median income calculated as a percent of the area’s median income',
},
LING_ISO: {
id: 'areaDetail.indicator.description.ling.iso',
defaultMessage: `Households in which no one age 14 and over speaks English only or also speaks
a language other than English`,
description: `Households in which no one age 14 and over speaks English only or also speaks
a language other than English`,
},
UNEMPLOY: {
id: 'areaDetail.indicator.description.unemploy',
defaultMessage: 'Number of unemployed people as a percentage of the labor force',
description: 'Number of unemployed people as a percentage of the labor force',
},
POVERTY: {
id: 'areaDetail.indicator.description.poverty',
defaultMessage: `Percent of individuals in households where the household income is at or
below 100% of the federal poverty level`,
description: `Percent of individuals in households where the household income is at or
below 100% of the federal poverty level`,
},
HIGH_SKL: {
id: 'areaDetail.indicator.description.high.school',
defaultMessage: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
description: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
},
});
export const DOWNLOAD_DRAFT = {
PARAGRAPH_1: <FormattedMessage
id={'download.draft.ptag.1'}

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

@ -293,15 +293,6 @@ This section will outline styles that are component specific
}
}
//Area Detail Component
p.secondary.j40-indicator {
max-width: 10rem;
@media screen and (max-width: 1024px) {
max-width: 80%;
}
}
/*
***************************************
* TIMELINE / PROCESS LIST STYLES