feat: system utilization charts

Signed-off-by: Craig Bassett <[email protected]>

src/components/common/SystemControl.vue

@@ -2,7 +2,7 @@
   <div>
     <div v-if="klippyConnected">
       <v-tooltip
-        right
+        bottom
       >
         <template v-slot:activator="{ on, attrs }">
           <app-btn
@@ -22,7 +22,7 @@
 
     <div v-else>
       <v-tooltip
-        right
+        bottom
       >
         <template v-slot:activator="{ on, attrs }">
           <app-btn
@@ -42,7 +42,7 @@
 
     <div v-if="klippyConnected">
       <v-tooltip
-        right
+        bottom
       >
         <template v-slot:activator="{ on, attrs }">
           <app-btn

src/components/ui/AppChart.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div v-if="title" v-html="title"></div>
+    <div class="chart" :style="{ 'height': height }">
+      <ECharts
+        style="overflow: initial;"
+        ref="chart"
+        :option="opts"
+        :setOptionOps="{ notMerge: true }"
+        :initOpts="{ renderer: 'svg' }"
+        :events="events">
+      </ECharts>
+    </div>
+  </div>
+</template>
+
+<script lang='ts'>
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { ECharts } from 'echarts'
+import { merge } from 'lodash-es'
+
+@Component({})
+export default class AppChart extends Vue {
+  @Prop({ type: String, required: false })
+  title!: string
+
+  @Prop({ type: Array, required: true })
+  data!: any
+
+  @Prop({ type: Object, default: {} })
+  options!: any
+
+  @Prop({ type: String, default: '100%' })
+  height!: string;
+
+  events = []
+
+  get chart () {
+    const ref = this.$refs.chart as any
+    if (ref) return ref.inst as ECharts
+  }
+
+  get isMobile () {
+    return this.$vuetify.breakpoint.mobile
+  }
+
+  get isDark () {
+    return this.$store.state.config.uiSettings.theme.isDark
+  }
+
+  @Watch('data')
+  onData (data: any) {
+    if (this.chart) {
+      this.chart.setOption({
+        dataset: {
+          source: data
+        }
+      })
+    }
+  }
+
+  beforeDestroy () {
+    if (typeof window === 'undefined') return
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  }
+
+  get opts () {
+    const baseOptions = {
+      grid: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    }
+
+    const options = merge(baseOptions, this.options)
+    return options
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+  .chart {
+    width: 100%;
+  }
+</style>

src/components/ui/AppSlider.vue

@@ -15,7 +15,7 @@
 
       <!-- Current value -->
       <v-col
-        class="ml-auto py-0"
+        class="py-0"
       >
 
         <v-text-field

src/components/widgets/system/DiskUsageCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <collapsable-card
+    :title="$t('app.file_system.label.diskinfo')"
+    icon="$chart">
+
+    <v-card-text>
+      <v-layout justify-space-between>
+        <div class="">{{ $t('app.file_system.label.disk_usage') }}</div>
+      </v-layout>
+      <v-progress-linear
+        :size="90"
+        :height="10"
+        :value="fileSystemUsedPercent"
+        color="primary"
+        class="my-1"
+      >
+      </v-progress-linear>
+
+      <v-layout justify-space-between>
+        <div class="">
+          <span class="focus--text">
+            {{ $filters.getReadableFileSizeString(fileSystemUsage.used) }}
+          </span>
+          <span class="secondary--text">{{ $t('app.general.label.used') }}</span>
+        </div>
+        <div class="">
+          <span class="focus--text">
+            {{ $filters.getReadableFileSizeString(fileSystemUsage.free) }}
+          </span>
+          <span class="secondary--text">{{ $t('app.general.label.free') }}</span>
+        </div>
+      </v-layout>
+    </v-card-text>
+
+    <v-simple-table dense>
+      <tbody>
+        <tr>
+          <th>{{ $t('app.system_info.label.manufacturer') }}</th>
+          <td>{{ sdInfo.manufacturer }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.manufactured') }}</th>
+          <td>{{ sdInfo.manufacturer_date }}</td>
+        <tr>
+          <th>{{ $t('app.system_info.label.product_name') }}</th>
+          <td>{{ sdInfo.product_name }} {{sdInfo.product_revision }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.capacity') }}</th>
+          <td>{{ sdInfo.capacity }}</td>
+        </tr>
+        <tr>
+          <th>{{ $t('app.system_info.label.serial_number') }}</th>
+          <td>{{ sdInfo.serial_number }}</td>
+        </tr>
+      </tbody>
+    </v-simple-table>
+
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import JobHistory from '@/components/widgets/history/JobHistory.vue'
+
+@Component({
+  components: {
+    JobHistory
+  }
+})
+export default class PrinterStatsCard extends Vue {
+  get sdInfo () {
+    const info = this.$store.getters['server/getSystemInfo']
+    return info?.sd_info || {}
+  }
+
+  get fileSystemUsedPercent () {
+    const total = this.fileSystemUsage.total
+    const used = this.fileSystemUsage.used
+    return Math.floor((used / total) * 100).toFixed()
+  }
+
+  get fileSystemUsage () {
+    return this.$store.getters['files/getUsage']
+  }
+}
+</script>

src/components/widgets/system/KlipperLoadChart.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-col
+    cols="4"
+    class="chart-wrapper"
+    v-if="chartData"
+  >
+    <app-chart
+      :data="chartData"
+      :options="options"
+      height="120px"
+    >
+    </app-chart>
+
+    <div class="chart-label-wrapper">
+      <div v-if="chartData && chartData.length" class="chart-label">
+        <span>{{ $t('app.system_info.label.klipper_load') }}</span>
+        <span>{{ chartData[chartData.length - 1].cputime_change }}%</span>
+      </div>
+    </div>
+
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class KlipperLoadChart extends Vue {
+  get chartData () {
+    return this.$store.state.charts.klipper
+  }
+
+  get options () {
+    const o = {
+      ...this.$store.getters['charts/getBaseChartOptions'](),
+      series: this.series
+    }
+    return o
+  }
+
+  get series () {
+    return this.$store.getters['charts/getBaseSeries']({
+      name: 'load',
+      encode: { x: 'date', y: 'cputime_change' }
+    })
+  }
+}
+</script>