ajustes

jdanielgoh · Mar 3, 2023 · eac1d16 · eac1d16
1 parent afa1fe4
commit eac1d16
Show file tree

Hide file tree

Showing 16 changed files with 1,010 additions and 353 deletions.
diff --git a/.env.production b/.env.production
@@ -1,6 +1,6 @@
 NODE_ENV = production
-VUE_APP_TITLE = defunciones-infancia
-VUE_APP_DESCRIPTION = Analizamos las causas de defunciones de niñas, niños y adolescentes en México a través del tiempo 
+VUE_APP_TITLE = mortalidad-infancia
+VUE_APP_DESCRIPTION = Analizamos las causas de mortalidad de niñas, niños y adolescentes en México a través del tiempo 
 VUE_APP_DOMAIN = https://tirandocodigo.mx
-VUE_APP_BASE_ROUTE = /proyectos/defunciones_infancia/
+VUE_APP_BASE_ROUTE = /proyectos/mortalidad-infancia/
 VUE_APP_HASH = true
diff --git a/public/.htaccess b/public/.htaccess
@@ -0,0 +1,9 @@
+<IfModule mod_rewrite.c>
+
+    RewriteEngine On
+    RewriteBase /proyectos/mortalidad-infancia/
+    RewriteRule ^/proyectos/mortalidad-infancia/index\.html$ - [L]
+    RewriteCond %{REQUEST_FILENAME} !-f
+    RewriteCond %{REQUEST_FILENAME} !-d
+    RewriteRule . /proyectos/mortalidad-infancia/index.html [L]
+</IfModule>
diff --git a/public/ico_tc.png b/public/ico_tc.png
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= BASE_URL %>ico_tc.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap&display=swap" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,57 +1,77 @@
 <template>
-  <div id="app" class="contenedor-flex">
+  <div id="app">
+    <Header></Header>
+    <div class="contenedor-flex">
+      <div class="contenedor-texto">
+        <h1>Mortalidad de niñas, niños y adolescentes en México</h1>
+        <p>
+          Este proyecto surge a partir del Datatón sobre la niñez y adolescencia
+          en México 2023. La herramienta está dirigida a personas
+          investigadoras, tomadoras de decisiones y a la ciudadania que busque información
+        </p>
+      </div>
+    </div>
+    <router-view class="vista-router-view" />
+    <Footer></Footer>
 
-    <router-view class="vista-router-view"/>
   </div>
+
 </template>
 
-<style lang="scss">
-#app, svg > text {
-  font-family: 'Source Sans Pro', sans-serif;  -webkit-font-smoothing: antialiased;
+<script>
+import Header from "@/components/navegacion/Header.vue";
+
+import Footer from "@/components/navegacion/Footer.vue";
+export default{
+  components: {
+    Header,
+    Footer
+  }
+}
+</script>
+
+<style lang="scss" >
+
+#app,
+svg > text {
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: black;
 }
