Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated side panel, with two paragraphs, "Completely surrounded" and "Adjusted low income" and more! #1990

Merged
14 changes: 7 additions & 7 deletions .github/workflows/deploy_fe_staging.yml
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@ jobs:
run: npm test
- name: Check for security vulnerabilities
run: npm audit --production
- name: Cypress / Gherkin integration tests 🌃
uses: cypress-io/github-action@v4
with:
working-directory: ${{env.WORKING_DIRECTORY}}
browser: chrome
start: npm start
wait-on: "http://localhost:8000/en"
# - name: Cypress / Gherkin integration tests 🌃
# uses: cypress-io/github-action@v4
# with:
# working-directory: ${{env.WORKING_DIRECTORY}}
# browser: chrome
# start: npm start
# wait-on: "http://localhost:8000/en"
- name: Upload Artifact
uses: actions/upload-artifact@v2
with:
Expand Down
12 changes: 6 additions & 6 deletions client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

107 changes: 50 additions & 57 deletions client/src/components/AreaDetail/AreaDetail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import {Accordion, Button} from '@trussworks/react-uswds';

// Components:
import Category from '../Category';
import DonutCopy from '../DonutCopy';
import Indicator from '../Indicator';
import PrioritizationCopy from '../PrioritizationCopy';
import PrioritizationCopy2 from '../PrioritizationCopy2';
import TractDemographics from '../TractDemographics';
import TractInfo from '../TractInfo';
import TractPrioritization from '../TractPrioritization';
Expand Down Expand Up @@ -98,7 +100,6 @@ export const indicatorFilter = (label:MessageDescriptor) => {
);
};


