🚧 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) => {

src/components/Widgets/GlCpuCores.vue

@@ -0,0 +1,93 @@
+<template>
+<div class="glances-cpu-cores-wrapper">
+  <div class="percentage-charts" v-for="(chartData, index) in cpuChartData" :key="index">
+    <PercentageChart :values="chartData" />
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+import { capitalize } from '@/utils/MiscHelpers';
+import PercentageChart from '@/components/Charts/PercentageChart';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  components: {
+    PercentageChart,
+  },
+  data() {
+    return {
+      cpuChartData: null,
+    };
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/quicklook`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(cpuData) {
+      const results = [];
+      cpuData.percpu.forEach((cpuInfo) => {
+        const cpuSection = [];
+        const ignore = ['total', 'key', 'cpu_number'];
+        Object.keys(cpuInfo).forEach((keyName) => {
+          if (!ignore.includes(keyName) && cpuInfo[keyName]) {
+            cpuSection.push({
+              label: capitalize(keyName),
+              size: cpuInfo[keyName],
+              color: keyName === 'idle' ? '#20e253' : null,
+            });
+          }
+        });
+        results.push(cpuSection.reverse());
+      });
+      this.cpuChartData = results;
+    },
+    generateCpuChart(cpuData) {
+      // [
+      //   { size: 15, label: 'Hello' },
+      //   { size: 12, label: 'World' },
+      //   { size: 10 },
+      //   { size: 10 },
+      //   { size: 10 },
+      //   { size: 10 },
+      //   { size: 5 },
+      //   { size: 5 },
+      //   { size: 5 },
+      // ]
+      const newElement = document.createElement('div');
+      const parentContainer = document.getElementById(this.chartId);
+      parentContainer.appendChild(newElement);
+      const colors = Array(cpuData.labels.length - 1).fill('#f80363');
+      colors.push('#20e253');
+      return new this.Chart(newElement, {
+        title: 'CPU',
+        data: cpuData,
+        type: 'percentage',
+        height: 150,
+        colors,
+        barOptions: {
+          height: 18,
+          depth: 4,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-cpu-cores-wrapper {
+  color: var(--widget-text-color);
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -95,6 +95,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GitHubProfile
+        v-else-if="widgetType === 'github-profile-stats'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <GitHubTrending
         v-else-if="widgetType === 'github-trending-repos'"
         :options="widgetOptions"
@@ -102,8 +109,15 @@
         @error="handleError"
         :ref="widgetRef"
       />
-      <GitHubProfile
-        v-else-if="widgetType === 'github-profile-stats'"
+      <GlCpuCores
+        v-else-if="widgetType === 'gl-current-cores'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
+      <GlCpuGauge
+        v-else-if="widgetType === 'gl-current-cpu'"
         :options="widgetOptions"
         @loading="setLoaderState"
         @error="handleError"
@@ -298,6 +312,8 @@ export default {
     ExchangeRates: () => import('@/components/Widgets/ExchangeRates.vue'),
     Flights: () => import('@/components/Widgets/Flights.vue'),
     GitHubTrending: () => import('@/components/Widgets/GitHubTrending.vue'),
+    GlCpuCores: () => import('@/components/Widgets/GlCpuCores.vue'),
+    GlCpuGauge: () => import('@/components/Widgets/GlCpuGauge.vue'),
     GitHubProfile: () => import('@/components/Widgets/GitHubProfile.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),

src/mixins/WidgetMixin.js

@@ -17,6 +17,7 @@ const WidgetMixin = {
   data: () => ({
     progress: new ProgressBar({ color: 'var(--progress-bar)' }),
     overrideProxyChoice: false,
+    disableLoader: false, // Prevent ever showing the loader
   }),
   /* When component mounted, fetch initial data */
   mounted() {
@@ -44,8 +45,10 @@ const WidgetMixin = {
     },
     /* When a data request update starts, show loader */
     startLoading() {
-      this.$emit('loading', true);
-      this.progress.start();
+      if (!this.disableLoader) {
+        this.$emit('loading', true);
+        this.progress.start();
+      }
     },
     /* When a data request finishes, hide loader */
     finishLoading() {

src/utils/MiscHelpers.js

@@ -86,7 +86,8 @@ export const showNumAsThousand = (bigNum) => {
 
 /* Capitalizes the first letter of each word within a string */
 export const capitalize = (str) => {
-  return str.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
+  const words = str.replaceAll('_', ' ').replaceAll('-', ' ');
+  return words.replace(/\w\S*/g, (w) => (w.replace(/^\w/, (c) => c.toUpperCase())));
 };
 
 /* Round price to appropriate number of decimals */
@@ -122,6 +123,12 @@ export const getTimeAgo = (dateTime) => {
   return 'unknown';
 };
 
+/* Given the name of a CSS variable, returns it's value */
+export const getValueFromCss = (colorVar) => {
+  const cssProps = getComputedStyle(document.documentElement);
+  return cssProps.getPropertyValue(`--${colorVar}`).trim();
+};
+
 /* Given a currency code, return the corresponding unicode symbol */
 export const findCurrencySymbol = (currencyCode) => {
   const code = currencyCode.toUpperCase().trim();