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

Add HRS, AML, FUDS and demographics (#1861)

Browse source 
* Add HRS_ET

- refactor to add IndicatorTypes
- modify tests
- add intl

* Add AML and FUDS

- update indicatorFilter
- update tests each indicator has 3 states to test

* Connect BE signal for demographics

- update tests
- i18n-ize

* Remove obsolete tests snapshots

* Update to Score N constants

* Remove higher ed socio-economic indicator

- remove spacer "Meets both socio"
- update snapshots

* Update BE signal types for

- AML
- FUDS

* Filter out missing historic underinvest. indicators

- For the special case when historic underinvestments are missing do not show that indicator at all
- update unit tests

* Make AML appear as No for all that are missing

* Update snapshot
This commit is contained in:
Vim 2022-08-30 19:22:29 -07:00 • committed by GitHub
parent 8175407806
commit 83fb0e875d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 2010 additions and 875 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -1,7 +1,7 @@
/* eslint-disable quotes */
// External Libs:
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {MessageDescriptor, useIntl} from 'gatsby-plugin-intl';
import {Accordion, Button} from '@trussworks/react-uswds';
// Components:
@ -27,20 +27,34 @@ interface IAreaDetailProps {
isCensusLayerSelected: boolean,
}
/**
* There are a 4 different indicator types. Each indicator type will render in the UI differently.
*
* percentile - is the majority of indicators
* percents - a few indicators fall into this type
* boolean - 3 indicators are of boolean type
* - historic redlining
* - abandoned land mines
* - FUDS
*
*/
export type indicatorType = 'percentile' | 'percent' | 'boolean';
/**
* This interface is used as define the various fields for each indicator in the side panel
* label: the indicator label or title
* description: the description of the indicator used in the side panel
* value: the number from the geoJSON tile
* type: see indicatorType above
* value: the number from the geoJSON tile. If tile doesn't exist it get a null value. Could be boolean also
* isDisadvagtaged: the flag from the geoJSON tile
* isPercent: is the value a percent or percentile
* threshold: a custom value of threshold for certain indicators
* */
export interface indicatorInfo {
label: string,
description: string,
value: number | null,
type: indicatorType,
value: number | boolean | null,
isDisadvagtaged: boolean,
isPercent?: boolean,
threshold?: number,
}
@ -64,6 +78,35 @@ export interface ICategory {
isExceedBothSocioBurdens: boolean | null,
}
/**
* This filter will remove indicators from appearing in the side panel by returning
* the filter function (curring). There is 1 use case. It can accept any indicator name
* as an input.
*
* 1. For Historic underinvestment if the value is null
*
* Recommendation is to use a separate filter for each indicator that needs filtering.
*
* @param {MessageDescriptor} label - allows to re-use this filter for all 3 indicators above
* @return {indicatorInfo}
*/
export const indicatorFilter = (label:MessageDescriptor) => {
const intl = useIntl();
return (indicator:indicatorInfo) => (
indicator.label !== intl.formatMessage(label) ||
( indicator.label == intl.formatMessage(label) && indicator.value != null)
);
};
/**
* This is the main component. It will render the entire side panel and show the details
* of the area/feature that is selected.
*
* @param {IAreaDetailProps} {}
* @return {void}
*/
const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) => {
const intl = useIntl();
@ -86,12 +129,15 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
/**
* The workforce development category has some indicators who's source will vary depending on which
* territory is selected. This function allows us to change the source of workforce development indicators
* depending on which territory was selected
*
* @param {string} indicatorName
* @return {void}
*/
const getWorkForceIndicatorValue = (indicatorName: string) => {
if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
if (indicatorName === 'lowMedInc') {
@ -138,12 +184,15 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
}
};
/**
* The workforce development category has some indicators who's disadvantaged boolean
* will vary depending on which territory is selected. This function allows us to change
* the boolean of workforce development indicators depending on which territory was selected
*
* @param {string} indicatorName
* @return {void}
*/
const getWorkForceIndicatorIsDisadv = (indicatorName: string) => {
if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
if (indicatorName === 'lowMedInc') {
@ -190,11 +239,19 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
true : false;
}
};
// Define each indicator in the side panel with constants from copy file (for intl)
// Indicators are grouped by category
/**
* Define each indicator in the side panel with constants from copy file (for intl)
*
* Indicators are grouped by category
*/
// Climate 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),
type: 'percentile',
value: properties.hasOwnProperty(constants.EXP_AGRICULTURE_LOSS_PERCENTILE) ?
properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS] ?
@ -203,6 +260,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
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),
type: 'percentile',
value: properties.hasOwnProperty(constants.EXP_BUILDING_LOSS_PERCENTILE) ?
properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS] ?
@ -211,6 +269,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
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),
type: 'percentile',
value: properties.hasOwnProperty(constants.EXP_POPULATION_LOSS_PERCENTILE) ?
properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS] ?
@ -219,6 +278,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const flooding: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FLOODING),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FLOODING),
type: 'percentile',
value: properties.hasOwnProperty(constants.FLOODING_PERCENTILE) ?
properties[constants.FLOODING_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FLOODING] ?
@ -227,6 +287,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const wildfire: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WILDFIRE),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WILDFIRE),
type: 'percentile',
value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
properties[constants.WASTEWATER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_WILDFIRE] ?
@ -235,26 +296,30 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const lowInc: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
type: 'percentile',
value: properties.hasOwnProperty(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,
threshold: 65,
};
const higherEd: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_ED),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_ED),
value: properties.hasOwnProperty(constants.NON_HIGHER_ED_PERCENTILE) ?
properties[constants.NON_HIGHER_ED_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_HIGHER_ED_PERCENTILE] ?
properties[constants.IS_HIGHER_ED_PERCENTILE] : null,
isPercent: true,
threshold: 80,
};
// const higherEd: indicatorInfo = {
// label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_ED),
// description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_ED),
// type: 'percent',
// value: properties.hasOwnProperty(constants.NON_HIGHER_ED_PERCENTILE) ?
// properties[constants.NON_HIGHER_ED_PERCENTILE] : null,
// isDisadvagtaged: properties[constants.IS_HIGHER_ED_PERCENTILE] ?
// properties[constants.IS_HIGHER_ED_PERCENTILE] : null,
// threshold: 80,
// };
// Energy category
const energyBurden: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
type: 'percentile',
value: properties.hasOwnProperty(constants.ENERGY_PERCENTILE) ?
properties[constants.ENERGY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN] ?
@ -263,15 +328,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
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),
type: 'percentile',
value: properties.hasOwnProperty(constants.PM25_PERCENTILE) ?
properties[constants.PM25_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] ?
properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] : null,
};
// Transit category
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),
type: 'percentile',
value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ?
properties[constants.DIESEL_MATTER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ?
@ -280,6 +348,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const barrierTransport: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.BARRIER_TRANS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.BARRIER_TRANS),
type: 'percentile',
value: properties.hasOwnProperty(constants.TRAVEL_DISADV_PERCENTILE) ?
properties[constants.TRAVEL_DISADV_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] ?
@ -288,15 +357,30 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const trafficVolume: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
type: 'percentile',
value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ?
properties[constants.TRAFFIC_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ?
properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null,
};
// Housing category
const historicUnderinvest: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIST_UNDERINVEST),
type: 'boolean',
value: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) ?
(properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false) :
null,
isDisadvagtaged: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) &&
properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] ===
constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false,
};
const houseBurden: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
type: 'percentile',
value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ?
properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ?
@ -305,6 +389,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const lackGreenSpace: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_GREEN_SPACE),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_GREEN_SPACE),
type: 'percentile',
value: properties.hasOwnProperty(constants.IMPERVIOUS_PERCENTILE) ?
properties[constants.IMPERVIOUS_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] ?
@ -313,6 +398,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const lackPlumbing: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_PLUMBING),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_PLUMBING),
type: 'percentile',
value: properties.hasOwnProperty(constants.KITCHEN_PLUMB_PERCENTILE) ?
properties[constants.KITCHEN_PLUMB_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] ?
@ -321,22 +407,37 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const leadPaint: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
type: 'percentile',
value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ?
properties[constants.LEAD_PAINT_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] ?
properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] : 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,
// };
// Pollution categeory
const abandonMines: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ABANDON_MINES),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ABANDON_MINES),
type: 'boolean',
value: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
isDisadvagtaged: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ?
properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null,
};
const formerDefSites: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FORMER_DEF_SITES),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FORMER_DEF_SITES),
type: 'boolean',
value: properties.hasOwnProperty(constants.FORMER_DEF_SITES_RAW_VALUE) ?
(properties[constants.FORMER_DEF_SITES_RAW_VALUE] === constants.FUDS_RAW_YES ? true : false) :
null,
isDisadvagtaged: properties.hasOwnProperty(constants.FORMER_DEF_SITES_EXCEEDS_THRESH) ?
properties[constants.FORMER_DEF_SITES_EXCEEDS_THRESH] : null,
};
const proxHaz: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
type: 'percentile',
value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ?
properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ?
@ -345,6 +446,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const proxNPL: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
type: 'percentile',
value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ?
properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ?
@ -353,15 +455,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const proxRMP: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
type: 'percentile',
value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ?
properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ?
properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null,
};
// Water category
const leakyTanks: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAKY_TANKS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAKY_TANKS),
type: 'percentile',
value: properties.hasOwnProperty(constants.LEAKY_UNDER_PERCENTILE) ?
properties[constants.LEAKY_UNDER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] ?
@ -370,15 +475,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const wasteWater: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
type: 'percentile',
value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
properties[constants.WASTEWATER_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ?
properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null,
};
// Health category
const asthma: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
type: 'percentile',
value: properties.hasOwnProperty(constants.ASTHMA_PERCENTILE) ?
properties[constants.ASTHMA_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ASTHMA] ?
@ -387,6 +495,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const diabetes: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
type: 'percentile',
value: properties.hasOwnProperty(constants.DIABETES_PERCENTILE) ?
properties[constants.DIABETES_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIABETES] ?
@ -395,6 +504,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
const heartDisease: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
type: 'percentile',
value: properties.hasOwnProperty(constants.HEART_PERCENTILE) ?
properties[constants.HEART_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HEART_DISEASE] ?
@ -403,15 +513,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
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),
type: 'percentile',
value: properties.hasOwnProperty(constants.LIFE_PERCENTILE) ?
properties[constants.LIFE_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] ?
properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] : null,
};
// Workforce dev category
const lingIso: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
type: 'percentile',
value: properties.hasOwnProperty(constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE) ?
properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO] ?
@ -420,30 +533,34 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
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),
type: 'percentile',
value: getWorkForceIndicatorValue('lowMedInc'),
isDisadvagtaged: getWorkForceIndicatorIsDisadv('lowMedInc'),
};
const unemploy: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
type: 'percentile',
value: getWorkForceIndicatorValue('unemploy'),
isDisadvagtaged: getWorkForceIndicatorIsDisadv('unemploy'),
};
const poverty: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
type: 'percentile',
value: getWorkForceIndicatorValue('poverty'),
isDisadvagtaged: getWorkForceIndicatorIsDisadv('poverty'),
};
const highSchool: indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
type: 'percent',
value: getWorkForceIndicatorValue('highSchool'),
isDisadvagtaged: getWorkForceIndicatorIsDisadv('highSchool'),
isPercent: true,
threshold: 10,
};
/**
* Aggregate indicators based on categories
*
@ -455,7 +572,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
id: 'climate-change',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
indicators: [expAgLoss, expBldLoss, expPopLoss, flooding, wildfire],
socioEcIndicators: [lowInc, higherEd],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -467,7 +584,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
id: 'clean-energy',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
indicators: [energyBurden, pm25],
socioEcIndicators: [lowInc, higherEd],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -479,7 +596,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
id: 'clean-transport',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
indicators: [dieselPartMatter, barrierTransport, trafficVolume],
socioEcIndicators: [lowInc, higherEd],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -490,8 +607,8 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
{
id: 'sustain-house',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
indicators: [houseBurden, lackGreenSpace, lackPlumbing, leadPaint],
socioEcIndicators: [lowInc, higherEd],
indicators: [historicUnderinvest, houseBurden, lackGreenSpace, lackPlumbing, leadPaint],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -502,8 +619,8 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
{
id: 'leg-pollute',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
indicators: [proxHaz, proxNPL, proxRMP],
socioEcIndicators: [lowInc, higherEd],
indicators: [abandonMines, formerDefSites, proxHaz, proxNPL, proxRMP],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -515,7 +632,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
id: 'clean-water',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
indicators: [leakyTanks, wasteWater],
socioEcIndicators: [lowInc, higherEd],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WATER_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -527,7 +644,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
id: 'health-burdens',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
indicators: [asthma, diabetes, heartDisease, lifeExpect],
socioEcIndicators: [lowInc, higherEd],
socioEcIndicators: [lowInc],
isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -539,7 +656,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
id: 'work-dev',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
indicators: [lingIso, lowMedInc, unemploy, poverty],
socioEcIndicators: [highSchool, higherEd],
socioEcIndicators: [highSchool],
isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : null,
isExceed1MoreBurden: properties[constants.IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M] ?
@ -549,6 +666,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
},
];
/**
* Modify the category array depending on the sidePanelState field. This field comes from the backend
* and is called UI_EXP.
@ -577,9 +695,11 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
}
// 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
/**
* 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,
@ -600,8 +720,10 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
isBurdened={category.isExceed1MoreBurden}
/>
{/* indicators */}
{category.indicators.map((indicator: any, index: number) => {
{/* Indicators - filters then map */}
{category.indicators
.filter(indicatorFilter(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST))
.map((indicator: any, index: number) => {
return <Indicator key={`ind${index}`} indicator={indicator} />;
})}
@ -611,10 +733,10 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
</div>
{/* Exceeds both socioeconomic burdens */}
<ExceedBurden
{/* <ExceedBurden
text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_BOTH_SOCIO}
isBurdened={category.isExceedBothSocioBurdens}
/>
/> */}
{/* socio-economic indicators */}
{category.socioEcIndicators.map((indicator: any, index: number) => {
@ -641,7 +763,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
/>
{/* Demographics */}
<TractDemographics />
<TractDemographics properties={properties}/>
{/* Disadvantaged? */}
<div className={styles.categorization}>
@ -671,6 +793,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
{/* <div className={styles.showThresholdExceed}>
{EXPLORE_COPY.numberOfThresholdsExceeded(properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS])}
</div> */}
{/* Send Feedback button */}
<a
className={styles.sendFeedbackLink}

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

File diff suppressed because it is too large Load diff

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

@ -5,9 +5,7 @@ import {LocalizedComponent} from '../../../test/testHelpers';
import * as constants from '../../../data/constants';
// Todo: Update tests to take into account tribal layer selected
describe('rendering of the AreaDetail', () => {
const properties = {
const properties = {
[constants.POVERTY_BELOW_100_PERCENTILE]: .12,
[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE]: .98,
[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE]: .97,
@ -22,9 +20,11 @@ describe('rendering of the AreaDetail', () => {
[constants.SIDE_PANEL_STATE]: constants.SIDE_PANEL_STATE_VALUES.NATION,
[constants.COUNT_OF_CATEGORIES_DISADV]: 5,
[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]: 3,
};
const hash = ['11.54', '36.0762', '-84.4494'];
};
const hash = ['11.54', '36.0762', '-84.4494'];
describe('rendering of the Islan areas in AreaDetail', () => {
it('checks if indicators for NATION is present', () => {
const {asFragment} = render(
<LocalizedComponent>

217
client/src/components/Indicator/Indicator.test.tsx
View file

@ -6,15 +6,14 @@ import {indicatorInfo} from '../AreaDetail/AreaDetail';
import * as EXPLORE_COPY from '../../data/copy/explore';
describe('rendering of the Indicator', () => {
it('checks if component renders', () => {
const highSchool:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'percent',
value: .97,
isDisadvagtaged: true,
isPercent: true,
threshold: 20,
};
const {asFragment} = render(
@ -31,9 +30,9 @@ describe('rendering of the Indicator', () => {
const highSchool:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'percent',
value: .426,
isDisadvagtaged: true,
isPercent: true,
threshold: 20,
};
const {asFragment} = render(
@ -52,6 +51,7 @@ describe('test rendering of Indicator value icons', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueIcon
type='percent'
value={90}
isAboveThresh={true}
/>
@ -64,6 +64,7 @@ describe('test rendering of Indicator value icons', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueIcon
type='percentile'
value={13}
isAboveThresh={false}
/>
@ -77,6 +78,7 @@ describe('test rendering of Indicator value icons', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueIcon
type='percentile'
value={0}
isAboveThresh={false}
/>
@ -86,10 +88,25 @@ describe('test rendering of Indicator value icons', () => {
screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage);
});
it('renders the unavailable icon when the value is null', () => {
it('renders the unavailable icon when the value is a boolean null', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueIcon
type='boolean'
value={null}
isAboveThresh={false}
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
});
it('renders the unavailable icon when the value is a percentile null', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueIcon
type='percentile'
value={null}
isAboveThresh={false}
/>
@ -108,7 +125,7 @@ describe('test rendering of Indicator value sub-text', () => {
value={95}
isAboveThresh={true}
threshold={90}
isPercent={false}
type='percentile'
/>
</LocalizedComponent>,
);
@ -121,20 +138,20 @@ describe('test rendering of Indicator value sub-text', () => {
value={89}
isAboveThresh={false}
threshold={90}
isPercent={false}
type='percentile'
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('renders the "data is not available"', () => {
it(`renders missing data `, () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValueSubText
value={null}
isAboveThresh={false}
threshold={90}
isPercent={false}
type='percentile'
/>
</LocalizedComponent>,
);
@ -144,58 +161,34 @@ describe('test rendering of Indicator value sub-text', () => {
describe('test that the unit suffix renders correctly', ()=> {
it('renders correctly when the value is a percentile', () => {
const lowLife:indicatorInfo = {
label: 'some label',
description: 'some description',
value: 97,
isDisadvagtaged: true,
isPercent: false,
threshold: 20,
};
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValue
isPercent={lowLife.isPercent}
type={'percentile'}
displayStat={90}
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('renders correctly when the value is a percent', () => {
const lowLife:indicatorInfo = {
label: 'some label',
description: 'some description',
value: 97,
isDisadvagtaged: true,
isPercent: true,
threshold: 20,
};
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValue
isPercent={lowLife.isPercent}
type={'percent'}
displayStat={90}
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('renders correctly when the value is a null', () => {
const lowLife:indicatorInfo = {
label: 'some label',
description: 'some description',
value: null,
isDisadvagtaged: true,
isPercent: false,
};
it('renders correctly when the value is a null', () => {
const {asFragment} = render(
<LocalizedComponent>
<IndicatorValue
isPercent={lowLife.isPercent}
type={'percentile'}
displayStat={null}
/>
</LocalizedComponent>,
@ -203,3 +196,153 @@ describe('test that the unit suffix renders correctly', ()=> {
expect(asFragment()).toMatchSnapshot();
});
});
describe('renders value correctly for historic underinvest.', () => {
it('checks if it renders when HRS_ET = true', () => {
const historicUnderinvest:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: true,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={historicUnderinvest}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if it renders when HRS_ET = false:', () => {
const historicUnderinvest:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: false,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={historicUnderinvest}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if it renders nothin when HRS_ET = null:', () => {
const historicUnderinvest:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: null,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={historicUnderinvest}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
});
describe('renders value correctly for abandoned land mines', () => {
it('checks if it renders when AML_RAW = true', () => {
const abandonMines:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: true,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={abandonMines}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if it renders when AML_RAW = false:', () => {
const abandonMines:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: false,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={abandonMines}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if it renders nothin when AML_RAW = null:', () => {
const abandonMines:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: null,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={abandonMines}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
});
describe('renders value correctly for Former defense sites', () => {
it('checks if it renders when FUDS_RAW = true', () => {
const formerDefSites:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: true,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={formerDefSites}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if it renders when FUDS_RAW = false:', () => {
const formerDefSites:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: false,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={formerDefSites}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if it renders nothin when FUDS_RAW = null:', () => {
const formerDefSites:indicatorInfo = {
label: 'some label',
description: 'some description',
type: 'boolean',
value: null,
isDisadvagtaged: true,
};
const {asFragment} = render(
<LocalizedComponent>
<Indicator indicator={formerDefSites}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
});

108
client/src/components/Indicator/Indicator.tsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {indicatorInfo} from '../AreaDetail/AreaDetail';
import {indicatorInfo, indicatorType} from '../AreaDetail/AreaDetail';
import * as styles from './Indicator.module.scss';
import * as constants from '../../data/constants';
@ -19,19 +19,20 @@ interface IIndicator {
}
interface IIndicatorValueIcon {
type: indicatorType,
value: number | null,
isAboveThresh: boolean,
};
interface IIndicatorValueSubText {
value: number | null,
type: indicatorType,
value: number | null | boolean,
isAboveThresh: boolean,
threshold: number,
isPercent: boolean | undefined,
}
interface IIndicatorValue {
isPercent: boolean | undefined,
type: indicatorType,
displayStat: number | null,
}
@ -42,7 +43,7 @@ interface IIndicatorValue {
* @param {number | null} props
* @return {JSX.Element}
*/
export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon) => {
export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => {
const intl = useIntl();
if (value == null) {
@ -50,7 +51,7 @@ export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon)
src={unAvailable}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
/>;
} else {
} else if (type === 'percent' || type === 'percentile') {
return isAboveThresh ?
<img
src={upArrow}
@ -60,7 +61,7 @@ export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon)
src={downArrow}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN)}
/>;
}
} else return <></>;
};
/**
@ -69,32 +70,40 @@ export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon)
* "below 20 percent"
* "data is not available"
*
* Todo: refactor into single component, add to i18n and add to tests
*
* @param {IIndicatorValueSubText} {}
* @return {JSX.Element}
*/
export const IndicatorValueSubText = ({value, isAboveThresh, threshold, isPercent}:IIndicatorValueSubText) => {
return value == null ?
export const IndicatorValueSubText = ({type, value, isAboveThresh, threshold}:IIndicatorValueSubText) => {
if (value === null) {
return (
<div>
{EXPLORE_COPY.SIDE_PANEL_VALUES.UNAVAILBLE_MSG}
</div> :
</div>
);
} else if (type === 'percent' || type === 'percentile') {
return (
<div>
{
isAboveThresh ?
EXPLORE_COPY.SIDE_PANEL_VALUES.ABOVE :
EXPLORE_COPY.SIDE_PANEL_VALUES.BELOW
}
{threshold ?
<IndicatorValue isPercent={isPercent} displayStat={threshold} /> :
<IndicatorValue isPercent={isPercent} displayStat={90} />
{
threshold ?
<IndicatorValue type={type} displayStat={threshold}/> :
<IndicatorValue type={type} displayStat={90}/>
}
{` `}
{
isPercent ?
type === 'percent' ?
EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENT :
EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENTILE
}
</div>;
</div>
);
} else {
return (<></>);
}
};
/**
@ -138,16 +147,35 @@ export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
};
/**
* This component will return the indicators's value with an ordinal suffix
* or a percentage sign using i18n functions
* This component will return the indicators's value. The value depends on the
* indicator type. Each type renders a different UI.
*
* @return {JSX.Element | null}
*/
export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => {
const intl = useIntl();
if (displayStat === null) return <React.Fragment></React.Fragment>;
if (type === 'percent' || type === 'percentile') {
// In this case we will show no value and an icon only
if (type === 'percent') {
// If the type is percent, return the intl percent format
return (
<span>
{intl.formatNumber(
displayStat,
{
style: 'unit',
unit: 'percent',
unitDisplay: 'short',
},
)}
</span>
);
} else {
// If the type is percentile, create the intl ordinal and return it as a superscript
const i18nOrdinalSuffix: string = intl.formatMessage(
{
id: 'explore.map.page.side.panel.indicator.percentile.value.ordinal.suffix',
@ -166,18 +194,14 @@ export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
indicatorValue: displayStat,
},
);
return isPercent ?
<span>
{intl.formatNumber(
displayStat,
{
style: 'unit',
unit: 'percent',
unitDisplay: 'short',
},
)}
</span> : superscriptOrdinal(i18nOrdinalSuffix);
return superscriptOrdinal(i18nOrdinalSuffix);
}
} else {
// when the type === boolean the display stat will be either 100 (true) or 0 (false)
return displayStat === 0 ?
EXPLORE_COPY.SIDE_PANEL_SPACERS.NO :
EXPLORE_COPY.SIDE_PANEL_SPACERS.YES;
}
};
/**
@ -187,8 +211,14 @@ export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
* @return {JSX.Element}
*/
const Indicator = ({indicator}:IIndicator) => {
// Convert the decimal value to a stat to display
const displayStat = indicator.value !== null ? Math.floor(indicator.value * 100) : null;
/**
* The indicator value could be a number | boolean | null. In all cases we coerce to number
* before flooring.
*
* In the case where indicator.value is a boolean, the displayStat will be either 100 or 0, depending
* on if indicator.value is true or false respectively.
*/
const displayStat = indicator.value !== null ? Math.floor(Number(indicator.value) * 100) : null;
// If the threshold exists, set it, otherwise set it to the default value
const threshold = indicator.threshold ? indicator.threshold : constants.DEFAULT_THRESHOLD_PERCENTILE;
@ -196,7 +226,6 @@ const Indicator = ({indicator}:IIndicator) => {
// A boolean to represent if the indicator is above or below the threshold
const isAboveThresh = displayStat !== null && displayStat >= threshold ? true : false;
return (
<li
className={indicator.isDisadvagtaged ? styles.disadvantagedIndicator : styles.indicatorBoxMain}
@ -218,12 +247,16 @@ const Indicator = ({indicator}:IIndicator) => {
{/* Indicator value */}
<div className={styles.indicatorValue}>
<IndicatorValue isPercent={indicator.isPercent} displayStat={displayStat}/>
<IndicatorValue
type={indicator.type}
displayStat={displayStat}
/>
</div>
{/* Indicator icon - up arrow, down arrow, or unavailable */}
<div className={styles.indicatorArrow}>
<IndicatorValueIcon
type={indicator.type}
value={displayStat}
isAboveThresh={isAboveThresh}
/>
@ -236,9 +269,10 @@ const Indicator = ({indicator}:IIndicator) => {
value={displayStat}
isAboveThresh={isAboveThresh}
threshold={threshold}
isPercent={indicator.isPercent}
type={indicator.type}
/>
</div>
</div>
</div>
</li>

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

@ -84,6 +84,270 @@ exports[`rendering of the Indicator checks if the flooring function works 1`] =
</DocumentFragment>
`;
exports[`renders value correctly for Former defense sites checks if it renders nothin when FUDS_RAW = null: 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
missing data
</div>
</div>
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for Former defense sites checks if it renders when FUDS_RAW = false: 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
No
</div>
<div />
</div>
<div />
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for Former defense sites checks if it renders when FUDS_RAW = true 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
Yes
</div>
<div />
</div>
<div />
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for abandoned land mines checks if it renders nothin when AML_RAW = null: 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
missing data
</div>
</div>
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for abandoned land mines checks if it renders when AML_RAW = false: 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
No
</div>
<div />
</div>
<div />
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for abandoned land mines checks if it renders when AML_RAW = true 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
Yes
</div>
<div />
</div>
<div />
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for historic underinvest. checks if it renders nothin when HRS_ET = null: 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
missing data
</div>
</div>
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for historic underinvest. checks if it renders when HRS_ET = false: 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
No
</div>
<div />
</div>
<div />
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`renders value correctly for historic underinvest. checks if it renders when HRS_ET = true 1`] = `
<DocumentFragment>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
some label
<div>
some description
</div>
</div>
<div>
<div>
<div>
Yes
</div>
<div />
</div>
<div />
</div>
</div>
</li>
</DocumentFragment>
`;
exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = `
<DocumentFragment>
<img
@ -102,7 +366,16 @@ exports[`test rendering of Indicator value icons renders the down arrow when the
</DocumentFragment>
`;
exports[`test rendering of Indicator value icons renders the unavailable icon when the value is null 1`] = `
exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a boolean null 1`] = `
<DocumentFragment>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</DocumentFragment>
`;
exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a percentile null 1`] = `
<DocumentFragment>
<img
alt="an icon to represent data is unavailable"
@ -120,6 +393,14 @@ exports[`test rendering of Indicator value icons renders the up arrow when value
</DocumentFragment>
`;
exports[`test rendering of Indicator value sub-text renders missing data 1`] = `
<DocumentFragment>
<div>
missing data
</div>
</DocumentFragment>
`;
exports[`test rendering of Indicator value sub-text renders the "above 90 percentile" 1`] = `
<DocumentFragment>
<div>
@ -148,14 +429,6 @@ exports[`test rendering of Indicator value sub-text renders the "below 90 percen
</DocumentFragment>
`;
exports[`test rendering of Indicator value sub-text renders the "data is not available" 1`] = `
<DocumentFragment>
<div>
data is not available
</div>
</DocumentFragment>
`;
exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = `<DocumentFragment />`;
exports[`test that the unit suffix renders correctly renders correctly when the value is a percent 1`] = `

388
client/src/components/TractDemographics/TractDemographics.test.tsx
View file

@ -3,13 +3,395 @@ import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import TractDemographics from './TractDemographics';
describe('rendering of TractDemographics Component', () => {
const propertiesAS = {
'GEOID10': '60010950300',
'SF': 'American Samoa',
'M_WTR': false,
'M_WKFC': true,
'M_CLT': false,
'M_ENY': false,
'M_TRN': false,
'M_HSG': false,
'M_PLN': false,
'M_HLTH': false,
'SM_C': true,
'SM_DON': false,
'SM_NO_DON': true,
'EPLRLI': false,
'EALRLI': false,
'EBLRLI': false,
'PM25LI': false,
'EBLI': false,
'DPMLI': false,
'TPLI': false,
'LPMHVLI': false,
'HBLI': false,
'RMPLI': false,
'SFLI': false,
'HWLI': false,
'WDLI': false,
'USTLI': false,
'DLI': false,
'ALI': false,
'HDLI': false,
'LLELI': false,
'LILHSE': false,
'PLHSE': false,
'LMILHSE': false,
'ULHSE': false,
'EPL_ET': false,
'EAL_ET': false,
'EBL_ET': false,
'EB_ET': false,
'PM25_ET': false,
'DS_ET': false,
'TP_ET': false,
'LPP_ET': false,
'KP_ET': false,
'HB_ET': false,
'RMP_ET': false,
'NPL_ET': false,
'TSDF_ET': false,
'WD_ET': false,
'UST_ET': false,
'DB_ET': false,
'A_ET': false,
'HD_ET': false,
'LLE_ET': false,
'UN_ET': false,
'LISO_ET': false,
'POV_ET': false,
'LMI_ET': false,
'IA_LMI_ET': false,
'IA_UN_ET': false,
'IA_POV_ET': true,
'TC': 1,
'CC': 1,
'IAULHSE': false,
'IAPLHSE': true,
'IALMILHSE': false,
'IALMILHSE_PFS': 0.27,
'IAPLHSE_PFS': 0.98,
'IAULHSE_PFS': 0.75,
'LHE': false,
'IALHE': true,
'IAHSEF': 0.52,
'CA_LT20': false,
'M_CLT_EOMI': false,
'M_ENY_EOMI': false,
'M_TRN_EOMI': false,
'M_HSG_EOMI': false,
'M_PLN_EOMI': false,
'M_WTR_EOMI': false,
'M_HLTH_EOMI': false,
'M_WKFC_EOMI': true,
'FPL200S': false,
'M_WKFC_EBSI': true,
'TD_ET': false,
'FLD_ET': false,
'WFR_ET': false,
'ADJ_ET': true,
'ADJ_PFS': 1,
'IS_ET': false,
'FUDS_ET': '0',
'UI_EXP': 'Island Areas',
'THRHLD': 3,
};
const propertiesNYC = {
'GEOID10': '36081020800',
'SF': 'New York',
'CF': 'Queens County',
'DF_PFS': 0.69,
'AF_PFS': 0.46,
'HDF_PFS': 0.29,
'DSF_PFS': 0.96,
'EBF_PFS': 0.75,
'EBLR_PFS': 0.11,
'EPLR_PFS': 0.19,
'HBF_PFS': 0.75,
'LLEF_PFS': 0.2,
'LIF_PFS': 0.9,
'LMI_PFS': 0.35,
'MHVF_PFS': 0.93,
'PM25F_PFS': 0.44,
'HSEF': 0.2830459770114942,
'P100_PFS': 0.43,
'P200_PFS': 0.41,
'P200_I_PFS': 0.37,
'LPF_PFS': 0.93,
'KP_PFS': 0.2159833426939357,
'NPL_PFS': 0.73,
'RMP_PFS': 0.42,
'TSDF_PFS': 0.87,
'TPF': 3136,
'TF_PFS': 0.92,
'UF_PFS': 0.86,
'UST_PFS': 0.9877704355346548,
'M_WTR': false,
'M_WKFC': true,
'M_CLT': false,
'M_ENY': false,
'M_TRN': false,
'M_HSG': false,
'M_PLN': false,
'M_HLTH': false,
'SM_C': true,
'SM_DON': false,
'SM_NO_DON': true,
'EPLRLI': false,
'EALRLI': false,
'EBLRLI': false,
'PM25LI': false,
'EBLI': false,
'DPMLI': false,
'TPLI': false,
'LPMHVLI': false,
'HBLI': false,
'RMPLI': false,
'SFLI': false,
'HWLI': false,
'WDLI': false,
'USTLI': false,
'DLI': false,
'ALI': false,
'HDLI': false,
'LLELI': false,
'LILHSE': true,
'PLHSE': false,
'LMILHSE': false,
'ULHSE': false,
'EPL_ET': false,
'EAL_ET': false,
'EBL_ET': false,
'EB_ET': false,
'PM25_ET': false,
'DS_ET': true,
'TP_ET': true,
'LPP_ET': false,
'HRS_ET': '1',
'KP_ET': false,
'HB_ET': false,
'RMP_ET': false,
'NPL_ET': false,
'TSDF_ET': false,
'WD_ET': false,
'UST_ET': true,
'DB_ET': false,
'A_ET': false,
'HD_ET': false,
'LLE_ET': false,
'UN_ET': false,
'LISO_ET': true,
'POV_ET': false,
'LMI_ET': false,
'IA_LMI_ET': false,
'IA_UN_ET': false,
'IA_POV_ET': false,
'TC': 1,
'CC': 1,
'IAULHSE': false,
'IAPLHSE': false,
'IALMILHSE': false,
'LHE': true,
'IALHE': false,
'CA': 0.1,
'NCA': 0.89,
'CA_LT20': true,
'M_CLT_EOMI': false,
'M_ENY_EOMI': false,
'M_TRN_EOMI': true,
'M_HSG_EOMI': false,
'M_PLN_EOMI': false,
'M_WTR_EOMI': false,
'M_HLTH_EOMI': false,
'M_WKFC_EOMI': true,
'FPL200S': false,
'M_WKFC_EBSI': true,
'TD_ET': false,
'TD_PFS': 0.61,
'FLD_PFS': 0.52,
'WFR_PFS': 0.33,
'FLD_ET': false,
'WFR_ET': false,
'ADJ_ET': true,
'ADJ_PFS': 1,
'IS_PFS': 0.99,
'IS_ET': false,
'IMP_FLG': '0',
'DM_B': 0.22,
'DM_AI': 0.03,
'DM_A': 0.09,
'DM_HI': 0,
'DM_T': 0.1,
'DM_W': 0.11,
'DM_H': 0.33,
'DM_O': 0.36,
'AGE_10': 0.13,
'AGE_MIDDLE': 0.8,
'AGE_OLD': 0.06,
'UI_EXP': 'Nation',
'THRHLD': 21,
};
const propertiesAK = {
'GEOID10': '02290000300',
'SF': 'Alaska',
'CF': 'Yukon-Koyukuk Census Area',
'DF_PFS': 0.87,
'AF_PFS': 0.93,
'HDF_PFS': 0.92,
'DSF_PFS': 0,
'EBF_PFS': 0.97,
'EBLR_PFS': 0.76,
'EPLR_PFS': 0.71,
'HBF_PFS': 0.22,
'LLEF_PFS': 0.79,
'LIF_PFS': 0.5,
'LMI_PFS': 0.89,
'MHVF_PFS': 0.07,
'HSEF': 0.128,
'P100_PFS': 0.84,
'P200_PFS': 0.79,
'P200_I_PFS': 0.81,
'LPF_PFS': 0.11,
'KP_PFS': 0.9996164436103616,
'NPL_PFS': 0,
'RMP_PFS': 0,
'TSDF_PFS': 0,
'TPF': 1821,
'UF_PFS': 0.97,
'UST_PFS': 0.0563641031877947,
'M_WTR': false,
'M_WKFC': true,
'M_CLT': false,
'M_ENY': true,
'M_TRN': false,
'M_HSG': false,
'M_PLN': false,
'M_HLTH': true,
'SM_C': true,
'SM_DON': false,
'SM_NO_DON': true,
'EPLRLI': false,
'EALRLI': false,
'EBLRLI': false,
'PM25LI': false,
'EBLI': true,
'DPMLI': false,
'TPLI': false,
'LPMHVLI': false,
'HBLI': false,
'RMPLI': false,
'SFLI': false,
'HWLI': false,
'WDLI': false,
'USTLI': false,
'DLI': false,
'ALI': true,
'HDLI': true,
'LLELI': false,
'LILHSE': false,
'PLHSE': false,
'LMILHSE': false,
'ULHSE': true,
'EPL_ET': false,
'EAL_ET': false,
'EBL_ET': false,
'EB_ET': true,
'PM25_ET': false,
'DS_ET': false,
'TP_ET': false,
'LPP_ET': false,
'KP_ET': true,
'HB_ET': false,
'RMP_ET': false,
'NPL_ET': false,
'TSDF_ET': false,
'WD_ET': false,
'UST_ET': false,
'DB_ET': false,
'A_ET': true,
'HD_ET': true,
'LLE_ET': false,
'UN_ET': true,
'LISO_ET': false,
'POV_ET': false,
'LMI_ET': false,
'IA_LMI_ET': false,
'IA_UN_ET': false,
'IA_POV_ET': false,
'TC': 6,
'CC': 5,
'IAULHSE': false,
'IAPLHSE': false,
'IALMILHSE': false,
'LHE': true,
'IALHE': false,
'CA': 0.05,
'NCA': 0.94,
'CA_LT20': true,
'M_CLT_EOMI': false,
'M_ENY_EOMI': true,
'M_TRN_EOMI': false,
'M_HSG_EOMI': true,
'M_PLN_EOMI': true,
'M_WTR_EOMI': false,
'M_HLTH_EOMI': true,
'M_WKFC_EOMI': true,
'FPL200S': true,
'M_WKFC_EBSI': true,
'TD_ET': false,
'TD_PFS': 0.43,
'FLD_PFS': 0.05,
'FLD_ET': false,
'WFR_ET': false,
'ADJ_ET': false,
'ADJ_PFS': 0.75,
'IS_ET': false,
'FUDS_ET': '1',
'IMP_FLG': '0',
'DM_B': 0,
'DM_AI': 0.78,
'DM_A': 0,
'DM_HI': 0,
'DM_T': 0.03,
'DM_W': 0.15,
'DM_H': 0.02,
'DM_O': 0,
'AGE_10': 0.17,
'AGE_MIDDLE': 0.69,
'AGE_OLD': 0.12,
'UI_EXP': 'Nation',
'THRHLD': 21,
};
describe('rendering of TractDemographics component', () => {
it('does it render a tract in American Samoa correctly? ', () => {
const {asFragment} = render(
<LocalizedComponent>
<TractDemographics />
<TractDemographics properties={propertiesAS}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('does it render a tract in NYC correctly? ', () => {
const {asFragment} = render(
<LocalizedComponent>
<TractDemographics properties={propertiesNYC}/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('does it render a tract in Alaska correctly? ', () => {
const {asFragment} = render(
<LocalizedComponent>
<TractDemographics properties={propertiesAK}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

175
client/src/components/TractDemographics/TractDemographics.tsx
View file

@ -6,54 +6,32 @@ import expandIcon from '/node_modules/uswds/dist/img/usa-icons/expand_more.svg';
import collapseIcon from '/node_modules/uswds/dist/img/usa-icons/expand_less.svg';
import * as styles from './TractDemographics.module.scss';
import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore';
// Mock interface
export interface ITractDemographicsProps {
racial: [string, number][],
age: [string, number][]
properties: constants.J40Properties
}
// Mock backend data
const demographicsData:ITractDemographicsProps = {
racial: [
['White', 61.4],
['Black or African Americon', 10.3],
['American Indian and Alaska Native', 10.3],
['Asian', 7.2],
['Native Hawiian or Pacific Islander', 4.2],
['Other', 2.5],
['Two or more races', 6.7],
['Hispanic or Latino', 10.4],
],
age: [
['Children under 10', 1.4],
['Ages 10 - 64', 80.3],
['Elderly over 65', 7.2],
],
};
/*
* Generate the demographic item based the input
* // TODO: Update after actual data is created
*
*/
const demographicItemGen = (demographicData: any[]) => {
return demographicData.map((el, index) => {
return (
<div key={index} className={styles.demographicItem}>
<span>{ el[0] }</span>
<span>{`${el[1]}%`}</span>
</div>
);
});
};
interface IDemographicsData {
race: [React.ReactElement, number][],
age: [React.ReactElement, number][],
}
interface IJ40AccordionItem {
id: string,
title: string,
children: React.ElementType
title: React.ReactElement,
children: React.ReactElement
}
/**
* This function will create the custom Accordion item. This will be used
* for the race and age demographic UI elements
*
* @param {IJ40AccordionItem} props
* @return {JSX.Element}
*/
const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
const [isExpanded, setIsExpanded] = useState(false);
return (
@ -100,18 +78,125 @@ const J40AccordionItem = ({id, title, children}:IJ40AccordionItem) => {
);
};
const TractDemographics = () => {
/**
* This function will create each line item on the list of demographics
*
* @param {[]} demographicData
* @return {JSX.Element}
*/
const demographicItemGen = (demographicData: []) => {
return demographicData.map((el, index) => {
return (
<div key={index} className={styles.demographicItem}>
<span>{ el[0] }</span>
{typeof el[1] === 'number' ?
<span>{`${el[1]}%`}</span> :
<span>{`${el[1]}`}</span> }
</div>
);
});
};
/**
* This function will return the numeric value of each demographic. Taking into
* account cases when the data is undefined or is null
*
* @param {number} stat
* @return {number}
*/
const displayStat = (stat: number) => {
if (stat === undefined || stat === null) {
return '--';
} else if (stat === 0) {
return 0;
}
return Number(Math.floor(stat * 100));
};
/**
* This function will create the data structure for the demographics data
*
* @param {constants.J40Properties} properties
* @return {IDemographicsData}
*/
const getDemographicsData = (properties:constants.J40Properties):IDemographicsData => (
{
race: [
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_NON_HISPANIC_WHITE,
displayStat(properties[constants.DEMO_NON_HISPANIC_WHITE]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_BLACK,
displayStat(properties[constants.DEMO_BLACK]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AMERICAN_INDIAN,
displayStat(properties[constants.DEMO_AMERICAN_INDIAN]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_ASIAN,
displayStat(properties[constants.DEMO_ASIAN]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_HAWAIIAN,
displayStat(properties[constants.DEMO_HAWAIIAN]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_OTHER_RACE,
displayStat(properties[constants.DEMO_OTHER_RACE]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_TWO_OR_MORE_RACES,
displayStat(properties[constants.DEMO_TWO_OR_MORE_RACES]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_HISPANIC,
displayStat(properties[constants.DEMO_HISPANIC]),
],
],
age: [
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AGE_UNDER_10,
displayStat(properties[constants.DEMO_AGE_UNDER_10]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AGE_MID,
displayStat(properties[constants.DEMO_AGE_MID]),
],
[
EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.DEMO_AGE_OVER_64,
displayStat(properties[constants.DEMO_AGE_OVER_64]),
],
],
});
/**
* This is the main component for this file. It accepts the selected feature
* as a prop and return the demographics component.
*
* @param {ITractDemographicsProps} props
* @return {JSX.Element}
*/
const TractDemographics = ({properties}: ITractDemographicsProps) => {
const {race, age} = getDemographicsData(properties);
return (
<div className={styles.demographicsContainer}>
<div className={styles.demographicsTitle}>
Tract demographics
{EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.TITLE}
</div>
<>
<J40AccordionItem id={'race'} title={`Race / Ethnicity`}>
{demographicItemGen(demographicsData.racial)}
<J40AccordionItem id={'race'} title={EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.RACE_TITLE}>
{demographicItemGen(race)}
</J40AccordionItem>
<J40AccordionItem id={'age'} title={`Age`}>
{demographicItemGen(demographicsData.age)}
<J40AccordionItem id={'age'} title={EXPLORE_COPY.SIDE_PANEL_DEMOGRAPHICS.AGE_TITLE}>
{demographicItemGen(age)}
</J40AccordionItem>
</>
</div>

324
client/src/components/TractDemographics/__snapshots__/TractDemographics.test.tsx.snap
View file

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of TractDemographics Component checks if component renders 1`] = `
exports[`rendering of TractDemographics component does it render a tract in Alaska correctly? 1`] = `
<DocumentFragment>
<div>
<div>
@ -35,15 +35,15 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
White
</span>
<span>
61.4%
15%
</span>
</div>
<div>
<span>
Black or African Americon
Black or African American
</span>
<span>
10.3%
0%
</span>
</div>
<div>
@ -51,7 +51,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
American Indian and Alaska Native
</span>
<span>
10.3%
78%
</span>
</div>
<div>
@ -59,7 +59,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Asian
</span>
<span>
7.2%
0%
</span>
</div>
<div>
@ -67,7 +67,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Native Hawiian or Pacific Islander
</span>
<span>
4.2%
0%
</span>
</div>
<div>
@ -75,7 +75,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Other
</span>
<span>
2.5%
0%
</span>
</div>
<div>
@ -83,7 +83,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Two or more races
</span>
<span>
6.7%
3%
</span>
</div>
<div>
@ -91,7 +91,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Hispanic or Latino
</span>
<span>
10.4%
2%
</span>
</div>
</section>
@ -124,7 +124,7 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Children under 10
</span>
<span>
1.4%
17%
</span>
</div>
<div>
@ -132,15 +132,311 @@ exports[`rendering of TractDemographics Component checks if component renders 1`
Ages 10 - 64
</span>
<span>
80.3%
69%
</span>
</div>
<div>
<span>
Elderly over 65
Elderly over 64
</span>
<span>
7.2%
12%
</span>
</div>
</section>
</div>
</DocumentFragment>
`;
exports[`rendering of TractDemographics component does it render a tract in American Samoa correctly? 1`] = `
<DocumentFragment>
<div>
<div>
Tract demographics
</div>
<h6>
Race / Ethnicity
<span>
(
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="race-header"
hidden=""
id="race-panel"
>
<div>
<span>
White
</span>
<span>
--
</span>
</div>
<div>
<span>
Black or African American
</span>
<span>
--
</span>
</div>
<div>
<span>
American Indian and Alaska Native
</span>
<span>
--
</span>
</div>
<div>
<span>
Asian
</span>
<span>
--
</span>
</div>
<div>
<span>
Native Hawiian or Pacific Islander
</span>
<span>
--
</span>
</div>
<div>
<span>
Other
</span>
<span>
--
</span>
</div>
<div>
<span>
Two or more races
</span>
<span>
--
</span>
</div>
<div>
<span>
Hispanic or Latino
</span>
<span>
--
</span>
</div>
</section>
<h6>
Age
<span>
(
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="age-header"
hidden=""
id="age-panel"
>
<div>
<span>
Children under 10
</span>
<span>
--
</span>
</div>
<div>
<span>
Ages 10 - 64
</span>
<span>
--
</span>
</div>
<div>
<span>
Elderly over 64
</span>
<span>
--
</span>
</div>
</section>
</div>
</DocumentFragment>
`;
exports[`rendering of TractDemographics component does it render a tract in NYC correctly? 1`] = `
<DocumentFragment>
<div>
<div>
Tract demographics
</div>
<h6>
Race / Ethnicity
<span>
(
<button
aria-controls="race-panel"
aria-expanded="false"
id="race-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="race-header"
hidden=""
id="race-panel"
>
<div>
<span>
White
</span>
<span>
11%
</span>
</div>
<div>
<span>
Black or African American
</span>
<span>
22%
</span>
</div>
<div>
<span>
American Indian and Alaska Native
</span>
<span>
3%
</span>
</div>
<div>
<span>
Asian
</span>
<span>
9%
</span>
</div>
<div>
<span>
Native Hawiian or Pacific Islander
</span>
<span>
0%
</span>
</div>
<div>
<span>
Other
</span>
<span>
36%
</span>
</div>
<div>
<span>
Two or more races
</span>
<span>
10%
</span>
</div>
<div>
<span>
Hispanic or Latino
</span>
<span>
33%
</span>
</div>
</section>
<h6>
Age
<span>
(
<button
aria-controls="age-panel"
aria-expanded="false"
id="age-header"
tabindex="0"
>
show
</button>
<img
alt="expand icon"
src="test-file-stub"
/>
)
</span>
</h6>
<section
aria-labelledby="age-header"
hidden=""
id="age-panel"
>
<div>
<span>
Children under 10
</span>
<span>
13%
</span>
</div>
<div>
<span>
Ages 10 - 64
</span>
<span>
80%
</span>
</div>
<div>
<span>
Elderly over 64
</span>
<span>
6%
</span>
</div>
</section>

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

@ -38,6 +38,20 @@ export const COUNTY_NAME = 'CF';
export const STATE_NAME = 'SF';
export const TOTAL_POPULATION = 'TPF';
// Demographics
export const DEMO_NON_HISPANIC_WHITE = 'DM_W';
export const DEMO_BLACK = 'DM_B';
export const DEMO_AMERICAN_INDIAN = 'DM_AI';
export const DEMO_ASIAN = 'DM_A';
export const DEMO_HAWAIIAN = 'DM_HI';
export const DEMO_OTHER_RACE = 'DM_O';
export const DEMO_TWO_OR_MORE_RACES = 'DM_T';
export const DEMO_HISPANIC = 'DM_H';
export const DEMO_AGE_UNDER_10 = 'AGE_10';
export const DEMO_AGE_MID = 'AGE_MIDDLE';
export const DEMO_AGE_OVER_64 = 'AGE_OLD';
/**
* The SCORE_BOUNDAY_THRESHOLD will determine if the tract is disadvantaged
* or not. Currently all values are railed to 0 or 1. If the
@ -59,8 +73,8 @@ export const SIDE_PANEL_STATE_VALUES = {
};
// Climate category
export const IS_CLIMATE_FACTOR_DISADVANTAGED_M = 'M_CLT';
export const IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_CLT_EOMI';
export const IS_CLIMATE_FACTOR_DISADVANTAGED_M = 'N_CLT';
export const IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_CLT_EOMI';
export const EXP_AGRICULTURE_LOSS_PERCENTILE = 'EALR_PFS';
export const IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS = 'EAL_ET';
@ -77,7 +91,7 @@ export const IS_EXCEEDS_THRESH_FLOODING = 'FLD_ET';
export const WILDFIRE_PERCENTILE = 'WF_PFS';
export const IS_EXCEEDS_THRESH_WILDFIRE = 'WF_ET';
export const IS_EXCEED_BOTH_SOCIO_INDICATORS_M = 'M_EBSI';
export const IS_EXCEED_BOTH_SOCIO_INDICATORS_M = 'N_EBSI';
export const POVERTY_BELOW_200_PERCENTILE = 'P200_PFS';
export const IS_FEDERAL_POVERTY_LEVEL_200 = 'FPL200S';
@ -89,8 +103,8 @@ export const NON_HIGHER_ED_PERCENTILE = 'NCA';
// Energy category
export const IS_ENERGY_FACTOR_DISADVANTAGED_M = 'M_ENY';
export const IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_ENY_EOMI';
export const IS_ENERGY_FACTOR_DISADVANTAGED_M = 'N_ENY';
export const IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_ENY_EOMI';
export const ENERGY_PERCENTILE = 'EBF_PFS';
export const IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN = 'EB_ET';
@ -100,8 +114,8 @@ export const IS_EXCEEDS_THRESH_FOR_PM25 = 'PM25_ET';
// Transport category
export const IS_TRANSPORT_FACTOR_DISADVANTAGED_M = 'M_TRN';
export const IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_TRN_EOMI';
export const IS_TRANSPORT_FACTOR_DISADVANTAGED_M = 'N_TRN';
export const IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_TRN_EOMI';
export const DIESEL_MATTER_PERCENTILE = 'DSF_PFS';
export const IS_EXCEEDS_THRESH_FOR_DIESEL_PM = 'DS_ET';
@ -114,8 +128,11 @@ export const IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX = 'TP_ET';
// Housing category
export const IS_HOUSING_FACTOR_DISADVANTAGED_M = 'M_HSG';
export const IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_HSG_EOMI';
export const IS_HOUSING_FACTOR_DISADVANTAGED_M = 'N_HSG';
export const IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_HSG_EOMI';
export const HISTORIC_UNDERINVESTMENT_EXCEED_THRESH = 'HRS_ET';
export const HISTORIC_UNDERINVESTMENT_RAW_YES = 1;
export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'HBF_PFS';
export const IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN = 'HB_ET';
@ -133,8 +150,17 @@ export const IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL = 'LPP_ET';
// Pollution category
export const IS_POLLUTION_FACTOR_DISADVANTAGED_M = 'M_PLN';
export const IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_PLN_EOMI';
export const IS_POLLUTION_FACTOR_DISADVANTAGED_M = 'N_PLN';
export const IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_PLN_EOMI';
export const ABANDON_LAND_MINES_RAW_VALUE = 'AML_RAW';
export const AML_RAW_YES = 1;
export const ABANDON_LAND_MINES_EXCEEDS_THRESH = 'AML_ET';
export const FORMER_DEF_SITES_RAW_VALUE = 'FUDS_RAW';
export const FUDS_RAW_YES = 1;
export const FUDS_RAW_NO = 0;
export const FORMER_DEF_SITES_EXCEEDS_THRESH = 'FUDS_ET';
export const PROXIMITY_TSDF_SITES_PERCENTILE = 'TSDF_PFS';
export const IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE = 'TSDF_ET';
@ -147,8 +173,8 @@ export const IS_EXCEEDS_THRESH_FOR_RMP = 'RMP_ET';
// Water category
export const IS_WATER_FACTOR_DISADVANTAGED_M = 'M_WTR';
export const IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_WTR_EOMI';
export const IS_WATER_FACTOR_DISADVANTAGED_M = 'N_WTR';
export const IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_WTR_EOMI';
export const LEAKY_UNDER_PERCENTILE = 'UST_PFS';
export const IS_EXCEEDS_THRESH_LEAKY_UNDER = 'UST_ET';
@ -159,8 +185,8 @@ export const IS_EXCEEDS_THRESH_FOR_WASTEWATER = 'WD_ET';
// Health category
export const IS_HEALTH_FACTOR_DISADVANTAGED_M = 'M_HLTH';
export const IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_HLTH_EOMI';
export const IS_HEALTH_FACTOR_DISADVANTAGED_M = 'N_HLTH';
export const IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_HLTH_EOMI';
export const ASTHMA_PERCENTILE = 'AF_PFS';
export const IS_EXCEEDS_THRESH_FOR_ASTHMA = 'A_ET';
@ -176,8 +202,8 @@ export const IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP = 'LLE_ET';
// Workforce category
export const IS_WORKFORCE_FACTOR_DISADVANTAGED_M = 'M_WKFC';
export const IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_WKFC_EOMI';
export const IS_WORKFORCE_FACTOR_DISADVANTAGED_M = 'N_WKFC';
export const IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'N_WKFC_EOMI';
export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'LIF_PFS';
export const IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO = 'LISO_ET';
@ -197,7 +223,7 @@ export const IS_EXCEEDS_THRESH_FOR_BELOW_100_POVERTY = 'POV_ET';
export const ISLAND_AREAS_POVERTY_LOW_HS_EDU_PERCENTILE_FIELD= 'IAPLHSE_PFS';
export const IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_BELOW_100_POVERTY = 'IA_POV_ET';
export const IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS_M = 'M_WKFC_EBSI';
export const IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS_M = 'N_WKFC_EBSI';
export const HIGH_SCHOOL_PROPERTY_PERCENTILE = `HSEF`;
export const IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED = 'LHE';
@ -226,8 +252,8 @@ export const SELECTED_TRIBAL_FEATURE_BORDER_LAYER_ID = 'selected-feature-tribal-
export const TRIBAL_ALASKA_POINTS_LAYER_ID = 'tribal-alaska-points-layer-id';
// Used in layer filters:
export const SCORE_PROPERTY_LOW = 'M_SCORE';
export const SCORE_PROPERTY_HIGH = 'SM_C';
export const SCORE_PROPERTY_LOW = 'SCORE';
export const SCORE_PROPERTY_HIGH = 'SN_C';
// Zoom
export const GLOBAL_MIN_ZOOM = 3;

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

@ -331,6 +331,79 @@ export const SIDE_PANEL_CBG_INFO = defineMessages({
},
});
export const SIDE_PANEL_DEMOGRAPHICS = {
TITLE: <FormattedMessage
id={'explore.map.page.side.panel.demo.title'}
defaultMessage={'Tract demographics'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics title`}
/>,
RACE_TITLE: <FormattedMessage
id={'explore.map.page.side.panel.demo.race.title'}
defaultMessage={'Race / Ethnicity'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics race title`}
/>,
AGE_TITLE: <FormattedMessage
id={'explore.map.page.side.panel.demo.age.title'}
defaultMessage={'Age'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics age title`}
/>,
DEMO_NON_HISPANIC_WHITE: <FormattedMessage
id={'explore.map.page.side.panel.demo.white'}
defaultMessage={'White'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: White`}
/>,
DEMO_BLACK: <FormattedMessage
id={'explore.map.page.side.panel.demo.black'}
defaultMessage={'Black or African American'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Black`}
/>,
DEMO_AMERICAN_INDIAN: <FormattedMessage
id={'explore.map.page.side.panel.demo.american.indian'}
defaultMessage={'American Indian and Alaska Native'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: American Indian and Alaska Native`}
/>,
DEMO_ASIAN: <FormattedMessage
id={'explore.map.page.side.panel.demo.asian'}
defaultMessage={'Asian'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Asian`}
/>,
DEMO_HAWAIIAN: <FormattedMessage
id={'explore.map.page.side.panel.demo.hawaiian'}
defaultMessage={'Native Hawiian or Pacific Islander'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Native Hawiian or Pacific Islander`}
/>,
DEMO_OTHER_RACE: <FormattedMessage
id={'explore.map.page.side.panel.demo.other'}
defaultMessage={'Other'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Other`}
/>,
DEMO_TWO_OR_MORE_RACES: <FormattedMessage
id={'explore.map.page.side.panel.demo.two.or.more'}
defaultMessage={'Two or more races'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Two or more races`}
/>,
DEMO_HISPANIC: <FormattedMessage
id={'explore.map.page.side.panel.demo.hispanic'}
defaultMessage={'Hispanic or Latino'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Hispanic or Latino`}
/>,
DEMO_AGE_UNDER_10: <FormattedMessage
id={'explore.map.page.side.panel.demo.age.under.10'}
defaultMessage={'Children under 10'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Children under 10`}
/>,
DEMO_AGE_MID: <FormattedMessage
id={'explore.map.page.side.panel.demo.of.age.mid'}
defaultMessage={'Ages 10 - 64'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Ages 10 - 64`}
/>,
DEMO_AGE_OVER_64: <FormattedMessage
id={'explore.map.page.side.panel.demo.age.over.64'}
defaultMessage={'Elderly over 64'}
description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Elderly over 64`}
/>,
};
export const SIDE_PANEL_TRIBAL_INFO = defineMessages({
LAND_AREA_NAME: {
id: 'explore.map.page.side.panel.tribalInfo.landAreaName',
@ -468,32 +541,27 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
EXP_AG_LOSS: {
id: 'explore.map.page.side.panel.indicator.exp.ag.loss',
defaultMessage: 'Expected agriculture loss rate',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate`,
},
EXP_BLD_LOSS: {
id: 'explore.map.page.side.panel.indicator.exp.bld.loss',
defaultMessage: 'Expected building loss rate',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate`,
},
EXP_POP_LOSS: {
id: 'explore.map.page.side.panel.indicator.exp.pop.loss',
defaultMessage: 'Expected population loss rate',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate`,
},
FLOODING: {
id: 'explore.map.page.side.panel.indicator.flooding',
defaultMessage: 'Future flood risk',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk`,
},
WILDFIRE: {
id: 'explore.map.page.side.panel.indicator.wildfire',
defaultMessage: 'Future wildfire risk',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk`,
},
LOW_INCOME: {
id: 'explore.map.page.side.panel.indicator.low.income',
@ -502,8 +570,7 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
HIGH_ED: {
id: 'explore.map.page.side.panel.indicator.high.ed',
defaultMessage: 'Higher education non-enrollment',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate
`,
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate`,
},
ENERGY_BURDEN: {
id: 'explore.map.page.side.panel.indicator.energyBurden',
@ -540,6 +607,11 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
defaultMessage: 'Median home value',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden`,
},
HIST_UNDERINVEST: {
id: 'explore.map.page.side.panel.indicator.historic.underinvest',
defaultMessage: 'Historic underinvestment',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment`,
},
HOUSE_BURDEN: {
id: 'explore.map.page.side.panel.indicator.houseBurden',
defaultMessage: 'Housing cost burden',
@ -555,6 +627,16 @@ export const SIDE_PANEL_INDICATORS = defineMessages({
defaultMessage: 'Lack of plumbing',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Lack of plumbing`,
},
ABANDON_MINES: {
id: 'explore.map.page.side.panel.indicator.abandon.mines',
defaultMessage: 'Abandoned mine lands',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Abandoned land mines`,
},
FORMER_DEF_SITES: {
id: 'explore.map.page.side.panel.indicator.former.def.sites',
defaultMessage: 'Formerly Used Defense Sites (FUDS)',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites (FUDS)`,
},
PROX_HAZ: {
id: 'explore.map.page.side.panel.indicator.prox.haz',
defaultMessage: 'Proximity to hazardous waste facilities',
@ -668,7 +750,7 @@ export const SIDE_PANEL_VALUES = {
UNAVAILBLE_MSG: <FormattedMessage
id={'explore.map.page.side.panel.indicator.value.subtext.unavailable'}
description={'subtext for indicator when data is N/A'}
defaultMessage={`data is not available`}
defaultMessage={`missing data`}
/>,
};
@ -764,6 +846,11 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Median home value in area`,
},
HIST_UNDERINVEST: {
id: 'explore.map.page.side.panel.indicator.description.historic.underinvestment',
defaultMessage: 'Census tracts with historically high barriers to accessing home loans',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing`,
},
HOUSE_BURDEN: {
id: 'explore.map.page.side.panel.indicator.description.houseBurden',
defaultMessage: 'Low income households spending more than 30% of income on housing',
@ -780,6 +867,16 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Share of homes without indoor kitchens or plumbing`,
},
ABANDON_MINES: {
id: 'explore.map.page.side.panel.indicator.description.abandon.mines',
defaultMessage: 'Presence of an abandoned land mine within the tract',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned land mine within the tract`,
},
FORMER_DEF_SITES: {
id: 'explore.map.page.side.panel.indicator.description.former.def.sites',
defaultMessage: 'Presence of a Formerly Used Defense Site within the tract',
description: `Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of a Formerly Used Defense Site within the tract`,
},
PROX_HAZ: {
id: 'explore.map.page.side.panel.indicator.description.prox.haz',
defaultMessage: 'Count of hazardous waste facilities within 5 kilometers',

94
client/src/intl/en.json
View file

@ -467,6 +467,62 @@
"defaultMessage": "YES",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the communities the score currently is focused on"
},
"explore.map.page.side.panel.demo.age.over.64": {
"defaultMessage": "Elderly over 64",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Elderly over 64"
},
"explore.map.page.side.panel.demo.age.title": {
"defaultMessage": "Age",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics age title"
},
"explore.map.page.side.panel.demo.age.under.10": {
"defaultMessage": "Children under 10",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Children under 10"
},
"explore.map.page.side.panel.demo.american.indian": {
"defaultMessage": "American Indian and Alaska Native",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: American Indian and Alaska Native"
},
"explore.map.page.side.panel.demo.asian": {
"defaultMessage": "Asian",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Asian"
},
"explore.map.page.side.panel.demo.black": {
"defaultMessage": "Black or African American",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Black"
},
"explore.map.page.side.panel.demo.hawaiian": {
"defaultMessage": "Native Hawiian or Pacific Islander",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Native Hawiian or Pacific Islander"
},
"explore.map.page.side.panel.demo.hispanic": {
"defaultMessage": "Hispanic or Latino",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Hispanic or Latino"
},
"explore.map.page.side.panel.demo.of.age.mid": {
"defaultMessage": "Ages 10 - 64",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Ages 10 - 64"
},
"explore.map.page.side.panel.demo.other": {
"defaultMessage": "Other",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Other"
},
"explore.map.page.side.panel.demo.race.title": {
"defaultMessage": "Race / Ethnicity",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics race title"
},
"explore.map.page.side.panel.demo.title": {
"defaultMessage": "Tract demographics",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demograhics title"
},
"explore.map.page.side.panel.demo.two.or.more": {
"defaultMessage": "Two or more races",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: Two or more races"
},
"explore.map.page.side.panel.demo.white": {
"defaultMessage": "White",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the demographics: White"
},
"explore.map.page.side.panel.exceed.burden.answer.no": {
"defaultMessage": "No",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. This will display NO if the census tract is disadvantaged"
@ -499,6 +555,10 @@
"defaultMessage": "Tract information",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the census tract info title"
},
"explore.map.page.side.panel.indicator.abandon.mines": {
"defaultMessage": "Abandoned mine lands",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Abandoned land mines"
},
"explore.map.page.side.panel.indicator.asthma": {
"defaultMessage": "Asthma",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Asthma"
@ -507,6 +567,10 @@
"defaultMessage": "Transportation barriers",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show transportation barriers"
},
"explore.map.page.side.panel.indicator.description.abandon.mines": {
"defaultMessage": "Presence of an abandoned land mine within the tract",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of an abandoned land mine within the tract"
},
"explore.map.page.side.panel.indicator.description.asthma": {
"defaultMessage": "Weighted percent of people who have been told they have asthma",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Number of people who have been told they have asthma"
@ -543,6 +607,10 @@
"defaultMessage": "Projected risk to properties from floods from tides, rain, riverine and storm surges in 30 years",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of flooding risk"
},
"explore.map.page.side.panel.indicator.description.former.def.sites": {
"defaultMessage": "Presence of a Formerly Used Defense Site within the tract",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Presence of a Formerly Used Defense Site within the tract"
},
"explore.map.page.side.panel.indicator.description.heartDisease": {
"defaultMessage": "People ages 18 years and older who have been told they have heart disease",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Weighted percent of people ages 18 years and older who have \n been told they have heart disease"
@ -555,6 +623,10 @@
"defaultMessage": "Percent of people ages 25 years or older whose education level is less than a high school diploma",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Percent of people ages 25 years or older whose education level \n is less than a high school diploma"
},
"explore.map.page.side.panel.indicator.description.historic.underinvestment": {
"defaultMessage": "Census tracts with historically high barriers to accessing home loans",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing"
},
"explore.map.page.side.panel.indicator.description.houseBurden": {
"defaultMessage": "Low income households spending more than 30% of income on housing",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show an indicator description of Low income households spending more than 30% of income housing"
@ -645,19 +717,23 @@
},
"explore.map.page.side.panel.indicator.exp.ag.loss": {
"defaultMessage": "Expected agriculture loss rate",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate\n"
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show agriculture loss rate"
},
"explore.map.page.side.panel.indicator.exp.bld.loss": {
"defaultMessage": "Expected building loss rate",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate\n"
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show building loss rate"
},
"explore.map.page.side.panel.indicator.exp.pop.loss": {
"defaultMessage": "Expected population loss rate",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate\n"
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show population loss rate"
},
"explore.map.page.side.panel.indicator.flooding": {
"defaultMessage": "Future flood risk",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk\n"
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show flood risk"
},
"explore.map.page.side.panel.indicator.former.def.sites": {
"defaultMessage": "Formerly Used Defense Sites (FUDS)",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Formerly Used Defense Sites (FUDS)"
},
"explore.map.page.side.panel.indicator.heartDisease": {
"defaultMessage": "Heart disease",
@ -665,12 +741,16 @@
},
"explore.map.page.side.panel.indicator.high.ed": {
"defaultMessage": "Higher education non-enrollment",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate\n"
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Higher ed degree achievement rate"
},
"explore.map.page.side.panel.indicator.high.school": {
"defaultMessage": "High school degree non-attainment",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show High school degree achievement rate"
},
"explore.map.page.side.panel.indicator.historic.underinvest": {
"defaultMessage": "Historic underinvestment",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Historic underinvestment"
},
"explore.map.page.side.panel.indicator.houseBurden": {
"defaultMessage": "Housing cost burden",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show Housing cost burden"
@ -800,7 +880,7 @@
"description": "indicating percentile units"
},
"explore.map.page.side.panel.indicator.value.subtext.unavailable": {
"defaultMessage": "data is not available",
"defaultMessage": "missing data",
"description": "subtext for indicator when data is N/A"
},
"explore.map.page.side.panel.indicator.value.unavailable.alt.text": {
@ -813,7 +893,7 @@
},
"explore.map.page.side.panel.indicator.wildfire": {
"defaultMessage": "Future wildfire risk",
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk\n"
"description": "Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show wildfire risk"
},
"explore.map.page.side.panel.info.alt.text.icon1": {
"defaultMessage": "An icon that has depicts pieces of a block selected mimicking the census block census tracts",