publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add indicators to Puerto Rico (to release branch) (#1688)

Browse source 
* Add indicators to Puerto Rico

* Remove linguistic iso in Puerto Rico only
This commit is contained in:
Vim USDS 2022-07-12 11:55:22 -07:00
parent 746d36d4a6
commit 3c7c23e083
5 changed files with 590 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -41,6 +41,25 @@ export interface indicatorInfo {
threshold?: number, threshold?: number,
} }
/**
* This interface is used as define the various fields for category in the side panel
* id: distict id
* titleText: display text for the category title
* indicators: an array of indicators
* socioEcIndicators: an array of socio-economic indicators
* isDisadvagtaged: boolean to indicate if the category is disadvantaged
* isExceed1MoreBurden: boolean to indicate if the category exceeds more than one burden
* isExceedBothSocioBurdens: boolean to indicate if the category exceeds both socio-eco burdens
* */
export interface ICategory {
id: string,
titleText: string,
indicators: indicatorInfo[],
socioEcIndicators: indicatorInfo[],
isDisadvagtaged: boolean | null,
isExceed1MoreBurden: boolean | null,
isExceedBothSocioBurdens: boolean | null,
}
const AreaDetail = ({properties, hash}: IAreaDetailProps) => { const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
const intl = useIntl(); const intl = useIntl();
@ -378,7 +397,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
* The indicators property must be an array with last two elements being the * The indicators property must be an array with last two elements being the
* socioeconomic burdens. * socioeconomic burdens.
*/ */
let categories = [ let categories:ICategory[] = [
{ {
id: 'climate-change', id: 'climate-change',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE), titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.CLIMATE),
@ -466,7 +485,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
{ {
id: 'work-dev', id: 'work-dev',
titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV), titleText: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CATEGORY.WORK_DEV),
indicators: [lingIso, lowMedInc, , unemploy, poverty], indicators: [lingIso, lowMedInc, unemploy, poverty],
socioEcIndicators: [highSchool, higherEd], socioEcIndicators: [highSchool, higherEd],
isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ? isDisadvagtaged: properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] ?
properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : null, properties[constants.IS_WORKFORCE_FACTOR_DISADVANTAGED_M] : null,
@ -484,9 +503,19 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
* This sidePanelState has 3 values; namely, Nation, Puerto Rico and Island Areas. * This sidePanelState has 3 values; namely, Nation, Puerto Rico and Island Areas.
*/ */
if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.PUERTO_RICO) { if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.PUERTO_RICO) {
// For Puerto Rico - only show the workforce development category /* For Puerto Rico - only show the following indicators:
categories = categories.filter((category) => category.id === 'work-dev'); clean energy (index 1): show all
}; sustainable housing (index 2): only housing cost burden
legacy pollution (index 3): show all
workforce dev (index 4): remove linguistic iso
*/
// 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[3].indicators = [lowMedInc, unemploy, poverty];
}
if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) { if (sidePanelState === constants.SIDE_PANEL_STATE_VALUES.ISLAND_AREAS) {
// For Island Areas - only show workforce dev category // For Island Areas - only show workforce dev category
categories = categories.filter((category) => category.id === 'work-dev'); categories = categories.filter((category) => category.id === 'work-dev');

597
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -2184,6 +2184,559 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
class="usa-accordion" class="usa-accordion"
data-testid="accordion" data-testid="accordion"
> >
<h4
class="usa-accordion__heading"
>
<button
aria-controls="clean-energy"
aria-expanded="false"
class="usa-accordion__button"
data-testid="accordionButton_clean-energy"
type="button"
>
<div>
<div>
Clean energy and energy efficiency
</div>
<div
class=""
/>
</div>
</button>
</h4>
<div
class="usa-accordion__content usa-prose"
data-testid="accordionItem_clean-energy"
hidden=""
id="clean-energy"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Energy burden
<div>
Average annual energy costs divided by household income
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
PM2.5 in the air
<div>
Fine inhalable particles, 2.5 micrometers or smaller
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
<div>
AND
</div>
<div>
<div>
At or above both associated thresholds?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
</div>
</div>
<div>
<div>
<div>
19
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
<img
alt="an icon for the down arrow"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
</div>
</li>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Higher education non-enrollment
<div>
Percent of the census tract's population 15 or older not enrolled in college, university, or
graduate school
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
</div>
<h4
class="usa-accordion__heading"
>
<button
aria-controls="sustain-house"
aria-expanded="false"
class="usa-accordion__button"
data-testid="accordionButton_sustain-house"
type="button"
>
<div>
<div>
Sustainable housing
</div>
<div
class=""
/>
</div>
</button>
</h4>
<div
class="usa-accordion__content usa-prose"
data-testid="accordionItem_sustain-house"
hidden=""
id="sustain-house"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Housing cost burden
<div>
Low income households spending more than 30% of income on housing
</div>
</div>
<div>
<div>
<div>
95
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
<img
alt="an icon for the up arrow"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
</div>
</li>
<div>
AND
</div>
<div>
<div>
At or above both associated thresholds?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
</div>
</div>
<div>
<div>
<div>
19
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
<img
alt="an icon for the down arrow"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
</div>
</li>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Higher education non-enrollment
<div>
Percent of the census tract's population 15 or older not enrolled in college, university, or
graduate school
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
</div>
<h4
class="usa-accordion__heading"
>
<button
aria-controls="leg-pollute"
aria-expanded="false"
class="usa-accordion__button"
data-testid="accordionButton_leg-pollute"
type="button"
>
<div>
<div>
Legacy pollution
</div>
<div
class=""
/>
</div>
</button>
</h4>
<div
class="usa-accordion__content usa-prose"
data-testid="accordionItem_leg-pollute"
hidden=""
id="leg-pollute"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Proximity to hazardous waste facilities
<div>
Count of hazardous waste facilities within 5 kilometers
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Proximity to National Priorities List (NPL) sites
<div>
Proposed or listed NPL (Superfund) sites within 5 kilometers
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Proximity to Risk Management Plan (RMP) facilities
<div>
RMP facilities within 5 kilometers
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
<div>
AND
</div>
<div>
<div>
At or above both associated thresholds?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Low income
<div>
Household income is less than or equal to twice the federal poverty level
</div>
</div>
<div>
<div>
<div>
19
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
<img
alt="an icon for the down arrow"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
</div>
</li>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Higher education non-enrollment
<div>
Percent of the census tract's population 15 or older not enrolled in college, university, or
graduate school
</div>
</div>
<div>
<div>
<div />
<div>
<img
alt="an icon to represent data is unavailable"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
data is not available
</div>
</div>
</div>
</div>
</li>
</div>
<h4 <h4
class="usa-accordion__heading" class="usa-accordion__heading"
> >
@ -2218,50 +2771,6 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
No No
</div> </div>
</div> </div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
>
<div>
<div>
Linguistic isolation
<div>
Percent of households where no one over the age 14 speaks English well
</div>
</div>
<div>
<div>
<div>
97
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
<img
alt="an icon for the up arrow"
src="test-file-stub"
/>
</div>
</div>
<div>
<div>
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
</div>
</li>
<li <li
data-cy="indicatorBox" data-cy="indicatorBox"
data-testid="indicator-box" data-testid="indicator-box"

2
client/src/components/Category/Category.tsx
View file

@ -5,7 +5,7 @@ import * as styles from './Category.module.scss';
interface ICategory { interface ICategory {
name: string; name: string;
isDisadvantaged: boolean; isDisadvantaged: boolean | null;
} }
const Category = ({name, isDisadvantaged}:ICategory) => { const Category = ({name, isDisadvantaged}:ICategory) => {

2
client/src/components/DisadvantageDot/DisadvantageDot.tsx
View file

@ -3,7 +3,7 @@ import React from 'react';
import * as styles from './DisadvantageDot.module.scss'; import * as styles from './DisadvantageDot.module.scss';
interface IDisadvantageDot { interface IDisadvantageDot {
isDisadvantaged?: boolean; isDisadvantaged?: boolean | null;
isBig?: boolean; isBig?: boolean;
} }
const DisadvantageDot = ({isDisadvantaged = false, isBig}:IDisadvantageDot) => { const DisadvantageDot = ({isDisadvantaged = false, isBig}:IDisadvantageDot) => {

2
client/src/components/ExceedBurden/ExceedBurden.tsx
View file

@ -5,7 +5,7 @@ import * as EXPLORE_COPY from '../../data/copy/explore';
interface IExceedBurden { interface IExceedBurden {
text: React.ReactElement; text: React.ReactElement;
isBurdened: boolean; isBurdened: boolean | null;
} }
const ExceedBurden = ({text, isBurdened}:IExceedBurden) => { const ExceedBurden = ({text, isBurdened}:IExceedBurden) => {
return ( return (