Add profitdistribution chart

src/components/charts/ProfitDistributionChart.vue

@@ -0,0 +1,134 @@
+<template>
+  <v-chart v-if="trades" :option="chartOptions" autoresize :theme="settingsStore.chartTheme" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch } from 'vue';
+import ECharts from 'vue-echarts';
+import { EChartsOption } from 'echarts';
+
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { BarChart } from 'echarts/charts';
+import {
+  DatasetComponent,
+  DataZoomComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+} from 'echarts/components';
+
+import { ClosedTrade } from '@/types';
+import { binData } from '@/shared/charts/binCount';
+import { useSettingsStore } from '@/stores/settings';
+
+use([
+  BarChart,
+
+  CanvasRenderer,
+
+  DatasetComponent,
+  DataZoomComponent,
+  LegendComponent,
+  TitleComponent,
+  TooltipComponent,
+]);
+
+// Define Column labels here to avoid typos
+const CHART_PROFIT = 'Trade count';
+
+export default defineComponent({
+  name: 'ProfitDistributionChart',
+  components: {
+    'v-chart': ECharts,
+  },
+  props: {
+    trades: { required: true, type: Array as () => ClosedTrade[] },
+    showTitle: { default: true, type: Boolean },
+  },
+  setup(props) {
+    console.log('setup start');
+    const settingsStore = useSettingsStore();
+    // registerTransform(ecStat.transform.histogram);
+    const profits = props.trades.map((trade) => trade.profit_ratio);
+    // console.log(profits);
+    // const data = [[]];
+
+    const bins = 10;
+    const data = binData(profits, bins);
+    console.log(profits, data);
+
+    const chartOptions = computed((): EChartsOption => {
+      const chartOptionsLoc: EChartsOption = {
+        title: {
+          text: 'Cumulative Profit',
+          show: props.showTitle,
+        },
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        dataset: {
+          source: data,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'line',
+            label: {
+              backgroundColor: '#6a7985',
+            },
+          },
+        },
+        legend: {
+          data: [CHART_PROFIT],
+          right: '5%',
+        },
+        xAxis: {
+          type: 'value',
+          name: 'Profit %',
+          nameLocation: 'middle',
+          nameGap: 25,
+        },
+        yAxis: [
+          {
+            type: 'log',
+            name: CHART_PROFIT,
+            splitLine: {
+              show: false,
+            },
+            nameRotate: 90,
+            nameLocation: 'middle',
+            nameGap: 35,
+          },
+        ],
+        // grid: {
+        // bottom: 80,
+        // },
+
+        series: [
+          {
+            type: 'bar',
+            name: CHART_PROFIT,
+            animation: true,
+            encode: {
+              x: 'x0',
+              y: 'y0',
+            },
+
+            // symbol: 'none',
+          },
+        ],
+      };
+      return chartOptionsLoc;
+    });
+    console.log(chartOptions);
+    return { settingsStore, chartOptions };
+  },
+});
+</script>
+
+<style scoped>
+.echarts {
+  width: 100%;
+  height: 100%;
+  min-height: 150px;
+}
+</style>

src/shared/charts/binCount.ts

@@ -0,0 +1,19 @@
+export function binData(data: number[], bins: number) {
+  const minimum = Math.min(...data);
+  const maximum = Math.max(...data);
+  const binSize = ((maximum - minimum) * 1.01) / bins;
+  // console.log(`data ranges from ${minimum} to ${maximum}, binsize ${binSize}`);
+  // Count occurances an array with [bucketStart, count in this bucket]
+  const baseBins = [...Array(bins).keys()].map((i) => [
+    Math.round((minimum + i * binSize) * 1000) / 1000,
+    0,
+  ]);
+  // console.log(baseBins);
+  for (let i = 0; i < data.length; i++) {
+    const index = Math.min(Math.floor((data[i] - minimum) / binSize), bins - 1);
+    // console.log(data[i], index)
+    baseBins[index][1]++;
+  }
+
+  return baseBins;
+}

src/stores/layout.ts

@@ -15,6 +15,7 @@ export enum DashboardLayout {
   allOpenTrades = 'g-allOpenTrades',
   cumChartChart = 'g-cumChartChart',
   allClosedTrades = 'g-allClosedTrades',
+  profitDistributionChart = 'g-profitDistributionChart',
   tradesLogChart = 'g-TradesLogChart',
 }
 
@@ -42,6 +43,7 @@ const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
   { i: DashboardLayout.allOpenTrades, x: 0, y: 6, w: 8, h: 6 },
   { i: DashboardLayout.cumChartChart, x: 8, y: 6, w: 4, h: 6 },
   { i: DashboardLayout.allClosedTrades, x: 0, y: 12, w: 8, h: 6 },
+  { i: DashboardLayout.profitDistributionChart, x: 8, y: 12, w: 4, h: 6 },
   { i: DashboardLayout.tradesLogChart, x: 0, y: 18, w: 12, h: 4 },
 ];
 
