feat(History): add option to show stats in different values

src/components/charts/HistoryAllPrintStatusChart.vue

@@ -5,25 +5,27 @@
         :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, 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'
+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'
+import { HistoryStatsValueNames } from '@/store/server/history/types'
 
 @Component({
     components: {},
 })
-export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin) {
-    declare $refs: {
-        historyAllPrintStatus: any
-    }
+export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeMixin, HistoryStatsMixin) {
+    @Prop({ type: String, default: 'amount' }) valueName!: HistoryStatsValueNames
+    @Ref('historyAllPrintStatus') historyAllPrintStatus!: typeof VueECharts
 
     get chartOptions(): ECBasicOption {
         return {
@@ -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: [
                 {
@@ -59,33 +74,8 @@ export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin, ThemeM
         }
     }
 
-    get selectedJobs() {
-        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
-
-        orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
-            const tmp = { ...status }
-            tmp.name = status.displayName
-            output.push(tmp)
-        })
-
-        return output
-    }
-
     get chart(): ECharts | null {
-        return this.$refs.historyAllPrintStatus?.chart ?? null
+        return this.historyAllPrintStatus?.chart ?? null
     }
 
     beforeDestroy() {

src/components/charts/HistoryAllPrintStatusTable.vue

@@ -1,47 +1,27 @@
 <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'
+import { HistoryStatsValueNames } from '@/store/server/history/types'
 
 @Component({
-    components: {},
+    components: { HistoryAllPrintStatusTableItem },
 })
-export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin) {
-    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
-
-        orgArray.forEach((status: ServerHistoryStateAllPrintStatusEntry) => {
-            const tmp = { ...status }
-            tmp.name = status.displayName
-            output.push(tmp)
-        })
-
-        return output
-    }
+export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin, HistoryStatsMixin) {
+    @Prop({ type: String, default: 'amount' }) valueName!: HistoryStatsValueNames
 }
 </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 { HistoryStatsValueNames, 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!: HistoryStatsValueNames
+
+    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

@@ -0,0 +1,122 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+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() {
+        return this.getChartData(this.$store.state.server.history.jobs ?? [])
+    }
+
+    get selectedPrintStatusChartData() {
+        return this.getChartData(this.$store.getters['server/history/getSelectedJobs'])
+    }
+
+    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) {
+                output[index].value += 1
+                output[index].valueFilament += current.filament_used
+                output[index].valueTime += current.print_duration
+                return
+            }
+
+            output.push({
+                name: current.status,
+                displayName: this.getLocalizedStatusName(current.status),
+                value: 1,
+                valueFilament: current.filament_used,
+                valueTime: current.print_duration,
+                itemStyle: {
+                    opacity: 0.9,
+                    color: this.getStatusColor(current.status),
+                    borderColor: '#1E1E1E',
+                    borderWidth: 2,
+                    borderRadius: 3,
+                },
+                showInTable: !hidePrintStatus.includes(current.status),
+            })
+        })
+
+        return output
+    }
+
+    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)
+
+        if (others.length < 2) return entries
+
+        const value = others.reduce((acc, cur) => acc + cur.value, 0)
+        const remaining = entries.filter((entry) => entry.value >= otherLimit)
+        const displayName = i18n.t(`History.StatusValues.Others`).toString() + ` (${others.length})`
+
+        remaining.push({
+            name: displayName,
+            displayName,
+            value,
+            valueFilament: 0,
+            valueTime: 0,
+            itemStyle: {
+                opacity: 0.9,
+                color: '#616161',
+                borderColor: '#1E1E1E',
+                borderWidth: 2,
+                borderRadius: 3,
+            },
+            showInTable: true,
+        })
+
+        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)
+    }
+}

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'" />
@@ -64,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 },
 })
@@ -76,6 +89,16 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin, HistoryMix
     mdiDatabaseArrowDownOutline = mdiDatabaseArrowDownOutline
     formatPrintTime = formatPrintTime
 
+    toggleValue = 'amount'
+
+    get toggleValueOptions(): { text: TranslateResult; value: HistoryStatsValueNames }[] {
+        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']
     }

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",