🚧 Working on CPU Usage Widgets

src/components/Charts/Gauge.vue

@@ -8,7 +8,7 @@
       <defs>
         <!-- Inner shadow for empty part of the gauge -->
         <filter :id="`innershadow-${_uid}`">
-          <feFlood flood-color="#c7c6c6" />
+          <feFlood :flood-color="shadowColor" />
           <feComposite in2="SourceAlpha" operator="out" />
           <feGaussianBlur stdDeviation="2" result="blur" />
           <feComposite operator="atop" in2="SourceGraphic" />
@@ -192,7 +192,7 @@ export default {
         { offset: 0, color: '#20e253' },
         { offset: 30, color: '#f6f000' },
         { offset: 60, color: '#fca016' },
-        { offset: 90, color: '#f80363' },
+        { offset: 80, color: '#f80363' },
       ]),
     },
     /* Color of the base of the gauge */
@@ -200,6 +200,11 @@ export default {
       type: String,
       default: '#DDDDDD',
     },
+    /* The inset shadow color */
+    shadowColor: {
+      type: String,
+      default: '#8787871a',
+    },
     /* Scale interval, won't display any scall if 0 or `null` */
     scaleInterval: {
       type: Number,

src/components/Charts/PercentageChart.vue

@@ -40,6 +40,7 @@ export default {
     blocks() {
       let startPositionSum = 0;
       const results = [];
+      console.log(this.values);
       const total = this.values.reduce((prev, cur) => (prev.size || prev) + cur.size);
       const multiplier = this.showAsPercent ? 100 / total : 1;
       this.values.forEach((value, index) => {