ensure yaxis labels change

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})`)