feat(layer-legend): add possibility to set legend values manually (#538)

ubilabs · Aug 31, 2020 · 7f9aa1f · 7f9aa1f
1 parent 8e469dd
commit 7f9aa1f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/scripts/components/layers/layer-legend/layer-legend.tsx b/src/scripts/components/layers/layer-legend/layer-legend.tsx
@@ -9,7 +9,7 @@ import styles from './layer-legend.styl';
 
 interface Props {
   id: string;
-  values: number[];
+  values: (number | string)[];
   unit: string;
   isCompare?: boolean;
 }
@@ -30,7 +30,13 @@ const LayerLegend: FunctionComponent<Props> = ({
     <div className={styles.values}>
       {values.map((value, index) => (
         <div className={styles.value} key={value}>
-          <FormattedNumber value={value} /> {index === 0 ? unit : ''}
+          {typeof value === 'string' ? (
+            value
+          ) : (
+            <span>
+              <FormattedNumber value={value} /> {index === 0 ? unit : ''}
+            </span>
+          )}
         </div>
       ))}
     </div>

diff --git a/src/scripts/components/main/globes/globes.tsx b/src/scripts/components/main/globes/globes.tsx
@@ -32,6 +32,7 @@ interface Props {
   markers?: Marker[];
 }
 
+// eslint-disable-next-line complexity
 const Globes: FunctionComponent<Props> = ({backgroundColor, markers = []}) => {
   const dispatch = useDispatch();
   const selectedLayerIds = useSelector(selectedLayerIdsSelector);
@@ -87,19 +88,28 @@ const Globes: FunctionComponent<Props> = ({backgroundColor, markers = []}) => {
     setCurrentView(globalGlobeView);
   }, [globalGlobeView]);
 
+  const mainLegendValues = mainLayerDetails?.legendValues || [
+    mainLayerDetails?.maxValue || 0,
+    mainLayerDetails?.minValue || 0
+  ];
+  const compareLegendValues = compareLayerDetails?.legendValues || [
+    compareLayerDetails?.maxValue || 0,
+    compareLayerDetails?.minValue || 0
+  ];
+
   return (
     <div className={styles.globes}>
       {mainLayerDetails && (
         <LayerLegend
           id={mainLayerDetails.id}
-          values={[mainLayerDetails.maxValue, mainLayerDetails.minValue]}
+          values={mainLegendValues}
           unit={mainLayerDetails.units}
         />
       )}
       {compareLayerDetails && (
         <LayerLegend
           id={compareLayerDetails.id}
-          values={[compareLayerDetails.maxValue, compareLayerDetails.minValue]}
+          values={compareLegendValues}
           unit={compareLayerDetails.units}
           isCompare={true}
         />

diff --git a/src/scripts/types/layer.d.ts b/src/scripts/types/layer.d.ts
@@ -20,4 +20,5 @@ export interface Layer {
   minValue: number;
   maxValue: number;
   units: string;
+  legendValues: string[];
 }