refactor: add AppInlineChart component

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']

src/components/ui/AppInlineChart.vue

@@ -0,0 +1,93 @@
+<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
+}
+
+@Component({})
+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[]
+
+  get hasData (): boolean {
+    return (
+      Array.isArray(this.data) &&
+      this.data.length > 0
+    )
+  }
+
+  isEmpty (value: unknown) {
+    return (
+      value == null ||
+      value === '' ||
+      (
+        Array.isArray(value) &&
+        value.length === 0
+      )
+    )
+  }
+
+  get items () {
+    const item = this.data[this.data.length - 1]
+
+    return this.labels.map(label => {
+      const value = get(item, label.value)
+
+      return {
+        label,
+        value: this.isEmpty(value)
+          ? '--'
+          : `${value}${label.suffix ?? ''}`
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .chart-label-wrapper {
+    margin-top: 6px;
+    display: block;
+  }
+
+  .chart-label {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/components/widgets/system/KlipperLoadChart.vue

@@ -1,30 +1,32 @@
 <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']({

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']({

src/components/widgets/system/MoonrakerLoadChart.vue

@@ -1,30 +1,32 @@
 <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']({

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,16 @@ 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'](),