AdminADS/SIG
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cambios Dashboard

Browse Source
This commit is contained in:
Luis Carlos Quijada
2025-06-23 19:05:31 -06:00
parent bc9bf15b61
commit a7a296a28b
2 changed files with 232 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
General/Dashboard.aspx
View File

@@ -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>
<asp:CheckBox ID="chkVentaAnual" runat="server" CssClass="header-checkbox" data-field="VentaAnual" />
<label for="chkVentaAnual">Graficar</label>
</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" Style="margin-left: auto;" />--%>
<label for="chkVentaAnual" style="margin-bottom: 0; margin-left: 4px;">Graficar</label>
<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-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" id="modalTitulo">Comparativo de Sucursales</h4>
</div>
<div class="modal-body">
<div id="chartContainer" style="width: 100%; height: 500px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
<div class="modal fade" id="DivModalGrafica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" id="modalTitulo">Comparativo de Sucursales</h4>
</div>
<div class="modal-body">
<asp:DropDownList ID="ddlTipoGrafica" runat="server">
<asp:ListItem Value="line">Líneas</asp:ListItem>
<asp:ListItem Value="pie">Pastel</asp:ListItem>
</asp:DropDownList>
<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
Highcharts.chart('chartContainer', {
chart: { type: 'line' },
// 7) Obtener el tipo de gráfica seleccionado
var $ddl = $('[id$="ddlTipoGrafica"]');
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: {
series: { marker: { enabled: true } }
},
series: series
});
};
config.plotOptions = { series: { marker: { enabled: true } } };
} else if (tipoGrafica === 'pie') {
config.chart = { type: 'pie' };
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
$('#DivModalGrafica').modal('show');
// Para gráfica de pastel, convertir las series a un formato diferente
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
Highcharts.chart('chartContainer', {
chart: { type: 'line' },
title: { text: titulo }, // Usar el título dinámico
xAxis: {
// Obtener el tipo de gráfica seleccionado
var $ddl = $('[id$="ddlTipoGrafica"]');
var tipoGrafica = $ddl.length > 0 ? $ddl.val() : 'line';
// 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
},
yAxis: {
title: { text: 'Categoría' }
};
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: {
series: { marker: { enabled: true } }
},
series: series
});
};
config.plotOptions = { series: { marker: { enabled: true } } };
} else if (tipoGrafica === 'pie') {
config.chart = { type: 'pie' };
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>

6
General/Dashboard.aspx.vb
View File

@@ -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)