update chart

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)
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, visibleCount);
-
+  const sortedApps = Object.entries(appCounts).sort(([, a], [, b]) => b - a);
   const chartApps = sortedApps.slice(chartStartIndex, chartStartIndex + 20);
 
   const chartData = {
@@ -45,40 +41,23 @@ const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
   };
 
   return (
-    <div className="mt-6">
-      <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="mt-6 text-center">
       <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)}