redesign

src/app/components/StackedBarChart.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
 import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
 
 type Files = {
@@ -23,12 +24,19 @@ interface BarShapeProps {
 export const StackedBarChart = ({ data }: Files) => {
 	const t = useTranslations('Global');
 
-	const strokeColor = "#dfdede24";
-	const strokeWidth = 1;
+	const CHECKS_COLOR = '#6366f1';
+	const VIOLATIONS_COLOR = '#f08c00'
+	const BORDER_RADIUS = 5;
+	const STROKE_COLOR = "#dfdede24";
+	const STROKE_WIDTH = 1;
+
+	const { totalChecks, totalViolations } = useMemo(() => ({
+		totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0),
+		totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0)
+	}), [data]);
 
 	const renderBarWithPartialBorder = (props: BarShapeProps) => {
 		const { x, y, width, height, fill } = props;
-		const borderRadius = 10;
 
 		return (
 			<>
@@ -39,39 +47,39 @@ export const StackedBarChart = ({ data }: Files) => {
 					width={width}
 					height={height}
 					fill={fill}
-					rx={borderRadius}
-					ry={borderRadius}
+					rx={BORDER_RADIUS}
+					ry={BORDER_RADIUS}
 				/>
 
 				{/* Левая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x}
-					y2={y + height - borderRadius}
+					y2={y + height - BORDER_RADIUS}
 				/>
 
 				{/* Правая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x + width}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x + width}
-					y2={y + height - borderRadius}
+					y2={y + height - BORDER_RADIUS}
 				/>
 
 				{/* Нижняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y + height}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y + height}
 				/>
 
 				{/* Верхняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y}
 				/>
 			</>
@@ -80,7 +88,6 @@ export const StackedBarChart = ({ data }: Files) => {
 
 	const renderBarWithTopBorder = (props: BarShapeProps) => {
 		const { x, y, width, height, fill } = props;
-		const borderRadius = 10;
 
 		if (height <= 0 || width <= 0) return null;
 
@@ -93,48 +100,48 @@ export const StackedBarChart = ({ data }: Files) => {
 					width={width}
 					height={height}
 					fill={fill}
-					rx={borderRadius}
-					ry={borderRadius}
+					rx={BORDER_RADIUS}
+					ry={BORDER_RADIUS}
 				/>
 
 				{/* Левая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x}
-					y2={y + height - borderRadius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					y2={y + height - BORDER_RADIUS}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 
 				{/* Правая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x + width}
-					y1={y + borderRadius}
+					y1={y + BORDER_RADIUS}
 					x2={x + width}
-					y2={y + height - borderRadius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					y2={y + height - BORDER_RADIUS}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 
 				{/* Нижняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y + height}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y + height}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 
 				{/* Верхняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x + borderRadius}
+					x1={x + BORDER_RADIUS}
 					y1={y}
-					x2={x + width - borderRadius}
+					x2={x + width - BORDER_RADIUS}
 					y2={y}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
+					stroke={STROKE_COLOR}
+					strokeWidth={STROKE_WIDTH}
 				/>
 			</>
 		);
@@ -159,44 +166,44 @@ export const StackedBarChart = ({ data }: Files) => {
 						{/* <Tooltip /> */}
 						<XAxis
 							dataKey="name"
-							stroke="#fff"
+							stroke={CHECKS_COLOR}
 							fontSize={12}
 							axisLine={false}
 						/>
 						<Bar
 							dataKey="checks"
 							stackId="a"
-							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
 							radius={5}
 							shape={renderBarWithPartialBorder as any}
 						>
 							{data.map((_entry, index) => (
-								<Cell key={`cell-${index}`} fill={'#fff'} />
+								<Cell key={`cell-${index}`} fill={CHECKS_COLOR} />
 							))}
 						</Bar>
 						<Bar
 							dataKey="violations"
 							stackId="b"
-							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
 							radius={5}
 							shape={renderBarWithTopBorder as any}
 						>
 							{data.map((_entry, index) => (
-								<Cell key={`cell-${index}`} fill={'#f08c00'}/>
+								<Cell key={`cell-${index}`} fill={VIOLATIONS_COLOR} />
 							))}
 						</Bar>
 					</BarChart>
 				</div>
 				<div className="protection-stat-total-info">
 					<div
-						className="font-bold"
+						className={`font-bold text-[${CHECKS_COLOR}]`}
 					>
-						{t('check')}: 777
+						{t('check')}: {totalChecks}
 					</div>
 					<div
-						className="font-bold text-[#f08c00]"
+						className={`font-bold text-[${VIOLATIONS_COLOR}]`}
 					>
-						{t('violations')}: 777
+						{t('violations')}: {totalViolations}
 					</div>
 				</div>
 			</div>