From e4f713038a804722a47ea1ee5143705b9769399a Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Mon, 23 Sep 2024 13:04:14 -0700
Subject: [PATCH] ensure yaxis labels change
---
src/components/BeeswarmChart.vue | 24 +++++++++++++++++++++---
1 file changed, 21 insertions(+), 3 deletions(-)
diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue
index f675546..db659a1 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})`)
--
GitLab