Closes #5323, #5325

- Styles and stubbed in code to support needle meter type;
nasa · Jun 24, 2022 · 15119b8 · 15119b8
1 parent 3e31250
commit 15119b8
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 6 deletions.
diff --git a/src/plugins/gauge/components/Gauge.vue b/src/plugins/gauge/components/Gauge.vue
@@ -261,6 +261,7 @@
                 <template v-if="typeMeterVertical">
                     <div
                         class="c-meter__value"
+                        :class="{'c-meter__value-needle' : typeNeedleMeter }"
                         :style="`transform: translateY(${meterValueToPerc}%)`"
                     ></div>
 
@@ -280,6 +281,7 @@
                 <template v-if="typeMeterHorizontal">
                     <div
                         class="c-meter__value"
+                        :class="{'c-meter__value-needle' : typeNeedleMeter }"
                         :style="`transform: translateX(${meterValueToPerc * -1}%)`"
                     ></div>
 
@@ -469,15 +471,25 @@ export default {
         typeMeterInverted() {
             return this.matchGaugeType('inverted');
         },
+        typeFilledMeter() {
+            return true; // TODO: enhance Gauge props to support this
+        },
+        typeNeedleMeter() {
+            return false; // TODO: enhance Gauge props to support this
+        },
         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;

diff --git a/src/plugins/gauge/gauge.scss b/src/plugins/gauge/gauge.scss
@@ -1,3 +1,6 @@
+$meterNeedlePerc: 1%; // Todo: move this into a constant
+$meterNeedleMinPx: 2px;
+
 .is-object-type-gauge {
   overflow: hidden;
 }
@@ -77,7 +80,6 @@
 
   &__graphics g {
     transform-origin: center;
-    opacity: 0.5; // TEMP
   }
 }
 
@@ -108,6 +110,16 @@
     z-index: 1;
   }
 
+  &__value-needle {
+    background: none !important;
+    &:before {
+      @include abs();
+      content: '';
+      display: block;
+      background: $colorGaugeValue;
+    }
+  }
+
   &__value-oor-indicator {
     $mxPx: 50px;
     $wh: 50%;
@@ -187,6 +199,17 @@
     &__limit-high {
       top: 0;
     }
+
+    &__value-needle {
+      left: 0;
+
+      &:before {
+        bottom: auto;
+        height: $meterNeedlePerc;
+        min-height: $meterNeedleMinPx;
+        transform: translateY(-50%);
+      }
+    }
   }
 
   .c-gauge--meter-vertical-inverted & {
@@ -205,6 +228,17 @@
     &__range__high {
       order: 2;
     }
+
+    &__value-needle {
+      left: 0;
+
+      &:before {
+        top: auto;
+        height: $meterNeedlePerc;
+        min-height: $meterNeedleMinPx;
+        transform: translateY(50%);
+      }
+    }
   }
 
   .c-gauge--meter-horizontal & {
@@ -238,6 +272,17 @@
       right: 0;
     }
 
+    &__value-needle {
+      bottom: 0;
+
+      &:before {
+        left: auto;
+        width: $meterNeedlePerc;
+        min-height: $meterNeedleMinPx;
+        transform: translateX(50%);
+      }
+    }
+
     [class*='limit'] {
       top: 0;
       bottom: 0;