transfer stacked bart chart from overview block

2025-12-28 11:34:22 +07:00
parent bd2ec273a9
commit 6d9313cbb8
7 changed files with 244 additions and 154 deletions
@@ -1,3 +1,5 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';

@@ -139,47 +141,65 @@ export const StackedBarChart = ({ data }: Files) => {
 	};

 	return (
-		<BarChart
-			style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
-			responsive
-			data={data}
-			barCategoryGap={15}
-			margin={{
-				top: 20,
-				right: 0,
-				left: 0,
-				bottom: 5,
-			}}
-		>
-			{/* <Tooltip /> */}
-			<XAxis
-				dataKey="name"
-				stroke="#fff"
-				fontSize={12}
-				axisLine={false}
-			/>
-			<Bar
-				dataKey="checks"
-				stackId="a"
-				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
-				radius={5}
-				shape={renderBarWithPartialBorder as any}
-			>
-				{data.map((_entry, index) => (
-					<Cell key={`cell-${index}`} fill={'#fff'} />
-				))}
-			</Bar>
-			<Bar
-				dataKey="violations"
-				stackId="b"
-				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
-				radius={5}
-				shape={renderBarWithTopBorder as any}
-			>
-				{data.map((_entry, index) => (
-					<Cell key={`cell-${index}`} fill={'#f08c00'} />
-				))}
-			</Bar>
-		</BarChart>
+		<>
+			<div className="protection-stat relative">
+				<div className="stacked-bar-chart">
+					<BarChart
+						style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
+						responsive
+						data={data}
+						barCategoryGap={15}
+						margin={{
+							top: 20,
+							right: 0,
+							left: 0,
+							bottom: 5,
+						}}
+					>
+						{/* <Tooltip /> */}
+						<XAxis
+							dataKey="name"
+							stroke="#fff"
+							fontSize={12}
+							axisLine={false}
+						/>
+						<Bar
+							dataKey="checks"
+							stackId="a"
+							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							radius={5}
+							shape={renderBarWithPartialBorder as any}
+						>
+							{data.map((_entry, index) => (
+								<Cell key={`cell-${index}`} fill={'#fff'} />
+							))}
+						</Bar>
+						<Bar
+							dataKey="violations"
+							stackId="b"
+							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							radius={5}
+							shape={renderBarWithTopBorder as any}
+						>
+							{data.map((_entry, index) => (
+								<Cell key={`cell-${index}`} fill={'#f08c00'}/>
+							))}
+						</Bar>
+					</BarChart>
+				</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>
+		</>
 	);
 };