diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue index f6755469d9a65640793bee066094b5bfe764b84c..db659a12d884324d8628eef7bef5af4fdda1d7cf 100644 --- a/src/components/BeeswarmChart.vue +++ b/src/components/BeeswarmChart.vue @@ -65,7 +65,7 @@ <script setup> -import { ref, computed, onMounted } from "vue"; +import { ref, computed, onMounted, watch } from "vue"; import * as d3 from 'd3'; import { useI18n } from 'vue-i18n'; @@ -82,6 +82,24 @@ let svg; const height = 600; const margin = { top: 40, right: 20, bottom: 40, left: 40 }; +// Watch for changes in the locale and update the chart labels when the language is toggled +watch(locale, () => { + updateYAxisLabels(); +}); + +// Function to update Y-axis labels when language changes +function updateYAxisLabels() { + if (svg) { + // Update y-axis max label + svg.select('.yLabelMax') + .text(bubbleYlabelMax.value); + + // Update y-axis min label + svg.select('.yLabelMin') + .text(bubbleYlabelMin.value); + } +} + const isChecked = ref({ Demographiccharacteristics: true, Health: true, @@ -255,14 +273,14 @@ function createBeeswarmChart() { // Add label to y axis svg.append('text') - .attr("class", "yLabel") + .attr("class", "yLabel yLabelMax") .attr("text-anchor", "left") .attr("font-weight", 700) .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text(bubbleYlabelMax.value); svg.append('text') - .attr("class", "yLabel") + .attr("class", "yLabel yLabelMin") .attr("text-anchor", "left") .attr("font-weight", 700) .attr("transform", `translate(${margin.left}, ${containerHeight - (margin.bottom / 2) + 10})`)