Skip to content

Commit

Permalink
fix: temp chart selected legends now work properly after echarts upgrade
Browse files Browse the repository at this point in the history 
Signed-off-by: Craig Bassett <[email protected]>
  • Loading branch information
@cadriel
cadriel committed Jun 16, 2021
1 parent 6c295c5 commit 8906abd
Showing 1 changed file with 45 additions and 78 deletions.
123 changes: 45 additions & 78 deletions src/components/widgets/thermals/ThermalChart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
:initOpts="{ renderer: 'svg' }"
:events="[
['legendselectchanged', handleLegendSelectChange ]
]">
]"
>
</ECharts>
</div>
</template>
Expand All @@ -22,17 +23,25 @@ export default class ThermalChart extends Vue {
@Prop({ type: String, default: '100%' })
height!: string;
loading = true
options: any = {}
loading = false
series: any[] = []
initialSelected: any = {}
handleLegendSelectChange (e: { name: string; type: string; selected: {[index: string]: boolean } }) {
console.log('legends changed')
this.$store.dispatch('charts/saveSelectedLegends', e.selected)
let right = (this.isMobile) ? 15 : 20
if (this.showPowerAxis(e.selected)) {
right = (this.isMobile) ? 25 : 45
}
if (
this.chart &&
!this.loading
) {
this.chart.setOption({
grid: this.grid,
grid: { right },
yAxis: [
{},
{ show: this.showPowerAxis(e.selected) }
Expand All @@ -50,30 +59,6 @@ export default class ThermalChart extends Vue {
return this.$store.getters['charts/getChartData']
}
get chartSelectedLegends () {
return this.$store.getters['charts/getSelectedLegends']
}
get chartRetension () {
return this.$store.getters['charts/getChartRetention']
}
get grid () {
let right = 0
if (this.showPowerAxis(this.chartSelectedLegends)) {
right = (this.isMobile) ? 25 : 45
} else {
right = (this.isMobile) ? 15 : 20
}
return {
top: 20,
left: (this.isMobile) ? 25 : 45,
right,
bottom: (this.isMobile) ? 52 : 38
}
}
@Watch('chartData')
onDataChange (data: any) {
if (this.chart && !this.loading) {
Expand All @@ -98,9 +83,6 @@ export default class ThermalChart extends Vue {
}
init () {
// Create the base options.
this.initOptions()
// Create the series and associated legends.
const dataKeys = Object.keys(this.chartData[0])
const keys = this.$store.getters['printer/getChartableSensors'] as string[]
Expand All @@ -109,26 +91,19 @@ export default class ThermalChart extends Vue {
let label = key
if (key.includes(' ')) label = key.split(' ')[1]
this.createSeries(label, key)
if (dataKeys.includes(label + 'Target')) this.createSeries(label + 'Target', key)
if (dataKeys.includes(label + 'Power')) this.createSeries(label + 'Power', key)
if (dataKeys.includes(label + 'Speed')) this.createSeries(label + 'Speed', key)
this.series.push(this.createSeries(label, key))
if (dataKeys.includes(label + 'Target')) this.series.push(this.createSeries(label + 'Target', key))
if (dataKeys.includes(label + 'Power')) this.series.push(this.createSeries(label + 'Power', key))
if (dataKeys.includes(label + 'Speed')) this.series.push(this.createSeries(label + 'Speed', key))
})
// Re-apply the legend state in the store after the series has redefined the legends.
this.$store.dispatch('charts/saveSelectedLegends', this.options.legend.selected)
// Make sure we enable / disable the y axis.
if (this.showPowerAxis(this.options.legend.selected)) {
this.options.yAxis[1].show = true
}
}
initOptions () {
get options () {
const darkMode = this.$store.state.config.uiSettings.theme.isDark
const fontSize = (this.isMobile) ? 13 : 14
const lineOpacity = 0.2
let labelBackground = 'rgba(10,10,10,0.85)'
let labelBackground = 'rgba(10,10,10,0.65)'
const borderColor = (darkMode) ? 'rgba(0,0,0,0.85)' : 'rgba(255,255,255,0.85)'
let fontColor = 'rgba(255,255,255,0.25)'
let lineColor = '#ffffff'
if (!darkMode) {
Expand All @@ -137,8 +112,19 @@ export default class ThermalChart extends Vue {
lineColor = '#000000'
}
this.options = {
grid: this.grid,
let right = (this.isMobile) ? 15 : 20
if (this.showPowerAxis(this.initialSelected)) {
right = (this.isMobile) ? 25 : 45
}
const grid = {
top: 20,
left: (this.isMobile) ? 25 : 45,
right,
bottom: (this.isMobile) ? 52 : 38
}
const options = {
grid,
legend: {
show: false,
top: 0,
Expand All @@ -147,13 +133,13 @@ export default class ThermalChart extends Vue {
fontSize,
color: fontColor
},
selected: {}
selected: this.initialSelected
},
tooltip: {
trigger: 'axis',
confine: false,
backgroundColor: labelBackground,
borderColor: labelBackground,
borderColor,
textStyle: {
color: fontColor,
fontSize
Expand Down Expand Up @@ -248,7 +234,7 @@ export default class ThermalChart extends Vue {
align: 'right'
},
nameGap: 8,
show: false,
show: this.showPowerAxis(this.initialSelected),
type: 'value',
position: 'right',
splitLine: {
Expand All @@ -271,26 +257,25 @@ export default class ThermalChart extends Vue {
boundaryGap: [0, '100%']
}
],
dataset: {
source: this.chartData
},
dataZoom: [{
type: 'inside',
zoomOnMouseWheel: 'shift'
}],
series: []
series: this.series
}
return options
}
createSeries (label: string, key: string) {
// Grab the color
const color = Vue.$colorset.next(getKlipperType(key), key)
const id = this.options.series.length + 1
// const id = options.series.length + 1
// Base properties
const series: any = {
name: label,
id,
// id,
type: 'line',
yAxisIndex: 0,
showSymbol: false,
Expand Down Expand Up @@ -339,16 +324,16 @@ export default class ThermalChart extends Vue {
// Set the initial legend state (power and speed default off)
const storedLegends = this.$store.getters['charts/getSelectedLegends']
if (storedLegends[label] !== undefined) {
this.options.legend.selected[label] = storedLegends[label]
this.initialSelected[label] = storedLegends[label]
} else {
this.options.legend.selected[label] = !(
this.initialSelected[label] = !(
label.toLowerCase().endsWith('power') ||
label.toLowerCase().endsWith('speed')
)
}
// Push the series into our options object.
this.options.series.push(series)
return series
}
showPowerAxis (selected: any) {
Expand All @@ -368,24 +353,6 @@ export default class ThermalChart extends Vue {
}
}
legendSelect (name: string) {
if (this.chart) {
this.chart.dispatchAction({
type: 'legendSelect',
name
})
}
}
legendUnSelect (name: string) {
if (this.chart) {
this.chart.dispatchAction({
type: 'legendUnSelect',
name
})
}
}
tooltipPosition (pos: any, params: any, el: HTMLElement, elRect: any, size: any) {
const obj: { [index: string]: any } = { top: 0 }
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10
Expand All @@ -406,7 +373,7 @@ export default class ThermalChart extends Vue {
) {
text += `
<div>
<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>
${param.marker}
<span style="font-size:16px;color:#666;font-weight:400;margin-left:2px">
${param.seriesName}:
</span>
Expand Down

0 comments on commit 8906abd

Please sign in to comment.