From 0cef5e780d27b13dc05fb84f2011200a5e78ae04 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Sun, 17 Apr 2022 08:55:56 +0200
Subject: [PATCH] composition: tradesLog

---
 src/components/charts/TradesLog.vue | 251 ++++++++++++++--------------
 1 file changed, 126 insertions(+), 125 deletions(-)

diff --git a/src/components/charts/TradesLog.vue b/src/components/charts/TradesLog.vue
index c68088a4..aa8d041d 100644
--- a/src/components/charts/TradesLog.vue
+++ b/src/components/charts/TradesLog.vue
@@ -3,9 +3,6 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { Getter } from 'vuex-class';
-
 import ECharts from 'vue-echarts';
 import { EChartsOption } from 'echarts';
 
@@ -23,7 +20,8 @@ import {
 } from 'echarts/components';
 
 import { ClosedTrade } from '@/types';
-
+import { defineComponent, computed } from '@vue/composition-api';
+import { useGetters } from 'vuex-composition-helpers';
 import { timestampms } from '@/shared/formatters';
 
 use([
@@ -45,142 +43,145 @@ use([
 const CHART_PROFIT = 'Profit %';
 const CHART_COLOR = '#9be0a8';
 
-@Component({
+export default defineComponent({
+  name: 'TradesLogChart',
   components: {
     'v-chart': ECharts,
   },
-})
-export default class TradesLogChart extends Vue {
-  @Prop({ required: true }) trades!: ClosedTrade[];
+  props: {
+    trades: { required: true, type: Array as () => ClosedTrade[] },
+    showTitle: { default: true, type: Boolean },
+  },
+  setup(props) {
+    const { getChartTheme } = useGetters(['getChartTheme']);
+    const chartData = computed(() => {
+      const res: (number | string)[][] = [];
+      const sortedTrades = props.trades
+        .slice(0)
+        .sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
+      for (let i = 0, len = sortedTrades.length; i < len; i += 1) {
+        const trade = sortedTrades[i];
+        const entry = [
+          i,
+          (trade.profit_ratio * 100).toFixed(2),
+          trade.pair,
+          trade.botName,
+          timestampms(trade.close_timestamp),
+          trade.is_short === undefined || !trade.is_short ? 'Long' : 'Short',
+        ];
+        res.push(entry);
+      }
+      return res;
+    });
 
-  @Prop({ default: true, type: Boolean }) showTitle!: boolean;
-
-  @Getter getChartTheme!: string;
-
-  get chartData() {
-    const res: (number | string)[][] = [];
-    const sortedTrades = this.trades
-      .slice(0)
-      .sort((a, b) => (a.close_timestamp > b.close_timestamp ? 1 : -1));
-    for (let i = 0, len = sortedTrades.length; i < len; i += 1) {
-      const trade = sortedTrades[i];
-      const entry = [
-        i,
-        (trade.profit_ratio * 100).toFixed(2),
-        trade.pair,
-        trade.botName,
-        timestampms(trade.close_timestamp),
-        trade.is_short === undefined || !trade.is_short ? 'Long' : 'Short',
-      ];
-      res.push(entry);
-    }
-    return res;
-  }
-
-  get chartOptions(): EChartsOption {
-    const { chartData } = this;
-    // Show a maximum of 50 trades by default - allowing to zoom out further.
-    const datazoomStart = chartData.length > 0 ? (1 - 50 / chartData.length) * 100 : 100;
-    return {
-      title: {
-        text: 'Trades log',
-        show: this.showTitle,
-      },
-      backgroundColor: 'rgba(0, 0, 0, 0)',
-      dataset: {
-        dimensions: ['date', 'profit'],
-        source: chartData,
-      },
-      tooltip: {
-        trigger: 'axis',
-        formatter: (params) => {
-          const botName = params[0].data[3] ? ` | ${params[0].data[3]}` : '';
-          return `${params[0].data[2]} | ${params[0].data[5]} ${botName}<br>${params[0].data[4]}<br>Profit ${params[0].data[1]} %`;
+    const chartOptions = computed((): EChartsOption => {
+      // const { chartData } = this;
+      // Show a maximum of 50 trades by default - allowing to zoom out further.
+      const datazoomStart =
+        chartData.value.length > 0 ? (1 - 50 / chartData.value.length) * 100 : 100;
+      return {
+        title: {
+          text: 'Trades log',
+          show: props.showTitle,
         },
-        axisPointer: {
-          type: 'line',
-          label: {
-            backgroundColor: '#6a7985',
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        dataset: {
+          dimensions: ['date', 'profit'],
+          source: chartData.value,
+        },
+        tooltip: {
+          trigger: 'axis',
+          formatter: (params) => {
+            const botName = params[0].data[3] ? ` | ${params[0].data[3]}` : '';
+            return `${params[0].data[2]} | ${params[0].data[5]} ${botName}<br>${params[0].data[4]}<br>Profit ${params[0].data[1]} %`;
+          },
+          axisPointer: {
+            type: 'line',
+            label: {
+              backgroundColor: '#6a7985',
+            },
           },
         },
-      },
-      xAxis: {
-        type: 'value',
-        show: false,
-      },
-      yAxis: [
-        {
+        xAxis: {
           type: 'value',
-          name: CHART_PROFIT,
-          splitLine: {
-            show: false,
+          show: false,
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: CHART_PROFIT,
+            splitLine: {
+              show: false,
+            },
+            nameRotate: 90,
+            nameLocation: 'middle',
+            nameGap: 30,
           },
-          nameRotate: 90,
-          nameLocation: 'middle',
-          nameGap: 30,
+        ],
+        grid: {
+          bottom: 80,
         },
-      ],
-      grid: {
-        bottom: 80,
-      },
-      dataZoom: [
-        {
-          type: 'inside',
-          start: datazoomStart,
-          end: 100,
-        },
-        {
-          show: true,
-          type: 'slider',
-          bottom: 10,
-          start: datazoomStart,
-          end: 100,
-        },
-      ],
-      visualMap: [
-        {
-          show: true,
-          seriesIndex: 0,
-          pieces: [
-            {
-              max: 0.0,
-              color: '#f84960',
-            },
-            {
-              min: 0.0,
-              color: '#2ed191',
-            },
-          ],
-        },
-      ],
-      series: [
-        {
-          type: 'bar',
-          name: CHART_PROFIT,
-          barGap: '0%',
-          barCategoryGap: '0%',
-          animation: false,
-          label: {
+        dataZoom: [
+          {
+            type: 'inside',
+            start: datazoomStart,
+            end: 100,
+          },
+          {
             show: true,
-            position: 'top',
-            rotate: 90,
-            offset: [7.5, 7.5],
-            formatter: '{@[1]} %',
-            color: this.getChartTheme === 'dark' ? '#c2c2c2' : '#3c3c3c',
+            type: 'slider',
+            bottom: 10,
+            start: datazoomStart,
+            end: 100,
           },
-          encode: {
-            x: 0,
-            y: 1,
+        ],
+        visualMap: [
+          {
+            show: true,
+            seriesIndex: 0,
+            pieces: [
+              {
+                max: 0.0,
+                color: '#f84960',
+              },
+              {
+                min: 0.0,
+                color: '#2ed191',
+              },
+            ],
           },
+        ],
+        series: [
+          {
+            type: 'bar',
+            name: CHART_PROFIT,
+            barGap: '0%',
+            barCategoryGap: '0%',
+            animation: false,
+            label: {
+              show: true,
+              position: 'top',
+              rotate: 90,
+              offset: [7.5, 7.5],
+              formatter: '{@[1]} %',
+              color: getChartTheme.value === 'dark' ? '#c2c2c2' : '#3c3c3c',
+            },
+            encode: {
+              x: 0,
+              y: 1,
+            },
 
-          itemStyle: {
-            color: CHART_COLOR,
+            itemStyle: {
+              color: CHART_COLOR,
+            },
           },
-        },
-      ],
-    };
-  }
-}
+        ],
+      };
+    });
+
+    return { getChartTheme, chartData, chartOptions };
+  },
+});
 </script>
 
 <style scoped>