StandardAggregation.vue

<template>

    <p class="m-2 is-italic">{{ $t("message.descAggregation") }}</p>

    <div>
      <p v-if="aggregationTimeStamps.length > 1">{{ convertTime(aggregationTimeStamps[0]) }} - {{ convertTime(aggregationTimeStamps[aggregationTimeStamps.length-1]) }}</p>
      <p v-if="aggregationTimeStamps.length == 1">{{ convertTime(aggregationTimeStamps[0]) }}</p>
    </div>

    <p class="mt-2">{{ $t("message.selectTypeOfAggregation") }}:</p>

    <label
        class="checkbox is-size-7 m-1"
        v-for="(value, index) in clickedLayer?.available_aggregations"
        :key="index"
        :for="value + '-aggregation'"
    >
      <input type="checkbox" :id="value + '-aggregation'" :value="value" v-model="checkedAggregationTypes">
      {{ aggregationNames[value] }}
    </label>

    <div>
      <button
        :disabled="checkedAggregationTypes.length === 0"
        class="button is-small mt-2 mb-2"
        @click.prevent="requestAggregationValues"
        v-show="!isLoading"
      >
        {{ $t("message.startCalculation") }}
      </button>
    </div>

    <ResultMessage
      :is-error="isError"
      :is-loading="isLoading"
    ></ResultMessage>

    <div v-if="!isLoading && isSuccess">

      <AggregationChart
        :data-collection="dataCollection"
        :show-chart="!isLoading && isSuccess"
        :print-annotation="'projectPrintAnnotation'"
        :layer-name="clickedLayer?.name"
        v-if="!isLoading && isSuccess"
      ></AggregationChart>

    </div>

</template>

<script lang="ts">

import {defineComponent, PropType} from "vue";
import {CovJsonSingleResult, DataCollection, PlotlyTimeSeries, ProcessParams, StringMap, WMSLayer} from "@/types";
import axios from "axios";
import {convertTime} from "@/composables/time_utils";
import {getTextValue} from "@/composables/utils";
import ResultMessage from "@/components/map/wms/processes/ResultMessage.vue";
import {AGGREGATION, process_url} from "@/components/map/wms/processes/process";
import TimeSeriesChart from "@/components/map/TimeSeriesChart.vue";
import AggregationChart from "@/components/map/wms/AggregationChart.vue";

export default defineComponent({
  components: {AggregationChart, TimeSeriesChart, ResultMessage},
	props: {
    clickedLayer: Object as PropType<WMSLayer>,
    clickedLayerTime: String,
    processParams: Object as PropType<ProcessParams>,
    areaName: String
	},
  data() {
    return {
      dataCollection: {
          chartName: this.$props.areaName,
          mapPopupResult: {} as CovJsonSingleResult,
          timeSeriesCollection: [] as PlotlyTimeSeries[],
          singleResultCollection: [] as CovJsonSingleResult[]
      } as DataCollection,
      aggregationTimeStamps: [] as string[],

      isLoading: false as boolean,
      isSuccess: false as boolean,
      isError: false as boolean,

      checkedAggregationTypes: ['mean'] as string[],
      aggregationNames: {
          mean: "Mittelwert",
          median: "Median",
          sum: "Summe",
          min: "Minimum",
          max: "Maximum",
          quantile25: "25. Perzentil",
          quantile75: "75. Perzentil"
      } as StringMap
    }
  },
  watch: {
    'areaName' () {
      this.isSuccess = false
    }
  },
  methods: {
    convertTime(time: string) {
      return convertTime(time, this.$i18n.locale, this.clickedLayer.time_format)
    },
    getTextValue(value: number) {
      return getTextValue(this.clickedLayer, value)
    },
    getTimeRangeForAggregation() {

      let timeCount = 14
      if (timeCount > this.clickedLayer.time_steps.length) {
          timeCount = this.clickedLayer.time_steps.length
      }

      const timeStamps = this.clickedLayer.time_steps.slice((this.clickedLayer.time_steps.length) - timeCount)

      this.aggregationTimeStamps = []
      for (const timeStep of timeStamps) {
          this.aggregationTimeStamps.push(timeStep.slice(0,10))
      }
    },
    async requestAggregationValues() {
      this.isLoading = true

      this.dataCollection.timeSeriesCollection = []

      const params = this.$props.processParams

      if(!params) {
        this.isError = true
        return
      }

      params["process_type"] = AGGREGATION

      for (const aggregation_type of this.checkedAggregationTypes) {
        params["process_sub_type"] = aggregation_type
        params["time_steps"] = this.aggregationTimeStamps

        await axios({
            method: 'post',
            headers: {'Content-Type': 'application/json'},
            url: process_url,
            data: params
        }).then(response => {
            if (response.data['status'] == true) {

              const timeSeries: PlotlyTimeSeries = {
                name: this.aggregationNames[aggregation_type],
                x: [],
                y: [],
                type: 'scatter',
                mode: 'lines+markers',
                position: this.checkedAggregationTypes.indexOf(aggregation_type),
                timeFormat: this.clickedLayer.time_format,
                unit: this.clickedLayer.unit,
                yMin: this.clickedLayer.y_axis_min,
                yMax: this.clickedLayer.y_axis_max,
                visible: true
              }
              for (const [i] of response.data['values'].entries()) {
                  timeSeries.x[i] = response.data['time_steps'][i]
                  timeSeries.y[i] = response.data['values'][i]
              }

              this.dataCollection.timeSeriesCollection.push(timeSeries)

            } else {
              this.isError = true
            }
        }).finally(() => {
          if (this.dataCollection.timeSeriesCollection.length == this.checkedAggregationTypes.length) {
            this.isLoading = false
            this.isSuccess = true
          }
        }).catch((error) => {
            this.isError = true
            console.log(error)
        })
      }
    }
  },
  mounted() {
    this.getTimeRangeForAggregation()
  },
});
</script>