mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 23:31:16 -07:00
Update version number on frontend (#730)
* Update version number on frontend - add verion to download packet - add verison to side panel - update snaphots - add version to constant file * Add minor UI changes from QA - adjust copy in download package - update tests * Refactor all intl code and will add page tests - remove all copy app wide and place into respective data/copy folder - adds tests for each page - allow product to make copy changes in one place - prepare for spanish language effort
This commit is contained in:
Vim
GitHub
parent
b1a4d26be8
commit
53c2d98eaa
41 changed files with 3992 additions and 1050 deletions
|
|
@ -2,7 +2,6 @@
|
|||
// External Libs:
|
||||
import * as React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {defineMessages} from 'react-intl';
|
||||
|
||||
// Components:
|
||||
// import {Accordion} from '@trussworks/react-uswds';
|
||||
|
|
@ -10,6 +9,8 @@ import {defineMessages} from 'react-intl';
|
|||
// Styles and constants
|
||||
import * as styles from './areaDetail.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
export const readablePercentile = (percentile: number) => {
|
||||
return Math.round(percentile * 100);
|
||||
|
|
@ -37,13 +38,13 @@ export const getCategorization = (percentile: number) => {
|
|||
let categoryCircleStyle;
|
||||
|
||||
if (percentile >= constants.SCORE_BOUNDARY_PRIORITIZED ) {
|
||||
categorization = 'Community of focus';
|
||||
categorization = EXPLORE_COPY.COMMUNITY.OF_FOCUS;
|
||||
categoryCircleStyle = styles.prioritized;
|
||||
} else if (constants.SCORE_BOUNDARY_THRESHOLD <= percentile && percentile < constants.SCORE_BOUNDARY_PRIORITIZED) {
|
||||
categorization = 'Not a community of focus';
|
||||
categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS;
|
||||
categoryCircleStyle = styles.threshold;
|
||||
} else {
|
||||
categorization = 'Not a community of focus';
|
||||
categorization = EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS;
|
||||
categoryCircleStyle = styles.nonPrioritized;
|
||||
}
|
||||
return [categorization, categoryCircleStyle];
|
||||
|
|
@ -55,140 +56,6 @@ interface IAreaDetailProps {
|
|||
|
||||
const AreaDetail = ({properties}:IAreaDetailProps) => {
|
||||
const intl = useIntl();
|
||||
const messages = defineMessages({
|
||||
percentile: {
|
||||
id: 'areaDetail.priorityInfo.percentile',
|
||||
defaultMessage: 'percentile',
|
||||
description: 'the percentil of the feature selected',
|
||||
},
|
||||
categorization: {
|
||||
id: 'areaDetail.priorityInfo.categorization',
|
||||
defaultMessage: 'Categorization',
|
||||
description: 'the categorization of prioritized, threshold or non-prioritized',
|
||||
},
|
||||
censusBlockGroup: {
|
||||
id: 'areaDetail.geographicInfo.censusBlockGroup',
|
||||
defaultMessage: 'Census block group:',
|
||||
description: 'the census block group id number of the feature selected',
|
||||
},
|
||||
county: {
|
||||
id: 'areaDetail.geographicInfo.county',
|
||||
defaultMessage: 'County:',
|
||||
description: 'the county of the feature selected',
|
||||
},
|
||||
state: {
|
||||
id: 'areaDetail.geographicInfo.state',
|
||||
defaultMessage: 'State: ',
|
||||
description: 'the state of the feature selected',
|
||||
},
|
||||
population: {
|
||||
id: 'areaDetail.geographicInfo.population',
|
||||
defaultMessage: 'Population:',
|
||||
description: 'the population of the feature selected',
|
||||
},
|
||||
indicatorColumnHeader: {
|
||||
id: 'areaDetail.indicators.indicatorColumnHeader',
|
||||
defaultMessage: 'Indicator',
|
||||
description: 'the population of the feature selected',
|
||||
},
|
||||
percentileColumnHeader: {
|
||||
id: 'areaDetail.indicators.percentileColumnHeader',
|
||||
defaultMessage: 'Percentile (0-100)',
|
||||
description: 'the population of the feature selected',
|
||||
},
|
||||
poverty: {
|
||||
id: 'areaDetail.indicator.poverty',
|
||||
defaultMessage: 'Poverty',
|
||||
description: 'Household income is less than or equal to twice the federal "poverty level"',
|
||||
},
|
||||
areaMedianIncome: {
|
||||
id: 'areaDetail.indicator.areaMedianIncome',
|
||||
defaultMessage: 'Area Median Income',
|
||||
description: 'calculated as percent of the area median income',
|
||||
},
|
||||
education: {
|
||||
id: 'areaDetail.indicator.education',
|
||||
defaultMessage: 'Education, less than high school',
|
||||
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
||||
},
|
||||
linguisticIsolation: {
|
||||
id: 'areaDetail.indicator.linguisticIsolation',
|
||||
defaultMessage: 'Linguistic isolation',
|
||||
description: 'Households in which all members speak a non-English language and ' +
|
||||
'speak English less than "very well"',
|
||||
},
|
||||
unemployment: {
|
||||
id: 'areaDetail.indicator.unemployment',
|
||||
defaultMessage: 'Unemployment rate',
|
||||
description: 'Number of unemployed people as a percentage of the labor force',
|
||||
},
|
||||
asthma: {
|
||||
id: 'areaDetail.indicator.asthma',
|
||||
defaultMessage: 'Asthma',
|
||||
description: 'have asthma or been diagnosed by a doctor to have asthma',
|
||||
},
|
||||
diabetes: {
|
||||
id: 'areaDetail.indicator.diabetes',
|
||||
defaultMessage: 'Diabetes',
|
||||
description: 'diabetes from dr or nurse',
|
||||
},
|
||||
dieselPartMatter: {
|
||||
id: 'areaDetail.indicator.dieselPartMatter',
|
||||
defaultMessage: 'Diesel particulate matter',
|
||||
description: 'Diesel particulate matter level in air',
|
||||
},
|
||||
energyBurden: {
|
||||
id: 'areaDetail.indicator.energyBurden',
|
||||
defaultMessage: 'Energy burden',
|
||||
description: 'Average annual energy cost ($) divided by household income',
|
||||
},
|
||||
femaRisk: {
|
||||
id: 'areaDetail.indicator.femaRisk',
|
||||
defaultMessage: 'FEMA Risk Index',
|
||||
description: 'Risk based on 18 natural hazard types, in addition to a'+
|
||||
"community's social vulnerability and community resilience",
|
||||
},
|
||||
heartDisease: {
|
||||
id: 'areaDetail.indicator.heartDisease',
|
||||
defaultMessage: 'Heart disease',
|
||||
description: 'People ages 18 and up who report ever having been told by a' +
|
||||
'doctor, nurse, or other health professionals that they had angina or coronary heart disease',
|
||||
},
|
||||
houseBurden: {
|
||||
id: 'areaDetail.indicator.houseBurden',
|
||||
defaultMessage: 'Housing cost burden',
|
||||
description: 'People ages 18 and up who report having been told by a doctor,' +
|
||||
' nurse, or other health professionals that they have diabetes other than diabetes during pregnancy',
|
||||
},
|
||||
leadPaint: {
|
||||
id: 'areaDetail.indicator.leadPaint',
|
||||
defaultMessage: 'Lead paint',
|
||||
description: 'Housing units built pre-1960, used as an indicator of potential'+
|
||||
' lead paint exposure in homes',
|
||||
},
|
||||
lifeExpect: {
|
||||
id: 'areaDetail.indicator.lifeExpect',
|
||||
defaultMessage: 'Life expectancy',
|
||||
description: 'Estimated years of life expectancy',
|
||||
},
|
||||
pm25: {
|
||||
id: 'areaDetail.indicator.pm25',
|
||||
defaultMessage: 'PM2.5',
|
||||
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
|
||||
},
|
||||
trafficVolume: {
|
||||
id: 'areaDetail.indicator.trafficVolume',
|
||||
defaultMessage: 'Traffic proximity and volume',
|
||||
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
|
||||
' divided by distance in meters',
|
||||
},
|
||||
wasteWater: {
|
||||
id: 'areaDetail.indicator.wasteWater',
|
||||
defaultMessage: 'Wastewater discharge',
|
||||
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
|
||||
' kilometers',
|
||||
},
|
||||
});
|
||||
|
||||
const score = properties[constants.SCORE_PROPERTY_HIGH] as number;
|
||||
const blockGroup = properties[constants.GEOID_PROPERTY];
|
||||
|
|
@ -204,99 +71,78 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
|
||||
// Todo: Ticket #367 will be replacing descriptions with YAML file
|
||||
const areaMedianIncome:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.areaMedianIncome),
|
||||
description: 'Median income of the census block group calculated as a percent of the metropolitan'+
|
||||
" area’s or state's median income",
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.AREA_MEDIAN_INCOME),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.AREA_MEDIAN_INCOME),
|
||||
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
||||
};
|
||||
const eduInfo:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.education),
|
||||
description: 'Percent of people age 25 or older that didn’t get a high school diploma',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.EDUCATION),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.EDUCATION),
|
||||
value: properties[constants.EDUCATION_PROPERTY_PERCENTILE],
|
||||
};
|
||||
const poverty:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.poverty),
|
||||
description: "Percent of a block group's population in households where the household income" +
|
||||
' is at or below 100% of the federal poverty level',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.POVERTY),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.POVERTY),
|
||||
value: properties[constants.POVERTY_PROPERTY_PERCENTILE],
|
||||
};
|
||||
// const linIsoInfo:indicatorInfo = {
|
||||
// label: intl.formatMessage(messages.linguisticIsolation),
|
||||
// eslint-disable-next-line max-len
|
||||
// description: 'Households in which all members speak a non-English language and speak English less than "very well"',
|
||||
// value: properties[constants.LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE],
|
||||
// };
|
||||
// const umemployInfo:indicatorInfo = {
|
||||
// label: intl.formatMessage(messages.unemployment),
|
||||
// description: 'Number of unemployed people as a percentage of the labor force',
|
||||
// value: properties[constants.UNEMPLOYMENT_PROPERTY_PERCENTILE],
|
||||
// };
|
||||
const asthma:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.asthma),
|
||||
description: 'People who answer “yes” to both of the questions: “Have you ever been told by' +
|
||||
' a doctor nurse, or other health professional that you have asthma?” and “Do you still have asthma?"',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ASTHMA),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ASTHMA),
|
||||
value: properties[constants.ASTHMA_PERCENTILE],
|
||||
};
|
||||
const diabetes:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.diabetes),
|
||||
description: 'People ages 18 and up who report having been told by a doctor, nurse, or other' +
|
||||
' health professionals that they have diabetes other than diabetes during pregnancy',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIABETES),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIABETES),
|
||||
value: properties[constants.DIABETES_PERCENTILE],
|
||||
};
|
||||
const dieselPartMatter:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.dieselPartMatter),
|
||||
description: 'Mixture of particles that is part of diesel exhaust in the air',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.DIESEL_PARTICULATE_MATTER),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.DIESEL_PARTICULATE_MATTER),
|
||||
value: properties[constants.DIESEL_MATTER_PERCENTILE],
|
||||
};
|
||||
const lifeExpect:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.lifeExpect),
|
||||
description: 'Estimated years of life expectancy',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LIFE_EXPECT),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LIFE_EXPECT),
|
||||
value: properties[constants.LIFE_PERCENTILE],
|
||||
};
|
||||
const energyBurden:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.energyBurden),
|
||||
description: 'Average annual energy cost ($) divided by household income',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.ENERGY_BURDEN),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.ENERGY_BURDEN),
|
||||
value: properties[constants.ENERGY_PERCENTILE],
|
||||
};
|
||||
const pm25:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.pm25),
|
||||
description: 'Fine inhalable particles, with diameters that are generally 2.5 micrometers and smaller',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PM_2_5),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.PM_2_5),
|
||||
value: properties[constants.PM25_PERCENTILE],
|
||||
};
|
||||
const leadPaint:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.leadPaint),
|
||||
description: 'Housing units built pre-1960, used as an indicator of potential'+
|
||||
' lead paint exposure in homes',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.LEAD_PAINT),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.LEAD_PAINT),
|
||||
value: properties[constants.LEAD_PAINT_PERCENTILE],
|
||||
};
|
||||
const trafficVolume:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.trafficVolume),
|
||||
description: 'Count of vehicles (average annual daily traffic) at major roads within 500 meters,' +
|
||||
' divided by distance in meters',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.TRAFFIC_VOLUME),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.TRAFFIC_VOLUME),
|
||||
value: properties[constants.TRAFFIC_PERCENTILE],
|
||||
};
|
||||
const wasteWater:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.wasteWater),
|
||||
description: 'Toxic concentrations at stream segments within 500 meters divided by distance in' +
|
||||
' kilometers',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.WASTE_WATER),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.WASTE_WATER),
|
||||
value: properties[constants.WASTEWATER_PERCENTILE],
|
||||
};
|
||||
const femaRisk:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.femaRisk),
|
||||
description: 'Expected Annual Loss Score, which is the average economic loss in dollars' +
|
||||
' resulting from natural hazards each year.',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.FEMA_RISK),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.FEMA_RISK),
|
||||
value: properties[constants.FEMA_PERCENTILE],
|
||||
};
|
||||
const heartDisease:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.heartDisease),
|
||||
description: 'People ages 18 and up who report ever having been told by a' +
|
||||
' doctor, nurse, or other health professionals that they had angina or coronary heart disease',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HEART_DISEASE),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HEART_DISEASE),
|
||||
value: properties[constants.HEART_PERCENTILE],
|
||||
};
|
||||
const houseBurden:indicatorInfo = {
|
||||
label: intl.formatMessage(messages.houseBurden),
|
||||
description: 'Households that are low income and spend more than 30% of their income on' +
|
||||
' housing costs',
|
||||
label: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HOUSE_BURDEN),
|
||||
description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.HOUSE_BURDEN),
|
||||
value: properties[constants.HOUSING_BURDEN_PROPERTY_PERCENTILE],
|
||||
};
|
||||
|
||||
|
|
@ -313,19 +159,27 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
<aside className={styles.areaDetailContainer} data-cy={'aside'}>
|
||||
<ul className={styles.censusRow}>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.censusBlockGroup)} </span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.CENSUS_BLOCK_GROUP)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{blockGroup}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.county)} </span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.COUNTY)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{countyName}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.state)}</span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.STATE)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{stateName}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={styles.censusLabel}>{intl.formatMessage(messages.population)} </span>
|
||||
<span className={styles.censusLabel}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_CBG_INFO.POPULATION)}
|
||||
</span>
|
||||
<span className={styles.censusText}>{population.toLocaleString()}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -334,10 +188,15 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
|
|||
<div className={categoryCircleStyle} />
|
||||
<h3>{categorization}</h3>
|
||||
</div>
|
||||
<p className={"secondary"}>version {METHODOLOGY_COPY.VERSION_NUMBER}</p>
|
||||
</div>
|
||||
<div className={styles.divider}>
|
||||
<h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
|
||||
<h6>{intl.formatMessage(messages.percentileColumnHeader)}</h6>
|
||||
<h6>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.INDICATOR_COLUMN_HEADER)}
|
||||
</h6>
|
||||
<h6>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATORS.PERCENTILE_COLUMN_HEADER)}
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue