Merge branch 'time-slider' into swot-front

frontend/src/components/LineChart.vue

@@ -1,35 +1,60 @@
 <template>
  <v-container class="overflow-auto">
  <v-row>
- <v-col xs="12" lg="10">
+ <v-col xs="12" lg="9">
  <v-sheet :min-height="lgAndUp ? '65vh' : '50vh'" :max-height="lgAndUp ? '100%' : '20vh'" max-width="100%"
  min-width="500px">
  <Line :data="chartData" :options="options" ref="line" :plugins="[zoomPlugin]" />
  </v-sheet>
  </v-col>
- <v-col xs="12" lg="2">
- <v-sheet>
- <v-select label="Data Quality" v-model="dataQuality" :items="dataQualityOptions" item-title="label"
- item-value="value" @update:modelValue="filterAllDatasets()" multiple chips></v-select>
- <v-select label="Plot Style" v-model="plotStyle" :items="['Scatter', 'Connected',]"
- @update:modelValue="updateChartLine()"></v-select>
- <v-btn :loading="downloading.chart" @click="downloadChart()" class="ma-1" color="input">
- <v-icon :icon="mdiDownloadBox"></v-icon>
- Download Chart
- </v-btn>
- <v-btn :loading="downloading.csv" @click="downCsv()" class="ma-1" color="input">
- <v-icon :icon="mdiFileDelimited"></v-icon>
- Download CSV
- </v-btn>
- <v-btn :loading="downloading.json" @click="downJson()" class="ma-1" color="input">
- <v-icon :icon="mdiCodeJson"></v-icon>
- Download JSON
- </v-btn>
- <v-btn @click="resetZoom()" color="input" class="ma-1">
- <v-icon :icon="mdiMagnifyMinusOutline"></v-icon>
- Reset Zoom
- </v-btn>
- </v-sheet>
+ <v-col xs="12" lg="3">
+ <v-expansion-panels with="100%" v-model="panel" multiple>
+ <v-expansion-panel value="plotOptions">
+ <v-expansion-panel-title>Plot Options</v-expansion-panel-title>
+ <v-expansion-panel-text>
+ <v-select label="Data Quality" v-model="dataQuality" :items="dataQualityOptions" item-title="label"
+ item-value="value" @update:modelValue="filterAllDatasets()" multiple chips></v-select>
+ <v-select label="Plot Style" v-model="plotStyle" :items="['Scatter', 'Connected',]"
+ @update:modelValue="updateChartLine()"></v-select>
+ <v-btn :loading="downloading.chart" @click="downloadChart()" class="ma-1" color="input">
+ <v-icon :icon="mdiDownloadBox"></v-icon>
+ Download Chart
+ </v-btn>
+ <v-btn :loading="downloading.csv" @click="downCsv()" class="ma-1" color="input">
+ <v-icon :icon="mdiFileDelimited"></v-icon>
+ Download CSV
+ </v-btn>
+ <v-btn :loading="downloading.json" @click="downJson()" class="ma-1" color="input">
+ <v-icon :icon="mdiCodeJson"></v-icon>
+ Download JSON
+ </v-btn>
+ <v-btn @click="resetZoom()" color="input" class="ma-1">
+ <v-icon :icon="mdiMagnifyMinusOutline"></v-icon>
+ Reset Zoom
+ </v-btn>
+ </v-expansion-panel-text>
+ </v-expansion-panel>
+ <v-expansion-panel :disabled="selectedTimes.length == 0" value="selectedTimes">
+ <v-expansion-panel-title>Selected Timestamps</v-expansion-panel-title>
+ <v-expansion-panel-text>
+ <v-list>
+ <v-list-item v-for="node in selectedTimes" :key="node.datetime">
+ <template v-slot:append>
+ <v-icon :icon="mdiCloseBox" color="error" @click="removeSelectedNode(node)"></v-icon>
+ </template>
+ <v-list-item-content>
+ <v-list-item-title>{{ node.datetime }}</v-list-item-title>
+ <v-list-item-subtitle>{{ node.time_str }}</v-list-item-subtitle>
+ </v-list-item-content>
+ </v-list-item>
+ </v-list>
+ </v-expansion-panel-text>
+ <v-btn v-if="selectedTimes.length > 0" class="ma-1 float-right" color="input" @click="viewLongProfileByDates">
+ <v-icon :icon="mdiChartBellCurveCumulative"></v-icon>
+ View Long Profile
+ </v-btn>
+ </v-expansion-panel>
+ </v-expansion-panels>
  </v-col>
  </v-row>
  </v-container>
