From b52fa9bc359bbf2410805572b63923d3e1349091 Mon Sep 17 00:00:00 2001
From: RPimienta <dany_pimi@hotmail.com>
Date: Thu, 14 Nov 2024 23:06:09 -0600
Subject: [PATCH] Cambios en el dashboard de ventas

---
 Ventas/DashboardVentas.aspx    | 123 ++++++++++++++++++++++++++++++++-
 Ventas/DashboardVentas.aspx.vb |  56 ++++++---------
 2 files changed, 144 insertions(+), 35 deletions(-)

diff --git a/Ventas/DashboardVentas.aspx b/Ventas/DashboardVentas.aspx
index d45d29431..c4b4ac610 100644
--- a/Ventas/DashboardVentas.aspx
+++ b/Ventas/DashboardVentas.aspx
@@ -117,8 +117,10 @@
                             </div>
                         </div>
                         <div class="portlet-body">
+                            <div id="chartdiv" style="text-align: center; height: 600px!important">
+                            </div>
                             <div id="div_ventas" runat="server" style="text-align: center;">
-                                <img src="/Metronic/assets/admin/layout/img/loading.gif" alt="loading" />
+                                <%--<img src="/Metronic/assets/admin/layout/img/loading.gif" alt="loading" />--%>
                             </div>
                         </div>
                     </div>
@@ -251,7 +253,7 @@
     </asp:UpdatePanel>
 </asp:Content>
 <asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
-    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
+    <%-- <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>
@@ -346,6 +348,123 @@
             //        "enabled": true
             //    }
             //});
+        }--%>
+
+
+    <!--Librería principal de amCharts 4-->
+    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
+
+    <!-- Módulo de gráficos de XYChart -->
+    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
+
+    <!-- Tema animado de amCharts 4 -->
+    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
+
+    <!-- Paquete de idioma español -->
+    <script src="https://cdn.amcharts.com/lib/4/lang/es_ES.js"></script>
+
+    <script>
+
+        // Función para crear series dinámicamente
+        function createSeries(field, name) {
+            var series = chart.series.push(new am4charts.LineSeries());
+            series.dataFields.valueY = field;
+            series.dataFields.categoryX = "mes";
+            series.name = name;
+            series.strokeWidth = 2;
+
+            // Añadir bullets a la serie
+            var bullet = series.bullets.push(new am4charts.CircleBullet());
+            bullet.circle.radius = 4;
+            bullet.circle.fill = am4core.color("#fff");
+            bullet.circle.strokeWidth = 2;
+
+            // Configurar el tooltip para cada serie
+            series.tooltipText = "{name}: [bold]{valueY}[/]";
+            series.tooltip.pointerOrientation = "vertical";
+            series.tooltip.background.cornerRadius = 5;
+            series.tooltip.background.fillOpacity = 0.8;
+            series.tooltip.label.padding(10, 10, 10, 10);
+
+            // Asegurar que el label del tooltip sea visible
+            series.tooltip.label.fill = am4core.color("#000"); // Texto en negro
+
+            // Mostrar el tooltip solo al pasar el cursor sobre la serie
+            series.tooltip.showInViewport = false;
+
+            // Habilitar interacciones en la serie
+            series.interactionsEnabled = true;
+        }
+
+
+        function generaGrafico(dtGrafico, dtseries) {
+
+            // Importar las librerías de amCharts
+            am4core.useTheme(am4themes_animated);
+
+            // Crear el gráfico
+            var chart = am4core.create("chartdiv", am4charts.XYChart);
+
+            // Ejemplo de datos dinámicos
+            chart.data = dtGrafico; //[
+
+            var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
+            categoryAxis.dataFields.category = "mes";
+            categoryAxis.renderer.grid.template.location = 0;
+            categoryAxis.renderer.minGridDistance = 30;
+
+            // Configuración del eje Y (Importe)
+            var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
+            valueAxis.title.text = "Importe";
+
+            for (var i = 0; i < dtseries.length; i++) {
+                var item = dtseries[i];
+                var key = Object.keys(item)[0];
+                var value = item[key];
+
+                var series = chart.series.push(new am4charts.LineSeries());
+                series.dataFields.valueY = key;
+                series.dataFields.categoryX = "mes";
+                series.name = value;
+                series.strokeWidth = 2;
+
+                // Añadir bullets a la serie
+                var bullet = series.bullets.push(new am4charts.CircleBullet());
+                bullet.circle.radius = 4;
+                bullet.circle.fill = am4core.color("#fff");
+                bullet.circle.strokeWidth = 2;
+
+                // Configurar el tooltip para cada serie
+                series.tooltipText = "{name}: [bold]{valueY}[/]";// "{" + value + "}: [bold]{" + key +"}[/]";
+                series.tooltip.pointerOrientation = "vertical";
+                series.tooltip.background.cornerRadius = 5;
+                series.tooltip.background.fillOpacity = 0.8;
+                series.tooltip.label.padding(10, 10, 10, 10);
+
+                // Asegurar que el label del tooltip sea visible
+                series.tooltip.label.fill = am4core.color("#000"); // Texto en negro
+
+                // Mostrar el tooltip solo al pasar el cursor sobre la serie
+                series.tooltip.showInViewport = false;
+
+                // Habilitar interacciones en la serie
+                series.interactionsEnabled = true;
+
+
+            }
+
+            // Habilitar el cursor pero deshabilitar su tooltip
+            chart.cursor = new am4charts.XYCursor();
+            chart.cursor.behavior = "none"; // Deshabilitar pan o zoom
+            chart.cursor.lineX.disabled = true;
+            chart.cursor.lineY.disabled = true;
+            chart.cursor.tooltipEnabled = false; // Deshabilitar el tooltip del cursor
+
+            // Leyenda
+            chart.legend = new am4charts.Legend();
+
+            // Exportar el gráfico
+            chart.exporting.menu = new am4core.ExportMenu();
         }
 
 </script>
diff --git a/Ventas/DashboardVentas.aspx.vb b/Ventas/DashboardVentas.aspx.vb
index 92680092c..34f3fe41a 100644
--- a/Ventas/DashboardVentas.aspx.vb
+++ b/Ventas/DashboardVentas.aspx.vb
@@ -2,6 +2,7 @@
 Imports System.Activities.Statements
 Imports System.Data
 Imports Extensiones
+Imports Newtonsoft.Json.Linq
 
 Partial Class Ventas_DashboardVentas
     Inherits ClsPaginas
@@ -183,7 +184,7 @@ Partial Class Ventas_DashboardVentas
         GvVentasClasificacionxMes.DataBind()
         GvVentasAcumulado.DataBind()
 
-        CargaGraficas(DtVentasGrafica)
+        CargaGraficaNEW(DtVentasGrafica)
 
         'Dim Ano3 = DateTime.Now.Year.ToString()
         'Dim Ano2 = (DateTime.Now.Year - 1).ToString()
@@ -212,42 +213,31 @@ Partial Class Ventas_DashboardVentas
 
     End Sub
 
-    Private Sub CargaGraficas(ByVal DtVentas As DataTable)
-        MuestraGrafica(div_ventas, DtVentas, "Ano", "Total", "", "", "gh2", "")
-    End Sub
+    Private Sub CargaGraficaNEW(ByVal D_T_Datos As DataTable)
+        Dim jsonData As JArray = New JArray()
 
-    Private Sub MuestraGrafica(ByVal divcontainer As HtmlGenericControl, ByVal DTDatos As DataTable, ByVal ColTitle As String, ByVal ColValue As String, ByVal Titulo As String, ByVal SubTitulo As String, ByVal Optional Indicador As String = "gh", ByVal Optional XReferencia As String = "", ByVal Optional YReferencia As String = "")
-        Dim Info As String = ""
-        Dim SBJSScript As StringBuilder = New StringBuilder()
+        For x As Integer = 1 To 12
+            Dim Mes As String = D_T_Datos.Columns(x).ColumnName
+            Dim obj As JObject = New JObject()
+            obj.Add(New JProperty("mes", Mes))
 
-        If DTDatos.Rows.Count > 0 Then
-
-            'For Each DbRow As DataRow In DTDatos.Rows
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno1"), DbRow(ColTitle), Info)
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno2"), DbRow(ColTitle), Info)
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3"), DbRow(ColTitle), Info)
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3Presupuesto"), DbRow(ColTitle), Info)
-            'Next
-
-            'For Each DbRow As DataRow In DTDatos.Rows
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno1"), DateTime.Now.Year - 2, Info)
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno2"), DateTime.Now.Year - 1, Info)
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3"), DateTime.Now.Year, Info)
-            '    Info = String.Format("{2}['{1}',{0}],", DbRow("TotalAno3Presupuesto"), $"PRESUPUESTO {Now.Year}", Info)
-            'Next
-
-            For Each DbRow As DataRow In DTDatos.Rows
-                Info = String.Format("{2}['{1}',{0}],", DbRow(ColValue), DbRow(ColTitle), Info)
+            For y As Integer = 0 To D_T_Datos.Rows.Count - 1
+                obj.Add(New JProperty(D_T_Datos.Rows(y)(0).ToString(), D_T_Datos.Rows(y)(x).ToString()))
             Next
 
-            If Info.Length > 0 Then
-                'Info = Info.Remove(Info.Length - 1, 1)
-                SBJSScript.AppendFormat("graficahighcharts('{0}','{1}','{2}','{3}',[{4}],1,'{5}');", divcontainer.ClientID, Titulo, SubTitulo, YReferencia, Info, XReferencia)
-            End If
-        Else
-            SBJSScript.AppendFormat("graficahighcharts('{0}','{1}','{2}','{3}',[{4}],1,'{5}');", divcontainer.ClientID, Titulo, SubTitulo, YReferencia, " ", XReferencia)
-        End If
+            jsonData.Add(obj)
+        Next
 
-        RegistraScript(SBJSScript.ToString(), Indicador)
+        Dim jsonSeries As JArray = New JArray()
+
+        For y As Integer = 0 To D_T_Datos.Rows.Count - 1
+            Dim obj As JObject = New JObject(New JProperty(D_T_Datos.Rows(y)(0).ToString(), D_T_Datos.Rows(y)(0).ToString()))
+            jsonSeries.Add(obj)
+        Next
+
+        Dim jsdatos As String = jsonData.ToString()
+        Dim jsseries As String = jsonSeries.ToString()
+        RegistraScript($"generaGrafico({jsdatos},{jsseries});")
     End Sub
+
 End Class