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

Remove up/down arrows from indicators

Browse source
This commit is contained in:
Vim USDS 2022-09-08 23:12:57 -07:00
parent c71d7a34b7
commit 825361ab1c
3 changed files with 13 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Indicator/Indicator.module.scss
View file

@ -59,7 +59,7 @@
} }
.unavailable { .unavailable {
opacity: .2; opacity: .6;
} }
} }
} }

38
client/src/components/Indicator/Indicator.tsx
View file

@ -8,20 +8,14 @@ import * as constants from '../../data/constants';
import * as EXPLORE_COPY from '../../data/copy/explore'; import * as EXPLORE_COPY from '../../data/copy/explore';
// @ts-ignore // @ts-ignore
import downArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_downward.svg'; import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg';
// @ts-ignore
import upArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_upward.svg';
// @ts-ignore
import unAvailable from '/node_modules/uswds/dist/img/usa-icons/do_not_disturb.svg';
interface IIndicator { interface IIndicator {
indicator: indicatorInfo, indicator: indicatorInfo,
} }
interface IIndicatorValueIcon { interface IIndicatorValueIcon {
type: indicatorType,
value: number | null, value: number | null,
isAboveThresh: boolean,
}; };
interface IIndicatorValueSubText { interface IIndicatorValueSubText {
@ -37,31 +31,21 @@ interface IIndicatorValue {
} }
/** /**
* This component will determine what indicator's icon should be (arrowUp, arrowDown or unavailable) and * This component will determine what indicator's icon should be. Either show the unavailable icon
* return the appropriate JSX. * or show nothing.
* *
* @param {number | null} props * @param {number | null} value
* @return {JSX.Element} * @return {JSX.Element}
*/ */
export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => { export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => {
const intl = useIntl(); const intl = useIntl();
if (value == null) { return value === null ? (
return <img className={styles.unavailable} <img className={styles.unavailable}
src={unAvailable} src={unAvailable}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)} alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.UNAVAILABLE)}
/>; />
} else if (type === 'percent' || type === 'percentile') { ) : <></>;
return isAboveThresh ?
<img
src={upArrow}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_UP)}
/> :
<img
src={downArrow}
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_VALUES.IMG_ALT_TEXT.ARROW_DOWN)}
/>;
} else return <></>;
}; };
/** /**
@ -155,7 +139,7 @@ export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => { export const IndicatorValue = ({type, displayStat}:IIndicatorValue) => {
const intl = useIntl(); const intl = useIntl();
if (displayStat === null) return <React.Fragment></React.Fragment>; if (displayStat === null) return <>{constants.MISSING_DATA_STRING}</>;
if (type === 'percent' || type === 'percentile') { if (type === 'percent' || type === 'percentile') {
// In this case we will show no value and an icon only // In this case we will show no value and an icon only
@ -256,9 +240,7 @@ const Indicator = ({indicator}:IIndicator) => {
{/* Indicator icon - up arrow, down arrow, or unavailable */} {/* Indicator icon - up arrow, down arrow, or unavailable */}
<div className={styles.indicatorArrow}> <div className={styles.indicatorArrow}>
<IndicatorValueIcon <IndicatorValueIcon
type={indicator.type}
value={displayStat} value={displayStat}
isAboveThresh={isAboveThresh}
/> />
</div> </div>
</div> </div>

2
client/src/data/constants.tsx
View file

@ -25,6 +25,8 @@ export type J40Properties = { [key: string]: any };
// ****** SIDE PANEL BACKEND SIGNALS *********** // ****** SIDE PANEL BACKEND SIGNALS ***********
export const MISSING_DATA_STRING = '--';
// Tribal signals // Tribal signals
export const TRIBAL_ID = 'tribalId'; export const TRIBAL_ID = 'tribalId';
export const LAND_AREA_NAME = 'landAreaName'; export const LAND_AREA_NAME = 'landAreaName';