Cambios Dashboard

General/Dashboard.aspx

@@ -22,6 +22,7 @@
         }
 
         .table td, .table th {
+
             padding: 2px;
         }
 
@@ -371,7 +372,9 @@
             max-height: 170px;
         }
 
-
+        #containerC_gvResumenSucursales tr.stickyRow th{
+        white-space:nowrap !important;
+        }
 
 
         /* Estilos para el header */
@@ -405,6 +408,20 @@
             background-color: #f8f9fa !important;
             font-weight: bold;
         }
+
+        .header-flex {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 6px;
+}
+
+        element.style {
+    display: flex
+;
+    flex-direction: row;
+    align-items: center;
+}
         /*
 .gvMaxHeight{
     max-height: 160px;
@@ -499,12 +516,12 @@
 
                                                     <asp:TemplateField>
                                                         <HeaderTemplate>
-                                                            <div style="display: flex; flex-direction: column; align-items: center;">
+                                                            <div style="display: flex; flex-direction:row !important; flex-wrap: nowrap !important;  white-space: nowrap;">
                                                                 <span>Venta Anual</span>
-                                                                <div>
+                                                                <input type="checkbox" id="chkVentaAnual" class="header-checkbox" data-field="VentaAnual" style="margin-left: auto;" />
-                                                                    <asp:CheckBox ID="chkVentaAnual" runat="server" CssClass="header-checkbox" data-field="VentaAnual" />
+                                                                <%--<asp:CheckBox ID="chkVentaAnual" runat="server" CssClass="header-checkbox" data-field="VentaAnual" Style="margin-left: auto;" />--%>
-                                                                    <label for="chkVentaAnual">Graficar</label>
+                                                                <label for="chkVentaAnual" style="margin-bottom: 0; margin-left: 4px;">Graficar</label>
-                                                                </div>
+                                                                <span class="adssigrid-order" style="margin-left: 4px;"></span>
                                                             </div>
                                                         </HeaderTemplate>
                                                         <ItemTemplate>
@@ -514,7 +531,7 @@
 
                                                     <asp:TemplateField>
                                                         <HeaderTemplate>
-                                                            <div style="display: flex; flex-direction: column; align-items: center;">
+                                                            <div style="display: flex; align-items: center;">
                                                                 <span>Utilidad Anual</span>
                                                                 <div>
                                                                     <asp:CheckBox ID="chkUtilidadAnual" runat="server" CssClass="header-checkbox" data-field="UtilidadAnual" />
@@ -529,7 +546,7 @@
 
                                                     <asp:TemplateField>
                                                         <HeaderTemplate>
-                                                            <div style="display: flex; flex-direction: column; align-items: center;">
+                                                            <div style="display: flex; align-items: center;">
                                                                 <span>Venta Mensual</span>
                                                                 <div>
                                                                     <asp:CheckBox ID="chkVentaMensual" runat="server" CssClass="header-checkbox" data-field="VentaMensual" />
@@ -544,7 +561,7 @@
 
                                                     <asp:TemplateField>
                                                         <HeaderTemplate>
-                                                            <div style="display: flex; flex-direction: column; align-items: center;">
+                                                            <div style="display: flex; align-items: center;">
                                                                 <span>Utilidad Mensual</span>
                                                                 <div>
                                                                     <asp:CheckBox ID="chkUtilidadMensual" runat="server" CssClass="header-checkbox" data-field="UtilidadMensual" />
@@ -2390,7 +2407,7 @@
                                             <span class="caption-subject font-dark bold">Pagos por Proveedor</span>
                                         </div>
                                     </div>
-                                    <div class="portlet-body table-responsive">
+                                    <div class="portlet-body">
                                         <asp:GridView ID="gvPagosPorProveedor" runat="server"
                                             CssClass="adssigrid-scroll adssigrid-order table table-hover table-light custom-grid"
                                             AutoGenerateColumns="false"
@@ -2483,22 +2500,26 @@
             </asp:Panel>
         </ContentTemplate>
     </asp:UpdatePanel>
-    <div id="DivModalGrafica" class="modal fade" role="dialog">
+    <div class="modal fade" id="DivModalGrafica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg">
+    <div class="modal-dialog">
-            <div class="modal-content">
+        <div class="modal-content">
-                <div class="modal-header">
+            <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal">&times;</button>
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
-                    <h4 class="modal-title" id="modalTitulo">Comparativo de Sucursales</h4>
+                <h4 class="modal-title" id="modalTitulo">Comparativo de Sucursales</h4>
-                </div>
+            </div>
-                <div class="modal-body">
+            <div class="modal-body">
-                    <div id="chartContainer" style="width: 100%; height: 500px;"></div>
+                <asp:DropDownList ID="ddlTipoGrafica" runat="server">
-                </div>
+                    <asp:ListItem Value="line">Líneas</asp:ListItem>
-                <div class="modal-footer">
+                    <asp:ListItem Value="pie">Pastel</asp:ListItem>
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
+                </asp:DropDownList>
-                </div>
+                <div id="chartContainer" style="width: 100%; height: 400px;"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
             </div>
         </div>
     </div>
+</div>
 </asp:Content>
 <asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
     <script src="/Metronic/assets/global/plugins/jquery.pulsate.min.js"></script>
@@ -2511,13 +2532,57 @@
             });
         }
 
+        $(document).ready(function () {
+            console.log('Document ready - Configurando evento del dropdown');
+
+            // Función para asignar el evento al dropdown
+            function asignarEventoDropdown() {
+                // Buscar el dropdown usando un selector que funcione con WebForms
+                var $ddl = $('[id$="ddlTipoGrafica"]');
+
+                if ($ddl.length === 0) {
+                    console.error('ERROR: No se encontró el dropdown con id que termine en ddlTipoGrafica');
+                    return;
+                }
+
+                console.log('Dropdown encontrado, configurando evento...');
+                console.log('ID real del dropdown:', $ddl.attr('id'));
+
+                // Remover eventos anteriores y agregar el nuevo
+                $ddl.off('change').on('change', function () {
+                    console.log('=== CAMBIO EN DROPDOWN ===');
+                    console.log('Nuevo valor seleccionado:', $(this).val());
+
+                    // Verificar qué función usar según el contexto
+                    if ($('table[id$="gvResumenSucursales"]').length > 0) {
+                        console.log('Usando generarGraficaSucursales()');
+                        generarGraficaSucursales();
+                    } else {
+                        console.log('Usando generarGrafica() con gridId:', window.lastUsedGridId);
+                        if (window.lastUsedGridId) {
+                            generarGrafica(window.lastUsedGridId);
+                        }
+                    }
+                });
+            }
+
+            // Asignar evento al cargar la página
+            asignarEventoDropdown();
+
+            // Re-asignar evento después de postbacks de AJAX (si usas UpdatePanel)
+            if (typeof Sys !== "undefined" && Sys.WebForms) {
+                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(asignarEventoDropdown);
+            }
+        });
 
         function generarGraficaSucursales() {
+
             // 1) Obtener la tabla completa
             var $grid = $('table[id$="gvResumenSucursales"]');
 
             // 2) Buscar TODOS los checkbox marcados
             var $checks = $grid.find('input.header-checkbox:checked');
+
             if ($checks.length === 0) {
                 alert('Por favor, seleccione al menos una columna para graficar.');
                 return false;
@@ -2535,20 +2600,16 @@
             var $headerRows = $grid.find('tr').filter(function () {
                 return $(this).find('th').length > 1;
             });
-            var $subThs = $headerRows.eq(1).find('th');  // esos 4 <th>
+            var $subThs = $headerRows.eq(1).find('th');
 
             // 6) Construir las series
             var series = $checks.map(function () {
                 var $chk = $(this);
                 var $th = $chk.closest('th');
-                // idxSub = posición dentro de los 4 subheaders (0..3)
                 var idxSub = $subThs.index($th);
-                // +1 porque la columna 0 es "Sucursal"
                 var colIndex = idxSub + 1;
-                // Leer data-field (VentaAnual, UtilidadAnual, etc.) y formatear nombre
                 var field = $chk.data('field');
                 var name = field.replace(/([a-z])([A-Z])/g, '$1 $2');
-                // Mapear los valores de cada fila para esta columna
                 var data = $dataRows.map(function () {
                     var txt = $(this).find('td').eq(colIndex).text().replace(/,/g, '');
                     return parseFloat(txt) || 0;
@@ -2556,38 +2617,90 @@
                 return { name: name, data: data };
             }).get();
 
-            // 7) Dibujar Highcharts
+            // 7) Obtener el tipo de gráfica seleccionado
-            Highcharts.chart('chartContainer', {
+            var $ddl = $('[id$="ddlTipoGrafica"]');
-                chart: { type: 'line' },
+            var tipoGrafica = $ddl.length > 0 ? $ddl.val() : 'line';
+
+            // 8) Configuración base de Highcharts
+            var config = {
                 title: { text: 'Comparativo por Sucursal' },
-                xAxis: {
+                series: series
+            };
+
+            // 9) Configuración específica para cada tipo de gráfica
+            if (tipoGrafica === 'line') {
+                config.chart = { type: 'line' };
+                config.xAxis = {
                     categories: categorias,
                     title: { text: 'Sucursal' }
-                },
+                };
-                yAxis: {
+                config.yAxis = {
                     title: { text: 'Monto' },
                     labels: {
                         formatter: function () {
                             return '$' + Highcharts.numberFormat(this.value, 0);
                         }
                     }
-                },
+                };
-                tooltip: {
+                config.tooltip = {
                     headerFormat: '<b>{series.name}</b><br />',
                     pointFormat: 'Sucursal: <b>{point.category}</b><br />Valor: <b>${point.y:,.2f}</b>'
-                },
+                };
-                plotOptions: {
+                config.plotOptions = { series: { marker: { enabled: true } } };
-                    series: { marker: { enabled: true } }
+            } else if (tipoGrafica === 'pie') {
-                },
+                config.chart = { type: 'pie' };
-                series: series
+                config.plotOptions = {
-            });
+                    pie: {
+                        allowPointSelect: true,
+                        cursor: 'pointer',
+                        dataLabels: {
+                            enabled: true,
+                            format: '<b>{point.name}</b>: {point.percentage:.1f}%'
+                        }
+                    }
+                };
+                config.tooltip = {
+                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+                };
 
-            // 8) Mostrar el modal
+                // Para gráfica de pastel, convertir las series a un formato diferente
-            $('#DivModalGrafica').modal('show');
+                if (series.length > 0) {
+                    var firstSeries = series[0];
+
+                    var pieData = categorias.map(function (categoria, index) {
+                        return {
+                            name: categoria,
+                            y: firstSeries.data[index]
+                        };
+                    });
+
+                    config.series = [{
+                        name: firstSeries.name,
+                        colorByPoint: true,
+                        data: pieData
+                    }];
+                }
+            }
+
+            // 10) Dibujar Highcharts
+            try {
+                Highcharts.chart('chartContainer', config);
+                console.log('Gráfica creada exitosamente');
+            } catch (error) {
+                console.error('Error al crear la gráfica:', error);
+            }
+
+            // 11) Mostrar el modal solo si no está visible
+            if (!$('#DivModalGrafica').hasClass('in') && !$('#DivModalGrafica').is(':visible')) {
+                $('#DivModalGrafica').modal('show');
+            }
             return false;
         }
 
         function generarGrafica(gridId) {
+            // Guardar el último grid usado para el evento del dropdown
+            window.lastUsedGridId = gridId;
+
             var $grid = $('#' + gridId);
 
             // Encuentra las filas de encabezado (donde están los checkboxes)
@@ -2597,6 +2710,7 @@
 
             // Buscar checkboxes marcados
             var $checks = $grid.find('input.header-checkbox:checked');
+
             if ($checks.length === 0) {
                 alert('Por favor, seleccione al menos una columna para graficar.');
                 return false;
@@ -2632,7 +2746,6 @@
                     var txt = $(this).find('td').eq(colIndex).text().replace(/,/g, '');
                     return parseFloat(txt) || 0;
                 }).get();
-
                 series.push({ name: name, data: data });
             });
 
@@ -2641,37 +2754,90 @@
             var modalTitulo = document.getElementById('modalTitulo');
             if (modalTitulo) modalTitulo.innerText = 'Comparativo: ' + titulo;
 
-            // Dibujar gráfica
+            // Obtener el tipo de gráfica seleccionado
-            Highcharts.chart('chartContainer', {
+            var $ddl = $('[id$="ddlTipoGrafica"]');
-                chart: { type: 'line' },
+            var tipoGrafica = $ddl.length > 0 ? $ddl.val() : 'line';
-                title: { text: titulo }, // Usar el título dinámico
+
-                xAxis: {
+            // Configuración base de Highcharts
+            var config = {
+                title: { text: titulo },
+                series: series
+            };
+
+            // Configuración específica para cada tipo de gráfica
+            if (tipoGrafica === 'line') {
+                config.chart = { type: 'line' };
+                config.xAxis = {
                     categories: categorias,
-                    title: { text: 'Categoría' } // Título genérico para el eje X
+                    title: { text: 'Categoría' }
-                },
+                };
-                yAxis: {
+                config.yAxis = {
                     title: { text: 'Monto (MXN)' },
                     labels: {
                         formatter: function () {
                             return '$' + Highcharts.numberFormat(this.value, 0);
                         }
                     }
-                },
+                };
-                tooltip: {
+                config.tooltip = {
                     headerFormat: '<b>{series.name}</b><br />',
                     pointFormat: 'Categoría: <b>{point.category}</b><br />Valor: <b>${point.y:,.2f}</b>'
-                },
+                };
-                plotOptions: {
+                config.plotOptions = { series: { marker: { enabled: true } } };
-                    series: { marker: { enabled: true } }
+            } else if (tipoGrafica === 'pie') {
-                },
+                config.chart = { type: 'pie' };
-                series: series
+                config.plotOptions = {
-            });
+                    pie: {
+                        allowPointSelect: true,
+                        cursor: 'pointer',
+                        dataLabels: {
+                            enabled: true,
+                            format: '<b>{point.name}</b>: {point.percentage:.1f}%'
+                        }
+                    }
+                };
+                config.tooltip = {
+                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+                };
+
+                // Para gráfica de pastel, usar solo la primera serie seleccionada
+                if (series.length > 0) {
+                    var firstSeries = series[0];
+                    console.log('Primera serie para pastel:', firstSeries);
+
+                    var pieData = categorias.map(function (categoria, index) {
+                        return {
+                            name: categoria,
+                            y: firstSeries.data[index]
+                        };
+                    });
+
+                    console.log('Datos del pastel:', pieData);
+
+                    config.series = [{
+                        name: firstSeries.name,
+                        colorByPoint: true,
+                        data: pieData
+                    }];
+                }
+            }
+
+            // Dibujar gráfica
+            try {
+                Highcharts.chart('chartContainer', config);
+                console.log('Gráfica creada exitosamente');
+            } catch (error) {
+                console.error('Error al crear la gráfica:', error);
+            }
+
+            // Mostrar el modal solo si no está visible
+            if (!$('#DivModalGrafica').hasClass('in') && !$('#DivModalGrafica').is(':visible')) {
+                $('#DivModalGrafica').modal('show');
+            }
 
-            $('#DivModalGrafica').modal('show');
             return false;
         }
 
-
     </script>
 
 

General/Dashboard.aspx.vb

@@ -381,7 +381,7 @@ Partial Class General_Dashboard
 
             Dim cellSucursal As New TableHeaderCell()
             cellSucursal.RowSpan = 2
-            cellSucursal.VerticalAlign = VerticalAlign.Middle
+            'cellSucursal.VerticalAlign = VerticalAlign.Middle
             cellSucursal.Controls.Add(New LiteralControl("<span>Sucursal</span>&nbsp;"))
             Dim hypGrafica As New HyperLink()
             hypGrafica.NavigateUrl = "javascript:void(0);"
@@ -393,13 +393,13 @@ Partial Class General_Dashboard
 
             Dim cellAnio As New TableHeaderCell()
             cellAnio.ColumnSpan = 2
-            cellAnio.HorizontalAlign = HorizontalAlign.Center
+            'cellAnio.HorizontalAlign = HorizontalAlign.Center
             cellAnio.Text = "Año"
             headerRow1.Cells.Add(cellAnio)
 
             Dim cellMes As New TableHeaderCell()
             cellMes.ColumnSpan = 2
-            cellMes.HorizontalAlign = HorizontalAlign.Center
+            'cellMes.HorizontalAlign = HorizontalAlign.Center
             cellMes.Text = "Mes"
             headerRow1.Cells.Add(cellMes)