Merge pull request #17 from emerson-eps/modify-discrete-legend

fix: modified discrete legend
emerson-eps · Jan 12, 2022 · 684ce45 · 684ce45
2 parents 06c9a83 + be3a840
commit 684ce45
Show file tree

Hide file tree

Showing 12 changed files with 423 additions and 702 deletions.
diff --git a/react-app/package-lock.json b/react-app/package-lock.json
diff --git a/react-app/src/component/Legend/DiscreteLegend.tsx b/react-app/src/component/Legend/DiscreteLegend.tsx
@@ -1,41 +1,37 @@
 import * as React from "react";
 import legendUtil from "../Utils/discreteLegend";
 import { scaleOrdinal, select } from "d3";
-import { templateArray, propertiesObj } from "../WelllayerTemplateTypes";
 import { colorTablesArray, colorTablesObj } from "../ColorTableTypes";
 
-declare type ItemColor = {
+interface ItemColor {
     color: string;
 }
 
-declare type colorLegendProps = {
+interface colorLegendProps {
     discreteData: { objects: Record<string, [number[], number]> };
     dataObjectName: string;
-    name: string;
     position: number[];
-    template: templateArray;
+    colorName: string;
     colorTables: colorTablesArray;
     horizontal: boolean;
 }
 
 export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 }: colorLegendProps) => {
     React.useEffect(() => {
         discreteLegend("#legend");
-    }, [discreteData, template, colorTables, horizontal]);
+    }, [discreteData, colorName, colorTables, horizontal]);
     function discreteLegend(legend: string) {
         const itemName: string[] = [];
         const itemColor: ItemColor[] = [];
         const colorsArray: [number, number, number, number][] = colorTableData(
-            name,
-            template,
+            colorName,
             colorTables
         );
         Object.keys(discreteData).forEach((key) => {
@@ -63,10 +59,17 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
         }
         const ordinalValues = scaleOrdinal().domain(itemName);
         const colorLegend = legendUtil(itemColor).inputScale(ordinalValues);
+        select(legend).select("div").remove();
         select(legend).select("svg").remove();
         const legendLength = itemColor.length;
         const calcLegendHeight = 22 * legendLength + 4 * legendLength;
         const selectedLegend = select(legend);
+        selectedLegend
+            .append("div")
+            .text(dataObjectName)
+            .attr("y", 7)
+            .style("color", "#6F6F6F")
+            .style("margin", "10px 10px");
         if (!horizontal) selectedLegend.style("height", 150 + "px");
         const svgLegend = selectedLegend
             .append("svg")
@@ -93,32 +96,23 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
                 borderRadius: "5px",
             }}
         >
