diff --git a/src/components/ui/AppChart.vue b/src/components/ui/AppChart.vue
index e73462ee3e..7d7bcdadc8 100644
--- a/src/components/ui/AppChart.vue
+++ b/src/components/ui/AppChart.vue
@@ -9,8 +9,8 @@
ref="chart"
style="overflow: initial;"
:option="opts"
- :update-options="{ notMerge: true }"
- :init-options="{ renderer: 'canvas' }"
+ :update-options="updateOptions"
+ :init-options="initOptions"
autoresize
/>
@@ -39,6 +39,12 @@ export default class AppChart extends Vue {
@Ref('chart')
readonly chart!: ECharts
+ // Stable references so component re-renders don't make vue-echarts dispose/
+ // re-init the chart or re-apply the options, both of which would wipe the
+ // imperatively-set dataset and blank the chart.
+ readonly updateOptions = Object.freeze({ notMerge: true })
+ readonly initOptions = Object.freeze({ renderer: 'canvas' })
+
ready = false
@Watch('data')
diff --git a/src/components/widgets/bedmesh/BedMeshChart.vue b/src/components/widgets/bedmesh/BedMeshChart.vue
index f9e4228179..fd0d703a0d 100644
--- a/src/components/widgets/bedmesh/BedMeshChart.vue
+++ b/src/components/widgets/bedmesh/BedMeshChart.vue
@@ -8,8 +8,8 @@
@@ -44,6 +44,11 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
@Ref('chart')
readonly chart!: ECharts
+ // Stable references so component re-renders don't make vue-echarts dispose/
+ // re-init the chart, which would reset the 3D camera (rotation/zoom) state.
+ readonly updateOptions = Object.freeze({ notMerge: false })
+ readonly initOptions = Object.freeze({ renderer: 'canvas' })
+
get flatSurface (): boolean {
return this.$typedState.mesh.flatSurface
}
diff --git a/src/components/widgets/thermals/ThermalChart.vue b/src/components/widgets/thermals/ThermalChart.vue
index 6085f668ba..cbbe352f51 100644
--- a/src/components/widgets/thermals/ThermalChart.vue
+++ b/src/components/widgets/thermals/ThermalChart.vue
@@ -9,13 +9,31 @@
ref="chart"
style="overflow: initial;"
:option="options"
- :update-options="{ notMerge: true }"
- :init-options="{ renderer: 'canvas' }"
+ :update-options="updateOptions"
+ :init-options="initOptions"
autoresize
@legendselectchanged="handleLegendSelectChanged"
@legendselected="handleLegendSelectChanged"
@legendunselected="handleLegendSelectChanged"
/>
+
+
+
+
+
+ {{ paused ? '$resume' : '$pause' }}
+
+
+ {{ paused ? $t('app.general.btn.resume') : $t('app.general.btn.pause') }}
+
+
@@ -34,10 +52,25 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
@Ref('chart')
readonly chart!: ECharts
+ // Stable references so component re-renders (e.g. toggling pause) don't cause
+ // vue-echarts to dispose/re-init the chart or re-apply the options, both of
+ // which would wipe the imperatively-set dataset and blank the chart.
+ readonly updateOptions = Object.freeze({ notMerge: true })
+ readonly initOptions = Object.freeze({ renderer: 'canvas' })
+
loading = false
+ paused = false
series: LineSeriesOption[] = []
initialSelected: Record = {}
+ togglePause () {
+ this.paused = !this.paused
+
+ if (!this.paused) {
+ this.onDataChange(this.chartData)
+ }
+ }
+
handleLegendSelectChanged (event: { selected: Record }) {
this.$typedDispatch('charts/saveSelectedLegends', event.selected)
@@ -73,7 +106,11 @@ export default class ThermalChart extends Mixins(BrowserMixin) {
@Watch('chartData')
onDataChange (data: any) {
- if (this.chart && !this.loading) {
+ if (
+ this.chart &&
+ !this.loading &&
+ !this.paused
+ ) {
this.chart.setOption({
dataset: {
source: data
@@ -433,6 +470,16 @@ export default class ThermalChart extends Mixins(BrowserMixin) {