TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-02-01 11:31:51 +00:00
Code Activity

update chart

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/package-lock.json generated
View File

@ -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",

9
frontend/package.json
View File

@ -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"

61
frontend/src/components/ApplicationChart.tsx
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)}