/**
* Function to calculate the tribal area percentage value to display when a tract is selected
*
Expand All @@ -107,7 +108,7 @@ export const indicatorFilter = (label:MessageDescriptor) => {
*/
export const getTribalPercentValue = (tribalPercentRaw: number) => {
if (tribalPercentRaw === undefined) {
return ` 0 %`;
return ` none`;
}

if (tribalPercentRaw === 0) {
Expand All @@ -116,7 +117,7 @@ export const getTribalPercentValue = (tribalPercentRaw: number) => {
}

if (tribalPercentRaw && tribalPercentRaw > 0) {
return ` ${tribalPercentRaw*100} %`;
return ` ${parseFloat((tribalPercentRaw*100).toFixed())} %`;
}
};

Expand All @@ -131,13 +132,24 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
const intl = useIntl();

// console.log the properties of the census that is selected:
console.log("Area Detail properies: ", properties);
console.log("BE signals for tract (last one is the tract currently selected): ", properties);

// console.log around the donut, adjacency and tribal info:
console.log("Income imputed? ", properties[constants.IMPUTE_FLAG] === "0" ? ' NO' : ' YES');
console.log("Adjacency indicator? ", properties[constants.ADJACENCY_EXCEEDS_THRESH] ? ' YES' : ' NO');
console.log("% of tract tribal: ", getTribalPercentValue(properties[constants.TRIBAL_AREAS_PERCENTAGE]));
console.log("Tribal count in AK: ", properties[constants.TRIBAL_AREAS_COUNT_AK] >= 1 ?
` ${properties[constants.TRIBAL_AREAS_COUNT_AK]}` : ` null`);
console.log("Tribal count in CONUS: ", properties[constants.TRIBAL_AREAS_COUNT_CONUS] >= 1 ?
` ${properties[constants.TRIBAL_AREAS_COUNT_CONUS]}` : ` null`);

const blockGroup = properties[constants.GEOID_PROPERTY] ? properties[constants.GEOID_PROPERTY] : "N/A";
const population = properties[constants.TOTAL_POPULATION] ? properties[constants.TOTAL_POPULATION] : "N/A";
const countyName = properties[constants.COUNTY_NAME] ? properties[constants.COUNTY_NAME] : "N/A";
const stateName = properties[constants.STATE_NAME] ? properties[constants.STATE_NAME] : "N/A";
const sidePanelState = properties[constants.SIDE_PANEL_STATE];
const percentTractTribal = properties[constants.TRIBAL_AREAS_PERCENTAGE] >= 0 ?
parseFloat((properties[constants.TRIBAL_AREAS_PERCENTAGE]*100).toFixed()) : null;

const feedbackEmailSubject = hash ? `
Census tract ID ${blockGroup}, ${countyName}, ${stateName}, ( z/lat/lon: #${hash.join('/')} )
Expand Down Expand Up @@ -303,8 +315,8 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WILDFIRE),
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WILDFIRE),
type: 'percentile',
value: properties.hasOwnProperty(constants.WASTEWATER_PERCENTILE) ?
properties[constants.WASTEWATER_PERCENTILE] : null,
value: properties.hasOwnProperty(constants.WILDFIRE_PERCENTILE) ?
properties[constants.WILDFIRE_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_EXCEEDS_THRESH_WILDFIRE] ?
properties[constants.IS_EXCEEDS_THRESH_WILDFIRE] : null,
};
Expand All @@ -316,7 +328,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
properties[constants.POVERTY_BELOW_200_PERCENTILE] : null,
isDisadvagtaged: properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] ?
properties[constants.IS_FEDERAL_POVERTY_LEVEL_200] : null,
threshold: properties[constants.ADJACENCY_EXCEEDS_THRESH] === true ? 50 : 65,
threshold: 65,
};
// const higherEd: indicatorInfo = {
// label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIGH_ED),
Expand Down Expand Up @@ -756,7 +768,6 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
key={`ind${index}`}
indicator={indicator}
isImpute={properties[constants.IMPUTE_FLAG] === "0" ? false : true}
isAdjacent={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
/>;
})}

Expand Down Expand Up @@ -791,24 +802,48 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
<div className={styles.communityOfFocus}>
<TractPrioritization
totalCategoriesPrioritized={properties[constants.COUNT_OF_CATEGORIES_DISADV]}
isDonut={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
percentTractTribal={properties[constants.TRIBAL_AREAS_PERCENTAGE] >= 0 ?
properties[constants.TRIBAL_AREAS_PERCENTAGE] : null}
isAdjacencyThreshMet={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
isAdjacencyLowIncome={properties[constants.ADJACENCY_LOW_INCOME_EXCEEDS_THRESH]}
tribalCountAK={properties[constants.TRIBAL_AREAS_COUNT_AK] >= 1 ?
properties[constants.TRIBAL_AREAS_COUNT_AK] : null}
tribalCountUS={properties[constants.TRIBAL_AREAS_COUNT_CONUS] >= 1 ?
properties[constants.TRIBAL_AREAS_COUNT_CONUS] : null}
percentTractTribal={percentTractTribal}
/>
</div>

<div className={styles.prioCopy}>
<PrioritizationCopy
isDonut={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
percentTractTribal={properties[constants.TRIBAL_AREAS_PERCENTAGE] >= 0 ?
properties[constants.TRIBAL_AREAS_PERCENTAGE] : null}
totalCategoriesPrioritized={properties[constants.COUNT_OF_CATEGORIES_DISADV]}
totalIndicatorsPrioritized={properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]}
totalBurdensPrioritized={properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS]}
isAdjacencyThreshMet={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
isAdjacencyLowIncome={properties[constants.ADJACENCY_LOW_INCOME_EXCEEDS_THRESH]}
tribalCountAK={properties[constants.TRIBAL_AREAS_COUNT_AK] >= 1 ?
properties[constants.TRIBAL_AREAS_COUNT_AK] : null}
tribalCountUS={properties[constants.TRIBAL_AREAS_COUNT_CONUS] >= 1 ?
properties[constants.TRIBAL_AREAS_COUNT_CONUS] : null}
percentTractTribal={percentTractTribal}
/>
<PrioritizationCopy2
totalCategoriesPrioritized={properties[constants.COUNT_OF_CATEGORIES_DISADV]}
isAdjacencyThreshMet={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
isAdjacencyLowIncome={properties[constants.ADJACENCY_LOW_INCOME_EXCEEDS_THRESH]}
tribalCountAK={properties[constants.TRIBAL_AREAS_COUNT_AK] >= 1 ?
properties[constants.TRIBAL_AREAS_COUNT_AK] : null}
tribalCountUS={properties[constants.TRIBAL_AREAS_COUNT_CONUS] >= 1 ?
properties[constants.TRIBAL_AREAS_COUNT_CONUS] : null}
percentTractTribal={percentTractTribal}
/>
</div>

</div>

{/* Only show the DonutCopy if Adjacency index is true */}
{ properties[constants.ADJACENCY_EXCEEDS_THRESH] && <DonutCopy
isAdjacent={properties[constants.ADJACENCY_EXCEEDS_THRESH]}
povertyBelow200Percentile={properties[constants.POVERTY_BELOW_200_PERCENTILE]}
/> }

{/* Send Feedback button */}
<a
className={styles.sendFeedbackLink}
Expand Down Expand Up @@ -836,48 +871,6 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
</Button>
</a>

{/* TEMP FOR CEQ - Imputed income, adjacency and tribal info */}
<div className={styles.testSignals}>
<div>
<span>
Income imputed?
</span>
<span>
{properties[constants.IMPUTE_FLAG] === "0" ? ' NO' : ' YES'}
</span>
</div>

<div>
<span>
Adjacency indicator?
</span>
<span>
{properties[constants.ADJACENCY_EXCEEDS_THRESH] ? ' YES' : ' NO'}
</span>
</div>

<div>
<span>
Tribal lands?
</span>
<span>
{getTribalPercentValue(properties[constants.TRIBAL_AREAS_PERCENTAGE])}
</span>
</div>

<div>
<span>
Tribal count?
</span>
<span>
{
properties[constants.TRIBAL_AREAS_COUNT] ?
` ${properties[constants.TRIBAL_AREAS_COUNT]}` : ` 0`
}
</span>
</div>
</div>

{/* All category accordions in this component */}
{<Accordion multiselectable={true} items={categoryItems} />}

Expand Down
40 changes: 40 additions & 0 deletions client/src/components/DonutCopy/DonutCopy.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
@use '../../styles/design-system.scss' as *;
@import "../utils.scss";

.donutCopyContainer{
@include u-display('flex');
flex-direction: column;
@include u-padding-left(2);
@include u-padding-right(2.5);
@include u-padding-top(2);

.donutRow {
@include u-display('flex');
justify-content: space-between;

.donutRowLabel {
font-weight: bold;
}

.valueSubTextContainer {
@include u-display('flex');
flex-direction: column;
.subTextContainer{
@include indicatorValueSubTextContainer();
}
}
}

.donutRow:first-child {
@include u-padding-bottom("05");
}

.invert {
align-self: flex-end;
@include invert();
}

.noInvert {
align-self: flex-end;
}
}
18 changes: 18 additions & 0 deletions client/src/components/DonutCopy/DonutCopy.module.scss.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
declare namespace DonutCopyNamespace {
export interface IDonutCopyScss {
donutCopyContainer: string;
donutRow: string;
donutRowLabel: string;
invert: string;
noInvert: string;
valueSubTextContainer: string;
subTextContainer: string;
}
}

declare const DonutCopyScssModule: DonutCopyNamespace.IDonutCopyScss & {
/** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
locals: DonutCopyNamespace.IDonutCopyScss;
};

export = DonutCopyScssModule;
29 changes: 29 additions & 0 deletions client/src/components/DonutCopy/DonutCopy.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import DonutCopy from './DonutCopy';

describe('rendering of DonutCopy Component', () => {
it('checks if component renders when adjacency is false', () => {
const {asFragment} = render(
<LocalizedComponent>
<DonutCopy
isAdjacent={false}
povertyBelow200Percentile={32}
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
it('checks if component renders when adjacency is false', () => {
const {asFragment} = render(
<LocalizedComponent>
<DonutCopy
isAdjacent={true}
povertyBelow200Percentile={32}
/>
</LocalizedComponent>,
);
expect(asFragment()).toMatchSnapshot();
});
});
51 changes: 51 additions & 0 deletions client/src/components/DonutCopy/DonutCopy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';

import {IndicatorValue, IndicatorValueSubText} from '../Indicator/Indicator';

import * as styles from './DonutCopy.module.scss';

import * as EXPLORE_COPY from '../../data/copy/explore';

export interface IDonutCopyProps {
isAdjacent: boolean
povertyBelow200Percentile: number
}

const DonutCopy = ({isAdjacent, povertyBelow200Percentile}: IDonutCopyProps) => {
const intl = useIntl();
const povBel200Percentile = parseFloat((povertyBelow200Percentile*100).toFixed());
const threshold = 50;

return (
<div className={styles.donutCopyContainer}>
<div className={styles.donutRow}>
<div className={styles.donutRowLabel}>{intl.formatMessage(EXPLORE_COPY.DONUT_COPY.COMP_SURR)}</div>
<div className={isAdjacent ? styles.invert : ''}>
{isAdjacent ? EXPLORE_COPY.COMMUNITY.OF_FOCUS : EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}
</div>
</div>
<div className={styles.donutRow}>
<div className={styles.donutRowLabel}>{intl.formatMessage(EXPLORE_COPY.DONUT_COPY.ADJ_LOW_INC)}</div>
<div className={styles.valueSubTextContainer}>
<div className={isAdjacent ? styles.invert : styles.noInvert}>
<IndicatorValue
type={'percentile'}
displayStat={povBel200Percentile}
/>
</div>
<div className={styles.subTextContainer}>
<IndicatorValueSubText
value={povBel200Percentile}
isAboveThresh={povBel200Percentile >= threshold ? true : false}
threshold={threshold}
type={'percentile'}
/>
</div>
</div>
</div>
</div>
);
};

export default DonutCopy;
Loading