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 editedData = data.map(e => {
		return {
			name: e.name,
			checks: e.checks - e.violations,
			violations: e.violations
		}
	})

	const mainColors = ['#0088FE20', '#00C49F20', '#FFBB2820', '#FF804220', '#FF000020', '#FFC0CB20'];
	const secondColors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', 'red', 'pink'];

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

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

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

				{/* Левая граница */}
				<line
					x1={x}
					y1={y}
					x2={x}
					y2={y + height}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Правая граница */}
				<line
					x1={x + width}
					y1={y}
					x2={x + width}
					y2={y + height}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Нижняя граница */}
				<line
					x1={x}
					y1={y + height}
					x2={x + width}
					y2={y + height}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>
			</>
		);
	};

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

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

		return (
			<>
				{/* Основной прямоугольник с закруглением ТОЛЬКО ВЕРХНИХ углов */}
				<path
					d={`
          M ${x + borderRadius} ${y}
          L ${x + width - borderRadius} ${y}
          Q ${x + width} ${y} ${x + width} ${y + borderRadius}
          L ${x + width} ${y + height}
          L ${x} ${y + height}
          L ${x} ${y + borderRadius}
          Q ${x} ${y} ${x + borderRadius} ${y}
          Z
        `}
					fill={fill}
				/>

				{/* Верхняя граница */}
				<path
					d={`
          M ${x + borderRadius} ${y}
          L ${x + width - borderRadius} ${y}
        `}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
					fill="none"
				/>

				{/* Левая граница */}
				<line
					x1={x}
					y1={y + borderRadius}
					x2={x}
					y2={y + height}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Правая граница */}
				<line
					x1={x + width}
					y1={y + borderRadius}
					x2={x + width}
					y2={y + height}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
				/>

				{/* Левый верхний закругленный угол */}
				<path
					d={`
          M ${x} ${y + borderRadius}
          Q ${x} ${y} ${x + borderRadius} ${y}
        `}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
					fill="none"
				/>

				{/* Правый верхний закругленный угол */}
				<path
					d={`
          M ${x + width - borderRadius} ${y}
          Q ${x + width} ${y} ${x + width} ${y + borderRadius}
        `}
					stroke={strokeColor}
					strokeWidth={strokeWidth}
					fill="none"
				/>
			</>
		) as any;
	};

	return (
		<BarChart
			style={{ width: '100%', maxWidth: '400px', maxHeight: '210px', aspectRatio: 1.618 }}
			responsive
			data={editedData}
			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 }}
				shape={renderBarWithPartialBorder as any}
			>
				{data.map((_entry, index) => (
					<Cell key={`cell-${index}`} fill={secondColors[index % 20]} />
				))}
			</Bar>
			<Bar
				dataKey="violations"
				stackId="a"
				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
				shape={renderBarWithTopBorder as any}
			>
				{data.map((_entry, index) => (
					<Cell key={`cell-${index}`} fill={mainColors[index % 20]} />
				))}
			</Bar>
		</BarChart>
	);
};