{% extends "base.html" %} {% load static %}
{% block content %}
<div class="srf-container" style="max-height: 280px;">
  <div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
    <span class="srf-display-1 text-uppercase">Wave Data Analysis</span><br><br>
  </div>
    <div id="app" v-cloak>
    <v-app>
      <form class="col l12">
        <v-row dense justify="start">
          <v-col class="text-center" cols="3">
            <v-autocomplete
            :items="requestObject.stations"
            v-model="requestObject.station_id"
            label="Station"
            autocomplete="off"
            :rules="simpleTextFieldsRules"
            ></v-autocomplete>
          </v-col>
          
          <v-col class="text-center" cols="3">
            <v-menu
              :close-on-content-click="false"
              v-model="requestObject.initial_date_menu"
              transition="scale-transition"
              offset-y
              class="max-50"
            >
              <template v-slot:activator="{ on }">
                <v-text-field
                v-model="requestObject.initial_date"
                label="Initial date"
                v-on="on"
                prepend-icon="event"
                persistent-hint
                :rules="simpleTextFieldsRules"
                ></v-text-field>
              </template>
              <v-date-picker
              v-model="requestObject.initial_date"
              @input="requestObject.initial_date_menu = false"
              ></v-date-picker>
            </v-menu>
          </v-col>        

          <v-col class="text-center" cols="3">
            <v-menu
              :close-on-content-click="false"
              v-model="requestObject.initial_time_menu"
              transition="scale-transition"
              offset-y
              class="max-50"
            >
              <template v-slot:activator="{ on }">
                <v-text-field
                v-model="requestObject.initial_time"
                label="Initial time"
                v-on="on"
                persistent-hint
                prepend-icon="access_time"
                :rules="simpleTextFieldsRules"
                ></v-text-field>
              </template>
              <v-time-picker
              v-model="requestObject.initial_time"
              ></v-time-picker>
            </v-menu>
          </v-col>

          <v-col class="text-center" cols="3">
            <v-autocomplete
            v-model="requestObject.range_interval"
            :items="requestObject.range_intervals"
            label="Range Interval"
            return-object
            autocomplete="off"
            :rules="simpleTextFieldsRules"              
            ></v-autocomplete>
          </v-col>
        </v-row dense justify="start">
        
        <v-row dense justify="start">
          <v-col class="text-center" cols="3">
            <v-autocomplete
            v-model="requestObject.component_number"
            :items="requestObject.component_range"
            label="Number of Components"
            return-object
            autocomplete="off"
            :rules="simpleTextFieldsRules"              
            ></v-autocomplete>
          </v-col>     

          <v-col class="text-center" cols="3">
            <v-autocomplete
            v-model="requestObject.calc_interval"
            :items="requestObject.calc_intervals"
            label="Calculation Interval"
            return-object
            autocomplete="off"
            :rules="simpleTextFieldsRules"              
            ></v-autocomplete>
          </v-col>                
        </v-row dense justify="start">          

        <v-row dense justify="start">
          <v-col class="text-center" cols="auto">
            <v-btn
              @click="getHighFrequencyData()"
              :disabled="$v.requestObject.$invalid"                
            >
              Query  <i class="material-icons right">send</i>
            </v-btn>
          </v-col> 
        </v-row dense justify="start">   

        <v-alert v-model='error' dismissible type="error">
          [[ error_message ]]
        </v-alert>
        <v-alert v-model='no_data' dismissible type="info">
          No data
        </v-alert>
        <div v-if="loading || rendering">
          <span class="headline font-weight-thin" v-if="loading">Loading...</span><br>
          <span class="headline font-weight-thin" v-if="rendering">Rendering...</span><br>
          <v-progress-linear
          indeterminate
          ></v-progress-linear>
        </div>          
      </form>
      <input type="hidden" id="data-url" value="{% url 'get-wave-data' %}">
      <v-tabs
        id="tabs"
        v-model="tab"
        :key="tabs.length"
        show-arrows
        centered
        center-active
      >
        <v-tab
          v-for="i in tabs"
          :key="i"
          :href="`#tab-${i}`"
        >[[ i ]]</v-tab>
      </v-tabs>
      <v-tabs-items
        v-model="tab"
        continuous
      >
        <v-tab-item
          v-for="i in tabs"
          :key="i"
          :value="'tab-' + i"
          eager
          :transition="false"
          :reverse-transition="false"
          :ref="'tab-' + i"
        >
          <div :id='i + "-chart"' style='width:100%; height:400px;'></div>
          <div class="space-between">
            <v-btn color="info" @click="exportCSV(i)">Download CSV</v-btn>
          </div>
          <table
            :id="`datatable-${i}`"
            class="compact hover row-border stripe"
            data-page-length="300"
            data-searching="false"
            style="width: 100%;"
          >
            <thead>
              <tr>
                <td v-for="header in tableHeadersList[i]">[[ header.text ]] <small v-if="header.value === 'datetime'">[[timezone]]</small></td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableItemsList[i]">
                <td v-for="header in tableHeadersList[i]" :data-color="(item[header.value] || {}).color || '#fff'">
                  <div v-if="header.value=='datetime'">
                    [[ (item[header.value] || {}).value ]]
                  </div>
                  <div v-if="header.value!='datetime'">
                    <div v-bind:class="{'min-value': (item[header.value] || {}).value == (summaries[header.value]['MIN'] || {}).value, 'max-value': (item[header.value] || {}).value == (summaries[header.value]['MAX'] || {}).value}">
                    [[ (item[header.value] || {}).value ]]
                    </div>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td>
                  SUM
                </td>
                <td v-for="v in tableHeadersList[i]" v-if="v.value!='datetime'">
                  <div v-if="summaries[v.value]['SUM'] > 0">
                    [[ summaries[v.value]['SUM'] ]]
                  </div>
                  <div v-if="summaries[v.value]['SUM'] <= 0">
                    -
                  </div>
                </td>
              </tr>
              <tr>
                <td>
                  AVG
                </td>
                <td v-for="v in tableHeadersList[i]" v-if="v.value!='datetime'">
                  [[ summaries[v.value]['AVG'] ]]
                </td>
              </tr>
              <tr>
                <td>
                  MIN
                </td>
                <td v-for="v in tableHeadersList[i]" v-if="v.value!='datetime'">
                  <span>[[ summaries[v.value]['MIN'].value ]]</span><br>
                  <span class="caption font-weight-light">First occurrence</span><br>
                  <span class="caption font-weight-light">[[ summaries[v.value]['MIN'].timestamp ]]</span>
                </td>
              </tr>
              <tr>
                <td>
                  MAX
                </td>
                <td v-for="v in tableHeadersList[i]" v-if="v.value!='datetime'">
                  <span>[[ summaries[v.value]['MAX'].value ]]</span><br>
                  <span class="caption font-weight-light">First occurrence</span><br>
                  <span class="caption font-weight-light">[[ summaries[v.value]['MAX'].timestamp ]]</span>
                </td>
              </tr>
              <tr>
                <td>
                  STDDEV
                </td>
                <td v-for="v in tableHeadersList[i]" v-if="v.value!='datetime'">
                  [[ summaries[v.value]['STDDEV'] ]]
                </td>
              </tr>
              <tr>
                <td>
                  COUNT
                </td>
                <td v-for="v in tableHeadersList[i]" v-if="v.value!='datetime'">
                  [[ summaries[v.value]['COUNT'] ]]
                </td>
              </tr>
            </tfoot>
          </table>

        </div>
        </v-tab-item>
      </v-tabs-items>            
    </v-app>
  </div>
