From 2c13aeecce13ec2aaa68926f090a6a3ec2c44c24 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Fri, 28 May 2021 13:13:57 -0700
Subject: [PATCH] Make legend configuration properties reactive (#3889)

Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>
---
 src/plugins/plot/legend/PlotLegend.vue        | 28 ++++++++++++++-----
 .../plot/legend/PlotLegendItemExpanded.vue    | 22 +++++++++++----
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/src/plugins/plot/legend/PlotLegend.vue b/src/plugins/plot/legend/PlotLegend.vue
index 241219404a..2e70b53f80 100644
--- a/src/plugins/plot/legend/PlotLegend.vue
+++ b/src/plugins/plot/legend/PlotLegend.vue
@@ -133,15 +133,29 @@ export default {
     },
     data() {
         return {
-            isLegendHidden: this.legend.get('hideLegendWhenSmall') !== true,
-            isLegendExpanded: this.legend.get('expanded') === true,
-            showTimestampWhenExpanded: this.legend.get('showTimestampWhenExpanded') === true,
-            showValueWhenExpanded: this.legend.get('showValueWhenExpanded') === true,
-            showUnitsWhenExpanded: this.legend.get('showUnitsWhenExpanded') === true,
-            showMinimumWhenExpanded: this.legend.get('showMinimumWhenExpanded') === true,
-            showMaximumWhenExpanded: this.legend.get('showMaximumWhenExpanded') === true
+            isLegendExpanded: this.legend.get('expanded') === true
         };
     },
+    computed: {
+        showUnitsWhenExpanded() {
+            return this.legend.get('showUnitsWhenExpanded') === true;
+        },
+        showMinimumWhenExpanded() {
+            return this.legend.get('showMinimumWhenExpanded') === true;
+        },
+        showMaximumWhenExpanded() {
+            return this.legend.get('showMaximumWhenExpanded') === true;
+        },
+        showValueWhenExpanded() {
+            return this.legend.get('showValueWhenExpanded') === true;
+        },
+        showTimestampWhenExpanded() {
+            return this.legend.get('showTimestampWhenExpanded') === true;
+        },
+        isLegendHidden() {
+            return this.legend.get('hideLegendWhenSmall') === true;
+        }
+    },
     methods: {
         expandLegend() {
             this.isLegendExpanded = !this.isLegendExpanded;
diff --git a/src/plugins/plot/legend/PlotLegendItemExpanded.vue b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
index 70e5462c06..939f7e8809 100644
--- a/src/plugins/plot/legend/PlotLegendItemExpanded.vue
+++ b/src/plugins/plot/legend/PlotLegendItemExpanded.vue
@@ -94,11 +94,6 @@ export default {
     },
     data() {
         return {
-            showTimestampWhenExpanded: this.legend.get('showTimestampWhenExpanded'),
-            showValueWhenExpanded: this.legend.get('showValueWhenExpanded'),
-            showUnitsWhenExpanded: this.legend.get('showUnitsWhenExpanded'),
-            showMinimumWhenExpanded: this.legend.get('showMinimumWhenExpanded'),
-            showMaximumWhenExpanded: this.legend.get('showMaximumWhenExpanded'),
             isMissing: false,
             colorAsHexString: '',
             name: '',
@@ -110,6 +105,23 @@ export default {
             mctLimitStateClass: ''
         };
     },
+    computed: {
+        showUnitsWhenExpanded() {
+            return this.legend.get('showUnitsWhenExpanded') === true;
+        },
+        showMinimumWhenExpanded() {
+            return this.legend.get('showMinimumWhenExpanded') === true;
+        },
+        showMaximumWhenExpanded() {
+            return this.legend.get('showMaximumWhenExpanded') === true;
+        },
+        showValueWhenExpanded() {
+            return this.legend.get('showValueWhenExpanded') === true;
+        },
+        showTimestampWhenExpanded() {
+            return this.legend.get('showTimestampWhenExpanded') === true;
+        }
+    },
     watch: {
         highlights(newHighlights) {
             const highlightedObject = newHighlights.find(highlight => highlight.series.keyString === this.seriesObject.keyString);