Added Chart to HomeScreen

components/displayIncomeAndExpenditure.vue

@@ -0,0 +1,215 @@
+<script setup>
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import dayjs from "dayjs";
+dayjs.extend(customParseFormat)
+
+
+const supabase = useSupabaseClient()
+const dataStore = useDataStore()
+
+let incomeData = ref({})
+let expenseData = ref({})
+
+const setup = async () => {
+  let incomeRawData = (await supabase.from("createddocuments").select().eq("tenant",dataStore.currentTenant).in('type',['invoices'])).data
+  let expenseRawData =(await supabase.from("incominginvoices").select().eq("tenant",dataStore.currentTenant)).data
+
+  expenseRawData = expenseRawData.filter(i => i.date).map(i => {
+    let amount = 0
+
+    i.accounts.forEach(a => {
+      amount += a.amountNet
+    })
+
+    amount = Number(amount.toFixed(2))
+
+    return {
+      id: i.id,
+      date: dayjs(i.date).format("DD-MM-YY"),
+      amount
+    }
+
+  })
+
+  expenseRawData.forEach(i => {
+    expenseData.value[i.date] ? expenseData.value[i.date] = Number((expenseData.value[i.date] + i.amount).toFixed(2)) : expenseData.value[i.date] = i.amount
+  })
+
+  let expenseMonths = {
+    "01": 0,
+    "02": 0,
+    "03": 0,
+    "04": 0,
+    "05": 0,
+    "06": 0,
+    "07": 0,
+    "08": 0,
+    "09": 0,
+    "10": 0,
+    "11": 0,
+    "12": 0,
+
+  }
+  Object.keys(expenseMonths).forEach(month => {
+    let dates = Object.keys(expenseData.value).filter(i => i.split("-")[1] === month && i.split("-")[2] === dayjs().format("YY"))
+
+    dates.forEach(date => {
+      if(expenseMonths[month]){
+        expenseMonths[month] = Number((expenseMonths[month] + expenseData.value[date]).toFixed(2))
+      } else {
+        expenseMonths[month] = expenseData.value[date]
+      }
+    })
+
+  })
+
+  expenseData.value = expenseMonths
+
+  incomeRawData = incomeRawData.map(i => {
+    let amount = 0
+
+    i.rows.forEach(r => {
+      if(r.mode !== "pagebreak" && r.mode !== "title"){
+        amount += r.price * r.quantity * (1 - r.discountPercent/100)
+      }
+    })
+
+    amount = Number(amount.toFixed(2))
+
+    return {
+      id: i.id,
+      date: dayjs(i.documentDate).format("DD-MM-YY"),
+      amount
+    }
+  })
+
+  incomeRawData.forEach(i => {
+    incomeData.value[i.date] ? incomeData.value[i.date] = Number((incomeData.value[i.date] + i.amount).toFixed(2)) : incomeData.value[i.date] = i.amount
+  })
+
+  let incomeMonths = {
+    "01": 0,
+    "02": 0,
+    "03": 0,
+    "04": 0,
+    "05": 0,
+    "06": 0,
+    "07": 0,
+    "08": 0,
+    "09": 0,
+    "10": 0,
+    "11": 0,
+    "12": 0,
+
+  }
+  Object.keys(incomeMonths).forEach(month => {
+    let dates = Object.keys(incomeData.value).filter(i => i.split("-")[1] === month && i.split("-")[2] === dayjs().format("YY"))
+
+    dates.forEach(date => {
+      if(incomeMonths[month]){
+        incomeMonths[month] = Number((incomeMonths[month] + incomeData.value[date]).toFixed(2))
+      } else {
+        incomeMonths[month] = incomeData.value[date]
+      }
+    })
+
+  })
+  console.log(incomeMonths)
+
+  incomeData.value = incomeMonths
+
+
+
+
+
+
+
+}
+
+const days = computed(() => {
+  let days = []
+
+  days = Object.keys(incomeData.value)
+
+  let expenseDays = Object.keys(expenseData.value)
+
+  expenseDays.forEach(expenseDay => {
+    if(!days.find(i => i === expenseDay)){
+      days.push(expenseDay)
+    }
+  })
+
+  days = days.sort(function(a, b) {
+    var keyA = dayjs(a, "DD-MM-YY"),
+        keyB = dayjs(b, "DD-MM-YY");
+    // Compare the 2 dates
+    if (keyA.isBefore(keyB,'day')) {
+      return -1;
+    } else if(keyB.isBefore(keyA, 'day')) {
+      return 1
+    } else {
+      return 0;
+    }
+
+  });
+
+
+
+  return days
+})
+
+/*const chartData = computed(() => {
+  return {
+    labels: days.value,
+    datasets: [
+        {
+            label: 'Einnahmen',
+            data: [2, 1, 16, 3, 2],
+            backgroundColor: 'rgba(20, 255, 0, 0.3)',
+            borderColor: 'red',
+            borderWidth: 2,
+        }
+    ]
+  }
+})*/
+
+
+import { Line } from 'vue-chartjs'
+const chartData = computed(() => {
+  return {
+    labels: ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],
+    datasets: [
+      {
+        label: 'Ausgaben',
+        backgroundColor: '#f87979',
+        borderColor: '#f87979',
+        data: Object.keys(expenseData.value).sort().map(i => expenseData.value[i]),
+        tension: 0.3,
+      },{
+        label: 'Einnahmen',
+        backgroundColor: '#69c350',
+        borderColor: '#69c350',
+        data: Object.keys(incomeData.value).sort().map(i => incomeData.value[i]),
+        tension: 0.3
+      },
+    ],
+  }
+})
+const chartOptions = ref({
+  responsive: true,
+  maintainAspectRatio: false,
+})
+
+setup()
+</script>
+
+<template>
+  <Line
+      :data="chartData"
+      :options="chartOptions"
+  />
+</template>
+
+<style scoped>
+
+</style>

package-lock.json

@@ -33,7 +33,7 @@
         "axios": "^1.6.7",
         "base64-arraybuffer": "^1.0.2",
         "buffer": "^6.0.3",
-        "chart.js": "^4.4.3",
+        "chart.js": "^4.4.4",
         "client-oauth2": "^4.3.3",
         "date-fns": "^3.6.0",
         "dayjs": "^1.11.10",
@@ -7581,9 +7581,9 @@
       }
     },
     "node_modules/chart.js": {
-      "version": "4.4.3",
+      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
-      "integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
+      "integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },

package.json

@@ -46,7 +46,7 @@
     "axios": "^1.6.7",
     "base64-arraybuffer": "^1.0.2",
     "buffer": "^6.0.3",
-    "chart.js": "^4.4.3",
+    "chart.js": "^4.4.4",
     "client-oauth2": "^4.3.3",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.10",

plugins/chartjs.ts

@@ -0,0 +1,4 @@
+import { Chart, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js'
+export default defineNuxtPlugin(() => {
+    Chart.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement)
+})