Fix charts in mobile version

package.json

@@ -28,6 +28,7 @@
     "humanize-duration": "^3.27.1",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.5",
+    "vue-demi": "0.12.1",
     "vue-echarts": "^6.0.0",
     "vue-grid-layout": "^2.3.12",
     "vue-material-design-icons": "^5.0.0",
@@ -35,7 +36,8 @@
     "vue-router": "^3.5.3",
     "vue-select": "^3.16.0",
     "vuex": "^3.6.2",
-    "vuex-class": "^0.3.2"
+    "vuex-class": "^0.3.2",
+    "vuex-composition-helpers": "^1.1.0"
   },
   "devDependencies": {
     "@cypress/webpack-dev-server": "^1.8.0",

src/components/charts/DailyChart.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { Getter } from 'vuex-class';
+import { useGetters } from 'vuex-composition-helpers';
+import { ref, defineComponent, computed, ComputedRef } from '@vue/composition-api';
 import ECharts from 'vue-echarts';
-import { EChartsOption } from 'echarts';
+// import { EChartsOption } from 'echarts';
 
 import { use } from 'echarts/core';
 import { CanvasRenderer } from 'echarts/renderers';
@@ -38,46 +38,46 @@ use([
 const CHART_ABS_PROFIT = 'Absolute profit';
 const CHART_TRADE_COUNT = 'Trade Count';
 
-@Component({
+export default defineComponent({
   components: {
     'v-chart': ECharts,
   },
-})
-export default class DailyChart extends Vue {
-  @Prop({ required: true }) dailyStats!: DailyReturnValue;
+  props: {
+    dailyStats: {
+      type: Object as () => DailyReturnValue,
+      required: true,
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+  },
 
-  @Prop({ default: true, type: Boolean }) showTitle!: boolean;
-
-  @Getter getChartTheme!: string;
-
-  get absoluteMin() {
-    return Number(
-      this.dailyStats.data.reduce(
+  setup(props) {
+    const { getChartTheme } = useGetters(['getChartTheme']);
+    const absoluteMin: ComputedRef<number> = computed(() =>
+      props.dailyStats.data.reduce(
         (min, p) => (p.abs_profit < min ? p.abs_profit : min),
-        this.dailyStats.data[0]?.abs_profit,
+        props.dailyStats.data[0]?.abs_profit,
       ),
     );
-  }
 
-  get absoluteMax() {
-    return Number(
-      this.dailyStats.data.reduce(
+    const absoluteMax: ComputedRef<number> = computed(() =>
+      props.dailyStats.data.reduce(
         (max, p) => (p.abs_profit > max ? p.abs_profit : max),
-        this.dailyStats.data[0]?.abs_profit,
+        props.dailyStats.data[0]?.abs_profit,
       ),
     );
-  }
-
-  get dailyChartOptions(): EChartsOption {
-    return {
+    // : Ref<EChartsOption>
+    const dailyChartOptions = ref({
       title: {
         text: 'Daily profit',
-        show: this.showTitle,
+        show: props.showTitle,
       },
       backgroundColor: 'rgba(0, 0, 0, 0)',
       dataset: {
         dimensions: ['date', 'abs_profit', 'trade_count'],
-        source: this.dailyStats.data,
+        source: props.dailyStats.data,
       },
       tooltip: {
         trigger: 'axis',
@@ -92,10 +92,12 @@ export default class DailyChart extends Vue {
         data: [CHART_ABS_PROFIT, CHART_TRADE_COUNT],
         right: '5%',
       },
-      xAxis: {
-        type: 'category',
-        inverse: true,
-      },
+      xAxis: [
+        {
+          type: 'category',
+          inverse: true,
+        },
+      ],
       visualMap: [
         {
           dimension: 1,
@@ -104,12 +106,12 @@ export default class DailyChart extends Vue {
           pieces: [
             {
               max: 0.0,
-              min: this.absoluteMin,
+              min: absoluteMin.value,
               color: 'red',
             },
             {
               min: 0.0,
-              max: this.absoluteMax,
+              max: absoluteMax.value,
               color: 'green',
             },
           ],
@@ -149,9 +151,14 @@ export default class DailyChart extends Vue {
           yAxisIndex: 1,
         },
       ],
+    });
+
+    return {
+      dailyChartOptions,
+      getChartTheme,
     };
-  }
-}
+  },
+});
 </script>
 
 <style lang="scss" scoped>

src/main.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import './plugins/bootstrap-vue';
-import VueCompositionAPI from '@vue/composition-api';
+import './plugins/composition_api';
 import App from './App.vue';
 import store from './store';
 import router from './router';
@@ -10,7 +10,6 @@ initApi(store);
 
 Vue.config.productionTip = false;
 
-Vue.use(VueCompositionAPI);
 new Vue({
   store,
   router,

src/plugins/composition_api.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
+
+Vue.use(VueCompositionAPI);

yarn.lock

@@ -11370,6 +11370,11 @@ vue-class-component@^7.2.5:
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
   integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
 
+vue-demi@0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c"
+  integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw==
+
 vue-demi@^0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.2.tgz#faa06da53887c493a695b997f4fcb4784a667990"
@@ -11506,6 +11511,11 @@ vuex-class@^0.3.2:
   resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.3.2.tgz#c7e96a076c1682137d4d23a8dcfdc63f220e17a8"
   integrity sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==
 
+vuex-composition-helpers@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/vuex-composition-helpers/-/vuex-composition-helpers-1.1.0.tgz#a18d00192fbb0205630202aade1ec6d5f05d4c28"
+  integrity sha512-36f3MWRCW6QqtP3NLyLbtTPv8qWwbac7gAK9fM4ZtDWTCWuAeBoZEiM+bmPQweAQoMM7GRSXmw/90Egiqg0DCA==
+
 vuex@^3.6.2:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"