Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: extract Presets and Settings from TemperaturePanel #1465

Merged
merged 8 commits into from
Jul 22, 2023
Merged

refactor: extract Presets and Settings from TemperaturePanel #1465

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6209172
refactor: extract Presets and Settings from TemperaturePanel
meteyou Jul 13, 2023
91542e8
refactor: Panel.vue CSS settings
meteyou Jul 13, 2023
c8e9b7f
refactor: WIP
meteyou Jul 13, 2023
58f4d73
refactor: WIP
meteyou Jul 13, 2023
5fe3903
refactor: split the TemperaturePanel.vue and remove the big getters
meteyou Jul 16, 2023
d531279
refactor: remove unused comment
meteyou Jul 16, 2023
a1b4d8b
refactor: simplify gridRight getter in TempChart.vue
meteyou Jul 16, 2023
3ad6282
refactor: remove unused comment
meteyou Jul 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
245 changes: 102 additions & 143 deletions src/components/charts/TempChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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',
}],*/
meteyou marked this conversation as resolved.
Show resolved Hide resolved
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)',
Expand All @@ -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',
Expand Down Expand Up @@ -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: [
Expand All @@ -188,11 +205,7 @@ export default class TempChart extends Mixins(BaseMixin) {
],
},
},
],
dataset: {
source: [],
},
series: [],
]
}

get chart(): ECharts | null {
Expand Down Expand Up @@ -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
meteyou marked this conversation as resolved.
Show resolved Hide resolved
}

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">' +
Expand All @@ -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>'
Expand All @@ -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) {
Expand All @@ -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>
Expand Down
Loading