From 7a623101e2ae1b9a48c5c18dc962640c4acbdc03 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Wed, 5 Jan 2022 17:37:47 -0500
Subject: [PATCH] Add category header and updates from Living Copy (#1084)
* Add category header (Indicator and Percentile)
- add local styling
- override accordion-content styles to push into parent container
- intl copy
- update snapshots
* Add latest Living Copy
- refactor dataset cards to allow for any styling in description, used in and responsible party
- add percent for HS edu indicator
- updates snapshots
* Update copy from Living Copy doc
-update snapshots
* Add methodology to copy
* Remove link from readme file based on md checker
* Comment out certain markdown links from checker
* Comment out markdown links that render in browser
---
INSTALLATION-es.md | 2 +-
client/README.md | 2 +
.../AreaDetail/areaDetail.module.scss | 18 +
.../AreaDetail/areaDetail.module.scss.d.ts | 1 +
client/src/components/AreaDetail/index.tsx | 125 +--
.../__snapshots__/areaDetail.test.tsx.snap | 73 +-
.../__snapshots__/BetaBanner.test.tsx.snap | 4 +-
.../__snapshots__/Categories.test.tsx.snap | 2 +-
client/src/components/DatasetCard/index.tsx | 4 +-
.../__snapshots__/datasetCard.test.tsx.snap | 8 +-
.../datasetContainer.test.tsx.snap | 253 +++---
client/src/components/Indicator/Indicator.tsx | 9 +-
.../__snapshots__/J40Header.test.tsx.snap | 4 +-
client/src/data/copy/common.tsx | 4 +-
client/src/data/copy/explore.tsx | 15 +-
client/src/data/copy/methodology.tsx | 741 +++++++++++++-----
.../pages/__snapshots__/contact.test.tsx.snap | 4 +-
.../pages/__snapshots__/index.test.tsx.snap | 4 +-
.../__snapshots__/methodology.test.tsx.snap | 259 +++---
client/src/styles/global.scss | 6 +
.../0002-mapping-visualization-library.md | 1 +
docs/decisions/0004-client-side-framework.md | 6 +-
22 files changed, 1059 insertions(+), 486 deletions(-)
diff --git a/INSTALLATION-es.md b/INSTALLATION-es.md
index b4365aa3..9403ea2b 100644
--- a/INSTALLATION-es.md
+++ b/INSTALLATION-es.md
@@ -25,7 +25,7 @@ Descargar desde [sitio web](https://git-scm.com/download/win)
2. Valide la instalación escribiendo `brew -v` en la terminal y asegúrese de que se muestre un número de versión.
### Instalar Node usando NVM
-
+
Esto funcionará tanto para MacOS como para Win10. Siga las instrucciones de este [enlace](https://medium.com/@nodesource/installing-node-js-tutorial-using-nvm-5c6ff5925dd8)
### Configuración de IDE
diff --git a/client/README.md b/client/README.md
index 84eee920..2f7497bd 100644
--- a/client/README.md
+++ b/client/README.md
@@ -19,6 +19,7 @@ This README contains the following content:
#### Install Node using NVM
+
This will work for both MacOS and Win10. Follow instructions on this [link](https://medium.com/@nodesource/installing-node-js-tutorial-using-nvm-5c6ff5925dd8). Be sure to read through the whole doc to find the sections within each step relevant to you (e.g. if you're using Homebrew, when you get to Step 2 look for the section, "Install NVM with Homebrew").
If you install NVM using Homebrew, make sure to read the output in terminal after you run `brew install nvm`. You will need to add a few lines to your ~/.bash_profile and perhaps complete a couple other tasks.
@@ -70,6 +71,7 @@ DATA_SOURCE env variable in the docker-compose.yml. See [environment variables](
#### Troubleshooting docker
+
- If an error is thrown about [running out of space](https://medium.com/@wlarch/no-space-left-on-device-when-using-docker-compose-why-c4a2c783c6f6) on device see this for ways to reclaim space.
diff --git a/client/src/components/AreaDetail/areaDetail.module.scss b/client/src/components/AreaDetail/areaDetail.module.scss
index 9e319643..03f644da 100644
--- a/client/src/components/AreaDetail/areaDetail.module.scss
+++ b/client/src/components/AreaDetail/areaDetail.module.scss
@@ -82,3 +82,21 @@ $sidePanelLabelFontColor: #171716;
font-size: medium;
}
}
+
+// The following class is used in the AccordionItems in the AreaDetail component.
+// The Accordion component (parent of AccordionItems) requires some CSS overrides.
+// Local styling is not allowing the override.
+// The override is needed to push into the bounds of the Accordion component's styles.
+// To override this, in globals.scss, we set the this .categoryHeader's vertical alignment by
+// setting styles in:
+// .usa-accordion__content > *:first-child
+// This first child of the accordion content is the category header:
+.categoryHeader {
+ display: flex;
+ justify-content: space-between;
+ text-transform: uppercase;
+ font-size: small;
+ @include u-bg('gray-cool-5');
+ @include u-padding-left(2.5);
+ @include u-padding-right(2);
+}
\ No newline at end of file
diff --git a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
index ad2fc967..03e161a5 100644
--- a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
+++ b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
@@ -11,6 +11,7 @@ declare namespace MapModuleScssNamespace {
versionInfo: string;
showThresholdExceed:string;
hideThresholdExceed:string;
+ categoryHeader:string;
}
}
diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx
index b017b6bd..9a91c02d 100644
--- a/client/src/components/AreaDetail/index.tsx
+++ b/client/src/components/AreaDetail/index.tsx
@@ -18,11 +18,20 @@ interface IAreaDetailProps {
properties: constants.J40Properties,
}
+/**
+ * This interface is used as define the various fields for each indicator in the side panel
+ * label: the indicator label or title
+ * description: the description of the indicator used in the side panel
+ * value: the number from the geoJSON tile
+ * isDisadvagtaged: the flag from the geoJSON tile
+ * isPercent: is the value a percent or percentile
+ * */
export interface indicatorInfo {
label: string,
description: string,
value: number,
isDisadvagtaged: boolean,
+ isPercent?: boolean,
}
const AreaDetail = ({properties}:IAreaDetailProps) => {
@@ -45,84 +54,84 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_AG_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_AG_LOSS),
value: properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] ?
- properties[constants.EXP_AGRICULTURE_LOSS_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME] : null,
};
const expBldLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_BLD_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_BLD_LOSS),
value: properties[constants.EXP_BUILDING_LOSS_PERCENTILE] ?
- properties[constants.EXP_BUILDING_LOSS_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME] : null,
};
const expPopLoss:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EXP_POP_LOSS),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EXP_POP_LOSS),
value: properties[constants.EXP_POPULATION_LOSS_PERCENTILE] ?
- properties[constants.EXP_POPULATION_LOSS_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME] : null,
};
const lowInc:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_INCOME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_INCOME),
value: properties[constants.POVERTY_BELOW_200_PERCENTILE] ?
- properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
+ properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] ?
- properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : null,
+ properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : null,
};
const energyBurden:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
value: properties[constants.ENERGY_PERCENTILE] ?
- properties[constants.ENERGY_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME] : null,
};
const pm25:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
value: properties[constants.PM25_PERCENTILE] ?
- properties[constants.PM25_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_PM25_AND_IS_LOW_INCOME] : null,
};
const dieselPartMatter:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
value: properties[constants.DIESEL_MATTER_PERCENTILE] ?
- properties[constants.DIESEL_MATTER_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME] : null,
};
const trafficVolume:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
value: properties[constants.TRAFFIC_PERCENTILE] ?
- properties[constants.TRAFFIC_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME] : null,
};
const houseBurden:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] ?
- properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME] : null,
};
const leadPaint:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
value: properties[constants.LEAD_PAINT_PERCENTILE] ?
- properties[constants.LEAD_PAINT_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME] : null,
};
// const medHomeVal:indicatorInfo = {
// label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.MED_HOME_VAL),
@@ -136,108 +145,109 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ),
value: properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] ?
- properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME] : null,
};
const proxNPL:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL),
value: properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] ?
- properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME] : null,
};
const proxRMP:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP),
value: properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] ?
- properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_RMP_AND_IS_LOW_INCOME] : null,
};
const wasteWater:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
value: properties[constants.WASTEWATER_PERCENTILE] ?
- properties[constants.WASTEWATER_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME] : null,
};
const asthma:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
value: properties[constants.ASTHMA_PERCENTILE] ?
- properties[constants.ASTHMA_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME] : null,
};
const diabetes:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
value: properties[constants.DIABETES_PERCENTILE] ?
- properties[constants.DIABETES_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_DIABETES_AND_IS_LOW_INCOME] : null,
};
const heartDisease:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
value: properties[constants.HEART_PERCENTILE] ?
- properties[constants.HEART_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME] : null,
};
const lifeExpect:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_LIFE_EXPECT),
value: properties[constants.LIFE_PERCENTILE] ?
- properties[constants.LIFE_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME] : null,
};
const lowMedInc:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LOW_MED_INC),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LOW_MED_INCOME),
value: properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] ?
- properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] : null,
+ properties[constants.LOW_MEDIAN_INCOME_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] ?
- properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] : null,
+ properties[constants.IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const lingIso:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LING_ISO),
value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] ?
- properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE] : null,
+ 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,
+ properties[constants.IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME] : null,
};
const unemploy:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.UNEMPLOY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.UNEMPLOY),
value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] ?
- properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] : null,
+ properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] ?
- properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : null,
+ properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const poverty:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
value: properties[constants.POVERTY_PROPERTY_PERCENTILE] ?
- properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
+ properties[constants.POVERTY_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] ?
- properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null,
+ properties[constants.IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU] : null,
};
const highSchool:indicatorInfo = {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_SCL),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIGH_SKL),
value: properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] ?
- properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] : null,
+ properties[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] ?
- properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : null,
+ properties[constants.IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU] : null,
+ isPercent: true,
};
// Aggregate indicators based on categories
@@ -247,56 +257,56 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
indicators: [expAgLoss, expBldLoss, expPopLoss, lowInc],
isDisadvagtaged: properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_CLIMATE_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'clean-energy',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY),
indicators: [energyBurden, pm25, lowInc],
isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'clean-transport',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT),
indicators: [dieselPartMatter, trafficVolume, lowInc],
isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'sustain-house',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE),
indicators: [houseBurden, leadPaint, lowInc],
isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'leg-pollute',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.LEG_POLLUTE),
indicators: [proxHaz, proxNPL, proxRMP, lowInc],
isDisadvagtaged: properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_POLLUTION_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'clean-water',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER),
indicators: [wasteWater, lowInc],
isDisadvagtaged: properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_WATER_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'health-burdens',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN),
indicators: [asthma, diabetes, heartDisease, lifeExpect, lowInc],
isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED_L] : null,
},
{
id: 'work-dev',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
indicators: [lowMedInc, lingIso, unemploy, poverty, highSchool],
isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] ?
- properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] : null,
+ properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_L] : null,
},
];
@@ -308,6 +318,13 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
title:
+
+ Note:
+
+
+ Unlike most of the other datasets, high values of this indicator indicate low burdens.
+ For percentile calculations, the percentile is calculated in reverse order, so that the tract with
+ the highest median income relative to area median income (lowest burden on this measure) is at the
+ 0th percentile, and the tract with the lowest median income relative to area median income
+ (highest burden on this measure) is at the 100th percentile.
+
+
- It is an early, in-progress version of the tool with limited datasets
- that will be continuously updated.
+ It is an early, in-progress version of the tool with limited datasets that will
+ be regularly updated.
diff --git a/client/src/data/copy/common.tsx b/client/src/data/copy/common.tsx
index 689c8584..48d3fa2d 100644
--- a/client/src/data/copy/common.tsx
+++ b/client/src/data/copy/common.tsx
@@ -9,8 +9,8 @@ export const BETA_BANNER = defineMessages({
},
INFO: {
id: 'banner.beta.info',
- defaultMessage: `It is an early, in-progress version of the tool with limited datasets
- that will be continuously updated.`,
+ defaultMessage: `It is an early, in-progress version of the tool with limited datasets that will
+ be regularly updated.`,
description: 'the main info of the beta banner',
},
});
diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx
index ccb380de..e55b1ff4 100644
--- a/client/src/data/copy/explore.tsx
+++ b/client/src/data/copy/explore.tsx
@@ -237,6 +237,16 @@ export const COMMUNITY = {
};
export const SIDE_PANEL_CATEGORY = defineMessages({
+ INDICATOR: {
+ id: 'areaDetail.category.header.indicator',
+ defaultMessage: 'Indicator',
+ description: 'header for each category',
+ },
+ PERCENTILE: {
+ id: 'areaDetail.category.header.percentile',
+ defaultMessage: 'Percentile (0-100)',
+ description: 'header for each category',
+ },
CLIMATE: {
id: 'areaDetail.indicator.title.climate',
defaultMessage: 'Climate change',
@@ -550,7 +560,8 @@ export const SIDE_PANEL_INDICATOR_DESCRIPTION = defineMessages({
HIGH_SKL: {
id: 'areaDetail.indicator.description.high.school',
defaultMessage: `
- Percent of people ages 25 years or older whose education level is less than a high school diploma
+ Percent (not a percentile) of people ages 25 years or older whose education level is less than a
+ high school diploma
`,
description: 'Percent of people ages 25 years or older whose education level is less than a high school diploma',
},
@@ -597,7 +608,7 @@ export const NOTE_ON_TERRITORIES = {
PARA_1:
@@ -591,8 +613,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Wastewater discharge
@@ -824,8 +874,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
@@ -861,7 +911,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Unemployment
@@ -897,7 +949,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Poverty
@@ -933,8 +988,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
High school degree achievement rate
diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx
index e19e6c9c..8d397196 100644
--- a/client/src/components/Indicator/Indicator.tsx
+++ b/client/src/components/Indicator/Indicator.tsx
@@ -43,9 +43,12 @@ const Indicator = ({indicator}:IIndicator) => {
+ + Note: + + + Unlike most of the other datasets, high values of this indicator indicate low burdens. + For percentile calculations, the percentile is calculated in reverse order, so that the tract with + the highest median income relative to area median income (lowest burden on this measure) is at the + 0th percentile, and the tract with the lowest median income relative to area median income + (highest burden on this measure) is at the 100th percentile. + +
+ +