Merge pull request #64 from emerson-eps/fix-for-dash-wrapper-legend

fix: Converting colortable url to array value for legend dash wrapper
emerson-eps · Mar 13, 2022 · abd1da4 · abd1da4
2 parents 3eaff4c + 9c9309a
commit abd1da4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/react-app/src/component/Legend/ContinuousLegend.tsx b/react-app/src/component/Legend/ContinuousLegend.tsx
@@ -10,7 +10,7 @@ declare type legendProps = {
     dataObjectName: string;
     position?: number[] | null;
     colorName: string;
-    colorTables: colorTablesArray;
+    colorTables: colorTablesArray | string;
     horizontal?: boolean | null;
 }
 
@@ -38,10 +38,19 @@ export const ContinuousLegend: React.FC<legendProps> = ({
         };
     }, [min, max, colorName, colorTables, horizontal]);
 
-    function continuousLegend() {
+    async function continuousLegend() {
         const itemColor: ItemColor[] = [];
+        let dataSet;
+
+        if (typeof colorTables === "string") {
+            let res = await fetch(colorTables);
+            dataSet = await res.json()
+        }
         // Return the matched colors array from color.tables.json file
-        const colorTableColors = colorsArray(colorName, colorTables);
+        let colorTableColors = typeof colorTables === "string" ? 
+            colorsArray(colorName, dataSet)
+            :
+            colorsArray(colorName, colorTables);
         colorTableColors.forEach((value: [number, number, number, number]) => {
             // return the color and offset needed to draw the legend
             itemColor.push({

diff --git a/react-app/src/component/Legend/DiscreteLegend.tsx b/react-app/src/component/Legend/DiscreteLegend.tsx
@@ -13,7 +13,7 @@ declare type colorLegendProps = {
     dataObjectName: string;
     position?: number[] | null;
     colorName: string;
-    colorTables: colorTablesArray;
+    colorTables: colorTablesArray | string;
     horizontal?: boolean | null;
 }
 
@@ -35,13 +35,21 @@ export const DiscreteColorLegend: React.FC<colorLegendProps> = ({
             select(divRef.current).select("svg").remove();
         };
     }, [discreteData, colorName, colorTables, horizontal]);
-    function discreteLegend() {
+    async function discreteLegend() {
         const itemName: string[] = [];
         const itemColor: ItemColor[] = [];
-        const colorsArray: [number, number, number, number][] = colorTableData(
-            colorName,
-            colorTables
-        );
+        let dataSet;
+
+        if (typeof colorTables === "string") {
+            let res = await fetch(colorTables);
+            dataSet = await res.json()
+        }
+
+        let colorsArray = typeof colorTables === "string" ? 
+            colorTableData(colorName, dataSet)
+            :
+            colorTableData(colorName, colorTables);
+
         Object.keys(discreteData).forEach((key) => {
             // eslint-disable-next-line
             let code = (discreteData as { [key: string]: any })[key][1]