@@ -49,18 +74,24 @@ import {
 import { Line } from 'vue-chartjs'
 import 'chartjs-adapter-date-fns';
 import { enUS } from 'date-fns/locale';
+import { addMinutes, subMinutes } from "date-fns";
 import { useChartsStore } from '@/stores/charts'
+import { useAlertStore } from '@/stores/alerts'
 import { ref } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline } from '@mdi/js'
+import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson, mdiMagnifyMinusOutline, mdiChartBellCurveCumulative, mdiCloseBox } from '@mdi/js'
 import { downloadCsv, downloadFeatureJson } from '../_helpers/hydroCron';
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
+import { NODE_DATETIME_VARIATION } from '@/constants'
 
 const { lgAndUp } = useDisplay()
+const panel = ref(["plotOptions"])
+const selectedTimes = ref([])
 
 const chartStore = useChartsStore()
+const alertStore = useAlertStore()
 const props = defineProps({ data: Object, chosenVariable: Object })
 const line = ref(null)
 const plotStyle = ref('Scatter')
@@ -163,11 +194,88 @@ const options = {
  text: yLabel
  }
  }
- }
+ },
+ onClick: (e) => handleTimeseriesPointClick(e),
+ // events: ["click", "contextmenu"],
 }
 
 const dataQualityOptions = [{ label: 'good', value: 0 }, { label: 'suspect', value: 1 }, { label: 'degraded', value: 2 }, { label: 'bad', value: 3 }]
 
+const handleTimeseriesPointClick = (e) => {
+ // TODO: right click context menu
+ // e.native.preventDefault()
+ // if (e.native.button !== 2) {
+ // console.log("not right click")
+ // return
+ // }
+ const elems = line.value.chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false)
+ if (elems.length <= 0) {
+ return
+ }
+ const datasetIndex = elems[0].datasetIndex
+ const index = elems[0].index
+ const dataset = line.value.chart.data.datasets[datasetIndex]
+ const data = dataset.data[index]
+ // console.log("clicked data:", data)
+ // console.log("clicked dataset:", dataset)
+ // // TODO: y axis variable is not being set correctly
+ // console.log("y axis variable:", dataset.parsing.yAxisKey)
+ // console.log("datetime:", data.datetime)
+
+ // const datetime = data.datetime
+ // const allDatasets = line.value.chart.data.datasets
+ // const dataForDatetime = allDatasets.map((dataset) => {
+ // const data = dataset.data.find((data) => data.datetime === datetime)
+ // return data
+ // })
+ // console.log("average data for datetime:", dataForDatetime)
+
+ addSelectedNode(data)
+}
+
+const viewLongProfileByDates = () => {
+ // TODO use the datetime and plot all of the nodes' data for that datetime
+ // chartStore.filterDatasetsToTimeRange(allDatasets, subMinutes(datetime, NODE_DATETIME_VARIATION), addMinutes(datetime, NODE_DATETIME_VARIATION))
+ alertStore.displayAlert({
+ title: 'Long Profile Filter Not Implemented',
+ text: `The long profile filter by dates has not been implemented yet.`,
+ type: 'warning',
+ closable: true,
+ duration: 3
+ })
+}
+
+const addSelectedNode = (node) => {
+ // first make sure the node is not already selected
+ if (selectedTimes.value.includes(node)) {
+ alertStore.displayAlert({
+ title: 'Point already selected',
+ text: `The point at ${node.datetime} has already been selected.`,
+ type: 'warning',
+ closable: true,
+ duration: 3
+ })
+ return
+ }
+ selectedTimes.value.push(node)
+ panel.value = ["selectedTimes"]
+ // TODO use datalabels to show selection?
+ // https://chartjs-plugin-datalabels.netlify.app/samples/events/selection.html
+}
+
+const removeSelectedNode = (node) => {
+ const index = selectedTimes.value.indexOf(node)
+ if (index > -1) {
+ selectedTimes.value.splice(index, 1)
+ }
+
+ if (selectedTimes.value.length === 0) {
+ panel.value = ["plotOptions"]
+ }
+}
+
+
+
 const resetZoom = () => {
  line.value.chart.resetZoom()
 }

