From 6209172991f0843b905fc47b3da1c956f03688c9 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 21:25:01 +0200
Subject: [PATCH 1/8] refactor: extract Presets and Settings from
 TemperaturePanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Temperature/TemperaturePanelPresets.vue   | 105 +++++++++++++
 .../Temperature/TemperaturePanelSettings.vue  |  55 +++++++
 src/components/panels/TemperaturePanel.vue    | 141 ++----------------
 3 files changed, 169 insertions(+), 132 deletions(-)
 create mode 100644 src/components/panels/Temperature/TemperaturePanelPresets.vue
 create mode 100644 src/components/panels/Temperature/TemperaturePanelSettings.vue

diff --git a/src/components/panels/Temperature/TemperaturePanelPresets.vue b/src/components/panels/Temperature/TemperaturePanelPresets.vue
new file mode 100644
index 000000000..fb3b6f881
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelPresets.vue
@@ -0,0 +1,105 @@
+<template>
+    <div style="height: 100%">
+        <v-menu v-if="presets.length" :offset-y="true" left>
+            <template #activator="{ on, attrs }">
+                <v-btn
+                    text
+                    tile
+                    color="primary"
+                    v-bind="attrs"
+                    :disabled="['printing', 'paused'].includes(printer_state)"
+                    class="pa-1"
+                    v-on="on">
+                    <span class="d-none ml-1 d-md-block">{{ $t('Panels.TemperaturePanel.Presets') }}</span>
+                    <v-icon class="d-md-none">{{ mdiFire }}</v-icon>
+                    <v-icon>{{ mdiMenuDown }}</v-icon>
+                </v-btn>
+            </template>
+            <v-list dense class="py-0">
+                <v-list-item v-for="(preset, index) of presets" :key="index" link @click="preheat(preset)">
+                    <div class="d-flex align-center _preset-title">
+                        <v-icon small class="mr-1">{{ mdiFire }}</v-icon>
+                        <span style="padding-top: 2px">{{ preset.name }}</span>
+                    </div>
+                </v-list-item>
+            </v-list>
+            <v-divider class="_fix_transparency" />
+            <v-list dense class="py-0">
+                <v-list-item link @click="cooldown">
+                    <div class="d-flex align-center _preset-title">
+                        <v-icon small color="primary" class="mr-1">{{ mdiSnowflake }}</v-icon>
+                        <span class="primary--text">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
+                    </div>
+                </v-list-item>
+            </v-list>
+        </v-menu>
+        <v-btn
+            v-else
+            :icon="$vuetify.breakpoint.smAndDown"
+            :text="$vuetify.breakpoint.mdAndUp"
+            tile
+            color="primary"
+            @click="cooldown">
+            <v-icon small>{{ mdiSnowflake }}</v-icon>
+            <span class="d-none ml-1 d-md-inline">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
+        </v-btn>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
+import { mdiFire, mdiMenuDown, mdiSnowflake } from '@mdi/js'
+
+@Component
+export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
+    mdiFire = mdiFire
+    mdiMenuDown = mdiMenuDown
+    mdiSnowflake = mdiSnowflake
+
+    get presets(): GuiPresetsStatePreset[] {
+        return this.$store.getters['gui/presets/getPresets'] ?? []
+    }
+
+    get cooldownGcode(): string {
+        return this.$store.getters['gui/presets/getCooldownGcode']
+    }
+
+    preheat(preset: GuiPresetsStatePreset): void {
+        for (const [name, attributes] of Object.entries(preset.values)) {
+            if (attributes.bool) {
+                let gcode = `SET_HEATER_TEMPERATURE HEATER=${name} TARGET=${attributes.value}`
+
+                if (attributes.type === 'temperature_fan') {
+                    const fanName = name.replace('temperature_fan ', '')
+                    gcode = `SET_TEMPERATURE_FAN_TARGET temperature_fan=${fanName} TARGET=${attributes.value}`
+                }
+
+                this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+                this.$socket.emit('printer.gcode.script', { script: gcode })
+            }
+        }
+
+        if (preset.gcode !== '') {
+            setTimeout(() => {
+                this.$store.dispatch('server/addEvent', { message: preset.gcode, type: 'command' })
+                this.$socket.emit('printer.gcode.script', { script: preset.gcode })
+            }, 100)
+        }
+    }
+
+    cooldown(): void {
+        this.$store.dispatch('server/addEvent', { message: this.cooldownGcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.cooldownGcode })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+._preset-title {
+    font-size: 0.8125rem;
+    font-weight: 500;
+}
+</style>
diff --git a/src/components/panels/Temperature/TemperaturePanelSettings.vue b/src/components/panels/Temperature/TemperaturePanelSettings.vue
new file mode 100644
index 000000000..df1a73be7
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelSettings.vue
@@ -0,0 +1,55 @@
+<template>
+    <v-menu :offset-y="true" :close-on-content-click="false" :title="$t('Panels.TemperaturePanel.SetupTemperatures')">
+        <template #activator="{ on, attrs }">
+            <v-btn icon tile v-bind="attrs" v-on="on">
+                <v-icon small>{{ mdiCog }}</v-icon>
+            </v-btn>
+        </template>
+        <v-list>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="boolTempchart"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.TemperaturePanel.ShowChart')" />
+            </v-list-item>
+            <v-list-item class="minHeight36">
+                <v-checkbox
+                    v-model="autoscaleTempchart"
+                    class="mt-0"
+                    hide-details
+                    :label="$t('Panels.TemperaturePanel.AutoscaleChart')" />
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCog } from '@mdi/js'
+
+@Component
+export default class TemperaturePanelSettings extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+
+    get boolTempchart(): boolean {
+        return this.$store.state.gui.view.tempchart.boolTempchart ?? false
+    }
+
+    set boolTempchart(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.boolTempchart', value: newVal })
+    }
+
+    get autoscaleTempchart(): boolean {
+        return this.$store.state.gui.view.tempchart.autoscale ?? false
+    }
+
+    set autoscaleTempchart(newVal: boolean) {
+        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.autoscale', value: newVal })
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/panels/TemperaturePanel.vue b/src/components/panels/TemperaturePanel.vue
index 50d4702e0..1aaf0efea 100644
--- a/src/components/panels/TemperaturePanel.vue
+++ b/src/components/panels/TemperaturePanel.vue
@@ -3,80 +3,13 @@
         <panel
             v-if="klipperReadyForGui"
             :icon="mdiThermometerLines"
-            :title="$t('Panels.TemperaturePanel.Headline').toString()"
+            :title="$t('Panels.TemperaturePanel.Headline')"
             :collapsible="true"
             card-class="temperature-panel">
             <!-- PRESET MENU -->
             <template #buttons>
-                <v-menu v-if="presets.length" :offset-y="true" left title="Preheat">
-                    <template #activator="{ on, attrs }">
-                        <v-btn
-                            text
-                            tile
-                            color="primary"
-                            v-bind="attrs"
-                            :disabled="['printing', 'paused'].includes(printer_state)"
-                            class="pa-1"
-                            v-on="on">
-                            <span class="d-none ml-1 d-md-block">{{ $t('Panels.TemperaturePanel.Presets') }}</span>
-                            <v-icon class="d-md-none">{{ mdiFire }}</v-icon>
-                            <v-icon>{{ mdiMenuDown }}</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list dense class="py-0">
-                        <v-list-item v-for="preset of presets" :key="preset.index" link @click="preheat(preset)">
-                            <div class="d-flex align-center _preset-title">
-                                <v-icon small class="mr-1">{{ mdiFire }}</v-icon>
-                                <span style="padding-top: 2px">{{ preset.name }}</span>
-                            </div>
-                        </v-list-item>
-                    </v-list>
-                    <v-divider class="_fix_transparency"></v-divider>
-                    <v-list dense class="py-0">
-                        <v-list-item link @click="cooldown()">
-                            <div class="d-flex align-center _preset-title">
-                                <v-icon small color="primary" class="mr-1">{{ mdiSnowflake }}</v-icon>
-                                <span class="primary--text">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
-                            </div>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-                <v-btn
-                    v-if="presets.length === 0"
-                    :icon="$vuetify.breakpoint.smAndDown"
-                    :text="$vuetify.breakpoint.mdAndUp"
-                    tile
-                    color="primary"
-                    @click="cooldown()">
-                    <v-icon small>{{ mdiSnowflake }}</v-icon>
-                    <span class="d-none ml-1 d-md-inline">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
-                </v-btn>
-                <v-menu
-                    :offset-y="true"
-                    :close-on-content-click="false"
-                    :title="$t('Panels.TemperaturePanel.SetupTemperatures')">
-                    <template #activator="{ on, attrs }">
-                        <v-btn icon tile v-bind="attrs" v-on="on">
-                            <v-icon small>{{ mdiCog }}</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list>
-                        <v-list-item class="minHeight36">
-                            <v-checkbox
-                                v-model="boolTempchart"
-                                class="mt-0"
-                                hide-details
-                                :label="$t('Panels.TemperaturePanel.ShowChart')"></v-checkbox>
-                        </v-list-item>
-                        <v-list-item class="minHeight36">
-                            <v-checkbox
-                                v-model="autoscaleTempchart"
-                                class="mt-0"
-                                hide-details
-                                :label="$t('Panels.TemperaturePanel.AutoscaleChart')"></v-checkbox>
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
+                <temperature-panel-presets />
+                <temperature-panel-settings />
             </template>
             <v-card-text class="pa-0">
                 <responsive
@@ -176,10 +109,10 @@
                 </responsive>
             </v-card-text>
             <v-card-text v-if="boolTempchart" class="pa-0 d-inline-block">
-                <v-divider class="mt-0 mb-2"></v-divider>
+                <v-divider class="mt-0 mb-2" />
                 <v-row>
                     <v-col class="py-0">
-                        <temp-chart></temp-chart>
+                        <temp-chart />
                     </v-col>
                 </v-row>
             </v-card-text>
@@ -228,7 +161,7 @@
                                 mode="hexa"
                                 :value="editHeater.color"
                                 class="mx-auto"
-                                @update:color="setChartColor"></v-color-picker>
+                                @update:color="setChartColor" />
                         </v-col>
                     </v-row>
                 </v-card-text>
@@ -242,7 +175,6 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import { capitalize, convertName } from '@/plugins/helpers'
 import { Debounce } from 'vue-debounce-decorator'
-import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
 import { PrinterStateAdditionalSensor, PrinterStateTemperatureObject } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
@@ -250,17 +182,15 @@ import TempChart from '@/components/charts/TempChart.vue'
 import TemperatureInput from '@/components/inputs/TemperatureInput.vue'
 import Panel from '@/components/ui/Panel.vue'
 import Responsive from '@/components/ui/Responsive.vue'
-import { mdiCloseThick, mdiCog, mdiSnowflake, mdiFire, mdiMenuDown, mdiThermometerLines } from '@mdi/js'
+import { mdiCloseThick, mdiCog, mdiThermometerLines } from '@mdi/js'
+import TemperaturePanelPresets from '@/components/panels/Temperature/TemperaturePanelPresets.vue'
 
 @Component({
-    components: { Panel, TempChart, TemperatureInput, Responsive },
+    components: { Panel, TempChart, TemperatureInput, Responsive, TemperaturePanelPresets },
 })
 export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
-    mdiSnowflake = mdiSnowflake
     mdiCloseThick = mdiCloseThick
     mdiCog = mdiCog
-    mdiFire = mdiFire
-    mdiMenuDown = mdiMenuDown
     mdiThermometerLines = mdiThermometerLines
 
     convertName = convertName
@@ -278,64 +208,16 @@ export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
         color: '',
     }
 
-    get presets(): GuiPresetsStatePreset[] {
-        return this.$store.getters['gui/presets/getPresets'] ?? []
-    }
-
-    get cooldownGcode(): string {
-        return this.$store.getters['gui/presets/getCooldownGcode']
-    }
-
     get boolTempchart(): boolean {
         return this.$store.state.gui.view.tempchart.boolTempchart ?? false
     }
 
-    set boolTempchart(newVal: boolean) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.boolTempchart', value: newVal })
-    }
-
-    get autoscaleTempchart(): boolean {
-        return this.$store.state.gui.view.tempchart.autoscale ?? false
-    }
-
-    set autoscaleTempchart(newVal: boolean) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.tempchart.autoscale', value: newVal })
-    }
-
     get temperatureObjects() {
         const sensors = this.$store.getters['printer/getTemperatureObjects'] ?? []
 
         return sensors.filter((sensor: PrinterStateTemperatureObject) => !sensor.name.startsWith('_'))
     }
 
-    preheat(preset: GuiPresetsStatePreset): void {
-        for (const [name, attributes] of Object.entries(preset.values)) {
-            if (attributes.bool) {
-                let gcode = `SET_HEATER_TEMPERATURE HEATER=${name} TARGET=${attributes.value}`
-
-                if (attributes.type === 'temperature_fan') {
-                    const fanName = name.replace('temperature_fan ', '')
-                    gcode = `SET_TEMPERATURE_FAN_TARGET temperature_fan=${fanName} TARGET=${attributes.value}`
-                }
-
-                this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-                this.$socket.emit('printer.gcode.script', { script: gcode })
-            }
-        }
-
-        if (preset.gcode !== '') {
-            setTimeout(() => {
-                this.$store.dispatch('server/addEvent', { message: preset.gcode, type: 'command' })
-                this.$socket.emit('printer.gcode.script', { script: preset.gcode })
-            }, 100)
-        }
-    }
-
-    cooldown(): void {
-        this.$store.dispatch('server/addEvent', { message: this.cooldownGcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: this.cooldownGcode })
-    }
-
     openHeater(object: PrinterStateTemperatureObject): void {
         this.editHeater.name = object.name
         this.editHeater.icon = object.icon
@@ -383,11 +265,6 @@ export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
     border-radius: 10px !important;
 }
 
