msfd_portal_hcmr/public/js/more-info.js

function moreInfo() {
  return {
    lineChart: {},
    entityGroup: Alpine.store('entity').entityGroup,
    entityId: selectedEntityId || Alpine.store('entity').id,
    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() {
      if (this.entityGroup !== 'POSEIDON')
         return;
      Alpine.store('entity').params.split(' ').forEach((param, idx) => {
        this.addCheckbox(param, idx);
      });
      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 = [];
          for (var i = 0; i < data.length; i++) {
            var item = data[i];
            chartData.push({
              x: new Date(item.dt),
              y: item.val
            });
          }
          this.lineChart = new Chart(
            ctx,
            {
              type: 'line',
              data: {
                labels: chartData.map(row => row.x),
                datasets: [
                  {
                    label: 'PARAM',
                    data: chartData.map(row => row.y)
                  }
                ]
              },
              options: {
                scales: {
                  xAxes: [{
                    type: 'time',
                    time: {
                      unit: 'day'
                    }
                  }]
                }
            }}

          );
      });
    },
    addCheckbox(type, index) {
      var label = document.createElement('label');
      var checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.checked = (index === 0);
      checkbox.addEventListener('change', function() {
        this.lineChart.data.datasets[index].hidden = !checkbox.checked;
        this.lineChart.update();
      });
      label.appendChild(checkbox);
      label.appendChild(document.createTextNode(type));
      document.getElementById('checkbox-container').appendChild(label);
    }

  };
}



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
  });
}

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;
}