From 825361ab1ceaa78fde73376c3ca08a7cc6462523 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Thu, 8 Sep 2022 23:12:57 -0700 Subject: [PATCH 01/10] Remove up/down arrows from indicators --- .../Indicator/Indicator.module.scss | 2 +- client/src/components/Indicator/Indicator.tsx | 38 +++++-------------- client/src/data/constants.tsx | 2 + 3 files changed, 13 insertions(+), 29 deletions(-) diff --git a/client/src/components/Indicator/Indicator.module.scss b/client/src/components/Indicator/Indicator.module.scss index 2f6dbade..6d9ef09b 100644 --- a/client/src/components/Indicator/Indicator.module.scss +++ b/client/src/components/Indicator/Indicator.module.scss @@ -59,7 +59,7 @@ } .unavailable { - opacity: .2; + opacity: .6; } } } diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx index efbc2a05..ff1c774a 100644 --- a/client/src/components/Indicator/Indicator.tsx +++ b/client/src/components/Indicator/Indicator.tsx @@ -8,20 +8,14 @@ import * as constants from '../../data/constants'; import * as EXPLORE_COPY from '../../data/copy/explore'; // @ts-ignore -import downArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_downward.svg'; -// @ts-ignore -import upArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_upward.svg'; -// @ts-ignore -import unAvailable from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg'; +import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg'; interface IIndicator { indicator: indicatorInfo, } interface IIndicatorValueIcon { - type: indicatorType, value: number | null, - isAboveThresh: boolean, }; interface IIndicatorValueSubText { @@ -37,31 +31,21 @@ interface IIndicatorValue { } /** - * This component will determine what indicator's icon should be (arrowUp, arrowDown or unavailable) and - * return the appropriate JSX. + * This component will determine what indicator's icon should be. Either show the unavailable icon + * or show nothing. * - * @param {number | null} props + * @param {number | null} value * @return {JSX.Element} */ -export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => { +export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => { const intl = useIntl(); - if (value == null) { - return {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}; - } else if (type === 'percent' || type === 'percentile') { - return isAboveThresh ? - {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP)} : - {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN)}; - } else return <>; + /> + ) : <>; }; /** @@ -155,7 +139,7 @@ export const superscriptOrdinal = (indicatorValueWithSuffix:string) => { export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => { const intl = useIntl(); - if (displayStat === null) return ; + if (displayStat === null) return <>{constants.MISSING_DATA_STRING}; if (type === 'percent' || type === 'percentile') { // In this case we will show no value and an icon only @@ -256,9 +240,7 @@ const Indicator = ({indicator}:IIndicator) => { {/* Indicator icon - up arrow, down arrow, or unavailable */}
diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index 42728f4b..7224b6f2 100644 --- a/client/src/data/constants.tsx +++ b/client/src/data/constants.tsx @@ -25,6 +25,8 @@ export type J40Properties = { [key: string]: any }; // ****** SIDE PANEL BACKEND SIGNALS *********** +export const MISSING_DATA_STRING = '--'; + // Tribal signals export const TRIBAL_ID = 'tribalId'; export const LAND_AREA_NAME = 'landAreaName'; From 2bfa7d454fd13a418755c6d5bc219bf80027272c Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Thu, 8 Sep 2022 23:14:34 -0700 Subject: [PATCH 02/10] update style of side panel categories if supported - if the browser has ":has" support, the new category styles will be applied - if not, the older style will remain in place --- .../components/Category/Category.module.scss | 11 ++- .../Category/Category.module.scss.d.ts | 2 +- client/src/components/Category/Category.tsx | 27 ++++++- client/src/components/utils.scss | 4 +- .../images/sidePanelIcons/accordion-minus.svg | 1 + .../images/sidePanelIcons/accordion-plus.svg | 1 + client/src/styles/global.scss | 71 +++++++++++-------- 7 files changed, 81 insertions(+), 36 deletions(-) create mode 100644 client/src/images/sidePanelIcons/accordion-minus.svg create mode 100644 client/src/images/sidePanelIcons/accordion-plus.svg diff --git a/client/src/components/Category/Category.module.scss b/client/src/components/Category/Category.module.scss index d06ffca3..4abb8791 100644 --- a/client/src/components/Category/Category.module.scss +++ b/client/src/components/Category/Category.module.scss @@ -7,4 +7,13 @@ .category { flex-basis: 80%; } -} \ No newline at end of file +} + +.disCategoryContainer { + display: flex; + justify-content: space-between; + + .category { + flex-basis: 80%; + } +} diff --git a/client/src/components/Category/Category.module.scss.d.ts b/client/src/components/Category/Category.module.scss.d.ts index 9eafab43..174616bc 100644 --- a/client/src/components/Category/Category.module.scss.d.ts +++ b/client/src/components/Category/Category.module.scss.d.ts @@ -2,7 +2,7 @@ declare namespace CategoryNamespace { export interface ICategoryScss { categoryContainer: string; category:string; - disadvantageDot: string; + disCategoryContainer: string; } } diff --git a/client/src/components/Category/Category.tsx b/client/src/components/Category/Category.tsx index 9200088d..f3d50198 100644 --- a/client/src/components/Category/Category.tsx +++ b/client/src/components/Category/Category.tsx @@ -8,8 +8,32 @@ interface ICategory { isDisadvantaged: boolean | null; } +/** + * This component controls the Categories on the side panel. + * + * The category will be styled differently differently depending on + * if the category is disadvantaged or not. The JSX in the return + * statement is identical however in the global CSS file, we + * override the disadvantaged case with a psuedo-selector (:has) that + * is new. In order to fallback gracefully for browsers that do + * not yet support the ":has" psuedo selector, this redundant JSX + * will allow the disadvantaged case show the older category styling + * while browsers that do support the ":has" psuedo selector will + * render the newer category style. + * + * @param {string} name + * @param {boolean} isDisadvagtaged + * @return {JSX.Element} + */ const Category = ({name, isDisadvantaged}:ICategory) => { - return ( + return isDisadvantaged ? ( +
+
+ {name} +
+ +
+ ) : (
{name} @@ -18,5 +42,4 @@ const Category = ({name, isDisadvantaged}:ICategory) => {
); }; - export default Category; diff --git a/client/src/components/utils.scss b/client/src/components/utils.scss index ee393ff2..e9486889 100644 --- a/client/src/components/utils.scss +++ b/client/src/components/utils.scss @@ -8,8 +8,8 @@ //Styles associated with the side panel $sidePanelBorderColor: #f2f2f2; $sidePanelBorder: 2px solid $sidePanelBorderColor; -$mobileBreakpoint: 400px; -$featureSelectBorderColor: #00bde3; +$mobileBreakpoint: 400px; // Todo replace with USWDS breakpoint + $additionalCardsBGColor: #FAFAFA; $sidePanelLabelFontColor: #171716; diff --git a/client/src/images/sidePanelIcons/accordion-minus.svg b/client/src/images/sidePanelIcons/accordion-minus.svg new file mode 100644 index 00000000..40554225 --- /dev/null +++ b/client/src/images/sidePanelIcons/accordion-minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/sidePanelIcons/accordion-plus.svg b/client/src/images/sidePanelIcons/accordion-plus.svg new file mode 100644 index 00000000..66e3c50d --- /dev/null +++ b/client/src/images/sidePanelIcons/accordion-plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 62469d65..a687c278 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -18,25 +18,32 @@ There are 3 things that should be included in this file: // 3. Include or point to your project's custom Sass /* Instead of having a separate file for these styles, all styles are being placed here. - - Global styles - - Layout styles - -- Main content styles - -- Footer styles - - Component styles - -- Map styles - -- Demographics styles - -- Public Event styles - -- About styles - -- Summary box + + Ideally, this file should only hold styles for when we need to override the USWDS component + or the Trusswork component. J40 component styles should be contained in it's own component styles. + + - GLOBAL STYLES + - MAIN CONTENT STYLES + - FOOTER STYLES + - MAP STYLES + - ACCORDION STYLES + - DEMOGRAPHICS STYLES + - PUBLIC EVENT STYLES + - ABOUT CARD STYLES + - SUMMARY BOX STYLES */ - -/***************** GLOBAL STYLES **************************************************************/ +/* +****************************** +* GLOBAL STYLES +****************************** +*/ $primary-color: #112f4e; // Used for header font color - selection color is #005EA2 $j40-blue-background-color: #e7f2f5; // Hex value of 'blue-cool-5' +$disadvantaged-color-side-panel: #1a4480; // The j40-element mixin is used to create any font element. E.g.

