function moreInfo() { return { lineChart: {}, entityGroup: Alpine.store('entity').entityGroup, entityId: selectedEntityId || Alpine.store('entity').id, params: (Alpine.store('entity').entityGroup == 'POSEIDON' ? Alpine.store('entity').params.split(' ') : []), dopen: false, copen: false, popen: 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; } }, p: {}, did: null, cid: [], pid: [], 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 } else if (element.id.split('-')[1] === 'param') { // 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 this.lineChart.data.datasets.push(); } }, 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; case 'p': url += '/interface/dropdowns/parameters?param_codes=' + this.params.join(','); 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() } }); // calendar.on('select', data => { // console.debug('date: ', data); // }); }); }, populateFeatureGrid(grid) { const features = Alpine.store('entity'); 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('params: ',this.params); console.debug('entity group: ',this.entityGroup); 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.replaceAll(/[T-Z]/g, ' ').trim())); const values = data.map(item => {return {x: item.dt, y: item.val}}); console.debug(values); chartData = { datasets: [{ label: 'Pressure', data: values, borderColor: 'rgb(255, 99, 132)', backgroundColor: 'rgba(255, 99, 132, 0.5)', tension: 0.1 }] }; console.debug(chartData); this.lineChart = new Chart(ctx, { type: 'line', data: chartData, options: { scales: { x: { type: 'time' }, y: { title: { display: true, text: 'Pressure (hPa)' } } } } }); }); } }; }