✨ Adds widgets for monitoring CPU usage

src/components/Widgets/GlCpuCores.vue

@@ -1,19 +1,18 @@
 <template>
 <div class="glances-cpu-cores-wrapper">
   <div class="percentage-charts" v-for="(chartData, index) in cpuChartData" :key="index">
-    <PercentageChart :values="chartData" />
+    <PercentageChart :values="chartData" :title="`Core #${index + 1}`" />
   </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],
+  mixins: [WidgetMixin],
   components: {
     PercentageChart,
   },
@@ -31,56 +30,29 @@ export default {
       return `${this.hostname}/api/3/quicklook`;
     },
   },
+  created() {
+    // Enable automatic updates (won't be applied if user has explicitly disabled)
+    this.overrideUpdateInterval = 2;
+  },
   methods: {
     fetchData() {
       this.makeRequest(this.endpoint).then(this.processData);
     },
+    /* Converts returned data into format for the percentage charts */
     processData(cpuData) {
-      const results = [];
+      const cpuSections = [];
       cpuData.percpu.forEach((cpuInfo) => {
         const cpuSection = [];
-        const ignore = ['total', 'key', 'cpu_number'];
+        const ignore = ['total', 'key', 'cpu_number', 'idle'];
+        cpuSection.push({ label: 'Idle', size: cpuInfo.idle, color: '#20e253' });
         Object.keys(cpuInfo).forEach((keyName) => {
           if (!ignore.includes(keyName) && cpuInfo[keyName]) {
-            cpuSection.push({
-              label: capitalize(keyName),
-              size: cpuInfo[keyName],
-              color: keyName === 'idle' ? '#20e253' : null,
-            });
+            cpuSection.push({ label: capitalize(keyName), size: cpuInfo[keyName] });
           }
         });
-        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,
-        },
+        cpuSections.push(cpuSection);
       });
+      this.cpuChartData = cpuSections;
     },
   },
 };
@@ -89,5 +61,8 @@ export default {
 <style scoped lang="scss">
 .glances-cpu-cores-wrapper {
   color: var(--widget-text-color);
+  .percentage-charts:not(:last-child) {
+    border-bottom: 1px dashed var(--widget-accent-color);
+  }
 }
 </style>