,

tags, etc. // Arguments to the mixins must be tokens from USWDS @@ -97,12 +104,6 @@ p.flush { @include j40-element('lg', 2, 'bold', 0 ); } -/***************** LAYOUT STYLES ************************************************************** -This section will outline styles for components that are on each page. These -components include: - -- main content styles -- footer styles /* @@ -184,14 +185,6 @@ li[class*='datasetCard-module'] .usa-link--external::after { } - -/***************** COMPONENT STYLES ************************************************************** -This section will outline styles that are component specific - -- map -- timeline -- about - /* ****************************** * MAP STYLES @@ -359,16 +352,34 @@ Beacon - the beacon's color (*-location-dot) and proximity animation (::before), } -.usa-accordion__content { - padding-bottom: 0; -} - //As per Mikel Maron's (MapBox advocate) suggestion to use svg data URI override: a.mapboxgl-ctrl-logo { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(/studio-manual/assets/%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(/studio-manual/assets/%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E") !important; }; +/* +****************************** +* ACCORDION STYLES +****************************** +*/ +.usa-accordion__content { + padding-bottom: 0; +} + +// The following two styles will only work in browsers that support the ":has" selector +button.usa-accordion__button:has(div[class*="disCategoryContainer"]) { + background-color: $disadvantaged-color-side-panel; + background-image: url("../images/sidePanelIcons/accordion-plus.svg"); + + div[class*="disCategoryContainer"]{ + color: white; + } +} +button.usa-accordion__button[aria-expanded=true]:has(div[class*="disCategoryContainer"]) { + background-image: url("../images/sidePanelIcons/accordion-minus.svg"); +} + /* ****************************** * DEMOGRAPHICS STYLES From b0b2bc387b91433f0edda76a7db70dc2436a3c4d Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Thu, 8 Sep 2022 23:23:14 -0700 Subject: [PATCH 03/10] update snapshots --- .../__snapshots__/areaDetail.test.tsx.snap | 298 ++++++++---------- .../components/Indicator/Indicator.test.tsx | 59 +--- .../__snapshots__/Indicator.test.tsx.snap | 70 +--- 3 files changed, 148 insertions(+), 279 deletions(-) diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index bf25cf63..dc3db5b1 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -287,12 +287,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL th

