From 01aeca00fac840179e8c57461565b6c9d8eee2aa Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 1 Sep 2024 14:51:28 -0700
Subject: [PATCH] translate bubble chart checkbox labels and text
---
src/assets/text/text_en.js | 14 ++++-
src/assets/text/text_es.js | 14 ++++-
src/components/BeeswarmChart.vue | 97 ++++++++++++++++----------------
src/main.js | 2 +-
4 files changed, 76 insertions(+), 51 deletions(-)
diff --git a/src/assets/text/text_en.js b/src/assets/text/text_en.js
index 1be508b..b9beae5 100644
--- a/src/assets/text/text_en.js
+++ b/src/assets/text/text_en.js
@@ -40,8 +40,18 @@ export default {
chartText: {
bubbleText: "Interact with the chart to explore evidence<br>for social vulnerability determinants.",
bubbleLegend: `Many social vulnerability determinants have been studied. Some show positive <span class="legend-box positive"></span> relationships with water insecurity, some negative <span class="legend-box negative"></span>, and others unknown <span class="legend-box unknown"></span> <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines and others, 2023)</a>`,
- bubbleYaxis: `The y-axis of the chart represents the level of agreement among studies where increased <b>consensus</b> indicates a majority of studies using the selected determinant recorded the same direction of influence on conditions of water insecurity and <b>inconclusive</b> indicates studies using the selected determinant did not record the same direction of influence on conditions of water insecurity. The size of the bubbles on the chart represents the number of studies, with larger bubbles indicating that a particular determinant has been studied more frequently.`
-
+ bubbleYaxis: `The y-axis of the chart represents the level of agreement among studies where increased <b>consensus</b> indicates a majority of studies using the selected determinant recorded the same direction of influence on conditions of water insecurity and <b>inconclusive</b> indicates studies using the selected determinant did not record the same direction of influence on conditions of water insecurity. The size of the bubbles on the chart represents the number of studies, with larger bubbles indicating that a particular determinant has been studied more frequently.`,
+ bubbleCheckbox: `Everyone needs access to clean water. For those with limited access, <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><span id="water-insecurity-tooltip" class="tooltiptext"> Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span></span> has a daily impact on their lives. People may be more or less vulnerable to water insecurity due to`,
+ bubbleLabels: {
+ "Demographiccharacteristics": "demographic characteristics",
+ "Health": "health",
+ "Livingconditions": "living conditions",
+ "Socioeconomicstatus": "socioeconomic status",
+ "Riskperception": "risk perception",
+ "Landtenure": "land tenure",
+ "Exposure": "exposure to stressors"
+ },
+ bubbleCheckboxEnd: `(like drought or pollution). Below is a chart that displays how certain social vulnerability determinants relate to water insecurity.`
}
}
diff --git a/src/assets/text/text_es.js b/src/assets/text/text_es.js
index ad07536..3cfd860 100644
--- a/src/assets/text/text_es.js
+++ b/src/assets/text/text_es.js
@@ -40,7 +40,19 @@ export default {
chartText: {
bubbleText: "Interactúe con el gráfico para ver diferentes muestras<br>de los factores determinantes de riesgo social.",
bubbleLegend: `Se han estudiado muchos factores determinantes de riesgo social. Algunos muestran relaciones positivas <span class="legend-box positive"></span> con la carencia de agua, otros negativas <span class="legend-box negative"></span>, y otros desconocidas <span class="legend-box unknown"></span> <a href='https://www.sciencebase.gov/catalog/item/63f79d49d34e4f7eda456572' target='_blank'>(Hines et al, 2023)</a>`,
- bubbleYaxis: `El eje Y del gráfico representa el nivel de acuerdo entre los estudios, donde el aumento del <b>consenso</b>indica que la mayorÃa de los estudios que utilizaron el factor determinante seleccionado indicaron el mismo tipo de influencia en las condiciones de carencia de agua y <b>no concluyentes</b> indica que los estudios que utilizaron el factor determinante seleccionado no indicaron un mismo tipo de influencia en las condiciones de carencia de agua. El tamaño de las burbujas en el gráfico representa el número de estudios, y las burbujas más grandes indican que un factor determinante particular se ha estudiado con más frecuencia.`
+ bubbleYaxis: `El eje Y del gráfico representa el nivel de acuerdo entre los estudios, donde el aumento del <b>consenso</b>indica que la mayorÃa de los estudios que utilizaron el factor determinante seleccionado indicaron el mismo tipo de influencia en las condiciones de carencia de agua y <b>no concluyentes</b> indica que los estudios que utilizaron el factor determinante seleccionado no indicaron un mismo tipo de influencia en las condiciones de carencia de agua. El tamaño de las burbujas en el gráfico representa el número de estudios, y las burbujas más grandes indican que un factor determinante particular se ha estudiado con más frecuencia.`,
+ bubbleCheckbox: `Todo el mundo necesita acceso a agua potable. For those with limited access, <span class="tooltip-group"><span class="tooltip-span"> carencia de agua potable </span><span id="water-insecurity-tooltip" class="tooltiptext">La población no puede mantener el acceso a cantidades adecuadas de agua de una calidad aceptable para mantener la subsistencia, el desarrollo y la salud humana y de los ecosistemas.</span></span> has a daily impact on their lives. El grado en que las personas experimentan la carencia de agua potable varÃa según `,
+ bubbleLabels: {
+ "Demographiccharacteristics": "las caracterÃsticas demográficas",
+ "Health": "la salud",
+ "Livingconditions": "las condiciones de vida",
+ "Socioeconomicstatus": "el estatus socioeconómico",
+ "Riskperception": "la percepción del riesgo",
+ "Landtenure": "la tenencia de la tierra",
+ "Exposure": "la exposición a fuentes de estrés"
+ },
+ bubbleCheckboxEnd :` (como la sequÃa o la contaminación). A continuación, hay un gráfico que muestra cómo ciertos factores determinantes de riesgo social se relacionan con la falta de agua.`
+
}
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index 12c4c3d..e440ff5 100644
--- a/src/components/BeeswarmChart.vue
+++ b/src/components/BeeswarmChart.vue
@@ -1,52 +1,54 @@
<template>
<section id="beeswarm">
<div id="text1" class="text-container">
- <p>
- Everyone needs access to clean water. For those with limited access, <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><span id="water-insecurity-tooltip" class="tooltiptext"> Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span></span> has a daily impact on their lives. People may be more or less vulnerable to water insecurity due to
- <span
- :class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]"
- @click="toggleCategory('Demographiccharacteristics')"
- >
- demographic characteristics
- </span>,
- <span
- :class="['highlight', 'Health', { checked: isChecked.Health }]"
- @click="toggleCategory('Health')"
- >
- health
- </span>,
- <span
- :class="['highlight', 'Livingconditions', { checked: isChecked.Livingconditions }]"
- @click="toggleCategory('Livingconditions')"
- >
- living conditions
- </span>,
- <span
- :class="['highlight', 'Socioeconomicstatus', { checked: isChecked.Socioeconomicstatus }]"
- @click="toggleCategory('Socioeconomicstatus')"
- >
- socioeconomic status
- </span>,
- <span
- :class="['highlight', 'Riskperception', { checked: isChecked.Riskperception }]"
- @click="toggleCategory('Riskperception')"
- >
- risk perception
- </span>,
- <span
- :class="['highlight', 'Landtenure', { checked: isChecked.Landtenure }]"
- @click="toggleCategory('Landtenure')"
- >
- land tenure
- </span>, and
- <span
- :class="['highlight', 'Exposure', { checked: isChecked.Exposure }]"
- @click="toggleCategory('Exposure')"
- >
- exposure to stressors
- </span> (like drought or pollution). Below is a chart that displays how certain social vulnerability determinants relate to water insecurity.
- </p>
- </div>
+ <p v-html="t('text.components.chartText.bubbleCheckbox')"></p>
+ <!-- Render the translated labels within the span elements -->
+ <p>
+ <span
+ :class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]"
+ @click="toggleCategory('Demographiccharacteristics')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Demographiccharacteristics') }}
+ </span>,
+ <span
+ :class="['highlight', 'Health', { checked: isChecked.Health }]"
+ @click="toggleCategory('Health')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Health') }}
+ </span>,
+ <span
+ :class="['highlight', 'Livingconditions', { checked: isChecked.Livingconditions }]"
+ @click="toggleCategory('Livingconditions')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Livingconditions') }}
+ </span>,
+ <span
+ :class="['highlight', 'Socioeconomicstatus', { checked: isChecked.Socioeconomicstatus }]"
+ @click="toggleCategory('Socioeconomicstatus')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Socioeconomicstatus') }}
+ </span>,
+ <span
+ :class="['highlight', 'Riskperception', { checked: isChecked.Riskperception }]"
+ @click="toggleCategory('Riskperception')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Riskperception') }}
+ </span>,
+ <span
+ :class="['highlight', 'Landtenure', { checked: isChecked.Landtenure }]"
+ @click="toggleCategory('Landtenure')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Landtenure') }}
+ </span>, &
+ <span
+ :class="['highlight', 'Exposure', { checked: isChecked.Exposure }]"
+ @click="toggleCategory('Exposure')"
+ >
+ {{ t('text.components.chartText.bubbleLabels.Exposure') }}
+ </span>
+ <p v-html="t('text.components.chartText.bubbleCheckboxEnd')"></p>
+ </p>
+ </div>
<div id="text2" class="text-container tooltip-width">
<div id="tooltip" class="tooltip"><p v-html="t('text.components.chartText.bubbleText')"></p></div>
<em><p v-html="t('text.components.chartText.bubbleLegend')"></p></em>
@@ -66,6 +68,8 @@ import { useI18n } from 'vue-i18n';
const { t } = useI18n();
+console.log(t('text.components.chartText.bubbleCheckbox')); // Check if this logs the correct text
+
// Global variables
const publicPath = import.meta.env.BASE_URL;
const dataSet1 = ref([]);
@@ -286,7 +290,6 @@ function createBeeswarmChart() {
function toggleCategory(category) {
isChecked.value[category] = !isChecked.value[category];
- console.log(`Category toggled: ${category}, new value: ${isChecked.value[category]}`);
updateChart();
}
diff --git a/src/main.js b/src/main.js
index 4565fa0..4321d6a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -55,7 +55,7 @@ library.add(faSquareXTwitter, faFacebookSquare, faGithub, faFlickr, faYoutubeSqu
import App from './App.vue'
import router from './router'
-// Initialize pp
+// Initialize app
async function initApp() {
const i18n = await setupI18n(defaultLocale);
const app = createApp(App);
--
GitLab