handle interval legends

src/pages/viewer/components/LegendWidget.jsx

@@ -2,11 +2,13 @@ import { useContext, useMemo } from "react"
 import { MapContext } from "../contexts"
 import { Box } from "react-bulma-components";
 import SequentialLegend from "./legend-types/Sequential";
+import IntervalLegend from "./legend-types/Interval";
 
 
 function LegendRender({ type, ...data }) {
     switch(type) {
         case 'sequential': return <SequentialLegend {...data} />;
+        case 'interval': return <IntervalLegend {...data} />;
         default: null;
     }
 }

src/pages/viewer/components/legend-types/Interval.jsx

@@ -0,0 +1,16 @@
+import { Columns, Media } from "react-bulma-components";
+
+const { Column } = Columns;
+
+export default function IntervalLegend({ intervals }) {
+    return (
+        intervals.map(({ background, description }) => (
+            <Columns className="interval-legend-entry" key={background}>
+                <Column size="one-quarter" className="bar">
+                    <div style={{ background, height: '100%', width: '100%' }}></div>
+                </Column>
+                <Column className="is-size-7">{description}</Column>       
+            </Columns>
+        ))
+    )
+}

src/styles/app.scss

@@ -91,7 +91,7 @@ $footer-height: 40px;
 }
 
 #legend-box {
-    width: 200px;
+    width: 250px;
     position: absolute;
     bottom: 25px + $footer-height;
     right: 0;
@@ -121,6 +121,22 @@ $footer-height: 40px;
             padding: 0.2rem;
         }
     }
+
+    .interval-legend-entry {
+        margin-top: 0.1rem;
+        margin-left: 0;
+        margin-right: 0;
+        margin-bottom: 0;
+        width: 100%;
+
+        .column {
+            padding: 0.2rem ;
+        }
+        .bar {
+            max-width: 25px;
+        }
+    }
+
 }
 
 #basemap {