{% extends "base.html" %} {% block title %} Surface - Station Report {% endblock
%} {% block content %}
<div class="srf-container">
  <div id="app" v-cloak>
    <v-app>
      <v-content fluid fill-height style="background: white">
        <v-layout column>
          <v-flex>
            <h1 class="display-1 text-uppercase">Station report</h1>
          </v-flex>
          <v-layout column fluid>
            <v-layout mt-3>
              <v-flex sm1 md3 lg3>
                <v-autocomplete
                  :items="stations"
                  item-text="name"
                  item-value="id"
                  v-model="stationRequest.selectedStationId"
                  label="Station"
                  @change="onChangeStation(stationRequest.selectedStationId)"
                  required
                  hint="*Required"
                  persistent-hint
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>
              <v-flex sm1 md3 lg3 ml-5>
                <v-autocomplete
                  :items="variableItems"
                  item-text="variable_name"
                  item-value="symbol"
                  v-model="stationRequest.selectedElements"
                  label="Variables"
                  multiple
                  required
                  hint="*Required"
                  persistent-hint
                  clearable
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>
              <v-flex sm1 md3 lg3 ml-5>
                <v-autocomplete
                  :items="timescales"
                  item-text="label"
                  item-value="value"
                  v-model="stationRequest.timescale"
                  label="Time resolution"
                  required
                  hint="*Required"
                  persistent-hint
                  :rules="simpleTextFieldsRules"
                  autocomplete="off"
                ></v-autocomplete>
              </v-flex>
            </v-layout>
            <v-layout mt-3 mb-5>
              <v-flex sm1 md4 lg5 class="d-flex justify-between">
                <v-menu
                  :close-on-content-click="false"
                  v-model="menu1"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      v-model="stationRequest.begin_date"
                      label="Start date"
                      prepend-icon="event"
                      v-on="on"
                      required
                      hint="*Required"
                      persistent-hint
                      :rules="simpleTextFieldsRules"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    name="begin_date"
                    v-model="stationRequest.begin_date"
                    @input="menu1 = false"
                  ></v-date-picker>
                </v-menu>

                <v-menu
                  :close-on-content-click="false"
                  v-model="menu3"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                  :disabled="!(stationRequest.timescale === 'hourlysummaries' || stationRequest.timescale === 'rawdata')"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      v-model="stationRequest.begin_time"
                      label="Start time"
                      prepend-icon="access_time"
                      v-on="on"
                      :disabled="!(stationRequest.timescale === 'hourlysummaries' || stationRequest.timescale === 'rawdata')"
                    ></v-text-field>
                  </template>
                  <v-time-picker
                    v-if="menu3"
                    v-model="stationRequest.begin_time"
                    class="max-50"
                    @click:minute="$refs.menu.save(stationRequest.begin_time)"
                  ></v-time-picker>
                </v-menu>
              </v-flex>
              <v-flex sm1 md5 lg4 ml-5 class="d-flex justify-between">
                <v-menu
                  :close-on-content-click="false"
                  v-model="menu2"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      v-model="stationRequest.end_date"
                      label="End date"
                      prepend-icon="event"
                      v-on="on"
                      required
                      hint="*Required"
                      persistent-hint
                      :rules="simpleTextFieldsRules"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    name="end_date"
                    v-model="stationRequest.end_date"
                    @input="menu2 = false"
                  ></v-date-picker>
                </v-menu>

                <v-menu
                  :close-on-content-click="false"
                  v-model="menu4"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  class="max-50"
                  :disabled="!(stationRequest.timescale === 'hourlysummaries' || stationRequest.timescale === 'rawdata')"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      v-model="stationRequest.end_time"
                      label="End time"
                      prepend-icon="access_time"
                      v-on="on"
                      :disabled="!(stationRequest.timescale === 'hourlysummaries' || stationRequest.timescale === 'rawdata')"
                    ></v-text-field>
                  </template>
                  <v-time-picker
                    v-if="menu4"
                    v-model="stationRequest.end_time"
                    class="max-50"
                    @click:minute="$refs.menu.save(stationRequest.end_time)"
                  ></v-time-picker>
                </v-menu>
              </v-flex>
            </v-layout>
            <v-layout mt-3 mb-5>
              <v-flex class="d-flex justify-between">
                <v-btn
                  outlined
                  justify-end
                  color="primary"
                  @click="onLoadData"
                  :disabled="$v.stationRequest.$invalid"
                  >LOAD REPORT</v-btn
                >
              </v-flex>
            </v-layout>
            <v-layout mt-3 mb-5 v-if="noData">
              <v-flex class="d-flex justify-between">
                <h4>
                  Data not found for the period selected. Try again with other
                  dates
                </h4>
              </v-flex>
            </v-layout>
            <v-layout column mt-3>
              <v-layout>
                <v-tabs v-model="selectedTab" @change="onChangeElements()">
                  <v-tab v-for="(item, i) in axesTabs" :key="i">
                    [[item]]
                  </v-tab>
                  <v-tab-item v-for="(item, j) in chartData" :key="j" grow>
                    <v-layout mt-5 column>
                      <highcharts :options="item"></highcharts>
                    </v-layout>
                    <v-layout
                      class="limit-table"
                      mt-3
                      column
                      fluid
                      v-if="records.length"
                    >
                      <table
                        class="mdl-data-table mdl-data-table--selectable mt-3 records-data"
                      >
                        <thead>
                          <tr>
                            <th class="mdl-data-table__cell--non-numeric">
                              Date
                            </th>
                            <th
                              v-for="(element) in filteredCols"
                              :key="element"
                            >
                              [[ element ]]
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(data) in records" :key="data.date">
                            <td class="mdl-data-table__cell--non-numeric">
                              [[ new Date(data.date).toLocaleString() ]]
                            </td>
                            <td
                              v-for="(td, index) in filteredCols"
                              :key="index"
                            >
                              [[ (data.values[td] || 0 ).toFixed(2) ]]
                            </td>
                          </tr>
                          <tr
                            v-for="(value) in elementsStats"
                            :key="value.label"
                          >
                            <td style="text-align: left">[[ value.label ]]</td>
                            <td
                              v-for="(td, index) in filteredCols"
                              :key="index"
                            >
                              [[ value.values[td] ]]
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </v-layout>
                  </v-tab-item>
                </v-tabs>
              </v-layout>
            </v-layout>
          </v-layout>
        </v-layout>
      </v-content>
    </v-app>
  </div>