-
- an icon for the down arrow -
+
@@ -329,12 +324,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL th
-
- an icon for the up arrow -
+
@@ -374,12 +364,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL th
-
- an icon for the down arrow -
+
@@ -413,7 +398,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -950,7 +942,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -1090,7 +1081,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -1267,12 +1259,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT th
-
- an icon for the up arrow -
+
@@ -1301,7 +1288,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -1472,7 +1460,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -1699,7 +1692,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -1839,7 +1831,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -2050,12 +2045,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT th
-
- an icon for the up arrow -
+
@@ -2084,7 +2074,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the up arrow -
+
@@ -2166,12 +2153,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT th
-
- an icon for the down arrow -
+
@@ -2210,12 +2192,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT 98%
-
- an icon for the up arrow -
+
@@ -2279,7 +2256,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -2765,12 +2745,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE th
-
- an icon for the up arrow -
+
@@ -2812,12 +2787,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE th
-
- an icon for the down arrow -
+
@@ -2881,7 +2851,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the down arrow -
+
@@ -3108,7 +3083,9 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
-
+
+ -- +
an icon to represent data is unavailable
-
- an icon for the up arrow -
+
@@ -3190,12 +3162,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE th
-
- an icon for the down arrow -
+
@@ -3234,12 +3201,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE 98%
-
- an icon for the up arrow -
+
diff --git a/client/src/components/Indicator/Indicator.test.tsx b/client/src/components/Indicator/Indicator.test.tsx index f648d80e..92ab4fdf 100644 --- a/client/src/components/Indicator/Indicator.test.tsx +++ b/client/src/components/Indicator/Indicator.test.tsx @@ -47,68 +47,11 @@ describe('rendering of the Indicator', () => { }); describe('test rendering of Indicator value icons', () => { - it('renders the up arrow when value is above threshold', () => { + it('renders the unavailable icon when the value is null', () => { const {asFragment} = render( - , - ); - expect(asFragment()).toMatchSnapshot(); - screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP.defaultMessage); - }); - it('renders the down arrow when the value is above the threshold', () => { - const {asFragment} = render( - - - , - ); - expect(asFragment()).toMatchSnapshot(); - screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage); - }); - - it('renders the down arrow when the value is zero', () => { - const {asFragment} = render( - - - , - ); - expect(asFragment()).toMatchSnapshot(); - screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN.defaultMessage); - }); - - it('renders the unavailable icon when the value is a boolean null', () => { - const {asFragment} = render( - - - , - ); - expect(asFragment()).toMatchSnapshot(); - screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage); - }); - - it('renders the unavailable icon when the value is a percentile null', () => { - const {asFragment} = render( - - , ); diff --git a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap index 4e44d9f5..96a48b8f 100644 --- a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap +++ b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap @@ -20,12 +20,7 @@ exports[`rendering of the Indicator checks if component renders 1`] = ` 97%
-
- an icon for the up arrow -
+
@@ -62,12 +57,7 @@ exports[`rendering of the Indicator checks if the flooring function works 1`] = 42%
-
- an icon for the up arrow -
+
@@ -99,7 +89,9 @@ exports[`renders value correctly for Former defense sites checks if it renders n
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable
-
+
+ -- +
an icon to represent data is unavailable `; -exports[`test rendering of Indicator value icons renders the down arrow when the value is above the threshold 1`] = ` - - an icon for the down arrow - -`; - -exports[`test rendering of Indicator value icons renders the down arrow when the value is zero 1`] = ` - - an icon for the down arrow - -`; - -exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a boolean null 1`] = ` +exports[`test rendering of Indicator value icons renders the unavailable icon when the value is null 1`] = ` an icon to represent data is unavailable `; -exports[`test rendering of Indicator value icons renders the unavailable icon when the value is a percentile null 1`] = ` - - an icon to represent data is unavailable - -`; - -exports[`test rendering of Indicator value icons renders the up arrow when value is above threshold 1`] = ` - - an icon for the up arrow - -`; - exports[`test rendering of Indicator value sub-text renders missing data 1`] = `
@@ -429,7 +389,11 @@ exports[`test rendering of Indicator value sub-text renders the "below 90 percen `; -exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = ``; +exports[`test that the unit suffix renders correctly renders correctly when the value is a null 1`] = ` + + -- + +`; exports[`test that the unit suffix renders correctly renders correctly when the value is a percent 1`] = ` From a49dbfdf90ddfac764571baed614c84e4712c6c6 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Thu, 8 Sep 2022 23:52:16 -0700 Subject: [PATCH 04/10] update styling for indicator values - refactor disadvantaged blue dot to utils.scss --- .../DisadvantageDot.module.scss | 3 +- .../Indicator/Indicator.module.scss | 42 ++++++------------- .../Indicator/Indicator.module.scss.d.ts | 1 + client/src/components/Indicator/Indicator.tsx | 6 ++- client/src/components/utils.scss | 10 ++--- 5 files changed, 25 insertions(+), 37 deletions(-) diff --git a/client/src/components/DisadvantageDot/DisadvantageDot.module.scss b/client/src/components/DisadvantageDot/DisadvantageDot.module.scss index 848804ab..5d77c58a 100644 --- a/client/src/components/DisadvantageDot/DisadvantageDot.module.scss +++ b/client/src/components/DisadvantageDot/DisadvantageDot.module.scss @@ -1,4 +1,5 @@ @use '../../styles/design-system.scss' as *; +@import "../utils.scss"; .disadvantagedDotSmall { @include u-circle('105'); @@ -12,7 +13,7 @@ @include u-circle(4); margin: 2.3rem 1.5rem 2rem 0; // opacity: .6; - border: 3px solid #1A4480; + border: 3px solid $disadvantagedDotColor; //Maintain aspect ratio as screen width decreases flex: 1 0 2rem; diff --git a/client/src/components/Indicator/Indicator.module.scss b/client/src/components/Indicator/Indicator.module.scss index 6d9ef09b..1bd84e8b 100644 --- a/client/src/components/Indicator/Indicator.module.scss +++ b/client/src/components/Indicator/Indicator.module.scss @@ -1,6 +1,11 @@ @use '../../styles/design-system.scss' as *; @import "../utils.scss"; +@mixin indicatorPadding { + @include u-padding-left(1); + @include u-padding-right(1); +} + @mixin indicator { display: flex; flex-direction: column; @@ -46,8 +51,14 @@ align-self: end; .indicatorValue { - margin-left: 2.2rem; - } + @include indicatorPadding(); + } + + .disIndicatorValue { + @include indicatorPadding(); + color: white; + background-color: $disadvantagedDotColor; + } .indicatorArrow { margin-bottom: -.375rem; @@ -82,30 +93,3 @@ .indicatorBoxMain { @include indicator; } - -.disadvantagedIndicator { - @include indicator; - @include u-bg('blue-warm-10'); - - // A darker bg color: - // background-color: #D2DAE3; - - // Add a border - // border: 1px solid #1A4480; - - margin: 0 -20px 1px -20px; - @include u-padding-left(2.5); - @include u-padding-right(2.5); - - - // Overwrite indicator mixin with bolder fonts for disadv. indicator - .indicatorRow { - .indicatorName { - @include u-text('bold'); - - .indicatorDesc { - @include u-text('normal'); - } - } - } -} \ No newline at end of file diff --git a/client/src/components/Indicator/Indicator.module.scss.d.ts b/client/src/components/Indicator/Indicator.module.scss.d.ts index 6d10859d..9a8e43f2 100644 --- a/client/src/components/Indicator/Indicator.module.scss.d.ts +++ b/client/src/components/Indicator/Indicator.module.scss.d.ts @@ -7,6 +7,7 @@ declare namespace IndicatorNamespace { indicatorValueCol:string; indicatorValueRow:string; indicatorValue:string; + disIndicatorValue:string; indicatorSuperscript:string; indicatorArrow:string; unavailable:string; diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx index ff1c774a..d3729c03 100644 --- a/client/src/components/Indicator/Indicator.tsx +++ b/client/src/components/Indicator/Indicator.tsx @@ -212,7 +212,7 @@ const Indicator = ({indicator}:IIndicator) => { return (
  • @@ -230,7 +230,9 @@ const Indicator = ({indicator}:IIndicator) => {
    {/* Indicator value */} -
    +
    Date: Fri, 9 Sep 2022 15:46:11 -0700 Subject: [PATCH 05/10] remove missing icon and reduce subtext font size --- .../__snapshots__/areaDetail.test.tsx.snap | 252 +++--------------- .../Indicator/Indicator.module.scss | 2 +- .../components/Indicator/Indicator.test.tsx | 26 +- client/src/components/Indicator/Indicator.tsx | 19 +- .../__snapshots__/Indicator.test.tsx.snap | 30 +-- 5 files changed, 61 insertions(+), 268 deletions(-) diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index dc3db5b1..bc8e76ce 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -401,12 +401,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -707,12 +702,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -738,12 +728,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -771,12 +756,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -804,12 +784,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -837,12 +812,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -945,12 +915,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -976,12 +941,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1084,12 +1044,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1115,12 +1070,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1146,12 +1096,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1291,12 +1236,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1322,12 +1262,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1355,12 +1290,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1463,12 +1393,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1494,12 +1419,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1525,12 +1445,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1556,12 +1471,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1587,12 +1497,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1695,12 +1600,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1726,12 +1626,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1834,12 +1729,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1868,12 +1758,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1899,12 +1784,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -1930,12 +1810,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2077,12 +1952,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2259,12 +2129,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2295,12 +2160,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2601,12 +2461,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2632,12 +2487,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2854,12 +2704,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2885,12 +2730,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2916,12 +2756,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2947,12 +2782,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -2978,12 +2808,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -3086,12 +2911,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    --
    -
    - an icon to represent data is unavailable -
    +
    diff --git a/client/src/components/Indicator/Indicator.module.scss b/client/src/components/Indicator/Indicator.module.scss index 1bd84e8b..3d5c705d 100644 --- a/client/src/components/Indicator/Indicator.module.scss +++ b/client/src/components/Indicator/Indicator.module.scss @@ -81,7 +81,7 @@ align-self: flex-end; text-align: right; @include u-width(8); - @include typeset('sans', '3xs', 2); + @include typeset('sans', 'micro', 2); @include u-text('thin'); } } diff --git a/client/src/components/Indicator/Indicator.test.tsx b/client/src/components/Indicator/Indicator.test.tsx index 92ab4fdf..9336baa3 100644 --- a/client/src/components/Indicator/Indicator.test.tsx +++ b/client/src/components/Indicator/Indicator.test.tsx @@ -46,19 +46,19 @@ describe('rendering of the Indicator', () => { }); }); -describe('test rendering of Indicator value icons', () => { - it('renders the unavailable icon when the value is null', () => { - const {asFragment} = render( - - - , - ); - expect(asFragment()).toMatchSnapshot(); - screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage); - }); -}); +// describe('test rendering of Indicator value icons', () => { +// it('renders the unavailable icon when the value is null', () => { +// const {asFragment} = render( +// +// +// , +// ); +// expect(asFragment()).toMatchSnapshot(); +// screen.getByAltText(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE.defaultMessage); +// }); +// }); describe('test rendering of Indicator value sub-text', () => { it('renders the "above 90 percentile"', () => { diff --git a/client/src/components/Indicator/Indicator.tsx b/client/src/components/Indicator/Indicator.tsx index d3729c03..63883b41 100644 --- a/client/src/components/Indicator/Indicator.tsx +++ b/client/src/components/Indicator/Indicator.tsx @@ -8,7 +8,7 @@ import * as constants from '../../data/constants'; import * as EXPLORE_COPY from '../../data/copy/explore'; // @ts-ignore -import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg'; +// import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg'; interface IIndicator { indicator: indicatorInfo, @@ -31,21 +31,18 @@ interface IIndicatorValue { } /** - * This component will determine what indicator's icon should be. Either show the unavailable icon - * or show nothing. + * This component will determine what indicator's icon should be. ATM there are no icons to show, however + * this may change and so leaving a place holder function here for easy change in the future * * @param {number | null} value * @return {JSX.Element} */ export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => { - const intl = useIntl(); - - return value === null ? ( - {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)} - ) : <>; + return value === null ? <> : <>; + // {intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)} }; /** diff --git a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap index 96a48b8f..27cbe6f0 100644 --- a/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap +++ b/client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap @@ -92,12 +92,7 @@ exports[`renders value correctly for Former defense sites checks if it renders n
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -182,12 +177,7 @@ exports[`renders value correctly for abandoned land mines checks if it renders n
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -272,12 +262,7 @@ exports[`renders value correctly for historic underinvest. checks if it renders
    --
    -
    - an icon to represent data is unavailable -
    +
    @@ -344,15 +329,6 @@ exports[`renders value correctly for historic underinvest. checks if it renders `; -exports[`test rendering of Indicator value icons renders the unavailable icon when the value is null 1`] = ` - - an icon to represent data is unavailable - -`; - exports[`test rendering of Indicator value sub-text renders missing data 1`] = `
    From be227972c8ec25c06a84b602a52a0998d1986de2 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Fri, 9 Sep 2022 15:52:20 -0700 Subject: [PATCH 06/10] Remove un-needed import in test file --- client/src/components/Indicator/Indicator.test.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/src/components/Indicator/Indicator.test.tsx b/client/src/components/Indicator/Indicator.test.tsx index 9336baa3..9e072ace 100644 --- a/client/src/components/Indicator/Indicator.test.tsx +++ b/client/src/components/Indicator/Indicator.test.tsx @@ -1,11 +1,9 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import {render} from '@testing-library/react'; import {LocalizedComponent} from '../../test/testHelpers'; -import Indicator, {IndicatorValueIcon, IndicatorValueSubText, IndicatorValue} from './Indicator'; +import Indicator, {IndicatorValueSubText, IndicatorValue} from './Indicator'; import {indicatorInfo} from '../AreaDetail/AreaDetail'; -import * as EXPLORE_COPY from '../../data/copy/explore'; - describe('rendering of the Indicator', () => { it('checks if component renders', () => { const highSchool:indicatorInfo = { From 5ecebf3247edd17f76ce410bd78865d869704a19 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Tue, 13 Sep 2022 10:05:23 -0700 Subject: [PATCH 07/10] Update category, indicator copy --- .../src/components/AreaDetail/AreaDetail.tsx | 348 ++-- .../__snapshots__/areaDetail.test.tsx.snap | 1417 +++++++++-------- client/src/data/copy/explore.tsx | 452 +++--- client/src/intl/en.json | 76 +- 4 files changed, 1163 insertions(+), 1130 deletions(-) diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 99d0db5c..7330b904 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -315,9 +315,9 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) // Energy category - const energyBurden: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN), + const energyCost: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_COST), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_COST), type: 'percentile', value: properties.hasOwnProperty(constants.ENERGY_PERCENTILE) ? properties[constants.ENERGY_PERCENTILE] : null, @@ -334,153 +334,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) properties[constants.IS_EXCEEDS_THRESH_FOR_PM25] : null, }; - // Transit category - const dieselPartMatter: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER), - type: 'percentile', - value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ? - properties[constants.DIESEL_MATTER_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] : null, - }; - const barrierTransport: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.BARRIER_TRANS), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.BARRIER_TRANS), - type: 'percentile', - value: properties.hasOwnProperty(constants.TRAVEL_DISADV_PERCENTILE) ? - properties[constants.TRAVEL_DISADV_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] ? - properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] : null, - }; - const trafficVolume: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME), - type: 'percentile', - value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ? - properties[constants.TRAFFIC_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null, - }; - - // Housing category - const historicUnderinvest: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIST_UNDERINVEST), - type: 'boolean', - value: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) ? - (properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] === - constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false) : - null, - isDisadvagtaged: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) && - properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] === - constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false, - }; - const houseBurden: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN), - type: 'percentile', - value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ? - properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] : null, - }; - const lackGreenSpace: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_GREEN_SPACE), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_GREEN_SPACE), - type: 'percentile', - value: properties.hasOwnProperty(constants.IMPERVIOUS_PERCENTILE) ? - properties[constants.IMPERVIOUS_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] ? - properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] : null, - }; - const lackPlumbing: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_PLUMBING), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_PLUMBING), - type: 'percentile', - value: properties.hasOwnProperty(constants.KITCHEN_PLUMB_PERCENTILE) ? - properties[constants.KITCHEN_PLUMB_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] ? - properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] : null, - }; - const leadPaint: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT), - type: 'percentile', - value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ? - properties[constants.LEAD_PAINT_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] : null, - }; - - // Pollution categeory - const abandonMines: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ABANDON_MINES), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ABANDON_MINES), - type: 'boolean', - value: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ? - properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null, - isDisadvagtaged: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ? - properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null, - }; - const formerDefSites: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FORMER_DEF_SITES), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FORMER_DEF_SITES), - type: 'boolean', - value: properties.hasOwnProperty(constants.FORMER_DEF_SITES_RAW_VALUE) ? - (properties[constants.FORMER_DEF_SITES_RAW_VALUE] === constants.FUDS_RAW_YES ? true : false) : - null, - isDisadvagtaged: properties.hasOwnProperty(constants.FORMER_DEF_SITES_EXCEEDS_THRESH) ? - properties[constants.FORMER_DEF_SITES_EXCEEDS_THRESH] : null, - }; - const proxHaz: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ), - type: 'percentile', - value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ? - properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] : null, - }; - const proxNPL: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL), - type: 'percentile', - value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ? - properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] : null, - }; - const proxRMP: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP), - type: 'percentile', - value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ? - properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null, - }; - - // Water category - const leakyTanks: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAKY_TANKS), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAKY_TANKS), - type: 'percentile', - value: properties.hasOwnProperty(constants.LEAKY_UNDER_PERCENTILE) ? - properties[constants.LEAKY_UNDER_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] ? - properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] : null, - }; - const wasteWater: indicatorInfo = { - label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER), - description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER), - type: 'percentile', - value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ? - properties[constants.WASTEWATER_PERCENTILE] : null, - isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ? - properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null, - }; - // Health category const asthma: indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA), @@ -519,6 +372,157 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) properties[constants.IS_EXCEEDS_THRESH_FOR_LOW_LIFE_EXP] : null, }; + + // Housing category + const historicUnderinvest: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HIST_UNDERINVEST), + type: 'boolean', + value: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) ? + (properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] === + constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false) : null, + isDisadvagtaged: properties.hasOwnProperty(constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH) && + properties[constants.HISTORIC_UNDERINVESTMENT_EXCEED_THRESH] === + constants.HISTORIC_UNDERINVESTMENT_RAW_YES ? true : false, + }; + const houseCost: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_COST), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_COST), + type: 'percentile', + value: properties.hasOwnProperty(constants.HOUSING_BURDEN_PROPERTY_PERCENTILE) ? + properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_HOUSE_BURDEN] : null, + }; + const lackGreenSpace: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_GREEN_SPACE), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_GREEN_SPACE), + type: 'percentile', + value: properties.hasOwnProperty(constants.IMPERVIOUS_PERCENTILE) ? + properties[constants.IMPERVIOUS_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] ? + properties[constants.IS_EXCEEDS_THRESH_IMPERVIOUS] : null, + }; + const lackPlumbing: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LACK_PLUMBING), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LACK_PLUMBING), + type: 'percentile', + value: properties.hasOwnProperty(constants.KITCHEN_PLUMB_PERCENTILE) ? + properties[constants.KITCHEN_PLUMB_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] ? + properties[constants.IS_EXCEEDS_THRESH_KITCHEN_PLUMB] : null, + }; + const leadPaint: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT), + type: 'percentile', + value: properties.hasOwnProperty(constants.LEAD_PAINT_PERCENTILE) ? + properties[constants.LEAD_PAINT_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_LEAD_PAINT_AND_MEDIAN_HOME_VAL] : null, + }; + + + // Pollution categeory + const abandonMines: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ABANDON_MINES), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ABANDON_MINES), + type: 'boolean', + value: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ? + properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null, + isDisadvagtaged: properties.hasOwnProperty(constants.ABANDON_LAND_MINES_EXCEEDS_THRESH) ? + properties[constants.ABANDON_LAND_MINES_EXCEEDS_THRESH] : null, + }; + const formerDefSites: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FORMER_DEF_SITES), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FORMER_DEF_SITES), + type: 'boolean', + value: properties.hasOwnProperty(constants.FORMER_DEF_SITES_RAW_VALUE) ? + (properties[constants.FORMER_DEF_SITES_RAW_VALUE] === constants.FUDS_RAW_YES ? true : false) : + null, + isDisadvagtaged: properties.hasOwnProperty(constants.FORMER_DEF_SITES_EXCEEDS_THRESH) ? + properties[constants.FORMER_DEF_SITES_EXCEEDS_THRESH] : null, + }; + const proxHaz: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_HAZ), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_HAZ), + type: 'percentile', + value: properties.hasOwnProperty(constants.PROXIMITY_TSDF_SITES_PERCENTILE) ? + properties[constants.PROXIMITY_TSDF_SITES_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_HAZARD_WASTE] : null, + }; + const proxRMP: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_RMP), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_RMP), + type: 'percentile', + value: properties.hasOwnProperty(constants.PROXIMITY_RMP_SITES_PERCENTILE) ? + properties[constants.PROXIMITY_RMP_SITES_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_RMP] : null, + }; + const proxNPL: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PROX_NPL), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PROX_NPL), + type: 'percentile', + value: properties.hasOwnProperty(constants.PROXIMITY_NPL_SITES_PERCENTILE) ? + properties[constants.PROXIMITY_NPL_SITES_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_SUPERFUND] : null, + }; + + + // Transpotation category + const dieselPartMatter: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER), + type: 'percentile', + value: properties.hasOwnProperty(constants.DIESEL_MATTER_PERCENTILE) ? + properties[constants.DIESEL_MATTER_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_DIESEL_PM] : null, + }; + const barrierTransport: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.BARRIER_TRANS), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.BARRIER_TRANS), + type: 'percentile', + value: properties.hasOwnProperty(constants.TRAVEL_DISADV_PERCENTILE) ? + properties[constants.TRAVEL_DISADV_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] ? + properties[constants.IS_EXCEEDS_THRESH_TRAVEL_DISADV] : null, + }; + const trafficVolume: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME), + type: 'percentile', + value: properties.hasOwnProperty(constants.TRAFFIC_PERCENTILE) ? + properties[constants.TRAFFIC_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_TRAFFIC_PROX] : null, + }; + + + // Water category + const leakyTanks: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAKY_TANKS), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAKY_TANKS), + type: 'percentile', + value: properties.hasOwnProperty(constants.LEAKY_UNDER_PERCENTILE) ? + properties[constants.LEAKY_UNDER_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] ? + properties[constants.IS_EXCEEDS_THRESH_LEAKY_UNDER] : null, + }; + const wasteWater: indicatorInfo = { + label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER), + description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER), + type: 'percentile', + value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ? + properties[constants.WASTEWATER_PERCENTILE] : null, + isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] ? + properties[constants.IS_EXCEEDS_THRESH_FOR_WASTEWATER] : null, + }; + + // Workforce dev category const lingIso: indicatorInfo = { label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LING_ISO), @@ -601,7 +605,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) { id: 'clean-energy', titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_ENERGY), - indicators: [energyBurden, pm25], + indicators: [energyCost, pm25], socioEcIndicators: [lowInc], isDisadvagtaged: properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED] ? properties[constants.IS_ENERGY_FACTOR_DISADVANTAGED] : null, @@ -611,21 +615,21 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null, }, { - id: 'clean-transport', - titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT), - indicators: [dieselPartMatter, barrierTransport, trafficVolume], + id: 'health-burdens', + titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN), + indicators: [asthma, diabetes, heartDisease, lifeExpect], socioEcIndicators: [lowInc], - isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] ? - properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] : null, - isExceed1MoreBurden: properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] ? - properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] : null, + isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] ? + properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] : null, + isExceed1MoreBurden: properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] ? + properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] : null, isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ? properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null, }, { id: 'sustain-house', titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.SUSTAIN_HOUSE), - indicators: [historicUnderinvest, houseBurden, lackGreenSpace, lackPlumbing, leadPaint], + indicators: [historicUnderinvest, houseCost, lackGreenSpace, lackPlumbing, leadPaint], socioEcIndicators: [lowInc], isDisadvagtaged: properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED] ? properties[constants.IS_HOUSING_FACTOR_DISADVANTAGED] : null, @@ -646,6 +650,18 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ? properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null, }, + { + id: 'clean-transport', + titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_TRANSPORT), + indicators: [dieselPartMatter, barrierTransport, trafficVolume], + socioEcIndicators: [lowInc], + isDisadvagtaged: properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] ? + properties[constants.IS_TRANSPORT_FACTOR_DISADVANTAGED] : null, + isExceed1MoreBurden: properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] ? + properties[constants.IS_TRANSPORT_EXCEED_ONE_OR_MORE_INDICATORS] : null, + isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ? + properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null, + }, { id: 'clean-water', titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLEAN_WATER), @@ -658,18 +674,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ? properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null, }, - { - id: 'health-burdens', - titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.HEALTH_BURDEN), - indicators: [asthma, diabetes, heartDisease, lifeExpect], - socioEcIndicators: [lowInc], - isDisadvagtaged: properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] ? - properties[constants.IS_HEALTH_FACTOR_DISADVANTAGED] : null, - isExceed1MoreBurden: properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] ? - properties[constants.IS_HEALTH_EXCEED_ONE_OR_MORE_INDICATORS] : null, - isExceedBothSocioBurdens: properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] ? - properties[constants.IS_EXCEED_BOTH_SOCIO_INDICATORS] : null, - }, { id: 'work-dev', titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV), @@ -710,7 +714,7 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps) // eslint-disable-next-line max-len categories = categories.filter((category) => category.id === 'work-dev' || category.id === 'clean-energy' || category.id === 'leg-pollute' || category.id === 'sustain-house'); - categories[1].indicators = [houseBurden]; + categories[1].indicators = [houseCost]; categories[3].indicators = [lowMedInc, unemploy, poverty]; } diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index bc8e76ce..94fec805 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -274,7 +274,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
    Low median income
    - Median income calculated as a percent of the area’s median income + Comparison of income in the tract to incomes in the area
    @@ -389,10 +389,10 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL >
    - High school degree non-attainment + High school education
    - Percent of people ages 25 years or older whose education level is less than a high school diploma + Percent of people ages 25 years or older who did not graduate high school
    @@ -772,7 +772,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT >
    - Future flood risk + Projected flood risk
    Projected risk to properties from floods from tides, rain, riverine and storm surges in 30 years @@ -800,7 +800,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT >
    - Future wildfire risk + Projected wildfire risk
    Projected risk to properties from wildfire from fire fuels, weather, humans, and fire movement @@ -877,7 +877,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT >
    - Clean energy and energy efficiency + Energy
    - Energy burden + Energy cost
    Average annual energy costs divided by household income
    @@ -963,691 +963,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT Low income
    - Household income is less than or equal to twice the federal poverty level - -
    -
    -
    -
    -
    - 19 - - th - -
    -
    -
    -
    -
    - below 65 - - th - - percentile -
    -
    -
    -
    -
    • -
    -

    - -

    - -

    - -

    - -

    - -

    - -

    - -

    - +

    + +

    + +

    + +

    + +

    + +

    + +

    + +

    +
    - Methodology version 0.1 + Methodology version 1.0
    @@ -2092,7 +2092,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
    - Methodology version 0.1 + Methodology version 1.0
    @@ -2925,7 +2925,7 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
    - Methodology version 0.1 + Methodology version 1.0
    diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index d8748a08..1ea020ec 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -293,7 +293,13 @@ export const SIDE_PANEL_VERION = { defaultMessage={ 'Methodology version {version}'} description={`Navigate to the explore the map page. When the map is in view, click on the map. The side panel will show the methodology version number`} values= {{ - version: , + /** + * FormattedNumber currently renders 1.0 as 1. When the version number has a decimal point add back the + * Formatted Message component. Using toFixed will render the desire, however it returns a string which + * is unacceptable by the value prop of FormattedNumber. + */ + // version: , + version: METHODOLOGY_COPY.VERSION_NUMBER, }} />, }; diff --git a/client/src/data/copy/methodology.tsx b/client/src/data/copy/methodology.tsx index 79b624c5..ab2379f2 100644 --- a/client/src/data/copy/methodology.tsx +++ b/client/src/data/copy/methodology.tsx @@ -4,7 +4,7 @@ import {defineMessages} from 'react-intl'; import {FormattedMessage} from 'gatsby-plugin-intl'; import {boldFn, linkFn, simpleLink} from './common'; -export const VERSION_NUMBER = 0.1; +export const VERSION_NUMBER = (1.0).toFixed(1); export const PAGE = defineMessages({ TILE: {