feat: adds Moonraker sensor charts (#1885)

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: pedrolamas

src/components/ui/AppInlineChart.vue

@@ -68,12 +68,15 @@ export default class AppInlineChart extends Vue {
 
     return this.labels.map(label => {
       const value = get(item, label.value)
+      const formattedValue = typeof value === 'number' && value !== 0
+        ? value.toFixed(2)
+        : value
 
       return {
         label,
         value: this.isEmpty(value)
           ? '--'
-          : `${value}${label.suffix ?? ''}`
+          : `${formattedValue}${label.suffix ?? ''}`
       }
     })
   }

src/components/widgets/sensors/SensorChart.vue

@@ -0,0 +1,79 @@
+<template>
+  <app-inline-chart
+    :data="chartData"
+    :options="options"
+    :labels="labels"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import type { EChartsOption, LineSeriesOption } from 'echarts'
+import type { ChartData } from '@/store/charts/types'
+import type { AppInlineChartLabel } from '@/components/ui/AppInlineChart.vue'
+
+@Component({})
+export default class SensorChart extends Vue {
+  @Prop({ type: String, required: true })
+  readonly sensorId!: string
+
+  @Prop({ type: String, required: true })
+  readonly field!: string
+
+  @Prop({ type: String, required: true })
+  readonly label!: string
+
+  @Prop({ type: String })
+  readonly units?: string
+
+  get chartData (): ChartData[] {
+    return this.$typedState.charts[`sensor:${this.sensorId}`] ?? []
+  }
+
+  get suffix (): string {
+    return this.units
+      ? ` ${this.units}`
+      : ''
+  }
+
+  get labels (): AppInlineChartLabel[] {
+    return [
+      {
+        text: this.label,
+        value: this.field,
+        suffix: this.suffix
+      }
+    ]
+  }
+
+  get options (): EChartsOption {
+    const options: EChartsOption = {
+      ...this.$typedGetters['charts/getBaseChartOptions']({
+        [this.field]: this.suffix
+      }),
+      series: this.series
+    }
+
+    if (
+      options.yAxis &&
+      !Array.isArray(options.yAxis)
+    ) {
+      options.yAxis.min = (value) => Math.min(0, value.min)
+      options.yAxis.max = (value) => Math.max(1, value.max * 1.1)
+    }
+
+    return options
+  }
+
+  get series (): LineSeriesOption {
+    return {
+      ...this.$typedGetters['charts/getBaseSeries'],
+      name: this.label,
+      encode: {
+        x: 'date',
+        y: this.field
+      }
+    }
+  }
+}
+</script>

src/components/widgets/sensors/Sensors.vue

@@ -1,49 +1,118 @@
 <template>
-  <v-container>
-    <v-row
+  <v-expansion-panels
+    v-model="expanded"
+    accordion
+    multiple
+  >
+    <v-expansion-panel
       v-for="sensor in sensors"
       :key="sensor.id"
     >
-      <v-col>
-        {{ $filters.prettyCase(sensor.friendly_name) }}
-
-        <v-chip
-          v-for="(value, key) in sensor.values"
-          :key="`${sensor.id}-${key}`"
-          small
-          class="ml-2"
+      <v-expansion-panel-header>
+        <template #actions>
+          <v-icon
+            dense
+            class="mr-1"
+          >
+            $expand
+          </v-icon>
+        </template>
+        <div>
+          {{ $filters.prettyCase(sensor.friendly_name) }}
+
+          <v-chip
+            v-for="(value, key) in sensor.values"
+            :key="`${sensor.id}-${key}`"
+            small
+            class="ml-2"
+          >
+            {{ $filters.prettyCase(key.toString()) }}: {{ getFormattedValue(sensor, key.toString(), value) }}
+          </v-chip>
+        </div>
+      </v-expansion-panel-header>
+
+      <v-expansion-panel-content>
+        <v-row v-if="getChartableFields(sensor).length">
+          <sensor-chart
+            v-for="field in getChartableFields(sensor)"
+            :key="`${sensor.id}-chart-${field}`"
+            :sensor-id="sensor.id"
+            :field="field"
+            :label="$filters.prettyCase(field)"
+            :units="getUnits(sensor, field)"
+          />
+        </v-row>
+
+        <div
+          v-else
+          class="text--secondary"
         >
-          {{ $filters.prettyCase(key.toString()) }}: {{ getFormattedValue(sensor, key.toString(), value) }}
-        </v-chip>
-      </v-col>
-    </v-row>
-  </v-container>
+          {{ $t('app.general.label.no_data') }}
+        </div>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import SensorChart from './SensorChart.vue'
 
-@Component({})
+@Component({
+  components: {
+    SensorChart
+  }
+})
 export default class Sensors extends Vue {
   get sensors (): Moonraker.Sensor.Entry[] {
     return this.$typedGetters['sensors/getSensors']
   }
 
+  get expanded (): number[] {
+    const sensors = this.sensors
+    const expandedKeys = this.$typedState.sensors.expanded
+
+    return sensors
+      .map((sensor, index) => expandedKeys.includes(sensor.id)
+        ? index
+        : -1)
+      .filter(i => i !== -1)
+  }
+
+  set expanded (value: number[]) {
+    const sensors = this.sensors
+    const expandedKeys = value
+      .map(index => sensors[index]?.id)
+      .filter((id): id is string => id != null)
+
+    this.$typedDispatch('sensors/saveExpanded', expandedKeys)
+  }
+
+  getChartableFields (sensor: Moonraker.Sensor.Entry): string[] {
+    return Object.entries(sensor.values)
+      .filter(([, value]) => typeof value === 'number')
+      .map(([key]) => key)
+  }
+
+  getUnits (sensor: Moonraker.Sensor.Entry, key: string): string | undefined {
+    return sensor.parameter_info?.find(x => x.name === key)?.units
+  }
+
   getFormattedValue (sensor: Moonraker.Sensor.Entry, key: string, value: unknown) {
     if (value == null || value === '') {
       return '--'
     }
 
-    const parameterUnits = sensor.parameter_info?.find(x => x.name === key)?.units
-    const units = parameterUnits
-      ? ` ${parameterUnits}`
+    const units = this.getUnits(sensor, key)
+    const suffix = units
+      ? ` ${units}`
       : ''
 
     if (typeof value === 'number') {
-      return `${Math.round(value * 100) / 100}${units}`
+      return `${Math.round(value * 100) / 100}${suffix}`
     }
 
-    return `${value}${units}`
+    return `${value}${suffix}`
   }
 }
 </script>

src/components/widgets/system/KlipperLoadChart.vue

@@ -22,15 +22,15 @@ export default class KlipperLoadChart extends Vue {
       {
         text: this.$t('app.system_info.label.klipper_load').toString(),
         value: 'cputime_change',
-        suffix: '%'
+        suffix: ' %'
       }
     ]
   }
 
   get options (): EChartsOption {
     return {
       ...this.$typedGetters['charts/getBaseChartOptions']({
-        cputime_change: '%'
+        cputime_change: ' %'
       }),
       series: this.series
     }

src/components/widgets/system/McuLoadChart.vue

@@ -26,21 +26,21 @@ export default class McuLoadChart extends Vue {
       {
         text: this.$t('app.system_info.label.mcu_load', { mcu: this.mcu.prettyName }).toString(),
         value: 'load',
-        suffix: '%'
+        suffix: ' %'
       },
       {
         text: this.$t('app.system_info.label.mcu_awake', { mcu: this.mcu.prettyName }).toString(),
         value: 'awake',
-        suffix: '%'
+        suffix: ' %'
       }
     ]
   }
 
   get options (): EChartsOption {
     const options: EChartsOption = {
       ...this.$typedGetters['charts/getBaseChartOptions']({
-        load: '%',
-        awake: '%',
+        load: ' %',
+        awake: ' %',
         bw: 'b'
       }),
       series: this.series

src/components/widgets/system/MoonrakerLoadChart.vue

@@ -22,15 +22,15 @@ export default class MoonrakerLoadChart extends Vue {
       {
         text: this.$t('app.system_info.label.moonraker_load').toString(),
         value: 'load',
-        suffix: '%'
+        suffix: ' %'
       }
     ]
   }
 
   get options (): EChartsOption {
     return {
       ...this.$typedGetters['charts/getBaseChartOptions']({
-        load: '%'
+        load: ' %'
       }),
       series: this.series
     }

src/components/widgets/system/SystemMemoryChart.vue

@@ -22,15 +22,15 @@ export default class SystemMemoryChart extends Vue {
       {
         text: this.$t('app.system_info.label.system_memory').toString(),
         value: 'memused',
-        suffix: '%'
+        suffix: ' %'
       }
     ]
   }
 
   get options (): EChartsOption {
     return {
       ...this.$typedGetters['charts/getBaseChartOptions']({
-        memused: '%'
+        memused: ' %'
       }),
       series: this.series
     }

src/globals.ts

@@ -249,6 +249,7 @@ export const Globals = Object.freeze({
       ROOTS: {
         uiSettings: { name: 'uiSettings', dispatch: 'config/initUiSettings' },
         macros: { name: 'macros', dispatch: 'macros/initMacros' },
+        sensors: { name: 'sensors', dispatch: 'sensors/initSensors' },
         console: { name: 'console', dispatch: 'console/initConsole' },
         charts: { name: 'charts', dispatch: 'charts/initCharts' },
         cameras: { name: 'cameras', dispatch: 'webcams/initLegacyCameras', migrate_only: true },

src/locales/en.yaml

@@ -413,6 +413,7 @@ app:
       moonraker: Moonraker
       name: Name
       new_password: New password
+      no_data: No data
       no_notifications: No notifications
       'on': 'On'
       'off': 'Off'