--Tamaño de diagrama segun la cantidad de datos

This commit is contained in:
2024-05-07 19:38:32 -07:00
parent 190aa55c90
commit 5eab7f83db
2 changed files with 39 additions and 42 deletions

View File

@@ -21,7 +21,7 @@
#chartdiv { #chartdiv {
width: 100%; width: 100%;
height: 700px; height: 600px;
} }
</style> </style>
</asp:Content> </asp:Content>
@@ -280,36 +280,33 @@
<ajax:TabPanel ID="TabGrantt" runat="server" HeaderText="Cronograma"> <ajax:TabPanel ID="TabGrantt" runat="server" HeaderText="Cronograma">
<ContentTemplate> <ContentTemplate>
<asp:UpdatePanel ID="UPPGantt" runat="server" UpdateMode="Conditional"> <asp:UpdatePanel ID="UPPGantt" runat="server" UpdateMode="Conditional">
<ContentTemplate> <ContentTemplate>
<div class="portlet solid grey-cascade portlet-filter">
<div class="portlet solid grey-cascade portlet-filter"> <div class="portlet-title portlet-filterT smalltitle">
<div class="portlet-title portlet-filterT smalltitle"> <div class="tools">
<div class="tools"> <a href="javascript:;" class="expand"></a>
<a href="javascript:;" class="expand"></a> </div>
</div> <div class="titlefiltros caption">
<div class="titlefiltros caption"> <div class="row" style="height: 32px;">
<div class="row" style="height: 32px;"> <label class="col-md-1 truncate">Tipo Vista:</label>
<div class="col-md-1">
<label class="col-md-1 truncate">Vista</label> <asp:DropDownList ID="DdlTipoVista" AutoPostBack="true" OnSelectedIndexChanged="DdlTipoVista_SelectedIndexChanged" CssClass="form-control select2me input-sm select2me Widthall"
<div class="col-md-1"> Style="width: 100%;" runat="server">
<asp:DropDownList ID="DdlTipoVista" AutoPostBack="true" OnSelectedIndexChanged ="DdlTipoVista_SelectedIndexChanged" CssClass="form-control select2me input-sm select2me Widthall" <asp:ListItem Text="Todos" Value="-1"></asp:ListItem>
Style="width: 100%;" runat="server"> <asp:ListItem Text="Solo Viaje" Value="1"></asp:ListItem>
<asp:ListItem Text="Todos" Value="-1"></asp:ListItem> </asp:DropDownList>
<asp:ListItem Text="solo viaje" Value="1"></asp:ListItem> </div>
</asp:DropDownList> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </ContentTemplate>
</div> </asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div id="chartdiv" style="width:100%; min-height:300px;"></div> <div id="chartdiv"></div>
</div> </div>
</div> </div>
</ContentTemplate> </ContentTemplate>
</ajax:TabPanel> </ajax:TabPanel>
</ajax:TabContainer> </ajax:TabContainer>
@@ -526,7 +523,6 @@
"February": "Febrero", "February": "Febrero",
"March": "Marzo", "March": "Marzo",
"April": "Abril", "April": "Abril",
"May": "Mayo",
"June": "Junio", "June": "Junio",
"July": "Julio", "July": "Julio",
"August": "Agosto", "August": "Agosto",
@@ -537,7 +533,7 @@
}; };
function cargaDiagramaGrant(data, categorias) { function cargaDiagramaGrant(data, categorias, TipoVista) {
am5.ready(function () { am5.ready(function () {
//SI YA HAY GRAFICA, QUITA LA ACTUAL PARA HACER UNA NUEVA //SI YA HAY GRAFICA, QUITA LA ACTUAL PARA HACER UNA NUEVA
@@ -566,7 +562,7 @@
layout: root.verticalLayout, layout: root.verticalLayout,
paddingLeft: 0 paddingLeft: 0
})); }));
// Add legend // Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/ // https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, { var legend = chart.children.push(am5.Legend.new(root, {
@@ -650,23 +646,24 @@
chart.set("scrollbarY", scrollbarY); chart.set("scrollbarY", scrollbarY);
/// evento para ajustar el alto del row
var cellSize = 30; series.events.on("datavalidated", function (ev) {
chart.events.on("datavalidated", function (ev) { let cellSize = 45;
// Get objects of interest if (TipoVista == 1) {
var chart = ev.target; cellSize = 60;
var categoryAxis = chart.yAxes.getIndex(0); }
//let series = ev.target;
//let chart = series.chart;
let xAxis = chart.xAxes.getIndex(0);
// Calculate how we need to adjust chart height // Calculate how we need to adjust chart height
var adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight; let chartHeight = categorias.length * cellSize + xAxis.height() + chart.get("paddingTop", 0) + chart.get("paddingBottom", 0);
// get current chart height
var targetHeight = chart.pixelHeight + adjustHeight;
// Set it on chart's container // Set it on chart's container
chart.svgContainer.htmlElement.style.height = targetHeight + "px"; chart.root.dom.style.height = chartHeight + "px";
}); });
//root.language.setTranslationAny("May", "Mayo");
// Make stuff animate on load // Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/ // https://www.amcharts.com/docs/v5/concepts/animations/
@@ -713,12 +710,12 @@
if (event.NombreComercial !== null) { if (event.NombreComercial !== null) {
$('#HidModClienteNombre').val(''); $('#HidModClienteNombre').val('');
} else { } else {
$('#HidModClienteNombre').val(event.NombreComercial); $('#HidModClienteNombre').val(event.NombreComercial);
} }
$('#HidModCveCliente').val(event.CveCliente); $('#HidModCveCliente').val(event.CveCliente);
$('#<%=BtnModal.ClientID%>').click(); $('#<%=BtnModal.ClientID%>').click();
} }

View File

@@ -103,7 +103,7 @@ Partial Class RepContratosCalendario
jsonCategorias.Add(obj) jsonCategorias.Add(obj)
Next Next
RegistraScript($"cargaDiagramaGrant({jsonData.ToString()},{jsonCategorias.ToString()});", "A1") RegistraScript($"cargaDiagramaGrant({jsonData.ToString()},{jsonCategorias.ToString()},{TipoVista});", "A1")
UPPGantt.Update() UPPGantt.Update()
End If End If
End Sub End Sub