Browse Source

add descriptor labels in custom tooltip in stats

master
o.moresis 2 years ago
parent
commit
d3ef23cc1c
  1. 70
      public/js/stats.js
  2. 8
      src/Views/main-statistics.php

70
public/js/stats.js

@ -32,42 +32,54 @@ async function populateTimeseries(category) { @@ -32,42 +32,54 @@ async function populateTimeseries(category) {
response.json().then(response => {
const data = response.map(row => ({
x: row.sampling_date,
y: parseInt(row.counts)
y: parseInt(row.counts),
details: row.details
}));
console.debug(data);
console.debug(response);
const chartOptions = {
type: 'bar',
data: {
datasets: [{
label: label,
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
barPercentage: 0.8, // Adjust the bar percentage as desired
categoryPercentage: 0.9
}]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
precision: 0
}
},
x: {
displayFormats: {
month: 'MMM'
},
data: {
datasets: [{
label: label,
data: data,
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
barPercentage: 0.8, // Adjust the bar percentage as desired
categoryPercentage: 0.9
}]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
length: 4
precision: 0
}
},
x: {
displayFormats: {
month: 'MMM'
},
ticks: {
length: 4
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItems) {
console.debug('adsfasdfasdf',tooltipItems);
return tooltipItems.raw.details;
}
}
}
}
}
}
} };
}
};
const ctx = document.getElementById(category + '-timeseries').getContext('2d');
new Chart(ctx, chartOptions);

8
src/Views/main-statistics.php

@ -3,16 +3,16 @@ @@ -3,16 +3,16 @@
<p class="panel-heading">
General
</p>
<div id="stats-chart-1">
</div>
<div id="stats-chart-1">
</div>
<div id="grid" x-init="populateStatisticsGrid"></div>
</article>
<article class="panel is-info">
<p class="panel-heading">
Timeline
</p>
<div id="stats-chart-1">
</div>
<div id="stats-chart-1">
</div>
<canvas id="descriptors-timeseries" x-init="await populateTimeseries('descriptors')"></canvas>
<canvas id="stations-timeseries" x-init="await populateTimeseries('stations')"></canvas>
</article>

Loading…
Cancel
Save