From 73493fc6e5eee8656a3fb190f6ed19b442263a69 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Mon, 22 Jun 2026 12:55:46 +0100
Subject: [PATCH 1/4] refactor: add AppInlineChart component

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 components.d.ts                               |  6 ++
 src/components/ui/AppInlineChart.vue          | 88 +++++++++++++++++++
 .../widgets/system/KlipperLoadChart.vue       | 26 +++---
 .../widgets/system/McuLoadChart.vue           | 40 +++++----
 .../widgets/system/MoonrakerLoadChart.vue     | 26 +++---
 src/components/widgets/system/SystemChart.vue | 50 -----------
 .../widgets/system/SystemLoadChart.vue        | 26 +++---
 .../widgets/system/SystemMemoryChart.vue      | 26 +++---
 8 files changed, 167 insertions(+), 121 deletions(-)
 create mode 100644 src/components/ui/AppInlineChart.vue
 delete mode 100644 src/components/widgets/system/SystemChart.vue

diff --git a/components.d.ts b/components.d.ts
index ed60a88873..3de4f28f4a 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -36,6 +36,7 @@ declare module 'vue' {
     AppFocusableContainer: typeof import('./src/components/ui/AppFocusableContainer.vue')['default']
     AppFooter: typeof import('./src/components/layout/AppFooter.vue')['default']
     AppIcon: typeof import('./src/components/ui/AppIcon.vue')['default']
+    AppInlineChart: typeof import('./src/components/ui/AppInlineChart.vue')['default']
     AppInlineHelp: typeof import('./src/components/ui/AppInlineHelp.vue')['default']
     AppIroColorPicker: typeof import('./src/components/ui/AppIroColorPicker.vue')['default']
     AppNamedSelect: typeof import('./src/components/ui/AppNamedSelect.vue')['default']
@@ -136,6 +137,11 @@ declare module 'vue' {
     VSlider: typeof import('vuetify/lib')['VSlider']
     VSnackbar: typeof import('vuetify/lib')['VSnackbar']
     VSpacer: typeof import('vuetify/lib')['VSpacer']
+    VStepper: typeof import('vuetify/lib')['VStepper']
+    VStepperContent: typeof import('vuetify/lib')['VStepperContent']
+    VStepperHeader: typeof import('vuetify/lib')['VStepperHeader']
+    VStepperItems: typeof import('vuetify/lib')['VStepperItems']
+    VStepperStep: typeof import('vuetify/lib')['VStepperStep']
     VSubheader: typeof import('vuetify/lib')['VSubheader']
     VSwitch: typeof import('vuetify/lib')['VSwitch']
     VTab: typeof import('vuetify/lib')['VTab']
diff --git a/src/components/ui/AppInlineChart.vue b/src/components/ui/AppInlineChart.vue
new file mode 100644
index 0000000000..983c013af1
--- /dev/null
+++ b/src/components/ui/AppInlineChart.vue
@@ -0,0 +1,88 @@
+<template>
+  <v-col
+    v-if="hasData"
+    cols="4"
+    class="chart-wrapper"
+  >
+    <app-chart
+      :data="data"
+      :options="options"
+      height="120px"
+    />
+
+    <div class="chart-label-wrapper">
+      <div
+        v-for="{ label, value } in items"
+        :key="label.value"
+        class="chart-label"
+      >
+        <span>{{ label.text }}</span>
+        <span>{{ value }}</span>
+      </div>
+    </div>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import type { DatasetComponentOption, EChartsOption } from 'echarts'
+import { get } from 'lodash-es'
+
+export type AppInlineChartLabel = {
+  text: string
+  value: string
+  suffix?: string
+}
+
+const defaultGetter = (item: unknown, label: AppInlineChartLabel): unknown => get(item, label.value)
+
+export type DefaultGetterFunction = typeof defaultGetter
+
+export type GetterFunction = (item: unknown, label: AppInlineChartLabel, defaultGetter: DefaultGetterFunction) => unknown
+
+@Component({
+  inheritAttrs: false
+})
+export default class AppInlineChart extends Vue {
+  @Prop({ type: Array, required: true })
+  readonly data!: Extract<DatasetComponentOption['source'], unknown[]>
+
+  @Prop({ type: Object, required: true })
+  readonly options!: EChartsOption
+
+  @Prop({ type: Array, required: true })
+  readonly labels!: AppInlineChartLabel[]
+
+  @Prop({ type: Function })
+  readonly customGetter?: GetterFunction
+
+  get hasData (): boolean {
+    return (
+      Array.isArray(this.data) &&
+      this.data.length > 0
+    )
+  }
+
+  get items () {
+    const getter = this.customGetter ?? defaultGetter
+    const item = this.data[this.data.length - 1]
+
+    return this.labels.map(label => ({
+      label,
+      value: `${getter(item, label, defaultGetter)}${label.suffix ?? ''}`
+    }))
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .chart-label-wrapper {
+    margin-top: 6px;
+    display: block;
+  }
+
+  .chart-label {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>
diff --git a/src/components/widgets/system/KlipperLoadChart.vue b/src/components/widgets/system/KlipperLoadChart.vue
index 830b74f3a2..a80f1e29ce 100644
--- a/src/components/widgets/system/KlipperLoadChart.vue
+++ b/src/components/widgets/system/KlipperLoadChart.vue
@@ -1,30 +1,30 @@
 <template>
-  <system-chart
+  <app-inline-chart
     :data="chartData"
     :options="options"
-  >
-    <div class="chart-label">
-      <span>{{ $t('app.system_info.label.klipper_load') }}</span>
-      <span v-if="chartData.length">{{ chartData[chartData.length - 1].cputime_change }}%</span>
-    </div>
-  </system-chart>
+    :labels="labels"
+  />
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import type { EChartsOption, LineSeriesOption } from 'echarts'
-import SystemChart from './SystemChart.vue'
+import type { AppInlineChartLabel } from '@/components/ui/AppInlineChart.vue'
 
-@Component({
-  components: {
-    SystemChart
-  }
-})
+@Component({})
 export default class KlipperLoadChart extends Vue {
   get chartData () {
     return this.$typedState.charts.klipper || []
   }
 
+  get labels (): AppInlineChartLabel[] {
+    return [{
+      text: this.$t('app.system_info.label.klipper_load').toString(),
+      value: 'cputime_change',
+      suffix: '%'
+    }]
+  }
+
   get options (): EChartsOption {
     return {
       ...this.$typedGetters['charts/getBaseChartOptions']({
diff --git a/src/components/widgets/system/McuLoadChart.vue b/src/components/widgets/system/McuLoadChart.vue
index 123c4f3843..8d3165fb7f 100644
--- a/src/components/widgets/system/McuLoadChart.vue
+++ b/src/components/widgets/system/McuLoadChart.vue
@@ -1,31 +1,18 @@
 <template>
-  <system-chart
-    :data="chartData || []"
+  <app-inline-chart
+    :data="chartData"
     :options="options"
-  >
-    <div class="chart-label">
-      <span>{{ $t('app.system_info.label.mcu_load', { mcu: mcu.prettyName }) }}</span>
-      <span v-if="chartData.length">{{ chartData[chartData.length - 1].load }}%</span>
-    </div>
-
-    <div class="chart-label">
-      <span>{{ $t('app.system_info.label.mcu_awake', { mcu: mcu.prettyName }) }}</span>
-      <span v-if="chartData.length">{{ chartData[chartData.length - 1].awake }}%</span>
-    </div>
-  </system-chart>
+    :labels="labels"
+  />
 </template>
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import type { MCU } from '@/store/printer/types'
 import type { EChartsOption, LineSeriesOption } from 'echarts'
-import SystemChart from './SystemChart.vue'
+import type { AppInlineChartLabel } from '@/components/ui/AppInlineChart.vue'
 
-@Component({
-  components: {
-    SystemChart
-  }
-})
+@Component({})
 export default class McuLoadChart extends Vue {
   @Prop({ type: Object, required: true })
   readonly mcu!: MCU
@@ -34,6 +21,21 @@ export default class McuLoadChart extends Vue {
     return this.$typedState.charts[this.mcu.key] || []
   }
 
+  get labels (): AppInlineChartLabel[] {
+    return [
+      {
+        text: this.$t('app.system_info.label.mcu_load', { mcu: this.mcu.prettyName }).toString(),
+        value: 'load',
+        suffix: '%'
+      },
+      {
+        text: this.$t('app.system_info.label.mcu_awake', { mcu: this.mcu.prettyName }).toString(),
+        value: 'awake',
+        suffix: '%'
+      }
+    ]
+  }
+
   get options (): EChartsOption {
     const options: EChartsOption = {
       ...this.$typedGetters['charts/getBaseChartOptions']({
diff --git a/src/components/widgets/system/MoonrakerLoadChart.vue b/src/components/widgets/system/MoonrakerLoadChart.vue
index ea0ba045dc..4c7f35ee15 100644
--- a/src/components/widgets/system/MoonrakerLoadChart.vue
+++ b/src/components/widgets/system/MoonrakerLoadChart.vue
@@ -1,30 +1,30 @@
 <template>
-  <system-chart
+  <app-inline-chart
     :data="chartData"
     :options="options"
-  >
-    <div class="chart-label">
-      <span>{{ $t('app.system_info.label.moonraker_load') }}</span>
-      <span v-if="chartData.length">{{ chartData[chartData.length - 1].load }}%</span>
-    </div>
-  </system-chart>
+    :labels="labels"
+  />
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import type { EChartsOption, LineSeriesOption } from 'echarts'
-import SystemChart from './SystemChart.vue'
+import type { AppInlineChartLabel } from '@/components/ui/AppInlineChart.vue'
 
-@Component({
-  components: {
-    SystemChart
-  }
-})
+@Component({})
 export default class MoonrakerLoadChart extends Vue {
   get chartData () {
     return this.$typedState.charts.moonraker || []
   }
 
+  get labels (): AppInlineChartLabel[] {
+    return [{
+      text: this.$t('app.system_info.label.moonraker_load').toString(),
+      value: 'load',
+      suffix: '%'
+    }]
+  }
+
   get options (): EChartsOption {
     return {
       ...this.$typedGetters['charts/getBaseChartOptions']({
diff --git a/src/components/widgets/system/SystemChart.vue b/src/components/widgets/system/SystemChart.vue
deleted file mode 100644
index 8fc3c17cb6..0000000000
--- a/src/components/widgets/system/SystemChart.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <v-col
-    v-if="hasData"
-    cols="4"
-    class="chart-wrapper"
-  >
-    <app-chart
-      :data="data"
-      :options="options"
-      height="120px"
-    />
-
-    <div class="chart-label-wrapper">
-      <slot />
-    </div>
-  </v-col>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
-import type { DatasetComponentOption, EChartsOption } from 'echarts'
-
-@Component({})
-export default class SystemChart extends Vue {
-  @Prop({ type: Array, required: true })
-  readonly data!: Extract<DatasetComponentOption['source'], unknown[]>
-
-  @Prop({ type: Object, required: true })
-  readonly options!: EChartsOption
-
-  get hasData (): boolean {
-    return (
-      Array.isArray(this.data) &&
-      this.data.length > 0
-    )
-  }
-}
-</script>
-
-<style lang="scss">
-  .chart-label-wrapper {
-    margin-top: 6px;
-    display: block;
-  }
-
-  .chart-label {
-    display: flex;
-    justify-content: space-between;
-  }
-</style>
diff --git a/src/components/widgets/system/SystemLoadChart.vue b/src/components/widgets/system/SystemLoadChart.vue
index 1745809b3c..9870c50da2 100644
--- a/src/components/widgets/system/SystemLoadChart.vue
+++ b/src/components/widgets/system/SystemLoadChart.vue
@@ -1,25 +1,17 @@
 <template>
-  <system-chart
+  <app-inline-chart
     :data="chartData"
     :options="options"
-  >
-    <div class="chart-label">
-      <span>{{ $t('app.system_info.label.system_load') }}</span>
-      <span v-if="chartData.length">{{ chartData[chartData.length - 1].load }} / {{ cores }}</span>
-    </div>
-  </system-chart>
+    :labels="labels"
+  />
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import type { EChartsOption, LineSeriesOption } from 'echarts'
-import SystemChart from './SystemChart.vue'
+import type { AppInlineChartLabel } from '@/components/ui/AppInlineChart.vue'
 
-@Component({
-  components: {
-    SystemChart
-  }
-})
+@Component({})
 export default class SystemLoadChart extends Vue {
   get chartData () {
     return this.$typedState.charts.klipper || []
@@ -29,6 +21,14 @@ export default class SystemLoadChart extends Vue {
     return this.$typedState.server.system_info?.cpu_info?.cpu_count || 1
   }
 
+  get labels (): AppInlineChartLabel[] {
+    return [{
+      text: this.$t('app.system_info.label.system_load').toString(),
+      value: 'load',
+      suffix: ` / ${this.cores}`
+    }]
+  }
+
   get options (): EChartsOption {
     const options: EChartsOption = {
       ...this.$typedGetters['charts/getBaseChartOptions'](),
diff --git a/src/components/widgets/system/SystemMemoryChart.vue b/src/components/widgets/system/SystemMemoryChart.vue
index b9a2cd3108..16aba57b4e 100644
--- a/src/components/widgets/system/SystemMemoryChart.vue
+++ b/src/components/widgets/system/SystemMemoryChart.vue
@@ -1,30 +1,30 @@
 <template>
-  <system-chart
+  <app-inline-chart
     :data="chartData"
     :options="options"
-  >
-    <div class="chart-label">
-      <span>{{ $t('app.system_info.label.system_memory') }}</span>
-      <span v-if="chartData.length">{{ chartData[chartData.length - 1].memused }}%</span>
-    </div>
-  </system-chart>
+    :labels="labels"
+  />
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import type { EChartsOption, LineSeriesOption } from 'echarts'
-import SystemChart from './SystemChart.vue'
+import type { AppInlineChartLabel } from '@/components/ui/AppInlineChart.vue'
 
-@Component({
-  components: {
-    SystemChart
-  }
-})
+@Component({})
 export default class SystemMemoryChart extends Vue {
   get chartData () {
     return this.$typedState.charts.memory || []
   }
 
+  get labels (): AppInlineChartLabel[] {
+    return [{
+      text: this.$t('app.system_info.label.system_memory').toString(),
+      value: 'memused',
+      suffix: '%'
+    }]
+  }
+
   get options (): EChartsOption {
     return {
       ...this.$typedGetters['charts/getBaseChartOptions']({

From 3e15d42aad4bc6c7830cc317d17083564baf9796 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Mon, 22 Jun 2026 14:12:07 +0100
Subject: [PATCH 2/4] fix: fallback for empty AppInlineChart values

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/ui/AppInlineChart.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/AppInlineChart.vue b/src/components/ui/AppInlineChart.vue
index 983c013af1..819c79be10 100644
--- a/src/components/ui/AppInlineChart.vue
+++ b/src/components/ui/AppInlineChart.vue
@@ -63,14 +63,27 @@ export default class AppInlineChart extends Vue {
     )
   }
 
+  isEmpty (value: unknown) {
+    return (
+      value == null ||
+      value === ''
+    )
+  }
+
   get items () {
     const getter = this.customGetter ?? defaultGetter
     const item = this.data[this.data.length - 1]
 
-    return this.labels.map(label => ({
-      label,
-      value: `${getter(item, label, defaultGetter)}${label.suffix ?? ''}`
-    }))
+    return this.labels.map(label => {
+      const value = getter(item, label, defaultGetter)
+
+      return {
+        label,
+        value: this.isEmpty(value)
+          ? '--'
+          : `${value}${label.suffix ?? ''}`
+      }
+    })
   }
 }
 </script>

From e77a55e149055f68aefac159569cdd23843d400d Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Mon, 22 Jun 2026 19:17:08 +0100
Subject: [PATCH 3/4] refactor: tidy AppInlineChart per review

- Drop `inheritAttrs: false`: the root `<v-col>` never forwarded
  `$attrs`/`$listeners`, so the flag only blocked passthrough.
- Treat empty arrays as empty in `isEmpty`, matching AppDataTableRow.
- Remove the unused `customGetter` prop and Getter/DefaultGetter types;
  `suffix` covers every consumer.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/ui/AppInlineChart.vue | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/AppInlineChart.vue b/src/components/ui/AppInlineChart.vue
index 819c79be10..b39f21fe3d 100644
--- a/src/components/ui/AppInlineChart.vue
+++ b/src/components/ui/AppInlineChart.vue
@@ -34,15 +34,7 @@ export type AppInlineChartLabel = {
   suffix?: string
 }
 
-const defaultGetter = (item: unknown, label: AppInlineChartLabel): unknown => get(item, label.value)
-
-export type DefaultGetterFunction = typeof defaultGetter
-
-export type GetterFunction = (item: unknown, label: AppInlineChartLabel, defaultGetter: DefaultGetterFunction) => unknown
-
-@Component({
-  inheritAttrs: false
-})
+@Component({})
 export default class AppInlineChart extends Vue {
   @Prop({ type: Array, required: true })
   readonly data!: Extract<DatasetComponentOption['source'], unknown[]>
@@ -53,9 +45,6 @@ export default class AppInlineChart extends Vue {
   @Prop({ type: Array, required: true })
   readonly labels!: AppInlineChartLabel[]
 
-  @Prop({ type: Function })
-  readonly customGetter?: GetterFunction
-
   get hasData (): boolean {
     return (
       Array.isArray(this.data) &&
@@ -66,16 +55,19 @@ export default class AppInlineChart extends Vue {
   isEmpty (value: unknown) {
     return (
       value == null ||
-      value === ''
+      value === '' ||
+      (
+        Array.isArray(value) &&
+        value.length === 0
+      )
     )
   }
 
   get items () {
-    const getter = this.customGetter ?? defaultGetter
     const item = this.data[this.data.length - 1]
 
     return this.labels.map(label => {
-      const value = getter(item, label, defaultGetter)
+      const value = get(item, label.value)
 
       return {
         label,

From fc4b8007ca6f220ca0adbb63fe8d456904730237 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Mon, 22 Jun 2026 19:41:04 +0100
Subject: [PATCH 4/4] refactor: minor code linting

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/widgets/system/KlipperLoadChart.vue   | 12 +++++++-----
 src/components/widgets/system/MoonrakerLoadChart.vue | 12 +++++++-----
 src/components/widgets/system/SystemLoadChart.vue    | 12 +++++++-----
 src/components/widgets/system/SystemMemoryChart.vue  | 12 +++++++-----
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/src/components/widgets/system/KlipperLoadChart.vue b/src/components/widgets/system/KlipperLoadChart.vue
index a80f1e29ce..6cc5cbf23a 100644
--- a/src/components/widgets/system/KlipperLoadChart.vue
+++ b/src/components/widgets/system/KlipperLoadChart.vue
@@ -18,11 +18,13 @@ export default class KlipperLoadChart extends Vue {
   }
 
   get labels (): AppInlineChartLabel[] {
-    return [{
-      text: this.$t('app.system_info.label.klipper_load').toString(),
-      value: 'cputime_change',
-      suffix: '%'
-    }]
+    return [
+      {
+        text: this.$t('app.system_info.label.klipper_load').toString(),
+        value: 'cputime_change',
+        suffix: '%'
+      }
+    ]
   }
 
   get options (): EChartsOption {
diff --git a/src/components/widgets/system/MoonrakerLoadChart.vue b/src/components/widgets/system/MoonrakerLoadChart.vue
index 4c7f35ee15..b82a40cda3 100644
--- a/src/components/widgets/system/MoonrakerLoadChart.vue
+++ b/src/components/widgets/system/MoonrakerLoadChart.vue
@@ -18,11 +18,13 @@ export default class MoonrakerLoadChart extends Vue {
   }
 
   get labels (): AppInlineChartLabel[] {
-    return [{
-      text: this.$t('app.system_info.label.moonraker_load').toString(),
-      value: 'load',
-      suffix: '%'
-    }]
+    return [
+      {
+        text: this.$t('app.system_info.label.moonraker_load').toString(),
+        value: 'load',
+        suffix: '%'
+      }
+    ]
   }
 
   get options (): EChartsOption {
diff --git a/src/components/widgets/system/SystemLoadChart.vue b/src/components/widgets/system/SystemLoadChart.vue
index 9870c50da2..ac58cc9a26 100644
--- a/src/components/widgets/system/SystemLoadChart.vue
+++ b/src/components/widgets/system/SystemLoadChart.vue
@@ -22,11 +22,13 @@ export default class SystemLoadChart extends Vue {
   }
 
   get labels (): AppInlineChartLabel[] {
-    return [{
-      text: this.$t('app.system_info.label.system_load').toString(),
-      value: 'load',
-      suffix: ` / ${this.cores}`
-    }]
+    return [
+      {
+        text: this.$t('app.system_info.label.system_load').toString(),
+        value: 'load',
+        suffix: ` / ${this.cores}`
+      }
+    ]
   }
 
   get options (): EChartsOption {
diff --git a/src/components/widgets/system/SystemMemoryChart.vue b/src/components/widgets/system/SystemMemoryChart.vue
index 16aba57b4e..1b28a58d8e 100644
--- a/src/components/widgets/system/SystemMemoryChart.vue
+++ b/src/components/widgets/system/SystemMemoryChart.vue
@@ -18,11 +18,13 @@ export default class SystemMemoryChart extends Vue {
   }
 
   get labels (): AppInlineChartLabel[] {
-    return [{
-      text: this.$t('app.system_info.label.system_memory').toString(),
-      value: 'memused',
-      suffix: '%'
-    }]
+    return [
+      {
+        text: this.$t('app.system_info.label.system_memory').toString(),
+        value: 'memused',
+        suffix: '%'
+      }
+    ]
   }
 
   get options (): EChartsOption {