Merge pull request #100 from hydroserver2/161-lro

161 lro

Author: daniel-slaugh

package-lock.json

@@ -18,9 +18,7 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@mdi/js": "^7.2.96",
-    "@observablehq/plot": "^0.6.10",
     "country-list": "^2.3.0",
-    "d3": "^7.8.5",
     "date-fns": "^2.30.0",
     "dotenv": "^16.0.3",
     "echarts": "^5.5.0",

package.json

@@ -1,6 +1,32 @@
 <template>
+  <h5 class="text-h5 my-6">Datastreams Available at this Site</h5>
+
+  <v-row class="pb-4">
+    <v-col cols="auto" v-if="thing?.ownsThing">
+      <v-btn-secondary
+        prependIcon="mdi-plus"
+        variant="elevated"
+        :to="{ name: 'DatastreamForm', params: { id: thingId } }"
+        >Add New Datastream</v-btn-secondary
+      >
+    </v-col>
+    <v-col v-if="datastreams.length">
+      <v-btn
+        color="blue-grey-lighten-2"
+        prependIcon="mdi-chart-line"
+        variant="elevated"
+        :to="{ name: 'VisualizeData', query: { sites: thingId } }"
+        >View on Data Visualization Page</v-btn
+      >
+    </v-col>
+  </v-row>
+
+  <h6 class="text-h6" style="color: #b71c1c">
+    {{ thing?.dataDisclaimer }}
+  </h6>
+
   <v-data-table
-    class="elevation-3"
+    class="elevation-3 my-4"
     :headers="headers"
     :items="visibleDatastreams"
     v-model:sort-by="sortBy"
@@ -30,36 +56,32 @@
     </template>
 
     <template v-slot:item.observations="{ item }">
-      <div v-if="loaded[item.id]">
-        <div v-if="!isOwner && !item.isDataVisible">
-          Data is private for this datastream
-        </div>
-        <div v-else-if="observations[item.id]">
-          <v-dialog v-model="item.chartOpen" width="80rem">
-            <FocusContextPlot
-              :thing-name="thing?.name || 'Site'"
-              :datastream="item"
-              @close="item.chartOpen = false"
-            />
-          </v-dialog>
-          <Sparkline
-            @click="item.chartOpen = true"
-            :observations="observations[item.id]"
+      <div v-if="!isOwner && !item.isDataVisible">
+        Data is private for this datastream
+      </div>
+      <div v-else>
+        <v-dialog v-model="item.chartOpen" width="80rem">
+          <DataVisPopupPlot
             :datastream="item"
+            @close="item.chartOpen = false"
           />
-        </div>
-        <div v-else>No data for this datastream</div>
+        </v-dialog>
+        <Sparkline :datastream="item" @open-chart="item.chartOpen = true" />
       </div>
-      <v-progress-linear v-else color="secondary" indeterminate />
     </template>
 
     <template v-slot:item.last_observation="{ item }">
-      <div v-if="mostRecentObs[item.id] && (isOwner || item.isDataVisible)">
+      <div
+        v-if="
+          observations[item.id]?.dataArray?.length &&
+          (isOwner || item.isDataVisible)
+        "
+      >
         <v-row>
-          {{ formatDate(mostRecentObs[item.id][0]) }}
+          {{ getMostRecentObsTime(observations[item.id].dataArray) }}
         </v-row>
         <v-row>
-          {{ mostRecentObs[item.id][1] }}&nbsp;
+          {{ getMostRecentObsVal(observations[item.id].dataArray) }}&nbsp;
           {{ units.find((u) => u.id === item.unitId)?.name }}
         </v-row>
       </div>
@@ -72,7 +94,6 @@
         :datastream="item"
         :is-owner="isOwner"
         :thing-id="thingId"
-        @openPlot="item.chartOpen = true"
         @deleted="onDeleteDatastream(item.id)"
         @linkUpdated="loadDatastreams"
       />
@@ -81,17 +102,16 @@
 </template>
 
 <script setup lang="ts">
-import FocusContextPlot from '@/components/Datastream/FocusContextPlot.vue'
-
+import DataVisPopupPlot from '@/components/VisualizeData/DataVisPopupPlot.vue'
+import DatastreamTableActions from '@/components/Datastream/DatastreamTableActions.vue'
 import Sparkline from '@/components/Sparkline.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useMetadata } from '@/composables/useMetadata'
-import { useObservationsLast72Hours } from '@/store/observations72Hours'
+import { useObservationStore } from '@/store/observations'
 import { storeToRefs } from 'pinia'
 import { useThingStore } from '@/store/thing'
-import DatastreamTableActions from '@/components/Datastream/DatastreamTableActions.vue'
 import { api } from '@/services/api'
-import { Datastream } from '@/types'
+import { DataArray, Datastream } from '@/types'
 
 const props = defineProps({
   thingId: {
@@ -104,10 +124,8 @@ const props = defineProps({
   },
 })
 
-const { fetchObservationsBulk } = useObservationsLast72Hours()
-const { loaded, observations, mostRecentObs } = storeToRefs(
-  useObservationsLast72Hours()
-)
+const { observations } = storeToRefs(useObservationStore())
+
 const { thing } = storeToRefs(useThingStore())
 const datastreams = ref<Datastream[]>([])
 const actionKey = ref(1)
@@ -116,6 +134,34 @@ const { sensors, units, observedProperties, processingLevels } = useMetadata(
   props.thingId
 )
 
+const getMostRecentObsTime = (dataArray: DataArray) => {
+  if (!dataArray.length) return undefined
+  return formatDate(dataArray[dataArray.length - 1][0])
+}
+
+const getMostRecentObsVal = (dataArray: DataArray) => {
+  if (!dataArray.length) return undefined
+  return formatNumber(dataArray[dataArray.length - 1][1])
+}
+
+function formatDate(dateString: string) {
+  return (
+    new Date(dateString).toUTCString().split(' ').slice(1, 5).join(' ') + ' UTC'
+  )
+}
+
+const formatNumber = (value: string | number): string => {
+  if (typeof value === 'number') {
+    const formatter = new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    })
+    return formatter.format(value)
+  }
+
+  return value?.toString()
+}
+
 const visibleDatastreams = computed(() => {
   return datastreams.value
     .filter((d) => d.isVisible || props.isOwner)
@@ -145,12 +191,6 @@ const headers = [
   { title: 'Actions', key: 'actions', sortable: false },
 ]
 
-function formatDate(dateString: string) {
-  return (
-    new Date(dateString).toUTCString().split(' ').slice(1, 5).join(' ') + ' UTC'
-  )
-}
-
 function onDeleteDatastream(id: string) {
   datastreams.value = datastreams.value.filter((ds) => ds.id !== id)
 }
@@ -166,6 +206,5 @@ const loadDatastreams = async () => {
 
 onMounted(async () => {
   await loadDatastreams()
-  await fetchObservationsBulk(visibleDatastreams.value)
 })
 </script>

src/components/Datastream/DatastreamTable.vue

@@ -78,7 +78,10 @@
           v-if="datastream.isDataVisible"
           prepend-icon="mdi-chart-line"
           title="View Time Series Plot"
-          @click="emit('openPlot')"
+          :to="{
+            name: 'VisualizeData',
+            query: { sites: thingId, datastreams: datastream.id },
+          }"
         />
         <v-list-item
           v-if="datastream.isDataVisible"
@@ -149,7 +152,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['openPlot', 'deleted', 'linkUpdated'])
+const emit = defineEmits(['deleted', 'linkUpdated'])
 const handleLinkUpdated = (patchBody: {}) => emit('linkUpdated', patchBody)
 
 const openDelete = ref(false)