Feat: Charts dashboard

2026-03-25 15:00:57 +02:00
parent 1b97332c38
commit 2877979660
6 changed files with 153 additions and 2 deletions
@@ -25,6 +25,7 @@
        "@vueuse/head": "^2.0.0",
        "@vueuse/integrations": "^13.7.0",
        "animate.css": "^4.1.1",
+        "apexcharts": "^5.10.4",
        "axios": "1.13.5",
        "buefy": "^3.0.3",
        "bulma": "^1.0.2",
@@ -52,6 +53,7 @@
        "vue-qrcode-reader": "^5.7.3",
        "vue-router": "^4.5.0",
        "vue-toast-notification": "^3.1.3",
+        "vue3-apexcharts": "^1.11.1",
        "vue3-cookies": "^1.0.6",
        "vuex": "^4.1.0",
        "xlsx": "^0.18.5"
@@ -5168,6 +5170,12 @@
      "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
      "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="
    },
+    "node_modules/apexcharts": {
+      "version": "5.10.4",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-5.10.4.tgz",
+      "integrity": "sha512-gt0VUqZ2+mr25ScbUcKZgJr96jKYm4vjOcxEWCEh/E5F4dWqhyo3dBhPRvNNnkKiWxkMd2cBwj3ZYH3rK39fkA==",
+      "license": "SEE LICENSE IN LICENSE"
+    },
    "node_modules/aria-query": {
      "version": "5.3.2",
      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -13483,6 +13491,21 @@
        "vue": "^3.0"
      }
    },
+    "node_modules/vue3-apexcharts": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/vue3-apexcharts/-/vue3-apexcharts-1.11.1.tgz",
+      "integrity": "sha512-MbN3vg8bMG19wc0Lm1HkeQvODgLm56DgpIxtNUO0xpf/JCzYWVGE4jzXp2JISzy2s3Kul1yOxNQUYsLvKQ5L9g==",
+      "license": "see LICENSE in LICENSE",
+      "peerDependencies": {
+        "apexcharts": ">=5.10.0",
+        "vue": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "apexcharts": {
+          "optional": false
+        }
+      }
+    },
    "node_modules/vue3-cookies": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/vue3-cookies/-/vue3-cookies-1.0.6.tgz",
@@ -34,6 +34,7 @@
    "@vueuse/head": "^2.0.0",
    "@vueuse/integrations": "^13.7.0",
    "animate.css": "^4.1.1",
+    "apexcharts": "^5.10.4",
    "axios": "1.13.5",
    "buefy": "^3.0.3",
    "bulma": "^1.0.2",
@@ -61,6 +62,7 @@
    "vue-qrcode-reader": "^5.7.3",
    "vue-router": "^4.5.0",
    "vue-toast-notification": "^3.1.3",
+    "vue3-apexcharts": "^1.11.1",
    "vue3-cookies": "^1.0.6",
    "vuex": "^4.1.0",
    "xlsx": "^0.18.5"
@@ -1445,7 +1445,8 @@
      "cards": "Kort",
      "list": "Liste",
      "subtitle": "Se hvordan dine afdelinger klarer sig",
