optimize tempchart workflow

Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-03-29 21:24:16 +02:00
parent 0edb9dd1d2
commit 761f08b87d
2 changed files with 27 additions and 20 deletions

View File

@ -15,8 +15,7 @@ export default {
return { return {
chart : null, chart : null,
timerChart: '', timerChart: '',
timerDataset: '', isVisible: true,
isVisable: true,
chartOptions: { chartOptions: {
darkMode: true, darkMode: true,
animation: false, animation: false,
@ -186,7 +185,6 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
intervalChartUpdate: state => state.gui.tempchart.intervalChartUpdate, intervalChartUpdate: state => state.gui.tempchart.intervalChartUpdate,
intervalDatasetUpdate: state => state.gui.tempchart.intervalDatasetUpdate,
boolTempchart: state => state.gui.dashboard.boolTempchart, boolTempchart: state => state.gui.dashboard.boolTempchart,
}), }),
maxHistory: { maxHistory: {
@ -230,21 +228,16 @@ export default {
if (document.getElementById("tempchart") && this.chart === null) { if (document.getElementById("tempchart") && this.chart === null) {
this.chart = echarts.init(document.getElementById("tempchart"), null, {renderer: 'canvas'}) this.chart = echarts.init(document.getElementById("tempchart"), null, {renderer: 'canvas'})
this.chart.setOption(this.chartOptions) this.chart.setOption(this.chartOptions)
this.updateChart()
} else setTimeout(() => { } else setTimeout(() => {
this.createChart() this.createChart()
}, 500) }, 1000)
}, },
visibilityChanged (isVisible) { updateChart() {
this.isVisible = isVisible
if(isVisible && this.chart !== null) this.chart.resize()
},
},
created() {
this.timerChart = setInterval(() => {
if ( if (
this.chart && this.chart &&
this.boolTempchart && this.boolTempchart &&
this.isVisable this.isVisible
) { ) {
this.chart.setOption({ this.chart.setOption({
series: this.series, series: this.series,
@ -300,13 +293,19 @@ export default {
} }
}], }],
}) })
setTimeout(() => {
this.updateChart()
}, this.intervalChartUpdate)
} }
}, this.intervalChartUpdate) },
visibilityChanged (isVisible) {
this.timerDataset = setInterval(() => { this.isVisible = isVisible
this.$store.dispatch("printer/tempHistory/updateDatasets") if(isVisible && this.chart !== null) this.chart.resize()
}, this.intervalDatasetUpdate) if(this.chart !== null) this.updateChart()
},
},
created() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
if (this.chart) this.chart.resize() if (this.chart) this.chart.resize()
}) })

View File

@ -5,7 +5,7 @@ export default {
commit('reset') commit('reset')
}, },
getHistory({ commit, state, rootGetters }, payload) { getHistory({ commit, state, rootGetters, rootState, dispatch }, payload) {
const now = new Date() const now = new Date()
const maxHistory = rootGetters['server/getConfig']('server', 'temperature_store_size') || 1200 const maxHistory = rootGetters['server/getConfig']('server', 'temperature_store_size') || 1200
@ -147,10 +147,14 @@ export default {
}) })
} }
}) })
setTimeout(() => {
dispatch("updateDatasets")
}, rootState.gui.tempchart.intervalDatasetUpdate)
} }
}, },
updateDatasets({ commit, rootState, rootGetters }) { updateDatasets({ commit, dispatch, rootState, rootGetters }) {
if ( if (
'heaters' in rootState.printer && 'heaters' in rootState.printer &&
'available_sensors' in rootState.printer.heaters && 'available_sensors' in rootState.printer.heaters &&
@ -179,5 +183,9 @@ export default {
} }
}) })
} }
setTimeout(() => {
dispatch("updateDatasets")
}, rootState.gui.tempchart.intervalDatasetUpdate)
} }
} }