Candlechart to script setup

src/components/charts/CandleChart.vue

@@ -4,8 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { Trade, PairHistory, PlotConfig, ChartSliderPosition } from '@/types';
 import randomColor from '@/shared/randomColor';
 import heikinashi from '@/shared/heikinashi';
@@ -71,10 +71,7 @@ const shortEntrySignalColor = '#00ff26';
 const sellSignalColor = '#faba25';
 const shortexitSignalColor = '#faba25';
 
-export default defineComponent({
+const props = defineProps({
-  name: 'CandleChart',
-  components: { 'v-chart': ECharts },
-  props: {
   trades: { required: false, default: () => [], type: Array as () => Trade[] },
   dataset: { required: true, type: Object as () => PairHistory },
   heikinAshi: { required: false, default: false, type: Boolean },
@@ -86,42 +83,40 @@ export default defineComponent({
     type: Object as () => ChartSliderPosition,
     default: () => undefined,
   },
-  },
+});
-  setup(props) {
+const candleChart = ref<typeof ECharts>();
-    const candleChart = ref<typeof ECharts>();
-    const buyData = ref<number[][]>([]);
-    const sellData = ref<number[][]>([]);
-    const chartOptions = ref<EChartsOption>({});
 
-    const strategy = computed(() => {
+const chartOptions = ref<EChartsOption>({});
+
+const strategy = computed(() => {
   return props.dataset ? props.dataset.strategy : '';
-    });
+});
 
-    const pair = computed(() => {
+const pair = computed(() => {
   return props.dataset ? props.dataset.pair : '';
-    });
+});
 
-    const timeframe = computed(() => {
+const timeframe = computed(() => {
   return props.dataset ? props.dataset.timeframe : '';
-    });
+});
 
-    const datasetColumns = computed(() => {
+const datasetColumns = computed(() => {
   return props.dataset ? props.dataset.columns : [];
-    });
+});
 
-    const hasData = computed(() => {
+const hasData = computed(() => {
   return props.dataset !== null && typeof props.dataset === 'object';
-    });
+});
 
-    const filteredTrades = computed(() => {
+const filteredTrades = computed(() => {
   return props.trades.filter((item: Trade) => item.pair === pair.value);
-    });
+});
 
-    const chartTitle = computed(() => {
+const chartTitle = computed(() => {
   return `${strategy.value} - ${pair.value} - ${timeframe.value}`;
-    });
+});
 
-    const updateChart = (initial = false) => {
+const updateChart = (initial = false) => {
   if (!hasData.value) {
     return;
   }
@@ -360,10 +355,7 @@ export default defineComponent({
       // Subplots are added from bottom to top - only the "bottom-most" plot stays at the bottom.
       // const currGridIdx = totalSubplots - plotIndex > 1 ? totalSubplots - plotIndex : plotIndex;
       const currGridIdx = plotIndex;
-          if (
+      if (Array.isArray(chartOptions.value.yAxis) && chartOptions.value.yAxis.length <= plotIndex) {
-            Array.isArray(chartOptions.value.yAxis) &&
-            chartOptions.value.yAxis.length <= plotIndex
-          ) {
         chartOptions.value.yAxis.push({
           scale: true,
           gridIndex: currGridIdx,
@@ -376,10 +368,7 @@ export default defineComponent({
           splitLine: { show: false },
         });
       }
-          if (
+      if (Array.isArray(chartOptions.value.xAxis) && chartOptions.value.xAxis.length <= plotIndex) {
-            Array.isArray(chartOptions.value.xAxis) &&
-            chartOptions.value.xAxis.length <= plotIndex
-          ) {
         chartOptions.value.xAxis.push({
           type: 'time',
           scale: true,
@@ -495,9 +484,9 @@ export default defineComponent({
     replaceMerge: ['series', 'grid', 'yAxis', 'xAxis', 'legend'],
     noMerge: !initial,
   });
-    };
+};
 
-    const initializeChartOptions = () => {
+const initializeChartOptions = () => {
   // Ensure we start empty.
   candleChart.value?.setOption({}, { noMerge: true });
 
@@ -638,9 +627,9 @@ export default defineComponent({
 
   console.log('Initialized');
   updateChart(true);
-    };
+};
 
-    const updateSliderPosition = () => {
+const updateSliderPosition = () => {
   if (!props.sliderPosition) return;
 
   const start = format(
@@ -661,66 +650,53 @@ export default defineComponent({
       endValue: end,
     });
   }
-    };
+};
 
-    // createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
+// const buyData = ref<number[][]>([]);
-    // Calculate Buy and sell Series
+// const sellData = ref<number[][]>([]);
-    // if (!this.signalsCalculated) {
+// createSignalData(colDate: number, colOpen: number, colBuy: number, colSell: number): void {
-    //   // Generate Buy and sell array (using open rate to display marker)
+// Calculate Buy and sell Series
-    //   for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
+// if (!this.signalsCalculated) {
-    //     if (this.dataset.data[i][colBuy] === 1) {
+//   // Generate Buy and sell array (using open rate to display marker)
-    //       this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
+//   for (let i = 0, len = this.dataset.data.length; i < len; i += 1) {
-    //     }
+//     if (this.dataset.data[i][colBuy] === 1) {
-    //     if (this.dataset.data[i][colSell] === 1) {
+//       this.buyData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
-    //       this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
+//     }
-    //     }
+//     if (this.dataset.data[i][colSell] === 1) {
-    //   }
+//       this.sellData.push([this.dataset.data[i][colDate], this.dataset.data[i][colOpen]]);
-    //   this.signalsCalculated = true;
+//     }
-    // }
+//   }
-    // }
+//   this.signalsCalculated = true;
-    onMounted(() => {
+// }
+// }
+onMounted(() => {
   initializeChartOptions();
-    });
+});
 
-    watch(
+watch(
   () => props.useUTC,
   () => initializeChartOptions(),
-    );
+);
 
-    watch(
+watch(
   () => props.dataset,
   () => updateChart(),
-    );
+);
 
-    watch(
+watch(
   () => props.plotConfig,
   () => initializeChartOptions(),
-    );
+);
 
-    watch(
+watch(
   () => props.heikinAshi,
   () => updateChart(),
-    );
+);
 
-    watch(
+watch(
   () => props.sliderPosition,
   () => updateSliderPosition(),
-    );
+);
-
-    return {
-      candleChart,
-      buyData,
-      sellData,
-      strategy,
-      pair,
-      timeframe,
-      datasetColumns,
-      hasData,
-      filteredTrades,
-      chartTitle,
-    };
-  },
-});
 </script>
 
 <style scoped>