Preference can be turned on and off (is always off now)

frontend/src/api/v2/chart/account/dashboard.js

@@ -0,0 +1,30 @@
+/*
+ * overview.js
+ * Copyright (c) 2022 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {api} from "boot/axios";
+import {format} from "date-fns";
+
+export default class Dashboard {
+  overview(range, cacheKey) {
+    let startStr = format(range.start, 'y-MM-dd');
+    let endStr = format(range.end, 'y-MM-dd');
+    return api.get('/api/v2/chart/account/dashboard', {params: {start: startStr, end: endStr, cache: cacheKey}});
+  }
+}

frontend/src/components/dashboard/AccountChart.vue

@@ -0,0 +1,175 @@
+<!--
+  - AccountChart.vue
+  - Copyright (c) 2022 james@firefly-iii.org
+  -
+  - This file is part of Firefly III (https://github.com/firefly-iii).
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<template>
+  <!--  -->
+  <div class="q-mt-sm q-mr-sm">
+    <q-card bordered>
+      <q-item>
+        <q-item-section>
+          <q-item-label><strong>Bla bla accounts</strong></q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-separator/>
+      <ApexChart ref="chart" height="350" type="line" :options="options" :series="series"></ApexChart>
+    </q-card>
+  </div>
+
+  <div>
+
+  </div>
+</template>
+
+<script>
+import {defineAsyncComponent} from "vue";
+import Dashboard from '../../api/v2/chart/account/dashboard';
+import format from "date-fns/format";
+import {useQuasar} from "quasar";
+import {useFireflyIIIStore} from "../../stores/fireflyiii";
+
+export default {
+  name: "AccountChart",
+  data() {
+    return {
+      loading: false,
+      currencies: [],
+      options: {
+        theme: {
+          mode: 'dark'
+        },
+        dataLabels: {
+          enabled: false
+        },
+        noData: {
+          text: 'Loading...'
+        },
+        chart: {
+          id: 'account-chart',
+          toolbar: {
+            show: true,
+            tools: {
+              download: false,
+              selection: false,
+              pan: false
+            }
+          }
+        },
+        yaxis: {
+          labels: {
+            formatter: this.numberFormatter
+          }
+        },
+        labels: [],
+        xaxis: {
+          categories: [],
+        },
+      },
+      series: [],
+      locale: 'en-US',
+      dateFormat: 'MMMM d, y',
+      store: null,
+    }
+  },
+  created() {
+    this.dateFormat = this.$t('config.month_and_day_fns');
+  },
+  mounted() {
+    this.store = useFireflyIIIStore();
+    const $q = useQuasar();
+    this.options.theme.mode = $q.dark.isActive ? 'dark' : 'light';
+    this.store.$onAction(
+      ({name, store, args, after, onError,}) => {
+        after((result) => {
+          if (name === 'setRange') {
+            this.locale = this.store.getLocale;
+            this.buildChart();
+          }
+        })
+      }
+    )
+    if (null !== this.store.getRange.start && null !== this.store.getRange.end) {
+      this.buildChart();
+    }
+  },
+  methods: {
+    numberFormatter: function (value, index) {
+      let currencyCode = this.currencies[index] ?? 'EUR';
+      return Intl.NumberFormat(this.locale, {style: 'currency', currency: currencyCode}).format(value);
+    },
+    buildChart: function () {
+      console.log('buildChart');
+      if (null !== this.store.getRange.start && null !== this.store.getRange.end && false === this.loading) {
+        console.log('buildChart go!');
+        let start = this.store.getRange.start;
+        let end = this.store.getRange.end;
+        if (false === this.loading) {
+          this.loading = true;
+          // generate labels:
+          this.generateStaticLabels({start: start, end: end});
+          (new Dashboard).overview({start: start, end: end}, this.getCacheKey).then(data => {
+            this.generateSeries(data.data)
+          });
+        }
+      }
+    },
+    generateSeries: function (data) {
+      this.series = [];
+      let series;
+      for (let i in data) {
+        if (data.hasOwnProperty(i)) {
+          series = {};
+          series.name = data[i].label;
+          series.data = [];
+          this.currencies.push(data[i].currency_code);
+          for (let ii in data[i].entries) {
+            series.data.push(data[i].entries[ii]);
+          }
+          this.series.push(series);
+        }
+      }
+      this.loading = false;
+    },
+    generateStaticLabels: function (range) {
+      let loop = new Date(range.start);
+      let newDate;
+      let labels = [];
+      while (loop <= range.end) {
+        labels.push(format(loop, this.dateFormat));
+        newDate = loop.setDate(loop.getDate() + 1);
+        loop = new Date(newDate);
+      }
+      this.options = {
+        ...this.options,
+        ...{
+          labels: labels
+        },
+      };
+    }
+  },
+
+  components: {
+    ApexChart: defineAsyncComponent(() => import('vue3-apexcharts')),
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/components/dashboard/NetWorthInsightBox.vue

@@ -96,10 +96,16 @@ export default {
       for (let i in data) {
         if (data.hasOwnProperty(i)) {
           const current = data[i];
+
+          if(parseFloat(current.sum) <= 0) {
+            continue;
+          }
+
           const hasNative = current.native_id !== current.id && current.native_sum !== '0';
           if (hasNative || current.native_id === current.id) {
             this.primary = this.primary + parseFloat(current.native_sum);
           }
+
           this.netWorth.push(
             {
               sum: current.sum,

frontend/src/pages/dashboard/Dashboard.vue

@@ -35,7 +35,7 @@
     </div>
     <div class="row q-mb-sm">
       <div class="col">
-        Account chart box
+        <AccountChart />
       </div>
     </div>
     <div class="row q-mb-sm">
@@ -89,12 +89,12 @@
 
 <script>
 import {defineAsyncComponent} from "vue";
-import NetWorthInsightBox from "../../components/dashboard/NetWorthInsightBox";
 
 export default {
   name: "Dashboard",
   components: {
-    NetWorthInsightBox,
+    AccountChart: defineAsyncComponent(() => import('../../components/dashboard/AccountChart.vue')),
+    NetWorthInsightBox: defineAsyncComponent(() => import('../../components/dashboard/BillInsightBox.vue')),
     BillInsightBox: defineAsyncComponent(() => import('../../components/dashboard/BillInsightBox.vue')),
     SpendInsightBox: defineAsyncComponent(() => import('../../components/dashboard/SpendInsightBox.vue')),
   }