diff --git a/src/assets/base.css b/src/assets/base.css index ebe1141c99dad505aa7b095eed9fc3c0bb088c43..098a59c97e9e9c82e1d99cb0a7eb0b12443ba8c4 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -9,12 +9,12 @@ --navy-blue: #032a56; font-size: 62.5%; --color-Demographiccharacteristics: #092734; - --color-Landtenure: #1B695F; - --color-Livingconditions: #4BAFA3; - --color-Socioeconomicstatus: #e66c4b; + --color-Landtenure: #0C5048; + --color-Livingconditions: #45A196; + --color-Socioeconomicstatus: #FF5F33; --color-Health: #4B1B1B; --color-Riskperception: #365EB5; - --color-Exposure: #FFA600; + --color-Exposure: #CC8500; --color-themegrey: rgba(242, 242, 242, 0.95); } diff --git a/src/assets/text/text_en.js b/src/assets/text/text_en.js index 11ab660e8f94a06522c4c0b5e1312b03666cd5c4..daa255d89f22c81d84288668b3148ce2ef723ec7 100644 --- a/src/assets/text/text_en.js +++ b/src/assets/text/text_en.js @@ -74,7 +74,7 @@ export default { dendroExplainer: `Click on the topics below to see the different vulnerability indicators studied in relation to water insecurity. Thicker diagram lines indicate more well-studied topics. The number of studies for each indicator are displayed in parentheses.` }, authorSection: { - text: "This site was created by the <a href='https://labs.waterdata.usgs.gov/visualizations/'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour'>Elmera Azadpour</a> led the project, with contributions from <a href='https://wim.usgs.gov/team/'>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio'>Diana Restrepo-Osorio</a>, <a href='https://www.usgs.gov/staff-profiles/cee-nell'>Cee Nell</a>, Yajaira Ayala Alanis, and Paola Rivera Gonzalez." + text: "This site was created by the <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> led the project, with contributions from <a href='https://wim.usgs.gov/team/' http://localhost:5173/visualizations/vulnerability-indicators/>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, Yajaira Ayala Alanis, Paola Rivera Gonzalez, and <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>." } } diff --git a/src/assets/text/text_es.js b/src/assets/text/text_es.js index e7ea372439fe70b39bfe4569408e42a1c8aa7baf..8e2eb3ec51efa551c484e3a1a13504dd116c222a 100644 --- a/src/assets/text/text_es.js +++ b/src/assets/text/text_es.js @@ -72,7 +72,7 @@ export default { dendroExplainer: `Haga clic en cada tema para ver los diferentes indicadores de riesgo estudiados en relación con la carencia de agua. Las lÃneas más gruesas del diagrama indican temas mejor estudiados. El número de estudios de cada indicador se muestra entre paréntesis.` }, authorSection: { - text: "Este sitio fue creado por el <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> dirigió el proyecto, con contribuciones de <a href='https://wim.usgs.gov/team/' target='_blank'>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>, Yajaira Ayala Alanis, y Paola Rivera Gonzalez." + text: "Este sitio fue creado por el <a href='https://labs.waterdata.usgs.gov/visualizations/' target='_blank'>USGS Vizlab</a>. <a href='https://www.usgs.gov/staff-profiles/elmera-azadpour' target='_blank'>Elmera Azadpour</a> dirigió el proyecto, con contribuciones de <a href='https://wim.usgs.gov/team/' target='_blank'>Aileen Clarke</a>, <a href='https://www.usgs.gov/staff-profiles/amanda-carr' target='_blank'>Mandie Carr</a>, <a href='https://www.usgs.gov/staff-profiles/oronde-drakes' target='_blank'>Oronde Drakes</a>, <a href='https://www.usgs.gov/staff-profiles/diana-l-restrepo-osorio' target='_blank'>Diana Restrepo-Osorio</a>, Yajaira Ayala Alanis, Paola Rivera Gonzalez, y <a href='https://www.usgs.gov/staff-profiles/cee-nell' target='_blank'>Cee Nell</a>." } } diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue index 682eb1db802c3865a74c80e42a7640bad86ed67f..f6755469d9a65640793bee066094b5bfe764b84c 100644 --- a/src/components/BeeswarmChart.vue +++ b/src/components/BeeswarmChart.vue @@ -94,14 +94,15 @@ const isChecked = ref({ // Set colors for bubble charts const dimensionColors = { - Demographiccharacteristics: "#092734", - Landtenure: "#1B695F", - Livingconditions: "#4BAFA3", - Socioeconomicstatus: "#FF734D", + Demographiccharacteristics: "#092734", + Landtenure: "#0C5048", + Livingconditions: "#45A196", + Socioeconomicstatus: "#FF5F33", Health: "#4B1B1B", Riskperception: "#365EB5", - Exposure: "#FFA600" -}; + Exposure: "#CC8500" //C08A16 +}; + // Computed properties for translations const bubbleCheckboxText = computed(() => t('text.components.chartText.bubbleCheckbox')); @@ -109,6 +110,8 @@ const bubbleCheckboxEndText = computed(() => t('text.components.chartText.bubble const bubbleTooltipText = computed(() => t('text.components.chartText.bubbleText')); const bubbleLegendText = computed(() => t('text.components.chartText.bubbleLegend')); const bubbleYAxisText = computed(() => t('text.components.chartText.bubbleYaxis')); +const bubbleYlabelMax = computed(() => t('text.components.chartText.bubbleYlabelMax')); +const bubbleYlabelMin = computed(() => t('text.components.chartText.bubbleYlabelMin')); // Labels for each category const demographicText = computed(() => t('text.components.chartText.bubbleLabels.Demographiccharacteristics')); @@ -256,14 +259,14 @@ function createBeeswarmChart() { .attr("text-anchor", "left") .attr("font-weight", 700) .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) - .text(t('text.components.chartText.bubbleYlabelMax')); + .text(bubbleYlabelMax.value); svg.append('text') .attr("class", "yLabel") .attr("text-anchor", "left") .attr("font-weight", 700) .attr("transform", `translate(${margin.left}, ${containerHeight - (margin.bottom / 2) + 10})`) - .text(t('text.components.chartText.bubbleYlabelMin')); + .text(bubbleYlabelMin.value); // Set forces const forceY = d3.forceY(d => yScale(d.level_agreement)).strength(0.9); diff --git a/src/components/InteractiveDendrogram.vue b/src/components/InteractiveDendrogram.vue index 082c6920c05dd9df9b960d4b0b4b2f376c1acccf..da5538974c4575a6147630ca32b26f1722f71e62 100644 --- a/src/components/InteractiveDendrogram.vue +++ b/src/components/InteractiveDendrogram.vue @@ -63,22 +63,22 @@ let textSize; // set colors for dimension const dimensionColors = { "demographiccharacteristics": "#092734", - "landtenure": "#1B695F", - "livingconditions": "#4BAFA3", - "socioeconomicstatus": "#e66c4b", + "landtenure": "#0C5048", + "livingconditions": "#45A196", + "socioeconomicstatus": "#FF5F33", "health": "#4B1B1B", "riskperception": "#365EB5", - "exposure": "#FFA600" + "exposure": "#CC8500" }; const dimensionColors_es = { "lascaracterÃsticasdemográficas": "#092734", - "latenenciadelatierra": "#1B695F", - "lascondicionesdevida": "#4BAFA3", - "elestatussocioeconómico": "#e66c4b", + "latenenciadelatierra": "#0C5048", + "lascondicionesdevida": "#45A196", + "elestatussocioeconómico": "#FF5F33", "lasalud": "#4B1B1B", "lapercepcióndelriesgo": "#365EB5", - "laexposiciónafuentesdeestrés": "#FFA600" + "laexposiciónafuentesdeestrés": "#CC8500" }; // Define scales for link width and node radius diff --git a/src/components/LanguageButton.vue b/src/components/LanguageButton.vue index 87e8321de2bf1207233b88e43887ca8a52540efa..a4f8e5197c8f5b90c5c73ccda906a2787211234a 100644 --- a/src/components/LanguageButton.vue +++ b/src/components/LanguageButton.vue @@ -43,9 +43,11 @@ function switchLanguage(lang) { watch( () => route.params.lang, (newLang) => { + // Update selectedLanguage to match route change + selectedLanguage.value = newLang; + // if locale.value does not match newLang, also update it if (newLang && locale.value !== newLang) { locale.value = newLang; - selectedLanguage.value = newLang; } }, { immediate: true } diff --git a/src/components/ReferencesSection.vue b/src/components/ReferencesSection.vue index bfe18a36ddb1df7657ed73441c7bdd420acfc1c3..c480153ddbaa0585b0e739a5f488e9c541513037 100644 --- a/src/components/ReferencesSection.vue +++ b/src/components/ReferencesSection.vue @@ -22,43 +22,49 @@ <script> import { useI18n } from 'vue-i18n'; +import { ref, watch } from 'vue'; export default { name: 'ReferencesSection', - data() { - return { - text: {} - }; - }, - created() { + setup() { const { locale } = useI18n(); - const lang = locale.value; + const text = ref({}); + + const loadReferencesText = (lang) => { + if (lang === 'es') { + import('@/assets/text/referencesText_es.js') + .then((module) => { + text.value = module.default.referencesContent; + sortReferences(); + }) + .catch((error) => console.error('Failed to load Spanish references:', error)); + } else { + import('@/assets/text/referencesText_en.js') + .then((module) => { + text.value = module.default.referencesContent; + sortReferences(); + }) + .catch((error) => console.error('Failed to load English references:', error)); + } + }; - // Dynamically import the correct references file based on the language - if (lang === 'es') { - import('@/assets/text/referencesText_es.js') - .then((module) => { - this.text = module.default.referencesContent; - this.sortReferences(); - }) - .catch((error) => console.error('Failed to load Spanish references:', error)); - } else { - import('@/assets/text/referencesText_en.js') - .then((module) => { - this.text = module.default.referencesContent; - this.sortReferences(); - }) - .catch((error) => console.error('Failed to load English references:', error)); - } - }, - methods: { - sortReferences() { - if (this.text.references && Array.isArray(this.text.references)) { - this.text.references.sort((a, b) => { - return a.authors.localeCompare(b.authors); - }); + const sortReferences = () => { + if (text.value.references && Array.isArray(text.value.references)) { + text.value.references.sort((a, b) => a.authors.localeCompare(b.authors)); } - } + }; + + // Initial load based on current language + loadReferencesText(locale.value); + + // Watch for changes in the locale and update the references accordingly + watch(locale, (newLocale) => { + loadReferencesText(newLocale); + }); + + return { + text + }; } }; </script>