Skip to content

Commit

Permalink
fix(ThermalChart): consistent chart color on single device (#1522)
Browse files Browse the repository at this point in the history 
Signed-off-by: Pedro Lamas <[email protected]>
  • Loading branch information
@pedrolamas
pedrolamas authored Nov 9, 2024
1 parent 24d0db9 commit f217cd4
Show file tree
Hide file tree
Showing 5 changed files with 104 additions and 78 deletions.
22 changes: 4 additions & 18 deletions src/components/widgets/thermals/TemperatureCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,7 @@
</template>

<temperature-targets
@legendClick="legendToggleSelect"
@legendPowerClick="legendTogglePowerSelect"
@updateChartSelectedLegends="updateChartSelectedLegends"
/>

<template v-if="chartReady && chartVisible">
Expand All @@ -116,12 +115,12 @@
import { Component, Mixins, Prop, Ref } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'
import BrowserMixin from '@/mixins/browser'
import type { Fan, Heater } from '@/store/printer/types'
import ThermalChart from '@/components/widgets/thermals/ThermalChart.vue'
import TemperatureTargets from '@/components/widgets/thermals/TemperatureTargets.vue'
import TemperaturePresetsMenu from './TemperaturePresetsMenu.vue'
import type { TemperaturePreset } from '@/store/config/types'
import type { ChartSelectedLegends } from '@/store/charts/types'
@Component({
components: {
Expand All @@ -146,22 +145,9 @@ export default class TemperatureCard extends Mixins(StateMixin, BrowserMixin) {
)
}
legendToggleSelect (item: Heater | Fan) {
// If this has a target, toggle that too.
updateChartSelectedLegends (chartSelectedLegends: ChartSelectedLegends) {
if (this.chartVisible) {
if ('target' in item) {
this.thermalChartElement.legendToggleSelect(item.key + 'Target')
}
this.thermalChartElement.legendToggleSelect(item.key)
}
}
legendTogglePowerSelect (item: Heater | Fan) {
if (this.chartVisible) {
const name = ('speed' in item)
? item.key + 'Speed'
: item.key + 'Power'
this.thermalChartElement.legendToggleSelect(name)
this.thermalChartElement.updateChartSelectedLegends(chartSelectedLegends)
}
}
Expand Down
55 changes: 40 additions & 15 deletions src/components/widgets/thermals/TemperatureTargets.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,18 @@
</td>
<td class="temp-name">
<span
:class="{ 'active': !(item.key in chartSelectedLegends) || chartSelectedLegends[item.key] }"
:class="{ 'active': isLegendSelected(item) }"
class="legend-item toggle"
@click="$emit('legendClick', item)"
@click="legendClick(item)"
>
{{ item.prettyName }}
</span>
</td>
<td class="temp-power">
<span
:class="{ 'active': chartSelectedLegends[item.key + 'Power'] }"
:class="{ 'active': isLegendSelected(item, '#power') }"
class="legend-item toggle"
@click="$emit('legendPowerClick', item)"
@click="legendClick(item, '#power')"
>
<span v-if="item.power <= 0 && item.target <= 0">off</span>
<span v-if="item.target > 0">
Expand All @@ -63,9 +63,9 @@
class="text-no-wrap"
>
<span
:class="{ 'active': chartSelectedLegends[item.key + 'Power'] }"
:class="{ 'active': isLegendSelected(item, '#power') }"
class="legend-item toggle"
@click="$emit('legendPowerClick', item)"
@click="legendClick(item, '#power')"
>
<span>{{ getRateOfChange(item) }}<small>&deg;C/s</small></span>
</span>
Expand Down Expand Up @@ -110,19 +110,19 @@
</td>
<td class="temp-name">
<span
:class="{ 'active': !(item.key in chartSelectedLegends) || chartSelectedLegends[item.key] }"
:class="{ 'active': isLegendSelected(item) }"
class="legend-item toggle"
@click="$emit('legendClick', item)"
@click="legendClick(item)"
>
{{ item.prettyName }}
</span>
</td>
<td class="temp-power">
<span
v-if="item.speed"
:class="{ 'active': chartSelectedLegends[item.key + 'Speed'] }"
:class="{ 'active':isLegendSelected(item, '#speed') }"
class="legend-item toggle"
@click="$emit('legendPowerClick', item)"
@click="legendClick(item, '#speed')"
>
<span v-if="item.speed > 0 && (item.target > 0 || !item.target)">
{{ (item.speed * 100).toFixed(0) }}<small>%</small>
Expand All @@ -138,9 +138,9 @@
class="text-no-wrap"
>
<span
:class="{ 'active': chartSelectedLegends[item.key + 'Power'] }"
:class="{ 'active': isLegendSelected(item, '#power') }"
class="legend-item toggle"
@click="$emit('legendPowerClick', item)"
@click="legendClick(item, '#power')"
>
<span>{{ getRateOfChange(item) }}<small>&deg;C/s</small></span>
</span>
Expand Down Expand Up @@ -192,9 +192,9 @@
</td>
<td class="temp-name">
<span
:class="{ 'active': !(item.key in chartSelectedLegends) || chartSelectedLegends[item.key] }"
:class="{ 'active': isLegendSelected(item) }"
class="legend-item toggle"
@click="$emit('legendClick', item)"
@click="legendClick(item)"
>
{{ item.prettyName }}
</span>
Expand Down Expand Up @@ -250,7 +250,7 @@
import { Component, Mixins } from 'vue-property-decorator'
import TemperaturePresetsMenu from './TemperaturePresetsMenu.vue'
import StateMixin from '@/mixins/state'
import type { Heater, Sensor } from '@/store/printer/types'
import type { Fan, Heater, Sensor } from '@/store/printer/types'
import { takeRightWhile } from 'lodash-es'
import type { ChartData, ChartSelectedLegends } from '@/store/charts/types'
Expand Down Expand Up @@ -323,6 +323,31 @@ export default class TemperatureTargets extends Mixins(StateMixin) {
return `${rateOfChange < 0 ? '' : '+'}${rateOfChange.toFixed(1)}`
}
isLegendSelected (item: Heater | Fan, subKey?: string) {
const key = `${item.key}${subKey ?? ''}`
return this.chartSelectedLegends[key] ?? (subKey !== '#power' && subKey !== '#speed')
}
legendClick (item: Heater | Fan, subKey?: string) {
const value = !this.isLegendSelected(item, subKey)
const key = `${item.key}${subKey ?? ''}`
const chartSelectedLegends: ChartSelectedLegends = {
[key]: value
}
// If this has a target, toggle that too.
if (
!subKey &&
'target' in item
) {
chartSelectedLegends[`${item.key}#target`] = value
}
this.$emit('updateChartSelectedLegends', chartSelectedLegends)
}
}
</script>

Expand Down
93 changes: 54 additions & 39 deletions src/components/widgets/thermals/ThermalChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
:init-options="{ renderer: 'svg' }"
autoresize
@legendselectchanged="handleLegendSelectChanged"
@legendselected="handleLegendSelectChanged"
@legendunselected="handleLegendSelectChanged"
/>
</div>
</template>
Expand Down Expand Up @@ -60,6 +62,14 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
return this.$store.getters['charts/getChartData']
}
get chartableSensors (): string[] {
return this.$store.getters['printer/getChartableSensors'] as string[]
}
get chartSelectedLegends (): ChartSelectedLegends {
return this.$store.getters['charts/getSelectedLegends'] as ChartSelectedLegends
}
@Watch('chartData')
onDataChange (data: any) {
if (this.chart && !this.loading) {
Expand All @@ -86,13 +96,13 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
init () {
// Create the series and associated legends.
const dataKeys = Object.keys(this.chartData[0])
const keys = this.$store.getters['printer/getChartableSensors'] as string[]
const keys = this.chartableSensors
keys.forEach((key) => {
this.series.push(this.createSeries(key))
if (dataKeys.includes(`${key}Target`)) this.series.push(this.createSeries(`${key}Target`))
if (dataKeys.includes(`${key}Power`)) this.series.push(this.createSeries(`${key}Power`))
if (dataKeys.includes(`${key}Speed`)) this.series.push(this.createSeries(`${key}Speed`))
if (dataKeys.includes(`${key}#target`)) this.series.push(this.createSeries(key, '#target'))
if (dataKeys.includes(`${key}#power`)) this.series.push(this.createSeries(key, '#power'))
if (dataKeys.includes(`${key}#speed`)) this.series.push(this.createSeries(key, '#speed'))
})
}
Expand Down Expand Up @@ -167,10 +177,10 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
params
.forEach((param: any) => {
if (
!param.seriesName.toLowerCase().endsWith('target') &&
!param.seriesName.toLowerCase().endsWith('power') &&
!param.seriesName.toLowerCase().endsWith('speed') &&
param.seriesName &&
!param.seriesName.endsWith('#target') &&
!param.seriesName.endsWith('#power') &&
!param.seriesName.endsWith('#speed') &&
param.value[param.seriesName] != null
) {
const name = param.seriesName.split(' ', 2).pop()
Expand All @@ -183,14 +193,14 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
<span style="float:right;margin-left:20px;font-size:${fontSize}px;color:${fontColor};font-weight:900">
${param.value[param.seriesName].toFixed(2)}<small>°C</small>`
if (param.seriesName + 'Target' in param.value) {
text += ` / ${param.value[param.seriesName + 'Target'].toFixed()}<small>°C</small>`
if (param.value[`${param.seriesName}#target`] != null) {
text += ` / ${param.value[`${param.seriesName}#target`].toFixed()}<small>°C</small>`
}
if (param.seriesName + 'Power' in param.value) {
text += ` / ${(param.value[param.seriesName + 'Power'] * 100).toFixed()}<small>%</small>`
if (param.value[`${param.seriesName}#power`] != null) {
text += ` / ${(param.value[`${param.seriesName}#power`] * 100).toFixed()}<small>%</small>`
}
if (param.seriesName + 'Speed' in param.value) {
text += ` / ${(param.value[param.seriesName + 'Speed'] * 100).toFixed()}<small>%</small>`
if (param.value[`${param.seriesName}#speed`] != null) {
text += ` / ${(param.value[`${param.seriesName}#speed`] * 100).toFixed()}<small>%</small>`
}
text += `</span>
<div style="clear: both"></div>
Expand Down Expand Up @@ -292,9 +302,10 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
return options
}
createSeries (key: string) {
createSeries (baseKey: string, subKey?: string) {
// Grab the color
const color = this.$colorset.next(getKlipperType(key), key)
const key = `${baseKey}${subKey ?? ''}`
const color = this.$colorset.next(getKlipperType(baseKey), baseKey)
// Base properties
const series: any = {
Expand All @@ -321,7 +332,7 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
}
// If this is a target, adjust its display.
if (key.toLowerCase().endsWith('target')) {
if (subKey === '#target') {
series.yAxisIndex = 0
series.emphasis.lineStyle.width = 1
series.lineStyle.width = 1
Expand All @@ -331,10 +342,7 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
}
// If this is a power or speed, adjust its display.
if (
key.toLowerCase().endsWith('power') ||
key.toLowerCase().endsWith('speed')
) {
if (subKey === '#power' || subKey === '#speed') {
series.yAxisIndex = 1
series.emphasis.lineStyle.width = 1
series.lineStyle.width = 1
Expand All @@ -344,34 +352,41 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
}
// Set the initial legend state (power and speed default off)
const storedLegends = this.$store.getters['charts/getSelectedLegends'] as ChartSelectedLegends
if (storedLegends[key] !== undefined) {
this.initialSelected[key] = storedLegends[key]
} else {
this.initialSelected[key] = !(
key.toLowerCase().endsWith('power') ||
key.toLowerCase().endsWith('speed')
)
}
this.initialSelected[key] = this.chartSelectedLegends[key] ?? (subKey !== '#power' && subKey !== '#speed')
// Push the series into our options object.
return series
}
showPowerAxis (selected: Record<string, boolean>) {
const filtered = Object.keys(selected)
.filter(key => key.toLowerCase().endsWith('power') || key.toLowerCase().endsWith('speed'))
.filter(key => selected[key] === true)
return (filtered.length > 0)
return Object.keys(selected)
.some(key =>
(
key.endsWith('#power') ||
key.endsWith('#speed')
) &&
selected[key] === true
)
}
legendToggleSelect (name: string) {
updateChartSelectedLegends (chartSelectedLegends: ChartSelectedLegends) {
if (this.chart) {
this.chart.dispatchAction({
type: 'legendToggleSelect',
name
})
const entries = Object.entries(chartSelectedLegends)
let index = entries.length
for (const [name, value] of entries) {
// only raise events for the last change
const silent = --index !== 0
this.chart.dispatchAction({
type: value
? 'legendSelect'
: 'legendUnSelect',
name
},{
silent
})
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/store/chart_helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,9 @@ export const handleAddChartEntry = (retention: number, state: RootState, commit:
const power = state.printer.printer[key].power
const speed = state.printer.printer[key].speed
r[key] = temp
if (target != null) r[`${key}Target`] = target
if (power != null) r[`${key}Power`] = power
if (speed != null) r[`${key}Speed`] = speed
if (target != null) r[`${key}#target`] = target
if (power != null) r[`${key}#power`] = power
if (speed != null) r[`${key}#speed`] = speed
})

return r
Expand Down
6 changes: 3 additions & 3 deletions src/store/charts/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ export const actions: ActionTree<ChartState, RootState> = {
keys.forEach(key => {
if (rootState.printer.printer[key]) {
r[key] = payload[key].temperatures[i]
if ('targets' in payload[key]) r[`${key}Target`] = payload[key].targets[i]
if ('powers' in payload[key]) r[`${key}Power`] = payload[key].powers[i]
if ('speeds' in payload[key]) r[`${key}Speed`] = payload[key].speeds[i]
if ('targets' in payload[key]) r[`${key}#target`] = payload[key].targets[i]
if ('powers' in payload[key]) r[`${key}#power`] = payload[key].powers[i]
if ('speeds' in payload[key]) r[`${key}#speed`] = payload[key].speeds[i]
}
})
d.push(r)
Expand Down

0 comments on commit f217cd4

Please sign in to comment.