From 542a2a634323fe41fdc6d4e40da32378bd3bd386 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 11 Sep 2024 22:14:12 +0200
Subject: [PATCH 01/11] refactor: refactor getters in HistoryAllPrintStatus

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../charts/HistoryAllPrintStatusChart.vue     |  26 ++--
 .../charts/HistoryAllPrintStatusTable.vue     |  13 +-
 src/components/mixins/historyStats.ts         | 139 ++++++++++++++++++
 src/store/server/history/getters.ts           | 126 ----------------
 4 files changed, 152 insertions(+), 152 deletions(-)
 create mode 100644 src/components/mixins/historyStats.ts

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 0b32dbac4..a8826cde5 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -5,14 +5,16 @@
         :option="chartOptions"
         :autoresize="true"
         :init-options="{ renderer: 'svg' }"
-        style="height: 200px; width: 100%"></e-chart>
+        style="height: 200px; width: 100%" />
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Watch } from 'vue-property-decorator'
+import { Mixins, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ThemeMixin from '@/components/mixins/theme'
+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'
@@ -20,10 +22,8 @@ import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/ty
 @Component({
     components: {},
 })
-export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin) {
-    declare $refs: {
-        historyAllPrintStatus: any
-    }
+export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin, HistoryStatsMixin) {
+    @Ref('historyAllPrintStatus') historyAllPrintStatus!: typeof VueECharts
 
     get chartOptions(): ECBasicOption {
         return {
@@ -63,17 +63,9 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         return this.$store.getters['server/history/getSelectedJobs']
     }
 
-    get allPrintStatusArray() {
-        return this.$store.getters['server/history/getAllPrintStatusArray']
-    }
-
-    get selectedPrintStatusArray() {
-        return this.$store.getters['server/history/getSelectedPrintStatusArray']
-    }
-
     get printStatusArray() {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const orgArray = this.selectedJobs.length ? this.selectedPrintStatusArray : this.allPrintStatusArray
+        const orgArray = this.selectedJobs.length ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
 
         orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
             const tmp = { ...status }
@@ -81,11 +73,13 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
             output.push(tmp)
         })
 
+        window.console.log(output)
+
         return output
     }
 
     get chart(): ECharts | null {
-        return this.$refs.historyAllPrintStatus?.chart ?? null
+        return this.historyAllPrintStatus?.chart ?? null
     }
 
     beforeDestroy() {
diff --git a/src/components/charts/HistoryAllPrintStatusTable.vue b/src/components/charts/HistoryAllPrintStatusTable.vue
index 92faaf761..a928dfeb5 100644
--- a/src/components/charts/HistoryAllPrintStatusTable.vue
+++ b/src/components/charts/HistoryAllPrintStatusTable.vue
@@ -14,26 +14,19 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/types'
+import HistoryStatsMixin from '@/components/mixins/historyStats'
 
 @Component({
     components: {},
 })
-export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin) {
+export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin, HistoryStatsMixin) {
     get selectedJobs() {
         return this.$store.getters['server/history/getSelectedJobs']
     }
 
-    get allPrintStatusArray() {
-        return this.$store.getters['server/history/getAllPrintStatusArrayAll']
-    }
-
-    get selectedPrintStatusArray() {
-        return this.$store.getters['server/history/getSelectedPrintStatusArray']
-    }
-
     get printStatusArray() {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const orgArray = this.selectedJobs.length ? this.selectedPrintStatusArray : this.allPrintStatusArray
+        const orgArray = this.selectedJobs.length ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
 
         orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
             const tmp = { ...status }
diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
new file mode 100644
index 000000000..dcf1beb4c
--- /dev/null
+++ b/src/components/mixins/historyStats.ts
@@ -0,0 +1,139 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { ServerHistoryStateAllPrintStatusEntry, ServerHistoryStateJob } from '@/store/server/history/types'
+import i18n from '@/plugins/i18n'
+
+@Component
+export default class HistoryStatsMixin extends Vue {
+    get allPrintStatusArray() {
+        const output: ServerHistoryStateAllPrintStatusEntry[] = []
+        const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
+        const jobs = this.$store.state.server.history.jobs ?? []
+
+        jobs.forEach((current: ServerHistoryStateJob) => {
+            const index = output.findIndex((element) => element.name === current.status)
+            if (index !== -1) {
+                output[index].value += 1
+                return
+            }
+
+            const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en')
+                ? i18n.t(`History.StatusValues.${current.status}`).toString()
+                : current.status
+
+            const itemStyle = {
+                opacity: 0.9,
+                color: '#424242',
+                borderColor: '#1E1E1E',
+                borderWidth: 2,
+                borderRadius: 3,
+            }
+
+            switch (current.status) {
+                case 'completed':
+                    itemStyle['color'] = '#BDBDBD'
+                    break
+
+                case 'in_progress':
+                    itemStyle['color'] = '#EEEEEE'
+                    break
+
+                case 'cancelled':
+                    itemStyle['color'] = '#616161'
+                    break
+            }
+
+            output.push({
+                name: current.status,
+                displayName,
+                value: 1,
+                itemStyle,
+                showInTable: !hidePrintStatus.includes(current.status),
+            })
+        })
+
+        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 > 1) {
+            let otherValue = 0
+
+            others.forEach((otherGroup) => {
+                const index = output.findIndex((entry) => entry.name === otherGroup.name)
+                if (index !== -1) {
+                    otherValue += output[index].value
+                    output.splice(index, 1)
+                }
+            })
+
+            output.push({
+                name: 'others',
+                displayName: i18n.t(`History.StatusValues.Others`).toString(),
+                value: otherValue,
+                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']
+        const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
+
+        jobs.forEach((current: ServerHistoryStateJob) => {
+            const index = output.findIndex((element) => element.name === current.status)
+            if (index !== -1) output[index].value += 1
+            else {
+                const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en').toString()
+                    ? i18n.t(`History.StatusValues.${current.status}`).toString()
+                    : current.status
+                const itemStyle = {
+                    opacity: 0.9,
+                    color: '#424242',
+                    borderColor: '#1E1E1E',
+                    borderWidth: 2,
+                    borderRadius: 3,
+                }
+
+                switch (current.status) {
+                    case 'completed':
+                        itemStyle['color'] = '#BDBDBD'
+                        break
+
+                    case 'in_progress':
+                        itemStyle['color'] = '#EEEEEE'
+                        break
+
+                    case 'cancelled':
+                        itemStyle['color'] = '#616161'
+                        break
+                }
+
+                output.push({
+                    name: current.status,
+                    displayName,
+                    value: 1,
+                    itemStyle: itemStyle,
+                    showInTable: !hidePrintStatus.includes(current.status),
+                })
+            }
+        })
+
+        return output
+    }
+}
diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts
index e56379912..cc711c46c 100644
--- a/src/store/server/history/getters.ts
+++ b/src/store/server/history/getters.ts
@@ -77,132 +77,6 @@ export const getters: GetterTree<ServerHistoryState, any> = {
             : 0
     },
 
-    getAllPrintStatusArrayAll(state, getters, rootState) {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = []
-
-        state.jobs.forEach((current) => {
-            const index = output.findIndex((element) => element.name === current.status)
-            if (index !== -1) output[index].value += 1
-            else {
-                const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en')
-                    ? i18n.t(`History.StatusValues.${current.status}`).toString()
-                    : current.status
-
-                const itemStyle = {
-                    opacity: 0.9,
-                    color: '#424242',
-                    borderColor: '#1E1E1E',
-                    borderWidth: 2,
-                    borderRadius: 3,
-                }
-
-                switch (current.status) {
-                    case 'completed':
-                        itemStyle['color'] = '#BDBDBD'
-                        break
-
-                    case 'in_progress':
-                        itemStyle['color'] = '#EEEEEE'
-                        break
-
-                    case 'cancelled':
-                        itemStyle['color'] = '#616161'
-                        break
-                }
-
-                output.push({
-                    name: current.status,
-                    displayName,
-                    value: 1,
-                    itemStyle,
-                    showInTable: !rootState.gui?.view.history.hidePrintStatus.includes(current.status),
-                })
-            }
-        })
-
-        return output
-    },
-
-    getAllPrintStatusArray(state, getters) {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = [...getters.getAllPrintStatusArrayAll]
-        const totalCount = state.jobs.length
-
-        const otherLimit = totalCount * 0.05
-        const others = output.filter((entry) => entry.value < otherLimit)
-        if (others.length > 1) {
-            let otherValue = 0
-
-            others.forEach((otherGroup) => {
-                const index = output.findIndex((entry) => entry.name === otherGroup.name)
-                if (index !== -1) {
-                    otherValue += output[index].value
-                    output.splice(index, 1)
-                }
-            })
-
-            output.push({
-                name: 'others',
-                displayName: i18n.t(`History.StatusValues.Others`).toString(),
-                value: otherValue,
-                itemStyle: {
-                    opacity: 0.9,
-                    color: '#616161',
-                    borderColor: '#1E1E1E',
-                    borderWidth: 2,
-                    borderRadius: 3,
-                },
-                showInTable: true,
-            })
-        }
-
-        return output
-    },
-
-    getSelectedPrintStatusArray(state, getters, rootState) {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = []
-
-        getters.getSelectedJobs.forEach((current: ServerHistoryStateJob) => {
-            const index = output.findIndex((element) => element.name === current.status)
-            if (index !== -1) output[index].value += 1
-            else {
-                const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en').toString()
-                    ? i18n.t(`History.StatusValues.${current.status}`).toString()
-                    : current.status
-                const itemStyle = {
-                    opacity: 0.9,
-                    color: '#424242',
-                    borderColor: '#1E1E1E',
-                    borderWidth: 2,
-                    borderRadius: 3,
-                }
-
-                switch (current.status) {
-                    case 'completed':
-                        itemStyle['color'] = '#BDBDBD'
-                        break
-
-                    case 'in_progress':
-                        itemStyle['color'] = '#EEEEEE'
-                        break
-
-                    case 'cancelled':
-                        itemStyle['color'] = '#616161'
-                        break
-                }
-
-                output.push({
-                    name: current.status,
-                    displayName,
-                    value: 1,
-                    itemStyle: itemStyle,
-                    showInTable: !rootState.gui?.view.history.hidePrintStatus.includes(current.status),
-                })
-            }
-        })
-
-        return output
-    },
-
     getFilamentUsageArray(state, getters) {
         // eslint-disable-next-line
         const output: any = []

From 34a0dc4752ab7c640c4007b2ab18d005040b4705 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 12 Sep 2024 00:03:00 +0200
Subject: [PATCH 02/11] feat: add option to switch the stats between amount,
 filament and time

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../charts/HistoryAllPrintStatusChart.vue     |  25 +++-
 src/components/mixins/historyStats.ts         | 129 ++++++++++--------
 .../panels/HistoryStatisticsPanel.vue         |  21 ++-
 src/locales/en.json                           |   3 +
 src/store/server/history/types.ts             |   2 +
 5 files changed, 119 insertions(+), 61 deletions(-)

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index a8826cde5..95e7a678f 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Ref, Watch } from 'vue-property-decorator'
+import { Mixins, Prop, Ref, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import ThemeMixin from '@/components/mixins/theme'
 import HistoryStatsMixin from '@/components/mixins/historyStats'
@@ -18,11 +18,13 @@ 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({
     components: {},
 })
 export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin, HistoryStatsMixin) {
+    @Prop({ type: String, default: 'amount' }) valueName!: 'amount' | 'filament' | 'time'
     @Ref('historyAllPrintStatus') historyAllPrintStatus!: typeof VueECharts
 
     get chartOptions(): ECBasicOption {
@@ -37,6 +39,19 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
             tooltip: {
                 trigger: 'item',
                 borderWidth: 0,
+                valueFormatter: (value: number) => {
+                    if (this.valueName === 'filament') {
+                        if (value > 1000) return Math.round(value / 1000).toString() + ' m'
+
+                        return value.toString() + ' mm'
+                    }
+
+                    if (this.valueName === 'time') {
+                        return formatPrintTime(value, false)
+                    }
+
+                    return value.toString()
+                },
             },
             series: [
                 {
@@ -70,6 +85,14 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         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)
         })
 
diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
index dcf1beb4c..9c3e6473e 100644
--- a/src/components/mixins/historyStats.ts
+++ b/src/components/mixins/historyStats.ts
@@ -14,6 +14,8 @@ export default class HistoryStatsMixin extends Vue {
             const index = output.findIndex((element) => element.name === current.status)
             if (index !== -1) {
                 output[index].value += 1
+                output[index].valueFilament += current.filament_used
+                output[index].valueTime += current.print_duration
                 return
             }
 
@@ -47,6 +49,8 @@ export default class HistoryStatsMixin extends Vue {
                 name: current.status,
                 displayName,
                 value: 1,
+                valueFilament: current.filament_used,
+                valueTime: current.print_duration,
                 itemStyle,
                 showInTable: !hidePrintStatus.includes(current.status),
             })
@@ -61,31 +65,34 @@ export default class HistoryStatsMixin extends Vue {
 
         const otherLimit = totalCount * 0.05
         const others = output.filter((entry) => entry.value < otherLimit)
-        if (others.length > 1) {
-            let otherValue = 0
-
-            others.forEach((otherGroup) => {
-                const index = output.findIndex((entry) => entry.name === otherGroup.name)
-                if (index !== -1) {
-                    otherValue += output[index].value
-                    output.splice(index, 1)
-                }
-            })
+        if (others.length === 0) return output
 
-            output.push({
-                name: 'others',
-                displayName: i18n.t(`History.StatusValues.Others`).toString(),
-                value: otherValue,
-                itemStyle: {
-                    opacity: 0.9,
-                    color: '#616161',
-                    borderColor: '#1E1E1E',
-                    borderWidth: 2,
-                    borderRadius: 3,
-                },
-                showInTable: true,
-            })
-        }
+        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
     }
@@ -97,41 +104,47 @@ export default class HistoryStatsMixin extends Vue {
 
         jobs.forEach((current: ServerHistoryStateJob) => {
             const index = output.findIndex((element) => element.name === current.status)
-            if (index !== -1) output[index].value += 1
-            else {
-                const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en').toString()
-                    ? i18n.t(`History.StatusValues.${current.status}`).toString()
-                    : current.status
-                const itemStyle = {
-                    opacity: 0.9,
-                    color: '#424242',
-                    borderColor: '#1E1E1E',
-                    borderWidth: 2,
-                    borderRadius: 3,
-                }
-
-                switch (current.status) {
-                    case 'completed':
-                        itemStyle['color'] = '#BDBDBD'
-                        break
-
-                    case 'in_progress':
-                        itemStyle['color'] = '#EEEEEE'
-                        break
-
-                    case 'cancelled':
-                        itemStyle['color'] = '#616161'
-                        break
-                }
-
-                output.push({
-                    name: current.status,
-                    displayName,
-                    value: 1,
-                    itemStyle: itemStyle,
-                    showInTable: !hidePrintStatus.includes(current.status),
-                })
+            if (index !== -1) {
+                output[index].value += 1
+                output[index].valueTime += current.print_duration
+                output[index].valueFilament += current.filament_used
+                return
+            }
+
+            const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en').toString()
+                ? i18n.t(`History.StatusValues.${current.status}`).toString()
+                : current.status
+            const itemStyle = {
+                opacity: 0.9,
+                color: '#424242',
+                borderColor: '#1E1E1E',
+                borderWidth: 2,
+                borderRadius: 3,
             }
+
+            switch (current.status) {
+                case 'completed':
+                    itemStyle['color'] = '#BDBDBD'
+                    break
+
+                case 'in_progress':
+                    itemStyle['color'] = '#EEEEEE'
+                    break
+
+                case 'cancelled':
+                    itemStyle['color'] = '#616161'
+                    break
+            }
+
+            output.push({
+                name: current.status,
+                displayName,
+                value: 1,
+                valueTime: current.print_duration,
+                valueFilament: current.filament_used,
+                itemStyle: itemStyle,
+                showInTable: !hidePrintStatus.includes(current.status),
+            })
         })
 
         return output
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index a2099cca2..b7bc6d233 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -17,8 +17,8 @@
                     </v-simple-table>
                 </v-col>
                 <v-col class="col-12 col-sm-6 col-md-4">
-                    <history-all-print-status-chart v-if="togglePrintStatus === 'chart'" />
-                    <history-all-print-status-table v-else />
+                    <history-all-print-status-chart v-if="togglePrintStatus === 'chart'" :value-name="toggleValue" />
+                    <history-all-print-status-table v-else :value-name="toggleValue" />
                     <div class="text-center mb-3">
                         <v-btn-toggle v-model="togglePrintStatus" small mandatory>
                             <v-btn small value="chart">{{ $t('History.Chart') }}</v-btn>
@@ -41,6 +41,13 @@
                             <span>{{ $t('History.LoadCompleteHistory') }}</span>
                         </v-tooltip>
                     </div>
+                    <div class="text-center mb-3">
+                        <v-btn-toggle v-model="toggleValue" small mandatory>
+                            <v-btn v-for="option in toggleValueOptions" :key="option.value" small :value="option.value">
+                                {{ option.text }}
+                            </v-btn>
+                        </v-btn-toggle>
+                    </div>
                 </v-col>
                 <v-col class="col-12 col-sm-12 col-md-4">
                     <history-filament-usage v-if="toggleChart === 'filament_usage'" />
@@ -76,6 +83,16 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin, HistoryMix
     mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     formatPrintTime = formatPrintTime
 
+    toggleValue = 'amount'
+
+    get toggleValueOptions() {
+        return [
+            { text: this.$t('History.Amount'), value: 'amount' },
+            { text: this.$t('History.Filament'), value: 'filament' },
+            { text: this.$t('History.Time'), value: 'time' },
+        ]
+    }
+
     get selectedJobs() {
         return this.$store.getters['server/history/getSelectedJobs']
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index e13f50b3a..03d7000b9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -364,6 +364,7 @@
         "AddNote": "Add note",
         "AddToQueueSuccessful": "File {filename} added to Queue.",
         "AllJobs": "All",
+        "Amount": "Amount",
         "AvgPrinttime": "Print Time - Ø",
         "Cancel": "Cancel",
         "Chart": "Chart",
@@ -386,6 +387,7 @@
         "EstimatedFilament": "Estimated Filament",
         "EstimatedFilamentWeight": "Estimated Filament Weight",
         "EstimatedTime": "Estimated Time",
+        "Filament": "Filament",
         "FilamentBasedReminder": "Filament",
         "FilamentBasedReminderDescription": "This reminder is based on the filament usage.",
         "FilamentCalc": "Filament Calc",
@@ -450,6 +452,7 @@
             "server_exit": "Server exit"
         },
         "Table": "Table",
+        "Time": "Time",
         "TitleExportHistory": "Export History",
         "TotalDuration": "Total Time",
         "TotalFilamentUsed": "Total Filament Used",
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index d9e69e5fa..5216eb30e 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -78,6 +78,8 @@ export interface ServerHistoryStateAllPrintStatusEntry {
     name: string
     displayName: string
     value: number
+    valueFilament: number
+    valueTime: number
     showInTable: boolean
     itemStyle: {
         opacity: number

From e3020e947137761521faeb2d6861b6976dfee842 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 12 Sep 2024 00:31:18 +0200
Subject: [PATCH 03/11] feat: add option to switch the stats between amount,
 filament and time

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../charts/HistoryAllPrintStatusChart.vue     | 28 ------
 .../charts/HistoryAllPrintStatusTable.vue     | 32 ++-----
 .../charts/HistoryAllPrintStatusTableItem.vue | 36 ++++++++
 src/components/mixins/historyStats.ts         | 86 ++++++++++---------
 4 files changed, 92 insertions(+), 90 deletions(-)
 create mode 100644 src/components/charts/HistoryAllPrintStatusTableItem.vue

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 95e7a678f..8c79f7608 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/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
     }
diff --git a/src/components/charts/HistoryAllPrintStatusTable.vue b/src/components/charts/HistoryAllPrintStatusTable.vue
index a928dfeb5..86ea76f35 100644
--- a/src/components/charts/HistoryAllPrintStatusTable.vue
+++ b/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>
diff --git a/src/components/charts/HistoryAllPrintStatusTableItem.vue b/src/components/charts/HistoryAllPrintStatusTableItem.vue
new file mode 100644
index 000000000..e1f0a32a7
--- /dev/null
+++ b/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>
diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
index 9c3e6473e..04ff132d6 100644
--- a/src/components/mixins/historyStats.ts
+++ b/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
+    }
 }

From 50d770783e4fde7b25c36748fca8bfae9fb8a750 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 16 Sep 2024 00:28:45 +0200
Subject: [PATCH 04/11] refactor: extract HistoryStatsValueNames to history
 types

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/HistoryAllPrintStatusChart.vue   |  3 ++-
 src/components/charts/HistoryAllPrintStatusTable.vue   |  3 ++-
 .../charts/HistoryAllPrintStatusTableItem.vue          |  4 ++--
 src/components/mixins/historyStats.ts                  | 10 +++++++++-
 src/components/panels/HistoryStatisticsPanel.vue       | 10 ++++++++--
 src/store/server/history/types.ts                      |  2 ++
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 8c79f7608..8bb9774ae 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -18,12 +18,13 @@ import VueECharts from 'vue-echarts'
 import type { ECharts } from 'echarts/core'
 import { ECBasicOption } from 'echarts/types/dist/shared.d'
 import { formatPrintTime } from '@/plugins/helpers'
+import { HistoryStatsValueNames } from '@/store/server/history/types'
 
 @Component({
     components: {},
 })
 export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin, HistoryStatsMixin) {
-    @Prop({ type: String, default: 'amount' }) valueName!: 'amount' | 'filament' | 'time'
+    @Prop({ type: String, default: 'amount' }) valueName!: HistoryStatsValueNames
     @Ref('historyAllPrintStatus') historyAllPrintStatus!: typeof VueECharts
 
     get chartOptions(): ECBasicOption {
diff --git a/src/components/charts/HistoryAllPrintStatusTable.vue b/src/components/charts/HistoryAllPrintStatusTable.vue
index 86ea76f35..5fbd1ed53 100644
--- a/src/components/charts/HistoryAllPrintStatusTable.vue
+++ b/src/components/charts/HistoryAllPrintStatusTable.vue
@@ -16,11 +16,12 @@ import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import HistoryStatsMixin from '@/components/mixins/historyStats'
 import HistoryAllPrintStatusTableItem from '@/components/charts/HistoryAllPrintStatusTableItem.vue'
+import { HistoryStatsValueNames } from '@/store/server/history/types'
 
 @Component({
     components: { HistoryAllPrintStatusTableItem },
 })
 export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin, HistoryStatsMixin) {
-    @Prop({ type: String, default: 'amount' }) valueName!: 'amount' | 'filament' | 'time'
+    @Prop({ type: String, default: 'amount' }) valueName!: HistoryStatsValueNames
 }
 </script>
diff --git a/src/components/charts/HistoryAllPrintStatusTableItem.vue b/src/components/charts/HistoryAllPrintStatusTableItem.vue
index e1f0a32a7..498470ccd 100644
--- a/src/components/charts/HistoryAllPrintStatusTableItem.vue
+++ b/src/components/charts/HistoryAllPrintStatusTableItem.vue
@@ -9,7 +9,7 @@
 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 { HistoryStatsValueNames, ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/types'
 import { formatPrintTime } from '@/plugins/helpers'
 
 @Component({
@@ -17,7 +17,7 @@ import { formatPrintTime } from '@/plugins/helpers'
 })
 export default class HistoryAllPrintStatusTableItem extends Mixins(BaseMixin) {
     @Prop({ type: Object }) item!: ServerHistoryStateAllPrintStatusEntry
-    @Prop({ type: String, default: 'amount' }) valueName!: 'amount' | 'filament' | 'time'
+    @Prop({ type: String, default: 'amount' }) valueName!: HistoryStatsValueNames
 
     get value() {
         if (this.valueName === 'filament') {
diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
index 04ff132d6..0b9c97191 100644
--- a/src/components/mixins/historyStats.ts
+++ b/src/components/mixins/historyStats.ts
@@ -1,10 +1,16 @@
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { ServerHistoryStateAllPrintStatusEntry, ServerHistoryStateJob } from '@/store/server/history/types'
+import {
+    HistoryStatsValueNames,
+    ServerHistoryStateAllPrintStatusEntry,
+    ServerHistoryStateJob,
+} from '@/store/server/history/types'
 import i18n from '@/plugins/i18n'
 
 @Component
 export default class HistoryStatsMixin extends Vue {
+    valueName!: HistoryStatsValueNames
+
     get allPrintStatusChartData() {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
         const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
@@ -145,6 +151,8 @@ export default class HistoryStatsMixin extends Vue {
             name: displayName,
             displayName,
             value,
+            valueFilament: 0,
+            valueTime: 0,
             itemStyle: {
                 opacity: 0.9,
                 color: '#616161',
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index b7bc6d233..e8f96d8ff 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -71,10 +71,16 @@ import Panel from '@/components/ui/Panel.vue'
 import HistoryFilamentUsage from '@/components/charts/HistoryFilamentUsage.vue'
 import HistoryPrinttimeAvg from '@/components/charts/HistoryPrinttimeAvg.vue'
 import HistoryAllPrintStatusChart from '@/components/charts/HistoryAllPrintStatusChart.vue'
-import { ServerHistoryStateJob, ServerHistoryStateJobAuxiliaryTotal } from '@/store/server/history/types'
+import {
+    HistoryStatsValueNames,
+    ServerHistoryStateJob,
+    ServerHistoryStateJobAuxiliaryTotal,
+} from '@/store/server/history/types'
 import { mdiChartAreaspline, mdiDatabaseArrowDownOutline } from '@mdi/js'
 import { formatPrintTime } from '@/plugins/helpers'
 import HistoryMixin from '@/components/mixins/history'
+import { TranslateResult } from 'vue-i18n'
+
 @Component({
     components: { Panel, HistoryFilamentUsage, HistoryPrinttimeAvg, HistoryAllPrintStatusChart },
 })
@@ -85,7 +91,7 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin, HistoryMix
 
     toggleValue = 'amount'
 
-    get toggleValueOptions() {
+    get toggleValueOptions(): { text: TranslateResult; value: HistoryStatsValueNames }[] {
         return [
             { text: this.$t('History.Amount'), value: 'amount' },
             { text: this.$t('History.Filament'), value: 'filament' },
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index 5216eb30e..b5478c946 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -89,3 +89,5 @@ export interface ServerHistoryStateAllPrintStatusEntry {
         borderRadius: number
     }
 }
+
+export type HistoryStatsValueNames = 'amount' | 'filament' | 'time'

From 908d3c71f549fa774a8fadeda14de0cd07994c54 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 16 Sep 2024 00:43:49 +0200
Subject: [PATCH 05/11] refactor: remove complexity in historyStatsMixin

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/mixins/historyStats.ts | 158 +++++++++-----------------
 1 file changed, 54 insertions(+), 104 deletions(-)

diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
index 0b9c97191..008fa7adb 100644
--- a/src/components/mixins/historyStats.ts
+++ b/src/components/mixins/historyStats.ts
@@ -7,110 +7,57 @@ import {
 } from '@/store/server/history/types'
 import i18n from '@/plugins/i18n'
 
+type StatusKeys = 'completed' | 'in_progress' | 'cancelled' | 'default'
+
 @Component
 export default class HistoryStatsMixin extends Vue {
     valueName!: HistoryStatsValueNames
 
     get allPrintStatusChartData() {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
-        const jobs = this.$store.state.server.history.jobs ?? []
-
-        jobs.forEach((current: ServerHistoryStateJob) => {
-            const index = output.findIndex((element) => element.name === current.status)
-            if (index !== -1) {
-                output[index].value += 1
-                output[index].valueFilament += current.filament_used
-                output[index].valueTime += current.print_duration
-                return
-            }
-
-            const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en')
-                ? i18n.t(`History.StatusValues.${current.status}`).toString()
-                : current.status
-
-            const itemStyle = {
-                opacity: 0.9,
-                color: '#424242',
-                borderColor: '#1E1E1E',
-                borderWidth: 2,
-                borderRadius: 3,
-            }
-
-            switch (current.status) {
-                case 'completed':
-                    itemStyle['color'] = '#BDBDBD'
-                    break
-
-                case 'in_progress':
-                    itemStyle['color'] = '#EEEEEE'
-                    break
-
-                case 'cancelled':
-                    itemStyle['color'] = '#616161'
-                    break
-            }
-
-            output.push({
-                name: current.status,
-                displayName,
-                value: 1,
-                valueFilament: current.filament_used,
-                valueTime: current.print_duration,
-                itemStyle,
-                showInTable: !hidePrintStatus.includes(current.status),
-            })
-        })
-
-        return output
+        return this.getChartData(this.$store.state.server.history.jobs ?? [])
     }
 
     get selectedPrintStatusChartData() {
+        return this.getChartData(this.$store.getters['server/history/getSelectedJobs'])
+    }
+
+    private getChartData(jobs: ServerHistoryStateJob[]) {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const jobs = this.$store.getters['server/history/getSelectedJobs']
         const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
 
+        const colorMap: Record<StatusKeys, string> = {
+            completed: '#BDBDBD',
+            in_progress: '#EEEEEE',
+            cancelled: '#616161',
+            default: '#424242',
+        }
+
         jobs.forEach((current: ServerHistoryStateJob) => {
             const index = output.findIndex((element) => element.name === current.status)
             if (index !== -1) {
                 output[index].value += 1
-                output[index].valueTime += current.print_duration
                 output[index].valueFilament += current.filament_used
+                output[index].valueTime += current.print_duration
                 return
             }
 
-            const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en').toString()
+            const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en')
                 ? i18n.t(`History.StatusValues.${current.status}`).toString()
                 : current.status
-            const itemStyle = {
-                opacity: 0.9,
-                color: '#424242',
-                borderColor: '#1E1E1E',
-                borderWidth: 2,
-                borderRadius: 3,
-            }
-
-            switch (current.status) {
-                case 'completed':
-                    itemStyle['color'] = '#BDBDBD'
-                    break
-
-                case 'in_progress':
-                    itemStyle['color'] = '#EEEEEE'
-                    break
-
-                case 'cancelled':
-                    itemStyle['color'] = '#616161'
-                    break
-            }
 
             output.push({
                 name: current.status,
                 displayName,
                 value: 1,
-                valueTime: current.print_duration,
                 valueFilament: current.filament_used,
-                itemStyle: itemStyle,
+                valueTime: current.print_duration,
+                itemStyle: {
+                    opacity: 0.9,
+                    color: colorMap[current.status as StatusKeys] ?? colorMap.default,
+                    borderColor: '#1E1E1E',
+                    borderWidth: 2,
+                    borderRadius: 3,
+                },
                 showInTable: !hidePrintStatus.includes(current.status),
             })
         })
@@ -118,36 +65,21 @@ 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)
+    private groupSmallEntries(
+        entries: ServerHistoryStateAllPrintStatusEntry[],
+        threshold: number
+    ): ServerHistoryStateAllPrintStatusEntry[] {
+        const totalCount = entries.reduce((acc, cur) => acc + cur.value, 0)
+        const otherLimit = totalCount * threshold
+        const others = entries.filter((entry) => entry.value < otherLimit)
 
-        // no, or only one entry found
-        if (others.length < 2) return output
+        if (others.length < 2) return entries
 
         const value = others.reduce((acc, cur) => acc + cur.value, 0)
-        output = output.filter((entry) => entry.value >= otherLimit)
+        const remaining = entries.filter((entry) => entry.value >= otherLimit)
         const displayName = i18n.t(`History.StatusValues.Others`).toString() + ` (${others.length})`
-        output.push({
+
+        remaining.push({
             name: displayName,
             displayName,
             value,
@@ -163,6 +95,24 @@ export default class HistoryStatsMixin extends Vue {
             showInTable: true,
         })
 
-        return output
+        return remaining
+    }
+
+    get printStatusArray() {
+        const countSelected = this.$store.getters['server/history/getSelectedJobs'].length
+        const orgArray = countSelected ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
+
+        const output = orgArray.map((status) => ({
+            ...status,
+            name: status.displayName,
+            value:
+                this.valueName === 'filament'
+                    ? status.valueFilament
+                    : this.valueName === 'time'
+                      ? status.valueTime
+                      : status.value,
+        }))
+
+        return this.groupSmallEntries(output, 0.05)
     }
 }

From 45f3e5ab676af4f35db73adeccc7a9e48ef65af6 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 16 Sep 2024 01:01:54 +0200
Subject: [PATCH 06/11] refactor: extract some logic into a separate methods

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/mixins/historyStats.ts | 30 +++++++++++++++------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
index 008fa7adb..831e79114 100644
--- a/src/components/mixins/historyStats.ts
+++ b/src/components/mixins/historyStats.ts
@@ -7,8 +7,6 @@ import {
 } from '@/store/server/history/types'
 import i18n from '@/plugins/i18n'
 
-type StatusKeys = 'completed' | 'in_progress' | 'cancelled' | 'default'
-
 @Component
 export default class HistoryStatsMixin extends Vue {
     valueName!: HistoryStatsValueNames
@@ -21,17 +19,27 @@ export default class HistoryStatsMixin extends Vue {
         return this.getChartData(this.$store.getters['server/history/getSelectedJobs'])
     }
 
-    private getChartData(jobs: ServerHistoryStateJob[]) {
-        const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
-
-        const colorMap: Record<StatusKeys, string> = {
+    private getStatusColor(status: string) {
+        const colorMap: Record<string, string> = {
             completed: '#BDBDBD',
             in_progress: '#EEEEEE',
             cancelled: '#616161',
             default: '#424242',
         }
 
+        return colorMap[status] ?? colorMap.default
+    }
+
+    private getLocalizedStatusName(status: string) {
+        return i18n.te(`History.StatusValues.${status}`, 'en')
+            ? i18n.t(`History.StatusValues.${status}`).toString()
+            : status
+    }
+
+    private getChartData(jobs: ServerHistoryStateJob[]) {
+        const output: ServerHistoryStateAllPrintStatusEntry[] = []
+        const hidePrintStatus = this.$store.state.gui.view.history.hidePrintStatus ?? []
+
         jobs.forEach((current: ServerHistoryStateJob) => {
             const index = output.findIndex((element) => element.name === current.status)
             if (index !== -1) {
@@ -41,19 +49,15 @@ export default class HistoryStatsMixin extends Vue {
                 return
             }
 
-            const displayName = i18n.te(`History.StatusValues.${current.status}`, 'en')
-                ? i18n.t(`History.StatusValues.${current.status}`).toString()
-                : current.status
-
             output.push({
                 name: current.status,
-                displayName,
+                displayName: this.getLocalizedStatusName(current.status),
                 value: 1,
                 valueFilament: current.filament_used,
                 valueTime: current.print_duration,
                 itemStyle: {
                     opacity: 0.9,
-                    color: colorMap[current.status as StatusKeys] ?? colorMap.default,
+                    color: this.getStatusColor(current.status),
                     borderColor: '#1E1E1E',
                     borderWidth: 2,
                     borderRadius: 3,

From 19f0116b89955afac6b95ebd21d519e8a7d89296 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 21 Sep 2024 23:31:38 +0200
Subject: [PATCH 07/11] refactor: rename option amount to jobs

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/HistoryAllPrintStatusChart.vue | 2 +-
 src/components/panels/HistoryStatisticsPanel.vue     | 4 ++--
 src/locales/en.json                                  | 1 -
 src/store/server/history/types.ts                    | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 8bb9774ae..98df21772 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -24,7 +24,7 @@ import { HistoryStatsValueNames } from '@/store/server/history/types'
     components: {},
 })
 export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin, HistoryStatsMixin) {
-    @Prop({ type: String, default: 'amount' }) valueName!: HistoryStatsValueNames
+    @Prop({ type: String, default: 'jobs' }) valueName!: HistoryStatsValueNames
     @Ref('historyAllPrintStatus') historyAllPrintStatus!: typeof VueECharts
 
     get chartOptions(): ECBasicOption {
diff --git a/src/components/panels/HistoryStatisticsPanel.vue b/src/components/panels/HistoryStatisticsPanel.vue
index e8f96d8ff..2f6fa9bfe 100644
--- a/src/components/panels/HistoryStatisticsPanel.vue
+++ b/src/components/panels/HistoryStatisticsPanel.vue
@@ -89,11 +89,11 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin, HistoryMix
     mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     formatPrintTime = formatPrintTime
 
-    toggleValue = 'amount'
+    toggleValue = 'jobs'
 
     get toggleValueOptions(): { text: TranslateResult; value: HistoryStatsValueNames }[] {
         return [
-            { text: this.$t('History.Amount'), value: 'amount' },
+            { text: this.$t('History.Jobs'), value: 'jobs' },
             { text: this.$t('History.Filament'), value: 'filament' },
             { text: this.$t('History.Time'), value: 'time' },
         ]
diff --git a/src/locales/en.json b/src/locales/en.json
index 03d7000b9..fe27e0b2c 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -364,7 +364,6 @@
         "AddNote": "Add note",
         "AddToQueueSuccessful": "File {filename} added to Queue.",
         "AllJobs": "All",
-        "Amount": "Amount",
         "AvgPrinttime": "Print Time - Ø",
         "Cancel": "Cancel",
         "Chart": "Chart",
diff --git a/src/store/server/history/types.ts b/src/store/server/history/types.ts
index b5478c946..9cc07f8cd 100644
--- a/src/store/server/history/types.ts
+++ b/src/store/server/history/types.ts
@@ -90,4 +90,4 @@ export interface ServerHistoryStateAllPrintStatusEntry {
     }
 }
 
-export type HistoryStatsValueNames = 'amount' | 'filament' | 'time'
+export type HistoryStatsValueNames = 'jobs' | 'filament' | 'time'

From 59b07e149a260b6b5948570d88869fb5d76bbb26 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 23 Sep 2024 21:09:00 +0200
Subject: [PATCH 08/11] fix: fix status groups in print history filter

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/HistoryAllPrintStatusChart.vue |  6 +++---
 src/components/mixins/historyStats.ts                |  6 ++++--
 src/components/panels/HistoryListPanel.vue           | 10 ++++------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 98df21772..892c787f4 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -56,7 +56,7 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
             series: [
                 {
                     type: 'pie',
-                    data: this.printStatusArray,
+                    data: this.groupedPrintStatusArray,
                     avoidLabelOverlap: false,
                     radius: ['35%', '60%'],
                     emphasis: {
@@ -83,8 +83,8 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         if (this.chart) this.chart.dispose()
     }
 
-    @Watch('printStatusArray')
-    printStatusArrayChanged(newVal: any) {
+    @Watch('groupedPrintStatusArray')
+    groupedPrintStatusArrayChanged(newVal: any) {
         this.chart?.setOption(
             {
                 series: {
diff --git a/src/components/mixins/historyStats.ts b/src/components/mixins/historyStats.ts
index 831e79114..e761a993e 100644
--- a/src/components/mixins/historyStats.ts
+++ b/src/components/mixins/historyStats.ts
@@ -106,7 +106,7 @@ export default class HistoryStatsMixin extends Vue {
         const countSelected = this.$store.getters['server/history/getSelectedJobs'].length
         const orgArray = countSelected ? this.selectedPrintStatusChartData : this.allPrintStatusChartData
 
-        const output = orgArray.map((status) => ({
+        return orgArray.map((status) => ({
             ...status,
             name: status.displayName,
             value:
@@ -116,7 +116,9 @@ export default class HistoryStatsMixin extends Vue {
                       ? status.valueTime
                       : status.value,
         }))
+    }
 
-        return this.groupSmallEntries(output, 0.05)
+    get groupedPrintStatusArray() {
+        return this.groupSmallEntries(this.printStatusArray, 0.05)
     }
 }
diff --git a/src/components/panels/HistoryListPanel.vue b/src/components/panels/HistoryListPanel.vue
index 85b2b404f..a796e18cd 100644
--- a/src/components/panels/HistoryListPanel.vue
+++ b/src/components/panels/HistoryListPanel.vue
@@ -80,11 +80,8 @@
                                     @change="showPrintJobs = !showPrintJobs" />
                             </v-list-item>
                             <v-divider />
-                            <template v-if="allPrintStatusArray.length">
-                                <v-list-item
-                                    v-for="status of allPrintStatusArray"
-                                    :key="status.key"
-                                    class="minHeight36">
+                            <template v-if="printStatusArray.length">
+                                <v-list-item v-for="status of printStatusArray" :key="status.key" class="minHeight36">
                                     <v-checkbox
                                         class="mt-0"
                                         hide-details
@@ -179,6 +176,7 @@ import { GuiMaintenanceStateEntry, HistoryListRowMaintenance } from '@/store/gui
 import HistoryListEntryMaintenance from '@/components/panels/History/HistoryListEntryMaintenance.vue'
 import HistoryListPanelDeleteSelectedDialog from '@/components/dialogs/HistoryListPanelDeleteSelectedDialog.vue'
 import HistoryMixin from '@/components/mixins/history'
+import HistoryStatsMixin from '@/components/mixins/historyStats'
 
 export type HistoryListPanelRow = HistoryListRowJob | HistoryListRowMaintenance
 
@@ -202,7 +200,7 @@ export interface HistoryListPanelCol {
         Panel,
     },
 })
-export default class HistoryListPanel extends Mixins(BaseMixin, HistoryMixin) {
+export default class HistoryListPanel extends Mixins(BaseMixin, HistoryMixin, HistoryStatsMixin) {
     mdiCloseThick = mdiCloseThick
     mdiCog = mdiCog
     mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline

From 271d48193ec9c303e0959dd479397f3309f29263 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 5 Nov 2024 23:43:40 +0100
Subject: [PATCH 09/11] fix: fix decimals in filament length output of
 HistoryAllPrintStatusTableItem

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/HistoryAllPrintStatusTableItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/charts/HistoryAllPrintStatusTableItem.vue b/src/components/charts/HistoryAllPrintStatusTableItem.vue
index 498470ccd..eca1159e5 100644
--- a/src/components/charts/HistoryAllPrintStatusTableItem.vue
+++ b/src/components/charts/HistoryAllPrintStatusTableItem.vue
@@ -21,9 +21,9 @@ export default class HistoryAllPrintStatusTableItem extends Mixins(BaseMixin) {
 
     get value() {
         if (this.valueName === 'filament') {
-            if (this.item.value > 1000) return Math.round(this.item.value / 1000).toString() + ' m'
+            if (this.item.value > 1000) return Math.round(this.item.value / 1000).toFixed(2) + ' m'
 
-            return this.item.value.toString() + ' mm'
+            return this.item.value.toFixed(0) + ' mm'
         }
 
         if (this.valueName === 'time') {

From 9086ce7930923e0bf90bd0b0d50ad8ace7acf9b2 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 5 Nov 2024 23:48:51 +0100
Subject: [PATCH 10/11] refactor: remove unused imports

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/server/history/getters.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/store/server/history/getters.ts b/src/store/server/history/getters.ts
index cc711c46c..b263ddb39 100644
--- a/src/store/server/history/getters.ts
+++ b/src/store/server/history/getters.ts
@@ -1,12 +1,6 @@
 import { GetterTree } from 'vuex'
-import {
-    HistoryListRowJob,
-    ServerHistoryState,
-    ServerHistoryStateAllPrintStatusEntry,
-    ServerHistoryStateJob,
-} from '@/store/server/history/types'
+import { HistoryListRowJob, ServerHistoryState, ServerHistoryStateJob } from '@/store/server/history/types'
 import { mdiAlertOutline, mdiCheckboxMarkedCircleOutline, mdiCloseCircleOutline, mdiProgressClock } from '@mdi/js'
-import i18n from '@/plugins/i18n'
 import { HistoryListRowMaintenance } from '@/store/gui/maintenance/types'
 
 // I don't know why I cannot import the type from the HistoryListPanel, that's why I have to define it here again

From 5ed4b132d98ad65c112caaeb8e71fd3ef5f2cb14 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Nov 2024 21:39:34 +0100
Subject: [PATCH 11/11] fix: add minAngle to chart

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/HistoryAllPrintStatusChart.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/charts/HistoryAllPrintStatusChart.vue b/src/components/charts/HistoryAllPrintStatusChart.vue
index 892c787f4..e2a3927d5 100644
--- a/src/components/charts/HistoryAllPrintStatusChart.vue
+++ b/src/components/charts/HistoryAllPrintStatusChart.vue
@@ -58,6 +58,7 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
                     type: 'pie',
                     data: this.groupedPrintStatusArray,
                     avoidLabelOverlap: false,
+                    minAngle: 5,
                     radius: ['35%', '60%'],
                     emphasis: {
                         itemStyle: {