Add Profit-distribution plot to backtesting

src/components/charts/ProfitDistributionChart.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="d-flex flex-column h-100">
-    <div class="flex-grow-1">
+  <div class="d-flex flex-column h-100 position-relative">
+    <div class="flex-grow-1 order-2">
       <v-chart v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
     </div>
     <b-form-group
-      class="w-25 position-absolute"
+      class="w-25 order-1"
+      :class="showTitle ? 'ml-5 pl-5' : 'position-absolute'"
       label="Bins"
       label-for="input-bins"
       label-cols="6"
@@ -61,7 +62,6 @@ export default defineComponent({
     showTitle: { default: true, type: Boolean },
   },
   setup(props) {
-    console.log('setup start');
     const settingsStore = useSettingsStore();
     // registerTransform(ecStat.transform.histogram);
     // console.log(profits);
@@ -77,7 +77,7 @@ export default defineComponent({
     const chartOptions = computed((): EChartsOption => {
       const chartOptionsLoc: EChartsOption = {
         title: {
-          text: 'Cumulative Profit',
+          text: 'Profit distribution',
           show: props.showTitle,
         },
         backgroundColor: 'rgba(0, 0, 0, 0)',

src/views/Backtesting.vue

@@ -265,6 +265,12 @@
           class="cum-profit"
           :show-title="true"
         />
+        <hr />
+        <ProfitDistributionChart
+          class="mt-3"
+          :trades="botStore.activeBot.selectedBacktestResult.trades"
+          :show-title="true"
+        />
       </div>
     </div>
 
@@ -349,6 +355,7 @@ import TimeframeSelect from '@/components/ftbot/TimeframeSelect.vue';
 import TradeList from '@/components/ftbot/TradeList.vue';
 import TradeListNav from '@/components/ftbot/TradeListNav.vue';
 import BacktestHistoryLoad from '@/components/ftbot/BacktestHistoryLoad.vue';
+import ProfitDistributionChart from '@/components/charts/ProfitDistributionChart.vue';
 
 import { BacktestPayload, ChartSliderPosition, Trade } from '@/types';
 
@@ -366,6 +373,7 @@ export default defineComponent({
     CandleChartContainer,
     CumProfitChart,
     TradesLogChart,
+    ProfitDistributionChart,
     StrategySelect,
     PairSummary,
     TimeframeSelect,