</div>

{% endblock %} {% block localjavascript %}
<script
  src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"
  defer
></script>
<script
  src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"
  defer
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"
  defer
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"
  defer
></script>
<script
  src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"
  defer
></script>
<script
  src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"
  defer
></script>
<script
  src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"
  defer
></script>

<script defer>
  Vue.use(window.vuelidate.default);
  Vue.use(window.pdfMake);
  Vue.use(window.L);
  Vue.use(HighchartsVue.default);

  const { required, minLength } = window.validators;

  new Vue({
    el: "#app",
    vuetify: new Vuetify(),
    delimiters: ["[[", "]]"],
    validations: {
      stationRequest: {
        selectedStationId: { required },
        selectedElements: { required },
        timescale: { required },
        begin_date: { required },
        end_date: { required },
      },
    },
    filters: {
      truncate(text, value) {
        return (text || "").toString().substring(0, value);
      },
    },
    data: {
      options: {
        fileopt: "overwrite",
      },
      selectedTab: 0,
      exportItems: [
        { title: "PDF", icon: "fas fa-file-pdf", value: "pdf" },
        { title: "CSV", icon: "fas fa-file-csv", value: "csv" },
        // { title: 'EXCEL', icon: 'fas fa-file-excel', value: 'excel' },
        // { title: 'PRINT', icon: 'fas fa-print', value: 'print' }
      ],
      records: [],
      stationSummaries: {},
      stations: [],
      variableItems: [],
      timescalesSet: {},
      timescales: [
        {
          label: "Raw Data",
          value: "rawdata",
        },
        {
          label: "Hourly",
          value: "hourlysummaries",
        },
        {
          label: "Daily",
          value: "dailysummaries",
        },
        {
          label: "Monthly",
          value: "monthlysummaries",
        },
        {
          label: "Yearly",
          value: "yearlysummaries",
        },
      ],
      menu1: false,
      menu2: false,
      menu3: false,
      menu4: false,
      center: L.latLng(17.202212, -88.429595),
      mapOptions: {
        zoomControl: false,
      },
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      position: { lat: 17.202212, lng: -88.429595 },
      title: "",
      subtitle: "",
      stationRequest: {
        selectedStationId: null,
        selectedElementId: null,
        color: "#000000",
        timescale: "dailysummaries",
        begin_date: new Date().toISOString().substr(0, 10),
        end_date: new Date().toISOString().substr(0, 10),
        begin_time: "00:05",
        end_time: "00:05",
      },
      simpleTextFieldsRules: [
        (v) => (v !== undefined && v !== "") || "This field is required",
      ],
      selectedStation: {},
      response: {
        name: "",
        generatedAt: "2019-03-25 17:05:37",
        begin_date: null,
        end_date: null,
        latitude: null,
        longitude: null,
        elevation: null,
        startOperation: null,
        recordsFound: 0,
      },
      dataByVariable: [],
      cachedRecords: [],
      axesTabs: [],
      layouts: [],
      dataByVariableWithDate: [],
      axesPlot: [],
      chartData: [],
      filteredCols: [],
      noData: false,
    },
    methods: {
      getStations() {
        this.getAll("stations").then((data) => (this.stations = data));
      },
      getStationVariables(station_id) {
        this.getAll(`stations_variables/?station_id=${station_id}`).then(
          (data) => {
            this.variableItems = data;
            this.stationRequest.selectedElements = [];
          }
        );
      },
      onChangeStation(station_id) {
        this.selectedStation = this.stations.find(
          (station) => station.id === this.stationRequest.selectedStationId
        );
        this.getStationVariables(station_id);
      },
      filterBySelectedTab() {
        const axes = new Map();
        this.stationRequest.selectedElements.forEach((e) => {
          const type = this.variableItems.find((el) => el.symbol === e)
            .measurement_variable;
          const data = axes.get(type) || [];
          data.push(e);
          axes.set(type, data);
        });
        const axesArray = Array.from(axes).map((axis) => axis[0]);
        const data = axes.get(axesArray[this.selectedTab]);

        return data;
      },
      getAll(path, url, oldData = []) {
        return fetch(`/${path}`)
          .then((res) => {
            if (!res.body) {
              return { next: null, results: [] };
            }

            return res.json();
          })
          .then(async (data) => {
            const values = [...oldData, ...data.results];
            if (!!data.next) {
              return await getAll(
                context,
                path,
                `/${path}/${data.next.substr(data.next.indexOf(`/${path}`))}`,
                values
              );
            }
            return values;
          });
      },
      getSummaries(requestParameters) {
        const params =
          requestParameters.timescale === "hourlysummaries" ||
          requestParameters.timescale === "rawdata"
            ? `&search_date_start=${requestParameters.begin_date}&search_date_end=${requestParameters.end_date}`
            : requestParameters.hasOwnProperty("date")
            ? `&search_date_start=${requestParameters.date}&search_date_end=${requestParameters.date}`
            : `&search_date_start=${requestParameters.begin_date}&search_date_end=${requestParameters.end_date}`;

        this.getAll(
          `${requestParameters.timescale}/?search_type=station&search_value=${requestParameters.selectedStationId}${params}`
        ).then((data) => {
          if (data.length === 0) {
            this.noData = true;
            return;
          }

          this.noData = false;
          this.stationSummaries = data;
          this.dataByVariable = [];
          this.dataByVariableWithDate = [];

          const recordsMap = new Map();
          this.stationSummaries.forEach((value, index) => {
            const data = recordsMap.get(value.date || value.datetime) || {};
            data[value.variable.symbol] = value.value;
            recordsMap.set(value.date || value.datetime, data);

            this.dataByVariable[value.variable.symbol] =
              this.dataByVariable[value.variable.symbol] || [];
            this.dataByVariable[value.variable.symbol].push(value.value);

            this.dataByVariableWithDate[value.variable.symbol] =
              this.dataByVariableWithDate[value.variable.symbol] || [];
            this.dataByVariableWithDate[value.variable.symbol].push([
              new Date(value.date || value.datetime).getTime(),
              value.value,
            ]);
          });

          this.records = Array.from(recordsMap).map((row) => ({
            date: row[0],
            values: row[1],
          }));

          this.elementsStats = this.aggregateData(
            this.dataByVariable,
            this.stationRequest.selectedElements
          );

          this.onChangeElements();
        });
      },
      onChangeElements() {
        this.makeChart();
        this.filteredCols = this.filterBySelectedTab();
        window.requestAnimationFrame((evt) => {
          setTimeout(() => {
            $(".records-data").DataTable({
              bPaginate: false,
              dom: "Bfrtip",
              buttons: ["copy", "csv", "excel", "pdf", "print"],
            });
          }, 300);
        });
      },
      makeChart() {
        const axes = new Map();
        this.stationRequest.selectedElements.forEach((e) => {
          axes.set(
            e,
            this.variableItems.find((el) => el.symbol === e)
              .measurement_variable
          );
        });
        // generate a list for the axes given
        const axesArray = Array.from(axes);
        // get the position 1 that corresponds to the value
        this.axesPlot = Array.from(new Set(axesArray.map((e) => e[1])));
        this.axesTabs = this.axesPlot;
        this.layouts = this.axesPlot.map((ax) => {});
        this.updateData(axes);

        this.chartData = this.axesPlot.map((axis, index) =>
          Object.assign(
            {},
            {
              chart: {
                zoomType: "xy",
              },
              title: {
                text: this.title,
              },
              subtitle: {
                text: this.subtitle,
              },
              xAxis: {
                type: "datetime",
              },
              tooltip: {
                shared: true,
              },
              legend: {
                layout: "horizontal",
                align: "center",
                verticalAlign: "bottom",
              },
            },
            this.layouts[index]
          )
        );
      },
      updateData(axes) {
        this.stationRequest.selectedElements.forEach((element) => {
          const variable = this.variableItems.find(
            (el) => el.symbol === element
          );
          const elementSymbol = axes.get(variable.symbol);
          const yInfo = {
            title: {
              text: elementSymbol,
            },
            labels: {
              format: `{value} ${variable.unit_symbol}`,
            },
          };

          const ySeries = {
            color: variable.color || "#1D1414",
            name: `${variable.symbol} (${this.selectedStation.name})`,
            type: variable.default_representation.toLowerCase(),
            data: this.dataByVariableWithDate[variable.symbol].map(
              (value) => value
            ),
          };

          if (!this.layouts[this.axesPlot.indexOf(elementSymbol)]) {
            this.layouts[this.axesPlot.indexOf(elementSymbol)] = {
              yAxis: [yInfo],
              series: [],
            };
          }

          this.layouts[this.axesPlot.indexOf(elementSymbol)].series.push(
            ySeries
          );
        });

        this.axes = axes;
      },
      onLoadData() {
        const station = this.stations.find(
          (st) => st.id == this.stationRequest.selectedStationId
        );
        let start_date = this.stationRequest.begin_date;
        let end_date = this.stationRequest.end_date;

        if (
          this.stationRequest.timescale === "hourlysummaries" ||
          this.stationRequest.timescale === "rawdata"
        ) {
          if (
            this.stationRequest.begin_time !== "" &&
            this.stationRequest.begin_time.length > 4
          ) {
            start_date += `T${this.stationRequest.begin_time}:00Z`;
          }
          if (
            this.stationRequest.end_time !== "" &&
            this.stationRequest.end_time.length > 4
          ) {
            end_date += `T${this.stationRequest.end_time}:00Z`;
          }
        }

        this.getSummaries(
          Object.assign({}, this.stationRequest, {
            begin_date: start_date,
            end_date: end_date,
          })
        );
      },
      aggregateData(dataByVariable, selectedElements) {
        const calc = (cb, fixed) =>
          Object.keys(dataByVariable)
            .filter((e) => selectedElements.indexOf(e) > -1)
            .map((e) => {
              return {
                key: e,
                value: cb(dataByVariable[e]).toFixed(fixed),
              };
            })
            .reduce((p, c) => Object.assign({}, p, { [c.key]: c.value }), {});

        const elementStats = [
          {
            label: "MIN",
            values: calc(
              (arr) => arr.reduce((p, c) => (p < c ? p : c), Infinity),
              2
            ),
          },
          {
            label: "MAX",
            values: calc(
              (arr) => arr.reduce((p, c) => (p > c ? p : c), -999),
              2
            ),
          },
          {
            label: "AVG",
            values: calc(
              (arr) => arr.reduce((p, c) => p + c, 0) / arr.length,
              2
            ),
          },
          {
            label: "SUM",
            values: calc((arr) => arr.reduce((p, c) => p + c, 0), 2),
          },
          {
            label: "COUNT",
            values: calc((arr) => arr.length, 0),
          },
          {
            label: "STANDARD DEVIATION",
            values: calc((arr) => {
              const sum = arr.reduce((p, c) => p + c, 0);
              const avg = sum / arr.length;
              return Math.sqrt(
                arr
                  .map((i) => Math.pow(i - avg, 2))
                  .reduce((p, c) => p + c, 0) / arr.length
              );
            }, 2),
          },
        ];

        return elementStats;
      },
    },

    mounted() {
      this.timescales.forEach((time) => {
        this.timescalesSet[time.value] = time.label;
      });

      this.getStations();
      window.addEventListener("load", () => {
        window.$.fn.DataTable.ext.errMode = "none";
      });
    },
  });
</script>

<style>
  * {
    box-sizing: border-box !important;
  }
  .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex: 1 1 auto !important;
    margin-right: -12px !important;
    margin-left: -12px !important;
  }

  button.dt-button {
    color: #1976d2 !important;
    caret-color: #1976d2 !important;
    background-color: white;
    border-color: #1976d2;
    background-image: none;
  }

  button.dt-button:hover {
    color: white !important;
    caret-color: white !important;
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
    background-image: none !important;
  }

  div.dt-buttons,
  .dataTables_filter {
    width: 100%;
    position: relative;
    float: none;
    margin-bottom: 1rem;
  }
</style>
{% endblock %}