Introduce Candlechart container

src/components/ftbot/CandleChart.vue

@@ -1,27 +1,6 @@
 <template>
-  <div class="container-fluid flex-column align-items-stretch d-flex">
+  <div class="row flex-grow-1 chart-wrapper">
-    <b-modal
+    <v-chart v-if="hasData" theme="dark" autoresize :options="chartOptions" />
-      id="plotConfiguratorModal"
-      title="Plot Configurator"
-      ok-only
-      hide-backdrop
-      button-size="sm"
-    >
-      <PlotConfigurator :columns="datasetColumns" v-model="plotConfig" />
-    </b-modal>
-    <div class="row ml-auto">
-      <div class="col-mb-2 mr-2">
-        <b-checkbox v-model="useUTC" title="Use UTC for graph">useUtc</b-checkbox>
-      </div>
-      <div class="col-mb-2 mr-3">
-        <b-button @click="showConfigurator" size="sm" title="Plot configurator">
-          &#9881;
-        </b-button>
-      </div>
-    </div>
-    <div class="row flex-grow-1 chart-wrapper">
-      <v-chart v-if="hasData" theme="dark" autoresize :options="chartOptions" />
-    </div>
   </div>
 </template>
 
@@ -29,12 +8,10 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 import ECharts from 'vue-echarts';
 import * as echarts from 'echarts';
-import { Trade, PairHistory, PlotConfig, EMPTY_PLOTCONFIG } from '@/store/types';
+import { Trade, PairHistory, PlotConfig } from '@/store/types';
 import randomColor from '@/shared/randomColor';
 import { roundTimeframe } from '@/shared/timemath';
 import { timestampms } from '@/shared/formatters';
-import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
-import { loadCustomPlotConfig, loadPlotConfigName } from '@/shared/storage';
 
 import 'echarts';
 
@@ -47,7 +24,7 @@ const downColor = '#ec0000';
 const downBorderColor = '#8A0000';
 
 @Component({
-  components: { 'v-chart': ECharts, PlotConfigurator },
+  components: { 'v-chart': ECharts },
 })
 export default class CandleChart extends Vue {
   @Prop({ required: true }) readonly timeframe!: string;
@@ -58,9 +35,9 @@ export default class CandleChart extends Vue {
 
   @Prop({ required: true }) readonly dataset!: PairHistory;
 
-  plotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
+  @Prop({ default: true }) readonly useUTC!: boolean;
 
-  useUTC = true;
+  @Prop({ required: true }) plotConfig!: PlotConfig;
 
   // Only recalculate buy / sell data if necessary
   signalsCalculated = false;
@@ -69,14 +46,6 @@ export default class CandleChart extends Vue {
 
   sellData = [] as Array<number>[];
 
-  mounted() {
-    this.plotConfig = loadCustomPlotConfig(loadPlotConfigName());
-  }
-
-  showConfigurator() {
-    this.$bvModal.show('plotConfiguratorModal');
-  }
-
   @Watch('timeframe')
   timeframeChanged() {
     this.signalsCalculated = false;

src/components/ftbot/CandleChartContainer.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="container-fluid flex-column align-items-stretch d-flex">
+    <b-modal
+      id="plotConfiguratorModal"
+      title="Plot Configurator"
+      ok-only
+      hide-backdrop
+      button-size="sm"
+    >
+      <PlotConfigurator :columns="datasetColumns" v-model="plotConfig" />
+    </b-modal>
+    <div class="row ml-auto">
+      <div class="col-mb-2 mr-2">
+        <b-checkbox v-model="useUTC" title="Use UTC for graph">useUtc</b-checkbox>
+      </div>
+      <div class="col-mb-2 mr-3">
+        <b-button @click="showConfigurator" size="sm" title="Plot configurator">
+          &#9881;
+        </b-button>
+      </div>
+    </div>
+    <CandleChart
+      :timeframe="timeframe"
+      :timeframems="timeframems"
+      :dataset="dataset"
+      :trades="trades"
+      :plotConfig="plotConfig"
+    >
+    </CandleChart>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Trade, PairHistory, EMPTY_PLOTCONFIG, PlotConfig } from '@/store/types';
+import CandleChart from '@/components/ftbot/CandleChart.vue';
+import PlotConfigurator from '@/components/ftbot/PlotConfigurator.vue';
+import { loadCustomPlotConfig, loadPlotConfigName } from '../../shared/storage';
+
+@Component({ components: { CandleChart, PlotConfigurator } })
+export default class CandleChartContainer extends Vue {
+  @Prop({ required: true }) readonly timeframe!: string;
+
+  @Prop({ required: true }) readonly timeframems!: number;
+
+  @Prop({ required: false, default: [] }) readonly trades!: Array<Trade>;
+
+  @Prop({ required: true }) readonly dataset!: PairHistory;
+
+  useUTC = true;
+
+  plotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
+
+  get datasetColumns() {
+    return this.dataset ? this.dataset.columns : [];
+  }
+
+  mounted() {
+    this.plotConfig = loadCustomPlotConfig(loadPlotConfigName());
+  }
+
+  showConfigurator() {
+    this.$bvModal.show('plotConfiguratorModal');
+  }
+}
+</script>
+
+<style></style>

src/views/Graphs.vue

@@ -22,14 +22,14 @@
     </div>
 
     <div class="row">
-      <CandleChart
+      <CandleChartContainer
         :pair="pair"
         :timeframe="timeframe"
         :timeframems="timeframems"
         :dataset="dataset"
         :trades="trades"
       >
-      </CandleChart>
+      </CandleChartContainer>
     </div>
   </div>
 </template>
@@ -37,7 +37,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
-import CandleChart from '@/components/ftbot/CandleChart.vue';
+import CandleChartContainer from '@/components/ftbot/CandleChartContainer.vue';
 import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
 import StrategyList from '@/components/ftbot/StrategyList.vue';
 import { AvailablePairPayload, PairCandlePayload, PairHistoryPayload } from '@/store/types';
@@ -45,7 +45,7 @@ import { AvailablePairPayload, PairCandlePayload, PairHistoryPayload } from '@/s
 const ftbot = namespace('ftbot');
 
 @Component({
-  components: { CandleChart, StrategyList, TimeRangeSelect },
+  components: { CandleChartContainer, StrategyList, TimeRangeSelect },
 })
 export default class Graphs extends Vue {
   pair = 'XRP/USDT';