change marking page layout

2025-12-16 15:03:32 +07:00
parent e94b0bf041
commit c9784bf18f
10 changed files with 340 additions and 28 deletions
@@ -0,0 +1,204 @@
+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 = "#fff";
+	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: '700px', maxHeight: '210px', aspectRatio: 1.618 }}
+			responsive
+			data={editedData}
+			margin={{
+				top: 20,
+				right: 0,
+				left: 0,
+				bottom: 5,
+			}}
+		>
+			{/* <Tooltip /> */}
+			<XAxis
+				dataKey="name"
+				stroke="#fff"
+				axisLine={false}
+			/>
+			<Bar
+				dataKey="checks"
+				stackId="a"
+				label={{ position: 'top', fill: '#fff' }}
+				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' }}
+				shape={renderBarWithTopBorder as any}
+			>
+				{data.map((_entry, index) => (
+					<Cell key={`cell-${index}`} fill={mainColors[index % 20]} />
+				))}
+			</Bar>
+		</BarChart>
+	);
+};