diff --git a/public/js/extras.js b/public/js/extras.js index 74b61f4..c8248eb 100644 --- a/public/js/extras.js +++ b/public/js/extras.js @@ -25,7 +25,7 @@ async function fetchGeoJson(layerCode) { try { const response = await fetch(url); const data = await response.json(); - console.debug(data); + console.debug('geojson data: ', data); return data; } catch (error) { console.error(error); @@ -121,6 +121,7 @@ function hashCode(str) { // java String#hashCode // zoom to feature (for data sources) function zoomToFeature(e) { let featureId = e.target.feature.properties.id; + console.debug('feature zoomed: ', e.target); try { selectedEntityGroup = e.target.feature.id.split('.')[0]; @@ -295,7 +296,6 @@ function getHabitat(layerCode) { function moreInfoPopup(props) { - Alpine.store('entity', props); let title; if (props.hasOwnProperty('code')) { title = `${props.code} — ${props.name}`; @@ -304,11 +304,14 @@ function moreInfoPopup(props) { } console.debug(props); // if (typeof props.code == 'undefined' && typeof props.name == 'undefined') - if (typeof props.tspr !== 'undefined') + if (typeof props.tspr !== 'undefined') { title = `POSEIDON — ${props.pid}`; + props.entityGroup = 'POSEIDON'; + } if (typeof props.ctStationCode !== 'undefined') title = `WFD — ${props.ctStationCode}`; + Alpine.store('entity', props); getPagePartial('more-info').then(content => { new L.control.window(mapL, { title: title, diff --git a/public/js/more-info.js b/public/js/more-info.js index 49cdbd0..c2314f9 100644 --- a/public/js/more-info.js +++ b/public/js/more-info.js @@ -1,6 +1,7 @@ function moreInfo() { return { - entityGroup: selectedEntityGroup, + lineChart: {}, + entityGroup: Alpine.store('entity').entityGroup, entityId: selectedEntityId || Alpine.store('entity').id, dopen: false, copen: false, @@ -96,33 +97,131 @@ function moreInfo() { }).render(grid); }, drawDataChart() { - Alpine.store('loading', true); - 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); + // if (this.entityGroup != 'POSEIDON') + // return; + 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); - }); - - const config = { - type: 'line', - data: data, - options: { - responsive: true, - plugins: { - legend: { - position: 'top', - }, - title: { - display: true, - text: 'Chart.js Line Chart' - } + 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; +} diff --git a/src/Data/DataRequest.php b/src/Data/DataRequest.php index 08ceb75..ee011da 100644 --- a/src/Data/DataRequest.php +++ b/src/Data/DataRequest.php @@ -1,7 +1,7 @@ get_requested_file($file_uuid); + diff --git a/src/Services/PoseidonAPI.php b/src/Services/PoseidonAPI.php index a17de61..d97bf9a 100644 --- a/src/Services/PoseidonAPI.php +++ b/src/Services/PoseidonAPI.php @@ -1,6 +1,7 @@ apiName); + $url = Config::getAPIbaseURL($this->apiName); parent::__construct($url); $this->username = "y3wvvYKquktkZZALk49utvYeJPikNQFRWzE7A4Wx"; @@ -43,7 +44,6 @@ class PoseidonAPI extends API { "type" => "MO" ); - $test = http_build_query($data); $this->headers["Authorization"] = "Bearer {$this->accessToken}"; $this->headers["Accept"] = "application/json"; @@ -52,11 +52,15 @@ class PoseidonAPI extends API { public function getPlatformData($platform) { $endpoint = "api/data/{$platform}/"; + $params = "ATMS"; // debugging + $data = array( + "param__pname__in" => implode(',', $params), + ); $this->headers["Authorization"] = "Bearer {$this->accessToken}"; $this->headers["Accept"] = "application/json"; - return json_decode($this->get($endpoint)); + return json_decode($this->get($endpoint, $data)); } @@ -65,5 +69,17 @@ class PoseidonAPI extends API { $this->isPost = false; } + + public function getParameterInfo($params) { + $data = array( + "pname__in" => implode(',', $params) + ); + + $endpoint = "parameters/"; + + return json_decode($this->get($endpoint, $data)); + } + + } diff --git a/src/Services/RepoAPI.php b/src/Services/RepoAPI.php index 0924b1e..9f3865d 100644 --- a/src/Services/RepoAPI.php +++ b/src/Services/RepoAPI.php @@ -13,7 +13,7 @@ class RepoAPI extends API { public function __construct() { - $url = Constants::getAPIbaseURL($this->apiName); + $url = Config::getAPIbaseURL($this->apiName); parent::__construct($url); } diff --git a/src/Views/more-info.php b/src/Views/more-info.php index e55608b..90439b3 100644 --- a/src/Views/more-info.php +++ b/src/Views/more-info.php @@ -1,63 +1,81 @@ - +
+
+
+ +

You may request the whole entity (cruise/station etc.) without selecting search criteria or be more specific by doing so.

-
- -
-
-
- +
+
+
+
+ +
+
-
+
+