Update ApplicationChart.tsx

frontend/src/components/ApplicationChart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 
@@ -11,19 +11,27 @@ interface ApplicationChartProps {
 }
 
 const ApplicationChart: React.FC<ApplicationChartProps> = ({ data }) => {
-  const chartData = () => {
+  const [visibleCount, setVisibleCount] = useState(20); // Zeigt zuerst 20 an
-    const appCounts: Record<string, number> = {};
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const [chartStartIndex, setChartStartIndex] = useState(0);
 
+  const appCounts: Record<string, number> = {};
   data.forEach((item) => {
     appCounts[item.nsapp] = (appCounts[item.nsapp] || 0) + 1;
   });
 
-    return {
+  const sortedApps = Object.entries(appCounts)
-      labels: Object.keys(appCounts),
+    .sort(([, a], [, b]) => b - a)
+    .slice(0, visibleCount);
+
+  const chartApps = sortedApps.slice(chartStartIndex, chartStartIndex + 20);
+
+  const chartData = {
+    labels: chartApps.map(([name]) => name),
     datasets: [
       {
         label: "Applications",
-          data: Object.values(appCounts),
+        data: chartApps.map(([, count]) => count),
         backgroundColor: [
           "#ff6384",
           "#36a2eb",
@@ -35,11 +43,60 @@ 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="w-1/2 mx-auto my-6">
-      <Pie data={chartData()} />
+        <Pie data={chartData} />
+      </div>
+
+      <div className="flex justify-center space-x-4">
+        <button
+          onClick={() => setChartStartIndex(Math.max(0, chartStartIndex - 20))}
+          disabled={chartStartIndex === 0}
+          className={`p-2 border rounded ${chartStartIndex === 0 ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 text-white"}`}
+        >
+          ◀ Vorherige 20
+        </button>
+        <button
+          onClick={() => setChartStartIndex(chartStartIndex + 20)}
+          disabled={chartStartIndex + 20 >= sortedApps.length}
+          className={`p-2 border rounded ${chartStartIndex + 20 >= sortedApps.length ? "bg-gray-400 cursor-not-allowed" : "bg-blue-500 text-white"}`}
+        >
+          Next 20 ▶
+        </button>
+      </div>
     </div>
   );
 };