Allow timezone selection via settings

src/components/charts/CandleChart.vue

@@ -593,6 +593,11 @@ export default class CandleChart extends Vue {
   //   this.signalsCalculated = true;
   // }
   // }
+
+  @Watch('useUTC')
+  useUTCChanged() {
+    this.initializeChartOptions();
+  }
 }
 </script>
 

src/components/charts/CandleChartContainer.vue

@@ -34,9 +34,6 @@
           </b-select>
         </div>
 
-        <div class="col-mb-2 mr-2 d-flex align-items-center">
-          <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>
         </div>
@@ -47,7 +44,7 @@
           :dataset="dataset"
           :trades="trades"
           :plot-config="plotConfig"
-          :use-u-t-c="useUTC"
+          :use-u-t-c="timezone === 'UTC'"
           :theme="getChartTheme"
         >
         </CandleChart>
@@ -77,8 +74,10 @@ import CandleChart from '@/components/charts/CandleChart.vue';
 import PlotConfigurator from '@/components/charts/PlotConfigurator.vue';
 import { getCustomPlotConfig, getPlotConfigName } from '@/shared/storage';
 import { BotStoreGetters } from '@/store/modules/ftbot';
+import { SettingsGetters } from '@/store/modules/settings';
 
 const ftbot = namespace('ftbot');
