From 301a4e9f755cb54d4dcab9cb65149698f4d788ee Mon Sep 17 00:00:00 2001
From: Alejandro Osornio <50227494+AOx0@users.noreply.github.com>
Date: Tue, 14 Nov 2023 12:13:11 -0600
Subject: [PATCH] Add Bar definition check and working pie

---
 assets/script.js     | 79 +++++++++++++++++++++++++++++++++++++++++---
 src/bin/api.rs       | 52 +++++++++++++++++++++++++++++
 templates/hello.html | 49 +++++++++++++++++++++++----
 3 files changed, 169 insertions(+), 11 deletions(-)

diff --git a/assets/script.js b/assets/script.js
index 7f1c2d4..01fef3c 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -166,6 +166,75 @@ function init_draw_pinned_chart(num, data, cfg) {
   });
 }
 
+
+function load_razon_anio(data, cfg) {
+  let input_fini = document.getElementById(`afini-${cfg['num']}`);
+  let input_init = document.getElementById(`ainit-${cfg['num']}`);
+
+  if (input_fini != undefined && input_fini != undefined) {
+    let err = false;
+    
+    if (data['annio_inicio'] < 2016 || data['annio_inicio'] > 2023) {
+      input_init.classList.add("text-rose-300")
+      err = true
+    } else {
+      input_init.classList.remove("text-rose-300")
+    };
+    
+    if (data['annio_final'] < 2016 || data['annio_final'] > 2023) {
+      input_fini.classList.add("text-rose-300")
+      err = true
+    } else {
+      input_fini.classList.remove("text-rose-300")
+    };
+
+    if (err) return;
+  }
+
+  fetch(cfg.endpoint,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data)
+    }
+  )
+    .then((response) => response.json())
+    .then((json) => {
+    const ctx = document.getElementById(`pie-${cfg.num}`);
+
+    if( window.myBar4 === undefined) {
+      window.myBar4 = new Chart(ctx, {
+        type: 'pie',
+        data: {
+          labels: ["Alto", "Bajo"],
+          datasets: [{
+            label: "Razon delitos de alto y bajo impacto",
+            data: [json.alto, json.bajo],
+            borderWidth: 1
+          }],
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    } else {
+      window.myBar4.data.datasets = [{
+        label: "Razon delitos de alto y bajo impacto",
+        data: [json.alto, json.bajo],
+        borderWidth: 1
+      }];
+      window.myBar4.data.labels = ["Alto", "Bajo"];
+      window.myBar4.update();
+    }    
+  });
+}
+
 function change_map_info(id, edo, valores) {
     let name = document.getElementById(`${id}-name`);
     let value = document.getElementById(`${id}-value`);
@@ -371,11 +440,11 @@ function load_map_data(data, cfg, chart_cfg, valores) {
       body: JSON.stringify(data)
     }
   )
-    .then((response) => response.json())
-    .then((json) => {
-      update_map_data(cfg.num, json, valores);
-      change_map_info(cfg.num, undefined, valores);      
-    });
+  .then((response) => response.json())
+  .then((json) => {
+    update_map_data(cfg.num, json, valores);
+    change_map_info(cfg.num, undefined, valores);      
+  });
 }
 
 function calculateMean(numbers) {
diff --git a/src/bin/api.rs b/src/bin/api.rs
index ffbc246..e485c5c 100644
--- a/src/bin/api.rs
+++ b/src/bin/api.rs
@@ -152,6 +152,10 @@ async fn root() -> Hello<'static> {
                 name: "Top delitos por años",
                 href: "#incidentes-por-anio",
             },
+            Section {
+                name: "Razón de delitos de bajo y alto impacto",
+                href: "#razones-por-anio",
+            },
             Section {
                 name: "Mapas de calor por Mes y Año",
                 href: "#incidentes-por-mes",
@@ -206,6 +210,20 @@ struct CantidadesPorMes {
     meses: Vec<String>,
 }
 
+#[derive(Serialize, Debug, Default)]
+struct CantidadesAltoYBajo {
+    alto: u64,
+    bajo: u64,
+}
+
+#[derive(Debug, Deserialize)]
+struct SolicitudAltoYBajo {
+    #[serde(default = "min_year")]
+    annio_inicio: u16,
+    #[serde(default = "max_year")]
+    annio_final: u16,
+}
+
 #[derive(Debug, Deserialize)]
 struct SolicitudCantidadesPorMes {
     #[serde(default = "min_year")]
@@ -817,6 +835,39 @@ async fn top_por_anio(
     .into()
 }
 
+async fn cantidad_alto_y_bajo(
+    State(state): State<Shared>,
+    Json(sol): Json<SolicitudAltoYBajo>,
+) -> Json<CantidadesAltoYBajo> {
+    let SolicitudAltoYBajo {
+        annio_inicio,
+        annio_final,
+    } = dbg!(sol);
+
+    let annio_inicio = annio_inicio - OFFSET;
+    let annio_final = annio_final - OFFSET;
+
+    let (bajo,): (i64,) = sqlx::query_as(&format!(
+        "SELECT COUNT(*) FROM delitos WHERE id_categoria = 1 AND id_anio_hecho BETWEEN {annio_inicio} AND {annio_final};",
+    ))
+    .fetch_one(&state.db)
+    .await
+    .unwrap();
+
+    let (alto,): (i64,) = sqlx::query_as(&format!(
+        "SELECT COUNT(*) FROM delitos WHERE id_categoria != 1 AND id_anio_hecho BETWEEN {annio_inicio} AND {annio_final};",
+    ))
+    .fetch_one(&state.db)
+    .await
+    .unwrap();
+
+    CantidadesAltoYBajo {
+        alto: alto as u64,
+        bajo: bajo as u64,
+    }
+    .into()
+}
+
 async fn untilnow(State(state): State<Shared>) -> String {
     let utc: DateTime<Utc> = Utc::now();
     let year = utc.format("%Y").to_string();
@@ -882,6 +933,7 @@ async fn main() -> anyhow::Result<()> {
         .route("/dias_percent", post(dias_porcentajes))
         .route("/horas_percent", post(horas_porcentajes))
         .route("/top_por_anio", post(top_por_anio))
+        .route("/alto_y_bajo", post(cantidad_alto_y_bajo))
         .route("/c_por_mes", post(cantidades_por_mes))
         .route("/date/upnow", get(untilnow))
         .with_state(state)
diff --git a/templates/hello.html b/templates/hello.html
index 4fb4a63..cc52123 100644
--- a/templates/hello.html
+++ b/templates/hello.html
@@ -58,9 +58,11 @@
         });
         $watch('chart_cfg.colores_en_mapa', value => {
           if (value) {
-            chart_cfg.pinned.forEach((e, i) => {
-              document.getElementById(`${num}-${e}`).style.fill = window.myBar.data.datasets[i + 1].borderColor;
-            });
+            if (!(window.myBar === undefined)) {
+              chart_cfg.pinned.forEach((e, i) => {
+                document.getElementById(`${num}-${e}`).style.fill = window.myBar.data.datasets[i + 1].borderColor;
+              });
+            }
           } else {
             for (let i = 0; i < NOMBRES.length; i++) {
               // There's no map zone for undefined areas and outside the city
@@ -72,9 +74,11 @@
         });
         $watch('valores', value => {
           if (value) {
-            chart_cfg.pinned.forEach((e, i) => {
-              document.getElementById(`${num}-${e}`).style.fill = window.myBar.data.datasets[i + 1].borderColor;
-            });
+            if (!(window.myBar === undefined)) {
+              chart_cfg.pinned.forEach((e, i) => {
+                document.getElementById(`${num}-${e}`).style.fill = window.myBar.data.datasets[i + 1].borderColor;
+              });
+            }
           } else {
             for (let i = 0; i < NOMBRES.length; i++) {
               // There's no map zone for undefined areas and outside the city
@@ -244,6 +248,39 @@ <h1 class="text-3xl font-bold pb-3">Top delitos por años</h1>
         <canvas id="pinned-4"></canvas>
       </div>
     </section>
+    <section x-init="
+        $watch('data', value => { 
+            load_razon-anio(data, { num: 5, endpoint: '/alto_y_bajo' }); 
+          }
+        );
+        load_razon_anio(data, { num: 5, endpoint: '/alto_y_bajo' }); 
+        " x-data="{ 
+          data: { annio_inicio: 2023, annio_final: 2023 }, 
+      }" id="razones-por-anio" class="flex flex-col p-3">
+      <div class="flex flex-col md:flex-row md:justify-between">
+        <h1 class="text-3xl font-bold pb-3">Razón de delitos de bajo y alto impacto</h1>
+        <div class="flex flex-col md:w-1/2 ml-5 gap-y-1">
+          <div class="flex flex-row gap-x-2">
+            <label for="afini-5">Año de corte: </label>
+            <input id="afini-5" x-model.number="data['annio_final']" type="number" min="2016" max="2023" step="1"
+              value="2023" />
+          </div>
+          <div class="flex flex-row gap-x-2">
+            <label for="ainit-5">Año de inicio: </label>
+            <input id="ainit-5" x-model.number="data['annio_inicio']" type="number" min="2016" max="2023" step="1"
+              value="2016" />
+          </div>
+        </div>
+      </div>
+      <div class="flex md:flex-row flex-row gap-x-4 min-w-full md:max-h-full mt-2 p-5 border rounded p-5">
+        <div class="w-1/2">
+          <canvas id="pie-5"></canvas>
+        </div>
+        <div class="w-1/2">
+          <canvas id="pinned-6"></canvas>
+        </div>
+      </div>
+    </section>
     <section x-init="
         $watch('data', value => { 
             load_years_data(data, { num: 2, endpoint: '/anio_percent' }, valores);