sync graph-checkbox

parent ec3a298a
......@@ -78,7 +78,7 @@ function addImageLayer(labelDate) {
let currentZoom = map.getView().getZoom();
// 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().setMinZoom(data.zoom.min);
map.getView().setMaxZoom(data.zoom.max);
......@@ -101,7 +101,6 @@ function setOpacity(value) {
currentOpacity = value;
imageLayers.forEach(layer => {
if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
console.log(layer.get('name'), layer);
layer.setOpacity(value)
}
})
......@@ -119,6 +118,28 @@ function getSelectedCheckbox() {
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);
});
......@@ -3,6 +3,7 @@ var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
//var activePoints = [];
var activePoints = config.data.labels;
var imageNumber = 0;
......@@ -18,15 +19,9 @@ config.data.datasets.forEach(function (layer) {
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
stop();
console.log("on click")
console.log("evento: ")
console.log(evt)
// activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt);
console.log("activePoint: ")
console.log(activePoint)
console.log(activePoint.length)
if(activePoint.length>0){
var firstPoint = activePoint[0];
......
......@@ -175,13 +175,13 @@
TCI
</label>
</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">
<label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i>
&nbspSCL No Data
</label>
</div> -->
</div>
<div class="form-check submenu" style="display:none" id="sclcheck-saturated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1">
<label class="form-check-label">
......
......@@ -325,20 +325,25 @@
<script>
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex;
//console.log(e)
console.log(legendItem.datasetIndex)
console.log(legendItem.text)
var ch = this.chart;
var meta = ch.getDatasetMeta(index);
console.log(meta.hidden)
var layer = legendItem.text.toLowerCase();
//layer = layer.replace(" ", "_");
layer = layer.replace(/\s/g, '_'); //reeemplaza los espacios con guion bajo
console.log(layer)
var layer = legendItem.text.toLowerCase().replace(/\s/g, '-');
let checkbox_id = '#sclcheck-'+layer;
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)
// var label = document.getElementById("titleMap").textContent; //obtiene la fecha que se está viendo
// label = label.replace(/\//g,''); // reemplaza los diagonales por nada
......@@ -370,7 +375,8 @@
datasets.forEach(function(data) {
let checkbox_id = '#sclcheck-'+data.label.toLowerCase().replace(' ','-');
$(checkbox_id).css("display",'');
$(checkbox_id).show();
$(checkbox_id+" :input").prop("checked", false);
});
}
......
......@@ -423,7 +423,7 @@ def ProcessChartData(path):
item['label'] = labelNames[int(l)]
# item['fill'] = "false"
if l == "0":
# if l == "0":
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['backgroundColor'] = colors[int(l)]
......
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