Rebuild frontend

2025-11-18 07:38:29 +00:00 · 2021-04-09 19:35:03 +02:00
parent 95d72d065b
commit f5e5854479
73 changed files with 268 additions and 183 deletions
--- a/frontend/src/components/charts/DataConverter.vue
+++ b/frontend/src/components/charts/DataConverter.vue
@@ -32,20 +32,20 @@ export default {
    convertChart(dataSet) {
      this.dataSet = dataSet;
      this.newDataSet = {
-        count: 0,
+        //count: 0,
        labels: [],
        datasets: []
      }
      this.getLabels();
      this.getDataSets();
-      this.newDataSet.count = this.newDataSet.datasets.length;
+      //this.newDataSet.count = this.newDataSet.datasets.length;
      return this.newDataSet;
    },

    colorizeBarData(dataSet) {
      this.dataSet = dataSet;
      this.newDataSet = {
-        count: 0,
+        //count: 0,
        labels: [],
        datasets: []
      };
@@ -79,7 +79,7 @@ export default {
        //strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
      }
      this.newDataSet.labels = this.dataSet.labels;
-      this.newDataSet.count = this.dataSet.count;
+      //this.newDataSet.count = this.dataSet.count;
      for (let setKey in this.dataSet.datasets) {
        if (this.dataSet.datasets.hasOwnProperty(setKey)) {
          var dataset = this.dataSet.datasets[setKey];
@@ -94,7 +94,7 @@ export default {
    colorizeLineData(dataSet) {
      this.dataSet = dataSet;
      this.newDataSet = {
-        count: 0,
+        //count: 0,
        labels: [],
        datasets: []
      };
@@ -128,10 +128,10 @@ export default {
        //strokePointHighColors.push("rgba(" + colourSet[i][0] + ", " + colourSet[i][1] + ", " + colourSet[i][2] + ", 0.9)");
      }
      this.newDataSet.labels = this.dataSet.labels;
-      this.newDataSet.count = this.dataSet.count;
+      //this.newDataSet.count = this.dataSet.count;
      for (let setKey in this.dataSet.datasets) {
        if (this.dataSet.datasets.hasOwnProperty(setKey)) {
-          var dataset = this.dataSet.datasets[setKey];
+          let dataset = this.dataSet.datasets[setKey];
          dataset.fill = false;
          dataset.backgroundColor = dataset.borderColor = fillColors[setKey];
          this.newDataSet.datasets.push(dataset);
@@ -168,7 +168,7 @@ export default {
            newSet.type = oldSet.type;
            newSet.currency_symbol = oldSet.currency_symbol;
            newSet.currency_code = oldSet.currency_code;
-            newSet.yAxisID = oldSet.yAxisID;
+            //newSet.yAxisID = oldSet.yAxisID;
            newSet.data = [];
            for (const entryLabel in oldSet.entries) {
              if (oldSet.entries.hasOwnProperty(entryLabel)) {
--- a/frontend/src/components/charts/DefaultLineOptions.vue
+++ b/frontend/src/components/charts/DefaultLineOptions.vue
@@ -79,67 +79,95 @@ export default {
      return sections;
    },
    getDefaultOptions() {
-      var self = this;
      return {
-        legend: {
-          display: false,
-        },
-        animation: {
-          duration: 0,
-        },
        responsive: true,
        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        animations: false,
+
        elements: {
          line: {
            cubicInterpolationMode: 'monotone'
          }
        },
        scales: {
-          xAxes: [
-            {
-              gridLines: {
-                display: false
-              },
-              ticks: {
-                // break ticks when too long
-                callback: function (value, index, values) {
-                  // date format
-                  let dateObj = new Date(value);
-                  let options = {year: 'numeric', month: 'long', day: 'numeric'};
-                  let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
-                  //console.log();
-                  //return self.formatLabel(value, 20);
-                  return self.formatLabel(str, 20);
-                }
+          x: {
+            //type: 'linear'
+            grid: {
+              display: false,
+            },
+            ticks: {
+              callback: function (value, index, values) {
+                //return this.getLabelForValue(value);
+                let dateObj = new Date(this.getLabelForValue(value));
+                let options = {year: 'numeric', month: 'long', day: 'numeric'};
+                let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
+                return str;
+                //           // //console.log();
+                //           // //return self.formatLabel(value, 20);
+                //           // return self.formatLabel(str, 20);
              }
            }
-          ],
-          yAxes: [{
-            display: true,
-            ticks: {
-              callback: function (tickValue) {
-                "use strict";
-                let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
-                return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
-              },
-              beginAtZero: true
-            }
+          },
+          y: {
+            suggestedMin: 0

-          }]
-        },
-        tooltips: {
-          mode: 'index',
-          callbacks: {
-            label: function (tooltipItem, data) {
-              "use strict";
-              let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
-              let nrString =
-                  new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
-
-              return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
-            }
+            //type: 'linear'
          }
-        }
+        },
+
+        // scales: {
+        //   xAxes: [
+        //     {
+        //       gridLines: {
+        //         display: false
+        //       },
+        //       ticks: {
+        //         // break ticks when too long
+        //         callback: function (value, index, values) {
+        //           return value;
+        //           // date format
+        //           // let dateObj = new Date(value);
+        //           // let options = {year: 'numeric', month: 'long', day: 'numeric'};
+        //           // let str = new Intl.DateTimeFormat(localStorage.locale, options).format(dateObj);
+        //           // //console.log();
+        //           // //return self.formatLabel(value, 20);
+        //           // return self.formatLabel(str, 20);
+        //         }
+        //       }
+        //     }
+        //   ],
+        //   yAxes: [{
+        //     display: true,
+        //     ticks: {
+        //       callback: function (tickValue) {
+        //         "use strict";
+        //         return tickValue;
+        //         // let currencyCode = this.chart.data.datasets[0].currency_code ? this.chart.data.datasets[0].currency_code : 'EUR';
+        //         // return new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tickValue);
+        //       },
+        //       beginAtZero: true
+        //     }
+        //
+        //   }]
+        // },
+        // tooltips: {
+        //   mode: 'index',
+        //   // callbacks: {
+        //   //   label: function (tooltipItem, data) {
+        //   //     "use strict";
+        //   //     let currencyCode = data.datasets[tooltipItem.datasetIndex].currency_code ? data.datasets[tooltipItem.datasetIndex].currency_code : 'EUR';
+        //   //     let nrString =
+        //   //         new Intl.NumberFormat(localStorage.locale, {style: 'currency', currency: currencyCode}).format(tooltipItem.yLabel)
+        //   //
+        //   //     return data.datasets[tooltipItem.datasetIndex].label + ': ' + nrString;
+        //   //   }
+        //   // }
+        // }
      };
    }

--- a/frontend/src/components/dashboard/MainAccount.vue
+++ b/frontend/src/components/dashboard/MainAccount.vue
@@ -24,8 +24,8 @@
      <h3 class="card-title">{{ $t('firefly.yourAccounts') }}</h3>
    </div>
    <div class="card-body">
-      <div v-if="!loading">
-        <MainAccountChart v-if="!loading && !error" :chart-data="dataCollection" :options="chartOptions"/>
+      <div>
+        <canvas id="canvas" ref="canvas" width="400" height="400"></canvas>
      </div>
      <div v-if="loading && !error" class="text-center">
        <i class="fas fa-spinner fa-spin"></i>
@@ -33,6 +33,9 @@
      <div v-if="error" class="text-center">
        <i class="fas fa-exclamation-triangle text-danger"></i>
      </div>
+      <div v-if="timezoneDifference" class="text-muted small">
+        {{ $t('firefly.timezone_difference', {local: localTimeZone, system: systemTimeZone}) }}
+      </div>
    </div>
    <div class="card-footer">
      <a class="btn btn-default button-sm" href="./accounts/asset"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
@@ -44,35 +47,43 @@

 import DataConverter from "../charts/DataConverter";
 import DefaultLineOptions from "../charts/DefaultLineOptions";
+import {mapGetters} from "vuex";
+import * as ChartJs from 'chart.js'
+ChartJs.Chart.register.apply(null, Object.values(ChartJs).filter((chartClass) => (chartClass.id)));
+
+

-import {createNamespacedHelpers} from "vuex";
-import MainAccountChart from "./MainAccountChart";

-const {mapState, mapGetters, mapActions, mapMutations} = createNamespacedHelpers('dashboard/index')

 export default {
  name: "MainAccount",
-  components: {MainAccountChart},
+  components: {},  // MainAccountChart
  data() {
    return {
      loading: true,
      error: false,
      ready: false,
      dataCollection: {},
-      chartOptions: {}
+      chartOptions: {},
+      _chart: null,
+      localTimeZone: '',
+      systemTimeZone: '',
    }
  },
  created() {
    this.ready = true;
    this.chartOptions = DefaultLineOptions.methods.getDefaultOptions();
+    this.localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    this.systemTimeZone = this.timezone;
  },
  computed: {
-    ...mapGetters([
-                    'start',
-                    'end'
-                  ]),
+    ...mapGetters('dashboard/index',['start', 'end']),
+    ...mapGetters('root',['timezone']),
    'datesReady': function () {
      return null !== this.start && null !== this.end && this.ready;
+    },
+    timezoneDifference: function() {
+      return this.localTimeZone !== this.systemTimeZone;
    }
  },
  watch: {
@@ -82,10 +93,10 @@ export default {
      }
    },
    start: function () {
-      this.initialiseChart();
+      //this.initialiseChart();
    },
    end: function () {
-      this.initialiseChart();
+      //this.initialiseChart();
    },
  },
  methods: {
@@ -95,20 +106,28 @@ export default {
      let startStr = this.start.toISOString().split('T')[0];
      let endStr = this.end.toISOString().split('T')[0];
      let url = './api/v1/chart/account/overview?start=' + startStr + '&end=' + endStr;
-      // console.log('URL is ' + url);
      axios.get(url)
          .then(response => {
            let chartData = DataConverter.methods.convertChart(response.data);
            chartData = DataConverter.methods.colorizeLineData(chartData);
+
            this.dataCollection = chartData;
            this.loading = false;
+            this.drawChart();
          })
          .catch(error => {
-            // console.log('Has error!');
-            // console.log(error);
+            console.log('Has error!');
+            console.log(error);
            this.error = true;
-            // console.error(error);
          });
+    },
+    drawChart: function () {
+      this._chart = new ChartJs.Chart(this.$refs.canvas.getContext('2d'), {
+                                        type: 'line',
+                                        data: this.dataCollection,
+                                        options: this.chartOptions
+                                      }
+      );
    }
  },
 }
--- a/frontend/src/components/dashboard/MainAccountChart.vue
+++ b/frontend/src/components/dashboard/MainAccountChart.vue
@@ -20,7 +20,10 @@

 <script>

-import {Line, mixins} from 'vue-chartjs'
+//import {Line, mixins} from 'vue-chartjs'
+
+
+import { Chart, LineController, LineElement, PointElement, LinearScale, Title } from 'chart.js'

 const {reactiveProp} = mixins

--- a/frontend/src/components/store/modules/root.js
+++ b/frontend/src/components/store/modules/root.js
@@ -22,7 +22,7 @@
 const state = () => (
    {
        listPageSize: 33,
-        // timezone: ''
+        timezone: ''
    }
 )

@@ -32,10 +32,10 @@ const getters = {
    listPageSize: state => {
        return state.listPageSize;
    },
-    // timezone: state => {
-    //     // console.log('Wil return ' + state.listPageSize);
-    //     return state.timezone;
-    // },
+    timezone: state => {
+        // console.log('Wil return ' + state.listPageSize);
+        return state.timezone;
+    },
 }

 // actions
@@ -53,17 +53,17 @@ const actions = {
                      }
                );
        }
-        // if (localStorage.timezone) {
-        //     state.timezone = localStorage.timezone;
-        //     context.commit('setTimezone', {timezone: localStorage.timezone});
-        // }
-        // if (!localStorage.timezone) {
-        //     axios.get('./api/v1/configuration/app.timezone')
-        //         .then(response => {
-        //                   context.commit('setTimezone', {timezone: response.data.data.value});
-        //               }
-        //         );
-        // }
+        if (localStorage.timezone) {
+            state.timezone = localStorage.timezone;
+            context.commit('setTimezone', {timezone: localStorage.timezone});
+        }
+        if (!localStorage.timezone) {
+            axios.get('./api/v1/configuration/app.timezone')
+                .then(response => {
+                          context.commit('setTimezone', {timezone: response.data.data.value});
+                      }
+                );
+        }
    }
 }

@@ -79,13 +79,13 @@ const mutations = {

        }
    },
-    // setTimezone(state, payload) {
-    //
-    //     if ('' !== payload.timezone) {
-    //         state.timezone = payload.timezone;
-    //         localStorage.timezone = payload.timezone;
-    //     }
-    // },
+    setTimezone(state, payload) {
+
+        if ('' !== payload.timezone) {
+            state.timezone = payload.timezone;
+            localStorage.timezone = payload.timezone;
+        }
+    },
 }

 export default {
--- a/frontend/src/locales/bg.json
+++ b/frontend/src/locales/bg.json
@@ -109,6 +109,7 @@
        "edit": "\u041f\u0440\u043e\u043c\u0435\u043d\u0438",
        "account_type_Loan": "\u0417\u0430\u0435\u043c",
        "account_type_Mortgage": "\u0418\u043f\u043e\u0442\u0435\u043a\u0430",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "\u0414\u044a\u043b\u0433",
        "delete": "\u0418\u0437\u0442\u0440\u0438\u0439",
--- a/frontend/src/locales/cs.json
+++ b/frontend/src/locales/cs.json
@@ -109,6 +109,7 @@
        "edit": "Upravit",
        "account_type_Loan": "P\u016fj\u010dka",
        "account_type_Mortgage": "Hypot\u00e9ka",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Dluh",
        "delete": "Odstranit",
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -109,6 +109,7 @@
        "edit": "Bearbeiten",
        "account_type_Loan": "Darlehen",
        "account_type_Mortgage": "Hypothek",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "Neues Konto \"<a href=\"accounts\/show\/{ID}\">\u201e{name}\u201d<\/a>\" gespeichert!",
        "account_type_Debt": "Schuld",
        "delete": "L\u00f6schen",
--- a/frontend/src/locales/el.json
+++ b/frontend/src/locales/el.json
@@ -109,6 +109,7 @@
        "edit": "\u0395\u03c0\u03b5\u03be\u03b5\u03c1\u03b3\u03b1\u03c3\u03af\u03b1",
        "account_type_Loan": "\u0394\u03ac\u03bd\u03b5\u03b9\u03bf",
        "account_type_Mortgage": "\u03a5\u03c0\u03bf\u03b8\u03ae\u03ba\u03b7",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "\u03a7\u03c1\u03ad\u03bf\u03c2",
        "delete": "\u0394\u03b9\u03b1\u03b3\u03c1\u03b1\u03c6\u03ae",
--- a/frontend/src/locales/en-gb.json
+++ b/frontend/src/locales/en-gb.json
@@ -109,6 +109,7 @@
        "edit": "Edit",
        "account_type_Loan": "Loan",
        "account_type_Mortgage": "Mortgage",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Debt",
        "delete": "Delete",
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -109,6 +109,7 @@
        "edit": "Edit",
        "account_type_Loan": "Loan",
        "account_type_Mortgage": "Mortgage",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Debt",
        "delete": "Delete",
--- a/frontend/src/locales/es.json
+++ b/frontend/src/locales/es.json
@@ -59,7 +59,7 @@
        "spent": "Gastado",
        "Default asset account": "Cuenta de ingresos por defecto",
        "search_results": "Buscar resultados",
-        "include": "Include?",
+        "include": "\u00bfIncluir?",
        "transaction": "Transaccion",
        "account_role_defaultAsset": "Cuentas de ingresos por defecto",
        "account_role_savingAsset": "Cuentas de ahorros",
@@ -109,7 +109,8 @@
        "edit": "Editar",
        "account_type_Loan": "Pr\u00e9stamo",
        "account_type_Mortgage": "Hipoteca",
-        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
+        "stored_new_account_js": "Nueva cuenta \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" guardada!",
        "account_type_Debt": "Deuda",
        "delete": "Eliminar",
        "store_new_asset_account": "Crear cuenta de activos",
@@ -119,14 +120,14 @@
        "mandatoryFields": "Campos obligatorios",
        "optionalFields": "Campos opcionales",
        "reconcile_this_account": "Reconciliar esta cuenta",
-        "interest_calc_weekly": "Per week",
+        "interest_calc_weekly": "Por semana",
        "interest_calc_monthly": "Por mes",
-        "interest_calc_quarterly": "Per quarter",
-        "interest_calc_half-year": "Per half year",
+        "interest_calc_quarterly": "Por trimestre",
+        "interest_calc_half-year": "Por semestre",
        "interest_calc_yearly": "Por a\u00f1o",
-        "liability_direction_credit": "I am owed this debt",
-        "liability_direction_debit": "I owe this debt to somebody else",
-        "save_transactions_by_moving_js": "No transactions|Save this transaction by moving it to another account. |Save these transactions by moving them to another account.",
+        "liability_direction_credit": "Se me debe esta deuda",
+        "liability_direction_debit": "Le debo esta deuda a otra persona",
+        "save_transactions_by_moving_js": "Ninguna transacci\u00f3n|Guardar esta transacci\u00f3n movi\u00e9ndola a otra cuenta. |Guardar estas transacciones movi\u00e9ndolas a otra cuenta.",
        "none_in_select_list": "(ninguno)"
    },
    "list": {
@@ -162,14 +163,14 @@
        "interest": "Inter\u00e9s",
        "interest_period": "Per\u00edodo de inter\u00e9s",
        "currency_id": "Divisa",
-        "liability_type": "Liability type",
+        "liability_type": "Tipo de pasivo",
        "account_role": "Rol de cuenta",
-        "liability_direction": "Liability in\/out",
+        "liability_direction": "Pasivo entrada\/salida",
        "book_date": "Fecha de registro",
        "permDeleteWarning": "Eliminar cosas de Firefly III es permanente y no se puede deshacer.",
-        "account_areYouSure_js": "Are you sure you want to delete the account named \"{name}\"?",
-        "also_delete_piggyBanks_js": "No piggy banks|The only piggy bank connected to this account will be deleted as well.|All {count} piggy banks connected to this account will be deleted as well.",
-        "also_delete_transactions_js": "No transactions|The only transaction connected to this account will be deleted as well.|All {count} transactions connected to this account will be deleted as well.",
+        "account_areYouSure_js": "\u00bfEst\u00e1 seguro que desea eliminar la cuenta llamada \"{name}\"?",
+        "also_delete_piggyBanks_js": "Ninguna alcanc\u00eda|La \u00fanica alcanc\u00eda conectada a esta cuenta tambi\u00e9n ser\u00e1 borrada. Tambi\u00e9n se eliminar\u00e1n todas {count} alcanc\u00edas conectados a esta cuenta.",
+        "also_delete_transactions_js": "Ninguna transacci\u00f3n|La \u00fanica transacci\u00f3n conectada a esta cuenta se eliminar\u00e1 tambi\u00e9n.|Todas las {count} transacciones conectadas a esta cuenta tambi\u00e9n se eliminar\u00e1n.",
        "process_date": "Fecha de procesamiento",
        "due_date": "Fecha de vencimiento",
        "payment_date": "Fecha de pago",
--- a/frontend/src/locales/fi.json
+++ b/frontend/src/locales/fi.json
@@ -109,6 +109,7 @@
        "edit": "Muokkaa",
        "account_type_Loan": "Laina",
        "account_type_Mortgage": "Kiinnelaina",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Velka",
        "delete": "Poista",
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -109,6 +109,7 @@
        "edit": "Modifier",
        "account_type_Loan": "Pr\u00eat",
        "account_type_Mortgage": "Pr\u00eat hypoth\u00e9caire",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "Nouveau compte \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" enregistr\u00e9 !",
        "account_type_Debt": "Dette",
        "delete": "Supprimer",
--- a/frontend/src/locales/hu.json
+++ b/frontend/src/locales/hu.json
@@ -109,6 +109,7 @@
        "edit": "Szerkeszt\u00e9s",
        "account_type_Loan": "Hitel",
        "account_type_Mortgage": "Jelz\u00e1log",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Ad\u00f3ss\u00e1g",
        "delete": "T\u00f6rl\u00e9s",
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -109,6 +109,7 @@
        "edit": "Modifica",
        "account_type_Loan": "Prestito",
        "account_type_Mortgage": "Mutuo",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "Nuovo conto \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" salvato!",
        "account_type_Debt": "Debito",
        "delete": "Elimina",
--- a/frontend/src/locales/nb.json
+++ b/frontend/src/locales/nb.json
@@ -109,6 +109,7 @@
        "edit": "Rediger",
        "account_type_Loan": "L\u00e5n",
        "account_type_Mortgage": "Boligl\u00e5n",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Gjeld",
        "delete": "Slett",
--- a/frontend/src/locales/nl.json
+++ b/frontend/src/locales/nl.json
@@ -109,6 +109,7 @@
        "edit": "Wijzig",
        "account_type_Loan": "Lening",
        "account_type_Mortgage": "Hypotheek",
+        "timezone_difference": "Je browser is in tijdzone \"{local}\". Firefly III is in tijdzone \"{system}\". Deze grafiek kan afwijken.",
        "stored_new_account_js": "Nieuwe account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" opgeslagen!",
        "account_type_Debt": "Schuld",
        "delete": "Verwijder",
--- a/frontend/src/locales/pl.json
+++ b/frontend/src/locales/pl.json
@@ -109,6 +109,7 @@
        "edit": "Modyfikuj",
        "account_type_Loan": "Po\u017cyczka",
        "account_type_Mortgage": "Hipoteka",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "D\u0142ug",
        "delete": "Usu\u0144",
--- a/frontend/src/locales/pt-br.json
+++ b/frontend/src/locales/pt-br.json
@@ -109,6 +109,7 @@
        "edit": "Editar",
        "account_type_Loan": "Empr\u00e9stimo",
        "account_type_Mortgage": "Hipoteca",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "D\u00edvida",
        "delete": "Apagar",
--- a/frontend/src/locales/pt.json
+++ b/frontend/src/locales/pt.json
@@ -109,6 +109,7 @@
        "edit": "Alterar",
        "account_type_Loan": "Emprestimo",
        "account_type_Mortgage": "Hipoteca",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "Nova conta \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" armazenada!",
        "account_type_Debt": "Debito",
        "delete": "Apagar",
--- a/frontend/src/locales/ro.json
+++ b/frontend/src/locales/ro.json
@@ -109,6 +109,7 @@
        "edit": "Editeaz\u0103",
        "account_type_Loan": "\u00cemprumut",
        "account_type_Mortgage": "Credit ipotecar",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Datorie",
        "delete": "\u0218terge",
--- a/frontend/src/locales/ru.json
+++ b/frontend/src/locales/ru.json
@@ -109,6 +109,7 @@
        "edit": "\u0418\u0437\u043c\u0435\u043d\u0438\u0442\u044c",
        "account_type_Loan": "\u0417\u0430\u0451\u043c",
        "account_type_Mortgage": "\u0418\u043f\u043e\u0442\u0435\u043a\u0430",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "\u0414\u0435\u0431\u0438\u0442",
        "delete": "\u0423\u0434\u0430\u043b\u0438\u0442\u044c",
--- a/frontend/src/locales/sk.json
+++ b/frontend/src/locales/sk.json
@@ -109,6 +109,7 @@
        "edit": "Upravi\u0165",
        "account_type_Loan": "P\u00f4\u017ei\u010dka",
        "account_type_Mortgage": "Hypot\u00e9ka",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "Dlh",
        "delete": "Odstr\u00e1ni\u0165",
--- a/frontend/src/locales/sv.json
+++ b/frontend/src/locales/sv.json
@@ -109,6 +109,7 @@
        "edit": "Redigera",
        "account_type_Loan": "L\u00e5n",
        "account_type_Mortgage": "Bol\u00e5n",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "Nytt konto \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" lagrat!",
        "account_type_Debt": "Skuld",
        "delete": "Ta bort",
--- a/frontend/src/locales/vi.json
+++ b/frontend/src/locales/vi.json
@@ -109,6 +109,7 @@
        "edit": "S\u1eeda",
        "account_type_Loan": "Ti\u1ec1n vay",
        "account_type_Mortgage": "Th\u1ebf ch\u1ea5p",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "M\u00f3n n\u1ee3",
        "delete": "X\u00f3a",
--- a/frontend/src/locales/zh-cn.json
+++ b/frontend/src/locales/zh-cn.json
@@ -109,6 +109,7 @@
        "edit": "\u7f16\u8f91",
        "account_type_Loan": "\u8d37\u6b3e",
        "account_type_Mortgage": "\u62b5\u62bc",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "\u6b20\u6b3e",
        "delete": "\u5220\u9664",
--- a/frontend/src/locales/zh-tw.json
+++ b/frontend/src/locales/zh-tw.json
@@ -109,6 +109,7 @@
        "edit": "\u7de8\u8f2f",
        "account_type_Loan": "\u8cb8\u6b3e",
        "account_type_Mortgage": "\u62b5\u62bc",
+        "timezone_difference": "Your browser reports time zone \"{local}\". Firefly III is configured for time zone \"{system}\". This chart may drift.",
        "stored_new_account_js": "New account \"<a href=\"accounts\/show\/{ID}\">{name}<\/a>\" stored!",
        "account_type_Debt": "\u8ca0\u50b5",
        "delete": "\u522a\u9664",