Improve cumProfitChart rendering stability

using controlled computed for initial options array

closes #1782

src/components/charts/CumProfitChart.vue

@@ -1,5 +1,11 @@
 <template>
-  <e-charts v-if="trades" ref="chart" autoresize manual-update :theme="settingsStore.chartTheme" />
+  <e-charts
+    v-if="trades"
+    ref="chart"
+    :option="cumProfitChartOptions"
+    :theme="settingsStore.chartTheme"
+    autoresize
+  />
 </template>
 
 <script setup lang="ts">
@@ -27,10 +33,9 @@ import {
   CumProfitDataPerDate,
   Trade,
 } from '@/types';
-import { watchThrottled } from '@vueuse/core';
+import type { ComputedRefWithControl } from '@vueuse/core';
 
 import { formatPrice, timestampToDateString } from '@/shared/formatters';
-import { useColorStore } from '@/stores/colors';
 
 use([
   BarChart,
@@ -199,8 +204,9 @@ function updateChart(initial = false) {
   });
 }
 
-function initializeChart() {
-  chart.value?.setOption({}, { notMerge: true });
+const cumProfitChartOptions: ComputedRefWithControl<EChartsOption> = computedWithControl(
+  () => props.trades,
+  () => {
     const chartOptionsLoc: EChartsOption = {
       title: {
         text: 'Cumulative Profit',
@@ -267,30 +273,32 @@ function initializeChart() {
         },
       ],
     };
-  const chartOptionsLoc1 = generateChart(true);
+
+    const chartOptionsLoc1 = generateChart(false);
     // Merge the series and dataset, but not the rest
     chartOptionsLoc.series = chartOptionsLoc1.series;
     chartOptionsLoc.dataset = chartOptionsLoc1.dataset;
-
-  chart.value?.setOption(chartOptionsLoc, { notMerge: true });
-  updateChart(true);
-}
+    // console.log('computed chartOptionsLoc', chartOptionsLoc);
+    return chartOptionsLoc;
+  },
+);
 
 onMounted(() => {
-  initializeChart();
+  // initializeChart();
 });
 
 watchThrottled(
   () => props.openTrades,
   () => {
+    // cumProfitChartOptions.trigger();
     updateChart();
   },
   { throttle: 60 * 1000 },
 );
 watch(
-  () => props.trades,
+  () => settingsStore.chartTheme,
   () => {
-    updateChart();
+    cumProfitChartOptions.trigger();
   },
 );
 </script>