Refactor hydroCron.js and LineChart.vue to add download functionality

CUAHSI · Apr 28, 2024 · 76d3f65 · 76d3f65
1 parent 33a0aee
commit 76d3f65
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 44 deletions.
diff --git a/frontend/src/_helpers/hydroCron.js b/frontend/src/_helpers/hydroCron.js
@@ -144,4 +144,56 @@ const processHydroCronResult = async (response, params, swordFeature) => {
   }
 }
 
-export { queryHydroCron }
+async function downloadJson(feature = null) {
+  if (feature == null) {
+    const featuresStore = useFeaturesStore()
+    feature = featuresStore.activeFeature
+  }
+  const jsonData = JSON.stringify(feature.sword)
+  const blob = new Blob([jsonData], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${getLongFilename(feature)}.json`
+
+  link.click()
+
+  URL.revokeObjectURL(url)
+}
+
+async function downloadCsv(feature = null) {
+  // if feature not defined, use featuresStore.activeFeature
+  if (feature == null) {
+    const featuresStore = useFeaturesStore()
+    feature = featuresStore.activeFeature
+  }
+  const csvData = await queryHydroCron(feature, 'csv')
+  const blob = new Blob([csvData], { type: 'text/csv' })
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = `${getLongFilename(feature)}.csv`
+
+  link.click()
+
+  URL.revokeObjectURL(url)
+}
+
+function getLongFilename(feature = null) {
+  if (feature == null) {
+    const featuresStore = useFeaturesStore()
+    feature = featuresStore.activeFeature
+  }
+  const featureType = feature.params.feature
+  const riverName = feature.sword.river_name
+  const reachId = feature.sword.reach_id
+  const startTime = feature.params.start_time
+  const endTime = feature.params.end_time
+  let filename = `${featureType}_${riverName}_${reachId}_${startTime}_${endTime}`
+  filename = filename.replace(/[^a-z0-9]/gi, '_').toLowerCase()
+  return filename
+}
+
+export { queryHydroCron, downloadJson, downloadCsv }
diff --git a/frontend/src/components/LineChart.vue b/frontend/src/components/LineChart.vue
@@ -8,8 +8,18 @@
       </v-col>
       <v-divider class="my-2" vertical></v-divider>
       <v-col>
-        <v-btn @click="downloadChart()">
-          <v-icon :icon="mdiDownloadBox"></v-icon>Download</v-btn>
+        <v-btn :loading="downloading.chart" @click="downloadChart()" class="mb-2">
+          <v-icon :icon="mdiDownloadBox"></v-icon>
+          Download Plot
+        </v-btn>
+        <v-btn :loading="downloading.csv"  @click="downCsv()" class="mb-2">
+          <v-icon :icon="mdiFileDelimited"></v-icon>
+          Download CSV
+        </v-btn>
+        <v-btn :loading="downloading.json" @click="downloadJson()">
+          <v-icon :icon="mdiCodeJson"></v-icon>
+          Download JSON
+        </v-btn>
         <!-- <v-btn class="ma-2" :icon="mdiPalette" @click="updateChartColor()" size="small">
         </v-btn> -->
       </v-col>
@@ -34,11 +44,13 @@ import { enUS } from 'date-fns/locale';
 import { useChartsStore } from '@/stores/charts'
 import { ref, onMounted } from 'vue'
 import { customCanvasBackgroundColor } from '@/_helpers/charts/plugins'
-import { mdiPalette, mdiDownloadBox } from '@mdi/js'
+import { mdiDownloadBox, mdiFileDelimited, mdiCodeJson } from '@mdi/js'
+import { downloadCsv, downloadJson } from '../_helpers/hydroCron';
 
 const chartStore = useChartsStore()
 const props = defineProps({ data: Object, chosenVariable: Object })
 const line = ref(null)
+const downloading = ref({ csv: false, json: false, chart: false})
 
 ChartJS.register(LinearScale, TimeScale, PointElement, LineElement, Title, Tooltip, Legend, customCanvasBackgroundColor)
 // TODO: might need a more efficient way of doing this instead of re-mapping the data
@@ -101,6 +113,7 @@ const getChartName = () => {
 }
 
 const downloadChart = async () => {
+  downloading.value.chart = true
   const filename = getChartName()
   // change the chart background color to white
   line.value.chart.canvas.style.backgroundColor = 'white'
@@ -110,6 +123,19 @@ const downloadChart = async () => {
   link.href = image
   link.download = filename
   link.click()
+  downloading.value.chart = false
+}
+
+const downCsv = async () => {
+  downloading.value.csv = true
+  await downloadCsv()
+  downloading.value.csv = false
+}
+
+const downJson = async () => {
+  downloading.value.json = true
+  await downloadJson()
+  downloading.value.json = false
 }
 
 const updateChartColor = (color) => {

diff --git a/frontend/src/views/SelectionsView.vue b/frontend/src/views/SelectionsView.vue
@@ -155,7 +155,7 @@ import { RouterLink } from 'vue-router';
 import { ref } from 'vue'
 import { mdiSatelliteVariant, mdiSword, mdiCodeJson, mdiFileDelimited } from '@mdi/js'
 import { computed } from 'vue';
-import { queryHydroCron } from "../_helpers/hydroCron";
+import { downloadJson, downloadCsv } from "../_helpers/hydroCron";
 
 const featureStore = useFeaturesStore();
 
@@ -177,45 +177,6 @@ const headers = [
 ]
 const sortBy = [{ key: 'startedAt', order: 'desc' }]
 
-function getLongFilename(feature) {
-  const featureType = feature.params.feature
-  const riverName = feature.sword.river_name
-  const reachId = feature.sword.reach_id
-  const startTime = feature.params.start_time
-  const endTime = feature.params.end_time
-  let filename = `${featureType}_${riverName}_${reachId}_${startTime}_${endTime}`
-  filename = filename.replace(/[^a-z0-9]/gi, '_').toLowerCase();
-  return filename
-}
-
-async function downloadJson(feature) {
-  const jsonData = JSON.stringify(feature.sword);
-  const blob = new Blob([jsonData], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `${getLongFilename(feature)}.json`;
-
-  link.click();
-
-  URL.revokeObjectURL(url);
-}
-
-async function downloadCsv(feature) {
-  const csvData = await queryHydroCron(feature, 'csv')
-  const blob = new Blob([csvData], { type: 'text/csv' });
-  const url = URL.createObjectURL(blob);
-
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `${getLongFilename(feature)}.csv`;
-
-  link.click();
-
-  URL.revokeObjectURL(url);
-}
-
 async function viewHydroCronResult(feature) {
   const info = feature.results.geojson
   console.log(info)