Horizontal and verical layout options for color legends (equinor#681)

* Horizontal and verical layout options for color legends * Assigning dynamic height and width * Fix height and width * Fix lint error Co-authored-by: Shruthi Rai <shruthi.rai@emerson.com>
VincentNevermore · Dec 3, 2021 · 6445827 · 6445827
1 parent f0851c6
commit 6445827
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 19 deletions.
diff --git a/react/src/demo/example-data/deckgl-map-spec.json b/react/src/demo/example-data/deckgl-map-spec.json
@@ -18,9 +18,10 @@
     "legend": {
       "visible": true,
       "position": [
-        16,
+        5,
         10
-      ]
+      ],
+      "horizontal": true
     },
     "coordinateUnit": "m",
     "resources": {

diff --git a/react/src/demo/example-data/deckgl-map.json b/react/src/demo/example-data/deckgl-map.json
@@ -18,9 +18,10 @@
     "legend": {
       "visible": true,
       "position": [
-        16,
+        5,
         10
-      ]
+      ],
+      "horizontal": true
     },
     "coordinateUnit": "m",
     "resources": {

diff --git a/react/src/lib/components/DeckGLMap/DeckGLMap.jsx b/react/src/lib/components/DeckGLMap/DeckGLMap.jsx
@@ -18,7 +18,8 @@ DeckGLMap.defaultProps = {
     },
     legend: {
         visible: true,
-        position: [46, 10],
+        position: [5, 10],
+        horizontal: true,
     },
     zoom: -3,
     colorTables: colorTables,
@@ -187,6 +188,10 @@ DeckGLMap.propTypes = {
          * Legend position in pixels.
          */
         position: PropTypes.arrayOf(PropTypes.number),
+        /**
+         * Legend layout.
+         */
+        horizontal: PropTypes.bool,
     }),
 
     /**

diff --git a/react/src/lib/components/DeckGLMap/components/ContinuousLegend.tsx b/react/src/lib/components/DeckGLMap/components/ContinuousLegend.tsx
@@ -12,6 +12,7 @@ interface legendProps {
     name: string;
     template: templateArray;
     colorTables: colorTablesArray;
+    horizontal: boolean;
 }
 
 interface ItemColor {
@@ -27,10 +28,11 @@ const ContinuousLegend: React.FC<legendProps> = ({
     name,
     template,
     colorTables,
+    horizontal,
 }: legendProps) => {
     React.useEffect(() => {
         continuousLegend("#legend");
-    }, [min, max, template, colorTables]);
+    }, [min, max, template, colorTables, horizontal]);
 
     function continuousLegend(selected_id: string) {
         const itemColor: ItemColor[] = [];
@@ -46,7 +48,15 @@ const ContinuousLegend: React.FC<legendProps> = ({
         select(selected_id).select("svg").remove();
         const colorScale = scaleSequential().domain([min, max]);
         // append a defs (for definition) element to your SVG
-        const svgLegend = select(selected_id).append("svg").attr("width", 300);
+        const svgLegend = select(selected_id)
+            .append("svg")
+            .style("background-color", "#ffffffcc")
+            .style("border-radius", "5px");
+        if (!horizontal) {
+            svgLegend
+                .style("transform", "rotate(270deg)")
+                .style("margin-top", "80px");
+        }
         const defs = svgLegend.append("defs");
         // append a linearGradient element to the defs and give it a unique id
         const linearGradient = defs
@@ -115,7 +125,7 @@ const ContinuousLegend: React.FC<legendProps> = ({
 };
 
 ContinuousLegend.defaultProps = {
-    position: [16, 10],
+    position: [5, 10],
 };
 
 export default ContinuousLegend;
diff --git a/react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx b/react/src/lib/components/DeckGLMap/components/DeckGLWrapper.tsx
@@ -65,6 +65,7 @@ export interface DeckGLWrapperProps {
     legend: {
         visible: boolean;
         position: number[];
+        horizontal: boolean;
     };
 
     /**
@@ -331,6 +332,7 @@ const DeckGLWrapper: React.FC<DeckGLWrapperProps> = ({
                     name={legendProps.name}
                     template={template}
                     colorTables={colorTables}
+                    horizontal={legend.horizontal}
                 />
             )}
             {legendProps.valueRange?.length > 0 &&
@@ -344,6 +346,7 @@ const DeckGLWrapper: React.FC<DeckGLWrapperProps> = ({
                         name={legendProps.name}
                         template={template}
                         colorTables={colorTables}
+                        horizontal={legend.horizontal}
                     />
                 )}
             {deckGLLayers && (

diff --git a/react/src/lib/components/DeckGLMap/components/DiscreteLegend.tsx b/react/src/lib/components/DeckGLMap/components/DiscreteLegend.tsx
@@ -15,6 +15,7 @@ interface colorLegendProps {
     position: number[];
     template: templateArray;
     colorTables: colorTablesArray;
+    horizontal: boolean;
 }
 
 const DiscreteColorLegend: React.FC<colorLegendProps> = ({
@@ -24,10 +25,11 @@ const DiscreteColorLegend: React.FC<colorLegendProps> = ({
     position,
     template,
     colorTables,
+    horizontal,
 }: colorLegendProps) => {
     React.useEffect(() => {
         discreteLegend("#legend");
-    }, [discreteData, template, colorTables]);
+    }, [discreteData, template, colorTables, horizontal]);
     function discreteLegend(legend: string) {
         const itemName: string[] = [];
         const itemColor: ItemColor[] = [];
@@ -61,14 +63,24 @@ const DiscreteColorLegend: React.FC<colorLegendProps> = ({
         }
         const ordinalValues = scaleOrdinal().domain(itemName);
         const colorLegend = legendUtil(itemColor).inputScale(ordinalValues);
-        if (colorLegend) {
-            select(legend).select("svg").remove();
-            select(legend)
-                .append("svg")
-                .attr("height", 410 + "px")
-                .attr("width", 230 + "px")
-                .attr("transform", "translate(0,10)")
-                .call(colorLegend);
+        select(legend).select("svg").remove();
+        const legendLength = itemColor.length;
+        const calcLegendHeight = 22 * legendLength + 4 * legendLength;
+        const selectedLegend = select(legend);
+        if (!horizontal) selectedLegend.style("height", 150 + "px");
+        const svgLegend = selectedLegend
+            .append("svg")
+            .style("margin", "10px 10px")
+            .call(colorLegend);
+        if (colorLegend && horizontal) {
+            svgLegend
+                .attr("height", calcLegendHeight + "px")
+                .attr("width", 220 + "px");
+        } else {
+            svgLegend
+                .style("transform", "rotate(90deg)")
+                .attr("width", calcLegendHeight + "px")
+                .attr("height", calcLegendHeight + "px");
         }
     }
     return (
@@ -77,9 +89,13 @@ const DiscreteColorLegend: React.FC<colorLegendProps> = ({
                 position: "absolute",
                 right: position[0],
                 top: position[1],
+                backgroundColor: "#ffffffcc",
+                borderRadius: "5px",
             }}
         >
-            <label style={{ color: "#6F6F6F" }}>{dataObjectName}</label>
+            <label style={{ color: "#6F6F6F", margin: "10px 10px" }}>
+                {dataObjectName}
+            </label>
             <div id="legend"></div>
         </div>
     );
@@ -104,7 +120,7 @@ export function colorTableData(
 }
 
 DiscreteColorLegend.defaultProps = {
-    position: [16, 10],
+    position: [5, 10],
 };
 
 export default DiscreteColorLegend;
diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx
@@ -66,6 +66,7 @@ export interface MapProps {
     legend: {
         visible: boolean;
         position: number[];
+        horizontal: boolean;
     };
 
     /**

diff --git a/...c/lib/components/DeckGLMap/storybook/components/colorLegends/ContinuousLegend.stories.jsx b/...c/lib/components/DeckGLMap/storybook/components/colorLegends/ContinuousLegend.stories.jsx
@@ -12,6 +12,7 @@ const max = 0.35;
 const dataObjectName = "Wells / PORO";
 const position = [16, 10];
 const name = "PORO";
+const horizontal = true;
 
 const Template = (args) => {
     return <ContinuousLegend {...args} />;
@@ -26,4 +27,5 @@ ContinuousTemplate.args = {
     name,
     template,
     colorTables,
+    horizontal,
 };
diff --git a/...src/lib/components/DeckGLMap/storybook/components/colorLegends/DiscreteLegend.stories.jsx b/...src/lib/components/DeckGLMap/storybook/components/colorLegends/DiscreteLegend.stories.jsx
@@ -18,6 +18,8 @@ const discreteData = {
 const name = "ZONELOG";
 const dataObjectName = "Wells / ZONELOG";
 const position = [16, 10];
+const horizontal = true;
+
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
 };
@@ -30,4 +32,5 @@ DiscreteTemplate.args = {
     position,
     template,
     colorTables,
+    horizontal,
 };