diff --git a/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap b/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
index 7c8c915f..d60630ab 100644
--- a/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
+++ b/client/src/components/__snapshots__/scoreStepsList.test.tsx.snap
@@ -13,14 +13,17 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
>
Gather datasets
-
Data inputs
- The cumulative index score includes the following equally weighted inputs.
-
+
+ The cumulative index score includes the following equally weighted inputs.
+
+
-
Poverty
@@ -37,23 +40,22 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
Housing burden
-
-
Combining data from different geographic units
- 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.
+
Normalizing data
- 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.
+
-
@@ -64,7 +66,6 @@ exports[`rendering of the component should match the snapshot of the MapIntroduc
To combine all variables into a single cumulative index score, we average the normalized values across indicators.
-
-
-
diff --git a/client/src/components/scoreStepsList.test.tsx b/client/src/components/scoreStepsList.test.tsx
index 07db0b70..0d48c454 100644
--- a/client/src/components/scoreStepsList.test.tsx
+++ b/client/src/components/scoreStepsList.test.tsx
@@ -3,6 +3,14 @@ import {render} from '@testing-library/react';
import ScoreStepsList from './scoreStepsList';
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', () => {
const {asFragment} = render(
@@ -13,4 +21,8 @@ describe('rendering of the component', () => {
it('should match the snapshot of the MapIntroduction component', () => {
expect(asFragment()).toMatchSnapshot();
});
+
+ it('No console errors', () => {
+ expect(console.error).toBeCalledTimes(0);
+ });
});
diff --git a/client/src/components/scoreStepsList.tsx b/client/src/components/scoreStepsList.tsx
index ed442978..def3be76 100644
--- a/client/src/components/scoreStepsList.tsx
+++ b/client/src/components/scoreStepsList.tsx
@@ -2,86 +2,99 @@ import React from 'react';
import {GridContainer, Grid} from '@trussworks/react-uswds';
const ScoreStepsList = () => {
- return (<>
-
-
- -
-
-
Gather datasets
- Data inputs
- The cumulative index score includes the following equally
- weighted inputs.
-
+ return (
+ <>
+
+
+ -
+
+
Gather datasets
+ Data inputs
+
+ The cumulative index score includes the following equally
+ weighted inputs.
+
+
+
- Poverty
- Less than high school education
- Linguistic isolation
- Unemployment rate
- Housing burden
-
-
-
- Combining data from different geographic units
- 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.
-
- Normalizing data
- 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.
-
-
-
- -
-
-
Calculate cumulative index score
- To combine all variables into a single cumulative index score,
+
+
+ Combining data from different geographic units
+
+
+ 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.
+
+ Normalizing data
+
+ 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.
+
+
+
+
+ -
+
+
Calculate cumulative index score
+
+ To combine all variables into a single cumulative index score,
we average the normalized values across indicators.
-
-
+
+
- Dataset 1 + Dataset 2 + ... + Dataset N
+ Dataset 1 + Dataset 2 + ... + Dataset N
- # of datasets
+ # of datasets
- =
- Cumulative index score
+
+ =
+
+
+ Cumulative index score
+
-
-
-
+
+
- -
-
-
Assign priority
-
+
-
+
+
Assign priority
+
Census block groups are sorted by their cumulative index score
- from highest to lowest. Census block groups that are in the top 25
- percentile (i.e. have a cumulative index score in the 75 - 100th
- percentile) will be considered the prioritized communities.
-
-
-
-
-
- >
+ from highest to lowest. Census block groups that are in the top
+ 25 percentile (i.e. have a cumulative index score in the 75 -
+ 100th percentile) will be considered the prioritized
+ communities.
+
+
+
+
+
+ >
);
};
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index b16209ef..06cecaf8 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -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 */
.j40-item-list-title {
margin-block-end: auto;