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

Fix putting elements under <p> (#521)

Browse source 
* Fix putting elements under <p>
* Added Jest test to catch this mistake in the future. It does it by watching console.error().
To add in fixing the bug the test's emulated `console.error()` are echoed to the jest console.error() so they are not lost.
* I tested this by putting a `<h1>` back into the `<p>` and it caught it.
* Update scoreStepsList.test.tsx
* added comment to move console.error ticket to global location

Co-authored-by: Vim <86254807+vim-usds@users.noreply.github.com>
This commit is contained in:
TomNUSDS 2021-08-19 17:34:12 -07:00 • committed by GitHub
parent 6691df3e31
commit f7bfc979ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 104 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
View file

@ -13,14 +13,17 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
> >
Gather datasets Gather datasets
</h3> </h3>
<p />
<h4 <h4
class="j40-item-list-subtitle" class="j40-item-list-subtitle"
> >
Data inputs Data inputs
</h4> </h4>
<p>
The cumulative index score includes the following equally weighted inputs. The cumulative index score includes the following equally weighted inputs.
<ul> </p>
<ul
class="j40-process-nested-list"
>
<li> <li>
Poverty Poverty
</li> </li>
@ -37,23 +40,22 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
Housing burden Housing burden
</li> </li>
</ul> </ul>
<p />
<p />
<h4 <h4
class="j40-item-list-subtitle" class="j40-item-list-subtitle"
> >
Combining data from different geographic units Combining data from different geographic units
</h4> </h4>
<p>
Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile. Some data is not available at the census block group level and is instead only available for larger units such as census tracts or counties. In these cases, all census block groups will get an even contribution from the larger unit. For example, if a census tract scores 90th percentile on an indicator, then all census block groups within that tract will receive a value of 90th percentile.
<p /> </p>
<p />
<h4 <h4
class="j40-item-list-subtitle" class="j40-item-list-subtitle"
> >
Normalizing data Normalizing data
</h4> </h4>
<p>
The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30. The range of the data that makes up the score varies, so the data must be normalized so that each data indicator can be more equally weighted. Min-max normalization is utilized, where the minimum value in the range of values for each dataset is set at 0, the maximum value is set at 1, and every other value is transformed into a decimal between 0 and 1. For example, if the minimum value for unemployment was 10 and the maximum value was 30, a value of 20 would be transformed to 0.5 since it is halfway between 10 and 30.
<p /> </p>
</section> </section>
</li> </li>
<li> <li>
@ -64,7 +66,6 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
<p> <p>
To combine all variables into a single cumulative index score, we average the normalized values across indicators. To combine all variables into a single cumulative index score, we average the normalized values across indicators.
</p> </p>
<p />
<div <div
class="grid-container" class="grid-container"
data-testid="gridContainer" data-testid="gridContainer"
@ -102,7 +103,6 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
</div> </div>
</div> </div>
</div> </div>
<p />
</section> </section>
</li> </li>
<li> <li>

12
client/src/components/scoreStepsList.test.tsx
View file

@ -3,6 +3,14 @@ import {render} from '@testing-library/react';
import ScoreStepsList from './scoreStepsList'; import ScoreStepsList from './scoreStepsList';
import {LocalizedComponent} from '../test/testHelpers'; import {LocalizedComponent} from '../test/testHelpers';
// TODO: Move this to a location that will detect on all tests
// See ticket: #550
beforeAll(() => {
jest.spyOn(global.console, 'error').mockImplementation((...params) => {
console.error(params);
});
});
describe('rendering of the component', () => { describe('rendering of the component', () => {
const {asFragment} = render( const {asFragment} = render(
<LocalizedComponent> <LocalizedComponent>
@ -13,4 +21,8 @@ describe('rendering of the component', () => {
it('should match the snapshot of the MapIntroduction component', () => { it('should match the snapshot of the MapIntroduction component', () => {
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
it('No console errors', () => {
expect(console.error).toBeCalledTimes(0);
});
}); });

73
client/src/components/scoreStepsList.tsx
View file

@ -2,43 +2,51 @@ import React from 'react';
import {GridContainer, Grid} from '@trussworks/react-uswds'; import {GridContainer, Grid} from '@trussworks/react-uswds';
const ScoreStepsList = () => { const ScoreStepsList = () => {
return (<> return (
<>
<div className={'j40-process-list-wrapper'}> <div className={'j40-process-list-wrapper'}>
<ul> <ul>
<li> <li>
<section> <section>
<h3 className={'j40-item-list-title'}>Gather datasets</h3> <h3 className={'j40-item-list-title'}>Gather datasets</h3>
<p><h4 className={'j40-item-list-subtitle'}>Data inputs</h4> <h4 className={'j40-item-list-subtitle'}>Data inputs</h4>
<p>
The cumulative index score includes the following equally The cumulative index score includes the following equally
weighted inputs. weighted inputs.
<ul> </p>
<ul className={'j40-process-nested-list'}>
<li>Poverty</li> <li>Poverty</li>
<li>Less than high school education</li> <li>Less than high school education</li>
<li>Linguistic isolation</li> <li>Linguistic isolation</li>
<li>Unemployment rate</li> <li>Unemployment rate</li>
<li>Housing burden</li> <li>Housing burden</li>
</ul> </ul>
</p>
<p>
<h4 className={'j40-item-list-subtitle'}> <h4 className={'j40-item-list-subtitle'}>
Combining data from different geographic units</h4> Combining data from different geographic units
Some data is not available at the census block group level and is </h4>
instead only available for larger units such as census tracts or <p>
counties. In these cases, all census block groups will get an even Some data is not available at the census block group level and
contribution from the larger unit. For example, if a census tract is instead only available for larger units such as census tracts
scores 90th percentile on an indicator, then all census block or counties. In these cases, all census block groups will get an
groups within that tract will receive a value of 90th percentile. even contribution from the larger unit. For example, if a census
tract scores 90th percentile on an indicator, then all census
block groups within that tract will receive a value of 90th
percentile.
</p> </p>
<p><h4 className={'j40-item-list-subtitle'}>Normalizing data</h4> <h4 className={'j40-item-list-subtitle'}>Normalizing data</h4>
The range of the data that makes up the score varies, so the data <p>
must be normalized so that each data indicator can be more equally The range of the data that makes up the score varies, so the
weighted. Min-max normalization is utilized, where the minimum data must be normalized so that each data indicator can be more
value in the range of values for each dataset is set at 0, the equally weighted. Min-max normalization is utilized, where the
maximum value is set at 1, and every other value is transformed minimum value in the range of values for each dataset is set at
into a decimal between 0 and 1. For example, if the minimum value 0, the maximum value is set at 1, and every other value is
for unemployment was 10 and the maximum value was 30, a value of transformed into a decimal between 0 and 1. For example, if the
20 would be transformed to 0.5 since it is halfway between 10 and minimum value for unemployment was 10 and the maximum value was
30. 30, a value of 20 would be transformed to 0.5 since it is
halfway between 10 and 30.
</p> </p>
</section> </section>
</li> </li>
@ -46,10 +54,11 @@ const ScoreStepsList = () => {
<li> <li>
<section> <section>
<h3>Calculate cumulative index score</h3> <h3>Calculate cumulative index score</h3>
<p>To combine all variables into a single cumulative index score, <p>
To combine all variables into a single cumulative index score,
we average the normalized values across indicators. we average the normalized values across indicators.
</p> </p>
<p>
<GridContainer className={''}> <GridContainer className={''}>
<Grid row className={'j40-math-division-container'}> <Grid row className={'j40-math-division-container'}>
<Grid col className={'j40-math-eq-left-side grid-col-fill'}> <Grid col className={'j40-math-eq-left-side grid-col-fill'}>
@ -60,11 +69,14 @@ const ScoreStepsList = () => {
# of datasets # of datasets
</div> </div>
</Grid> </Grid>
<Grid col className={'j40-math-eq-middle grid-col-auto'}>=</Grid> <Grid col className={'j40-math-eq-middle grid-col-auto'}>
<Grid col className={'j40-math-eq-right-side grid-col-fill'}>Cumulative index score</Grid> =
</Grid>
<Grid col className={'j40-math-eq-right-side grid-col-fill'}>
Cumulative index score
</Grid>
</Grid> </Grid>
</GridContainer> </GridContainer>
</p>
</section> </section>
</li> </li>
@ -73,9 +85,10 @@ const ScoreStepsList = () => {
<h3 className={'j40-item-list-title'}>Assign priority</h3> <h3 className={'j40-item-list-title'}>Assign priority</h3>
<p> <p>
Census block groups are sorted by their cumulative index score Census block groups are sorted by their cumulative index score
from highest to lowest. Census block groups that are in the top 25 from highest to lowest. Census block groups that are in the top
percentile (i.e. have a cumulative index score in the 75 - 100th 25 percentile (i.e. have a cumulative index score in the 75 -
percentile) will be considered the prioritized communities. 100th percentile) will be considered the prioritized
communities.
</p> </p>
</section> </section>
</li> </li>

7
client/src/styles/global.scss
View file

@ -407,6 +407,13 @@ $primary-color: #112f4e;
} }
} }
ul.j40-process-nested-list {
margin-bottom: 2rem;
> li {
list-style-type: disc; /* without this, we get hollow circles */
}
}
/* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */ /* these are currently used in the list, but it seems like they should be globally consistent with the rest of the site */
.j40-item-list-title { .j40-item-list-title {
margin-block-end: auto; margin-block-end: auto;