adding basckground for multiple graphs

Author: BryonLewis

client/src/MapStore.ts

@@ -178,6 +178,26 @@ export default class MapStore {
 
   public static mapLayerFeatureGraphsVisible = ref(false);
 
+  public static vectorFeatureTableGraphVisible = ref(false);
+
+  public static vectorFeatureTableData: Ref<{ layerId: number, vectorFeatureId: number } | null> = ref(null);
+
+  public static setVectorFeatureTableData = (layerId: number, vectorFeatureId: number) => {
+    if (MapStore.mapLayerFeatureGraphsVisible.value) {
+      MapStore.mapLayerFeatureGraphsVisible.value = false;
+    }
+    MapStore.vectorFeatureTableData.value = {
+      layerId,
+      vectorFeatureId,
+    };
+    MapStore.vectorFeatureTableGraphVisible.value = true;
+  };
+
+  public static clearVectorFeatureTableData = () => {
+    MapStore.vectorFeatureTableData.value = null;
+    MapStore.vectorFeatureTableGraphVisible.value = false;
+  };
+
   // Graph color mapping implementation
   public static enabledMapLayerFeatureColorMapping = ref(false);
 

client/src/api/UVDATApi.ts

@@ -11,6 +11,8 @@ import {
   DerivedRegion,
   DisplayConfiguration,
   FeatureGraphData,
+  FeatureGraphs,
+  FeatureGraphsRequest,
   FileItem,
   LayerCollection,
   LayerCollectionLayer,
@@ -538,6 +540,44 @@ export default class UVdatApi {
     return response.data;
   }
 
+  public static async getFeatureGraphsData(
+    payload: FeatureGraphsRequest,
+  ): Promise<FeatureGraphs[]> {
+    const {
+      tableTypes,
+      vectorFeatureId,
+      xAxes = ['index'],
+      yAxes = ['mean_va'],
+      indexers = [],
+      display = ['data', 'trendLine'],
+      confidenceLevel = 95,
+      aggregate = false,
+      movingAverage,
+    } = payload;
+
+    const params = new URLSearchParams();
+
+    tableTypes.forEach((type) => params.append('tableType', type));
+    xAxes.forEach((x) => params.append('xAxis', x));
+    yAxes.forEach((y) => params.append('yAxis', y));
+    indexers.forEach((indexer) => params.append('indexer', indexer));
+    display.forEach((d) => params.append('display', d));
+
+    params.append('vectorFeatureId', vectorFeatureId.toString());
+    params.append('confidenceLevel', confidenceLevel.toString());
+    params.append('aggregate', aggregate.toString());
+    if (movingAverage !== undefined) {
+      params.append('movingAverage', movingAverage.toString());
+    }
+
+    const response = await UVdatApi.apiClient.get<FeatureGraphs[]>(
+      '/vectorfeature/tabledata/feature-graphs/',
+      { params },
+    );
+
+    return response.data;
+  }
+
   public static async getMapLayerFeatureGraphData(
     tableType: string,
     mapLayerId: number,

client/src/components/FeatureSelection/VectorFeatureChart.vue

@@ -6,6 +6,7 @@ import { throttle } from 'lodash';
 import UVdatApi from '../../api/UVDATApi';
 import { FeatureGraphData, VectorFeatureTableGraph } from '../../types';
 import { renderVectorFeatureGraph } from './vectorFeatureGraphUtils';
+import MapStore from '../../MapStore';
 
 export default defineComponent({
   name: 'FeatureGraph',
@@ -156,6 +157,10 @@ export default defineComponent({
       movingAverageValue,
     ], throttledUpateDialogGraph);
 
+    const openBottomGraph = () => {
+      MapStore.setVectorFeatureTableData(props.mapLayerId, props.vectorFeatureId);
+    };
+
     return {
       graphContainer,
       graphDialogContainer,
@@ -170,6 +175,7 @@ export default defineComponent({
       movingAverageEnabled,
       movingAverageValue,
       maxMovingAverage,
+      openBottomGraph,
     };
   },
 });
@@ -186,6 +192,9 @@ export default defineComponent({
       <v-btn color="primary" size="x-small" @click="openDialog">
         View Larger Graph
       </v-btn>
+      <v-btn color="primary" size="x-small" @click="openBottomGraph">
+        Bottom Graph
+      </v-btn>
     </div>
     <svg ref="graphContainer" width="100%" :height="graphData ? 400 : 0" class="selectedFeatureSVG" />
     <v-dialog v-model="dialogVisible" max-width="1200px">