diff --git a/client/src/components/AreaDetail/areaDetail.module.scss b/client/src/components/AreaDetail/areaDetail.module.scss index 072c5d04..9e040590 100644 --- a/client/src/components/AreaDetail/areaDetail.module.scss +++ b/client/src/components/AreaDetail/areaDetail.module.scss @@ -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; - } -} - diff --git a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts index e72896cf..db8bddfb 100644 --- a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts +++ b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts @@ -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; } } diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx index 16bbbb04..25ed4b15 100644 --- a/client/src/components/AreaDetail/index.tsx +++ b/client/src/components/AreaDetail/index.tsx @@ -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(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 + // component to render the actual Indicator + const categoryItems = categories.map((category) => ({ + id: category.id, + title: , + content: ( + <> + {category.indicators.map((indicator:any, index:number) => { + return ; + })} + + ), + expanded: false, + })); + return ( ); diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index 92917108..59a3c82e 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -5,6 +5,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 `; diff --git a/client/src/components/AreaDetail/tests/areaDetail.test.tsx b/client/src/components/AreaDetail/tests/areaDetail.test.tsx index f822c870..133b8edb 100644 --- a/client/src/components/AreaDetail/tests/areaDetail.test.tsx +++ b/client/src/components/AreaDetail/tests/areaDetail.test.tsx @@ -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); -}); diff --git a/client/src/components/Categories/Categories.tsx b/client/src/components/Categories/Categories.tsx index 11620154..76c5c66d 100644 --- a/client/src/components/Categories/Categories.tsx +++ b/client/src/components/Categories/Categories.tsx @@ -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 = () => { { - categories.map((category, index) => ) + categories.map((category, index) => ) } diff --git a/client/src/components/Category/Category.module.scss b/client/src/components/Category/Category.module.scss new file mode 100644 index 00000000..c8e5ec8b --- /dev/null +++ b/client/src/components/Category/Category.module.scss @@ -0,0 +1,6 @@ +@use '../../styles/design-system.scss' as *; + +.categoryContainer { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/client/src/components/Category/Category.module.scss.d.ts b/client/src/components/Category/Category.module.scss.d.ts new file mode 100644 index 00000000..ab7b1b4e --- /dev/null +++ b/client/src/components/Category/Category.module.scss.d.ts @@ -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; diff --git a/client/src/components/Category/Category.test.tsx b/client/src/components/Category/Category.test.tsx new file mode 100644 index 00000000..2780c076 --- /dev/null +++ b/client/src/components/Category/Category.test.tsx @@ -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( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); + +describe('rendering of the Category non-disadvantaged', () => { + const {asFragment} = render( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/Category/Category.tsx b/client/src/components/Category/Category.tsx new file mode 100644 index 00000000..d1bfc4d7 --- /dev/null +++ b/client/src/components/Category/Category.tsx @@ -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 ( +
+
+ {name} +
+ +
+ ); +}; + +export default Category; diff --git a/client/src/components/Category/__snapshots__/Category.test.tsx.snap b/client/src/components/Category/__snapshots__/Category.test.tsx.snap new file mode 100644 index 00000000..725757b1 --- /dev/null +++ b/client/src/components/Category/__snapshots__/Category.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the Category disadvantaged checks if component renders 1`] = ` + +
+
+ test name +
+
+
+ +`; + +exports[`rendering of the Category non-disadvantaged checks if component renders 1`] = ``; diff --git a/client/src/components/Category/index.tsx b/client/src/components/Category/index.tsx new file mode 100644 index 00000000..af247606 --- /dev/null +++ b/client/src/components/Category/index.tsx @@ -0,0 +1,3 @@ +import Category from './Category'; + +export default Category; diff --git a/client/src/components/CategoryCard/CategoryCard.tsx b/client/src/components/CategoryCard/CategoryCard.tsx index e1bd0958..aca2ebf6 100644 --- a/client/src/components/CategoryCard/CategoryCard.tsx +++ b/client/src/components/CategoryCard/CategoryCard.tsx @@ -10,7 +10,7 @@ interface ICategoryInterface { THEN: JSX.Element } } -const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => { +const CategoryCard = ({categoryInfo}: ICategoryInterface) => { return (

@@ -29,4 +29,4 @@ const IndicatorCategory = ({categoryInfo}: ICategoryInterface) => { ); }; -export default IndicatorCategory; +export default CategoryCard; diff --git a/client/src/components/DisadvantageDot/DisadvantageDot.module.scss b/client/src/components/DisadvantageDot/DisadvantageDot.module.scss new file mode 100644 index 00000000..b881664e --- /dev/null +++ b/client/src/components/DisadvantageDot/DisadvantageDot.module.scss @@ -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'); +} \ No newline at end of file diff --git a/client/src/components/DisadvantageDot/DisadvantageDot.module.scss.d.ts b/client/src/components/DisadvantageDot/DisadvantageDot.module.scss.d.ts new file mode 100644 index 00000000..7467e7cc --- /dev/null +++ b/client/src/components/DisadvantageDot/DisadvantageDot.module.scss.d.ts @@ -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; + diff --git a/client/src/components/DisadvantageDot/DisadvantageDot.test.tsx b/client/src/components/DisadvantageDot/DisadvantageDot.test.tsx new file mode 100644 index 00000000..1f23a542 --- /dev/null +++ b/client/src/components/DisadvantageDot/DisadvantageDot.test.tsx @@ -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( + + + , + ); + + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/DisadvantageDot/DisadvantageDot.tsx b/client/src/components/DisadvantageDot/DisadvantageDot.tsx new file mode 100644 index 00000000..970811d0 --- /dev/null +++ b/client/src/components/DisadvantageDot/DisadvantageDot.tsx @@ -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 ( +
+ ); +}; + +export default DisadvantageDot; diff --git a/client/src/components/DisadvantageDot/__snapshots__/DisadvantageDot.test.tsx.snap b/client/src/components/DisadvantageDot/__snapshots__/DisadvantageDot.test.tsx.snap new file mode 100644 index 00000000..95c57c9a --- /dev/null +++ b/client/src/components/DisadvantageDot/__snapshots__/DisadvantageDot.test.tsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DisadvantageDot disadvantaged checks if component renders 1`] = ` + +
+ +`; diff --git a/client/src/components/DisadvantageDot/index.tsx b/client/src/components/DisadvantageDot/index.tsx new file mode 100644 index 00000000..b20cced5 --- /dev/null +++ b/client/src/components/DisadvantageDot/index.tsx @@ -0,0 +1,3 @@ +import DisadvantageDot from './DisadvantageDot'; + +export default DisadvantageDot; diff --git a/client/src/components/Indicator/Indicator.module.scss b/client/src/components/Indicator/Indicator.module.scss new file mode 100644 index 00000000..25957599 --- /dev/null +++ b/client/src/components/Indicator/Indicator.module.scss @@ -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'); +} \ No newline at end of file diff --git a/client/src/components/Indicator/Indicator.module.scss.d.ts b/client/src/components/Indicator/Indicator.module.scss.d.ts new file mode 100644 index 00000000..868b76e6 --- /dev/null +++ b/client/src/components/Indicator/Indicator.module.scss.d.ts @@ -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; diff --git a/client/src/components/Indicator/Indicator.test.tsx b/client/src/components/Indicator/Indicator.test.tsx new file mode 100644 index 00000000..512cf12e --- /dev/null +++ b/client/src/components/Indicator/Indicator.test.tsx @@ -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( + + + , + ); + + 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); +}); diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx new file mode 100644 index 00000000..e19e6c9c --- /dev/null +++ b/client/src/components/Indicator/Indicator.tsx @@ -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 ( +
  • +
    +
    + {indicator.label} +
    + {indicator.description} +
    +
    +
    + {readablePercentile(indicator.value)} + + {getSuperscriptOrdinal(readablePercentile(indicator.value))} + +
    +
    +
    • + ); +}; + +export default Indicator; diff --git a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap new file mode 100644 index 00000000..84e47ac0 --- /dev/null +++ b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the Indicator checks if component renders 1`] = ` + +
  • +
    +
    + some label +
    + some description +
    +
    +
    + 9700 + + + th + + +
    +
    +
    • +     +`; diff --git a/client/src/components/Indicator/index.tsx b/client/src/components/Indicator/index.tsx new file mode 100644 index 00000000..536061c5 --- /dev/null +++ b/client/src/components/Indicator/index.tsx @@ -0,0 +1,3 @@ +import Indicator from './Indicator'; + +export default Indicator; diff --git a/client/src/components/MapLegend/index.tsx b/client/src/components/MapLegend/index.tsx index 5f46c3a1..e1d80427 100644 --- a/client/src/components/MapLegend/index.tsx +++ b/client/src/components/MapLegend/index.tsx @@ -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 (
    -
    -
    + +
    {intl.formatMessage(EXPLORE_COPY.LEGEND.PRIORITY_LABEL)}
    diff --git a/client/src/components/MapLegend/mapLegend.module.scss b/client/src/components/MapLegend/mapLegend.module.scss index 81a417b9..e9e6ea8d 100644 --- a/client/src/components/MapLegend/mapLegend.module.scss +++ b/client/src/components/MapLegend/mapLegend.module.scss @@ -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; -} diff --git a/client/src/components/MapLegend/mapLegend.module.scss.d.ts b/client/src/components/MapLegend/mapLegend.module.scss.d.ts index 2c5b0db0..0ed1e0ac 100644 --- a/client/src/components/MapLegend/mapLegend.module.scss.d.ts +++ b/client/src/components/MapLegend/mapLegend.module.scss.d.ts @@ -1,7 +1,7 @@ declare namespace HowYouCanHelpModuleScssNamespace { export interface IHowYouCanHelpModuleScss { legendContainer: string; - colorSwatch: string; + legendTextBox: string; } } diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index a2691a78..d80c96bf 100644 --- a/client/src/data/constants.tsx +++ b/client/src/data/constants.tsx @@ -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 diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 38c0f91f..5b3c12a4 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -178,6 +178,17 @@ export const SIDE_PANEL_INITIAL_STATE = defineMessages({ }, }); +export const SIDE_PANEL_VERION = { + TITLE: , +}; + 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: , NOT_OF_FOCUS: , + IS_FOCUS: , + 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: