feat: add table view for print status stats

src/components/charts/HistoryAllPrintStatus.vue → src/components/charts/HistoryAllPrintStatusChart.vue

@@ -5,7 +5,7 @@
         :option="chartOptions"
         :autoresize="true"
         :init-options="{ renderer: 'svg' }"
-        style="height: 250px; width: 100%"></e-chart>
+        style="height: 200px; width: 100%"></e-chart>
 </template>
 
 <script lang="ts">
@@ -19,7 +19,7 @@ import { ServerHistoryStateAllPrintStatusEntry } from '@/store/server/history/ty
 @Component({
     components: {},
 })
-export default class HistoryAllPrintStatus extends Mixins(BaseMixin) {
+export default class HistoryAllPrintStatusChart extends Mixins(BaseMixin) {
     declare $refs: {
         historyAllPrintStatus: any
     }

src/components/charts/HistoryAllPrintStatusTable.vue

@@ -0,0 +1,47 @@
+<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>
+        </tbody>
+    </v-simple-table>
+</template>
+
+<script lang="ts">
+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'
+
+@Component({
+    components: {},
+})
+export default class HistoryAllPrintStatusTable extends Mixins(BaseMixin) {
+    get selectedJobs() {
+        return this.$store.state.gui.view.history.selectedJobs ?? []
+    }
+
+    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
+    }
+}
+</script>

src/components/panels/HistoryStatisticsPanel.vue

@@ -57,11 +57,23 @@
                     </v-simple-table>
                 </v-col>
                 <v-col class="col-12 col-sm-6 col-md-4">
-                    <history-all-print-status></history-all-print-status>
+                    <history-all-print-status-chart
+                        v-if="togglePrintStatus === 'chart'"></history-all-print-status-chart>
+                    <history-all-print-status-table v-else></history-all-print-status-table>
+                    <div class="text-center mb-3">
+                        <v-btn-toggle v-model="togglePrintStatus" small mandatory>
+                            <v-btn small value="chart">
+                                {{ $t('History.Chart') }}
+                            </v-btn>
+                            <v-btn small value="table">
+                                {{ $t('History.Table') }}
+                            </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'"></history-filament-usage>
-                    <history-printtime-avg v-if="toggleChart === 'printtime_avg'"></history-printtime-avg>
+                    <history-printtime-avg v-else-if="toggleChart === 'printtime_avg'"></history-printtime-avg>
                     <div class="text-center mt-3">
                         <v-btn-toggle v-model="toggleChart" small mandatory>
                             <v-btn small value="filament_usage">
@@ -84,11 +96,11 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import HistoryFilamentUsage from '@/components/charts/HistoryFilamentUsage.vue'
 import HistoryPrinttimeAvg from '@/components/charts/HistoryPrinttimeAvg.vue'
-import HistoryAllPrintStatus from '@/components/charts/HistoryAllPrintStatus.vue'
+import HistoryAllPrintStatusChart from '@/components/charts/HistoryAllPrintStatusChart.vue'
 import { ServerHistoryStateJob } from '@/store/server/history/types'
 import { mdiChartAreaspline } from '@mdi/js'
 @Component({
-    components: { Panel, HistoryFilamentUsage, HistoryPrinttimeAvg, HistoryAllPrintStatus },
+    components: { Panel, HistoryFilamentUsage, HistoryPrinttimeAvg, HistoryAllPrintStatusChart },
 })
 export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
     mdiChartAreaspline = mdiChartAreaspline
@@ -177,6 +189,14 @@ export default class HistoryStatisticsPanel extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'view.history.toggleChartCol3', value: newVal })
     }
 
+    get togglePrintStatus() {
+        return this.$store.state.gui.view.history.toggleChartCol2
+    }
+
+    set togglePrintStatus(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.history.toggleChartCol2', value: newVal })
+    }
+
     formatPrintTime(totalSeconds: number) {
         if (totalSeconds) {
             let output = ''

src/locales/en.json

@@ -303,6 +303,7 @@
         "AvgPrinttime": "Print Time - Ø",
         "Cancel": "Cancel",
         "CreateNote": "Create Note",
+        "Chart": "Chart",
         "Delete": "Delete",
         "DeleteSelectedQuestion": "Do you really want to delete {count} selected jobs?",
         "Details": "Details",
@@ -354,6 +355,7 @@
             "Others": "Others",
             "server_exit": "Server exit"
         },
+        "Table": "Table",
         "TitleExportHistory": "Export History",
         "TitleRefreshHistory": "Refresh History",
         "TitleSettings": "Settings",

src/store/gui/index.ts

@@ -199,6 +199,7 @@ export const getDefaultState = (): GuiState => {
             },
             history: {
                 countPerPage: 10,
+                toggleChartCol2: 'chart',
                 toggleChartCol3: 'filament_usage',
                 hidePrintStatus: [],
                 hideColums: [

src/store/gui/types.ts

@@ -138,6 +138,7 @@ export interface GuiState {
         }
         history: {
             countPerPage: number
+            toggleChartCol2: 'chart' | 'table'
             toggleChartCol3: string
             hidePrintStatus: string[]
             hideColums: string[]

src/store/server/history/getters.ts

@@ -66,9 +66,8 @@ export const getters: GetterTree<ServerHistoryState, any> = {
             : 0
     },
 
-    getAllPrintStatusArray(state, getters, rootState) {
+    getAllPrintStatusArrayAll(state, getters, rootState) {
         const output: ServerHistoryStateAllPrintStatusEntry[] = []
-        const totalCount = state.jobs.length
 
         state.jobs.forEach((current) => {
             const index = output.findIndex((element) => element.name === current.status)
@@ -113,6 +112,13 @@ export const getters: GetterTree<ServerHistoryState, any> = {
             }
         })
 
+        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) {