msfd_portal_hcmr/public/js/more-info.js

function moreInfo() {
  return {
    lineChart: {},
    entityGroup: Alpine.store('entity').entityGroup,
    entityId: selectedEntityId || Alpine.store('entity').id,
    params: (this.entityGroup === 'POSEIDON' ? Alpine.store('entity').params.split(' ') : []),
    dopen: false,
    copen: false,
    loading: false,
    isGrid: Alpine.store('entity').hasOwnProperty('cellcode'),
    d: {},
    c: {},
    tagName(type, id) {
      if (id == null)
        return;
      if (type === 'd') {
        return this.d.find(i => i.id == id).code;
      } else if (type === 'c') {
        return this.c.find(i => i.id == id).code;
      }
    },
    did: null,
    cid: [],
    date: {},
    search() {
      this.drawDataChart();
      // check if entity has an external source
      if (this.$store.entity.hasOwnProperty('ctStationCode')) {
        requestExternalData(this.did, this.cid, this.date.from, this.date.to, this.entityGroup, this.entityId);
      } else {
        requestEntityData(this.did, this.cid, this.date.from, this.date.to, this.entityGroup, this.entityId);
      }
    },
    selectEntry(element, entry) {
      console.debug(element.text.substr(0, element.text.indexOf(' ')));
      if (element.id.split('-')[1] === 'desc') {
        // highlight
        element.parentElement.querySelectorAll('a').forEach(el => el.classList.remove('is-active'));
        element.classList.add('is-active');
        // update variables;
        this.cid = [];
        this.did = entry;
        this.dopen = false;
      } else if (element.id.split('-')[1] === 'crit') {
        // toggle
        element.classList.toggle('is-active');
        // update variables;
        this.cid.indexOf(entry) === -1 ? this.cid.push(entry) : this.cid = this.cid.filter(function(id) { return id !== entry});
        this.copen = false;
        // add tag
      }
    },
    getDropdownData(dropdown) {
      Alpine.store('loading', true);

      let url = BASE_URL;
      let gridCode;
      if (this.isGrid) {
        gridCode = Alpine.store('entity').cellcode.substr(0,4);
      }

      switch(dropdown) {
        case 'd':
            url += '/interface/dropdowns/descriptors?entity_id=' + this.entityId + '&cellcode=' + gridCode;
        break;
        case 'c':
            url += '/interface/dropdowns/criterias?desc_id=' + this.did + '&cellcode=' + gridCode;
        break;
      }

      fetch(url)
        .then(res => res.json())
        .then(data => {
          Alpine.store('loading', false);
          eval('this.' + dropdown + '=data');
        });
    },
    loadCal() {
      const calendars = bulmaCalendar.attach('[type=date]', {dateFormat: 'dd/MM/yyyy', isRange: true});
      // Loop on each calendar initialized
      calendars.forEach(calendar => {
        calendar.on('save', data => {
          this.date = {
              from: calendar.startDate.toLocaleDateString(),
              to: calendar.endDate.toLocaleDateString()
          }
        });
      });
    },
    populateFeatureGrid(grid) {
      const features = Alpine.store('entity');
      console.debug(features);
      const featureCols = Object.getOwnPropertyNames(Alpine.store('entity')).filter(name => aliasMap.has(name));
      const featureVals = featureCols.map(col => {return {feature: aliasMap.get(col), value: features[col]}});
      console.debug(featureVals);
      new gridjs.Grid({
        data: featureVals
      }).render(grid);
    },
    drawDataChart() {
      delete this.lineChart;
      delete ctx;
      if (this.entityGroup !== 'POSEIDON')
         return;

      console.debug('drawing poseidon chart...');
      this.lineChart = {};
      var ctx = document.getElementById('data-chart').getContext('2d');
      // Alpine.store('loading', true);
      console.debug('fetching...');
      console.debug(Alpine.store('entity').params);
      const url = `/data/external/POSEIDON/${Alpine.store('entity').tspr}_${Alpine.store('entity').type}_${Alpine.store('entity').pid}`;
      fetch(url)
        .then(res => res.json())
        .then(data => {
          Alpine.store('loading', false);
          console.debug("data poseidon: ", data);
          let chartData = {};
            const labels = data.map(item => new Date(item.dt).toLocaleDateString('el-GR'));
            const values = data.map(item => item.val);
            console.debug(labels);
            console.debug(values);
            chartData = {
               labels: labels,
            datasets: [{
            label: 'param',
            data: values
          }]
        };
          console.debug(chartData);
          this.lineChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
              scales: {
                  xAxes: [{
                      type: 'time',
                      time: {
                          displayFormats: {
                              day: 'DD MMM YYYY'
                          },
                          unit: 'day',
                          stepSize: 20
                      }
                  }]
              }
            }
          });
      });
    }
  };
}



// function poseidonChart(data) {
//   var typeGroups = {};
//   for (var i = 0; i < data.length; i++) {
//     var item = data[i];
//     if (!typeGroups[item.type]) {
//       typeGroups[item.type] = [];
//     }
//     typeGroups[item.type].push({
//       x: item.date,
//       y: item.value
//     });
//   }
//
//   console.debug(typeGroups);
//   this.params = typeGroups.type;
//   var datasets = [];
//   var index = 0;
//   for (var type in typeGroups) {
//     datasets.push({
//       label: type,
//       data: typeGroups[type],
//       borderColor: getRandomColor(),
//       fill: false,
//       hidden: false
//     });
//     addCheckbox(type, index++);
//   }
//
//   var ctx = document.getElementById('myChart').getContext('2d');
//   var myChart = new Chart(ctx, {
//     type: 'line',
//     data: {
//       datasets: datasets
//     },
//     options: {
//       scales: {
//         xAxes: [{
//           type: 'time',
//           time: {
//             unit: 'week'
//           }
//         }]
//       }
//     }
//   });
// }
//
//
//
//

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}