Plots y axis and legend fixes (#5062)

* [5058] Change the unit if the yKey changes after initialization

* [5057] Show y axis label when more than one series is present with the same range value

* Fix typo for model length check

Co-authored-by: David Tsay <3614296+davetsay@users.noreply.github.com>

src/plugins/plot/MctPlot.vue

@@ -37,6 +37,7 @@
             v-if="seriesModels.length > 0"
             :tick-width="tickWidth"
             :single-series="seriesModels.length === 1"
+            :has-same-range-value="hasSameRangeValue"
             :series-model="seriesModels[0]"
             :style="{
                 left: (plotWidth - tickWidth) + 'px'
@@ -250,7 +251,8 @@ export default {
             loaded: false,
             isTimeOutOfSync: false,
             showLimitLineLabels: undefined,
-            isFrozenOnMouseDown: false
+            isFrozenOnMouseDown: false,
+            hasSameRangeValue: true
         };
     },
     computed: {
@@ -362,6 +364,7 @@ export default {
                 this.setDisplayRange(series, xKey);
             }, this);
             this.listenTo(series, 'change:yKey', () => {
+                this.checkSameRangeValue();
                 this.loadSeriesData(series);
             }, this);
 
@@ -369,10 +372,18 @@ export default {
                 this.loadSeriesData(series);
             }, this);
 
+            this.checkSameRangeValue();
             this.loadSeriesData(series);
         },
 
+        checkSameRangeValue() {
+            this.hasSameRangeValue = this.seriesModels.every((model) => {
+                return model.get('yKey') === this.seriesModels[0].get('yKey');
+            });
+        },
+
         removeSeries(plotSeries) {
+            this.checkSameRangeValue();
             this.stopListening(plotSeries);
         },
 
@@ -488,7 +499,7 @@ export default {
         },
 
         setDisplayRange(series, xKey) {
-            if (this.config.series.length !== 1) {
+            if (this.config.series.models.length !== 1) {
                 return;
             }
 

src/plugins/plot/axis/YAxis.vue

@@ -29,9 +29,9 @@
 >
 
     <div
-        v-if="singleSeries"
+        v-if="canShowYAxisLabel"
         class="gl-plot-label gl-plot-y-label"
-        :class="{'icon-gear': (yKeyOptions.length > 1)}"
+        :class="{'icon-gear': (yKeyOptions.length > 1 && singleSeries)}"
     >{{ yAxisLabel }}
     </div>
 
@@ -76,6 +76,12 @@ export default {
                 return true;
             }
         },
+        hasSameRangeValue: {
+            type: Boolean,
+            default() {
+                return true;
+            }
+        },
         seriesModel: {
             type: Object,
             default() {
@@ -95,6 +101,11 @@ export default {
             loaded: false
         };
     },
+    computed: {
+        canShowYAxisLabel() {
+            return this.singleSeries === true || this.hasSameRangeValue === true;
+        }
+    },
     mounted() {
         this.yAxis = this.getYAxisFromConfig();
         this.loaded = true;

src/plugins/plot/configuration/PlotSeries.js

@@ -250,6 +250,7 @@ export default class PlotSeries extends Model {
         this.evaluate = function (datum) {
             return this.limitEvaluator.evaluate(datum, valueMetadata);
         }.bind(this);
+        this.set('unit', valueMetadata.unit);
         const format = this.formats[newKey];
         this.getYVal = format.parse.bind(format);
     }