+const uiSettingsNs = namespace('uiSettings');
 
 @Component({ components: { CandleChart, PlotConfigurator } })
 export default class CandleChartContainer extends Vue {
@@ -102,8 +101,6 @@ export default class CandleChartContainer extends Vue {
 
   pair = '';
 
-  useUTC = true;
-
   plotConfig: PlotConfig = { ...EMPTY_PLOTCONFIG };
 
   plotConfigName = '';
@@ -128,6 +125,8 @@ export default class CandleChartContainer extends Vue {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   @ftbot.Action public getPairHistory!: (payload: PairHistoryPayload) => void;
 
+  @uiSettingsNs.Getter [SettingsGetters.timezone]: string;
+
   get dataset(): PairHistory {
     if (this.historicView) {
       return this.history[`${this.pair}__${this.timeframe}`];

src/components/ftbot/TradeList.vue

@@ -36,6 +36,12 @@
             {{ `${row.item.pair}${row.item.open_order_id === null ? '' : '*'}` }}
           </span>
         </template>
+        <template #cell(open_timestamp)="row">
+          <DateTimeTZ :date="row.item.open_timestamp" />
+        </template>
+        <template #cell(close_timestamp)="row">
+          <DateTimeTZ :date="row.item.close_timestamp" />
+        </template>
       </b-table>
       <b-pagination
         v-if="!activeTrades"
@@ -53,16 +59,17 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
 import { namespace } from 'vuex-class';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
+import { formatPercent, formatPrice } from '@/shared/formatters';
 import { Trade } from '@/types';
 import DeleteIcon from 'vue-material-design-icons/Delete.vue';
 import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
+import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 import ProfitSymbol from './ProfitSymbol.vue';
 
 const ftbot = namespace('ftbot');
 
 @Component({
-  components: { ProfitSymbol, DeleteIcon, ForceSellIcon },
+  components: { ProfitSymbol, DeleteIcon, ForceSellIcon, DateTimeTZ },
 })
 export default class TradeList extends Vue {
   $refs!: {
@@ -117,7 +124,7 @@ export default class TradeList extends Vue {
 
   // Added to table-fields for historic trades
   closedFields: Record<string, string | Function>[] = [
-    { key: 'close_timestamp', label: 'Close date', formatter: timestampms },
+    { key: 'close_timestamp', label: 'Close date' },
     { key: 'sell_reason', label: 'Close Reason' },
   ];
 
@@ -137,7 +144,7 @@ export default class TradeList extends Vue {
       label: this.activeTrades ? 'Current profit %' : 'Profit %',
       formatter: (value) => formatPercent(value, 3),
     },
-    { key: 'open_timestamp', label: 'Open date', formatter: (value) => timestampms(value) },
+    { key: 'open_timestamp', label: 'Open date' },
     ...(this.activeTrades ? this.openFields : this.closedFields),
   ];
 

src/components/general/DateTimeTZ.vue

@@ -0,0 +1,17 @@
+<template>
+  <span>{{ timestampms(date) }}</span>
+</template>
+
+<script lang="ts">
+import { timestampms } from '@/shared/formatters';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component({})
+export default class DateTimeTZ extends Vue {
+  @Prop({ required: true, type: Number }) date!: number;
+
+  timestampms = timestampms;
+}
+</script>
+
+<style scoped></style>

src/components/layout/NavBar.vue

@@ -58,6 +58,7 @@ import { LayoutActions, LayoutGetters } from '@/store/modules/layout';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import Favico from 'favico.js';
 import { OpenTradeVizOptions, SettingsGetters } from '@/store/modules/settings';
+import { setTimezone } from '@/shared/formatters';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
@@ -95,6 +96,8 @@ export default class NavBar extends Vue {
 
   @uiSettingsNs.Getter [SettingsGetters.openTradesInTitle]: string;
 
+  @uiSettingsNs.Getter [SettingsGetters.timezone]: string;
+
   favicon: Favico | undefined = undefined;
 
   mounted() {
@@ -105,6 +108,7 @@ export default class NavBar extends Vue {
       // Query botstate - this will enable / disable certain modes
       this.getState();
     }
+    setTimezone(this.timezone);
   }
 
   beforeDestroy() {

src/store/modules/settings.ts

@@ -1,3 +1,5 @@
+import { setTimezone } from '@/shared/formatters';
+
 const STORE_UI_SETTINGS = 'ftUISettings';
 
 export enum OpenTradeVizOptions {
@@ -8,14 +10,22 @@ export enum OpenTradeVizOptions {
 
 export enum SettingsGetters {
   openTradesInTitle = 'openTradesInTitle',
+  timezone = 'timezone',
 }
 
 export enum SettingsActions {
   setOpenTradesInTitle = 'setOpenTradesInTitle',
+  setTimeZone = 'setTimeZone',
 }
 
 export enum SettingsMutations {
   setOpenTrades = 'setOpenTrades',
+  setTimeZone = 'setTimeZone',
+}
+
+export interface SettingsType {
+  openTradesInTitle: string;
+  timezone: string;
 }
 
 function getSettings() {
@@ -33,25 +43,39 @@ function updateSetting(key: string, value: string) {
   localStorage.setItem(STORE_UI_SETTINGS, JSON.stringify(settings));
 }
 
+const state: SettingsType = {
+  openTradesInTitle: storedSettings?.openTradesInTitle || OpenTradeVizOptions.showPill,
+  timezone: storedSettings.timezone || 'UTC',
+};
+
 export default {
   namespaced: true,
-  state: {
-    openTradesInTitle: storedSettings?.openTradesInTitle || OpenTradeVizOptions.showPill,
-  },
+  state,
   getters: {
     [SettingsGetters.openTradesInTitle](state) {
       return state.openTradesInTitle;
     },
+    [SettingsGetters.timezone](state) {
+      return state.timezone;
+    },
   },
   mutations: {
     [SettingsMutations.setOpenTrades](state, value: string) {
       state.openTradesInTitle = value;
       updateSetting('openTradesInTitle', value);
     },
+    [SettingsMutations.setTimeZone](state, timezone: string) {
+      state.timezone = timezone;
+      updateSetting('timezone', timezone);
+    },
   },
   actions: {
     [SettingsActions.setOpenTradesInTitle]({ commit }, locked: boolean) {
       commit(SettingsMutations.setOpenTrades, locked);
     },
+    [SettingsActions.setTimeZone]({ commit }, timezone: string) {
+      setTimezone(timezone);
+      commit(SettingsMutations.setTimeZone, timezone);
+    },
   },
 };

src/views/Settings.vue

@@ -16,6 +16,12 @@
             :options="openTradesOptions"
           ></b-form-select>
         </b-form-group>
+        <b-form-group
+          label="UTC Timezone"
+          description="Select timezone (we recommend UTC is recommended as exchanges usually work in UTC)"
+        >
+          <b-form-select v-model="timezoneLoc" :options="timezoneOptions"></b-form-select>
+        </b-form-group>
       </div>
     </b-card>
   </div>
@@ -38,20 +44,34 @@ export default class Template extends Vue {
 
   @uiSettingsNs.Getter [SettingsGetters.openTradesInTitle]: string;
 
+  @uiSettingsNs.Getter [SettingsGetters.timezone]: string;
+
   @uiSettingsNs.Action [SettingsActions.setOpenTradesInTitle];
 
+  @uiSettingsNs.Action [SettingsActions.setTimeZone];
+
   openTradesOptions = [
     { value: OpenTradeVizOptions.showPill, text: 'Show pill in icon' },
     { value: OpenTradeVizOptions.asTitle, text: 'Show in title' },
     { value: OpenTradeVizOptions.noOpenTrades, text: "Don't show open trades in header" },
   ];
 
+  // Careful when adding new timezones here - eCharts only supports UTC or user timezone
+  timezoneOptions = ['UTC', Intl.DateTimeFormat().resolvedOptions().timeZone];
+
+  get timezoneLoc() {
+    return this.timezone;
+  }
+
+  set timezoneLoc(value: string) {
+    this[SettingsActions.setTimeZone](value);
+  }
+
   get openTradesVisualization() {
     return this.openTradesInTitle;
   }
 
   set openTradesVisualization(value: string) {
-    console.log('show_open_trades', value);
     this.setOpenTradesInTitle(value);
   }