Add new Gauge component

- WIP!
- Significant work: added lower limit to dial and meter;
- Added limitLow, refactored limit to limitHigh;
- Improved valToPercentMeter method;

src/plugins/gauge/components/GaugeFormController.vue

@@ -76,8 +76,16 @@
             </div>
 
             <div class="form-row c-form__row">
-                <label>Max Limit</label>
-                <input v-model="limit"
+                <label>Low Limit</label>
+                <input v-model="limitLow"
+                       type="number"
+                       @input="onChange"
+                >
+            </div>
+
+            <div class="form-row c-form__row">
+                <label>High Limit</label>
+                <input v-model="limitHigh"
                        type="number"
                        @input="onChange"
                 >
@@ -108,7 +116,8 @@ export default {
             gaugeType: this.model.value.gaugeType || this.getGaugeTypes().value,
             isUseTelemetryLimits: this.model.value.isUseTelemetryLimits,
             isDisplayMinMax: this.model.value.isDisplayMinMax,
-            limit: this.model.value.limit,
+            limitHigh: this.model.value.limitHigh,
+            limitLow: this.model.value.limitLow,
             max: this.model.value.max,
             min: this.model.value.min,
             precision: this.model.value.precision

src/plugins/gauge/components/GaugeRadial.vue

@@ -32,16 +32,29 @@
                     </g>
                 </svg>
 
-                <svg v-if="degLimit < 270"
-                     class="c-dial__limit"
+                <svg v-if="dialHighLimitDeg < 270"
+                     class="c-dial__limit-high"
                      viewBox="0 0 512 512"
                      :class="{
-                         'c-limit-clip--90': degLimit > 90,
-                         'c-limit-clip--180': degLimit >= 180
+                         'c-high-limit-clip--90': dialHighLimitDeg > 90,
+                         'c-high-limit-clip--180': dialHighLimitDeg >= 180
                      }"
                 >
                     <path d="M100,256A156,156,0,1,1,366.3,366.3L437,437a255.2,255.2,0,0,0,75-181C512,114.6,397.4,0,256,0S0,114.6,0,256A255.2,255.2,0,0,0,75,437l70.7-70.7A155.5,155.5,0,0,1,100,256Z"
-                          :style="`transform: rotate(${degLimit}deg)`"
+                          :style="`transform: rotate(${dialHighLimitDeg}deg)`"
+                    />
+                </svg>
+
+                <svg v-if="dialLowLimitDeg < 270"
+                     class="c-dial__limit-low"
+                     viewBox="0 0 512 512"
+                     :class="{
+                         'c-dial-clip--90': dialLowLimitDeg < 90,
+                         'c-dial-clip--180': dialLowLimitDeg >= 90 && dialLowLimitDeg < 180
+                     }"
+                >
+                    <path d="M256,100c86.2,0,156,69.8,156,156s-69.8,156-156,156c-43.1,0-82.1-17.5-110.3-45.7L75,437 c46.3,46.3,110.3,75,181,75c141.4,0,256-114.6,256-256S397.4,0,256,0C185.3,0,121.3,28.7,75,75l70.7,70.7 C173.9,117.5,212.9,100,256,100z"
+                          :style="`transform: rotate(${dialLowLimitDeg}deg)`"
                     />
                 </svg>
 
@@ -118,6 +131,94 @@
             </div>
         </template>
     </div>
