This commit is contained in:
JORGE LUIS CAUDILLO ESPARZA
2020-09-07 07:58:59 -07:00
parent 2ab303f049
commit 6fed5b0047
14 changed files with 497 additions and 171 deletions

View File

@@ -281,7 +281,7 @@
} else {
CargaGraficaPastel();
}
$('.LblTituloGrafica').text($(obj).parent().parent().text());
$('.LblTituloGrafica').text($(obj).closest('tr').text().trim());
}
function CargaGraficaBarras() {
let data = cdatos;

View File

@@ -299,8 +299,7 @@
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
@@ -322,7 +321,7 @@
} else {
CargaGraficaPastel();
}
$('.LblTituloGrafica').text($(obj).parent().parent().text());
$('.LblTituloGrafica').text($(obj).closest('tr').text().trim());
}
function CargaGraficaBarras() {
let data = cdatos;
@@ -396,7 +395,7 @@
function cargaGraficaBarras2() {
//Hypgrafica
$("#DivModalGrafica").modal();
$('.LblTituloGrafica').text('grafica');
$('.LblTituloGrafica').text('Grafica');
let items = []
let data;
let series = [];
@@ -517,8 +516,7 @@
</script>
<script>
function LimpiaCeros(Divisor) {
$('.ceros').each(function (i, obj) {
debugger;
$('.ceros').each(function (i, obj) {
if ($(this).html() == '0.00' || $(this).html() == '0.00%') {
$(this).html('-');
@@ -540,7 +538,6 @@
}
function FormatoNumeroIPP(Importe, Decimales) {
debugger;
if (typeof Decimales === 'undefined') { Decimales = 2; }
if (isNaN(parseInt(Importe))) return "NaN";

View File

@@ -227,7 +227,7 @@
} else {
CargaGraficaPastel();
}
$('.LblTituloGrafica').text($(obj).parent().parent().text().trim());
$('.LblTituloGrafica').text($(obj).closest('tr').text().trim());
}
function CargaGraficaBarras() {
let data = cdatos;

View File

@@ -14,6 +14,18 @@
width: 16px;
height: 14px;
}
/*#grafInfo .chksino label {
margin-left: -95px;
}*/
.chksino label::before {
content: 'B';
}
.chksino label::after {
content: 'L';
}
</style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HB" runat="Server">
@@ -784,16 +796,26 @@
CssClass="ADSCROLLER2 table table-striped table-advance table-hover" data-cols="1" data-heightmenos="300"
Style="margin-top: -10px; text-align: center;" GridLines="None">
<Columns>
<asp:TemplateField>
<%--<asp:TemplateField HeaderStyle-HorizontalAlign="Left">
<HeaderTemplate>
<asp:HyperLink ID="Hypgraficagral" runat="server" CssClass="Texto Hypgraficagral" NavigateUrl="javascript:void(0);" onclick="return cargaGraficaBarras2('Analisis centro de costos');"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
</HeaderTemplate>
<ItemTemplate>
<%--<asp:Label ID="LbNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>--%>
<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);" ><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
<asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left">
<HeaderTemplate>
<%--<asp:HyperLink ID="Hypgraficagral" runat="server" CssClass="Texto Hypgraficagral" NavigateUrl="javascript:void(0);" onclick="return cargaGraficaBarras2('Analisis centro de costos');"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>--%>
<asp:Label ID="LbTitulo" runat="server" Style="padding-left: 20px;" Font-Size="14px" Text="INGRESOS Y OTROS BENEFICIOS"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
<asp:HyperLink ID="HLNombre" runat="server" Text='<%# Eval("Nombre")%>' CssClass="Texto" Target="_blank"></asp:HyperLink>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
<HeaderTemplate>
<asp:Label ID="LbTitulo" runat="server" Style="padding-left: 20px;" Font-Size="14px" Text="INGRESOS Y OTROS BENEFICIOS"></asp:Label>
</HeaderTemplate>
<HeaderStyle HorizontalAlign="Left" Width="291px" />
</asp:TemplateField>
@@ -857,14 +879,14 @@
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
<asp:Label ID="LbNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
<HeaderTemplate>
<asp:Label ID="LbTitulo" runat="server" Style="padding-left: 20px;" Font-Size="14px" Text="GASTOS Y OTRAS PÉRDIDAS"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" onclick="return HandlerGraf(this, event);"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
<asp:Label ID="LbNombre" runat="server" Text='<%# Eval("Nombre")%>'></asp:Label>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left" Width="400px" />
</asp:TemplateField>
@@ -1035,6 +1057,40 @@
</asp:UpdatePanel>
</div>
<div id="DivModalGraficaGral" class="modal ADS fade" role="dialog">
<asp:UpdatePanel class="modal-dialog modal-lg" style="width: 1300px" runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">
<asp:Label CssClass="LblTituloGraficaGral" runat="server" ClientIDMode="Static" Text="">Analisis centro de costos</asp:Label>
</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-1"></div>
<label class="col-md-2 truncate" style="display: inline-block; padding-top: 8px; font-weight: bold;">Seleccione el tipo de grafica:</label>
<div class="col-md-4">
<asp:RadioButtonList ID="rdblistgrafica" CssClass="rdblistgrafica" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Text="Barras" Value="1"></asp:ListItem>
<asp:ListItem Text="Lineas" Value="2"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div id="grafInfo">
</div>
<br />
<div id="chartdivgral"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="JS" runat="Server">
@@ -1048,15 +1104,15 @@
<script>
let cdatos;
let currentid = 1;
function HandlerGraf(obj, evt) {
function HandlerGraf(obj, evt) {
$("#DivModalGrafica").modal();
cdatos = $(obj).data('values');
if (currentid == 1) {
CargaGraficaBarras();
CargaGraficaBarras();
} else {
CargaGraficaPastel();
CargaGraficaPastel();
}
$('.LblTituloGrafica').text($(obj).parent().text());
$('.LblTituloGrafica').text($(obj).parent().text());
}
function CargaGraficaBarras() {
let data = cdatos;
@@ -1114,16 +1170,217 @@
});
}
function ADSBegin() {
$('.DdlGrafica').on('select2:select', function (e) {
var data = e.params.data;
currentid = data.id;
if (currentid == 1) {
CargaGraficaBarras();
} else {
CargaGraficaPastel();
}
});
$('.DdlGrafica').removeClass('DdlGrafica')
$('.DdlGrafica').on('select2:select', function (e) {
var data = e.params.data;
currentid = data.id;
if (currentid == 1) {
CargaGraficaBarras();
} else {
CargaGraficaPastel();
}
});
$(".rdblistgrafica:not(.clicked) input").change(cargaGraficaBarras2);
$('.rdblistgrafica').addClass('clicked')
$('.DdlGrafica').removeClass('DdlGrafica')
initamgrafica();
}
let objetos;
let Colores = ["#FF0F00", "#FF6600", "#F8FF01", "#04D215", "#2A0CD0", "#8A0CCF", "#CD0D74", "#754DEB", "#DDDDDD", "#999999", "#000000"];
function cargaGraficaBarras2(Titulo) {
$('.LblTituloGraficaGral').text(Titulo);
cargaGraficaBarras2();
}
function cargaGraficaBarras2() {
//Hypgrafica
$("#DivModalGraficaGral").modal();
let infogral = $('#grafInfo');
infogral.find('>*').remove();
let items = []
let data;
let icolor = 0;
let tipografica = $('.rdblistgrafica input:checked').val();
$('.chkgraf input:checked').each(function () {
data = $(this).closest('tr').find('.Hypgrafica').data('values')
let name = $(this).closest('tr').text().trim()
items.push({ id: icolor, data: data, name: name, Color: Colores[icolor], tipografica })
gettitlegraf(infogral, icolor, Colores[icolor], name, tipografica);
icolor = icolor + 1;
if (icolor >= Colores.length) { icolor = 0; }
});
objetos = items;
$(".chkonchange input").each(function () {
let _this = $(this)
_this.change(function () {
let _this = $(this)
let id = Number(_this.data('id'))
objetos[id].tipografica = _this.is(':checked') ? 1 : 2;
ShowGraf2();
})
});
ShowGraf2();
}
function gettitlegraf(infogral, id, Color, name, tipografica) {
let strtipografica = '<span class="chksino chkonchange" ><input id="chk' + id + '" ' + (tipografica == 1 ? 'checked="checked"' : '"') + ' data-id="' + id + '" type="checkbox" name="nchk' + id + '"><label for="chk' + id + '"> </label></span>';
let contenedor = $("<div class='row'></div>");
let divcolspan = $("<div class='col-md-1'></div>");
let divcolor = $('<div class="col-md-1"><div style="width:20px;height:10px;background-color:' + Color + ';"></div> </div>');
let divtexto = $("<div class='col-md-8'>" + name + "</div>");
let divtipografica = $("<div class='col-md-1'>" + strtipografica + "</div>");
infogral.append(contenedor);
contenedor.append(divcolspan); contenedor.append(divcolor); contenedor.append(divtexto); contenedor.append(divtipografica);
}
function ShowGraf2() {
let items = objetos;
let series = [];
if (items) {
data = items[0].data;
series.push((
(items[0].tipografica == 1) ?
{
"balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
"colorField": "Color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"title": items[0].name,
"valueField": 'Valor'
} :
{
"balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
"colorField": "Color",
"bullet": "round",
"dashLength": 3,
"colorField": "color",
"type": "line",
"title": items[0].name,
"valueField": "Valor"
}
));
for (var i = 0; i < data.length; i++) {
data[i]['Color'] = items[0].Color
}
for (var indexcol = 1; indexcol < items.length; indexcol++) {
let cdatos = items[indexcol].data;
let valueField = 'Valor' + indexcol;
let colorField = 'Color' + indexcol;
let tipografica = "column";
for (var i = 0; i < cdatos.length; i++) {
data[i][valueField] = cdatos[i].Valor
data[i][colorField] = items[indexcol].Color
}
series.push((
(items[indexcol].tipografica == 1) ?
{
"balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
"colorField": colorField,
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"title": items[indexcol].name,
"valueField": valueField
} :
{
"balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
"colorField": colorField,
"bullet": "round",
"dashLength": 3,
"colorField": "color",
"type": "line",
"title": items[indexcol].name,
"valueField": valueField
}
));
}
var chart = AmCharts.makeChart("chartdivgral", {
"type": "serial",
"theme": "light",
"dataProvider": data,
"startDuration": 2, "legend": {
"generateFromData": true // "data": data.map(function(num) { return {title:num.Texto ,color:num.Color}; })
},
"valueAxes": [{
"position": "left",
"title": "Ventas"
}],
"graphs": series,
"depth3D": 20,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Texto",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 90
},
"export": {
"enabled": true
}
});
}
}
function initamgrafica() {
AmCharts.addInitHandler(function (chart) {
function handleCustomMarkerToggle(legendEvent) {
var dataProvider = legendEvent.chart.dataProvider;
var itemIndex;
legendEvent.chart.toggleLegend = true;
if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
legendEvent.dataItem.hidden = false;
dataProvider.push(legendEvent.dataItem.storedObj);
legendEvent.dataItem.storedObj = undefined;
dataProvider.sort(function (lhs, rhs) {
return lhs.dataIdx - rhs.dataIdx;
});
} else {
legendEvent.dataItem.hidden = true;
for (var i = 0; i < dataProvider.length; ++i) {
if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) {
itemIndex = i;
break;
}
}
legendEvent.dataItem.storedObj = dataProvider[itemIndex];
dataProvider.splice(itemIndex, 1);
}
legendEvent.chart.validateData();
}
if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) {
return;
}
var categoryField = chart.categoryField;
var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField || chart.graphs[0].colorField;
var legendData = chart.dataProvider.map(function (data, idx) {
var markerData = {
"title": data[categoryField],
"color": data[colorField],
"dataIdx": idx
};
if (!markerData.color) {
markerData.color = chart.graphs[0].lineColor;
}
data.dataIdx = idx;
return markerData;
});
chart.legend.data = legendData;
chart.legend.switchable = true;
chart.legend.addListener("clickMarker", handleCustomMarkerToggle);
}, ["serial"]);
}
</script>
</asp:Content>