mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-28 07:21:18 -07:00
Website copy layout styling updates for Tuesday launch (#685)
* Add basic accordion in AreaDetail * Refactor AreaDetail to use a Grid layout - adds useWindowSize to detect window resizes for mobile view - Map and AreaDetail to use Grid - removes some component styling from J40 - updates snapshot - MapWrapper to use Grid * Add custom Accordion styling - make J40 map a 9:3 Grid layout split - override native Accordion heading styles - make the Accordion multi-selectable - add some dummy data for indicators * Update AreaDetail to match design - remove styles in AreaDetail - increase height of MapInfoPanel - add Accordian items (indicators) - updates snapshot * Add a Beta Tag to the logo * Change the line height on indicators descriptions * Update package-lock after the rebase * Remove threshold from MapLegend - move feature selected border color to utils - remove all tooltip logic - remove all styles associated with tooltips - add legend label and descript to constants - refactor tests to be snapshots * Add borders between additional indicators * Modify copy and update styles - add the ordinal superscript back - update the copy - update the snapshots * Add additional indicators keys * Connect indicator keys to the UI - update the areaDetail snapshot * Render additional indicators accordion open onLoad - update snapshot * Update copy on About page * Update copy on indicator descriptions - update snapshots * Update the "How you can help section" - update the snapshot * Add a comma to "ZIP file will contain..." * Add the Datasets section to the methodology page - update snapshot * Update Methodology process list to trussworks - remove custom process list - remove custom CSS from global file - change copy * Modify layout of Methodology to using Grid - modify Dataset section to use Grid - remove outdated component CSS - update the snapshot * Update copy based on product feedback - update snapshots * Remove Accordions - updates snapshots - white CBG groups will show "Not community of focus"
This commit is contained in:
Vim
GitHub
parent
487f6a8e04
commit
522872037a
33 changed files with 2029 additions and 1208 deletions
160
client/package-lock.json
generated
160
client/package-lock.json
generated
|
|
@ -3465,6 +3465,11 @@
|
||||||
"pretty-format": "^26.0.0"
|
"pretty-format": "^26.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@types/js-cookie": {
|
||||||
|
"version": "2.2.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
|
||||||
|
"integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
|
||||||
|
},
|
||||||
"@types/json-patch": {
|
"@types/json-patch": {
|
||||||
"version": "0.0.30",
|
"version": "0.0.30",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json-patch/-/json-patch-0.0.30.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json-patch/-/json-patch-0.0.30.tgz",
|
||||||
|
|
@ -4015,6 +4020,11 @@
|
||||||
"@xtuc/long": "4.2.2"
|
"@xtuc/long": "4.2.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@xobotyi/scrollbar-width": {
|
||||||
|
"version": "1.9.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
|
||||||
|
"integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
|
||||||
|
},
|
||||||
"@xtuc/ieee754": {
|
"@xtuc/ieee754": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
|
||||||
|
|
@ -6464,6 +6474,14 @@
|
||||||
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
|
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"copy-to-clipboard": {
|
||||||
|
"version": "3.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
|
||||||
|
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
|
||||||
|
"requires": {
|
||||||
|
"toggle-selection": "^1.0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"copyfiles": {
|
"copyfiles": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/copyfiles/-/copyfiles-2.4.1.tgz",
|
||||||
|
|
@ -6690,6 +6708,15 @@
|
||||||
"timsort": "^0.3.0"
|
"timsort": "^0.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"css-in-js-utils": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
|
||||||
|
"requires": {
|
||||||
|
"hyphenate-style-name": "^1.0.2",
|
||||||
|
"isobject": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"css-loader": {
|
"css-loader": {
|
||||||
"version": "5.2.6",
|
"version": "5.2.6",
|
||||||
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.6.tgz",
|
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.6.tgz",
|
||||||
|
|
@ -6806,7 +6833,6 @@
|
||||||
"version": "1.1.3",
|
"version": "1.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
|
||||||
"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
|
"integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"mdn-data": "2.0.14",
|
"mdn-data": "2.0.14",
|
||||||
"source-map": "^0.6.1"
|
"source-map": "^0.6.1"
|
||||||
|
|
@ -8184,7 +8210,6 @@
|
||||||
"version": "2.0.6",
|
"version": "2.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
|
||||||
"integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
|
"integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"stackframe": "^1.1.1"
|
"stackframe": "^1.1.1"
|
||||||
}
|
}
|
||||||
|
|
@ -9503,8 +9528,7 @@
|
||||||
"fast-deep-equal": {
|
"fast-deep-equal": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"fast-glob": {
|
"fast-glob": {
|
||||||
"version": "3.2.6",
|
"version": "3.2.6",
|
||||||
|
|
@ -9536,12 +9560,22 @@
|
||||||
"integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
|
"integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"fast-shallow-equal": {
|
||||||
|
"version": "1.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
|
||||||
|
"integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
|
||||||
|
},
|
||||||
"fastest-levenshtein": {
|
"fastest-levenshtein": {
|
||||||
"version": "1.0.12",
|
"version": "1.0.12",
|
||||||
"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
|
"resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
|
||||||
"integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
|
"integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"fastest-stable-stringify": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
|
||||||
|
},
|
||||||
"fastq": {
|
"fastq": {
|
||||||
"version": "1.11.0",
|
"version": "1.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
|
||||||
|
|
@ -12274,6 +12308,11 @@
|
||||||
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
|
"integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"hyphenate-style-name": {
|
||||||
|
"version": "1.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
|
||||||
|
"integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
|
||||||
|
},
|
||||||
"iconv-lite": {
|
"iconv-lite": {
|
||||||
"version": "0.4.24",
|
"version": "0.4.24",
|
||||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
|
||||||
|
|
@ -12477,6 +12516,14 @@
|
||||||
"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
|
"integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"inline-style-prefixer": {
|
||||||
|
"version": "6.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz",
|
||||||
|
"integrity": "sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==",
|
||||||
|
"requires": {
|
||||||
|
"css-in-js-utils": "^2.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"inquirer": {
|
"inquirer": {
|
||||||
"version": "7.3.3",
|
"version": "7.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
|
||||||
|
|
@ -13157,8 +13204,7 @@
|
||||||
"isobject": {
|
"isobject": {
|
||||||
"version": "3.0.1",
|
"version": "3.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
|
||||||
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
|
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"isomorphic-ws": {
|
"isomorphic-ws": {
|
||||||
"version": "4.0.1",
|
"version": "4.0.1",
|
||||||
|
|
@ -14595,6 +14641,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"js-cookie": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
|
||||||
|
},
|
||||||
"js-levenshtein": {
|
"js-levenshtein": {
|
||||||
"version": "1.1.6",
|
"version": "1.1.6",
|
||||||
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
|
||||||
|
|
@ -15580,8 +15631,7 @@
|
||||||
"mdn-data": {
|
"mdn-data": {
|
||||||
"version": "2.0.14",
|
"version": "2.0.14",
|
||||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
|
||||||
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
|
"integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"meant": {
|
"meant": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
|
|
@ -16139,6 +16189,21 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
|
"nano-css": {
|
||||||
|
"version": "5.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.4.tgz",
|
||||||
|
"integrity": "sha512-wfcviJB6NOxDIDfr7RFn/GlaN7I/Bhe4d39ZRCJ3xvZX60LVe2qZ+rDqM49nm4YT81gAjzS+ZklhKP/Gnfnubg==",
|
||||||
|
"requires": {
|
||||||
|
"css-tree": "^1.1.2",
|
||||||
|
"csstype": "^3.0.6",
|
||||||
|
"fastest-stable-stringify": "^2.0.2",
|
||||||
|
"inline-style-prefixer": "^6.0.0",
|
||||||
|
"rtl-css-js": "^1.14.0",
|
||||||
|
"sourcemap-codec": "^1.4.8",
|
||||||
|
"stacktrace-js": "^2.0.2",
|
||||||
|
"stylis": "^4.0.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"nanoid": {
|
"nanoid": {
|
||||||
"version": "3.1.23",
|
"version": "3.1.23",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
|
||||||
|
|
@ -18459,6 +18524,32 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-universal-interface": {
|
||||||
|
"version": "0.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
|
||||||
|
"integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw=="
|
||||||
|
},
|
||||||
|
"react-use": {
|
||||||
|
"version": "17.3.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-use/-/react-use-17.3.1.tgz",
|
||||||
|
"integrity": "sha512-hs7+tS4rRm1QLHPfanLCqXIi632tP4V7Sai1ENUP2WTufU6am++tU9uSw9YrNCFqbABiEv0ndKU1XCUcfu2tXA==",
|
||||||
|
"requires": {
|
||||||
|
"@types/js-cookie": "^2.2.6",
|
||||||
|
"@xobotyi/scrollbar-width": "^1.9.5",
|
||||||
|
"copy-to-clipboard": "^3.3.1",
|
||||||
|
"fast-deep-equal": "^3.1.3",
|
||||||
|
"fast-shallow-equal": "^1.0.0",
|
||||||
|
"js-cookie": "^2.2.1",
|
||||||
|
"nano-css": "^5.3.1",
|
||||||
|
"react-universal-interface": "^0.6.2",
|
||||||
|
"resize-observer-polyfill": "^1.5.1",
|
||||||
|
"screenfull": "^5.1.0",
|
||||||
|
"set-harmonic-interval": "^1.0.1",
|
||||||
|
"throttle-debounce": "^3.0.1",
|
||||||
|
"ts-easing": "^0.2.0",
|
||||||
|
"tslib": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"read": {
|
"read": {
|
||||||
"version": "1.0.7",
|
"version": "1.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||||
|
|
@ -19396,6 +19487,14 @@
|
||||||
"inherits": "^2.0.1"
|
"inherits": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"rtl-css-js": {
|
||||||
|
"version": "1.14.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.2.tgz",
|
||||||
|
"integrity": "sha512-t6Wc/wpqm8s3kuXAV6tL/T7VS6n0XszzX58CgCsLj3O2xi9ITSLfzYhtl+GKyxCi/3QEqVctOJQwCiDzb2vteQ==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.1.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
"run-async": {
|
"run-async": {
|
||||||
"version": "2.4.1",
|
"version": "2.4.1",
|
||||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
||||||
|
|
@ -19501,6 +19600,11 @@
|
||||||
"ajv-keywords": "^3.5.2"
|
"ajv-keywords": "^3.5.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"screenfull": {
|
||||||
|
"version": "5.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
|
||||||
|
"integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA=="
|
||||||
|
},
|
||||||
"seed-random": {
|
"seed-random": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz",
|
||||||
|
|
@ -19706,6 +19810,11 @@
|
||||||
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
|
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"set-harmonic-interval": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
|
||||||
|
},
|
||||||
"set-value": {
|
"set-value": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
|
||||||
|
|
@ -20147,8 +20256,7 @@
|
||||||
"source-map": {
|
"source-map": {
|
||||||
"version": "0.6.1",
|
"version": "0.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"source-map-js": {
|
"source-map-js": {
|
||||||
"version": "0.6.2",
|
"version": "0.6.2",
|
||||||
|
|
@ -20185,8 +20293,7 @@
|
||||||
"sourcemap-codec": {
|
"sourcemap-codec": {
|
||||||
"version": "1.4.8",
|
"version": "1.4.8",
|
||||||
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
||||||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
|
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"spdx-compare": {
|
"spdx-compare": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
|
|
@ -20351,7 +20458,6 @@
|
||||||
"version": "2.0.5",
|
"version": "2.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
|
||||||
"integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
|
"integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"stackframe": "^1.1.1"
|
"stackframe": "^1.1.1"
|
||||||
}
|
}
|
||||||
|
|
@ -20382,14 +20488,12 @@
|
||||||
"stackframe": {
|
"stackframe": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
|
||||||
"integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
|
"integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"stacktrace-gps": {
|
"stacktrace-gps": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
|
||||||
"integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
|
"integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"source-map": "0.5.6",
|
"source-map": "0.5.6",
|
||||||
"stackframe": "^1.1.1"
|
"stackframe": "^1.1.1"
|
||||||
|
|
@ -20398,8 +20502,7 @@
|
||||||
"source-map": {
|
"source-map": {
|
||||||
"version": "0.5.6",
|
"version": "0.5.6",
|
||||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
|
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
|
||||||
"integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
|
"integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
|
||||||
"dev": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -20407,7 +20510,6 @@
|
||||||
"version": "2.0.2",
|
"version": "2.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
|
||||||
"integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
|
"integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"error-stack-parser": "^2.0.6",
|
"error-stack-parser": "^2.0.6",
|
||||||
"stack-generator": "^2.0.5",
|
"stack-generator": "^2.0.5",
|
||||||
|
|
@ -20924,6 +21026,11 @@
|
||||||
"postcss-selector-parser": "^6.0.4"
|
"postcss-selector-parser": "^6.0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"stylis": {
|
||||||
|
"version": "4.0.10",
|
||||||
|
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
|
||||||
|
"integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
|
||||||
|
},
|
||||||
"subarg": {
|
"subarg": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/subarg/-/subarg-1.0.0.tgz",
|
||||||
|
|
@ -21203,6 +21310,11 @@
|
||||||
"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==",
|
"integrity": "sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"throttle-debounce": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
|
||||||
|
},
|
||||||
"throttleit": {
|
"throttleit": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
|
||||||
|
|
@ -21405,6 +21517,11 @@
|
||||||
"is-number": "^7.0.0"
|
"is-number": "^7.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"toggle-selection": {
|
||||||
|
"version": "1.0.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
|
||||||
|
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
|
||||||
|
},
|
||||||
"toidentifier": {
|
"toidentifier": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
|
||||||
|
|
@ -21479,6 +21596,11 @@
|
||||||
"integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==",
|
"integrity": "sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"ts-easing": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
|
||||||
|
"integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
|
||||||
|
},
|
||||||
"ts-jest": {
|
"ts-jest": {
|
||||||
"version": "27.0.3",
|
"version": "27.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.0.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -85,6 +85,7 @@
|
||||||
"react-helmet": "^6.1.0",
|
"react-helmet": "^6.1.0",
|
||||||
"react-intl": "^5.20.4",
|
"react-intl": "^5.20.4",
|
||||||
"react-map-gl": "^6.1.16",
|
"react-map-gl": "^6.1.16",
|
||||||
|
"react-use": "^17.3.1",
|
||||||
"uswds": "^2.10.3"
|
"uswds": "^2.10.3"
|
||||||
},
|
},
|
||||||
"cypress-cucumber-preprocessor": {
|
"cypress-cucumber-preprocessor": {
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
|
||||||
<Grid tablet={{col: 9}}>
|
<Grid tablet={{col: 9}}>
|
||||||
<Grid row>
|
<Grid row>
|
||||||
<h2 data-cy={'about-screen-tool-heading'}>{props.header} </h2>
|
<h2 data-cy={'about-screen-tool-heading'}>{props.header} </h2>
|
||||||
<p>{props.children}</p>
|
{props.children}
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
@import "../utils.scss";
|
@import "../utils.scss";
|
||||||
|
|
||||||
$sidePanelLabelFontColor: #171716;
|
$sidePanelLabelFontColor: #171716;
|
||||||
$featureSelectBorderColor: #00bde3;
|
|
||||||
|
|
||||||
@mixin sidePanelLabelStyle {
|
@mixin sidePanelLabelStyle {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
|
|
@ -14,60 +13,36 @@ $featureSelectBorderColor: #00bde3;
|
||||||
width: 0.6rem;
|
width: 0.6rem;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
align-self: center;
|
align-self: center;
|
||||||
margin-top: 0.8rem;
|
margin-top: 1.8rem;
|
||||||
margin-right: 0.5rem;
|
margin-right: 0.5rem;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin indicatorBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 1rem 1.5rem;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.areaDetailContainer {
|
.areaDetailContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
// top row styles
|
|
||||||
.topRow {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cumulativeIndexScore,
|
|
||||||
.categorization {
|
.categorization {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 7.7rem;
|
padding-bottom: 2rem;
|
||||||
border-bottom: $sidePanelBorder;
|
|
||||||
flex: 1 0 50%;
|
|
||||||
padding-top: 2rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topRowTitle,
|
|
||||||
.censusLabel {
|
.censusLabel {
|
||||||
@include sidePanelLabelStyle;
|
@include sidePanelLabelStyle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topRowSubTitle {
|
|
||||||
font-size: small;
|
|
||||||
color: $sidePanelLabelFontColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score {
|
|
||||||
font-size: xx-large;
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicatorSuperscript {
|
|
||||||
top: -0.2em
|
|
||||||
}
|
|
||||||
|
|
||||||
.scoreSuperscript {
|
|
||||||
font-size: large;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.categorization {
|
|
||||||
border-left: $sidePanelBorder;
|
|
||||||
}
|
|
||||||
|
|
||||||
.priority {
|
.priority {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
@ -98,14 +73,13 @@ $featureSelectBorderColor: #00bde3;
|
||||||
.censusRow {
|
.censusRow {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-bottom: $sidePanelBorder;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
//census row styles
|
//census row styles
|
||||||
.censusRow {
|
.censusRow {
|
||||||
padding: 1rem;
|
padding: 1.2rem 1rem 0 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.censusText {
|
.censusText {
|
||||||
|
|
@ -117,33 +91,24 @@ $featureSelectBorderColor: #00bde3;
|
||||||
@include sidePanelLabelStyle;
|
@include sidePanelLabelStyle;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
border-bottom: $sidePanelBorder;
|
padding: 0.3rem 0.5rem 0.3rem 1.2rem;
|
||||||
padding: 0.3rem 0.5rem 0.3rem 1rem;
|
background-color: #DFE1E2;
|
||||||
background-color: #edeef0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//Indicator box styles
|
//Indicator box styles
|
||||||
.indicatorBox {
|
.indicatorBoxMain {
|
||||||
display: flex;
|
@include indicatorBox;
|
||||||
padding: 0 1rem 1.5rem;
|
|
||||||
border-bottom: $sidePanelBorder;
|
border-bottom: $sidePanelBorder;
|
||||||
|
|
||||||
@media screen and (max-width: $mobileBreakpoint) {
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicatorBox:last-child {
|
.indicatorBoxAdditional {
|
||||||
border-bottom: none;
|
@include indicatorBox;
|
||||||
|
border-bottom: 1px solid #1b1b1b;
|
||||||
|
background-color: #F3F3F3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicatorValue {
|
.indicatorRow {
|
||||||
flex: 1 0 37%;
|
display: flex;
|
||||||
align-self: center;
|
|
||||||
padding-left: 2.4rem;
|
|
||||||
font-size: large;
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobileBreakpoint) {
|
@media screen and (max-width: $mobileBreakpoint) {
|
||||||
flex: 1 0 40%;
|
flex: 1 0 40%;
|
||||||
|
|
@ -151,4 +116,21 @@ $featureSelectBorderColor: #00bde3;
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.indicatorName {
|
||||||
|
flex: 0 1 77%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicatorValue {
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
margin-left: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicatorDesc {
|
||||||
|
max-width: 10rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicatorSuperscript {
|
||||||
|
top: -0.2em
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,6 @@
|
||||||
declare namespace MapModuleScssNamespace {
|
declare namespace MapModuleScssNamespace {
|
||||||
export interface IMapModuleScss {
|
export interface IMapModuleScss {
|
||||||
areaDetailContainer: string;
|
areaDetailContainer: string;
|
||||||
topRow:string;
|
|
||||||
cumulativeIndexScore:string;
|
|
||||||
scoreSuperscript: string;
|
|
||||||
topRowTitle:string;
|
|
||||||
topRowSubTitle:string;
|
|
||||||
categorization:string;
|
categorization:string;
|
||||||
prioritized:string;
|
prioritized:string;
|
||||||
threshold:string;
|
threshold:string;
|
||||||
|
|
@ -16,10 +11,14 @@ declare namespace MapModuleScssNamespace {
|
||||||
censusText: string;
|
censusText: string;
|
||||||
censusLabel:string;
|
censusLabel:string;
|
||||||
divider:string;
|
divider:string;
|
||||||
indicatorBox:string;
|
indicatorBoxMain:string;
|
||||||
|
indicatorBoxAdditional:string;
|
||||||
|
indicatorRow:string;
|
||||||
indicatorValue:string;
|
indicatorValue:string;
|
||||||
score:string;
|
indicatorName:string;
|
||||||
indicatorSuperscript: string;
|
indicatorDesc:string;
|
||||||
|
indicatorBoxAdditional:string;
|
||||||
|
indicatorSuperscript:string;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
|
/* eslint-disable quotes */
|
||||||
// External Libs:
|
// External Libs:
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import {defineMessages} from 'react-intl';
|
import {defineMessages} from 'react-intl';
|
||||||
|
|
||||||
// Components:
|
// Components:
|
||||||
|
// import {Accordion} from '@trussworks/react-uswds';
|
||||||
|
|
||||||
// Styles and constants
|
// Styles and constants
|
||||||
import * as styles from './areaDetail.module.scss';
|
import * as styles from './areaDetail.module.scss';
|
||||||
|
|
@ -13,7 +15,6 @@ export const readablePercentile = (percentile: number) => {
|
||||||
return Math.round(percentile * 100);
|
return Math.round(percentile * 100);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// Todo: Add internationalization to superscript ticket #582
|
// Todo: Add internationalization to superscript ticket #582
|
||||||
const getSuperscriptOrdinal = (percentile: number) => {
|
const getSuperscriptOrdinal = (percentile: number) => {
|
||||||
const englishOrdinalRules = new Intl.PluralRules('en', {
|
const englishOrdinalRules = new Intl.PluralRules('en', {
|
||||||
|
|
@ -30,18 +31,19 @@ const getSuperscriptOrdinal = (percentile: number) => {
|
||||||
return suffixes[englishOrdinalRules.select(percentile)];
|
return suffixes[englishOrdinalRules.select(percentile)];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Todo VS: remove threshold data
|
||||||
export const getCategorization = (percentile: number) => {
|
export const getCategorization = (percentile: number) => {
|
||||||
let categorization;
|
let categorization;
|
||||||
let categoryCircleStyle;
|
let categoryCircleStyle;
|
||||||
|
|
||||||
if (percentile >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
|
if (percentile >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
|
||||||
categorization = 'Prioritized';
|
categorization = 'Community of focus';
|
||||||
categoryCircleStyle = styles.prioritized;
|
categoryCircleStyle = styles.prioritized;
|
||||||
} else if (constants.SCORE_BOUNDARY_THRESHOLD <= percentile && percentile < constants.SCORE_BOUNDARY_PRIORITIZED) {
|
} else if (constants.SCORE_BOUNDARY_THRESHOLD <= percentile && percentile < constants.SCORE_BOUNDARY_PRIORITIZED) {
|
||||||
categorization = 'Threshold';
|
categorization = 'Not a community of focus';
|
||||||
categoryCircleStyle = styles.threshold;
|
categoryCircleStyle = styles.threshold;
|
||||||
} else {
|
} else {
|
||||||
categorization = 'Non-prioritized';
|
categorization = 'Not a community of focus';
|
||||||
categoryCircleStyle = styles.nonPrioritized;
|
categoryCircleStyle = styles.nonPrioritized;
|
||||||
}
|
}
|
||||||
return [categorization, categoryCircleStyle];
|
return [categorization, categoryCircleStyle];
|
||||||
|
|
@ -54,11 +56,6 @@ interface IAreaDetailProps {
|
||||||
const AreaDetail = ({properties}:IAreaDetailProps) => {
|
const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
cumulativeIndexScore: {
|
|
||||||
id: 'areaDetail.priorityInfo.cumulativeIndexScore',
|
|
||||||
defaultMessage: 'Cumulative Index Score',
|
|
||||||
description: 'the cumulative score of the feature selected',
|
|
||||||
},
|
|
||||||
percentile: {
|
percentile: {
|
||||||
id: 'areaDetail.priorityInfo.percentile',
|
id: 'areaDetail.priorityInfo.percentile',
|
||||||
defaultMessage: 'percentile',
|
defaultMessage: 'percentile',
|
||||||
|
|
@ -91,7 +88,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
},
|
},
|
||||||
indicatorColumnHeader: {
|
indicatorColumnHeader: {
|
||||||
id: 'areaDetail.indicators.indicatorColumnHeader',
|
id: 'areaDetail.indicators.indicatorColumnHeader',
|
||||||
defaultMessage: 'Indicators',
|
defaultMessage: 'Indicator',
|
||||||
description: 'the population of the feature selected',
|
description: 'the population of the feature selected',
|
||||||
},
|
},
|
||||||
percentileColumnHeader: {
|
percentileColumnHeader: {
|
||||||
|
|
@ -104,9 +101,14 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
defaultMessage: 'Poverty',
|
defaultMessage: 'Poverty',
|
||||||
description: 'Household income is less than or equal to twice the federal "poverty level"',
|
description: 'Household income is less than or equal to twice the federal "poverty level"',
|
||||||
},
|
},
|
||||||
|
areaMedianIncome: {
|
||||||
|
id: 'areaDetail.indicator.areaMedianIncome',
|
||||||
|
defaultMessage: 'Area Median Income',
|
||||||
|
description: 'calculated as percent of the area median income',
|
||||||
|
},
|
||||||
education: {
|
education: {
|
||||||
id: 'areaDetail.indicator.education',
|
id: 'areaDetail.indicator.education',
|
||||||
defaultMessage: 'Education',
|
defaultMessage: 'Education, less than high school',
|
||||||
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
||||||
},
|
},
|
||||||
linguisticIsolation: {
|
linguisticIsolation: {
|
||||||
|
|
@ -120,10 +122,71 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
defaultMessage: 'Unemployment rate',
|
defaultMessage: 'Unemployment rate',
|
||||||
description: 'Number of unemployed people as a percentage of the labor force',
|
description: 'Number of unemployed people as a percentage of the labor force',
|
||||||
},
|
},
|
||||||
|
asthma: {
|
||||||
|
id: 'areaDetail.indicator.asthma',
|
||||||
|
defaultMessage: 'Asthma',
|
||||||
|
description: 'have asthma or been diagnosed by a doctor to have asthma',
|
||||||
|
},
|
||||||
|
diabetes: {
|
||||||
|
id: 'areaDetail.indicator.diabetes',
|
||||||
|
defaultMessage: 'Diabetes',
|
||||||
|
description: 'diabetes from dr or nurse',
|
||||||
|
},
|
||||||
|
dieselPartMatter: {
|
||||||
|
id: 'areaDetail.indicator.dieselPartMatter',
|
||||||
|
defaultMessage: 'Diesel particulate matter',
|
||||||
|
description: 'Diesel particulate matter level in air',
|
||||||
|
},
|
||||||
|
energyBurden: {
|
||||||
|
id: 'areaDetail.indicator.energyBurden',
|
||||||
|
defaultMessage: 'Energy burden',
|
||||||
|
description: 'Average annual energy cost ($) divided by household income',
|
||||||
|
},
|
||||||
|
femaRisk: {
|
||||||
|
id: 'areaDetail.indicator.femaRisk',
|
||||||
|
defaultMessage: 'FEMA Risk index',
|
||||||
|
description: 'Risk based on 18 natural hazard types, in addition to a'+
|
||||||
|
"community's social vulnerability and community resilience",
|
||||||
|
},
|
||||||
|
heartDisease: {
|
||||||
|
id: 'areaDetail.indicator.heartDisease',
|
||||||
|
defaultMessage: 'Heart Disease',
|
||||||
|
description: 'People ages 18 and up who report ever having been told by a' +
|
||||||
|
'doctor, nurse, or other health professionals that they had angina or coronary heart disease',
|
||||||
|
},
|
||||||
houseBurden: {
|
houseBurden: {
|
||||||
id: 'areaDetail.indicator.houseBurden',
|
id: 'areaDetail.indicator.houseBurden',
|
||||||
defaultMessage: 'Housing Burden',
|
defaultMessage: 'Housing cost burden',
|
||||||
description: 'Households that are low income and spend more than 30% of their income to housing costs',
|
description: 'People ages 18 and up who report having been told by a doctor,' +
|
||||||
|
' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
|
||||||
|
},
|
||||||
|
leadPaint: {
|
||||||
|
id: 'areaDetail.indicator.leadPaint',
|
||||||
|
defaultMessage: 'Lead paint',
|
||||||
|
description: 'Housing units built pre-1960, used as an indicator of potential'+
|
||||||
|
' lead paint exposure in homes',
|
||||||
|
},
|
||||||
|
lifeExpect: {
|
||||||
|
id: 'areaDetail.indicator.lifeExpect',
|
||||||
|
defaultMessage: 'Life expectancy',
|
||||||
|
description: 'Estimated years of life expectancy',
|
||||||
|
},
|
||||||
|
pm25: {
|
||||||
|
id: 'areaDetail.indicator.pm25',
|
||||||
|
defaultMessage: 'PM2.5',
|
||||||
|
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
|
||||||
|
},
|
||||||
|
trafficVolume: {
|
||||||
|
id: 'areaDetail.indicator.trafficVolume',
|
||||||
|
defaultMessage: 'Traffic proximity and volume',
|
||||||
|
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
|
||||||
|
' divided by distance in meters',
|
||||||
|
},
|
||||||
|
wasteWater: {
|
||||||
|
id: 'areaDetail.indicator.wasteWater',
|
||||||
|
defaultMessage: 'Wastewater discharge',
|
||||||
|
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
|
||||||
|
' kilometers',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -140,9 +203,10 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Todo: Ticket #367 will be replacing descriptions with YAML file
|
// Todo: Ticket #367 will be replacing descriptions with YAML file
|
||||||
const povertyInfo:indicatorInfo = {
|
const areaMedianIncome:indicatorInfo = {
|
||||||
label: intl.formatMessage(messages.poverty),
|
label: intl.formatMessage(messages.areaMedianIncome),
|
||||||
description: 'Household income is less than or equal to twice the federal "poverty level"',
|
description: 'Median income of the census block group calculated as a percent of the metropolitan'+
|
||||||
|
" area’s or state's median income",
|
||||||
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
||||||
};
|
};
|
||||||
const eduInfo:indicatorInfo = {
|
const eduInfo:indicatorInfo = {
|
||||||
|
|
@ -150,44 +214,102 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
||||||
value: properties[constants.EDUCATION_PROPERTY_PERCENTILE],
|
value: properties[constants.EDUCATION_PROPERTY_PERCENTILE],
|
||||||
};
|
};
|
||||||
const linIsoInfo:indicatorInfo = {
|
const poverty:indicatorInfo = {
|
||||||
label: intl.formatMessage(messages.linguisticIsolation),
|
label: intl.formatMessage(messages.poverty),
|
||||||
description: 'Households in which all members speak a non-English language and speak English less than "very well"',
|
description: 'Household income is less than or equal to the federal "poverty level"',
|
||||||
value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE],
|
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
||||||
};
|
};
|
||||||
const umemployInfo:indicatorInfo = {
|
// const linIsoInfo:indicatorInfo = {
|
||||||
label: intl.formatMessage(messages.unemployment),
|
// label: intl.formatMessage(messages.linguisticIsolation),
|
||||||
description: 'Number of unemployed people as a percentage of the labor force',
|
// eslint-disable-next-line max-len
|
||||||
value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE],
|
// description: 'Households in which all members speak a non-English language and speak English less than "very well"',
|
||||||
|
// value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE],
|
||||||
|
// };
|
||||||
|
// const umemployInfo:indicatorInfo = {
|
||||||
|
// label: intl.formatMessage(messages.unemployment),
|
||||||
|
// description: 'Number of unemployed people as a percentage of the labor force',
|
||||||
|
// value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE],
|
||||||
|
// };
|
||||||
|
const asthma:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.asthma),
|
||||||
|
description: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
|
||||||
|
' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
|
||||||
|
value: properties[constants.ASTHMA_PERCENTILE],
|
||||||
|
};
|
||||||
|
const diabetes:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.diabetes),
|
||||||
|
description: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
|
||||||
|
' health professionals that they have diabetes other than diabetes during pregnancy',
|
||||||
|
value: properties[constants.DIABETES_PERCENTILE],
|
||||||
|
};
|
||||||
|
const dieselPartMatter:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.dieselPartMatter),
|
||||||
|
description: 'Mixture of particles that is part of diesel exhaust in the air',
|
||||||
|
value: properties[constants.DIESEL_MATTER_PERCENTILE],
|
||||||
|
};
|
||||||
|
const lifeExpect:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.lifeExpect),
|
||||||
|
description: 'Estimated years of life expectancy',
|
||||||
|
value: properties[constants.LIFE_PERCENTILE],
|
||||||
|
};
|
||||||
|
const energyBurden:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.energyBurden),
|
||||||
|
description: 'Average annual energy cost ($) divided by household income',
|
||||||
|
value: properties[constants.ENERGY_PERCENTILE],
|
||||||
|
};
|
||||||
|
const pm25:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.pm25),
|
||||||
|
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
|
||||||
|
value: properties[constants.PM25_PERCENTILE],
|
||||||
|
};
|
||||||
|
const leadPaint:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.leadPaint),
|
||||||
|
description: 'Housing units built pre-1960, used as an indicator of potential'+
|
||||||
|
' lead paint exposure in homes',
|
||||||
|
value: properties[constants.LEAD_PAINT_PERCENTILE],
|
||||||
|
};
|
||||||
|
const trafficVolume:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.trafficVolume),
|
||||||
|
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
|
||||||
|
' divided by distance in meters',
|
||||||
|
value: properties[constants.TRAFFIC_PERCENTILE],
|
||||||
|
};
|
||||||
|
const wasteWater:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.wasteWater),
|
||||||
|
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
|
||||||
|
' kilometers',
|
||||||
|
value: properties[constants.WASTEWATER_PERCENTILE],
|
||||||
|
};
|
||||||
|
const femaRisk:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.femaRisk),
|
||||||
|
description: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
|
||||||
|
' resulting from natural hazards each year.',
|
||||||
|
value: properties[constants.FEMA_PERCENTILE],
|
||||||
|
};
|
||||||
|
const heartDisease:indicatorInfo = {
|
||||||
|
label: intl.formatMessage(messages.heartDisease),
|
||||||
|
description: 'People ages 18 and up who report ever having been told by a' +
|
||||||
|
' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
|
||||||
|
value: properties[constants.HEART_PERCENTILE],
|
||||||
};
|
};
|
||||||
const houseBurden:indicatorInfo = {
|
const houseBurden:indicatorInfo = {
|
||||||
label: intl.formatMessage(messages.houseBurden),
|
label: intl.formatMessage(messages.houseBurden),
|
||||||
description: 'Households that are low income and spend more than 30% of their income to housing costs',
|
description: 'People ages 18 and up who report having been told by a doctor,' +
|
||||||
|
' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
|
||||||
value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE],
|
value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE],
|
||||||
};
|
};
|
||||||
|
|
||||||
const indicators = [povertyInfo, eduInfo, linIsoInfo, umemployInfo, houseBurden];
|
|
||||||
|
const indicators = [areaMedianIncome, eduInfo, poverty];
|
||||||
|
const additionalIndicators = [
|
||||||
|
asthma, diabetes, dieselPartMatter, energyBurden, femaRisk, heartDisease,
|
||||||
|
houseBurden, leadPaint, lifeExpect, pm25, trafficVolume, wasteWater,
|
||||||
|
];
|
||||||
|
|
||||||
const [categorization, categoryCircleStyle] = getCategorization(score);
|
const [categorization, categoryCircleStyle] = getCategorization(score);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
|
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
|
||||||
<header className={styles.topRow }>
|
|
||||||
<div className={styles.cumulativeIndexScore}>
|
|
||||||
<div className={styles.topRowTitle}>{intl.formatMessage(messages.cumulativeIndexScore)}</div>
|
|
||||||
<div className={styles.score} data-cy={'score'}>{`${readablePercentile(score)}`}
|
|
||||||
<sup className={styles.scoreSuperscript}><span>th</span></sup>
|
|
||||||
</div>
|
|
||||||
<div className={styles.topRowSubTitle}>{intl.formatMessage(messages.percentile)}</div>
|
|
||||||
</div>
|
|
||||||
<div className={styles.categorization}>
|
|
||||||
<h6 className={styles.topRowTitle}>{intl.formatMessage(messages.categorization)}</h6>
|
|
||||||
<div className={styles.priority}>
|
|
||||||
<div className={categoryCircleStyle} />
|
|
||||||
<div className={styles.prioritization}>{categorization}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<ul className={styles.censusRow}>
|
<ul className={styles.censusRow}>
|
||||||
<li>
|
<li>
|
||||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.censusBlockGroup)} </span>
|
<span className={styles.censusLabel}>{intl.formatMessage(messages.censusBlockGroup)} </span>
|
||||||
|
|
@ -206,27 +328,129 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||||
<span className={styles.censusText}>{population.toLocaleString()}</span>
|
<span className={styles.censusText}>{population.toLocaleString()}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div className={styles.categorization}>
|
||||||
|
<div className={styles.priority}>
|
||||||
|
<div className={categoryCircleStyle} />
|
||||||
|
<h3>{categorization}</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className={styles.divider}>
|
<div className={styles.divider}>
|
||||||
<h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
|
<h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
|
||||||
<h6>{intl.formatMessage(messages.percentileColumnHeader)}</h6>
|
<h6>{intl.formatMessage(messages.percentileColumnHeader)}</h6>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{indicators.map((indicator, index) => (
|
<>
|
||||||
<li key={index} className={styles.indicatorBox} data-cy={'indicatorBox'}>
|
{
|
||||||
<div>
|
indicators.map((indicator:any, index:number) => {
|
||||||
<h4>{indicator.label}</h4>
|
return <li key={`ind${index}`} className={styles.indicatorBoxMain} data-cy={'indicatorBox'}>
|
||||||
<p className={'secondary'}>
|
<div className={styles.indicatorRow}>
|
||||||
{indicator.description}
|
<h4 className={styles.indicatorName}>{indicator.label}</h4>
|
||||||
</p>
|
<div className={styles.indicatorValue}>
|
||||||
</div>
|
{readablePercentile(indicator.value)}
|
||||||
<div className={styles.indicatorValue}>
|
<sup className={styles.indicatorSuperscript}><span>
|
||||||
{readablePercentile(indicator.value)}
|
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
|
||||||
<sup className={styles.indicatorSuperscript}><span>
|
</span></sup>
|
||||||
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
|
</div>
|
||||||
</span></sup>
|
</div>
|
||||||
</div>
|
<p className={'secondary j40-indicator'}>
|
||||||
</li>
|
{indicator.description}
|
||||||
))}
|
</p>
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
additionalIndicators.map((indicator:any, index:number) => {
|
||||||
|
return <li
|
||||||
|
key={`ind${index}`}
|
||||||
|
className={styles.indicatorBoxAdditional}
|
||||||
|
data-cy={'indicatorBox'}>
|
||||||
|
<div className={styles.indicatorRow}>
|
||||||
|
<h4 className={styles.indicatorName}>{indicator.label}</h4>
|
||||||
|
<div className={styles.indicatorValue}>
|
||||||
|
{readablePercentile(indicator.value)}
|
||||||
|
<sup className={styles.indicatorSuperscript}><span>
|
||||||
|
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
|
||||||
|
</span></sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className={'secondary j40-indicator'}>
|
||||||
|
{indicator.description}
|
||||||
|
</p>
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
|
||||||
|
{/* Temporarily remove Accordions and may place back in later, removed unused
|
||||||
|
className prop as as styles are based on the id of the Accordion Item */}
|
||||||
|
{/* <Accordion
|
||||||
|
multiselectable={true}
|
||||||
|
items={
|
||||||
|
[
|
||||||
|
{
|
||||||
|
id: 'prioritization-indicators',
|
||||||
|
title: 'Indicators',
|
||||||
|
content: (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
indicators.map((indicator:any, index:number) => {
|
||||||
|
return <li key={`ind${index}`} className={styles.indicatorBoxMain} data-cy={'indicatorBox'}>
|
||||||
|
<div className={styles.indicatorRow}>
|
||||||
|
<h4 className={styles.indicatorName}>{indicator.label}</h4>
|
||||||
|
<div className={styles.indicatorValue}>
|
||||||
|
{readablePercentile(indicator.value)}
|
||||||
|
<sup className={styles.indicatorSuperscript}><span>
|
||||||
|
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
|
||||||
|
</span></sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className={'secondary j40-indicator'}>
|
||||||
|
{indicator.description}
|
||||||
|
</p>
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
expanded: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'additional-indicators',
|
||||||
|
title: 'Additional indicators (not used in prioritization)',
|
||||||
|
content: (
|
||||||
|
(
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
additionalIndicators.map((indicator:any, index:number) => {
|
||||||
|
return <li
|
||||||
|
key={`ind${index}`}
|
||||||
|
className={styles.indicatorBoxAdditional}
|
||||||
|
data-cy={'indicatorBox'}>
|
||||||
|
<div className={styles.indicatorRow}>
|
||||||
|
<h4 className={styles.indicatorName}>{indicator.label}</h4>
|
||||||
|
<div className={styles.indicatorValue}>
|
||||||
|
{readablePercentile(indicator.value)}
|
||||||
|
<sup className={styles.indicatorSuperscript}><span>
|
||||||
|
{getSuperscriptOrdinal(readablePercentile(indicator.value))}
|
||||||
|
</span></sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className={'secondary j40-indicator'}>
|
||||||
|
{indicator.description}
|
||||||
|
</p>
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
),
|
||||||
|
expanded: true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}/> */}
|
||||||
|
|
||||||
</aside>
|
</aside>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -5,37 +5,6 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
||||||
<aside
|
<aside
|
||||||
data-cy="aside"
|
data-cy="aside"
|
||||||
>
|
>
|
||||||
<header>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
Cumulative Index Score
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
data-cy="score"
|
|
||||||
>
|
|
||||||
9500
|
|
||||||
<sup>
|
|
||||||
<span>
|
|
||||||
th
|
|
||||||
</span>
|
|
||||||
</sup>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
percentile
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h6>
|
|
||||||
Categorization
|
|
||||||
</h6>
|
|
||||||
<div>
|
|
||||||
<div />
|
|
||||||
<div>
|
|
||||||
Prioritized
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<span>
|
<span>
|
||||||
|
|
@ -66,14 +35,66 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div />
|
||||||
|
<h3>
|
||||||
|
Community of focus
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h6>
|
<h6>
|
||||||
Indicators
|
Indicator
|
||||||
</h6>
|
</h6>
|
||||||
<h6>
|
<h6>
|
||||||
Percentile (0-100)
|
Percentile (0-100)
|
||||||
</h6>
|
</h6>
|
||||||
</div>
|
</div>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Area Median Income
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
9900
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Median income of the census block group calculated as a percent of the metropolitan area’s or state's median income
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Education, less than high school
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
9800
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Percent of people age 25 or older that didn’t get a high school diploma
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
<li
|
<li
|
||||||
data-cy="indicatorBox"
|
data-cy="indicatorBox"
|
||||||
>
|
>
|
||||||
|
|
@ -81,108 +102,284 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
|
||||||
<h4>
|
<h4>
|
||||||
Poverty
|
Poverty
|
||||||
</h4>
|
</h4>
|
||||||
<p
|
<div>
|
||||||
class="secondary"
|
9900
|
||||||
>
|
<sup>
|
||||||
Household income is less than or equal to twice the federal "poverty level"
|
<span>
|
||||||
</p>
|
th
|
||||||
</div>
|
</span>
|
||||||
<div>
|
</sup>
|
||||||
9900
|
</div>
|
||||||
<sup>
|
|
||||||
<span>
|
|
||||||
th
|
|
||||||
</span>
|
|
||||||
</sup>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Household income is less than or equal to the federal "poverty level"
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
data-cy="indicatorBox"
|
data-cy="indicatorBox"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4>
|
<h4>
|
||||||
Education
|
Asthma
|
||||||
</h4>
|
</h4>
|
||||||
<p
|
<div>
|
||||||
class="secondary"
|
NaN
|
||||||
>
|
<sup>
|
||||||
Percent of people age 25 or older that didn’t get a high school diploma
|
<span>
|
||||||
</p>
|
th
|
||||||
</div>
|
</span>
|
||||||
<div>
|
</sup>
|
||||||
9800
|
</div>
|
||||||
<sup>
|
|
||||||
<span>
|
|
||||||
th
|
|
||||||
</span>
|
|
||||||
</sup>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
People who answer “yes” to both of the questions: “Have you ever been told by a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
data-cy="indicatorBox"
|
data-cy="indicatorBox"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4>
|
<h4>
|
||||||
Linguistic isolation
|
Diabetes
|
||||||
</h4>
|
</h4>
|
||||||
<p
|
<div>
|
||||||
class="secondary"
|
NaN
|
||||||
>
|
<sup>
|
||||||
Households in which all members speak a non-English language and speak English less than "very well"
|
<span>
|
||||||
</p>
|
th
|
||||||
</div>
|
</span>
|
||||||
<div>
|
</sup>
|
||||||
9700
|
</div>
|
||||||
<sup>
|
|
||||||
<span>
|
|
||||||
th
|
|
||||||
</span>
|
|
||||||
</sup>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
People ages 18 and up who report having been told by a doctor, nurse, or other health professionals that they have diabetes other than diabetes during pregnancy
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
data-cy="indicatorBox"
|
data-cy="indicatorBox"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4>
|
<h4>
|
||||||
Unemployment rate
|
Diesel particulate matter
|
||||||
</h4>
|
</h4>
|
||||||
<p
|
<div>
|
||||||
class="secondary"
|
NaN
|
||||||
>
|
<sup>
|
||||||
Number of unemployed people as a percentage of the labor force
|
<span>
|
||||||
</p>
|
th
|
||||||
</div>
|
</span>
|
||||||
<div>
|
</sup>
|
||||||
9600
|
</div>
|
||||||
<sup>
|
|
||||||
<span>
|
|
||||||
th
|
|
||||||
</span>
|
|
||||||
</sup>
|
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Mixture of particles that is part of diesel exhaust in the air
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
<li
|
<li
|
||||||
data-cy="indicatorBox"
|
data-cy="indicatorBox"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4>
|
<h4>
|
||||||
Housing Burden
|
Energy burden
|
||||||
</h4>
|
</h4>
|
||||||
<p
|
<div>
|
||||||
class="secondary"
|
NaN
|
||||||
>
|
<sup>
|
||||||
Households that are low income and spend more than 30% of their income to housing costs
|
<span>
|
||||||
</p>
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Average annual energy cost ($) divided by household income
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
9500
|
<h4>
|
||||||
<sup>
|
FEMA Risk index
|
||||||
<span>
|
</h4>
|
||||||
th
|
<div>
|
||||||
</span>
|
NaN
|
||||||
</sup>
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Expected Annual Loss Score, which is the average economic loss in dollars resulting from natural hazards each year.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Heart Disease
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
NaN
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
People ages 18 and up who report ever having been told by a doctor, nurse, or other health professionals that they had angina or coronary heart disease
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Housing cost burden
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
9500
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
People ages 18 and up who report having been told by a doctor, nurse, or other health professionals that they have diabetes other than diabetes during pregnancy
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Lead paint
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
NaN
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Housing units built pre-1960, used as an indicator of potential lead paint exposure in homes
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Life expectancy
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
NaN
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Estimated years of life expectancy
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
PM2.5
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
NaN
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Traffic proximity and volume
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
NaN
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Count of vehicles (average annual daily traffic) at major roads within 500 meters, divided by distance in meters
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
data-cy="indicatorBox"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Wastewater discharge
|
||||||
|
</h4>
|
||||||
|
<div>
|
||||||
|
NaN
|
||||||
|
<sup>
|
||||||
|
<span>
|
||||||
|
th
|
||||||
|
</span>
|
||||||
|
</sup>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
class="secondary j40-indicator"
|
||||||
|
>
|
||||||
|
Toxic concentrations at stream segments within 500 meters divided by distance in kilometers
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
</aside>
|
</aside>
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
|
|
|
||||||
|
|
@ -36,15 +36,15 @@ describe('tests the readablePercentile function', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('tests the getCategorization function', () => {
|
describe('tests the getCategorization function', () => {
|
||||||
it(`should equal Prioritized for value >= ${constants.SCORE_BOUNDARY_LOW}`, () => {
|
it(`should equal Community of focus for value >= ${constants.SCORE_BOUNDARY_LOW}`, () => {
|
||||||
expect(getCategorization(.756)).toEqual(['Prioritized', undefined]);
|
expect(getCategorization(.756)).toEqual(['Community of focus', undefined]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it(`should equal Threshold for .60 <= value < ${constants.SCORE_BOUNDARY_THRESHOLD}`, () => {
|
it(`should equal Threshold for .60 <= value < ${constants.SCORE_BOUNDARY_THRESHOLD}`, () => {
|
||||||
expect(getCategorization(.65)).toEqual(['Threshold', undefined]);
|
expect(getCategorization(.65)).toEqual(['Not a community of focus', undefined]);
|
||||||
});
|
});
|
||||||
|
|
||||||
it(`should equal Non-prioritized for value < ${constants.SCORE_BOUNDARY_PRIORITIZED}`, () => {
|
it(`should equal Non-prioritized for value < ${constants.SCORE_BOUNDARY_PRIORITIZED}`, () => {
|
||||||
expect(getCategorization(.53)).toEqual(['Non-prioritized', undefined]);
|
expect(getCategorization(.53)).toEqual(['Not a community of focus', undefined]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,14 @@ exports[`rendering of the DatasetCard checks if component renders 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<div>
|
<div>
|
||||||
<h3>
|
<h3>
|
||||||
Poverty
|
Area Median Income
|
||||||
</h3>
|
</h3>
|
||||||
<div>
|
<div>
|
||||||
What is it?
|
What is it?
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
Percent of a block group's population in households where the household
|
Median income of the census block group calculated as a percent
|
||||||
income is less than or equal to twice the federal "poverty level"
|
of the metropolitan area’s or state's median income.
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -25,18 +25,18 @@ exports[`rendering of the DatasetCard checks if component renders 1`] = `
|
||||||
Data source:
|
Data source:
|
||||||
</span>
|
</span>
|
||||||
<a
|
<a
|
||||||
href="https://www.census.gov/"
|
href="https://www.census.gov/programs-surveys/acs"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
>
|
>
|
||||||
U.S. Census Bureau
|
Census's American Community Survey
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>
|
<span>
|
||||||
Data date range:
|
Data date range:
|
||||||
</span>
|
</span>
|
||||||
5-year estimates, 2015-2019
|
2015-2019
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,5 @@
|
||||||
@import "../utils.scss";
|
|
||||||
|
|
||||||
.datasetContainer {
|
|
||||||
background-color: #eef6fb;
|
|
||||||
}
|
|
||||||
.datasetContainerHeader {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
color: $headingFontColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
.datasetContainerSubTitle {
|
|
||||||
width: 50%;
|
|
||||||
line-height: 1.7rem;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1.4rem;
|
|
||||||
color: $headingFontColor;
|
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.datasetCardsContainer {
|
.datasetCardsContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.j40AlertContainer {
|
|
||||||
background-color: $j40AlertWarningColor;
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +1,6 @@
|
||||||
declare namespace DatasetContainerScssNamespace {
|
declare namespace DatasetContainerScssNamespace {
|
||||||
export interface IDatasetContainerScss {
|
export interface IDatasetContainerScss {
|
||||||
datasetContainer:string;
|
|
||||||
datasetCardsContainer: string;
|
datasetCardsContainer: string;
|
||||||
datasetContainerHeader: string;
|
|
||||||
datasetContainerSubTitle: string;
|
|
||||||
j40AlertContainer: string;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,154 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import {defineMessages} from 'react-intl';
|
import {defineMessages} from 'react-intl';
|
||||||
|
import {Grid} from '@trussworks/react-uswds';
|
||||||
|
|
||||||
import DatasetCard from '../DatasetCard';
|
import DatasetCard from '../DatasetCard';
|
||||||
import * as styles from './dsContainer.module.scss';
|
|
||||||
import AlertWrapper from '../AlertWrapper';
|
import AlertWrapper from '../AlertWrapper';
|
||||||
|
|
||||||
|
import * as styles from './dsContainer.module.scss';
|
||||||
|
|
||||||
export const cards = [
|
export const cards = [
|
||||||
{
|
{
|
||||||
indicator: 'Poverty',
|
indicator: 'Area Median Income',
|
||||||
description: `Percent of a block group's population in households where the household
|
description: `Median income of the census block group calculated as a percent
|
||||||
income is less than or equal to twice the federal "poverty level"`,
|
of the metropolitan area’s or state's median income.`,
|
||||||
|
dataResolution: `Census block group`,
|
||||||
|
dataSourceLabel: `Census's American Community Survey`,
|
||||||
|
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||||
|
dataDateRange: `2015-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Households below 100% of the federal poverty line',
|
||||||
|
description: `Percent of a block group's population in households where the
|
||||||
|
household income is at or below 100% the federal "poverty level."`,
|
||||||
|
dataResolution: `Census block group`,
|
||||||
|
dataSourceLabel: `Census's American Community Survey`,
|
||||||
|
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||||
|
dataDateRange: `2015-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Education. less than high school education',
|
||||||
|
description: `Percent of people age 25 or older in a block group whose
|
||||||
|
education is short of a high school diploma.`,
|
||||||
|
dataResolution: `Census block group`,
|
||||||
|
dataSourceLabel: `Census's American Community Survey`,
|
||||||
|
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||||
|
dataDateRange: `2015-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Diabetes',
|
||||||
|
description: `People ages 18 years and up who report having ever been
|
||||||
|
told by a doctor, nurse, or other health professionals that they have
|
||||||
|
diabetes other than diabetes during pregnancy.`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Centers for Disease Control and Prevention (CDC) PLACES`,
|
||||||
|
dataSourceURL: `https://www.cdc.gov/places/index.html`,
|
||||||
|
dataDateRange: `2016-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Asthma',
|
||||||
|
description: `Weighted number of respondents people who answer “yes” both
|
||||||
|
to both of the following questions: “Have you ever been told by a doctor,
|
||||||
|
nurse, or other health professional that you have asthma?” and the question
|
||||||
|
“Do you still have asthma?”`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Centers for Disease Control and Prevention (CDC) PLACES`,
|
||||||
|
dataSourceURL: `https://www.cdc.gov/places/index.html`,
|
||||||
|
dataDateRange: `2016-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Heart disase',
|
||||||
|
description: `People ages 18 years and up who report ever having been told
|
||||||
|
by a doctor, nurse, or other health professionals that they had angina or
|
||||||
|
coronary heart disease.`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Centers for Disease Control and Prevention (CDC) PLACES`,
|
||||||
|
dataSourceURL: `https://www.cdc.gov/places/index.html`,
|
||||||
|
dataDateRange: `2016-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Life expectancy',
|
||||||
|
description: `Estimated years of life expectancy.`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Centers for Disease Control and Prevention (CDC)
|
||||||
|
US Small-area Life Expectancy Estimates Project`,
|
||||||
|
dataSourceURL: `https://www.cdc.gov/nchs/nvss/usaleep/usaleep.html#data`,
|
||||||
|
dataDateRange: `2010-2015`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Traffic proximity and volume',
|
||||||
|
description: `Count of vehicles (average annual daily traffic) at major roads
|
||||||
|
within 500 meters, divided by distance in meters (not km).`,
|
||||||
|
dataResolution: `Census block group`,
|
||||||
|
dataSourceLabel: `Department of Transportation (DOT) traffic data`,
|
||||||
|
dataSourceURL: `#`,
|
||||||
|
dataDateRange: `2017`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'FEMA Risk Index Expected Annual Loss Score',
|
||||||
|
description: `Average economic loss in dollars resulting from natural
|
||||||
|
hazards each year. It is calculated for each hazard type and quantifies
|
||||||
|
loss for relevant consequence types: buildings, people, and agriculture.`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Federal Emergency Management Agency (FEMA)`,
|
||||||
|
dataSourceURL: `https://hazards.fema.gov/nri/expected-annual-loss`,
|
||||||
|
dataDateRange: `2014-2017`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Energy burden',
|
||||||
|
description: `Average annual energy cost ($) divided by household income.`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Department of Energy (DOE) LEAD Score`,
|
||||||
|
dataSourceURL: `https://www.energy.gov/eere/slsc/low-income-energy-affordability-data-lead-tool`,
|
||||||
|
dataDateRange: `2018`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Housing cost burden',
|
||||||
|
description: `Households that are low income and spend more than 30% of their
|
||||||
|
income to housing costs.`,
|
||||||
|
dataResolution: `Census tract`,
|
||||||
|
dataSourceLabel: `Department of Housing & Urban Development’s
|
||||||
|
(HUD) Comprehensive Housing Affordability Strategy dataset`,
|
||||||
|
dataSourceURL: `https://www.huduser.gov/portal/datasets/cp.html`,
|
||||||
|
dataDateRange: `2013-2017`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Wastewater discharge',
|
||||||
|
description: `RSEI modeled Toxic Concentrations at stream segments within 500
|
||||||
|
meters, divided by distance in kilometers (km).`,
|
||||||
|
dataResolution: `Census block group`,
|
||||||
|
dataSourceLabel: `Environmental Protection Agency (EPA) Risk-Screening
|
||||||
|
Environmental Indicators (RSEI) Model`,
|
||||||
|
dataSourceURL: `https://www.epa.gov/rsei`,
|
||||||
|
dataDateRange: `2020`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Lead paint',
|
||||||
|
description: `Percent of housing units built pre-1960, used as an
|
||||||
|
indicator of potential lead paint exposure in homes.`,
|
||||||
|
dataResolution: `Census block group`,
|
||||||
|
dataSourceLabel: `Census's American Community Survey`,
|
||||||
|
dataSourceURL: `https://www.census.gov/programs-surveys/acs`,
|
||||||
|
dataDateRange: `2015-2019`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
indicator: 'Diesel particulate matter',
|
||||||
|
description: `Mixture of particles that is part of diesel exhaust in the air.`,
|
||||||
dataResolution: `Census block group`,
|
dataResolution: `Census block group`,
|
||||||
dataSourceLabel: `U.S. Census Bureau`,
|
dataSourceLabel: `U.S. Census Bureau`,
|
||||||
dataSourceURL: `https://www.census.gov/`,
|
dataSourceURL: `https://www.census.gov/`,
|
||||||
dataDateRange: `5-year estimates, 2015-2019`,
|
dataDateRange: `5-year estimates, 2015-2019`,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
indicator: 'Education (less than high school)',
|
indicator: 'PM2.5',
|
||||||
description: `Percent of people age 25 or older in a block group whose education is short of a high school diploma`,
|
description: `Fine inhalable particles, with diameters that are generally
|
||||||
|
2.5 micrometers and smaller.`,
|
||||||
dataResolution: `Census block group`,
|
dataResolution: `Census block group`,
|
||||||
dataSourceLabel: `U.S. Census Bureau`,
|
dataSourceLabel: `Environmental Protection Agency (EPA) Office of Air
|
||||||
dataSourceURL: `https://www.census.gov/`,
|
and Radiation (OAR) fusion of model and monitor data`,
|
||||||
dataDateRange: `5-year estimates, 2015-2019`,
|
dataSourceURL: `https://www.epa.gov/aboutepa/about-office-air-and-radiation-oar`,
|
||||||
},
|
dataDateRange: `2017`,
|
||||||
{
|
|
||||||
indicator: 'Linguistic isolation',
|
|
||||||
description: `Percent of people in a block group living in linguistically
|
|
||||||
isolated households — a linguistically isolated household is a household in
|
|
||||||
which all members aged 14 years and over speak a non-English language and also speak
|
|
||||||
English less than "very well" (i.e., have difficulty with English)`,
|
|
||||||
dataResolution: `Census block group`,
|
|
||||||
dataSourceLabel: `U.S. Census Bureau`,
|
|
||||||
dataSourceURL: `https://www.census.gov/`,
|
|
||||||
dataDateRange: `5-year estimates, 2015-2019`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
indicator: 'Unemployment rate',
|
|
||||||
description: `Unemployment rate (people who are unemployed divided by the total population of
|
|
||||||
people in the labor force over 16 years old)`,
|
|
||||||
dataResolution: `Census block group`,
|
|
||||||
dataSourceLabel: `U.S. Census Bureau`,
|
|
||||||
dataSourceURL: `https://www.census.gov/`,
|
|
||||||
dataDateRange: `5-year estimates, 2015-2019`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
indicator: 'Housing burden',
|
|
||||||
description: `Percent of households in a census tract that are both low income (making less
|
|
||||||
than 80% of the HUD Area Median Family Income) and severely burdened by housing costs
|
|
||||||
(paying greater than 30% of their income to housing costs)`,
|
|
||||||
dataResolution: `Census block group`,
|
|
||||||
dataSourceLabel: `U.S. Census Bureau`,
|
|
||||||
dataSourceURL: `https://www.census.gov/`,
|
|
||||||
dataDateRange: `5-year estimates, 2015-2019`,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
@ -61,32 +158,40 @@ const DatasetContainer = () => {
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
cumulativeScore: {
|
cumulativeScore: {
|
||||||
id: 'datasetContainer.header.cumulativeScore',
|
id: 'datasetContainer.header.cumulativeScore',
|
||||||
defaultMessage: 'Datasets used in cumulative score',
|
defaultMessage: 'Datasets used methodology',
|
||||||
description: 'section label of which datasets are used in cumulative score',
|
description: 'section label of which datasets are used in cumulative score',
|
||||||
},
|
},
|
||||||
subTitle: {
|
subTitle: {
|
||||||
id: 'datasetContainer.subTitle',
|
id: 'datasetContainer.subTitle',
|
||||||
defaultMessage: 'The datasets come from a variety of sources and ' +
|
defaultMessage: 'The datasets come from a variety of sources and were selected' +
|
||||||
'were selected after considering relevance, availability, recency and quality.',
|
' based on relevance, availability, recency, and quality. The datasets seek to' +
|
||||||
|
' identify a range of human health, environmental, climate-related, and other' +
|
||||||
|
' cumulative impacts on disadvantaged communities.',
|
||||||
description: 'description of the dataset section',
|
description: 'description of the dataset section',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// JSX return value:
|
// JSX return value:
|
||||||
return (
|
return (
|
||||||
<div className={`${styles.datasetContainer} desktop:grid-col`}>
|
<>
|
||||||
<div className={'grid-container-desktop-lg'}>
|
<Grid row>
|
||||||
<h1 className={styles.datasetContainerHeader}>{intl.formatMessage(messages.cumulativeScore)}</h1>
|
<Grid col={12}>
|
||||||
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
||||||
|
<h2>{intl.formatMessage(messages.cumulativeScore)}</h2>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
<p className={styles.datasetContainerSubTitle}>{intl.formatMessage(messages.subTitle)}</p>
|
<Grid row>
|
||||||
<div className={styles.datasetCardsContainer}>
|
<Grid col={12} tablet={{col: 7}} className={'j40-mb-3'}>
|
||||||
{cards.map((card) => <DatasetCard
|
<p>{intl.formatMessage(messages.subTitle)}</p>
|
||||||
key={card.indicator}
|
</Grid>
|
||||||
datasetCardProps={card}/>)}
|
</Grid>
|
||||||
</div>
|
<div className={styles.datasetCardsContainer}>
|
||||||
|
{cards.map((card) => <DatasetCard
|
||||||
|
key={card.indicator}
|
||||||
|
datasetCardProps={card}/>)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,13 @@
|
||||||
exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
|
exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
<div
|
<div
|
||||||
class="undefined desktop:grid-col"
|
class="grid-row"
|
||||||
|
data-testid="grid"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="grid-container-desktop-lg"
|
class="grid-col-12"
|
||||||
|
data-testid="grid"
|
||||||
>
|
>
|
||||||
<h1>
|
|
||||||
Datasets used in cumulative score
|
|
||||||
</h1>
|
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="usa-alert usa-alert--warning j40-sitealert"
|
class="usa-alert usa-alert--warning j40-sitealert"
|
||||||
|
|
@ -37,203 +36,600 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<h2>
|
||||||
|
Datasets used methodology
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="grid-row"
|
||||||
|
data-testid="grid"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="grid-col-12 tablet:grid-col-7 j40-mb-3"
|
||||||
|
data-testid="grid"
|
||||||
|
>
|
||||||
<p>
|
<p>
|
||||||
The datasets come from a variety of sources and were selected after considering relevance, availability, recency and quality.
|
The datasets come from a variety of sources and were selected based on relevance, availability, recency, and quality. The datasets seek to identify a range of human health, environmental, climate-related, and other cumulative impacts on disadvantaged communities.
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Area Median Income
|
||||||
|
</h3>
|
||||||
<div>
|
<div>
|
||||||
<div>
|
What is it?
|
||||||
<h3>
|
|
||||||
Poverty
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
What is it?
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Percent of a block group's population in households where the household
|
|
||||||
income is less than or equal to twice the federal "poverty level"
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data resolution:
|
|
||||||
</span>
|
|
||||||
Census block group
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data source:
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
href="https://www.census.gov/"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
U.S. Census Bureau
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data date range:
|
|
||||||
</span>
|
|
||||||
5-year estimates, 2015-2019
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>
|
|
||||||
Education (less than high school)
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
What is it?
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Percent of people age 25 or older in a block group whose education is short of a high school diploma
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data resolution:
|
|
||||||
</span>
|
|
||||||
Census block group
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data source:
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
href="https://www.census.gov/"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
U.S. Census Bureau
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data date range:
|
|
||||||
</span>
|
|
||||||
5-year estimates, 2015-2019
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>
|
|
||||||
Linguistic isolation
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
What is it?
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Percent of people in a block group living in linguistically
|
|
||||||
isolated households — a linguistically isolated household is a household in
|
|
||||||
which all members aged 14 years and over speak a non-English language and also speak
|
|
||||||
English less than "very well" (i.e., have difficulty with English)
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data resolution:
|
|
||||||
</span>
|
|
||||||
Census block group
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data source:
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
href="https://www.census.gov/"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
U.S. Census Bureau
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data date range:
|
|
||||||
</span>
|
|
||||||
5-year estimates, 2015-2019
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>
|
|
||||||
Unemployment rate
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
What is it?
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Unemployment rate (people who are unemployed divided by the total population of
|
|
||||||
people in the labor force over 16 years old)
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data resolution:
|
|
||||||
</span>
|
|
||||||
Census block group
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data source:
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
href="https://www.census.gov/"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
U.S. Census Bureau
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data date range:
|
|
||||||
</span>
|
|
||||||
5-year estimates, 2015-2019
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3>
|
|
||||||
Housing burden
|
|
||||||
</h3>
|
|
||||||
<div>
|
|
||||||
What is it?
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
Percent of households in a census tract that are both low income (making less
|
|
||||||
than 80% of the HUD Area Median Family Income) and severely burdened by housing costs
|
|
||||||
(paying greater than 30% of their income to housing costs)
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data resolution:
|
|
||||||
</span>
|
|
||||||
Census block group
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data source:
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
href="https://www.census.gov/"
|
|
||||||
rel="noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
U.S. Census Bureau
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<span>
|
|
||||||
Data date range:
|
|
||||||
</span>
|
|
||||||
5-year estimates, 2015-2019
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
Median income of the census block group calculated as a percent
|
||||||
|
of the metropolitan area’s or state's median income.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.census.gov/programs-surveys/acs"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Census's American Community Survey
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2015-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Households below 100% of the federal poverty line
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Percent of a block group's population in households where the
|
||||||
|
household income is at or below 100% the federal "poverty level."
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.census.gov/programs-surveys/acs"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Census's American Community Survey
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2015-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Education. less than high school education
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Percent of people age 25 or older in a block group whose
|
||||||
|
education is short of a high school diploma.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.census.gov/programs-surveys/acs"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Census's American Community Survey
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2015-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Diabetes
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
People ages 18 years and up who report having ever been
|
||||||
|
told by a doctor, nurse, or other health professionals that they have
|
||||||
|
diabetes other than diabetes during pregnancy.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.cdc.gov/places/index.html"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Centers for Disease Control and Prevention (CDC) PLACES
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2016-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Asthma
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Weighted number of respondents people who answer “yes” both
|
||||||
|
to both of the following questions: “Have you ever been told by a doctor,
|
||||||
|
nurse, or other health professional that you have asthma?” and the question
|
||||||
|
“Do you still have asthma?”
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.cdc.gov/places/index.html"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Centers for Disease Control and Prevention (CDC) PLACES
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2016-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Heart disase
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
People ages 18 years and up who report ever having been told
|
||||||
|
by a doctor, nurse, or other health professionals that they had angina or
|
||||||
|
coronary heart disease.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.cdc.gov/places/index.html"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Centers for Disease Control and Prevention (CDC) PLACES
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2016-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Life expectancy
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Estimated years of life expectancy.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.cdc.gov/nchs/nvss/usaleep/usaleep.html#data"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Centers for Disease Control and Prevention (CDC)
|
||||||
|
US Small-area Life Expectancy Estimates Project
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2010-2015
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Traffic proximity and volume
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Count of vehicles (average annual daily traffic) at major roads
|
||||||
|
within 500 meters, divided by distance in meters (not km).
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Department of Transportation (DOT) traffic data
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2017
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
FEMA Risk Index Expected Annual Loss Score
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Average economic loss in dollars resulting from natural
|
||||||
|
hazards each year. It is calculated for each hazard type and quantifies
|
||||||
|
loss for relevant consequence types: buildings, people, and agriculture.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://hazards.fema.gov/nri/expected-annual-loss"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Federal Emergency Management Agency (FEMA)
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2014-2017
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Energy burden
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Average annual energy cost ($) divided by household income.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.energy.gov/eere/slsc/low-income-energy-affordability-data-lead-tool"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Department of Energy (DOE) LEAD Score
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2018
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Housing cost burden
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Households that are low income and spend more than 30% of their
|
||||||
|
income to housing costs.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census tract
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.huduser.gov/portal/datasets/cp.html"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Department of Housing & Urban Development’s
|
||||||
|
(HUD) Comprehensive Housing Affordability Strategy dataset
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2013-2017
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Wastewater discharge
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
RSEI modeled Toxic Concentrations at stream segments within 500
|
||||||
|
meters, divided by distance in kilometers (km).
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.epa.gov/rsei"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Environmental Protection Agency (EPA) Risk-Screening
|
||||||
|
Environmental Indicators (RSEI) Model
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2020
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Lead paint
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Percent of housing units built pre-1960, used as an
|
||||||
|
indicator of potential lead paint exposure in homes.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.census.gov/programs-surveys/acs"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Census's American Community Survey
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2015-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
Diesel particulate matter
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Mixture of particles that is part of diesel exhaust in the air.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.census.gov/"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
U.S. Census Bureau
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
5-year estimates, 2015-2019
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3>
|
||||||
|
PM2.5
|
||||||
|
</h3>
|
||||||
|
<div>
|
||||||
|
What is it?
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
Fine inhalable particles, with diameters that are generally
|
||||||
|
2.5 micrometers and smaller.
|
||||||
|
</div>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data resolution:
|
||||||
|
</span>
|
||||||
|
Census block group
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data source:
|
||||||
|
</span>
|
||||||
|
<a
|
||||||
|
href="https://www.epa.gov/aboutepa/about-office-air-and-radiation-oar"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
Environmental Protection Agency (EPA) Office of Air
|
||||||
|
and Radiation (OAR) fusion of model and monitor data
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>
|
||||||
|
Data date range:
|
||||||
|
</span>
|
||||||
|
2017
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
|
|
|
||||||
|
|
@ -15,12 +15,12 @@ const HowYouCanHelp = () => {
|
||||||
},
|
},
|
||||||
youCanHelpInfoText: {
|
youCanHelpInfoText: {
|
||||||
id: 'youCanHelpInfoText.list.element.prefix',
|
id: 'youCanHelpInfoText.list.element.prefix',
|
||||||
defaultMessage: 'If you have helpful information, we’d love to',
|
defaultMessage: 'If you have helpful information, we would love to',
|
||||||
description: 'you can help info text ',
|
description: 'you can help info text ',
|
||||||
},
|
},
|
||||||
youCanHelpInfoLinkText: {
|
youCanHelpInfoLinkText: {
|
||||||
id: 'youCanHelpInfoLink.link.text',
|
id: 'youCanHelpInfoLink.link.text',
|
||||||
defaultMessage: 'get an email from you',
|
defaultMessage: 'recieve an email from you',
|
||||||
description: 'you can help info text ',
|
description: 'you can help info text ',
|
||||||
},
|
},
|
||||||
youCanHelpDataMethPrefixText: {
|
youCanHelpDataMethPrefixText: {
|
||||||
|
|
@ -30,7 +30,7 @@ const HowYouCanHelp = () => {
|
||||||
},
|
},
|
||||||
youCanHelpDataMethLinkText: {
|
youCanHelpDataMethLinkText: {
|
||||||
id: 'youCanHelpDataMethLinkText.link.text',
|
id: 'youCanHelpDataMethLinkText.link.text',
|
||||||
defaultMessage: 'Data & methodology',
|
defaultMessage: 'Data and methodology',
|
||||||
description: 'Data & methodology link',
|
description: 'Data & methodology link',
|
||||||
},
|
},
|
||||||
youCanHelpDataMethSuffixText: {
|
youCanHelpDataMethSuffixText: {
|
||||||
|
|
@ -40,7 +40,7 @@ const HowYouCanHelp = () => {
|
||||||
},
|
},
|
||||||
youCanHelpSharingPrefixText: {
|
youCanHelpSharingPrefixText: {
|
||||||
id: 'youCanHelpSharingPrefixText.link.prefix.text',
|
id: 'youCanHelpSharingPrefixText.link.prefix.text',
|
||||||
defaultMessage: 'Find your community and',
|
defaultMessage: 'Find your community of interest and',
|
||||||
description: 'find your community',
|
description: 'find your community',
|
||||||
},
|
},
|
||||||
youCanHelpSharingLinkText: {
|
youCanHelpSharingLinkText: {
|
||||||
|
|
|
||||||
|
|
@ -9,11 +9,11 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<div>
|
<div>
|
||||||
If you have helpful information, we’d love to
|
If you have helpful information, we would love to
|
||||||
<a
|
<a
|
||||||
href="mailto:screeningtool.feedback@usds.gov"
|
href="mailto:screeningtool.feedback@usds.gov"
|
||||||
>
|
>
|
||||||
get an email from you
|
recieve an email from you
|
||||||
</a>
|
</a>
|
||||||
.
|
.
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -24,14 +24,14 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
|
||||||
<a
|
<a
|
||||||
href="/en/methodology"
|
href="/en/methodology"
|
||||||
>
|
>
|
||||||
Data & methodology
|
Data and methodology
|
||||||
</a>
|
</a>
|
||||||
and send us feedback
|
and send us feedback
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<div>
|
<div>
|
||||||
Find your community and
|
Find your community of interest and
|
||||||
<a
|
<a
|
||||||
href="mailto:screeningtool.feedback@usds.gov"
|
href="mailto:screeningtool.feedback@usds.gov"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import {
|
||||||
NavMenuButton,
|
NavMenuButton,
|
||||||
PrimaryNav,
|
PrimaryNav,
|
||||||
GovBanner,
|
GovBanner,
|
||||||
|
Tag,
|
||||||
} from '@trussworks/react-uswds';
|
} from '@trussworks/react-uswds';
|
||||||
import {defineMessages} from 'react-intl';
|
import {defineMessages} from 'react-intl';
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
|
|
@ -120,6 +121,7 @@ const J40Header = () => {
|
||||||
<span className={'usa-logo__text j40-title'}>
|
<span className={'usa-logo__text j40-title'}>
|
||||||
<span className={'j40-title-line1'}>{titleL1}</span><br/>
|
<span className={'j40-title-line1'}>{titleL1}</span><br/>
|
||||||
<span className={'j40-title-line2'}>{titleL2}</span>
|
<span className={'j40-title-line2'}>{titleL2}</span>
|
||||||
|
<Tag className={'j40'}>Beta</Tag>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<NavMenuButton
|
<NavMenuButton
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,5 @@
|
||||||
@import "./utils.scss";
|
@import "./utils.scss";
|
||||||
|
|
||||||
.mapAndInfoPanelContainer {
|
|
||||||
display: flex;
|
|
||||||
height: 81vh; //desktop
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobileBreakpoint) {
|
|
||||||
flex-direction: column;
|
|
||||||
height: fit-content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.j40Popup {
|
.j40Popup {
|
||||||
width: 375px;
|
width: 375px;
|
||||||
}
|
}
|
||||||
|
|
@ -31,7 +21,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.mapInfoPanel {
|
.mapInfoPanel {
|
||||||
border: 2px solid $sidePanelBorderColor;
|
border: 1px solid $sidePanelBorderColor;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-width: 22rem;
|
height: 90vh;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
declare namespace J40MapModuleScssNamespace {
|
declare namespace J40MapModuleScssNamespace {
|
||||||
export interface IJ40MapModuleScss {
|
export interface IJ40MapModuleScss {
|
||||||
mapAndInfoPanelContainer: string;
|
|
||||||
j40Popup: string;
|
j40Popup: string;
|
||||||
territoryFocusButton: string;
|
territoryFocusButton: string;
|
||||||
territoryFocusContainer: string;
|
territoryFocusContainer: string;
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,8 @@ import ReactMapGL, {
|
||||||
import bbox from '@turf/bbox';
|
import bbox from '@turf/bbox';
|
||||||
import * as d3 from 'd3-ease';
|
import * as d3 from 'd3-ease';
|
||||||
import {isMobile} from 'react-device-detect';
|
import {isMobile} from 'react-device-detect';
|
||||||
|
import {Grid} from '@trussworks/react-uswds';
|
||||||
|
import {useWindowSize} from 'react-use';
|
||||||
|
|
||||||
// Contexts:
|
// Contexts:
|
||||||
import {useFlags} from '../contexts/FlagContext';
|
import {useFlags} from '../contexts/FlagContext';
|
||||||
|
|
@ -64,6 +66,7 @@ const J40Map = ({location}: IJ40Interface) => {
|
||||||
const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
|
const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
|
||||||
const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
|
const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
|
||||||
const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false);
|
const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false);
|
||||||
|
const {width: windowWidth} = useWindowSize();
|
||||||
|
|
||||||
const mapRef = useRef<MapRef>(null);
|
const mapRef = useRef<MapRef>(null);
|
||||||
const flags = useFlags();
|
const flags = useFlags();
|
||||||
|
|
@ -170,94 +173,99 @@ const J40Map = ({location}: IJ40Interface) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.mapAndInfoPanelContainer}>
|
<>
|
||||||
<ReactMapGL
|
<Grid col={12} desktop={{col: 9}}>
|
||||||
{...viewport}
|
<ReactMapGL
|
||||||
mapStyle={makeMapStyle(flags)}
|
{...viewport}
|
||||||
minZoom={constants.GLOBAL_MIN_ZOOM}
|
mapStyle={makeMapStyle(flags)}
|
||||||
maxZoom={constants.GLOBAL_MAX_ZOOM}
|
minZoom={constants.GLOBAL_MIN_ZOOM}
|
||||||
mapOptions={{hash: true}}
|
maxZoom={constants.GLOBAL_MAX_ZOOM}
|
||||||
width="100%"
|
mapOptions={{hash: true}}
|
||||||
height={isMobileMapState ? '44vh' : '100%'}
|
width="100%"
|
||||||
dragRotate={false}
|
height={windowWidth < 1024 ? '44vh' : '100%'}
|
||||||
touchRotate={false}
|
dragRotate={false}
|
||||||
interactiveLayerIds={[constants.HIGH_SCORE_LAYER_NAME]}
|
touchRotate={false}
|
||||||
onViewportChange={setViewport}
|
interactiveLayerIds={[constants.HIGH_SCORE_LAYER_NAME]}
|
||||||
onClick={onClick}
|
onViewportChange={setViewport}
|
||||||
onLoad={onLoad}
|
onClick={onClick}
|
||||||
onTransitionStart={onTransitionStart}
|
onLoad={onLoad}
|
||||||
onTransitionEnd={onTransitionEnd}
|
onTransitionStart={onTransitionStart}
|
||||||
ref={mapRef}
|
onTransitionEnd={onTransitionEnd}
|
||||||
data-cy={'reactMapGL'}
|
ref={mapRef}
|
||||||
>
|
data-cy={'reactMapGL'}
|
||||||
<Source
|
|
||||||
id={constants.HIGH_SCORE_SOURCE_NAME}
|
|
||||||
type="vector"
|
|
||||||
promoteId={constants.GEOID_PROPERTY}
|
|
||||||
tiles={[constants.FEATURE_TILE_HIGH_ZOOM_URL]}
|
|
||||||
maxzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
|
||||||
minzoom={constants.GLOBAL_MAX_ZOOM_HIGH}
|
|
||||||
>
|
>
|
||||||
<Layer
|
<Source
|
||||||
id={constants.CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME}
|
id={constants.HIGH_SCORE_SOURCE_NAME}
|
||||||
source-layer={constants.SCORE_SOURCE_LAYER}
|
type="vector"
|
||||||
type='line'
|
promoteId={constants.GEOID_PROPERTY}
|
||||||
paint={{
|
tiles={[constants.FEATURE_TILE_HIGH_ZOOM_URL]}
|
||||||
'line-color': constants.DEFAULT_OUTLINE_COLOR,
|
maxzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
||||||
'line-width': constants.CURRENTLY_SELECTED_FEATURE_LAYER_WIDTH,
|
minzoom={constants.GLOBAL_MAX_ZOOM_HIGH}
|
||||||
'line-opacity': constants.CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY,
|
|
||||||
}}
|
|
||||||
minzoom={constants.GLOBAL_MIN_ZOOM_HIGHLIGHT}
|
|
||||||
maxzoom={constants.GLOBAL_MAX_ZOOM_HIGHLIGHT}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Layer
|
|
||||||
id={constants.BLOCK_GROUP_BOUNDARY_LAYER_NAME}
|
|
||||||
type='line'
|
|
||||||
source-layer={constants.SCORE_SOURCE_LAYER}
|
|
||||||
paint={{
|
|
||||||
'line-color': constants.BORDER_HIGHLIGHT_COLOR,
|
|
||||||
'line-width': constants.HIGHLIGHT_BORDER_WIDTH,
|
|
||||||
}}
|
|
||||||
filter={filter}
|
|
||||||
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
|
||||||
/>
|
|
||||||
</Source>
|
|
||||||
{('fs' in flags && detailViewData && !transitionInProgress) && (
|
|
||||||
<Popup
|
|
||||||
className={styles.j40Popup}
|
|
||||||
tipSize={5}
|
|
||||||
anchor="top"
|
|
||||||
longitude={detailViewData.longitude!}
|
|
||||||
latitude={detailViewData.latitude!}
|
|
||||||
closeOnClick={true}
|
|
||||||
onClose={setDetailViewData}
|
|
||||||
captureScroll={true}
|
|
||||||
>
|
>
|
||||||
<AreaDetail properties={detailViewData.properties} />
|
<Layer
|
||||||
</Popup>
|
id={constants.CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME}
|
||||||
)}
|
source-layer={constants.SCORE_SOURCE_LAYER}
|
||||||
<NavigationControl
|
type='line'
|
||||||
showCompass={false}
|
paint={{
|
||||||
className={styles.navigationControl}
|
'line-color': constants.DEFAULT_OUTLINE_COLOR,
|
||||||
|
'line-width': constants.CURRENTLY_SELECTED_FEATURE_LAYER_WIDTH,
|
||||||
|
'line-opacity': constants.CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY,
|
||||||
|
}}
|
||||||
|
minzoom={constants.GLOBAL_MIN_ZOOM_HIGHLIGHT}
|
||||||
|
maxzoom={constants.GLOBAL_MAX_ZOOM_HIGHLIGHT}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Layer
|
||||||
|
id={constants.BLOCK_GROUP_BOUNDARY_LAYER_NAME}
|
||||||
|
type='line'
|
||||||
|
source-layer={constants.SCORE_SOURCE_LAYER}
|
||||||
|
paint={{
|
||||||
|
'line-color': constants.BORDER_HIGHLIGHT_COLOR,
|
||||||
|
'line-width': constants.HIGHLIGHT_BORDER_WIDTH,
|
||||||
|
}}
|
||||||
|
filter={filter}
|
||||||
|
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
||||||
|
/>
|
||||||
|
</Source>
|
||||||
|
{('fs' in flags && detailViewData && !transitionInProgress) && (
|
||||||
|
<Popup
|
||||||
|
className={styles.j40Popup}
|
||||||
|
tipSize={5}
|
||||||
|
anchor="top"
|
||||||
|
longitude={detailViewData.longitude!}
|
||||||
|
latitude={detailViewData.latitude!}
|
||||||
|
closeOnClick={true}
|
||||||
|
onClose={setDetailViewData}
|
||||||
|
captureScroll={true}
|
||||||
|
>
|
||||||
|
<AreaDetail properties={detailViewData.properties} />
|
||||||
|
</Popup>
|
||||||
|
)}
|
||||||
|
<NavigationControl
|
||||||
|
showCompass={false}
|
||||||
|
className={styles.navigationControl}
|
||||||
|
/>
|
||||||
|
{'gl' in flags ? <GeolocateControl
|
||||||
|
className={styles.geolocateControl}
|
||||||
|
positionOptions={{enableHighAccuracy: true}}
|
||||||
|
onGeolocate={onGeolocate}
|
||||||
|
// @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492
|
||||||
|
onClick={onClickGeolocate}
|
||||||
|
/> : ''}
|
||||||
|
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
||||||
|
<TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
|
||||||
|
{'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
|
||||||
|
</ReactMapGL>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid col={12} desktop={{col: 3}} className={styles.mapInfoPanel}>
|
||||||
|
<MapInfoPanel
|
||||||
|
className={styles.mapInfoPanel}
|
||||||
|
featureProperties={detailViewData?.properties}
|
||||||
|
selectedFeatureId={selectedFeature?.id}
|
||||||
/>
|
/>
|
||||||
{'gl' in flags ? <GeolocateControl
|
</Grid>
|
||||||
className={styles.geolocateControl}
|
</>
|
||||||
positionOptions={{enableHighAccuracy: true}}
|
|
||||||
onGeolocate={onGeolocate}
|
|
||||||
// @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492
|
|
||||||
onClick={onClickGeolocate}
|
|
||||||
/> : ''}
|
|
||||||
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
|
||||||
<TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
|
|
||||||
{'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
|
|
||||||
</ReactMapGL>
|
|
||||||
<MapInfoPanel
|
|
||||||
className={styles.mapInfoPanel}
|
|
||||||
featureProperties={detailViewData?.properties}
|
|
||||||
selectedFeatureId={selectedFeature?.id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,114 +1,21 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import {Tooltip} from '@trussworks/react-uswds';
|
|
||||||
|
|
||||||
import * as styles from './mapLegend.module.scss';
|
import * as styles from './mapLegend.module.scss';
|
||||||
import * as constants from '../../data/constants';
|
import * as constants from '../../data/constants';
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
import infoIcon from '/node_modules/uswds/dist/img/usa-icons/info_outline.svg';
|
|
||||||
|
|
||||||
// Todo VS: This information will be used in the re-design of the tool-tip
|
|
||||||
// const getToolTipContent = (type:string) => {
|
|
||||||
// const intl = useIntl();
|
|
||||||
// const messages = defineMessages({
|
|
||||||
// priorityHeader: {
|
|
||||||
// id: 'tooltip.info.priority.header',
|
|
||||||
// defaultMessage: constants.PRIORITIZED_COMMUNITY,
|
|
||||||
// description: 'the header of the prioritized community tooltip',
|
|
||||||
// },
|
|
||||||
// thresholdHeader: {
|
|
||||||
// id: 'tooltip.info.threshold.header',
|
|
||||||
// defaultMessage: constants.THRESHOLD_COMMUNITY,
|
|
||||||
// description: 'the header of the threshold community tooltip',
|
|
||||||
// },
|
|
||||||
// priorityText: {
|
|
||||||
// id: 'tooltip.info.priority.text',
|
|
||||||
// defaultMessage: 'A prioritized community is one that has a cumulative index score of Xth ' +
|
|
||||||
// 'percentile and above. 40% of the benefits from investments outlined by the ' +
|
|
||||||
// 'Justice40 Initiative should go to prioritized communities.',
|
|
||||||
// description: 'the text of the prioritized community tooltip',
|
|
||||||
// },
|
|
||||||
// thresholdText: {
|
|
||||||
// id: 'tooltip.info.threshold.text',
|
|
||||||
// defaultMessage: 'Communities with a cumulative index score between Y - X.99th percentile are ' +
|
|
||||||
// 'considered threshold communities. While these communities are currently not considered a ' +
|
|
||||||
// 'prioritized community, this may change based on updates to the scoring method.',
|
|
||||||
// description: 'the text of the threshold community tooltip',
|
|
||||||
// },
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return (type === 'prioritized') ?
|
|
||||||
// (
|
|
||||||
// <div>
|
|
||||||
// <h2>{intl.formatMessage(messages.priorityHeader)}</h2>
|
|
||||||
// <p className={styles.legendTooltipText}>{intl.formatMessage(messages.priorityText)}</p>
|
|
||||||
// </div>
|
|
||||||
// ) :
|
|
||||||
// (
|
|
||||||
// <div>
|
|
||||||
// <h2>{intl.formatMessage(messages.thresholdHeader)}</h2>
|
|
||||||
// <p className={styles.legendTooltipText}>{intl.formatMessage(messages.thresholdText)}</p>
|
|
||||||
// </div>
|
|
||||||
// );
|
|
||||||
// };
|
|
||||||
|
|
||||||
const MapLegend = () => {
|
const MapLegend = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
// Type definitions required for @trussworks tooltip. This type defines the div that wraps the icon.
|
|
||||||
// This allows to pass children and other attributes.
|
|
||||||
type IconWrapperProps = React.PropsWithChildren<{
|
|
||||||
className?: string
|
|
||||||
}> &
|
|
||||||
JSX.IntrinsicElements['div'] &
|
|
||||||
React.RefAttributes<HTMLDivElement>
|
|
||||||
const IconWrapper: React.ForwardRefExoticComponent<IconWrapperProps> = React.forwardRef(
|
|
||||||
({className, children, ...tooltipProps}: IconWrapperProps, ref) => (
|
|
||||||
<div ref={ref} className={styles.infoIconWrapper} {...tooltipProps}>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
);
|
|
||||||
IconWrapper.displayName = 'custom info wrapper';
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.legendContainer}>
|
<div className={styles.legendContainer}>
|
||||||
<h6>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h6>
|
<div className={styles.colorSwatch} />
|
||||||
<div className={styles.swatchContainer}>
|
<div>
|
||||||
<div className={styles.legendItem}>
|
<h4>
|
||||||
<div className={styles.colorSwatch} id={styles.prioritized} />
|
{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)}
|
||||||
<span>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)}</span>
|
</h4>
|
||||||
|
<p className={'secondary'}>
|
||||||
{/* Using @trussworks tooltip */}
|
{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_DESCRIPT)}
|
||||||
<Tooltip<IconWrapperProps>
|
</p>
|
||||||
label={`
|
|
||||||
Communities that have cumulative
|
|
||||||
index score of Xth percentile
|
|
||||||
and above
|
|
||||||
`}
|
|
||||||
position='left'
|
|
||||||
asCustom={IconWrapper}>
|
|
||||||
<img className={styles.infoIcon} src={infoIcon} />
|
|
||||||
</Tooltip>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div className={styles.legendItem}>
|
|
||||||
<div className={styles.colorSwatch} id={styles.threshold} />
|
|
||||||
<span>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL)}</span>
|
|
||||||
|
|
||||||
{/* Using @trussworks tooltip */}
|
|
||||||
<Tooltip<IconWrapperProps>
|
|
||||||
label={`
|
|
||||||
Communities with a cumulative
|
|
||||||
index score between Y - X.99th
|
|
||||||
percentile
|
|
||||||
`}
|
|
||||||
position='left'
|
|
||||||
asCustom={IconWrapper}>
|
|
||||||
<img className={styles.infoIcon} src={infoIcon} />
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -6,88 +6,23 @@ $max-color: rgba(26, 68, 128, 0.6);
|
||||||
$alertInfoColor: #e7f6f8;
|
$alertInfoColor: #e7f6f8;
|
||||||
|
|
||||||
.legendContainer {
|
.legendContainer {
|
||||||
margin: 1rem 1.2rem 1rem 2.5rem;
|
|
||||||
font-size: 0.8em;
|
|
||||||
border: 1px solid #8c9297;
|
|
||||||
padding: 1rem 1.8rem 0;
|
|
||||||
flex: 1;
|
|
||||||
color: $headingFontColor;
|
|
||||||
|
|
||||||
.legendTooltipText {
|
|
||||||
max-width: 14rem;
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobileBreakpoint) {
|
|
||||||
margin: 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.swatchContainer {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
margin: 1rem 0 1rem 2.5rem;
|
||||||
justify-content: space-between;
|
border: 1px solid #DFE1E2;
|
||||||
|
padding: .5rem 1.5rem 1rem 1.5rem;
|
||||||
|
|
||||||
@media screen and (max-width: $mobileBreakpoint) {
|
@media screen and (max-width: 640px) {
|
||||||
flex-wrap: wrap;
|
margin: 1rem 0 0;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendItem {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
.infoIconWrapper {
|
|
||||||
margin-left: 0.8rem;
|
|
||||||
.infoIcon {
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobileBreakpoint) {
|
|
||||||
padding-left: 3rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.colorSwatch {
|
.colorSwatch {
|
||||||
|
flex: 1 0 2rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 1.7rem;
|
height: 1.7rem;
|
||||||
width: 1.7rem;
|
width: 1.7rem;
|
||||||
margin-right: 10px;
|
margin: 2rem 1.5rem 2rem 0;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
|
||||||
|
|
||||||
#prioritized {
|
|
||||||
background-color: $max-color;
|
background-color: $max-color;
|
||||||
}
|
border: 2px solid $featureSelectBorderColor;
|
||||||
|
|
||||||
#threshold {
|
|
||||||
background-color: $med-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nonPrioritized {
|
|
||||||
background-color: $min-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legendTooltipTheme {
|
|
||||||
color: $headingFontColor !important;
|
|
||||||
background-color: white !important;
|
|
||||||
opacity: 1 !important;
|
|
||||||
border: $sidePanelBorder !important;
|
|
||||||
box-shadow: 0 0 11px rgba(33, 33, 33, 0.2) !important;
|
|
||||||
&.place-top {
|
|
||||||
&:after {
|
|
||||||
border-top-color: white !important;
|
|
||||||
border-top-style: solid !important;
|
|
||||||
border-top-width: 6px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,7 @@
|
||||||
declare namespace HowYouCanHelpModuleScssNamespace {
|
declare namespace HowYouCanHelpModuleScssNamespace {
|
||||||
export interface IHowYouCanHelpModuleScss {
|
export interface IHowYouCanHelpModuleScss {
|
||||||
legendContainer: string;
|
legendContainer: string;
|
||||||
swatchContainer: string;
|
|
||||||
colorSwatch: string;
|
colorSwatch: string;
|
||||||
prioritized: string,
|
|
||||||
threshold: string,
|
|
||||||
nonPrioritized: string,
|
|
||||||
legendItem: string,
|
|
||||||
infoIcon: string,
|
|
||||||
legendTooltipText: string,
|
|
||||||
legendTooltipTheme: string,
|
|
||||||
infoIconWrapper: string,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`rendering of the MapLegend checks if snapshots have changed 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div>
|
||||||
|
<div />
|
||||||
|
<div>
|
||||||
|
<h4>
|
||||||
|
Draft community of focus
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
class="secondary"
|
||||||
|
>
|
||||||
|
These communities are identified as experiencing disadvantages that merit the focus of certain Federal investments, including through the Justice40 Initiative
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
@ -3,23 +3,16 @@ import {render} from '@testing-library/react';
|
||||||
|
|
||||||
import {LocalizedComponent} from '../../../test/testHelpers';
|
import {LocalizedComponent} from '../../../test/testHelpers';
|
||||||
import MapLegend from '../index';
|
import MapLegend from '../index';
|
||||||
import * as constants from '../../../data/constants';
|
|
||||||
|
|
||||||
describe('rendering of the MapLegend', () => {
|
describe('rendering of the MapLegend', () => {
|
||||||
const {getAllByText} = render(
|
const {asFragment} = render(
|
||||||
<LocalizedComponent>
|
<LocalizedComponent>
|
||||||
<MapLegend />
|
<MapLegend />
|
||||||
</LocalizedComponent>,
|
</LocalizedComponent>,
|
||||||
);
|
);
|
||||||
|
|
||||||
// Snapshot testing was unusable as the Tooltip lib rendered hash based class
|
it('checks if snapshots have changed', () => {
|
||||||
// names on each render
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
|
||||||
const intlPriorityLabel = constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL.defaultMessage;
|
|
||||||
const intlThresholdLabel = constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL.defaultMessage;
|
|
||||||
|
|
||||||
it('checks if various objects in the component rendered', () => {
|
|
||||||
expect(getAllByText(intlPriorityLabel)[0]).toHaveTextContent(intlPriorityLabel);
|
|
||||||
expect(getAllByText(intlThresholdLabel)[0]).toHaveTextContent(intlThresholdLabel);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import {defineMessages} from 'react-intl';
|
import {defineMessages} from 'react-intl';
|
||||||
|
import {Grid} from '@trussworks/react-uswds';
|
||||||
|
|
||||||
import J40Map from '../J40Map';
|
import J40Map from '../J40Map';
|
||||||
|
|
||||||
|
|
@ -17,25 +18,37 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
downloadLinkText: {
|
downloadLinkText: {
|
||||||
id: 'mapwrapper.download.link',
|
id: 'mapwrapper.download.link',
|
||||||
defaultMessage: 'Download the draft list of prioritized communities (pre-decisional) and datasets used',
|
defaultMessage: 'Download the draft list of communities of focus and datasets used',
|
||||||
description: 'download link for datasets',
|
description: 'download link for datasets',
|
||||||
},
|
},
|
||||||
downloadContents: {
|
downloadContents: {
|
||||||
id: 'mapwrapper.download.contents',
|
id: 'mapwrapper.download.contents',
|
||||||
defaultMessage: 'ZIP file will contain one .xlsx, one .csv and one .pdf (30 MB).',
|
defaultMessage: 'ZIP file will contain one .xlsx, one .csv, and one .pdf (30 MB).',
|
||||||
description: 'download link contents',
|
description: 'download link contents',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
<Grid row>
|
||||||
<J40Map location={location}/>
|
<Grid col={12}>
|
||||||
<div className={styles.mapCaptionTextLink}>
|
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
||||||
<a href={constants.DOWNLOAD_ZIP_URL}>
|
</Grid>
|
||||||
{intl.formatMessage(messages.downloadLinkText)}
|
</Grid>
|
||||||
</a>
|
|
||||||
</div>
|
<Grid row>
|
||||||
<div>{intl.formatMessage(messages.downloadContents)}</div>
|
<J40Map location={location}/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid row>
|
||||||
|
<Grid col={6}>
|
||||||
|
<div className={styles.mapCaptionTextLink}>
|
||||||
|
<a href={constants.DOWNLOAD_ZIP_URL}>
|
||||||
|
{intl.formatMessage(messages.downloadLinkText)}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>{intl.formatMessage(messages.downloadContents)}</div>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,122 +2,120 @@
|
||||||
|
|
||||||
exports[`rendering of the component should match the snapshot of the MapIntroduction component 1`] = `
|
exports[`rendering of the component should match the snapshot of the MapIntroduction component 1`] = `
|
||||||
<DocumentFragment>
|
<DocumentFragment>
|
||||||
|
<h2>
|
||||||
|
Methodology
|
||||||
|
</h2>
|
||||||
<div
|
<div
|
||||||
class="j40-process-list-wrapper"
|
class="grid-row"
|
||||||
|
data-testid="grid"
|
||||||
>
|
>
|
||||||
<ul>
|
<div
|
||||||
<li>
|
class="grid-col-7"
|
||||||
<section>
|
data-testid="grid"
|
||||||
<h3
|
>
|
||||||
class="j40-item-list-title"
|
<p>
|
||||||
>
|
The methodology for identifying communities of focus is calculated at the census block group level. Census block geographical boundaries are determined by the U.S. Census Bureau once every ten years. This tool utilizes the census block boundaries from 2010.
|
||||||
Gather datasets
|
</p>
|
||||||
</h3>
|
<p>
|
||||||
<h4
|
The following describes the process for identifying disadvantaged communities.
|
||||||
class="j40-item-list-subtitle"
|
</p>
|
||||||
>
|
</div>
|
||||||
Data inputs
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
The cumulative index score includes the following equally weighted inputs.
|
|
||||||
</p>
|
|
||||||
<ul
|
|
||||||
class="j40-process-nested-list"
|
|
||||||
>
|
|
||||||
<li>
|
|
||||||
Poverty
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Less than high school education
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Linguistic isolation
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Unemployment rate
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
Housing burden
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h4
|
|
||||||
class="j40-item-list-subtitle"
|
|
||||||
>
|
|
||||||
Combining data from different geographic units
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile.
|
|
||||||
</p>
|
|
||||||
<h4
|
|
||||||
class="j40-item-list-subtitle"
|
|
||||||
>
|
|
||||||
Normalizing data
|
|
||||||
</h4>
|
|
||||||
<p>
|
|
||||||
The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<section>
|
|
||||||
<h3>
|
|
||||||
Calculate cumulative index score
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
To combine all variables into a single cumulative index score, we average the normalized values across indicators.
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="grid-container"
|
|
||||||
data-testid="gridContainer"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="grid-row j40-math-division-container"
|
|
||||||
data-testid="grid"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="grid-col j40-math-eq-left-side grid-col-fill"
|
|
||||||
data-testid="grid"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="j40-math-eq-numerator"
|
|
||||||
>
|
|
||||||
Dataset 1 + Dataset 2 + ... + Dataset N
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="j40-math-eq-denominator"
|
|
||||||
>
|
|
||||||
# of datasets
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="grid-col j40-math-eq-middle grid-col-auto"
|
|
||||||
data-testid="grid"
|
|
||||||
>
|
|
||||||
=
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="grid-col j40-math-eq-right-side grid-col-fill"
|
|
||||||
data-testid="grid"
|
|
||||||
>
|
|
||||||
Cumulative index score
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<section>
|
|
||||||
<h3
|
|
||||||
class="j40-item-list-title"
|
|
||||||
>
|
|
||||||
Assign priority
|
|
||||||
</h3>
|
|
||||||
<p>
|
|
||||||
Census block groups are sorted by their cumulative index score from highest to lowest. Census block groups that are in the top 25 percentile (i.e. have a cumulative index score in the 75 - 100th percentile) will be considered the prioritized communities.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
<ol
|
||||||
|
class="usa-process-list"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
class="usa-process-list__item"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="usa-process-list__heading"
|
||||||
|
data-testid="processListHeading"
|
||||||
|
>
|
||||||
|
Gather datasets
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<h4>
|
||||||
|
Data inputs
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
The methodology includes the following inputs that are equally weighted.
|
||||||
|
</p>
|
||||||
|
<h4>
|
||||||
|
Percent of Area Median Income
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
If a census block group is in a metropolitan area, this value is the median income of the census block group calculated as a percent of the metropolitan area’s median income.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
If a census block group is not in a metropolitan area, this value is the median income of the census block group calculated as a percent of the state’s median income.
|
||||||
|
</p>
|
||||||
|
<h4>
|
||||||
|
Percent of households below or at 100% of the federal poverty line
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
This is the percent of households in a state with a household income below or at 100% of the
|
||||||
|
<a
|
||||||
|
href="https://www.census.gov/topics/income-poverty/poverty/guidance/poverty-measures.html"
|
||||||
|
rel="noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
federal poverty line
|
||||||
|
</a>
|
||||||
|
. This federal poverty line is calculated based on the composition of each household (e.g., based on household size), but it does not vary geographically.
|
||||||
|
</p>
|
||||||
|
<h4>
|
||||||
|
The high school degree achievement rate for adults 25 years and older
|
||||||
|
</h4>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
The percent of individuals who are 25 or older who have received a high school degree.
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
<li
|
||||||
|
class="usa-process-list__item"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="usa-process-list__heading"
|
||||||
|
data-testid="processListHeading"
|
||||||
|
>
|
||||||
|
Current Formula
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
Under the existing formula, a census block group will be considered a community of focus if:
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
(The median income is <80% of the area median income OR
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
households living in poverty (at or below 100% of the federal poverty level) is >20%)
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
AND
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
class="flush"
|
||||||
|
>
|
||||||
|
The high school degree achievement rate for adults 25 years and older is <95%
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,96 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {GridContainer, Grid} from '@trussworks/react-uswds';
|
import {
|
||||||
|
ProcessList,
|
||||||
|
ProcessListItem,
|
||||||
|
ProcessListHeading,
|
||||||
|
Grid,
|
||||||
|
} from '@trussworks/react-uswds';
|
||||||
|
|
||||||
const ScoreStepsList = () => {
|
const ScoreStepsList = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={'j40-process-list-wrapper'}>
|
<h2>Methodology</h2>
|
||||||
<ul>
|
<Grid row>
|
||||||
<li>
|
<Grid col={7}>
|
||||||
<section>
|
<p>
|
||||||
<h3 className={'j40-item-list-title'}>Gather datasets</h3>
|
The methodology for identifying communities of focus is calculated at the
|
||||||
<h4 className={'j40-item-list-subtitle'}>Data inputs</h4>
|
census block group level. Census block geographical boundaries are determined
|
||||||
<p>
|
by the U.S. Census Bureau once every ten years. This tool utilizes the census
|
||||||
The cumulative index score includes the following equally
|
block boundaries from 2010.
|
||||||
weighted inputs.
|
</p>
|
||||||
</p>
|
<p>
|
||||||
|
The following describes the process for identifying disadvantaged communities.
|
||||||
|
</p>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
<ul className={'j40-process-nested-list'}>
|
<ProcessList>
|
||||||
<li>Poverty</li>
|
|
||||||
<li>Less than high school education</li>
|
|
||||||
<li>Linguistic isolation</li>
|
|
||||||
<li>Unemployment rate</li>
|
|
||||||
<li>Housing burden</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
|
<ProcessListItem>
|
||||||
|
<ProcessListHeading type="h4">Gather datasets</ProcessListHeading>
|
||||||
|
<p>{' '}</p>
|
||||||
|
<h4>
|
||||||
|
Data inputs
|
||||||
|
</h4>
|
||||||
|
<p className={'flush'}>
|
||||||
|
The methodology includes the following inputs that are equally weighted.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h4 className={'j40-item-list-subtitle'}>
|
<h4>
|
||||||
Combining data from different geographic units
|
Percent of Area Median Income
|
||||||
</h4>
|
</h4>
|
||||||
<p>
|
<p className={'flush'}>
|
||||||
Some data is not available at the census block group level and
|
If a census block group is in a metropolitan area, this value is the
|
||||||
is instead only available for larger units such as census tracts
|
median income of the census block group calculated as a percent of
|
||||||
or counties. In these cases, all census block groups will get an
|
the metropolitan area’s median income.
|
||||||
even contribution from the larger unit. For example, if a census
|
</p>
|
||||||
tract scores 90th percentile on an indicator, then all census
|
<p>
|
||||||
block groups within that tract will receive a value of 90th
|
If a census block group is not in a metropolitan area, this value is
|
||||||
percentile.
|
the median income of the census block group calculated as a percent
|
||||||
</p>
|
of the state’s median income.
|
||||||
<h4 className={'j40-item-list-subtitle'}>Normalizing data</h4>
|
</p>
|
||||||
<p>
|
|
||||||
The range of the data that makes up the score varies, so the
|
|
||||||
data must be normalized so that each data indicator can be more
|
|
||||||
equally weighted. Min-max normalization is utilized, where the
|
|
||||||
minimum value in the range of values for each dataset is set at
|
|
||||||
0, the maximum value is set at 1, and every other value is
|
|
||||||
transformed into a decimal between 0 and 1. For example, if the
|
|
||||||
minimum value for unemployment was 10 and the maximum value was
|
|
||||||
30, a value of 20 would be transformed to 0.5 since it is
|
|
||||||
halfway between 10 and 30.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
<h4>
|
||||||
<section>
|
Percent of households below or at 100% of the federal poverty line
|
||||||
<h3>Calculate cumulative index score</h3>
|
</h4>
|
||||||
<p>
|
<p className={'flush'}>
|
||||||
To combine all variables into a single cumulative index score,
|
This is the percent of households in a state with a household income
|
||||||
we average the normalized values across indicators.
|
below or at 100% of the <a href="https://www.census.gov/topics/income-poverty/poverty/guidance/poverty-measures.html" target="_blank" rel="noreferrer">federal poverty line</a>. This federal poverty line is
|
||||||
</p>
|
calculated based on the composition of each household (e.g., based on
|
||||||
|
household size), but it does not vary geographically.
|
||||||
|
</p>
|
||||||
|
<h4>
|
||||||
|
The high school degree achievement rate for adults 25 years and older
|
||||||
|
</h4>
|
||||||
|
<p className={'flush'}>
|
||||||
|
The percent of individuals who are 25 or older who have received a high school degree.
|
||||||
|
</p>
|
||||||
|
</ProcessListItem>
|
||||||
|
|
||||||
<GridContainer className={''}>
|
<ProcessListItem>
|
||||||
<Grid row className={'j40-math-division-container'}>
|
<ProcessListHeading type="h4">
|
||||||
<Grid col className={'j40-math-eq-left-side grid-col-fill'}>
|
Current Formula
|
||||||
<div className={'j40-math-eq-numerator'}>
|
</ProcessListHeading>
|
||||||
Dataset 1 + Dataset 2 + ... + Dataset N
|
<p>{' '}</p>
|
||||||
</div>
|
<p className={'flush'}>
|
||||||
<div className={'j40-math-eq-denominator'}>
|
Under the existing formula, a census block group will be considered a
|
||||||
# of datasets
|
community of focus if:
|
||||||
</div>
|
</p>
|
||||||
</Grid>
|
<p>
|
||||||
<Grid col className={'j40-math-eq-middle grid-col-auto'}>
|
(The median income is <80% of the area median income OR
|
||||||
=
|
</p>
|
||||||
</Grid>
|
<p className={'flush'}>
|
||||||
<Grid col className={'j40-math-eq-right-side grid-col-fill'}>
|
households living in poverty (at or below 100% of the federal poverty level) is >20%)
|
||||||
Cumulative index score
|
</p>
|
||||||
</Grid>
|
<p className={'flush'}>
|
||||||
</Grid>
|
AND
|
||||||
</GridContainer>
|
</p>
|
||||||
</section>
|
<p className={'flush'}>
|
||||||
</li>
|
The high school degree achievement rate for adults 25 years and older is <95%
|
||||||
|
</p>
|
||||||
|
</ProcessListItem>
|
||||||
|
|
||||||
<li>
|
</ProcessList>
|
||||||
<section>
|
|
||||||
<h3 className={'j40-item-list-title'}>Assign priority</h3>
|
|
||||||
<p>
|
|
||||||
Census block groups are sorted by their cumulative index score
|
|
||||||
from highest to lowest. Census block groups that are in the top
|
|
||||||
25 percentile (i.e. have a cumulative index score in the 75 -
|
|
||||||
100th percentile) will be considered the prioritized
|
|
||||||
communities.
|
|
||||||
</p>
|
|
||||||
</section>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
$sidePanelBorderColor: #f2f2f2;
|
$sidePanelBorderColor: #f2f2f2;
|
||||||
$sidePanelBorder: 2px solid $sidePanelBorderColor;
|
$sidePanelBorder: 2px solid $sidePanelBorderColor;
|
||||||
$mobileBreakpoint: 400px;
|
$mobileBreakpoint: 400px;
|
||||||
|
$featureSelectBorderColor: #00bde3;
|
||||||
|
|
||||||
//Styles with Dataset container
|
//Styles with Dataset container
|
||||||
$datasetContainerColor: #eef6fb;
|
$datasetContainerColor: #eef6fb;
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,17 @@ export const EDUCATION_PROPERTY_PERCENTILE =
|
||||||
`Percent individuals age 25 or over with less than high school degree (percentile)`;
|
`Percent individuals age 25 or over with less than high school degree (percentile)`;
|
||||||
export const COUNTY_NAME = 'County Name';
|
export const COUNTY_NAME = 'County Name';
|
||||||
export const STATE_NAME = 'State Name';
|
export const STATE_NAME = 'State Name';
|
||||||
|
export const DIABETES_PERCENTILE = 'Diagnosed diabetes among adults aged >=18 years (percentile)';
|
||||||
|
export const ASTHMA_PERCENTILE = 'Current asthma among adults aged >=18 years (percentile)';
|
||||||
|
export const HEART_PERCENTILE = 'Coronary heart disease among adults aged >=18 years (percentile)';
|
||||||
|
export const LIFE_PERCENTILE = 'Life expectancy (years) (percentile)';
|
||||||
|
export const TRAFFIC_PERCENTILE = 'Traffic proximity and volume (percentile)';
|
||||||
|
export const FEMA_PERCENTILE = 'FEMA Risk Index Expected Annual Loss Score (percentile)';
|
||||||
|
export const ENERGY_PERCENTILE = 'Energy burden (percentile)';
|
||||||
|
export const WASTEWATER_PERCENTILE = 'Wastewater discharge (percentile)';
|
||||||
|
export const LEAD_PAINT_PERCENTILE = 'Percent pre-1960s housing (lead paint indicator) (percentile)';
|
||||||
|
export const DIESEL_MATTER_PERCENTILE = 'Diesel particulate matter (percentile)';
|
||||||
|
export const PM25_PERCENTILE = 'Particulate matter (PM2.5) (percentile)';
|
||||||
|
|
||||||
|
|
||||||
// The name of the layer within the tiles that contains the score
|
// The name of the layer within the tiles that contains the score
|
||||||
|
|
@ -133,19 +144,15 @@ export const SCORE_BOUNDARY_PRIORITIZED = 0.75;
|
||||||
export const EXPLORE_TOOL_PAGE_TEXT = defineMessages({
|
export const EXPLORE_TOOL_PAGE_TEXT = defineMessages({
|
||||||
PRIORITY_LABEL: {
|
PRIORITY_LABEL: {
|
||||||
id: 'legend.info.priority.label',
|
id: 'legend.info.priority.label',
|
||||||
defaultMessage: 'Prioritized community',
|
defaultMessage: 'Draft community of focus',
|
||||||
description: 'the label of the prioritized community legend',
|
description: 'the label of the prioritized community legend',
|
||||||
},
|
},
|
||||||
THRESHOLD_LABEL: {
|
PRIORITY_DESCRIPT: {
|
||||||
id: 'legend.info.threshold.label',
|
id: 'legend.info.threshold.label',
|
||||||
defaultMessage: 'Threshold community',
|
defaultMessage: 'These communities are identified as experiencing disadvantages that merit' +
|
||||||
|
' the focus of certain Federal investments, including through the Justice40 Initiative',
|
||||||
description: 'the label of the threshold community legend',
|
description: 'the label of the threshold community legend',
|
||||||
},
|
},
|
||||||
LEGEND_LABEL: {
|
|
||||||
id: 'legend.colorkey.label',
|
|
||||||
defaultMessage: 'Color key',
|
|
||||||
description: 'the label of the key in the legend',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const isMobile = isMobileReactDeviceDetect;
|
export const isMobile = isMobileReactDeviceDetect;
|
||||||
|
|
|
||||||
|
|
@ -31,15 +31,6 @@ const CEJSTPage = ({location}: IMapPageProps) => {
|
||||||
defaultMessage: 'Explore the tool',
|
defaultMessage: 'Explore the tool',
|
||||||
description: 'explore the tool heading text',
|
description: 'explore the tool heading text',
|
||||||
},
|
},
|
||||||
exploreToolPageText: {
|
|
||||||
id: 'exploreTool.page.text',
|
|
||||||
defaultMessage: 'Zoom into the map to see which communities the tool has currently'+
|
|
||||||
'identified as prioritized (the top 25% of communities) or on the'+
|
|
||||||
'threshold. Learn more about the formula and datasets that were'+
|
|
||||||
'used to prioritize these communities on the',
|
|
||||||
description: 'explore the tool page text',
|
|
||||||
},
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (<Layout location={location} title={intl.formatMessage(messages.exploreToolTitleText)}>
|
return (<Layout location={location} title={intl.formatMessage(messages.exploreToolTitleText)}>
|
||||||
|
|
@ -53,7 +44,10 @@ const CEJSTPage = ({location}: IMapPageProps) => {
|
||||||
<Grid col={12} tablet={{col: 6}}>
|
<Grid col={12} tablet={{col: 6}}>
|
||||||
<section>
|
<section>
|
||||||
<p>
|
<p>
|
||||||
{intl.formatMessage(messages.exploreToolPageText)}
|
Zoom into the map to see communities of focus that can help Federal agencies
|
||||||
|
identify disadvantaged communities and to provide socioeconomic,
|
||||||
|
environmental, and climate information and data. Learn more about the methodology
|
||||||
|
and datasets that were used to determine these communities of focus on the
|
||||||
{` `}
|
{` `}
|
||||||
<Link to={'/methodology'}>Data & methodology</Link>
|
<Link to={'/methodology'}>Data & methodology</Link>
|
||||||
{` `}
|
{` `}
|
||||||
|
|
@ -65,15 +59,13 @@ const CEJSTPage = ({location}: IMapPageProps) => {
|
||||||
<MapLegend />
|
<MapLegend />
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
</J40MainGridContainer>
|
||||||
|
|
||||||
<Grid row>
|
<J40MainGridContainer>
|
||||||
<Grid col>
|
<MapWrapper location={location}/>
|
||||||
<section>
|
</J40MainGridContainer>
|
||||||
<MapWrapper location={location}/>
|
|
||||||
</section>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
|
<J40MainGridContainer>
|
||||||
<Grid row>
|
<Grid row>
|
||||||
<Grid col>
|
<Grid col>
|
||||||
<section>
|
<section>
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
},
|
},
|
||||||
presidentalLinkLabel: {
|
presidentalLinkLabel: {
|
||||||
id: 'index.presidentalLinkLabel',
|
id: 'index.presidentalLinkLabel',
|
||||||
defaultMessage: 'Executive Order on Tackling the Climate Crisis at Home and Abroad.',
|
defaultMessage: 'Executive Order 14008 on Tackling the Climate Crisis at Home and Abroad',
|
||||||
description: 'Link url to presidential actions executive order. Part of paragraph 3',
|
description: 'Link url to presidential actions executive order. Part of paragraph 3',
|
||||||
},
|
},
|
||||||
transparentLabel: {
|
transparentLabel: {
|
||||||
|
|
@ -87,20 +87,32 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
imgSrc={aboutUSMapImg}
|
imgSrc={aboutUSMapImg}
|
||||||
header={intl.formatMessage(messages.aboutScreenToolHeading)}>
|
header={intl.formatMessage(messages.aboutScreenToolHeading)}>
|
||||||
|
|
||||||
<FormattedMessage
|
<p>
|
||||||
id={'index.aboutContent.p1'}
|
<FormattedMessage
|
||||||
description={'paragraph 1 of main content on index page'}
|
id={'index.aboutContent.p1'}
|
||||||
defaultMessage={`
|
description={'paragraph 1 of main content on index page'}
|
||||||
On January 27, 2021, President Biden directed the Council on
|
defaultMessage=
|
||||||
Environmental Quality (CEQ) to create a climate and economic
|
{`On January 27, 2021, President Biden directed the Council on
|
||||||
justice screening tool. The purpose of the tool is to provide
|
Environmental Quality (CEQ) to create a climate and economic
|
||||||
socioeconomic, environmental, and climate information and data to
|
justice screening tool. The purpose of the tool is to help
|
||||||
help inform decisions that may affect disadvantaged communities.
|
Federal agencies identify disadvantaged communities and provide
|
||||||
The tool is designed to assist Federal agencies in identifying
|
socioeconomic, environmental, and climate information and data
|
||||||
disadvantaged communities for the purposes of the Justice40
|
to inform decisions that may affect these communities. The tool
|
||||||
Initiative.
|
identifies disadvantaged communities as communities of focus
|
||||||
|
through publicly available, nationally consistent, high-quality
|
||||||
|
data.
|
||||||
`}/>
|
`}/>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<FormattedMessage
|
||||||
|
id={'index.aboutContent.p1b'}
|
||||||
|
description={'paragraph 1b of main content on index page'}
|
||||||
|
defaultMessage={`
|
||||||
|
The current version of the tool is in a public beta form and
|
||||||
|
will be updated based on feedback from the public.
|
||||||
|
`}/>
|
||||||
|
</p>
|
||||||
</AboutCard>
|
</AboutCard>
|
||||||
</AboutCardsContainer>
|
</AboutCardsContainer>
|
||||||
|
|
||||||
|
|
@ -110,18 +122,22 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
imgSrc={aboutJ40Img}
|
imgSrc={aboutJ40Img}
|
||||||
header={intl.formatMessage(messages.aboutJustice40Heading)}>
|
header={intl.formatMessage(messages.aboutJustice40Heading)}>
|
||||||
|
|
||||||
<FormattedMessage
|
<p>
|
||||||
id="index.aboutContent.p2"
|
<FormattedMessage
|
||||||
description={'paragraph 2 of main content on index page'}
|
id="index.aboutContent.p2"
|
||||||
defaultMessage={`
|
description={'paragraph 2 of main content on index page'}
|
||||||
The goal of the Justice40 Initiative is for 40 percent of
|
defaultMessage={`
|
||||||
benefits of Federal programs in seven key areas to flow to
|
The tool will provide important information for the Justice40
|
||||||
disadvantaged communities. These seven key areas are: climate
|
Initiative. The goal of the Justice40 Initiative is to provide
|
||||||
change, clean energy and energy efficiency, clean transit,
|
40-percent of the overall benefits of certain federal
|
||||||
affordable and sustainable housing, training and workforce
|
programs in seven key areas to disadvantaged communities.
|
||||||
development, remediation of legacy pollution, and clean water
|
These seven key areas are: climate change, clean energy and
|
||||||
infrastructure.
|
energy efficiency, clean transit, affordable and sustainable
|
||||||
`}/>
|
housing, training and workforce development, the remediation
|
||||||
|
and reduction of legacy pollution, and the development of
|
||||||
|
critical clean water infrastructure.
|
||||||
|
`}/>
|
||||||
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<FormattedMessage
|
<FormattedMessage
|
||||||
|
|
@ -157,9 +173,9 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
header={'Federal program managers'}
|
header={'Federal program managers'}
|
||||||
actionText={'Go to data & methodology'}
|
actionText={'Go to data & methodology'}
|
||||||
actionUrl={'./methodology'}>
|
actionUrl={'./methodology'}>
|
||||||
Download the screening tool’s draft list of prioritized
|
Download the screening tool’s draft list of communities of focus.
|
||||||
communities and information on how to use it for your program in
|
Explore data that may be useful to your program, and provide
|
||||||
the future on the data and methodology page.
|
feedback on the tool.
|
||||||
</AboutCard>
|
</AboutCard>
|
||||||
|
|
||||||
<AboutCard
|
<AboutCard
|
||||||
|
|
@ -168,8 +184,8 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
header={'Community members'}
|
header={'Community members'}
|
||||||
actionText={'Explore the tool'}
|
actionText={'Explore the tool'}
|
||||||
actionUrl={'./cejst'}>
|
actionUrl={'./cejst'}>
|
||||||
Find your community or communities that you may be familiar with
|
Explore data about communities of focus in your area, and help
|
||||||
and check their prioritization information on the map.
|
provide feedback on the tool.
|
||||||
</AboutCard>
|
</AboutCard>
|
||||||
</AboutCardsContainer>
|
</AboutCardsContainer>
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
|
|
@ -184,8 +200,8 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
header={'Send Feedback'}
|
header={'Send Feedback'}
|
||||||
actionText={'Email: screeningtool.feedback@usds.gov'}
|
actionText={'Email: screeningtool.feedback@usds.gov'}
|
||||||
actionUrl={'mailto:screeningtool.feedback@usds.gov'}>
|
actionUrl={'mailto:screeningtool.feedback@usds.gov'}>
|
||||||
Have ideas about how to acknowledge the on-the-ground experiences
|
Have ideas about how this tool can be improved to better
|
||||||
of your community?
|
reflect the on-the-ground experiences of your community?
|
||||||
</AboutCard>
|
</AboutCard>
|
||||||
|
|
||||||
<AboutCard
|
<AboutCard
|
||||||
|
|
@ -196,8 +212,8 @@ const IndexPage = ({location}: IndexPageProps) => {
|
||||||
actionUrl={'https://github.com/usds/justice40-tool'}
|
actionUrl={'https://github.com/usds/justice40-tool'}
|
||||||
actionOpenInNewTab={true}>
|
actionOpenInNewTab={true}>
|
||||||
The screening tool’s code is open source, which means it is
|
The screening tool’s code is open source, which means it is
|
||||||
available for the public to view and contribute to. Anyone can
|
available for the public to view and contribute to. Anyone
|
||||||
view and contribute on GitHub.
|
can view and contribute on GitHub.
|
||||||
</AboutCard>
|
</AboutCard>
|
||||||
</AboutCardsContainer>
|
</AboutCardsContainer>
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,11 @@ import {useIntl} from 'gatsby-plugin-intl';
|
||||||
import {defineMessages} from 'react-intl';
|
import {defineMessages} from 'react-intl';
|
||||||
|
|
||||||
import AlertWrapper from '../components/AlertWrapper';
|
import AlertWrapper from '../components/AlertWrapper';
|
||||||
// import DatasetContainer from '../components/DatasetContainer';
|
import DatasetContainer from '../components/DatasetContainer';
|
||||||
import DownloadPacket from '../components/DownloadPacket';
|
import DownloadPacket from '../components/DownloadPacket';
|
||||||
import J40MainGridContainer from '../components/J40MainGridContainer';
|
import J40MainGridContainer from '../components/J40MainGridContainer';
|
||||||
import Layout from '../components/layout';
|
import Layout from '../components/layout';
|
||||||
// import ScoreStepsList from '../components/scoreStepsList';
|
import ScoreStepsList from '../components/scoreStepsList';
|
||||||
|
|
||||||
interface MethodPageProps {
|
interface MethodPageProps {
|
||||||
location: Location;
|
location: Location;
|
||||||
|
|
@ -30,8 +30,8 @@ const IndexPage = ({location}: MethodPageProps) => {
|
||||||
},
|
},
|
||||||
methodologyPagep1: {
|
methodologyPagep1: {
|
||||||
id: 'methodology.page.paragraph.first',
|
id: 'methodology.page.paragraph.first',
|
||||||
defaultMessage: 'The methodology for determining disadvantaged communities for the purposes of '+
|
defaultMessage: 'The methodology for identifying communities of focus is currently ' +
|
||||||
' the Justice40 Initiative is currently in progress.',
|
'in a draft, pre-decisional form that may change over time as more datasets become available.',
|
||||||
description: 'methodology page paragraph 1',
|
description: 'methodology page paragraph 1',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -45,7 +45,7 @@ const IndexPage = ({location}: MethodPageProps) => {
|
||||||
|
|
||||||
<J40MainGridContainer>
|
<J40MainGridContainer>
|
||||||
<h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
|
<h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
|
||||||
<Grid row gap>
|
<Grid row gap className={'j40-mb-5'}>
|
||||||
<Grid col={12} tablet={{col: 6}}>
|
<Grid col={12} tablet={{col: 6}}>
|
||||||
<section>
|
<section>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -59,13 +59,10 @@ const IndexPage = ({location}: MethodPageProps) => {
|
||||||
</Grid>
|
</Grid>
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
|
|
||||||
{/* // Temporarily removed while the app is demo'd to stakeholders
|
<J40MainGridContainer fullWidth={true} blueBackground={true}>
|
||||||
<J40MainGridContainer fullWidth={true}>
|
<J40MainGridContainer>
|
||||||
<Grid row>
|
<DatasetContainer/>
|
||||||
<Grid col>
|
</J40MainGridContainer>
|
||||||
<DatasetContainer/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</J40MainGridContainer>
|
</J40MainGridContainer>
|
||||||
|
|
||||||
<J40MainGridContainer>
|
<J40MainGridContainer>
|
||||||
|
|
@ -74,7 +71,7 @@ const IndexPage = ({location}: MethodPageProps) => {
|
||||||
<ScoreStepsList/>
|
<ScoreStepsList/>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
</J40MainGridContainer> */}
|
</J40MainGridContainer>
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ There are 3 things that should be included in this file:
|
||||||
|
|
||||||
$primary-color: #112f4e;
|
$primary-color: #112f4e;
|
||||||
$j40-blue-background-color: #EFF6FB;
|
$j40-blue-background-color: #EFF6FB;
|
||||||
|
$sidePanelBorderColor: #f2f2f2;
|
||||||
|
|
||||||
// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
|
// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
|
||||||
// Arguments to the mixins must be tokens from USWDS
|
// Arguments to the mixins must be tokens from USWDS
|
||||||
|
|
@ -76,7 +77,11 @@ p {
|
||||||
}
|
}
|
||||||
|
|
||||||
p.secondary {
|
p.secondary {
|
||||||
@include j40-element('3xs', 4, 'normal', .5);
|
@include j40-element('3xs', 2, 'normal', .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
p.flush {
|
||||||
|
@include j40-element('sm', 4, 'normal', 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 40 pixel margin-bottom
|
// 40 pixel margin-bottom
|
||||||
|
|
@ -176,6 +181,10 @@ components include:
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.usa-tag.j40 {
|
||||||
|
background: orange;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
******************************
|
******************************
|
||||||
|
|
@ -237,6 +246,7 @@ This section will outline styles that are component specific
|
||||||
- map
|
- map
|
||||||
- timeline
|
- timeline
|
||||||
- about
|
- about
|
||||||
|
- accordion
|
||||||
|
|
||||||
/*
|
/*
|
||||||
******************************
|
******************************
|
||||||
|
|
@ -380,6 +390,14 @@ This section will outline styles that are component specific
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//Area Detail Component
|
||||||
|
p.secondary.j40-indicator {
|
||||||
|
max-width: 10rem;
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
***************************************
|
***************************************
|
||||||
|
|
@ -387,97 +405,8 @@ This section will outline styles that are component specific
|
||||||
***************************************
|
***************************************
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* the > is for child only syntax in css. This is required so that lists that are nested under the
|
.usa-process-list__heading{
|
||||||
list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
|
border-left-color: $j40-blue-background-color;
|
||||||
.j40-process-list-wrapper > {
|
|
||||||
$j40-steps-list-color: #002D3F;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin-top: 3rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
padding-inline-start: 0;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 2.5rem;
|
|
||||||
/* do the lines */
|
|
||||||
border-left: .2rem solid $j40-steps-list-color;
|
|
||||||
padding-left: 1.88rem;
|
|
||||||
/* removes gap between line and circle */
|
|
||||||
margin-top: -1rem;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> li:before {
|
|
||||||
content: " ";
|
|
||||||
border: 1rem solid $j40-steps-list-color;
|
|
||||||
border-radius: 100rem;
|
|
||||||
height: 0; /* it's all controlled by the border */
|
|
||||||
width: 0;
|
|
||||||
margin-top: -0.5rem;
|
|
||||||
margin-left: -3rem;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
> li:last-child {
|
|
||||||
/* no line on last item */
|
|
||||||
border-left: .2rem solid transparent;
|
|
||||||
margin-top: -1.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The math equation on the methodology page.. which is a royal pain */
|
|
||||||
.j40-math-division-container {
|
|
||||||
> .j40-math-eq-left-side {
|
|
||||||
text-align: right;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem;
|
|
||||||
|
|
||||||
> .j40-math-eq-numerator {
|
|
||||||
border-bottom: solid 3px black;
|
|
||||||
text-align: center;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .j40-math-eq-denominator {
|
|
||||||
text-align: center;
|
|
||||||
width: 90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .j40-math-eq-middle {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .j40-math-eq-right-side {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.j40-process-nested-list {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
> li {
|
|
||||||
list-style-type: disc; /* without this, we get hollow circles */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
|
|
||||||
.j40-item-list-title {
|
|
||||||
margin-block-end: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.j40-item-list-subtitle {
|
|
||||||
margin-block-start: auto;
|
|
||||||
margin-block-end: auto;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -529,3 +458,35 @@ ul.j40-process-nested-list {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
******************************
|
||||||
|
* ACCORDION STYLES
|
||||||
|
******************************
|
||||||
|
*/
|
||||||
|
|
||||||
|
.usa-accordion__heading button.usa-accordion__button {
|
||||||
|
@include j40-element('3xs', 1, 'normal', 0);
|
||||||
|
border-bottom: 1px solid $sidePanelBorderColor;
|
||||||
|
}
|
||||||
|
.usa-accordion__heading:first-child button.usa-accordion__button {
|
||||||
|
@include j40-element('3xs', 1, 'normal', 0);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
.usa-accordion__heading button.usa-accordion__button {
|
||||||
|
@include j40-element('3xs', 1, 'normal', 0);
|
||||||
|
background-color: #F3F3F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.usa-accordion__heading:not(:first-child){
|
||||||
|
@include u-margin-top(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
#prioritization-indicators, #additional-indicators {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#additional-indicators {
|
||||||
|
background-color:#F3F3F3;
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue