Skip to content
Snippets Groups Projects
Commit 01aeca00 authored by Cee Nell's avatar Cee Nell
Browse files

translate bubble chart checkbox labels and text

parent 5c08ea17
No related branches found
No related tags found
1 merge request!66Add Spanish translation
Hide whitespace changes
Inline Side-by-side
src/assets/text/text_en.js
+ 12
− 2
View file @ 01aeca00
......@@ -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.`
}
}
......
src/assets/text/text_es.js
+ 13
− 1
View file @ 01aeca00
......@@ -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.`
}
......
src/components/BeeswarmChart.vue
+ 50
− 47
View file @ 01aeca00
<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();
}
......
src/main.js
+ 1
− 1
View file @ 01aeca00
......@@ -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);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment