update chart

frontend/package-lock.json

@@ -24,6 +24,7 @@
         "@radix-ui/react-tooltip": "^1.1.2",
         "@vercel/analytics": "^1.2.2",
         "chart.js": "^4.4.1",
+        "chartjs-plugin-datalabels": "^2.2.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
@@ -4173,6 +4174,15 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
     "node_modules/check-error": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",

frontend/package.json

@@ -35,6 +35,7 @@
     "@radix-ui/react-tooltip": "^1.1.2",
     "@vercel/analytics": "^1.2.2",
     "chart.js": "^4.4.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
@@ -66,20 +67,20 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22",
-    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@types/react": "npm:types-react@19.0.0-rc.1",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint-config-next": "15.0.2",
     "eslint": "^9.13.0",
+    "eslint-config-next": "15.0.2",
     "jsdom": "^25.0.1",
     "postcss": "^8",
-    "prettier-plugin-tailwindcss": "^0.6.5",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.9",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^1.1.2",
-    "tailwindcss": "^3.4.9",
     "typescript": "^5",
     "vite-tsconfig-paths": "^5.1.3",
     "vitest": "^2.1.6"

frontend/src/components/ApplicationChart.tsx

@@ -3,16 +3,15 @@
 import React, { useState } from "react";
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels"; 
 
-ChartJS.register(ArcElement, Tooltip, Legend);
+ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);
 
 interface ApplicationChartProps {
   data: { nsapp: string }[];
 }
 
 const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
-  const [visibleCount, setVisibleCount] = useState(20); // Zeigt zuerst 20 an
-  const [highlighted, setHighlighted] = useState<string | null>(null);
   const [chartStartIndex, setChartStartIndex] = useState(0);
 
   const appCounts: Record<string, number> = {};
@@ -20,10 +19,7 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
     appCounts[item.nsapp] = (appCounts[item.nsapp] || 0) + 1;
   });
 
-  const sortedApps = Object.entries(appCounts)
+  const sortedApps = Object.entries(appCounts).sort(([, a], [, b]) => b - a);
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, visibleCount);
-
   const chartApps = sortedApps.slice(chartStartIndex, chartStartIndex + 20);
 
   const chartData = {
@@ -45,40 +41,23 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
   };
 
   return (
-    <div className="mt-6">
+    <div className="mt-6 text-center">
-      <table className="w-full border-collapse border border-gray-600">
-        <thead>
-          <tr className="bg-gray-800 text-white">
-            <th className="p-2 border">Application</th>
-            <th className="p-2 border">Count</th>
-          </tr>
-        </thead>
-        <tbody>
-          {sortedApps.map(([name, count]) => (
-            <tr
-              key={name}
-              className={`cursor-pointer ${highlighted === name ? "bg-yellow-300" : "hover:bg-gray-200"}`}
-              onMouseEnter={() => setHighlighted(name)}
-              onMouseLeave={() => setHighlighted(null)}
-            >
-              <td className="p-2 border">{name}</td>
-              <td className="p-2 border">{count}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      {visibleCount < Object.keys(appCounts).length && (
-        <button
-          onClick={() => setVisibleCount((prev) => prev + 20)}
-          className="mt-4 p-2 bg-blue-500 text-white rounded"
-        >
-          Load More
-        </button>
-      )}
-
       <div className="w-1/2 mx-auto my-6">
-        <Pie data={chartData} />
+        <Pie
+          data={chartData}
+          options={{
+            plugins: {
+              legend: { display: false },
+              datalabels: {
+                color: "white",
+                font: { weight: "bold" },
+                formatter: (value, context) => {
+                  return context.chart.data.labels?.[context.dataIndex] || "";
+                },
+              },
+            },
+          }}
+        />
       </div>
 
       <div className="flex justify-center space-x-4">
@@ -87,7 +66,7 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
           disabled={chartStartIndex === 0}
           className={`p-2 border rounded ${chartStartIndex === 0 ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 text-white"}`}
         >
-          ◀ Vorherige 20
+          ◀ Last 20
         </button>
         <button
           onClick={() => setChartStartIndex(chartStartIndex + 20)}