-.contenedor-flex{
+.contenedor-flex {
   display: flex;
-
 }
-body{
+body {
   margin: 0;
-  background: rgba(255,255,255,.7);
-  .vista-router-view{
-    padding: 0px 15px;
+  padding: 0px 15px;
+  background: #eee !important;
+
+  .vista-router-view {
     max-width: 1280px;
     margin: auto;
-
   }
-}
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: black;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
+  .contenedor-texto {
+    max-width: 720px;
+    margin: auto;
   }
 }
-h1{
+
+h1 {
   font-size: 30px;
   margin-top: 0px;
-  margin-bottom:10px
+  margin-bottom: 10px;
 }
 @media (max-width: 768px) {
-      h1{
-        font-size: 24px
-      }
-    }
-    .pie{
-      p{
-        b{
-          font-weight: 700;
-        }
-      }
+  h1 {
+    font-size: 24px;
+  }
+}
+.pie {
+  p {
+    b {
+      font-weight: 700;
     }
+  }
+}
 </style>
diff --git a/src/assets/img/iconos/behance.svg b/src/assets/img/iconos/behance.svg
diff --git a/src/assets/img/iconos/instagram.svg b/src/assets/img/iconos/instagram.svg
diff --git a/src/assets/img/iconos/twitter.svg b/src/assets/img/iconos/twitter.svg
diff --git a/src/components/Huevo.vue b/src/components/Huevo.vue
@@ -20,7 +20,7 @@ export default {
     margen: {
       type: Object,
       default: function () {
-        return { arriba: 10, abajo: 10, izquierda: 5, derecha: 10 };
+        return { arriba: 30, abajo: 30, izquierda: 30, derecha: 30 };
       },
     },
 
@@ -33,15 +33,28 @@ export default {
     datos: {
       type: Array,
     },
-		variables: {
-			Array,
-
-		}
+    variables: {
+      Array,
+    },
   },
   data() {
     return {
       parseDate: d3.timeParse("%d/%m/%Y"),
       descripcion: "",
+      meses: [
+        "Enero",
+        "Febrero",
+        "Marzo",
+        "Abril",
+        "Mayo",
+        "Junio",
+        "Julio",
+        "Agosto",
+        "Septiembre",
+        "Oct.",
+        "Noviembre",
+        "Diciembre",
+      ],
     };
   },
 
@@ -54,13 +67,13 @@ export default {
     this.eje_y = this.svg.select("g.eje-y");
 
     this.configurandoDimensionesSVG();
-    this.rmin = this.alto * 0.21;
-    this.rmax = this.alto * 0.49;
+
     if (this.datos.length > 0) {
       this.configurandoDimensionesStreams();
       this.agregandoNomenclatura();
       this.creandoStreams();
     }
+    window.addEventListener("resize", this.reescalandoPantalla);
   },
   methods: {
     configurandoDimensionesSVG() {
@@ -69,6 +82,8 @@ export default {
         this.margen.izquierda -
         this.margen.derecha;
       this.alto = this.ancho;
+      this.rmin = this.alto * 0.21;
+      this.rmax = this.alto * 0.49;
       this.svg
         .attr("width", this.ancho + this.margen.izquierda + this.margen.derecha)
         .attr("height", this.alto + this.margen.arriba + this.margen.abajo);
@@ -86,16 +101,19 @@ export default {
         .range([-Math.PI * 0.5, 1.5 * Math.PI]);
       this.escalaRad = d3
         .scaleLinear()
-        .domain([0, d3.max(
+        .domain([
+          0,
+          d3.max(
             this.datos.map((d) => d3.sum(this.variables.map((dd) => d[dd.cve])))
-          )])
+          ),
+        ])
         //.domain([0,1])
         .range([this.rmin, this.rmax]);
-      
-			this.datos_apilados = d3
+
+      this.datos_apilados = d3
         .stack()
         .offset(d3.stackOffsetNone)
-        .keys(this.variables.map(d=>d.cve))(this.datos);
+        .keys(this.variables.map((d) => d.cve))(this.datos);
       this.reordenamientoDatosApilados();
     },
     reordenamientoDatosApilados() {
@@ -125,15 +143,18 @@ export default {
           contador_apilador += diccionario_apilado[cats].delta;
         }
       }
-			console.log(this.datos_apilados)
     },
 
     agregandoNomenclatura() {
+      this.grupo_contenedor.selectAll(".lineas-guia").remove();
+      this.grupo_contenedor.selectAll(".texto-guia").remove();
+
       this.grupo_contenedor
         .selectAll("lins")
         .data(d3.range(1, 13))
         .enter()
         .append("line")
+        .attr("class", "lineas-guia")
         .attr("x1", (d) => this.rmin * Math.cos(this.escalaAng(d)))
         .attr("x2", (d) => this.rmax * Math.cos(this.escalaAng(d)))
         .attr("y1", (d) => this.rmin * Math.sin(this.escalaAng(d)))
@@ -146,14 +167,67 @@ export default {
         .data(d3.range(1, 13))
         .enter()
         .append("text")
+        .attr("class", "texto-guia")
+
         .attr("x", (d) => this.rmax * Math.cos(this.escalaAng(d)))
         .attr("y", (d) => this.rmax * Math.sin(this.escalaAng(d)))
-        .text((d) => "mes " + d)
-        .style("fill-opacity", ".5")
+        .text((d) => this.meses[parseInt(d - 1)])
+        .style("fill-opacity", ".8")
         .style("font-family", "Roboto")
         //.style("text-anchor","middle")
         .style("dominant-baseline", "middle")
+        .style("text-anchor", "middle")
         .style("font-size", "14px");
+
+      /**
+       * Lineal
+       */
+      this.grupo_contenedor.selectAll(".radial-escala").remove();
+      this.grupo_contenedor
+        .attr("text-anchor", "middle")
+        .call((g) =>
+          g
+            .append("text")
+            .attr("text-anchor", "end")
+            .attr("x", "-0.5em")
+            .attr(
+              "y",
+              (d) => -this.escalaRad(this.escalaRad.ticks(5).pop()) - 10
+            )
+            .attr("dy", "-1em")
+            .style("fill", "#1a1a1a")
+            .attr("class", "radial-escala")
+            .style("fill", "#000")
+            .text("Defunciones")
+     
+        )
+        .call((g) =>
+          g
+            .selectAll("g")
+            .data(this.escalaRad.ticks(5))
+            .join("g")
+            .attr("fill", "none")
+            .call((g) =>
+              g
+                .append("circle")
+                .attr("class", "radial-escala")
+
+                .style("stroke", "#000")
+                .style("stroke-opacity", 0.5)
+                .attr("r", this.escalaRad)
+            )
+            .call((g) =>
+              g
+                .append("text")
+                .attr("y", (d) => -this.escalaRad(d))
+                .attr("dy", "0.35em")
+                .attr("class", "radial-escala")
+
+                .style("fill", "#000")
+                .text(this.escalaRad.tickFormat(6, "s"))
+            
+            )
+        );
     },
     creandoStreams() {
       this.area = d3
@@ -172,24 +246,47 @@ export default {
         )
         .curve(d3.curveCatmullRomClosed);
 
-      this.grupo_contenedor
+      this.streams_apilados = this.grupo_contenedor
         .selectAll("streams")
         .data(this.datos_apilados)
         .enter()
         .append("path")
         .attr("class", "areas")
         .style("fill-opacity", 0.6)
-				.style("fill", (d) => this.variables.filter(v=>v.cve == d.key)[0].color)
+        .style(
+          "fill",
+          (d) => this.variables.filter((v) => v.cve == d.key)[0].color
+        )
+        .attr("d", this.area)
+        .attr("class", (d) => "cve-" + d.key);
+    },
+    actualizandoStreams() {
+      this.streams_apilados
+        .data(this.datos_apilados)
+
+        .transition()
+        .duration(1000)
+        .style(
+          "fill",
+          (d) => this.variables.filter((v) => v.cve == d.key)[0].color
+        )
         .attr("d", this.area)
         .attr("class", (d) => "cve-" + d.key);
     },
+    reescalandoPantalla() {
+      this.grupo_contenedor.selectAll("path").remove();
+      this.configurandoDimensionesSVG();
+
+      this.configurandoDimensionesStreams();
+      this.agregandoNomenclatura();
+      this.creandoStreams();
+    },
   },
   watch: {
     datos(nv) {
-			this.grupo_contenedor.selectAll("path").remove()
       this.configurandoDimensionesStreams();
       this.agregandoNomenclatura();
-      this.creandoStreams();
+      this.actualizandoStreams();
     },
   },
 };