Gauge limits (#5156)

* Fix tick values for plots ticks in log mode and null check (#5119)
* [2297] When there is no display range or range, skip setting the range value when auto scale is turned off.
* If the formatted value is a number and a float, set precision to 2 decimal points.
* Fix value assignment
* Use whole numbers in log mode
* Revert whole numbers fix - need floats for values between 0 and 1.
* Reverts forced precision for log plots axis labels (#5147)
* [Gauge Plugin] Limits and Composition Issues #5155
* default current value as '--'
* updated as per review comments.
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Nikhil 2022-05-20 13:28:56 -07:00 committed by GitHub
parent 037886aa01
commit 9f9c69ee68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -85,14 +85,13 @@
class="c-dial__bg" class="c-dial__bg"
viewBox="0 0 10 10" viewBox="0 0 10 10"
> >
<g <g
v-if="limitLow !== null && dialLowLimitDeg < getLimitDegree('low', 'max')" v-if="isDialLowLimit"
class="c-dial__limit-low" class="c-dial__limit-low"
:style="`transform: rotate(${dialLowLimitDeg}deg)`" :style="`transform: rotate(${dialLowLimitDeg}deg)`"
> >
<rect <rect
v-if="dialLowLimitDeg >= getLimitDegree('low', 'q1')" v-if="isDialLowLimitLow"
class="c-dial__low-limit__low" class="c-dial__low-limit__low"
x="5" x="5"
y="5" y="5"
@ -100,7 +99,7 @@
height="5" height="5"
/> />
<rect <rect
v-if="dialLowLimitDeg >= getLimitDegree('low', 'q2')" v-if="isDialLowLimitMid"
class="c-dial__low-limit__mid" class="c-dial__low-limit__mid"
x="5" x="5"
y="0" y="0"
@ -108,7 +107,7 @@
height="5" height="5"
/> />
<rect <rect
v-if="dialLowLimitDeg >= getLimitDegree('low', 'q3')" v-if="isDialLowLimitHigh"
class="c-dial__low-limit__high" class="c-dial__low-limit__high"
x="0" x="0"
y="0" y="0"
@ -118,12 +117,12 @@
</g> </g>
<g <g
v-if="limitHigh !== null && dialHighLimitDeg < getLimitDegree('high', 'max')" v-if="isDialHighLimit"
class="c-dial__limit-high" class="c-dial__limit-high"
:style="`transform: rotate(${dialHighLimitDeg}deg)`" :style="`transform: rotate(${dialHighLimitDeg}deg)`"
> >
<rect <rect
v-if="dialHighLimitDeg <= getLimitDegree('high', 'max')" v-if="isDialHighLimitLow"
class="c-dial__high-limit__low" class="c-dial__high-limit__low"
x="0" x="0"
y="5" y="5"
@ -131,7 +130,7 @@
height="5" height="5"
/> />
<rect <rect
v-if="dialHighLimitDeg <= getLimitDegree('high', 'q2')" v-if="isDialHighLimitMid"
class="c-dial__high-limit__mid" class="c-dial__high-limit__mid"
x="0" x="0"
y="0" y="0"
@ -139,7 +138,7 @@
height="5" height="5"
/> />
<rect <rect
v-if="dialHighLimitDeg <= getLimitDegree('high', 'q3')" v-if="isDialHighLimitHigh"
class="c-dial__high-limit__high" class="c-dial__high-limit__high"
x="5" x="5"
y="0" y="0"
@ -159,7 +158,7 @@
:style="`transform: rotate(${degValueFilledDial}deg)`" :style="`transform: rotate(${degValueFilledDial}deg)`"
> >
<rect <rect
v-if="degValue >= getLimitDegree('low', 'q1')" v-if="isDialFilledValueLow"
class="c-dial__filled-value__low" class="c-dial__filled-value__low"
x="5" x="5"
y="5" y="5"
@ -167,7 +166,7 @@
height="5" height="5"
/> />
<rect <rect
v-if="degValue >= getLimitDegree('low', 'q2')" v-if="isDialFilledValueMid"
class="c-dial__filled-value__mid" class="c-dial__filled-value__mid"
x="5" x="5"
y="0" y="0"
@ -175,7 +174,7 @@
height="5" height="5"
/> />
<rect <rect
v-if="degValue >= getLimitDegree('low', 'q3')" v-if="isDialFilledValueHigh"
class="c-dial__filled-value__high" class="c-dial__filled-value__high"
x="0" x="0"
y="0" y="0"
@ -216,13 +215,13 @@
></div> ></div>
<div <div
v-if="limitHigh !== null && meterHighLimitPerc > 0" v-if="isMeterLimitHigh"
class="c-meter__limit-high" class="c-meter__limit-high"
:style="`height: ${meterHighLimitPerc}%`" :style="`height: ${meterHighLimitPerc}%`"
></div> ></div>
<div <div
v-if="limitLow !== null && meterLowLimitPerc > 0" v-if="isMeterLimitLow"
class="c-meter__limit-low" class="c-meter__limit-low"
:style="`height: ${meterLowLimitPerc}%`" :style="`height: ${meterLowLimitPerc}%`"
></div> ></div>
@ -235,13 +234,13 @@
></div> ></div>
<div <div
v-if="limitHigh !== null && meterHighLimitPerc > 0" v-if="isMeterLimitHigh"
class="c-meter__limit-high" class="c-meter__limit-high"
:style="`width: ${meterHighLimitPerc}%`" :style="`width: ${meterHighLimitPerc}%`"
></div> ></div>
<div <div
v-if="limitLow !== null && meterLowLimitPerc > 0" v-if="isMeterLimitLow"
class="c-meter__limit-low" class="c-meter__limit-low"
:style="`width: ${meterLowLimitPerc}%`" :style="`width: ${meterLowLimitPerc}%`"
></div> ></div>
@ -275,6 +274,7 @@
import { DIAL_VALUE_DEG_OFFSET, getLimitDegree } from '../gauge-limit-util'; import { DIAL_VALUE_DEG_OFFSET, getLimitDegree } from '../gauge-limit-util';
const LIMIT_PADDING_IN_PERCENT = 10; const LIMIT_PADDING_IN_PERCENT = 10;
const DEFAULT_CURRENT_VALUE = '--';
export default { export default {
name: 'Gauge', name: 'Gauge',
@ -283,7 +283,7 @@ export default {
let gaugeController = this.domainObject.configuration.gaugeController; let gaugeController = this.domainObject.configuration.gaugeController;
return { return {
curVal: 0, curVal: DEFAULT_CURRENT_VALUE,
digits: 3, digits: 3,
precision: gaugeController.precision, precision: gaugeController.precision,
displayMinMax: gaugeController.isDisplayMinMax, displayMinMax: gaugeController.isDisplayMinMax,
@ -319,6 +319,45 @@ export default {
return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO); return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO);
}, },
isDialLowLimit() {
return this.limitLow.length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max');
},
isDialLowLimitLow() {
return this.dialLowLimitDeg >= getLimitDegree('low', 'q1');
},
isDialLowLimitMid() {
return this.dialLowLimitDeg >= getLimitDegree('low', 'q2');
},
isDialLowLimitHigh() {
return this.dialLowLimitDeg >= getLimitDegree('low', 'q3');
},
isDialHighLimit() {
return this.limitHigh.length > 0 && this.dialHighLimitDeg < getLimitDegree('high', 'max');
},
isDialHighLimitLow() {
return this.dialHighLimitDeg <= getLimitDegree('high', 'max');
},
isDialHighLimitMid() {
return this.dialHighLimitDeg <= getLimitDegree('high', 'q2');
},
isDialHighLimitHigh() {
return this.dialHighLimitDeg <= getLimitDegree('high', 'q3');
},
isDialFilledValueLow() {
return this.degValue >= getLimitDegree('low', 'q1');
},
isDialFilledValueMid() {
return this.degValue >= getLimitDegree('low', 'q2');
},
isDialFilledValueHigh() {
return this.degValue >= getLimitDegree('low', 'q3');
},
isMeterLimitHigh() {
return this.limitHigh.length > 0 && this.meterHighLimitPerc > 0;
},
isMeterLimitLow() {
return this.limitLow.length > 0 && this.meterLowLimitPerc > 0;
},
typeDial() { typeDial() {
return this.matchGaugeType('dial'); return this.matchGaugeType('dial');
}, },
@ -459,13 +498,14 @@ export default {
this.unsubscribe = null; this.unsubscribe = null;
} }
this.metadata = null; this.curVal = DEFAULT_CURRENT_VALUE;
this.formats = null; this.formats = null;
this.valueKey = null; this.limitHigh = '';
this.limitHigh = null; this.limitLow = '';
this.limitLow = null; this.metadata = null;
this.rangeHigh = null; this.rangeHigh = null;
this.rangeLow = null; this.rangeLow = null;
this.valueKey = null;
}, },
request(domainObject = this.telemetryObject) { request(domainObject = this.telemetryObject) {
this.metadata = this.openmct.telemetry.getMetadata(domainObject); this.metadata = this.openmct.telemetry.getMetadata(domainObject);
@ -518,13 +558,20 @@ export default {
} else if (telemetryLimit.WATCH) { } else if (telemetryLimit.WATCH) {
limits = telemetryLimit.WATCH; limits = telemetryLimit.WATCH;
} else { } else {
this.openmct.notifications.error('No limits definition for given telemetry'); this.openmct.notifications.error('No limits definition for given telemetry, hiding low and high limits');
this.displayMinMax = false;
this.limitHigh = '';
this.limitLow = '';
return;
} }
this.limitHigh = this.round(limits.high[this.valueKey]); this.limitHigh = this.round(limits.high[this.valueKey]);
this.limitLow = this.round(limits.low[this.valueKey]); this.limitLow = this.round(limits.low[this.valueKey]);
this.rangeHigh = this.round(this.limitHigh + this.limitHigh * LIMIT_PADDING_IN_PERCENT / 100); this.rangeHigh = this.round(this.limitHigh + this.limitHigh * LIMIT_PADDING_IN_PERCENT / 100);
this.rangeLow = this.round(this.limitLow - Math.abs(this.limitLow * LIMIT_PADDING_IN_PERCENT / 100)); this.rangeLow = this.round(this.limitLow - Math.abs(this.limitLow * LIMIT_PADDING_IN_PERCENT / 100));
this.displayMinMax = this.domainObject.configuration.gaugeController.isDisplayMinMax;
}, },
updateValue(datum) { updateValue(datum) {
this.datum = datum; this.datum = datum;