fix: all charts should have equal height

freqtrade · Dec 29, 2024 · aaae13c · aaae13c
1 parent d8a4f27
commit aaae13c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/components/charts/MarketChangeChart.vue b/src/components/charts/MarketChangeChart.vue
@@ -18,7 +18,6 @@ import {
 
 import type { BacktestMarketChange } from '@/types';
 import type { EChartsOption } from 'echarts';
-import { useElementSize } from '@vueuse/core';
 
 use([
   LineChart,
@@ -49,10 +48,9 @@ const props = defineProps({
 
 const settingsStore = useSettingsStore();
 
-const dailyChart = ref(null);
-const { width } = useElementSize(dailyChart);
+const marketChangeChart = ref(null);
 
-const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
+const marketChangeOptions: ComputedRef<EChartsOption> = computed(() => {
   if (!props.marketChangeData) {
     return {};
   }
@@ -145,16 +143,16 @@ const dailyChartOptions: ComputedRef<EChartsOption> = computed(() => {
 <template>
   <ECharts
     v-if="marketChangeData?.data"
-    ref="dailyChart"
-    :option="dailyChartOptions"
+    ref="marketChangeChart"
+    :option="marketChangeOptions"
     :theme="settingsStore.chartTheme"
-    :style="{ height: width * 0.6 + 'px' }"
     autoresize
   />
 </template>
 
 <style lang="scss" scoped>
 .echarts {
   min-height: 240px;
+  height: 100%;
 }
 </style>
diff --git a/src/components/ftbot/BacktestGraphs.vue b/src/components/ftbot/BacktestGraphs.vue
@@ -14,13 +14,22 @@ const { state: marketChangeData } = useAsyncState(
 </script>
 <template>
   <div class="text-center flex-fill d-flex flex-column h-100 gap-1">
-    <TradesLogChart :trades="trades" class="flex-grow-1" />
-    <CumProfitChart :trades="trades" class="flex-grow-1" :show-title="true" />
+    <TradesLogChart :trades="trades" class="flex-grow-1 chart-equal-height" />
+    <CumProfitChart :trades="trades" class="flex-grow-1 chart-equal-height" :show-title="true" />
     <MarketChangeChart
       v-if="marketChangeData"
       :market-change-data="marketChangeData"
-      class="flex-grow-1"
+      class="flex-grow-1 chart-equal-height"
+    />
+    <ProfitDistributionChart
+      class="flex-grow-1 chart-equal-height"
+      :trades="trades"
+      :show-title="true"
     />
-    <ProfitDistributionChart class="flex-grow-1" :trades="trades" :show-title="true" />
   </div>
 </template>
+<style scoped lang="scss">
+.chart-equal-height {
+  min-height: 300px !important;
+}
+</style>