feature: Vendor distribution and top 5 packages charts

frontend/src/components/UIElements/Metrics.vue

@@ -16,7 +16,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <n-card class="homepage-widget mb-2" content-style="padding: 0">
+  <n-card class="homepage-widget" content-style="padding: 0">
     <div class="card-body p-0">
       <div class="row row-cols-xxl-5 row-cols-md-3 row-cols-1 g-0">
         <div class="col">

frontend/src/localization/en.json

@@ -75,6 +75,22 @@
           "error": "An error occurred while fetching the last discovery."
         }
       }
+    },
+    "vendor_counts": {
+      "title": "Vendor Distribution",
+      "fetch": {
+        "messages": {
+          "error": "An error occurred while fetching vendor distribution."
+        }
+      }
+    },
+    "most_used_packages": {
+      "title": "Most Used Packages (Top 5)",
+      "fetch": {
+        "messages": {
+          "error": "An error occurred while fetching most used packages."
+        }
+      }
     }
   },
   "asset": {
@@ -199,12 +215,12 @@
   },
   "package": {
     "title": "Packages",
-    "description": "You can view your packages and their machine counts here. You can also create PDF/CSV reports.",
+    "description": "You can view your packages and their asset counts here. You can also create PDF/CSV reports.",
     "table": {
       "name": "Name",
       "vendor": "Vendor",
       "version": "Version",
-      "count": "Machine Count"
+      "count": "Asset Count"
     },
     "fetch": {
       "messages": {

frontend/src/localization/tr.json

@@ -75,6 +75,22 @@
           "error": "Son keşif getirilirken bir hata oluştu."
         }
       }
+    },
+    "vendor_counts": {
+      "title": "Sağlayıcı Dağılımı",
+      "fetch": {
+        "messages": {
+          "error": "Sağlayıcı dağılımı getirilirken bir hata oluştu."
+        }
+      }
+    },
+    "most_used_packages": {
+      "title": "En Çok Kullanılan Paketler (İlk 5)",
+      "fetch": {
+        "messages": {
+          "error": "En çok kullanılan paketler getirilirken bir hata oluştu."
+        }
+      }
     }
   },
   "asset": {
@@ -199,12 +215,12 @@
   },
   "package": {
     "title": "Paketler",
-    "description": "Paketlerinizi ve yüklü oldukları makine sayılarını görüntüleyebilirsiniz. Ayrıca PDF/CSV raporlar oluşturabilirsiniz.",
+    "description": "Paketlerinizi ve yüklü oldukları varlık sayılarını görüntüleyebilirsiniz. Ayrıca PDF/CSV raporlar oluşturabilirsiniz.",
     "table": {
       "name": "Adı",
       "vendor": "Sağlayıcı",
       "version": "Versiyon",
-      "count": "Makine Sayısı"
+      "count": "Varlık Sayısı"
     },
     "fetch": {
       "messages": {

frontend/src/stores/metric.ts

@@ -10,13 +10,17 @@ export const useMetricStore = defineStore({
     package_count: 0,
     added_assets: [] as { date: string; count: number }[],
     last_discovery: {} as { time: string },
+    vendor_counts: [] as { vendor: string; count: number }[],
+    most_used_packages: [] as { name: string; count: number }[],
   }),
   getters: {
     getAssetCount: (state) => state.asset_count,
     getDiscoveryCount: (state) => state.discovery_count,
     getPackageCount: (state) => state.package_count,
     getAddedAssets: (state) => state.added_assets,
     getLastDiscovery: (state) => state.last_discovery,
+    getVendorCounts: (state) => state.vendor_counts,
+    getMostUsedPackages: (state) => state.most_used_packages,
   },
   actions: {
     async fetchAssetCount() {
@@ -84,5 +88,33 @@ export const useMetricStore = defineStore({
         }
       })
     },
+    async fetchVendorCounts() {
+      return http.get(`metrics/vendor_counts`).then((res) => {
+        if (res.status == 200) {
+          this.vendor_counts = res.data
+        } else {
+          window.$notification.error({
+            title: i18n.t("common.error"),
+            content: i18n.t("dashboard.vendor_counts.fetch.messages.error"),
+            duration: 5000,
+          })
+        }
+      })
+    },
+    async fetchMostUsedPackages() {
+      return http.get(`metrics/most_used_packages`).then((res) => {
+        if (res.status == 200) {
+          this.most_used_packages = res.data
+        } else {
+          window.$notification.error({
+            title: i18n.t("common.error"),
+            content: i18n.t(
+              "dashboard.most_used_packages.fetch.messages.error",
+            ),
+            duration: 5000,
+          })
+        }
+      })
+    },
   },
 })

