Merge pull request #26 from OpenGeoscience/tabular-graph-enhancements

Tabular graph enhancements

Author: BryonLewis

client/src/api/UVDATApi.ts

@@ -506,15 +506,25 @@ export default class UVdatApi {
     vectorFeatureId: number,
     xAxis: string = 'index',
     yAxis: string = 'mean_va',
+    display: ('data' | 'trendLine' | 'confidenceInterval' | 'movingAverage')[] = ['data', 'trendLine'],
+    confidenceLevel = 95,
+    aggregate = false,
+    movingAverage?: number,
   ): Promise<FeatureGraphData> {
-    const response = await UVdatApi.apiClient.get('/vectorfeature/tabledata/feature-graph/', {
-      params: {
-        tableType,
-        vectorFeatureId,
-        xAxis,
-        yAxis,
-      },
-    });
+    const params = new URLSearchParams();
+
+    display.forEach((item) => params.append('display', item.toString()));
+    params.append('tableType', tableType);
+    params.append('vectorFeatureId', vectorFeatureId.toString());
+    params.append('xAxis', xAxis);
+    params.append('yAxis', yAxis);
+    params.append('confidenceLevel', confidenceLevel.toString());
+    params.append('aggregate', aggregate.toString());
+    if (movingAverage) {
+      params.append('movingAverage', movingAverage.toString());
+    }
+
+    const response = await UVdatApi.apiClient.get('/vectorfeature/tabledata/feature-graph/', { params });
     return response.data;
   }
 
@@ -525,17 +535,29 @@ export default class UVdatApi {
     yAxis: string = 'mean_va',
     indexer: string = 'vectorFeatureId',
     bbox?: string,
+    display: ('data' | 'trendLine' | 'confidenceInterval' | 'movingAverage')[] = ['data', 'trendLine'],
+    confidenceLevel = 95,
+    aggregate = false,
+    movingAverage?: number,
   ): Promise<FeatureGraphData> {
-    const response = await UVdatApi.apiClient.get('/vectorfeature/tabledata/map-layer-feature-graph/', {
-      params: {
-        tableType,
-        mapLayerId,
-        xAxis,
-        yAxis,
-        indexer,
-        bbox,
-      },
-    });
+    const params = new URLSearchParams();
+
+    display.forEach((item) => params.append('display', item.toString()));
+    params.append('tableType', tableType);
+    params.append('mapLayerId', mapLayerId.toString());
+    params.append('indexer', indexer.toString());
+    params.append('xAxis', xAxis);
+    params.append('yAxis', yAxis);
+    if (bbox) {
+      params.append('bbox', bbox.toString());
+    }
+    params.append('confidenceLevel', confidenceLevel.toString());
+    params.append('aggregateAll', aggregate.toString());
+    if (movingAverage) {
+      params.append('movingAverage', movingAverage.toString());
+    }
+
+    const response = await UVdatApi.apiClient.get('/vectorfeature/tabledata/map-layer-feature-graph/', { params });
     return response.data;
   }
 

client/src/components/FeatureSelection/VectorFeatureChart.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import {
-  PropType, defineComponent, nextTick, ref, watch,
+  PropType, computed, defineComponent, nextTick, ref, watch,
 } from 'vue';
+import { throttle } from 'lodash';
 import UVdatApi from '../../api/UVDATApi';
 import { FeatureGraphData, VectorFeatureTableGraph } from '../../types';
 import { renderVectorFeatureGraph } from './vectorFeatureGraphUtils';
