feat: add option to switch the stats between amount, filament and time

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/components/charts/HistoryAllPrintStatusChart.vue

@@ -17,7 +17,6 @@ import HistoryStatsMixin from '@/components/mixins/historyStats'
 import VueECharts from 'vue-echarts'
 import type { ECharts } from 'echarts/core'
 import { ECBasicOption } from 'echarts/types/dist/shared.d'
-import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/types'
 import { formatPrintTime } from '@/plugins/helpers'
 
 @Component({
@@ -74,33 +73,6 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         }
     }
 
-    get selectedJobs() {
-        return this.$store.getters['server/history/getSelectedJobs']
-    }
-
-    get printStatusArray() {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const orgArray = this.selectedJobs.length ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
-
-        orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
-            const tmp = { ...status }
-            tmp.name = status.displayName
-
-            if (this.valueName === 'filament') {
-                tmp.value = status.valueFilament.toFixed(0)
-                if (status.valueFilament > 1000) tmp.value = Math.round(tmp.value / 1000).toString()
-            } else if (this.valueName === 'time') {
-                tmp.value = status.valueTime
-            }
-
-            output.push(tmp)
-        })
-
-        window.console.log(output)
-
-        return output
-    }
-
     get chart(): ECharts | null {
         return this.historyAllPrintStatus?.chart ?? null
     }

src/components/charts/HistoryAllPrintStatusTable.vue

@@ -1,40 +1,26 @@
 <template>
     <v-simple-table>
         <tbody>
-            <tr v-for="status in printStatusArray" :key="status.name">
-                <td>{{ status.displayName }}</td>
-                <td class="text-right">{{ status.value }}</td>
-            </tr>
+            <history-all-print-status-table-item
+                v-for="status in printStatusArray"
+                :key="status.name"
+                :item="status"
+                :value-name="valueName" />
         </tbody>
     </v-simple-table>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins } from 'vue-property-decorator'
+import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/types'
 import HistoryStatsMixin from '@/components/mixins/historyStats'
+import HistoryAllPrintStatusTableItem from '@/components/charts/HistoryAllPrintStatusTableItem.vue'
 
 @Component({
-    components: {},
+    components: { HistoryAllPrintStatusTableItem },
 })
 export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin, HistoryStatsMixin) {
-    get selectedJobs() {
-        return this.$store.getters['server/history/getSelectedJobs']
-    }
-
-    get printStatusArray() {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const orgArray = this.selectedJobs.length ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
-
-        orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
-            const tmp = { ...status }
-            tmp.name = status.displayName
-            output.push(tmp)
-        })
-
-        return output
-    }
+    @Prop({ type: String, default: 'amount' }) valueName!: 'amount' | 'filament' | 'time'
 }
 </script>

src/components/charts/HistoryAllPrintStatusTableItem.vue

@@ -0,0 +1,36 @@
+<template>
+    <tr>
+        <td>{{ item.displayName }}</td>
+        <td class="text-right">{{ value }}</td>
+    </tr>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/types'
+import { formatPrintTime } from '@/plugins/helpers'
+
+@Component({
+    components: {},
+})
+export default class HistoryAllPrintStatusTableItem extends Mixins(BaseMixin) {
+    @Prop({ type: Object }) item!: ServerHistoryStateAllPrintStatusEntry
+    @Prop({ type: String, default: 'amount' }) valueName!: 'amount' | 'filament' | 'time'
+
+    get value() {
+        if (this.valueName === 'filament') {
+            if (this.item.value > 1000) return Math.round(this.item.value / 1000).toString() + ' m'
+
+            return this.item.value.toString() + ' mm'
+        }
+
+        if (this.valueName === 'time') {
+            return formatPrintTime(this.item.value, false)
+        }
+
+        return this.item.value.toString()
+    }
+}
+</script>

src/components/mixins/historyStats.ts

@@ -5,7 +5,7 @@ import i18n from '@/plugins/i18n'
 
 @Component
 export default class HistoryStatsMixin extends Vue {
-    get allPrintStatusArray() {
+    get allPrintStatusChartData() {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
         const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
         const jobs = this.$store.state.server.history.jobs ?? []
@@ -59,44 +59,6 @@ export default class HistoryStatsMixin extends Vue {
         return output
     }
 
-    get allPrintStatusChartData() {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = [...this.allPrintStatusArray]
-        const totalCount = this.$store.state.server.history.jobs.length ?? 0
-
-        const otherLimit = totalCount * 0.05
-        const others = output.filter((entry) => entry.value < otherLimit)
-        if (others.length === 0) return output
-
-        const otherValues = { amount: 0, filament: 0, time: 0 }
-        others.forEach((otherGroup) => {
-            const index = output.findIndex((entry) => entry.name === otherGroup.name)
-            if (index !== -1) {
-                otherValues.amount += output[index].value
-                otherValues.filament += output[index].valueFilament
-                otherValues.time += output[index].valueTime
-                output.splice(index, 1)
-            }
-        })
-
-        output.push({
-            name: 'others',
-            displayName: i18n.t(`History.StatusValues.Others`).toString(),
-            value: otherValues.amount,
-            valueTime: otherValues.time,
-            valueFilament: otherValues.filament,
-            itemStyle: {
-                opacity: 0.9,
-                color: '#616161',
-                borderColor: '#1E1E1E',
-                borderWidth: 2,
-                borderRadius: 3,
-            },
-            showInTable: true,
-        })
-
-        return output
-    }
-
     get selectedPrintStatusChartData() {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
         const jobs = this.$store.getters['server/history/getSelectedJobs']
@@ -149,4 +111,50 @@ export default class HistoryStatsMixin extends Vue {
 
         return output
     }
+
+    get printStatusArray() {
+        let output: ServerHistoryStateAllPrintStatusEntry[] = []
+        const countSelected = this.$store.getters['server/history/getSelectedJobs'].length
+        const orgArray = countSelected ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
+
+        orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
+            const tmp = { ...status }
+            tmp.name = status.displayName
+
+            if (this.valueName === 'filament') {
+                tmp.value = status.valueFilament
+            } else if (this.valueName === 'time') {
+                tmp.value = status.valueTime
+            }
+
+            output.push(tmp)
+        })
+
+        // group all entries with less than 5% of the total
+        const totalCount = output.reduce((acc, cur) => acc + cur.value, 0)
+        const otherLimit = totalCount * 0.05
+        const others = output.filter((entry) => entry.value < otherLimit)
+
+        // no, or only one entry found
+        if (others.length < 2) return output
+
+        const value = others.reduce((acc, cur) => acc + cur.value, 0)
+        output = output.filter((entry) => entry.value >= otherLimit)
+        const displayName = i18n.t(`History.StatusValues.Others`).toString() + ` (${others.length})`
+        output.push({
+            name: displayName,
+            displayName,
+            value,
+            itemStyle: {
+                opacity: 0.9,
+                color: '#616161',
+                borderColor: '#1E1E1E',
+                borderWidth: 2,
+                borderRadius: 3,
+            },
+            showInTable: true,
+        })
+
+        return output
+    }
 }