-      "title": "Overblik"
+      "title": "Overblik",
+      "charts": "Charts"
    },
    "pos": {
      "subtitle": "Registrer salg",
@@ -13,6 +13,7 @@ import App from "@/App.vue";
 import Buefy from 'buefy'
 import 'buefy/dist/css/buefy.css'
 import i18n from '@/i18n'
+import VueApexCharts from "vue3-apexcharts";
 import { initializeAutoTableExports } from '@/services/AutoTableExportService.js';
 import { installAxiosRequestQueue } from '@/services/installAxiosRequestQueue.js';

@@ -112,6 +113,7 @@ createApp(App)
 	.use(ToastPlugin)
  .use(Buefy)
 	.use(i18n)
+  .use(VueApexCharts)
 	.provide('Colors', Colors)
 	.provide('IS_DEV', IS_DEV)
 	.provide('API_URL', API_URL)
@@ -15,6 +15,7 @@ import DepartmentDailyReport
  from "@/views/dashboards/departmentDashboard/modules/daily-report/DepartmentDailyReport.vue";
 import {BTabItem, BTabs} from "buefy";
 import WhiteBoxCard from "@/components/displays/boxes/WhiteBoxCard.vue";
+import DepartmentsChartReport from "@/views/dashboards/departmentDashboard/other/displays/DepartmentsChartReport.vue";

 // Get the departments
 const accessibleDepartments = SessionUser.functions.getAccessibleDepartments();
@@ -73,6 +74,12 @@ const listDisplay = ref<listDisplayType>(listDisplayTabIndexes.cards);
            </div>
          </template>
        </b-tab-item>
+        <b-tab-item :label="$t('department_dashboard.overview.charts')"
+                    icon-pack="fas"
+                    icon="chart-bar"
+        >
+          <DepartmentsChartReport />
+        </b-tab-item>
      </b-tabs>
    </DepartmentDashboardPageWrapper>
  </RestrictedPageWrapper>
@@ -0,0 +1,116 @@
+<script setup>
+import {defineProps} from "vue";
+import DepartmentDashboardDailyReportNavigation
+  from "@/views/dashboards/departmentDashboard/modules/daily-report/displays/DepartmentDashboardDailyReportNavigation.vue";
+
+const props = defineProps({
+  /**
+   * Is this page department-specific?
+   */
+  departmentSpecific: {
+    type: Boolean,
+    default: true
+  },
+  defaultDepartmentId: {
+    type: Number,
+    default: null
+  }
+});
+
+const options = {
+  chart: {
+    type: 'bar',
+    zoom: {
+      enabled: false
+    }
+  },
+  plotOptions: {
+    bar: {
+      horizontal: true,
+      dataLabels: {
+        total: {
+          enabled: true,
+          offsetX: 0,
+          style: {
+            fontSize: '13px',
+            fontWeight: 900
+          }
+        }
+      }
+    },
+  },
+  stroke: {
+    width: 1,
+    colors: ['#fff']
+  },
+  title: {
+    text: 'Mänedlig finansiel information per afdeling (DKK)'
+  },
+  tooltip: {
+    y: {
+      formatter: function (val) {
+        return val + "K"
+      }
+    }
+  },
+  fill: {
+    opacity: 1
+  },
+  legend: {
+    position: 'top',
+    horizontalAlign: 'left',
+    offsetX: 40
+  }
+};
+
+const series = [{
+  name: 'Marine Sprite',
+  data: [44, 55, 41, 37, 22, 43, 21]
+}, {
+  name: 'Striking Calf',
+  data: [53, 32, 33, 52, 13, 43, 32]
+}, {
+  name: 'Tank Picture',
+  data: [12, 17, 11, 9, 15, 11, 20]
+}, {
+  name: 'Bucket Slope',
+  data: [9, 7, 5, 8, 6, 9, 4]
+}, {
+  name: 'Reborn Kid',
+  data: [25, 12, 19, 32, 25, 24, 10]
+}]
+</script>
+
+<template>
+  <div class="columns is-multiline">
+    <!-- Navigation -->
+    <div class="column is-12">
+      <DepartmentDashboardDailyReportNavigation :selectAllDepartments="!props.departmentSpecific" :loading="false" />
+    </div>
+    <div class="column is-9">
+      <apexchart type="area" height="400px" :options="options" :series="series"></apexchart>
+    </div>
+    <div class="column is-3">
+      <div class="select is-fullwidth is-small mb-4">
+        <select>
+          <option>Day</option>
+          <option>Week</option>
+          <option>Month</option>
+        </select>
+      </div>
+      <h2 class="title is-4 mb-2">Metric Name</h2>
+      <p><label><input type="checkbox"> Metric 1</label></p>
+      <p><label><input type="checkbox"> Metric 2</label></p>
+      <p><label><input type="checkbox"> Metric 3</label></p>
+      <p><label><input type="checkbox"> Metric 4</label></p>
+      <p><label><input type="checkbox"> Metric 5</label></p>
+      <p><label><input type="checkbox"> Metric 6</label></p>
+      <p><label><input type="checkbox"> Metric 7</label></p>
+      <p><label><input type="checkbox"> Metric 8</label></p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>