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

'use client'

import { useTranslations } from 'next-intl';
import { useMemo } from 'react';
import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
import { pluralize } from '@/app/lib/pluralize';
import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';

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 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 totalChecks = useStoreWithDevtools(s => s.value1);
	const totalViolations = useStoreWithDevtools(s => s.value2);

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

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

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

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

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

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

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

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

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

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

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

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

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

	const pluralizeCheks = (number: number) => {
		const translate = [t('check'), t('checks-few'), t('checks')];
		return pluralize(number, translate[0], translate[1], translate[2]);
	};

	const pluralizeViolations = (number: number) => {
		const translate = [t('violation'), t('violations-few'), t('violations')];
		return pluralize(number, translate[0], translate[1], translate[2]);
	};

	return (
		<>
			<div className="stacked-bar-chart-wrapper">
				<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={CHECKS_COLOR}
							fontSize={12}
							axisLine={false}
						/>
						<Bar
							dataKey="checks"
							stackId="a"
							label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
							radius={5}
							shape={renderBarWithPartialBorder as any}
						>
							{data.map((_entry, index) => (
								<Cell key={`cell-${index}`} fill={CHECKS_COLOR} />
							))}
						</Bar>
						<Bar
							dataKey="violations"
							stackId="b"
							label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
							radius={5}
							shape={renderBarWithTopBorder as any}
						>
							{data.map((_entry, index) => (
								<Cell key={`cell-${index}`} fill={VIOLATIONS_COLOR} />
							))}
						</Bar>
					</BarChart>
				</div>
				<div className="protection-stat-total-info">
					<div
						className={`font-bold`}
						style={{ color: CHECKS_COLOR }}
					>
						{totalChecks} {pluralizeCheks(totalChecks)}
					</div>
					<div
						className={`font-bold`}
						style={{ color: VIOLATIONS_COLOR }}
					>
						{totalViolations} {pluralizeViolations(totalViolations)}
					</div>
				</div>
			</div>
		</>
	);
};