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