sync graph-checkbox

parent ec3a298a
...@@ -78,7 +78,7 @@ function addImageLayer(labelDate) { ...@@ -78,7 +78,7 @@ function addImageLayer(labelDate) {
let currentZoom = map.getView().getZoom(); let currentZoom = map.getView().getZoom();
// fit and zoom // fit and zoom
map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857')) // map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857'))
map.getView().setZoom(currentZoom); map.getView().setZoom(currentZoom);
map.getView().setMinZoom(data.zoom.min); map.getView().setMinZoom(data.zoom.min);
map.getView().setMaxZoom(data.zoom.max); map.getView().setMaxZoom(data.zoom.max);
...@@ -101,7 +101,6 @@ function setOpacity(value) { ...@@ -101,7 +101,6 @@ function setOpacity(value) {
currentOpacity = value; currentOpacity = value;
imageLayers.forEach(layer => { imageLayers.forEach(layer => {
if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') { if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
console.log(layer.get('name'), layer);
layer.setOpacity(value) layer.setOpacity(value)
} }
}) })
...@@ -119,6 +118,28 @@ function getSelectedCheckbox() { ...@@ -119,6 +118,28 @@ function getSelectedCheckbox() {
return values; return values;
} }
$("input[name=layer_type]").on( "click", () => { function getDataIndexByCheckboxId(dataset, id) {
let foundIndex;
dataset.forEach(function (data, index) {
let label = 'sclcheck-' + data.label.toLowerCase().replace(' ', '-');
if (label === id) {
foundIndex = index;
}
})
return foundIndex;
}
$('input[name=layer_type]').on('click', function(){
const input = $(this);
const dataset = myChart.config.data.datasets;
const index = getDataIndexByCheckboxId(dataset, input.parent().attr('id'));
if (index > -1) {
myChart.getDatasetMeta(index).hidden=!input.prop("checked");
myChart.update()
}
addImageLayer(currentDate); addImageLayer(currentDate);
}); });
...@@ -3,6 +3,7 @@ var ctx = document.getElementById('myChart').getContext('2d'); ...@@ -3,6 +3,7 @@ var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256; //ctx.canvas.width = 256;
//ctx.canvas.height = 512; //ctx.canvas.height = 512;
var myChart = new Chart(ctx, config); var myChart = new Chart(ctx, config);
//var activePoints = []; //var activePoints = [];
var activePoints = config.data.labels; var activePoints = config.data.labels;
var imageNumber = 0; var imageNumber = 0;
...@@ -18,15 +19,9 @@ config.data.datasets.forEach(function (layer) { ...@@ -18,15 +19,9 @@ config.data.datasets.forEach(function (layer) {
// mostrar imagen al dar click en los puntos // mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) { document.getElementById("myChart").onclick = function (evt) {
stop(); stop();
console.log("on click")
console.log("evento: ")
console.log(evt)
// activePoints = myChart.getElementsAtEvent(evt); // activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt); var activePoint = myChart.getElementAtEvent(evt);
console.log("activePoint: ")
console.log(activePoint)
console.log(activePoint.length)
if(activePoint.length>0){ if(activePoint.length>0){
var firstPoint = activePoint[0]; var firstPoint = activePoint[0];
......
...@@ -175,13 +175,13 @@ ...@@ -175,13 +175,13 @@
TCI TCI
</label> </label>
</div> </div>
<!-- <div class="form-check submenu" style="display:none" id="sclcheck-no-data"> <div class="form-check submenu" style="display:none" id="sclcheck-no-data">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i>
&nbspSCL No Data &nbspSCL No Data
</label> </label>
</div> --> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-saturated"> <div class="form-check submenu" style="display:none" id="sclcheck-saturated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1">
<label class="form-check-label"> <label class="form-check-label">
......
...@@ -325,20 +325,25 @@ ...@@ -325,20 +325,25 @@
<script> <script>
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) { var newLegendClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex; var index = legendItem.datasetIndex;
//console.log(e)
console.log(legendItem.datasetIndex)
console.log(legendItem.text)
var ch = this.chart; var ch = this.chart;
var meta = ch.getDatasetMeta(index); var meta = ch.getDatasetMeta(index);
console.log(meta.hidden) var layer = legendItem.text.toLowerCase().replace(/\s/g, '-');
var layer = legendItem.text.toLowerCase(); let checkbox_id = '#sclcheck-'+layer;
//layer = layer.replace(" ", "_");
layer = layer.replace(/\s/g, '_'); //reeemplaza los espacios con guion bajo
console.log(layer)
var activePoint = ch.getElementAtEvent(e); var activePoint = ch.getElementAtEvent(e);
// isDatasetVisible return the opposite status?
// change checkbox in imagelayer
$(checkbox_id+" :input").prop("checked", !ch.isDatasetVisible(index));
addImageLayer(currentDate);
// myChart.config.data.datasets
// myChart.getDatasetMeta(4).hidden=true
//console.log(document.getElementById("titleMap").textContent) //console.log(document.getElementById("titleMap").textContent)
// var label = document.getElementById("titleMap").textContent; //obtiene la fecha que se está viendo // var label = document.getElementById("titleMap").textContent; //obtiene la fecha que se está viendo
// label = label.replace(/\//g,''); // reemplaza los diagonales por nada // label = label.replace(/\//g,''); // reemplaza los diagonales por nada
...@@ -370,7 +375,8 @@ ...@@ -370,7 +375,8 @@
datasets.forEach(function(data) { datasets.forEach(function(data) {
let checkbox_id = '#sclcheck-'+data.label.toLowerCase().replace(' ','-'); let checkbox_id = '#sclcheck-'+data.label.toLowerCase().replace(' ','-');
$(checkbox_id).css("display",''); $(checkbox_id).show();
$(checkbox_id+" :input").prop("checked", false);
}); });
} }
......
...@@ -423,8 +423,8 @@ def ProcessChartData(path): ...@@ -423,8 +423,8 @@ def ProcessChartData(path):
item['label'] = labelNames[int(l)] item['label'] = labelNames[int(l)]
# item['fill'] = "false" # item['fill'] = "false"
if l == "0": # if l == "0":
item['hidden'] = "true" item['hidden'] = "true"
item['data'] = [v[l] * 60 * 60 / 1000000. if (l in v) else 0 for k, v in sorted(json_data.items())] item['data'] = [v[l] * 60 * 60 / 1000000. if (l in v) else 0 for k, v in sorted(json_data.items())]
item['backgroundColor'] = colors[int(l)] item['backgroundColor'] = colors[int(l)]
data['datasets'].append(item) data['datasets'].append(item)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment