Merge branch '5233-legend-color-is-not-in-sync-with-plot-color-on-change' of https://github.com/nasa/openmct into 5233-legend-color-is-not-in-sync-with-plot-color-on-change

src/plugins/plot/legend/PlotLegendItemCollapsed.vue

@@ -56,6 +56,7 @@
 import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
 
 export default {
+    inject: ['openmct', 'domainObject'],
     props: {
         valueToShowWhenCollapsed: {
             type: String,
@@ -105,6 +106,9 @@ export default {
     mounted() {
         this.initialize();
     },
+    destroy() {
+        this.colorObserver();
+    },
     methods: {
         initialize(highlightedObject) {
             const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
@@ -129,6 +133,30 @@ export default {
             } else {
                 this.formattedYValueFromStats = '';
             }
+
+            const getPath = this.dynamicPathForKey('color');
+            const seriesColorPath = getPath(this.domainObject, seriesObject);
+
+            if (!this.colorObserver) {
+                this.colorObserver = this.openmct.objects.observe(
+                    this.domainObject,
+                    seriesColorPath,
+                    this.changeColor.bind(this, seriesObject)
+                );
+            }
+        },
+        changeColor(seriesObject) {
+            this.colorAsHexString = seriesObject.get('color').asHexString();
+        },
+        dynamicPathForKey(key) {
+            return function (object, model) {
+                const modelIdentifier = model.get('identifier');
+                const index = object.configuration.series.findIndex(s => {
+                    return _.isEqual(s.identifier, modelIdentifier);
+                });
+
+                return 'configuration.series[' + index + '].' + key;
+            };
         },
         toggleHover(hover) {
             this.hover = hover;

src/plugins/plot/legend/PlotLegendItemExpanded.vue

@@ -82,6 +82,7 @@
 import {getLimitClass} from "@/plugins/plot/chart/limitUtil";
 
 export default {
+    inject: ['openmct', 'domainObject'],
     props: {
         seriesObject: {
             type: Object,
@@ -142,6 +143,9 @@ export default {
     mounted() {
         this.initialize();
     },
+    destroy() {
+        this.colorObserver();
+    },
     methods: {
         initialize(highlightedObject) {
             const seriesObject = highlightedObject ? highlightedObject.series : this.seriesObject;
@@ -169,6 +173,30 @@ export default {
                 this.formattedMinY = '';
                 this.formattedMaxY = '';
             }
+
+            const getPath = this.dynamicPathForKey('color');
+            const seriesColorPath = getPath(this.domainObject, seriesObject);
+
+            if (!this.colorObserver) {
+                this.colorObserver = this.openmct.objects.observe(
+                    this.domainObject,
+                    seriesColorPath,
+                    this.changeColor.bind(this, seriesObject)
+                );
+            }
+        },
+        changeColor(seriesObject) {
+            this.colorAsHexString = seriesObject.get('color').asHexString();
+        },
+        dynamicPathForKey(key) {
+            return function (object, model) {
+                const modelIdentifier = model.get('identifier');
+                const index = object.configuration.series.findIndex(s => {
+                    return _.isEqual(s.identifier, modelIdentifier);
+                });
+
+                return 'configuration.series[' + index + '].' + key;
+            };
         },
         toggleHover(hover) {
             this.hover = hover;