@@ -28,16 +29,44 @@ export default defineComponent({
     const graphData = ref<FeatureGraphData | null>(null);
     const dialogVisible = ref(false);
     const noGraphData = ref(false);
+    const hideBaseData = ref(false);
+    const trendLine = ref(false);
+    const confidenceIntervalEnabled = ref(false);
+    const confidenceLevel = ref(95);
+    const movingAverageEnabled = ref(false);
+    const movingAverageValue = ref(12);
 
+    const maxMovingAverage = computed(() => {
+      if (graphData.value) {
+        const keys = Object.keys(graphData.value?.graphs || []);
+        if (keys.length === 1 && graphData.value?.graphs) {
+          const dataLength = graphData.value.graphs[parseInt(keys[0], 10)].data.length;
+          return Math.floor(dataLength / 4);
+        }
+      }
+      return 50;
+    });
     // Fetch feature graph data when component is mounted or props change
     const fetchFeatureGraphData = async () => {
       noGraphData.value = false;
       try {
+        const display: ('data' | 'trendLine' | 'confidenceInterval' | 'movingAverage')[] = ['data', 'trendLine'];
+        if (confidenceIntervalEnabled.value) {
+          display.push('confidenceInterval');
+        }
+        if (movingAverageEnabled.value) {
+          display.push('movingAverage');
+        }
         const data = await UVdatApi.getFeatureGraphData(
           props.graphInfo.type, // Use graphInfo.type (tableType) instead of mapLayerId
           props.vectorFeatureId,
           props.graphInfo.xAxis,
           props.graphInfo.yAxis,
+          display,
+          confidenceLevel.value,
+          false,
+          movingAverageValue.value,
+
         );
         if (data.graphs && Object.keys(data.graphs).length === 0) {
           noGraphData.value = true;
@@ -88,19 +117,60 @@ export default defineComponent({
               showXYValuesOnHover: true,
               xAxisLabel: props.graphInfo.xAxisLabel,
               yAxisLabel: props.graphInfo.yAxisLabel,
+              hideBaseData: hideBaseData.value,
+              showTrendline: trendLine.value,
+              showConfidenceInterval: confidenceIntervalEnabled.value,
             },
           );
         }
       });
     };
 
+    const updateDialogGraph = async () => {
+      await fetchFeatureGraphData();
+      if (graphData.value && graphDialogContainer.value && dialogVisible.value) {
+        renderVectorFeatureGraph(
+          graphData.value,
+          graphDialogContainer.value,
+          {
+            specificGraphKey: props.vectorFeatureId,
+            xAxisIsTime: props.graphInfo.xAxis === 'unix_time',
+            showXYValuesOnHover: true,
+            xAxisLabel: props.graphInfo.xAxisLabel,
+            yAxisLabel: props.graphInfo.yAxisLabel,
+            hideBaseData: hideBaseData.value,
+            showTrendline: trendLine.value,
+            showConfidenceInterval: confidenceIntervalEnabled.value,
+            showMovingAverage: movingAverageEnabled.value,
+          },
+        );
+      }
+    };
+
+    const throttledUpateDialogGraph = throttle(updateDialogGraph, 500);
+    watch([
+      hideBaseData,
+      trendLine,
+      confidenceIntervalEnabled,
+      confidenceLevel,
+      movingAverageEnabled,
+      movingAverageValue,
+    ], throttledUpateDialogGraph);
+
     return {
       graphContainer,
       graphDialogContainer,
       graphData,
       dialogVisible,
       openDialog,
       noGraphData,
+      hideBaseData,
+      trendLine,
+      confidenceIntervalEnabled,
+      confidenceLevel,
+      movingAverageEnabled,
+      movingAverageValue,
+      maxMovingAverage,
     };
   },
 });
@@ -119,16 +189,50 @@ export default defineComponent({
       </v-btn>
     </div>
     <svg ref="graphContainer" width="100%" :height="graphData ? 400 : 0" class="selectedFeatureSVG" />
-    <v-dialog v-model="dialogVisible" max-width="800px">
+    <v-dialog v-model="dialogVisible" max-width="1200px">
       <v-card>
         <v-card-title>
-          <v-row>
+          <v-row dense>
             <v-spacer />
             <span class="headline">{{ graphInfo.name }}</span>
             <v-spacer />
           </v-row>
         </v-card-title>
         <v-card-text>
+          <v-row>
+            <v-col>
+              <v-checkbox v-model="hideBaseData" density="compact" hide-details label="Hide Data" />
+            </v-col>
+            <v-col>
+              <v-checkbox v-model="trendLine" density="compact" hide-details label="TrendLine" />
+            </v-col>
+            <v-col>
+              <v-checkbox v-model="confidenceIntervalEnabled" density="compact" hide-details label="Confidence" />
+              <v-slider
+                v-if="confidenceIntervalEnabled"
+                v-model="confidenceLevel"
+                color="primary"
+                :min="50"
+                step="1"
+                :max="99"
+                :label="`${confidenceLevel.toFixed(1)}%`"
+                hide-details
+              />
+            </v-col>
+            <v-col>
+              <v-checkbox v-model="movingAverageEnabled" density="compact" hide-details label="Moving Average" />
+              <v-slider
+                v-if="movingAverageEnabled"
+                v-model="movingAverageValue"
+                color="primary"
+                :min="2"
+                step="1"
+                :max="maxMovingAverage"
+                :label="movingAverageValue.toFixed(0)"
+                hide-details
+              />
+            </v-col>
+          </v-row>
           <svg ref="graphDialogContainer" width="100%" height="400" />
         </v-card-text>
         <v-card-actions>