-._preset-title {
-    font-size: 0.8125rem;
-    font-weight: 500;
-}
-
 .v-icon._no-focus-style:focus::after {
     opacity: 0 !important;
 }

From 91542e849f6a8a605722fb73d35fb76d64c82719 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 21:25:22 +0200
Subject: [PATCH 2/8] refactor: Panel.vue CSS settings

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/ui/Panel.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/ui/Panel.vue b/src/components/ui/Panel.vue
index 15f6284f9..e54c3b40f 100644
--- a/src/components/ui/Panel.vue
+++ b/src/components/ui/Panel.vue
@@ -96,6 +96,15 @@ export default class Panel extends Mixins(BaseMixin) {
 .icon-rotate-90 {
     transform: rotate(90deg);
 }
+
+.panel-toolbar {
+    overflow-y: hidden;
+}
+
+::v-deep .panel-toolbar .v-btn {
+    height: 100% !important;
+    max-height: none;
+}
 </style>
 
 <style lang="scss">
@@ -105,13 +114,6 @@ export default class Panel extends Mixins(BaseMixin) {
 .v-card.panel .v-toolbar__content .subheading {
     user-select: none;
 }
-.panel-toolbar {
-    overflow-y: hidden;
-}
-.panel-toolbar .v-btn {
-    height: 100% !important;
-    max-height: none;
-}
 .panel-toolbar .v-btn.v-btn--icon {
     width: var(--panel-toolbar-icon-btn-width) !important;
 }

From c8e9b7f44d36069046ddb1ae783996805d6a8cfa Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 22:30:09 +0200
Subject: [PATCH 3/8] refactor: WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Temperature/TemperaturePanelList.vue      | 136 ++++++++++++++++++
 .../Temperature/TemperaturePanelListItem.vue  | 100 +++++++++++++
 .../Temperature/TemperaturePanelPresets.vue   |   8 ++
 src/components/panels/TemperaturePanel.vue    | 136 +-----------------
 4 files changed, 245 insertions(+), 135 deletions(-)
 create mode 100644 src/components/panels/Temperature/TemperaturePanelList.vue
 create mode 100644 src/components/panels/Temperature/TemperaturePanelListItem.vue

diff --git a/src/components/panels/Temperature/TemperaturePanelList.vue b/src/components/panels/Temperature/TemperaturePanelList.vue
new file mode 100644
index 000000000..74adf7fc5
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelList.vue
@@ -0,0 +1,136 @@
+<template>
+    <responsive
+        :breakpoints="{
+            mobile: (el) => el.width <= 395,
+        }">
+        <template #default="{ el }">
+            <v-simple-table class="temperature-panel-table">
+                <thead>
+                    <tr>
+                        <th class="icon">&nbsp;</th>
+                        <th class="name">{{ $t('Panels.TemperaturePanel.Name') }}</th>
+                        <th v-if="!el.is.mobile" class="state">
+                            {{ $t('Panels.TemperaturePanel.State') }}
+                        </th>
+                        <th class="current">
+                            {{ $t('Panels.TemperaturePanel.Current') }}
+                        </th>
+                        <th class="target">
+                            {{ $t('Panels.TemperaturePanel.Target') }}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <temperature-panel-list-item
+                        v-for="objectName in tempObjects"
+                        :key="objectName"
+                        :object-name="objectName" />
+                </tbody>
+            </v-simple-table>
+        </template>
+    </responsive>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelList extends Mixins(BaseMixin) {
+    get available_heaters() {
+        return this.$store.state.printer?.heaters?.available_heaters ?? []
+    }
+
+    get filteredHeaters() {
+        return this.available_heaters
+            .filter((fullName: string) => {
+                const splits = fullName.split(' ')
+                let name = splits[0]
+                if (splits.length > 1) name = splits[1]
+
+                return !name.startsWith('_')
+            })
+            .sort(this.sortObjectName)
+    }
+
+    get available_sensors() {
+        return this.$store.state.printer?.heaters?.available_sensors ?? []
+    }
+
+    get temperature_fans() {
+        return this.available_sensors
+            .filter((name: string) => name.startsWith('temperature_fan') && !name.startsWith('temperature_fan _'))
+            .sort(this.sortObjectName)
+    }
+
+    get temperature_sensors() {
+        return this.available_sensors
+            .filter((fullName: string) => {
+                if (this.available_heaters.includes(fullName)) return false
+                if (this.temperature_fans.includes(fullName)) return false
+
+                const splits = fullName.split(' ')
+                let name = splits[0]
+                if (splits.length > 1) name = splits[1]
+
+                return !name.startsWith('_')
+            })
+            .sort(this.sortObjectName)
+    }
+
+    get tempObjects() {
+        return [...this.filteredHeaters, ...this.temperature_fans, ...this.temperature_sensors]
+    }
+
+    sortObjectName(a: string, b: string) {
+        const splitsA = a.split(' ')
+        let nameA = splitsA[0]
+        if (splitsA.length > 1) nameA = splitsA[1]
+        nameA = nameA.toUpperCase()
+
+        const splitsB = b.split(' ')
+        let nameB = splitsB[0]
+        if (splitsB.length > 1) nameB = splitsB[1]
+        nameB = nameB.toUpperCase()
+
+        if (nameA < nameB) return -1
+        if (nameA > nameB) return 1
+
+        return 0
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.temperature-panel-table th,
+.temperature-panel-table ::v-deep td {
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
+    height: auto !important;
+}
+
+.temperature-panel-table ::v-deep tr:hover {
+    background: none !important;
+}
+
+.temperature-panel-table ::v-deep .icon {
+    width: 24px;
+    padding-right: 0 !important;
+    text-align: center;
+}
+
+.temperature-panel-table ::v-deep .state {
+    width: 100px;
+    text-align: right !important;
+}
+
+.temperature-panel-table ::v-deep .current {
+    width: 100px;
+    text-align: right !important;
+}
+
+.temperature-panel-table ::v-deep .target {
+    width: 140px;
+}
+</style>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItem.vue b/src/components/panels/Temperature/TemperaturePanelListItem.vue
new file mode 100644
index 000000000..b40810e74
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItem.vue
@@ -0,0 +1,100 @@
+<template>
+    <tr>
+        <td class="icon">bla</td>
+        <td class="name">{{ formatName }}</td>
+    </tr>
+
+    <!--                    <tr v-for="(object, index) in temperatureObjects" :key="index">
+                        <td class="icon">
+                            <v-icon
+                                :color="object.iconColor"
+                                :class="`_no-focus-style ${object.iconClass}`"
+                                style="cursor: pointer"
+                                tabindex="-1"
+                                @click="openHeater(object)">
+                                {{ object.icon }}
+                            </v-icon>
+                        </td>
+                        <td class="name">
+                            <span style="cursor: pointer" @click="openHeater(object)">
+                                {{ convertName(object.name) }}
+                            </span>
+                        </td>
+                        <td v-if="!el.is.mobile" class="state">
+                            <v-tooltip v-if="object.state !== null" top>
+                                <template #activator="{ on, attrs }">
+                                    <div v-bind="attrs" v-on="on">
+                                        {{ object.state }}
+                                    </div>
+                                </template>
+                                <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ object.avgState }}</span>
+                            </v-tooltip>
+                        </td>
+                        <td class="current">
+                            <v-tooltip
+                                top
+                                :disabled="!(object.measured_min_temp !== null || object.measured_max_temp !== null)">
+                                <template #activator="{ on, attrs }">
+                                    <span style="cursor: default" v-bind="attrs" v-on="on">
+                                        {{ object.temperature.toFixed(1) }}°C
+                                    </span>
+                                </template>
+                                <span>
+                                    {{ $t('Panels.TemperaturePanel.Max') }}: {{ object.measured_max_temp }}°C
+                                    <br />
+                                    {{ $t('Panels.TemperaturePanel.Min') }}: {{ object.measured_min_temp }}°C
+                                </span>
+                            </v-tooltip>
+                            <div v-for="(values, key) of object.additionalSensors" :key="key">
+                                <span v-if="values.bool" class="d-block">
+                                    <small>{{ values.value }} {{ values.unit }}</small>
+                                </span>
+                            </div>
+                            <div v-if="object.rpm !== null">
+                                <small :class="object.rpmClass">{{ object.rpm }} RPM</small>
+                            </div>
+                        </td>
+                        <td class="target">
+                            <temperature-input
+                                v-if="object.command !== null"
+                                :name="object.name"
+                                :target="object.target"
+                                :presets="object.presets"
+                                :min_temp="object.min_temp"
+                                :max_temp="object.max_temp"
+                                :command="object.command"
+                                :attribute-name="object.commandAttributeName" />
+                        </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 { convertName } from '@/plugins/helpers'
+
+@Component
+export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+
+    get printerObject() {
+        if (!(this.objectName in this.$store.state.printer)) return {}
+
+        return this.$store.state.printer[this.objectName]
+    }
+
+    get name() {
+        const splits = this.objectName.split(' ')
+        if (splits.length === 1) return this.objectName
+
+        return splits[1]
+    }
+
+    get formatName() {
+        return convertName(this.name)
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/panels/Temperature/TemperaturePanelPresets.vue b/src/components/panels/Temperature/TemperaturePanelPresets.vue
index fb3b6f881..f434e89cd 100644
--- a/src/components/panels/Temperature/TemperaturePanelPresets.vue
+++ b/src/components/panels/Temperature/TemperaturePanelPresets.vue
@@ -102,4 +102,12 @@ export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
     font-size: 0.8125rem;
     font-weight: 500;
 }
+
+/*
+workaround for fixing a transparency issue
+which is assumingly a vuetify bug
+*/
+._fix_transparency {
+    background-color: #1e1e1e;
+}
 </style>
diff --git a/src/components/panels/TemperaturePanel.vue b/src/components/panels/TemperaturePanel.vue
index 1aaf0efea..5aa9d755b 100644
--- a/src/components/panels/TemperaturePanel.vue
+++ b/src/components/panels/TemperaturePanel.vue
@@ -12,101 +12,7 @@
                 <temperature-panel-settings />
             </template>
             <v-card-text class="pa-0">
-                <responsive
-                    :breakpoints="{
-                        mobile: (el) => el.width <= 395,
-                    }">
-                    <template #default="{ el }">
-                        <v-simple-table class="temperature-panel-table">
-                            <thead>
-                                <tr>
-                                    <th class="icon">&nbsp;</th>
-                                    <th class="name">{{ $t('Panels.TemperaturePanel.Name') }}</th>
-                                    <th v-if="!el.is.mobile" class="state">
-                                        {{ $t('Panels.TemperaturePanel.State') }}
-                                    </th>
-                                    <th class="current">
-                                        {{ $t('Panels.TemperaturePanel.Current') }}
-                                    </th>
-                                    <th class="target">
-                                        {{ $t('Panels.TemperaturePanel.Target') }}
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="(object, index) in temperatureObjects" :key="index">
-                                    <td class="icon">
-                                        <v-icon
-                                            :color="object.iconColor"
-                                            :class="`_no-focus-style ${object.iconClass}`"
-                                            style="cursor: pointer"
-                                            tabindex="-1"
-                                            @click="openHeater(object)">
-                                            {{ object.icon }}
-                                        </v-icon>
-                                    </td>
-                                    <td class="name">
-                                        <span style="cursor: pointer" @click="openHeater(object)">
-                                            {{ convertName(object.name) }}
-                                        </span>
-                                    </td>
-                                    <td v-if="!el.is.mobile" class="state">
-                                        <v-tooltip v-if="object.state !== null" top>
-                                            <template #activator="{ on, attrs }">
-                                                <div v-bind="attrs" v-on="on">
-                                                    {{ object.state }}
-                                                </div>
-                                            </template>
-                                            <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ object.avgState }}</span>
-                                        </v-tooltip>
-                                    </td>
-                                    <td class="current">
-                                        <v-tooltip
-                                            top
-                                            :disabled="
-                                                !(
-                                                    object.measured_min_temp !== null ||
-                                                    object.measured_max_temp !== null
-                                                )
-                                            ">
-                                            <template #activator="{ on, attrs }">
-                                                <span style="cursor: default" v-bind="attrs" v-on="on">
-                                                    {{ object.temperature.toFixed(1) }}°C
-                                                </span>
-                                            </template>
-                                            <span>
-                                                {{ $t('Panels.TemperaturePanel.Max') }}:
-                                                {{ object.measured_max_temp }}°C
-                                                <br />
-                                                {{ $t('Panels.TemperaturePanel.Min') }}:
-                                                {{ object.measured_min_temp }}°C
-                                            </span>
-                                        </v-tooltip>
-                                        <div v-for="(values, key) of object.additionalSensors" :key="key">
-                                            <span v-if="values.bool" class="d-block">
-                                                <small>{{ values.value }} {{ values.unit }}</small>
-                                            </span>
-                                        </div>
-                                        <div v-if="object.rpm !== null">
-                                            <small :class="object.rpmClass">{{ object.rpm }} RPM</small>
-                                        </div>
-                                    </td>
-                                    <td class="target">
-                                        <temperature-input
-                                            v-if="object.command !== null"
-                                            :name="object.name"
-                                            :target="object.target"
-                                            :presets="object.presets"
-                                            :min_temp="object.min_temp"
-                                            :max_temp="object.max_temp"
-                                            :command="object.command"
-                                            :attribute-name="object.commandAttributeName"></temperature-input>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </v-simple-table>
-                    </template>
-                </responsive>
+                <temperature-panel-list />
             </v-card-text>
             <v-card-text v-if="boolTempchart" class="pa-0 d-inline-block">
                 <v-divider class="mt-0 mb-2" />
@@ -190,7 +96,6 @@ import TemperaturePanelPresets from '@/components/panels/Temperature/Temperature
 })
 export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
     mdiCloseThick = mdiCloseThick
