mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-21 23:11:41 -07:00
Release of improve census tract display info (#1480)
* will replace mapbox logo (#1477) * Replace maplibre logo with mapbox * change the logo go to mapbox * Add CodeQL and modify mapbox logo via useRef() * Make side panel formula more apparent (#1481) * Add ExceedBurden and CategorySpacer - create ExceedBurden component that is used twice - create a .categorySpacer class for the AND component - modify indicator styling to work with background higlighting - add BE stubs for Burden booleans - remove Indicators header - add copy to intl * Add comments on disadv. indicator - darken bg color - add a border - bold the text * Adds indicator arrow and sub text to sidepanel - add threshold to IndicatorInfo - update SASS for indicatorValueCol - update tests - add constants to intl * Make disadv indicators bold - add 1px margin between indicators * Add BE signals for new sidepanel - tested with staging backend * Add staging hash to URL * Fix poverty backend signal - refactor backend signals in constants file * Make exceed burden value bold * Refactor indicator values - remove arrows and subtext when value is N/A - Show -- when value is N/A - intl alt tags in indicator - fix alignment of arrows - update snapshots * Revert settings.json file * revert settings file again * Refactor what is displayed when data unavailable - add an unavailable icon - add data is not available subtext - modify low income threshold - update snapshots - factor out rendered logic to JSX functions - update image alt tags and intl * Refactor Indicator component to unit test - Add unit test for Indicator value icon - Add unit test for Indicator value sub-text - update snapshots * Add de-coupled BE signals * Rebase hotfix * Fix indicator value 0 shows N/A icon - remove coercion of 0 as null - make components check null / failure case first and default all else - update unit test to account for this use case - update snapshots * Add null check for percentage suffix - update unit tests - update snapshots * remove cypress zoom test - intermittent failure continue * revert cypress to 8.3.0 * Revert cypress-cucumber * Add Chrome to frontend deploy action * Update logo css classname after update to maplibre (#1482) * Add new wording to the map panel that appears upon load when no tract is selected and Outstanding CEQ changes to sidepanel (#1483) * Add new side panel unselected tract - add new icons - refactor old component - follow component folder pattern - update snapshot tests - add to intl * Add bold to text, add spacing and correct typos * Add tabindex to sidepanel content to pass a11y * Refactor i18n anti-patterns on explore tool page - add i18n patterns for nesting - add i18n pattern for partial strings - add i18n rich-text functions - add i18n pattern for minimal context - add i18n pattern for dates - add i18n pattern for numbers - add i18n pattern for centralizing rich text functions - add i18n patter for description - add i18n pattern for ids - see shared drive file J40 Localization Patterns for status on refactor * Remove links of expired public engagement sessions - allow cypress tests to pass * Update snapshots for public enagement page * Copy updates to non-selected side panel - update snapshots * Updates to side panel copy - ag loss and building loss text - clean transit - NPL RMP sites - proportion to percent - update snapshots - updates to es.json * Updates from QA - make title smaller - make margins above icons smaller - add bottom margin on container - add census before tracts in copy - update snapshots * Update snapshot after rebase * disable max-len on description fields on i18n copy (#1487) * Remove color key from Explore the tool page (#1484) * Remove color key * Add comment to Language component * Move tribal note copy to meth page - adjust responsive sizing props on Grid to allow for proper mobile viewing on Explore page * Add responsive size to text under map - reduce z-index of territory focus control so that it doesn't go over the survey button on mobile * Rewrite the two "notes about" the "low" datasets (#1489) * Refactor all copy to adhere to recommended patterns - remove LowIncome component - add intl README - update snapshots * Fix key error missing in datasetCard - update type in IIndicators - update snapshots * Add two notes on low dataset cards - refactor DatasetCard to standard component pattern - add a note to the interface - update snapshots * Add function comment to force re-build * Update missing sass module file name * Update sidepanel non-selected copy (#1495) * Update sidepanel non-selected copy - update snapshots * Update URL in deploy FE for cypress test * removing trailing slash * Add wording to UI that calls out improvements to display of census tract information (#1492) * Adds census tract alert on all pages - add i18n text - updates snapshots - makes public engagement page a fast link * Style the Alert to have more space around it * Update copy on Alert - update snapshots * Swap gerkhin order * Set Alert to expire on Apr 15th 2022 * Add WHEJAC meetings (#1501) * Add WHEJAC meetings - add expired icons - automatically load expired icons when event has passed - update snapshots * Update public engagement button * Remove public eng gherkin tests - need to troubleshoot why these are failing * Remove the before CEQ in copy * Make the count of thresholds exceeded on the side panel more clear (#1503) * Update category / thrsh count in side panel - connect BE signal of CC to side panel - i18n functions to call from AreaDetail component - update snapshots - * Update send feedback - color and icon - update snapshots * Update both exceed statements in sidepanel - update snapshots * Update copy for higher ed and high school (#1502) * Update copy for higher ed and high school - update dataset cards - update taskforce card AND - update side panel indicator titles - add i18n for dataset cards title - update snapshots * Update threshold values for Higher ed and HS. - update snapshots * Update AND clause - missing 'of' in copy - update BE signal for non-higher ed enrollment signal
This commit is contained in:
Vim
GitHub
parent
dc981919f1
commit
db6b5de24e
91 changed files with 5339 additions and 3220 deletions
|
|
@ -1,21 +1,23 @@
|
|||
/* eslint-disable quotes */
|
||||
// External Libs:
|
||||
import React from 'react';
|
||||
import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {Accordion, Button} from '@trussworks/react-uswds';
|
||||
|
||||
// Components:
|
||||
import Category from '../Category';
|
||||
import DisadvantageDot from '../DisadvantageDot';
|
||||
import ExceedBurden from '../ExceedBurden';
|
||||
import Indicator from '../Indicator';
|
||||
|
||||
// Styles and constants
|
||||
import * as styles from './areaDetail.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
import * as CONTACT_COPY from '../../data/copy/contact';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
|
||||
// @ts-ignore
|
||||
// import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail.svg';
|
||||
import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail_outline.svg';
|
||||
|
||||
interface IAreaDetailProps {
|
||||
properties: constants.J40Properties,
|
||||
|
|
@ -35,6 +37,7 @@ export interface indicatorInfo {
|
|||
value: number,
|
||||
isDisadvagtaged: boolean,
|
||||
isPercent?: boolean,
|
||||
threshold?: number,
|
||||
}
|
||||
|
||||
const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||
|
|
@ -97,8 +100,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
}
|
||||
if (indicatorName === 'poverty') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.POVERTY_PROPERTY_PERCENTILE) ?
|
||||
properties[constants.POVERTY_PROPERTY_PERCENTILE] : null;
|
||||
.POVERTY_BELOW_100_PERCENTILE) ?
|
||||
properties[constants.POVERTY_BELOW_100_PERCENTILE] : null;
|
||||
}
|
||||
if (indicatorName === 'highSchool') {
|
||||
return properties.hasOwnProperty(constants
|
||||
|
|
@ -117,18 +120,18 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
|
||||
if (indicatorName === 'lowMedInc') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.IS_GTE_90_ISLAND_AREA_LOW_MEDIAN_INCOME_AND_IS_LOW_HS_EDU_2009) ?
|
||||
properties[constants.IS_GTE_90_ISLAND_AREA_LOW_MEDIAN_INCOME_AND_IS_LOW_HS_EDU_2009] : null;
|
||||
.IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_LOW_MEDIAN_INCOME) ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_LOW_MEDIAN_INCOME] : null;
|
||||
}
|
||||
if (indicatorName === 'unemploy') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.IS_GTE_90_ISLAND_AREA_UNEMPLOYMENT_AND_IS_LOW_HS_EDU_2009) ?
|
||||
properties[constants.IS_GTE_90_ISLAND_AREA_UNEMPLOYMENT_AND_IS_LOW_HS_EDU_2009] : null;
|
||||
.IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_UNEMPLOYMENT) ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_UNEMPLOYMENT] : null;
|
||||
}
|
||||
if (indicatorName === 'poverty') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.IS_GTE_90_ISLAND_AREA_BELOW_100_POVERTY_AND_IS_LOW_HS_EDU_2009) ?
|
||||
properties[constants.IS_GTE_90_ISLAND_AREA_BELOW_100_POVERTY_AND_IS_LOW_HS_EDU_2009] : null;
|
||||
.IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_BELOW_100_POVERTY) ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_BELOW_100_POVERTY] : null;
|
||||
}
|
||||
if (indicatorName === 'highSchool') {
|
||||
return properties.hasOwnProperty(constants
|
||||
|
|
@ -139,18 +142,18 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
|
||||
if (indicatorName === 'lowMedInc') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU) ?
|
||||
properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] : null;
|
||||
.IS_EXCEEDS_THRESH_FOR_LOW_MEDIAN_INCOME) ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_MEDIAN_INCOME] : null;
|
||||
}
|
||||
if (indicatorName === 'unemploy') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU) ?
|
||||
properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : null;
|
||||
.IS_EXCEEDS_THRESH_FOR_UNEMPLOYMENT) ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_UNEMPLOYMENT] : null;
|
||||
}
|
||||
if (indicatorName === 'poverty') {
|
||||
return properties.hasOwnProperty(constants
|
||||
.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU) ?
|
||||
properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null;
|
||||
.IS_EXCEEDS_THRESH_FOR_BELOW_100_POVERTY) ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_BELOW_100_POVERTY] : null;
|
||||
}
|
||||
if (indicatorName === 'highSchool') {
|
||||
return properties.hasOwnProperty(constants
|
||||
|
|
@ -166,24 +169,24 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
|
||||
value: properties.hasOwnProperty(constants.EXP_AGRICULTURE_LOSS_PERCENTILE) ?
|
||||
properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS] : null,
|
||||
};
|
||||
const expBldLoss:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
|
||||
value: properties.hasOwnProperty(constants.EXP_BUILDING_LOSS_PERCENTILE) ?
|
||||
properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS] : null,
|
||||
};
|
||||
const expPopLoss:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
|
||||
value: properties.hasOwnProperty(constants.EXP_POPULATION_LOSS_PERCENTILE) ?
|
||||
properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS] : null,
|
||||
};
|
||||
const lowInc:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
|
||||
|
|
@ -192,15 +195,17 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
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.HIGHER_ED_PERCENTILE) ?
|
||||
properties[constants.HIGHER_ED_PERCENTILE] : null,
|
||||
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 energyBurden:indicatorInfo = {
|
||||
|
|
@ -208,16 +213,16 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
|
||||
value: properties.hasOwnProperty(constants.ENERGY_PERCENTILE) ?
|
||||
properties[constants.ENERGY_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN] : null,
|
||||
};
|
||||
const pm25:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
|
||||
value: properties.hasOwnProperty(constants.PM25_PERCENTILE) ?
|
||||
properties[constants.PM25_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] : null,
|
||||
};
|
||||
|
||||
const dieselPartMatter:indicatorInfo = {
|
||||
|
|
@ -225,16 +230,16 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
|
||||
value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ?
|
||||
properties[constants.DIESEL_MATTER_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] : null,
|
||||
};
|
||||
const trafficVolume:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
|
||||
value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ?
|
||||
properties[constants.TRAFFIC_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null,
|
||||
};
|
||||
|
||||
const houseBurden:indicatorInfo = {
|
||||
|
|
@ -242,16 +247,16 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
|
||||
value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ?
|
||||
properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] : null,
|
||||
};
|
||||
const leadPaint:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
|
||||
value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ?
|
||||
properties[constants.LEAD_PAINT_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] : null,
|
||||
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),
|
||||
|
|
@ -266,24 +271,24 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
|
||||
value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ?
|
||||
properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] : null,
|
||||
};
|
||||
const proxNPL:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
|
||||
value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ?
|
||||
properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] : null,
|
||||
};
|
||||
const proxRMP:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
|
||||
value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ?
|
||||
properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null,
|
||||
};
|
||||
|
||||
const wasteWater:indicatorInfo = {
|
||||
|
|
@ -291,8 +296,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
|
||||
value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
|
||||
properties[constants.WASTEWATER_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null,
|
||||
};
|
||||
|
||||
const asthma:indicatorInfo = {
|
||||
|
|
@ -300,32 +305,32 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
|
||||
value: properties.hasOwnProperty(constants.ASTHMA_PERCENTILE) ?
|
||||
properties[constants.ASTHMA_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_ASTHMA] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_ASTHMA] : null,
|
||||
};
|
||||
const diabetes:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
|
||||
value: properties.hasOwnProperty(constants.DIABETES_PERCENTILE) ?
|
||||
properties[constants.DIABETES_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIABETES] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_DIABETES] : null,
|
||||
};
|
||||
const heartDisease:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
|
||||
value: properties.hasOwnProperty(constants.HEART_PERCENTILE) ?
|
||||
properties[constants.HEART_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HEART_DISEASE] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_HEART_DISEASE] : null,
|
||||
};
|
||||
const lifeExpect:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
|
||||
value: properties.hasOwnProperty(constants.LIFE_PERCENTILE) ?
|
||||
properties[constants.LIFE_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] : null,
|
||||
};
|
||||
|
||||
const lingIso:indicatorInfo = {
|
||||
|
|
@ -333,8 +338,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
|
||||
value: properties.hasOwnProperty(constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE) ?
|
||||
properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
|
||||
isDisadvagtaged: properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] ?
|
||||
properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] : null,
|
||||
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO] ?
|
||||
properties[constants.IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO] : null,
|
||||
};
|
||||
const lowMedInc:indicatorInfo = {
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
|
||||
|
|
@ -360,65 +365,111 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
value: getWorkForceIndicatorValue('highSchool'),
|
||||
isDisadvagtaged: getWorkForceIndicatorIsDisadv('highSchool'),
|
||||
isPercent: true,
|
||||
threshold: 10,
|
||||
};
|
||||
|
||||
// Aggregate indicators based on categories
|
||||
/**
|
||||
* Aggregate indicators based on categories
|
||||
*
|
||||
* The indicators property must be an array with last two elements being the
|
||||
* socioeconomic burdens.
|
||||
*/
|
||||
let categories = [
|
||||
{
|
||||
id: 'climate-change',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
|
||||
indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc, higherEd],
|
||||
indicators: [expAgLoss, expBldLoss, expPopLoss],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'clean-energy',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
|
||||
indicators: [energyBurden, pm25, lowInc, higherEd],
|
||||
indicators: [energyBurden, pm25],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_ENERGY_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'clean-transport',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
|
||||
indicators: [dieselPartMatter, trafficVolume, lowInc, higherEd],
|
||||
indicators: [dieselPartMatter, trafficVolume],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'sustain-house',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
|
||||
indicators: [houseBurden, leadPaint, lowInc, higherEd],
|
||||
indicators: [houseBurden, leadPaint],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_HOUSING_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'leg-pollute',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
|
||||
indicators: [proxHaz, proxNPL, proxRMP, lowInc, higherEd],
|
||||
indicators: [proxHaz, proxNPL, proxRMP],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_POLLUTION_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'clean-water',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
|
||||
indicators: [wasteWater, lowInc, higherEd],
|
||||
indicators: [wasteWater],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_WATER_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'health-burdens',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
|
||||
indicators: [asthma, diabetes, heartDisease, lifeExpect, lowInc, higherEd],
|
||||
indicators: [asthma, diabetes, heartDisease, lifeExpect],
|
||||
socioEcIndicators: [lowInc, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
{
|
||||
id: 'work-dev',
|
||||
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
|
||||
indicators: [lingIso, lowMedInc, , unemploy, poverty, highSchool, higherEd],
|
||||
indicators: [lingIso, lowMedInc, , unemploy, poverty],
|
||||
socioEcIndicators: [highSchool, higherEd],
|
||||
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] ?
|
||||
properties[constants.IS_WORKFORCE_EXCEED_ONE_OR_MORE_INDICATORS_M] : null,
|
||||
isExceedBothSocioBurdens: properties[constants.IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS_M] ?
|
||||
properties[constants.IS_WORKFORCE_EXCEED_BOTH_SOCIO_INDICATORS_M] : null,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -448,16 +499,31 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged}/>,
|
||||
content: (
|
||||
<>
|
||||
{/* Category Header */}
|
||||
<div className={styles.categoryHeader}>
|
||||
<div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.INDICATOR)}</div>
|
||||
<div>{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.PERCENTILE)}</div>
|
||||
</div>
|
||||
{/* Exceeds one or more burdens */}
|
||||
<ExceedBurden
|
||||
text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_ONE_OR_MORE}
|
||||
isBurdened={category.isExceed1MoreBurden}
|
||||
/>
|
||||
|
||||
{/* Category Indicators */}
|
||||
{/* indicators */}
|
||||
{category.indicators.map((indicator:any, index:number) => {
|
||||
return <Indicator key={`ind${index}`} indicator={indicator}/>;
|
||||
})}
|
||||
|
||||
{/* AND */}
|
||||
<div className={styles.categorySpacer}>AND</div>
|
||||
|
||||
{/* Exceeds both socioeconomic burdens */}
|
||||
<ExceedBurden
|
||||
text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_BOTH_SOCIO}
|
||||
isBurdened={category.isExceedBothSocioBurdens}
|
||||
/>
|
||||
|
||||
{/* socio-economic indicators */}
|
||||
{category.socioEcIndicators.map((indicator:any, index:number) => {
|
||||
return <Indicator key={`ind${index}`} indicator={indicator}/>;
|
||||
})}
|
||||
|
||||
</>
|
||||
),
|
||||
expanded: false,
|
||||
|
|
@ -521,35 +587,38 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
}
|
||||
</div>
|
||||
|
||||
{/* Number of thresholds exceeded */}
|
||||
<div className={
|
||||
properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS] > 0 ?
|
||||
styles.showThresholdExceed : styles.hideThresholdExceed
|
||||
}>
|
||||
<FormattedMessage
|
||||
id={'explore.page.threshold.count.exceed'}
|
||||
description={"threshold exceeded count"}
|
||||
defaultMessage={'{disadvCount} of {totalCount} thresholds exceeded'}
|
||||
values={{
|
||||
disadvCount: properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS],
|
||||
totalCount: properties[constants.TOTAL_NUMBER_OF_INDICATORS],
|
||||
}}/>
|
||||
{/* Number of categories exceeded */}
|
||||
<div className={styles.showCategoriesExceed}>
|
||||
{EXPLORE_COPY.numberOfCategoriesExceeded(properties[constants.COUNT_OF_CATEGORIES_DISADV])}
|
||||
</div>
|
||||
|
||||
{/* Number of thresholds exceeded */}
|
||||
<div className={styles.showThresholdExceed}>
|
||||
{EXPLORE_COPY.numberOfThresholdsExceeded(properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS])}
|
||||
</div>
|
||||
{/* Send Feedback button */}
|
||||
<a
|
||||
className={styles.sendFeedbackBtn}
|
||||
className={styles.sendFeedbackLink}
|
||||
// The mailto string must be on a single line otherwise the email does not display subject and body
|
||||
href={`
|
||||
mailto:${CONTACT_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
|
||||
mailto:${COMMON_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
|
||||
`}
|
||||
target={"_blank"}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<Button
|
||||
type="button">
|
||||
<div>
|
||||
{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
|
||||
type="button"
|
||||
className={styles.sendFeedbackBtn}
|
||||
>
|
||||
<div className={styles.buttonContainer}>
|
||||
<div className={styles.buttonText}>
|
||||
{EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
|
||||
</div>
|
||||
<img
|
||||
className={styles.buttonImage}
|
||||
src={mailIcon}
|
||||
alt={'tbd'}
|
||||
/>
|
||||
</div>
|
||||
{/* <div>
|
||||
<img src={mailIcon} alt={'mail icon for email'}/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue