no-copy-frontend/src/app/components/StackedBarChart.tsx

import { useTranslations } from 'next-intl';
import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';

type Files = {
	data: {
		name: string,
		checks: number,
		violations: number
	}[]
}

interface BarShapeProps {
	x: number;
	y: number;
	width: number;
	height: number;
	fill: string;
	radius?: number[];
}

export const StackedBarChart = ({ data }: Files) => {
	const t = useTranslations('Global');

	const strokeColor = "#dfdede24";
	const strokeWidth = 1;

	const renderBarWithPartialBorder = (props: BarShapeProps) => {
		const { x, y, width, height, fill } = props;
		const borderRadius = 10;

		return (
			<>
				{/* Основной прямоугольник с закругленными углами */}
				<rect
					x={x}
					y={y}
					width={width}
					height={height}
					fill={fill}
					rx={borderRadius}
					ry={borderRadius}
				/>

				{/* Левая граница (центральная часть, без закруглений) */}
				<line
					x1={x}
					y1={y + borderRadius}
					x2={x}
					y2={y + height - borderRadius}
				/>

				{/* Правая граница (центральная часть, без закруглений) */}
				<line
					x1={x + width}
					y1={y + borderRadius}
					x2={x + width}
					y2={y + height - borderRadius}
				/>

				{/* Нижняя граница (прямая часть между закруглениями) */}
				<line
					x1={x + borderRadius}
					y1={y + height}
					x2={x + width - borderRadius}
					y2={y + height}
				/>

				{/* Верхняя граница (прямая часть между закруглениями) */}
				<line
					x1={x + borderRadius}
					y1={y}
					x2={x + width - borderRadius}
					y2={y}
				/>
			</>
		);
	};

	const renderBarWithTopBorder = (props: BarShapeProps) => {
		const { x, y, width, height, fill } = props;
		const borderRadius = 10;

		if (height <= 0 || width <= 0) return null;

		return (
			<>
				{/* Основной прямоугольник с закругленными углами */}
				<rect
					x={x}
					y={y}
					width={width}
					height={height}
					fill={fill}
					rx={borderRadius}
					ry={borderRadius}
				/>

				{/* Левая граница (центральная часть, без закруглений) */}
				<line
					x1={x}
					y1={y + borderRadius}
					x2={x}
					y2={y + height - borderRadius}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Правая граница (центральная часть, без закруглений) */}
				<line
					x1={x + width}
					y1={y + borderRadius}
					x2={x + width}
					y2={y + height - borderRadius}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Нижняя граница (прямая часть между закруглениями) */}
				<line
					x1={x + borderRadius}
					y1={y + height}
					x2={x + width - borderRadius}
					y2={y + height}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Верхняя граница (прямая часть между закруглениями) */}
				<line
					x1={x + borderRadius}
					y1={y}
					x2={x + width - borderRadius}
					y2={y}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>
			</>
		);
	};

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