mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
Add units to Gauges (#5196)
* Fixes #3197 - Code and styling to allow units display. Co-authored-by: Shefali Joshi <simplyrender@gmail.com> Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov> Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Charles Hacskaylo
GitHub
parent
3c70cf1767
commit
59c0da1b57
@ -49,6 +49,7 @@ export default function () {
|
||||
gaugeType: GAUGE_TYPES[0][1],
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: true,
|
||||
limitLow: 10,
|
||||
limitHigh: 90,
|
||||
@ -59,6 +60,23 @@ export default function () {
|
||||
};
|
||||
},
|
||||
form: [
|
||||
{
|
||||
name: "Gauge type",
|
||||
options: GAUGE_TYPES.map(type => {
|
||||
return {
|
||||
name: type[0],
|
||||
value: type[1]
|
||||
};
|
||||
}),
|
||||
control: "select",
|
||||
cssClass: "l-input-sm",
|
||||
key: "gaugeController",
|
||||
property: [
|
||||
"configuration",
|
||||
"gaugeController",
|
||||
"gaugeType"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Display current value",
|
||||
control: "toggleSwitch",
|
||||
@ -70,6 +88,17 @@ export default function () {
|
||||
"isDisplayCurVal"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Display units",
|
||||
control: "toggleSwitch",
|
||||
cssClass: "l-input",
|
||||
key: "isDisplayUnits",
|
||||
property: [
|
||||
"configuration",
|
||||
"gaugeController",
|
||||
"isDisplayUnits"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Display range values",
|
||||
control: "toggleSwitch",
|
||||
@ -92,23 +121,6 @@ export default function () {
|
||||
"precision"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Gauge type",
|
||||
options: GAUGE_TYPES.map(type => {
|
||||
return {
|
||||
name: type[0],
|
||||
value: type[1]
|
||||
};
|
||||
}),
|
||||
control: "select",
|
||||
cssClass: "l-input-sm",
|
||||
key: "gaugeController",
|
||||
property: [
|
||||
"configuration",
|
||||
"gaugeController",
|
||||
"gaugeType"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "Value ranges and limits",
|
||||
control: "gauge-controller",
|
||||
|
||||
@ -63,30 +63,30 @@ describe('Gauge plugin', () => {
|
||||
});
|
||||
|
||||
it('Plugin installed by default', () => {
|
||||
const gaugueType = openmct.types.get('gauge');
|
||||
const GaugeType = openmct.types.get('gauge');
|
||||
|
||||
expect(gaugueType).not.toBeNull();
|
||||
expect(gaugueType.definition.name).toEqual('Gauge');
|
||||
expect(GaugeType).not.toBeNull();
|
||||
expect(GaugeType.definition.name).toEqual('Gauge');
|
||||
});
|
||||
|
||||
it('Gaugue plugin is creatable', () => {
|
||||
const gaugueType = openmct.types.get('gauge');
|
||||
it('Gauge plugin is creatable', () => {
|
||||
const GaugeType = openmct.types.get('gauge');
|
||||
|
||||
expect(gaugueType.definition.creatable).toBeTrue();
|
||||
expect(GaugeType.definition.creatable).toBeTrue();
|
||||
});
|
||||
|
||||
it('Gaugue plugin is creatable', () => {
|
||||
const gaugueType = openmct.types.get('gauge');
|
||||
it('Gauge plugin is creatable', () => {
|
||||
const GaugeType = openmct.types.get('gauge');
|
||||
|
||||
expect(gaugueType.definition.creatable).toBeTrue();
|
||||
expect(GaugeType.definition.creatable).toBeTrue();
|
||||
});
|
||||
|
||||
it('Gaugue form controller', () => {
|
||||
it('Gauge form controller', () => {
|
||||
const gaugeController = openmct.forms.getFormControl('gauge-controller');
|
||||
expect(gaugeController).toBeDefined();
|
||||
});
|
||||
|
||||
describe('Gaugue with Filled Dial', () => {
|
||||
describe('Gauge with Filled Dial', () => {
|
||||
let gaugeViewProvider;
|
||||
let gaugeView;
|
||||
let gaugeViewObject;
|
||||
@ -105,6 +105,7 @@ describe('Gauge plugin', () => {
|
||||
gaugeType: 'dial-filled',
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: false,
|
||||
limitLow: -0.9,
|
||||
limitHigh: 0.9,
|
||||
@ -222,7 +223,7 @@ describe('Gauge plugin', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gaugue with Needle Dial', () => {
|
||||
describe('Gauge with Needle Dial', () => {
|
||||
let gaugeViewProvider;
|
||||
let gaugeView;
|
||||
let gaugeViewObject;
|
||||
@ -240,6 +241,7 @@ describe('Gauge plugin', () => {
|
||||
gaugeType: 'dial-needle',
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: false,
|
||||
limitLow: -0.9,
|
||||
limitHigh: 0.9,
|
||||
@ -357,7 +359,7 @@ describe('Gauge plugin', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gaugue with Vertical Meter', () => {
|
||||
describe('Gauge with Vertical Meter', () => {
|
||||
let gaugeViewProvider;
|
||||
let gaugeView;
|
||||
let gaugeViewObject;
|
||||
@ -375,6 +377,7 @@ describe('Gauge plugin', () => {
|
||||
gaugeType: 'meter-vertical',
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: false,
|
||||
limitLow: -0.9,
|
||||
limitHigh: 0.9,
|
||||
@ -492,7 +495,7 @@ describe('Gauge plugin', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gaugue with Vertical Meter Inverted', () => {
|
||||
describe('Gauge with Vertical Meter Inverted', () => {
|
||||
let gaugeViewProvider;
|
||||
let gaugeView;
|
||||
let gaugeViewObject;
|
||||
@ -506,6 +509,7 @@ describe('Gauge plugin', () => {
|
||||
gaugeType: 'meter-vertical',
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: false,
|
||||
limitLow: -0.9,
|
||||
limitHigh: 0.9,
|
||||
@ -574,7 +578,7 @@ describe('Gauge plugin', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gaugue with Horizontal Meter', () => {
|
||||
describe('Gauge with Horizontal Meter', () => {
|
||||
let gaugeViewProvider;
|
||||
let gaugeView;
|
||||
let gaugeViewObject;
|
||||
@ -588,6 +592,7 @@ describe('Gauge plugin', () => {
|
||||
gaugeType: 'meter-vertical',
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: false,
|
||||
limitLow: -0.9,
|
||||
limitHigh: 0.9,
|
||||
@ -656,7 +661,7 @@ describe('Gauge plugin', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('Gaugue with Filled Dial with Use Telemetry Limits', () => {
|
||||
describe('Gauge with Filled Dial with Use Telemetry Limits', () => {
|
||||
let gaugeViewProvider;
|
||||
let gaugeView;
|
||||
let gaugeViewObject;
|
||||
@ -673,6 +678,7 @@ describe('Gauge plugin', () => {
|
||||
gaugeType: 'dial-filled',
|
||||
isDisplayMinMax: true,
|
||||
isDisplayCurVal: true,
|
||||
isDisplayUnits: true,
|
||||
isUseTelemetryLimits: true,
|
||||
limitLow: 10,
|
||||
limitHigh: 90,
|
||||
|
||||
@ -64,11 +64,11 @@
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-if="displayCurVal"
|
||||
class="c-dial__current-value-text-wrapper"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<svg
|
||||
v-if="displayCurVal"
|
||||
class="c-dial__current-value-text-sizer"
|
||||
:viewBox="curValViewBox"
|
||||
>
|
||||
@ -79,6 +79,17 @@
|
||||
style="transform: translate(50%, 70%)"
|
||||
>{{ curVal }}</text>
|
||||
</svg>
|
||||
<svg
|
||||
class="c-gauge__units c-dial__units"
|
||||
viewBox="0 0 50 100"
|
||||
>
|
||||
<text
|
||||
class="c-dial__units-text"
|
||||
lengthAdjust="spacing"
|
||||
text-anchor="middle"
|
||||
style="transform: translate(50%, 72%)"
|
||||
>{{ units }}</text>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
@ -261,7 +272,23 @@
|
||||
lengthAdjust="spacing"
|
||||
text-anchor="middle"
|
||||
style="transform: translate(50%, 70%)"
|
||||
>{{ curVal }}</text>
|
||||
>
|
||||
<tspan>{{ curVal }}</tspan>
|
||||
<tspan
|
||||
v-if="typeMeterHorizontal && displayUnits"
|
||||
class="c-gauge__units"
|
||||
font-size="10"
|
||||
>{{ units }}</tspan>
|
||||
</text>
|
||||
<text
|
||||
v-if="typeMeterVertical && displayUnits"
|
||||
dy="12"
|
||||
class="c-gauge__units"
|
||||
font-size="10"
|
||||
lengthAdjust="spacing"
|
||||
text-anchor="middle"
|
||||
style="transform: translate(50%, 70%)"
|
||||
>{{ units }}</text>
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
@ -288,12 +315,15 @@ export default {
|
||||
precision: gaugeController.precision,
|
||||
displayMinMax: gaugeController.isDisplayMinMax,
|
||||
displayCurVal: gaugeController.isDisplayCurVal,
|
||||
displayUnits: gaugeController.isDisplayUnits,
|
||||
limitHigh: gaugeController.limitHigh,
|
||||
limitLow: gaugeController.limitLow,
|
||||
rangeHigh: gaugeController.max,
|
||||
rangeLow: gaugeController.min,
|
||||
gaugeType: gaugeController.gaugeType,
|
||||
activeTimeSystem: this.openmct.time.timeSystem()
|
||||
showUnits: gaugeController.showUnits,
|
||||
activeTimeSystem: this.openmct.time.timeSystem(),
|
||||
units: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -524,6 +554,8 @@ export default {
|
||||
const length = values.length;
|
||||
this.updateValue(values[length - 1]);
|
||||
});
|
||||
|
||||
this.units = this.metadata.value(this.valueKey).unit || '';
|
||||
},
|
||||
round(val, decimals = this.precision) {
|
||||
let precision = Math.pow(10, decimals);
|
||||
|
||||
@ -111,6 +111,7 @@ export default {
|
||||
isUseTelemetryLimits: this.model.value.isUseTelemetryLimits,
|
||||
isDisplayMinMax: this.model.value.isDisplayMinMax,
|
||||
isDisplayCurVal: this.model.value.isDisplayCurVal,
|
||||
isDisplayUnits: this.model.value.isDisplayUnits,
|
||||
limitHigh: this.model.value.limitHigh,
|
||||
limitLow: this.model.value.limitLow,
|
||||
max: this.model.value.max,
|
||||
@ -125,6 +126,7 @@ export default {
|
||||
gaugeType: this.model.value.gaugeType,
|
||||
isDisplayMinMax: this.isDisplayMinMax,
|
||||
isDisplayCurVal: this.isDisplayCurVal,
|
||||
isDisplayUnits: this.isDisplayUnits,
|
||||
isUseTelemetryLimits: this.isUseTelemetryLimits,
|
||||
limitLow: this.limitLow,
|
||||
limitHigh: this.limitHigh,
|
||||
|
||||
@ -16,13 +16,12 @@
|
||||
// Both dial and meter types
|
||||
overflow: hidden;
|
||||
|
||||
&__range {
|
||||
&__range,
|
||||
&__units,
|
||||
&__units text {
|
||||
$c: $colorGaugeRange;
|
||||
color: $c;
|
||||
|
||||
text {
|
||||
fill: $c;
|
||||
}
|
||||
fill: $c;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
@ -66,7 +65,8 @@ svg[class*='c-dial'] {
|
||||
transition: transform $transitionTimeGauge;
|
||||
}
|
||||
|
||||
&__current-value-text {
|
||||
&__current-value-text,
|
||||
&__units-text {
|
||||
fill: $colorGaugeTextValue;
|
||||
font-family: $heroFont;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user