--zoom a a diagrama segun filtros de fechas

Transportes/RepContratosCalendario.aspx

@@ -541,6 +541,7 @@
             "December": "Diciembre",
 
         };
+        var dateAxis;
 
         function cargaDiagramaGrant(data, categorias, TipoVista) {
 
@@ -564,7 +565,7 @@
                 // Create chart
                 // https://www.amcharts.com/docs/v5/charts/xy-chart/
                 var chart = root.container.children.push(am5xy.XYChart.new(root, {
-                    panX: false,
+                    panX: true,
                     panY: false,
                     wheelX: "panX",
                     wheelY: "zoomX",
@@ -599,12 +600,14 @@
 
                 yAxis.data.setAll(categorias);
 
-                var dateAxis = am5xy.DateAxis.new(root, {
+                dateAxis = am5xy.DateAxis.new(root, {
                     baseInterval: { timeUnit: "minute", count: 1 },
                     renderer: am5xy.AxisRendererX.new(root, {
                         minorGridEnabled: true,
                         minGridDistance: 90
                     })
+                    //min: new Date(2024, 6, 15).getTime(),
+                    //max: new Date(2024, 6, 31).getTime()
                 });
 
                 var xAxis = chart.xAxes.push(
@@ -627,7 +630,7 @@
                 series.columns.template.setAll({
                     templateField: "columnSettings",
                     strokeOpacity: 0,
-                    tooltipText: "UNIDAD: {unidad} -- CONTRATO: {contrato} -- CÓDIGO: {category} -- DURACIÓN: {openValueX} - {valueX}"
+                    tooltipText: "UNIDAD: {category}-{unidad} \nCONTRATO: {contrato} \nDURACIÓN: {openValueX} - {valueX}"
                 });
 
                 series.data.processor = am5.DataProcessor.new(root, {
@@ -666,7 +669,6 @@
                     let parametros = '&cveContrato=' + cveContrato +'&U=' + '<%= UsuarioActual.CveUsuario %>' + '&E='+ '<%= UsuarioActual.CveEmpresa %>'+ '&tipoVista=' + '<%= RBTipoVista.Text %>' +  '&CveUsuarioPara:' + $('#DdlTecnico').val(); +  '&CveSubProyecto:' + $('#DdlSubProyecto').val();
                     
                     fetch(url + parametros).then(response => response.json()).then(json => {
-                        console.log(json);
                         updateEvent(json[0],null,false);
                     }).catch(err => console.log('Solicitud fallida', err)); 
                 });
@@ -687,29 +689,25 @@
                     // Set it on chart's container
                     chart.root.dom.style.height = chartHeight + "px";
 
-                    //ev.target.get("xAxis").zoomToValues(100, 200);
+                   // ev.target.get("xAxis").zoomToValues(new Date(2024,6,15).getTime(), new Date(2024,6,20).getTime());
                 });
 
-                //series.events.once("datavalidated", function(ev) {
-                   
-                //});
-
-                //chart.events.on("ready", function () {
-                //    dateAxis.zoomToDates(
-                //      new Date(2024, 7, 4),
-                //      new Date(2024, 7, 15)
-                //    );
-                //})
-                //root.language.setTranslationAny("May", "Mayo");
-
                 // Make stuff animate on load
                 // https://www.amcharts.com/docs/v5/concepts/animations/
                 series.appear();
                 chart.appear(1000, 100);
 
+
             }); // end am5.ready()
         }
 
+        function zoomAxis(anioI,mesI,diaI,anioF,mesF,diaF) {
+            setTimeout(() => {
+                dateAxis.zoomToDates(new Date(anioI, mesI, diaI), new Date(anioF, mesF, diaF));
+            }, 1500);
+          
+        }
+
         var PrimeraCargaCalendario = true;
         var currentUpdateEvent;
         var addStartDate;