+
+    <div v-if="debug"
+         class="temp-debug"
+    >
+        <div><b>ranges: </b>{{ rangeLow }} &lt; &gt; {{ rangeHigh }}</div>
+        <div><b>limits: </b>{{ limitLow }} &lt; &gt; {{ limitHigh }}</div>
+        <div><b>dial limit deg: </b>{{ dialLowLimitDeg }} deg &lt; &gt; {{ dialHighLimitDeg }} deg</div>
+        <div><b>meter limit %: </b>{{ meterLowLimitPerc }} &lt; &gt; {{ meterHighLimitPerc }}</div>
+
+        <div v-if="debugDial"
+             class="temp-dial-debug"
+        >
+            <div class="c-dial">
+                Value
+                <svg v-if="degValue > 0"
+                     class="c-dial__value"
+                     viewBox="0 0 512 512"
+                     :class="{
+                         'c-dial-clip--90': degValue < 90 && gaugeType.indexOf('-needle') === -1,
+                         'c-dial-clip--180': degValue >= 90 && degValue < 180 && gaugeType.indexOf('-needle') === -1
+                     }"
+                >
+                    <path v-if="true"
+                          d="M256,31A224.3,224.3,0,0,0,98.3,95.5l48.4,49.2a156,156,0,1,1-1,221.6L96.9,415.1A224.4,224.4,0,0,0,256,481c124.3,0,225-100.7,225-225S380.3,31,256,31Z"
+                          :style="`transform: rotate(${0}deg)`"
+                    />
+                    <path v-if="gaugeType.indexOf('dial-needle') !== -1 && false"
+                          d="M139.9,360.1l-48.6,48.6c-3.3,3.3-3.3,8.7,0,12s8.7,3.3,12,0l48.6-48.6L139.9,360.1z"
+                          :style="`transform: rotate(${degValue}deg)`"
+                    />
+                </svg>
+            </div>
+
+            <div class="c-dial">
+                Dial Clip
+                <div class="c-dial__value"
+                     style="clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%, 0 100%);"
+                ></div>
+            </div>
+
+            <div class="c-dial">
+                Dial Clip 180
+                <div class="c-dial__value c-dial-clip--180"></div>
+            </div>
+
+            <div class="c-dial">
+                Dial Clip 90
+                <div class="c-dial__value c-dial-clip--90"></div>
+            </div>
+        </div>
+
+        <div v-if="debugDial"
+             class="temp-dial-debug"
+        >
+            <div class="c-dial">
+                High Limit
+                <svg class="c-dial__bg"
+                     viewBox="0 0 512 512"
+                >
+                    <path d="M100,256A156,156,0,1,1,366.3,366.3L437,437a255.2,255.2,0,0,0,75-181C512,114.6,397.4,0,256,0S0,114.6,0,256A255.2,255.2,0,0,0,75,437l70.7-70.7A155.5,155.5,0,0,1,100,256Z"
+                          :style="`transform: rotate(${dialHighLimitDeg}deg)`"
+                    />
+                </svg>
+            </div>
+
+            <div class="c-dial">
+                Low Limit
+                <svg class="c-dial__bg"
+                     viewBox="0 0 512 512"
+                >
+                    <path d="M256,100c86.2,0,156,69.8,156,156s-69.8,156-156,156c-43.1,0-82.1-17.5-110.3-45.7L75,437 c46.3,46.3,110.3,75,181,75c141.4,0,256-114.6,256-256S397.4,0,256,0C185.3,0,121.3,28.7,75,75l70.7,70.7 C173.9,117.5,212.9,100,256,100z"
+                          :style="`transform: rotate(${dialLowLimitDeg}deg)`"
+                    />
+                </svg>
+            </div>
+
+            <div class="c-dial">
+                High Limit Clip 180
+                <div class="c-dial__value c-high-limit-clip--180"></div>
+            </div>
+
+            <div class="c-dial">
+                High Limit Clip 90
+                <div class="c-dial__value c-high-limit-clip--90"></div>
+            </div>
+        </div>
+    </div>
+
 </div>
 </template>
 
@@ -132,27 +233,41 @@ export default {
             curVal: 0,
             precision: gaugeController.precision,
             displayMinMax: gaugeController.isDisplayMinMax,
-            limit: gaugeController.limit,
+            limitHigh: gaugeController.limitHigh,
+            limitLow: gaugeController.limitLow,
             rangeHigh: gaugeController.max,
             rangeLow: gaugeController.min,
-            gaugeType: gaugeController.gaugeType
+            gaugeType: gaugeController.gaugeType,
+            debug: false,
+            debugDial: false
         };
     },
     computed: {
         degValue() {
             return this.percentToDegrees(this.valToPercent(this.curVal));
         },
-        degLimit() {
-            return this.percentToDegrees(this.valToPercent(this.limit));
+        dialHighLimitDeg() {
+            return this.percentToDegrees(this.valToPercent(this.limitHigh));
+        },
+        dialLowLimitDeg() {
+            return this.percentToDegrees(this.valToPercent(this.limitLow));
         },
         meterValueToPerc() {
+            if (this.curVal <= this.rangeLow) {
+                return 100;
+            }
+
+            if (this.curVal >= this.rangeHigh) {
+                return 0;
+            }
+
             return this.valToPercentMeter(this.curVal);
         },
         meterHighLimitPerc() {
-            return this.valToPercentMeter(this.limit);
+            return this.valToPercentMeter(this.limitHigh);
         },
         meterLowLimitPerc() {
-            return 0;
+            return 100 - this.valToPercentMeter(this.limitLow);
         }
     },
     mounted() {
@@ -182,14 +297,7 @@ export default {
             return ((vValue - this.rangeLow) / (this.rangeHigh - this.rangeLow)) * 100;
         },
         valToPercentMeter(vValue) {
-            // Used by meter
-            if (vValue >= this.rangeHigh) {
-                return 0;
-            } else if (vValue <= this.rangeLow) {
-                return 100;
-            } else {
-                return (this.rangeHigh - vValue) / (this.rangeHigh - this.rangeLow) * 100;
-            }
+            return this.round((this.rangeHigh - vValue) / (this.rangeHigh - this.rangeLow) * 100, 2);
         },
         percentToDegrees(vPercent) {
             return this.round((vPercent / 100) * 270, 2);

src/plugins/gauge/gauge.scss

@@ -3,7 +3,13 @@ $gaugeColorBg: rgba($colorBodyFg, 0.2);
 $gaugeColorValueBg: rgba($colorBodyFg, 0.5);
 $gaugeColorFg: pullForward($colorBodyFg, 20%);
 $gaugeValueTransitionTime: 250ms;
-$gaugeLimitColorBg: rgba($colorLimitRedBg, 0.5);
+$gaugeLimitHighColorBg: rgba($colorLimitRedBg, 0.5);
+$gaugeLimitLowColorBg: $gaugeLimitHighColorBg;
+
+$dialClip90: polygon(0 0, 50% 50%, 0 100%);
+$dialClip180: polygon(0 0, 100% 0, 0 100%);
+$limitHighClip90: polygon(0 0, 100% 0, 100% 100%);
+$limitHighClip180: polygon(100% 0, 100% 100%, 0 100%);
 
 .is-object-type-gauge {
   overflow: hidden;
@@ -57,7 +63,7 @@ $gaugeLimitColorBg: rgba($colorLimitRedBg, 0.5);
   svg,
   &__ticks,
   &__bg,
-  &__limit,
+  &[class*='__limit'],
   &__value {
     @include abs();
   }
@@ -68,31 +74,31 @@ $gaugeLimitColorBg: rgba($colorLimitRedBg, 0.5);
     }
   }
 
-  &__limit {
-    &.c-limit-clip--90 {
-      clip-path: polygon(0 0, 100% 0, 100% 100%);
-    }
-
-    &.c-limit-clip--180 {
-      clip-path: polygon(100% 0, 100% 100%, 0 100%);
-    }
+  .c-high-limit-clip--90 {
+    clip-path: $limitHighClip90;
+  }
 
-    path {
-      fill: $gaugeLimitColorBg;
-    }
+  .c-high-limit-clip--180 {
+    clip-path: $limitHighClip180;
   }
 
-  &__value {
+  &__limit-high path { fill: $gaugeLimitHighColorBg; }
+  &__limit-low path { fill: $gaugeLimitLowColorBg; }
 
+  &__value,
+  &__limit-low {
     &.c-dial-clip--90 {
-      clip-path: polygon(0 0, 50% 50%, 0 100%);
+      clip-path: $dialClip90;
     }
 
     &.c-dial-clip--180 {
-      clip-path: polygon(0 0, 100% 0, 0 100%);
+      clip-path: $dialClip180;
     }
+  }
 
-    path {
+  &__value {
+    path,
+    polygon {
       fill: $gaugeColorValueBg;
     }
   }
@@ -150,9 +156,16 @@ $gaugeLimitColorBg: rgba($colorLimitRedBg, 0.5);
   }
 
   [class*='limit'] {
-    background: $gaugeLimitColorBg;
     position: absolute;
   }
+
+  &__limit-high {
+    background: $gaugeLimitHighColorBg;
+  }
+
+  &__limit-low {
+    background: $gaugeLimitLowColorBg;
+  }
 }
 
 .c-gauge--meter-vertical .c-meter {
@@ -240,3 +253,33 @@ $gaugeLimitColorBg: rgba($colorLimitRedBg, 0.5);
   }
 
 }
+
+.temp-debug {
+  position: absolute;
+}
+
+.temp-dial-debug {
+  margin-top: 10px;
+  display: flex;
+
+  div {
+    background: rgba(red, 0.1);
+    position: relative;
+    width: 100px;
+    height: 100px;
+
+    div {
+      @include abs();
+      background: rgba(green, 0.3);
+    }
+  }
+
+  svg {
+    opacity: 0.5;
+  }
+
+  > * + * {
+    margin-left: 10px;
+  }
+
+}

src/plugins/gauge/plugin.js

@@ -28,6 +28,7 @@ export const GAUGE_TYPES = [
     ['Filled Dial', 'dial-filled'],
     ['Needle Dial', 'dial-needle'],
     ['Vertical Meter', 'meter-vertical'],
+    ['Vertical Meter Inverted', 'meter-vertical-inverted'],
     ['Horizontal Meter', 'meter-horz']
 ];
 
@@ -48,7 +49,7 @@ export default function () {
                         gaugeType: GAUGE_TYPES[0],
                         isDisplayMinMax: true,
                         isUseTelemetryLimits: false,
-                        limit: 90,
+                        limitHigh: 90,
                         max: 100,
                         min: 0,
                         precision: 2