publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54: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 {
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';
// @ts-ignore
import downArrow from '/node_modules/uswds/dist/img/usa-icons/arrow_downward.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';
import unAvailable from '/node_modules/uswds/dist/img/usa-icons/error_outline.svg';
interface IIndicator {
indicator: indicatorInfo,
}
interface IIndicatorValueIcon {
type: indicatorType,
value: number | null,
isAboveThresh: boolean,
};
interface IIndicatorValueSubText {
@ -37,31 +31,21 @@ interface IIndicatorValue {
}
/**
* This component will determine what indicator's icon should be (arrowUp, arrowDown or unavailable) and
* return the appropriate JSX.
* This component will determine what indicator's icon should be. Either show the unavailable icon
* or show nothing.
*
* @param {number | null} props
* @param {number | null} value
* @return {JSX.Element}
*/
export const IndicatorValueIcon = ({type, value, isAboveThresh}: IIndicatorValueIcon) => {
export const IndicatorValueIcon = ({value}: IIndicatorValueIcon) => {
const intl = useIntl();
if (value == null) {
return <img className={styles.unavailable}
return value === null ? (
<img className={styles.unavailable}
src={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) => {
const intl = useIntl();
if (displayStat === null) return <React.Fragment></React.Fragment>;
if (displayStat === null) return <>{constants.MISSING_DATA_STRING}</>;
if (type === 'percent' || type === 'percentile') {
// 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 */}
<div className={styles.indicatorArrow}>
<IndicatorValueIcon
type={indicator.type}
value={displayStat}
isAboveThresh={isAboveThresh}
/>
</div>
</div>

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

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