From db6b5de24e27fbffed1c068b6c1c306bfccbf070 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Tue, 29 Mar 2022 22:49:57 -0400
Subject: [PATCH] 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
---
.github/workflows/codeql-analysis.yml | 4 +-
.github/workflows/deploy_fe_staging.yml | 3 +-
client/cypress/integration/About.feature | 10 +-
.../integration/PublicEngLinks.feature | 38 +-
client/package-lock.json | 124 +-
client/package.json | 4 +-
.../src/components/AreaDetail/AreaDetail.tsx | 245 +-
.../AreaDetail/areaDetail.module.scss | 75 +-
.../AreaDetail/areaDetail.module.scss.d.ts | 7 +-
client/src/components/AreaDetail/index.tsx | 1 +
.../__snapshots__/areaDetail.test.tsx.snap | 1500 +++++++++---
.../AreaDetail/tests/areaDetail.test.tsx | 8 +-
.../__snapshots__/Categories.test.tsx.snap | 91 +-
.../__snapshots__/CategoryCard.test.tsx.snap | 10 +-
.../components/DatasetCard/DatasetCard.tsx | 80 +
client/src/components/DatasetCard/index.tsx | 67 +-
.../DatasetCard/tests/datasetCard.test.tsx | 2 +-
.../src/components/DatasetContainer/index.tsx | 4 +-
.../datasetContainer.test.tsx.snap | 68 +-
.../ExceedBurden/ExceedBurden.module.scss | 27 +
.../ExceedBurden.module.scss.d.ts | 14 +
.../ExceedBurden/ExceedBurden.test.tsx | 45 +
.../components/ExceedBurden/ExceedBurden.tsx | 23 +
.../__snapshots__/ExceedBurden.test.tsx.snap | 53 +
client/src/components/ExceedBurden/index.tsx | 3 +
.../Indicator/Indicator.module.scss | 85 +-
.../Indicator/Indicator.module.scss.d.ts | 5 +
.../components/Indicator/Indicator.test.tsx | 172 +-
client/src/components/Indicator/Indicator.tsx | 174 +-
.../__snapshots__/Indicator.test.tsx.snap | 115 +-
.../J40Header/J40Header.module.scss | 4 +
.../J40Header/J40Header.module.scss.d.ts | 1 +
client/src/components/J40Header/J40Header.tsx | 16 +-
.../__snapshots__/J40Header.test.tsx.snap | 34 +
client/src/components/J40Map.tsx | 50 +-
client/src/components/Language/Language.tsx | 6 +
.../LowIncome/LowIncome.module.scss | 20 -
.../LowIncome/LowIncome.module.scss.d.ts | 14 -
client/src/components/LowIncome/LowIncome.tsx | 26 -
.../__snapshots__/LowIncome.test.tsx.snap | 20 -
client/src/components/LowIncome/index.tsx | 3 -
client/src/components/MapWrapper/index.tsx | 27 +-
.../MethodologyFormula.test.tsx.snap | 8 +-
.../PublicEngageButton.module.scss | 5 +-
.../PublicEngageButton/PublicEngageButton.tsx | 3 +-
.../PublicEngageButton.test.tsx.snap | 4 +-
.../components/PublicEvent/PublicEvent.tsx | 22 +-
.../__snapshots__/PublicEvent.test.tsx.snap | 14 +-
.../SidePanelInfo/SidePanelInfo.module.scss | 21 +
.../SidePanelInfo.module.scss.d.ts} | 10 +-
.../SidePanelInfo.test.tsx} | 8 +-
.../SidePanelInfo/SidePanelInfo.tsx | 60 +
.../__snapshots__/SidePanelInfo.test.tsx.snap | 76 +
client/src/components/SidePanelInfo/index.tsx | 3 +
.../__snapshots__/mapInfoPanel.test.tsx.snap | 87 +-
client/src/components/mapInfoPanel.tsx | 4 +-
.../components/mapIntroduction.module.scss | 34 -
.../src/components/mapIntroduction.test.tsx | 16 -
client/src/components/mapIntroduction.tsx | 32 -
.../territoryFocusControl.module.scss | 16 +-
client/src/data/constants.tsx | 270 ++-
client/src/data/copy/README.md | 5 +
client/src/data/copy/about.tsx | 98 +-
client/src/data/copy/common.tsx | 135 +-
client/src/data/copy/contact.tsx | 43 +-
client/src/data/copy/explore.tsx | 794 ++++---
client/src/data/copy/methodology.tsx | 940 ++++----
client/src/data/copy/publicEngage.tsx | 145 +-
client/src/data/getOSBaseMap.tsx | 5 +-
.../src/images/eventDates/apr15-inactive.svg | 1 +
.../src/images/eventDates/mar10-inactive.svg | 1 +
.../src/images/eventDates/mar15-inactive.svg | 1 +
.../src/images/eventDates/mar16-inactive.svg | 1 +
.../src/images/eventDates/mar22-inactive.svg | 1 +
.../src/images/eventDates/mar30-inactive.svg | 1 +
client/src/images/eventDates/mar30.svg | 1 +
.../src/images/eventDates/mar31-inactive.svg | 1 +
client/src/images/eventDates/mar31.svg | 1 +
.../src/images/eventDates/mar9-inactive.svg | 1 +
.../src/images/sidePanelIcons/bellCurve.svg | 1 +
client/src/images/sidePanelIcons/pieChart.svg | 1 +
client/src/images/sidePanelIcons/puzzle.svg | 1 +
client/src/images/sidePanelIcons/upDown.svg | 1 +
client/src/intl/en.json | 2074 +++++++++--------
.../pages/__snapshots__/contact.test.tsx.snap | 43 +-
.../pages/__snapshots__/index.test.tsx.snap | 38 +-
.../__snapshots__/methodology.test.tsx.snap | 207 +-
client/src/pages/cejst.tsx | 24 +-
client/src/pages/contact.tsx | 5 +-
client/src/pages/index.tsx | 6 +-
client/src/styles/global.scss | 12 +-
91 files changed, 5339 insertions(+), 3220 deletions(-)
create mode 100644 client/src/components/DatasetCard/DatasetCard.tsx
create mode 100644 client/src/components/ExceedBurden/ExceedBurden.module.scss
create mode 100644 client/src/components/ExceedBurden/ExceedBurden.module.scss.d.ts
create mode 100644 client/src/components/ExceedBurden/ExceedBurden.test.tsx
create mode 100644 client/src/components/ExceedBurden/ExceedBurden.tsx
create mode 100644 client/src/components/ExceedBurden/__snapshots__/ExceedBurden.test.tsx.snap
create mode 100644 client/src/components/ExceedBurden/index.tsx
delete mode 100644 client/src/components/LowIncome/LowIncome.module.scss
delete mode 100644 client/src/components/LowIncome/LowIncome.module.scss.d.ts
delete mode 100644 client/src/components/LowIncome/LowIncome.tsx
delete mode 100644 client/src/components/LowIncome/__snapshots__/LowIncome.test.tsx.snap
delete mode 100644 client/src/components/LowIncome/index.tsx
create mode 100644 client/src/components/SidePanelInfo/SidePanelInfo.module.scss
rename client/src/components/{mapIntroduction.module.scss.d.ts => SidePanelInfo/SidePanelInfo.module.scss.d.ts} (67%)
rename client/src/components/{LowIncome/LowIncome.test.tsx => SidePanelInfo/SidePanelInfo.test.tsx} (62%)
create mode 100644 client/src/components/SidePanelInfo/SidePanelInfo.tsx
create mode 100644 client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
create mode 100644 client/src/components/SidePanelInfo/index.tsx
delete mode 100644 client/src/components/mapIntroduction.module.scss
delete mode 100644 client/src/components/mapIntroduction.test.tsx
delete mode 100644 client/src/components/mapIntroduction.tsx
create mode 100644 client/src/data/copy/README.md
create mode 100644 client/src/images/eventDates/apr15-inactive.svg
create mode 100644 client/src/images/eventDates/mar10-inactive.svg
create mode 100644 client/src/images/eventDates/mar15-inactive.svg
create mode 100644 client/src/images/eventDates/mar16-inactive.svg
create mode 100644 client/src/images/eventDates/mar22-inactive.svg
create mode 100644 client/src/images/eventDates/mar30-inactive.svg
create mode 100644 client/src/images/eventDates/mar30.svg
create mode 100644 client/src/images/eventDates/mar31-inactive.svg
create mode 100644 client/src/images/eventDates/mar31.svg
create mode 100644 client/src/images/eventDates/mar9-inactive.svg
create mode 100644 client/src/images/sidePanelIcons/bellCurve.svg
create mode 100644 client/src/images/sidePanelIcons/pieChart.svg
create mode 100644 client/src/images/sidePanelIcons/puzzle.svg
create mode 100644 client/src/images/sidePanelIcons/upDown.svg
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 43888da5..d7d800b3 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -16,7 +16,9 @@ on:
branches: [ main ]
pull_request:
# The branches below must be a subset of the branches above
- branches: [ main ]
+ branches:
+ - main
+ - '**/release/**'
schedule:
- cron: '42 4 * * 1'
diff --git a/.github/workflows/deploy_fe_staging.yml b/.github/workflows/deploy_fe_staging.yml
index 53f51df0..6ae9b308 100644
--- a/.github/workflows/deploy_fe_staging.yml
+++ b/.github/workflows/deploy_fe_staging.yml
@@ -53,8 +53,9 @@ jobs:
uses: cypress-io/github-action@v2
with:
working-directory: ${{env.WORKING_DIRECTORY}}
+ browser: chrome
start: npm start
- wait-on: "http://localhost:8000"
+ wait-on: "http://localhost:8000/en"
- name: Upload Artifact
uses: actions/upload-artifact@v2
with:
diff --git a/client/cypress/integration/About.feature b/client/cypress/integration/About.feature
index 720808aa..4b682e63 100644
--- a/client/cypress/integration/About.feature
+++ b/client/cypress/integration/About.feature
@@ -1,15 +1,15 @@
Feature: The About page will open from all other pages
- Scenario: About page open when navigating from Explore the Tool page
- Given I am on the "Explore the tool" page
- When I click on the "About" page in the navigation
- Then I see "About" in the title
-
Scenario: About page open when navigating from Methodology page
Given I am on the "Methodology" page
When I click on the "About" page in the navigation
Then I see "About" in the title
+ Scenario: About page open when navigating from Explore the Tool page
+ Given I am on the "Explore the tool" page
+ When I click on the "About" page in the navigation
+ Then I see "About" in the title
+
Scenario: About page open when navigating from Contact page
Given I am on the "Contact" page
When I click on the "About" page in the navigation
diff --git a/client/cypress/integration/PublicEngLinks.feature b/client/cypress/integration/PublicEngLinks.feature
index 0345a5e5..bd4517b7 100644
--- a/client/cypress/integration/PublicEngLinks.feature
+++ b/client/cypress/integration/PublicEngLinks.feature
@@ -1,32 +1,14 @@
Feature: All links on Public Eng page are functional
- Scenario: Anyone should be able to register on Mar 9th
- Given I am on the "Public" page
- When I look for the "Mar 9 Reg Link" CTA
- And I click on the "Mar 9 Reg Link" event
- Then the link should respond successfully
+ # Scenario: Anyone should be able to register on Mar 22th
+ # Given I am on the "Public" page
+ # When I look for the "Mar 22 Reg Link" CTA
+ # And I click on the "Mar 22 Reg Link" event
+ # Then the link should respond successfully
- Scenario: Anyone should be able to register on Mar 10th
- Given I am on the "Public" page
- When I look for the "Mar 10 Reg Link" CTA
- And I click on the "Mar 10 Reg Link" event
- Then the link should respond successfully
-
- Scenario: Anyone should be able to register on Mar 16th
- Given I am on the "Public" page
- When I look for the "Mar 16 Reg Link" CTA
- And I click on the "Mar 16 Reg Link" event
- Then the link should respond successfully
-
- Scenario: Anyone should be able to register on Mar 22th
- Given I am on the "Public" page
- When I look for the "Mar 22 Reg Link" CTA
- And I click on the "Mar 22 Reg Link" event
- Then the link should respond successfully
-
- Scenario: Anyone should be able to register on Apr 15th
- Given I am on the "Public" page
- When I look for the "Apr 15 Reg Link" CTA
- And I click on the "Apr 15 Reg Link" event
- Then the link should respond successfully
+ # Scenario: Anyone should be able to register on Apr 15th
+ # Given I am on the "Public" page
+ # When I look for the "Apr 15 Reg Link" CTA
+ # And I click on the "Apr 15 Reg Link" event
+ # Then the link should respond successfully
diff --git a/client/package-lock.json b/client/package-lock.json
index 57b75fce..d7bbf7f8 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -48,9 +48,9 @@
"axe-core": "^4.4.1",
"babel-jest": "^27.5.1",
"babel-preset-gatsby": "^1.14.0",
- "cypress": "^9.5.2",
+ "cypress": "^8.3.0",
"cypress-axe": "^0.14.0",
- "cypress-cucumber-preprocessor": "^4.3.1",
+ "cypress-cucumber-preprocessor": "^4.2.0",
"eslint": "^7.32.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-cypress": "^2.12.1",
@@ -4129,9 +4129,9 @@
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/sinonjs__fake-timers": {
- "version": "8.1.1",
- "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
- "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
+ "version": "6.0.4",
+ "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz",
+ "integrity": "sha512-IFQTJARgMUBF+xVd2b+hIgXWrZEjND3vJtRCvIelcFB5SIXfjV4bOHbHJ0eXKh+0COrBRc8MqteKAz/j88rE0A==",
"dev": true
},
"node_modules/@types/sizzle": {
@@ -7925,26 +7925,25 @@
}
},
"node_modules/cypress": {
- "version": "9.5.2",
- "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.2.tgz",
- "integrity": "sha512-gYiQYvJozMzDOriUV1rCt6CeRM/pRK4nhwGJj3nJQyX2BoUdTCVwp30xDMKc771HiNVhBtgj5o5/iBdVDVXQUg==",
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/cypress/-/cypress-8.3.0.tgz",
+ "integrity": "sha512-zA5Rcq8AZIfRfPXU0CCcauofF+YpaU9HYbfqkunFTmFV0Kdlo14tNjH2E3++MkjXKFnv3/pXq+HgxWtw8CSe8Q==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
- "@cypress/request": "^2.88.10",
+ "@cypress/request": "^2.88.5",
"@cypress/xvfb": "^1.2.4",
"@types/node": "^14.14.31",
- "@types/sinonjs__fake-timers": "8.1.1",
+ "@types/sinonjs__fake-timers": "^6.0.2",
"@types/sizzle": "^2.3.2",
"arch": "^2.2.0",
"blob-util": "^2.0.2",
"bluebird": "^3.7.2",
- "buffer": "^5.6.0",
"cachedir": "^2.3.0",
"chalk": "^4.1.0",
"check-more-types": "^2.24.0",
"cli-cursor": "^3.1.0",
- "cli-table3": "~0.6.1",
+ "cli-table3": "~0.6.0",
"commander": "^5.1.0",
"common-tags": "^1.8.0",
"dayjs": "^1.10.4",
@@ -7966,12 +7965,12 @@
"minimist": "^1.2.5",
"ospath": "^1.2.2",
"pretty-bytes": "^5.6.0",
- "proxy-from-env": "1.0.0",
+ "ramda": "~0.27.1",
"request-progress": "^3.0.0",
- "semver": "^7.3.2",
"supports-color": "^8.1.1",
"tmp": "~0.2.1",
"untildify": "^4.0.0",
+ "url": "^0.11.0",
"yauzl": "^2.10.0"
},
"bin": {
@@ -7995,12 +7994,12 @@
}
},
"node_modules/cypress-cucumber-preprocessor": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-4.3.1.tgz",
- "integrity": "sha512-BKUYXqoTeKzkPXohEczDtpAwRCY0ZPtIpfRwJut16yNLqdXQMV+aItwanxe3cbJTFlwg562NAjL4LMdiOhkAjg==",
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-4.2.0.tgz",
+ "integrity": "sha512-iVm+gUROvg8lDIFStP4/B+0xHAwj6c6HCoUtkZqq8Ee/tcqe2Vlhz1eAq2Q5+tzmCk2/CIh06suvqB+RQpjWBw==",
"dev": true,
"dependencies": {
- "@cypress/browserify-preprocessor": "^3.0.2",
+ "@cypress/browserify-preprocessor": "^3.0.1",
"chai": "^4.2.0",
"chokidar": "3.5.2",
"cosmiconfig": "^4.0.0",
@@ -8062,30 +8061,6 @@
"integrity": "sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A==",
"dev": true
},
- "node_modules/cypress/node_modules/buffer": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
- "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
- "dev": true,
- "funding": [
- {
- "type": "github",
- "url": "https://github.com/sponsors/feross"
- },
- {
- "type": "patreon",
- "url": "https://www.patreon.com/feross"
- },
- {
- "type": "consulting",
- "url": "https://feross.org/support"
- }
- ],
- "dependencies": {
- "base64-js": "^1.3.1",
- "ieee754": "^1.1.13"
- }
- },
"node_modules/cypress/node_modules/commander": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
@@ -8110,12 +8085,6 @@
"node": ">=10"
}
},
- "node_modules/cypress/node_modules/proxy-from-env": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
- "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
- "dev": true
- },
"node_modules/cypress/node_modules/supports-color": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -20444,6 +20413,12 @@
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
},
+ "node_modules/ramda": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.2.tgz",
+ "integrity": "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==",
+ "dev": true
+ },
"node_modules/randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -29834,9 +29809,9 @@
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/sinonjs__fake-timers": {
- "version": "8.1.1",
- "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz",
- "integrity": "sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==",
+ "version": "6.0.4",
+ "resolved": "https://registry.npmjs.org/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.4.tgz",
+ "integrity": "sha512-IFQTJARgMUBF+xVd2b+hIgXWrZEjND3vJtRCvIelcFB5SIXfjV4bOHbHJ0eXKh+0COrBRc8MqteKAz/j88rE0A==",
"dev": true
},
"@types/sizzle": {
@@ -32819,25 +32794,24 @@
}
},
"cypress": {
- "version": "9.5.2",
- "resolved": "https://registry.npmjs.org/cypress/-/cypress-9.5.2.tgz",
- "integrity": "sha512-gYiQYvJozMzDOriUV1rCt6CeRM/pRK4nhwGJj3nJQyX2BoUdTCVwp30xDMKc771HiNVhBtgj5o5/iBdVDVXQUg==",
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/cypress/-/cypress-8.3.0.tgz",
+ "integrity": "sha512-zA5Rcq8AZIfRfPXU0CCcauofF+YpaU9HYbfqkunFTmFV0Kdlo14tNjH2E3++MkjXKFnv3/pXq+HgxWtw8CSe8Q==",
"dev": true,
"requires": {
- "@cypress/request": "^2.88.10",
+ "@cypress/request": "^2.88.5",
"@cypress/xvfb": "^1.2.4",
"@types/node": "^14.14.31",
- "@types/sinonjs__fake-timers": "8.1.1",
+ "@types/sinonjs__fake-timers": "^6.0.2",
"@types/sizzle": "^2.3.2",
"arch": "^2.2.0",
"blob-util": "^2.0.2",
"bluebird": "^3.7.2",
- "buffer": "^5.6.0",
"cachedir": "^2.3.0",
"chalk": "^4.1.0",
"check-more-types": "^2.24.0",
"cli-cursor": "^3.1.0",
- "cli-table3": "~0.6.1",
+ "cli-table3": "~0.6.0",
"commander": "^5.1.0",
"common-tags": "^1.8.0",
"dayjs": "^1.10.4",
@@ -32859,12 +32833,12 @@
"minimist": "^1.2.5",
"ospath": "^1.2.2",
"pretty-bytes": "^5.6.0",
- "proxy-from-env": "1.0.0",
+ "ramda": "~0.27.1",
"request-progress": "^3.0.0",
- "semver": "^7.3.2",
"supports-color": "^8.1.1",
"tmp": "~0.2.1",
"untildify": "^4.0.0",
+ "url": "^0.11.0",
"yauzl": "^2.10.0"
},
"dependencies": {
@@ -32874,16 +32848,6 @@
"integrity": "sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A==",
"dev": true
},
- "buffer": {
- "version": "5.7.1",
- "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
- "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
- "dev": true,
- "requires": {
- "base64-js": "^1.3.1",
- "ieee754": "^1.1.13"
- }
- },
"commander": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
@@ -32902,12 +32866,6 @@
"universalify": "^2.0.0"
}
},
- "proxy-from-env": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
- "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=",
- "dev": true
- },
"supports-color": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
@@ -32927,12 +32885,12 @@
"requires": {}
},
"cypress-cucumber-preprocessor": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-4.3.1.tgz",
- "integrity": "sha512-BKUYXqoTeKzkPXohEczDtpAwRCY0ZPtIpfRwJut16yNLqdXQMV+aItwanxe3cbJTFlwg562NAjL4LMdiOhkAjg==",
+ "version": "4.2.0",
+ "resolved": "https://registry.npmjs.org/cypress-cucumber-preprocessor/-/cypress-cucumber-preprocessor-4.2.0.tgz",
+ "integrity": "sha512-iVm+gUROvg8lDIFStP4/B+0xHAwj6c6HCoUtkZqq8Ee/tcqe2Vlhz1eAq2Q5+tzmCk2/CIh06suvqB+RQpjWBw==",
"dev": true,
"requires": {
- "@cypress/browserify-preprocessor": "^3.0.2",
+ "@cypress/browserify-preprocessor": "^3.0.1",
"chai": "^4.2.0",
"chokidar": "3.5.2",
"cosmiconfig": "^4.0.0",
@@ -42194,6 +42152,12 @@
"resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
"integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
},
+ "ramda": {
+ "version": "0.27.2",
+ "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.27.2.tgz",
+ "integrity": "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==",
+ "dev": true
+ },
"randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
diff --git a/client/package.json b/client/package.json
index 3749f601..ea48bdb0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -47,9 +47,9 @@
"axe-core": "^4.4.1",
"babel-jest": "^27.5.1",
"babel-preset-gatsby": "^1.14.0",
- "cypress": "^9.5.2",
+ "cypress": "^8.3.0",
"cypress-axe": "^0.14.0",
- "cypress-cucumber-preprocessor": "^4.3.1",
+ "cypress-cucumber-preprocessor": "^4.2.0",
"eslint": "^7.32.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-cypress": "^2.12.1",
diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx
index 0c55899b..f6a4872f 100644
--- a/client/src/components/AreaDetail/AreaDetail.tsx
+++ b/client/src/components/AreaDetail/AreaDetail.tsx
@@ -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: ,
content: (
<>
- {/* Category Header */}
-
-
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.INDICATOR)}
-
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.PERCENTILE)}
-
+ {/* Exceeds one or more burdens */}
+
- {/* Category Indicators */}
+ {/* indicators */}
{category.indicators.map((indicator:any, index:number) => {
return ;
})}
+
+ {/* AND */}
+ AND
+
+ {/* Exceeds both socioeconomic burdens */}
+
+
+ {/* socio-economic indicators */}
+ {category.socioEcIndicators.map((indicator:any, index:number) => {
+ return ;
+ })}
+
>
),
expanded: false,
@@ -521,35 +587,38 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
}
- {/* Number of thresholds exceeded */}
- 0 ?
- styles.showThresholdExceed : styles.hideThresholdExceed
- }>
-
+ {/* Number of categories exceeded */}
+
+ {EXPLORE_COPY.numberOfCategoriesExceeded(properties[constants.COUNT_OF_CATEGORIES_DISADV])}
+ {/* Number of thresholds exceeded */}
+
+ {EXPLORE_COPY.numberOfThresholdsExceeded(properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS])}
+
{/* Send Feedback button */}
-
- {EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
+ type="button"
+ className={styles.sendFeedbackBtn}
+ >
+
+
+ {EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
+
+
{/*
diff --git a/client/src/components/AreaDetail/areaDetail.module.scss b/client/src/components/AreaDetail/areaDetail.module.scss
index d2769082..70106e23 100644
--- a/client/src/components/AreaDetail/areaDetail.module.scss
+++ b/client/src/components/AreaDetail/areaDetail.module.scss
@@ -9,11 +9,6 @@ $sidePanelLabelFontColor: #171716;
font-weight: 600;
}
-@mixin thresholdExceeded {
- font-size: medium;
- @include u-margin-top('05');
-}
-
.versionInfo {
padding: .5rem 1rem .5rem 1.2rem;
font-size: medium;
@@ -25,7 +20,6 @@ $sidePanelLabelFontColor: #171716;
flex-direction: column;
}
-
.categorization {
display: flex;
flex-direction: column;
@@ -48,19 +42,45 @@ $sidePanelLabelFontColor: #171716;
}
}
- .showThresholdExceed {
- @include thresholdExceeded;
- display: block;
-
- }
-
- .hideThresholdExceed {
- @include thresholdExceeded;
- visibility: hidden;
+ .showCategoriesExceed {
+ font-size: small;
+ @include u-margin-top('05');
}
- .sendFeedbackBtn {
+ .showThresholdExceed {
+ font-size: small;
+ @include u-margin-top('05');
+
+ }
+
+ .sendFeedbackLink {
@include u-margin-top(2);
+
+ .sendFeedbackBtn{
+ @include u-text("blue-70v");
+ @include u-bg("yellow-20v");
+ height: 40px;
+
+ &:hover {
+ @include u-bg("yellow-20");
+ @include u-text("gray-90");
+ }
+
+ .buttonContainer{
+ display: flex;
+
+ .buttonText{
+ @include u-margin-right(1);
+ }
+
+ .buttonImage{
+ width: 21px;
+ margin-top: -3px;
+
+ filter: invert(13%) sepia(76%) saturate(5142%) hue-rotate(192deg) brightness(80%) contrast(106%);
+ }
+ }
+ }
}
}
@@ -82,14 +102,6 @@ $sidePanelLabelFontColor: #171716;
}
}
-// 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;
@@ -98,4 +110,17 @@ $sidePanelLabelFontColor: #171716;
@include u-bg('gray-cool-5');
@include u-padding-left(2.5);
@include u-padding-right(2);
-}
\ No newline at end of file
+}
+
+.categorySpacer {
+ @include u-bg('gray-cool-3');
+
+ @include typeset('sans', '2xs', 2);
+ @include u-text('bold');
+
+ margin: 0 -20px 1rem -20px;
+ @include u-padding-top(2);
+ @include u-padding-bottom(2);
+ @include u-padding-left(2.5);
+
+}
diff --git a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
index 67efca70..1d3251f2 100644
--- a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
+++ b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
@@ -10,9 +10,14 @@ declare namespace MapModuleScssNamespace {
isInFocus:string;
versionInfo: string;
showThresholdExceed:string;
- hideThresholdExceed:string;
+ showCategoriesExceed: string;
categoryHeader:string;
+ sendFeedbackLink: string;
sendFeedbackBtn: string;
+ buttonContainer: string;
+ buttonText: string;
+ buttonImage: string;
+ categorySpacer: string;
}
}
diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx
index 6e264b24..0c4554ae 100644
--- a/client/src/components/AreaDetail/index.tsx
+++ b/client/src/components/AreaDetail/index.tsx
@@ -1,3 +1,4 @@
import AreaDetail from './AreaDetail';
export default AreaDetail;
+
diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
index 835a041f..e8fe3de5 100644
--- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
+++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
@@ -53,7 +53,10 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
- of thresholds exceeded
+ Disadvantaged in 5 categories
+
+
+ At or above 3 thresholds
- Send feedback
+
+ Send feedback
+
+
@@ -107,14 +116,15 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -124,17 +134,36 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
- 60
-
-
- th
-
-
+
+
+ 60
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 90th
+
+
+ percentile
+
+
@@ -144,55 +173,177 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
- 90
-
-
- th
-
-
+
+
+ 90
+
+
+ th
+
+
+
+
+
+
+
+
+
+ above 90th
+
+
+ percentile
+
+
Poverty
- Percent of a tract's population in households where the household income is at or below 100% of
- the Federal poverty level
+ Percent of a census tract's population in households where the household income is at or below 100%
+ of the Federal poverty level
- 80
-
-
- th
-
-
+
+
+ 50
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 90th
+
+
+ percentile
+
+
- High school degree attainment rate
+ High school degree non-attainment
- Proportion of people ages 25 years or older whose education level is less than a high school diploma
+ Percent of people ages 25 years or older whose education level is less than a high school diploma
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
+
+
+
+ High school degree non-attainment
+
+
+ Percent of people ages 25 years or older whose education level is less than a high school diploma
+
+
+
+
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+
+
+
+
+
+ Higher education non-enrollement
+
+
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
+
+
+
+
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -255,7 +406,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- of thresholds exceeded
+ Disadvantaged in 5 categories
+
+
+ At or above 3 thresholds
- Send feedback
+
+ Send feedback
+
+
@@ -309,50 +469,73 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
Expected agriculture loss rate
- Economic loss rate to agriculture resulting from natural hazards
+ Economic loss rate to agricultural value resulting from natural hazards each year
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
Expected building loss rate
- Economic loss rate to buildings resulting from natural hazards
+ Economic loss rate to agricultural value resulting from natural hazards each year
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -364,15 +547,37 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -384,32 +589,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -442,14 +677,15 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -459,33 +695,66 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
PM2.5 in the air
- Fine inhalable particles, 2.5 micrometers and smaller
+ Fine inhalable particles, 2.5 micrometers or smaller
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -497,32 +766,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -539,7 +838,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Clean transportation
+ Clean transit
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -572,15 +872,26 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -590,15 +901,37 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -610,32 +943,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -668,14 +1031,15 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -685,17 +1049,36 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 95
-
-
- th
-
-
+
+
+ 95
+
+
+ th
+
+
+
+
+
+
+
+
+
+ above 90th
+
+
+ percentile
+
+
@@ -707,15 +1090,37 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -727,32 +1132,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -785,14 +1220,15 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -802,51 +1238,95 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
- Proximity to NPL sites
+ Proximity to National Priorities List (NPL) sites
Proposed or listed NPL (Superfund) sites within 5 kilometers
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
- Proximity to RMP facilities
+ Proximity to Risk Management Plan (RMP) facilities
- Risk Management Plan facilities within 5 kilometers
+ RMP facilities within 5 kilometers
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -858,32 +1338,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -916,14 +1426,15 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -933,15 +1444,37 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -953,32 +1486,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -1011,14 +1574,15 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -1028,15 +1592,26 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -1049,35 +1624,59 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
Heart disease
- Weighted percent of people ages 18 years and older who have been told they have heart disease
+ Navigate to the explore the tool page. When the map is in view, click on the map. The side panel
+ will show an indicator desciption of Weighted percent of people ages 18 years and older who have
+ been told they have heart disease
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -1087,15 +1686,37 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
@@ -1107,32 +1728,62 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 19
-
-
- th
-
-
+
+
+ 19
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 65th
+
+
+ percentile
+
+
- Higher ed enrollment rate
+ Higher education non-enrollement
- Percent of population enrolled in college, university, or graduate school
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- N/A
-
- %
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -1165,14 +1816,15 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -1184,17 +1836,36 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 97
-
-
- th
-
-
+
+
+ 97
+
+
+ th
+
+
+
+
+
+
+
+
+
+ above 90th
+
+
+ percentile
+
+
@@ -1204,15 +1875,26 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -1222,75 +1904,154 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
- 96
-
-
- th
-
-
+
+
+ 96
+
+
+ th
+
+
+
+
+
+
+
+
+
+ above 90th
+
+
+ percentile
+
+
Poverty
- Percent of a tract's population in households where the household income is at or below 100% of
- the Federal poverty level
+ Percent of a census tract's population in households where the household income is at or below 100%
+ of the Federal poverty level
- 19
-
-
- th
-
-
+
+
+ 12
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 90th
+
+
+ percentile
+
+
+
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
+
+
+
+ High school degree non-attainment
+
+
+ Percent of people ages 25 years or older whose education level is less than a high school diploma
+
+
+
+
+
+
+ 98
+
+ %
+
+
+
+
+
+
+
+
+ above 10
+
+
+ percent
+
+
- High school degree attainment rate
+ Higher education non-enrollement
- Proportion of people ages 25 years or older whose education level is less than a high school diploma
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- 98
-
- %
-
-
-
-
-
-
-
- Higher ed enrollment rate
-
- Percent of population enrolled in college, university, or graduate school
-
+
+
+
+
+
+
+
+ data is not available
+
-
-
- N/A
-
- %
-
@@ -1353,7 +2114,10 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
- of thresholds exceeded
+ Disadvantaged in 5 categories
+
+
+ At or above 3 thresholds
- Send feedback
+
+ Send feedback
+
+
@@ -1407,14 +2177,15 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
>
- Indicator
+ At or above at least one threshold?
- Percentile (0-100)
+ No
@@ -1426,17 +2197,36 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
- 97
-
-
- th
-
-
+
+
+ 97
+
+
+ th
+
+
+
+
+
+
+
+
+
+ above 90th
+
+
+ percentile
+
+
@@ -1446,15 +2236,26 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
- N/A
-
-
-
+
+
+
+
+
+
+
+
+ data is not available
+
+
@@ -1464,75 +2265,154 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
- 96
-
-
- th
-
-
+
+
+ 96
+
+
+ th
+
+
+
+
+
+
+
+
+
+ above 90th
+
+
+ percentile
+
+
Poverty
- Percent of a tract's population in households where the household income is at or below 100% of
- the Federal poverty level
+ Percent of a census tract's population in households where the household income is at or below 100%
+ of the Federal poverty level
- 19
-
-
- th
-
-
+
+
+ 12
+
+
+ th
+
+
+
+
+
+
+
+
+
+ below 90th
+
+
+ percentile
+
+
+
+
+
+
+ AND
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
+
+
+
+ High school degree non-attainment
+
+
+ Percent of people ages 25 years or older whose education level is less than a high school diploma
+
+
+
+
+
+
+ 98
+
+ %
+
+
+
+
+
+
+
+
+ above 10
+
+
+ percent
+
+
- High school degree attainment rate
+ Higher education non-enrollement
- Proportion of people ages 25 years or older whose education level is less than a high school diploma
+ Percent of the census tract's population 15 or older not enrolled in college, university, or
+ graduate school
- 98
-
- %
-
-
-
-
-
-
-
- Higher ed enrollment rate
-
- Percent of population enrolled in college, university, or graduate school
-
+
+
+
+
+
+
+
+ data is not available
+
-
-
- N/A
-
- %
-
diff --git a/client/src/components/AreaDetail/tests/areaDetail.test.tsx b/client/src/components/AreaDetail/tests/areaDetail.test.tsx
index f458ab53..80698b14 100644
--- a/client/src/components/AreaDetail/tests/areaDetail.test.tsx
+++ b/client/src/components/AreaDetail/tests/areaDetail.test.tsx
@@ -7,7 +7,7 @@ import * as constants from '../../../data/constants';
describe('rendering of the AreaDetail', () => {
const properties = {
- [constants.POVERTY_PROPERTY_PERCENTILE]: .12,
+ [constants.POVERTY_BELOW_100_PERCENTILE]: .12,
[constants.HIGH_SCHOOL_PROPERTY_PERCENTILE]: .98,
[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE]: .97,
[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE]: .96,
@@ -15,8 +15,10 @@ describe('rendering of the AreaDetail', () => {
[constants.SCORE_PROPERTY_HIGH]: .95,
[constants.GEOID_PROPERTY]: 98729374234,
[constants.TOTAL_POPULATION]: 3435435,
- [constants.POVERTY_PROPERTY_PERCENTILE]: .19,
+ [constants.POVERTY_BELOW_200_PERCENTILE]: .19,
[constants.SIDE_PANEL_STATE]: constants.SIDE_PANEL_STATE_VALUES.NATION,
+ [constants.COUNT_OF_CATEGORIES_DISADV]: 5,
+ [constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]: 3,
};
@@ -49,7 +51,7 @@ describe('rendering of the AreaDetail', () => {
[constants.ISLAND_AREAS_UNEMPLOYMENT_LOW_HS_EDU_PERCENTILE_FIELD]: .9,
[constants.ISLAND_AREAS_POVERTY_LOW_HS_EDU_PERCENTILE_FIELD]: .8,
[constants.ISLAND_AREAS_LOW_MEDIAN_INCOME_LOW_HS_EDU_PERCENTILE_FIELD]: .6,
- [constants.ISLAND_AREAS_LOW_HS_EDU_PERCENTILE_FIELD]: .5,
+ [constants.ISLAND_AREAS_POVERTY_LOW_HS_EDU_PERCENTILE_FIELD]: .5,
[constants.SIDE_PANEL_STATE]: constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS,
};
diff --git a/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap b/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
index 4242dbec..9739ad59 100644
--- a/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
+++ b/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
@@ -34,12 +34,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -61,8 +59,6 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
expected population loss rate
-
-
@@ -76,11 +72,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -97,12 +93,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -118,8 +112,6 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
PM2.5 in the air
-
-
@@ -133,11 +125,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -154,7 +146,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
@@ -190,11 +182,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -211,12 +203,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -232,15 +222,12 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
median home value
- is at or less than
- the 90th percentile OR at or above the 90th percentile for the
+ is at or less than the 90th percentile OR at or above the 90th percentile for the
housing cost burden
-
-
@@ -254,11 +241,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -275,12 +262,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -302,8 +287,6 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
proximity to Risk Management Plan (RMP) facilities
-
-
@@ -317,11 +300,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -338,12 +321,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -353,8 +334,6 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
wastewater discharge
-
-
@@ -368,11 +347,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -389,12 +368,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -422,8 +399,6 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low life expectancy
-
-
@@ -437,11 +412,11 @@ exports[`rendering of the Categories checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
@@ -458,12 +433,10 @@ exports[`rendering of the Categories checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -474,21 +447,18 @@ exports[`rendering of the Categories checks if component renders 1`] = `
low median income
as a percentage of area median income OR
-
linguistic isolation
- OR
-
+ OR
unemployment
- OR
- percent individuals in households at or below 100% Federal
+ OR percent individuals in households at or below 100% Federal
@@ -498,23 +468,20 @@ exports[`rendering of the Categories checks if component renders 1`] = `
-
-
AND
- is at or less than 90% for
+ 10% or more of adults 25 or older have not attained a
- high school degree attainment rate
+ high school degree
- for adults 25 years and older AND
- at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
diff --git a/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap b/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
index d6db1102..164e50e3 100644
--- a/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
+++ b/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
@@ -12,12 +12,10 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
identified as disadvantaged
-
+
-
-
IF
@@ -39,8 +37,6 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
>
expected population loss rate
-
-
@@ -54,11 +50,11 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
>
low income
- AND at or below 20% for
+ AND 80% or more of adults 15 or older are not enrolled in
- higher ed enrollment rate
+ higher education
diff --git a/client/src/components/DatasetCard/DatasetCard.tsx b/client/src/components/DatasetCard/DatasetCard.tsx
new file mode 100644
index 00000000..f180ae24
--- /dev/null
+++ b/client/src/components/DatasetCard/DatasetCard.tsx
@@ -0,0 +1,80 @@
+/* eslint-disable valid-jsdoc */
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as styles from './datasetCard.module.scss';
+import * as METHODOLOGY_COPY from '../../data/copy/methodology';
+
+interface IDatasetCardProps {
+ datasetCardProps: METHODOLOGY_COPY.IIndicators
+}
+
+/**
+ * This component will take in a card and render a dataset card
+ *
+ * @param {IDatasetCardProps}
+ * @return {JSX.Element}
+ */
+const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
+ const intl = useIntl();
+
+ return (
+
+ {/* Dataset header */}
+
{datasetCardProps.indicator}
+
+ {/* Dataset description */}
+
+ {datasetCardProps.description}
+
+
+ {/* Dataset note */}
+ {datasetCardProps.note &&
+
{datasetCardProps.note}
+
}
+
+
+
+ {/* Dataset Used in */}
+
+
+ {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)}
+
+ {datasetCardProps.usedIn}
+
+
+ {/* Dataset Responsible Party */}
+
+
+ {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
+
+ {datasetCardProps.responsibleParty}
+
+
+
+ {datasetCardProps.sources.map((dataSource, index) => (
+
+ {/* Dataset Source */}
+
+
+ {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
+
+ {dataSource.source}
+
+
+ {/* Dataset Available for */}
+
+
+ {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.AVAILABLE_FOR)}
+
+ {dataSource.availableFor}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default DatasetCard;
diff --git a/client/src/components/DatasetCard/index.tsx b/client/src/components/DatasetCard/index.tsx
index 562f2a19..a90117fb 100644
--- a/client/src/components/DatasetCard/index.tsx
+++ b/client/src/components/DatasetCard/index.tsx
@@ -1,68 +1,3 @@
-import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
-
-import * as styles from './datasetCard.module.scss';
-import * as METHODOLOGY_COPY from '../../data/copy/methodology';
-
-interface IDatasetCardProps {
- datasetCardProps: METHODOLOGY_COPY.IIndicators
-}
-
-const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
- const intl = useIntl();
-
- return (
-
- {/* Dataset header */}
-
{datasetCardProps.indicator}
-
- {/* Dataset description */}
-
- {datasetCardProps.description}
-
-
-
-
- {/* Dataset Used in */}
-
-
- {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)}
-
- {datasetCardProps.usedIn}
-
-
- {/* Dataset Responsible Party */}
-
-
- {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
-
- {datasetCardProps.responsibleParty}
-
-
-
- {datasetCardProps.sources.map((dataSource) => (
- <>
- {/* Dataset Source */}
-
-
- {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
-
- {dataSource.source}
-
-
- {/* Dataset Available for */}
-
-
- {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.AVAILABLE_FOR)}
-
- {dataSource.availableFor}
-
- >
- ))}
-
-
-
- );
-};
+import DatasetCard from './DatasetCard';
export default DatasetCard;
diff --git a/client/src/components/DatasetCard/tests/datasetCard.test.tsx b/client/src/components/DatasetCard/tests/datasetCard.test.tsx
index 0ad7af8f..ba45f69c 100644
--- a/client/src/components/DatasetCard/tests/datasetCard.test.tsx
+++ b/client/src/components/DatasetCard/tests/datasetCard.test.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../../test/testHelpers';
-import DatasetCard from '../../DatasetCard';
+import DatasetCard from '../DatasetCard';
import * as METHODOLOGY_COPY from '../../../data/copy/methodology';
diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx
index 8521e49c..a0ea1e1c 100644
--- a/client/src/components/DatasetContainer/index.tsx
+++ b/client/src/components/DatasetContainer/index.tsx
@@ -34,8 +34,8 @@ const DatasetContainer = () => {
- {METHODOLOGY_COPY.INDICATORS.map((card) => )}
diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
index e5f3f335..47eca94c 100644
--- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
+++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
@@ -101,11 +101,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
id="high-ed-enroll-rate"
>
- Higher ed enrollment rate
+ Higher education non-enrollment
- Percent of people who are currently enrolled in college or graduate school.
+ Percent of people 15 or older who are not currently enrolled in college, university, or graduate school.
@@ -140,7 +140,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Available for:
- All U.S. states and the District of Columbia
+ All U.S. states, the District of Columbia, and Puerto Rico
@@ -380,8 +380,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Source:
-
-
Fusion of model and monitor data
- from 2017 as compiled by EPA’s EJSCREEN, sourced from EPA National Air
- Toxics Assessment (NATA) and the U.S. Department of Transportation (DOT) traffic data
+ from 2017 as compiled by EPA’s EJSCREEN, sourced from EPA National Air Toxics Assessment (NATA) and the U.S. Department of Transportation (DOT) traffic data
@@ -995,23 +992,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Average number of years of life a person who has attained a given age can expect to live.
-
-
-
- Note:
-
-
- Unlike most of the other datasets, high values of this data indicate low burdens. For
- percentile calculations of burden, the percentile is calculated in reverse order, so that the
- census tract with the highest life expectancy relative to area life expectancy (lowest burden
- on this measure) is at the 0th percentile, and the census tract with the lowest life
- expectancy relative to area life expectancy (highest burden on this measure) is at the
- 100th percentile. Census tracts with the highest number have the lowest life expectancy.
-
-
-
+
+
+
+
+
+ Note:
+
+ The percentiles for this dataset have been reversed so that census tracts with lower numbers have higher life expectancies and the census tracts with higher numbers have lower life expectancy when compared to life expectancy in the area.
+
+
+
@@ -1057,23 +1050,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
Median income of the census tract calculated as a percent of the area’s median income.
-
-
-
- Note:
-
-
- Unlike most of the other datasets, high values of this data indicate low burdens. For
- percentile calculations of burden, the percentile is calculated in reverse order, so that the
- census tract with the highest median income relative to area median income (lowest burden on this
- measure) is at the 0th percentile, and the census tract with the lowest median income relative to
- area median income (highest burden on this measure) is at the 100th percentile. Census tracts with
- the highest number have the lowest median income.
-
-
-
+
+
+
+
+
+ Note:
+
+ The percentiles for this dataset have been reversed so that census tracts with lower numbers have higher median incomes and census tracts with the higher numbers have lower median income when compared to area median income.
+
+
+
@@ -1319,12 +1308,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
id="high-school"
>
- High school degree attainment rate
+ High school degree non-attainment
- Percent of people ages 25 years or older in a census tract whose
- education level is less than a high school diploma.
+ Percent of people age 25 years or older in a census tract whose education level is less than a high school diploma.
diff --git a/client/src/components/ExceedBurden/ExceedBurden.module.scss b/client/src/components/ExceedBurden/ExceedBurden.module.scss
new file mode 100644
index 00000000..a6b23236
--- /dev/null
+++ b/client/src/components/ExceedBurden/ExceedBurden.module.scss
@@ -0,0 +1,27 @@
+@use '../../styles/design-system.scss' as *;
+
+// styles for all burden containers
+@mixin baseBurdenContainer {
+ display: flex;
+ @include u-text('bold');
+
+ .burdenQuestion {
+ flex: 0 1 77%;
+ @include typeset('sans', '2xs', 2);
+ }
+
+ .burdenValue {
+ margin-left: 2.2rem;
+ }
+}
+
+// styles for first burden container
+.exceedBurdenContainer {
+ @include baseBurdenContainer();
+ @include u-padding-bottom(1);
+}
+
+// styles for second burden container
+// .exceedBurdenContainer ~ .exceedBurdenContainer {
+// @include baseBurdenContainer();
+// }
diff --git a/client/src/components/ExceedBurden/ExceedBurden.module.scss.d.ts b/client/src/components/ExceedBurden/ExceedBurden.module.scss.d.ts
new file mode 100644
index 00000000..76fca558
--- /dev/null
+++ b/client/src/components/ExceedBurden/ExceedBurden.module.scss.d.ts
@@ -0,0 +1,14 @@
+declare namespace ExceedBurdenNamespace {
+ export interface IExceedBurden {
+ exceedBurdenContainer: string;
+ burdenQuestion: string;
+ burdenValue: string;
+ }
+ }
+
+declare const ExceedBurdenModule: ExceedBurdenNamespace.IExceedBurden & {
+ /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+ locals: ExceedBurdenNamespace.IExceedBurden;
+ };
+
+ export = ExceedBurdenModule;
diff --git a/client/src/components/ExceedBurden/ExceedBurden.test.tsx b/client/src/components/ExceedBurden/ExceedBurden.test.tsx
new file mode 100644
index 00000000..3eed69d0
--- /dev/null
+++ b/client/src/components/ExceedBurden/ExceedBurden.test.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import ExceedBurden from './ExceedBurden';
+import * as EXPLORE_COPY from '../../data/copy/explore';
+
+describe('test rendering of Exceeds one or more burdens when', () => {
+ it('is burdended', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('is NOT burdended', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+});
+
+describe('test rendering of Exceeds both socioeco burdens when', () => {
+ it('is burdended', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('is NOT burdended', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+});
diff --git a/client/src/components/ExceedBurden/ExceedBurden.tsx b/client/src/components/ExceedBurden/ExceedBurden.tsx
new file mode 100644
index 00000000..408f7b22
--- /dev/null
+++ b/client/src/components/ExceedBurden/ExceedBurden.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import * as styles from './ExceedBurden.module.scss';
+import * as EXPLORE_COPY from '../../data/copy/explore';
+
+interface IExceedBurden {
+ text: React.ReactElement;
+ isBurdened: boolean;
+}
+const ExceedBurden = ({text, isBurdened}:IExceedBurden) => {
+ return (
+
+
+ {text}
+
+
+ {isBurdened ? EXPLORE_COPY.SIDE_PANEL_SPACERS.YES : EXPLORE_COPY.SIDE_PANEL_SPACERS.NO}
+
+
+ );
+};
+
+export default ExceedBurden;
diff --git a/client/src/components/ExceedBurden/__snapshots__/ExceedBurden.test.tsx.snap b/client/src/components/ExceedBurden/__snapshots__/ExceedBurden.test.tsx.snap
new file mode 100644
index 00000000..2d7f3134
--- /dev/null
+++ b/client/src/components/ExceedBurden/__snapshots__/ExceedBurden.test.tsx.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test rendering of Exceeds both socioeco burdens when is NOT burdended 1`] = `
+
+
+
+ At or above both associated thresholds?
+
+
+ No
+
+
+
+`;
+
+exports[`test rendering of Exceeds both socioeco burdens when is burdended 1`] = `
+
+
+
+ At or above at least one threshold?
+
+
+ Yes
+
+
+
+`;
+
+exports[`test rendering of Exceeds one or more burdens when is NOT burdended 1`] = `
+
+
+
+ At or above at least one threshold?
+
+
+ No
+
+
+
+`;
+
+exports[`test rendering of Exceeds one or more burdens when is burdended 1`] = `
+
+
+
+ At or above at least one threshold?
+
+
+ Yes
+
+
+
+`;
diff --git a/client/src/components/ExceedBurden/index.tsx b/client/src/components/ExceedBurden/index.tsx
new file mode 100644
index 00000000..d32835b2
--- /dev/null
+++ b/client/src/components/ExceedBurden/index.tsx
@@ -0,0 +1,3 @@
+import ExceedBurden from './ExceedBurden';
+
+export default ExceedBurden;
diff --git a/client/src/components/Indicator/Indicator.module.scss b/client/src/components/Indicator/Indicator.module.scss
index 25957599..149c956f 100644
--- a/client/src/components/Indicator/Indicator.module.scss
+++ b/client/src/components/Indicator/Indicator.module.scss
@@ -4,14 +4,12 @@
@mixin indicator {
display: flex;
flex-direction: column;
- @include u-padding-bottom(3);
- &:last-child {
- border-bottom: none;
- @include u-padding-bottom(0);
- }
+ @include u-padding-top(1.5);
+ @include u-padding-bottom(1.5);
.indicatorRow {
display: flex;
+ justify-content: space-between;
@media screen and (max-width: $mobileBreakpoint) {
flex: 1 0 40%;
@@ -21,15 +19,16 @@
}
.indicatorName {
- flex: 0 1 77%;
+ // flex: 0 1 77%;
+ flex-basis: 60%;
display: flex;
flex-direction: column;
@include typeset('sans', '2xs', 2);
- @include u-text('bold');
+ @include u-text('medium');
.indicatorDesc {
@include typeset('sans', '3xs', 2);
- @include u-text('normal');
+ @include u-text('thin');
max-width: 12rem;
@include u-margin-top(0);
@media screen and (max-width: 1024px) {
@@ -38,13 +37,47 @@
}
}
- .indicatorValue {
- margin-left: 2.2rem;
-
- .indicatorSuperscript {
- top: -0.2em
+ .indicatorValueCol {
+ display: flex;
+ flex-direction: column;
+
+ .indicatorValueRow {
+ display: flex;
+ align-self: end;
+
+ .indicatorValue {
+ margin-left: 2.2rem;
+
+ .indicatorSuperscript {
+ top: -0.2em
+ }
+ }
+
+ .indicatorArrow {
+ margin-bottom: -.375rem;
+
+ img {
+ max-width: none;
+ height: 1.5rem;
+ width: 1.5rem;
+
+ }
+ .unavailable {
+ opacity: .2;
+ }
+ }
}
- }
+
+ .indicatorValueSubText{
+ display: flex;
+ flex-direction: column;
+ align-self: flex-end;
+ text-align: right;
+ @include typeset('sans', '3xs', 2);
+ @include u-text('thin');
+ }
+ }
+
}
}
@@ -55,5 +88,27 @@
.disadvantagedIndicator {
@include indicator;
- @include u-text('blue-warm-70v');
+ @include u-bg('blue-warm-10');
+
+ // A darker bg color:
+ // background-color: #D2DAE3;
+
+ // Add a border
+ // border: 1px solid #1A4480;
+
+ margin: 0 -20px 1px -20px;
+ @include u-padding-left(2.5);
+ @include u-padding-right(2.5);
+
+
+ // Overwrite indicator mixin with bolder fonts for disadv. indicator
+ .indicatorRow {
+ .indicatorName {
+ @include u-text('bold');
+
+ .indicatorDesc {
+ @include u-text('normal');
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/client/src/components/Indicator/Indicator.module.scss.d.ts b/client/src/components/Indicator/Indicator.module.scss.d.ts
index 868b76e6..6d10859d 100644
--- a/client/src/components/Indicator/Indicator.module.scss.d.ts
+++ b/client/src/components/Indicator/Indicator.module.scss.d.ts
@@ -4,8 +4,13 @@ declare namespace IndicatorNamespace {
indicatorBoxAdditional:string;
indicatorRow:string;
indicatorName:string;
+ indicatorValueCol:string;
+ indicatorValueRow:string;
indicatorValue:string;
indicatorSuperscript:string;
+ indicatorArrow:string;
+ unavailable:string;
+ indicatorValueSubText:string;
indicatorDesc:string;
disadvantagedIndicator:string;
}
diff --git a/client/src/components/Indicator/Indicator.test.tsx b/client/src/components/Indicator/Indicator.test.tsx
index 512cf12e..7480f528 100644
--- a/client/src/components/Indicator/Indicator.test.tsx
+++ b/client/src/components/Indicator/Indicator.test.tsx
@@ -1,13 +1,18 @@
import * as React from 'react';
-import {render} from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
-import Indicator, {readablePercentile} from './Indicator';
-import {indicatorInfo} from '../AreaDetail';
+import Indicator, {IndicatorValueIcon, IndicatorValueSubText, DisplayStatUnit} from './Indicator';
+import {indicatorInfo} from '../AreaDetail/AreaDetail';
+
+import * as EXPLORE_COPY from '../../data/copy/explore';
const highSchool:indicatorInfo = {
label: 'some label',
description: 'some description',
value: 97,
+ isDisadvagtaged: true,
+ isPercent: true,
+ threshold: 20,
};
describe('rendering of the Indicator', () => {
@@ -22,9 +27,160 @@ describe('rendering of the Indicator', () => {
});
});
-describe('tests the readablePercentile function', () => {
- expect(readablePercentile(.98)).toEqual(98);
- expect(readablePercentile(.07)).toEqual(7);
- expect(readablePercentile(.123)).toEqual(12);
- expect(readablePercentile(.789)).toEqual(79);
+describe('test rendering of Indicator value icons', () => {
+ it('renders the up arrow when value is above threshold', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP.defaultMessage);
+ });
+ it('renders the down arrow when the value is above the threshold', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage);
+ });
+
+ it('renders the down arrow when the value is zero', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage);
+ });
+
+ it('renders the unavailable icon when the value is null', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage);
+ });
+});
+
+describe('test rendering of Indicator value sub-text', () => {
+ it('renders the "above 90 percentile"', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ console.log(asFragment());
+ });
+ it('renders the "below 90 percentile"', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+ it('renders the "data is not available"', () => {
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+});
+
+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(
+
+
+ ,
+ );
+ 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(
+
+
+ ,
+ );
+ 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,
+ };
+
+ const {asFragment} = render(
+
+
+ ,
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
});
diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx
index 14abcea1..76c9231d 100644
--- a/client/src/components/Indicator/Indicator.tsx
+++ b/client/src/components/Indicator/Indicator.tsx
@@ -1,18 +1,126 @@
import React from 'react';
-import {indicatorInfo} from '../AreaDetail';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import {indicatorInfo} from '../AreaDetail/AreaDetail';
import * as styles from './Indicator.module.scss';
+import * as constants from '../../data/constants';
+import * as EXPLORE_COPY from '../../data/copy/explore';
+
+// @ts-ignore
+import downArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_downward.svg';
+// @ts-ignore
+import upArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_upward.svg';
+// @ts-ignore
+import unAvailable from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg';
interface IIndicator {
indicator: indicatorInfo,
}
-export const readablePercentile = (percentile: number | null) => {
- return percentile !== null ? Math.round(percentile * 100) : 'N/A';
+interface IIndicatorValueIcon {
+ value: number | null,
+ isAboveThresh: boolean,
};
+interface IIndicatorValueSubText {
+ value: number | null,
+ isAboveThresh: boolean,
+ threshold: number,
+ isPercent: boolean | undefined,
+}
+
+interface IDisplayStatUnit {
+ indicator: indicatorInfo,
+ displayStat: number | null,
+}
+
+/**
+ * This component will determine what indicator's icon should be (arrowUp, arrowDown or unavailable) and
+ * return the appropriate JSX.
+ *
+ * @param {number | null} props
+ * @return {JSX.Element}
+ */
+export const IndicatorValueIcon = ({value, isAboveThresh}: IIndicatorValueIcon) => {
+ const intl = useIntl();
+
+ if (value == null) {
+ return ;
+ } else {
+ return isAboveThresh ?
+ :
+ ;
+ }
+};
+
+/**
+ * This component will determine the sub-text of the indicator's value, some examples could be
+ * "above 90th percentile"
+ * "below 20 percent"
+ * "data is not available"
+ *
+ * Todo: refactor into single component, add to i18n and add to tests
+ *
+ * @return {JSX.Element}
+ */
+export const IndicatorValueSubText = ({value, isAboveThresh, threshold, isPercent}:IIndicatorValueSubText) => {
+ return value == null ?
+
+ {EXPLORE_COPY.SIDE_PANEL_VALUES.UNAVAILBLE_MSG}
+
:
+
+
+ {
+ isAboveThresh ?
+ EXPLORE_COPY.SIDE_PANEL_VALUES.ABOVE :
+ EXPLORE_COPY.SIDE_PANEL_VALUES.BELOW
+ }
+ {`${threshold ? threshold : 90}`}
+
+ {!isPercent && `th`}
+
+
+ {
+ isPercent ?
+ EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENT :
+ EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENTILE
+ }
+
+ ;
+};
+
+/**
+ * This component will return the value suffix as either a percent or
+ * ordinal value of the displayed statistic
+ *
+ * @return {JSX.Element}
+ */
+export const DisplayStatUnit = ({indicator, displayStat}:IDisplayStatUnit) => {
+ if (indicator.value !== null) {
+ return indicator.isPercent ?
+ {`%`} :
+
+ {getSuperscriptOrdinal(displayStat)}
+ ;
+ } else {
+ return ;
+ }
+};
+
+
// Todo: Add internationalization to superscript ticket #582
-export const getSuperscriptOrdinal = (percentile: number | string) => {
+export const getSuperscriptOrdinal = (percentile: number | string | null) => {
+ if (percentile === null) return '';
if (typeof percentile === 'number') {
const englishOrdinalRules = new Intl.PluralRules('en', {
type: 'ordinal',
@@ -29,26 +137,66 @@ export const getSuperscriptOrdinal = (percentile: number | string) => {
}
};
+/**
+ * This component will return the list element which will be the indicator row in the side panel
+ *
+ * @param {IIndicator} indicator
+ * @return {JSX.Element}
+ */
const Indicator = ({indicator}:IIndicator) => {
+ // Convert the decimal value to a stat to display
+ const displayStat = indicator.value !== null ? Math.round(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;
+
+ // A boolean to represent if the indicator is above or below the threshold
+ const isAboveThresh = displayStat !== null && displayStat >= threshold ? true : false;
+
+
return (
+ data-cy={'indicatorBox'}
+ data-testid='indicator-box'>
+
+ {/* Indicator name and description*/}
{indicator.label}
{indicator.description}
-
- {readablePercentile(indicator.value)}
- {indicator.isPercent ?
-
{`%`} :
-
- {getSuperscriptOrdinal(readablePercentile(indicator.value))}
-
- }
+
+ {/* Indicator value, icon and subtext */}
+
+
+
+ {/* Indicator value */}
+
+ {displayStat}
+
+
+
+ {/* Indicator icon - up arrow, down arrow, or unavailable */}
+
+
+
+
+
+ {/* Indicator sub-text */}
+
+
+
diff --git a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap
index 84e47ac0..72506582 100644
--- a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap
+++ b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
@@ -13,14 +14,116 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
- 9700
-
-
- th
-
-
+
+
+ 9700
+
+ %
+
+
+
+
+
+
+
+
+ above 20
+
+
+ percent
+
+
`;
+
+exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = `
+
+
+
+`;
+
+exports[`test rendering of Indicator value icons renders the down arrow when the value is zero 1`] = `
+
+
+
+`;
+
+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 up arrow when value is above threshold 1`] = `
+
+
+
+`;
+
+exports[`test rendering of Indicator value sub-text renders the "above 90 percentile" 1`] = `
+
+
+ above 90th
+
+
+ percentile
+
+
+`;
+
+exports[`test rendering of Indicator value sub-text renders the "below 90 percentile" 1`] = `
+
+
+ below 90th
+
+
+ percentile
+
+
+`;
+
+exports[`test rendering of Indicator value sub-text renders the "data is not available" 1`] = `
+
+
+ data is not available
+
+
+`;
+
+exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = ` `;
+
+exports[`test that the unit suffix renders correctly renders correctly when the value is a percent 1`] = `
+
+
+ %
+
+
+`;
+
+exports[`test that the unit suffix renders correctly renders correctly when the value is a percentile 1`] = `
+
+
+
+ th
+
+
+
+`;
diff --git a/client/src/components/J40Header/J40Header.module.scss b/client/src/components/J40Header/J40Header.module.scss
index 092171a7..f9b39763 100644
--- a/client/src/components/J40Header/J40Header.module.scss
+++ b/client/src/components/J40Header/J40Header.module.scss
@@ -66,3 +66,7 @@
}
}
}
+
+.alert {
+ @include u-margin-top(4);
+}
\ No newline at end of file
diff --git a/client/src/components/J40Header/J40Header.module.scss.d.ts b/client/src/components/J40Header/J40Header.module.scss.d.ts
index 126471ae..94c0fa0b 100644
--- a/client/src/components/J40Header/J40Header.module.scss.d.ts
+++ b/client/src/components/J40Header/J40Header.module.scss.d.ts
@@ -9,6 +9,7 @@ declare namespace J40HeaderNamespace {
title2BetaPill: string;
betaPill: string;
navLinks: string;
+ alert: string;
}
}
diff --git a/client/src/components/J40Header/J40Header.tsx b/client/src/components/J40Header/J40Header.tsx
index b2113ba4..5d378fda 100644
--- a/client/src/components/J40Header/J40Header.tsx
+++ b/client/src/components/J40Header/J40Header.tsx
@@ -5,6 +5,7 @@ import {
NavMenuButton,
PrimaryNav,
Grid,
+ Alert,
} from '@trussworks/react-uswds';
import BetaBanner from '../BetaBanner';
import J40MainGridContainer from '../J40MainGridContainer';
@@ -16,6 +17,8 @@ import siteLogo from '../../images/j40-logo-v2.png';
import * as styles from './J40Header.module.scss';
import * as COMMON_COPY from '../../data/copy/common';
+const isAlertValid = new Date < COMMON_COPY.ALERTS.EXPIRATION_DATE;
+
const J40Header = () => {
const intl = useIntl();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
@@ -67,8 +70,6 @@ const J40Header = () => {
- {/* Remove Usabilty Banner testing deployment to main again!*/}
-
{/* Logo and Navigation */}
@@ -106,6 +107,17 @@ const J40Header = () => {
+
+ {/* Alert */}
+ {isAlertValid &&
+
+ {COMMON_COPY.ALERTS.CENSUS_TRACT_DESCRIPTION}
+
+
+ }
);
};
diff --git a/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap b/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap
index 7e8d5369..be6ed794 100644
--- a/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap
+++ b/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap
@@ -268,6 +268,40 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
+
+
+
+
+ Improvements to the map on the Explore the tool page
+
+
+ View improvements made to the display of the information for each census tract and
+
+ send feedback
+
+ .
+
+
+
+
`;
diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx
index 516316ff..3b8bb85c 100644
--- a/client/src/components/J40Map.tsx
+++ b/client/src/components/J40Map.tsx
@@ -27,12 +27,13 @@ import AreaDetail from './AreaDetail';
import MapInfoPanel from './mapInfoPanel';
import MapSearch from './MapSearch';
import TerritoryFocusControl from './territoryFocusControl';
+import {getOSBaseMap} from '../data/getOSBaseMap';
// Styles and constants
-import {getOSBaseMap} from '../data/getOSBaseMap';
import 'maplibre-gl/dist/maplibre-gl.css';
import * as constants from '../data/constants';
import * as styles from './J40Map.module.scss';
+import * as COMMON_COPY from '../data/copy/common';
declare global {
@@ -54,6 +55,49 @@ export interface IDetailViewInterface {
properties: constants.J40Properties,
};
+/**
+ * This function will determine the URL for the map tiles. It will read in a string that will designate either
+ * high or low tiles. It will allow to overide the URL to the pipeline staging tile URL via feature flag.
+ * Lastly, it allows to set the tiles to be local or via the CDN as well.
+ *
+ * @param {string} tilesetName
+ * @returns {string}
+ */
+export const featureURLForTilesetName = (tilesetName: string): string => {
+ const flags = useFlags();
+
+ const pipelineStagingBaseURL = `https://justice40-data.s3.amazonaws.com/data-pipeline-staging`;
+ const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
+
+ if ('stage_hash' in flags) {
+ // Check if the stage_hash is valid
+ const regex = /^[0-9]{4}\/[a-f0-9]{40}$/;
+ if (!regex.test(flags['stage_hash'])) {
+ console.error(COMMON_COPY.CONSOLE_ERROR.STAGE_URL);
+ }
+
+ return `${pipelineStagingBaseURL}/${flags['stage_hash']}/data/score/tiles/${tilesetName}/${XYZ_SUFFIX}`;
+ } else {
+ // The feature tile base URL and path can either point locally or the CDN.
+ // This is selected based on the DATA_SOURCE env variable.
+ const featureTileBaseURL = process.env.DATA_SOURCE === 'local' ?
+ process.env.GATSBY_LOCAL_TILES_BASE_URL :
+ process.env.GATSBY_CDN_TILES_BASE_URL;
+
+ const featureTilePath = process.env.DATA_SOURCE === 'local' ?
+ process.env.GATSBY_DATA_PIPELINE_SCORE_PATH_LOCAL :
+ process.env.GATSBY_DATA_PIPELINE_SCORE_PATH;
+
+ return [
+ featureTileBaseURL,
+ featureTilePath,
+ process.env.GATSBY_MAP_TILES_PATH,
+ tilesetName,
+ XYZ_SUFFIX,
+ ].join('/');
+ }
+};
+
const J40Map = ({location}: IJ40Interface) => {
/**
@@ -304,7 +348,7 @@ const J40Map = ({location}: IJ40Interface) => {
id={constants.LOW_ZOOM_SOURCE_NAME}
type="vector"
promoteId={constants.GEOID_PROPERTY}
- tiles={[constants.FEATURE_TILE_LOW_ZOOM_URL]}
+ tiles={[featureURLForTilesetName('low')]}
maxzoom={constants.GLOBAL_MAX_ZOOM_LOW}
minzoom={constants.GLOBAL_MIN_ZOOM_LOW}
>
@@ -330,7 +374,7 @@ const J40Map = ({location}: IJ40Interface) => {
id={constants.HIGH_ZOOM_SOURCE_NAME}
type="vector"
promoteId={constants.GEOID_PROPERTY}
- tiles={[constants.FEATURE_TILE_HIGH_ZOOM_URL]}
+ tiles={[featureURLForTilesetName('high')]}
maxzoom={constants.GLOBAL_MAX_ZOOM_HIGH}
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
>
diff --git a/client/src/components/Language/Language.tsx b/client/src/components/Language/Language.tsx
index 08ad0a2d..e06df5a8 100644
--- a/client/src/components/Language/Language.tsx
+++ b/client/src/components/Language/Language.tsx
@@ -17,6 +17,12 @@ interface ILanguageProps {
isDesktop: boolean
}
+/**
+ * Language component that will allow the user to change languages
+ *
+ * @param {boolean} isDesktop
+ * @return {JSX.Element | null}
+ */
const Language = ({isDesktop}:ILanguageProps) => {
const flags = useFlags();
diff --git a/client/src/components/LowIncome/LowIncome.module.scss b/client/src/components/LowIncome/LowIncome.module.scss
deleted file mode 100644
index cbc9868b..00000000
--- a/client/src/components/LowIncome/LowIncome.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use '../../styles/design-system.scss' as *;
-
-.lowIncomeContainer {
-
- border: 1px solid #DFE1E2;
- @include u-margin-top(4);
- @include u-padding-left(4);
- @include u-padding-right(3);
- @include u-padding-bottom(4);
-
- .lowIncomeTitle {
- @include typeset('sans', 'xs', 3);
- @include u-text('semibold');
- }
-
- .lowIncomeText {
- @include typeset('sans', 'xs', 3);
- @include u-text('light');
- }
-};
\ No newline at end of file
diff --git a/client/src/components/LowIncome/LowIncome.module.scss.d.ts b/client/src/components/LowIncome/LowIncome.module.scss.d.ts
deleted file mode 100644
index 26a738e7..00000000
--- a/client/src/components/LowIncome/LowIncome.module.scss.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-declare namespace LowIncomeNamespace {
- export interface ILowIncomeScss {
- lowIncomeContainer: string;
- lowIncomeTitle: string;
- lowIncomeText: string;
- }
- }
-
-declare const LowIncomeScssModule: LowIncomeNamespace.ILowIncomeScss & {
- /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
- locals: LowIncomeNamespace.ILowIncomeScss;
- };
-
- export = LowIncomeScssModule;
diff --git a/client/src/components/LowIncome/LowIncome.tsx b/client/src/components/LowIncome/LowIncome.tsx
deleted file mode 100644
index 330460de..00000000
--- a/client/src/components/LowIncome/LowIncome.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
-
-import * as METHODOLOGY_COPY from '../../data/copy/methodology';
-import * as styles from './LowIncome.module.scss';
-
-const LowIncome = () => {
- const intl = useIntl();
-
- return (
-
-
- *
- {' '}
- {intl.formatMessage(METHODOLOGY_COPY.LOW_INCOME.HEADING)}
-
-
-
- {intl.formatMessage(METHODOLOGY_COPY.LOW_INCOME.INFO)}
-
-
-
- );
-};
-
-export default LowIncome;
diff --git a/client/src/components/LowIncome/__snapshots__/LowIncome.test.tsx.snap b/client/src/components/LowIncome/__snapshots__/LowIncome.test.tsx.snap
deleted file mode 100644
index 9bf5949a..00000000
--- a/client/src/components/LowIncome/__snapshots__/LowIncome.test.tsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`rendering of the LowIncome checks if component renders 1`] = `
-
-
-
-
- *
-
- Low Income
-
-
-
- At or above 65th percentile for percent of census tract population of households where household
- income is at or below 200% of the Federal poverty level
-
-
-
-
-`;
diff --git a/client/src/components/LowIncome/index.tsx b/client/src/components/LowIncome/index.tsx
deleted file mode 100644
index a4efda8b..00000000
--- a/client/src/components/LowIncome/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import LowIncome from './LowIncome';
-
-export default LowIncome;
diff --git a/client/src/components/MapWrapper/index.tsx b/client/src/components/MapWrapper/index.tsx
index 90722830..2a3dccc0 100644
--- a/client/src/components/MapWrapper/index.tsx
+++ b/client/src/components/MapWrapper/index.tsx
@@ -17,29 +17,10 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
-
-
-
- {EXPLORE_COPY.DOWNLOAD_DRAFT.PARAGRAPH_1}
-
-
-
-
-
-
- {EXPLORE_COPY.NOTE_ON_TERRITORIES.INTRO}
- {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_1}
- {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_2}
- {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_3}
- {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_4}
-
-
-
-
-
- {EXPLORE_COPY.NOTE_ON_TRIBAL_NATIONS.INTRO}
- {EXPLORE_COPY.NOTE_ON_TRIBAL_NATIONS.PARA_1}
-
+
+
+ {EXPLORE_COPY.DOWNLOAD_DRAFT.PARAGRAPH_1}
+
>
);
diff --git a/client/src/components/MethodologyFormula/__snapshots__/MethodologyFormula.test.tsx.snap b/client/src/components/MethodologyFormula/__snapshots__/MethodologyFormula.test.tsx.snap
index caa7ec2e..054ade7e 100644
--- a/client/src/components/MethodologyFormula/__snapshots__/MethodologyFormula.test.tsx.snap
+++ b/client/src/components/MethodologyFormula/__snapshots__/MethodologyFormula.test.tsx.snap
@@ -12,18 +12,18 @@ exports[`rendering of the MethodologyFormula checks if component renders 1`] = `
-
+
IF
-
+
the census tract is above the threshold for one or more environmental or climate indicators
-
+
AND
-
+
the census tract is above the threshold for the socioeconomic indicators
diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss
index 434e5905..642f9801 100644
--- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss
+++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss
@@ -1,10 +1,11 @@
@use '../../styles/design-system.scss' as *;
.tagContainer {
+ align-self: flex-end;
@include u-margin-bottom(1);
@include u-margin-right(1);
.tag {
- @include u-bg("yellow-20v");
+ @include u-bg("gray-cool-10");
color: black;
border-radius: 5px;
@include u-text('bold');
@@ -12,6 +13,8 @@
}
.container {
+ display: flex;
+ flex-direction: column;
@include u-padding-top(2.5);
.link, .link:visited {
diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.tsx b/client/src/components/PublicEngageButton/PublicEngageButton.tsx
index 74ade4f0..7a93b6c9 100644
--- a/client/src/components/PublicEngageButton/PublicEngageButton.tsx
+++ b/client/src/components/PublicEngageButton/PublicEngageButton.tsx
@@ -1,6 +1,5 @@
import React from 'react';
-import {Link} from 'gatsby';
-import {useIntl} from 'gatsby-plugin-intl';
+import {useIntl, Link} from 'gatsby-plugin-intl';
import {Button, Tag} from '@trussworks/react-uswds';
import * as styles from './PublicEngageButton.module.scss';
diff --git a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap
index b30721d2..bc6a88d8 100644
--- a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap
+++ b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap
@@ -8,11 +8,11 @@ exports[`rendering of the PublicEngageButton checks if component renders 1`] = `
class="usa-tag"
data-testid="tag"
>
- NEW
+ UPDATED
{
const intl = useIntl();
+ const eventName = event.NUMBER === 0 ?
+ `CEJST ${intl.formatMessage(event.NAME)}` :
+ `CEJST ${intl.formatMessage(event.NAME)} #${event.NUMBER}`;
+
+ const isEventExpired = new Date() > event.DATE;
+
return (
+
}>
{/* Heading */}
-
+ />}
{/* Description */}
@@ -65,7 +69,7 @@ const PublicEvent = ({event}:IPublicEvent) => {
{/* Registration Link */}
-
+
{intl.formatMessage(PUBLIC_ENGAGE_COPY.EVENT_FIELDS.REG_LINK)}
diff --git a/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap b/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap
index e29ea5c5..2db5da0c 100644
--- a/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap
+++ b/client/src/components/PublicEvent/__snapshots__/PublicEvent.test.tsx.snap
@@ -16,18 +16,7 @@ exports[`rendering of the PublicEvent checks if component renders 1`] = `
Registration link
diff --git a/client/src/components/SidePanelInfo/SidePanelInfo.module.scss b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss
new file mode 100644
index 00000000..c882063d
--- /dev/null
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss
@@ -0,0 +1,21 @@
+@use '../../styles/design-system.scss' as *;
+
+.sidePanelInfoContainer {
+ display: flex;
+ flex-direction: column;
+ @include u-padding-right(4);
+ @include u-padding-left(4);
+ @include u-padding-bottom(4);
+
+ .sidePanelInfoHeading {
+ @include u-padding-top(2);
+ font-size: x-large;
+ line-height: 1.9rem;
+ }
+
+ .sidePanelInfoIcon {
+ @include u-height(5);
+ @include u-margin-top(4);
+ @include u-margin-bottom(-2)
+ }
+}
diff --git a/client/src/components/mapIntroduction.module.scss.d.ts b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
similarity index 67%
rename from client/src/components/mapIntroduction.module.scss.d.ts
rename to client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
index afa9b474..4eb36998 100644
--- a/client/src/components/mapIntroduction.module.scss.d.ts
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
@@ -1,12 +1,8 @@
declare namespace MapIntroductionModuleScssNamespace {
export interface IMapIntroductionModuleScss {
- mapIntroContainer: string;
- mapIntroHeader: string;
- mapIntroText: string;
- mapIntroLightbulb: string;
- didYouKnowBox: string
- didYouKnow: string
- didYouKnowText: string
+ sidePanelInfoContainer: string;
+ sidePanelInfoHeading: string;
+ sidePanelInfoIcon: string;
}
}
diff --git a/client/src/components/LowIncome/LowIncome.test.tsx b/client/src/components/SidePanelInfo/SidePanelInfo.test.tsx
similarity index 62%
rename from client/src/components/LowIncome/LowIncome.test.tsx
rename to client/src/components/SidePanelInfo/SidePanelInfo.test.tsx
index 47be349b..481e891a 100644
--- a/client/src/components/LowIncome/LowIncome.test.tsx
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.test.tsx
@@ -1,16 +1,16 @@
import * as React from 'react';
import {render} from '@testing-library/react';
+import SidePanelInfo from './SidePanelInfo';
import {LocalizedComponent} from '../../test/testHelpers';
-import LowIncome from './LowIncome';
-describe('rendering of the LowIncome', () => {
+describe('rendering of the component', () => {
const {asFragment} = render(
-
+
,
);
- it('checks if component renders', () => {
+ it('expects the render to match snapshot', () => {
expect(asFragment()).toMatchSnapshot();
});
});
diff --git a/client/src/components/SidePanelInfo/SidePanelInfo.tsx b/client/src/components/SidePanelInfo/SidePanelInfo.tsx
new file mode 100644
index 00000000..37c3a2bd
--- /dev/null
+++ b/client/src/components/SidePanelInfo/SidePanelInfo.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+// @ts-ignore
+import puzzle from '../../images/sidePanelIcons/puzzle.svg';
+// @ts-ignore
+import bellCurve from '../../images/sidePanelIcons/bellCurve.svg';
+// @ts-ignore
+import pieChart from '../../images/sidePanelIcons/pieChart.svg';
+// @ts-ignore
+import upDown from '../../images/sidePanelIcons/upDown.svg';
+
+import * as styles from './SidePanelInfo.module.scss';
+import * as EXPLORE_COPY from '../../data/copy/explore';
+
+const MapIntroduction = () => {
+ const intl = useIntl();
+
+ return (
+
+
+
+ {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
+
+
+ {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1)}
+
+
+
+ {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA2)}
+
+
+
+ {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA3)}
+
+
+
+ {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA4)}
+
+
+
+ {EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE_PARA5}
+
+
+ );
+};
+
+export default MapIntroduction;
diff --git a/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap b/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
new file mode 100644
index 00000000..0f3659e9
--- /dev/null
+++ b/client/src/components/SidePanelInfo/__snapshots__/SidePanelInfo.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the component expects the render to match snapshot 1`] = `
+
+
+
+
+
+ This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.
+
+
+
+
+
+ The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the tool.
+
+
+
+
+
+ The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criteria.
+
+
+
+
+
+ Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education.
+
+
+
+
+
+ Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators.
+
+
+
+
+`;
diff --git a/client/src/components/SidePanelInfo/index.tsx b/client/src/components/SidePanelInfo/index.tsx
new file mode 100644
index 00000000..02e87f11
--- /dev/null
+++ b/client/src/components/SidePanelInfo/index.tsx
@@ -0,0 +1,3 @@
+import SidePanelInfo from './SidePanelInfo';
+
+export default SidePanelInfo;
diff --git a/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap b/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
index f7841614..1089ddac 100644
--- a/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
+++ b/client/src/components/__snapshots__/mapInfoPanel.test.tsx.snap
@@ -8,29 +8,74 @@ exports[`simulate app starting up, no click on map should match the snapshot of
class="someClassName"
>
-
- Zoom and select a census tract to view data
+
-
-
-
-
- Did you know?
-
-
-
- A census tract is generally between 1,200 to 8,000 people, with an average size of 4,000 people.
- Census tracts are small, relatively permanent subdivisions of a county defined by the
- U.S. Census Bureau and usually cover a contiguous area. The census tract level currently represents the
- smallest geographical unit for which publicly-available and nationally-consistent datasets can
- be consistently displayed on the tool.
+
+
+ This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.
-
-
-
+
+
+
+
+ The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the tool.
+
+
+
+
+
+ The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criteria.
+
+
+
+
+
+ Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education.
+
+
+
+
+
+ Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators.
+
+
diff --git a/client/src/components/mapInfoPanel.tsx b/client/src/components/mapInfoPanel.tsx
index 11578375..211f9714 100644
--- a/client/src/components/mapInfoPanel.tsx
+++ b/client/src/components/mapInfoPanel.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import MapIntroduction from './mapIntroduction';
import AreaDetail from './AreaDetail';
+import SidePanelInfo from './SidePanelInfo';
interface IMapInfoPanelProps {
className: string,
@@ -13,7 +13,7 @@ const MapInfoPanel = ({className, featureProperties, selectedFeatureId}:IMapInfo
{(featureProperties && selectedFeatureId ) ?
:
-
+
}
);
diff --git a/client/src/components/mapIntroduction.module.scss b/client/src/components/mapIntroduction.module.scss
deleted file mode 100644
index 3421d211..00000000
--- a/client/src/components/mapIntroduction.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.mapIntroContainer {
- padding: 20px 20px;
-}
-
-.mapIntroHeader {
- font-size: xx-large;
- line-height: 1.9rem;
- padding-top: 0.8rem;
- padding-left: 0.3rem;
-}
-.mapIntroText {
- display: flex;
- margin-top: 2.4rem;
-}
-
-.mapIntroLightbulb {
- flex: 1 0 10%;
- align-self: flex-start;
-}
-
-.didYouKnowBox {
- padding-left: 0.4rem;
- padding-top: 0.2rem;
- font-size: large;
-}
-
-.didYouKnow {
- font-weight: 600;
-}
-.didYouKnowText {
- width: 95%;
- padding-top: 0.3rem;
- line-height: 1.5rem;
-}
diff --git a/client/src/components/mapIntroduction.test.tsx b/client/src/components/mapIntroduction.test.tsx
deleted file mode 100644
index 1ab43696..00000000
--- a/client/src/components/mapIntroduction.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import {render, screen} from '@testing-library/react';
-import MapIntroduction from './mapIntroduction';
-import {LocalizedComponent} from '../../src/test/testHelpers';
-
-describe('rendering of the component', () => {
- render(
-
-
- ,
- );
-
- it('renders the title', () => {
- expect(screen.getByRole('banner')).toHaveTextContent('Zoom and select a census tract to view data');
- });
-});
diff --git a/client/src/components/mapIntroduction.tsx b/client/src/components/mapIntroduction.tsx
deleted file mode 100644
index 019e8262..00000000
--- a/client/src/components/mapIntroduction.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import {useIntl} from 'gatsby-plugin-intl';
-
-// @ts-ignore
-import lightbulbIcon from '/node_modules/uswds/dist/img/usa-icons/lightbulb_outline.svg';
-import * as styles from './mapIntroduction.module.scss';
-import * as EXPLORE_COPY from '../data/copy/explore';
-
-const MapIntroduction = () => {
- const intl = useIntl();
-
- return (
-
-
- {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
-
-
-
-
-
- {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.DID_YOU_KNOW)}
-
-
- {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.CBG_DEFINITION)}
-
-
-
-
- );
-};
-
-export default MapIntroduction;
diff --git a/client/src/components/territoryFocusControl.module.scss b/client/src/components/territoryFocusControl.module.scss
index 7c5afe5a..fc368920 100644
--- a/client/src/components/territoryFocusControl.module.scss
+++ b/client/src/components/territoryFocusControl.module.scss
@@ -1,18 +1,20 @@
@use '../styles/design-system.scss' as *;
+@mixin baseTerritoryFocus {
+ position: absolute;
+ left: .75em;
+ z-index: 1;
+}
+
.territoryFocusContainer {
// styles for mobile-lg (480px) and greater widths
@include at-media('mobile-lg') {
- position: absolute;
- left: .75em;
+ @include baseTerritoryFocus;
top: units(card-lg);
- z-index: 10;
- }
+ };
- position: absolute;
- left: .75em;
+ @include baseTerritoryFocus;
top: units(9);
- z-index: 10;
}
diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx
index 8e69f318..e1a9d632 100644
--- a/client/src/data/constants.tsx
+++ b/client/src/data/constants.tsx
@@ -4,44 +4,37 @@ import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect';
export const isMobile = isMobileReactDeviceDetect;
-const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
-export const featureURLForTilesetName = (tilesetName: string): string => {
- // The feature tile base URL and path can either point locally or the CDN.
- // This is selected based on the DATA_SOURCE env variable.
- const featureTileBaseURL = process.env.DATA_SOURCE === 'local' ?
- process.env.GATSBY_LOCAL_TILES_BASE_URL :
- process.env.GATSBY_CDN_TILES_BASE_URL;
-
- const featureTilePath = process.env.DATA_SOURCE === 'local' ?
- process.env.GATSBY_DATA_PIPELINE_SCORE_PATH_LOCAL :
- process.env.GATSBY_DATA_PIPELINE_SCORE_PATH;
-
- return [
- featureTileBaseURL,
- featureTilePath,
- process.env.GATSBY_MAP_TILES_PATH,
- tilesetName,
- XYZ_SUFFIX,
- ].join('/');
-};
-export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('high');
-export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('low');
-
-// Staging links for testing:
-// export const FEATURE_TILE_HIGH_ZOOM_URL = `https://justice40-data.s3.amazonaws.com/data-pipeline-staging/1297/deee14dd93b783c8d366434dc8438a281b5c89df/data/score/tiles/high/${XYZ_SUFFIX}`;
-// export const FEATURE_TILE_LOW_ZOOM_URL = `https://justice40-data.s3.amazonaws.com/data-pipeline-staging/1297/deee14dd93b783c8d366434dc8438a281b5c89df/data/score/tiles/low/${XYZ_SUFFIX}`;
-
-
// Performance markers
export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';
// ******* PROPERTIES FROM TILE SERVER **************
export type J40Properties = { [key: string]: any };
-// Properties
-export const SCORE_PROPERTY_HIGH = 'SM_PFS';
-export const SCORE_PROPERTY_LOW = 'M_SCORE';
+
+// ****** SIDE PANEL BACKEND SIGNALS ***********
+
+// Set the threshold percentile used by most indicators in the side panel
+export const DEFAULT_THRESHOLD_PERCENTILE = 90;
+
+// General Census Track Info
export const GEOID_PROPERTY = 'GEOID10';
+export const COUNTY_NAME = 'CF';
+export const STATE_NAME = 'SF';
+export const TOTAL_POPULATION = 'TPF';
+
+/**
+ * The SCORE_BOUNDAY_THRESHOLD will determine if the tract is disadvantaged
+ * or not. Currently all values are railed to 0 or 1. If the
+ * SCORE_PROPERTY_HIGH is greater than SCORE_BOUNDARY_THRESHOLD,
+ * the tract will be considered disadvantaged.
+ */
+export const SCORE_BOUNDARY_THRESHOLD = 0.6;
+
+// Determines the X of Y threshold exceeded
+export const TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS = 'TC';
+export const TOTAL_NUMBER_OF_INDICATORS = 'THRHLD';
+export const COUNT_OF_CATEGORIES_DISADV = 'CC';
+
export const SIDE_PANEL_STATE = 'UI_EXP';
export const SIDE_PANEL_STATE_VALUES = {
NATION: 'Nation',
@@ -49,102 +42,142 @@ export const SIDE_PANEL_STATE_VALUES = {
ISLAND_AREAS: 'Island Areas',
};
-export const THRHLD = 'TERRITORY_THRESHOLD';
-
-// Indicator values:
-export const ASTHMA_PERCENTILE = 'AF_PFS';
-export const COUNTY_NAME = 'CF';
-export const DIABETES_PERCENTILE = 'DF_PFS';
-export const DIESEL_MATTER_PERCENTILE = 'DSF_PFS';
-export const ENERGY_PERCENTILE = 'EBF_PFS';
-export const HEART_PERCENTILE = 'HDF_PFS';
-export const HIGH_SCHOOL_PROPERTY_PERCENTILE = `HSEF`;
-export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'HBF_PFS';
-export const LEAD_PAINT_PERCENTILE = 'LPF_PFS';
-export const LIFE_PERCENTILE = 'LLEF_PFS';
-export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'LIF_PFS';
-export const LOW_MEDIAN_INCOME_PERCENTILE = 'LMI_PFS';
-export const PM25_PERCENTILE = 'PM25F_PFS';
-export const POVERTY_PROPERTY_PERCENTILE = 'P200_PFS';
-export const STATE_NAME = 'SF';
-export const TOTAL_POPULATION = 'TPF';
-export const TRAFFIC_PERCENTILE = 'TF_PFS';
-export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'UF_PFS';
-export const WASTEWATER_PERCENTILE = 'WF_PFS';
-export const EXP_AGRICULTURE_LOSS_PERCENTILE = 'EALR_PFS';
-export const EXP_BUILDING_LOSS_PERCENTILE = 'EBLR_PFS';
-export const EXP_POPULATION_LOSS_PERCENTILE = 'EPLR_PFS';
-export const MEDIAN_HOME_VALUE_PERCENTILE = 'MHVF_PFS';
-export const POVERTY_BELOW_100_PERCENTILE = 'P100_PFS';
-export const POVERTY_BELOW_200_PERCENTILE = 'P200_PFS';
-export const PROXIMITY_NPL_SITES_PERCENTILE = 'NPL_PFS';
-export const PROXIMITY_RMP_SITES_PERCENTILE = 'RMP_PFS';
-export const PROXIMITY_TSDF_SITES_PERCENTILE = 'TSDF_PFS';
-export const HIGHER_ED_PERCENTILE = 'CA';
-
-export const ISLAND_AREAS_UNEMPLOYMENT_LOW_HS_EDU_PERCENTILE_FIELD= 'IAULHSE_PFS';
-export const ISLAND_AREAS_POVERTY_LOW_HS_EDU_PERCENTILE_FIELD= 'IAPLHSE_PFS';
-export const ISLAND_AREAS_LOW_MEDIAN_INCOME_LOW_HS_EDU_PERCENTILE_FIELD= 'IALMILHSE_PFS';
-export const ISLAND_AREAS_LOW_HS_EDU_PERCENTILE_FIELD= 'IALHE_PFS';
-export const ISLAND_AREAS_HS_EDU_PERCENTAGE_FIELD= 'IAHSEF';
-
-// Category booleans (disadvantaged or not):
+// Climate category
export const IS_CLIMATE_FACTOR_DISADVANTAGED_M = 'M_CLT';
-export const IS_ENERGY_FACTOR_DISADVANTAGED_M = 'M_ENY';
-export const IS_TRANSPORT_FACTOR_DISADVANTAGED_M = 'M_TRN';
-export const IS_HOUSING_FACTOR_DISADVANTAGED_M = 'M_HSG';
-export const IS_POLLUTION_FACTOR_DISADVANTAGED_M = 'M_PLN';
-export const IS_WATER_FACTOR_DISADVANTAGED_M = 'M_WTR';
-export const IS_HEALTH_FACTOR_DISADVANTAGED_M = 'M_HLTH';
-export const IS_WORKFORCE_FACTOR_DISADVANTAGED_M = 'M_WKFC';
+export const IS_CLIMATE_EXCEED_ONE_OR_MORE_INDICATORS_M = 'M_CLT_EOMI';
-// Total indicators values:
-export const TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS = 'TC';
-export const TOTAL_NUMBER_OF_INDICATORS = 'THRHLD';
+export const EXP_AGRICULTURE_LOSS_PERCENTILE = 'EALR_PFS';
+export const IS_EXCEEDS_THRESH_FOR_EXP_AGR_LOSS = 'EAL_ET';
-// Indicator booleans (disadvangted or not): (GTE = greater than or equal)
-export const IS_GTE_90_EXP_POP_LOSS_AND_IS_LOW_INCOME = 'EPLRLI';
-export const IS_GTE_90_EXP_AGR_LOSS_AND_IS_LOW_INCOME = 'EALRLI';
-export const IS_GTE_90_EXP_BLD_LOSS_AND_IS_LOW_INCOME = 'EBLRLI';
-export const IS_GTE_90_PM25_AND_IS_LOW_INCOME = 'PM25LI';
-export const IS_GTE_90_ENERGY_BURDEN_AND_IS_LOW_INCOME = 'EBLI';
-export const IS_GTE_90_DIESEL_PM_AND_IS_LOW_INCOME = 'DPMLI';
-export const IS_GTE_90_TRAFFIC_PROX_AND_IS_LOW_INCOME = 'TPLI';
-export const IS_GTE_90_LEAD_PAINT_AND_MEDIAN_HOME_VAL_AND_IS_LOW_INCOME = 'LPMHVLI';
-export const IS_GTE_90_HOUSE_BURDEN_AND_IS_LOW_INCOME = 'HBLI';
-export const IS_GTE_90_RMP_AND_IS_LOW_INCOME = 'RMPLI';
-export const IS_GTE_90_SUPERFUND_AND_IS_LOW_INCOME = 'SFLI';
-export const IS_GTE_90_HAZARD_WASTE_AND_IS_LOW_INCOME = 'HWLI';
-export const IS_GTE_90_WASTEWATER_AND_IS_LOW_INCOME = 'WDLI';
-export const IS_GTE_90_DIABETES_AND_IS_LOW_INCOME = 'DLI';
-export const IS_GTE_90_ASTHMA_AND_IS_LOW_INCOME = 'ALI';
-export const IS_GTE_90_HEART_DISEASE_AND_IS_LOW_INCOME = 'HDLI';
-export const IS_GTE_90_LOW_LIFE_EXP_AND_IS_LOW_INCOME = 'LLELI';
-export const IS_GTE_90_LINGUISITIC_ISO_AND_IS_LOW_INCOME = 'LILHSE';
-export const IS_GTE_90_BELOW_100_POVERTY_AND_LOW_HIGH_SCHOOL_EDU = 'PLHSE';
-export const IS_GTE_90_LOW_MEDIAN_INCOME_AND_LOW_HIGH_SCHOOL_EDU = 'LMILHSE';
-export const IS_GTE_90_UNEMPLOYMENT_AND_LOW_HIGH_SCHOOL_EDU = 'ULHSE';
+export const EXP_BUILDING_LOSS_PERCENTILE = 'EBLR_PFS';
+export const IS_EXCEEDS_THRESH_FOR_EXP_BLD_LOSS = 'EBL_ET';
+
+export const EXP_POPULATION_LOSS_PERCENTILE = 'EPLR_PFS';
+export const IS_EXCEEDS_THRESH_FOR_EXP_POP_LOSS = 'EPL_ET';
+
+export const IS_EXCEED_BOTH_SOCIO_INDICATORS_M = 'M_EBSI';
+
+export const POVERTY_BELOW_200_PERCENTILE = 'P200_PFS';
export const IS_FEDERAL_POVERTY_LEVEL_200 = 'FPL200S';
-export const IS_HIGHER_ED_PERCENTILE = 'CA_LT20';
-export const TOTAL_THRESHOLD_CRITERIA = 'TC';
-export const IS_GTE_90_ISLAND_AREA_UNEMPLOYMENT_AND_IS_LOW_HS_EDU_2009 = 'IAULHSE';
-export const IS_GTE_90_ISLAND_AREA_BELOW_100_POVERTY_AND_IS_LOW_HS_EDU_2009 = 'IAPLHSE';
-export const IS_GTE_90_ISLAND_AREA_LOW_MEDIAN_INCOME_AND_IS_LOW_HS_EDU_2009 = 'IALMILHSE';
-export const ISLAND_AREA_LOW_HS_EDU = 'IALHE';
-export const IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED = 'LHE';
-// The name of the layer within the tiles that contains the score
-export const SCORE_SOURCE_LAYER = 'blocks';
+export const HIGHER_ED_PERCENTILE = 'CA';
+export const IS_HIGHER_ED_PERCENTILE = 'CA_LT20';
+
+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 ENERGY_PERCENTILE = 'EBF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_ENERGY_BURDEN = 'EB_ET';
+
+export const PM25_PERCENTILE = 'PM25F_PFS';
+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 DIESEL_MATTER_PERCENTILE = 'DSF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_DIESEL_PM = 'DS_ET';
+
+export const TRAFFIC_PERCENTILE = 'TF_PFS';
+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 HOUSING_BURDEN_PROPERTY_PERCENTILE = 'HBF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN = 'HB_ET';
+
+export const LEAD_PAINT_PERCENTILE = 'LPF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL = 'LPP_ET';
+
+// export const MEDIAN_HOME_VALUE_PERCENTILE = 'MHVF_PFS'; // No longer showing in UI
+
+
+// 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 PROXIMITY_TSDF_SITES_PERCENTILE = 'TSDF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE = 'TSDF_ET';
+
+export const PROXIMITY_NPL_SITES_PERCENTILE = 'NPL_PFS';
+export const IS_EXCEEDS_THRESH_FOR_SUPERFUND = 'NPL_ET';
+
+export const PROXIMITY_RMP_SITES_PERCENTILE = 'RMP_PFS';
+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 WASTEWATER_PERCENTILE = 'WF_PFS';
+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 ASTHMA_PERCENTILE = 'AF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_ASTHMA = 'A_ET';
+
+export const DIABETES_PERCENTILE = 'DF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_DIABETES = 'DB_ET';
+
+export const HEART_PERCENTILE = 'HDF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_HEART_DISEASE = 'HD_ET';
+
+export const LIFE_PERCENTILE = 'LLEF_PFS';
+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 LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'LIF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_LINGUISITIC_ISO = 'LISO_ET';
+
+export const LOW_MEDIAN_INCOME_PERCENTILE = 'LMI_PFS';
+export const IS_EXCEEDS_THRESH_FOR_LOW_MEDIAN_INCOME = 'LMI_ET';
+export const ISLAND_AREAS_LOW_MEDIAN_INCOME_LOW_HS_EDU_PERCENTILE_FIELD= 'IALMILHSE_PFS';
+export const IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_LOW_MEDIAN_INCOME = 'IA_LMI_ET';
+
+export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'UF_PFS';
+export const IS_EXCEEDS_THRESH_FOR_UNEMPLOYMENT = 'UN_ET';
+export const ISLAND_AREAS_UNEMPLOYMENT_LOW_HS_EDU_PERCENTILE_FIELD= 'IAULHSE_PFS';
+export const IS_EXCEEDS_THRESH_FOR_ISLAND_AREA_UNEMPLOYMENT = 'IA_UN_ET';
+
+export const POVERTY_BELOW_100_PERCENTILE = 'P100_PFS';
+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 HIGH_SCHOOL_PROPERTY_PERCENTILE = `HSEF`;
+export const IS_LOW_HS_EDUCATION_LOW_HIGHER_ED_PRIORITIZED = 'LHE';
+export const ISLAND_AREAS_HS_EDU_PERCENTAGE_FIELD= 'IAHSEF';
+export const ISLAND_AREA_LOW_HS_EDU = 'IALHE';
// ********** MAP CONSTANTS ***************
-
// Source name constants
export const BASE_MAP_SOURCE_NAME = 'base-map-source-name';
export const HIGH_ZOOM_SOURCE_NAME = 'high-zoom-source-name';
export const LOW_ZOOM_SOURCE_NAME = 'low-zoom-source-name';
// Layer ID constants
+export const SCORE_SOURCE_LAYER = 'blocks'; // The name of the layer within the tiles that contains the score
export const BASE_MAP_LAYER_ID = 'base-map-layer-id';
export const HIGH_ZOOM_LAYER_ID = 'high-zoom-layer-id';
export const PRIORITIZED_HIGH_ZOOM_LAYER_ID = 'prioritized-high-zoom-layer-id';
@@ -152,6 +185,10 @@ export const LOW_ZOOM_LAYER_ID = 'low-zoom-layer-id';
export const FEATURE_BORDER_LAYER_ID = 'feature-border-layer-id';
export const SELECTED_FEATURE_BORDER_LAYER_ID = 'selected-feature-border-layer-id';
+// Used in layer filters:
+export const SCORE_PROPERTY_LOW = 'M_SCORE';
+export const SCORE_PROPERTY_HIGH = 'SM_PFS';
+
// Zoom
export const GLOBAL_MIN_ZOOM = 3;
export const GLOBAL_MAX_ZOOM = 22;
@@ -177,13 +214,6 @@ export const PRIORITIZED_FEATURE_FILL_COLOR = '#768FB3';
export const FEATURE_BORDER_WIDTH = 0.8;
export const SELECTED_FEATURE_BORDER_WIDTH = 5.0;
-/**
- * This threshold will determine if the feature is prioritized
- * or not. Currently all values are railed to 0 or 1 so this value
- * doesn't really matter.
- */
-export const SCORE_BOUNDARY_THRESHOLD = 0.6;
-
// Bounds - these bounds can be obtained by using the getCurrentMapBoundingBox() function in the map
export const GLOBAL_MAX_BOUNDS: LngLatBoundsLike = [
[-180.118306, 5.499550],
diff --git a/client/src/data/copy/README.md b/client/src/data/copy/README.md
new file mode 100644
index 00000000..96c01a9c
--- /dev/null
+++ b/client/src/data/copy/README.md
@@ -0,0 +1,5 @@
+# How to i18n copy for J40
+
+1. Note that description fields can not have line feed or carriage returns or they will render a /n in the en.json file.
+2. Use bold, italic function in common.tsx
+3. Use and for these data types.
\ No newline at end of file
diff --git a/client/src/data/copy/about.tsx b/client/src/data/copy/about.tsx
index af33202f..2f717f5c 100644
--- a/client/src/data/copy/about.tsx
+++ b/client/src/data/copy/about.tsx
@@ -1,8 +1,8 @@
+/* eslint-disable max-len */
import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedMessage} from 'gatsby-plugin-intl';
-
-import LinkTypeWrapper from '../../components/LinkTypeWrapper';
+import {italicFn, linkFn} from './common';
export const EXEC_ORDER_LINK = 'https://www.federalregister.gov/documents/2021/02/01/2021-02177/tackling-the-climate-crisis-at-home-and-abroad#:~:text=Sec.%20223.%20Justice40,40-percent%20goal.';
@@ -10,28 +10,28 @@ export const PAGE = defineMessages({
TILE: {
id: 'about.page.title.text',
defaultMessage: 'About',
- description: 'about page title text',
+ description: 'Navigate to the About page. This is the about page title text',
},
HEADING: {
- id: 'index.heading.about.us',
+ id: 'about.page.heading.text',
defaultMessage: 'About',
- description: 'main heading for about page',
+ description: 'Navigate to the About page. This is the first heading',
},
HEADING_1: {
- id: 'index.heading.screentool',
+ id: 'about.page.heading.1.text',
defaultMessage: 'Screening tool',
- description: 'heading for about screening tool',
+ description: 'Navigate to the About page. This is the second heading',
},
HEADING1_DESCRIPTION2: {
id: 'about.page.sub.header.1.text.2',
defaultMessage: 'The current version of the tool is in a public beta form and'+
' will be updated based on feedback and research.',
- description: 'about page sub header text',
+ description: 'Navigate to the About page. This is first heading description',
},
HEADING_2: {
- id: 'index.heading.justice40',
+ id: 'about.page.sub.header.2.text',
defaultMessage: 'The Justice40 Initiative',
- description: 'heading for about justice 40',
+ description: 'Navigate to the About page. This is the third heading',
},
HEADING2_DESCRIPTION1: {
id: 'about.page.sub.header.2.text.1',
@@ -43,7 +43,7 @@ export const PAGE = defineMessages({
housing, training and workforce development, the remediation and reduction of legacy pollution,
and the development of critical clean water infrastructure.
`,
- description: 'about page sub header text',
+ description: 'Navigate to the About page. This is the third heading description',
},
});
@@ -51,9 +51,9 @@ export const HEADING_1 = {
DESCRIPTION_1: