Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | 26x 130x | // File: src/components/Legend.tsx
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faTriangleExclamation,
faGaugeSimple,
faEyeSlash,
faWaveSquare,
faCircleQuestion
} from '@fortawesome/free-solid-svg-icons';
import { ColorScaleName, gradientCss } from '../utils/geomap';
import styles from '../GeoMapWidget.module.css';
export interface LegendProps {
position: 'top' | 'bottom' | 'left' | 'right';
legendScaleLabel: string;
colorScaleName: ColorScaleName;
customPalette?: [number, number, number][];
ticks: number[];
sizeHelpText: string;
}
export function Legend({
position,
legendScaleLabel,
colorScaleName,
customPalette,
ticks,
sizeHelpText
}: LegendProps) {
return (
<div
className={`${styles.legend} ${
position === 'top'
? styles.legendTop
: position === 'bottom'
? styles.legendBottom
: position === 'left'
? `${styles.legendSide} ${styles.legendLeft}`
: `${styles.legendSide} ${styles.legendRight}`
}`}
>
{/* First row: gradient scale only */}
<div className={styles.legendRow}>
<div className={styles.powerScale}>
<div className={styles.scaleHeader}>
<FontAwesomeIcon className={styles.legendIcon} icon={faWaveSquare} />
<span>{legendScaleLabel}</span>
</div>
<div
className={styles.scaleBar}
style={{ background: gradientCss(colorScaleName, customPalette) }}
/>
<div className={styles.ticks}>
{ticks.map((t, i) => (
<span key={i} className={styles.tick}>
{t.toFixed(2)}
</span>
))}
</div>
</div>
</div>
{/* Second row: all other legend items */}
<div className={styles.legendRow}>
<div className={styles.legendItem} title={sizeHelpText} aria-label="Dot size help">
<FontAwesomeIcon className={styles.legendIcon} icon={faCircleQuestion} />
<span>size</span>
</div>
<div className={styles.legendItem}>
<FontAwesomeIcon className={styles.legendIcon} icon={faEyeSlash} />
<span>masked</span>
</div>
<div className={styles.legendItem}>
<FontAwesomeIcon className={styles.legendIcon} icon={faTriangleExclamation} />
<span>breaker tripped</span>
</div>
<div className={styles.legendItem}>
<FontAwesomeIcon className={styles.legendIcon} icon={faGaugeSimple} />
<span>{'grey = (FME < 250mA)'}</span>
</div>
</div>
</div>
);
}
|