📊 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

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'),