📊 Adds widget to display CPU temps (#452)

docs/widgets.md

@@ -57,6 +57,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Network Traffic](#network-traffic)
   - [Resource Usage Alerts](#resource-usage-alerts)
   - [Public & Private IP](#ip-address)
+  - [CPU Temperature](#cpu-temp)
 - **[Dynamic Widgets](#dynamic-widgets)**
   - [Iframe Widget](#iframe-widget)
   - [HTML Embed Widget](#html-embedded-widget)
@@ -1488,6 +1489,25 @@ Shows public and private IP address. Note that the ip plugin is not available on
 
 ---
 
+### CPU Temp
+
+Displays temperature data from system CPUs.
+
+Note: This widget uses the [`sensors`](https://github.com/nicolargo/glances/blob/develop/glances/plugins/glances_sensors.py) plugin, which is disabled by default, and may cause [performance issues](https://github.com/nicolargo/glances/issues/1664#issuecomment-632063558).
+You'll need to enable the sensors plugin to use this widget, using: `--enable-plugin sensors` when you start Glances.
+
+<p align="center"><img width="400" src="https://i.ibb.co/xSs4Gqd/gl-cpu-temp.png" /></p>
+
+##### Example 
+
+```yaml
+- type: gl-cpu-temp
+  options:
+    hostname: http://192.168.130.2:61208
+```
+
+---
+
 ## Dynamic Widgets
 
 ### Iframe Widget
@@ -1786,4 +1806,4 @@ For testing purposes, you can use an addon, which will disable the CORS checks.
 
 ### Raising an Issue
 
-If you need to submit a bug report for a failing widget, then please include the full console output (see [how](/docs/troubleshooting.md#how-to-open-browser-console)) as well as the relevant parts of your config file. Before sending the request, ensure you've read the docs. If you're new to GitHub, an haven't previously contributed to the project, then please fist star the repo to avoid your ticket being closed by the anti-spam bot.
+If you need to submit a bug report for a failing widget, then please include the full console output (see [how](/docs/troubleshooting.md#how-to-open-browser-console)) as well as the relevant parts of your config file. Before sending the request, ensure you've read the docs. If you're new to GitHub, an haven't previously contributed to the project, then please fist star the repo to avoid your ticket being closed by the anti-spam bot.

src/components/Widgets/GlCpuTemp.vue

@@ -0,0 +1,83 @@
+<template>
+<div class="glances-temp-wrapper" v-if="tempData">
+  <div class="temp-row" v-for="sensor in tempData" :key="sensor.label">
+    <p class="label">{{ sensor.label | formatLbl }}</p>
+    <p :class="`temp range-${sensor.color}`">{{ sensor.value | formatVal }}</p>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import GlancesMixin from '@/mixins/GlancesMixin';
+import { capitalize, fahrenheitToCelsius } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, GlancesMixin],
+  data() {
+    return {
+      tempData: null,
+      noResults: false,
+    };
+  },
+  computed: {
+    endpoint() {
+      return this.makeGlancesUrl('sensors');
+    },
+  },
+  filters: {
+    formatLbl(lbl) {
+      return capitalize(lbl);
+    },
+    formatVal(val) {
+      return `${Math.round(val)}°C`;
+    },
+  },
+  methods: {
+    getTempColor(temp) {
+      if (temp <= 50) return 'green';
+      if (temp > 50 && temp < 75) return 'yellow';
+      if (temp >= 75) return 'red';
+      return 'grey';
+    },
+    processData(sensorData) {
+      const results = [];
+      sensorData.forEach((sensor) => {
+        const tempC = sensor.unit === 'F' ? fahrenheitToCelsius(sensor.value) : sensor.value;
+        results.push({
+          label: sensor.label,
+          value: tempC,
+          color: this.getTempColor(tempC),
+        });
+      });
+      this.tempData = results;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-temp-wrapper {
+  .temp-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    p.label {
+      margin: 0.5rem 0;
+      color: var(--widget-text-color);
+    }
+    p.temp {
+      margin: 0.5rem 0;
+      font-size: 1.5rem;
+      font-weight: bold;
+      &.range-green { color: var(--success); }
+      &.range-yellow { color: var(--warning); }
+      &.range-red { color: var(--danger); }
+      &.range-grey { color: var(--medium-grey); }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -209,6 +209,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <GlCpuTemp
+        v-else-if="widgetType === 'gl-cpu-temp'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <HealthChecks
         v-else-if="widgetType === 'health-checks'"
         :options="widgetOptions"
@@ -413,6 +420,7 @@ export default {
     GlNetworkInterfaces: () => import('@/components/Widgets/GlNetworkInterfaces.vue'),
     GlNetworkTraffic: () => import('@/components/Widgets/GlNetworkTraffic.vue'),
     GlSystemLoad: () => import('@/components/Widgets/GlSystemLoad.vue'),
+    GlCpuTemp: () => import('@/components/Widgets/GlCpuTemp.vue'),
     HealthChecks: () => import('@/components/Widgets/HealthChecks.vue'),
     IframeWidget: () => import('@/components/Widgets/IframeWidget.vue'),
     Jokes: () => import('@/components/Widgets/Jokes.vue'),