@@ -50,8 +52,9 @@ const DEFAULT_DASHBOARD_LAYOUT_SM: GridItemData[] = [
   { i: DashboardLayout.allOpenTrades, x: 0, y: 6, w: 12, h: 8 },
   { i: DashboardLayout.dailyChart, x: 0, y: 14, w: 12, h: 6 },
   { i: DashboardLayout.cumChartChart, x: 0, y: 20, w: 12, h: 6 },
-  { i: DashboardLayout.tradesLogChart, x: 0, y: 26, w: 12, h: 4 },
+  { i: DashboardLayout.profitDistributionChart, x: 0, y: 26, w: 12, h: 6 },
-  { i: DashboardLayout.allClosedTrades, x: 0, y: 30, w: 12, h: 8 },
+  { i: DashboardLayout.tradesLogChart, x: 0, y: 32, w: 12, h: 4 },
+  { i: DashboardLayout.allClosedTrades, x: 0, y: 36, w: 12, h: 8 },
 ];
 
 const STORE_LAYOUTS = 'ftLayoutSettings';

src/views/Dashboard.vue

@@ -93,6 +93,20 @@
         />
       </DraggableContainer>
     </GridItem>
+    <GridItem
+      :i="gridLayoutProfitDistribution.i"
+      :x="gridLayoutProfitDistribution.x"
+      :y="gridLayoutProfitDistribution.y"
+      :w="gridLayoutProfitDistribution.w"
+      :h="gridLayoutProfitDistribution.h"
+      :min-w="3"
+      :min-h="4"
+      drag-allow-from=".drag-header"
+    >
+      <DraggableContainer header="Profit Distribution">
+        <ProfitDistributionChart :trades="botStore.allTradesSelectedBots" :show-title="false" />
+      </DraggableContainer>
+    </GridItem>
     <GridItem
       :i="gridLayoutTradesLogChart.i"
       :x="gridLayoutTradesLogChart.x"
@@ -118,6 +132,7 @@ import { GridLayout, GridItem, GridItemData } from 'vue-grid-layout';
 import DailyChart from '@/components/charts/DailyChart.vue';
 import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import TradesLogChart from '@/components/charts/TradesLog.vue';
+import ProfitDistributionChart from '@/components/charts/ProfitDistributionChart.vue';
 import BotComparisonList from '@/components/ftbot/BotComparisonList.vue';
 import TradeList from '@/components/ftbot/TradeList.vue';
 import DraggableContainer from '@/components/layout/DraggableContainer.vue';
@@ -133,6 +148,7 @@ export default defineComponent({
     GridItem,
     DailyChart,
     CumProfitChart,
+    ProfitDistributionChart,
     TradesLogChart,
     BotComparisonList,
     TradeList,
@@ -188,7 +204,9 @@ export default defineComponent({
     const gridLayoutCumChart = computed((): GridItemData => {
       return findGridLayout(gridLayout.value, DashboardLayout.cumChartChart);
     });
-
+    const gridLayoutProfitDistribution = computed((): GridItemData => {
+      return findGridLayout(gridLayout.value, DashboardLayout.profitDistributionChart);
+    });
     const gridLayoutTradesLogChart = computed((): GridItemData => {
       return findGridLayout(gridLayout.value, DashboardLayout.tradesLogChart);
     });
@@ -218,6 +236,7 @@ export default defineComponent({
       gridLayoutAllOpenTrades,
       gridLayoutAllClosedTrades,
       gridLayoutCumChart,
+      gridLayoutProfitDistribution,
       gridLayoutTradesLogChart,
       responsiveGridLayouts,
     };

tests/unit/bincount.spec.ts

@@ -0,0 +1,48 @@
+import { binData } from '@/shared/charts/binCount';
+
+describe.only('binCount.ts', () => {
+  it('Bins data as expected', () => {
+    const testData = [1, 1, 2, 3, 5, 6, 8, 10];
+    const res = binData(testData, 3);
+    expect(res.length).toEqual(3);
+    expect(res).toEqual([
+      [1, 4],
+      [4.03, 2],
+      [7.06, 2],
+    ]);
+    expect(res.map((v) => v[1]).reduce((a, b) => a + b)).toEqual(testData.length);
+    const res1 = binData(testData, 5);
+    // expect(res1.length).toEqual(5);
+    expect(res1).toEqual([
+      [1, 3],
+      [2.818, 1],
+      [4.636, 2],
+      [6.454, 1],
+      [8.272, 1],
+    ]);
+    expect(res1.map((v) => v[1]).reduce((a, b) => a + b)).toEqual(testData.length);
+  });
+
+  it('Bins data with negatives', () => {
+    const testData = [1, 1, 2, 3, 5, 6, 8, -1, -3, -5, -4];
+    const res = binData(testData, 3);
+    expect(res.length).toEqual(3);
+    expect(res.map((v) => v[1]).reduce((a, b) => a + b)).toEqual(testData.length);
+    expect(res).toEqual([
+      [-5, 4],
+      [-0.623, 4],
+      [3.753, 3],
+    ]);
+  });
+  it('Bins data performant', () => {
+    const randomSize = 20000;
+    const randomData = Array.from({ length: randomSize }, () => Math.floor(Math.random() * 10));
+    const startTime = performance.now();
+    const res = binData(randomData, 5);
+
+    const endTime = performance.now();
+    expect(endTime - startTime).toBeLessThan(20);
+
+    expect(res.map((v) => v[1]).reduce((a, b) => a + b)).toEqual(randomData.length);
+  });
+});