-    mdiCog = mdiCog
     mdiThermometerLines = mdiThermometerLines
 
     convertName = convertName
@@ -268,43 +173,4 @@ export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
 .v-icon._no-focus-style:focus::after {
     opacity: 0 !important;
 }
-
-.temperature-panel-table th,
-.temperature-panel-table td {
-    padding-top: 5px !important;
-    padding-bottom: 5px !important;
-    height: auto !important;
-}
-
-.temperature-panel-table tr:hover {
-    background: none !important;
-}
-
-.temperature-panel-table .icon {
-    width: 24px;
-    padding-right: 0 !important;
-    text-align: center;
-}
-
-.temperature-panel-table .state {
-    width: 100px;
-    text-align: right !important;
-}
-
-.temperature-panel-table .current {
-    width: 100px;
-    text-align: right !important;
-}
-
-.temperature-panel-table .target {
-    width: 140px;
-}
-
-/*
-workaround for fixing a transparency issue
-which is assumingly a vuetify bug
-*/
-._fix_transparency {
-    background-color: #1e1e1e;
-}
 </style>

From 58f4d73d89530d51caad53a4513841503c55b016 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 13 Jul 2023 23:36:19 +0200
Subject: [PATCH 4/8] refactor: WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Temperature/TemperaturePanelList.vue      |   3 +-
 .../Temperature/TemperaturePanelListItem.vue  | 111 +++++++++++++++++-
 src/components/panels/TemperaturePanel.vue    |   6 +-
 3 files changed, 112 insertions(+), 8 deletions(-)

diff --git a/src/components/panels/Temperature/TemperaturePanelList.vue b/src/components/panels/Temperature/TemperaturePanelList.vue
index 74adf7fc5..837feb0f9 100644
--- a/src/components/panels/Temperature/TemperaturePanelList.vue
+++ b/src/components/panels/Temperature/TemperaturePanelList.vue
@@ -24,7 +24,8 @@
                     <temperature-panel-list-item
                         v-for="objectName in tempObjects"
                         :key="objectName"
-                        :object-name="objectName" />
+                        :object-name="objectName"
+                        :is-responsive-mobile="el.is.mobile ?? false" />
                 </tbody>
             </v-simple-table>
         </template>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItem.vue b/src/components/panels/Temperature/TemperaturePanelListItem.vue
index b40810e74..70d756bd2 100644
--- a/src/components/panels/Temperature/TemperaturePanelListItem.vue
+++ b/src/components/panels/Temperature/TemperaturePanelListItem.vue
@@ -1,7 +1,41 @@
 <template>
     <tr>
-        <td class="icon">bla</td>
+        <td class="icon">
+            <v-icon :color="iconColor" :class="iconClass" tabindex="-1">
+                {{ icon }}
+            </v-icon>
+        </td>
         <td class="name">{{ formatName }}</td>
+        <td v-if="!isResponsiveMobile" class="state">
+            <v-tooltip v-if="state !== null" top>
+                <template #activator="{ on, attrs }">
+                    <div v-bind="attrs" v-on="on">{{ state }}</div>
+                </template>
+                <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ avgState }} %</span>
+            </v-tooltip>
+        </td>
+        <td class="current">
+            <v-tooltip top :disabled="!(measured_min_temp !== null || measured_max_temp !== null)">
+                <template #activator="{ on, attrs }">
+                    <span style="cursor: default" v-bind="attrs" v-on="on">
+                        {{ formatTemperature }}
+                    </span>
+                </template>
+                <span>
+                    {{ $t('Panels.TemperaturePanel.Max') }}: {{ measured_max_temp }}°C
+                    <br />
+                    {{ $t('Panels.TemperaturePanel.Min') }}: {{ measured_min_temp }}°C
+                </span>
+            </v-tooltip>
+            <!--            <div v-for="(values, key) of object.additionalSensors" :key="key">
+                                <span v-if="values.bool" class="d-block">
+                                    <small>{{ values.value }} {{ values.unit }}</small>
+                                </span>
+            </div>-->
+            <!--            <div v-if="object.rpm !== null">
+                <small :class="object.rpmClass">{{ object.rpm }} RPM</small>
+            </div>-->
+        </td>
     </tr>
 
     <!--                    <tr v-for="(object, index) in temperatureObjects" :key="index">
@@ -73,10 +107,13 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { convertName } from '@/plugins/helpers'
+import { mdiThermometer } from '@mdi/js'
+import { opacityHeaterActive, opacityHeaterInactive } from '@/store/variables'
 
 @Component
 export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
     @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: Boolean, required: true }) readonly isResponsiveMobile!: boolean
 
     get printerObject() {
         if (!(this.objectName in this.$store.state.printer)) return {}
@@ -94,7 +131,77 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
     get formatName() {
         return convertName(this.name)
     }
+
+    get icon() {
+        return mdiThermometer
+    }
+
+    get iconColor() {
+        let color = this.$store.getters['printer/tempHistory/getDatasetColor'](this.name)
+        if (this.target > 0) return `${color}${opacityHeaterActive}`
+
+        return `${color}${opacityHeaterInactive}`
+    }
+
+    get iconClass() {
+        const classes = ['_no-focus-style', 'cursor-pointer']
+
+        return classes
+    }
+
+    get state() {
+        window.console.log(this.objectName, this.printerObject)
+
+        let state = this.printerObject.power ?? this.printerObject.speed ?? null
+        if (state === null) return null
+        if (state === 0) return 'off'
+
+        return `${Math.round(state) * 100} %`
+    }
+
+    get avgPower() {
+        return Math.round(this.$store.getters['printer/tempHistory/getAvgPower'](this.objectName) ?? 0)
+    }
+
+    get avgSpeed() {
+        return Math.round(this.$store.getters['printer/tempHistory/getAvgSpeed'](this.objectName) ?? 0)
+    }
+
+    get avgState() {
+        if ('power' in this.printerObject) return Math.round((this.avgPower ?? 0) * 100)
+        if ('speed' in this.printerObject) return Math.round((this.avgSpeed ?? 0) * 100)
+
+        return null
+    }
+
+    get temperature() {
+        return this.printerObject?.temperature ?? null
+    }
+
+    get formatTemperature() {
+        return `${this.temperature?.toFixed(1) ?? '--'}°C`
+    }
+
+    get measured_min_temp() {
+        return this.printerObject?.measured_min_temp?.toFixed(1) ?? null
+    }
+
+    get measured_max_temp() {
+        return this.printerObject?.measured_max_temp?.toFixed(1) ?? null
+    }
+
+    get target() {
+        return this.printerObject?.target ?? null
+    }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+::v-deep .v-icon._no-focus-style:focus::after {
+    opacity: 0 !important;
+}
+
+::v-deep .cursor-pointer {
+    cursor: pointer;
+}
+</style>
diff --git a/src/components/panels/TemperaturePanel.vue b/src/components/panels/TemperaturePanel.vue
index 5aa9d755b..ae6b247b5 100644
--- a/src/components/panels/TemperaturePanel.vue
+++ b/src/components/panels/TemperaturePanel.vue
@@ -88,7 +88,7 @@ import TempChart from '@/components/charts/TempChart.vue'
 import TemperatureInput from '@/components/inputs/TemperatureInput.vue'
 import Panel from '@/components/ui/Panel.vue'
 import Responsive from '@/components/ui/Responsive.vue'
-import { mdiCloseThick, mdiCog, mdiThermometerLines } from '@mdi/js'
+import { mdiCloseThick, mdiThermometerLines } from '@mdi/js'
 import TemperaturePanelPresets from '@/components/panels/Temperature/TemperaturePanelPresets.vue'
 
 @Component({
@@ -169,8 +169,4 @@ export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
 .canvasjs-chart-tooltip > div {
     border-radius: 10px !important;
 }
-
-.v-icon._no-focus-style:focus::after {
-    opacity: 0 !important;
-}
 </style>

From 5fe3903979743dd2de0ed14d4cbcc7bf3a9e8b9f Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 16 Jul 2023 21:21:33 +0200
Subject: [PATCH 5/8] refactor: split the TemperaturePanel.vue and remove the
 big getters

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/charts/TempChart.vue           | 245 ++++++--------
 .../Temperature/TemperaturePanelListItem.vue  | 247 +++++++++-----
 ...mperaturePanelListItemAdditionalSensor.vue |  34 ++
 ...turePanelListItemAdditionalSensorValue.vue |  70 ++++
 .../TemperaturePanelListItemEdit.vue          |  93 ++++++
 ...aturePanelListItemEditAdditionalSensor.vue |  40 +++
 ...TemperaturePanelListItemEditChartSerie.vue |  42 +++
 .../Temperature/TemperaturePanelSettings.vue  |   2 -
 src/components/panels/TemperaturePanel.vue    | 157 +--------
 src/store/gui/actions.ts                      |  37 ++
 src/store/gui/getters.ts                      |   7 +-
 src/store/gui/mutations.ts                    |  39 +++
 src/store/printer/getters.ts                  | 316 +-----------------
 src/store/printer/tempHistory/actions.ts      | 252 +++++++-------
 src/store/printer/tempHistory/getters.ts      |  66 ++--
 15 files changed, 801 insertions(+), 846 deletions(-)
 create mode 100644 src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
 create mode 100644 src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
 create mode 100644 src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
 create mode 100644 src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
 create mode 100644 src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue

diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index bb4c994a5..ea69062c9 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -14,11 +14,12 @@ import { convertName } from '@/plugins/helpers'
 import Component from 'vue-class-component'
 import { Mixins, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
-import { PrinterTempHistoryStateSerie, PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
+import { PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
 
 import type { ECharts } from 'echarts/core'
 import type { ECBasicOption } from 'echarts/types/dist/shared.d'
 import { mdiClock } from '@mdi/js'
+import { datasetTypesInPercents } from '@/store/variables'
 
 interface echartsTooltipObj {
     [key: string]: any
@@ -33,11 +34,51 @@ export default class TempChart extends Mixins(BaseMixin) {
     }
 
     private isVisible = true
-    public chartOptions: ECBasicOption = {
-        darkMode: true,
-        renderer: 'svg',
-        animation: false,
-        tooltip: {
+    get chartOptions(): ECBasicOption {
+        return {
+            darkMode: true,
+            renderer: 'svg',
+            animation: false,
+            tooltip: this.tooltip,
+            grid: {
+                top: 35,
+                right: this.gridRight,
+                bottom: 30,
+                left: 25,
+            },
+            legend: {
+                animation: false,
+                show: false,
+                selected: this.selectedLegends,
+            },
+            /*dataZoom: [{
+                type: 'inside',
+            }],*/
+            xAxis: {
+                type: 'time',
+                splitNumber: 5,
+                minInterval: 60 * 1000,
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.06)',
+                    },
+                },
+                axisLabel: {
+                    color: 'rgba(255, 255, 255, 0.24)',
+                    margin: 10,
+                    formatter: this.timeFormat,
+                },
+            },
+            yAxis: this.yAxis,
+            media: this.media,
+            dataset: { source: this.source },
+            series: this.series,
+        }
+    }
+
+    get tooltip() {
+        return {
             animation: false,
             trigger: 'axis',
             backgroundColor: 'rgba(0,0,0,0.9)',
@@ -57,38 +98,11 @@ export default class TempChart extends Mixins(BaseMixin) {
                 obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
                 return obj
             },
-        },
-        grid: {
-            top: 35,
-            right: 15,
-            bottom: 30,
-            left: 25,
-        },
-        legend: {
-            animation: false,
-            show: false,
-            selected: {},
-        },
-        /*dataZoom: [{
-            type: 'inside',
-        }],*/
-        xAxis: {
-            type: 'time',
-            splitNumber: 5,
-            minInterval: 60 * 1000,
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.06)',
-                },
-            },
-            axisLabel: {
-                color: 'rgba(255, 255, 255, 0.24)',
-                margin: 10,
-                formatter: this.timeFormat,
-            },
-        },
-        yAxis: [
+        }
+    }
+
+    get yAxis() {
+        return [
             {
                 name: this.$t('Panels.TemperaturePanel.TemperaturesInChart'),
                 type: 'value',
@@ -158,15 +172,18 @@ export default class TempChart extends Mixins(BaseMixin) {
                     },
                 },
             },
-        ],
-        media: [
+        ]
+    }
+
+    get media() {
+        return [
             {
                 query: {
                     minWidth: 500,
                 },
                 option: {
                     grid: {
-                        right: 15,
+                        right: this.optionGridRight,
                         left: 40,
                     },
                     yAxis: [
@@ -188,11 +205,7 @@ export default class TempChart extends Mixins(BaseMixin) {
                     ],
                 },
             },
-        ],
-        dataset: {
-            source: [],
-        },
-        series: [],
+        ]
     }
 
     get chart(): ECharts | null {
@@ -241,85 +254,34 @@ export default class TempChart extends Mixins(BaseMixin) {
         }
     }
 
-    mounted() {
-        this.initChart()
-        this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
-    }
-
-    beforeDestroy() {
-        if (typeof window === 'undefined') return
-        if (this.chart) this.chart.dispose()
-    }
+    get gridRight() {
+        if (this.boolDisplayPwmAxis) return 25
 
-    initChart() {
-        this.chartOptions.series = this.series
-        this.chartOptions.legend.selected = this.selectedLegends
-        this.updateChartPwmAxis()
+        return 15
     }
 
-    updateChart() {
-        if (this.chart && this.isVisible) {
-            //const t0 = performance.now()
-            const limitDate = new Date(Date.now() - this.maxHistory * 1000)
-            let newSource = [...this.source].filter((entry: PrinterTempHistoryStateSourceEntry) => {
-                return entry.date >= limitDate
-            })
+    get optionGridRight() {
+        if (this.boolDisplayPwmAxis) return 35
 
-            this.chart?.setOption(
-                {
-                    dataset: {
-                        source: newSource,
-                    },
-                },
-                false,
-                true
-            )
-
-            //const t1 = performance.now()
-            //window.console.debug('calc chart', (t1-t0).toFixed(), newSource.length, this.source.length)
-
-            // reset tempHistory if working sources are smaller than 80%
-            if (this.source.length > 0 && newSource.length < this.maxHistory * 0.8) {
-                this.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
-            }
-        }
+        return 15
     }
 
-    updateChartPwmAxis() {
-        if (this.boolDisplayPwmAxis) {
-            this.chartOptions.yAxis[1].show = true
-            this.chartOptions.grid.right = 25
-            this.chartOptions.media[0].option.grid.right = 35
-        } else {
-            this.chartOptions.yAxis[1].show = false
-            this.chartOptions.grid.right = 15
-            this.chartOptions.media[0].option.grid.right = 15
-        }
+    beforeDestroy() {
+        if (typeof window === 'undefined') return
+        if (this.chart) this.chart.dispose()
     }
 
     visibilityChanged(isVisible: boolean) {
         this.isVisible = isVisible
-
-        if (isVisible) {
-            this.initChart()
-        }
     }
 
     tooltipFormatter(datasets: any) {
         let output = ''
 
-        const mainDatasets = datasets.filter((dataset: any) => {
-            if (dataset.seriesName === 'date') return false
-
-            const lastIndex = dataset.seriesName.lastIndexOf('-')
-            if (lastIndex === -1) return true
-
-            const suffix = dataset.seriesName.slice(lastIndex + 1)
-            return !['target', 'power', 'speed'].includes(suffix)
-        })
+        const mainDatasets = datasets.filter((dataset: any) => dataset.seriesName.endsWith('-temperature'))
         if (datasets.length) {
             let outputTime = datasets[0]['axisValueLabel']
-            outputTime = outputTime.substr(outputTime.indexOf(' '))
+            outputTime = outputTime.substring(outputTime.indexOf(' '))
 
             output +=
                 '<div class="row">' +
@@ -338,24 +300,35 @@ export default class TempChart extends Mixins(BaseMixin) {
         }
 
         mainDatasets.forEach((dataset: any) => {
+            const baseSeriesName = dataset.seriesName.substring(0, dataset.seriesName.lastIndexOf('-'))
+            let displayName = baseSeriesName
+            if (displayName.indexOf(' ') !== -1) {
+                displayName = displayName.substring(displayName.indexOf(' ') + 1)
+            }
+
             output += '<div class="row">'
 
             output += '<div class="col-auto py-0">'
             output += dataset.marker
-            output += "<span class='ml-2'>" + convertName(dataset.seriesName) + ':</span>'
+            output += "<span class='ml-2'>" + convertName(displayName) + ':</span>'
             output += '</div>'
 
             output += '<div class="col text-right py-0 font-weight-bold">'
 
-            if (dataset.seriesName in dataset.value) output += dataset.value[dataset.seriesName].toFixed(1)
-            if (dataset.seriesName + '-target' in dataset.value)
-                output += ' / ' + dataset.value[dataset.seriesName + '-target'].toFixed(1)
+            const seriesNameTemperature = `${baseSeriesName}-temperature`
+            const seriesNameTarget = `${baseSeriesName}-target`
+
+            if (seriesNameTemperature in dataset.value) output += dataset.value[seriesNameTemperature].toFixed(1)
+            if (seriesNameTarget in dataset.value) output += ' / ' + dataset.value[seriesNameTarget].toFixed(1)
             output += '°C'
 
-            if (dataset.seriesName + '-power' in dataset.value)
-                output += ' [ ' + (dataset.value[dataset.seriesName + '-power'] * 100).toFixed(0) + '% ]'
-            if (dataset.seriesName + '-speed' in dataset.value)
-                output += ' [ ' + (dataset.value[dataset.seriesName + '-speed'] * 100).toFixed(0) + '% ]'
+            datasetTypesInPercents.forEach((attrKey) => {
+                const seriesName = `${baseSeriesName}-${attrKey}`
+                if (!(seriesName in dataset.value)) return
+
+                const value = (dataset.value[seriesName] * 100).toFixed(0)
+                output += ` [ ${value}% ]`
+            })
 
             output += '</div>'
             output += '</div>'
@@ -364,26 +337,6 @@ export default class TempChart extends Mixins(BaseMixin) {
         return output
     }
 
-    @Watch('series', { deep: true })
-    seriesChanged(newVal: PrinterTempHistoryStateSerie[]) {
-        if (this.chart && this.chart?.isDisposed() !== true) {
-            this.chart.setOption(
-                {
-                    series: newVal,
-                },
-                false,
-                true
-            )
-        }
-    }
-
-    @Watch('source')
-    sourceChanged() {
-        if (this.chart?.isDisposed() !== true) {
-            this.updateChart()
-        }
-    }
-
     @Watch('selectedLegends')
     selectedLegendsChanged(newVal: any, oldVal: any) {
         if (this.chart?.isDisposed() !== true) {
@@ -396,14 +349,20 @@ export default class TempChart extends Mixins(BaseMixin) {
         }
     }
 
-    @Watch('boolDisplayPwmAxis')
-    boolDisplayPwmAxisChanged() {
-        this.updateChartPwmAxis()
-    }
+    @Watch('source')
+    sourceChanged(newVal: PrinterTempHistoryStateSourceEntry[]) {
+        // break if chart isn't initialized or not visible
+        if (!this.chart || !this.isVisible) return
+
+        const limitDate = new Date(Date.now() - this.maxHistory * 1000)
+        let newSource = newVal.filter((entry: PrinterTempHistoryStateSourceEntry) => {
+            return entry.date >= limitDate
+        })
 
-    @Watch('hours12Format')
-    hours12FormatChanged() {
-        this.chartOptions.xAxis.axisLabel.formatter = this.timeFormat
+        // reset tempHistory if working sources are smaller than 80%
+        if (newVal.length > 0 && newSource.length < this.maxHistory * 0.8) {
+            this.$socket.emit('server.temperature_store', {}, { action: 'printer/tempHistory/init' })
+        }
     }
 }
 </script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItem.vue b/src/components/panels/Temperature/TemperaturePanelListItem.vue
index 70d756bd2..ca7c16542 100644
--- a/src/components/panels/Temperature/TemperaturePanelListItem.vue
+++ b/src/components/panels/Temperature/TemperaturePanelListItem.vue
@@ -1,15 +1,17 @@
 <template>
     <tr>
         <td class="icon">
-            <v-icon :color="iconColor" :class="iconClass" tabindex="-1">
+            <v-icon :color="iconColor" :class="iconClass" tabindex="-1" @click="showEditDialog = true">
                 {{ icon }}
             </v-icon>
         </td>
-        <td class="name">{{ formatName }}</td>
+        <td class="name">
+            <span @click="showEditDialog = true">{{ formatName }}</span>
+        </td>
         <td v-if="!isResponsiveMobile" class="state">
             <v-tooltip v-if="state !== null" top>
                 <template #activator="{ on, attrs }">
-                    <div v-bind="attrs" v-on="on">{{ state }}</div>
+                    <div v-bind="attrs" v-on="on">{{ formatState }}</div>
                 </template>
                 <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ avgState }} %</span>
             </v-tooltip>
@@ -27,79 +29,35 @@
                     {{ $t('Panels.TemperaturePanel.Min') }}: {{ measured_min_temp }}°C
                 </span>
             </v-tooltip>
-            <!--            <div v-for="(values, key) of object.additionalSensors" :key="key">
-                                <span v-if="values.bool" class="d-block">
-                                    <small>{{ values.value }} {{ values.unit }}</small>
-                                </span>
-            </div>-->
-            <!--            <div v-if="object.rpm !== null">
-                <small :class="object.rpmClass">{{ object.rpm }} RPM</small>
-            </div>-->
+            <div v-if="rpm !== null">
+                <small :class="rpmClass">{{ rpm }} RPM</small>
+            </div>
+            <temperature-panel-list-item-additional-sensor
+                v-if="additionalSensorName"
+                :object-name="objectName"
+                :additional-object-name="additionalSensorName" />
+        </td>
+        <td class="target">
+            <temperature-input
+                v-if="command !== null"
+                :name="name"
+                :target="target"
+                :presets="presets"
+                :min_temp="min_temp"
+                :max_temp="max_temp"
+                :command="command"
+                :attribute-name="commandAttributeName" />
         </td>
+        <temperature-panel-list-item-edit
+            :bool-show="showEditDialog"
+            :object-name="objectName"
+            :name="name"
+            :format-name="formatName"
+            :additional-sensor-name="additionalSensorName"
+            :icon="icon"
+            :color="color"
+            @close-dialog="showEditDialog = false" />
     </tr>
-
-    <!--                    <tr v-for="(object, index) in temperatureObjects" :key="index">
-                        <td class="icon">
-                            <v-icon
-                                :color="object.iconColor"
-                                :class="`_no-focus-style ${object.iconClass}`"
-                                style="cursor: pointer"
-                                tabindex="-1"
-                                @click="openHeater(object)">
-                                {{ object.icon }}
-                            </v-icon>
-                        </td>
-                        <td class="name">
-                            <span style="cursor: pointer" @click="openHeater(object)">
-                                {{ convertName(object.name) }}
-                            </span>
-                        </td>
-                        <td v-if="!el.is.mobile" class="state">
-                            <v-tooltip v-if="object.state !== null" top>
-                                <template #activator="{ on, attrs }">
-                                    <div v-bind="attrs" v-on="on">
-                                        {{ object.state }}
-                                    </div>
-                                </template>
-                                <span>{{ $t('Panels.TemperaturePanel.Avg') }}: {{ object.avgState }}</span>
-                            </v-tooltip>
-                        </td>
-                        <td class="current">
-                            <v-tooltip
-                                top
-                                :disabled="!(object.measured_min_temp !== null || object.measured_max_temp !== null)">
-                                <template #activator="{ on, attrs }">
-                                    <span style="cursor: default" v-bind="attrs" v-on="on">
-                                        {{ object.temperature.toFixed(1) }}°C
-                                    </span>
-                                </template>
-                                <span>
-                                    {{ $t('Panels.TemperaturePanel.Max') }}: {{ object.measured_max_temp }}°C
-                                    <br />
-                                    {{ $t('Panels.TemperaturePanel.Min') }}: {{ object.measured_min_temp }}°C
-                                </span>
-                            </v-tooltip>
-                            <div v-for="(values, key) of object.additionalSensors" :key="key">
-                                <span v-if="values.bool" class="d-block">
-                                    <small>{{ values.value }} {{ values.unit }}</small>
-                                </span>
-                            </div>
-                            <div v-if="object.rpm !== null">
-                                <small :class="object.rpmClass">{{ object.rpm }} RPM</small>
-                            </div>
-                        </td>
-                        <td class="target">
-                            <temperature-input
-                                v-if="object.command !== null"
-                                :name="object.name"
-                                :target="object.target"
-                                :presets="object.presets"
-                                :min_temp="object.min_temp"
-                                :max_temp="object.max_temp"
-                                :command="object.command"
-                                :attribute-name="object.commandAttributeName" />
-                        </td>
-                    </tr>-->
 </template>
 
 <script lang="ts">
@@ -107,20 +65,36 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { convertName } from '@/plugins/helpers'
-import { mdiThermometer } from '@mdi/js'
-import { opacityHeaterActive, opacityHeaterInactive } from '@/store/variables'
+import {
+    mdiFan,
+    mdiFire,
+    mdiPrinter3dNozzle,
+    mdiPrinter3dNozzleAlert,
+    mdiRadiator,
+    mdiRadiatorDisabled,
+    mdiThermometer,
+} from '@mdi/js'
+import { additionalSensors, opacityHeaterActive, opacityHeaterInactive } from '@/store/variables'
 
 @Component
 export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
     @Prop({ type: String, required: true }) readonly objectName!: string
     @Prop({ type: Boolean, required: true }) readonly isResponsiveMobile!: boolean
 
+    showEditDialog = false
+
     get printerObject() {
         if (!(this.objectName in this.$store.state.printer)) return {}
 
         return this.$store.state.printer[this.objectName]
     }
 
+    get printerObjectSettings() {
+        if (!(this.objectName in (this.$store.state.printer?.configfile?.settings ?? {}))) return {}
+
+        return this.$store.state.printer?.configfile?.settings[this.objectName]
+    }
+
     get name() {
         const splits = this.objectName.split(' ')
         if (splits.length === 1) return this.objectName
@@ -133,48 +107,88 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
     }
 
     get icon() {
+        // handle extruder icons
+        if (this.objectName.startsWith('extruder')) {
+            if (this.printerObject.can_extrude ?? false) return mdiPrinter3dNozzle
+
+            return mdiPrinter3dNozzleAlert
+        }
+
+        // show heater_bed icon
+        if (this.objectName === 'heater_bed') {
+            if (
+                (this.temperature !== null && this.temperature > 50) ||
+                (this.target && this.temperature && this.temperature > this.target - 5)
+            )
+                return mdiRadiator
+
+            return mdiRadiatorDisabled
+        }
+
+        // show heater_generic icon
+        if (this.objectName.startsWith('heater_generic')) return mdiFire
+
+        // show fan icon, if it is a fan
+        if (this.isFan) return mdiFan
+
         return mdiThermometer
     }
 
+    get color() {
+        return this.$store.getters['printer/tempHistory/getDatasetColor'](this.objectName)
+    }
+
     get iconColor() {
-        let color = this.$store.getters['printer/tempHistory/getDatasetColor'](this.name)
-        if (this.target > 0) return `${color}${opacityHeaterActive}`
+        // set icon color to active, if no target exists (temperature_sensors) or a heater is active
+        if (this.target === null || this.target > 0) return `${this.color}${opacityHeaterActive}`
 
-        return `${color}${opacityHeaterInactive}`
+        return `${this.color}${opacityHeaterInactive}`
     }
 
     get iconClass() {
         const classes = ['_no-focus-style', 'cursor-pointer']
 
+        // add icon animation, when it is a fan and state > 0
+        if (this.isFan) {
+            const disableFanAnimation = this.$store.state.gui?.uiSettings.disableFanAnimation ?? false
+
+            if (!disableFanAnimation && (this.state ?? 0) > 0) classes.push('icon-rotate')
+        }
+
         return classes
     }
 
-    get state() {
-        window.console.log(this.objectName, this.printerObject)
+    get isFan() {
+        return this.objectName.startsWith('temperature_fan')
+    }
 
-        let state = this.printerObject.power ?? this.printerObject.speed ?? null
-        if (state === null) return null
-        if (state === 0) return 'off'
+    get state(): number | null {
+        return this.printerObject.power ?? this.printerObject.speed ?? null
+    }
+
+    get formatState() {
+        if (this.state === null) return null
+        if (this.target === 0 && this.state === 0) return 'off'
 
-        return `${Math.round(state) * 100} %`
+        return `${Math.round(this.state * 100)} %`
     }
 
     get avgPower() {
-        return Math.round(this.$store.getters['printer/tempHistory/getAvgPower'](this.objectName) ?? 0)
+        return this.$store.getters['printer/tempHistory/getAvgPower'](this.name) ?? 0
     }
 
     get avgSpeed() {
-        return Math.round(this.$store.getters['printer/tempHistory/getAvgSpeed'](this.objectName) ?? 0)
+        return this.$store.getters['printer/tempHistory/getAvgSpeed'](this.name) ?? 0
     }
 
     get avgState() {
-        if ('power' in this.printerObject) return Math.round((this.avgPower ?? 0) * 100)
-        if ('speed' in this.printerObject) return Math.round((this.avgSpeed ?? 0) * 100)
+        if ('power' in this.printerObject) return Math.round(this.avgPower)
+        if ('speed' in this.printerObject) return Math.round(this.avgSpeed)
 
         return null
     }
 
-    get temperature() {
+    get temperature(): number | null {
         return this.printerObject?.temperature ?? null
     }
 
@@ -182,6 +196,14 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
         return `${this.temperature?.toFixed(1) ?? '--'}°C`
     }
 
+    get min_temp() {
+        return parseInt(this.printerObjectSettings.min_temp ?? 0)
+    }
+
+    get max_temp() {
+        return parseInt(this.printerObjectSettings.max_temp ?? 0)
+    }
+
     get measured_min_temp() {
         return this.printerObject?.measured_min_temp?.toFixed(1) ?? null
     }
@@ -193,6 +215,51 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
     get target() {
         return this.printerObject?.target ?? null
     }
+
+    get additionalSensorName() {
+        if (this.objectName === 'z_thermal_adjust') return 'z_thermal_adjust'
+
+        const additionalSensorName = additionalSensors.find((sensorName) => {
+            const objectName = `${sensorName} ${this.name}`
+
+            if (objectName in this.$store.state.printer) return true
+        })
+
+        if (!additionalSensorName) return null
+
+        return `${additionalSensorName} ${this.name}`
+    }
+
+    get rpm() {
+        if (!('rpm' in this.printerObject)) return null
+
+        return parseInt(this.printerObject.rpm)
+    }
+
+    get rpmClass() {
+        if (this.rpm === 0 && (this.printerObject.speed ?? 0) > 0) return 'red--text'
+
+        return ''
+    }
+
+    get presets() {
+        return this.$store.getters['gui/presets/getPresetsFromHeater']({ name: this.objectName }) ?? []
+    }
+
+    get command() {
+        if (this.objectName.startsWith('temperature_fan')) return 'SET_TEMPERATURE_FAN_TARGET'
+        if (this.objectName.startsWith('extruder') || this.objectName.startsWith('heater_'))
+            return 'SET_HEATER_TEMPERATURE'
+
+        return null
+    }
+
+    get commandAttributeName() {
+        if (this.command === 'SET_HEATER_TEMPERATURE') return 'HEATER'
+        if (this.command === 'SET_TEMPERATURE_FAN_TARGET') return 'TEMPERATURE_FAN'
+
+        return ''
+    }
 }
 </script>
 
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
new file mode 100644
index 000000000..40f1afd7e
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensor.vue
@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <temperature-panel-list-item-additional-sensor-value
+            v-for="keyName of additionalValues"
+            :key="keyName"
+            :printer-object="printerObject"
+            :object-name="objectName"
+            :key-name="keyName" />
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemAdditionalSensor extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly additionalObjectName!: string
+
+    get printerObject() {
+        if (!(this.additionalObjectName in this.$store.state.printer)) return {}
+
+        return this.$store.state.printer[this.additionalObjectName]
+    }
+
+    get additionalValues() {
+        if (this.objectName === 'z_thermal_adjust') return ['current_z_adjust']
+
+        return Object.keys(this.printerObject).filter((key) => key !== 'temperature')
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
new file mode 100644
index 000000000..aadc033b1
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue
@@ -0,0 +1,70 @@
+<template>
+    <div v-if="isVisible">
+        <small>{{ formatValue }}</small>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemAdditionalSensorValue extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly printerObject!: { [key: string]: number }
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly keyName!: string
+
+    get value() {
+        const value = this.printerObject[this.keyName] ?? null
+        if (isNaN(value)) return null
+
+        return value
+    }
+
+    get formatValue() {
+        let value = this.value?.toFixed(1)
+        if (this.value === null) value = '--'
+
+        // get unit
+        let unit: string | null = null
+        switch (this.keyName) {
+            case 'pressure':
+                unit = 'hPa'
+                break
+            case 'humidity':
+                unit = '%'
+                break
+            case 'current_z_adjust':
+                unit = 'mm'
+                break
+        }
+
+        // format value for current_z_adjust
+        if (this.keyName === 'current_z_adjust' && this.value) {
+            value = this.value.toFixed(3)
+
+            // convert z_adjust value if it is smaller than 0.1 to μm
+            if (Math.abs(this.value) < 0.1) {
+                value = Math.round(this.value * 1000).toString()
+                unit = 'μm'
+            }
+        }
+
+        return unit ? `${value} ${unit}` : value
+    }
+
+    get guiSetting() {
+        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+            name: this.objectName,
+            sensor: this.keyName,
+        })
+    }
+
+    get isVisible() {
+        if (this.value === null) return false
+
+        return this.guiSetting
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
new file mode 100644
index 000000000..ed96dfe05
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
@@ -0,0 +1,93 @@
+<template>
+    <v-dialog v-model="boolShow" persistent :width="400">
+        <panel :title="formatName" :icon="icon" card-class="temperature-edit-heater-dialog" :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closeDialog">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text class="pt-6">
+                <temperature-panel-list-item-edit-chart-serie
+                    v-for="dataset in chartSeries"
+                    :key="dataset"
+                    :object-name="objectName"
+                    :serie-name="dataset" />
+                <temperature-panel-list-item-edit-additional-sensor
+                    v-for="additionalSensor in additionalValues"
+                    :key="additionalSensor"
+                    :object-name="objectName"
+                    :additional-sensor="additionalSensor" />
+                <v-row>
+                    <v-col class="col-12 text-center pb-0">
+                        <v-color-picker
+                            hide-mode-switch
+                            mode="hexa"
+                            :value="color"
+                            class="mx-auto"
+                            @update:color="setChartColor" />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiCloseThick } from '@mdi/js'
+import TemperaturePanelListItemEditChartSerie from '@/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue'
+import TemperaturePanelListItemEditAdditionalSensor from '@/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue'
+import { Debounce } from 'vue-debounce-decorator'
+
+@Component({
+    components: { TemperaturePanelListItemEditAdditionalSensor, TemperaturePanelListItemEditChartSerie },
+})
+export default class TemperaturePanelListItemEdit extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ type: Boolean, required: true }) readonly boolShow!: boolean
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly name!: string
+    @Prop({ required: true }) readonly additionalSensorName!: string | null
+    @Prop({ type: String, required: true }) readonly formatName!: string
+    @Prop({ type: String, required: true }) readonly icon!: string
+    @Prop({ type: String, required: true }) readonly color!: string
+
+    get chartSeries() {
+        return this.$store.getters['printer/tempHistory/getSerieNames'](this.objectName) ?? []
+    }
+
+    get printerObjectAdditionalSensor() {
+        if (this.additionalSensorName === null || !(this.additionalSensorName in this.$store.state.printer)) return {}
+
+        return this.$store.state.printer[this.additionalSensorName]
+    }
+
+    get additionalValues() {
+        if (this.objectName === 'z_thermal_adjust') return ['current_z_adjust']
+
+        return Object.keys(this.printerObjectAdditionalSensor).filter((key) => key !== 'temperature')
+    }
+
+    @Debounce(500)
+    setChartColor(value: string | any): void {
+        if (typeof value === 'object' && 'hex' in value) value = value.hex
+
+        this.$store.dispatch('gui/setChartColor', {
+            objectName: this.objectName,
+            value,
+        })
+
+        this.$store.dispatch('printer/tempHistory/setColor', { name: this.objectName, value })
+
+        /*const name = 'view.tempchart.datasetSettings.' + this.objectName + '.color'
+        this.$store.dispatch('gui/saveSetting', { name, value })*/
+    }
+
+    closeDialog() {
+        this.$emit('close-dialog')
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue b/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
new file mode 100644
index 000000000..1c9d110bd
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue
@@ -0,0 +1,40 @@
+<template>
+    <v-row>
+        <v-col class="col-12 py-1">
+            <v-checkbox v-model="value" :label="label" hide-details class="mt-0" />
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemEditAdditionalSensor extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly additionalSensor!: string
+
+    get value() {
+        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+            name: this.objectName,
+            type: this.additionalSensor,
+        })
+    }
+
+    set value(newVal) {
+        this.$store.dispatch('gui/setDatasetAdditionalSensorStatus', {
+            objectName: this.objectName,
+            dataset: this.additionalSensor,
+            value: newVal,
+        })
+    }
+
+    get label() {
+        return this.$t('Panels.TemperaturePanel.ShowNameInList', {
+            name: this.additionalSensor,
+        })
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue b/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue
new file mode 100644
index 000000000..ddfbea12f
--- /dev/null
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue
@@ -0,0 +1,42 @@
+<template>
+    <v-row>
+        <v-col class="py-1">
+            <v-checkbox v-model="value" :label="label" hide-details class="mt-0" />
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { capitalize } from '@/plugins/helpers'
+
+@Component
+export default class TemperaturePanelListItemEditChartSerie extends Mixins(BaseMixin) {
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly serieName!: string
+
+    get value() {
+        return this.$store.getters['gui/getDatasetValue']({ name: this.objectName, type: this.serieName })
+    }
+
+    get label() {
+        return this.$t('Panels.TemperaturePanel.ShowNameInChart', {
+            name: this.formatSerieName,
+        })
+    }
+
+    set value(newVal) {
+        this.$store.dispatch('gui/setChartDatasetStatus', {
+            objectName: this.objectName,
+            dataset: this.serieName,
+            value: newVal,
+        })
+    }
+
+    get formatSerieName() {
+        return capitalize(this.serieName)
+    }
+}
+</script>
diff --git a/src/components/panels/Temperature/TemperaturePanelSettings.vue b/src/components/panels/Temperature/TemperaturePanelSettings.vue
index df1a73be7..ad9cfc8a8 100644
--- a/src/components/panels/Temperature/TemperaturePanelSettings.vue
+++ b/src/components/panels/Temperature/TemperaturePanelSettings.vue
@@ -51,5 +51,3 @@ export default class TemperaturePanelSettings extends Mixins(BaseMixin) {
     }
 }
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/panels/TemperaturePanel.vue b/src/components/panels/TemperaturePanel.vue
index ae6b247b5..4acf4e9e8 100644
--- a/src/components/panels/TemperaturePanel.vue
+++ b/src/components/panels/TemperaturePanel.vue
@@ -1,87 +1,28 @@
 <template>
-    <div>
-        <panel
-            v-if="klipperReadyForGui"
-            :icon="mdiThermometerLines"
-            :title="$t('Panels.TemperaturePanel.Headline')"
-            :collapsible="true"
-            card-class="temperature-panel">
-            <!-- PRESET MENU -->
-            <template #buttons>
-                <temperature-panel-presets />
-                <temperature-panel-settings />
+    <panel
+        v-if="klipperReadyForGui"
+        :icon="mdiThermometerLines"
+        :title="$t('Panels.TemperaturePanel.Headline')"
+        :collapsible="true"
+        card-class="temperature-panel">
+        <template #buttons>
+            <temperature-panel-presets />
+            <temperature-panel-settings />
+        </template>
+        <v-card-text class="pa-0">
+            <temperature-panel-list />
+            <template v-if="boolTempchart">
+                <v-divider class="my-0" />
+                <temp-chart />
             </template>
-            <v-card-text class="pa-0">
-                <temperature-panel-list />
-            </v-card-text>
-            <v-card-text v-if="boolTempchart" class="pa-0 d-inline-block">
-                <v-divider class="mt-0 mb-2" />
-                <v-row>
-                    <v-col class="py-0">
-                        <temp-chart />
-                    </v-col>
-                </v-row>
-            </v-card-text>
-        </panel>
-        <!-- COLOR-PICKER -->
-        <v-dialog v-model="editHeater.bool" persistent :width="400">
-            <panel
-                :title="convertName(editHeater.name)"
-                :icon="editHeater.icon"
-                card-class="temperature-edit-heater-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="editHeater.bool = false">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text class="pt-6">
-                    <v-row v-for="dataset in editHeater.chartSeries" :key="dataset">
-                        <v-col class="col-12 py-1">
-                            <v-checkbox
-                                v-model="editHeater['bool' + dataset.charAt(0).toUpperCase() + dataset.slice(1)]"
-                                :label="
-                                    $t('Panels.TemperaturePanel.ShowNameInChart', {
-                                        name: $t(`Panels.TemperaturePanel.Dataset.${capitalize(dataset)}`),
-                                    })
-                                "
-                                hide-details
-                                class="mt-0"
-                                @change="setVisible(dataset)"></v-checkbox>
-                        </v-col>
-                    </v-row>
-                    <v-row v-for="additionalSensor in editHeater.additionalSensors" :key="additionalSensor.name">
-                        <v-col class="col-12 py-1">
-                            <v-checkbox
-                                v-model="additionalSensor.bool"
-                                :label="$t('Panels.TemperaturePanel.ShowNameInList', { name: additionalSensor.name })"
-                                hide-details
-                                class="mt-0"
-                                @change="setVisibleAdditionalSensor(additionalSensor)"></v-checkbox>
-                        </v-col>
-                    </v-row>
-                    <v-row>
-                        <v-col class="col-12 text-center pb-0">
-                            <v-color-picker
-                                hide-mode-switch
-                                mode="hexa"
-                                :value="editHeater.color"
-                                class="mx-auto"
-                                @update:color="setChartColor" />
-                        </v-col>
-                    </v-row>
-                </v-card-text>
-            </panel>
-        </v-dialog>
-    </div>
+        </v-card-text>
+    </panel>
 </template>
 
 <script lang="ts">
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import { capitalize, convertName } from '@/plugins/helpers'
-import { Debounce } from 'vue-debounce-decorator'
-import { PrinterStateAdditionalSensor, PrinterStateTemperatureObject } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
 import TempChart from '@/components/charts/TempChart.vue'
@@ -101,72 +42,8 @@ export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
     convertName = convertName
     capitalize = capitalize
 
-    private editHeater: any = {
-        bool: false,
-        name: '',
-        icon: '',
-        boolTemperature: false,
-        boolTarget: false,
-        boolPower: false,
-        boolSpeed: false,
-        additionalSensors: {},
-        color: '',
-    }
-
     get boolTempchart(): boolean {
         return this.$store.state.gui.view.tempchart.boolTempchart ?? false
     }
-
-    get temperatureObjects() {
-        const sensors = this.$store.getters['printer/getTemperatureObjects'] ?? []
-
-        return sensors.filter((sensor: PrinterStateTemperatureObject) => !sensor.name.startsWith('_'))
-    }
-
-    openHeater(object: PrinterStateTemperatureObject): void {
-        this.editHeater.name = object.name
-        this.editHeater.icon = object.icon
-
-        this.editHeater.color = object.chartColor
-        this.editHeater.chartSeries = 'chartSeries' in object ? object.chartSeries : []
-        this.editHeater.boolTemperature = this.$store.getters['gui/getDatasetValue']({
-            name: object.name,
-            type: 'temperature',
-        })
-        this.editHeater.boolTarget = this.$store.getters['gui/getDatasetValue']({ name: object.name, type: 'target' })
-        this.editHeater.boolPower = this.$store.getters['gui/getDatasetValue']({ name: object.name, type: 'power' })
-        this.editHeater.boolSpeed = this.$store.getters['gui/getDatasetValue']({ name: object.name, type: 'speed' })
-        this.editHeater.additionalSensors = object.additionalSensors
-
-        this.editHeater.bool = true
-    }
-
-    setVisible(type: string): void {
-        const serieName = 'bool' + type.charAt(0).toUpperCase() + type.slice(1)
-        const value = this.editHeater[serieName]
-
-        const name = 'view.tempchart.datasetSettings.' + this.editHeater.name + '.' + type
-        this.$store.dispatch('gui/saveSetting', { name, value })
-    }
-
-    setVisibleAdditionalSensor(sensor: PrinterStateAdditionalSensor): void {
-        const name = 'view.tempchart.datasetSettings.' + this.editHeater.name + '.additionalSensors.' + sensor.name
-        this.$store.dispatch('gui/saveSetting', { name, value: sensor.bool })
-    }
-
-    @Debounce(500)
-    setChartColor(value: string | any): void {
-        if (typeof value === 'object' && 'hex' in value) value = value.hex
-        this.$store.commit('printer/tempHistory/setColor', { name: this.editHeater.name, value: value })
-
-        const name = 'view.tempchart.datasetSettings.' + this.editHeater.name + '.color'
-        this.$store.dispatch('gui/saveSetting', { name, value })
-    }
 }
 </script>
-
-<style scoped>
-.canvasjs-chart-tooltip > div {
-    border-radius: 10px !important;
-}
-</style>
diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts
index b5ed974c3..e8070a9c0 100644
--- a/src/store/gui/actions.ts
+++ b/src/store/gui/actions.ts
@@ -468,4 +468,41 @@ export const actions: ActionTree<GuiState, RootState> = {
     announcementDismissFlag(_, payload) {
         window.console.log(payload)
     },
+
+    setChartDatasetStatus(
+        { commit, dispatch, state },
+        payload: { objectName: string; dataset: string; value: boolean }
+    ) {
+        commit('setChartDatasetStatus', payload)
+
+        dispatch('updateSettings', {
+            keyName: 'view.tempchart.datasetSettings',
+            newVal: state.view.tempchart.datasetSettings,
+        })
+    },
+
+    setDatasetAdditionalSensorStatus(
+        { commit, dispatch, state },
+        payload: { objectName: string; dataset: string; value: boolean }
+    ) {
+        commit('setDatasetAdditionalSensorStatus', payload)
+
+        dispatch('updateSettings', {
+            keyName: 'view.tempchart.datasetSettings',
+            newVal: state.view.tempchart.datasetSettings,
+        })
+    },
+
+    setChartColor({ commit, dispatch, state }, payload: { objectName: string; value: boolean }) {
+        commit('setChartDatasetStatus', {
+            objectName: payload.objectName,
+            dataset: 'color',
+            value: payload.value,
+        })
+
+        dispatch('updateSettings', {
+            keyName: 'view.tempchart.datasetSettings',
+            newVal: state.view.tempchart.datasetSettings,
+        })
+    },
 }
diff --git a/src/store/gui/getters.ts b/src/store/gui/getters.ts
index 9795085d8..f114cb3af 100644
--- a/src/store/gui/getters.ts
+++ b/src/store/gui/getters.ts
@@ -60,10 +60,9 @@ export const getters: GetterTree<GuiState, any> = {
             allPanels = allPanels.filter((name) => name !== 'extruder-control')
         }
 
-        // remove temperature panel, if heaters & sensors < 1
-        const printerAvailableHeaters = rootGetters['printer/getAvailableHeaters']
-        const printerTemperatureSensorKeys = rootGetters['printer/getTemperatureSensorKeys']
-        if (printerAvailableHeaters.length + printerTemperatureSensorKeys.length < 1) {
+        // remove temperature panel, if sensors < 1
+        const printerTemperatureSensors = rootState.printer?.heaters?.available_sensors ?? []
+        if (printerTemperatureSensors.length < 1) {
             allPanels = allPanels.filter((name) => name !== 'temperature')
         }
 
diff --git a/src/store/gui/mutations.ts b/src/store/gui/mutations.ts
index bbbce54f9..2fcc87e50 100644
--- a/src/store/gui/mutations.ts
+++ b/src/store/gui/mutations.ts
@@ -89,4 +89,43 @@ export const mutations: MutationTree<GuiState> = {
         layoutArray.splice(payload.index, 1)
         Vue.set(state.dashboard, payload.layoutname, layoutArray)
     },
+
+    setChartDatasetStatus(state, payload: { objectName: string; dataset: string; value: boolean }) {
+        // set new value if object doesn't exist in view.tempchart.datasetSettings
+        if (!(payload.objectName in state.view.tempchart.datasetSettings)) {
+            const newVal: { [key: string]: any } = {}
+            newVal[payload.dataset] = payload.value
+
+            Vue.set(state.view.tempchart.datasetSettings, payload.objectName, newVal)
+            return
+        }
+
+        Vue.set(state.view.tempchart.datasetSettings[payload.objectName], payload.dataset, payload.value)
+    },
+
+    setDatasetAdditionalSensorStatus(state, payload: { objectName: string; dataset: string; value: boolean }) {
+        // set new value if object doesn't exist in view.tempchart.datasetSettings
+        if (!(payload.objectName in state.view.tempchart.datasetSettings)) {
+            const newVal: { additionalSensors: { [key: string]: any } } = { additionalSensors: {} }
+            newVal.additionalSensors[payload.dataset] = payload.value
+
+            Vue.set(state.view.tempchart.datasetSettings, payload.objectName, newVal)
+            return
+        }
+
+        // set new value if additionalSensor object doesn't exist in view.tempchart.datasetSettings
+        if (!('additionalSensors' in state.view.tempchart.datasetSettings[payload.objectName])) {
+            const newVal: { [key: string]: any } = {}
+            newVal[payload.dataset] = payload.value
+
+            Vue.set(state.view.tempchart.datasetSettings[payload.objectName], 'additionalSensors', newVal)
+            return
+        }
+
+        Vue.set(
+            state.view.tempchart.datasetSettings[payload.objectName].additionalSensors,
+            payload.dataset,
+            payload.value
+        )
+    },
 }
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index c7ffcc3eb..0b8d1cca6 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -1,9 +1,4 @@
-import {
-    additionalSensors,
-    checkKlipperConfigModules,
-    opacityHeaterActive,
-    opacityHeaterInactive,
-} from '@/store/variables'
+import { checkKlipperConfigModules } from '@/store/variables'
 import { GetterTree } from 'vuex'
 import {
     PrinterState,
@@ -12,31 +7,15 @@ import {
     PrinterStateExtruderStepper,
     PrinterStateFan,
     PrinterStateFilamentSensors,
-    PrinterStateHeater,
-    PrinterStateTemperatureFan,
     PrinterStateMiscellaneous,
     PrinterStateMcu,
     PrinterStateMacro,
-    PrinterStateTemperatureObject,
-    PrinterStateTemperatureSensor,
     PrinterStateToolchangeMacro,
-    PrinterStateAdditionalSensor,
     PrinterGetterObject,
     PrinterStateLight,
 } from '@/store/printer/types'
 import { caseInsensitiveSort, formatFrequency, getMacroParams } from '@/plugins/helpers'
 import { RootState } from '@/store/types'
-import {
-    mdiFan,
-    mdiFire,
-    mdiPrinter3dNozzle,
-    mdiPrinter3dNozzleAlert,
-    mdiRadiator,
-    mdiRadiatorDisabled,
-    mdiThermometer,
-    mdiThermometerHigh,
-    mdiThermometerLow,
-} from '@mdi/js'
 
 export const getters: GetterTree<PrinterState, RootState> = {
     getPrintPercent: (state, getters, rootState) => {
@@ -196,266 +175,6 @@ export const getters: GetterTree<PrinterState, RootState> = {
         return getters['getMacros'].find((macro: PrinterStateMacro) => macro.name.toLowerCase() === nameLower)
     },
 
-    getHeaters: (state, getters, rootState, rootGetters) => {
-        const heaters: PrinterStateHeater[] = []
-        const colorOff = 'grey darken-2'
-        const colorHot = 'grey lighten-5'
-
-        if (state.heaters?.available_heaters) {
-            for (const [key, value] of Object.entries(state)) {
-                if (state.heaters.available_heaters.includes(key)) {
-                    let name = key
-                    const nameSplit = key.split(' ')
-
-                    if (nameSplit.length > 1 && nameSplit[0] === 'heater_generic') name = nameSplit[1]
-
-                    let icon = mdiPrinter3dNozzleAlert
-                    let color = colorOff
-                    if (value.target) color = colorHot
-
-                    if (nameSplit[0].startsWith('extruder')) {
-                        const min_extrude_temp =
-                            key in state.configfile.config && 'min_extrude_temp' in state.configfile.config[key]
-                                ? parseFloat(state.configfile.config[key].min_extrude_temp)
-                                : 170
-                        if (value.temperature >= min_extrude_temp) icon = mdiPrinter3dNozzle
-                    } else if (nameSplit[0] === 'heater_bed') {
-                        icon = mdiRadiatorDisabled
-                        if (value.temperature > 50 || (value.target && value.temperature > value.target - 5))
-                            icon = mdiRadiator
-                    } else if (nameSplit[0].startsWith('heater_generic')) icon = mdiFire
-
-                    if (!name.startsWith('_')) {
-                        heaters.push({
-                            name: name,
-                            type: nameSplit[0] as PrinterStateHeater['type'],
-                            icon: icon,
-                            iconColor: color,
-                            target: Math.round(value.target * 10) / 10,
-                            temperature: Math.round(value.temperature * 10) / 10,
-                            additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
-                            power: Math.round((value.power ?? 0) * 100),
-                            avgPower: Math.round(getters['tempHistory/getAvgPower'](name) ?? 0),
-                            presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
-                            chartColor: getters['tempHistory/getDatasetColor'](name),
-                            chartSeries: getters['tempHistory/getSerieNames'](name),
-                            min_temp: parseInt(state.configfile?.config[key]?.min_temp ?? 0),
-                            max_temp: parseInt(state.configfile?.config[key]?.max_temp ?? 0),
-                        })
-                    }
-                }
-            }
-        }
-
-        return caseInsensitiveSort(heaters, 'name')
-    },
-
-    getTemperatureFans: (state, getters, rootState, rootGetters) => {
-        const fans: PrinterStateTemperatureFan[] = []
-
-        for (const [key, value] of Object.entries(state)) {
-            const nameSplit = key.split(' ')
-
-            if (nameSplit[0] === 'temperature_fan' && !nameSplit[1].startsWith('_')) {
-                fans.push({
-                    name: nameSplit[1],
-                    icon: mdiFan,
-                    target: Math.round(value.target * 10) / 10,
-                    temperature: Math.round(value.temperature * 10) / 10,
-                    additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
-                    speed: Math.round((value.speed ?? 0) * 100),
-                    avgSpeed: Math.round(getters['tempHistory/getAvgSpeed'](nameSplit[1]) ?? 0),
-                    rpm: value.rpm !== null ? Math.round(value.rpm) : null,
-                    presets: rootGetters['gui/presets/getPresetsFromHeater']({ name: key }),
-                    chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
-                    chartSeries: getters['tempHistory/getSerieNames'](nameSplit[1]),
-                    min_temp: parseInt(state.configfile?.config[key]?.min_temp ?? 0),
-                    max_temp: parseInt(state.configfile?.config[key]?.max_temp ?? 0),
-                })
-            }
-        }
-
-        return caseInsensitiveSort(fans, 'name')
-    },
-
-    getTemperatureSensorKeys: (state) => {
-        return Object.keys(state).filter((name) => name.startsWith('temperature_sensor ') && !name.startsWith('_'))
-    },
-
-    getTemperatureSensors: (state, getters, rootState, rootGetters) => {
-        const sensors: PrinterStateTemperatureSensor[] = []
-
-        const tempSensors = getters['getTemperatureSensorKeys']
-        tempSensors.forEach((key: string) => {
-            const nameSplit = key.split(' ')
-            const values = { ...state[key] }
-            let icon = mdiThermometer
-            const min_temp = state.configfile?.settings[key]?.min_temp ?? 0
-            const max_temp = state.configfile?.settings[key]?.max_temp ?? 210
-            const split = (max_temp - min_temp) / 3
-
-            if (values.temperature <= min_temp + split) icon = mdiThermometerLow
-            if (values.temperature >= max_temp - split) icon = mdiThermometerHigh
-
-            sensors.push({
-                name: nameSplit[1],
-                temperature: Math.round(values.temperature * 10) / 10,
-                additionalSensors: getters.getAdditionalSensors(nameSplit[1]),
-                icon: icon,
-                min_temp: min_temp,
-                max_temp: max_temp,
-                measured_min_temp: Math.round(values.measured_min_temp * 10) / 10,
-                measured_max_temp: Math.round(values.measured_max_temp * 10) / 10,
-                chartColor: getters['tempHistory/getDatasetColor'](nameSplit[1]),
-                chartSeries: getters['tempHistory/getSerieNames'](nameSplit[1]),
-            })
-        })
-
-        if ('z_thermal_adjust' in state) {
-            const key = 'z_thermal_adjust'
-            const values = state[key]
-            let icon = mdiThermometer
-            const min_temp = state.configfile?.settings[key]?.min_temp ?? 0
-            const max_temp = state.configfile?.settings[key]?.max_temp ?? 210
-            const split = (max_temp - min_temp) / 3
-
-            if (values.temperature <= min_temp + split) icon = mdiThermometerLow
-            if (values.temperature >= max_temp - split) icon = mdiThermometerHigh
-
-            const additionalSensorBool = rootGetters['gui/getDatasetAdditionalSensorValue']({
-                name: key,
-                sensor: 'z_adjust',
-            })
-
-            const additionalSensor: PrinterStateAdditionalSensor = {
-                bool: additionalSensorBool,
-                name: 'z_adjust',
-                unit: 'μm',
-                value: Math.round(values.current_z_adjust * 1000),
-            }
-
-            if (Math.abs(values.current_z_adjust) >= 0.1) {
-                additionalSensor.value = Math.round(values.current_z_adjust * 1000) / 1000
-                additionalSensor.unit = 'mm'
-            }
-
-            sensors.push({
-                name: key,
-                temperature: Math.round(values.temperature * 10) / 10,
-                additionalSensors: [additionalSensor],
-                icon,
-                min_temp: min_temp,
-                max_temp: max_temp,
-                measured_min_temp: Math.round(values.measured_min_temp * 10) / 10,
-                measured_max_temp: Math.round(values.measured_max_temp * 10) / 10,
-                chartColor: getters['tempHistory/getDatasetColor'](key),
-                chartSeries: getters['tempHistory/getSerieNames'](key),
-            })
-        }
-
-        return caseInsensitiveSort(sensors, 'name')
-    },
-
-    getTemperatureObjects: (state, getters, rootState) => {
-        const objects: PrinterStateTemperatureObject[] = []
-        const disableFanAnimation = rootState.gui?.uiSettings.disableFanAnimation ?? false
-
-        const heaters = getters['getHeaters']
-        if (heaters.length) {
-            heaters.forEach((heater: PrinterStateHeater) => {
-                objects.push({
-                    name: heater.name,
-                    type: heater.type,
-                    icon: heater.icon,
-                    iconColor:
-                        heater.target > 0
-                            ? `${heater.chartColor}${opacityHeaterActive}`
-                            : `${heater.chartColor}${opacityHeaterInactive}`,
-                    iconClass: '',
-                    state: heater.target > 0 ? heater.power + '%' : 'off',
-                    avgState: heater.avgPower + '%',
-                    temperature: heater.temperature,
-                    additionalSensors: heater.additionalSensors,
-                    target: heater.target,
-                    presets: heater.presets,
-                    min_temp: heater.min_temp,
-                    max_temp: heater.max_temp,
-                    measured_min_temp: null,
-                    measured_max_temp: null,
-                    rpm: null,
-                    rpmClass: '',
-                    command: 'SET_HEATER_TEMPERATURE',
-                    commandAttributeName: 'HEATER',
-                    chartColor: heater.chartColor,
-                    chartSeries: heater.chartSeries,
-                })
-            })
-        }
-
-        const temperature_fans = getters['getTemperatureFans']
-        if (temperature_fans.length) {
-            temperature_fans.forEach((fan: PrinterStateTemperatureFan) => {
-                objects.push({
-                    name: fan.name,
-                    type: 'temperature_fan',
-                    icon: fan.icon,
-                    iconColor:
-                        fan.target > 0
-                            ? `${fan.chartColor}${opacityHeaterActive}`
-                            : `${fan.chartColor}${opacityHeaterInactive}`,
-                    iconClass: !disableFanAnimation && fan.speed ? ' icon-rotate' : '',
-                    state: fan.target > 0 && fan.speed > 0 ? fan.speed + '%' : fan.target > 0 ? 'standby' : 'off',
-                    avgState: fan.avgSpeed + '%',
-                    temperature: fan.temperature,
-                    additionalSensors: fan.additionalSensors,
-                    target: fan.target,
-                    presets: fan.presets,
-                    min_temp: fan.min_temp,
-                    max_temp: fan.max_temp,
-                    measured_min_temp: null,
-                    measured_max_temp: null,
-                    rpm: fan.rpm,
-                    rpmClass: fan.rpm === 0 && fan.speed > 0 ? 'red--text' : '',
-                    command: 'SET_TEMPERATURE_FAN_TARGET',
-                    commandAttributeName: 'TEMPERATURE_FAN',
-                    chartColor: fan.chartColor,
-                    chartSeries: fan.chartSeries,
-                })
-            })
-        }
-
-        const temperature_sensors = getters['getTemperatureSensors']
-        if (temperature_sensors.length) {
-            temperature_sensors.forEach((sensor: PrinterStateTemperatureSensor) => {
-                objects.push({
-                    name: sensor.name,
-                    type: 'temperature_sensor',
-                    icon: sensor.icon,
-                    iconColor: `${sensor.chartColor}${opacityHeaterActive}`,
-                    iconClass: '',
-                    state: null,
-                    avgState: '',
-                    temperature: sensor.temperature,
-                    additionalSensors: sensor.additionalSensors,
-                    target: null,
-                    presets: [],
-                    min_temp: sensor.min_temp,
-                    max_temp: sensor.max_temp,
-                    measured_min_temp: sensor.measured_min_temp,
-                    measured_max_temp: sensor.measured_max_temp,
-                    rpm: null,
-                    rpmClass: '',
-                    command: null,
-                    commandAttributeName: null,
-                    chartColor: sensor.chartColor,
-                    chartSeries: sensor.chartSeries,
-                })
-            })
-        }
-
-        return objects
-    },
-
     getPartFanSpeed: (state) => {
         return 'fan' in state ? state.fan.speed : 0
     },
@@ -646,39 +365,6 @@ export const getters: GetterTree<PrinterState, RootState> = {
         })
     },
 
-    getAdditionalSensors: (state, getters, rootState, rootGetters) => (name: string) => {
-        const additionValues: PrinterStateAdditionalSensor[] = []
-
-        additionalSensors.forEach((sensorName) => {
-            if (sensorName + ' ' + name in state) {
-                Object.keys(state[sensorName + ' ' + name]).forEach((key) => {
-                    if (key !== 'temperature') {
-                        const bool = rootGetters['gui/getDatasetAdditionalSensorValue']({
-                            name: name,
-                            sensor: key,
-                        })
-
-                        let unit = ''
-                        if (key === 'pressure') unit = 'hPa'
-                        if (key === 'humidity') unit = '%'
-
-                        // eslint-disable-next-line
-                        const tmp: PrinterStateAdditionalSensor = {
-                            name: key,
-                            value: state[sensorName + ' ' + name][key].toFixed(1),
-                            bool,
-                            unit,
-                        }
-
-                        additionValues.push(tmp)
-                    }
-                })
-            }
-        })
-
-        return additionValues
-    },
-
     getAvailableHeaters: (state) => {
         return state.heaters?.available_heaters ?? []
     },
diff --git a/src/store/printer/tempHistory/actions.ts b/src/store/printer/tempHistory/actions.ts
index 2751ae6e8..6b09d0d1c 100644
--- a/src/store/printer/tempHistory/actions.ts
+++ b/src/store/printer/tempHistory/actions.ts
@@ -38,47 +38,65 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
             const importData: any = {}
 
             objectKeys.forEach((key: string) => {
-                if (allSensors.includes(key)) {
-                    const datasetValues = payload[key]
-                    datasetTypes.forEach((datasetKey) => {
-                        if (datasetKey + 's' in datasetValues) {
-                            const length = maxHistory - datasetValues[datasetKey + 's'].length
-                            datasetValues[datasetKey + 's'] = [
-                                ...Array.from({ length }, () => 0),
-                                ...datasetValues[datasetKey + 's'],
-                            ]
-                        }
-                    })
+                let nameOnly = key
+                if (nameOnly.indexOf(' ') !== -1) {
+                    nameOnly = nameOnly.substring(nameOnly.indexOf(' ') + 1)
+                }
+
+                // break if sensor doesn't exist anymore or start with a _
+                if (!allSensors.includes(key) || nameOnly.startsWith('_')) {
+                    delete payload[key]
+                    return
+                }
 
-                    importData[key] = { ...datasetValues }
-                } else delete payload[key]
+                const datasetValues = payload[key]
+                datasetTypes.forEach((datasetKey) => {
+                    if (datasetKey + 's' in datasetValues) {
+                        const length = maxHistory - datasetValues[datasetKey + 's'].length
+                        datasetValues[datasetKey + 's'] = [
+                            ...Array.from({ length }, () => 0),
+                            ...datasetValues[datasetKey + 's'],
+                        ]
+                    }
+                })
+
+                importData[key] = { ...datasetValues }
             })
 
-            //add missing heaters/sensors
+            // add missing heaters/sensors
             allSensors.forEach((key: string) => {
-                if (!(key in payload)) {
-                    const keySplits = key.split(' ')
-                    const sensorType = keySplits[0]
-
-                    const addValues: {
-                        temperatures: number[]
-                        targets?: number[]
-                        powers?: number[]
-                        speeds?: number[]
-                    } = {
-                        temperatures: Array(maxHistory).fill(0),
-                    }
+                // break if sensor is already in the cache
+                if (key in payload) return
+
+                let nameOnly = key
+                let sensorType = key
+                const indexOfFirstSpace = key.indexOf(' ')
+                if (indexOfFirstSpace !== -1) {
+                    nameOnly = key.substring(indexOfFirstSpace + 1)
+                    sensorType = key.substring(0, indexOfFirstSpace)
+                }
 
-                    if (allHeaters.includes(key)) {
-                        addValues.targets = Array(maxHistory).fill(0)
-                        addValues.powers = Array(maxHistory).fill(0)
-                    } else if (['temperature_fan'].includes(sensorType)) {
-                        addValues.targets = Array(maxHistory).fill(0)
-                        addValues.speeds = Array(maxHistory).fill(0)
-                    }
+                // break if sensorName starts with a _
+                if (nameOnly.startsWith('_')) return
+
+                const addValues: {
+                    temperatures: number[]
+                    targets?: number[]
+                    powers?: number[]
+                    speeds?: number[]
+                } = {
+                    temperatures: Array(maxHistory).fill(0),
+                }
 
-                    importData[key] = { ...addValues }
+                if (allHeaters.includes(key)) {
+                    addValues.targets = Array(maxHistory).fill(0)
+                    addValues.powers = Array(maxHistory).fill(0)
+                } else if (['temperature_fan'].includes(sensorType)) {
+                    addValues.targets = Array(maxHistory).fill(0)
+                    addValues.speeds = Array(maxHistory).fill(0)
                 }
+
+                importData[key] = { ...addValues }
             })
 
             const tempDataset = []
@@ -87,14 +105,12 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     date: new Date(now.getTime() - 1000 * (maxHistory - i)),
                 }
 
-                Object.keys(importData).forEach((key) => {
-                    let name = key
-                    if (key.includes(' ')) name = key.split(' ')[1]
-
+                Object.keys(importData).forEach((objectName) => {
                     datasetTypes.forEach((attrKey) => {
-                        if (attrKey === 'temperature') tmpDataset[name] = importData[key]['temperatures'][i]
-                        else if (attrKey + 's' in importData[key])
-                            tmpDataset[name + '-' + attrKey] = importData[key][attrKey + 's'][i]
+                        const importDatasetName = `${attrKey}s`
+
+                        if (importDatasetName in importData[objectName])
+                            tmpDataset[`${objectName}-${attrKey}`] = importData[objectName][importDatasetName][i]
                     })
                 })
 
@@ -105,36 +121,28 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
 
             const tempDatasetKeys = Object.keys(tempDataset[0]).filter((tmp) => tmp !== 'date')
             const masterDatasetKeys = tempDatasetKeys
-                .filter((tmp) => {
-                    if (tmp.startsWith('_')) return false
-
-                    const lastIndex = tmp.lastIndexOf('-')
-                    if (lastIndex === -1) return true
-
-                    const suffix = tmp.slice(lastIndex + 1)
-                    return !['target', 'power', 'speed'].includes(suffix)
-                })
+                .filter((name) => name.endsWith('-temperature'))
+                .map((name) => name.slice(0, name.length - 12))
                 .sort()
             const series: PrinterTempHistoryStateSerie[] = []
             let colorNumber = 0
 
             masterDatasetKeys.forEach((name: string) => {
+                // get color from store (if exists)
                 let color = rootGetters['gui/getDatasetValue']({ name: name, type: 'color' })
 
+                // set color if there is no entry in the store
                 if (!color) {
-                    switch (name) {
-                        case 'heater_bed':
-                            color = colorHeaterBed
-                            break
-
-                        case 'chamber':
-                            color = colorChamber
-                            break
-
-                        default:
-                            color = colorArray[colorNumber]
-                            colorNumber++
-                            break
+                    // set heater_bed color
+                    if (name === 'heater_bed') color = colorHeaterBed
+
+                    // set color for chamber elements
+                    if (name.endsWith(' chamber')) color = colorChamber
+
+                    // fallback -> get random color from colorArray
+                    if (!color) {
+                        color = colorArray[colorNumber]
+                        colorNumber++
                     }
                 }
 
@@ -142,8 +150,8 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     id: series.length + 1,
                     color: color,
                     type: 'line',
-                    name: name,
-                    encode: { x: 'date', y: name },
+                    name: `${name}-temperature`,
+                    encode: { x: 'date', y: `${name}-temperature` },
                     animation: false,
                     yAxisIndex: 0,
                     lineStyle: {
@@ -161,61 +169,55 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                     },
                 }
 
+                // add main serie to series
                 series.push(serie)
 
                 datasetTypes.forEach((attrKey) => {
+                    // break if datasetTypes is temperature, because its already in the array
+                    if (attrKey === 'temperature') return
+
                     const subName = name + '-' + attrKey
 
-                    if (tempDatasetKeys.includes(subName)) {
-                        const subSerie: PrinterTempHistoryStateSerie = {
-                            id: series.length + 1,
+                    // break if datasetType (target, speed, power) doesn't exist
+                    if (!tempDatasetKeys.includes(subName)) return
+
+                    // copy serie from temperature and change name
+                    // I have to use the JSON copy method, to have no issues with deep attributes
+                    const subSerie: PrinterTempHistoryStateSerie = JSON.parse(JSON.stringify(serie))
+                    subSerie.id = series.length + 1
+                    subSerie.name = subName
+                    subSerie.encode.y = subName
+
+                    // change settings for target datasets
+                    if (attrKey === 'target') {
+                        subSerie.lineStyle.width = 0
+                        subSerie.emphasis.lineStyle.width = 0
+
+                        subSerie.areaStyle = {
                             color: color,
-                            type: 'line',
-                            name: subName,
-                            encode: { x: 'date', y: subName },
-                            animation: false,
-                            yAxisIndex: 0,
-                            lineStyle: {
-                                color: color,
-                                width: 2,
-                                opacity: 0.1,
-                            },
-                            showSymbol: false,
-                            emphasis: {
-                                lineStyle: {
-                                    color: color,
-                                    width: 2,
-                                    opacity: 0.1,
-                                },
-                            },
+                            opacity: 0.1,
                         }
 
-                        if (attrKey === 'target') {
-                            subSerie.lineStyle.width = 0
-                            subSerie.emphasis.lineStyle.width = 0
-
-                            subSerie.areaStyle = {
-                                color: color,
-                                opacity: 0.1,
-                            }
-
-                            subSerie.emphasis.areaStyle = {
-                                color: color,
-                                opacity: 0.1,
-                            }
-                        } else if (datasetTypesInPercents.includes(attrKey)) {
-                            subSerie.yAxisIndex = 1
-
-                            subSerie.lineStyle.width = 1.5
-                            subSerie.lineStyle.opacity = 0.75
-                            subSerie.lineStyle.type = 'dotted'
-                            subSerie.emphasis.lineStyle.width = 1.5
-                            subSerie.emphasis.lineStyle.opacity = 0.75
-                            subSerie.emphasis.lineStyle.type = 'dotted'
+                        subSerie.emphasis.areaStyle = {
+                            color: color,
+                            opacity: 0.1,
                         }
+                    }
+
+                    // change axis & line settings for percent datasets
+                    if (datasetTypesInPercents.includes(attrKey)) {
+                        subSerie.yAxisIndex = 1
 
-                        series.push(subSerie)
+                        subSerie.lineStyle.width = 1.5
+                        subSerie.lineStyle.opacity = 0.75
+                        subSerie.lineStyle.type = 'dotted'
+                        subSerie.emphasis.lineStyle.width = 1.5
+                        subSerie.emphasis.lineStyle.opacity = 0.75
+                        subSerie.emphasis.lineStyle.type = 'dotted'
                     }
+
+                    // add sub serie to series
+                    series.push(subSerie)
                 })
             })
 
@@ -253,22 +255,22 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
                 date: now,
             }
 
-            rootState.printer.heaters.available_sensors.forEach((key: string) => {
-                let name = key
-                if (key.includes(' ')) name = key.split(' ')[1]
-
-                if (rootState.printer && rootState.printer[key]) {
-                    if ('temperature' in rootState.printer[key]) data[name] = rootState.printer[key].temperature
-                    if ('target' in rootState.printer[key])
-                        data[name + '-target'] = Math.round(rootState.printer[key].target * 10) / 10
-                    if ('power' in rootState.printer[key])
-                        data[name + '-power'] = Math.round(rootState.printer[key].power * 1000) / 1000
-                    if ('speed' in rootState.printer[key])
-                        data[name + '-speed'] = Math.round(rootState.printer[key].speed * 1000) / 1000
-                }
+            rootState.printer.heaters.available_sensors.forEach((name: string) => {
+                if (!(rootState.printer && name in rootState.printer)) return
+                const printerObject = { ...rootState.printer[name] }
+
+                datasetTypes.forEach((attrKey) => {
+                    if (!(attrKey in printerObject)) return
+
+                    let value = Math.round(printerObject[attrKey] * 10) / 10
+                    if (datasetTypesInPercents.includes(attrKey))
+                        value = Math.round(printerObject[attrKey] * 1000) / 1000
+
+                    data[`${name}-${attrKey}`] = value
+                })
             })
 
-            await commit('addToSource', {
+            commit('addToSource', {
                 data: data,
                 maxHistory: rootGetters['printer/tempHistory/getTemperatureStoreSize'],
             })
@@ -276,4 +278,8 @@ export const actions: ActionTree<PrinterTempHistoryState, RootState> = {
 
         //commit('saveLastDate', performance.now())
     },
+
+    setColor({ commit }, payload) {
+        commit('setColor', payload)
+    },
 }
diff --git a/src/store/printer/tempHistory/getters.ts b/src/store/printer/tempHistory/getters.ts
index 208fc680b..67e150854 100644
--- a/src/store/printer/tempHistory/getters.ts
+++ b/src/store/printer/tempHistory/getters.ts
@@ -8,10 +8,10 @@ import {
 import { RootState } from '@/store/types'
 
 export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
-    getDatasetColor: (state) => (name: string) => {
-        const dataset = state.series.find((element) => element.name === name)
+    getDatasetColor: (_, getters) => (name: string) => {
+        const dataset = getters.getSeries(`${name}-temperature`)
 
-        return dataset && 'lineStyle' in dataset ? dataset.lineStyle.color : null
+        return dataset?.lineStyle?.color ?? null
     },
 
     getSeries: (state) => (name: string) => {
@@ -22,17 +22,10 @@ export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
         const output: string[] = []
         const seriesKeys = state.series
             .map((serie: PrinterTempHistoryStateSerie) => serie.name)
-            .filter((serieName) => serieName.startsWith(name))
+            .filter((serieName) => serieName.startsWith(`${name}-`))
 
         seriesKeys.forEach((seriesKey) => {
-            if (seriesKey === name) {
-                output.push('temperature')
-                return
-            }
-
-            if (seriesKey.startsWith(name + '-')) {
-                output.push(seriesKey.slice(name.length + 1))
-            }
+            output.push(seriesKey.slice(name.length + 1))
         })
 
         return output
@@ -69,36 +62,51 @@ export const getters: GetterTree<PrinterTempHistoryState, RootState> = {
         return 0
     },
 
-    getAvgPower: (state, getters) => (name: string) => {
+    getAvgPower: (_, getters) => (name: string) => {
         return getters['getAvg'](name, 'power')
     },
 
-    getAvgSpeed: (state, getters) => (name: string) => {
+    getAvgSpeed: (_, getters) => (name: string) => {
         return getters['getAvg'](name, 'speed')
     },
 
-    getSelectedLegends: (state, getters, rootState, rootGetters) => {
+    getSelectedLegends: (state, _, rootState) => {
         interface legends {
             [key: string]: boolean
         }
 
         const selected: legends = {}
+        const available_sensors = rootState.printer?.heaters?.available_sensors ?? []
+        const viewSettings = rootState.gui?.view?.tempchart?.datasetSettings ?? {}
 
-        if (rootState.printer?.heaters?.available_sensors?.length) {
-            rootState.printer?.heaters?.available_sensors.forEach((key: string) => {
-                if (rootState.printer && key in rootState.printer) {
-                    let name = key
-                    if (key.includes(' ')) name = key.split(' ')[1]
-
-                    datasetTypes.forEach((datasetType: string) => {
-                        if (rootState?.printer && rootState?.printer[key] && datasetType in rootState.printer[key]) {
-                            const tmpName = datasetType === 'temperature' ? name : name + '-' + datasetType
-                            selected[tmpName] = rootGetters['gui/getDatasetValue']({ name: name, type: datasetType })
-                        }
-                    })
-                }
+        Object.keys(viewSettings).forEach((key) => {
+            // break if this element doesn't exist in available_sensors
+            if (!available_sensors.includes(key)) return
+
+            Object.keys(viewSettings[key]).forEach((attrKey) => {
+                // break if this element isn't a valid datasetType
+                if (!datasetTypes.includes(attrKey)) return
+
+                const serieName = `${key}-${attrKey}`
+
+                // break if serie in tempchart doesn't exist
+                if (state.series.findIndex((serie) => serie.name === serieName) === -1) return
+
+                // add to selected
+                selected[serieName] = viewSettings[key][attrKey]
             })
-        }
+        })
+
+        state.series.forEach((serie) => {
+            // break if object is already in the selected list
+            if (Object.keys(selected).includes(serie.name)) return
+
+            // get datasetType from the serie name
+            const datasetType = serie.name.slice(serie.name.lastIndexOf('-') + 1)
+
+            // add default value for this datasetType; all percent series are hidden per default
+            selected[serie.name] = !datasetTypesInPercents.includes(datasetType)
+        })
 
         return selected
     },

From d5312790c361b093ac84319010f55954207c8b38 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 16 Jul 2023 23:17:40 +0200
Subject: [PATCH 6/8] refactor: remove unused comment

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

diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index ea69062c9..1bbeeea37 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -51,9 +51,6 @@ export default class TempChart extends Mixins(BaseMixin) {
                 show: false,
                 selected: this.selectedLegends,
             },
-            /*dataZoom: [{
-                type: 'inside',
-            }],*/
             xAxis: {
                 type: 'time',
                 splitNumber: 5,

From a1b4d8bfb09e9a669f0a498d22ff819688527210 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 16 Jul 2023 23:18:26 +0200
Subject: [PATCH 7/8] refactor: simplify gridRight getter in TempChart.vue

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

diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue
index 1bbeeea37..50619df51 100644
--- a/src/components/charts/TempChart.vue
+++ b/src/components/charts/TempChart.vue
@@ -252,9 +252,7 @@ export default class TempChart extends Mixins(BaseMixin) {
     }
 
     get gridRight() {
-        if (this.boolDisplayPwmAxis) return 25
-
-        return 15
+        return this.boolDisplayPwmAxis ? 25 : 15
     }
 
     get optionGridRight() {

From 3ad6282ce1652fb13ecef69cd544263ab3aa9523 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 16 Jul 2023 23:18:52 +0200
Subject: [PATCH 8/8] refactor: remove unused comment

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Temperature/TemperaturePanelListItemEdit.vue        | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
index ed96dfe05..275c26c8e 100644
--- a/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
+++ b/src/components/panels/Temperature/TemperaturePanelListItemEdit.vue
@@ -81,9 +81,6 @@ export default class TemperaturePanelListItemEdit extends Mixins(BaseMixin) {
         })
 
         this.$store.dispatch('printer/tempHistory/setColor', { name: this.objectName, value })
-
-        /*const name = 'view.tempchart.datasetSettings.' + this.objectName + '.color'
-        this.$store.dispatch('gui/saveSetting', { name, value })*/
     }
 
     closeDialog() {