mirror of
https://github.com/nasa/openmct.git
synced 2025-03-21 03:25:44 +00:00
Gauge fixes for Firefox and units display (#5369)
* Closes #5323, #5325. Parent branch is release/2.0.5. - Significant work refactoring SVG markup and CSS for dial gauge; - Fixed missing `v-if` to control display of units for #5325; - Fixed bad `.length` test for limit properties; * Closes #5323, #5325 - Add 'value out of range' indicator * Closes #5323, #5325 - More accurate element naming; - Fix cross-browser problems with current value display in dial gauge; - Refinements to "out of range" indicator approach; - Fixed size of "Amplitude" input in Sine Wave Generator; * Closes #5323, #5325 - Styles and stubbed in code to support needle meter type; * Closes #5323, #5325 - Stubbed in markup and CSS for needle-style meter; * Closes #5323, #5325 - Fixed missing `js-*` classes that were failing npm run test; * Closes #5323, #5325 - Fix to not display meter value bar unless a data value is expected; * Addressing PR comments - Renamed method for clarity; - Added null value check in method `valueExpected`;
This commit is contained in:
Charles Hacskaylo
GitHub
parent
0a2e0a4e65
commit
a040bb30c2
@ -81,7 +81,7 @@ define([
|
||||
{
|
||||
name: "Amplitude",
|
||||
control: "numberfield",
|
||||
cssClass: "l-input-sm l-numeric",
|
||||
cssClass: "l-numeric",
|
||||
key: "amplitude",
|
||||
required: true,
|
||||
property: [
|
||||
@ -92,7 +92,7 @@ define([
|
||||
{
|
||||
name: "Offset",
|
||||
control: "numberfield",
|
||||
cssClass: "l-input-sm l-numeric",
|
||||
cssClass: "l-numeric",
|
||||
key: "offset",
|
||||
required: true,
|
||||
property: [
|
||||
|
||||
@ -472,7 +472,7 @@ describe('Gauge plugin', () => {
|
||||
it('renders major elements', () => {
|
||||
const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
|
||||
const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
|
||||
const valueElement = gaugeHolder.querySelector('.js-meter-current-value');
|
||||
const valueElement = gaugeHolder.querySelector('.js-gauge-current-value');
|
||||
|
||||
const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
|
||||
|
||||
@ -485,7 +485,7 @@ describe('Gauge plugin', () => {
|
||||
|
||||
it('renders correct current value', (done) => {
|
||||
function WatchUpdateValue() {
|
||||
const textElement = gaugeHolder.querySelector('.js-meter-current-value');
|
||||
const textElement = gaugeHolder.querySelector('.js-gauge-current-value');
|
||||
expect(Number(textElement.textContent).toFixed(gaugeViewObject.configuration.gaugeController.precision)).toBe(randomValue.toFixed(gaugeViewObject.configuration.gaugeController.precision));
|
||||
done();
|
||||
}
|
||||
@ -570,7 +570,7 @@ describe('Gauge plugin', () => {
|
||||
it('renders major elements', () => {
|
||||
const wrapperElement = gaugeHolder.querySelector('.js-gauge-wrapper');
|
||||
const rangeElement = gaugeHolder.querySelector('.js-gauge-meter-range');
|
||||
const valueElement = gaugeHolder.querySelector('.js-meter-current-value');
|
||||
const valueElement = gaugeHolder.querySelector('.js-gauge-current-value');
|
||||
|
||||
const hasMajorElements = Boolean(wrapperElement && rangeElement && valueElement);
|
||||
|
||||
|
||||
@ -23,189 +23,217 @@
|
||||
<div
|
||||
class="c-gauge__wrapper js-gauge-wrapper"
|
||||
:class="`c-gauge--${gaugeType}`"
|
||||
:title="gaugeTitle"
|
||||
>
|
||||
<template v-if="typeDial">
|
||||
<svg
|
||||
width="0"
|
||||
height="0"
|
||||
class="c-dial__clip-paths"
|
||||
class="c-gauge c-dial"
|
||||
viewBox="0 0 10 10"
|
||||
>
|
||||
<defs>
|
||||
<clipPath
|
||||
id="gaugeBgMask"
|
||||
clipPathUnits="objectBoundingBox"
|
||||
>
|
||||
<path d="M0.853553 0.853553C0.944036 0.763071 1 0.638071 1 0.5C1 0.223858 0.776142 0 0.5 0C0.223858 0 0 0.223858 0 0.5C0 0.638071 0.0559644 0.763071 0.146447 0.853553L0.285934 0.714066C0.23115 0.659281 0.197266 0.583598 0.197266 0.5C0.197266 0.332804 0.332804 0.197266 0.5 0.197266C0.667196 0.197266 0.802734 0.332804 0.802734 0.5C0.802734 0.583598 0.76885 0.659281 0.714066 0.714066L0.853553 0.853553Z" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
id="gaugeValueMask"
|
||||
clipPathUnits="objectBoundingBox"
|
||||
>
|
||||
<path d="M0.18926 0.81074C0.109735 0.731215 0.0605469 0.621351 0.0605469 0.5C0.0605469 0.257298 0.257298 0.0605469 0.5 0.0605469C0.742702 0.0605469 0.939453 0.257298 0.939453 0.5C0.939453 0.621351 0.890265 0.731215 0.81074 0.81074L0.714066 0.714066C0.76885 0.659281 0.802734 0.583599 0.802734 0.5C0.802734 0.332804 0.667196 0.197266 0.5 0.197266C0.332804 0.197266 0.197266 0.332804 0.197266 0.5C0.197266 0.583599 0.23115 0.659281 0.285934 0.714066L0.18926 0.81074Z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<g class="c-dial__masks">
|
||||
<mask id="gaugeValueMask">
|
||||
<path
|
||||
d="M1.8926 8.1074C1.09734 7.31215 0.605469 6.21352 0.605469 5C0.605469 2.57297 2.57297 0.605469 5 0.605469C7.42703 0.605469 9.39453 2.57297 9.39453 5C9.39453 6.21352 8.90266 7.31215 8.1074 8.1074L7.14066 7.14066C7.6885 6.59281 8.02734 5.83598 8.02734 5C8.02734 3.32804 6.67196 1.97266 5 1.97266C3.32804 1.97266 1.97266 3.32804 1.97266 5C1.97266 5.83598 2.3115 6.59281 2.85934 7.14066L1.8926 8.1074Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<mask id="gaugeBgMask">
|
||||
<path
|
||||
d="M8.53553 8.53553C9.44036 7.63071 10 6.38071 10 5C10 2.23858 7.76142 0 5 0C2.23858 0 0 2.23858 0 5C0 6.38071 0.559644 7.63071 1.46447 8.53553L2.85934 7.14066C2.3115 6.59281 1.97266 5.83598 1.97266 5C1.97266 3.32804 3.32804 1.97266 5 1.97266C6.67196 1.97266 8.02734 3.32804 8.02734 5C8.02734 5.83598 7.6885 6.59281 7.14066 7.14066L8.53553 8.53553Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
</g>
|
||||
|
||||
<svg
|
||||
class="c-dial__range c-gauge__range js-gauge-dial-range"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<text
|
||||
v-if="displayMinMax"
|
||||
font-size="35"
|
||||
transform="translate(105 455) rotate(-45)"
|
||||
>{{ rangeLow }}</text>
|
||||
<text
|
||||
v-if="displayMinMax"
|
||||
font-size="35"
|
||||
transform="translate(407 455) rotate(45)"
|
||||
text-anchor="end"
|
||||
>{{ rangeHigh }}</text>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-if="displayCurVal"
|
||||
class="c-dial__current-value-text-wrapper"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<svg
|
||||
class="c-dial__current-value-text-sizer"
|
||||
:viewBox="curValViewBox"
|
||||
<g
|
||||
class="c-dial__graphics"
|
||||
mask="url(#gaugeBgMask)"
|
||||
>
|
||||
<rect
|
||||
class="c-dial__bg"
|
||||
x="0"
|
||||
y="0"
|
||||
width="10"
|
||||
height="10"
|
||||
/>
|
||||
<g
|
||||
v-if="isDialLowLimit"
|
||||
class="c-dial__limit-low"
|
||||
:style="`transform: rotate(${dialLowLimitDeg}deg)`"
|
||||
>
|
||||
<rect
|
||||
v-if="isDialLowLimitLow"
|
||||
class="c-dial__low-limit__low"
|
||||
x="5"
|
||||
y="5"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialLowLimitMid"
|
||||
class="c-dial__low-limit__mid"
|
||||
x="5"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialLowLimitHigh"
|
||||
class="c-dial__low-limit__high"
|
||||
x="0"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
v-if="isDialHighLimit"
|
||||
class="c-dial__limit-high"
|
||||
:style="`transform: rotate(${dialHighLimitDeg}deg)`"
|
||||
>
|
||||
<rect
|
||||
v-if="isDialHighLimitLow"
|
||||
class="c-dial__high-limit__low"
|
||||
x="0"
|
||||
y="5"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialHighLimitMid"
|
||||
class="c-dial__high-limit__mid"
|
||||
x="0"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialHighLimitHigh"
|
||||
class="c-dial__high-limit__high"
|
||||
x="5"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g
|
||||
class="c-dial__graphics"
|
||||
mask="url(#gaugeValueMask)"
|
||||
>
|
||||
<g
|
||||
v-if="typeFilledDial"
|
||||
class="c-dial__filled-value"
|
||||
:style="`transform: rotate(${degValueFilledDial}deg)`"
|
||||
>
|
||||
<rect
|
||||
v-if="isDialFilledValueLow"
|
||||
class="c-dial__filled-value__low"
|
||||
x="5"
|
||||
y="5"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialFilledValueMid"
|
||||
class="c-dial__filled-value__mid"
|
||||
x="5"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialFilledValueHigh"
|
||||
class="c-dial__filled-value__high"
|
||||
x="0"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
v-if="valueInBounds && typeNeedleDial"
|
||||
class="c-dial__needle-value"
|
||||
:style="`transform: rotate(${degValue}deg)`"
|
||||
>
|
||||
<path d="M4.90234 9.39453L5.09766 9.39453L5.30146 8.20874C6.93993 8.05674 8.22265 6.67817 8.22266 5C8.22266 3.22018 6.77982 1.77734 5 1.77734C3.22018 1.77734 1.77734 3.22018 1.77734 5C1.77734 6.67817 3.06007 8.05674 4.69854 8.20874L4.90234 9.39453Z" />
|
||||
</g>
|
||||
<path
|
||||
id="dialTextPath"
|
||||
class="c-dial__range-msg-path"
|
||||
d="M8.3501 5.0001C8.3501 6.85025 6.85025 8.3501 5.0001 8.3501C3.14994 8.3501 1.6501 6.85025 1.6501 5.0001C1.6501 3.14994 3.14994 1.6501 5.0001 1.6501C6.85025 1.6501 8.3501 3.14994 8.3501 5.0001Z"
|
||||
fill="none"
|
||||
style="transform-origin: center; transform: rotate(182deg)"
|
||||
/>
|
||||
</g>
|
||||
<g class="c-dial__text">
|
||||
<text
|
||||
x="50%"
|
||||
y="70%"
|
||||
text-anchor="middle"
|
||||
class="c-gauge__units"
|
||||
font-size="8%"
|
||||
>{{ units }}</text>
|
||||
|
||||
<g
|
||||
v-if="displayMinMax"
|
||||
class="c-dial__range-text js-gauge-dial-range"
|
||||
:font-size="rangeFontSize"
|
||||
>
|
||||
<text
|
||||
transform="translate(1.5 8.7) rotate(-45)"
|
||||
dominant-baseline="hanging"
|
||||
>{{ rangeLow }}</text>
|
||||
<text
|
||||
transform="translate(8.4 8.7) rotate(45)"
|
||||
dominant-baseline="hanging"
|
||||
text-anchor="end"
|
||||
>{{ rangeHigh }}</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<svg
|
||||
v-if="!valueInBounds && valueExpected"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
xml:space="preserve"
|
||||
class="c-dial__value-oor-indicator"
|
||||
x="45%"
|
||||
y="80%"
|
||||
width="1"
|
||||
height="1"
|
||||
><path
|
||||
d="M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192h-.1z"
|
||||
/></svg>
|
||||
|
||||
<svg
|
||||
class="c-gauge__current-value-text-wrapper"
|
||||
:viewBox="curValViewBox"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<rect
|
||||
class="svg-viewbox-debug"
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
<text
|
||||
class="c-dial__current-value-text js-dial-current-value"
|
||||
font-size="3.5"
|
||||
lengthAdjust="spacing"
|
||||
text-anchor="middle"
|
||||
style="transform: translate(50%, 70%)"
|
||||
>{{ curVal }}</text>
|
||||
dominant-baseline="middle"
|
||||
x="50%"
|
||||
y="50%"
|
||||
>
|
||||
<template v-if="displayCurVal">
|
||||
<tspan>{{ curVal }}</tspan>
|
||||
</template>
|
||||
</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
|
||||
class="c-dial__bg"
|
||||
viewBox="0 0 10 10"
|
||||
>
|
||||
<g
|
||||
v-if="isDialLowLimit"
|
||||
class="c-dial__limit-low"
|
||||
:style="`transform: rotate(${dialLowLimitDeg}deg)`"
|
||||
>
|
||||
<rect
|
||||
v-if="isDialLowLimitLow"
|
||||
class="c-dial__low-limit__low"
|
||||
x="5"
|
||||
y="5"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialLowLimitMid"
|
||||
class="c-dial__low-limit__mid"
|
||||
x="5"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialLowLimitHigh"
|
||||
class="c-dial__low-limit__high"
|
||||
x="0"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g
|
||||
v-if="isDialHighLimit"
|
||||
class="c-dial__limit-high"
|
||||
:style="`transform: rotate(${dialHighLimitDeg}deg)`"
|
||||
>
|
||||
<rect
|
||||
v-if="isDialHighLimitLow"
|
||||
class="c-dial__high-limit__low"
|
||||
x="0"
|
||||
y="5"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialHighLimitMid"
|
||||
class="c-dial__high-limit__mid"
|
||||
x="0"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialHighLimitHigh"
|
||||
class="c-dial__high-limit__high"
|
||||
x="5"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-if="typeFilledDial"
|
||||
class="c-dial__filled-value-wrapper"
|
||||
viewBox="0 0 10 10"
|
||||
>
|
||||
<g
|
||||
class="c-dial__filled-value"
|
||||
:style="`transform: rotate(${degValueFilledDial}deg)`"
|
||||
>
|
||||
<rect
|
||||
v-if="isDialFilledValueLow"
|
||||
class="c-dial__filled-value__low"
|
||||
x="5"
|
||||
y="5"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialFilledValueMid"
|
||||
class="c-dial__filled-value__mid"
|
||||
x="5"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
<rect
|
||||
v-if="isDialFilledValueHigh"
|
||||
class="c-dial__filled-value__high"
|
||||
x="0"
|
||||
y="0"
|
||||
width="5"
|
||||
height="5"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<svg
|
||||
v-if="valueInBounds && typeNeedleDial"
|
||||
class="c-dial__needle-value-wrapper"
|
||||
viewBox="0 0 10 10"
|
||||
>
|
||||
<g
|
||||
class="c-dial__needle-value"
|
||||
:style="`transform: rotate(${degValue}deg)`"
|
||||
>
|
||||
<path d="M4.90234 9.39453L5.09766 9.39453L5.30146 8.20874C6.93993 8.05674 8.22265 6.67817 8.22266 5C8.22266 3.22018 6.77982 1.77734 5 1.77734C3.22018 1.77734 1.77734 3.22018 1.77734 5C1.77734 6.67817 3.06007 8.05674 4.69854 8.20874L4.90234 9.39453Z" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@ -219,9 +247,22 @@
|
||||
<div class="c-meter__range__low">{{ rangeLow }}</div>
|
||||
</div>
|
||||
<div class="c-meter__bg">
|
||||
<div
|
||||
v-if="!valueInBounds && valueExpected"
|
||||
class="c-meter__value-oor-indicator"
|
||||
><svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
:preserveAspectRatio="meterOutOfRangeIndicatorAspectRatio"
|
||||
><path
|
||||
d="M448 0H64C28.7.1.1 28.7 0 64v384c.1 35.3 28.7 63.9 64 64h384c35.3-.1 63.9-28.7 64-64V64c-.1-35.3-28.7-63.9-64-64zM288 448h-64v-64h64v64zm10.9-192L280 352h-48l-18.9-96V64H299v192h-.1z"
|
||||
/></svg></div>
|
||||
|
||||
<template v-if="typeMeterVertical">
|
||||
<div
|
||||
v-if="valueExpected"
|
||||
class="c-meter__value"
|
||||
:class="{'c-meter__value-needle' : typeNeedleMeter }"
|
||||
:style="`transform: translateY(${meterValueToPerc}%)`"
|
||||
></div>
|
||||
|
||||
@ -240,7 +281,9 @@
|
||||
|
||||
<template v-if="typeMeterHorizontal">
|
||||
<div
|
||||
v-if="valueExpected"
|
||||
class="c-meter__value"
|
||||
:class="{'c-meter__value-needle' : typeNeedleMeter }"
|
||||
:style="`transform: translateX(${meterValueToPerc * -1}%)`"
|
||||
></div>
|
||||
|
||||
@ -258,38 +301,42 @@
|
||||
</template>
|
||||
|
||||
<svg
|
||||
class="c-meter__current-value-text-wrapper"
|
||||
viewBox="0 0 512 512"
|
||||
class="c-gauge__current-value-text-wrapper"
|
||||
:viewBox="curValViewBox"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<svg
|
||||
v-if="displayCurVal"
|
||||
class="c-meter__current-value-text-sizer"
|
||||
:viewBox="curValViewBox"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
<rect
|
||||
class="svg-viewbox-debug"
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
/>
|
||||
<text
|
||||
class="c-meter__current-value-text js-gauge-current-value"
|
||||
font-size="4"
|
||||
lengthAdjust="spacing"
|
||||
text-anchor="middle"
|
||||
:dominant-baseline="meterTextBaseline"
|
||||
x="50%"
|
||||
y="50%"
|
||||
>
|
||||
<text
|
||||
class="c-dial__current-value-text js-meter-current-value"
|
||||
lengthAdjust="spacing"
|
||||
text-anchor="middle"
|
||||
style="transform: translate(50%, 70%)"
|
||||
>
|
||||
<template v-if="displayCurVal">
|
||||
<tspan>{{ curVal }}</tspan>
|
||||
<tspan
|
||||
v-if="typeMeterHorizontal && displayUnits"
|
||||
class="c-gauge__units"
|
||||
font-size="10"
|
||||
font-size="80%"
|
||||
>{{ 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>
|
||||
<tspan
|
||||
v-if="typeMeterVertical && displayUnits"
|
||||
x="50%"
|
||||
dy="3.5"
|
||||
class="c-gauge__units"
|
||||
font-size="80%"
|
||||
>{{ units }}</tspan>
|
||||
</template>
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -343,14 +390,28 @@ export default {
|
||||
dialLowLimitDeg() {
|
||||
return this.percentToDegrees(this.valToPercent(this.limitLow));
|
||||
},
|
||||
meterOutOfRangeIndicatorAspectRatio() {
|
||||
return this.typeMeterVertical ? 'xMidYMax meet' : 'xMinYMid meet';
|
||||
},
|
||||
meterTextBaseline() {
|
||||
return this.typeMeterVertical ? 'auto' : 'middle';
|
||||
},
|
||||
curValViewBox() {
|
||||
const DIGITS_RATIO = 10;
|
||||
const VIEWBOX_STR = '0 0 X 15';
|
||||
const DIGITS_RATIO = 3;
|
||||
const VIEWBOX_STR = '0 0 X 10';
|
||||
|
||||
return VIEWBOX_STR.replace('X', this.digits * DIGITS_RATIO);
|
||||
},
|
||||
rangeFontSize() {
|
||||
const CHAR_THRESHOLD = 3;
|
||||
const START_PERC = 8.5;
|
||||
const REDUCE_PERC = 0.8;
|
||||
const RANGE_CHARS_MAX = Math.max(this.rangeLow.toString().length, this.rangeHigh.toString().length);
|
||||
|
||||
return this.fontSizeFromChars(RANGE_CHARS_MAX, CHAR_THRESHOLD, START_PERC, REDUCE_PERC);
|
||||
},
|
||||
isDialLowLimit() {
|
||||
return this.limitLow.length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max');
|
||||
return this.limitLow.toString().length > 0 && this.dialLowLimitDeg < getLimitDegree('low', 'max');
|
||||
},
|
||||
isDialLowLimitLow() {
|
||||
return this.dialLowLimitDeg >= getLimitDegree('low', 'q1');
|
||||
@ -362,7 +423,7 @@ export default {
|
||||
return this.dialLowLimitDeg >= getLimitDegree('low', 'q3');
|
||||
},
|
||||
isDialHighLimit() {
|
||||
return this.limitHigh.length > 0 && this.dialHighLimitDeg < getLimitDegree('high', 'max');
|
||||
return this.limitHigh.toString().length > 0 && this.dialHighLimitDeg < getLimitDegree('high', 'max');
|
||||
},
|
||||
isDialHighLimitLow() {
|
||||
return this.dialHighLimitDeg <= getLimitDegree('high', 'max');
|
||||
@ -383,10 +444,13 @@ export default {
|
||||
return this.degValue >= getLimitDegree('low', 'q3');
|
||||
},
|
||||
isMeterLimitHigh() {
|
||||
return this.limitHigh.length > 0 && this.meterHighLimitPerc > 0;
|
||||
return this.limitHigh.toString().length > 0 && this.meterHighLimitPerc > 0;
|
||||
},
|
||||
isMeterLimitLow() {
|
||||
return this.limitLow.length > 0 && this.meterLowLimitPerc > 0;
|
||||
return this.limitLow.toString().length > 0 && this.meterLowLimitPerc > 0;
|
||||
},
|
||||
gaugeTitle() {
|
||||
return this.valueInBounds ? 'Gauge' : 'Value is currently out of range and cannot be graphically displayed';
|
||||
},
|
||||
typeDial() {
|
||||
return this.matchGaugeType('dial');
|
||||
@ -409,15 +473,25 @@ export default {
|
||||
typeMeterInverted() {
|
||||
return this.matchGaugeType('inverted');
|
||||
},
|
||||
typeFilledMeter() {
|
||||
return true; // Stubbing in for future capability
|
||||
},
|
||||
typeNeedleMeter() {
|
||||
return false; // Stubbing in for future capability
|
||||
},
|
||||
meterValueToPerc() {
|
||||
const meterDirection = (this.typeMeterInverted) ? -1 : 1;
|
||||
|
||||
if (this.curVal <= this.rangeLow) {
|
||||
return meterDirection * 100;
|
||||
}
|
||||
if (this.typeFilledMeter) {
|
||||
// Filled meter is a filled rectangle that is transformed along a vertical or horizontal axis
|
||||
// So never move it below the low range more than 100%, or above the high range more than 0%
|
||||
if (this.curVal <= this.rangeLow) {
|
||||
return meterDirection * 100;
|
||||
}
|
||||
|
||||
if (this.curVal >= this.rangeHigh) {
|
||||
return 0;
|
||||
if (this.curVal >= this.rangeHigh) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
return this.valToPercentMeter(this.curVal) * meterDirection;
|
||||
@ -428,6 +502,13 @@ export default {
|
||||
meterLowLimitPerc() {
|
||||
return 100 - this.valToPercentMeter(this.limitLow);
|
||||
},
|
||||
valueExpected() {
|
||||
if (this.curVal === undefined || Object.is(this.curVal, 'null')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.curVal.toString().indexOf(DEFAULT_CURRENT_VALUE) === -1;
|
||||
},
|
||||
valueInBounds() {
|
||||
return (this.curVal >= this.rangeLow && this.curVal <= this.rangeHigh);
|
||||
},
|
||||
@ -504,6 +585,11 @@ export default {
|
||||
]
|
||||
});
|
||||
},
|
||||
fontSizeFromChars(charNum, charThreshold, startPerc, reducePerc) {
|
||||
const fs = (charNum <= charThreshold) ? startPerc : (startPerc - ((charNum - charThreshold) * reducePerc));
|
||||
|
||||
return fs.toString() + "%";
|
||||
},
|
||||
matchGaugeType(str) {
|
||||
return this.gaugeType.indexOf(str) !== -1;
|
||||
},
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
$meterNeedlePerc: 1%;
|
||||
$meterNeedleMinPx: 4px;
|
||||
$meterNeedleMaxPx: 20px;
|
||||
$meterNeedleBorderRadius: 5px;
|
||||
|
||||
.is-object-type-gauge {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -28,63 +33,64 @@
|
||||
@include abs();
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__current-value-text-wrapper {
|
||||
// SVG
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.c-dial__value-oor-indicator,
|
||||
.c-meter__value-oor-indicator {
|
||||
fill: $colorGaugeRange;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/********************************************** DIAL GAUGE */
|
||||
svg[class*='c-dial'] {
|
||||
.c-dial {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
position: absolute;
|
||||
|
||||
g {
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
.c-dial {
|
||||
&__bg {
|
||||
background: $colorGaugeBg;
|
||||
clip-path: url(#gaugeBgMask);
|
||||
fill: $colorGaugeBg;
|
||||
}
|
||||
|
||||
&__limit-high rect { fill: $colorGaugeLimitHigh; }
|
||||
&__limit-low rect { fill: $colorGaugeLimitLow; }
|
||||
|
||||
&__filled-value-wrapper {
|
||||
clip-path: url(#gaugeValueMask);
|
||||
&__limit-high rect {
|
||||
fill: $colorGaugeLimitHigh;
|
||||
}
|
||||
|
||||
&__needle-value-wrapper {
|
||||
clip-path: url(#gaugeValueMask);
|
||||
&__limit-low rect {
|
||||
fill: $colorGaugeLimitLow;
|
||||
}
|
||||
&__filled-value,
|
||||
&__range-msg-text {
|
||||
fill: $colorGaugeValue;
|
||||
}
|
||||
|
||||
&__filled-value { fill: $colorGaugeValue; }
|
||||
|
||||
&__needle-value {
|
||||
fill: $colorGaugeValue;
|
||||
transition: transform $transitionTimeGauge;
|
||||
}
|
||||
|
||||
&__current-value-text,
|
||||
&__units-text {
|
||||
&__current-value-text {
|
||||
fill: $colorGaugeTextValue;
|
||||
font-family: $heroFont;
|
||||
}
|
||||
|
||||
&__units-text,
|
||||
&__range-text {
|
||||
fill: $colorGaugeRange;
|
||||
}
|
||||
|
||||
&__graphics g {
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************** METER GAUGE */
|
||||
.c-meter {
|
||||
// Common styles for c-meter
|
||||
$meterOutOfRangeIndicatorMaxSize: 50%;
|
||||
@include abs();
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
// current-value-text
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__range {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
@ -102,10 +108,42 @@ svg[class*='c-dial'] {
|
||||
// Filled area
|
||||
position: absolute;
|
||||
background: $colorGaugeValue;
|
||||
transition: transform $transitionTimeGauge;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__value-needle {
|
||||
background: none !important;
|
||||
&:before {
|
||||
@include abs();
|
||||
content: '';
|
||||
display: block;
|
||||
background: $colorGaugeValue;
|
||||
}
|
||||
}
|
||||
|
||||
&__value-oor-indicator {
|
||||
$mxPx: 50px;
|
||||
$wh: 50%;
|
||||
position: absolute;
|
||||
height: $wh;
|
||||
width: $wh;
|
||||
max-height: $mxPx;
|
||||
max-width: $mxPx;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__current-value-text {
|
||||
fill: $colorGaugeTextValue;
|
||||
font-family: $heroFont;
|
||||
}
|
||||
|
||||
.c-gauge__curval {
|
||||
fill: $colorGaugeMeterTextValue !important;
|
||||
}
|
||||
@ -142,10 +180,28 @@ svg[class*='c-dial'] {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&__value-needle {
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
border-bottom-left-radius: $meterNeedleBorderRadius;
|
||||
border-top-left-radius: $meterNeedleBorderRadius;
|
||||
height: $meterNeedlePerc;
|
||||
min-height: $meterNeedleMinPx;
|
||||
max-height: $meterNeedleMaxPx;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='limit'] {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.c-meter__value-oor-indicator {
|
||||
bottom: 10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.c-gauge--meter-vertical & {
|
||||
@ -156,6 +212,13 @@ svg[class*='c-dial'] {
|
||||
&__limit-high {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&__value-needle {
|
||||
&:before {
|
||||
bottom: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-gauge--meter-vertical-inverted & {
|
||||
@ -174,6 +237,13 @@ svg[class*='c-dial'] {
|
||||
&__range__high {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&__value-needle {
|
||||
&:before {
|
||||
top: auto;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-gauge--meter-horizontal & {
|
||||
@ -207,6 +277,20 @@ svg[class*='c-dial'] {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__value-needle {
|
||||
top: 0;
|
||||
|
||||
&:before {
|
||||
border-bottom-left-radius: $meterNeedleBorderRadius;
|
||||
border-bottom-right-radius: $meterNeedleBorderRadius;
|
||||
left: auto;
|
||||
width: $meterNeedlePerc;
|
||||
min-width: $meterNeedleMinPx;
|
||||
max-width: $meterNeedleMaxPx;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
[class*='limit'] {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -219,5 +303,16 @@ svg[class*='c-dial'] {
|
||||
&__limit-high {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.c-meter__value-oor-indicator {
|
||||
// Horizontal meter
|
||||
left: 2%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.svg-viewbox-debug {
|
||||
fill: rgba(deeppink, 0.5);
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user