🔀 Merge pull request #1182 from altearius/FEATURE/cpu-temp-units

✨ Permit users to choose Celsius or Fahrenheit.

docs/widgets.md

@@ -2380,12 +2380,19 @@ You'll need to enable the sensors plugin to use this widget, using: `--enable-pl
 
 <p align="center"><img width="400" src="https://i.ibb.co/xSs4Gqd/gl-cpu-temp.png" /></p>
 
+#### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`units`** | `string` |  _Optional_ | Use `C` to display temperatures in Celsius or `F` to use Fahrenheit. Defaults to `C`.
+
 #### Example
 
 ```yaml
 - type: gl-cpu-temp
   options:
     hostname: http://192.168.130.2:61208
+    units: C
 ```
 
 ---

src/components/Widgets/GlCpuTemp.vue

@@ -2,7 +2,7 @@
 <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(sensor.sensorType) }}</p>
+    <p :class="`temp range-${sensor.color}`">{{ sensor.value | formatVal(sensor.unit) }}</p>
   </div>
 </div>
 </template>
@@ -10,7 +10,7 @@
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
 import GlancesMixin from '@/mixins/GlancesMixin';
-import { capitalize, fahrenheitToCelsius } from '@/utils/MiscHelpers';
+import { capitalize, celsiusToFahrenheit, fahrenheitToCelsius } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin, GlancesMixin],
@@ -29,18 +29,45 @@ export default {
     formatLbl(lbl) {
       return capitalize(lbl);
     },
-    formatVal(val, sensorType) {
+    formatVal(val, unit) {
-      switch (sensorType) {
+      switch (unit) {
-        case 'rpm':
+        case 'R':
           return `${Math.round(val)} rpm`;
-        case 'percentage':
+        case '%':
           return `${Math.round(val)}%`;
         default:
-          return `${Math.round(val)}°C`;
+          return `${Math.round(val)}°${unit}`;
       }
     },
   },
   methods: {
+    getDesiredUnits() {
+      return this.options.units ?? 'C';
+    },
+    getDisplayValue(rawValue, units) {
+      const desiredUnits = this.getDesiredUnits();
+      if (units === desiredUnits) {
+        return rawValue;
+      }
+
+      return desiredUnits === 'C'
+        ? fahrenheitToCelsius(rawValue)
+        : celsiusToFahrenheit(rawValue);
+    },
+    getCelsiusValue(rawValue, units) {
+      if (units !== 'F' && units !== 'C') {
+        return Number.NaN;
+      }
+
+      return units === 'C' ? rawValue : fahrenheitToCelsius(rawValue);
+    },
+    getFahrenheitValue(rawValue, units) {
+      if (units !== 'F' && units !== 'C') {
+        return Number.NaN;
+      }
+
+      return units === 'F' ? rawValue : celsiusToFahrenheit(rawValue);
+    },
     getTempColor(temp) {
       if (temp <= 50) return 'green';
       if (temp > 50 && temp < 75) return 'yellow';
@@ -54,45 +81,53 @@ export default {
       return 'green';
     },
     processData(sensorData) {
-      const results = [];
+      this.tempData = sensorData.map(sensor => {
-      sensorData.forEach((sensor) => {
-        // Start by assuming the sensor's unit is degrees Celsius
-        let sensorValue = sensor.value;
-        let color = this.getTempColor(sensorValue);
-        let sensorType = 'temperature';
-
-        // Now, override above if sensor unit is actually of a different type
         switch (sensor.unit) {
           case 'F':
-            sensorValue = fahrenheitToCelsius(sensorValue);
+          case 'C':
-            color = fahrenheitToCelsius(sensorValue);
+            return this.processTemperatureSensor(sensor);
-            break;
-
-          // R is for RPM and is typically for fans
           case 'R':
-            color = 'grey';
+            return this.processFanSensor(sensor);
-            sensorType = 'rpm';
-            break;
-
-          // For instance, battery levels
           case '%':
-            sensorType = 'percentage';
+            return this.processBatterySensor(sensor);
-            color = this.getPercentageColor(sensorValue);
-            break;
-
-          // Nothing to do here, already covered by default values
           default:
-            break;
+            // Justification: This is a recoverable error that developers
+            // should nevertheless be warned about.
+            // eslint-disable-next-line
+            console.warn('Unrecognized unit', sensor.unit);
+            return null;
         }
+      }).filter(Boolean);
+    },
+    processBatterySensor({ label, unit, value }) {
+      const color = this.getPercentageColor(value);
+      return {
+        color,
+        label,
+        unit,
+        value,
+      };
+    },
+    processFanSensor({ label, unit, value }) {
+      return {
+        color: 'grey',
+        label,
+        unit,
+        value,
+      };
+    },
+    processTemperatureSensor({ label, unit, value: originalValue }) {
+      const celsiusValue = this.getCelsiusValue(originalValue, unit);
+      const color = this.getTempColor(celsiusValue);
+      const displayValue = this.getDisplayValue(originalValue, unit);
+      const displayUnits = this.getDesiredUnits();
 
-        results.push({
+      return {
-          label: sensor.label,
+        color,
-          value: sensorValue,
+        label,
-          color,
+        unit: displayUnits,
-          sensorType,
+        value: displayValue,
-        });
+      };
-      });
-      this.tempData = results;
     },
   },
 };

src/utils/MiscHelpers.js

@@ -165,6 +165,11 @@ export const getValueFromCss = (colorVar) => {
   return cssProps.getPropertyValue(`--${colorVar}`).trim();
 };
 
+/* Given a temperature in Celsius, returns value in Fahrenheit */
+export const celsiusToFahrenheit = (celsius) => {
+  return Math.round((celsius * 1.8) + 32);
+};
+
 /* Given a temperature in Fahrenheit, returns value in Celsius */
 export const fahrenheitToCelsius = (fahrenheit) => {
   return Math.round(((fahrenheit - 32) * 5) / 9);