Convert CAndleStickChart to typescript

src/components/ftbot/CandleChart.vue

@@ -6,49 +6,34 @@
   </div>
 </template>
 
-<script>
-import { timestampms } from '@/shared/formatters';
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
 import ECharts from 'vue-echarts';
+import { timestampms } from '../../shared/formatters';
+import { PlotConfig } from '../../store/types';
 import randomColor from '../../shared/randomColor';
 import 'echarts';
 
 const MARGINLEFT = '5%';
 const MARGINRIGHT = '4%';
 
-export default {
-  name: 'CandleChart',
+@Component({
   components: { 'v-chart': ECharts },
-  props: {
-    pair: {
-      type: String,
-      required: true,
-    },
-    timeframe: {
-      type: String,
-      required: true,
-    },
-    dataset: {
-      type: Object,
-      required: true,
-    },
-    plotConfig: {
-      type: Object,
-      required: false,
-      default() {
-        return {};
-      },
-    },
-  },
+})
+export default class CandleChart extends Vue {
+  @Prop({ required: true }) readonly pair: string = '';
 
-  data() {
-    return {};
-  },
-  computed: {
-    hasData() {
+  @Prop({ required: true }) readonly timeframe: string = '';
+
+  @Prop({ required: true }) readonly dataset: Record<string, any> = {};
+
+  @Prop({ required: false }) readonly plotConfig!: PlotConfig;
+
+  get hasData() {
     return this.dataset !== null && typeof this.dataset === 'object';
-    },
+  }
 
-    chartOptions() {
+  get chartOptions() {
     if (!this.hasData) {
       return {};
     }
@@ -67,16 +52,16 @@ export default {
     const colBuy = this.dataset.columns.findIndex((el) => el === 'buy');
     const colSell = this.dataset.columns.findIndex((el) => el === 'sell');
     // Plot data
-      const buyData = [];
-      const sellData = [];
+    const buyData = [] as Array<number>[];
+    const sellData = [] as Array<number>[];
 
     const subPlots = {
-        legend: [],
-        grid: [],
-        yaxis: [],
-        xaxis: [],
-        xaxisIndex: [],
-        series: [],
+      legend: [] as string[],
+      grid: [] as object[],
+      yaxis: [] as object[],
+      xaxis: [] as object[],
+      xaxisIndex: [] as number[],
+      series: [] as object[],
     };
 
     if ('main_plot' in this.plotConfig) {
@@ -362,9 +347,8 @@ export default {
         ...subPlots.series,
       ],
     };
-    },
-  },
-};
+  }
+}
 </script>
 
 <style scoped>

src/types/types.ts

@@ -144,7 +144,11 @@ export interface PairHistoryPayload {
   limit: number;
 }
 
-export interface PlotConfig {
-  main_plot?: object;
-  subplots?: object;
+export interface IndicatorConfig {
+  color?: string;
+}
+
+export interface PlotConfig {
+  main_plot: Record<string, IndicatorConfig>;
+  subplots: Record<string, Record<string, IndicatorConfig>>;
 }