-            <label style={{ color: "#6F6F6F", margin: "10px 10px" }}>
-                {dataObjectName}
-            </label>
             <div id="legend"></div>
         </div>
     );
 };
 
 // Based on name return the colors array from color.tables.json file
 export function colorTableData(
-    name: string,
-    template: templateArray,
+    colorName: string,
     colorTables: colorTablesArray
 ): [number, number, number, number][] {
-    const properties = template[0]["properties"];
-    const propertiesData = properties.filter(
-        (value: propertiesObj) => value.objectName == name
-    );
     const colorTableData = colorTables.filter(
         (value: colorTablesObj) =>
-            value.name.toLowerCase() ==
-            propertiesData[0].colorTable.toLowerCase()
+            value.name.toLowerCase() == colorName.toLowerCase()
     );
-    return colorTableData[0].colors;
+    return colorTableData.length > 0 ? colorTableData[0].colors : [];
 }
 
 DiscreteColorLegend.defaultProps = {
     position: [5, 10],
-};
+};
diff --git a/react-app/src/component/Utils/discreteLegend.ts b/react-app/src/component/Utils/discreteLegend.ts
@@ -1,5 +1,5 @@
-declare type ItemColor = {
-    color: string;
+interface ItemColor {	
+    color: string;	
 }
 
 // eslint-disable-next-line

diff --git a/react-app/src/index.ts b/react-app/src/index.ts
@@ -3,6 +3,5 @@ export { colorTableData, DiscreteColorLegend } from './component/Legend/Discrete
 export { colorsArray, rgbValues, RGBToHex} from './component/Utils/continousLegend';
 export { colorTablesObj, colorTablesArray } from './component/ColorTableTypes';
 export { propertiesObj, templateArray } from './component/WelllayerTemplateTypes';
-//export const colorTables = require('./component/color-tables');
 import * as colorTables from './component/color-tables.json';
 export default colorTables;
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/Facies.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/Facies.stories.jsx
@@ -20,10 +20,10 @@ const discreteData = {
     "MSH": [[], 8],
     "CAL": [[], 9]
 };
-const name = "FACIES";
 const dataObjectName = "Wells / FACIES";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Facies";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -32,10 +32,9 @@ const Template = (args) => {
 export const FaciesTemplate = Template.bind({});
 FaciesTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/FaciesNoCalcite.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/FaciesNoCalcite.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -20,10 +19,10 @@ const discreteData = {
     "F_MARSH": [[], 8],
     "F_CALCITE": [[], 9]
 };
-const name = "FACIES_NoCalcite";
 const dataObjectName = "Wells / FACIES_NoCalcite";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Facies";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -32,10 +31,9 @@ const Template = (args) => {
 export const FaciesNoCalciteTemplate = Template.bind({});
 FaciesNoCalciteTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/FaultDistanceHum.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/FaultDistanceHum.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -12,10 +11,10 @@ const discreteData = {
     "no": [[], 0],
     "yes": [[], 1]
 };
-const name = "FaultDistance_HUM";
 const dataObjectName = "Wells / FaultDistance_HUM";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Gas-Oil-Water";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -24,10 +23,9 @@ const Template = (args) => {
 export const FaultDistanceHumTemplate = Template.bind({});
 FaultDistanceHumTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/FaultProximityFlag.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/FaultProximityFlag.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -12,10 +11,10 @@ const discreteData = {
     "no": [[], 0],
     "yes": [[], 1]
 };
-const name = "FAULT_PROXIMITY_FLAG";
 const dataObjectName = "Wells / FAULT_PROXIMITY_FLAG";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Time/Depth";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -24,10 +23,9 @@ const Template = (args) => {
 export const FaultProximityFlagTemplate = Template.bind({});
 FaultProximityFlagTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/RDE.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/RDE.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -15,10 +14,10 @@ const discreteData = {
     "TIDAL": [[], 4],
     "ONSHORE": [[], 5]
 };
-const name = "RDE";
 const dataObjectName = "Wells / RDE";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Accent";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -30,7 +29,7 @@ RDETemplate.args = {
     name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/RDE_Orig.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/RDE_Orig.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -26,10 +25,10 @@ const discreteData = {
     "R_USF": [[], 14],
     "R_LSF": [[], 15]
 };
-const name = "RDE_ORIG";
 const dataObjectName = "Wells / RDE_ORIG";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Stratigraphy";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -38,10 +37,9 @@ const Template = (args) => {
 export const RDEOrigTemplate = Template.bind({});
 RDEOrigTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/ZoneMain.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/ZoneMain.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -15,10 +14,10 @@ const discreteData = {
     "MID": [[], 2],
     "LOWER": [[], 3]
 };
-const name = "ZONE_MAIN";
 const dataObjectName = "Wells / ZONE_MAIN";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Stratigraphy";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -27,10 +26,9 @@ const Template = (args) => {
 export const ZoneMainTemplate = Template.bind({});
 ZoneMainTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };
diff --git a/react-app/src/stories/ColorLegends/DiscreteLegends/Zonelog.stories.jsx b/react-app/src/stories/ColorLegends/DiscreteLegends/Zonelog.stories.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import {DiscreteColorLegend} from "../../../component/Legend/DiscreteLegend";
-import template from "../../../component/welllayer_template.json";
 import colorTables from "../../../component/color-tables.json";
 
 export default {
@@ -25,10 +24,10 @@ const discreteData = {
     "H1": [[], 13],
     "BELOW": [[], 14]
 };
-const name = "ZONELOG";
 const dataObjectName = "Wells / ZONELOG";
 const position = [16, 10];
 const horizontal = true;
+const colorName = "Stratigraphy";
 
 const Template = (args) => {
     return <DiscreteColorLegend {...args} />;
@@ -37,10 +36,9 @@ const Template = (args) => {
 export const ZonelogTemplate = Template.bind({});
 ZonelogTemplate.args = {
     discreteData,
-    name,
     dataObjectName,
     position,
-    template,
+    colorName,
     colorTables,
     horizontal,
 };