From 908d3c71f549fa774a8fadeda14de0cd07994c54 Mon Sep 17 00:00:00 2001 From: Stefan Dej Date: Mon, 16 Sep 2024 00:43:49 +0200 Subject: [PATCH] refactor: remove complexity in historyStatsMixin Signed-off-by: Stefan Dej --- 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 = { + 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) } }