fix stacked bar shar diagram

src/app/ui/marking-page/protection-summary.tsx

@@ -6,34 +6,39 @@ import { useTranslations } from 'next-intl';
 
 const data = [
 	{
-		name: 'Page A',
+		name: 'File A',
 		checks: 4000,
 		violations: 2000
 	},
 	{
-		name: 'Page B',
+		name: 'File B',
 		checks: 3000,
-		violations: 1398
+		violations: 1400
 	},
 	{
-		name: 'Page C',
+		name: 'File C',
 		checks: 2000,
 		violations: 1000
 	},
 	{
-		name: 'Page D',
+		name: 'File D',
 		checks: 2780,
 		violations: 1000
 	},
 	{
-		name: 'Page E',
+		name: 'File E',
 		checks: 5090,
 		violations: 4800
 	},
 	{
-		name: 'Page F',
+		name: 'File F',
 		checks: 5390,
 		violations: 3800
+	},
+	{
+		name: 'File H',
+		checks: 4000,
+		violations: 1500
 	}
 ];
 
@@ -73,8 +78,22 @@ export default function ProtectionSummary() {
 					}
 				</div>
 				{isOpen ? (
-					<div className="protection-stat total-usage">
-						<StackedBarChart data={data} />
+					<div className="protection-stat total-usage relative">
+						<div className="stacked-bar-chart">
+							<StackedBarChart data={data} />
+						</div>
+						<div className="protection-stat-total-info">
+							<div
+								className="font-bold"
+							>
+								{t('check')}: 777
+							</div>
+							<div
+								className="font-bold text-[#f08c00]"
+							>
+								{t('violations')}: 777
+							</div>
+						</div>
 					</div>
 				) : (
 					<div className="protection-stat total-usage">