Graficos razones financieras Rep anexo catalogo

This commit is contained in:
rakcsle
2023-08-10 20:49:58 -07:00
parent eebe1044e7
commit b789c368f9
7 changed files with 465 additions and 489 deletions

View File

@@ -450,14 +450,17 @@
<asp:TemplateField>
<HeaderTemplate>
<%--<asp:HyperLink ID="Hypgrafica" runat="server" CssClass="Texto Hypgrafica gral" NavigateUrl="javascript:void(0);" onclick="return cargaGraficaBarras2();"><i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>--%>
<asp:HyperLink ID="hpl2" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" >
<i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
</HeaderTemplate>
<ItemTemplate>
<div style="white-space: nowrap">
<asp:HyperLink ID="Hypgrafica" Visible="false" 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" Visible="false" />
<%--<asp:HyperLink ID="Hypgrafica" Visible="false" 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="hpl2" runat="server" CssClass="Texto Hypgrafica" NavigateUrl="javascript:void(0);" >
<i class="fa fa-bar-chart" aria-hidden="true"></i></asp:HyperLink>
<asp:CheckBox ID="chkgraf" CssClass="chkgraf" runat="server" />
</div>
@@ -650,381 +653,234 @@
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="JS" runat="Server">
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script>
let cdatos;
let currentid = 1;
function HandlerGraf(obj, evt) {
$("#DivModalGrafica").modal();
cdatos = $(obj).data('values');
if (currentid == 1) {
CargaGraficaBarras();
} else {
CargaGraficaPastel();
}
$('.LblTituloGrafica').text($(obj).closest('tr').text().trim());
}
function CargaGraficaBarras() {
let data = cdatos;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": data,
"startDuration": 2,
"valueAxes": [{
"position": "left",
"title": "Ventas"
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b> [[Moneda]]",
"colorField": "Color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "line",
"valueField": "Valor"
}],
"depth3D": 20,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "Texto",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 90
},
"export": {
"enabled": true
}
});
}
function CargaGraficaPastel() {
let data = cdatos;
var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider":
data,
"valueField": "Valor",
"titleField": "Texto",
"outlineAlpha": 0.4,
"depth3D": 0,
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]% [[Moneda]])</span>",
"angle": 0,
"export": {
"enabled": true
}
});
}
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')
initamgrafica();
}
function cargaGraficaBarras2() {
//Hypgrafica
$("#DivModalGrafica").modal();
$('.LblTituloGrafica').text('grafica');
let items = []
let data;
let series = [];
$('.chkgraf input:checked').each(function () {
data = $(this).closest('tr').find('.Hypgrafica').data('values')
let name = $(this).closest('tr').text().trim()
items.push({ data: data, name: name })
});
if (items) {
data = items[0].data;
series.push({
"balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
"colorField": "Color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"title": items[0].name,
"valueField": 'Valor'
})
for (var indexcol = 1; indexcol < items.length; indexcol++) {
let cdatos = items[indexcol].data;
let valueField = 'Valor' + indexcol;
for (var i = 0; i < cdatos.length; i++) {
data[i][valueField] = cdatos[i].Valor
}
series.push({
"balloonText": "[[title]]: <b>[[value]]</b> [[Moneda]]",
"colorField": "Color",
"fillAlphas": 1,
"lineAlpha": 0.1,
"type": "column",
"title": items[indexcol].name,
"valueField": valueField
})
}
var chart = AmCharts.makeChart("chartdiv", {
"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>
<script>
function LimpiaCeros() {
let Divisor = 1;
$('.ceros').each(function (i, obj) {
if ($(this).html() == '0.00' || $(this).html() == '0.00%') {
$(this).html('-');
}
if (!($(this).html() == '-' || $(this).html() == '' || ~$(this).html().indexOf("%"))) {
if (Divisor > 1) {
$(this).attr('data-toggle', 'tooltip');
$(this).attr('data-container', 'body');
$(this).attr('title', $(this).html());
}
$(this).html(FormatoNumeroIPP(ToDouble($(this).html()) / Divisor, ((Divisor == 1) ? 2 : 0)));
}
if (ToDouble($(this).html()) < 0) {
$(this).css("color", "red");
}
});
}
function FormatoNumeroIPP(Importe, Decimales) {
if (typeof Decimales === 'undefined') { Decimales = 2; }
if (isNaN(parseInt(Importe))) return "NaN";
var tmpNum = Importe;
tmpNum = tmpNum.toFixed(Decimales).replace(/./g, function (c, i, a) {
return i && c !== "." && !((a.length - i) % 3) ? ',' + c : c;
});
return tmpNum;
}
function pageLoad(sender, e) {
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
}
function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, xtitulo, labelpoint, media, datospie1, datospie2, idChkSeleccionado) {
function graficahighchartsFinan(idcontainer, titulo, subtitulo, ytitulo, datos, Yinterval, labelpoint, media, datospie1, datospie2, Tittulo2) {
$('#LblTituloGrafica').text(Tittulo2)
$('#LblTituloGrafica').text(titulo)
$(document).ready(function () {
$(".chartcheckboxes").remove();
});
var Monedas = '';
if (datospie1.length > 0) {
Monedas = 'Monedas';
}
var numerodatos = 0;
$("<div class='chartcheckboxes' ><span></span></div>").insertAfter("#" + idcontainer);
if (datos.length > 0) {
var numerodatos = datos.length - 1;
//var media = (datos.reduce(function (a, b) { return a + b; })) / (numerodatos + 1);
for (var i = numerodatos; i >= 0; i--) {
$("<input type='checkbox' id='" + idcontainer + i + "' class='overrydecheckbox' value='" + i + "' onchange=\" changedatagrafica2('" + idcontainer + "');\" /><label for='" + idcontainer + i + "'>" + datos[i][0].substring(0, 3) + "</label>").insertAfter("#" + idcontainer + " + div span");
let datosSeries = [];
let datosCategorias = [];
if (idChkSeleccionado.trim().length > 0) {
var dataName = $(`#${idChkSeleccionado}`).data('name');
var dataData = $(`#${idChkSeleccionado}`).data('data');
datosCategorias = $(`#${idChkSeleccionado}`).data('categorias');
let serieDato = {
name: dataName,
data: dataData
}
datosSeries.push(serieDato);
console.log("data-name:", dataName);
console.log("data-data:", dataData);
} else {
$(document).ready(function () {
$('.chksel').each(function () {
if ($(this).prop('checked')) {
var dataName = $(this).data('name');
var dataData = $(this).data('data');
datosCategorias = $(this).data('categorias');
let serieDato = {
name: dataName,
data: dataData
}
datosSeries.push(serieDato);
console.log("data-name:", dataName);
console.log("data-data:", dataData);
}
});
});
}
$("#" + idcontainer).data('serie', datos);
var margintop = 80;
var dataset = [{
type: 'area',
lineColor: '#9ACAE6',
color: '#F1F7FD',
fillColor: '#F1F7FD',
lineWidth: 3,
marker: {
lineWidth: 2,
lineColor: '#9ACAE6',
fillColor: '#9ACAE6'
},
pointInterval: 1,
name: ' ',
data: datos
}, {
type: 'line',
lineWidth: 2,
lineColor: '#999',
marker: {
enabled: false
},
name: ' ',
data: [media, media]
}];
console.log("serieDato:", datosSeries);
console.log("datosCategorias:", datosCategorias);
Highcharts.chart(idcontainer, {
$('#' + idcontainer).highcharts({
chart: {
type: 'area', spacingTop: margintop
type: 'line'
},
title: {
text: titulo
},
subtitle: {
text: subtitulo
},
xAxis: {
type: "category"
title: {
text: titulo,
align: 'left'
},
subtitle: {
text: subtitulo,
align: 'left'
},
yAxis: {
title: {
text: ytitulo
},
labels: {
formatter: function () {
return this.value / Yinterval;
}
},
xAxis: {
categories: datosCategorias,
title: {
text: xtitulo
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
tooltip: {
shared: true,
valueSuffix: labelpoint
},
plotOptions: {
area: {
color: '#FBC5C5',
fillColor: '#FBC5C5',
stacking: 'normal',
lineColor: '#F89F9F',
lineWidth: 0,
marker: {
radius: 5,
lineWidth: 2,
lineColor: '#FFF',
fillColor: '#F89F9F'
}
},
line: {
pointInterval: numerodatos,
lineColor: '#999999',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
series: datosSeries ,
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}
}]
},
series: dataset,
navigation: {
buttonOptions: {
y: -80
}
credits: {
enabled: false
}
});
// $("#" + idcontainer).data('serie', datos);
// var margintop = 80;
// var dataset = [{
// type: 'area',
// lineColor: '#9ACAE6',
// color: '#F1F7FD',
// fillColor: '#F1F7FD',
// lineWidth: 3,
// marker: {
// lineWidth: 2,
// lineColor: '#9ACAE6',
// fillColor: '#9ACAE6'
// },
// pointInterval: 1,
// name: ' ',
// data: datos
// }, {
// type: 'line',
// lineWidth: 2,
// lineColor: '#999',
// marker: {
// enabled: false
// },
// name: ' ',
// data: [media, media]
// }];
// $('#' + idcontainer).highcharts({
// chart: {
// type: 'area', spacingTop: margintop
// },
// title: {
// text: titulo
// },
// subtitle: {
// text: subtitulo
// },
// xAxis: {
// type: "category"
// },
// yAxis: {
// title: {
// text: ytitulo
// },
// labels: {
// formatter: function () {
// return this.value / Yinterval;
// }
// }
// },
// tooltip: {
// shared: true,
// valueSuffix: labelpoint
// },
// plotOptions: {
// area: {
// color: '#FBC5C5',
// fillColor: '#FBC5C5',
// stacking: 'normal',
// lineColor: '#F89F9F',
// lineWidth: 0,
// marker: {
// radius: 5,
// lineWidth: 2,
// lineColor: '#FFF',
// fillColor: '#F89F9F'
// }
// },
// line: {
// pointInterval: numerodatos,
// lineColor: '#999999',
// marker: {
// enabled: false,
// symbol: 'circle',
// radius: 2,
// states: {
// hover: {
// enabled: true
// }
// }
// }
// }
// },
// series: dataset,
// navigation: {
// buttonOptions: {
// y: -80
// }
// }
// });
//}
}
</script>
</asp:Content>

View File

@@ -5,6 +5,7 @@ Imports System.Data
Imports System.Drawing
Imports System.IO
Imports System.Windows.Forms
Imports DocumentFormat.OpenXml.EMMA
Imports Extensiones
Imports GemBox.Spreadsheet
Imports Microsoft.Reporting.WebForms
@@ -452,13 +453,16 @@ Partial Class Finanzas_RepRazonesFinancieras2
Dim Titulo As String = e.Row.FCLabel("LblRatio").Text
Dim SubTitulo As String = ""
Dim YReferencia As String = "$"
Dim YReferencia As String = "Valor"
Dim Info As String = ""
Dim XReferencia As String = ""
Dim XReferencia As String = "Periodos"
Dim Promedio As String = ""
Dim lista As New List(Of Object)
Dim Lista2 As New List(Of String)
'Dim lista As New List(Of Object)
'Dim Lista2 As New List(Of String)
Dim ListaDatos As New List(Of String)
Dim ListaCategorias As New List(Of String)
For x = 2 To GVRatios.Columns.Count - 1
If GVRatios.Columns(x).Visible = True Then
@@ -469,8 +473,8 @@ Partial Class Finanzas_RepRazonesFinancieras2
Dim valor As String = e.Row.Cells(x).Text.ToString.Replace("%", "").Replace("&nbsp;", "").Replace(" ", "").Replace(",", "").Trim
If valor.Length > 0 Then
lista.Add(New With {.Texto = headerString, .Valor = valor.ToDecimal, .Color = "#FF0F00"})
Lista2.Add($"['{headerString}',{valor}]")
ListaDatos.Add(valor.ToDecimal.ToString("###########0.00"))
ListaCategorias.Add($"""{headerString}""")
End If
End If
@@ -481,11 +485,18 @@ Partial Class Finanzas_RepRazonesFinancieras2
'e.Row.FCHyperLink("Hypgrafica").Attributes.Add("data-values", Newtonsoft.Json.JsonConvert.SerializeObject(lista))
If e.Row.DataKey("Tipo").ToEntero <> 1 Then
Info = String.Join(",", Lista2)
e.Row.FCHyperLink("hpl2").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show'); " &
String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],1,'{5}','{6}',[{8}],[{7}],'{9}');", chartdiv2.ClientID, "", SubTitulo, YReferencia, Info, XReferencia, Promedio, "", "", Titulo))
String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],'{5}','{5}','{6}',[{8}],[{7}],'{9}');", chartdiv2.ClientID, Titulo, SubTitulo, YReferencia, Info, XReferencia, Promedio, "", "", e.Row.FCCheckBox("chkgraf").ClientID))
e.Row.FCCheckBox("chkgraf").InputAttributes.Add("class", "chksel")
e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-name", e.Row.FCLabel("LblRatio").Text)
e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-data", $"[{String.Join(",", ListaDatos)}]")
e.Row.FCCheckBox("chkgraf").InputAttributes.Add("data-categorias", $"[{String.Join(",", ListaCategorias)}]")
Else
e.Row.FCHyperLink("hpl2").Visible = False
e.Row.FCCheckBox("chkgraf").Visible = False
End If
@@ -493,6 +504,11 @@ Partial Class Finanzas_RepRazonesFinancieras2
End If
If e.Row.RowType = DataControlRowType.Header Then
e.Row.FCHyperLink("hpl2").Attributes.Add("onclick", "$('#DivModalGrafica').modal('show'); " &
String.Format("graficahighchartsFinan('{0}','{1}','{2}','{3}',[{4}],'{5}','{5}','{6}',[{8}],[{7}],'{9}' );", chartdiv2.ClientID, "Selección multiple", "", "Valores", "", "Periodos", "", "", "", ""))
End If
End Sub