Fix errors when loading graphs.

Errors due to the parent element having zero width / height or
rendering too early.
This commit is contained in:
D. Berge
2025-08-22 15:54:17 +02:00
parent 52f49e6799
commit 2734870871
2 changed files with 34 additions and 16 deletions

View File

@@ -39,7 +39,8 @@ export default {
default:
return {
editable: false,
displaylogo: false
displaylogo: false,
responsive: true
};
}
},
@@ -48,7 +49,8 @@ export default {
const base = {
font: {
color: this.$vuetify.theme.isDark ? "#fff" : undefined
}
},
autosize: true
};
switch (this.facet) {
@@ -274,18 +276,25 @@ export default {
replot () {
if (this.plotted) {
const ref = this.$refs.graph;
Plotly.relayout(ref, {
width: ref.clientWidth,
height: ref.clientHeight
});
if (ref && ref.clientWidth > 0 && ref.clientHeight > 0) {
Plotly.relayout(ref, {
width: ref.clientWidth,
height: ref.clientHeight
});
}
}
}
},
mounted () {
this.resizeObserver = new ResizeObserver(this.replot)
this.resizeObserver.observe(this.$refs.graph);
this.$nextTick( () => {
if (this.items?.length) {
this.plot();
}
this.resizeObserver = new ResizeObserver(this.replot)
this.resizeObserver.observe(this.$refs.graph);
});
},
beforeDestroy () {

View File

@@ -36,7 +36,8 @@ export default {
config () {
return {
editable: false,
displaylogo: false
displaylogo: false,
responsive: true
};
},
@@ -53,7 +54,8 @@ export default {
title: "Time (s)"
},
plot_bgcolor:"rgba(0,0,0,0)",
paper_bgcolor:"rgba(0,0,0,0)"
paper_bgcolor:"rgba(0,0,0,0)",
autosize: true
};
},
@@ -154,10 +156,12 @@ export default {
replot () {
if (this.plotted) {
const ref = this.$refs.graph;
Plotly.relayout(ref, {
width: ref.clientWidth,
height: ref.clientHeight
});
if (ref && ref.clientWidth > 0 && ref.clientHeight > 0) {
Plotly.relayout(ref, {
width: ref.clientWidth,
height: ref.clientHeight
});
}
}
},
@@ -190,8 +194,13 @@ export default {
},
mounted () {
this.resizeObserver = new ResizeObserver(this.replot)
this.resizeObserver.observe(this.$refs.graph);
this.$nextTick( () => {
if (this.items?.length) {
this.plot();
}
this.resizeObserver = new ResizeObserver(this.replot)
this.resizeObserver.observe(this.$refs.graph);
});
},
beforeDestroy () {