Add sections and styles to report chapters, including navigation and …

…new colors for charts.
DemocraciaEnRed · Feb 19, 2025 · c889304 · c889304
1 parent a284e55
commit c889304
Show file tree

Hide file tree

Showing 14 changed files with 306 additions and 118 deletions.
diff --git a/src/components/informe/informe.astro b/src/components/informe/informe.astro
@@ -45,6 +45,11 @@ import { Icon } from "astro-icon/components";
       display: none;
     }
   }
+  @media screen and (orientation: landscape) {
+    #slide-overlay {
+      display: none;
+    }
+  }
 </style>
 
 <script>
@@ -75,4 +80,7 @@ import { Icon } from "astro-icon/components";
       initReveal();
     } //else deck.destroy();
   });
+  // deck.addEventListener("ready", function (event) {
+  //   deck.slide(2, 7); //go to slide horizontal / vertical
+  // });
 </script>
diff --git a/src/components/informe/item-slider/caratula.astro b/src/components/informe/item-slider/caratula.astro
@@ -4,8 +4,49 @@ import silent from "../../../assets/silent.png";
 ---
 
 <section class="r-stretch">
-  <div class="flex flex-col items-center">
-    <h2 class="text-5xl">Caratula principal</h2>
-    <Image src={silent} alt="mujer silenciada" height={700} class="h-1/6" />
+  <div class="flex flex-col items-center p-4">
+    <h2 class="text-5xl">Indice</h2>
+    <div class="w-8/12 mx-auto text-left leading-8">
+      <ul class="list-disc">
+        <li>
+          <a href="#/">indice</a>
+        </li>
+        <li>
+          <a href="#/seccionViolencia">Violencia</a>
+          <ul class="dashed px-4">
+            <li>
+              <a href="#/sectionViolenciasViolencia"
+                >violencia sufrida por las encuestadas</a
+              >
+            </li>
+            <li>
+              <a href="#/sectionViolenciasMomento"
+                >momento de ocurrencia de la violencia</a
+              >
+            </li>
+            <li>
+              <a href="#/sectionViolenciasAutores">tipos de violencias</a>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a href="#/seccionMitigacion">Mitigacion</a>
+          <ul class="dashed px-4">
+            <li><a href="#/sectionPercepcionesIngresos">Medidas</a></li>
+            <li><a href="#/sectionPercepcionesDificultad">Grado</a></li>
+            <li><a href="#/sectionPercepcionesNoticias">Impacto</a></li>
+            <li><a href="#/sectionPercepcionesCuidado">Reaccion</a></li>
+          </ul>
+        </li>
+        <li><a href="#/seccionPercepciones">Percepciones</a></li>
+        <li><a href="#/seccionEncuestadas">Encuestadas</a></li>
+      </ul>
+    </div>
   </div>
 </section>
+
+<style>
+  .dashed {
+    list-style-type: "- ";
+  }
+</style>
diff --git a/src/components/informe/item-slider/encuestadas/index.astro b/src/components/informe/item-slider/encuestadas/index.astro
@@ -4,7 +4,7 @@ import Graph from "./graph.astro";
 ---
 
 <section>
-  <section>
+  <section id="seccionEncuestadas">
     <div>
       <h2 class="text-5xl">Capítulo con información sobre las encuestadas</h2>
       <p class="text-sm">

diff --git a/src/components/informe/item-slider/mitigacion/grado.astro b/src/components/informe/item-slider/mitigacion/grado.astro
@@ -2,42 +2,77 @@
 
 ---
 
-<section id="sectionMitigacionGrado" class="r-stretch">
-  <div id="graficoMitigacionGrado"></div>
+<section class="r-stretch">
+  <div id="sectionMitigacionGrado" class="w-10/12 h-full m-auto">
+    <div id="graficoMitigacionGrado"></div>
+  </div>
 </section>
 <script>
+  import { colors } from "../../../../utils/constants";
   import { observer } from "../../../../utils/observer";
   import * as echarts from "echarts";
   const chartDom = document.getElementById("graficoMitigacionGrado");
   const chart = echarts.init(chartDom);
 
   const option = {
-  title: {
-    text: "Grado en que ayudan las medidas a proteger a las mujeres periodistas",
-    textStyle: {
-      fontSize: 40,
-      fontWeight: "normal",
-      color: "#000",
+    color: colors,
+    title: {
+      text: "Grado en que ayudan las medidas a proteger a las mujeres periodistas",
+      textStyle: {
+        fontSize: 40,
+        fontWeight: "normal",
+        color: "#000",
+      },
+      left: "center",
     },
-    left: "center",
-  },    
-  legend: {},
-  tooltip: {},
-  dataset: {
-    dimensions: ['product', "Nada", "Poco","Bastante","Mucho"],
-    source: [
-      { product: 'Protocolos de igualdad de género en las redacciones', "Nada": 29, "Poco": 68, "Bastante": 65, "Mucho": 39 },
-      { product: 'Procesos internos para resguardar a las víctimas en espacios laborales', "Nada": 27, "Poco": 56, "Bastante": 67, "Mucho": 51 },
-      { product: 'Denuncias públicas sobre casos de violencia en ejercicio del periodismo', "Nada": 29, "Poco": 50, "Bastante": 74, "Mucho": 53 },
-      { product: 'Capacitaciones sobre seguridad digital para periodistas', "Nada": 23, "Poco": 45, "Bastante": 75, "Mucho": 59 }
-    ]
-  },
-  yAxis: { type: 'category' },
-  xAxis: {},
-  // Declare several bar series, each will be mapped
-  // to a column of dataset.source by default.
-  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
-};
+    legend: { bottom: 0 },
+    tooltip: {},
+    dataset: {
+      dimensions: ["product", "Nada", "Poco", "Bastante", "Mucho"],
+      source: [
+        {
+          product: "Protocolos de igualdad de género en las redacciones",
+          Nada: 29,
+          Poco: 68,
+          Bastante: 65,
+          Mucho: 39,
+        },
+        {
+          product:
+            "Procesos internos para resguardar a las víctimas en espacios laborales",
+          Nada: 27,
+          Poco: 56,
+          Bastante: 67,
+          Mucho: 51,
+        },
+        {
+          product:
+            "Denuncias públicas sobre casos de violencia en ejercicio del periodismo",
+          Nada: 29,
+          Poco: 50,
+          Bastante: 74,
+          Mucho: 53,
+        },
+        {
+          product: "Capacitaciones sobre seguridad digital para periodistas",
+          Nada: 23,
+          Poco: 45,
+          Bastante: 75,
+          Mucho: 59,
+        },
+      ],
+    },
+    yAxis: { type: "category" },
+    xAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [
+      { type: "bar" },
+      { type: "bar" },
+      { type: "bar" },
+      { type: "bar" },
+    ],
+  };
   const initGraph = () => {
     const section = document.getElementById("sectionMitigacionGrado");
     chartDom.style.width = section.offsetWidth + "px";

diff --git a/src/components/informe/item-slider/mitigacion/impacto.astro b/src/components/informe/item-slider/mitigacion/impacto.astro
@@ -2,41 +2,73 @@
 
 ---
 
-<section id="sectionMitigacionImpacto" class="r-stretch">
-  <div id="graficoMitigacionImpacto"></div>
+<section class="r-stretch">
+  <div id="sectionMitigacionImpacto" class="w-10/12 h-full m-auto">
+    <div id="graficoMitigacionImpacto"></div>
+  </div>
 </section>
 <script>
+  import { colors } from "../../../../utils/constants";
   import { observer } from "../../../../utils/observer";
   import * as echarts from "echarts";
   const chartDom = document.getElementById("graficoMitigacionImpacto");
   const chart = echarts.init(chartDom);
 
   const option = {
-  title: {
-    text: "Impacto de las capacitaciones en el ámbito laboral sobre temáticas de géneros",
-    textStyle: {
-      fontSize: 40,
-      fontWeight: "normal",
-      color: "#000",
+    color: colors,
+    title: {
+      text: "Impacto de las capacitaciones en el ámbito laboral sobre temáticas de géneros",
+      textStyle: {
+        fontSize: 40,
+        fontWeight: "normal",
+        color: "#000",
+      },
+      left: "center",
     },
-    left: "center",
-  },    
-  legend: {},
-  tooltip: {},
-  dataset: {
-    dimensions: ['product', "Nada", "Poco","Bastante","Mucho", "NS/NC"],
-    source: [
-      { product: 'Impacto en el tratamiento de las noticias', "Nada": 20, "Poco": 47, "Bastante": 44, "Mucho": 19, "NS/NC": 85 },
-      { product: 'Impacto en la cultura organizacional del medio', "Nada": 33, "Poco": 58, "Bastante": 21, "Mucho": 10, "NS/NC": 93 },
-      { product: 'Impacto en el conocimiento y sensibilización sobre temáticas de géneros', "Nada": 19, "Poco": 48, "Bastante": 39, "Mucho": 20, "NS/NC": 89 },
-    ]
-  },
-  yAxis: { type: 'category' },
-  xAxis: {},
-  // Declare several bar series, each will be mapped
-  // to a column of dataset.source by default.
-  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
-};
+    legend: { bottom: 0 },
+    tooltip: {},
+    dataset: {
+      dimensions: ["product", "Nada", "Poco", "Bastante", "Mucho", "NS/NC"],
+      source: [
+        {
+          product: "Impacto en el tratamiento de las noticias",
+          Nada: 20,
+          Poco: 47,
+          Bastante: 44,
+          Mucho: 19,
+          "NS/NC": 85,
+        },
+        {
+          product: "Impacto en la cultura organizacional del medio",
+          Nada: 33,
+          Poco: 58,
+          Bastante: 21,
+          Mucho: 10,
+          "NS/NC": 93,
+        },
+        {
+          product:
+            "Impacto en el conocimiento y sensibilización sobre temáticas de géneros",
+          Nada: 19,
+          Poco: 48,
+          Bastante: 39,
+          Mucho: 20,
+          "NS/NC": 89,
+        },
+      ],
+    },
+    yAxis: { type: "category" },
+    xAxis: {},
+    // Declare several bar series, each will be mapped
+    // to a column of dataset.source by default.
+    series: [
+      { type: "bar" },
+      { type: "bar" },
+      { type: "bar" },
+      { type: "bar" },
+      { type: "bar" },
+    ],
+  };
   const initGraph = () => {
     const section = document.getElementById("sectionMitigacionImpacto");
     chartDom.style.width = section.offsetWidth + "px";

diff --git a/src/components/informe/item-slider/mitigacion/index.astro b/src/components/informe/item-slider/mitigacion/index.astro
@@ -9,7 +9,7 @@ import Reaccion from "./reaccion.astro";
 ---
 
 <section>
-  <section>
+  <section id="seccionMitigacion">
     <div>
       <h2 class="text-5xl">Capitulo sobre mitigación</h2>
       <p class="text-sm">
@@ -22,7 +22,7 @@ import Reaccion from "./reaccion.astro";
   <TextoGrado />
   <Grado />
   <TextoImpacto />
-  <Impacto />  
+  <Impacto />
   <TextoReaccion />
-  <Reaccion />    
+  <Reaccion />
 </section>
diff --git a/src/components/informe/item-slider/mitigacion/medidas.astro b/src/components/informe/item-slider/mitigacion/medidas.astro
@@ -5,7 +5,7 @@ import Background from "../background.astro";
 
 <section id="sectionMitigacionMedidas" class="r-stretch">
   <Background image={microphoneImage} position="-right-24 -bottom-20" />
-  <div id="medidas-container" class="w-10/12 h-full m-auto">
+  <div id="mitigacion-medidas-container" class="w-10/12 h-full m-auto">
     <div id="graficoMitigacionMedidas"></div>
   </div>
 </section>
@@ -43,18 +43,14 @@ import Background from "../background.astro";
     series: [
       {
         type: "bar",
-        data: [33,21,37,33,24,21,4],
+        data: [33, 21, 37, 33, 24, 21, 4],
         color: "#401F71",
       },
     ],
   };
 
-
-
-
-
   const resizeChart = () => {
-    const section = document.getElementById("medidas-container");
+    const section = document.getElementById("mitigacion-medidas-container");
     if (!chartDom) return;
     chartDom.style.width = section?.offsetWidth + "px";
     chartDom.style.height = section?.offsetHeight