frontend/src/components/NodeChart.vue

@@ -6,9 +6,14 @@
  min-width="500px">
  <Line :data="chartData" :options="options" ref="line" :plugins="[customCanvasBackgroundColor, zoomPlugin]" />
  </v-sheet>
+ <v-sheet class="pa-2" color="input">
+ <TimeRangeSlider />
+ </v-sheet>
  </v-col>
  <v-col lg="2">
  <v-sheet>
+ <v-select label="Plot Style" v-model="plotStyle" :items="['Scatter', 'Connected',]"
+ @update:modelValue="updateChartLine()"></v-select>
  <v-btn :loading="downloading.chart" @click="downloadChart()" class="ma-1" color="input">
  <v-icon :icon="mdiDownloadBox"></v-icon>
  Download Chart
@@ -51,12 +56,20 @@ import { downloadMultiNodesCsv, downloadMultiNodesJson } from '../_helpers/hydro
 import { useDisplay } from 'vuetify'
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { capitalizeFirstLetter } from '@/_helpers/charts/plugins'
+import { useChartsStore } from '../stores/charts';
+import TimeRangeSlider from '@/components/TimeRangeSlider.vue'
 
 const { lgAndUp } = useDisplay()
 
 const props = defineProps({ data: Object, chosenVariable: Object })
 const line = ref(null)
 const downloading = ref({ csv: false, json: false, chart: false })
+const chartStore = useChartsStore()
+
+const plotStyle = ref('Connected')
+
+// const timeStamps = ref(chartStore.getNodeTimeStamps())
+const timeStamps = ref(['2021-01-01T00:00:00Z', '2021-01-01T00:00:00Z'])
 
 ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor, zoomPlugin)
 // TODO: might need a more efficient way of doing this instead of re-mapping the data
@@ -80,7 +93,7 @@ const options = {
  maintainAspectRatio: false,
  plugins: {
  legend: {
- display: false,
+ display: true,
  position: 'bottom',
  },
  title: {
@@ -126,6 +139,7 @@ const options = {
  label += context.parsed.y
  }
  label += ` ${selectedVariable.unit}`
+ // add the timestamp as well
  return label;
  },
  title: function (context) {
@@ -187,4 +201,16 @@ const downJson = async () => {
  await downloadMultiNodesJson()
  downloading.value.json = false
 }
+
+const updateChartLine = () => {
+ let showLine = false
+ if (plotStyle.value === 'Connected') {
+ showLine = true
+ }
+ line.value.chart.data.datasets.forEach((dataset) => {
+ dataset.showLine = showLine
+ setParsing(line.value.chart.data.datasets)
+ })
+ line.value.chart.update()
+}
 </script>

frontend/src/components/TimeRangeSlider.vue

@@ -0,0 +1,37 @@
+<template>
+ <v-range-slider v-model="range" :min="featuresStore.minTime" :max="featuresStore.maxTime" class="align-center" hide-details>
+ <template v-slot:prepend>
+ <v-text-field
+ v-model="range[0]"
+ density="compact"
+ type="date"
+ variant="outlined"
+ hide-details
+ single-line
+ ></v-text-field>
+ </template>
+ <template v-slot:append>
+ <v-text-field
+ v-model="range[1]"
+ density="compact"
+ type="date"
+ variant="outlined"
+ hide-details
+ single-line
+ ></v-text-field>
+ </template>
+ </v-range-slider>
+ {{ range }}
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useFeaturesStore } from '../stores/features';
+
+const featuresStore = useFeaturesStore()
+const range = ref(featuresStore.timeRange)
+
+// TODO: convert so that the range is an array of floats (decimal years?) instead of strings
+// https://vuetifyjs.com/en/components/range-sliders/#slots
+
+</script>

frontend/src/constants.js

@@ -12,3 +12,5 @@ export const ENDPOINTS = {
  authenticatedRoute: `${APP_API_URL}/authenticated-route`,
  userInfo: `${APP_API_URL}/users/me`,
 };
+
+export const NODE_DATETIME_VARIATION = 1; // minutes