Small stylistic changes to graph

src/components/charts/CandleChart.vue

@@ -187,16 +187,15 @@ export default class CandleChart extends Vue {
         {
           left: MARGINLEFT,
           right: MARGINRIGHT,
-          // height: subplotCount === 0 ? '70%' : '60%',
-          // top: '0px',
+          // Grid Layout from bottom to top
           bottom: `${subplotCount * 10 + 10}%`,
-          // bottom: '150px',
         },
         {
           // Volume
           left: MARGINLEFT,
           right: MARGINRIGHT,
-          top: subplotCount === 0 ? '80%' : '70%',
+          // Grid Layout from bottom to top
+          bottom: `${subplotCount * 10}%`,
           height: '10%',
         },
       ],
@@ -375,8 +374,8 @@ export default class CandleChart extends Vue {
           options.grid.push({
             left: MARGINLEFT,
             right: MARGINRIGHT,
-            bottom: `${(plotIndex - 1) * 50}px`,
-            height: '8%',
+            bottom: `${plotIndex * 50}px`,
+            height: '50px',
           });
         }
         Object.entries(value).forEach(([sk, sv]) => {
@@ -418,7 +417,8 @@ export default class CandleChart extends Vue {
     //   options.xAxis[options.xAxis.length - 1].axisTick.show = true;
     // }
     if (options.grid && Array.isArray(options.grid)) {
-      options.grid[options.grid.length - 1].bottom = '75px';
+      // Last subplot is bottom
+      options.grid[options.grid.length - 1].bottom = '50px';
       delete options.grid[options.grid.length - 1].top;
     }
 

src/components/charts/CandleChartContainer.vue

@@ -32,7 +32,7 @@
       </div>
 
       <div class="col-mb-2 mr-2">
-        <b-checkbox v-model="useUTC" title="Use UTC for graph">useUtc</b-checkbox>
+        <b-checkbox v-model="useUTC" title="Use UTC for graph">useUTC</b-checkbox>
       </div>
       <div class="col-mb-2 mr-1">
         <b-button size="sm" title="Plot configurator" @click="showConfigurator">&#9881;</b-button>
@@ -40,12 +40,14 @@
     </div>
     <div class="row mr-1 ml-1 h-100">
       <CandleChart
+        v-if="hasDataset"
         :dataset="dataset"
         :trades="trades"
         :plot-config="plotConfig"
         :use-u-t-c="useUTC"
       >
       </CandleChart>
+      <label v-else style="margin: auto auto; font-size: 1.5rem">No data available</label>
     </div>
   </div>
 </template>
@@ -160,4 +162,4 @@ export default class CandleChartContainer extends Vue {
 }
 </script>
 
-<style></style>
+<style scoped></style>

src/views/Graphs.vue

@@ -31,6 +31,7 @@ import CandleChartContainer from '@/components/charts/CandleChartContainer.vue';
 import TimeRangeSelect from '@/components/ftbot/TimeRangeSelect.vue';
 import StrategyList from '@/components/ftbot/StrategyList.vue';
 import { AvailablePairPayload, AvailablePairResult, WhitelistResponse } from '@/types';
+import { BotStoreGetters } from '@/store/modules/ftbot';
 
 const ftbot = namespace('ftbot');
 
@@ -38,8 +39,6 @@ const ftbot = namespace('ftbot');
   components: { CandleChartContainer, StrategyList, TimeRangeSelect },
 })
 export default class Graphs extends Vue {
-  timeframe = '5m';
-
   historicView = false;
 
   strategy = '';
@@ -52,6 +51,8 @@ export default class Graphs extends Vue {
 
   @ftbot.State trades;
 
+  @ftbot.Getter [BotStoreGetters.timeframe]!: string;
+
   @ftbot.Action public getWhitelist!: () => Promise<WhitelistResponse>;
 
   @ftbot.Action public getAvailablePairs!: (