From 0b7f82538724c8fe1878b43de629365d22a0e6e4 Mon Sep 17 00:00:00 2001 From: David Itehua Xalamihua Date: Sat, 24 May 2025 12:05:16 -0600 Subject: [PATCH] =?UTF-8?q?cambios=20btn=20flotante,=20men=C3=BA=20y=20se?= =?UTF-8?q?=20a=C3=B1ade=20gr=C3=A1fica=20de=20visitas=20por=20red=20socia?= =?UTF-8?q?l?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Documents_ref/conf.sql | 3 +- main.py | 18 + static/template/navbar_footer.css | 83 +-- static/y_img/logos/chat_ia_formha.svg | 88 +++ static/y_img/methodology/m-02.svg | 937 +++++++++++++++++++++----- templates/h_tmp_usr/g_metrics.html | 55 +- templates/z_comps/boton_chat.html | 10 +- templates/z_comps/navbar.html | 2 - 8 files changed, 980 insertions(+), 216 deletions(-) create mode 100644 static/y_img/logos/chat_ia_formha.svg diff --git a/Documents_ref/conf.sql b/Documents_ref/conf.sql index 9379459..f58f685 100644 --- a/Documents_ref/conf.sql +++ b/Documents_ref/conf.sql @@ -99,6 +99,7 @@ SELECT END AS nombre_legible, COUNT(source_name) AS total FROM visited_from -GROUP BY source_name; +GROUP BY source_name +ORDER BY total DESC; -- select * from visited_from; \ No newline at end of file diff --git a/main.py b/main.py index 1ed4a5c..f2e23b0 100644 --- a/main.py +++ b/main.py @@ -893,6 +893,22 @@ def data_metrics(): LIMIT 3; """ + q_visited_from = """ + SELECT + CASE source_name + WHEN 'li' THEN 'LinkedIn' + WHEN 'wa' THEN 'WhatsApp' + WHEN 'fb' THEN 'Facebook' + WHEN 'x' THEN 'X' + ELSE 'Otro' + END AS nombre_legible, + COUNT(source_name) AS total + FROM visited_from + GROUP BY source_name + ORDER BY total DESC; + """ + + data_contact = { "count_monthly": dbUsers.get_all_data(q_contact, ()), "count_state": dbUsers.get_all_data(q_count_state, ()), @@ -902,7 +918,9 @@ def data_metrics(): "group_status": dbUsers.get_all_data(q_group_status, ()), "top_ten": dbUsers.get_all_data(q_posts_mas_vistos, ()), "top_three_authors": dbUsers.get_all_data(q_top_three_authors, ()), + "visited_from": dbUsers.get_all_data(q_visited_from, ()) } + return jsonify(data_contact) diff --git a/static/template/navbar_footer.css b/static/template/navbar_footer.css index 269737d..3fc712e 100644 --- a/static/template/navbar_footer.css +++ b/static/template/navbar_footer.css @@ -1,17 +1,21 @@ :root { --navbar-footer-color: #5d9dd1; --font-size-formha: 1.2rem; + --border-radius-button: 15px; + --button-padding-y: 8px; + --button-padding-x: 15px; + --button-background: transparent; + --button-hover-background: rgba(255, 255, 255, 0.2); + --button-active-background: rgba(2, 62, 138, 0.8); } - .navbar-custom { background-color: var(--navbar-footer-color) !important; font-size: var(--font-size-formha); - padding-top: 15px; - padding-bottom: 15px; - /* min-height: 80px; */ + padding: 15px 0; - & .navbar-brand, .nav-link { + & .navbar-brand, + & .nav-link { color: white !important; } @@ -19,53 +23,38 @@ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } - & .navbar-nav .nav-item .nav-link { - position: relative; - text-decoration: none; + & .navbar-nav .nav-item { + margin: 0 0.5em; + border: 2px solid white; + border-radius: var(--border-radius-button); + background-color: var(--button-background); + transition: background-color 0.3s ease; + + & .nav-link { + display: inline-block; + padding: var(--button-padding-y) var(--button-padding-x); + position: relative; + text-decoration: none; + + &.active { + background-color: var(--button-active-background); + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + transition: background-color 0.3s ease, box-shadow 0.3s ease; + border-radius: var(--border-radius-button); + } + } + + &:hover { + background-color: var(--button-hover-background); + } } - /* Efecto de hover */ - & .navbar-nav.effect-3 .nav-item .nav-link:before, - & .navbar-nav.effect-3 .nav-item .nav-link:after { - content: ""; - height: 1px; - width: 0; - opacity: 0; - background-color: #fff; - position: absolute; - transition: all .4s; - } - - & .navbar-nav.effect-3 .nav-item .nav-link:before { - top: 0px; - } - - & .navbar-nav.effect-3 .nav-item .nav-link:after { - bottom: 0px; - right: 0; - } - - /* Aplicar el efecto de hover al enlace activo */ - & .navbar-nav.effect-3 .nav-item .nav-link.active:before, - & .navbar-nav.effect-3 .nav-item .nav-link.active:after { - width: calc(100% + 0px); - opacity: 0.9; - } - - /* Aplicar el efecto de hover al hacer hover */ - & .navbar-nav.effect-3 .nav-item .nav-link:hover:before, - & .navbar-nav.effect-3 .nav-item .nav-link:hover:after { - width: calc(100% + 0px); - opacity: 0.9; - } - - & li.nav-item { - margin-left: 1em; - margin-right: 1em; - } } + + +/* ############################# */ .logo { background-color: white; border-radius: 50%; diff --git a/static/y_img/logos/chat_ia_formha.svg b/static/y_img/logos/chat_ia_formha.svg new file mode 100644 index 0000000..15c2e65 --- /dev/null +++ b/static/y_img/logos/chat_ia_formha.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/y_img/methodology/m-02.svg b/static/y_img/methodology/m-02.svg index 82dfd78..37b0deb 100644 --- a/static/y_img/methodology/m-02.svg +++ b/static/y_img/methodology/m-02.svg @@ -1,226 +1,843 @@ - + - + - EXPERIENCIA DE SERVICIO - Acompañamos cada paso del proyecto, asegurando una experiencia cercana, ágil y efectiva. - SOSTENIBILIDAD DEL CAMBIO - Reforzamos capacidades internas para que el valor se mantenga a largo plazo, más allá del proyecto. - ANÁLISIS DE DATOS - Identificamos información clave para entender las metas, retos y oportunidades de tu empresa. - METODOLOGÍA - Implementamos soluciones con el enfoque humano, técnico y estratégico. - PERSONALIZACIÓN - IMPACTO - - - - 01 - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - 03 - + + + + + + + + + - - + + - - - 05 - + + + + + + + + + - - + + - - - 04 - + + + + + + + + + - + + + + + + + + + + + + + + + + - - - 02 - + + + + + + + + + - + - Diseñamos estrategías a la medida, utilizando metodologías especializadas y herramientas tecnológicas. - Medimos resultados con métricas claras para asegurar que cada intervención tenga efectos tangibles. - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - + + - - + + + + + + - - - - + + + + - - - - - - + + + + - - + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/h_tmp_usr/g_metrics.html b/templates/h_tmp_usr/g_metrics.html index 6547ebd..00a3c85 100644 --- a/templates/h_tmp_usr/g_metrics.html +++ b/templates/h_tmp_usr/g_metrics.html @@ -62,6 +62,11 @@ +
+
+ +
+
@@ -462,7 +467,6 @@ // dbTop3Autores dbTop3Autores let top_3 = data.top_three_authors; - console.log(top_3); let lbl_top_3 = top_3.map(e => `${e[0]}`); let val_top_3 = top_3.map(e => e[1]); let colors_top_3 = top_3.map((_, i) => getColor(i)); @@ -506,6 +510,55 @@ } }); + // dbVisitedFrom + + + + let visited_from = data.visited_from; + let lbl_visited_from = visited_from.map(e => `${e[0]}`); + let val_visited_from = visited_from.map(e => e[1]); + let colors_visited_from = visited_from.map((_, i) => getColor(i)); + let ctx9 = document.getElementById("dbVisitedFrom"); + + new Chart(ctx9, { + type: 'bar', + data: { + labels: lbl_visited_from, + datasets: [{ + label: 'Visto', + data: val_visited_from, + backgroundColor: colors_visited_from, + borderWidth: 1 + }] + }, + options: { + indexAxis: 'x', + elements: { + bar: { + borderWidth: 2, + cursor: 'pointer' // Cursor de pointer para indicar interactividad + } + }, + responsive: true, + plugins: { + tooltip: { + callbacks: { + label: function (tooltipItem) { + return tooltipItem.dataset.label + ': ' + tooltipItem.raw; + } + } + }, + legend: { + display: false + }, + title: { + display: true, + text: 'Visitas por redes sociales' + } + } + } + }); + diff --git a/templates/z_comps/boton_chat.html b/templates/z_comps/boton_chat.html index fd6ac98..f323eae 100644 --- a/templates/z_comps/boton_chat.html +++ b/templates/z_comps/boton_chat.html @@ -1,8 +1,8 @@
- logo diff --git a/templates/z_comps/navbar.html b/templates/z_comps/navbar.html index 1c9d3a1..85474cb 100644 --- a/templates/z_comps/navbar.html +++ b/templates/z_comps/navbar.html @@ -1,5 +1,3 @@ - -