frontend/src/views/pages/Dashboard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue"
+import { onMounted } from "vue"
 import { useRouter } from "vue-router"
 import { useI18n } from "vue-i18n"
 import { useMetricStore } from "@/stores/metric"
@@ -16,27 +16,32 @@ const store = useMetricStore()
 onMounted(() => {
   store.fetchAddedAssets()
   store.fetchLastDiscovery()
+  store.fetchVendorCounts()
+  store.fetchMostUsedPackages()
 })
 
-const lineOptions = ref({
-  chart: {
-    fontFamily: "Inter",
-    locales: [
-      {
-        name: "tr",
-        options: {
-          ...apexTR,
-        },
+const chartOptions = {
+  fontFamily: "Inter",
+  locales: [
+    {
+      name: "tr",
+      options: {
+        ...apexTR,
       },
-      {
-        name: "en",
-        options: {
-          ...apexEN,
-        },
+    },
+    {
+      name: "en",
+      options: {
+        ...apexEN,
       },
-    ],
-    defaultLocale: document.documentElement.lang,
-    height: 250,
+    },
+  ],
+  defaultLocale: document.documentElement.lang,
+}
+
+const lineOptions = {
+  chart: {
+    ...chartOptions,
     type: "line",
     dropShadow: {
       enabled: true,
@@ -68,6 +73,41 @@ const lineOptions = ref({
   yaxis: {
     show: false,
   },
+}
+
+const barOptions = (categories: string[]) => ({
+  chart: {
+    ...chartOptions,
+    type: "bar",
+  },
+  plotOptions: {
+    bar: {
+      borderRadius: 2,
+      horizontal: true,
+      distributed: true,
+    },
+  },
+  legend: {
+    show: false,
+  },
+  xaxis: {
+    categories: categories,
+    labels: {
+      formatter: (val: number) => {
+        return val.toFixed(0)
+      },
+    },
+  },
+  tooltip: {
+    y: {
+      formatter: (val: number) => {
+        return val.toString()
+      },
+    },
+  },
+  dataLabels: {
+    enabled: false,
+  },
 })
 </script>
 
@@ -76,28 +116,29 @@ const lineOptions = ref({
     :title="t('dashboard.title')"
     :description="t('dashboard.description')"
   />
-  <n-grid :cols="2" x-gap="15" y-gap="5">
+  <n-grid :cols="2" x-gap="15" y-gap="15">
     <n-gi :span="2">
       <Metrics />
     </n-gi>
     <n-gi>
       <n-card style="height: 17rem">
-        <template #header>
-          <h5 class="text-uppercase fs-13">
+        <template #default>
+          <h5 class="text-uppercase fs-13 mb-4">
             {{ t("dashboard.assets.title") }}
             <small class="ml-1">{{ t("common.last_week") }}</small>
           </h5>
-        </template>
-        <template #default>
           <apexchart
             type="line"
             height="200"
             :options="lineOptions"
-            class="mt-n4"
+            class="mt-n3"
             :series="[
               {
                 name: t('dashboard.assets.title'),
-                data: store.getAddedAssets.map((m) => [m.date, m.count]),
+                data: store.getAddedAssets.map((item) => [
+                  item.date,
+                  item.count,
+                ]),
               },
             ]"
           ></apexchart>
@@ -134,5 +175,49 @@ const lineOptions = ref({
         </div>
       </n-card>
     </n-gi>
+    <n-gi>
+      <n-card style="height: 18rem">
+        <template #default>
+          <h5 class="text-uppercase fs-13 mb-4">
+            {{ t("dashboard.vendor_counts.title") }}
+          </h5>
+          <apexchart
+            type="bar"
+            height="225"
+            :options="
+              barOptions(store.getVendorCounts.map((item) => item.vendor))
+            "
+            :series="[
+              {
+                name: t('dashboard.assets.title'),
+                data: store.getVendorCounts.map((item) => item.count),
+              },
+            ]"
+          ></apexchart>
+        </template>
+      </n-card>
+    </n-gi>
+    <n-gi>
+      <n-card style="height: 18rem">
+        <template #default>
+          <h5 class="text-uppercase fs-13 mb-4">
+            {{ t("dashboard.most_used_packages.title") }}
+          </h5>
+          <apexchart
+            type="bar"
+            height="225"
+            :options="
+              barOptions(store.getMostUsedPackages.map((item) => item.name))
+            "
+            :series="[
+              {
+                name: t('dashboard.packages.title'),
+                data: store.getMostUsedPackages.map((item) => item.count),
+              },
+            ]"
+          ></apexchart>
+        </template>
+      </n-card>
+    </n-gi>
   </n-grid>
 </template>