update chart

This commit is contained in:
CanbiZ
2025-01-30 13:38:25 +01:00
parent 737b18dea5
commit e2b548a7c3
3 changed files with 35 additions and 45 deletions

View File

@ -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)}