</div>
{% endblock %} {% block localjavascript %}
<script>
  Vue.use(window.vuelidate.default);
  const { required, minLength } = window.validators;

  new Vue({
    el: "#app",
    vuetify: new Vuetify(),
    delimiters: ["[[", "]]"],
    validations: {
      requestObject: {
        initial_time: { required },
        initial_date: { required },
        range_interval: { required },
        calc_interval: { required },
        component_number: { required },
        station_id: { required },
      },
    },        
    data: {
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      allData: [],
      formatedData: [],      
      summaries: null,
      tabs: [],
      tab: null,
      data: {},
      filteredData: {},
      tableHeadersList: {},
      tableItemsList: {},
      summaries: {},
      error_message: "",
      error: false,
      loading: false,
      rendering: false,
      no_data: false,      
      simpleTextFieldsRules: [
        (v) => (v != null && v !== "") || "This field is required",
      ],        
      requestObject: {
        initial_time: moment().format('HH:mm'),
        initial_time_menu: false,
        initial_date: moment().format('YYYY-MM-DD'),
        initial_date_menu: false,
        range_interval: null,
        range_intervals: ['30min', '1h', '3h'],
        calc_interval: null,
        calc_intervals: ['1min', '5min', '10min', '15min'],
        component_number: null,
        component_range: [5,6,7,8,9,10],
        station_id: null,
        stations: [
          {% for station in station_list %}
          {value: {{ station.id }}, text: "{{ station.name | safe }} - {{ station.code }}" },
          {% endfor %}
        ],
      },          
    },
    mounted() {
      axios.defaults.xsrfHeaderName = "X-CSRFToken";
      axios.defaults.xsrfCookieName = "csrftoken";
    },     
    methods: {  
      getHighFrequencyData() {
        this.loading = true;
        this.no_data = false;
        this.tabs = [];
        axios({
          method: 'get',
          url: document.getElementById('data-url').value,
          params: {
            'initial_time': this.requestObject.initial_time,
            'initial_date': this.requestObject.initial_date,
            'range_interval': this.requestObject.range_interval,
            'calc_interval': this.requestObject.calc_interval,
            'component_number': this.requestObject.component_number,
            'station_id': this.requestObject.station_id,
            'tz_client': this.timezone
          },
        })
        .then(data => {
            this.loading = false;
            this.rendering = true;
            this.data = Object.assign({}, data.data);
            this.filteredData = Object.assign({}, data.data);
            this.tabs = Object.keys(this.data).sort();
            
            if (this.tabs.length > 0) {
              Highcharts.setOptions({time: {timezone: this.timezone}});
              this.tabs.forEach(tab => {
                this.data[tab].series.forEach(el => {
                  el.turboThreshold = 0;
                  el.data.forEach(i => {
                    i.xFormated = this.formatDatetimeForDataTable(moment.utc(i.x).tz(this.timezone))
                  })
                });
              });
            }
            this.allData = JSON.parse(JSON.stringify(data.data));
          })
        .then(data => {
            this.createTables();
            if (this.tabs.length > 0) {
              window.requestAnimationFrame(evt => {
                this.tabs.forEach(tab => {

                  const $table = $('#datatable-' + tab);
                  const xAxis = Object.assign({}, this.data[tab].xAxis, {
                    events:{
                      afterSetExtremes: (evt) => {
                        this.filteredData = JSON.parse(JSON.stringify(this.allData));
                        let auxData = Object.assign({}, this.data);
                        if (evt.userMin && evt.userMax) {
                          const series = auxData[tab].series.map(values => {
                            const content = Object.assign({}, values);
                            content.data = values.data.filter(item => {
                              return item.x >= evt.userMin && item.x <= evt.userMax;
                            });
                            return content;
                          });
                          this.filteredData[tab].series = series;
                        }
                        
                        this.createTable(tab);
                        this.$forceUpdate();
                        $table.DataTable().destroy();
                        
                        setTimeout(() => {
                          $table.DataTable({
                            lengthMenu: [[ 50, 100, 300, 500, -1 ], [ 50, 100, 300, 500, "All"]],
                          });
                        }, 200);
                      }
                    }
                  });

                  this.data[tab].xAxis = xAxis;
                  this.data[tab].xAxis.type = 'datetime';
                  Highcharts.chart(tab+'-chart', this.data[tab]);

                  $table.DataTable(
                    {
                      lengthMenu: [[ 50, 100, 300, 500, -1 ], [ 50, 100, 300, 500, "All"]],
                    }
                  );
                });
              });
            } else {
              this.no_data = true;
            }
            this.rendering = false;
          })
      },
      createTables: function() {        
        for(let i in this.tabs) {
          this.createTable(this.tabs[i]);
        }
      },
      createTable: function(key) {
        this.tableItemsList[key] = [];
        this.tableHeadersList[key] = [{
          value: "datetime",
          text: "Date",
        }];
        
        this.filteredData[key].series.forEach(series => {
          const vname = series.name
          this.summaries[vname] = {};
          this.summaries[vname]['SUM'] = 'loading...';
          this.summaries[vname]['AVG'] = 'loading...';
          this.summaries[vname]['MIN'] = 'loading...';
          this.summaries[vname]['MAX'] = 'loading...';
          this.summaries[vname]['STDDEV'] = 'loading...';
          this.summaries[vname]['COUNT'] = 'loading...';
          
          this.tableHeadersList[key].push({
            value: vname,
            text: vname + " (" + series.unit + ")",
          });

          for (let j in series.data) {
            let found = false;
            let dt = series.data[j].xFormated;
            for (let k=0; k<this.tableItemsList[key].length && !found; k++) {
              if (this.tableItemsList[key][k].datetime.value == dt) {
                this.tableItemsList[key][k][vname] = { 
                  value: series.data[j].y
                };
                found = true;
              }
            }

            if (!found) {
              this.tableItemsList[key].push({
                datetime: { value: dt },
              })
              this.tableItemsList[key][this.tableItemsList[key].length-1][vname] = {
                value: series.data[j].y
              };
            }
          }
        });
        this.updateStatistics(key);
      },
      updateStatistics(key) {
        for(let v=1; v<this.tableHeadersList[key].length; v++){
          let avg;
          let sum = 0;
          let validSum = 0; // Just in case the 'sum' variable get some 'null' value in some point. That will be invalid to make statistics like avg, for example.
          let count = 0;
          let min = null;
          let min_ts = null;
          let max = null;
          let max_ts = null;
          let stddev = 0;

          for(let item=0; item<this.tableItemsList[key].length; item++) {
            let value = (this.tableItemsList[key][item][this.tableHeadersList[key][v].value] || {}).value;
            if(value != null && !isNaN(value)) {
              count += 1;
              sum += value;
              if(min == null || min > value) {
                min = value;
                min_ts = this.tableItemsList[key][item]['datetime'].value;
              }
              if(max == null || max < value) {
                max = value;
                max_ts = this.tableItemsList[key][item]['datetime'].value;
              }
            }
          }

          if(count > 0) {
            avg = sum / count;
            if(count > 1) {              
              for(let item=0; item<this.tableItemsList[key].length; item++) {
                let value = (this.tableItemsList[key][item][this.tableHeadersList[key][v].value] || {}).value;
                if(value != null && !isNaN(value)) {
                  stddev += Math.pow((value - avg), 2);
                }
              }
              stddev = Math.sqrt(stddev / (count))
            }
          }else{
            avg = null;
            stddev = null;
          }
          this.summaries[this.tableHeadersList[key][v].value]['SUM'] = sum !== null ? sum.toFixed(2) : null;
          this.summaries[this.tableHeadersList[key][v].value]['AVG'] = avg !== null ? avg.toFixed(2) : null;
          this.summaries[this.tableHeadersList[key][v].value]['MIN'] = {
            value: min !== null ? min.toFixed(2) : null,
            timestamp: min_ts
          }
          this.summaries[this.tableHeadersList[key][v].value]['MAX'] = {
            value: max !== null ? max.toFixed(2) : null,
            timestamp: max_ts
          }
          this.summaries[this.tableHeadersList[key][v].value]['STDDEV'] = stddev !== null ? stddev.toFixed(2): null;
          this.summaries[this.tableHeadersList[key][v].value]['COUNT'] = count;
        }
      },
      formatDatetimeForDataTable(datetime){
        return datetime.format('YYYY-MM-DD HH:mm:ss');
      },
      arrayToCSV(array) {
        const header = "data:text/csv;charset=utf-8,";
        const keys = Object.keys(array[0]);
        let result = keys.join(",") + "\n";
        array.forEach(function(obj){
            result += keys.map(k => obj[k].value).join(",") + "\n";
        });
        return header + encodeURIComponent(result);
      },            
      exportCSV(key) {
        const csvContent = this.arrayToCSV(this.tableItemsList[key]);
        const link = document.createElement("a");
        
        let variable = this.tab.slice(4);
        let station = this.requestObject.stations.find(station => station['value'] == this.requestObject.station_id)['text'];
        let initial_datetime  = `${this.requestObject.initial_date} ${this.requestObject.initial_time}`;
        let range_interval = this.requestObject.range_interval;
        let calc_interval = this.requestObject.calc_interval;
        let component = this.requestObject.component_number;
        let timezone = this.timezone;

        link.download = `${station} ${variable} ${initial_datetime} ${component} ${range_interval} ${calc_interval} ${timezone}.csv`;
        link.href = csvContent;
        const event = new MouseEvent('click');
        link.dispatchEvent(event);
      },      
    },
     
  })
</script>
{% endblock %}

{% block extrastyle %}
<style>
  .space-between {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.table-legend {
  display: flex;
  padding: 6px;
  border: 1px solid grey;
  border-radius: 12px
}

.table-legend .column {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;
  justify-content: start;
  align-items: center;
  min-width: 115px;
}

.item .color {
  width: 16px;
  height: 16px;
}

.item .type {
  width: 16px;
  height: 16px;
  font-size: 12px;
}

.item .name {
  padding-left: 4px;
  font-size: 14px;
}
.max-heigh-100{
  max-height: 100px;
  overflow: auto;
}
.add-comma:not(:last-child):after {
  content: ", ";
}
.highcharts-data-table table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    min-width: 100%;
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 0.9em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    border: 1px solid silver;
    padding: 0.5em;
}
.highcharts-data-table tr:nth-child(even), .highcharts-data-table thead tr {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #eff;
}
.highcharts-data-table caption {
    border-bottom: none;
    font-size: 1.1em;
    font-weight: bold;
}
table.dataTable tfoot th, table.dataTable tfoot td {
  padding: 2px;
  border-top: 1px solid #ddd;
}
</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
{% endblock %}